HighCostDrugsDemo/IMPLEMENTATION_PLAN.md

Implementation Plan - UI Redesign Phase

Project Overview

Redesign the HCD Analysis application with a modern SaaS-style interface. The current NHS-dashboard style is functional but dated. This phase focuses on:

1. Modern SaaS aesthetic - Clean, ambitious design that looks like a premium product
2. Maximized chart space - The icicle chart is the hero; everything else supports it
3. Compact controls - Filters and KPIs should be efficient, not sprawling
4. Full-width layout - Use the entire viewport width

Design Philosophy:

• Thematically aligned with blue color scheme but NOT constrained by NHS branding
• Think Stripe, Linear, Vercel - clean, spacious, confident
• Data visualization is the star; chrome should be minimal

Source Files:

• pathways_app/pathways_app.py - Main Reflex application
• pathways_app/styles.py - Design tokens and style helpers
• DESIGN_SYSTEM.md - Design specifications

Quality Checks

Run after each task:

# Syntax check for Python files
python -m py_compile pathways_app/pathways_app.py

# Import verification
python -c "from pathways_app.pathways_app import app"

# Reflex compile
python -m reflex compile

Phase 5: UI Redesign

5.1 Update Design System for Modern SaaS

• Update DESIGN_SYSTEM.md with new specifications:
  • Reduce top bar height from 64px to 48px
  • Define compact filter row (single horizontal strip)
  • Define compact KPI card dimensions (reduce padding, font sizes)
  • Add full-width chart container specs
• Update pathways_app/styles.py tokens to match:
  • Typography: DISPLAY 32→28px, H1 24→18px, H2 20→16px, CAPTION 12→11px
  • Spacing: SM 8→6px, MD 12→8px, LG 16→12px, XL 24→16px, XXL 32→24px, XXXL 48→32px
  • Shadows: Lighter values (0.04, 0.06, 0.08 opacity)
  • Colors: Modernized semantic colors (SUCCESS #10B981, etc.)
  • Layout: TOP_BAR_HEIGHT 64→48px, FILTER_STRIP_HEIGHT 48px
• Add new style helpers:
  • compact_kpi_card_style() - 12px padding, 24px value font
  • compact_kpi_value_style() / compact_kpi_label_style() - matching text styles
  • kpi_badge_style() - inline pill/badge variant (zero height impact)
  • filter_strip_style() - 48px horizontal container
  • compact_dropdown_trigger_style() - 32px height triggers
  • searchable_dropdown_panel_style() / searchable_dropdown_item_style() - compact items
  • chart_container_style() / chart_wrapper_style() - full-width, flex-grow
  • top_bar_style() / top_bar_tab_style() / logo_style() - 48px top bar
• Verify: python -c "from pathways_app.styles import *" - PASSED

5.2 Compact Filter Section (50-67% height reduction)

• Redesign filter_section() as a single horizontal strip:
  • All filters in ONE row: Date dropdowns | Drugs | Indications | Directorates
  • Remove "Filters" header (saves vertical space)
  • Use smaller dropdown triggers (height: 32px instead of 40px)
  • Use icon-only labels where possible
• Reduce searchable_dropdown() panel heights:
  • Max item list height: 150px (was 200px)
  • Smaller search input (size="1" instead of size="2")
  • Tighter spacing (6px/8px gaps via Spacing.SM/MD)
• Make filter dropdowns collapsible/expandable (optional advanced feature)
  • Note: This was already implemented - dropdowns open/close on click
• Verify: Filter section height ≤ 60px when collapsed (requires visual verification)

5.3 Compact KPI Cards (50% reduction)

• Reduce KPI card dimensions:
  • Padding: 12px (was 24px)
  • Value font size: 24px (was 32px)
  • Label font size: 11px (was 12px)
• Make KPIs a single compact row:
  • All 4 KPIs in horizontal strip
  • Minimal vertical footprint
  • Consider inline layout: "12,345 patients | £45.2M cost | 89 drugs | 7 trusts"
• Alternative: KPI badges/pills instead of cards
  • Implemented kpi_badge() and kpi_badges() functions
  • KPIs are now inline badges integrated into the filter strip
  • Zero additional vertical height (Option A from design system)
• Verify: KPI row height ≤ 48px
  • KPIs now embedded in filter strip - no separate row needed
  • reflex compile succeeds in 15s

5.4 Full-Width Chart Layout

• Remove PAGE_MAX_WIDTH constraint for chart container
• Chart should stretch to viewport width (with small padding: 16px each side)
• Update chart height calculation:
  • Use CSS calc() or flex-grow to fill remaining viewport height
  • Minimum height: 500px
  • Target: viewport height minus (top bar + filters + KPIs + padding)
• Update Plotly layout:
  • Remove fixed height=600, use responsive sizing
  • Reduce margins further for maximum chart area
• Verify: Chart fills available space on 1920x1080 display

5.5 Top Bar Refinement

• Reduce top bar height to 48px (was 64px)
• Simplify chart tabs - smaller pills or just text links
• Consider moving data freshness indicator inline with filters
• Make logo smaller (28px instead of 36px)
• Verify: Top bar is minimal but functional

5.6 Visual Polish

• Add subtle hover states to interactive elements
• Ensure consistent focus rings for accessibility
• Test responsive behavior at common breakpoints (1366, 1920, 2560px widths)
• Remove any unused styles from styles.py
• Verify: No visual regressions, app looks cohesive

Completion Criteria

All tasks marked [x] AND:

• App compiles without errors (reflex compile succeeds)
• Filter section height ≤ 60px (measured visually)
• KPI row height ≤ 48px (measured visually)
• Top bar height = 48px
• Chart stretches to full viewport width (minus 32px total padding)
• Chart fills remaining vertical space (min 500px)
• Design feels like modern SaaS, not NHS dashboard
• All interactive elements have appropriate hover/focus states

Reference

Current Layout (to be improved)

┌─────────────────────────────────────────────────────────────────┐
│  Top Bar (64px) - Logo, Tabs, Freshness                        │
├─────────────────────────────────────────────────────────────────┤
│  Filter Section (~200px) - Headers, Date dropdowns, Multi-select│
├─────────────────────────────────────────────────────────────────┤
│  KPI Cards (~100px) - 4 large cards in row                     │
├─────────────────────────────────────────────────────────────────┤
│  Chart (~600px fixed) - Constrained width                      │
└─────────────────────────────────────────────────────────────────┘

Target Layout

┌─────────────────────────────────────────────────────────────────┐
│ Logo │ Tabs │                                    │ Freshness   │ 48px
├─────────────────────────────────────────────────────────────────┤
│ [Date▾] [Date▾] [Drugs▾] [Indications▾] [Directories▾] │ KPIs │ 48-60px
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│                        CHART                                    │ flex-grow
│                    (full width)                                 │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Key Measurements

Element	Current	Target
Top bar	64px	48px
Filter section	~200px	≤60px
KPI row	~100px	≤48px (or merged with filters)
Chart	600px fixed, constrained width	flex-grow, full width
Total overhead	~364px	~156px (57% reduction)

Key Files

File	Purpose
pathways_app/pathways_app.py	Main Reflex application
pathways_app/styles.py	Design tokens and style helpers
DESIGN_SYSTEM.md	Design specifications