ISO: How to embed interactive ipywidgets from JupyterLab thru Quarto?

[DrJJWMac]

I develop interactive demos as teaching and learning resources. I use python in JupyterLab with ipywidgets. A base example is a JupyterLab notebook to create a graph for y = k(x - xo)^2 + yo with sliders for k, xo, and yo.

I am searching for a minimum working example (MWE) that can show me how to include interactive ipywidget sliders and other interactive input tools in a way that they will translate through Quarto to the output document(s).

[jjallaire]

There isn't currently support for this (although its something we'd definitely like to do!). Note that in this scenario the output documents will require a server of some kind to be shared. The Voila project implements this concept (https://voila.readthedocs.io/en/stable/) but with nbconvert/jinja as the HTML generation engine rather than Quarto.

[DrJJWMac]

Thank you for the pointer to Voila. Sorry to hear that a server would be required for interactivity in Quarto. This defeats one reason behind my request. My ultimate goals is a quick way to make brief, self-standing, well formatted, interactive study guide documents for courses. Not every student has the gumption to bother running demos in JupyterLab, even simply through the existing Web and certainly not by doing their own client-side download. Some appreciation has to be given to allowing a simpler "point, click, and run" option.

I'll mark you answer as completing this thread. I'll follow Quarto for other reasons and can post again as other questions arise.

[jjallaire]

I should not that you can create fully client-side interactive documents using Quarto's integration w/ Observable: https://quarto.org/docs/computations/ojs.html

[DrJJWMac]

Thank you. I saw this. My code is python. Rather than convert it to JavaScript, I hope to find an example on how to incorporate OJS interactive widgets that feed values into a python function to generate the graph.

ps -- I have also learned that Voila is purely a server-side solution. It does not offer client side interaction widgets. This finding gives me all the more reason to learn if Observable offers a way to bridge into python code yet remain client-side for interactions.

[eitsupi]

Notebooks may be available that uses the Pyodide project to run Python in the browser.
https://pyodide.org/en/stable/project/related-projects.html#notebook-environments-ides-and-repls

[DrJJWMac]

Thanks. Pyodide is above my comprehension level to develop into my workflow. Even with some effort, the base needed to make it happen is no longer supported.

[tomkom]

I am bringing this thread back up. Current quarto documentation implies that this should be somehow possible: docs ( I am unsure what is the difference between Python Widgets and ipywidgets. Documentation on both seems flaky).

I am able to generate a nice slippy-map results (similar to the one shown in docs, using pyleaflet - except I did it using folium). But I am unable to generate something similar to the examples using Observable, where once could manipulate inputs say to a sin(x) curve. I am able to generate input widgets, but the value does not seem to reflect on the function result. Is this because the serving (only tried quarto preview and quarto render) is not sufficient? I would have thought this is running a webserver sufficient for the serving.

[tomkom]

To add a MRE:

from ipywidgets import interact
import ipywidgets as widgets

import matplotlib.pyplot as plt
import numpy as np

def plot(freq):
    x = np.linspace(0, 2*np.pi)
    y = np.sin(x * freq)
    plt.plot(x, y)

interact(plot, freq = widgets.FloatSlider(value=2, min=0.1, max=5, step=0.1))

[jjallaire]

Interactive python widgets don't work because you need to hive a live Jupyter kernel behind them (and Quarto currently just renders static content). We would need to emulate the behavior of Viola (https://voila.readthedocs.io/en/stable/) in order to support interactive inputs. Not out of the question but a considerable amount of work so not a short term thing.