Plotly 'notebook' renderer creates only blank output using preview notebook editor

Environment data

• VS Code version: 1.58.0-insider
• Jupyter Extension version (available under the Extensions sidebar): v2021.7.949309867
• Python Extension version (available under the Extensions sidebar): v2021.7.922878407-dev
• OS (Windows | Mac | Linux distro) and version: Windows 10 21H1 (19043.1052)
• Python and/or Anaconda version: Python 3.9.0 64-bit
• Type of virtual environment used (N/A | venv | virtualenv | conda | …): N/A
• Jupyter server running: Local

Expected behaviour

Can use Plotly renderer types ‘notebook’ or ‘notebook_connected’ when using the preview notebook editor.

Actual behaviour

Only an empty cell output is shown but the cell output is resized to what appears to be the possible dimensions of the Plotly graph.

Interestingly, generating a Plotly graph using ‘notebook’ renderer with the preview notebook editor, saving and then re-opening the .ipynb file with the old notebook editor will show the graph without re-generating the cell output. So it seems that this is an issue with the cell display itself but not with the generation of the cell output content.

More details

Currently, the default 'vscode' (aka 'plotly_mimetype') doesn't seem to support Plotly animations (see #4364). When using the old notebook editor "Jupyter Notebook (custom)" it is possible to use 'notebook' or 'notebook_connected' as the Plotly renderer which then also supports Plotly animations in VS Code. With the new notebook editor (Jupyter Notebook (preview)" only 'vscode' seems to work as inline renderer type but this renderer option still does not support Plotly animations or other interactive features in VS Code. This applies to insider version (1.58.0-insider) as well as the stable version (1.57.1).

Note 1: Other non-inline renderers like ‘browser’ are working as expected and would be a possible work-around to some extent. But of course it would not present the same experience as an inline renderer.

Note 2: In older versions (1.55.2 stable) the ‘iframe’ and ‘iframe_connected’ renderers were working with the old notebook editor as well but are not working anylonger (at least since 1.56.2 stable).

Steps to reproduce:

import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
           size="pop", color="continent", hover_name="country",
           log_x=True, size_max=55, range_x=[100,100000], range_y=[25,90])
fig.show(renderer='notebook')

Logs

Console output

VM369:4 UI PostOffice Received IPyWidgets_mirror_execute
VM369:4 UI PostOffice Received IPyWidgets_msg
VM369:4 UI PostOffice Received IPyWidgets_msg
VM369:4 UI PostOffice Received IPyWidgets_msg
VM369:4 UI PostOffice Received IPyWidgets_msg
VM369:4 UI PostOffice Received IPyWidgets_msg
VM369:4 UI PostOffice Received IPyWidgets_msg
VM384:5 Uncaught TypeError: require.undef is not a function
    at <anonymous>:5:17
    at S (notebookWebviewPreloads.js:3)
    at notebookWebviewPreloads.js:3
(anonymous) @ VM384:5
S @ notebookWebviewPreloads.js:3
(anonymous) @ notebookWebviewPreloads.js:3
async function (async)
(anonymous) @ notebookWebviewPreloads.js:3
$.outputs.set.queue @ notebookWebviewPreloads.js:3
enqueue @ notebookWebviewPreloads.js:3
(anonymous) @ notebookWebviewPreloads.js:3
postMessage (async)
(anonymous) @ main.js:833
(anonymous) @ host.js:27

[jackthepanisher]

@rchiodo and @IanMatthewHuff I have applied the changes to my 1.57.1 production setup of VS Code with Jupyter extension v2021.6.999 and it works like a charm.

[rchiodo]

It seems like there is an issue with opening a notebook containing cell output in ‘notebook’ renderer mode. The output stays blank and only shows up again when re-running the cell. Do you guys want me add logs here or create a new issue?

Please create a new issue. I’m guessing it requires our kernel to run something first as ‘require.js’ is loaded as part of our kernel loading.