Linked, aligned patient timelines, and a View switch for the improved patient view

[JohnLevander]

Three commits, each green on tests, lint and build.

Linked, aligned overview + detail on both timelines (0427c87)

The document timeline's range slider was drawn against the full date range while sitting under a zoomed axis, so its handles read months off. Both timelines now use one overview + detail control: a strip under each chart shows every document or event across the full range on its own fixed axis, and two handles select what the chart above shows.

The two timelines are linked: one date range covering every document and event, one zoom and pan state, one screen-reader announcement. They share a horizontal frame, so their strips, handles and axes line up vertically from 620px wide.

• New shared pieces: pure viewport math (utils/patientView/timelineViewport.js), a viewport hook and its linked wrapper, and the strip, axis and zoom controls under components/patient/timeline/.
• Event Timeline: no mouse-wheel zoom (the page scrolls), a 16x zoom cap, pan by a fifth of the visible window rather than of the whole range, and evenly spaced axis labels. Drops d3-zoom, d3-brush, d3-selection and d3-axis; declares d3-scale and d3-interpolate, which it imports directly but were only resolving through @mui/x-charts.
• Event and birth dates are built at local midnight like document dates, so linked timelines print the same calendar date in every timezone.
• Accessibility: focus rings on the handles, multi-thumb slider semantics, a debounced range live region, explicit fills on every SVG text.

This commit also carries in-progress work that was already sitting in the working tree from other sessions (cohort filter layout and filter sets, patient grid and detail panel, patient drawer, document mentions, mock API).

A View switch, and the improved patient view behind it (bb2776c)

A radio in the patient header switches between Alpha (the reading ported from DeepPhe-Viz-v2-alpha) and Improved (default), and remembers the choice. Both show the same data.

Improved: cancers compared in one matrix with tumors nested; undocumented values as a muted dash rather than the weight of a real finding (never hidden, since "unknown" is itself a clinical finding); one containment level and four type steps; banded event lanes; negated marks dashed as well as red, since color alone fails WCAG 1.4.1 for the most common color blindness; both timelines name the range they show; zoom reads as + and − rather than two near-identical magnifiers; one date format for values.

Keep the cancer comparison short (b67e19f)

The matrix was ~530px tall for three cancers, pushing both timelines below the fold; it now reads in about a third of that. TNM reads as one row, rows with nothing to compare fold behind a count, and in the drawer the panel opens folded to a header that reports how many attributes differ.

Testing

424 tests across 50 suites, passing in the default timezone and under TZ=America/New_York; the timeline suites also pass under Tokyo, Los Angeles and UTC+14. Lint, the patient-ID check and the production build are clean (the bundle is ~11 kB smaller after dropping the d3 packages).

Verified in a browser as well as in jsdom: both strips span the same pixels and their handles line up; dragging either timeline's handle moves the other to the same date; a handle released near an end snaps to it; switching to Alpha restores the ported reading; no horizontal page scroll at 375, 820 and 1900px; dark themes checked.

Known gaps

• Alignment holds from 620px up. Below that the document timeline moves its labels above the lanes and the Event Timeline has no narrow layout, so the two stay linked but do not line up.
• The standalone patient view still opens the cancer panel expanded; only the drawer folds it.
• Switching theme repaints the cohort page slowly (~0.5s for the page, 1–2s for an open drawer). That is the cohort page's own re-render cost, not new here, but it makes a theme switch look like it did not apply.

🤖 Generated with Claude Code