Label every group with an English name and fix the hover treatment

FEATURE_BACKLOG.md

@@ -54,7 +54,9 @@ Desired behavior:
 Decisions and dependencies for implementation:
 
 - Implemented: eukaryotic tree with bounded subtrees and exact, expandable “Other lineages” aggregates; NCBI taxonomy with source checksums and dates; merged IDs resolved. Unresolved taxonomy is excluded from the eukaryotic view.
+- Implemented: English names beside every scientific name, from NCBI Taxonomy common names plus a curated gloss table (`refresh_common_names.py`).
 - Remaining: connect the taxonomy inventory to accession-level annotation results and distinguish partial/complete base coverage.
+- Implemented: clade silhouettes from PhyloPic, filtered to CC0/Public Domain Mark/CC BY at build time (`refresh_icons.py`), with every CC BY artist credited in the interface.
 
 ## F003 — Comparison with RefSeq annotations
 

README.md

@@ -17,7 +17,7 @@ Future features and open design decisions are tracked in the [feature backlog](F
 
 ## GenBank taxonomy
 
-The landing page opens with an interactive **tree of eukaryotic life**, using NCBI's current GenBank assembly summary and taxonomy. It is drawn as a Sankey diagram: each group is a bar split into annotated (green) and not-annotated (gray) assemblies, and flows carry both parts from a group into its lineages. Counts and percentages appear beside the groups, with details on hover. The default **Genome Atlas** tab contains the tree and its lineage controls. A separate **Database** tab holds accession search, segment visualization, and downloads, using the full published-file snapshot. RefSeq exploration can be added beneath the tree. The two equal-width navigation options span the top of the page.
+The landing page opens with an interactive **tree of eukaryotic life**, using NCBI's current GenBank assembly summary and taxonomy. It is drawn as a Sankey diagram: each group is a bar split into annotated (green) and not-annotated (gray) assemblies, and flows carry both parts from a group into its lineages. Counts and percentages appear beside the groups, with details on hover. Each group is labelled with its scientific name and, where one exists, a plain-English name underneath, so the Latin backbone of the tree (Opisthokonta, Eumetazoa, Ecdysozoa) stays readable without prior knowledge. The default **Genome Atlas** tab contains the tree and its lineage controls. A separate **Database** tab holds accession search, segment visualization, and downloads, using the full published-file snapshot. RefSeq exploration can be added beneath the tree. The two equal-width navigation options span the top of the page.
 
 The viewer is restricted to **Eukaryota (NCBI taxid 2759) and its descendants**, including search, breadcrumbs, and parent navigation. The model predicts eukaryotic annotations; bacteria, archaea, and viruses are outside this display. The current eukaryotic snapshot contains **70,395 assemblies**, of which **17,561 (24.9%)** have published annotations. The underlying SQLite snapshot retains the full NCBI inventory for refresh/provenance, while the interface uses only the eukaryotic subtree and its denominators. Assemblies with unresolved taxonomy cannot be assigned to that subtree and are excluded.
 
@@ -25,6 +25,10 @@ The inventory accepts `GCA_` accessions with `version_status=latest`. Each assem
 
 Click a group to expand its direct lineages into a new column on the right; every ancestor column stays visible, so the full path from Eukaryota is always on screen. Clicking a group in an earlier column replaces the columns after it. Use breadcrumbs, “Collapse last group”, or shortcuts to go back. Nodes support Enter/Space keyboard navigation. The opening view expands the actual animal/fungal ancestor, Opisthokonta. Each column shows six direct lineages, an expandable remainder, and the selected lineage if it falls outside the top six. Bar and flow heights follow assembly counts within a column; every column is rescaled to the full height. “Other lineages” is an explicitly labeled display aggregate, not an invented clade; its counts sum the remaining siblings. Repeated expansion reaches all siblings without truncating them. Scientific-name/taxon-ID search also reaches individual taxa. Column spacing does not encode time. The view scrolls horizontally, and jumps to the newest column after each expansion.
 
+English names come from `data/common_names.json`, built by `refresh_common_names.py` from NCBI Taxonomy's `genbank common name` and `common name` entries (about 9,200 taxa) plus a curated table of roughly 190 short glosses for the large unranked clades NCBI leaves unnamed. Glosses are plain-language summaries of the living members of a clade, not formal synonyms; the scientific name stays the primary label and a gloss that merely repeats it is dropped at build time. Rebuild it with `python refresh_common_names.py` once `.cache/coverage/taxdump.tar.gz` is present; the build fails if a curated taxid no longer matches its scientific name in the snapshot.
+
+Each group also carries a clade silhouette from [PhyloPic](https://www.phylopic.org), fetched by `refresh_icons.py` into `data/icons/` with the map and credits in `data/icons.json`. The fetcher resolves each taxon's NCBI ID to a PhyloPic node and prefers that node's representative image, falling back to a clade search only when the representative one is not free to use. Both searches exclude NonCommercial and ShareAlike images: NC is unsettled for a Space run by a company, and SA would reach into the repository as soon as an icon were adapted. What ships is CC0, Public Domain Mark and CC BY, stored byte-for-byte as PhyloPic serves it, with every CC BY artist credited in the "Silhouette credits" panel. Icons are fetched for groups with at least 100 assemblies; smaller groups borrow their nearest illustrated ancestor at render time. Gradio serves them as static files through `gr.set_static_paths`, so each is cached once by the browser instead of riding along in every re-render.
+
 The graphic uses server-rendered SVG/HTML with scoped styles in `atlas.css` and delegated click/keyboard handlers in `atlas.js`; no external graphics library or image assets are required. Include these files when deploying.
 
 The annotation workspace shares the atlas palette and typography through `style.py` and `app.css`: warm panels, serif section headings, green controls, and matching tables, downloads, and disclosures. CDS plots use a solid green positive strand and a dashed warm-brown negative strand; binary labels use green. The fixed light palette stays consistent with the landing graphic under either OS color preference. Include both style files when deploying; Gradio 6 receives the theme and stylesheet in `launch()`.

app.css

@@ -39,11 +39,11 @@
 /* Full-width navigation: one equal segment for each view. */
 .gradio-container { width:100%!important; min-width:0!important; box-sizing:border-box; }
 #atlas-navigation { border:0; background:transparent; min-width:0; max-width:100%; }
-#atlas-navigation > .tab-wrapper { width:100%; height:auto!important; min-height:76px; border:0!important; box-shadow:none!important; margin:0 0 20px; padding:0; }
-#atlas-navigation > .tab-wrapper > .tab-container { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; width:100%!important; height:auto!important; box-sizing:border-box; border:1px solid #dbe3d3!important; border-radius:18px; padding:6px; margin:0; background:#edf2e7; box-shadow:none!important; }
-#atlas-navigation > .tab-wrapper > .tab-container > button { display:flex!important; align-items:center; justify-content:center; width:100%; min-width:0; min-height:62px; height:auto!important; box-sizing:border-box; padding:14px 12px; margin:0!important; border:0!important; border-radius:12px; box-shadow:none!important; background:transparent; color:#52694f; font:600 17px/1.3 Arial,Helvetica,sans-serif; white-space:normal; text-align:center; text-decoration:none!important; }
-#atlas-navigation > .tab-wrapper > .tab-container > button:hover { background:#e0e9d9; color:#173c30; }
-#atlas-navigation > .tab-wrapper > .tab-container > button[aria-selected="true"] { background:#245d45; color:#fffefa; }
+#atlas-navigation > .tab-wrapper { width:100%; height:auto!important; min-height:0; border:0!important; box-shadow:none!important; margin:0 0 18px; padding:0; }
+#atlas-navigation > .tab-wrapper > .tab-container { display:flex!important; justify-content:flex-start; gap:26px; width:100%!important; height:auto!important; box-sizing:border-box; border:0!important; border-bottom:1px solid #dbe3d3!important; border-radius:0; padding:0; margin:0; background:transparent; box-shadow:none!important; }
+#atlas-navigation > .tab-wrapper > .tab-container > button { display:inline-flex!important; align-items:center; justify-content:flex-start; width:auto; min-width:0; min-height:0; height:auto!important; box-sizing:border-box; padding:0 2px 11px; margin:0!important; border:0!important; border-bottom:2px solid transparent!important; border-radius:0; box-shadow:none!important; background:transparent; color:#6c7d6a; font:600 14px/1.4 Arial,Helvetica,sans-serif; white-space:nowrap; text-align:left; text-decoration:none!important; transition:color .15s; }
+#atlas-navigation > .tab-wrapper > .tab-container > button:hover { background:transparent; color:#173c30; }
+#atlas-navigation > .tab-wrapper > .tab-container > button[aria-selected="true"] { background:transparent; color:#173c30; border-bottom-color:#245d45!important; }
 #atlas-navigation > .tab-wrapper::before, #atlas-navigation > .tab-wrapper::after,
 #atlas-navigation > .tab-wrapper > .tab-container::before, #atlas-navigation > .tab-wrapper > .tab-container::after,
 #atlas-navigation > .tab-wrapper > .tab-container > button::before, #atlas-navigation > .tab-wrapper > .tab-container > button::after { content:none!important; display:none!important; }
@@ -54,6 +54,6 @@
 .database-heading h1 { color:#173c30; font:400 clamp(32px,5vw,48px)/1.1 Georgia,'Times New Roman',serif; letter-spacing:-1px; margin:0 0 12px; }
 .database-heading p { color:#647467; font:14px/1.6 Arial,Helvetica,sans-serif; margin:0; }
 @media(max-width:700px) {
- #atlas-navigation > .tab-wrapper > .tab-container { gap:4px; padding:4px; border-radius:14px; }
- #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:12px; min-height:68px; padding:10px 3px; border-radius:10px; overflow-wrap:anywhere; }
+ #atlas-navigation > .tab-wrapper > .tab-container { gap:18px; }
+ #atlas-navigation > .tab-wrapper > .tab-container > button { font-size:13px; padding:0 1px 9px; }
 }

atlas.css

@@ -31,17 +31,22 @@
 .bar-outline { fill:none; stroke:#f7f8f0; stroke-width:1; }
 .tree-node { cursor:pointer; }
 .tree-node.is-direct { cursor:default; }
-.tree-hit { fill:transparent; transition:fill .15s; }
-.tree-node:hover .tree-hit,.tree-node:focus .tree-hit { fill:#e5ecdd99; }
+.tree-hit { fill:transparent; }
 .tree-node:focus { outline:none; }
 .tree-node:focus .bar-outline { stroke:#173c30; stroke-width:2; }
 .tree-node.is-selected .bar-outline { stroke:#173c30; stroke-width:1.5; }
 .tree-node.is-sibling { opacity:.62; transition:opacity .15s; }
 .tree-node.is-sibling:hover,.tree-node.is-sibling:focus { opacity:1; }
-.tree-label,.tree-count { paint-order:stroke; stroke:#f7f8f0; stroke-width:4px; stroke-linejoin:round; }
-.tree-label { font:600 13px Arial,Helvetica,sans-serif; fill:#254735; }
+.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; }
+.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; }
 .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; }