jupyter-ui
jupyter-ui copied to clipboard
datalayer
[DISCUSS] Support the dynamic installation and usage of any IPyWidgets
I was testing different packages and sometimes it is working fine, for example it works for itables package.
I have problem with ipydatagrid, bqplot and tldraw (it is based on anywidget package).
Example error:
How to check which js packages should be loaded for the notebook before rendering the notebook?
We have an example for bqplot https://github.com/datalayer/jupyter-ui/blob/main/packages/react/src/examples/Bqplot.tsx
How to check which js packages should be loaded for the notebook before rendering the notebook?
IPyWidgets need python (server side) and javascript (client side). The package name has to be retrieved typically from their git repository (or doc), and they have to be deployed with compatible version number.
I guess we can start testing/maintaining a list of those information in a documentation, or implement a React.js that does that job. That is the whole point of this discussion.
Otherwise, I don't see a way to check before hand what the user is going do.
Something more evolved would mean to catch that error in the WidgetManager.loadClass and try to remediate with pip install and javascript dynamic loading. This would be a more evolved implementation of the React.js component I just mentioned.
With JupyerLab, the extensions are installed via python and discovered dynamically via a jupyterlab endpoint. Then each ipywidgets registers itself to the ipywidgetmanager
We may get inspiration from that mecanism. The idea with jupyter-ui is that you just need a "jupyter server", not a full jupyterlab on the server side. But we could mimic that in the jupyter-react python package which is itslef a jupyter server extension.
That may sound weird (sorry for the shortcuts)... but indeed good inspiration there (just reusing the jupyterlab machinery, implement something similar).
@pplonski https://github.com/datalayer/jupyter-ui/commit/86ad858eab9c42c1b0bd8ffd1870aeb5c5b7739e implements this featuire. For the Notebook, you don't need to declare the javascript ipywdigets. They will be automatically fetched based on the requested python ipywidgets 🎉
@pplonski You can try that feature on this storybook page https://jupyter-ui-storybook.datalayer.tech/?path=/story/components-notebook--playground
The python package needs to be present on kernel start, so if you pip install a ipywidgets python package, the log will normally tell you that you have to restart the kernel (which is not yet supported via the storybook).
WDYT?
Thank you @echarles! This is amazing.
I've played with it. When I drag a cell with widget then the widget disappear.
Thank you so much @pplonski for testing 🙏. I have tried that outside of Storybook and moving cells around keep the slider ipywidgets.
Screencast from 02-01-24 11:20:20.webm
I had to tweak around to integrate jupyter-react in the Storybook (storybook is great, but sometime behave in a weird way when you have to configure it). So I have opened https://github.com/datalayer/jupyter-ui/issues/161 to tackle that at some point as this is IMHO a pure storybook issue.
Any other feedback you would have?
I don't understand the code changes, so cant give feedback about it. I'm glad that it is working.
There are a lot of small user experience issues, for example, instead of showing the log that user should restart a kernel, it should be automatically restarted. Is it possible?
instead of showing the log that user should restart a kernel, it should be automatically restarted. Is it possible?
That behavior is the standard jupyterlab behavior. The intent of jupyter-react is to pair with jupyterlab while making it very easy to consume from React.js.
It is time now to make jupyter-react better than jupyterlab, so I will look at how to automatically restart the kernel when Note: you may need to restart the kernel to use updated packages. is outputed by the kernel.
@echarles that would be great, but first of all, users shouldn't install new packages directly in the cells, there should be a separate UI for managing the environment.
there should be a separate UI for managing the environment.
Makes a lot of sense. That is something we are working on in private for now as part of a bigger system https://datalayer.tech/docs/clients/services/jupyter-environments. The UI to manage the environment may land at some point in this repository.
Hi @echarles - in https://github.com/datalayer/jupyter-ui/commit/86ad858eab9c42c1b0bd8ffd1870aeb5c5b7739e it looks like you still have a configuration of externalIPyWidgets in the Notebook parameters - is that required or can the code retrieve that configuration block from the server? Thx!
Hi @ajwilkinson We should remove completely those externalIPyWidgets props from the code base. They are not used anymore. The missing ipywidgets are now automatically fetched, no need to declare them.