Integrate Treescope into Xarray's interactive HTML repr

[shoyer]

Treescope is a interactive HTML pretty-printer for multi-dimensional arrays:
https://github.com/google-deepmind/treescope

With Treescope, instead of looking at this:

You could be looking at this:

Could we integrate this into Xarray's HTML repr? This could be a big step-up over printing the NumPy repr for array values!

[Illviljan]

Can't we do this with xr.plot or hvplot.xarray?

[shoyer]

Can't we do this with xr.plot or hvplot.xarray?

Yes -- the exciting thing for me about Treescope is the focus on dynamic visualization of direct array values, rather than requiring you to make an opinionated choice about how to plot it.

[Illviljan]

I meant that ._html_repr_ would use xr.plot/hvplot interactively depending on if the user clicked a "plot"-icon. That wouldn't require any more choices for the user compared to Treescope, no?

[benbovy]

Another advantage of Treescope is that is seems to only depend on numpy. For the interactive array visualization it injects vanilla JavaScript code via Python in a way that appears to work with notebook front-end environments? I haven't tried it yet, though.

Not sure but it also looks like it injects the whole (sandboxed) JavaScript code for each displayed array, which might impact performance if we use Treescope in the pure HTML/CSS Xarray reprs of datasets with many variables. Perhaps it is more reasonable to use it only for DataArrays. Or alternatively we can try using it on-demand via an interactive widget repr (e.g., https://github.com/benbovy/xarray-fancy-repr).

[headtr1ck]

Would it make sense to add it as an optional dependency and keep a "classical" fallback repr?

[benbovy]

Would it make sense to add it as an optional dependency and keep a "classical" fallback repr?

If we go that route we could rather include https://github.com/benbovy/xarray-fancy-repr as an optional dependency and integrate treescope (or some javascript equivalent) there. This would allow for much more customization and generic bi-directional communication between the front-end Xarray widgets and Python via anywidget. This would also fix other issues like displaying and navigating into large, lazy data trees (#9511).