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.
### 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
+7 -15
View File
@@ -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 {
+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
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",