HTML jstree doesn't work in jupyter lab

[alimanfoo]

Problem description

When calling group.tree() in a jupyter notebook environment, an expandable tree should be rendered via jstree. This works in classical jupyter notebook but doesn't work in jupyter lab.

Version and installation information

• Value of zarr.__version__: 2.2.0
• Jupyter Lab version: 0.32.1
• Version of Python interpreter: 3.6.5
• Operating system (Linux/Windows/Mac): Linux
• How Zarr was installed (e.g., "using pip into virtual environment", or "using conda"): conda

[jakirkham]

Can't find the exact issue, but JupyterLab apparently disallows inlining the script tag. So this is likely causing us issues. I'm not sure what the easiest solution is, but one option would be to rewrite this using ipywidgets. Maybe someone else knows a simpler option.

ref: jupyterlab/jupyterlab#2710 (comment)

[jakirkham]

Looks like PR ( jupyterlab/jupyterlab#2595 ) is where inlined script tags got sanitized. A fair bit of discussion is happening in issue ( jupyterlab/jupyterlab#3118 ) about whether this is a good idea and how best to address user expectations. Maybe this is one of those wait and see problems.

[alimanfoo]

Thanks @jakirkham, I added a comment re zarr.

[jakirkham]

Thanks for doing that @alimanfoo. :)

[jakirkham]

cc-ing @jasongrout (as we talked about this one in person ;), for advice on how we should fix this.

[jakirkham]

Maybe this doc page is useful? Not sure if those are the most up-to-date ones though.

[jakirkham]

Probably also worth looking at how XArray is approaching this. ( pydata/xarray#1820 )

[jakirkham]

So one short-term option might be to add _repr_json_. This is something that JupyterLab knows how to display. That said, it does leave some things to be desired.

[jakirkham]

It looks like QuantStack has been working on ipytree, which taken from the description states it is "a Tree Widget using Jupyter-widgets protocol and jsTree". This seems pretty close to what we are looking for. Might be worth giving it a try.

[jakirkham]

FWIW I did a brief experiment with ipytree.

Here's the notebook from it. If you install ipytree, it works great with both the Jupyter Notebook and JupyterLab. Also can view the results with nbviewer.

Currently it doesn't render in nbviewer (or GitHub) though. Have raised issue ( jupyter-widgets-contrib/ipytree#8 ) on this point. Not sure how much of a blocker this is for us. Perhaps we can have our own fallback to mitigate this (maybe reusing our existing implementation)? Exporting the widget state for nbviewer can be done with the Jupyter Notebook using the Save Notebook Widget State feature. In the near future JupyterLab will support this export feature as well.

[jakirkham]

Reimplemented .tree's representation using ipytree. Have added PR ( #450 ) with a working implementation. Still need to update docs and get tests running on CI (though tests are written).