How to enable JavaScript to pass information in the new version of Jupyter?

Notebook
1

I plan to create an interactive presentation file using Jupyter. Therefore, I want to utilize the abundant display capabilities of the web. I aim to be able to concatenate strings in Python code to control the output and generate HTML with JavaScript functionality. At the same time, I want JavaScript to interact with the Python code. I know that the ipywidgets library can achieve some of these functions. However, I would prefer a simpler approach where all of this can be encapsulated in Python code and accomplished by concatenating strings. Instead of creating ipywidgets plugins, I want to complete everything through string concatenation in Python code. The HTML and JavaScript in the display function of IPython can output the corresponding js+html, but they cannot enable the interaction between JavaScript and Python. I don’t know what method to use in JavaScript to achieve this functionality. The previous ipython.kernel method has failed, so what is the new calling method now?

2

There is no particular, general case replacement for talking directly to the kernel, as this was never portable between different client implementations.

Jupyter Widgets are indeed the cross-client way to achieve this kind of thing. One can use widgets as a “message bus”. Started writing here, but it got slightly longer to show the full lifecycle, so here’s a gist.

The basic idea showing bidirectional communication:

  • use two widgets to work as the input/output to the HTML
    • these will store JSON, which the front and backend agree on
    • happened to use the Textarea, but could be just about anything)
  • use widget.add_class to get something easy to find in the DOM
  • use plain-old JS addEventListener to instrument the plain-old-HTML
  • use setInterval to poll the widget HTML

The above was written in JupyterLite’s Lab, but also works in Notebook.

1 Like