Place VS BASE column directly after the metric it compares

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGJFdqmf4AXcsYvb56LLCC

app.js

@@ -761,8 +761,12 @@ function buildTables(filtered, chartsShown) {
             return metricHib ? va - vb : vb - va;
         });
 
-        // [speedup] pair optimized rows with their baseline for this table
+        // [speedup] pair optimized rows with their baseline for this table.
+        // The column is inserted right after the metric it compares (falls
+        // back to the far right if that metric is somehow not rendered).
         speedup.prepare(rows, { tableGroupCols, visibleMetrics, activeMetricCol });
+        const speedupAfterCol = colDefs.some(c => c.key === speedup.metricCol())
+            ? speedup.metricCol() : null;
 
         // Track row group for break detection
         let prevGroupVal = undefined;
@@ -778,9 +782,11 @@ function buildTables(filtered, chartsShown) {
         html += colDefs.map((c, i) => {
             const tip = c.description ? ` data-tip="${c.description.replace(/"/g, '"')}"` : '';
             const cls = i === firstMetricIdx ? ' class="first-metric metric-cell"' : (c.isMetric ? ' class="metric-cell"' : '');
-            return `<th${tip}${cls}>${c.label}</th>`;
+            let cell = `<th${tip}${cls}>${c.label}</th>`;
+            if (c.key === speedupAfterCol) cell += speedup.headerHtml();  // [speedup]
+            return cell;
         }).join("");
-        html += speedup.headerHtml();   // [speedup] extra right-hand column
+        if (!speedupAfterCol) html += speedup.headerHtml();   // [speedup] fallback
         html += `</tr></thead><tbody>`;
 
         // Compute best metric value per sub-group (tableGroupBy) per column
@@ -826,8 +832,9 @@ function buildTables(filtered, chartsShown) {
                 } else {
                     html += `<td>${val || "—"}</td>`;
                 }
+                if (c.key === speedupAfterCol) html += speedup.cellHtml(r);  // [speedup]
             });
-            html += speedup.cellHtml(r);   // [speedup] extra right-hand column
+            if (!speedupAfterCol) html += speedup.cellHtml(r);   // [speedup] fallback
             html += "</tr>";
         });
 

speedup.js

@@ -1,13 +1,13 @@
 // ─── Speedup vs Baseline Column ──────────────────────────────────────────────
 //
 // Extracted module. Call initSpeedup(deps) from the main app once globals are
-// ready.  Returns { prepare, headerHtml, cellHtml }.
+// ready.  Returns { prepare, headerHtml, cellHtml, metricCol }.
 //
 // The benchmark data is inherently paired: an external baseline model (e.g.
 // meta-llama/Llama-3.2-1B-Instruct) and the optimized embedl variants of it
 // (embedl/Llama-3.2-1B-Instruct-FlashHead, …) measured under identical
 // conditions. This module pairs them up and renders their ratio for the
-// active metric as an extra right-hand column in the benchmark tables.
+// active metric as an extra column right after that metric in the tables.
 
 // eslint-disable-next-line no-unused-vars
 function initSpeedup(deps) {
@@ -99,6 +99,12 @@ function prepare(rows, opts) {
 
 // ─── Rendering ───────────────────────────────────────────────────────────────
 
+/** Column key of the metric the ratio is based on, so the table can place the
+ *  speedup column right next to it. Null when the column is not shown. */
+function metricCol() {
+    return state ? state.metricCfg.column : null;
+}
+
 function headerHtml() {
     if (!state) return "";
     const m = state.metricCfg;
@@ -122,6 +128,6 @@ function cellHtml(row) {
         + `<span class="speedup-val${down}">${formatRatio(ratio)}</span></td>`;
 }
 
-return { prepare, headerHtml, cellHtml };
+return { prepare, headerHtml, cellHtml, metricCol };
 
 }