Test IPyWidgets in vscode.dev

[rchiodo]

Testing the jupyter web extension loading ipywidgets

Refs: #9984

• anyOS @weinand (macOS)
• anyOS @karrtikr

Complexity: 5

Authors: @rchiodo

Create Issue

---

Requirements

• Install prerelease jupyter extension into http://insiders.vscode.dev
• Have a python environment that you can run jupyter from. (https://jupyter.org/install)
• Be familiar with jupyter notebooks
• Have ipywidgets installed into your python environment

Pre test steps

1. Go to a command prompt
2. Activate the python environment with jupyter in it
3. Run jupyter with the following command line : jupyter notebook --no-browser --NotebookApp.allow_origin=*
4. Note the URL it generates for connecting
5. Start insiders.vscode.dev
6. Make sure Jupyter prerelease extension is installed
7. Bring up command palette
8. Pick 'Jupyter: Specify jupyter server for connections'
9. Pick 'Existing'
10. Enter the URL from step 4

Test standard widgets

1. Open a new notebook
2. Pick the 'Python 3' kernel
3. Try some of the standard widgets from the blog post. Here's an example:

import ipywidgets as widgets
widgets.IntSlider()

4. Make sure the widget can be interacted with (the example above should generate something like so:)
   
5. Try other standard widgets

Test more complex widgets

1. Create another notebook
2. Go to a new command prompt
3. Activate your python environment that jupyter is using
4. Conda/Pip install the following:

• numpy
• pandas
• ipyleaflets
• k3d
• bqplot

5. Go back to insiders.vscode.dev and add these cells to the notebook

from ipyleaflet import Map, Marker

center = (52.204793, 360.121558)

m = Map(center=center, zoom=15)

marker = Marker(location=center, draggable=True)
m.add_layer(marker);

display(m)

import k3d
import numpy as np
from numpy import sin,cos,pi
from ipywidgets import interact, interactive, fixed
import ipywidgets as widgets
import time
import math

plot = k3d.plot()

plot.camera_auto_fit = False

T = 1.618033988749895
r = 4.77
zmin,zmax = -r,r
xmin,xmax = -r,r
ymin,ymax = -r,r
Nx,Ny,Nz = 77,77,77

x = np.linspace(xmin,xmax,Nx)
y = np.linspace(ymin,ymax,Ny)
z = np.linspace(zmin,zmax,Nz)
x,y,z = np.meshgrid(x,y,z,indexing='ij')
p = 2 - (cos(x + T*y) + cos(x - T*y) + cos(y + T*z) + cos(y - T*z) + cos(z - T*x) + cos(z + T*x))
iso = k3d.marching_cubes(p.astype(np.float32),xmin=xmin,xmax=xmax,ymin=ymin,ymax=ymax, zmin=zmin, zmax=zmax, level=0.0)
plot += iso

plot.display()

import numpy as np
from bqplot import pyplot as plt

# And creating some random data
size = 100
np.random.seed(0)
x_data = np.arange(size)
y_data = np.cumsum(np.random.randn(size)  * 100.0)
plt.figure(title='My First Plot')
plt.plot(x_data, y_data)
plt.show()

6. You should be asked to allow usage of a CND for widgets. Pick yes.
7. Verify you get some sort of output in the cell from running the widget.

[weinand]

@rchiodo The "Pre test steps" from above lack the installation of the ipywidgets:

pip install ipywidgets

I tried some of the "ipywidgets" and they seem to work fine.

For the "Test more complex widgets" section I only see a widget in the third cell:

The first cell shows no widget and I see these errors in the devtools console:

The second cell runs for a long time but doesn't show a widget.
The devtools console shows this:

I'm on macOS 12.4 and I'm using python 3.10.0 and pip 22.1.2 via pyenv.

[weinand]

@rchiodo after running jupyter labextension install jupyter-leaflet and restarting the kernel the two failing samples started to work: