Skip to content

CommunityMech review cleanup: CVD-safe palette, PaCMAP labels, data-table, de-emoji, footer, discussions/examples dark#198

Merged
realmarcin merged 3 commits into
mainfrom
chore/review-cleanup
Jul 5, 2026
Merged

CommunityMech review cleanup: CVD-safe palette, PaCMAP labels, data-table, de-emoji, footer, discussions/examples dark#198
realmarcin merged 3 commits into
mainfrom
chore/review-cleanup

Conversation

@realmarcin

@realmarcin realmarcin commented Jul 4, 2026

Copy link
Copy Markdown
Contributor

Addresses the remaining dataviz/artifact-design review findings for CommunityMech. Stacked on feat/dark-mode-toggle (which stacks on fix/community-d3-local) — retargets to main as those merge.

Changes

  • Category palette (14-hue rainbow → validated 8 + Other): replaced the hand-picked 14-colour categoryColors with the dataviz skill's CVD-optimized 8-slot categorical palette (#2a78d6 #1baf7a #eda100 #008300 #4a3aa7 #e34948 #e87ba4 #eb6834), assigned to the 8 most frequent categories; the long tail → grey #898781 "Other". The existing per-category shape encoding is retained (unique shape per coloured category; grey categories distinguished by shape) so identity is never colour-alone.
  • PaCMAP relabel: axis/label wording is now driven from the actual reduction method in umap_generator.py (pacmap→"PaCMAP", umap→"UMAP", sfdp→"Layout"), not hard-coded "UMAP".
  • Data-table fallback: a keyboard-reachable <details> table below the scatter on the UMAP + graph pages (dataviz Backfill engineering_design for plant and SynCom communities #10).
  • De-emoji: removed decorative emoji from the landing/browser/UMAP headers & cards.
  • Footer self-link: CommunityMech now plain text in the family footer.
  • Dark mode reach: extended the dark theme + toggle + reduced-motion guard to the previously-missed app/discussions/ and docs/examples/ pages.

Verification

  • No d3js.org CDN refs; old category rainbow hexes gone from template + generated community_umap.html/community_graph.html; new palette present.
  • stateColors (ecological state, a separate 4-value set) intentionally left unchanged — it wasn't the flagged 14-hue category rainbow.
  • Light + dark theme blocks intact (additive).

🤖 Generated with Claude Code

realmarcin and others added 3 commits July 4, 2026 14:18
@realmarcin @claude
Load d3 from the local bundle on per-community pages (drop CDN depend…
88fc4bc 
…ency)

The per-community network diagram loaded d3 from https://d3js.org with no
fallback, while every sibling page (landing, browser, UMAP) already bundles the
local docs/d3.v7.min.js. Offline or under a strict CSP, the network diagram
silently rendered blank.

Point the community.html template's d3 <script> at ../d3.v7.min.js (community
pages render to docs/communities/, one level below the bundle) and regenerate
the 262 affected community pages. Surfaced by a dataviz/artifact-design review.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@realmarcin @claude
Add toggleable dark theme + reduced-motion guard to CommunityMech site
9c89808 
Additive dark-mode sweep across all reviewed pages (landing, browser,
UMAP/graph, and 265 per-community pages) plus the shared style.css.

- Vendor theme-toggle.js at web root (docs/); OS prefers-color-scheme
  default + persisted data-theme toggle. Included on every reviewed page
  (root: theme-toggle.js; communities/*: ../theme-toggle.js).
- Per-page dark blocks redefine each page's own tokens by role using the
  CommunityMech slate palette (bg #101420, surface #1a1f2e, ink #e8ecf4,
  muted #99a2b5, line #2a3142, accent #6ea6f0, hero #1d2740; brightened
  status colors). Both @media (prefers-color-scheme: dark) and
  :root[data-theme="dark"] variants; OS default yields to explicit light.
- Landing: map --pastel-b->bg, --pastel-a->hero; dark translucent stat/
  footer surfaces; accent buttons get dark text.
- Browser (token-less): targeted dark overrides for the specific selectors.
- UMAP/graph: plot bg -> --surface, .point stroke -> --surface, legend
  symbol stroke driven from --point-stroke var.
- Community network: label fills driven from --net-label var; plot bg
  follows --card; dark chip/box tints.
- Reduced-motion guard added to every page and style.css.

Edited templates AND every generated output identically (no re-render),
so template and docs stay in sync. Light appearance unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@realmarcin @claude
CommunityMech review cleanup: CVD-safe category palette, PaCMAP label…
a315e3c 
…s, data-table, de-emoji, footer, discussions/examples dark

Addresses the remaining dataviz/artifact-design review findings (stacked on the
dark-mode branch):

- Category color: collapse the 14-hue hand-picked rainbow to the dataviz skill's
  validated 8-slot CVD-safe categorical palette (blue/aqua/yellow/green/violet/
  red/magenta/orange, assigned in the CVD-optimized order) with the long tail →
  grey "Other". Unique shape per coloured category retained so identity is never
  colour-alone; grey categories stay distinguished by shape.
- PaCMAP relabel: drive the projection axis/label wording from the actual
  reduction method in umap_generator.py (pacmap→"PaCMAP", umap→"UMAP", sfdp→
  "Layout") instead of hard-coded "UMAP".
- Data-table fallback (<details>) added below the scatter on the UMAP + graph pages.
- Removed decorative emoji from the landing, browser, and UMAP headers/cards.
- Family footer no longer self-links CommunityMech (plain text).
- Extended the dark theme + toggle + reduced-motion guard to the previously-missed
  app/discussions/ and docs/examples/ pages (vendored theme-toggle.js alongside).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings July 4, 2026 22:35
Copilot AI reviewed Jul 4, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@realmarcin realmarcin mentioned this pull request Jul 4, 2026
Open
12 tasks
@realmarcin

realmarcin commented Jul 4, 2026

Copy link
Copy Markdown
Contributor Author

Reviewed in depth. Clean — all six cleanup goals verified.

Palette (8 CVD-safe + grey Other). Verified against the 292-community data: the 8 colored categories (RHIZOSPHERE, BIOTECHNOLOGY, BIOREMEDIATION, LIGNOCELLULOSE, SYNTROPHY, METHANOGENESIS, PHYTOPLANKTON, CARBON_SEQUESTRATION) are exactly the 8 most frequent real categories; OTHER (grey catch-all) and the long tail (≤11 each: EXTREME_ENVIRONMENT, BIOMINING, DIET, AMD, ORAL, METAL_REDUCTION) collapse to grey #898781. Every data category is mapped (no fall-through). (color, shape) is unique across all 15: the 8 colored all have distinct colors; the 7 grey each get a distinct d3 shape (Circle/Cross/Diamond/Square/Star/Triangle/Wye — all 7 used once). symbolScale/colorScale derive directly from the edited maps, and the legend renders shape+color+label per category, so grey categories stay distinguishable. stateColors untouched as intended. No leftover 14-hue palette.

PaCMAP label. Template axis captions now {{ projection_label | default("PaCMAP", true) }}; umap_generator.py derives it from method (pacmap→PaCMAP, umap→UMAP, sfdp→Layout). Generated docs/community_umap.html renders literal "PaCMAP", docs/community_graph.html renders "Layout" — consistent.

Data table. All referenced fields exist in communityData (name, url, id, category, ecological_state, origin, num_taxa, num_interactions, coverage_pct); HTML-escaped; coverage_pct number-guarded; row URLs resolve. Applied identically to template + both generated files.

De-emoji / footer / discussions+examples. Emoji removed from landing/index/graph/umap headers and cards; footer CommunityMech self-link replaced with <span aria-current="page">. app/discussions/index.html + examples/growth_media_example.html themed; theme-toggle.js references resolve (theme-toggle.js same-dir for discussions, ../theme-toggle.js → docs/theme-toggle.js for examples).

No issues found.

Note (not from this PR): CI lint fails on a pre-existing black-format issue in src/communitymech/embedding/graph_layout.py, which these PRs don't touch.

@realmarcin realmarcin changed the base branch from feat/dark-mode-toggle to main July 5, 2026 07:27
@realmarcin

realmarcin commented Jul 5, 2026

Copy link
Copy Markdown
Contributor Author

Retargeted to main and merging: this PR's branch carries the dark-theme commits too (it was stacked on the dark branch), so it lands both the dark-mode toggle and the review cleanup for CommunityMech — superseding #196 (which was auto-closed when its base fix/community-d3-local was deleted after #195 merged). #195 (d3-local) is already in main. Reviewed clean by Fable 5; the only red check is the pre-existing lint on graph_layout.py, already fixed on main by #197 and untouched here.

@realmarcin realmarcin merged commit ff2cba3 into main Jul 5, 2026
1 of 2 checks passed
@realmarcin realmarcin deleted the chore/review-cleanup branch July 5, 2026 07:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@realmarcin