feat(web): visual coherence — slate palette, density bumps, Skeleton adoption#79
Merged
github-actions[bot] merged 2 commits intodevelopfrom May 8, 2026
Merged
Conversation
…adoption Three swings across the Next.js app to retire mismatched style choices that landed in different sessions. No logic changes. 1) Palette unification: gray-* → slate-* The platform polish (#68) introduced slate on the header / home / nav while every other page kept gray-. The same session showed two neutral palettes side-by-side. Single sed sweep across 24 page and component files (641 occurrences) brings everything to slate-. Semantic colors (red / blue / emerald / amber / violet) untouched. 2) Density bump in body cells text-xs (12px) is hostile for tabular numbers in the data-heavy pages. Selective bump to text-[13px] inside <td> cells and body paragraphs in /scoring, /annotations, /reranker, /evaluation, /jobs/[id], /proteins/[accession]. Labels, chips, badges and tracking-* uppercase headers stay at text-xs (intentional). 3) Skeleton adoption The repo ships components/Skeleton.tsx but pages roll their own `bg-gray-100 rounded animate-pulse`. Migrated the most visible loading screen (/benchmark) to use <Skeleton/>. Other ad-hoc pulse patterns in cards (jobs / proteins / annotations / fa[id]) are wrapper-level pulses, not inner skeletons — left intact for a follow-up that designs proper skeleton card variants. CI: next build green; backend untouched.
7 tasks
github-actions Bot
pushed a commit
that referenced
this pull request
May 8, 2026
#81) ## Why `/benchmark` ships a flat row-per-cell table. With 8 PLMs × ~9 (cat × aspect) cells × 3 stages × 3 K values, the narrative thesis defenders care about — *which* model wins *where*, with *which* scoring + K — gets buried in scrolling. A small-multiples view shows it in one screen. ## What ### New `<BenchmarkHeatmap />` component - 3-aspects × N-categories grid of compact cards. - Each card lists embeddings sorted by Fmax descending, one horizontal bar each. - Bar **width** is proportional to Fmax (primary signal for accessibility); **color** sits on a perceptual blue→violet HSL gradient (secondary signal). - Leader marked with a medal 🥇. - Aspect-tinted card header (MFO blue / BPO violet / CCO emerald) so the per-aspect column reads at a glance. - Hover tooltip exposes `stage / K / Fmax`. Reserved slot for **bootstrap CI whiskers** — when the persisted CIs land (per the `thesis_bootstrap_cis` roadmap entry), they render in the same row without layout churn. ### Toggle wired into `/benchmark` - New `viewMode` state, default `"heatmap"`. - `role="tablist"` toggle (`aria-selected` per button) sits between the leaderboards and the matrix. - Original full matrix table preserved verbatim under the **Table** toggle — export-friendly raw numbers stay one click away. ### Existing surface preserved - Filters (stage / K / evaluation_set) drive both views. - Both leaderboards (Global champions + In-selection) stay above the toggle. - CSV export untouched. ## Test plan - [x] `next build` green; 18 routes; no TS errors - [x] Backend untouched — no changes outside `apps/web/` - [ ] Visual: open `/benchmark` — heatmap grid renders by default with NK row, then LK, then PK; aspects flow MFO → BPO → CCO across each row. - [ ] Click a stage chip — both leaderboards + heatmap recompute; bars resort. - [ ] Click **Table** in the toggle — original matrix table appears, toggle reflects active state. - [ ] Hover any bar — tooltip shows `display_name · stage · K=N · 0.xxx`. - [ ] Empty cell (no data for cat × aspect under the active filter) — card shows "No data" placeholder. ## Notes - Worktree `protea-benchmark-heatmap`, fully isolated. Sister PR (#79 coherence sweep) is in flight from `protea-coherencia-visual` — touches different files, no conflict expected.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The platform shell polish (#68) introduced slate- on the header / home / nav, but every other page kept gray-. Same session, two neutral palettes side by side. This PR retires that drift in one sweep, plus two adjacent density / loading-state cleanups identified in the UX audit.
What
1. Palette unification — gray → slate
gray-{50…900}→slate-{50…900}).2. Density bump in body cells
text-xs(12px) is hostile for tabular numbers in the data-heavy pages. Selective bump totext-[13px]inside<td>cells and body paragraphs in/scoring,/annotations,/reranker,/evaluation,/jobs/[id],/proteins/[accession].tracking-*uppercase section headers stay attext-xs— intentional hierarchy.3. Skeleton adoption
components/Skeleton.tsxbut pages were rolling their ownbg-gray-100 rounded animate-pulse./benchmark) to use<Skeleton />.Test plan
next buildgreen; 18 routesapps/web//jobs,/embeddings,/scoring) — color rhymes with the polished header now/scoring,/annotations,/rerankerreads cleaner; chip/label sizes unchanged/benchmarkloading state uses the canonical<Skeleton/>look (compare to fast initial paint)Notes
protea-coherencia-visual, fully isolated. Sister PR (#TBA) for benchmark heatmap small-multiples is in flight fromprotea-benchmark-heatmap, no overlap.