Ipywidgets (WIP)

Hey :wave:

What if Streamlit supported ipywidgets natively? Even complex ones such as bqplot, pythreejs, ipyleaflet and some more

Well, that would be great, that would even be a real killer feature, but it’s not quite there unfortunately :sweat_smile: Embedding simple widgets was straightforward with this tutorial from ipywidgets documentation. But so far:

  • I can interact with widgets but I don’t retrieve any value to use in Streamlit
  • Embedding the aforementioned complex widgets need more work, especially to manage JS dependencies with those CORS issues and JS loaded from localhost:8501/ for some reason :cry:

I was even wondering if spawning an ipython kernel would be better to be as compatible as possible, but I’m not sure of that…

All of this is still exploratory, but here’s a screenshot showing how simple widget renders into Streamlit.

1 Like

Agreed, I think this would be a killer feature, but as you mention it’s not really clear how the best way to accomplish it might be.

2 Likes

Hi there!

ipywidgets support in streamlit would be great! You would gain many widgets libraries for free.

I think spawning an IPython kernel is not mandatory for streamlit to support ipywidgets. I am one of the main author of another Python kernel for Jupyter that supports ipywidgets and third-party widgets libraries without depending on IPython, it’s named xeus-python: https://github.com/jupyter-xeus/xeus-python. So I would say it’s possible for you to support them.

Now, it will still be a bit of work to do, both on the back-end and on the front-end. On the back-end you’ll need to implement a custom Comm logic, see https://jupyter-notebook.readthedocs.io/en/stable/comms.html#comms. And on the front-end you’ll need a Widget Manager that spawns the widgets and deals with the communication with the back-end. For example, there is a JupyterLab widget manager for JupyterLab: https://github.com/jupyter-widgets/ipywidgets/tree/master/packages/jupyterlab-manager.

I might not be able to answer all technical questions about this, I am not really aware of how the Widgets Manager works. But I guess those two links are good starting points for you.

2 Likes

Thanks for following up @martinRenou, it’s super helpful as I had a hard time navigating the implementation of the web examples :slight_smile:.

So the custom Comm logic is the part where you can decouple the backend/frontend communication. In my thinking you could not break the back/front sync and manage it manually. If this is possible then it could make things doable :thinking: I’ll try when I have some time…

So the custom Comm logic is the part where you can decouple the backend/frontend communication

Yes, although this is done in xeus-python by monkey patching IPython. It’s not a great solution but it works.
Basically ipywidgets depends on IPython and ipykernel’s Comm implementation (see https://github.com/jupyter-widgets/ipywidgets/blob/b164aa2fe9d0f141d60a6a84a2fca2fa7f426b43/ipywidgets/init.py#L22 and https://github.com/jupyter-widgets/ipywidgets/blob/5170757c4e9b93731ac840640ebf5dd499f6d47c/ipywidgets/widgets/widget.py#L12). So you will need to monkey patch those modules prior to import ipywidgets in order to have ipywidgets using your Comm implementation.

2 Likes

Hello @martinRenou, thanks for those details and starting points! I’ll also try to investigate on what’s possible in the following days.

In the screenshot I posted, I used ipywidget’s html manager. Couldn’t we use it further instead of implementing a new widget manager? I don’t know if there is any limitation with it yet.

The HTML manager is a static rendering of the widget, so there is no communication with the Python back-end, it’s only the JavaScript part of the widget.

I suspect you’ll want to listen to widget model changes in Python and react on those changes? If not, the HTML manager is enough for you indeed.

1 Like

We also work on Voila, which I like to see as a good competitor to streamlit :wink:

You can see here in the Voila code-base that we reuse the JupyterLab widget manager for rendering widgets: (looks like I am not able to post links anymore on this post, and some of my answers were marked as spam?? :frowning:) you’ll find the file I want to point to on the Voila Github repository under voila/js/src/manager.js

I am sure this could be useful for you as well.

Thank you alot! Gonna check this out!

Yes I just saw that, sorry for the disturbance. Apparently you posted too many links with a recent account for Discourse :sweat_smile: I restored your posts but I have to check why you cannot post links anymore.

Here’s the link you wanted to share: https://github.com/voila-dashboards/voila/blob/master/js/src/manager.js

1 Like