quarto-dev / quarto-dev/quarto-cli
Not rendering Plotly tables in tabset correctly
Open
Nobody has claimed this yet.
bug
plotly
third-party
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
Bug description
Using Plotly tables in separate tabsets seems to create issues rendering, especially cells with spaces. The first tab renders correctly but the others do not, and the figure dimensions have to be set manually as the article layout for the column size doesn't apply the same way to the following tabs. However, if the table is large enough and requires scrolling, scrolling down and back up may render the data. This was rendered as a ".ipynb" file on Windows 11 Enterprise with Python 3.9.13, Plotly 5.13.1, and Quarto 1.2.335.
---
title: "MOVES Benchmark Comparisons"
author: "Max Collins"
date: "2/28/2023"
execute:
echo: false
format:
html:
code-fold: true
embed-resources: true
theme: materia
---
```py
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
import plotly.express as px
import pandas as pd
import numpy as np
from plotly.colors import n_colors
import plotly.io as pio
import matplotlib as plt
pio.renderers.default = "plotly_mimetype+notebook_connected"
```
::: {.column-screen}
## Run Definitions
:::
:::: {.column-screen-inset}
::: {.panel-tabset}
## Nonroad and Rates
```py
perf_tableNR_Rates = readExcel(r'C:\Users\mcolli03\OneDrive - Environmental Protection Agency (EPA)\Documents\Python Scripts\Performance\data\compiled\performance_testing_NR_Rates.xlsx', 'RunDef')
df = perf_tableNR_Rates
col_widths = [400]*14 + [850]
table2 = go.Figure(data=[go.Table(
columnwidth=col_widths,
header=dict(values=list(df.columns),
line_color=grey,
fill_color=grey,
align='center',
font=dict(size=14),
height=40),
cells=dict(values=[df.Run, df.Model, df.Scale, df.Type, df['Year(s)'], df['Month(s)'], df['Day(s)'], df['Hour(s)'], df.Location, df.Vehicle, df['Fuel/Type'],
df.Road, df['Output Agg'], df.PreAgg, df['Pollutants/Processes']],
align='left',
height=50))
])
table2.update_layout(width=1700, height=500)
table2.show()
```
## PreAgg
```py
perf_tablePreAgg = readExcel(r'C:\Users\mcolli03\OneDrive - Environmental Protection Agency (EPA)\Documents\Python Scripts\Performance\data\compiled\performance_testing_PreAgg.xlsx', 'RunDef')
df = perf_tablePreAgg
col_widths = [400]*14 + [850]
table3 = go.Figure(data=[go.Table(
columnwidth=col_widths,
header=dict(values=list(df.columns),
line_color=grey,
fill_color=grey,
align='center',
font=dict(size=14),
height=40),
cells=dict(values=[df.Run, df.Model, df.Scale, df.Type, df['Year(s)'], df['Month(s)'], df['Day(s)'], df['Hour(s)'], df.Location, df.Vehicle, df['Fuel/Type'],
df.Road, df['Output Agg'], df.PreAgg, df['Pollutants/Processes']],
align='left',
height=50))
])
table3.update_layout(width=1700, height=500)
table3.show()
```
## By Size
```py
perf_tableScales = readExcel(r'C:\Users\mcolli03\OneDrive - Environmental Protection Agency (EPA)\Documents\Python Scripts\Performance\data\compiled\performance_testing_Scales.xlsx', 'RunDef')
df = perf_tableScales
col1 = ['rgb(255, 244, 134)']
col1_light = ['rgb(255, 250, 192)']
col2 = ['rgb(255, 172, 228)']
col2_light = ['rgb(255, 225, 246)']
col3 = ['rgb(112, 183, 126)']
col3_light = ['rgb(170, 209, 177)']
col4 = ['rgb(161, 205, 241)']
col4_light = ['rgb(213, 230, 243)']
col5 = ['rgb(235, 190, 155)']
col5_light = ['rgb(242, 222, 207)']
col6 = ['rgb(217,153,185)']
col6_light = ['rgb(225, 197, 211)']
grey = ['rgb(202, 197, 200)']
l_grey = ['rgb(235,231,233)']
lgrey_line = l_grey*15
lcol1_line = col1+(col1_light*14)
lcol2_line = col2+(col2_light*14)
lcol3_line = col3+(col3_light*14)
lcol4_line = col4+(col4_light*14)
lcol5_line = col5+(col5_light*14)
colors = np.array([lgrey_line, lgrey_line, lgrey_line, lcol1_line, lgrey_line,
lgrey_line, lgrey_line, lcol2_line, lcol3_line, lcol4_line, lcol5_line]).T
col_widths = [400]*14 + [850]
table1 = go.Figure(data=[go.Table(
columnwidth=col_widths,
header=dict(values=list(df.columns),
line_color=grey,
fill_color=grey,
align='center',
font=dict(size=14),
height=40),
cells=dict(values=[df.Run, df.Model, df.Scale, df.Type, df['Year(s)'], df['Month(s)'], df['Day(s)'], df['Hour(s)'], df.Location, df.Vehicle, df['Fuel/Type'],
df.Road, df['Output Agg'], df.PreAgg, df['Pollutants/Processes']],
fill_color=colors,
align='left',
height=50))
])
table1.update_layout(width=1700, height=450)
table1.show()
```
:::
::::



Checklist
- Please include a minimal, fully reproducible example in a single .qmd file? Please provide the whole file rather than the snippet you believe is causing the issue.
- Please format your issue so it is easier for us to read the bug report.
- Please document the RStudio IDE version you're running (if applicable), by providing the value displayed in the "About RStudio" main menu dialog?
- Please document the operating system you're running. If on Linux, please provide the specific distribution.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.