etienneschalk
commented
1 month ago Technical analysis
Quick fix
The quick and dirty fix can be the following
- "<div class='xr-wrap' style='display:none'>"
+ "<div class='xr-wrap' style='display:none; min-width: 700px;'>"It forces override the min-width: 300px coming from the xr-wrap CSS class, and replace it with the same value as its max-width of 700px.
See the method _obj_repr https://github.com/pydata/xarray/blob/12123be8608f3a90c6a6d8a1cdc4845126492364/xarray/core/formatting_html.py#L297C22-L297C24
See the xr-wrap class https://github.com/pydata/xarray/blob/12123be8608f3a90c6a6d8a1cdc4845126492364/xarray/static/css/style.css#L29
Better fix
The good fix would be to update the class xr-wrap ; however this class is from the xarray's core, so changing it would not only change datatree but xarray too. So, an alternative could be for instance, adding a new class, xr-datatree-wrap, with more-suited width parameters, copied from xr-wrap with a minor change:
.xr-wrap {
display: block !important;
min-width: 300px;
max-width: 700px;
}
.xr-dataset-wrap {
display: block !important;
min-width: 700px;
max-width: 700px;
}
Improvement
The following applies to both xarray and datatree.
The current collapsible section is based on using hidden checkboxes with the CSS :checked selector to reveal or hide the elements. This code is from 5 years ago. This StackOverflow thread shows the current solution being using <details>, and the old solution of using hidden checkboxes and CSS :checked selection as an older solution: https://stackoverflow.com/questions/41220717/collapse-without-javascript
Recently, a new couple of HTML elements have been added, <details> and <summary>, that are the official HTML tags to implemented collapsible sections with little effort. See MDN docs: <details>: The Details disclosure element (widely available on browsers according to this link)
Example (it works with GitHub's markdown)
-
Giant planets
-
Gas giants
- Jupiter
- Saturn
-
Ice giants
- Uranus
- Neptune
-
Example taken from Tree views in CSS
The idea would be to just create a tree structure of nested <section> and <summary>, and delegating the final HTML rendering to the current Dataset code. This can be done for each node, by using to_dataset(), whether the group is a leaf or not. Each node would be: its Dataset (the leaf variables it contains) + its children.
An other alternative, at the cost of a dependency, would be to use ipytree, a Jupyter widget representing a tree. This is a Jupyter widget ; can it be rendered as HTML for export?
keewis
TomNicholas
Bug description
The group width is shrinked, not using the full available width. The width should only be restrained as we progress in the hierarchy, making high level groups almost the same size as classical datasets
We can see more clearly the width issue in this high contrast screenshot:
Other bugs
Note: the alternating colors for the data variables rows seem not to take into account the theme. They should be dependent on the them, like the rest of the rich display