KPI cards as native HTML row above the forest plot (responsive flexbox)

- Move 3 KPI cards out of the Plotly figure into a sibling gr.HTML with
CSS flexbox layout. They now resize fluidly with the window and wrap
on narrow viewports instead of overlapping or overflowing.
- plot_significance_forest() now returns (figure, kpi_html) tuple.
- Forest plot top margin reduced 180px → 40px (cards no longer occupy
paper-y > 1.0 inside the figure).
- Cache (figures_cache.json) gains a 'forest_kpi' map alongside 'forest';
the live render path also produces the HTML on cache miss. Existing
cached entries return an empty KPI block until the next rebuild.

app.py

@@ -1130,6 +1130,58 @@ body:not(.dark) #nk-light-mode-nudge { display: none !important; }
 .nk-bar-plot .modebar-container,
 .nk-bar-plot .js-plotly-plot .plotly .modebar { display: none !important; }
 
+/* No special width constraint on the forest plot: Plotly autosize fills
+   the container and the chart redraws on window resize. The KPI cards live
+   in a sibling HTML row (.nk-bar-kpis), not inside the figure, so they get
+   real CSS flexbox responsiveness. */
+.nk-bar-kpi-wrap { padding: 0 !important; }
+.nk-bar-kpis {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    padding: 0 8px 12px;
+    justify-content: center;
+}
+.nk-bar-kpi {
+    flex: 1 1 240px;
+    min-width: 200px;
+    max-width: 360px;
+    background: #f7f7fa;
+    border: 1px solid #e6e4ef;
+    border-radius: 8px;
+    padding: 12px 16px;
+    text-align: center;
+    overflow: hidden;
+}
+.nk-bar-kpi-kicker {
+    font-family: "Geist Mono", ui-monospace, monospace;
+    font-size: 11px;
+    color: #5d6c7b;
+    letter-spacing: 0.04em;
+    margin-bottom: 4px;
+}
+.nk-bar-kpi-value {
+    font-family: "BDO Grotesk", "Helvetica Neue", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    color: #060510;
+    line-height: 1.2;
+    word-break: break-word;
+    margin-bottom: 4px;
+}
+.nk-bar-kpi-sub {
+    font-family: "BDO Grotesk", "Helvetica Neue", sans-serif;
+    font-size: 11px;
+    color: #5d6c7b;
+}
+body.dark .nk-bar-kpi {
+    background: rgba(40, 35, 70, 0.4);
+    border-color: rgba(255, 255, 255, 0.1);
+}
+body.dark .nk-bar-kpi-value { color: #f5f3ff; }
+body.dark .nk-bar-kpi-kicker,
+body.dark .nk-bar-kpi-sub { color: #b8b0d0; }
+
 /* ===== Leaderboard table view (HTML, with per-cell rank badge) ===== */
 .nk-lb-wrap { padding: 0 !important; }
 .nk-empty-table {
@@ -4640,60 +4692,45 @@ def plot_significance_forest(per_dataset_df, metric="Accuracy"):
     # Each card has 3 stacked annotations (kicker / big value / subline).
     # Plotly inline `<span style='font-size:..'>` is unreliable, so each
     # annotation sets its size via the `font=` parameter instead.
-    KPI_Y = 1.16
-    KPI_HALF_W = 0.14          # narrower → leaves more gap between cards
-    KPI_HALF_H = 0.085
-    KPI_BG = "rgba(247,247,250,1)"
-    KPI_BORDER = "#e6e4ef"
-    LINE_GAP = 0.038           # tighter vertical spacing between the 3 lines
-    cards = [
-        (0.16, "LEADING GROUP", kpi_group_value, kpi_group_sub),
-        (0.50, "LEAD MARGIN", kpi_margin_value, kpi_margin_sub),
-        (0.84, "TOP-3 COVERAGE", kpi_top3_value, kpi_top3_sub),
-    ]
-    for x_center, kicker, value, sub in cards:
-        # Background pill
-        fig.add_shape(
-            type="rect", xref="paper", yref="paper",
-            x0=x_center - KPI_HALF_W, x1=x_center + KPI_HALF_W,
-            y0=KPI_Y - KPI_HALF_H, y1=KPI_Y + KPI_HALF_H,
-            fillcolor=KPI_BG, line=dict(color=KPI_BORDER, width=1),
-        )
-        # Pick a font size that scales down for long values so they fit the
-        # card. Cards are ~0.28 paper-x wide; assume ~7 px per glyph at 22px.
-        char_count = len(str(value))
-        if char_count <= 14:
-            value_size = 22
-        elif char_count <= 22:
-            value_size = 17
-        elif char_count <= 32:
-            value_size = 14
-        else:
-            value_size = 12
-        # Kicker
-        fig.add_annotation(
-            text=kicker, x=x_center, y=KPI_Y + LINE_GAP,
-            xref="paper", yref="paper", showarrow=False,
-            xanchor="center", yanchor="middle", align="center",
-            font=dict(size=12, color="#5d6c7b",
-                      family="Geist Mono, monospace"),
-        )
-        # Big value
-        fig.add_annotation(
-            text=f"<b>{value}</b>", x=x_center, y=KPI_Y,
-            xref="paper", yref="paper", showarrow=False,
-            xanchor="center", yanchor="middle", align="center",
-            font=dict(size=value_size, color="#060510",
-                      family="BDO Grotesk, Helvetica Neue, sans-serif"),
-        )
-        # Sub
-        fig.add_annotation(
-            text=sub, x=x_center, y=KPI_Y - LINE_GAP,
-            xref="paper", yref="paper", showarrow=False,
-            xanchor="center", yanchor="middle", align="center",
-            font=dict(size=12, color="#5d6c7b",
-                      family="BDO Grotesk, Helvetica Neue, sans-serif"),
-        )
+    #
+    # Responsive sizing: the card pill is sized in paper fractions (so it
+    # shrinks with the plot width), but the *text* is sized in pixels. To
+    # avoid overflow on narrow plots, we shrink the value/sub text more
+    # aggressively for long content AND truncate the LEADING GROUP value
+    # to at most 2 model names (was 3) so common cases fit even at small
+    # widths.
+    # KPI cards: rendered as a sibling HTML block (not inside the figure),
+    # so they get native CSS flexbox responsiveness and resize fluidly with
+    # the window. The HTML is returned alongside the figure.
+    if n_leaders == 1:
+        kpi_group_value_display = leader_names_pretty[0]
+    elif n_leaders == 2:
+        kpi_group_value_display = " · ".join(leader_names_pretty)
+    else:
+        kpi_group_value_display = " · ".join(leader_names_pretty[:2]) + " …"
+
+    import html as _html
+    def _esc(s):
+        return _html.escape(str(s))
+    kpi_html = (
+        '<div class="nk-bar-kpis">'
+        '  <div class="nk-bar-kpi">'
+        f'    <div class="nk-bar-kpi-kicker">LEADING GROUP</div>'
+        f'    <div class="nk-bar-kpi-value">{_esc(kpi_group_value_display)}</div>'
+        f'    <div class="nk-bar-kpi-sub">{_esc(kpi_group_sub)}</div>'
+        '  </div>'
+        '  <div class="nk-bar-kpi">'
+        f'    <div class="nk-bar-kpi-kicker">LEAD MARGIN</div>'
+        f'    <div class="nk-bar-kpi-value">{_esc(kpi_margin_value)}</div>'
+        f'    <div class="nk-bar-kpi-sub">{_esc(kpi_margin_sub)}</div>'
+        '  </div>'
+        '  <div class="nk-bar-kpi">'
+        f'    <div class="nk-bar-kpi-kicker">TOP-3 COVERAGE</div>'
+        f'    <div class="nk-bar-kpi-value">{_esc(kpi_top3_value)}</div>'
+        f'    <div class="nk-bar-kpi-sub">{_esc(kpi_top3_sub)}</div>'
+        '  </div>'
+        '</div>'
+    )
 
     # Axes
     raw_min = min(ci_low.get(m, v) for m, v in zip(y_order, dot_x) if v == v)
@@ -4746,8 +4783,16 @@ def plot_significance_forest(per_dataset_df, metric="Accuracy"):
             )
 
     fig.update_layout(
+        # Autosize: the figure fills its container at full width and shrinks
+        # down to the min-width set by .nk-bar-plot's CSS rule (820px); below
+        # that the wrapper scrolls horizontally rather than compressing.
+        autosize=True,
         height=max(420, 36 * len(y_order) + 240),
-        margin=dict(l=240, r=110, t=180, b=70),
+        # Left margin holds the model labels (drawn at paper-x=0 with
+        # xshift=-18). 140px is enough for the longest model name (~12 chars
+        # at 12px monospace ≈ 86px) plus the 18px gap. Top margin was 180px
+        # to host the KPI cards; now 40px since the cards are gone.
+        margin=dict(l=140, r=90, t=40, b=70),
         template="plotly_white",
         plot_bgcolor="rgba(0,0,0,0)",
         paper_bgcolor="rgba(0,0,0,0)",
@@ -4764,7 +4809,7 @@ def plot_significance_forest(per_dataset_df, metric="Accuracy"):
               f"&nbsp;&nbsp;<span style='color:#5d6c7b;font-size:11px'>· 95% CI</span>"),
         showarrow=False, font=dict(size=12),
     )
-    return fig
+    return fig, kpi_html
 
 
 def plot_winrate_matrix(per_dataset_df, metric="Accuracy"):
@@ -5316,11 +5361,16 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                     .reset_index()
                 )
 
+                _init_forest_fig, _init_forest_kpi = plot_significance_forest(
+                    public_enter_per_dataset, metric="Accuracy",
+                )
+                ranking_kpi_html = gr.HTML(
+                    value=_init_forest_kpi,
+                    elem_classes=["nk-bar-kpi-wrap"],
+                    visible=True,
+                )
                 ranking_plot = gr.Plot(
-                    value=plot_significance_forest(
-                        public_enter_per_dataset,
-                        metric="Accuracy",
-                    ),
+                    value=_init_forest_fig,
                     show_label=False,
                     elem_classes=["nk-bar-plot"],
                     visible=True,
@@ -5960,10 +6010,13 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                         # Bars view = significance forest plot. Cached at build
                         # time (build_figures_cache.py) because the live render
                         # runs Wilcoxon-Holm + 1000-iter paired bootstrap, ~30 s
-                        # on Spaces CPU per metric change.
+                        # on Spaces CPU per metric change. The KPI HTML is
+                        # served from the cache when present; otherwise we fall
+                        # back to live recompute (slow path).
                         import plotly.graph_objects as _go
 
                         fig = _go.Figure(cache_root["forest"][metric])
+                        kpi_html_cached = cache_root.get("forest_kpi", {}).get(metric, "")
                         return (
                             gr.update(visible=True, value=fig),
                             hide,
@@ -5973,6 +6026,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             hide,
+                            gr.update(visible=True, value=kpi_html_cached),
                             count_label,
                         )
 
@@ -6017,6 +6071,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             hide,
+                            gr.update(),
                             count_label,
                         )
 
@@ -6041,6 +6096,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             gr.update(visible=True, value=fig),
+                            gr.update(),
                             count_label,
                         )
 
@@ -6060,11 +6116,12 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                                 hide,
                                 hide,
                                 hide,
+                                gr.update(),
                                 count_label,
                             )
                         # Bars view now renders the significance forest plot
                         # (Wilcoxon-Holm leading-group highlight + CI lollipops).
-                        fig = plot_significance_forest(
+                        fig, kpi_html = plot_significance_forest(
                             filtered_per_dataset, metric=metric,
                         )
                         return (
@@ -6076,6 +6133,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             hide,
+                            gr.update(visible=True, value=kpi_html),
                             count_label,
                         )
 
@@ -6090,6 +6148,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                                 hide,
                                 hide,
                                 gr.update(visible=True, value=None),
+                                gr.update(),
                                 count_label,
                             )
                         fig = plot_winrate_matrix(filtered_per_dataset, metric=metric)
@@ -6102,6 +6161,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             gr.update(visible=True, value=fig),
+                            gr.update(),
                             count_label,
                         )
 
@@ -6125,6 +6185,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             hide,
+                            gr.update(),
                             count_label,
                         )
 
@@ -6145,6 +6206,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                                 hide,
                                 hide,
                                 hide,
+                                gr.update(),
                                 count_label,
                             )
                         fig = plot_dataset_comparison(
@@ -6159,6 +6221,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             hide,
                             hide,
                             hide,
+                            gr.update(),
                             count_label,
                         )
 
@@ -6173,6 +6236,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                                 hide,
                                 hide,
                                 hide,
+                                gr.update(),
                                 count_label,
                             )
                         overlay_mm, sm_mm, overlay_rk, sm_rk = plot_model_radars(
@@ -6187,6 +6251,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             gr.update(visible=True, value=overlay_rk),
                             gr.update(visible=True, value=sm_rk),
                             hide,
+                            gr.update(),
                             count_label,
                         )
 
@@ -6200,6 +6265,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                         hide,
                         hide,
                         hide,
+                        gr.update(),
                         count_label,
                     )
 
@@ -6233,6 +6299,7 @@ with gr.Blocks(css=css, theme=nk_theme, head=NAV_HEAD_JS) as demo:
                             radar_overlay_rank_plot,
                             radar_grid_rank_plot,
                             winrate_plot,
+                            ranking_kpi_html,
                             dataset_count_md,
                         ],
                     )

build_figures_cache.py

@@ -101,17 +101,19 @@ def build_one(benchmark, industry, metric):
     # Forest plot (Wilcoxon-Holm leading-group highlight + paired-bootstrap CI).
     # This is the slow figure on live render (B=1000 bootstrap × all model pairs),
     # so pre-caching it is the whole point of this build script for the Bars view.
+    # Returns (figure, kpi_html) — both go in the cache.
     try:
-        forest = plot_significance_forest(df_display, metric=metric)
+        forest, forest_kpi = plot_significance_forest(df_display, metric=metric)
     except Exception as _e:
         print(f"  [warn] forest plot failed for bench={benchmark} ind={industry} metric={metric}: {_e}")
-        forest = None
+        forest, forest_kpi = None, None
     # Win-rate matrix should ALSO use the display-filtered frame so the
     # heatmap doesn't show duplicate display names (single-fit vs ensemble).
     winrate = plot_winrate_matrix(df_display, metric=metric) if metric not in ("Elo_score", "%↗ over XGBoost") else None
     return (
         bars.to_plotly_json(),
         forest.to_plotly_json() if forest is not None else None,
+        forest_kpi,
         winrate.to_plotly_json() if winrate is not None else None,
         agg.round(6).to_dict(orient="records"),
         int(df_display['dataset_id'].nunique()),
@@ -132,14 +134,17 @@ for benchmark in BENCHMARKS:
     cache[benchmark] = {}
     for industry in INDUSTRY_BUCKETS:
         cache[benchmark][industry] = {
-            "metrics": {}, "forest": {}, "winrate": {}, "n_datasets": 0, "table": []
+            "metrics": {}, "forest": {}, "forest_kpi": {}, "winrate": {},
+            "n_datasets": 0, "table": [],
         }
         for metric in METRICS:
             i += 1
-            bars_dict, forest_dict, winrate_dict, agg, n = build_one(benchmark, industry, metric)
+            bars_dict, forest_dict, forest_kpi_html, winrate_dict, agg, n = build_one(benchmark, industry, metric)
             cache[benchmark][industry]["metrics"][metric] = bars_dict
             if forest_dict is not None:
                 cache[benchmark][industry]["forest"][metric] = forest_dict
+            if forest_kpi_html is not None:
+                cache[benchmark][industry]["forest_kpi"][metric] = forest_kpi_html
             if winrate_dict is not None:
                 cache[benchmark][industry]["winrate"][metric] = winrate_dict
             cache[benchmark][industry]["n_datasets"] = n

perfmap_hulls_override.json

@@ -19,7 +19,7 @@
     "46955",
     "255",
     "137",
-    "417O5",
+    "41705",
     "44186",
     "44130",
     "40497",