xarray html reprs hidden

[zmoon]

Describe the bug

If I disable display: none !important for [hidden], they appear properly.

I don't have this issue with other themes I have tried, such as the rtd theme.

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[choldgraf]

do you have a hide-outputs tag associated with that cell? That'd be the reason that something would be hidden by default.

Also it'd help if you can provide a link to a website with this bug / code to reproduce it.

[zmoon]

Hi @choldgraf, I didn't add any tags to that cell. When I use the rtd theme, the xarray.Dataset repr is not hidden.

I don't currently have a way to share the webpage, but I am working on that. It is a just a simple notebook in Jupytext percent format, included in my Sphinx docs build using nbsphinx.

Sphinx configuration

# -- General configuration ---------------------------------------------------

# Add any Sphinx extension module names here, as strings. They can be
# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
# ones.
extensions = [
    "sphinx.ext.napoleon",
    "sphinx.ext.autodoc",
    "sphinx.ext.autosummary",
    "sphinx_rtd_theme",
    "nbsphinx",
    "sphinxcontrib.bibtex",
    "myst_parser",  # automatically used to parse .md files
]

# Make nbsphinx detect Jupytext files
nbsphinx_custom_formats = {
    ".py": ["jupytext.reads", {"fmt": "py:percent"}],
}
# Figure quality
nbsphinx_execute_arguments = [
    "--InlineBackend.figure_formats={'svg'}",
    # "--InlineBackend.rc={'figure.dpi': 96}",
]

# Add any paths that contain templates here, relative to this directory.
templates_path = ["_templates"]

# List of patterns, relative to source directory, that match files and
# directories to ignore when looking for source files.
# This pattern also affects html_static_path and html_extra_path.
exclude_patterns = ["_build", "conf.py", "Thumbs.db", ".DS_Store"]

Jupytext script that goes with the image I posted

# %%
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
import xarray as xr

import crt1d as crt

# %matplotlib inline

# %% [markdown]
# ## Run (just once)
# Run the default case (which is loaded automatically when model object is created).

# %%
ms = []
for scheme_ID in crt.solvers.AVAILABLE_SCHEMES.keys():  # run all available
    m = crt.Model(scheme_ID, nlayers=60)
    m.run()
    m.calc_absorption()
    ms.append(m)

dsets = [m.to_xr() for m in ms]

# %% [markdown]
# ### Examine default case
#
# Leaf area profile and leaf angle dist, using the plotting methods attached to the `Model` instance.

# %%
...

# %% [markdown]
# ## Datasets and their variables

# %%
dsets[0]

# %%
dsets[0]["zm"]

[choldgraf]

I guess I am trying to figure out what you mean by:

If I disable display: none !important for [hidden], they appear properly.

How is a "hidden" class being attached to the output?

[zmoon]

It looks like it always has hidden attribute, but the rtd theme just doesn't do anything with it:

with book theme

with rtd theme

Can see it being set here:
https://github.com/pydata/xarray/blob/cc271e61077c543e0f3b1a06ad5e905ea2c91617/xarray/core/formatting_html.py#L231-L250

Should I raise this issue with xarray?

[choldgraf]

hmmmm....so I guess that hidden="" is being treated as a CSS class? I hadn't heard of that before. Raise it with them and see if they think this is expected behavior, and if so I can look into how we can get this working more properly in the sphinx-book-theme

[zmoon]

Looks like there is already an open issue: pydata/xarray#4320

Not in the purview of sphinx-book-theme to provide a workaround for that, so it is fine with me to close. Thanks for the help!

[fmaussion]

Most of the xarray folks have little experience with CSS (except maybe @benbovy who wrote html repr), so if you have a suggestion or a fix I'm sure it'll be much appreciated!

[benbovy]

It looks like another side effect of pydata/xarray#4053.

We could revert this dirty hack, but then the rendering issues will come back in other Jupyter Front-ends such as Notebook / Lab.

I don't really know what to do to solve this unfortunately 😕.

[choldgraf]

Hmmm - yeah I mean it seems like the behavior of "not showing up when the hidden attribute is there" is actually the correct behavior (at least, according to w3...so I don't think that we could work around this on the sphinx-book-theme side. What is hidden meant to accomplish within the xarray output?

[benbovy]

The 'hidden' attribute is there to prevent showing the html repr when a notebook is not trusted.

Jupyter Notebook and Lab do not inject the repr's CSS if that's the case, and without CSS, xarray's html reprs look totally ugly and unusable (like it's still the case in notebooks viewed on GitHub).

The 'hidden' attribute of an element should be ignored by browsers if there's a CSS display property defined for that element. We use this as a (weak) trick in xarray to show the repr when the repr's CSS is injected.

But in this case, it doesn't work because (I think) bootstrap 4 explicitly sets 'display: none' for all elements having the HTML 'hidden' attribute.

Maybe there's a way to add in this theme some CSS that supersedes bootstrap's definitions?

Probably we could add an extra display option in xarray as a flag to enable/disable this trick, if that could help...

[choldgraf]

ohh interesting - so if I understand you:

• w3 says you should treat "hidden" to say "hide this element entirely", unless another class explicitly sets the display: property

• xarray thus uses hidden="" along with a CSS class that has display: and thus overrides the display: none behavior? AKA it has another class like <div class="xarray-other-class" hidden=""> and then has a rule like

  div.xarray-parent-class div.xarray-other-class {
    display: inherit !important;
  }

  and because that rule is more specific than just div.hidden {}, it will take precedence?

If so, what is the CSS class that xarray uses, and we can special-case it in the theme (probably we'll want to do this in the pydata theme, since I could see this issue popping up in other pydata projects).

[zmoon]

Can confirm Bootstrap 4 sets display: none !important for hidden attribute:

https://github.com/twbs/bootstrap/blob/v4.5.3/dist/css/bootstrap.css#L353-L355

[benbovy]

Yes that's correct, although I admit it's very confusing and I don't really like it (https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute).

I think all you need here is to add the line below in this theme's CSS (given that it is injected after Bootstrap's CSS)

.xr-wrap { display: block !important }

[choldgraf]

ok cool, I am happy to special-case xarray since y'all are part of the pydata open source family 💞

but - longer term I agree that this is very hacky 😅

[benbovy]

Yeah longer term it would be great if we could somehow inject custom CSS once and safely in notebooks (if that's possible). Right now the whole CSS is embedded with every repr shown in output cells, which is not ideal either.

[choldgraf]

hey whatever works :-)

[benbovy]

Now that Jupyterlab 3 makes easier the installation of extensions with pip/conda, I'm wondering if we could eventually ship a lightweight extension with xarray...

[choldgraf]

that's a really interesting idea - I think this would totally work if that pattern becomes a community standard across other UIs (and if you particularly care about other UIs as well, like colab / vscode / etc...and if you don't care about those UIs, then either way yes I think this would be a great use of the new jupyterlab extension mechanism)

[choldgraf]

closing this as we should now properly display xarray via the pydata theme, feel free to re-ping here if it doesn't work in the future. Ref: https://pydata-sphinx-theme.readthedocs.io/en/latest/demo/theme-elements.html?highlight=xarray#xarray