Show OE_acc and OE_scr side by side in cross-judge table

script.js

@@ -340,10 +340,6 @@ function renderSamples(active = carouselState.activeDimension, index = 0) {
   }
 }
 
-function getMetricLabel(metric) {
-  return metric === "oeAcc" ? "OE_acc" : "OE_scr";
-}
-
 function getMetricValue(item, metric) {
   return metric === "oeAcc" ? item.oeAcc : item.oeScr;
 }
@@ -385,10 +381,11 @@ function createToggleButton(label, isActive, onClick) {
 }
 
 function renderControls() {
-  if (!taskToggleRoot || !judgeToggleRoot || !metricToggleRoot) {
+  if (!taskToggleRoot || !judgeToggleRoot) {
     return;
   }
   const judgeToggleRow = judgeToggleRoot.closest(".toolbar-row");
+  const metricToggleRow = metricToggleRoot ? metricToggleRoot.closest(".toolbar-row") : null;
 
   const taskItems = [
     { key: "oe", label: "OE" },
@@ -407,13 +404,18 @@ function renderControls() {
   });
 
   judgeToggleRoot.innerHTML = "";
-  metricToggleRoot.innerHTML = "";
+  if (metricToggleRoot) {
+    metricToggleRoot.innerHTML = "";
+  }
 
   if (crossJudgeState.activeTask === "oe") {
     judgeToggleRoot.classList.remove("is-hidden");
     if (judgeToggleRow) {
       judgeToggleRow.classList.remove("is-hidden");
     }
+    if (metricToggleRow) {
+      metricToggleRow.classList.add("is-hidden");
+    }
 
     const judgeItems = [
       { key: "gpt4o", label: "GPT-4o (full set)" },
@@ -425,17 +427,6 @@ function renderControls() {
       });
       judgeToggleRoot.appendChild(button);
     });
-
-    const metricItems = [
-      { key: "oeAcc", label: "OE_acc" },
-      { key: "oeScr", label: "OE_scr" }
-    ];
-    metricItems.forEach((item) => {
-      const button = createToggleButton(item.label, item.key === crossJudgeState.activeMetric, () => {
-        renderResultsPanel(crossJudgeState.activeTask, crossJudgeState.activeJudge, item.key);
-      });
-      metricToggleRoot.appendChild(button);
-    });
     return;
   }
 
@@ -443,17 +434,21 @@ function renderControls() {
   if (judgeToggleRow) {
     judgeToggleRow.classList.add("is-hidden");
   }
-  const mcButton = createToggleButton("MC_acc", true, () => {});
-  mcButton.disabled = true;
-  metricToggleRoot.appendChild(mcButton);
+  if (metricToggleRow) {
+    metricToggleRow.classList.add("is-hidden");
+  }
 }
 
-function renderOeResults(activeJudge, activeMetric) {
+function renderOeResults(activeJudge) {
   const otherJudge = getOtherJudge(activeJudge);
   const currentRows = [...judgeResults[activeJudge].rows].sort((a, b) => {
-    const valueDiff = getMetricValue(b, activeMetric) - getMetricValue(a, activeMetric);
-    if (Math.abs(valueDiff) > 1e-6) {
-      return valueDiff;
+    const accDiff = b.oeAcc - a.oeAcc;
+    if (Math.abs(accDiff) > 1e-6) {
+      return accDiff;
+    }
+    const scrDiff = b.oeScr - a.oeScr;
+    if (Math.abs(scrDiff) > 1e-6) {
+      return scrDiff;
     }
     return a.rank - b.rank;
   });
@@ -461,21 +456,26 @@ function renderOeResults(activeJudge, activeMetric) {
 
   if (resultsCaptionRoot) {
     resultsCaptionRoot.textContent =
-      `${judgeResults[activeJudge].label} · Sorted by ${getMetricLabel(activeMetric)} · Δ vs ${judgeResults[activeJudge].deltaLabel}`;
+      `${judgeResults[activeJudge].label} · Sorted by OE_acc · per-metric deltas shown vs ${judgeResults[activeJudge].deltaLabel}`;
   }
 
   resultsRoot.innerHTML = "";
+  const header = document.createElement("div");
+  header.className = "results-head results-head-oe";
+  header.innerHTML = `
+    <div></div>
+    <div class="results-head-cell">Model</div>
+    <div class="results-head-cell results-head-cell-right">OE_acc</div>
+    <div class="results-head-cell results-head-cell-right">OE_scr</div>
+  `;
+  resultsRoot.appendChild(header);
+
   currentRows.forEach((item, index) => {
     const row = document.createElement("div");
-    row.className = `result-row${item.isOurs ? " ours" : ""}`;
-
-    const score = getMetricValue(item, activeMetric);
+    row.className = `result-row result-row-oe${item.isOurs ? " ours" : ""}`;
     const other = otherMap.get(item.model);
-    const delta = other ? score - getMetricValue(other, activeMetric) : 0;
-    const deltaClass = getDeltaClass(delta);
-    const deltaText = other
-      ? `${formatDeltaValue(delta, activeMetric)} vs ${judgeResults[activeJudge].deltaLabel}`
-      : "N/A";
+    const accDelta = other ? item.oeAcc - other.oeAcc : 0;
+    const scrDelta = other ? item.oeScr - other.oeScr : 0;
 
     row.innerHTML = `
       <div class="result-rank">#${index + 1}</div>
@@ -483,8 +483,14 @@ function renderOeResults(activeJudge, activeMetric) {
         <div class="result-model">${item.model}</div>
         ${item.isOurs ? '<span class="result-tag">Ours</span>' : ""}
       </div>
-      <div class="result-score">${formatMetricValue(score, activeMetric)}</div>
-      <div class="result-delta ${deltaClass}">${deltaText}</div>
+      <div class="result-metric-col acc" data-label="OE_acc">
+        <div class="result-score">${formatMetricValue(item.oeAcc, "oeAcc")}</div>
+        <div class="result-delta ${getDeltaClass(accDelta)}">${formatDeltaValue(accDelta, "oeAcc")}</div>
+      </div>
+      <div class="result-metric-col scr" data-label="OE_scr">
+        <div class="result-score">${formatMetricValue(item.oeScr, "oeScr")}</div>
+        <div class="result-delta ${getDeltaClass(scrDelta)}">${formatDeltaValue(scrDelta, "oeScr")}</div>
+      </div>
     `;
     resultsRoot.appendChild(row);
   });
@@ -497,9 +503,19 @@ function renderMcResults() {
   }
 
   resultsRoot.innerHTML = "";
+  const header = document.createElement("div");
+  header.className = "results-head results-head-mc";
+  header.innerHTML = `
+    <div></div>
+    <div class="results-head-cell">Model</div>
+    <div class="results-head-cell results-head-cell-right">MC_acc</div>
+    <div class="results-head-cell results-head-cell-right">Setting</div>
+  `;
+  resultsRoot.appendChild(header);
+
   ranked.forEach((item, index) => {
     const row = document.createElement("div");
-    row.className = `result-row${item.isOurs ? " ours" : ""}`;
+    row.className = `result-row result-row-mc${item.isOurs ? " ours" : ""}`;
     row.innerHTML = `
       <div class="result-rank">#${index + 1}</div>
       <div class="result-model-wrap">
@@ -529,7 +545,7 @@ function renderResultsPanel(
   if (crossJudgeState.activeTask === "mc") {
     renderMcResults();
   } else {
-    renderOeResults(crossJudgeState.activeJudge, crossJudgeState.activeMetric);
+    renderOeResults(crossJudgeState.activeJudge);
   }
 }
 

styles.css

@@ -585,10 +585,33 @@ code {
   gap: 8px;
 }
 
-.result-row {
+.results-head {
   display: grid;
+  align-items: center;
+  padding: 0 10px 2px;
+  color: #756f65;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.results-head-oe {
+  grid-template-columns: 54px minmax(0, 1fr) 94px 94px;
+  gap: 10px;
+}
+
+.results-head-mc {
   grid-template-columns: 54px minmax(0, 1fr) 90px minmax(130px, 170px);
   gap: 10px;
+}
+
+.results-head-cell-right {
+  text-align: right;
+}
+
+.result-row {
+  gap: 10px;
   align-items: center;
   padding: 8px 10px;
   border: 1px solid #ddd8cc;
@@ -596,6 +619,16 @@ code {
   background: #fcfbf8;
 }
 
+.result-row-oe {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr) 94px 94px;
+}
+
+.result-row-mc {
+  display: grid;
+  grid-template-columns: 54px minmax(0, 1fr) 90px minmax(130px, 170px);
+}
+
 .result-row.ours {
   border-color: #d89984;
   background: linear-gradient(90deg, #fff7f3 0%, #fffdfa 100%);
@@ -645,10 +678,16 @@ code {
   font-weight: 700;
 }
 
+.result-metric-col {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
 .result-delta {
   min-width: 0;
   text-align: right;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: #55514a;
 }
@@ -1106,27 +1145,72 @@ code {
     gap: 5px;
   }
 
-  .result-row {
+  .results-head {
+    display: none;
+  }
+
+  .result-row-mc {
     grid-template-columns: 46px minmax(0, 1fr) auto;
     gap: 6px 8px;
     align-items: start;
     padding: 8px;
   }
 
-  .result-model-wrap {
+  .result-row-mc .result-model-wrap {
     grid-column: 2;
     grid-row: 1;
   }
 
-  .result-score {
+  .result-row-mc .result-score {
     grid-column: 3;
     grid-row: 1;
   }
 
-  .result-delta {
+  .result-row-mc .result-delta {
     grid-column: 2 / 4;
     grid-row: 2;
     text-align: left;
   }
 
+  .result-row-oe {
+    grid-template-columns: 46px minmax(0, 1fr) minmax(72px, auto) minmax(72px, auto);
+    gap: 7px 8px;
+    align-items: start;
+    padding: 8px;
+  }
+
+  .result-row-oe .result-rank {
+    grid-column: 1;
+    grid-row: 1 / 3;
+  }
+
+  .result-row-oe .result-model-wrap {
+    grid-column: 2 / 5;
+    grid-row: 1;
+  }
+
+  .result-row-oe .result-metric-col {
+    display: grid;
+    gap: 1px;
+    justify-items: end;
+  }
+
+  .result-row-oe .result-metric-col.acc {
+    grid-column: 3;
+    grid-row: 2;
+  }
+
+  .result-row-oe .result-metric-col.scr {
+    grid-column: 4;
+    grid-row: 2;
+  }
+
+  .result-row-oe .result-metric-col::before {
+    content: attr(data-label);
+    font-size: 0.65rem;
+    font-weight: 700;
+    color: #7a7368;
+    letter-spacing: 0.03em;
+  }
+
 }