From 2eb1e293c8cd180049cbc450dd89e658a61453ec Mon Sep 17 00:00:00 2001 From: Jakub Famulski 2 Date: Tue, 25 Aug 2026 16:03:13 +0200 Subject: [PATCH] ui: balance navigation and restore dark charts --- app.py | 3 +++ assets/app.css | 13 +++++++++++++ engin/charts.py | 33 ++++++++++++++++++++++++++------- tests/test_app_smoke.py | 5 +++++ tests/test_explainability.py | 4 ++++ 5 files changed, 51 insertions(+), 7 deletions(-) diff --git a/app.py b/app.py index 791fd65..5f974d3 100644 --- a/app.py +++ b/app.py @@ -183,6 +183,7 @@ def _render_engine_overview(analysis) -> None: engine_heatmap(analysis), width="stretch", key=f"heatmap_{analysis.engine_id}", + theme=None, config=PLOTLY_CONFIG, ) with right: @@ -239,6 +240,7 @@ def _render_cylinder_detail( f"spectrum_{analysis.engine_id}_" + "_".join(str(value) for value in comparison_cylinders) ), + theme=None, config=PLOTLY_CONFIG, ) @@ -247,6 +249,7 @@ def _render_cylinder_detail( deviation_chart(analysis, cylinder), width="stretch", key=f"deviation_{analysis.engine_id}_{cylinder}", + theme=None, config=PLOTLY_CONFIG, ) diff --git a/assets/app.css b/assets/app.css index 7d46ffc..9211067 100644 --- a/assets/app.css +++ b/assets/app.css @@ -23,6 +23,19 @@ [data-testid="stSidebar"] { background: #0b171d; border-right: 1px solid var(--line); } [data-testid="stMainBlockContainer"] { padding-top: 2.1rem; max-width: 1500px; } +/* Streamlit sizes segmented-control items from their labels. The main view + switch is intentionally a balanced two-column control. */ +[data-testid="stMainBlockContainer"] [data-testid="stButtonGroup"] [role="radiogroup"] { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; +} +[data-testid="stMainBlockContainer"] [data-testid="stButtonGroup"] [role="radiogroup"] > button { + width: 100% !important; + min-width: 0 !important; + justify-content: center !important; +} + .product-header { margin-bottom: 1.25rem; padding-bottom: 1.25rem; diff --git a/engin/charts.py b/engin/charts.py index e622306..da35912 100644 --- a/engin/charts.py +++ b/engin/charts.py @@ -7,7 +7,7 @@ from collections.abc import Sequence import numpy as np import plotly.graph_objects as go -from .config import FREQ_COLS, LABEL_COLORS, LABEL_DISPLAY, LABEL_ICONS +from .config import FREQ_COLS, LABEL_COLORS, LABEL_DISPLAY from .explainability import EngineAnalysis PLOT_BG = "#101820" @@ -26,22 +26,35 @@ def _base_layout( margin_bottom: int = 28, ) -> go.Figure: fig.update_layout( + template=None, height=height, margin=dict(l=24, r=24, t=margin_top, b=margin_bottom), paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor=PLOT_BG, font=dict(color=TEXT, family="Inter, system-ui, sans-serif"), - hoverlabel=dict(bgcolor="#16232c", font_color="#ffffff"), + legend=dict(bgcolor="rgba(0,0,0,0)", font=dict(color=TEXT)), + hoverlabel=dict( + bgcolor="#16232c", + bordercolor="#36505d", + font_color="#ffffff", + ), ) - fig.update_xaxes(gridcolor=GRID, zeroline=False) - fig.update_yaxes(gridcolor=GRID, zeroline=False) + axis_style = dict( + color=TEXT, + gridcolor=GRID, + linecolor=GRID, + tickfont=dict(color=TEXT), + title_font=dict(color=TEXT), + zeroline=False, + ) + fig.update_xaxes(**axis_style) + fig.update_yaxes(**axis_style) return fig def engine_heatmap(analysis: EngineAnalysis) -> go.Figure: row_labels = [ - f"{LABEL_ICONS[str(row.label)]} C{int(row.cylinder):02d} · " - f"{LABEL_DISPLAY[str(row.label)]}" + f"C{int(row.cylinder):02d} · {LABEL_DISPLAY[str(row.label)]}" for row in analysis.diagnostics.itertuples() ] fig = go.Figure( @@ -57,7 +70,13 @@ def engine_heatmap(analysis: EngineAnalysis) -> go.Figure: [0.5, "#13222b"], [1.0, "#ff6b57"], ], - colorbar=dict(title="Δ mV", thickness=12), + colorbar=dict( + title=dict(text="Δ mV", font=dict(color=TEXT)), + tickfont=dict(color=TEXT), + bgcolor="rgba(0,0,0,0)", + borderwidth=0, + thickness=12, + ), hovertemplate="%{y}
%{x} kHz
Odchylenie %{z:.1f} mV", ) ) diff --git a/tests/test_app_smoke.py b/tests/test_app_smoke.py index 5f814fe..6e16e95 100644 --- a/tests/test_app_smoke.py +++ b/tests/test_app_smoke.py @@ -19,6 +19,11 @@ class StreamlitSmokeTests(unittest.TestCase): app.segmented_control[0].options, ["Przegląd", "Szczegóły cylindra"], ) + stylesheet = (ROOT / "assets" / "app.css").read_text(encoding="utf-8") + self.assertIn( + "grid-template-columns: repeat(2, minmax(0, 1fr))", + stylesheet, + ) self.assertFalse(any("C01" in button.label for button in app.button)) self.assertFalse( any(selector.label == "Cylinder do analizy" for selector in app.selectbox) diff --git a/tests/test_explainability.py b/tests/test_explainability.py index 5f68568..7c7e7bd 100644 --- a/tests/test_explainability.py +++ b/tests/test_explainability.py @@ -70,6 +70,10 @@ class ExplainabilityTests(unittest.TestCase): self.assertEqual(heatmap.data[0].zmax, 20.0) self.assertTrue(any("Sprawny" in label for label in heatmap.data[0].y)) self.assertTrue(any("·" in label for label in heatmap.data[0].y)) + self.assertTrue(all(label.startswith("C") for label in heatmap.data[0].y)) + self.assertEqual(heatmap.layout.plot_bgcolor, "#101820") + self.assertEqual(heatmap.data[0].colorbar.bgcolor, "rgba(0,0,0,0)") + self.assertEqual(heatmap.data[0].colorbar.tickfont.color, "#dce8ee") self.assertEqual(len(cylinder_spectrum(self.analysis, cylinder).data), 2) self.assertEqual( len(cylinder_spectrum(self.analysis, cylinder, compared).data),