quarto-dev / quarto-dev/quarto-cli

Not rendering Plotly tables in tabset correctly

Open
#4,705 16 comments 0 reactions 1 assignee View on GitHub

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()
```
:::
::::

![Screenshot 2023-03-08 111428](https://user-images.githubusercontent.com/120656726/223768638-d39cd749-ddd9-4d38-a680-53e29e3d2458.png)
![Screenshot 2023-03-08 111523](https://user-images.githubusercontent.com/120656726/223768642-15aea877-66d0-452b-8352-da9b4c905bbe.png)
![Screenshot 2023-03-08 111542](https://user-images.githubusercontent.com/120656726/223768644-1f7c6200-cc5f-4b5b-9019-8c4edf0d0f74.png)


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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.