Plots not shown in HTML export for default Plotly renderer

[jackthepanisher]

Environment data

• VS Code version: 1.59.0
• Jupyter Extension version (available under the Extensions sidebar): v2021.8.1195043623
• Python Extension version (available under the Extensions sidebar): v2021.8.1105858891
• OS (Windows | Mac | Linux distro) and version: Windows 10 20H2
• Python and/or Anaconda version: 3.9.5
• Type of virtual environment used (N/A | venv | virtualenv | conda | ...): NA
• Jupyter server running: Local

Expected behaviour

Plots are visible when exporting to HTML

Actual behaviour

Plots are not shown (and there is no track of it in the HTML source code)

Steps to reproduce:

import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.show()

The temporary notebook for exporting (%localappdata%\temp<UUID>\export.ipynb) already misses the expected output.

Switching the Plotly renderer to notebook using fig.show(renderer='notebook') provides the expected plot output in the exported HTML

On a side note, the iframe / iframe_connected renderer types don't produce any plot output in VS Code but the export to HTML works as expected. It seems that iframes are not working/are not supported in VS Code right now (it has worked a while back) - maybe worth another bug entry.

Export to PDF probably has the same issue - not checked.

Logs

Output for Jupyter in the Output panel (View→Output, change the drop-down the upper-right of the Output panel to Jupyter)

XXX

[joyceerhl]

@jackthepanisher Is this export to HTML from the interactive window or from a notebook?

[jackthepanisher]

@jackthepanisher Is this export to HTML from the interactive window or from a notebook?

@joyceerhl the behavior is the same for notebook and interactive window. I can also mix multiple fig.show(renderer='vscode') and fig.show(renderer='notebook') statements where plots are shown for both cases in the notebook/interactive window but only the renderer='notebook' one shows up in the HTML export.

Note: fig.show(renderer='vscode') is the default setting in VS Code i.e. same as fig.show()

[joyceerhl]

Thanks for the answer, I can reproduce the problem.

[joyceerhl]

I am seeing that the plots are persisted to disk in the ipynb file, so they're getting omitted from the generated html during the nbconvert process.

[jackthepanisher]

Opening the notebook on the Jupyter server directly (python -m notebook <file>.ipynb) also does not show the plot output with the vscode renderer. Re-running the affected cell there does not help either. It seems that is a general issue with the mime type renderers (vscode is an alias of that in Plotly). I'm wondering what the actual benefit of the mime typer renderer is compared to the notebook renderer.

[jackthepanisher]

Well, I tried to load the notebook also with JupyterLab. There the vscode aka plotly_mimetype does show up but the notebook one does not. So maybe that is expected for classical notebook server vs. JupyterLab. However, when exporting the notebook from JupyterLab to HTML, the vscode/plotly_mimetype one shows up as static image and the notebook one also shows up as an interactive graph.

I guess the expectation for VS Code is to have an output produced in some way for the default renderer, even if it is a static image. If producing an interactive graph for the HTML export is a limitation of the mime type renderer in general, I would really like to switch to the notebook renderer instead, as I've experienced better results and behavior with it. Currently, issue #6404 is some remaining piece for me to switch to the notebook renderer entirely.

[jackthepanisher]

Running nbconvert directly using py -m jupyter nbconvert notebook.ipynb --to html --output notebook.html reveals:

..\nbconvert\filters\datatypefilter.py:39: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented.
  warn("Your element with mimetype(s) {mimetypes}"

It looks like nbconvert doesn't like the Plotly mime type + json format that is generated with renderer='vscode'. There are some tracks of it in jupyter/nbconvert#944. JupyterLab appears to use a Plotly extension to convert the mime type to static images. Not sure if VS Code should support something similar. Right now the notebook renderer(s) seem to provide the only option to export Plotly graphs to HTML from within VS Code.