admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add global filter sub-header bar (Task 10.4)

Browse Source 
Extract chart type toggle and date filter dropdowns from filter_bar.py
into a new sub-header component. Sub-header is fixed-position below the
main header, visible across both views. Filter bar now contains only
drug/trust/directorate buttons for Patient Pathways view.
This commit is contained in:
Andrew Charlwood
2026-02-06 21:51:56 +00:00
parent 95f5125889
commit 7e0c851063
5 changed files with 148 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dash_app/components/filter_bar.py
+19 -81
View File
@@ -1,88 +1,17 @@
"""Filter bar component — chart type toggle, date filters, and modal trigger buttons."""
from dash import html, dcc
"""Filter bar component — drug, trust, and directorate filter buttons.
View-specific controls for Patient Pathways. 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 chart type toggle, date dropdowns, and filter buttons.
Filter buttons open modals for drug, trust, and directorate selection.
Each button shows a selection count badge (updated via callbacks).
"""
"""Return a filter bar with drug, trust, and directorate filter buttons."""
return html.Section(
className="filter-bar",
**{"aria-label": "Filters"},
children=[
# Chart type toggle
html.Div(
className="filter-bar__group",
children=[
html.Span("View", className="filter-bar__label"),
html.Div(
className="toggle-pills",
role="radiogroup",
**{"aria-label": "Chart view type"},
children=[
html.Button(
"By Directory",
id="chart-type-directory",
className="toggle-pill toggle-pill--active",
role="radio",
n_clicks=0,
**{"aria-checked": "true"},
),
html.Button(
"By Indication",
id="chart-type-indication",
className="toggle-pill",
role="radio",
n_clicks=0,
**{"aria-checked": "false"},
),
],
),
],
),
# Divider
html.Div(className="filter-bar__divider"),
# Initiated filter
html.Div(
className="filter-bar__group",
children=[
html.Span("Initiated", className="filter-bar__label"),
dcc.Dropdown(
id="filter-initiated",
options=[
{"label": "All years", "value": "all"},
{"label": "Last 2 years", "value": "2yr"},
{"label": "Last 1 year", "value": "1yr"},
],
value="all",
clearable=False,
searchable=False,
className="filter-dropdown",
),
],
),
# Last seen filter
html.Div(
className="filter-bar__group",
children=[
html.Span("Last seen", className="filter-bar__label"),
dcc.Dropdown(
id="filter-last-seen",
options=[
{"label": "Last 6 months", "value": "6mo"},
{"label": "Last 12 months", "value": "12mo"},
],
value="6mo",
clearable=False,
searchable=False,
className="filter-dropdown",
),
],
),
# Divider before filter buttons
html.Div(className="filter-bar__divider"),
# Filter trigger buttons
html.Div(
className="filter-bar__group",
@@ -90,7 +19,10 @@ def make_filter_bar():
html.Button(
children=[
"Drugs",
html.Span(id="drug-count-badge", className="filter-btn__badge filter-btn__badge--hidden"),
html.Span(
id="drug-count-badge",
className="filter-btn__badge filter-btn__badge--hidden",
),
],
id="open-drug-modal",
className="filter-btn",
@@ -99,7 +31,10 @@ def make_filter_bar():
html.Button(
children=[
"Trusts",
html.Span(id="trust-count-badge", className="filter-btn__badge filter-btn__badge--hidden"),
html.Span(
id="trust-count-badge",
className="filter-btn__badge filter-btn__badge--hidden",
),
],
id="open-trust-modal",
className="filter-btn",
@@ -108,7 +43,10 @@ def make_filter_bar():
html.Button(
children=[
"Directorates",
html.Span(id="directorate-count-badge", className="filter-btn__badge filter-btn__badge--hidden"),
html.Span(
id="directorate-count-badge",
className="filter-btn__badge filter-btn__badge--hidden",
),
],
id="open-directorate-modal",
className="filter-btn",
dash_app/components/sub_header.py
+83
View File
@@ -0,0 +1,83 @@
"""Global filter sub-header — chart type toggle + date filter dropdowns.
Fixed bar below the main header, constant across both views.
"""
from dash import html, dcc
def make_sub_header():
"""Return the global filter sub-header bar."""
return html.Div(
className="sub-header",
children=[
# Chart type toggle
html.Div(
className="sub-header__group",
children=[
html.Span("View", className="sub-header__label"),
html.Div(
className="toggle-pills",
role="radiogroup",
**{"aria-label": "Chart view type"},
children=[
html.Button(
"By Directory",
id="chart-type-directory",
className="toggle-pill toggle-pill--active",
role="radio",
n_clicks=0,
**{"aria-checked": "true"},
),
html.Button(
"By Indication",
id="chart-type-indication",
className="toggle-pill",
role="radio",
n_clicks=0,
**{"aria-checked": "false"},
),
],
),
],
),
# Divider
html.Div(className="sub-header__divider"),
# Initiated filter
html.Div(
className="sub-header__group",
children=[
html.Span("Initiated", className="sub-header__label"),
dcc.Dropdown(
id="filter-initiated",
options=[
{"label": "All years", "value": "all"},
{"label": "Last 2 years", "value": "2yr"},
{"label": "Last 1 year", "value": "1yr"},
],
value="all",
clearable=False,
searchable=False,
className="filter-dropdown",
),
],
),
# Last seen filter
html.Div(
className="sub-header__group",
children=[
html.Span("Last seen", className="sub-header__label"),
dcc.Dropdown(
id="filter-last-seen",
options=[
{"label": "Last 6 months", "value": "6mo"},
{"label": "Last 12 months", "value": "12mo"},
],
value="6mo",
clearable=False,
searchable=False,
className="filter-dropdown",
),
],
),
],
)