Add Expand and Collapse button for long samples in the detail section

backend/data_loader.py

@@ -593,6 +593,11 @@ def _norm_answer(value: Any) -> str:
     return str(value).strip()
 
 
+def _is_primitive_answer(value: Any) -> bool:
+    value = _py_scalar(value)
+    return value is not None and isinstance(value, (str, int, float, bool, np.integer, np.floating))
+
+
 def _pick_metric(
     metric: Dict[str, Any],
     benchmark_base: str,
@@ -810,10 +815,14 @@ def _read_detail_parquet(
         gold = rec.get("gold_answer") or rec.get("gold_verse_explanations")
 
         is_correct = None
-        gold_norm = _norm_answer(gold)
-        pred_norm = _norm_answer(predicted)
-        if gold_norm and pred_norm:
-            is_correct = (gold_norm == pred_norm)
+        binary_mode = _is_primitive_answer(gold) and _is_primitive_answer(predicted)
+        if binary_mode:
+            gold_norm = _norm_answer(gold)
+            pred_norm = _norm_answer(predicted)
+            if gold_norm and pred_norm:
+                is_correct = (gold_norm == pred_norm)
+                metric_key = "fannorflop"
+                metric_value = 1.0 if is_correct else 0.0
 
         rows.append(_make_simple_row(
             subtask=subtask,
@@ -899,8 +908,11 @@ def _read_detail_fannorflop_rows(records: List[Any], subtask: str, benchmark_bas
         predicted = rec.get("predicted_answer") or output
         gold = rec.get("gold_answer")
         is_correct = None
-        if gold not in (None, "") and predicted not in (None, ""):
+        binary_mode = _is_primitive_answer(gold) and _is_primitive_answer(predicted)
+        if binary_mode and gold not in (None, "") and predicted not in (None, ""):
             is_correct = (_norm_answer(gold) == _norm_answer(predicted))
+            metric_key = "fannorflop"
+            metric_value = 1.0 if is_correct else 0.0
         rows.append(_make_simple_row(
             subtask=subtask,
             question_id=rec.get("id"),

frontend/leaderboard.html

@@ -640,6 +640,22 @@
                     .replace(/>/g, ">")
                     .replace(/\"/g, """)
                     .replace(/'/g, "'");
+                const DETAIL_CELL_LIMIT = 260;
+                const expandableTextHtml = (value, idBase, limit = DETAIL_CELL_LIMIT) => {
+                    const raw = String(value ?? "");
+                    if (!raw) return "";
+                    if (raw.length <= limit) {
+                        return `<div class="whitespace-pre-wrap break-words">${escapeHtml(raw)}</div>`;
+                    }
+                    const short = `${raw.slice(0, limit).trimEnd()}...`;
+                    return `
+                        <div>
+                            <div id="${idBase}-short" class="whitespace-pre-wrap break-words">${escapeHtml(short)}</div>
+                            <div id="${idBase}-full" class="hidden whitespace-pre-wrap break-words">${escapeHtml(raw)}</div>
+                            <button type="button" onclick="window.toggleExpandText('${idBase}', this)" class="mt-2 inline-flex items-center gap-1 px-2 py-1 rounded-md border border-indigo-300 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 text-xs font-bold text-indigo-700 dark:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition-colors">Expand</button>
+                        </div>
+                    `;
+                };
 
                 let lbData = [], grid, maxMeta = 100, minMeta = 0, tableColumns = [];
                 let currentSort = { colId: null, dir: 'none' };
@@ -760,6 +776,16 @@
                     applyFilters();
                 }
 
+                window.toggleExpandText = function (idBase, btn) {
+                    const shortEl = document.getElementById(`${idBase}-short`);
+                    const fullEl = document.getElementById(`${idBase}-full`);
+                    if (!shortEl || !fullEl || !btn) return;
+                    const expanding = fullEl.classList.contains('hidden');
+                    shortEl.classList.toggle('hidden', expanding);
+                    fullEl.classList.toggle('hidden', !expanding);
+                    btn.innerText = expanding ? 'Collapse' : 'Expand';
+                };
+
                 // --- BENCHMARK DETAILS MODAL ---
                 window.openBenchmarkDetails = async function (modelName, benchmark) {
                     $('#benchmarkModalTitle').innerText = `${benchmark} Details — ${modelName}`;
@@ -815,11 +841,12 @@
                         `).join("");
 
                         const isCodeEvalBenchmark = benchmark === "HumanEval+" || benchmark === "MBPP+";
-                        $('#benchmarkRows').innerHTML = rows.map(r => {
+                        $('#benchmarkRows').innerHTML = rows.map((r, idx) => {
                             const promptColSpan = showSubtaskColumn ? "col-span-6" : "col-span-8";
                             const subtaskCell = showSubtaskColumn
                                 ? `<div class="col-span-2 text-slate-600 dark:text-slate-300">${escapeHtml(r.subtask)}</div>`
                                 : ``;
+                            const rowId = `bd-row-${idx}`;
                             let correctBadge = `<span class="text-slate-500 dark:text-slate-400 font-semibold">Unknown</span>`;
                             if (r.is_correct === true) {
                                 correctBadge = `<span class="text-emerald-600 dark:text-emerald-400 font-semibold">Correct</span>`;
@@ -830,12 +857,14 @@
                                 const scoreText = Number.isFinite(n) ? n.toFixed(4) : escapeHtml(r.metric);
                                 correctBadge = `<span class="text-sky-600 dark:text-sky-400 font-semibold">Score: ${scoreText}</span>`;
                             }
-                            const prompt = escapeHtml(
+                            const prompt = (
                                 isCodeEvalBenchmark
                                     ? formatDetailValue(r.prompt, false)
                                     : asUnknown(r.prompt)
                             );
-                            const output = escapeHtml(asUnknown(r.output));
+                            const output = asUnknown(r.output);
+                            const gold = formatDetailValue(r.gold_answer, !isCodeEvalBenchmark);
+                            const predicted = formatDetailValue(r.predicted_answer);
                             const sampleMeta = [
                                 r.question_id ? `id: ${escapeHtml(r.question_id)}` : null,
                                 r.metric !== null && r.metric !== undefined ? `score: ${escapeHtml(r.metric)}` : null,
@@ -845,13 +874,16 @@
                                 <div class="grid grid-cols-12 gap-3 px-4 py-3 text-xs">
                                     ${subtaskCell}
                                     <div class="${promptColSpan} text-slate-700 dark:text-slate-200">
-                                        <div class="font-semibold text-slate-800 dark:text-slate-100 whitespace-pre-wrap">${prompt}</div>
-                                        <div class="mt-2 text-slate-500 dark:text-slate-400 whitespace-pre-wrap"><span class="font-semibold">Output:</span> ${output}</div>
+                                        <div class="font-semibold text-slate-800 dark:text-slate-100">${expandableTextHtml(prompt, `${rowId}-prompt`)}</div>
+                                        <div class="mt-2 text-slate-500 dark:text-slate-400">
+                                            <span class="font-semibold">Output:</span>
+                                            ${expandableTextHtml(output, `${rowId}-output`)}
+                                        </div>
                                         ${sampleMeta ? `<div class="mt-1 text-slate-400 dark:text-slate-500">${sampleMeta}</div>` : ``}
                                         <div class="mt-1">${correctBadge}</div>
                                     </div>
-                                    <div class="col-span-2 text-slate-600 dark:text-slate-300 whitespace-pre-wrap">${escapeHtml(formatDetailValue(r.gold_answer, !isCodeEvalBenchmark))}</div>
-                                    <div class="col-span-2 text-slate-600 dark:text-slate-300 whitespace-pre-wrap">${escapeHtml(formatDetailValue(r.predicted_answer))}</div>
+                                    <div class="col-span-2 text-slate-600 dark:text-slate-300">${expandableTextHtml(gold, `${rowId}-gold`)}</div>
+                                    <div class="col-span-2 text-slate-600 dark:text-slate-300">${expandableTextHtml(predicted, `${rowId}-pred`)}</div>
                                 </div>
                             `;
                         }).join("");