Plotly output generated with 'notebook' renderer not shown after re-opening notebook

[jackthepanisher]

Environment data

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

Expected behaviour

Plotly graphs are shown after re-opening a saved Jupyter notebook with these graphs

Actual behaviour

The ouput is blank after re-opening a notebook that contains cell output using the Plotly 'notebook' renderer. The graphs are shown correctly after re-executing the affected cells. Related to the fix for #6334 and merge #6318 with which support for the 'notebook' renderer was added.

Log output:

VM12:5 Uncaught TypeError: require.undef is not a function
    at <anonymous>:5:17
    at h (vscode-webview://f620ad82-e8b9-40f2-a1ab-808101a5c2a2/notebookWebviewPreloads.js:3)
    at vscode-webview://f620ad82-e8b9-40f2-a1ab-808101a5c2a2/notebookWebviewPreloads.js:3
resourceLoading.ts:82 Error: Unable to read file 'c:\Temp\plotly.js' (Error: Unable to resolve non-existing file 'c:\Temp\plotly.js')
    at ai.doReadFileStream (fileService.ts:539)
    at async Object.w [as loadLocalResource] (resourceLoading.ts:68)
    at async u.loadResource (baseWebviewElement.ts:530)
plotly.js:1 Failed to load resource: the server responded with a status of 404 ()
VM14:4 Registering custom require.js for Jupyter Kernel

The logs indicate that require.js is available only after the initial try to display the cell content which fails with 404.

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')

1. Run notebook confirming that graphs are working normal
2. Save notebook
3. Close and re-open notebook
4. Only blank cell output is shown where the graph should be
5. Re-running the notebook creates the graph again

Logs

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

XXX

[rchiodo]

I believe the root cause of this is that until the kernel is run, the preloads won't load and therefore require.js isn't available.

[jackthepanisher]

Adding to this, I can copy such a cell with blank output to another opened notebook and the contents will show up again. Pasting into the same notebook is a bit strange but also reveals the cell output.

[IanMatthewHuff]

@rchiodo I might have been wrong about not needing require.js in the notebook renderers. Having it there might do the trick for when the preloads have not run yet.

[greazer]

Please reopen if this is not resolved in the latest official release.

[jackthepanisher]

Please reopen if this is not resolved in the latest official release.

Still the same behavior with latest official version 1.60 as well as insiders version1.61 (Jupyter extension v2021.8.2031190714).

The log is a bit different now:

console.ts:137 [Extension Host] (node:8036) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.(Use `Code --trace-deprecation ...` to show where the warning was created)
v @ console.ts:137
console.ts:137 [Extension Host] Git installation not found.
v @ console.ts:137
VM9:1 Uncaught ReferenceError: require is not defined
    at <anonymous>:1:17
    at S (notebookWebviewPreloads.js:3)
    at notebookWebviewPreloads.js:3
console.ts:137 [Extension Host] runCommand C:\Users\Panisher\AppData\Local\Programs\Python\Python39\python.exe Array(2) Object
console.ts:137 [Extension Host] runCommand C:\Users\Panisher\AppData\Local\Programs\Python\Python39\python.exe Array(9) Object
VM10:14 Registering custom require.js for Jupyter Kernel
eval @ VM10:14
VM10:2151 Window.require = function
VM10:2152 Window.requirejs = function
console.ts:137 [Extension Host] Found compatible PlatformIO Core 5.2.0a8 -> C:\Users\Panisher\.platformio\penv\Scripts\platformio.exe
console.ts:137 [Extension Host] PIO Core State Object
VM17:42 IPyWidget kernel initializing...
VM17:42 Received IPyWidgetMessages.IPyWidgets_IsReadyRequest
console.ts:137 [Extension Host] Starting WebSocket: RAW/api/kernels/17a05c28-bfb9-4f2f-9cd2-fc8e3bcf01cc
console.ts:137 [Extension Host] Kernel: connected (17a05c28-bfb9-4f2f-9cd2-fc8e3bcf01cc)
VM17:42 Received IPyWidgets_kernelOptions in ScriptManager
VM17:42 Received IPyWidgetMessages.IPyWidgets_kernelOptions
VM17:10 Starting WebSocket: BOGUS_PVSC/api/kernels/17a05c28-bfb9-4f2f-9cd2-fc8e3bcf01cc
VM17:10 Kernel: connected (17a05c28-bfb9-4f2f-9cd2-fc8e3bcf01cc)
DevTools failed to load source map: Could not parse content for vscode-webview://bcdea2d4-6dcb-4480-8fbb-b7b204548a30/ipywidgets.js.map: Unexpected end of JSON input
DevTools failed to load source map: Could not parse content for vscode-webview://bcdea2d4-6dcb-4480-8fbb-b7b204548a30/ipywidgetsKernel.js.map: Unexpected end of JSON input

Edit: not sure how to re-open

[DonJayamanne]

This is a problem with require.js not being made available.

[DonJayamanne]

Internal notes:
Upstream issue microsoft/vscode#132557
We do have an alternative as well.
Will be tackled as part of separating renderer extension.

[greazer]

Repros with VSCode insiders 1.61-insiders, Jupyter v2021.9.1001261101 and Jupyter Renderers v1.0.1.

[DonJayamanne]

To be validated tomorrow by Me

[DonJayamanne]

@jackthepanisher

I've found that the exact same code does not work in Jupyter Lab no Jupyter Notebooks.
As this isn't a problem with VS Code, I'm closing this issue.

[jackthepanisher]

@DonJayamanne, it does work for me using Jupyter Notebook but one needs to be careful about the notebook being trusted otherwise it would not show any plots. For Jupyter Lab, I believe it does not support the 'notebook' renderer at all.

The main reason I still need the 'notebook' renderer at times is a) it supports export to HTML with the plots included, b) plots will dynamically scale to the available cell size and in the past we also had c) 'vscode' renderer would not support Plotly animations - but c) is fixed now. For a) one could use 'vscode+notebook' as renderer setting. So the primary reasons to use the 'notebook' renderer are already dimmishing. Another thing to note is that opening the notebook after VS Code startup is just fine, it's just a start-up issue for already opened notebooks.

[DonJayamanne]

thanks for getting back, I'll try this once again.

[jackthepanisher]

I'm not sure if something like this already exists but I could imagine some refresh functionality similar to a browser refresh for the Jupyter notebook cells that maybe is handled by the Jupyter Notebooks Renderers extension for only specific cases, like Plotly. It could be triggered after VS Code startup such that the cell contents are re-rendered when all the required functionality is eventually available. Something like this could potentially also be used for other events like a re-render of a cell after re-size, e.g. for the Plotly 'vscode' case. Of course that should make sense for a broader use and not just be an isolated, single case solution.

[DonJayamanne]

@jackthepanisher This will be fixed in the next version (I've tested this and it now works in the latest dev bits).
Fixed here microsoft/vscode-notebook-renderers#130

Closing with instructions for testing in the next pre-release of the Jupyter exesnion and latest version of Jupyter Notebook Renderers

Instructions for testing - see the instructions at the top of the issue.

[rebornix]

@DonJayamanne I tried to run the original code snippet in the issue description but the output is not rendered and here are the logs in devtools

Failed to load resource: the server responded with a status of 404 ()
loader.js:277 Loading "plotly" failed
_ @ loader.js:277
loader.js:278 Error: [object Event]
    at Object.E [as ensureError] (loader.js:260:22)
    at s._createLoadError (loader.js:1512:33)
    at s._onLoadError (loader.js:1523:30)
    at a (loader.js:1669:27)
    at Object.errorback (loader.js:1689:25)
    at e.triggerErrorback (loader.js:635:36)
    at loader.js:622:151
    at HTMLScriptElement.a (loader.js:658:17)
_ @ loader.js:278
loader.js:279 Here are the modules that depend on it:

[rzhao271]

I also get error messages in devtools with a blank cell being output.

  ERR Cannot read properties of null (reading 'map'): TypeError: Cannot read properties of null (reading 'map')
    at g (c:\Users\raymondzhao\.vscode-insiders\extensions\ms-python.isort-2022.3.12991021\dist\extension.js:1:214932)
    at Object.asCodeAction (c:\Users\raymondzhao\.vscode-insiders\extensions\ms-python.isort-2022.3.12991021\dist\extension.js:1:225872)
    at c:\Users\raymondzhao\.vscode-insiders\extensions\ms-python.isort-2022.3.12991021\dist\extension.js:1:154586
    at x.provideCodeActions (c:\Users\raymondzhao\AppData\Local\Programs\Microsoft VS Code Insiders\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:94:43007)
VM42:5 Uncaught TypeError: require.undef is not a function
    at <anonymous>:5:17
    at domEval (index.js:1302:15)
    at renderHTML (index.js:1318:3)
    at async Object.renderOutputItem (index.js:1456:11)
    at async X.renderOutputItem (notebookWebviewPreloads.js:3:17746)
    at async Object.render (notebookWebviewPreloads.js:3:21055)
    at async se.render (notebookWebviewPreloads.js:3:32305)
    at async ie.renderOutputElement (notebookWebviewPreloads.js:3:29162)

[DonJayamanne]

@rebornix @rzhao271
Please confirm you have the following:

• Latest vscode insiders
• Latest pre-release version of Jupyter (version from 2 days ago or greaterv2022.10.1103*)
• Latest version of Jupyter Notebook Renderers extension 1.0.11

[DonJayamanne]

Hmm never mind, looks like version 1.0.11 has not been published, something wrong the the vsce package

[DonJayamanne]

@rebornix @rzhao271
Please could you install the latest version of the Notebook Renderer extesnion 1.0.12 from the marketplace and re-test this.

[rzhao271]

LGTM now, thanks!