Enable tree-style HTML representation (#109)

* Modify HTML repr to add "anytree" style

* Instead of indenting children, wrap each node_repr into a three column 
CSS grid
* Column 1 has right border, column 2 has 2 rows, one with bottom 
border, column 3 contains the node_repr
* Set the height of column 1 depending on whether it is the end of a 
list of nodes in the tree or not

* Change _wrapped_node_repr -> _wrap_repr

* This quick rewrite allows for much easier testing; the code is a bit 
more single purpose this way.

* Unit tests for _wrap_repr and summarize_children.

* black; quick flake8 patch

(hashlib.sha1) was not used.

* whatsnew

Co-authored-by: Thomas Nicholas <[email protected]>

Author: benjaminwoods

datatree/formatting_html.py

@@ -16,14 +16,24 @@
 
 
 def summarize_children(children: Mapping[str, Any]) -> str:
-    children_li = "".join(
-        f"<ul class='xr-sections'>{node_repr(n, c)}</ul>" for n, c in children.items()
+    N_CHILDREN = len(children) - 1
+
+    # Get result from node_repr and wrap it
+    lines_callback = lambda n, c, end: _wrap_repr(node_repr(n, c), end=end)
+
+    children_html = "".join(
+        lines_callback(n, c, end=False)  # Long lines
+        if i < N_CHILDREN
+        else lines_callback(n, c, end=True)  # Short lines
+        for i, (n, c) in enumerate(children.items())
     )
 
-    return (
-        "<ul class='xr-sections'>"
-        f"<div style='padding-left:2rem;'>{children_li}<br></div>"
-        "</ul>"
+    return "".join(
+        [
+            "<div style='display: inline-grid; grid-template-columns: 100%'>",
+            children_html,
+            "</div>",
+        ]
     )
 
 
@@ -52,6 +62,77 @@ def node_repr(group_title: str, dt: Any) -> str:
     return _obj_repr(ds, header_components, sections)
 
 
+def _wrap_repr(r: str, end: bool = False) -> str:
+    """
+    Wrap HTML representation with a tee to the left of it.
+
+    Enclosing HTML tag is a <div> with :code:`display: inline-grid` style.
+
+    Turns:
+    [    title    ]
+    |   details   |
+    |_____________|
+
+    into (A):
+    |─ [    title    ]
+    |  |   details   |
+    |  |_____________|
+
+    or (B):
+    └─ [    title    ]
+       |   details   |
+       |_____________|
+
+    Parameters
+    ----------
+    r: str
+        HTML representation to wrap.
+    end: bool
+        Specify if the line on the left should continue or end.
+
+        Default is True.
+
+    Returns
+    -------
+    str
+        Wrapped HTML representation.
+
+        Tee color is set to the variable :code:`--xr-border-color`.
+    """
+    # height of line
+    end = bool(end)
+    height = "100%" if end is False else "1.2em"
+    return "".join(
+        [
+            "<div style='display: inline-grid;'>",
+            "<div style='",
+            "grid-column-start: 1;",
+            "border-right: 0.2em solid;",
+            "border-color: var(--xr-border-color);",
+            f"height: {height};",
+            "width: 0px;",
+            "'>",
+            "</div>",
+            "<div style='",
+            "grid-column-start: 2;",
+            "grid-row-start: 1;",
+            "height: 1em;",
+            "width: 20px;",
+            "border-bottom: 0.2em solid;",
+            "border-color: var(--xr-border-color);",
+            "'>",
+            "</div>",
+            "<div style='",
+            "grid-column-start: 3;",
+            "'>",
+            "<ul class='xr-sections'>",
+            r,
+            "</ul>" "</div>",
+            "</div>",
+        ]
+    )
+
+
 def datatree_repr(dt: Any) -> str:
     obj_type = f"datatree.{type(dt).__name__}"
     return node_repr(obj_type, dt)

datatree/tests/test_formatting_html.py

@@ -0,0 +1,197 @@
+import pytest
+import xarray as xr
+
+from datatree import DataTree, formatting_html
+
+
+@pytest.fixture(scope="module", params=["some html", "some other html"])
+def repr(request):
+    return request.param
+
+
+class Test_summarize_children:
+    """
+    Unit tests for summarize_children.
+    """
+
+    func = staticmethod(formatting_html.summarize_children)
+
+    @pytest.fixture(scope="class")
+    def childfree_tree_factory(self):
+        """
+        Fixture for a child-free DataTree factory.
+        """
+        from random import randint
+
+        def _childfree_tree_factory():
+            return DataTree(
+                data=xr.Dataset({"z": ("y", [randint(1, 100) for _ in range(3)])})
+            )
+
+        return _childfree_tree_factory
+
+    @pytest.fixture(scope="class")
+    def childfree_tree(self, childfree_tree_factory):
+        """
+        Fixture for a child-free DataTree.
+        """
+        return childfree_tree_factory()
+
+    @pytest.fixture(scope="function")
+    def mock_node_repr(self, monkeypatch):
+        """
+        Apply mocking for node_repr.
+        """
+
+        def mock(group_title, dt):
+            """
+            Mock with a simple result
+            """
+            return group_title + " " + str(id(dt))
+
+        monkeypatch.setattr(formatting_html, "node_repr", mock)
+
+    @pytest.fixture(scope="function")
+    def mock_wrap_repr(self, monkeypatch):
+        """
+        Apply mocking for _wrap_repr.
+        """
+
+        def mock(r, *, end, **kwargs):
+            """
+            Mock by appending "end" or "not end".
+            """
+            return r + " " + ("end" if end else "not end") + "//"
+
+        monkeypatch.setattr(formatting_html, "_wrap_repr", mock)
+
+    def test_empty_mapping(self):
+        """
+        Test with an empty mapping of children.
+        """
+        children = {}
+        assert self.func(children) == (
+            "<div style='display: inline-grid; grid-template-columns: 100%'>" "</div>"
+        )
+
+    def test_one_child(self, childfree_tree, mock_wrap_repr, mock_node_repr):
+        """
+        Test with one child.
+
+        Uses a mock of _wrap_repr and node_repr to essentially mock
+        the inline lambda function "lines_callback".
+        """
+        # Create mapping of children
+        children = {"a": childfree_tree}
+
+        # Expect first line to be produced from the first child, and
+        # wrapped as the last child
+        first_line = f"a {id(children['a'])} end//"
+
+        assert self.func(children) == (
+            "<div style='display: inline-grid; grid-template-columns: 100%'>"
+            f"{first_line}"
+            "</div>"
+        )
+
+    def test_two_children(self, childfree_tree_factory, mock_wrap_repr, mock_node_repr):
+        """
+        Test with two level deep children.
+
+        Uses a mock of _wrap_repr and node_repr to essentially mock
+        the inline lambda function "lines_callback".
+        """
+
+        # Create mapping of children
+        children = {"a": childfree_tree_factory(), "b": childfree_tree_factory()}
+
+        # Expect first line to be produced from the first child, and
+        # wrapped as _not_ the last child
+        first_line = f"a {id(children['a'])} not end//"
+
+        # Expect second line to be produced from the second child, and
+        # wrapped as the last child
+        second_line = f"b {id(children['b'])} end//"
+
+        assert self.func(children) == (
+            "<div style='display: inline-grid; grid-template-columns: 100%'>"
+            f"{first_line}"
+            f"{second_line}"
+            "</div>"
+        )
+
+
+class Test__wrap_repr:
+    """
+    Unit tests for _wrap_repr.
+    """
+
+    func = staticmethod(formatting_html._wrap_repr)
+
+    def test_end(self, repr):
+        """
+        Test with end=True.
+        """
+        r = self.func(repr, end=True)
+        assert r == (
+            "<div style='display: inline-grid;'>"
+            "<div style='"
+            "grid-column-start: 1;"
+            "border-right: 0.2em solid;"
+            "border-color: var(--xr-border-color);"
+            "height: 1.2em;"
+            "width: 0px;"
+            "'>"
+            "</div>"
+            "<div style='"
+            "grid-column-start: 2;"
+            "grid-row-start: 1;"
+            "height: 1em;"
+            "width: 20px;"
+            "border-bottom: 0.2em solid;"
+            "border-color: var(--xr-border-color);"
+            "'>"
+            "</div>"
+            "<div style='"
+            "grid-column-start: 3;"
+            "'>"
+            "<ul class='xr-sections'>"
+            f"{repr}"
+            "</ul>"
+            "</div>"
+            "</div>"
+        )
+
+    def test_not_end(self, repr):
+        """
+        Test with end=False.
+        """
+        r = self.func(repr, end=False)
+        assert r == (
+            "<div style='display: inline-grid;'>"
+            "<div style='"
+            "grid-column-start: 1;"
+            "border-right: 0.2em solid;"
+            "border-color: var(--xr-border-color);"
+            "height: 100%;"
+            "width: 0px;"
+            "'>"
+            "</div>"
+            "<div style='"
+            "grid-column-start: 2;"
+            "grid-row-start: 1;"
+            "height: 1em;"
+            "width: 20px;"
+            "border-bottom: 0.2em solid;"
+            "border-color: var(--xr-border-color);"
+            "'>"
+            "</div>"
+            "<div style='"
+            "grid-column-start: 3;"
+            "'>"
+            "<ul class='xr-sections'>"
+            f"{repr}"
+            "</ul>"
+            "</div>"
+            "</div>"
+        )

docs/source/whats-new.rst

@@ -23,6 +23,9 @@ v0.0.7 (unreleased)
 New Features
 ~~~~~~~~~~~~
 
+- Improve the HTML repr by adding tree-style lines connecting groups and sub-groups (:pull:`109`).
+  By `Benjamin Woods <https://github.com/benjaminwoods>`_.
+
 Breaking changes
 ~~~~~~~~~~~~~~~~