Add Dimension names to visualization in html repr

[ianhi]

Is your feature request related to a problem?

The dask array repr for a dataarray is pretty nice, but I think it would be even nicer if I could also see which dim was which on the chunk visualization

Describe the solution you'd like

Something like this:

Describe alternatives you've considered

No response

Additional context

No response

[welcome]

Thanks for opening your first issue here at xarray! Be sure to follow the issue template!
If you have an idea for a solution, we would really welcome a Pull Request with proposed changes.
See the Contributing Guide for more.
It may take us a while to respond here, but we really value your contribution. Contributors like you help make xarray better.
Thank you!

[TomNicholas]

This is a good idea, and should be pretty easy to do. The relevant code is in https://github.com/pydata/xarray/blob/main/xarray/core/formatting_html.py.

[ianhi]

To make the image above, it may be a bit difficult as the part I was annotating actually comes from the Dask Array repr which xarray does not directly control. This may require either upstream contributions to dask, or an xarray version of the cube visualization.

[TomNicholas]

Good point - I retract my statement that this is easy.

[Illviljan]

The example uses quite short dimension names. I'm curious how it will look like with ("long_dimension_name_along_s", "long_dimension_name_along_t", "long_dimension_name_along_x", "long_dimension_name_along_y")

[benbovy]

Yes an Xarray version of that visualization seems like a good idea IMO, without replacing the original one as I think that for Xarray container objects we should keep showing the repr of the underlying array (numpy, dask, etc.) transparently without trying to tweak it. We could use new icon buttons in the html repr to allow switching between the different representations.