Not rendering Plotly tables in tabset correctly

[epamax]

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.

[cscheid]

Thanks for the report. Unfortunately, the markdown you shared is not sufficient for us to reproduce the issue. Can you try producing a smaller example that I can fully execute on my side to check? Thanks.

[epamax]

Sure, I wrote up a quick example.

---
title: "Tabset Bug Report"
author: "Max Collins"
date: "3/10/2023"
execute:
  echo: false
format: 
  html:
    code-fold: true
    embed-resources: true
    theme: materia
---

```{python}
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import numpy as np
import seaborn as sns
import plotly.io as pio

pio.renderers.default = "plotly_mimetype+notebook_connected"
#pio.renderers.default = "browser"

df = sns.load_dataset('exercise')
```

:::{.panel-tabset}
## Table 1 (rendered)
All cells are rendered.
```{python}
col_widths = [800]*6
test = go.Figure(data=[go.Table(
    columnwidth=col_widths,
    header=dict(values=list(df.columns[1:]),
                align='center',
                font=dict(size=14),
                height=70),
    cells=dict(values=[df.id, df.diet, df.pulse, df.time, df.kind],
               align='left',
               height=50))
])

test.update_layout(width=1400, height=450)
test.show()
```
## Table 2 (unrendered)
Cells with spaces are empty unless scrolling down and back up. 
```{python}
col_widths = [800]*6
test = go.Figure(data=[go.Table(
    columnwidth=col_widths,
    header=dict(values=list(df.columns[1:]),
                align='center',
                font=dict(size=14),
                height=70),
    cells=dict(values=[df.id, df.diet, df.pulse, df.time, df.kind],
               align='left',
               height=50))
])

test.update_layout(width=1400, height=450)
test.show()
```
:::

[cscheid]

I can repro this. Unfortunately, that looks like it'll be very hard for us to fix, since it looks like the issue is coming from Plotly's renderer (since the missing items are sub-elements of their own widgets; it's not like we're missing the entire table or something like that). It seems like they are doing some kind of on-demand rendering that doesn't get triggered on tabset visibility events or something like that.

EDIT: You can see this in action if you look at the HTML inspector, and for some reason the SVG is missing the text elements. We don't control the call to the renderer (we just use the javascript output that comes from the ipynb document), so I don't know what we could be doing differently here.

[andrie]

I have found a workaround, with small adaptations to the answer at https://stackoverflow.com/a/62572610/602276

The most important modification to that answer is to use _Plotly.relayout() instead of Plotly.relayout()

```{=HTML}
<!-- adapted from https://stackoverflow.com/a/62572610/602276 -->
<script type="text/javascript" charset="utf-8">
$(document).on('shown.bs.tab', function (event) {
    console.log("Tab shown");
    var doc = $(".tab-pane.active .plotly-graph-div");
    for (var i = 0; i < doc.length; i++) {
        _Plotly.relayout(doc[i], {autosize: true});
    }
});
</script>
```

(For convenience I created an HTML chunk but it would probably be preferable to link to this script in the HTML header instead.)

You can view my rendered report at https://andrie.quarto.pub/river-thames-conditions-at-hampton-court/

And the source code is at https://github.com/andrie/thames_river_conditions/blob/main/thames-river-levels.qmd

[cscheid]

@andrie This is super helpful, thank you. I wonder if it unlocks our other Plotly layout bugs