Fix chart labels, legends and citation timeline details

Merged
LU
15h ago
+208-26

From the second usability review of 21 October 2026. This was an agent-led review using simulated perspectives, not recruited participants. GPT 6.1 Sol implemented the changes; Claude reviewed them. This PR fixes C25, the zero tile from C24, the N-label bug from C05, and legend order from C19. It also fixes clipped Plotly axis titles on phones.

Changes

  • Citation timeline:
    • the replication list and marker numbers follow chronological order;
    • markers are spaced so they don't touch at 320ā€“390 px;
    • the partial current year has lighter bars and a "partial year" label;
    • empty series are dropped from the legend;
    • copy buttons no longer include an emoji;
    • tooltips are not truncated.
  • Mean Citedness KPI tiles: zero-count tiles (such as "0 Inconclusive") are omitted, and the grid is balanced so no tile sits alone on the last row.
  • N labels: they no longer disappear when category names wrap or overlap the legend.
  • Legend order: legends follow the stack order in both Chart.js and Plotly.
  • Phones: Plotly uses automatic margins, so axis titles aren't clipped and the right axis doesn't overlap its ticks.

Tests

Focused tests cover list and marker order, marker spacing, partial-year styling, KPI tiles, N-label bounds, legend order, and phone axis titles. Full suite passes locally (18/18).

šŸ¤– Generated with Claude Code

Summary by cubic

Fixes chart and citation timeline issues from the second usability review, covering replication ordering and label spacing, KPI tile layout, N-label visibility, legend order, and phone axis clipping.

  • Replication lists and markers now sort chronologically without changing stored tie order; markers don't touch at 320ā€“390 px and the partial current year is dimmed and labeled.
  • Zero-count Mean Citedness tiles are omitted; seven-tile grids render as a full-width first tile plus two three-column rows, and no tile sits alone on the last row.
  • N labels stay visible when category names wrap or overlap the legend; legends follow stack order in Chart.js and Plotly.
  • Plotly uses automatic margins on phones so axis titles aren't clipped and don't overlap ticks.
  • Copy buttons drop emoji and tooltips aren't truncated. Citation timeline redraws are debounced by 120 ms so resize bursts trigger one redraw and closed modals are skipped; focused browser tests cover these behaviors.