Getting nbev3devsim (jp_proxy_widget wrapped Javascript App) Running In JupyterLab With JupyterLab-Sidecar

One of the blockers I’ve had to date running the nbev3devsim simulator in JupyterLab was the requirement to have just a single instance of the widget running in a notebook. This is an artefact (I think) of the jp_proxy_widget having a hardwired HTML element reference that needs to be unique.

The JupyterLab sidecar widget offered promise in the form of mirroring a cell output in a separate JupyterLab panel, the only problem being this then created a second widget instance (once in the original cell output, once in a mirroring panel).

But it seems that a (not so?) recent update to the sidecar extension allows you to display a rendered object not in a JuptyerLab cell output, but instead in a separate, detached panel:

This compares to the current classic notebook view where I style the css to dodge the notebook to the left hand side of the page and then pop the simulator into a floating resizable widget:

For a review of nbev3devsim and the materials associated with its use, see this overview.

The recipe for getting the widget displayed in the JupyterLab sidecar panel is as follows:

#%pip install git+https://github.com/innovationOUtside/nbev3devsim.git
#%pip install sidecar
#%pip install jp_proxy_widget
# !jupyter labextension install jp_proxy_widget
# Reload...

from nbev3devsim import ev3devsim_nb as eds

roboSim = eds.Ev3DevWidget()

roboSim.set_element("response", '')

from sidecar import Sidecar

with Sidecar(title='RobotLab', anchor='split-right'):
    display(roboSim)

This seems to work fine on the jp_proxy_widget Binder server into which the sidecar package is installed (and the environment reloaded) but there’s a jp_proxy_widget error (even with a simple test widget) when installing the jp_proxy_widget package into the Binderised sidecar repo. So there’s presumably some package version conflict somewhere? Works fine if you make sure the proxy widget extension is explicitly installed.

In the jp_proxy_widget Binder environment, the plumbing also seems to work: loading in the magic (%load_ext nbev3devsim) and then running via the block magic (`%%sim_magic` or %%sim_magic -s roboSim) and programs seem to run in the simulator okay. Line magics to control the simulator setup also seem to work okay.

There may be a few things, particularly to do with accessibility, that work (ish?!) in the classic notebook UI that break in the JupyterLab UI. A move to the JupyerLab UI also means that icons for launching server proxy apps from the launcher will be required.

But it’s starting to look that the robot simulator is viable in JupyterLab. I just need to find a way to get the notebook customisation extensions such as nb_extension_empinken and nb_extension_tagstyler ported over.