jpjwidgets

Jupyter Python+Javascript Widgets¹: link javascript variables with Kernel Python variables and vice-versa.

Note: One way to create a communication channel from the frontend to the backend is to open an HTTP Server, but there is also another way: ipybus. See associated readme for further discussion

jpjwidgets is not a replacement² for ipywidgets, it is just a complement which fill some gaps and brings some 'innovations'

• The most differentiating feature is that jpjwidgets brings a REST API, built by the application designer, embedded in the notebook
  • Using the jupyter server proxy
  • With the above feature, its possible to to fill the gap Jupyter Lab had (by design): communicate from javascript browser to the python kernel off-the-shelf
  • This HTTP communciation is safe as based upon the security framework of jupyter lab
  • the notebook is at the same time
    • A Jupyter IPython notebook
    • A REST API (which can also serve some web pages or files if needed)
  • This web server attached to a notebook can also be used to load dynamically javascript modules
• Please use UI widgets from ipywidgets: jpjwidgets project will not develop that (the range widget is just a POC)

If you want

• To copy browser's javascript variables to IPython kernel variable
• To set some browser's variable based upon IPython kernel variable (native to Jupyter Notebook)
• Dynamically load some javascript modules (ESM)
• Use Web Components inside jupyter Notebooks
• Feed the notebook with pictures from your smartphone live (implementation not provided)

Examples

• get the current calling Notebook url in a python variable
• get the browser Geo Position (if the user accepts) in a Python variable
• dynamically load javascript modules
  • Basic-Modules from MDN as a showcase
  • x-spreadsheet: an excel like front-end
  • wired-elements Web Components showcase

Architecture

• Javascript is simply generated thanks to the repr_javascript capability of IPython Notebook
  • this allows to set whatever javascript variable from a notebook programmatically
  • it can also be generated by the HTML function of IPython.display module
• Writing back javascript values to the notebook via the HTTP server
  • this allows to set whatever python IPython kernel variable with javascript Browser values
  • callback can also be implemented to change the state of the notebook when variable are received

Install

• Base Framework: Jupyter Lab + Jupyter ipywidgets + Jupyter Server proxy
• Copy: notebook, python file and subdirectories widgets and modules -- just for LoadJavascriptModules (including content) in a Jupyter Lab directory
• create the widgets directory in the above (if not created for LoadJavascriptModules)
• git clone might be a friend for the above
• Run: The notebooks

Notebooks and Python file

Notebook	features
LeanGettingStarted.ipynb	Getting Started example to retrieve the Notebook url in a python variable
javascriptwidgets.ipynb	Three examples: Notebook url, Browser Geo position, a slider Range UI
LoadingJavascriptModules.ipynb	Show case for loading javascript modules see Basic-Modules and MDN
x_spreadsheet.ipynb	Load the excel like spreadsheet from x-spreadsheet
wired-elements.ipynb	Simple demo to show Web Component use inside Jupyter wired-elements
httpserver.py	A python script to help managing a python based HttpServer see

Documentation

• Read the notebooks notes
• read the python file comments if you want to dig the HTTP server operations

Notice, Limitations and Foot Notes

• Don't forget to stop the HTTP server, best is to shutdown the IPython kernel, as the used port will generate an issue elsewhere.
• you can select the port when launching a server, just add port=xxxx to the start function
• The HTTP server might sometime lock the port which request restart of the jupyter server

1. In computing, a Widget is an application, or a component of an interface, that enables a user to perform a function or access a service.
2. This clarification was requested by @krassowski see