feat: implement chart container with state-based rendering (Task 2.4)
- Add chart_loading_skeleton() with animated bar chart and spinner - Add chart_error_state() for displaying errors with guidance - Add chart_empty_state() for when filters yield no results - Add chart_ready_placeholder() for Phase 4 Plotly integration - Rewrite chart_section() with 4-state rx.cond() logic - Fix icon names (triangle-alert) and color references (SLATE_500) This completes Phase 2 Layout Components.
This commit is contained in:
@@ -323,3 +323,70 @@ Use `rx.cond(condition, true_value, false_value)` not Python `if`.
|
||||
### Blocked items:
|
||||
- Debounced filter handlers (300ms) deferred to Phase 3.3
|
||||
- Visual validation still blocked until rxconfig is updated
|
||||
|
||||
## Iteration 6 - 2026-02-04
|
||||
### Task: 2.4 Chart Container
|
||||
### Why this task:
|
||||
- Previous iteration (5) explicitly recommended continuing with Task 2.4
|
||||
- Natural completion of Phase 2 Layout Components
|
||||
- Chart container is foundational for Phase 4 Plotly integration
|
||||
- No dependencies blocking this task
|
||||
### Status: COMPLETE
|
||||
### What was done:
|
||||
- Created `chart_loading_skeleton()` component:
|
||||
- Animated bar chart skeleton with 6 bars at different heights
|
||||
- Uses CSS pulse animation (1.5s infinite) with staggered delays
|
||||
- Spinner + "Generating chart..." text below
|
||||
- Design tokens used (Colors, Typography, Spacing, Radii)
|
||||
- Created `chart_error_state(error_message)` component:
|
||||
- Triangle alert icon (48px, warning color)
|
||||
- "Unable to Generate Chart" heading
|
||||
- Dynamic error message from state
|
||||
- Helpful guidance text for resolution
|
||||
- Created `chart_empty_state()` component:
|
||||
- Search-x icon (48px, slate color)
|
||||
- "No Data to Display" heading
|
||||
- Message explaining no records match filters
|
||||
- Guidance to widen filters
|
||||
- Created `chart_ready_placeholder()` component:
|
||||
- Chart-bar-stacked icon (primary blue)
|
||||
- "Chart Ready" heading
|
||||
- Pale blue background with dashed primary border
|
||||
- Clear indication that Plotly renders here in Phase 4
|
||||
- Rewrote `chart_section()` with state-based rendering:
|
||||
- Header row: title + chart hierarchy info
|
||||
- Uses nested rx.cond() for 4-state logic:
|
||||
1. Loading (chart_loading=True) → skeleton
|
||||
2. Error (error_message!="") → error state
|
||||
3. Empty (data_loaded & unique_patients==0) → empty state
|
||||
4. Ready → placeholder
|
||||
- Full-width card styling
|
||||
- Fixed icon names: alert-triangle → triangle-alert (Lucide convention)
|
||||
- Fixed Colors.SLATE_400 → SLATE_500 (SLATE_400 doesn't exist in palette)
|
||||
### Validation results:
|
||||
- Tier 1 (Code):
|
||||
- `python -m py_compile pathways_app/app_v2.py` PASSED
|
||||
- `python -c "from pathways_app.app_v2 import app"` PASSED
|
||||
- All 5 chart component functions return Box type correctly
|
||||
- Tier 2 (Visual): Deferred - requires modifying rxconfig to test app_v2
|
||||
- Tier 3 (Functional): State-based rendering verified structurally via rx.cond nesting
|
||||
### Files changed:
|
||||
- Modified: pathways_app/app_v2.py (+180 lines - 4 new components, rewritten chart_section)
|
||||
- Modified: IMPLEMENTATION_PLAN.md (marked 2.4 subtasks complete)
|
||||
### Committed: [pending]
|
||||
### Patterns discovered:
|
||||
- Lucide icon names: triangle-alert not alert-triangle, search-x works
|
||||
- CSS animations in Reflex: use animation prop with standard CSS syntax
|
||||
- Staggered animations: animation_delay="0.1s" works for sequential delays
|
||||
- Nested rx.cond() for multi-state logic: readable priority chain
|
||||
- Colors.SLATE_400 doesn't exist in design system - use 300/500 instead
|
||||
### Next iteration should:
|
||||
- Phase 2 is now COMPLETE. Start Phase 3: State Management
|
||||
- Task 3.1: Core State Variables - many already exist from Task 2.2, needs review
|
||||
- Task 3.2: Data Loading - create load_data() to read from SQLite
|
||||
- Reference data_processing/loader.py for SQLite patterns
|
||||
- Populate available_drugs, available_indications, available_directorates from data
|
||||
- Detect latest date for "to" date defaults
|
||||
- Consider testing app_v2 visually by modifying pathways_app/__init__.py to import from app_v2
|
||||
### Blocked items:
|
||||
- Visual validation still blocked until rxconfig is updated to point to app_v2
|
||||
|
||||
Reference in New Issue
Block a user