diff --git a/IMPLEMENTATION_PLAN.md b/IMPLEMENTATION_PLAN.md index 2d40bcb..6c57311 100644 --- a/IMPLEMENTATION_PLAN.md +++ b/IMPLEMENTATION_PLAN.md @@ -548,11 +548,11 @@ Additionally: KPI row removed, fraction KPIs moved to header, global filter sub- - **Checkpoint**: All 6 charts render for a selected directorate, comparing drugs across trusts. Charts update when date filter or chart type changes. ### 10.9 Patient Pathways filter relocation -- [ ] Drug/trust/directorate filter buttons (with count badges) only visible when on Patient Pathways view -- [ ] Hidden when on Trust Comparison view -- [ ] Placement per design from 10.1 (could be below the global sub-header, or inline with Patient Pathways content) -- [ ] Filter modals still work as before (drug modal, trust modal, directorate modal) -- [ ] "Clear All Filters" still works +- [x] Drug/trust/directorate filter buttons (with count badges) only visible when on Patient Pathways view +- [x] Hidden when on Trust Comparison view +- [x] Placement per design from 10.1 (could be below the global sub-header, or inline with Patient Pathways content) +- [x] Filter modals still work as before (drug modal, trust modal, directorate modal) +- [x] "Clear All Filters" still works - **Checkpoint**: Filters visible on Patient Pathways, hidden on Trust Comparison, all filter functionality preserved ### 10.10 CSS updates + polish diff --git a/dash_app/assets/nhs.css b/dash_app/assets/nhs.css index 8650a06..db5090f 100644 --- a/dash_app/assets/nhs.css +++ b/dash_app/assets/nhs.css @@ -228,26 +228,18 @@ body { font-size: 13px; color: var(--nhs-mid-grey); margin-top: 4px; } -/* ── Filter Bar ── */ -.filter-bar { +/* ── Patient Pathways Filter Strip ── */ +.pathway-filters { background: var(--nhs-white); border: 1px solid var(--nhs-pale-grey); - padding: 12px 20px; - display: flex; align-items: center; gap: 16px; - flex-wrap: wrap; + border-bottom: 2px solid var(--nhs-blue); + padding: 8px 20px; + display: flex; align-items: center; + justify-content: space-between; } -.filter-bar__group { +.pathway-filters__buttons { display: flex; align-items: center; gap: 8px; } -.filter-bar__divider { - width: 1px; height: 28px; background: var(--nhs-pale-grey); -} -.filter-bar__label { - font-size: 12px; font-weight: 600; - text-transform: uppercase; letter-spacing: 0.04em; - color: var(--nhs-mid-grey); - white-space: nowrap; -} /* Toggle pills */ .toggle-pills { diff --git a/dash_app/components/filter_bar.py b/dash_app/components/filter_bar.py index b3b2faf..d221cf9 100644 --- a/dash_app/components/filter_bar.py +++ b/dash_app/components/filter_bar.py @@ -1,20 +1,19 @@ -"""Filter bar component — drug, trust, and directorate filter buttons. +"""Patient Pathways filter strip — drug, trust, and directorate filter buttons. -View-specific controls for Patient Pathways. Global controls (chart type -toggle, date filters) live in sub_header.py. +View-specific controls for Patient Pathways only. Hidden when on Trust Comparison. +Global controls (chart type toggle, date filters) live in sub_header.py. """ from dash import html def make_filter_bar(): - """Return a filter bar with drug, trust, and directorate filter buttons.""" - return html.Section( - className="filter-bar", - **{"aria-label": "Filters"}, + """Return a pathway filter strip with drug, trust, and directorate buttons.""" + return html.Div( + className="pathway-filters", + id="pathway-filters", children=[ - # Filter trigger buttons html.Div( - className="filter-bar__group", + className="pathway-filters__buttons", children=[ html.Button( children=[ @@ -54,7 +53,6 @@ def make_filter_bar(): ), ], ), - # Clear all filters html.Button( "Clear All", id="clear-all-filters",