From e73a1c6cb8ec98012ce3267219bd5a0c60c4ecbf Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Wed, 11 Feb 2026 02:05:38 +0000 Subject: [PATCH] Progress update: Mark Task 10 complete and log iteration --- Ralph/IMPLEMENTATION_PLAN.md | 2 +- Ralph/progress.txt | 30 ++++++++++++++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/Ralph/IMPLEMENTATION_PLAN.md b/Ralph/IMPLEMENTATION_PLAN.md index 2112e6e..27bed19 100644 --- a/Ralph/IMPLEMENTATION_PLAN.md +++ b/Ralph/IMPLEMENTATION_PLAN.md @@ -143,7 +143,7 @@ src/ Create `src/components/views/ProblemsView.tsx`. Two sections: Active Problems and Resolved Problems. Table columns: Status (traffic light dot), Code (SNOMED-style in Geist Mono), Problem description, Since/Resolved date, Outcome (for resolved). Traffic lights: 8px circles — green (resolved/current), amber (in progress), gray (inactive/historical). Active problems: £220M budget oversight, SQL transformation, data literacy programme. Resolved problems: 8 achievements with specific outcomes ("Python algorithm: 14,000 pts, £2.6M/yr", "70% reduction, 200hrs saved", etc.). Click row to expand full narrative with "linked consultations" navigation. -- [ ] **Task 10: Build InvestigationsView with results panel** +- [x] **Task 10: Build InvestigationsView with results panel** Create `src/components/views/InvestigationsView.tsx`. Projects presented as diagnostic investigations. Table: Test Name | Requested | Status | Result. Status badges: Complete (green dot), Ongoing (amber dot), Live (pulsing green dot for PharMetrics). 5 investigations: PharMetrics Interactive Platform, Patient Switching Algorithm, Blueteq Generator, CD Monitoring System, Sankey Chart Analysis Tool. Click row to expand "results panel" with tree-indented structure: Date Requested, Date Reported, Status, Requesting Clinician, Methodology, Results, Tech Stack. PharMetrics has "View Results" button linking to medicines.charlwood.xyz. diff --git a/Ralph/progress.txt b/Ralph/progress.txt index 1b73cb0..b497690 100644 --- a/Ralph/progress.txt +++ b/Ralph/progress.txt @@ -306,3 +306,33 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio - `problem.linkedConsultations` needed null coalescing since it's optional in the type - Height animation uses refs to measure content height for smooth expansion - Linked consultations use external link icon to indicate navigation + +### Iteration 10 — Task 10: Build InvestigationsView with results panel +- **Completed**: Task 10 - Created InvestigationsView with expandable rows and results panel +- **Files created**: + - `src/components/views/InvestigationsView.tsx` - Full Investigations view with 5 project entries +- **Files modified**: + - `src/components/PMRInterface.tsx` - Added InvestigationsView to renderView switch +- **Design decisions**: + - Status badges: Complete (green dot), Ongoing (amber dot), Live (pulsing green dot with ping animation) + - Table columns: Test Name, Requested, Status, Result + - Expandable rows: click to show tree-indented results panel + - Results panel uses key-value layout with fixed-width labels (w-40) for alignment + - Methodology and Results sections display multi-line content + - Tech Stack displayed as comma-separated list + - PharMetrics has "View Results" button linking to medicines.charlwood.xyz + - Height animation: 200ms ease-out for expand/collapse + - Accordion behavior: only one row expanded at a time (global) + - Hover state: blue-50 (#EFF6FF) background tint +- **Accessibility**: + - Proper semantic `` markup with `scope="col"` on headers + - `aria-expanded` on clickable rows + - Status badges have `aria-label` with status text + - Traffic lights always accompanied by text labels + - External link has proper target="_blank" rel="noopener noreferrer" + - Respects `prefers-reduced-motion`: height transition disabled +- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓ +- **Learnings**: + - Live status uses Tailwind animate-ping for pulsing effect (requires relative container) + - Tree-indented structure uses flex with fixed-width labels for clean alignment + - Results as bullet list provides better readability than comma-separated text