xarray DataArray and Dataset HTML representation

[blaylockbk]

trafficstars

Hi mkdocs-jupyter, Thanks for providing this support. It's been great to work with.

One thing I've run into is the Xarray DataArray and Dataset HTML representations are not rendered the same as they are in a Jupyter Notebook.

In Jupyter

import xarray as xr
import numpy as np

data = xr.DataArray(np.random.randn(2, 3), dims=("x", "y"), coords={"x": [10, 20]})
data

Rendered in MkDocs (light and dark theme in mkdocs material)

Some of the elements are there, but it doesn't look quite right.

---

I was expecting it to render similar to how mkdocs-jupyter nicely handles a Pandas DataFrame

import pandas as pd
pd.DataFrame({"A": [1, 2, 3, 4]})

Thanks for your consideration on this issue.

[giswqs]

I am interested in this as well.

[danielfrg]

It should be a matter of adding some CSS styles. We do that for pandas so they look good.

[brynpickering]

Based on https://github.com/damianavila/RISE/issues/594, I added this to my CSS to at least remove the repetition of the dataset contents in pretty and simple HTML:

.md-typeset pre.xr-text-repr-fallback {
    display: none;
}

Ideally the dropdowns would all be closed by default but it seems that it only closes them when there are >=10 items in the dropdown.

[brynpickering]

I've gone into the CSS and made more tweaks that now lead to what I think is the correct formatting for the xarray dataset HTML representation:

.md-typeset pre.xr-text-repr-fallback {
    display: none;
}

.md-typeset ul.xr-sections, .jupyter-wrapper .jp-OutputArea-output dl.xr-attrs {
    display: grid;
}

.md-typeset li.xr-var-item, .md-typeset ul.xr-var-list {
    display: contents;
}

.md-typeset .xr-section-details {
    display: none;
}

.md-typeset ul.xr-dim-list li {
    margin-bottom: 0;
    margin-left: 0;
}

.md-typeset ul.xr-dim-list {
    margin-bottom: 0;
    margin-top: 0;
}

.jupyter-wrapper .jp-OutputArea-output .xr-attrs dt {
    padding: 0;
    margin: 0;
    float: left;
    padding-right: 10px;
    width: auto;
    font-weight: normal;
    grid-column: 1;
}