Test IPyWidgets 7 and 8 in vscode.dev

[DonJayamanne]

Testing the jupyter extension loading ipywidgets

Refs: #8552

• web @eleanorjboyd
• web @rzhao271
• web @amunger
• web @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
• Use Python 3.7 or later (please ensure you aren't using Python 2, use python --version to check the version)
• 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

Pre test steps (vscode.web)

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. Open a notebook and connect to the above Jupyter server via the Kernel Picker

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.

[eleanorjboyd]

This all works correctly for me. One note is I did have to run jupyter notebook --no-browser --NotebookApp.allow_origin='*' with the asterisk in quotes since the other way didn't work. Found my solution through this previous TPI. It might be worth including in future TPIs for that command since two people ran into it but I don't know if there is a setup issue with me that made me run into it. I am using a mac and did it in an integrated terminal with vscode.