Andrew Charlwood
98 lines
4.1 KiB
Plaintext
98 lines
4.1 KiB
Plaintext
# Progress Log
|
|
|
|
## Design Context
|
|
|
|
### Project Vision
|
|
Complete UI redesign of HCD Analysis tool. Modern, bold design with NHS color scheme inspiration (not constrained by it). Single-page dashboard replacing multi-page sidebar layout. Light mode only.
|
|
|
|
### Key Design Decisions
|
|
1. **No sidebar** — all filters in a prominent filter bar
|
|
2. **No user auth UI** — local app, no login needed
|
|
3. **Chart navigation via tabs** — top bar has chart type selection (Icicle now, more later)
|
|
4. **Instant filtering** — debounced (300ms), not "Apply" button
|
|
5. **Two date ranges**:
|
|
- "Initiated" filter (default: OFF, include all patients)
|
|
- "Last Seen" filter (default: ON, last 6 months)
|
|
- "To" date always = latest date in dataset
|
|
6. **Searchable dropdowns** — Drugs, Indications, Directorates with search + counts
|
|
7. **Data source hidden** — SQLite only, refresh via CLI, show freshness indicator
|
|
8. **KPIs reactive** — update when filters change
|
|
|
|
### Color Palette (from DESIGN_SYSTEM.md)
|
|
- Heritage Blue: #003087 (deep, authoritative)
|
|
- Primary Blue: #0066CC (main actions)
|
|
- Vibrant Blue: #1E88E5 (highlights, hovers)
|
|
- Sky Blue: #4FC3F7 (accents)
|
|
- Pale Blue: #E3F2FD (backgrounds)
|
|
- Neutrals: Slate family (#1E293B → #F1F5F9)
|
|
|
|
### Typography
|
|
- Font: Inter (Google Fonts or system)
|
|
- Display: 32px/700, Heading1: 24px/600, Body: 14px/400, Caption: 12px/500
|
|
|
|
## Reflex Patterns
|
|
|
|
### Var operations in rx.foreach
|
|
When using `rx.foreach`, items are Reflex Vars. Use:
|
|
- `.to(int)` for numeric comparisons
|
|
- `.to_string()` for text operations
|
|
- Never use f-strings or Python operators directly
|
|
|
|
### Conditional rendering
|
|
Use `rx.cond(condition, true_value, false_value)` not Python `if`.
|
|
|
|
### State structure
|
|
- Event handlers modify state
|
|
- `@rx.var` decorated methods for computed/derived values
|
|
- All state vars need defaults
|
|
|
|
## Existing Codebase Reference
|
|
|
|
### Key files to reference
|
|
- `pathways_app/pathways_app.py` — existing Reflex app (2100+ lines)
|
|
- `analysis/pathway_analyzer.py` — chart data preparation logic
|
|
- `data_processing/loader.py` — SQLite data loading
|
|
- `core/models.py` — AnalysisFilters dataclass
|
|
|
|
### Patterns that work in existing code
|
|
- `State` class with filter variables
|
|
- `rx.plotly()` for chart rendering
|
|
- Multi-select with `rx.checkbox` groups
|
|
- Theme configuration via `rx.theme()`
|
|
|
|
## Iteration Log
|
|
<!-- Each iteration appends a structured entry below. See RALPH_PROMPT.md for format. -->
|
|
|
|
## Iteration 1 - 2026-02-04
|
|
### Task: 1.1 Design Tokens Module
|
|
### Status: COMPLETE
|
|
### What was done:
|
|
- Created `pathways_app/styles.py` with all design tokens from DESIGN_SYSTEM.md
|
|
- Colors class: Heritage Blue, Primary, Vibrant, Sky, Pale blues + Slate neutrals + semantic colors
|
|
- Typography class: Font family (Inter), sizes, weights, line heights for Display/H1/H2/H3/Body/Caption/Mono
|
|
- Spacing class: XS(4px) through XXXL(48px)
|
|
- Radii class: SM(4px) through FULL(9999px)
|
|
- Shadows class: SM/MD/LG/XL shadow values
|
|
- Transitions class: Color/Transform/Shadow/Opacity timings
|
|
- Helper functions: card_style(), button_primary/secondary/ghost_style(), input_style(), kpi_card/value/label_style(), text_display/h1/h2/h3/body/caption/mono()
|
|
- Layout constants: TOP_BAR_HEIGHT="64px", PAGE_MAX_WIDTH="1600px"
|
|
### Validation results:
|
|
- Tier 1 (Code): python -m py_compile PASSED, imports verified (Colors.PRIMARY = #0066CC, Spacing.LG = 16px)
|
|
- Tier 2 (Visual): N/A (no UI component yet)
|
|
- Tier 3 (Functional): Helper functions verified - return correct dict structures
|
|
### Files changed:
|
|
- Created: pathways_app/styles.py (408 lines)
|
|
- Updated: IMPLEMENTATION_PLAN.md (marked 1.1 complete)
|
|
### Committed: 2bd28f5 "feat: create design tokens module (styles.py)"
|
|
### Patterns discovered:
|
|
- Using classes with class attributes (not instances) works well for tokens
|
|
- Helper functions returning dicts can include _hover and other pseudo-selectors
|
|
### Next iteration should:
|
|
- Start Task 1.2: Create app_v2.py with basic Reflex app skeleton
|
|
- Create AppState class with minimal placeholder state
|
|
- Set up single-page layout structure matching DESIGN_SYSTEM.md
|
|
- Configure Reflex theme with design system colors
|
|
- Verify `reflex run` compiles and shows page
|
|
### Blocked items:
|
|
- None
|