ui: balance navigation and restore dark charts

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,
     )
 

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;

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)
+    axis_style = dict(
-    fig.update_yaxes(gridcolor=GRID, zeroline=False)
+        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"C{int(row.cylinder):02d} · {LABEL_DISPLAY[str(row.label)]}"
-        f"{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}<br>%{x} kHz<br>Odchylenie %{z:.1f} mV<extra></extra>",
         )
     )

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)

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),