Ipywidgets: ipywidget support in VS Code

[gramster]

It would be great to have ipywidgets working in VS Code interactive experience. The challenge there is that the interactive window is rendered in a webview running in a separate process to the Python extension, which manages the IPython kernels.

[jasongrout]

It would be great to have ipywidgets support in VS Code!

A couple of questions to understand this better:

1. Do you plan to support custom widgets? In other words, ipywidgets comes with a small set of reference controls (sliders, checkboxes, etc.), but the larger idea of ipywidgets is a framework for custom javascript controls, like pythreejs, ipyvolume, ipysheet, ipyleaflet, etc. Are those in scope for you? Related to this, how does source material (HTML, CSS, javascript) get into your web view?

2. What is the division of responsibilities between your webview and the python extension?

In general, we tried to make it straightforward to subclass the base widget manager and completely take over any communication with the kernel - you can use that to shuttle comm messages back and forth with your python extension transparent to any widgets.

[rchiodo]

I can help answer those questions

1. We do plan to support custom widgets. HTML in the webview is loaded from the results of a kernel.requestExecute call. We're using nteract transforms at the moment to transform the mime types into React components. Those are then loaded into the webview.
2. Right now the kernel is created in the python extension as it is the part that has access to the jupyter server that is launched. We could probably port forward the server to the machine where the webview is running, or potentially just pass the comm messages to the webview, but I assume the latter wouldn't work with the widget manager.

[jasongrout]

The widget manager is totally in charge of getting widgets on the page and supplying a communication channel back to the kernel (by handing widgets a "comm" object that abstracts that communication with the kernel). As such, I think the widget manager would be js that lives in your web view. You could definitely have your widget manager hand each widget it creates a custom comm object that just forwards messages between a web view and your python extension.

CC also @williamstein, who recently implemented ipywidgets in Cocalc, which uses react and I believe at least some nteract components (though I don't know if he uses transformime).

[blois]

Colab added support for ipywidgets a little while back- we use a JS binary which has the widgets and all dependencies built into a single file but then have our own implementation of the widget manager which knows how to communicate to our kernel. We basically shim a number of kernel APIs, but overall it wasn't too bad.

The code we use to compile ipywidgets is https://github.com/googlecolab/colab-widgets.

Right now Colab does not support custom widgets but this is something we're interested in doing. We'd prefer to have a portable solution, a quick write up of the issues and potential approaches is at https://github.com/nteract/nes/tree/master/portable-widgets.

[gramster]

Thanks, we'll take a look. It looks like Voila might also have a similar architecture to what we have. https://github.com/QuantStack/voila

[zerualem]

Any updates on ipywidgets support in VS code?

[jansenicus]

from ipywidgets import interactive
from IPython.display import Audio, display
import numpy as np

def beat_freq(f1=220.0, f2=224.0):
    max_time = 3
    rate = 8000
    times = np.linspace(0,max_time,rate*max_time)
    signal = np.sin(2*np.pi*f1*times) + np.sin(2*np.pi*f2*times)
    display(Audio(data=signal, rate=rate))
    return signal

v = interactive(beat_freq, f1=(200.0,300.0), f2=(200.0,300.0))
f1, f2 = v.children[:2]
f1.value = 255
f2.value = 260
plt.plot(v.result[0:6000]);

widget shows but not clickable in vscode

[jasongrout]

As far as I know, vs code has not implemented support for ipywidgets. If you want them to support it, you'll have to open an issue with them.

[jasongrout]

(That said, some developers are discussing it above to get help from us in how to implement it, so they may see your comment here. Still, it would be better to open an issue with vs code if you are asking them to support it.)

[rchiodo]

We are actually actively working on this right now. It's this item in the ms-python repo:
https://github.com/microsoft/vscode-python/issues/3429

[jasongrout]

Great! I'll close this to defer discussion to that issue.