feat: scope pathway filters to Patient Pathways view with design-spec CSS (Task 10.9)

This commit is contained in:
Andrew Charlwood
2026-02-06 22:32:02 +00:00
parent 9c783a7e4e
commit f1eecf88bf
3 changed files with 20 additions and 30 deletions
+5 -5
View File
@@ -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. - **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 ### 10.9 Patient Pathways filter relocation
- [ ] Drug/trust/directorate filter buttons (with count badges) only visible when on Patient Pathways view - [x] Drug/trust/directorate filter buttons (with count badges) only visible when on Patient Pathways view
- [ ] Hidden when on Trust Comparison view - [x] 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) - [x] 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) - [x] Filter modals still work as before (drug modal, trust modal, directorate modal)
- [ ] "Clear All Filters" still works - [x] "Clear All Filters" still works
- **Checkpoint**: Filters visible on Patient Pathways, hidden on Trust Comparison, all filter functionality preserved - **Checkpoint**: Filters visible on Patient Pathways, hidden on Trust Comparison, all filter functionality preserved
### 10.10 CSS updates + polish ### 10.10 CSS updates + polish
+7 -15
View File
@@ -228,26 +228,18 @@ body {
font-size: 13px; color: var(--nhs-mid-grey); margin-top: 4px; font-size: 13px; color: var(--nhs-mid-grey); margin-top: 4px;
} }
/* ── Filter Bar ── */ /* ── Patient Pathways Filter Strip ── */
.filter-bar { .pathway-filters {
background: var(--nhs-white); background: var(--nhs-white);
border: 1px solid var(--nhs-pale-grey); border: 1px solid var(--nhs-pale-grey);
padding: 12px 20px; border-bottom: 2px solid var(--nhs-blue);
display: flex; align-items: center; gap: 16px; padding: 8px 20px;
flex-wrap: wrap; display: flex; align-items: center;
justify-content: space-between;
} }
.filter-bar__group { .pathway-filters__buttons {
display: flex; align-items: center; gap: 8px; 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 */
.toggle-pills { .toggle-pills {
+8 -10
View File
@@ -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 View-specific controls for Patient Pathways only. Hidden when on Trust Comparison.
toggle, date filters) live in sub_header.py. Global controls (chart type toggle, date filters) live in sub_header.py.
""" """
from dash import html from dash import html
def make_filter_bar(): def make_filter_bar():
"""Return a filter bar with drug, trust, and directorate filter buttons.""" """Return a pathway filter strip with drug, trust, and directorate buttons."""
return html.Section( return html.Div(
className="filter-bar", className="pathway-filters",
**{"aria-label": "Filters"}, id="pathway-filters",
children=[ children=[
# Filter trigger buttons
html.Div( html.Div(
className="filter-bar__group", className="pathway-filters__buttons",
children=[ children=[
html.Button( html.Button(
children=[ children=[
@@ -54,7 +53,6 @@ def make_filter_bar():
), ),
], ],
), ),
# Clear all filters
html.Button( html.Button(
"Clear All", "Clear All",
id="clear-all-filters", id="clear-all-filters",