Skip to content

Fix sidebar parameter action alignment and PDF report print rendering Issue#38 #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EddW1219 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix sidebar parameter action alignment and PDF report print rendering Issue#38 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
156324b
Fix Reset/Save parameter button alignment
EddW1219 May 4, 2026
6a8fff2
Fix PDF print layout: button alignment, chart spacing, formula rendering
EddW1219 May 15, 2026
9fd1671
Replace invalid button width arg with use_container_width
EddW1219 May 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 130 additions & 14 deletions src/epicc/__main__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,114 @@
load_styles()
initialize_state()

# Normalize action-row button alignment (button vs popover trigger)
st.markdown(
"""
<style>
/* Action row wrapper */
.st-key-param-actions-row [data-testid="stHorizontalBlock"] {
align-items: flex-start !important;
}

/* Normalize column internal spacing */
.st-key-param-actions-row [data-testid="column"] > div {
padding-top: 0 !important;
}
.st-key-param-actions-row [data-testid="stElementContainer"] {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

/* Make trigger controls fill width and remove extra top offset */
.st-key-param-actions-row [data-testid="stButton"],
.st-key-param-actions-row [data-testid="stPopover"] {
width: 100%;
margin-top: 0 !important;
padding-top: 0 !important;
}
.st-key-param-actions-row [data-testid="stButton"] > button,
.st-key-param-actions-row [data-testid="stPopover"] > button {
width: 100%;
}

/* Report spacing: keep headings away from charts */
.st-key-results-report [data-testid="stPlotlyChart"],
.st-key-results-report [data-testid="stVegaLiteChart"],
.st-key-results-report [data-testid="stPyplot"] {
margin-bottom: 2rem !important;
}

.st-key-results-report [data-testid="stMarkdownContainer"] h1,
.st-key-results-report [data-testid="stMarkdownContainer"] h2,
.st-key-results-report [data-testid="stMarkdownContainer"] h3 {
margin-top: 1.25rem !important;
}

/* -------- Print/PDF display fixes only (SINGLE CONSOLIDATED BLOCK) -------- */
@media print {
/* Scope strictly to report area */
.st-key-results-report {
overflow: visible !important;
}

/* 1) Keep chart block in flow + reserve vertical space below chart */
.st-key-results-report [data-testid="stPlotlyChart"],
.st-key-results-report [data-testid="stVegaLiteChart"],
.st-key-results-report [data-testid="stPyplot"] {
display: block !important;
position: static !important;
clear: both !important;
overflow: visible !important;
break-inside: avoid !important;
page-break-inside: avoid !important;
margin: 0 0 2.8rem 0 !important;
padding-bottom: 1.2rem !important;
}

/* Prevent Plotly print-height collapse */
.st-key-results-report [data-testid="stPlotlyChart"] .js-plotly-plot {
min-height: 520px !important;
}

/* 2) Ensure headings/text start after chart and have breathing room */
.st-key-results-report h1,
.st-key-results-report h2,
.st-key-results-report h3,
.st-key-results-report h4,
.st-key-results-report p,
.st-key-results-report [data-testid="stMarkdownContainer"] {
clear: both !important;
position: static !important;
z-index: auto !important;
margin-top: 1.5rem !important;
}

.st-key-results-report [data-testid="stMarkdownContainer"] h1,
.st-key-results-report [data-testid="stMarkdownContainer"] h2,
.st-key-results-report [data-testid="stMarkdownContainer"] h3 {
margin-top: 1.5rem !important;
clear: both !important;
}

/* 3) Formula print fix: show only visual layer, hide assistive MathML */
.st-key-results-report .katex,
.st-key-results-report .katex-display,
.st-key-results-report mjx-container,
.st-key-results-report .MathJax {
visibility: visible !important;
opacity: 1 !important;
}

.st-key-results-report .katex .katex-mathml,
.st-key-results-report mjx-assistive-mml {
display: none !important;
}
}
</style>
""",
unsafe_allow_html=True,
)
Comment on lines +35 to +140

all_models = get_all_models()
model_registry: dict[str, BaseSimulationModel] = {m.human_name(): m for m in all_models}

Expand Down Expand Up @@ -107,29 +215,30 @@
render_validation_error(selected_label, exc, container=param_col)
has_input_errors = True

# Reset and Save Parameters buttons side by side
button_col1, button_col2 = st.columns(2)

# Reset Parameters button
def _handle_reset() -> None:
model_label = cast(str, selected_label) # Safe because we checked above
reset_parameters_to_defaults(
model_defaults_flat, params, model_label, param_specs=active_model.parameter_specs
)
# Reset scenarios back to model defaults
default_scenarios = active_model.default_scenarios
if default_scenarios:
reset_scenario_state(
model_label,
default_scenarios,
active_model.scenario_parameter_specs or {},
)

with button_col1:
st.button("Reset Parameters", on_click=_handle_reset, width='stretch')

# Save Parameters button (only enabled when parameters are valid)
with button_col2:

# Force both controls into the same keyed row for CSS alignment
with st.container(key="param-actions-row"):
button_col1, button_col2 = st.columns(2, gap="small", vertical_alignment="top")

button_col1.button(
"Reset Parameters",
on_click=_handle_reset,
use_container_width=True,
)

if typed_params is not None:
render_parameter_export_modal(
active_model.human_name(),
Expand All @@ -138,11 +247,19 @@ def _handle_reset() -> None:
container=button_col2,
)
else:
st.button("Save Parameters", disabled=True, width='stretch', help="Fix parameter errors first")
button_col2.button(
"Save Parameters",
disabled=True,
use_container_width=True,
help="Fix parameter errors first",
)
Comment on lines +250 to +255

st.divider()
run_clicked = st.button(
"Run Simulation", disabled=has_input_errors, width='stretch', type='primary'
"Run Simulation",
disabled=has_input_errors,
use_container_width=True,
type="primary",
)

with result_col:
Expand Down Expand Up @@ -170,5 +287,4 @@ def _handle_reset() -> None:
renderer.render(None, hint=_HINT)

st.divider()
render_pdf_export_button(container=result_col)

render_pdf_export_button(container=result_col)
6 changes: 5 additions & 1 deletion src/epicc/model/models/tb_isolation.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,10 +327,14 @@ report:
direct isolation costs, lost productivity, and the long-term costs of secondary TB
infections.

<div style="text-align: center;">

$$
\LaTeX \text{ test.}
\text{LaTeX test.}
$$

</div>
Comment on lines +330 to +336

## Scenarios
- **14-day Isolation**: Standard isolation protocol for infectious TB patients
- **5-day Isolation**: Shortened isolation protocol (increases secondary transmission risk)
Expand Down
Loading