Tweak presentation of demography output.

- Change the debug HTML to use the <details> tag.
- More tweaks to HTML presentation.

Closes #1462
Closes #1461

msprime/core.py

@@ -165,7 +165,7 @@ def html_table(
             .tskit-table tbody td {text-align: right;padding: 0.5em 0.5em;}
             .tskit-table tbody th {padding: 0.5em 0.5em;}
         </style>"""
-        f"<h4>{caption}</h4>"
+        f"<b>{caption}</b>"
         '<table border="1" class="tskit-table">'
         "<thead>"
         "<tr>" + header + "</tr>"

msprime/demography.py

@@ -499,19 +499,20 @@ def add_census(self, time: float) -> CensusEvent:
         return self.add_event(CensusEvent(time))
 
     def _populations_table(self):
-        col_titles = [
-            "id",
-            "name",
-            "description",
-            "initial_size",
-            "growth_rate",
-            "sampling_time",
-            "extra_metadata",
+        cols = [
+            ("id", ""),
+            ("name", ""),
+            ("description", ""),
+            ("initial_size", ".1f"),
+            ("growth_rate", ".2f"),
+            ("sampling_time", ".2g"),
+            ("extra_metadata", ""),
         ]
         data = [
-            [f"{getattr(pop, attr)}" for attr in col_titles] for pop in self.populations
+            [f"{getattr(pop, attr):{fmt}}" for attr, fmt in cols]
+            for pop in self.populations
         ]
-        return col_titles, data
+        return [title for title, _ in cols], data
 
     def _populations_text(self):
         col_titles, data = self._populations_table()
@@ -605,11 +606,11 @@ def _events_html(self, events, title="Events"):
     def _repr_html_(self):
         resolved = self.validate()
         return (
-            "<p>"
+            '<div style="margin-left:20px">'
             + resolved._populations_html()
             + resolved._migration_matrix_html()
             + resolved._events_html(self.events)
-            + "</p>"
+            + "</div>"
         )
 
     def __str__(self):
@@ -2738,21 +2739,19 @@ def _repr_html_(self):
         for epoch in self.epochs:
             if epoch.index > 0:
                 assert len(epoch.events) > 0
-                title = f"Events @ generation {epoch.start_time}"
+                title = f"Events @ generation {epoch.start_time:.3g}"
                 out += self.demography._events_html(epoch.events, title)
-                out += "</div>"
+                out += "</div></details>"
             else:
                 assert len(epoch.events) == 0
-            out += '<div class="msprime-epoch">'
-            out += f"<h3>{epoch._title_text()}</h3>"
+            title = epoch._title_text()
+            out += f'<details open="true"><summary>{title}</summary>'
+            # Indent the content div slightly
+            out += '<div style="margin-left:20px">'
             out += self._populations_html(epoch)
         out += "</div>"
-        return f"""<div>
-            <style scoped="">
-                .msprime-epoch:nth-child(odd) {{background: #f5f5f5;}}
-            </style>
-            {out}
-        </div>"""
+        out += "</details>"
+        return f"<div>{out}</div>"
 
     def print_history(self, output=sys.stdout):
         """

tests/test_demography.py

@@ -1256,7 +1256,7 @@ class TestDemographyHtml(DebugOutputBase):
     def verify(self, demography):
         html = demography._repr_html_()
         root = xml.etree.ElementTree.fromstring(html)
-        assert root.tag == "p"
+        assert root.tag == "div"
         children = list(root)
         assert len(children) == 3
         for child in children:
@@ -1281,9 +1281,14 @@ def verify(self, demography):
         html = debugger._repr_html_()
         root = xml.etree.ElementTree.fromstring(html)
         assert root.tag == "div"
-        children = list(root)
-        assert len(children) - 1 == len(debugger.epochs)
-        # TODO add more tests when the output format is finalised.
+        root_children = list(root)
+        assert len(root_children) == len(debugger.epochs)
+        for details, epoch in zip(root_children, debugger.epochs):
+            assert details.tag == "details"
+            children = list(details)
+            assert children[0].tag == "summary"
+            assert children[1].tag == "div"
+            assert children[0].text == epoch._title_text()
 
 
 class TestDemographyText(DebugOutputBase):
@@ -1323,7 +1328,7 @@ def test_one_population(self):
         ║  ┌────────────────────────────────────────────────────────────────────────────────────────┐
         ║  │ id │name   │description  │initial_size  │ growth_rate │  sampling_time│extra_metadata  │
         ║  ├────────────────────────────────────────────────────────────────────────────────────────┤
-        ║  │ 0  │pop_0  │             │10.0          │     0.0     │              0│{}              │
+        ║  │ 0  │pop_0  │             │10.0          │    0.00     │              0│{}              │
         ║  └────────────────────────────────────────────────────────────────────────────────────────┘
         ╟  Migration Matrix
         ║  ┌───────────────┐
@@ -1351,8 +1356,8 @@ def test_two_populations(self):
         ║  ┌────────────────────────────────────────────────────────────────────────────────────────┐
         ║  │ id │name   │description  │initial_size  │ growth_rate │  sampling_time│extra_metadata  │
         ║  ├────────────────────────────────────────────────────────────────────────────────────────┤
-        ║  │ 0  │pop_0  │             │10.0          │     1.0     │              0│{}              │
-        ║  │ 1  │pop_1  │             │20.0          │     2.0     │              0│{}              │
+        ║  │ 0  │pop_0  │             │10.0          │    1.00     │              0│{}              │
+        ║  │ 1  │pop_1  │             │20.0          │    2.00     │              0│{}              │
         ║  └────────────────────────────────────────────────────────────────────────────────────────┘
         ╟  Migration Matrix
         ║  ┌───────────────────────┐