Improve display of HTML reprs

[shoyer]

The current DataTree repr never expands sub-groups, and shows all DataTree attributes even if they are empty. This makes it annoying to visualize nested DataTrees, especially if the top levels are just splitting into sub-groups.

This PR hides missing sections, and as a simple heuristic, automatically expands sub-groups if there are no data variables associated with a group level. I've also added a 📁 icon to make groups more visually distinct.

Using one of the examples from the docs:

Before:

After:

import xarray as xr
import numpy as np

# Set up coordinates
time = xr.DataArray(data=["2022-01", "2023-01"], dims="time")
stations = xr.DataArray(data=list("abcdef"), dims="station")
lon = [-100, -80, -60]
lat = [10, 20, 30]

# Set up fake data
wind_speed = xr.DataArray(np.ones((2, 6)) * 2, dims=("time", "station"))
pressure = xr.DataArray(np.ones((2, 6)) * 3, dims=("time", "station"))
air_temperature = xr.DataArray(np.ones((2, 6)) * 4, dims=("time", "station"))
dewpoint = xr.DataArray(np.ones((2, 6)) * 5, dims=("time", "station"))
infrared = xr.DataArray(np.ones((2, 3, 3)) * 6, dims=("time", "lon", "lat"))
true_color = xr.DataArray(np.ones((2, 3, 3)) * 7, dims=("time", "lon", "lat"))

dt2 = xr.DataTree.from_dict(
    {
        "/": xr.Dataset(
            coords={"time": time},
        ),
        "/weather": xr.Dataset(
            coords={"station": stations},
            data_vars={
                "wind_speed": wind_speed,
                "pressure": pressure,
            },
        ),
        "/weather/temperature": xr.Dataset(
            data_vars={
                "air_temperature": air_temperature,
                "dewpoint": dewpoint,
            },
        ),
        "/satellite": xr.Dataset(
            coords={"lat": lat, "lon": lon},
            data_vars={
                "infrared": infrared,
                "true_color": true_color,
            },
        ),
    },
)
dt2

• Tests added
• User visible changes (including notable bug fixes) are documented in whats-new.rst

[shoyer]

CC folks who may have opinions/ideas here: @jsignell @eni-awowale @TomNicholas

[dcherian]

This PR hides missing sections, and as a simple heuristic, automatically expands sub-groups if there are no data variables associated with a group level.

I like all this.

Shall we add an emoji to indicate a group and separate it form the remaining sections, so 📁 satellite and 📁 weather? Using bold black for the text might be enough too

[jsignell]

Yeah I think this is much better. It still uses a lot of vertical space and is fairly information sparse but this is an improvement!

[jsignell]

I like it!

[shoyer]

I did a bigger clean-up of the DataTree HTML code, adding in the 📁 icon. I ended up deleting a handful of very fragile mock tests.

I tried to make the folder icon / path name clickable to hide individual groups. I was able to get something working with the aid of AI code generation, but couldn't get it looking right after an hour of fiddling, so I'll let something with better CSS skills figure that out later.

[TomNicholas]

This looks great, but if we're going to hide empty sections, shouldn't we also do that for Dataset and so on?

[shoyer]

This looks great, but if we're going to hide empty sections, shouldn't we also do that for Dataset and so on?

Probably yes?

This would make text and HTML reprs more aligned.

It's less of an issue for Dataset, because Dataset does not have a recursive repr.

[shoyer]

This looks great, but if we're going to hide empty sections, shouldn't we also do that for Dataset and so on?

I've made this change for Dataset and DataArray, too. I'm now using the exact same logic for deciding to show sections between the text and HTML reprs, and added some (non-exhaustive) tests.

Before:

After:

[TomNicholas]

Amazing!

[shoyer]

#10795 removes some of the unnecessary vertical whitespace from Jupyter notebooks.

As usual with HTML formatting glitches, the issue was mostly due to defaults from inherited styles.