Update app.py

app.py

@@ -106,6 +106,7 @@ DONOR_FEATURES   = ["DONORF", "GRAFTYPE", "HLA_FINAL", "CONDGRPF", "CONDGRP_FINA
 DISEASE_FEATURES = ["NACS2YR", "EXCHTFPR", "VOC2YPR", "VOCFRQPR", "SCATXRSN"]
 ALL_FEATURES     = PATIENT_FEATURES + DONOR_FEATURES + DISEASE_FEATURES
 
+# Icon array outcomes in display order
 ICON_OUTCOMES  = ["DEAD", "GF", "AGVHD", "CGVHD", "VOCPSHI", "STROKEHI"]
 OUTCOME_TITLES = {
     "DEAD":     "Death",
@@ -305,26 +306,7 @@ def lock_sex(baseline_sex):
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# CAROUSEL HELPERS
-# ─────────────────────────────────────────────────────────────────────────────
-
-def _nav_button_html(prefix, current_idx, total, label_list):
-    """Generate prev/next nav bar HTML for a carousel."""
-    current_label = label_list[current_idx] if label_list else f"{current_idx+1}/{total}"
-    prev_disabled = "disabled" if current_idx == 0 else ""
-    next_disabled = "disabled" if current_idx >= total - 1 else ""
-    return (
-        f'<div style="display:flex;align-items:center;justify-content:center;gap:12px;'
-        f'padding:6px 0 10px;font-family:\'Segoe UI\',Arial,sans-serif;">'
-        f'<span style="color:#888;font-size:11px;">{current_idx+1} / {total}</span>'
-        f'<span style="font-size:13px;font-weight:600;color:#1565c0;min-width:200px;text-align:center;">'
-        f'{current_label}</span>'
-        f'</div>'
-    )
-
-
-# ─────────────────────────────────────────────────────────────────────────────
-# HTML RENDERERS
+# ICON ARRAY HTML RENDERERS (pure Python, no JS)
 # ─────────────────────────────────────────────────────────────────────────────
 
 def _stick_figure_svg(color, size=16):
@@ -342,7 +324,8 @@ def _stick_figure_svg(color, size=16):
     )
 
 
-def _icon_card_html(probability, outcome, panel_label="", panel_color="#1565c0"):
+def _render_single_icon_card(probability, outcome, panel_label="", panel_color="#1565c0"):
+    """Render a single icon array card as HTML (no JS). Used for Python-driven carousel."""
     title      = OUTCOME_TITLES.get(outcome, OUTCOME_DESCRIPTIONS.get(outcome, outcome))
     n_event    = round(probability * 100)
     n_no_event = 100 - n_event
@@ -379,135 +362,84 @@ def _icon_card_html(probability, outcome, panel_label="", panel_color="#1565c0")
 
     return (
         f'<div style="background:#fff;border:1px solid #e0e0e0;border-radius:7px;'
-        f'padding:6px 5px;text-align:center;font-family:\'Segoe UI\',Arial,sans-serif;'
-        f'box-shadow:0 2px 4px rgba(0,0,0,0.06);box-sizing:border-box;'
-        f'display:flex;flex-direction:column;align-items:center;">'
+        f'padding:10px 8px;text-align:center;font-family:\'Segoe UI\',Arial,sans-serif;'
+        f'box-shadow:0 2px 4px rgba(0,0,0,0.06);box-sizing:border-box;max-width:340px;'
+        f'margin:0 auto;display:flex;flex-direction:column;align-items:center;">'
         f'{badge}'
-        f'<div style="min-height:26px;display:flex;align-items:center;justify-content:center;'
-        f'font-size:10px;font-weight:700;color:#222;line-height:1.3;margin-bottom:1px;">{title}</div>'
-        f'<div style="font-size:18px;font-weight:800;color:{EVENT_COLOR};'
-        f'line-height:1;margin-bottom:3px;">{pct_str}</div>'
-        f'<div style="margin-bottom:3px;">{grid_html}</div>'
+        f'<div style="min-height:30px;display:flex;align-items:center;justify-content:center;'
+        f'font-size:13px;font-weight:700;color:#222;line-height:1.3;margin-bottom:4px;">{title}</div>'
+        f'<div style="font-size:22px;font-weight:800;color:{EVENT_COLOR};'
+        f'line-height:1;margin-bottom:6px;">{pct_str}</div>'
+        f'<div style="margin-bottom:4px;">{grid_html}</div>'
         f'<div>{legend}</div>'
         f'</div>'
     )
 
 
-def _build_icon_carousel_html(probs_dict, title_prefix=""):
-    """
-    Builds a self-contained JS carousel showing one icon array card at a time.
-    Uses inline JS — no external deps.
-    """
-    outcomes = ICON_OUTCOMES
-    # Serialize card HTMLs as JS array
-    cards_js_parts = []
-    for o in outcomes:
-        prob = probs_dict.get(o, 0.0)
-        card = _icon_card_html(prob, o)
-        # Escape backticks and backslashes for JS template literal
-        card_escaped = card.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
-        cards_js_parts.append(f"`{card_escaped}`")
-    cards_js = "[" + ",\n".join(cards_js_parts) + "]"
-
-    labels_js = "[" + ", ".join(f'"{OUTCOME_TITLES.get(o, o)}"' for o in outcomes) + "]"
-    uid = abs(hash(title_prefix + str(list(probs_dict.values())[:2]))) % 999999
+def _render_icon_carousel_page(probs_dict, idx):
+    """Render the full carousel HTML for a given outcome index (no JS)."""
+    outcome    = ICON_OUTCOMES[idx]
+    total      = len(ICON_OUTCOMES)
+    card_html  = _render_single_icon_card(probs_dict.get(outcome, 0.0), outcome)
+    label      = OUTCOME_TITLES.get(outcome, outcome)
+
+    # Breadcrumb dots
+    dots = ""
+    for i, o in enumerate(ICON_OUTCOMES):
+        active = i == idx
+        dots += (
+            f'<span style="display:inline-block;width:{"10" if active else "7"}px;'
+            f'height:{"10" if active else "7"}px;border-radius:50%;'
+            f'background:{"#1565c0" if active else "#ccc"};'
+            f'margin:0 3px;vertical-align:middle;"></span>'
+        )
 
     footnote = (
-        f'<div style="font-size:10px;color:#888;text-align:center;margin-top:8px;">'
+        f'<div style="font-size:10px;color:#888;text-align:center;margin-top:10px;">'
         f'Each figure = 1 patient out of 100. '
         f'<span style="color:{EVENT_COLOR};font-weight:600;">&#9632; Red = Event</span> &nbsp; '
         f'<span style="color:{NO_EVENT_COLOR};font-weight:600;">&#9632; Green = No Event</span>'
         f'</div>'
     )
 
-    return f"""
-<div id="icon-carousel-{uid}" style="font-family:'Segoe UI',Arial,sans-serif;padding:4px 0;">
-  <div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:10px;">
-    <button id="ic-prev-{uid}"
-      onclick="icNav_{uid}(-1)"
-      style="background:#1565c0;color:#fff;border:none;border-radius:6px;
-             padding:6px 18px;font-size:18px;cursor:pointer;font-weight:700;
-             line-height:1;user-select:none;"
-      aria-label="Previous outcome">&#8592;</button>
-    <div style="text-align:center;min-width:200px;">
-      <div id="ic-label-{uid}" style="font-size:14px;font-weight:700;color:#1565c0;"></div>
-      <div id="ic-counter-{uid}" style="font-size:11px;color:#888;margin-top:2px;"></div>
-    </div>
-    <button id="ic-next-{uid}"
-      onclick="icNav_{uid}(1)"
-      style="background:#1565c0;color:#fff;border:none;border-radius:6px;
-             padding:6px 18px;font-size:18px;cursor:pointer;font-weight:700;
-             line-height:1;user-select:none;"
-      aria-label="Next outcome">&#8594;</button>
-  </div>
-  <div id="ic-card-{uid}" style="max-width:320px;margin:0 auto;"></div>
-  {footnote}
-</div>
-<script>
-(function() {{
-  var cards_{uid} = {cards_js};
-  var labels_{uid} = {labels_js};
-  var idx_{uid} = 0;
-  var total_{uid} = cards_{uid}.length;
-
-  function render_{uid}() {{
-    document.getElementById('ic-card-{uid}').innerHTML = cards_{uid}[idx_{uid}];
-    document.getElementById('ic-label-{uid}').textContent = labels_{uid}[idx_{uid}];
-    document.getElementById('ic-counter-{uid}').textContent = (idx_{uid}+1) + ' / ' + total_{uid};
-    document.getElementById('ic-prev-{uid}').style.opacity = idx_{uid} === 0 ? '0.35' : '1';
-    document.getElementById('ic-next-{uid}').style.opacity = idx_{uid} === total_{uid}-1 ? '0.35' : '1';
-  }}
-
-  window['icNav_{uid}'] = function(dir) {{
-    var next = idx_{uid} + dir;
-    if (next >= 0 && next < total_{uid}) {{
-      idx_{uid} = next;
-      render_{uid}();
-    }}
-  }};
-
-  render_{uid}();
-}})();
-</script>
-"""
+    return (
+        f'<div style="font-family:\'Segoe UI\',Arial,sans-serif;padding:4px 0;text-align:center;">'
+        f'<div style="font-size:15px;font-weight:700;color:#1565c0;margin-bottom:2px;">{label}</div>'
+        f'<div style="font-size:11px;color:#888;margin-bottom:10px;">{idx+1} / {total}</div>'
+        f'<div style="margin-bottom:2px;">{dots}</div>'
+        f'<div style="margin-top:10px;">{card_html}</div>'
+        f'{footnote}'
+        f'</div>'
+    )
 
 
-def _build_comparison_icon_carousel_html(all_probs_list, labels, colors):
-    """
-    Counterfactual version: one scenario per row, each row is its own carousel
-    showing one outcome at a time, all rows navigate together (synced).
-    """
-    outcomes = ICON_OUTCOMES
-    uid = abs(hash(str(labels) + str([list(p.values())[:2] for p in all_probs_list]))) % 999999
-
-    # Build card data per scenario per outcome: cards[scenario][outcome_idx]
-    all_cards_js_rows = []
-    for i, (probs, label, color) in enumerate(zip(all_probs_list, labels, colors)):
-        cards_for_scenario = []
-        for o in outcomes:
-            prob = probs.get(o, 0.0)
-            card = _icon_card_html(prob, o, label, color)
-            card_escaped = card.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
-            cards_for_scenario.append(f"`{card_escaped}`")
-        all_cards_js_rows.append("[" + ", ".join(cards_for_scenario) + "]")
-
-    all_cards_js = "[" + ", ".join(all_cards_js_rows) + "]"
-    labels_js    = "[" + ", ".join(f'"{OUTCOME_TITLES.get(o, o)}"' for o in outcomes) + "]"
-    scenario_labels_js = "[" + ", ".join(f'"{l}"' for l in labels) + "]"
-    scenario_colors_js = "[" + ", ".join(f'"{c}"' for c in colors) + "]"
-
-    n_scenarios = len(all_probs_list)
-
-    # Build the row placeholders
+def _render_comparison_icon_page(all_probs_list, labels, colors, idx):
+    """Render comparison icon carousel page for a given outcome index (no JS)."""
+    outcome   = ICON_OUTCOMES[idx]
+    total     = len(ICON_OUTCOMES)
+    out_label = OUTCOME_TITLES.get(outcome, outcome)
+
+    # Dots breadcrumb
+    dots = ""
+    for i in range(total):
+        active = i == idx
+        dots += (
+            f'<span style="display:inline-block;width:{"10" if active else "7"}px;'
+            f'height:{"10" if active else "7"}px;border-radius:50%;'
+            f'background:{"#1565c0" if active else "#ccc"};'
+            f'margin:0 3px;vertical-align:middle;"></span>'
+        )
+
     rows_html = ""
-    for i in range(n_scenarios):
+    for probs, label, color in zip(all_probs_list, labels, colors):
+        prob = probs.get(outcome, 0.0)
+        card = _render_single_icon_card(prob, outcome, label, color)
         rows_html += (
-            f'<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">'
-            f'<div id="cic-label-{uid}-{i}" style="width:90px;flex-shrink:0;font-size:9px;'
-            f'font-weight:700;text-align:right;border-radius:4px;padding:3px 6px;color:#fff;'
-            f'background:{colors[i]};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">'
-            f'{labels[i]}</div>'
-            f'<div id="cic-card-{uid}-{i}" style="flex:1;"></div>'
+            f'<div style="display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;">'
+            f'<div style="width:80px;flex-shrink:0;font-size:9px;font-weight:700;'
+            f'text-align:center;border-radius:4px;padding:4px 6px;color:#fff;'
+            f'background:{color};white-space:normal;word-break:break-word;">{label}</div>'
+            f'<div style="flex:1;">{card}</div>'
             f'</div>'
         )
 
@@ -519,58 +451,21 @@ def _build_comparison_icon_carousel_html(all_probs_list, labels, colors):
         f'</div>'
     )
 
-    return f"""
-<div id="cic-{uid}" style="font-family:'Segoe UI',Arial,sans-serif;padding:4px 0;">
-  <div style="display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px;">
-    <button onclick="cicNav_{uid}(-1)"
-      style="background:#1565c0;color:#fff;border:none;border-radius:6px;
-             padding:6px 18px;font-size:18px;cursor:pointer;font-weight:700;
-             line-height:1;user-select:none;"
-      aria-label="Previous outcome">&#8592;</button>
-    <div style="text-align:center;min-width:200px;">
-      <div id="cic-outlabel-{uid}" style="font-size:14px;font-weight:700;color:#1565c0;"></div>
-      <div id="cic-counter-{uid}" style="font-size:11px;color:#888;margin-top:2px;"></div>
-    </div>
-    <button onclick="cicNav_{uid}(1)"
-      style="background:#1565c0;color:#fff;border:none;border-radius:6px;
-             padding:6px 18px;font-size:18px;cursor:pointer;font-weight:700;
-             line-height:1;user-select:none;"
-      aria-label="Next outcome">&#8594;</button>
-  </div>
-  {rows_html}
-  {footnote}
-</div>
-<script>
-(function() {{
-  var allCards_{uid} = {all_cards_js};
-  var outLabels_{uid} = {labels_js};
-  var nScen_{uid} = {n_scenarios};
-  var total_{uid} = {len(outcomes)};
-  var idx_{uid} = 0;
-
-  function render_{uid}() {{
-    document.getElementById('cic-outlabel-{uid}').textContent = outLabels_{uid}[idx_{uid}];
-    document.getElementById('cic-counter-{uid}').textContent = (idx_{uid}+1) + ' / ' + total_{uid};
-    for (var s = 0; s < nScen_{uid}; s++) {{
-      var el = document.getElementById('cic-card-{uid}-' + s);
-      if (el) el.innerHTML = allCards_{uid}[s][idx_{uid}];
-    }}
-  }}
-
-  window['cicNav_{uid}'] = function(dir) {{
-    var next = idx_{uid} + dir;
-    if (next >= 0 && next < total_{uid}) {{
-      idx_{uid} = next;
-      render_{uid}();
-    }}
-  }};
-
-  render_{uid}();
-}})();
-</script>
-"""
+    return (
+        f'<div style="font-family:\'Segoe UI\',Arial,sans-serif;padding:4px 0;text-align:center;">'
+        f'<div style="font-size:15px;font-weight:700;color:#1565c0;margin-bottom:2px;">{out_label}</div>'
+        f'<div style="font-size:11px;color:#888;margin-bottom:6px;">{idx+1} / {total}</div>'
+        f'<div style="margin-bottom:10px;">{dots}</div>'
+        f'{rows_html}'
+        f'{footnote}'
+        f'</div>'
+    )
 
 
+# ─────────────────────────────────────────────────────────────────────────────
+# OTHER HTML RENDERERS
+# ─────────────────────────────────────────────────────────────────────────────
+
 def _delta_color_html(delta, is_survival):
     if abs(delta) < 0.0005:
         color = "#888888"
@@ -685,26 +580,6 @@ def _build_violation_html(violations):
 # SHAP CAROUSEL HELPERS
 # ─────────────────────────────────────────────────────────────────────────────
 
-def _make_shap_nav_label(idx):
-    """Return display label for SHAP plot at given index."""
-    o = SHAP_ORDER[idx]
-    return SHAP_LABELS.get(o, o)
-
-
-def _shap_prev(current_idx, plots_store):
-    new_idx = max(0, current_idx - 1)
-    plot = plots_store[SHAP_ORDER[new_idx]] if plots_store else None
-    label = f"◀  {_make_shap_nav_label(new_idx)}  ({new_idx+1}/{len(SHAP_ORDER)})"
-    return new_idx, plot, label
-
-
-def _shap_next(current_idx, plots_store):
-    new_idx = min(len(SHAP_ORDER) - 1, current_idx + 1)
-    plot = plots_store[SHAP_ORDER[new_idx]] if plots_store else None
-    label = f"{_make_shap_nav_label(new_idx)}  ▶  ({new_idx+1}/{len(SHAP_ORDER)})"
-    return new_idx, plot, label
-
-
 def _shap_counter_html(idx):
     labels = [SHAP_LABELS.get(o, o) for o in SHAP_ORDER]
     items  = " · ".join(
@@ -742,20 +617,22 @@ def predict_gradio(*values):
             })
         df = pd.DataFrame(rows)
 
-        shap_plots  = create_all_shap_plots(user_vals, max_display=10)
-        icon_html   = _build_icon_carousel_html(calibrated_probs, title_prefix="predict")
+        shap_plots = create_all_shap_plots(user_vals, max_display=10)
 
-        # Start SHAP carousel at index 0
-        first_shap  = shap_plots[SHAP_ORDER[0]]
-        shap_crumb  = _shap_counter_html(0)
+        # Icon carousel: start at index 0, store probs in State
+        icon_html  = _render_icon_carousel_page(calibrated_probs, 0)
+        first_shap = shap_plots[SHAP_ORDER[0]]
+        shap_crumb = _shap_counter_html(0)
 
         return (
             df,
-            icon_html,
-            shap_plots,       # stored in State
-            0,                # shap index State
-            first_shap,       # displayed plot
-            shap_crumb,       # breadcrumb HTML
+            calibrated_probs,  # stored in State for carousel navigation
+            0,                 # icon carousel index State
+            icon_html,         # displayed icon card
+            shap_plots,        # stored in State
+            0,                 # shap index State
+            first_shap,        # displayed plot
+            shap_crumb,        # breadcrumb HTML
         )
     except Exception as e:
         print(traceback.format_exc())
@@ -796,6 +673,13 @@ custom_css = """
     padding: 8px 22px !important; border-radius: 6px !important;
 }
 .shap-nav-button:hover { background: linear-gradient(to right, #263238, #455a64) !important; }
+.icon-nav-button {
+    background: linear-gradient(to right, #1565c0, #1e88e5) !important;
+    border: none !important; color: white !important;
+    font-weight: bold !important; font-size: 18px !important;
+    padding: 8px 22px !important; border-radius: 6px !important;
+}
+.icon-nav-button:hover { background: linear-gradient(to right, #0d47a1, #1565c0) !important; }
 .output-dataframe table td:first-child,
 .output-dataframe table th:first-child {
     white-space: normal !important; word-break: break-word !important; min-width: 240px !important;
@@ -880,18 +764,48 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                 wrap=True,
             )
 
-            # ── Icon Array Carousel (Tab 1) ───────────────────────────────────
+            # ── Icon Array Carousel (Tab 1) — Python-driven ───────────────────
             gr.Markdown("---")
             gr.Markdown("## Outcome Probability — Icon Arrays")
             gr.Markdown("*Use the ← → arrows to browse outcomes one at a time.*")
-            icon_array_carousel = gr.HTML()
+
+            # State: store probs dict + current index
+            icon_probs_state = gr.State(None)
+            icon_idx_state   = gr.State(0)
+
+            with gr.Row():
+                icon_prev_btn = gr.Button("←", elem_classes="icon-nav-button", size="sm", scale=0)
+                icon_display  = gr.HTML(scale=4)
+                icon_next_btn = gr.Button("→", elem_classes="icon-nav-button", size="sm", scale=0)
+
+            def _on_icon_prev(idx, probs):
+                if probs is None:
+                    return idx, ""
+                new_idx = max(0, idx - 1)
+                return new_idx, _render_icon_carousel_page(probs, new_idx)
+
+            def _on_icon_next(idx, probs):
+                if probs is None:
+                    return idx, ""
+                new_idx = min(len(ICON_OUTCOMES) - 1, idx + 1)
+                return new_idx, _render_icon_carousel_page(probs, new_idx)
+
+            icon_prev_btn.click(
+                fn=_on_icon_prev,
+                inputs=[icon_idx_state, icon_probs_state],
+                outputs=[icon_idx_state, icon_display],
+            )
+            icon_next_btn.click(
+                fn=_on_icon_next,
+                inputs=[icon_idx_state, icon_probs_state],
+                outputs=[icon_idx_state, icon_display],
+            )
 
             # ── SHAP Carousel (Tab 1) ─────────────────────────────────────────
             gr.Markdown("---")
             gr.Markdown("## SHAP — Feature Importance")
             gr.Markdown("*Use the ← → buttons to browse SHAP plots one at a time.*")
 
-            # State: store all plots dict + current index
             shap_plots_state = gr.State(None)
             shap_idx_state   = gr.State(0)
 
@@ -902,7 +816,6 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
 
             shap_display = gr.Plot(label="SHAP Feature Importance")
 
-            # Nav callbacks
             def _on_shap_prev(idx, plots):
                 new_idx = max(0, idx - 1)
                 plot    = plots[SHAP_ORDER[new_idx]] if plots else None
@@ -929,7 +842,9 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                 inputs=inputs_list,
                 outputs=[
                     output_table,
-                    icon_array_carousel,
+                    icon_probs_state,   # ← store probs dict
+                    icon_idx_state,     # ← reset to 0
+                    icon_display,       # ← show first card
                     shap_plots_state,
                     shap_idx_state,
                     shap_display,
@@ -1175,12 +1090,45 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
             wi_table_html = gr.HTML()
 
             gr.Markdown("---")
+
+            # ── Icon Arrays — comparison, Python-driven carousel ─────────────
             with gr.Accordion("Outcome Icon Arrays — Baseline vs Scenarios", open=False):
                 gr.Markdown(
-                    "*One row per scenario. Use the ← → arrows to browse outcomes one at a time "
-                    "across all scenarios simultaneously.*"
+                    "*One row per scenario. Use the ← → arrows to browse outcomes one at a time.*"
+                )
+
+                wi_cmp_probs_state = gr.State(None)   # list of dicts
+                wi_cmp_labels_state = gr.State(None)  # list of labels
+                wi_cmp_colors_state = gr.State(None)  # list of colors
+                wi_cmp_idx_state    = gr.State(0)
+
+                with gr.Row():
+                    wi_cmp_prev_btn = gr.Button("←", elem_classes="icon-nav-button", size="sm", scale=0)
+                    wi_icon_html    = gr.HTML(scale=4)
+                    wi_cmp_next_btn = gr.Button("→", elem_classes="icon-nav-button", size="sm", scale=0)
+
+                def _on_cmp_prev(idx, probs_list, labels, colors):
+                    if probs_list is None:
+                        return idx, ""
+                    new_idx = max(0, idx - 1)
+                    return new_idx, _render_comparison_icon_page(probs_list, labels, colors, new_idx)
+
+                def _on_cmp_next(idx, probs_list, labels, colors):
+                    if probs_list is None:
+                        return idx, ""
+                    new_idx = min(len(ICON_OUTCOMES) - 1, idx + 1)
+                    return new_idx, _render_comparison_icon_page(probs_list, labels, colors, new_idx)
+
+                wi_cmp_prev_btn.click(
+                    fn=_on_cmp_prev,
+                    inputs=[wi_cmp_idx_state, wi_cmp_probs_state, wi_cmp_labels_state, wi_cmp_colors_state],
+                    outputs=[wi_cmp_idx_state, wi_icon_html],
+                )
+                wi_cmp_next_btn.click(
+                    fn=_on_cmp_next,
+                    inputs=[wi_cmp_idx_state, wi_cmp_probs_state, wi_cmp_labels_state, wi_cmp_colors_state],
+                    outputs=[wi_cmp_idx_state, wi_icon_html],
                 )
-                wi_icon_html = gr.HTML()
 
             gr.Markdown("---")
 
@@ -1192,9 +1140,9 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                 wi_shap_base_idx    = gr.State(0)
 
                 with gr.Row():
-                    wb_shap_prev = gr.Button("←", elem_classes="shap-nav-button", size="sm", scale=0)
+                    wb_shap_prev  = gr.Button("←", elem_classes="shap-nav-button", size="sm", scale=0)
                     wb_shap_crumb = gr.HTML(value="", scale=4)
-                    wb_shap_next = gr.Button("→", elem_classes="shap-nav-button", size="sm", scale=0)
+                    wb_shap_next  = gr.Button("→", elem_classes="shap-nav-button", size="sm", scale=0)
                 wb_shap_plot = gr.Plot(label="Baseline — SHAP")
 
                 def _wb_prev(idx, plots):
@@ -1242,7 +1190,6 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                             wi_shap_scen_plots.append(s_plot)
                             wi_shap_scen_crumbs.append(s_crumb)
 
-                            # closure to capture correct store/idx
                             def _make_prev(st, ix):
                                 def fn(idx, plots):
                                     new_idx = max(0, idx - 1)
@@ -1293,14 +1240,15 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                     for s in range(MAX_SCENARIOS)
                 ]
 
-                # placeholders
-                empty_shap = None
-                empty_crumb = ""
-                empty_idx = 0
-
-                def _empty_shap_outputs():
-                    # store, idx, plot, crumb
-                    return None, 0, None, ""
+                def _empty_outputs():
+                    # violation, table, cmp_probs, cmp_labels, cmp_colors, cmp_idx, icon_html
+                    # base_store, base_idx, base_plot, base_crumb
+                    # per scenario: store, idx, plot, crumb
+                    out = ["", "", None, None, None, 0, ""]
+                    out += [None, 0, None, ""]
+                    for _ in range(MAX_SCENARIOS):
+                        out += [None, 0, None, ""]
+                    return tuple(out)
 
                 try:
                     base_dict = _values_to_dict(base_vals)
@@ -1315,15 +1263,9 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                         all_violations.extend(v)
                         scenario_dicts_active.append(sd)
 
-                    # Build the output list structure:
-                    # violation, table, icon,
-                    # base_store, base_idx, base_plot, base_crumb,
-                    # [per scenario: store, idx, plot, crumb] × MAX_SCENARIOS
-                    n_scen_outputs = 4 * MAX_SCENARIOS  # store+idx+plot+crumb each
-
                     if all_violations:
-                        out = [_build_violation_html(all_violations), "", ""]
-                        out += [None, 0, None, ""]  # base shap
+                        out = [_build_violation_html(all_violations), "", None, None, None, 0, ""]
+                        out += [None, 0, None, ""]
                         for _ in range(MAX_SCENARIOS):
                             out += [None, 0, None, ""]
                         return tuple(out)
@@ -1353,20 +1295,19 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                         base_probs, base_ci, scen_probs_list, scen_ci_list, scen_labels, scen_colors
                     )
 
-                    # Icon carousel: one row per scenario (baseline + active scenarios)
-                    icon_html = _build_comparison_icon_carousel_html(
-                        [base_probs] + scen_probs_list,
-                        ["Baseline"] + scen_labels,
-                        ["#1565c0"] + scen_colors,
-                    )
+                    # Icon carousel: store all probs + labels + colors in State
+                    all_probs_list   = [base_probs] + scen_probs_list
+                    all_labels       = ["Baseline"] + scen_labels
+                    all_colors       = ["#1565c0"] + scen_colors
+                    icon_html_first  = _render_comparison_icon_page(all_probs_list, all_labels, all_colors, 0)
 
                     # SHAP — baseline
                     base_shap_plots = create_all_shap_plots(base_dict, max_display=10)
                     first_base_plot = base_shap_plots[SHAP_ORDER[0]]
                     base_crumb      = _shap_counter_html(0)
 
-                    # SHAP — scenarios (only active ones; inactive get None)
-                    scen_shap_data = []  # list of (store, plot0, crumb) or None
+                    # SHAP — scenarios
+                    scen_shap_data = []
                     for s in range(MAX_SCENARIOS):
                         if s < n_scen:
                             sp_plots = create_all_shap_plots(scenario_dicts_active[s], max_display=10)
@@ -1374,8 +1315,19 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
                         else:
                             scen_shap_data.append((None, None, ""))
 
-                    out = ["", table_html, icon_html]
-                    out += [base_shap_plots, 0, first_base_plot, base_crumb]
+                    out = [
+                        "",                  # violation html
+                        table_html,          # table
+                        all_probs_list,      # cmp_probs state
+                        all_labels,          # cmp_labels state
+                        all_colors,          # cmp_colors state
+                        0,                   # cmp_idx state
+                        icon_html_first,     # icon display
+                        base_shap_plots,     # base shap store
+                        0,                   # base shap idx
+                        first_base_plot,     # base shap plot
+                        base_crumb,          # base shap crumb
+                    ]
                     for s in range(MAX_SCENARIOS):
                         store, plot0, crumb0 = scen_shap_data[s]
                         out += [store, 0, plot0, crumb0]
@@ -1388,7 +1340,9 @@ with gr.Blocks(title="HCT Outcome Prediction Model", css=custom_css) as demo:
 
             # Build output list
             all_run_outputs = (
-                [wi_violation_html, wi_table_html, wi_icon_html]
+                [wi_violation_html, wi_table_html,
+                 wi_cmp_probs_state, wi_cmp_labels_state, wi_cmp_colors_state,
+                 wi_cmp_idx_state, wi_icon_html]
                 + [wi_shap_base_store, wi_shap_base_idx, wb_shap_plot, wb_shap_crumb]
                 + [item for s in range(MAX_SCENARIOS)
                    for item in (wi_shap_scen_stores[s], wi_shap_scen_idxs[s],