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

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}?embed_primaryImage=true` with `Accept: application/vnd.phylopic.v2+json`, which returns an SVG under `_embedded.primaryImage._links.vectorFile.href`. Two things to settle before using it: licences differ per image (CC0, CC BY 4.0, CC BY-SA 3.0 and at least one CC BY-NC-SA 3.0 among the groups the atlas shows first), so each icon needs its own credit line and the non-commercial ones need replacing or omitting; and the SVGs should be fetched once into the repo rather than hot-linked, 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; }