Fancy reprs

What is your issue?

In Xarray we already have the plain-text and html reprs, which is great.

Recently, I've tried anywidget and I think that it has potential to overcome some of the limitations of the current repr and possibly go well beyond it.

The main advantages of anywidget:

• it is broadly compatible with jupyter-like front-ends (Jupyterlab, notebook, vscode, colab, etc.), although I haven't tested it myself on all those front-ends yet.
• it is super easy to get started: almost no project setup (build, packaging) is required before experimenting with it, although it still requires writing Javascript / HTML / CSS, etc..

I don't think we should replace the current html repr (it is still useful to have a basic, pure HTML/CSS version), but having a new widget could improve some aspects like not including the whole CSS each time an object repr is displayed, removing some HTML/CSS hacks... and actually has much more potential since we would have the whole javascript ecosystem at our fingertips (quick plots, etc.). Also bi-directional communication with Python is possible.

I'm opening this issue to brainstorm about what would be nice to have in widget-based Xarray reprs:

• fancy hover effects (e.g., highlight all variables sharing common dimensions, coordinates sharing a common index, etc.)
• more icons next to each variable reprs (attributes, array repr, quick plot? quick map?)
• ... ?

cc @pydata/xarray

No files, tests, or entry points are named. Start by reviewing Xarray's existing plain-text and HTML repr implementations, then read the linked anywidget material and assess the proposed hover effects, icons, and interactive features. The issue does not define a concrete scope or acceptance criteria for done.