DS: Enable Jupyter widgets (aka ipywidgets)

I use BeakerX widget in Jupyter a lot to explore my pandas data frames. It will be great if this feature can be added to vscode (and in general the support for Jupyter Widgets in vscode)

This would be very helpful for one of my projects.

Do we know a rough outline of what needs completed in order to implement this?

I have a feeling we'll need something along these lines:
https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/embedding.md

Beaker (at least plots) is using a custom jupyter widget mime type:
application/vnd.jupyter.widget-view+json

This is also likely part of the solution:
https://www.npmjs.com/package/@jupyter-widgets/controls

Yeah looking at the examples here:
https://github.com/jupyter-widgets/ipywidgets/blob/master/examples

We're going to have to refactor our jupyter communication to exist in our react control instead of the main extension.

Rich Chiodo (@rchiodo)

Another solution is to try out the transform-widgets react package from nteract

Rich Chiodo (@rchiodo) /cc

See this issue for some more hints
jupyter-widgets/ipywidgets#2512

MVP

Standard/builtin ipwidget (here's the list https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html)
Interactive Widgets, with client side links (user interaction executes pure js code)
Interactive Widgets, with kernel links (user interaction sends messages to kernels)
Third-party widgets (list what works and what doesn't)
Ensure widget state is maintained/updated even when cell output is hiddden/collapsed
Moving cells around with output (widgets)
Investigate why some third-party widgets don't work (reach out to ipywidgets/jupyterlabs folk)
VS Code Remote (need to spike to find out what the issues are)

Long term goals

Live share with interactive widgets
Saving widgets in notebooks

Challenges/Unknowns

Ensure widget state is updated/maintained even when not displayed (we have a spike for this)
- Tehnically this should work out of the box, as backbone manages the state of these controls.
Collapsing output cells (we'd need to show/hide ipywidgets, we have a spike for this)
Saving state of widgets in notebooks (is this supported today in classic notebooks)
Moving cells with ipywidget in output panels (should be possible, we'd need to re-render the widgets, we have a spike for this)
Third-party widgets (some don't seem to work, no errors, nothing. Then again, these don't even work on other notebook implementation).
VS Code Remote
Live Share
- Interactive widgets with js links will not work - i.e. moving a slider on host will not move slider on guest)
  - We could get this working by hooking into the state of each (backbone) control and broadcasting this and manually applying it. However, there's a complication of two users moving the same slider! Which one wins, gets even more complicated with links - impacting other controls
- Interactive widgets with kernels links should technically work (we'll need to ensure all kernel messages are also broadcasted)

Solution

The details found here will form the basis of the implementation https://ipywidgets.readthedocs.io/en/latest/embedding.html
- Basically use ipywidget widget manager to do everything.
- We create the manager, and give it the command chanel
- Manager will render the widgets.
- We can give the manager a map of request id to html elements. Will allow us to render the ipywidget in the right spot.
Implement a communications channel on UI, so widgets can communicate directly with kernel (basically we'll need a proxy a connection to the actual one maintained within the extension process)
Build and embed widgets as a separate JS project? (this project will only include the JS code for widgets, not the comms or the like). Basically it'll be similar to web3
Integration with native editor (create a react control to render ipywidgets and just give it the requestid/commid). Attempting to give it the data, will be unnecessarily complicated, as we'll need to untangle the comms, etc. This is better handled by the ipywidget manager (based on the HTMLManager, see their docs)

Estimates (total 14.5)

Clean up prototype (2)
Support theming (0.5)
Implement comms channel (2)
Typing in widgets sets focus to monaco editor (bug) (1)
~~Bundling jupyter ipywidgets (hopefully as a separate js project, as these require requirejs) (0)~~
~~Integration with notebook (react integration) (0)~~
Re-rendering widgets (show/hide/clear output cells or moving cells) (1)
Add UI tests (2-3) (might not be possible without Spike - Serving notebook editor content via our own webserver #2825)
Spike VS Code remote (1) (no idea whether it will even work, cannot estimate without knowing)
~~Basic widgets (2)~~
~~Third-party widgets (requirejs) (1/2)~~
~~Ensure ensure widget state is updated/maintained even when not displayed (1/2)~~

** Updates to Estimates 7th Jan 2020 **

Load 3rd party script files from jupyter server (if this fails, then fallback to download using internet connection). (2)
- Currently 3rd party scripts are loaded from external resource (internet connection).
- Downloading the local bits could be a preferred option (faster, no reliance on active internet connection, more accurate to what the user has installed).
Add support for Output widget (requires special handling, seems jupyter notebooks and labs have special code to handle this particular widget) (2)
Update old code base to latest codebase (updated React and other changes) (1)
- The old prototype is based on the old code base

test of today version on winpython:

ipywidgets interactive doesn't seem to work
latex rendering of latex expression doesn't seem to work

stonebig

stonebig not sure what you mean. We haven't submitted any code for ipywidgets support yet. So it's expected that ipywidgets don't work.

Can you go into more detail about latex expressions? Perhaps you're hitting this issue:
https://github.com/microsoft/vscode-python/issues/8673

Yes probably same latex issue, with a $$ formula

ipywidgets 7 came out August 2017, so 2.5 years ago. You'll definitely need ipywidgets at least 7.

Sorry, I just falsified my assumption: I installed ipywidgets 7.5.1 on top of the system one. This version is correctly reported by jupyter and vscode. Nevertheless, widgets are not working with this installation.

webview developer console reports:

Widget data not avaialble to render an ipywidget
(anonymous) @ commons.initial.bundle.js:2

ipywidgets 7 came out August 2017, so 2.5 years ago.

Ubuntu 20.04 (just released a few weeks ago) still ships ipywidgets 6.0.0. 😢

I'm not sure it's ipywidgets that's the culprit. It's more likely the kernel. Or some combination of the two.

But we'll have to figure out minimum versions for each.

Thanks for your help so far.

Progress bars don't work for me.

Result:
https://i.imgur.com/JhbieoW.png

Expected result:
https://i.imgur.com/iUCgTkE.png

nickcorona (@nickcorona)

nickcorona (@nickcorona) can you open a separate issue? This issue is closed and is really about the general support for ipywidgets. If a specific widget doesn't work please open a new issue for that.

Thanks.

Got it working. For anyone else struggling, this works in VSCode:

import plotly.graph_objects as go
import numpy as np
from ipywidgets import interact

fig = go.FigureWidget()
fig.add_scatter()

xs=np.linspace(0, 6, 100)

@interact(a=(1.0, 4.0, 0.01), b=(0, 10.0, 0.01), color=['red', 'green', 'blue'])
def update(a=3.6, b=4.3, color='blue'):
    with fig.batch_update():
        scatt = fig.data[0]
        scatt.x=xs
        scatt.y=np.sin(a*xs-b)
        scatt.line.color=color

fig

Does plot viewer work with it? I have my interactive plots working in my VScode Jupyter notebook but for some reason it won't let me open it into a separate screen (i.e., plot viewer). Thanks!

Sorry but widget based plots are not connected to our external viewer.

Hello, I can't use the widgets. I'm on a Windows 10, using Python 3.8.5 64-bits with the 2020.6.91350 Python Extension.

argon2-cffi==20.1.0
async-generator==1.10
attrs==20.3.0
backcall==0.2.0
bleach==3.3.0
cffi==1.14.5
colorama==0.4.4
cycler==0.10.0
decorator==5.0.0
defusedxml==0.7.1
entrypoints==0.3
ipykernel==5.5.3
ipython==7.22.0
ipython-genutils==0.2.0
ipywidgets==7.6.3
jedi==0.18.0
Jinja2==2.11.3
jsonschema==3.2.0
jupyter-client==6.1.12
jupyter-core==4.7.1
jupyterlab-pygments==0.1.2
jupyterlab-widgets==1.0.0
kiwisolver==1.3.1
MarkupSafe==1.1.1
matplotlib==3.4.1
mistune==0.8.4
nbclient==0.5.3
nbconvert==6.0.7
nbformat==5.1.3
nest-asyncio==1.5.1
notebook==6.3.0
numpy==1.20.2
packaging==20.9
pandas==1.2.3
pandocfilters==1.4.3
parso==0.8.2
pickleshare==0.7.5
Pillow==8.2.0
prometheus-client==0.9.0
prompt-toolkit==3.0.18
pycparser==2.20
Pygments==2.8.1
pyparsing==2.4.7
pyrsistent==0.17.3
python-dateutil==2.8.1
pytz==2021.1
pywin32==300
pywinpty==0.5.7
pyzmq==22.0.3
scipy==1.6.2
seaborn==0.11.1
Send2Trash==1.5.0
six==1.15.0
terminado==0.9.4
testpath==0.4.4
tornado==6.1
traitlets==5.0.5
wcwidth==0.2.5
webencodings==0.5.1
widgetsnbextension==3.5.1

jupyter core     : 4.7.1
jupyter-notebook : 6.3.0
qtconsole        : not installed
ipython          : 7.22.0
ipykernel        : 5.5.3
jupyter client   : 6.1.12
jupyter lab      : not installed
nbconvert        : 6.0.7
ipywidgets       : 7.6.3
nbformat         : 5.1.3
traitlets        : 5.0.5

JonesKenzie

JonesKenzie can you enter a new issue? We'll need more logging to determine what the problem is.

Navigation Menu

Repository navigation

DS: Enable Jupyter widgets (aka ipywidgets) #3767

33 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

DS: Enable Jupyter widgets (aka ipywidgets) #3767

Description

Activity

Dessix commented on Dec 9, 2018

rchiodo commented on Jan 4, 2019

rchiodo commented on Jan 8, 2019

rchiodo commented on Jan 9, 2019

DonJayamanne commented on May 16, 2019

rchiodo commented on Oct 14, 2019

DonJayamanne commented on Oct 25, 2019

stonebig commented on Nov 22, 2019

rchiodo commented on Nov 22, 2019

stonebig commented on Nov 22, 2019

33 remaining items

jasongrout commented on May 16, 2020

rhaschke commented on May 16, 2020

rhaschke commented on May 16, 2020

rchiodo commented on May 16, 2020

rhaschke commented on May 16, 2020

nickcorona commented on May 18, 2020

rchiodo commented on May 18, 2020

LeeRippon commented on Feb 5, 2021

rchiodo commented on Feb 5, 2021

JonesKenzie commented on Apr 2, 2021

rchiodo commented on Apr 2, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions