issues: 863506023

This data as json

id node_id number title user state locked assignee milestone comments created_at updated_at closed_at author_association active_lock_reason draft pull_request body reactions performed_via_github_app state_reason repo type
863506023 MDExOlB1bGxSZXF1ZXN0NjE5OTAxMzA2 5201 Fix lag in Jupyter caused by CSS in `_repr_html_` 12912489 closed 0     29 2021-04-21T06:46:28Z 2023-03-28T04:21:43Z 2023-03-28T04:21:43Z NONE   0 pydata/xarray/pulls/5201

What

The CSS used by _repr_html_ (for displaying objects in Jupyter) placed font colors in :root as CSS custom properties. This seems to cause lag in notebooks with more than a couple of dozens of cells when running a cell that displays outputs. We observed this on Chrome and Firefox, so it is probably not browser-specific.

To reproduce

  • In a new notebook, create a simple array: python import xarray as xr import numpy as np data = np.random.rand(4) a = xr.DataArray(data, coords=[np.arange(4)], dims=['x'])
  • From a second cell, display a: python a This is probably fast with no noticable lag.
  • Add 50-100 more cells. They CAN be empty. Run the second cell again. You may notice a small lag before the array is displayed, which can exceed 1 second in some cases (depending on number of cells in the notebook, and probably the type of hardware the browser is running on, it is clearly visible on my 2015 Macbook Pro).
  • Probably other UI interactions such as switching tabs are also affected, but there the effect is not entirely clear.

Fix

  • Set CSS custom properties not in :root but the top-level class xr-wrap.
  • TODO: I think the vscode-dark settings also may need to change, but my understanding of CSS is too limited. Can someone suggest how to fix this or take care of it?

Discussion

Interestingly we ran into this problem independently of xarray: While scipp borrowed an early draft of xarrays's _repr_html_ implementation (thanks!), this was before the color configs were placed into :root --- we just happened to add such a color config independently. Since this was a recent change we managed to find the culprit yesterday (https://github.com/scipp/scipp/pull/1847). And then it occurred to me to check whether xarray has the same problem...

So this makes me think that other projects that define _repr_html_ may well suffer from the same problem. Can we do anything to spread the word, or better, could there be a way to fix this for everyone (in Jupyter)?

Checklist

  • [x] Passes pre-commit run --all-files
  • [ ] User visible changes (including notable bug fixes) are documented in whats-new.rst
 
{
    "url": "https://api.github.com/repos/pydata/xarray/issues/5201/reactions",
    "total_count": 2,
    "+1": 0,
    "-1": 0,
    "laugh": 0,
    "hooray": 0,
    "confused": 0,
    "heart": 2,
    "rocket": 0,
    "eyes": 0
}
     13221727 pull

Links from other tables