Xarray dataset html repr is not correctly formatted

[sandorkertesz]

If I have a notebook with an Xarray html repr the generated Sphinx html documentation using NBSphinx looks rather different containing a lot of empty space. This is a concrete example:

import xarray as xr
url="https://psl.noaa.gov/thredds/dodsC/Datasets/noaa.oisst.v2/sst.mnmean.nc"
ds = xr.open_dataset(url)
ds

Notebook:

Generated Sphinx html documentation:

This happened to all the Xarray datasets I tried in my various projects.

My Sphinx configuration can be found here:
https://github.com/ecmwf/earthkit-data/blob/develop/docs/conf.py
It is using this CSS file: https://github.com/ecmwf/earthkit-data/blob/develop/docs/_static/style.css
However, even when not using this CSS file the problem still occurs.

In my latest tests I used this environment (Python 3.10.13):
docutils 0.20.1
nbclient 0.8.0
nbconvert 7.16.4
nbformat 5.9.2
nbsphinx 0.9.3
Pygments 2.17.2
Sphinx 7.3.7
sphinx-autoapi 3.0.0
sphinx-issues 4.1.0
sphinx-rtd-theme 2.0.0
sphinxcontrib-apidoc 0.3.0
sphinxcontrib-applehelp 1.0.7
sphinxcontrib-devhelp 1.0.5
sphinxcontrib-htmlhelp 2.0.4
sphinxcontrib-jquery 4.1
sphinxcontrib-jsmath 1.0.1
sphinxcontrib-qthelp 1.0.6
sphinxcontrib-serializinghtml 1.1.9
xarray-2024.9.0

[mgeier]

Thanks for this report!

Can you please provide an example that doesn't depend on SciPy/NetCDF that I can add to the docs (because I would like to avoid dependencies that aren't strictly necessary)?

[sandorkertesz]

Thanks for looking into this!

This is the example, you can easily customise it:

import xarray as xr

a = {}
for name in ["t", "q"]: 
    da = xr.DataArray(
        [
            [[11, 12, 13], [21, 22, 23], [31, 32, 33]],
            [[14, 15, 16], [24, 25, 26], [34, 35, 36]],
        ],
        coords={"level": ["500", "700"], "x": [1, 2, 3], "y": [4, 5, 6]},
        name=name,
        attrs={"param": name}
    )
    a[name] = da

ds = xr.Dataset(a, attrs={"title": "Demo dataset", "year": 2024})
ds

Notebook:

Sphinx:

[mgeier]

Thanks for the example, I've added it in #817.

The display problems seem to be theme-dependent.

I currently don't have time to look into that, but maybe someone else will?

There are already some CSS overrides for the RTD theme, more can be added as needed:

nbsphinx/src/nbsphinx/_static/nbsphinx-code-cells.css_t

Lines 260 to 273 in 84b9575

	{% if html_theme in ['sphinx_rtd_theme', 'julia', 'dask_sphinx_theme'] %}
	/* CSS overrides for sphinx_rtd_theme */
	/* 24px margin */
	.nbinput.nblast.container,
	.nboutput.nblast.container {
	margin-bottom: 19px; /* padding has already 5px */
	}
	/* ... except between code cells! */
	.nblast.container + .nbinput.container {
	margin-top: -19px;
	}
	{% endif %}