html repr

[TomNicholas]

My attempt at an arbitrarily-deeply nested html repr.

That's for the test datatree, whose string repr currently looks like this:

DataTree('root', parent=None)
│   Dimensions:  (y: 3, x: 2)
│   Dimensions without coordinates: y, x
│   Data variables:
│       a        (y) int64 6 7 8
│       set0     (x) int64 9 10
├── DataTree('set1')
│   │   Dimensions:  ()
│   │   Data variables:
│   │       a        int64 0
│   │       b        int64 1
│   ├── DataTree('set1')
│   └── DataTree('set2')
├── DataTree('set2')
│   │   Dimensions:  (x: 2)
│   │   Dimensions without coordinates: x
│   │   Data variables:
│   │       a        (x) int64 2 3
│   │       b        (x) float64 0.1 0.2
│   └── DataTree('set1')
└── DataTree('set3')

I'm pretty pleased with this, but open to feedback.

Some things I think could be improved are:

• Making the group names stand out more
• Maybe listing groups after data variables?
• It should also show if the root node has a parent (i.e. it's not really the root).

Not really sure how to test it exactly either.

• Closes html repr #75
• Tests added
• Passes pre-commit run --all-files
• New functions/methods are listed in api.rst

@jsignell you will probably be interested to see this - thanks for making the xarray html repr code so neat that I was able to easily extend it!

@rabernat @jbusecke opinions welcome too

[jsignell]

Thanks for doing the ping @TomNicholas! Let me also ping @benbovy since he did the majority of the work on the xarray repr.

[jbusecke]

Is there a way to indent everything but groups? That might help clarify that groups is the 'top level' organizer and everything beneath it is just another leaf-dataset? Unless I totally did not understand that right, hehe.

[TomNicholas]

Is there a way to indent everything but groups? That might help clarify that groups is the 'top level' organizer and everything beneath it is just another leaf-dataset? Unless I totally did not understand that right, hehe.

I don't think that makes sense - Variables and sub-Groups exist at the same level within a given Group. In the topmost (i.e. root) group you can select a Variable via dt[var_name] or a group via dt[group_name]. So I don't think it would make sense to do what you're suggesting?

[jbusecke]

You might be right, my main reason to say that is that the output is quite large (long scroll) and visually very homogenous to look at. This can make it hard to find the thing you are looking for.
But actually there might be an easier way: Do you think its possible/useful to fold the full groups by default? So for example if you unfold 'Groups', you could have a list of set1/set2/... that can each be unfolded to get the datasets repr. I think this would make handling many groups easier, since the current way seems to end up being a very long scroll for 3+ groups?

Additionally some visual elements like in the dask client repr could help the user grasp the high level structure of the tree more easily. These rounded boxes (or something similar) could be color coded for e.g. (leaf, branch etc).

[TomNicholas]

Do you think its possible/useful to fold the full groups by default?

This line should control how many items a group dropdown must have before it is folded by default. If we set it to 0 it should fold all groups be default.

Additionally some visual elements like in the dask client repr could help the user grasp the high level structure of the tree more easily. These rounded boxes (or something similar) could be color coded for e.g. (leaf, branch etc).

This is trickier, but I agree some kind of graphical representation would be nice. I do like the way the printable string repr shows you the structure. This is so much harder for me to implement though that I might leave it to a second PR.

[jbusecke]

This is trickier, but I agree some kind of graphical representation would be nice. I do like the way the printable string repr shows you the structure. This is so much harder for me to implement though that I might leave it to a second PR.

Yeah absolutely, this was a 'nice to have' from my end. Not required. Root level folding seems very beneficial for large sets of groups, so that would be nice to implement here (and it seems quite easy).

[benbovy]

Thanks for the ping @jsignell, and also glad to see that it was easy to reuse the xarray repr code here (with the hope that the hacks used there won't have too much impact here).

This is trickier, but I agree some kind of graphical representation would be nice. I do like the way the printable string repr shows you the structure. This is so much harder for me to implement though that I might leave it to a second PR.

I think this could be already achieved - although a bit less fancy than the dask repr - with some basic UI design applied to the group names like font-weight or color variation(s), or by prepending repeated symbol(s) (dot, cross, etc.) to those names so that it informs about their hierarchical level.

[dcherian]

This diff is impressively small!

[TomNicholas]

by prepending repeated symbol(s) (dot, cross, etc.) to those names so that it informs about their hierarchical level.

Makes sense @benbovy - that is basically how anytree achieves this:

DataTree('root', parent=None)
│ Dimensions: (y: 3, x: 2)
│ Dimensions without coordinates: y, x
│ Data variables:
│ a (y) int64 6 7 8
│ set0 (x) int64 9 10
├── DataTree('set1')
│ │ Dimensions: ()
│ │ Data variables:
│ │ a int64 0
│ │ b int64 1
│ ├── DataTree('set1')
│ └── DataTree('set2')
├── DataTree('set2')
│ │ Dimensions: (x: 2)
│ │ Dimensions without coordinates: x
│ │ Data variables:
│ │ a (x) int64 2 3
│ │ b (x) float64 0.1 0.2
│ └── DataTree('set1')
└── DataTree('set3')

I imagine I could use similar logic to how anytree's RenderTree just uses 3 different characters (vertical=│, continuation=├──, end=└──).

[TomNicholas]

I'm currently padding the sub-groups here to indent them, but I think this is where I would need to add lines instead.

[TomNicholas]

I'm going to merge this now and leave #87 up to discuss how to improve the html repr in the future.