Jupyter widgets docs don't actually use ipywidgets. ...?

[drscotthawley]

Description

I'm looking at the Quarto Docs for Interactivity and Jupyter Widgets:

Jupyter Widgets enable you to use JavaScript visualization libraries like Leaflet, Plotly, and threejs directly from Python.

If you are using the Jupyter engine with Quarto this is a great way to incorporate interactivity without learning JavaScript.

but...that page doesn't actually use any ipywidgets. (They use ipyleaf and plotly.)
So I'm confused how to actually do it. Something like a simple slider?

When I try the simplest interactive slider widget....

import ipywidgets as widgets

@widgets.interact
def f(x=5):
    print(x)

...I find that it doesn't seem to render when I preview or publish my blog.

How do we get this to work?
Thanks.

The related Issue I can find, #2445, is already closed a year ago. So I'm opening a new Discussion prior to reporting a bug.

PS- What I want to do is make a graph that responds interactively as readers move a slider. The docs lead me to believe this should be possible even for static web pages, and that I won't need to learn Oberservable JS or Shiny, that I can do it all in python with Jupyter. If this is not the case, the docs should be edited to not mislead users.

[mcanouil]

Interactivity is different from allowing new computations.
The widgets allow to manipulate the rendered object, not to manipulate the actual data.

This being said, Quarto can't have an example for every possible Python modules using JavaScript.
But the modules comes usually with documentation, see https://ipywidgets.readthedocs.io/en/latest/.
This should work in Jupyter thus in Quarto.
If you can't get it to work in a Jupyter Notebook, then the issue is in your code.

[hughcross]

The above code does work in a Jupyter Notebook. I pasted it in a notebook and it worked no problem. I have a notebook with simple interactive widgets, that all work in the notebook. They then should work in Quarto, but when I render the ipynb none of the sliders or other widgets show up. I think that is what @drscotthawley is referring to. I think the confusion is about which Jupyter widgets will work in Quarto. The link on the Quarto page points to https://jupyter.org/widgets, which includes the Leaflet library. However, the link that you gave, and from which @drscotthawley and I got our code, refers to ipywidgets, none of which seem to work when the notebook is rendered.

If anyone out there has gotten an ipywidget to work with Quarto, that would be awesome, and please share. Otherwise, we can conclude that this class of widgets will not work in Quarto. Of course the confusion is not the fault of Quarto developers. They are both called Jupyter Widgets, though they are different libraries. I believe this is referred to in issue # 4420. It seems we pythonistas need to learn Shiny for Python (or just Shiny), or Javascript to get that kind of interactivity in Quarto.

[mcanouil]

I don't have any issue following the documentation.
ipywidgets is clearly working with Quarto.

Screen.Recording.2023-09-27.at.22.35.10.mov

---
format: html
---

```{python}
import ipywidgets as widgets
widgets.IntSlider()
```

[cscheid]

Let me try to add a bit of context (since I wrote the response in #4420 you're referring to).

The kind of Jupyter interactivity that we can't easily support directly in Quarto is that which involves a live Jupyter process for every open web browser. This is what ipywidgets.interact uses, and the reason we can't support it is that Quarto produces HTML documents that are meant to be served by "plain old" static HTTP servers, so that Quarto documents can be directly deployed to GitHub Pages, AWS, Netlify, etc (as well as your own HTTP servers, of course). In order for ipywidgets.interact to work, a jupyter kernel needs to be live and running, and that is a fundamentally more involved mode of deployment. With that said, a number of ipywidgets widgets don't actually require a live kernel, and, as @mcanouil showed above, those work. You can see them directly in action here as well: https://quarto.org/docs/interactive/widgets/jupyter.html

In addition, if you do need an interactive Python session as well as simple publishing, then you do need to use ShinyLive. It's now usable in Quarto itself (https://github.com/posit-dev/shinylive), and supports both R and Python runtimes. There you get the best of both worlds, but it does mean that you need to learn the Shiny API.

[hughcross]

Thanks to everyone for your input. This has been a really useful discussion for me. I have been using Quarto more and more in my work, mostly to produce some nice looking reports for our collaborators. I will check out ShinyLive, that seems to be the way to go. I especially appreciate the explanation of @cscheid for why the interactive elements of ipywidgets won't work (though some confusion persists--the link you provide does not mention ipywidgets at all, but rather other Python widget libraries).

[einarpersson]

"Interactivity is different from allowing new computations."

This is not what you expect as a newcomer. Should be clarified up-front in order to avoid disappointments

[drscotthawley]

Ok, I propose editing the docs page https://quarto.org/docs/interactive/widgets/jupyter.html to include content from the clarifications said in this thread. Namely that some widgets will work and others won't, and how users can distinguish between them.

I can take a stab at doing so, but first want to get a "feel" from admins about whether they'd be open to a Pull Request along these lines.

[kirkpsmith]

I also feel the Quarto documentation would benefit from added clarification, as I just had the same thought process. Coming from primarily Python background myself.