Lift captions over the ribbons, light the inflowing flux, move counts to the tooltip

atlas.css

@@ -26,6 +26,12 @@
 .flow { stroke:none; transition:opacity .15s; }
 .flow-annotated { fill:#40916f; opacity:.42; }
 .flow-missing { fill:#cfd5c9; opacity:.6; }
+/* Lighting a group also lights the flux arriving at it, so you can see where
+   a group's assemblies came from. Applied from atlas.js, since the ribbons are
+   painted under every node and cannot be reached with a CSS sibling rule. */
+.flow.is-lit { opacity:.9; }
+.flow-annotated.is-lit { fill:#2f7d5c; }
+.flow-missing.is-lit { fill:#b4bdac; }
 .bar-annotated { fill:#287557; }
 .bar-missing { fill:#bcc4b5; }
 .bar-outline { fill:none; stroke:#f7f8f0; stroke-width:1; }
@@ -39,14 +45,15 @@
 .tree-node.is-sibling:hover,.tree-node.is-sibling:focus { opacity:1; }
 .tree-icon { opacity:.62; transition:opacity .15s; }
 .tree-node.is-selected .tree-icon { opacity:.85; }
-.tree-node:not(.is-direct):hover .tree-icon { opacity:.9; }
 .tree-label,.tree-english,.tree-count { paint-order:stroke; stroke:#f7f8f0; stroke-width:4px; stroke-linejoin:round; text-anchor:middle; }
 .tree-label { font:600 13px Arial,Helvetica,sans-serif; fill:#254735; transition:fill .15s; }
 .tree-node.is-selected .tree-label { font-weight:700; fill:#173c30; }
 .tree-english { font:italic 11.5px Georgia,'Times New Roman',serif; fill:#5d7a66; }
 .tree-count { font:11px Arial,Helvetica,sans-serif; fill:#697966; }
-.tree-node:not(.is-direct):hover .tree-label,.tree-node:focus .tree-label { fill:#0f2e22; }
-.tree-node:not(.is-direct):hover .bar-outline { stroke:#287557; stroke-width:2; }
+.tree-node.is-lit:not(.is-direct) .tree-label,.tree-node:focus .tree-label { fill:#0f2e22; }
+.tree-node.is-lit:not(.is-direct) .bar-outline { stroke:#287557; stroke-width:2; }
+.tree-node.is-lit { opacity:1; }
+.tree-node.is-lit .tree-icon { opacity:.9; }
 .atlas-footer { display:flex; align-items:center; flex-wrap:wrap; gap:15px; justify-content:space-between; border-top:1px solid #dde4d5; padding-top:14px; color:#6c7a66; font-size:11px; line-height:1.6; }
 .atlas-legend { display:flex; gap:7px; align-items:center; }
 .atlas-swatch { width:10px; height:10px; border-radius:2px; }

atlas.js

@@ -10,12 +10,25 @@ function activate(event) {
 }
 element.addEventListener('click', activate);
 element.addEventListener('keydown', activate);
+// A group and the flux arriving at it share a data-node id, so hovering either
+// one lights both. The ribbons are painted beneath every group, so no CSS
+// sibling rule can reach them from the group being hovered.
+let lit = '';
+function light(uid) {
+  if (uid === lit) return;
+  lit = uid;
+  element.querySelectorAll('.is-lit').forEach((el) => el.classList.remove('is-lit'));
+  if (uid) element.querySelectorAll(`[data-node="${CSS.escape(uid)}"]`).forEach((el) => el.classList.add('is-lit'));
+}
+element.addEventListener('focusin', (event) => light(event.target.closest('[data-node]')?.dataset.node || ''));
+element.addEventListener('focusout', () => light(''));
 element.addEventListener('pointermove', (event) => {
   const node = event.target.closest('[data-detail]');
   const tooltip = element.querySelector('.atlas-tooltip');
   const atlas = element.querySelector('.atlas');
   if (!tooltip || !atlas) return;
-  if (!node || event.pointerType === 'touch') { tooltip.hidden = true; return; }
+  if (!node || event.pointerType === 'touch') { tooltip.hidden = true; light(''); return; }
+  light(node.dataset.node || '');
   tooltip.textContent = node.dataset.detail;
   tooltip.hidden = false;
   const bounds = atlas.getBoundingClientRect();
@@ -25,6 +38,7 @@ element.addEventListener('pointermove', (event) => {
 element.addEventListener('pointerleave', () => {
   const tooltip = element.querySelector('.atlas-tooltip');
   if (tooltip) tooltip.hidden = true;
+  light('');
 });
 // Expanding adds a level below. The page scrolls, not the widget, so only nudge
 // it when the new bottom of the tree has fallen past the viewport.

data/icons.json

@@ -8,14 +8,16 @@
   "primary_image": 557,
   "assigned": 701,
   "clade_fallback": 117,
+  "overridden": 1,
   "unresolved": 392,
   "no_free_image": 4,
+  "removed": 1,
   "distinct_icons": 447,
-  "bytes": 5891595
+  "bytes": 5902047
  },
  "licenses": {
-  "https://creativecommons.org/licenses/by/4.0/": 59,
-  "https://creativecommons.org/publicdomain/zero/1.0/": 297,
+  "https://creativecommons.org/licenses/by/4.0/": 58,
+  "https://creativecommons.org/publicdomain/zero/1.0/": 298,
   "https://creativecommons.org/licenses/by/3.0/": 45,
   "https://creativecommons.org/publicdomain/mark/1.0/": 46
  },
@@ -1428,6 +1430,14 @@
    "ratio": 1.082,
    "bytes": 15234
   },
+  "675ddef0-9dd4-4eef-b63f-98beb30f98c7": {
+   "license": "https://creativecommons.org/publicdomain/zero/1.0/",
+   "attribution": "Kaldari and T. Michael Keesey",
+   "contributor": "T. Michael Keesey",
+   "page": "https://www.phylopic.org/images/675ddef0-9dd4-4eef-b63f-98beb30f98c7",
+   "ratio": 0.979,
+   "bytes": 12123
+  },
   "67a9ecfd-58ba-44a4-9986-243b6e610419": {
    "license": "https://creativecommons.org/publicdomain/mark/1.0/",
    "attribution": null,
@@ -2740,14 +2750,6 @@
    "ratio": 1.292,
    "bytes": 6037
   },
-  "c6066aa4-fadd-45e0-b897-b16b37977e8e": {
-   "license": "https://creativecommons.org/licenses/by/4.0/",
-   "attribution": "Andrew JM Swafford",
-   "contributor": "Andrew JM Swafford",
-   "page": "https://www.phylopic.org/images/c6066aa4-fadd-45e0-b897-b16b37977e8e",
-   "ratio": 3.421,
-   "bytes": 1671
-  },
   "c722e81c-d41b-43bb-958d-f64d50e39074": {
    "license": "https://creativecommons.org/publicdomain/zero/1.0/",
    "attribution": null,
@@ -3655,7 +3657,7 @@
   "4609": "07778806-5dcf-4524-9d93-8ead16a51bf9",
   "4618": "25b193dc-07bf-4e8d-b51d-9d3a12457c72",
   "4734": "2af0a13e-69a8-4245-832e-ee3d981089b7",
-  "4751": "c6066aa4-fadd-45e0-b897-b16b37977e8e",
+  "4751": "675ddef0-9dd4-4eef-b63f-98beb30f98c7",
   "4761": "48480ba6-95cd-4291-b80c-5d979c5da193",
   "4762": "53b543aa-2a5e-4407-88cd-6acbb0b5c3f9",
   "4763": "23f8258b-3144-447e-8486-f5e914a9a9f9",

refresh_icons.py

@@ -32,6 +32,14 @@ EUKARYOTA = 2759
 COLUMN_LIMIT = 6
 # Groups below this many assemblies inherit an ancestor's icon at render time.
 MIN_ASSEMBLIES = 100
+# PhyloPic's representative image is usually right, but for a few flagship
+# groups it is accurate and still a poor mnemonic. Its image for the whole Fungi
+# kingdom is a chytrid zoospore: chytrids are early-diverging fungi and the only
+# ones that keep a flagellum, and that single posterior flagellum is the trait
+# Opisthokonta is named for, which is why it reads as an animal sperm cell. True
+# of the clade, useless as an icon, so a mushroom cluster stands in.
+OVERRIDES = {4751: "675ddef0-9dd4-4eef-b63f-98beb30f98c7"}
+
 # Columns within this many steps of the root get an icon regardless of size.
 SHALLOW_DEPTH = 5
 # The node's representative image almost always wins. Contact sheets of the
@@ -154,10 +162,12 @@ def build(database, icon_dir, output, minimum=MIN_ASSEMBLIES, pause=0.1):
                 shapes[best["uuid"]] = best["ratio"]
                 counts["primary_image" if is_primary else "clade_fallback"] += 1
             time.sleep(pause)
-        image = nodes[node]
+        image = OVERRIDES.get(taxid) or nodes[node]
         if not image:
             counts["no_free_image"] += 1
             continue
+        if taxid in OVERRIDES:
+            counts["overridden"] += 1
         assignments[taxid] = image
         counts["assigned"] += 1
         if position % 100 == 0:
@@ -183,6 +193,10 @@ def build(database, icon_dir, output, minimum=MIN_ASSEMBLIES, pause=0.1):
             target.write_bytes(body)
             time.sleep(pause)
         keep.add(image)
+        sizes = (links.get("rasterFiles") or [{}])[0].get("sizes", "")
+        if image not in shapes and "x" in sizes:
+            found = [int(part) for part in sizes.split("x")]
+            shapes[image] = found[0] / found[1] if found[1] else 1.0
         images[image] = {"license": links.get("license", {}).get("href"),
                          "attribution": detail.get("attribution"),
                          "contributor": links.get("contributor", {}).get("title"),

taxonomy.py

@@ -194,22 +194,23 @@ class Taxonomy:
         """Levels run down the page, so a whole lineage is one page scroll.
 
         Each level is a horizontal band: bar widths follow assembly counts and
-        the label sits beneath its bar. Depth now costs height, which the page
-        can always give, rather than width, which it cannot.
+        the caption sits above its bar, painted over the ribbons arriving there
+        rather than breaking them. Depth costs height, which the page can always
+        give, rather than width, which it cannot.
         """
-        left, span, bar, top = 16, 1180, 15, 18
-        rung = 172            # distance from one level's bar to the next
-        label_gap, line = 11, 15
+        left, span, bar, top = 16, 1180, 15, 10
+        rung = 152            # distance from one level's caption to the next
+        line = 15
         # Silhouettes are not square: they run from tall and thin to long and
         # flat. Fitting them all into one box turns most into slivers, so each
         # gets its own box with the same area and its own proportions.
-        icon_area, icon_max, icon_band = 24 * 24, 42, 44
-        block = bar + icon_band + 3 * line   # a level's bar plus the caption under it
+        icon_area, icon_max, icon_band = 24 * 24, 42, 46
+        caption = icon_band + 2 * line    # silhouette, scientific name, English name
         width = left * 2 + span
-        height = top + (len(columns) - 1) * rung + block + 14
+        height = top + (len(columns) - 1) * rung + caption + bar + 12
 
         def spread(nodes):
-            """Bar widths follow assembly counts, with room under each for its label."""
+            """Bar widths follow assembly counts, with room above each for its caption."""
             gap, slot = (14 if len(nodes) > 1 else 0), 148
             fixed, scale = set(), 0
             for _ in range(len(nodes) + 1):
@@ -234,17 +235,33 @@ class Taxonomy:
         def share(n):
             return n['covered'] / n['total'] if self.coverage and n['total'] else 0
 
-        def ribbon(y0, a0, a1, y1, b0, b1, kind):
+        def describe(n):
+            """The counts live here rather than in the chart, which stays uncluttered."""
+            percent = 100 * share(n)
+            title = f"{n['name']} ({n['english']})" if n['english'] else n['name']
+            detail = (f"{title} · {n['covered']:,} of {n['total']:,} assemblies have published annotations ({percent:.2f}%). Includes partial assemblies."
+                      if self.coverage else f"{title} · {n['total']:,} assemblies. Coverage inventory unavailable.")
+            if n.get('aggregate'):
+                detail += " Display aggregate, not a taxonomic clade. Activate to see its lineages."
+            elif not n.get('direct') and not n['selected']:
+                detail += " Activate to open this group below."
+            return detail
+
+        def ribbon(y0, a0, a1, y1, b0, b1, kind, n):
             bend = (y0 + y1) / 2
             return (f'<path d="M{a0:.1f},{y0} C{a0:.1f},{bend} {b0:.1f},{bend} {b0:.1f},{y1} '
-                    f'L{b1:.1f},{y1} C{b1:.1f},{bend} {a1:.1f},{bend} {a1:.1f},{y0} Z" class="flow flow-{kind}"/>')
+                    f'L{b1:.1f},{y1} C{b1:.1f},{bend} {a1:.1f},{bend} {a1:.1f},{y0} Z" class="flow flow-{kind}" '
+                    f'data-node="{n["uid"]}" data-detail="{escape(n["detail"], quote=True)}"/>')
 
-        flows, nodes = [], []
         for depth, column in enumerate(columns):
             spread(column)
-            y = top + depth * rung
-            for n in column:
-                n['y'] = y
+            for index, n in enumerate(column):
+                n['y'] = top + depth * rung          # top of the caption
+                n['bar_y'] = n['y'] + caption        # top of the bar
+                n['uid'] = f"{depth}-{index}"
+                n['detail'] = describe(n)
+
+        flows, nodes = [], []
         for depth, column in enumerate(columns[:-1]):
             parent = next((n for n in column if n['selected']), None)
             children = columns[depth + 1]
@@ -258,11 +275,11 @@ class Taxonomy:
                 cursor = a1
                 f = share(child)
                 am, bm = a0 + f * (a1 - a0), child['x'] + f * child['w']
-                y0, y1 = parent['y'] + block, child['y']
+                y0, y1 = parent['bar_y'] + bar, child['bar_y']
                 if f > 0:
-                    flows.append(ribbon(y0, a0, am, y1, child['x'], bm, "annotated"))
+                    flows.append(ribbon(y0, a0, am, y1, child['x'], bm, "annotated", child))
                 if f < 1:
-                    flows.append(ribbon(y0, am, a1, y1, bm, child['x'] + child['w'], "missing"))
+                    flows.append(ribbon(y0, am, a1, y1, bm, child['x'] + child['w'], "missing", child))
 
         for depth, column in enumerate(columns):
             on_path = depth < len(steps)
@@ -270,47 +287,38 @@ class Taxonomy:
             for n in column:
                 if n['borrowed_icon'] and shown[n['icon']] > 1:
                     n['icon'] = ""  # identical borrowed outlines read as "same group"
-                x, y, w = n['x'], n['y'], n['w']
+                x, y, w, bar_y = n['x'], n['y'], n['w'], n['bar_y']
                 f = share(n)
-                percent = 100 * f
-                title = f"{n['name']} ({n['english']})" if n['english'] else n['name']
-                detail = (f"{title} · {n['covered']:,} of {n['total']:,} assemblies have published annotations ({percent:.2f}%). Includes partial assemblies."
-                          if self.coverage else f"{title} · {n['total']:,} assemblies. Coverage inventory unavailable.")
-                if n.get('aggregate'):
-                    detail += " Display aggregate, not a taxonomic clade. Activate to see its lineages."
-                elif not n.get('direct') and not n['selected']:
-                    detail += " Activate to open this group below."
                 action = "" if n.get('direct') else f'data-path="{n["path"]}" role="button" tabindex="0"'
                 classes = "tree-node" + (" is-selected" if n['selected'] else " is-sibling" if on_path else "") + \
                     (" is-direct" if n.get('direct') else "")
-                nodes.append(f'<g class="{classes}" {action} aria-label="{escape(detail, quote=True)}" data-detail="{escape(detail, quote=True)}">')
+                nodes.append(f'<g class="{classes}" {action} data-node="{n["uid"]}" '
+                             f'aria-label="{escape(n["detail"], quote=True)}" data-detail="{escape(n["detail"], quote=True)}">')
                 centre = n['slot_x'] + n['slot'] / 2
-                nodes.append(f'<rect x="{n["slot_x"] - 5:.1f}" y="{y - 6}" width="{n["slot"] + 10:.1f}" '
-                             f'height="{block:.0f}" rx="12" class="tree-hit"/>')
+                nodes.append(f'<rect x="{n["slot_x"] - 5:.1f}" y="{y - 4}" width="{n["slot"] + 10:.1f}" '
+                             f'height="{caption + bar + 8:.0f}" rx="12" class="tree-hit"/>')
                 green = w * f
                 if green > 0:
-                    nodes.append(f'<rect x="{x:.1f}" y="{y}" width="{green:.1f}" height="{bar}" class="bar bar-annotated"/>')
+                    nodes.append(f'<rect x="{x:.1f}" y="{bar_y}" width="{green:.1f}" height="{bar}" class="bar bar-annotated"/>')
                 if green < w:
-                    nodes.append(f'<rect x="{x + green:.1f}" y="{y}" width="{w - green:.1f}" height="{bar}" class="bar bar-missing"/>')
-                nodes.append(f'<rect x="{x:.1f}" y="{y}" width="{w:.1f}" height="{bar}" class="bar-outline"/>')
+                    nodes.append(f'<rect x="{x + green:.1f}" y="{bar_y}" width="{w - green:.1f}" height="{bar}" class="bar bar-missing"/>')
+                nodes.append(f'<rect x="{x:.1f}" y="{bar_y}" width="{w:.1f}" height="{bar}" class="bar-outline"/>')
                 label, english = clip(n['label'], MAX_LABEL), clip(n['english'], MAX_ENGLISH)
-                stats = f"{percent:.1f}% · {n['covered']:,} / {n['total']:,}" if self.coverage else f"{n['total']:,} assemblies"
                 # The silhouette band is reserved whether or not this node has one,
-                # so labels sit on the same baseline right across a level.
+                # so names sit on the same baseline right across a level.
                 if n['icon']:
                     ratio = self.icon_credits.get(n['icon'], {}).get('ratio') or 1.0
                     icon_h = min(icon_max, max(6, math.sqrt(icon_area / ratio)))
                     icon_w = min(icon_max, max(6, icon_h * ratio))
                     icon_h = min(icon_max, max(6, icon_w / ratio))
                     nodes.append(f'<image class="tree-icon" x="{centre - icon_w / 2:.1f}" '
-                                 f'y="{y + bar + label_gap + (icon_band - label_gap - icon_h) / 2:.1f}" '
+                                 f'y="{y + (icon_band - icon_h) / 2:.1f}" '
                                  f'width="{icon_w:.1f}" height="{icon_h:.1f}" '
                                  f'href="{ICON_ROUTE}{ICON_DIR / (n["icon"] + ".svg")}"/>')
-                text_y = y + bar + icon_band + line
-                nodes.append(f'<text x="{centre:.1f}" y="{text_y:.0f}" class="tree-label">{escape(label)}</text>')
+                nodes.append(f'<text x="{centre:.1f}" y="{y + icon_band + line - 4:.0f}" class="tree-label">{escape(label)}</text>')
                 if english:
-                    nodes.append(f'<text x="{centre:.1f}" y="{text_y + line:.0f}" class="tree-english">{escape(english)}</text>')
-                nodes.append(f'<text x="{centre:.1f}" y="{text_y + (2 if english else 1) * line:.0f}" class="tree-count">{stats}</text></g>')
+                    nodes.append(f'<text x="{centre:.1f}" y="{y + icon_band + 2 * line - 4:.0f}" class="tree-english">{escape(english)}</text>')
+                nodes.append('</g>')
         svg = (f'<svg viewBox="0 0 {width} {height}" class="life-tree" data-route="{encode_path(steps)}" '
                f'aria-label="Eukaryotic taxonomy and annotation coverage">' + ''.join(flows) + ''.join(nodes) + '</svg>')
 

tests/test_taxonomy.py

@@ -23,8 +23,12 @@ class TaxonomyTests(unittest.TestCase):
         html = self.taxonomy.view("2759/33154/33208")
         levels = self.levels(html)
         self.assertEqual(len(levels), 4)
-        # Levels run down the page, evenly spaced, so depth costs height not width.
-        self.assertEqual({round(b - a) for a, b in zip(levels, levels[1:])}, {172})
+        # Levels run down the page, evenly spaced and clear of each other, so
+        # depth costs height rather than width.
+        pitches = {round(b - a) for a, b in zip(levels, levels[1:])}
+        self.assertEqual(len(pitches), 1, levels)
+        caption_and_bar = 46 + 2 * 15 + 15
+        self.assertGreater(pitches.pop(), caption_and_bar)
         self.assertEqual(html.count('class="tree-node is-selected"'), 3)
 
     def test_search_path_expands_lineage(self):
@@ -52,7 +56,29 @@ class TaxonomyTests(unittest.TestCase):
         # <title> would render the browser's own tooltip on top of the styled one.
         self.assertNotIn("<title>", html)
         self.assertIn('data-detail="Viridiplantae (green plants) ·', html)
-        self.assertEqual(html.count("data-detail="), html.count('class="tree-hit"'))
+
+    def test_counts_live_in_the_tooltip_not_the_chart(self):
+        html = self.taxonomy.view(DEFAULT_PATH)
+        chart = html[html.index("<svg"):html.index("</svg>")]
+        drawn = re.findall(r'<text[^>]*>([^<]*)</text>', chart)
+        self.assertTrue(drawn)
+        for text in drawn:
+            self.assertNotRegex(text, r"\d,\d|%", f"counts belong in the tooltip, not the chart: {text}")
+        self.assertIn("33,594 of 70,395 assemblies", html)
+
+    def test_hovering_a_group_also_lights_its_inflowing_flux(self):
+        html = self.taxonomy.view("2759/33154/33208")
+        chart = html[html.index("<svg"):html.index("</svg>")]
+        flows = dict(re.findall(r'<path d="[^"]*" class="flow flow-\w+" data-node="([\d-]+)" data-detail="([^"]*)"', chart))
+        groups = dict(re.findall(r'<g class="tree-node[^"]*"[^>]*data-node="([\d-]+)"[^>]*data-detail="([^"]*)"', chart))
+        self.assertTrue(flows)
+        # Every ribbon carries the id of the group it arrives at, and the same text.
+        for uid, detail in flows.items():
+            self.assertIn(uid, groups, uid)
+            self.assertEqual(groups[uid], detail, uid)
+        # The root has nothing flowing into it; every other level does.
+        self.assertFalse(any(uid.startswith("0-") for uid in flows))
+        self.assertTrue(any(uid.startswith("1-") for uid in flows))
 
     def test_curated_glosses_match_the_snapshot(self):
         with sqlite3.connect(f"{DATABASE.resolve().as_uri()}?mode=ro", uri=True) as conn:
@@ -127,7 +153,7 @@ class TaxonomyTests(unittest.TestCase):
             box = re.search(r'<svg viewBox="0 0 ([\d.]+) ([\d.]+)"', self.taxonomy.view(path))
             self.assertIsNotNone(box, path)
             self.assertGreater(float(box.group(1)), 1000, path)
-            self.assertGreater(float(box.group(2)), 300, path)
+            self.assertGreater(float(box.group(2)), 200, path)
 
     def test_shortcuts_expand_their_whole_lineage(self):
         html = self.taxonomy.view(DEFAULT_PATH)