Plots won't display when using jupyter notebook in vscode

[clkruse]

trafficstars

I use VSCode when developing and running jupyter notebooks. However, I'm not able to get jupyter-scatter plots to display here. They do work when running a jupyter notebook in the browser. I have not tested jupyterlab functionality.

Here's a small reproducible test case:

from IPython.display import display
import jscatter
import numpy as np

x = np.random.randn(100)
y = np.random.randn(100)
fig = jscatter.Scatter(x, y)
fig.show()

This will return an empty cell. When printing the fig variable, it seems to have been created properly, but does not display. print(fig.show()) produces:

HBox(children=(VBox(children=(Button(button_style='primary', icon='arrows', layout=Layout(width='36px'), style=ButtonStyle(), tooltip='Activate pan & zoom'), Button(icon='....

To verify that ipywidgets still work, I made and displayed the following simple widget. This worked as expected.

import ipywidgets
out = ipywidgets.Dropdown(options=['1', '2', '3'], value='2', description='Number')
display(out)

[flekschas]

Thank you for reporting the issue. Unfortunately, I'm not a VSCode user and have only tested the plugin in Jupyter Notebook and Lab. My hunch is that VSCode is running the notebooks slightly differently and that's maybe why nothing appears.

Does VSCode have a console of some sort where errors are logged? It's hard to tell without any error message what might cause the issue.

[clkruse]

An abbreviated version of what I'm seeing in the VSCode dev tools menu looks like this:

Failed to to Widget load class jupyter-scatterJupyterScatterModel
{className: 'JupyterScatterModel', moduleName: 'jupyter-scatter', moduleVersion: '0.7.1', error: Error: Module jupyter-scatter, semver range 0.7.1 is not registered as a widget module

ipywidgets.js:2 Uncaught (in promise) Error: Module jupyter-scatter, semver range 0.7.1 is not registered as a widget module
    at vC.loadClass (ipywidgets.js:2:3955035)
    at vC.loadClass (ipywidgets.js:2:4214431)
    at vC.<anonymous> (ipywidgets.js:2:3553770)
    at ipywidgets.js:2:3550482
    at Object.next (ipywidgets.js:2:3550587)
    at ipywidgets.js:2:3549523
    at new Promise (<anonymous>)
    at j (ipywidgets.js:2:3549268)
    at e._make_model (ipywidgets.js:2:3553649)
    at vC.<anonymous> (ipywidgets.js:2:3553503)

[flekschas]

Oh that mean that the widget wasn't installed/registered properly. I.e., what the error is saying that the Python widget v0.7.1 is not finding a corresponding front-end widget with v0.7.1.

How did you install jupyter-widget for VSCode? (Sorry this might be a dump question but I'm a SublimeText user)

[flekschas]

I tried to get jupyter-scatter to run with VS Code the other day and can confirm that, while ipywidgets work, jupyter-scatter does not work. At this point I am not sure though what causes the issue but I suspect that jupyter-scatter might be incompatible for some unknown reason with VS Codes ipywidget helper.

[manzt]

It seems jupyter-scatter just stopped working in VS Code. Different from this original issue, but re-opening to make it easier to track/find. Some kind of regl error.

To reproduce:

python -m venv .venv
source .venv/bin/activate
pip install jupyter jupyter-scatter
code . # open VS Code

In VS Code, Shift-Command-P > Create Jupyter Notebook

import jscatter
import numpy as np

x = np.random.rand(500)
y = np.random.rand(500)

jscatter.plot(x, y)

Browser console (to open, Shift-Command-P > Developer: Toggle Developer Tools)

WebGL: INVALID_VALUE: texImage2D: width or height out of range
    resize @ 0d64b545-9952-417f-9798-c0c13210ef8a:3096

Uncaught Error: (regl) invalid renderbuffer size
    at raise2 (0d64b545-9952-417f-9798-c0c13210ef8a:56:21)
    at check (0d64b545-9952-417f-9798-c0c13210ef8a:62:11)
    at Function.resize (0d64b545-9952-417f-9798-c0c13210ef8a:3555:13)
    at resizeAttachment (0d64b545-9952-417f-9798-c0c13210ef8a:3819:39)
    at Function.resize (0d64b545-9952-417f-9798-c0c13210ef8a:4186:13)
    at resize (0d64b545-9952-417f-9798-c0c13210ef8a:11834:9)

cc @simonwarchol

[simonwarchol]

Thanks for beating me to making an issue 🙂

[flekschas]

Thanks for reporting! I suspect that either the width, height, or both are zero for a split second or that this is some kind of race condition during the initial rendering. Either way it sounds like a regl-scatterplot bug.

I don't know when I'll get to due to my parental leave, so please go ahead and investigate if you have some time. But I'll try to look once I have the chance.

[flekschas]

This is wild... somehow when VSCode executes the cell, the screen width and height is reported to be 1290 and 22144 respectively. The height is obviously nonsense and the cause for the error as I don't think one can even have a frame buffer with such an extreme height. Not sure what's going on with VSCode here but it likely sounds like a bug on their end... I'll investigate but can't promise I'll find a solution.