Quarto Dashboard python plotly unexpected behavior

[javendaXgh]

Bug description

I am creating a dashboard with Quarto using RStudio. When using the "multiple pages" format and creating a plotly chart using python the following happens:

1. In the plotly graph when clicking on any button of the "displayModeBar" all the elements of the dashboard page disappear and to make them reappear, in the "navigation bar" it is necessary to select any page to show the content again.
2. If I try to disable the "displayModeBar" in the py-plotly chart, it does not do it.

This behavior does not occur if I generate the same chart using an R chunk with plotly in the same dashboard. It also does not occur if I generate a "Quarto Document" or if I stop using the "multiple pages".

Important, it only happens when placing the level 1 (#).

Sorry if I am omitting information or if there is a previous answer that addresses this issue. This is my first time submitting an issue and I tried to read the related issues beforehand.

Steps to reproduce

---
title: "Quarto Dashboard Test"
format: dashboard
---

```{r}
library(reticulate)
```
# Page 1

```{python}
#| title: pl in py
import plotly.graph_objects as go

fig = go.Figure()

fig=fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[1, 3, 1]))

fig.show(config={'displayModeBar': False})

```

```{r}
#| title: pl in R
library(plotly)
df= data.frame( x=c(1, 2, 3),
                y=c(1, 3, 1))
plot_ly(data= df, x=~x)%>%
  add_trace( y= ~y, mode = 'lines+markers')

```

Expected behavior

That when clicking on some element of the "displayModeBar" it behaves according to the applied functionality.

Actual behavior

Part of the dashboard content disappears and it is necessary to select a page in the navigation bar to show all the content again.

Before click on displayModeBar

After click on displayModeBar

Your environment

• IDE: RStudio Version 2023.12.1+402 (2023.12.1+402)
• OS: MacOS Sonama 14.3.1

Quarto check output

Quarto 1.4.550
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.11: OK
      Dart Sass version 1.69.5: OK
      Deno version 1.37.2: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.4.550
      Path: /Applications/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: TinyTex
      Path: /Users/josemiguelavendanoinfante/Library/TinyTeX/bin/universal-darwin
      Version: 2023

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.12.2
      Path: /opt/homebrew/opt/python@3.12/bin/python3.12
      Jupyter: (None)

      Jupyter is not available in this Python installation.
      Install with python3 -m pip install jupyter

[✓] Checking R installation...........OK
      Version: 4.3.2
      Path: /Library/Frameworks/R.framework/Resources
      LibPaths:
        - /Users/josemiguelavendanoinfante/Library/R/arm64/4.3/library
        - /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library
      knitr: 1.45
      rmarkdown: 2.25

[✓] Checking Knitr engine render......OK

[cscheid]

Can you try to create a reproduction that doesn't require this? (That's not reproducible for us)

```{r}
library(reticulate)

Sys.unsetenv('RETICULATE_PYTHON')
use_python('/Users/...../bin/python3.10')
```

[javendaXgh]

I have modified it

[cderv]

I can reproduce with Plotly python 5.19 and latest quarto

Note that the config does not seem to work with reticulate for me.

fig.show(config={'displayModeBar': False})

This still show the bar

Anyhow, I don't see any error / message in browser console. So it seems like a bad interaction somehow...

We have another at:

• Dashboard with plotly cuts the legends in preview #8612
  Just linking the two for reference

This behavior does not occur if I generate the same chart using an R chunk with plotly in the same dashboard.

I don't know what the difference in integration is between Python package and R package for plotly. Could be a version difference...

It also does not happen when using Jupyter directly

---
title: "Quarto Dashboard Test"
format: dashboard
---

# Page 1

```{python}
#| title: pl in py
import plotly.graph_objects as go

fig = go.Figure()

fig=fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[1, 3, 1]))

fig.show()

```

So it seems to be a problem with py-plotly when used in reticulate. We now we have differences, especially with plotly through reticulate not adapting the default renderers (https://plotly.com/python/renderers/#setting-the-default-renderer)

We'll look into this to make the experience similar for R and Jupyter users.

Quarto changes some settings for Jupyter engine for example, but when Python is used through Knitr engine.

quarto-cli/src/resources/jupyter/lang/python/setup.py

Lines 29 to 39 in 2485d18

	# plotly use connected mode
	try:
	import plotly.io as pio
	if plotly_connected:
	pio.renderers.default = "notebook_connected"
	else:
	pio.renderers.default = "notebook"
	for template in pio.templates.keys():
	pio.templates[template].layout.margin = dict(t=30,r=0,b=0,l=0)
	except Exception:
	pass

It could be related (but I can make it works while testing right now)

[cderv]

I believe this is directly related to the renderers used for Plotly.

Changing it to iframe_connected for example solves the issue.

---
title: "Quarto Dashboard Test"
format: dashboard
keep-md: true
---

```{r}
library(reticulate)
```

# Page 1

```{python}
#| include: false
import plotly.graph_objects as go
import plotly.io as pio
pio.renderers.default = "iframe_connected"
```

```{python}
#| title: pl in py
fig = go.Figure()

fig=fig.add_trace(
    go.Scatter(
        x=[1, 2, 3],
        y=[1, 3, 1]))

fig.show(config={'displayModeBar': False})

```

To be clear this is a test. iframe_connected could have other issues maybe with Dashboard. But this seems like a valid workaround in knitr context for Dashboard.

As I am curious, I looked deeper. If I add this chunk to the dashboard for reticulate

```{python}
import plotly.graph_objects as go
import plotly.io as pio
pio.renderers
```

It will show us in the dashboard produced that defaults with reticulate seems to be browser renderer.

Not sure how reticulate handles this one to extract the dependencies. But at this ends this is what seems to create the conflict with the Dashboard.

So I do think, this is related to reticulate handling of different Plotly renderers, and what can be supported with the Quarto Dahsboard format.

In Quarto we do some processing regarding Plotly, and for format: dashboard we set notebook as the renderer, and for any other document this is notebook_connected

As mentioned, we set notebook or notebook_connected in there (this is what is required for usage with Jupyter. )

quarto-cli/src/resources/jupyter/lang/python/setup.py

Lines 29 to 39 in 2485d18

	# plotly use connected mode
	try:
	import plotly.io as pio
	if plotly_connected:
	pio.renderers.default = "notebook_connected"
	else:
	pio.renderers.default = "notebook"
	for template in pio.templates.keys():
	pio.templates[template].layout.margin = dict(t=30,r=0,b=0,l=0)
	except Exception:
	pass

If I do either of those for reticulate* used plotly, then there will be missing JS deps (require.js and JQuery.js)

Quarto is adding the the missing deps when used in Jupyter engine

quarto-cli/src/core/jupyter/widgets.ts

Lines 100 to 112 in 2485d18

	// write required dependencies into head
	const head: string[] = [];
	if (haveJavascriptWidgets || haveJupyterWidgets) {
	head.push(
	'<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" integrity="sha512-c3Nl8+7g4LMSTdrm621y7kf9v3SDPnhxLNhcjFJbKECVnmZHTdo+IRO05sNLTH/D3vA6u1X32ehoLC7WFVdheg==" crossorigin="anonymous"></script>',
	);
	head.push(
	'<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" data-relocate-top="true"></script>',
	);
	head.push(
	"<script type=\"application/javascript\">define('jquery', [],function() {return window.jQuery;})</script>",
	);
	}

But even adding those won't work because with reticulate because Plotly.js deps will be missing - It seems it does not handle those renderers.

So we could try set some default for Plotly.js in R context, but reticulate would need to be first fixed.

[javendaXgh]

@cderv thank you very much for your response and proposed solution

[cderv]

I opened discussion in reticulate to see how to improve this

• better support for Plotly renderers rstudio/reticulate#1540