Test IPyWidgets 7 & 8 on Desktop

[DonJayamanne]

Testing the jupyter extension loading ipywidgets

Refs: #8552

• anyOS @amunger
• anyOS @roblourens

Complexity: 4

Authors: @DonJayamanne

Create Issue

---

Test with IPyWidgets 7.7.2 and 8

• Test IPyWidgets 7.7.2
  For the first test, install ipywidgets==7.7.2 using the CLI python -m pip install ipywidgets==7.7.2
• Test IPyWidgets 8
  For the first test, install ipywidgets using the CLI python -m pip install ipywidgets

Requirements

• Install prerelease jupyter extension into VS Code (desktop or 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 using the command
  • If testing IPyWidgetes 7, then use the CLI python -m pip install ipywidgets==7.7.2
  • If testing IPyWidgetes 8, then use the CLI python -m pip install ipywidgets

Test standard widgets

1. Open a new notebook
2. If on VS Code web, then pick the 'Python 3' kernel on web else pick the local Python environment you setup in Pre test steps
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
• ipyleaflet
• k3d
• bqplot

5. Go back and try the widgets provided in the samples below (optionally test the widgets found here https://jupyter.org/widgets)

Sample code (click to expand)

# Sample1
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)

# Sample2
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()

# Sample3
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()

7. You should be asked to allow usage of a CND for widgets.
8. Pick yes
9. Test again without the CDN option
   You might want to change this by going into your settings.json and update as follows (empty array setting):

  "jupyter.widgetScriptSources": [ ],

10. Verify you get some sort of output in the cell from running the widget.

Note: Please test with and without CDN. When testing without CDN you could either wait for the prompt to use CDN or go into the settings.json file and add the setting "jupyter.widgetScriptSources": [ ], and re-run the above tests.

[roblourens]

FYI @DonJayamanne I removed the incorrect Create Issues link

[roblourens]

Note, python -m pip install ipywidgets doesn't upgrade the package to the latest for me, I had to add -U. Then it gave me an error about ipympl and I had to upgrade that manually as well.

You can run this code to check the version

import ipywidgets
ipywidgets.__version__

[roblourens]

I'm stuck on both versions, but maybe there is an issue with my environment? Do I need to make sure I have a certain version of k3d etc installed? Or should pip install k3d give me the right thing?

[amunger]

similar situation for me, only tried v7 so far, and the first complex sample doesn't show any output (after restarting kernel, reloading vs code)

[DonJayamanne]

@roblourens @amunger Please ensure you use new environments for each of IPyWidgets 7 and 8. else packages could get messed up and things might not work properly.

[amunger]

that was a new environment for v7. I just tried an older environment with Ipywidgets '8.0.4' and it worked successfully, trying a fresh one now

[amunger]

@roblourens - what version of python are you using?

The widgets seem to display correctly for python 3.9 - tested desktop/v7 and web/v8
Do not display at all for python 3.11 - desktop/v7 and desktop/v8

[DonJayamanne]

@amunger are you using SSH
One of the files could not be loaded due to a 401 error in the browser, thats a weird error
That should not happen, thats whats causing the widgets not to load in your case
Let me know if you run into that again, that looks like a vscode core issue (@roblourens might have an idea, or perhaps Matt, but lets see if you run into that again)

If testing IPyWidgets 7, and it fails, try using VS Code stable and checking whether it works there too.

[roblourens]

This is python 3.9.5. I'll try a fresh environment.

[amunger]

the 401 seems to show up every time. I'm not using SSH. I don't see it in stable.
Stable was able to load the widget successfully with python 3.11 ipywidgets v8, so something regressed.
I'm now seeing a note about a javascript error, rather than empty output.

[DonJayamanne]

I'm running into the same issue as @amunger now
VS Code is definitely failing to load some js files in the webview,

@mjbvz looks like something isn't right here.

[DonJayamanne]

I can confirm this same http request works in debug mode in vscode insiders.
In non-debug mode the request fails.
@mjbvz /cc

[roblourens]

FYI for others looking at this, this TPI is blocked, microsoft/vscode#175033

[DonJayamanne]

I have added a work around, and you should not be blocked anymore.
Just waiting for the new pre-release to go out, should take around 5 minutes

[DonJayamanne]

Should be ready to test now, please install the latest pre-release and test again
@roblourens @amunger /cc