updated

.streamlit/config.toml

@@ -2,6 +2,10 @@
 # Required for file uploads on Hugging Face Spaces (iframe blocks XSRF cookies)
 enableXsrfProtection = false
 
+# Optional: slimmer top bar (Streamlit ≥1.29). Uncomment if the header still clips custom UI:
+# [client]
+# toolbarMode = "minimal"
+
 [theme]
 primaryColor = "#0d9488"
 backgroundColor = "#ffffff"

Dockerfile

@@ -16,6 +16,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
 COPY requirements.txt requirements-docker.txt ./
 
 # Install Python dependencies - CPU-only PyTorch to fit Space memory limits (avoids OOM)
+# (psutil removed from requirements-docker.txt — optional CPU/RAM widget not used in app)
 # PyTorch 2.2 + torchvision 0.17 (CPU) - match requirements.txt torch>=2.0
 # Install numpy first with compatible version (<2) so torch.from_numpy works
 RUN pip install --no-cache-dir "numpy>=1.20.0,<2.0" && \

app.py

@@ -25,7 +25,6 @@ from config.constants import (
     MODEL_TYPE_LABELS,
     SAMPLE_EXTENSIONS,
     SAMPLE_THUMBNAIL_LIMIT,
-    THEMES,
 )
 from utils.paths import get_ckp_base, get_ckp_folder, get_sample_folder, list_files_in_folder, model_subfolder
 from utils.segmentation import estimate_cell_mask
@@ -37,7 +36,6 @@ from ui.components import (
     render_batch_results,
     render_result_display,
     render_region_canvas,
-    render_system_status,
     ST_DIALOG,
     HAS_DRAWABLE_CANVAS,
 )
@@ -47,6 +45,20 @@ CITATION = (
     "<b>\"Shape-to-force (S2F): Predicting Cell Traction Forces from LabelFree Imaging\"</b>, 2026."
 )
 
+
+def _inference_cache_condition_key(model_type, use_manual, substrate_val, substrate_config):
+    """Hashable key for substrate / manual conditions so cache invalidates when single-cell inputs change."""
+    if model_type != "single_cell":
+        return None
+    if use_manual and substrate_config is not None:
+        return (
+            "manual",
+            round(float(substrate_config["pixelsize"]), 6),
+            round(float(substrate_config["young"]), 2),
+        )
+    return ("preset", str(substrate_val))
+
+
 # Measure tool dialog: defined early so it exists before render_result_display uses it
 if HAS_DRAWABLE_CANVAS and ST_DIALOG:
     @ST_DIALOG("Measure tool", width="medium")
@@ -56,13 +68,16 @@ if HAS_DRAWABLE_CANVAS and ST_DIALOG:
             st.warning("No prediction available to measure.")
             return
         display_mode = st.session_state.get("measure_display_mode", "Default")
+        _m_clamp = st.session_state.get(
+            "measure_clamp_only", st.session_state.get("measure_clip_bounds", False)
+        )
         display_heatmap = apply_display_scale(
             raw_heatmap, display_mode,
             min_percentile=st.session_state.get("measure_min_percentile", 0),
             max_percentile=st.session_state.get("measure_max_percentile", 100),
             clip_min=st.session_state.get("measure_clip_min", 0),
             clip_max=st.session_state.get("measure_clip_max", 1),
-            clip_bounds=st.session_state.get("measure_clip_bounds", False),
+            clamp_only=_m_clamp,
         )
         bf_img = st.session_state.get("measure_bf_img")
         original_vals = st.session_state.get("measure_original_vals")
@@ -88,7 +103,7 @@ def _get_measure_dialog_fn():
 def _populate_measure_session_state(heatmap, img, pixel_sum, force, key_img, colormap_name,
                                     display_mode, auto_cell_boundary, cell_mask=None,
                                     min_percentile=0, max_percentile=100, clip_min=0, clip_max=1,
-                                    clip_bounds=False):
+                                    clamp_only=False):
     """Populate session state for the measure tool. If cell_mask is None and auto_cell_boundary, computes it."""
     if cell_mask is None and auto_cell_boundary:
         cell_mask = estimate_cell_mask(heatmap)
@@ -98,7 +113,7 @@ def _populate_measure_session_state(heatmap, img, pixel_sum, force, key_img, col
     st.session_state["measure_max_percentile"] = max_percentile
     st.session_state["measure_clip_min"] = clip_min
     st.session_state["measure_clip_max"] = clip_max
-    st.session_state["measure_clip_bounds"] = clip_bounds
+    st.session_state["measure_clamp_only"] = clamp_only
     st.session_state["measure_bf_img"] = img.copy()
     st.session_state["measure_input_filename"] = key_img or "image"
     st.session_state["measure_original_vals"] = build_original_vals(heatmap, pixel_sum, force)
@@ -110,7 +125,10 @@ def _populate_measure_session_state(heatmap, img, pixel_sum, force, key_img, col
 
 st.set_page_config(page_title="Shape2Force (S2F)", page_icon="🦠", layout="wide")
 
-st.markdown('<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">', unsafe_allow_html=True)
+st.markdown(
+    '<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">',
+    unsafe_allow_html=True,
+)
 
 _css_path = os.path.join(S2F_ROOT, "static", "s2f_styles.css")
 if os.path.exists(_css_path):
@@ -276,23 +294,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.",
     )
 
-    clip_min, clip_max = st.slider(
-        "Force Range",
-        min_value=0.0,
-        max_value=1.0,
-        value=(0.0, 1.0),
-        step=0.01,
-        format="%.2f",
-        help="Min–max range for force values. Values outside are set to 0; inside are rescaled so max shows as red.",
+    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 clip_min >= clip_max:
+    if force_scale_mode == "Default":
         clip_min, clip_max = 0.0, 1.0
-    display_mode = "Range" if (clip_min != 0.0 or clip_max != 1.0) else "Default"
-    clip_bounds = False if display_mode == "Range" else True
+        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
 
-    st.markdown('<div class="sidebar-section"><span class="section-title">Display</span></div>', unsafe_allow_html=True)
-
     cm_col_lbl, cm_col_sb = st.columns([1, 2])
     with cm_col_lbl:
         st.markdown('<p class="selectbox-label">Colormap</p>', unsafe_allow_html=True)
@@ -305,35 +348,6 @@ with st.sidebar:
             help="Color scheme for the force map. Viridis is often preferred for accessibility.",
         )
 
-    th_col_lbl, th_col_sb = st.columns([1, 2])
-    with th_col_lbl:
-        st.markdown('<p class="selectbox-label">Theme</p>', unsafe_allow_html=True)
-    with th_col_sb:
-        theme_name = st.selectbox(
-            "Theme",
-            list(THEMES.keys()),
-            index=0,
-            key="s2f_theme",
-            label_visibility="collapsed",
-            help="App accent color theme.",
-        )
-
-
-# Inject theme CSS (main area so it applies globally)
-primary, primary_dark, primary_darker, primary_rgb = THEMES[theme_name]
-st.markdown(
-    f"""
-    <style>
-    :root {{
-        --s2f-primary: {primary};
-        --s2f-primary-dark: {primary_dark};
-        --s2f-primary-darker: {primary_darker};
-        --s2f-primary-rgb: {primary_rgb};
-    }}
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
 
 # Main area: image input
 img_source = st.radio("Image source", ["Upload", "Example"], horizontal=True, label_visibility="collapsed", key="s2f_img_source")
@@ -405,7 +419,8 @@ if not batch_mode:
 
 # Single-image keys (for non-batch)
 key_img = (uploaded.name if uploaded else None) if img_source == "Upload" else selected_sample
-current_key = (model_type, checkpoint, key_img)
+_cond_key = _inference_cache_condition_key(model_type, use_manual, substrate_val, substrate_config)
+current_key = (model_type, checkpoint, key_img, _cond_key)
 cached = st.session_state["prediction_result"]
 has_cached = cached is not None and cached.get("cache_key") == current_key and not batch_mode
 just_ran = run and checkpoint and has_image and not batch_mode
@@ -424,8 +439,9 @@ def _load_predictor(model_type, checkpoint, ckp_folder):
 
 
 def _prepare_and_render_cached_result(r, key_img, colormap_name, display_mode, auto_cell_boundary,
-                                     min_percentile, max_percentile, clip_min, clip_max, clip_bounds,
-                                     download_key_suffix="", check_measure_dialog=False):
+                                     min_percentile, max_percentile, clip_min, clip_max, clamp_only,
+                                     download_key_suffix="", check_measure_dialog=False,
+                                     show_success=False):
     """Prepare display from cached result and render. Used by both just_ran and has_cached paths."""
     img, heatmap, force, pixel_sum = r["img"], r["heatmap"], r["force"], r["pixel_sum"]
     display_heatmap = apply_display_scale(
@@ -434,18 +450,19 @@ def _prepare_and_render_cached_result(r, key_img, colormap_name, display_mode, a
         max_percentile=max_percentile,
         clip_min=clip_min,
         clip_max=clip_max,
-        clip_bounds=clip_bounds,
+        clamp_only=clamp_only,
     )
     cell_mask = estimate_cell_mask(heatmap) if auto_cell_boundary else None
     _populate_measure_session_state(
         heatmap, img, pixel_sum, force, key_img, colormap_name,
         display_mode, auto_cell_boundary, cell_mask=cell_mask,
         min_percentile=min_percentile, max_percentile=max_percentile,
-        clip_min=clip_min, clip_max=clip_max, clip_bounds=clip_bounds,
+        clip_min=clip_min, clip_max=clip_max, clamp_only=clamp_only,
     )
     if check_measure_dialog and st.session_state.pop("open_measure_dialog", False):
         measure_region_dialog()
-    st.success("Prediction complete!")
+    if show_success:
+        st.success("Prediction complete!")
     render_result_display(
         img, heatmap, display_heatmap, pixel_sum, force, key_img,
         download_key_suffix=download_key_suffix,
@@ -454,7 +471,7 @@ def _prepare_and_render_cached_result(r, key_img, colormap_name, display_mode, a
         measure_region_dialog=_get_measure_dialog_fn(),
         auto_cell_boundary=auto_cell_boundary,
         cell_mask=cell_mask,
-        clip_min=clip_min, clip_max=clip_max, clip_bounds=clip_bounds,
+        clip_min=clip_min, clip_max=clip_max, clamp_only=clamp_only,
     )
 
 
@@ -502,7 +519,7 @@ if just_ran_batch:
                 clip_min=clip_min,
                 clip_max=clip_max,
                 auto_cell_boundary=auto_cell_boundary,
-                clip_bounds=clip_bounds,
+                clamp_only=clamp_only,
             )
         except Exception as e:
             if progress_bar is not None:
@@ -511,7 +528,6 @@ if just_ran_batch:
             st.code(traceback.format_exc())
 
 elif batch_mode and st.session_state.get("batch_results"):
-    st.success("Prediction complete!")
     render_batch_results(
         st.session_state["batch_results"],
         colormap_name=colormap_name,
@@ -521,7 +537,7 @@ elif batch_mode and st.session_state.get("batch_results"):
         clip_min=clip_min,
         clip_max=clip_max,
         auto_cell_boundary=auto_cell_boundary,
-        clip_bounds=clip_bounds,
+        clamp_only=clamp_only,
     )
 
 elif just_ran:
@@ -535,7 +551,7 @@ elif just_ran:
                 substrate=sub_val,
                 substrate_config=substrate_config if model_type == "single_cell" else None,
             )
-            cache_key = (model_type, checkpoint, key_img)
+            cache_key = (model_type, checkpoint, key_img, _cond_key)
             r = {
                 "img": img.copy(),
                 "heatmap": heatmap.copy(),
@@ -546,8 +562,9 @@ elif just_ran:
             st.session_state["prediction_result"] = r
             _prepare_and_render_cached_result(
                 r, key_img, colormap_name, display_mode, auto_cell_boundary,
-                min_percentile, max_percentile, clip_min, clip_max, clip_bounds,
+                min_percentile, max_percentile, clip_min, clip_max, clamp_only,
                 download_key_suffix="", check_measure_dialog=False,
+                show_success=True,
             )
         except Exception as e:
             st.error(f"Prediction failed: {e}")
@@ -557,8 +574,9 @@ elif has_cached:
     r = st.session_state["prediction_result"]
     _prepare_and_render_cached_result(
         r, key_img, colormap_name, display_mode, auto_cell_boundary,
-        min_percentile, max_percentile, clip_min, clip_max, clip_bounds,
+        min_percentile, max_percentile, clip_min, clip_max, clamp_only,
         download_key_suffix="_cached", check_measure_dialog=True,
+        show_success=False,
     )
 
 elif run and not checkpoint:
@@ -568,9 +586,6 @@ elif run and not has_image and not has_batch:
 elif run and batch_mode and not has_batch:
     st.warning(f"Please upload or select 1–{BATCH_MAX_IMAGES} images for batch processing.")
 
-st.sidebar.markdown('<div class="sidebar-section"><span class="section-title"></span></div>', unsafe_allow_html=True)
-render_system_status()
-
 st.markdown(f"""
 <div class="footer-citation">
     <span>If you find this software useful, please cite: {CITATION}</span>

config/constants.py

@@ -27,16 +27,6 @@ TOOL_LABELS = {"polygon": "Polygon", "rect": "Rectangle", "circle": "Circle"}
 # File extensions
 SAMPLE_EXTENSIONS = (".tif", ".tiff", ".png", ".jpg", ".jpeg")
 
-# UI themes: primary, primary-dark, primary-darker, rgb (for rgba)
-THEMES = {
-    "Teal": ("#0d9488", "#0f766e", "#115e59", "13, 148, 136"),
-    "Blue": ("#2563eb", "#1d4ed8", "#1e40af", "37, 99, 235"),
-    "Indigo": ("#6366f1", "#4f46e5", "#4338ca", "99, 102, 241"),
-    "Purple": ("#7c3aed", "#6d28d9", "#5b21b6", "124, 58, 237"),
-    "Amber": ("#f59e0b", "#d97706", "#b45309", "245, 158, 11"),
-    "Emerald": ("#10b981", "#059669", "#047857", "16, 185, 129"),
-}
-
 # Colormaps (OpenCV)
 COLORMAPS = {
     "Jet": cv2.COLORMAP_JET,

requirements-docker.txt

@@ -11,4 +11,3 @@ Pillow>=9.0.0
 plotly>=5.14.0
 huggingface_hub>=0.20.0
 reportlab>=4.0.0
-psutil>=5.9.0

requirements.txt

@@ -12,4 +12,3 @@ Pillow>=9.0.0
 plotly>=5.14.0
 huggingface_hub>=0.20.0
 reportlab>=4.0.0
-psutil>=5.9.0

static/s2f_styles.css

@@ -1,9 +1,15 @@
-/* === Theme variables (overridden by theme selector) === */
+/* === Accent variables (fixed teal; used by buttons, sidebar focus, etc.) === */
 :root {
     --s2f-primary: #0d9488;
     --s2f-primary-dark: #0f766e;
     --s2f-primary-darker: #115e59;
     --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;
+}
+/* Streamlit renders a fixed header; without this offset, the sidebar and first main block sit underneath it. */
+.stApp:has(header[data-testid="stHeader"]) {
+    --s2f-streamlit-header-offset: 2rem;
 }
 
 /* === Typography === */
@@ -11,19 +17,44 @@ html, body, .stApp {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
 }
 
-/* === Scroll lock for embedded (HF Spaces iframe): prevent parent scroll, main content scrolls internally === */
+/*
+ * Scroll layout (local app + HF iframe):
+ * - Lock document scroll so only one vertical scrollbar exists inside the app (avoids double scrollbars
+ *   when the Space is embedded and the iframe has a fixed height).
+ * - The main column is the scroll container; the sidebar stays fixed beside it while main content scrolls.
+ * - Requires matching --s2f-streamlit-header-offset so fixed sidebar/top padding clear Streamlit’s toolbar.
+ * - HF/embed: wheel/touch at scroll boundaries can chain to the parent page (whole iframe moves, fixed
+ *   sidebar looks like it scrolls away). overscroll-behavior + a strict #root chain reduces that.
+ */
 html, body {
     height: 100% !important;
     overflow: hidden !important;
     margin: 0 !important;
+    overscroll-behavior-y: contain !important;
+}
+/* React mount: must participate in height % chain or body can grow and steal scroll from inner regions */
+#root {
+    height: 100% !important;
+    max-height: 100% !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+    overscroll-behavior-y: contain !important;
 }
 .stApp {
+    /* Prefer small-dynamic viewport in iframes (mobile URL bar); fall back to % + vh */
+    height: 100% !important;
     height: 100vh !important;
+    height: 100dvh !important;
+    height: 100svh !important;
+    max-height: 100vh !important;
+    max-height: 100dvh !important;
+    max-height: 100svh !important;
     overflow: hidden !important;
+    overscroll-behavior-y: contain !important;
     display: flex !important;
     flex-direction: column !important;
 }
-/* Flex wrapper for sidebar + main */
+/* Flex row: sidebar + main (first flex child of .stApp that wraps the app shell; header may be a sibling above this) */
 .stApp > div {
     display: flex !important;
     flex: 1 !important;
@@ -119,13 +150,16 @@ section[data-testid="stSidebar"] {
 /* === Sidebar === */
 section[data-testid="stSidebar"] {
     position: fixed !important;
-    top: 0 !important;
+    top: var(--s2f-streamlit-header-offset, 0px) !important;
     left: 0 !important;
     width: 360px !important;
-    height: 100vh !important;
-    max-height: 100vh !important;
+    height: calc(100dvh - var(--s2f-streamlit-header-offset, 0px)) !important;
+    max-height: calc(100dvh - var(--s2f-streamlit-header-offset, 0px)) !important;
+    height: calc(100svh - var(--s2f-streamlit-header-offset, 0px)) !important;
+    max-height: calc(100svh - var(--s2f-streamlit-header-offset, 0px)) !important;
     overflow-x: hidden !important;
     overflow-y: auto !important;
+    overscroll-behavior-y: contain !important;
     scrollbar-gutter: stable !important;
     background:
         linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%),
@@ -435,7 +469,7 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
 .stWarning { border-radius: 8px !important; }
 .stInfo { border-radius: 8px !important; }
 
-/* === Selectbox, multiselect, toggle === */
+/* === Selectbox, multiselect, toggle (accent on focus) === */
 [data-testid="stSelectbox"] > div > div,
 [data-testid="stSelectbox"] input,
 [data-testid="stMultiSelect"] > div > div {
@@ -452,6 +486,39 @@ div[data-testid="stHorizontalBlock"]:has([data-testid="stDownloadButton"]):has([
 [data-testid="stMultiSelect"] > div > div {
     border-radius: 8px !important;
     border: 1px solid #cbd5e1 !important;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
+}
+section[data-testid="stSidebar"] [data-testid="stSelectbox"] > div > div:focus-within,
+section[data-testid="stSidebar"] [data-testid="stMultiSelect"] > div > div:focus-within {
+    border-color: var(--s2f-primary) !important;
+    box-shadow: 0 0 0 1px rgba(var(--s2f-primary-rgb), 0.28) !important;
+}
+/* Radio: selected circle uses accent color */
+[data-testid="stRadio"] input[type="radio"] {
+    accent-color: var(--s2f-primary);
+}
+[data-testid="stRadio"] input {
+    accent-color: var(--s2f-primary);
+}
+/* Toggle: on state uses --s2f-primary */
+[data-testid="stToggle"] [data-baseweb="toggleTrack"] {
+    background-color: #cbd5e1 !important;
+}
+[data-testid="stToggle"] [data-baseweb="toggleTrack"][aria-checked="true"] {
+    background-color: var(--s2f-primary) !important;
+}
+[data-testid="stToggle"] [data-baseweb="toggleTrack"][data-state="checked"] {
+    background-color: var(--s2f-primary) !important;
+}
+[data-testid="stToggle"] [data-baseweb="toggleTrack"][data-state="unchecked"] {
+    background-color: #cbd5e1 !important;
+}
+/* Newer Streamlit may render a switch button instead of Base Web track */
+[data-testid="stToggle"] button[role="switch"][aria-checked="true"] {
+    background-color: var(--s2f-primary) !important;
+}
+[data-testid="stToggle"] button[role="switch"][aria-checked="false"] {
+    background-color: #cbd5e1 !important;
 }
 /* Dropdown options: ensure visible text on light background */
 [role="listbox"] [role="option"],
@@ -514,28 +581,6 @@ hr { border-color: #cbd5e1 !important; opacity: 0.7; }
 /* === Plotly chart === */
 .stPlotlyChart { border-radius: 12px; overflow: hidden; }
 
-/* === System status === */
-.system-status {
-    font-size: 0.78rem;
-    margin-top: 0.5rem;
-    padding: 8px 12px;
-    border-radius: 8px;
-    border: 1px solid rgba(148, 163, 184, 0.25);
-    background: rgba(148, 163, 184, 0.08);
-    color: inherit;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-.system-status .status-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: #10b981;
-    display: inline-block;
-    flex-shrink: 0;
-}
-
 /* === Footer citation === */
 .footer-citation {
     position: fixed;
@@ -543,15 +588,18 @@ hr { border-color: #cbd5e1 !important; opacity: 0.7; }
     left: 360px;
     right: 0;
     z-index: 999;
-    padding: 0.45rem 1rem;
+    padding: 0.5rem 1rem 0.55rem;
     background: #f1f5f9;
     border-top: 1px solid #e2e8f0;
     font-size: 0.7rem;
     color: #64748b;
     text-align: center;
-    line-height: 1.4;
+    line-height: 1.45;
 }
-/* Main content: offset for fixed sidebar, scroll internally (fixes HF iframe embed) */
+/*
+ * Main column: horizontal offset for fixed sidebar + vertical scroll only here.
+ * Header offset is on stMain only (avoids doubling if container and .main both match).
+ */
 [data-testid="stAppViewContainer"],
 .appview-container .main {
     margin-left: 360px !important;
@@ -561,13 +609,22 @@ hr { border-color: #cbd5e1 !important; opacity: 0.7; }
     overflow-x: hidden !important;
     scrollbar-gutter: stable !important;
     -webkit-overflow-scrolling: touch !important;
+    overscroll-behavior-y: contain !important;
+    box-sizing: border-box !important;
+}
+/* Clear Streamlit’s fixed toolbar so the custom banner / first widgets aren’t clipped */
+section[data-testid="stMain"] {
+    padding-top: var(--s2f-streamlit-header-offset, 0px) !important;
+    box-sizing: border-box !important;
 }
 .block-container {
-    padding-bottom: 3rem !important;
+    padding-top: 0.75rem !important;
+    padding-bottom: 3.25rem !important;
     max-width: 1050px !important;
 }
 section[data-testid="stSidebar"] > div:first-child {
-    padding-top: 1rem !important;
+    padding-top: 0.85rem !important;
+    padding-bottom: 0.5rem !important;
 }
 
 /* === Responsive === */
@@ -579,4 +636,9 @@ section[data-testid="stSidebar"] > div:first-child {
     .s2f-header h1 {
         font-size: 1.4rem !important;
     }
+    .footer-citation {
+        left: 0 !important;
+        padding-left: 0.75rem !important;
+        padding-right: 0.75rem !important;
+    }
 }

ui/components.py

@@ -4,7 +4,6 @@ import streamlit as st
 # Resolve st.dialog early to fix ordering bug (used in measure dialog)
 ST_DIALOG = getattr(st, "dialog", None) or getattr(st, "experimental_dialog", None)
 
-from ui.system_status import render_system_status
 from ui.result_display import render_batch_results, render_result_display
 from ui.measure_tool import (
     build_original_vals,
@@ -18,7 +17,6 @@ from ui.measure_tool import (
 __all__ = [
     "ST_DIALOG",
     "HAS_DRAWABLE_CANVAS",
-    "render_system_status",
     "render_batch_results",
     "render_result_display",
     "build_original_vals",

ui/heatmaps.py

@@ -44,8 +44,15 @@ def _draw_region_overlay(annotated, mask, color, fill_alpha=0.3, stroke_width=2)
     cv2.drawContours(annotated, contours, -1, color, stroke_width)
 
 
-def render_horizontal_colorbar(colormap_name, clip_min=0, clip_max=1, is_rescale=False):
-    """Render a compact horizontal colorbar for batch mode, anchored above the table."""
+def render_horizontal_colorbar(colormap_name, clip_min=0, clip_max=1, is_rescale=False, caption=None):
+    """
+    Render a compact horizontal colorbar for batch mode, anchored above the table.
+
+    When ``is_rescale`` is True (Force scale **Range** with a strict sub-interval), tick labels show
+    model force values in ``[clip_min, clip_max]``. The gradient still spans the full colormap because
+    the heatmap has already been **rescaled** so the lowest (highest) value in your range maps to
+    the colormap minimum (maximum)—same convention as the main Plotly view.
+    """
     ticks = [0, 0.25, 0.5, 0.75, 1]
     if is_rescale:
         rng = clip_max - clip_min
@@ -62,6 +69,8 @@ def render_horizontal_colorbar(colormap_name, clip_min=0, clip_max=1, is_rescale
     </div>
     """
     st.markdown(html, unsafe_allow_html=True)
+    if caption:
+        st.caption(caption)
 
 
 def make_annotated_heatmap(heatmap_rgb, mask, fill_alpha=0.3, stroke_color=(0, 188, 212), stroke_width=2):

ui/result_display.py

@@ -22,10 +22,13 @@ from ui.measure_tool import (
     HAS_DRAWABLE_CANVAS,
 )
 
+# Histogram bar color (matches static/s2f_styles.css accent)
+_HISTOGRAM_ACCENT = "#0d9488"
+
 
 def render_batch_results(batch_results, colormap_name="Jet", display_mode="Default",
                         min_percentile=0, max_percentile=100, clip_min=0, clip_max=1,
-                        auto_cell_boundary=False, clip_bounds=False):
+                        auto_cell_boundary=False, clamp_only=False):
     """
     Render batch prediction results: summary table, bright-field row, heatmap row, and bulk download.
     batch_results: list of dicts with img, heatmap, force, pixel_sum, key_img, cell_mask.
@@ -43,7 +46,7 @@ def render_batch_results(batch_results, colormap_name="Jet", display_mode="Defau
         r["_display_heatmap"] = apply_display_scale(
             r["heatmap"], display_mode,
             min_percentile=min_percentile, max_percentile=max_percentile,
-            clip_min=clip_min, clip_max=clip_max, clip_bounds=clip_bounds,
+            clip_min=clip_min, clip_max=clip_max, clamp_only=clamp_only,
         )
     # Build table rows - consistent column names for both modes
     headers = ["Image", "Force", "Sum", "Max", "Mean"]
@@ -86,7 +89,14 @@ def render_batch_results(batch_results, colormap_name="Jet", display_mode="Defau
         )
         with hm_cols[i % n_cols]:
             st.image(hm_rgb, caption=r["key_img"], use_container_width=True)
-    render_horizontal_colorbar(colormap_name, clip_min, clip_max, is_rescale_b)
+    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
+        ),
+    )
     # Table
     st.dataframe(
         {h: [r[i] for r in rows] for i, h in enumerate(headers)},
@@ -102,7 +112,7 @@ def render_batch_results(batch_results, colormap_name="Jet", display_mode="Defau
             vals = vals[vals > 0] if np.any(vals > 0) else vals
             st.markdown(f"**{r['key_img']}**")
             if len(vals) > 0:
-                fig = go.Figure(data=[go.Histogram(x=vals, nbinsx=50, marker_color="#0d9488")])
+                fig = go.Figure(data=[go.Histogram(x=vals, nbinsx=50, marker_color=_HISTOGRAM_ACCENT)])
                 fig.update_layout(
                     height=220, margin=dict(l=40, r=20, t=10, b=40),
                     xaxis_title="Force value", yaxis_title="Count",
@@ -149,7 +159,7 @@ def render_batch_results(batch_results, colormap_name="Jet", display_mode="Defau
 
 def render_result_display(img, raw_heatmap, display_heatmap, pixel_sum, force, key_img, download_key_suffix="",
                          colormap_name="Jet", display_mode="Default", measure_region_dialog=None, auto_cell_boundary=True,
-                         cell_mask=None, clip_min=0.0, clip_max=1.0, clip_bounds=False):
+                         cell_mask=None, clip_min=0.0, clip_max=1.0, clamp_only=False):
     """
     Render prediction result: plot, metrics, expander, and download/measure buttons.
     measure_region_dialog: callable to open measure dialog (when ST_DIALOG available).
@@ -172,7 +182,7 @@ def render_result_display(img, raw_heatmap, display_heatmap, pixel_sum, force, k
         ]
     else:
         main_csv_rows = [
-            ["image", "Sum of all pixels", "Cell force (scaled)", "Heatmap max", "Heatmap mean"],
+            ["image", "Sum of all pixels", "Force (scaled)", "Heatmap max", "Heatmap mean"],
             [base_name, f"{pixel_sum:.2f}", f"{force:.2f}",
              f"{np.max(raw_heatmap):.4f}", f"{np.mean(raw_heatmap):.4f}"],
         ]
@@ -227,7 +237,7 @@ def render_result_display(img, raw_heatmap, display_heatmap, pixel_sum, force, k
         with col1:
             st.metric("Sum of all pixels", f"{pixel_sum:.2f}", help="Raw sum of all pixel values in the force map")
         with col2:
-            st.metric("Cell force (scaled)", f"{force:.2f}", help="Total traction force in physical units")
+            st.metric("Force (scaled)", f"{force:.2f}", help="Total traction force in physical units (full field of view)")
         with col3:
             st.metric("Heatmap max", f"{np.max(raw_heatmap):.4f}", help="Peak force intensity in the map")
         with col4:
@@ -252,7 +262,7 @@ def render_result_display(img, raw_heatmap, display_heatmap, pixel_sum, force, k
                 st.metric("P75", f"{p75:.4f}")
                 st.metric("P90", f"{p90:.4f}")
             st.markdown("**Histogram**")
-            hist_fig = go.Figure(data=[go.Histogram(x=vals, nbinsx=50, marker_color="#0d9488")])
+            hist_fig = go.Figure(data=[go.Histogram(x=vals, nbinsx=50, marker_color=_HISTOGRAM_ACCENT)])
             hist_fig.update_layout(
                 height=220, margin=dict(l=40, r=20, t=20, b=40),
                 xaxis_title="Force value", yaxis_title="Count",
@@ -292,7 +302,7 @@ This is the raw image you provided—it shows cell shape but not forces.
 
 **Metrics (auto cell boundary off):**
 - **Sum of all pixels:** Raw sum over entire map
-- **Cell force (scaled):** Total traction force in physical units
+- **Force (scaled):** Total traction force in physical units (full field of view)
 - **Heatmap max/mean:** Peak and average force intensity (full field of view)
             """)
 

utils/display.py

@@ -4,6 +4,14 @@ import cv2
 
 from config.constants import COLORMAPS, COLORMAP_N_SAMPLES
 
+# Legacy aliases (single mapping at entry — app uses Default / Range / Percentile / Rescale only)
+_DISPLAY_MODE_ALIASES = {
+    "Auto": "Default",
+    "Full": "Default",
+    "Filter": "Range",
+    "Threshold": "Range",
+}
+
 
 def cv_colormap_to_plotly_colorscale(colormap_name, n_samples=None):
     """Build a Plotly colorscale from OpenCV colormap so UI matches download/PDF exactly."""
@@ -19,52 +27,25 @@ def cv_colormap_to_plotly_colorscale(colormap_name, n_samples=None):
     return scale
 
 
-def build_range_colorscale(colormap_name, clip_min, clip_max, n_range_samples=32):
-    """
-    Build a Plotly colorscale for Range mode: normal gradient in [clip_min, clip_max],
-    the "zero" color everywhere else (0 → clip_min and clip_max → 1).
-    """
-    cv2_cmap = COLORMAPS.get(colormap_name, cv2.COLORMAP_JET)
-
-    zero_px = np.array([[0]], dtype=np.uint8)
-    zero_rgb = cv2.applyColorMap(zero_px, cv2_cmap)
-    zero_rgb = cv2.cvtColor(zero_rgb, cv2.COLOR_BGR2RGB)
-    zr, zg, zb = zero_rgb[0, 0]
-    zero_color = f"rgb({zr},{zg},{zb})"
-
-    eps = 0.0005
-    scale = []
-
-    scale.append([0.0, zero_color])
-    if clip_min > eps:
-        scale.append([clip_min - eps, zero_color])
-
-    positions = np.linspace(clip_min, clip_max, n_range_samples)
-    pixel_vals = np.clip((positions * 255).astype(np.uint8), 0, 255).reshape(1, -1)
-    rgb = cv2.applyColorMap(pixel_vals, cv2_cmap)
-    rgb = cv2.cvtColor(rgb, cv2.COLOR_BGR2RGB)
-    for i, pos in enumerate(positions):
-        r, g, b = rgb[0, i]
-        scale.append([float(pos), f"rgb({r},{g},{b})"])
-
-    if clip_max < 1.0 - eps:
-        scale.append([clip_max + eps, zero_color])
-    scale.append([1.0, zero_color])
-
-    return scale
-
-
 def apply_display_scale(heatmap, mode, min_percentile=0, max_percentile=100,
-                        clip_min=0, clip_max=1, clip_bounds=False):
+                        clip_min=0, clip_max=1, clamp_only=False):
     """
     Apply display scaling. Display only—does not change underlying values.
-    - Default: full 0–1 range as-is.
-    - Range: keep original values inside [clip_min, clip_max].
-      clip_bounds=False → zero out outside.  clip_bounds=True → clamp to bounds.
-    - Rescale: map [clip_min, clip_max] → [0, 1].
-      clip_bounds=False → zero out outside.  clip_bounds=True → clamp to bounds first.
+
+    Parameters
+    ----------
+    clamp_only : bool
+        Only used for ``mode == "Range"`` or ``mode == "Rescale"`` when ``clip_max > clip_min``:
+
+        - **False** (default for Range in the app): pixels outside ``[clip_min, clip_max]`` are set
+          to 0; values inside are linearly mapped to ``[0, 1]`` so the colormap uses the full
+          dynamic range (blue→red) within that interval.
+        - **True**: values are clamped to ``[clip_min, clip_max]`` but **not** rescaled to
+          ``[0, 1]`` (rarely used for the main heatmap view; can compress colormap contrast).
     """
-    if mode == "Default" or mode == "Auto" or mode == "Full":
+    mode = _DISPLAY_MODE_ALIASES.get(mode, mode)
+
+    if mode == "Default":
         return np.clip(heatmap, 0, 1).astype(np.float32)
     if mode == "Percentile":
         pmin = float(np.percentile(heatmap, min_percentile))
@@ -73,12 +54,11 @@ def apply_display_scale(heatmap, mode, min_percentile=0, max_percentile=100,
             out = (heatmap.astype(np.float32) - pmin) / (pmax - pmin)
             return np.clip(out, 0, 1).astype(np.float32)
         return np.clip(heatmap, 0, 1).astype(np.float32)
-    if mode == "Range" or mode == "Filter" or mode == "Threshold":
-        # Range: filter (discard outside) + rescale [clip_min, clip_max] → [0, 1] so max shows as red
+    if mode == "Range":
         vmin, vmax = float(clip_min), float(clip_max)
         if vmax > vmin:
             h = heatmap.astype(np.float32)
-            if clip_bounds:
+            if clamp_only:
                 return np.clip(h, vmin, vmax).astype(np.float32)
             mask = (h >= vmin) & (h <= vmax)
             out = np.zeros_like(h)
@@ -89,7 +69,7 @@ def apply_display_scale(heatmap, mode, min_percentile=0, max_percentile=100,
         vmin, vmax = float(clip_min), float(clip_max)
         if vmax > vmin:
             h = heatmap.astype(np.float32)
-            if clip_bounds:
+            if clamp_only:
                 clamped = np.clip(h, vmin, vmax)
                 return ((clamped - vmin) / (vmax - vmin)).astype(np.float32)
             mask = (h >= vmin) & (h <= vmax)