Test IPyWidgets in vscode.dev and desktop

[DonJayamanne]

Testing the jupyter extension loading ipywidgets

Refs: #10434

• web @rebornix
• anyOS @amunger
• anyOS @aeschli
• web @rzhao271

Complexity: 5

Authors: @DonJayamanne

Create Issue

---

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.6 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 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. 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. 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.

[aeschli]

Cool stuff!

Tested on Linux

[rebornix]

Tested insiders.vscode.dev on Edge. The setup steps are detailed and helpful, and it works as charm, great work!