Interactive widgets not compatible with JupyterLab

[sailyr1]

This error appears when attempting to execute the "Interactive Widget" example found in the repository-level README.md. I ran the code within a code cell in the latest version of JupyterLab and the output was:

Error displaying widget

The following image shows what is outputted to the JavaScript console after executing the example:

[cduck]

Thanks for reporting the issue. I can't reproduce the issue you are seeing. Do any of the other examples work? Can you try in a fresh python virtual environment? You can setup a new virtualenv with the following commands:

pip3 install virtualenv
virtualenv -p python3 debug-venv
source debug-venv/bin/activate
pip install drawSvg hyperbolic jupyter
pip freeze >packages.txt
jupyter notebook
# Try running "Interactive Widget" in the new notebook

Let me know if this works. If it doesn't, please tell me which OS, browser version and python version you are using, and the contents of packages.txt.

[sailyr1]

Thank you for the quick response!

Results

I ran each example from the same README.md file mentioned in the first issue comment. The following describes the results for each example that did not output what I expected.

"Implementing other SVG tags"

In JupyterLab, the SVG is displayed but there is no hyperlink.

"Asynchronous Animation in Jupyter"

In JupyterLab, nothing is outputted since a definition for AsyncAnimation cannot be found.

"Interactive Widget"

Jupyter Notebook outputs:

DrawingWidget()

JupyterLab outputs:

Javascript Error: Can't find variable: require
Error displaying widget

Environment Information

OS: macOS Catalina 10.15.5
Browser: Safari 13.1.1
Python: 3.7.3

packages.txt:

appnope==0.1.0
attrs==19.3.0
backcall==0.1.0
bleach==3.1.5
cairocffi==1.1.0
CairoSVG==2.4.2
cffi==1.14.0
cssselect2==0.3.0
decorator==4.4.2
defusedxml==0.6.0
drawSvg==1.6.0
entrypoints==0.3
hyperbolic==1.3.0
imageio==2.8.0
importlib-metadata==1.6.0
ipykernel==5.3.0
ipython==7.15.0
ipython-genutils==0.2.0
ipywidgets==7.5.1
jedi==0.17.0
Jinja2==2.11.2
jsonschema==3.2.0
jupyter==1.0.0
jupyter-client==6.1.3
jupyter-console==6.1.0
jupyter-core==4.6.3
MarkupSafe==1.1.1
mistune==0.8.4
nbconvert==5.6.1
nbformat==5.0.6
notebook==6.0.3
numpy==1.18.4
packaging==20.4
pandocfilters==1.4.2
parso==0.7.0
pexpect==4.8.0
pickleshare==0.7.5
Pillow==7.1.2
prometheus-client==0.8.0
prompt-toolkit==3.0.5
ptyprocess==0.6.0
pycparser==2.20
Pygments==2.6.1
pyparsing==2.4.7
pyrsistent==0.16.0
python-dateutil==2.8.1
pyzmq==19.0.1
qtconsole==4.7.4
QtPy==1.9.0
Send2Trash==1.5.0
six==1.15.0
terminado==0.8.3
testpath==0.4.4
tinycss2==1.0.2
tornado==6.0.4
traitlets==4.3.3
wcwidth==0.2.2
webencodings==0.5.1
widgetsnbextension==3.5.1
zipp==3.1.0

[cduck]

Thanks. I can reproduce it now. The issue is with JupyterLab (I was trying to reproduce in Jupyter Notebook). drawSvg has only been tested in Jupyter Notebook (although I assumed the API would behave the same).

This will take a bit of work to fix the JavaScript component of the widgets in drawSvg. For now I suggest using a Jupyter Notebook if possible.

[cduck]

Also, the hyperlink example isn't working because JupyterLab embeds the SVG in the page as an image instead of directly in the HTML.

[hoangmt]

Hi,
I am facing the same issue. Are there any update regarding this issue?

[cduck]

I have not had time to look into this issue yet. If you make progress, please reply here with what you find.

[asaboor-gh]

Also, the hyperlink example isn't working because JupyterLab embeds the SVG in the page as an image instead of directly in the HTML.

I don't think SVG is displayed as image in Jupyter Lab(I use SVG there, didn't test your code yet though). It could be because of a little different widget register mechanism in Lab. I would like that to be working so I can build a little drawing pad application there based on this package. It's really a little outstanding package.

[asaboor-gh]

Also, the hyperlink example isn't working because JupyterLab embeds the SVG in the page as an image instead of directly in the HTML.

I don't think SVG is displayed as image in Jupyter Lab(I use SVG there, didn't test your code yet though). It could be because of a little different widget register mechanism in Lab. I would like that to be working so I can build a little drawing pad application there based on this package. It's really a little outstanding package.

Hyperlink example is not working properly, link is not clickable. But Animation is working in JupyterLab: See screenshot, (ignore other things that I made to work with my package)

[asaboor-gh]

DrawingWidget does not work for me in classic Notebook either, even does not show any error there. In Jupyter Lab, It explicitly says Error displaying widget: model not found which means JavaScript assets should be loaded by Lab when extensions load up on start, it does not work with display(Javascript('')) thing. It works with random Javascript code but not for widgets. Anyway I liked your approach for SVG. Will be waiting for it working in Jupyter Lab, because Classic Notebook will also go along with code base of Lab in v7, so both things will work Jupyter Lab's way in future.

[cduck]

Thanks for the update @massgh. drawSvg currently uses display(Javascript()) to load the interactive widget code but Jupyter Lab (and also Classic Notebooks, if launced by jupyter lab) does not support this. I've recently tested that launching with the command jupyter notebook still supports the interactive widgets.

Jupyter documentation suggest following https://github.com/jupyter-widgets/widget-ts-cookiecutter to write a compatible widget but this requires publishing a node package, which is not technically required. drawSvg's JavaScript is very simple so I do not want to introduce the complexity of node's package compilation to the project. Instead, I plan to simply add a Jupyter Lab configuration JSON somewhere in the published package but I need to learn how this works. Please share here if you have experience with this.

Additionally, the install instructions will change from pip install drawSvg to pip install drawSvg; jupyter nbextension install drawSvg or something similar. This will make the installation process more complicated and add confusion if Jupyter and drawSvg are installed in different versions of Python.

[cduck]

Hyperlink example is not working properly, link is not clickable.

Jupyter Lab appears to have changed the way objects with the method _repr_svg_ are displayed. Notebooks inserted the <svg> tag inline into the page, allowing hyperlinks. Lab converts it to a data URL in an <img> tag which prevents user interaction.

A possible fix could remove _repr_svg_ from these lines and change _repr_html_ to output the SVG code. (I haven't tried this.)

Alternatively, use IPython.display.HTML(...) to add a link above/below the SVG.

[asaboor-gh]

Hyperlink example is not working properly, link is not clickable.

Jupyter Lab appears to have changed the way objects with the method _repr_svg_ are displayed. Notebooks inserted the <svg> tag inline into the page, allowing hyperlinks. Lab converts it to a data URL in an <img> tag which prevents user interaction.

A possible fix could remove _repr_svg_ from these lines and change _repr_html_ to output the SVG code. (I haven't tried this.)

Alternatively, use IPython.display.HTML(...) to add a link above/below the SVG.

Oh no, that's why my SVGs do not span to available space, just remain small there. Thanks for pointing it out.
And yes, inside the notebook launched over the lab server, there is issue, not with notebook server.

[ChrisJefferson]

Sorry to ping on this issue, but out of interest, does this problem seem fixable using @cduck's suggestion?

[cduck]

I appreciate your interest in this, @ChrisJefferson. Are you referring to the hyperlink example not being clickable or the interactive widget not running?

This GitHub issue is focused on the interactive widget. I plan to get to this but I need to find a large chunk of time to reverse engineer the Jupyter Lab widget API (since I haven't found sufficient documentation).

The hyperlink example should work now in drawsvg 2.0 with the new d.display_inline() or d.display_iframe(). If you are still having issues, please open a new GitHub issue that references this one.

[mbclarkengineering]

Did you try anywidget? This may be an easy way to add this functionality. I am very interested in the Jupyter Lab integration possibility.
https://anywidget.dev/

[asaboor-gh]

I did in other cases but not drawSvg. I think author may be considering this as well. It's super easy and working every where.

[cduck]

Thank you @mbclarkengineering for pointing me to anywidget! This might not have exited last time I looked.