Add clade silhouettes, compact navigation tabs, and drop the hover underline

Silhouettes from PhyloPic beside every group name, filtered to CC0/Public Domain Mark/CC BY at build time with every CC BY artist credited in the interface. The Genome Atlas / Database tabs become ordinary tabs instead of two full-width bars, and the hover underline on labels is gone.

FEATURE_BACKLOG.md

@@ -56,7 +56,7 @@ 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.
-- Remaining: clade icons. [PhyloPic](https://www.phylopic.org) is the usable source and resolves NCBI taxids directly, walking up the tree when a clade has no silhouette of its own: `GET https://api.phylopic.org/resolve/ncbi.nlm.nih.gov/taxid/{taxid}` with `Accept: application/vnd.phylopic.v2+json` returns the node, whose uuid then feeds `GET /images?filter_clade={uuid}&filter_license_nc=false&filter_license_sa=false&page=0`. The SVG is at `_links.vectorFile.href` on the image. Those two filters matter: the node's own `primaryImage` is sometimes CC BY-NC-SA, which is both legally murky for a company-run Space and viral once an icon is recoloured to match the palette. Filtering them out still leaves a CC0 or CC BY 4.0 silhouette for every group the atlas shows, checked across eukaryotes, animals, fungi, plants, Eumetazoa, Porifera, Bilateria, Ecdysozoa, arthropods, mammals, birds, Amoebozoa and Discoba. CC BY needs a per-icon credit line, so carry `attribution` and the licence URL alongside each file. Fetch the SVGs once into the repo rather than hot-linking, to keep the Space free of external requests.
+- 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

@@ -27,6 +27,8 @@ Click a group to expand its direct lineages into a new column on the right; ever
 
 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

@@ -37,12 +37,15 @@
 .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-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; text-decoration:underline; }
+.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; }