Refactor sidebar layout for improved organization and styling. Grouped model selection, conditions, and force scale into distinct containers. Updated CSS for sidebar panels to enhance visual consistency and usability.

S2FApp/app.py

@@ -222,59 +222,61 @@ with st.sidebar:
     </div>
     """, unsafe_allow_html=True)
 
-    model_type = st.radio(
-        "Model type",
-        ["single_cell", "spheroid"],
-        format_func=lambda x: MODEL_TYPE_LABELS[x],
-        horizontal=False,
-        help="Single cell: substrate-aware force prediction. Spheroid: spheroid force maps.",
-    )
+    with st.container(border=False, key="s2f_grp_model"):
+        model_type = st.radio(
+            "Model type",
+            ["single_cell", "spheroid"],
+            format_func=lambda x: MODEL_TYPE_LABELS[x],
+            horizontal=False,
+            help="Single cell: substrate-aware force prediction. Spheroid: spheroid force maps.",
+        )
 
-    ckp_folder = get_ckp_folder(ckp_base, model_type)
-    ckp_files = list_files_in_folder(ckp_folder, ".pth")
-    ckp_subfolder_name = model_subfolder(model_type)
+        ckp_folder = get_ckp_folder(ckp_base, model_type)
+        ckp_files = list_files_in_folder(ckp_folder, ".pth")
+        ckp_subfolder_name = model_subfolder(model_type)
 
-    if ckp_files:
-        checkpoint = st.selectbox(
-            "Checkpoint",
-            ckp_files,
-            key=f"checkpoint_{model_type}",
-            help=f"Select a .pth file from ckp/{ckp_subfolder_name}/",
-        )
-    else:
-        st.warning(f"No .pth files in ckp/{ckp_subfolder_name}/. Add checkpoints to load.")
-        checkpoint = None
+        if ckp_files:
+            checkpoint = st.selectbox(
+                "Checkpoint",
+                ckp_files,
+                key=f"checkpoint_{model_type}",
+                help=f"Select a .pth file from ckp/{ckp_subfolder_name}/",
+            )
+        else:
+            st.warning(f"No .pth files in ckp/{ckp_subfolder_name}/. Add checkpoints to load.")
+            checkpoint = None
 
     substrate_config = None
     substrate_val = DEFAULT_SUBSTRATE
     use_manual = True
     if model_type == "single_cell":
         try:
-            st.markdown('<p style="font-size: 0.95rem; font-weight: 500; margin-bottom: 0.5rem;">Conditions</p>', unsafe_allow_html=True)
-            conditions_source = st.radio(
-                "Conditions",
-                ["From config", "Manually"],
-                horizontal=True,
-                label_visibility="collapsed",
-            )
-            from_config = conditions_source == "From config"
-            if from_config:
-                substrate_config = None
-                substrates = list_substrates()
-                substrate_val = st.selectbox(
-                    "Conditions (from config)",
-                    substrates,
-                    help="Select a preset from config/substrate_settings.json",
+            with st.container(border=False, key="s2f_grp_conditions"):
+                st.markdown('<p style="font-size: 0.95rem; font-weight: 500; margin-bottom: 0.5rem;">Conditions</p>', unsafe_allow_html=True)
+                conditions_source = st.radio(
+                    "Conditions",
+                    ["From config", "Manually"],
+                    horizontal=True,
                     label_visibility="collapsed",
                 )
-                use_manual = False
-            else:
-                manual_pixelsize = st.number_input("Pixel size (µm/px)", min_value=0.1, max_value=50.0,
-                                                   value=3.0769, step=0.1, format="%.4f")
-                manual_young = st.number_input("Pascals", min_value=100.0, max_value=100000.0,
-                                               value=6000.0, step=100.0, format="%.0f")
-                substrate_config = {"pixelsize": manual_pixelsize, "young": manual_young}
-                use_manual = True
+                from_config = conditions_source == "From config"
+                if from_config:
+                    substrate_config = None
+                    substrates = list_substrates()
+                    substrate_val = st.selectbox(
+                        "Conditions (from config)",
+                        substrates,
+                        help="Select a preset from config/substrate_settings.json",
+                        label_visibility="collapsed",
+                    )
+                    use_manual = False
+                else:
+                    manual_pixelsize = st.number_input("Pixel size (µm/px)", min_value=0.1, max_value=50.0,
+                                                       value=3.0769, step=0.1, format="%.4f")
+                    manual_young = st.number_input("Pascals", min_value=100.0, max_value=100000.0,
+                                                   value=6000.0, step=100.0, format="%.0f")
+                    substrate_config = {"pixelsize": manual_pixelsize, "young": manual_young}
+                    use_manual = True
         except FileNotFoundError:
             st.error("config/substrate_settings.json not found")
 
@@ -290,47 +292,48 @@ with st.sidebar:
         help="When on: estimate cell region from force map and use it for metrics (red contour). When off: use entire map.",
     )
 
-    force_scale_mode = st.radio(
-        "Force scale",
-        ["Default", "Range"],
-        horizontal=True,
-        key="s2f_force_scale",
-        help="Default: display forces on the full 0–1 scale. Range: set a sub-range; values outside are zeroed and the rest is stretched to the colormap.",
-    )
-    if force_scale_mode == "Default":
-        clip_min, clip_max = 0.0, 1.0
-        display_mode = "Default"
-        clamp_only = True
-    else:
-        mn_col, mx_col = st.columns(2)
-        with mn_col:
-            clip_min = st.number_input(
-                "Min",
-                min_value=0.0,
-                max_value=1.0,
-                value=0.0,
-                step=0.01,
-                format="%.2f",
-                key="s2f_clip_min",
-                help="Lower bound of the display range (0–1).",
-            )
-        with mx_col:
-            clip_max = st.number_input(
-                "Max",
-                min_value=0.0,
-                max_value=1.0,
-                value=1.0,
-                step=0.01,
-                format="%.2f",
-                key="s2f_clip_max",
-                help="Upper bound of the display range (0–1).",
-            )
-        if clip_min >= clip_max:
-            st.warning("Min must be less than max. Using 0.00–1.00 for display.")
+    with st.container(border=False, key="s2f_grp_force"):
+        force_scale_mode = st.radio(
+            "Force scale",
+            ["Default", "Range"],
+            horizontal=True,
+            key="s2f_force_scale",
+            help="Default: display forces on the full 0–1 scale. Range: set a sub-range; values outside are zeroed and the rest is stretched to the colormap.",
+        )
+        if force_scale_mode == "Default":
             clip_min, clip_max = 0.0, 1.0
-        display_mode = "Range"
-        clamp_only = False
-    min_percentile, max_percentile = 0, 100
+            display_mode = "Default"
+            clamp_only = True
+        else:
+            mn_col, mx_col = st.columns(2)
+            with mn_col:
+                clip_min = st.number_input(
+                    "Min",
+                    min_value=0.0,
+                    max_value=1.0,
+                    value=0.0,
+                    step=0.01,
+                    format="%.2f",
+                    key="s2f_clip_min",
+                    help="Lower bound of the display range (0–1).",
+                )
+            with mx_col:
+                clip_max = st.number_input(
+                    "Max",
+                    min_value=0.0,
+                    max_value=1.0,
+                    value=1.0,
+                    step=0.01,
+                    format="%.2f",
+                    key="s2f_clip_max",
+                    help="Upper bound of the display range (0–1).",
+                )
+            if clip_min >= clip_max:
+                st.warning("Min must be less than max. Using 0.00–1.00 for display.")
+                clip_min, clip_max = 0.0, 1.0
+            display_mode = "Range"
+            clamp_only = False
+        min_percentile, max_percentile = 0, 100
 
     cm_col_lbl, cm_col_sb = st.columns([1, 2])
     with cm_col_lbl:

S2FApp/static/s2f_styles.css

@@ -6,6 +6,11 @@
     --s2f-primary-rgb: 13, 148, 136;
     /* Space for Streamlit’s fixed top toolbar (Deploy / menu). Set when header exists (see below). */
     --s2f-streamlit-header-offset: 0px;
+    /* Sidebar grouped blocks: faint surface, no heavy chrome */
+    --s2f-sidebar-panel-bg: rgba(255, 255, 255, 0.42);
+    --s2f-sidebar-panel-border: rgba(203, 213, 225, 0.34);
+    /* Match Streamlit’s sidebar horizontal padding so panels can full-bleed the track */
+    --s2f-sidebar-inline-inset: 1rem;
 }
 /* Streamlit renders a fixed header; without this offset, the sidebar and first main block sit underneath it. */
 .stApp:has(header[data-testid="stHeader"]) {
@@ -185,9 +190,8 @@ section[data-testid="stSidebar"] [data-testid="stWidgetLabel"] p {
     display: flex;
     align-items: center;
     gap: 10px;
-    padding-bottom: 0.8rem;
-    margin-bottom: 0.5rem;
-    border-bottom: 1px solid #e2e8f0;
+    padding-bottom: 0.65rem;
+    margin-bottom: 0.35rem;
 }
 .sidebar-brand .brand-icon {
     font-size: 1.6rem;
@@ -200,6 +204,36 @@ section[data-testid="stSidebar"] [data-testid="stWidgetLabel"] p {
     letter-spacing: -0.01em;
 }
 
+/*
+ * Sidebar panels (model+ckp, conditions, force scale): horizontal bands — faded fill
+ * with top/bottom dividers; stretch edge-to-edge in the sidebar (bleed past content padding).
+ */
+section[data-testid="stSidebar"] .st-key-s2f_grp_model,
+section[data-testid="stSidebar"] .st-key-s2f_grp_conditions,
+section[data-testid="stSidebar"] .st-key-s2f_grp_force {
+    box-sizing: border-box !important;
+    margin-left: calc(-1 * var(--s2f-sidebar-inline-inset)) !important;
+    margin-right: calc(-1 * var(--s2f-sidebar-inline-inset)) !important;
+    margin-bottom: 0.45rem !important;
+    width: calc(100% + 2 * var(--s2f-sidebar-inline-inset)) !important;
+    max-width: none !important;
+    padding: 0.58rem var(--s2f-sidebar-inline-inset) 0.62rem !important;
+    border-radius: 0 !important;
+    background: var(--s2f-sidebar-panel-bg) !important;
+    border: none !important;
+    border-top: 1px solid var(--s2f-sidebar-panel-border) !important;
+    border-bottom: 1px solid var(--s2f-sidebar-panel-border) !important;
+    box-shadow: none !important;
+}
+/* Inner layout flex — no inner frame */
+section[data-testid="stSidebar"] .st-key-s2f_grp_model > div,
+section[data-testid="stSidebar"] .st-key-s2f_grp_conditions > div,
+section[data-testid="stSidebar"] .st-key-s2f_grp_force > div {
+    border: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+}
+
 /* === Metric cards === */
 [data-testid="stMetric"] {
     background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);

S2FApp/ui/result_display.py

@@ -116,14 +116,7 @@ def render_batch_results(batch_results, colormap_name="Jet", display_mode="Defau
                 )
                 with rem_hm_cols[i % min(5, len(remaining_results))]:
                     st.image(hm_rgb, caption=r["key_img"], use_container_width=True)
-    render_horizontal_colorbar(
-        colormap_name, clip_min, clip_max, is_rescale_b,
-        caption=(
-            "Ticks = force values in your selected [min, max] range; the strip uses the full colormap for the rescaled image (low → high)."
-            if is_rescale_b
-            else None
-        ),
-    )
+    render_horizontal_colorbar(colormap_name, clip_min, clip_max, is_rescale_b)
     # Table
     st.dataframe(
         {h: [r[i] for r in rows] for i, h in enumerate(headers)},