Skip to content

feat(frontend): add Linnaean rank icons to taxa display#371

Closed
frewsxcv wants to merge 2 commits into
mainfrom
worktree-mossy-chasing-gem
Closed

feat(frontend): add Linnaean rank icons to taxa display#371
frewsxcv wants to merge 2 commits into
mainfrom
worktree-mossy-chasing-gem

Conversation

@frewsxcv

@frewsxcv frewsxcv commented Apr 29, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a RankIcon component with monochrome SVG glyphs for each Linnaean rank — stacked bars for phylum and above (1/2/3 = phylum/kingdom/domain), filled dots on the implied polygon for class → species (5/4/3/2/1), hollow or gap-split variants for sub-ranks. Returns null for ranks without a glyph (tribe, super-/infra-, etc.). Uses currentColor so it inherits surrounding text color.
  • Surfaces the icons next to rank labels in the taxon detail header, breadcrumb, classification list (ancestors / current / children), and tree panel.

Glyph system based on the artifact: https://claude.ai/public/artifacts/87f5a057-5438-49a2-bf65-39f117f43a4a

Screenshots

Tree panel — every rank from kingdom (Animalia) down through subspecies, each with its distinct glyph. Note that rare/unranked entries (e.g. BOLD:AAA9440, unranked) correctly fall back to text with no icon:

Tree panel showing all rank icons

Species page — header reads "● Species" (filled dot), tree on the left shows the full Linnaean chain:

Species detail page

Family page — header reads "▴ Family" (3-dot triangle), and the tree highlights Turdidae with its 23+ child genera each marked with the 2-dot genus glyph:

Family detail page

Test plan

  • Visit a species page — header shows the filled-dot icon next to "Species".
  • Visit a family page — header shows the 3-dot triangle next to "Family".
  • Tree panel shows the correct glyph for every rank (kingdom, phylum, class, order, family, genus, species, subspecies).
  • Unrecognised ranks (unranked, BOLD identifiers) render as text without a broken icon.
  • Manual: confirm icons remain readable in dark mode (currentColor should follow text color).

Notes

  • TaxonDetail.tsx is also updated for consistency, but it is currently dead code — the live taxon route renders TaxonExplorer (which uses TaxonDetailPanel + TaxonTreePanel).

Introduce a RankIcon component with monochrome glyphs for each
Linnaean rank (bars for phylum and above, dots on the implied
polygon for class through species, hollow/split variants for
sub-ranks) and surface them next to rank labels in the taxon
detail header, breadcrumb, classification list, and tree panel.
@frewsxcv frewsxcv closed this May 30, 2026
@frewsxcv frewsxcv deleted the worktree-mossy-chasing-gem branch May 30, 2026 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant