ai-research-survey

dashboard.ts (7573B)

---

 import { loadDashboard, type Dashboard, type Pipeline } from '../data';
 import { renderHistogram } from '../components/histogram';
 import { renderBarChart } from '../components/bar-chart';
 
 const GAME_DESCRIPTIONS: Record<string, string> = {
   'Overclaiming': 'Abstract claims not supported by results, or results generalized beyond what was tested.',
   'Big Numbers No Error Bars': 'Reports results with no confidence intervals, no variance, and no uncertainty quantification.',
   'Contamination Dodge': 'Evaluates on benchmarks without discussing whether the model saw the test data during training.',
   'Open Source Theater': 'Releases code but provides no environment specs or reproduction instructions. Technically "open" but practically unreproducible.',
   'Trust Us': 'No raw data released and no code released. Claims are completely unverifiable by independent researchers.',
   'Moving Goalpost': 'Makes causal claims ("X improves Y") from observational data without a causal study design.',
   'The Black Box': 'No prompts provided and no hyperparameters reported. The experiment cannot be replicated even in principle.',
   'Cherry-picked Comparisons': 'Baselines are outdated or suspiciously weak. Newer, stronger alternatives exist but are not compared against.',
   'All Show No Substance': 'Strong evaluation design (baselines, metrics, ablations) but near-zero statistical rigor and no artifact release.',
   'Limitation Theater': 'Has a limitations section, but it contains only generic boilerplate rather than specific threats to this study.',
 };
 
 function renderProgressBar(p: Pipeline): string {
   const total = p.registry_total;
   const scanned = p.v5_opus + p.v5_haiku + p.deprecated_scan;
   const opusPct = (p.v5_opus / total * 100).toFixed(1);
   const haikuPct = (p.v5_haiku / total * 100).toFixed(1);
   const depPct = (p.deprecated_scan / total * 100).toFixed(1);
   const nonePct = (p.not_scanned / total * 100).toFixed(1);
   const scannedPct = (scanned / total * 100).toFixed(1);
 
   return `<div class="pipeline-bar">
     <div class="pipeline-header">
       <span class="pipeline-title">Survey Progress</span>
       <span class="pipeline-stat">${scanned} of ${total} scanned (${scannedPct}%)</span>
     </div>
     <div class="pipeline-track">
       <div class="pipeline-seg v5opus" style="width:${opusPct}%" title="V5 Opus: ${p.v5_opus}"></div>
       <div class="pipeline-seg v5haiku" style="width:${haikuPct}%" title="V5 Haiku/Sonnet: ${p.v5_haiku}"></div>
       <div class="pipeline-seg deprecated" style="width:${depPct}%" title="Deprecated scan: ${p.deprecated_scan}"></div>
       <div class="pipeline-seg notscan" style="width:${nonePct}%" title="Not scanned: ${p.not_scanned}"></div>
     </div>
     <div class="pipeline-legend">
       <span><span class="pipeline-dot v5opus"></span>V5 Opus (${p.v5_opus})</span>
       <span><span class="pipeline-dot v5haiku"></span>V5 Haiku/Sonnet (${p.v5_haiku})</span>
       <span><span class="pipeline-dot deprecated"></span>Deprecated (${p.deprecated_scan})</span>
       <span><span class="pipeline-dot notscan"></span>Not scanned (${p.not_scanned})</span>
     </div>
   </div>`;
 }
 
 export async function renderDashboard(app: HTMLElement) {
   app.innerHTML = '<div class="spinner"></div>';
   const agg = await loadDashboard();
 
   const topGame = Object.entries(agg.game_pcts).sort((a, b) => b[1] - a[1])[0];
 
   const p = agg.pipeline;
   const scanned = p.v5_opus + p.v5_haiku + p.deprecated_scan;
   const scanPct = Math.round(scanned / p.registry_total * 100);
 
   app.innerHTML = `
     ${renderProgressBar(p)}
 
     <div class="cards">
       <div class="card"><div class="label">Papers Analyzed</div><div class="value">${agg.n}</div></div>
       <div class="card"><div class="label">Median Score</div><div class="value yellow">${agg.median}%</div></div>
       <div class="card"><div class="label">Full Reproducibility</div><div class="value red">${agg.full_reproducibility_pct}%</div></div>
       <div class="card"><div class="label">${topGame ? topGame[0] : 'N/A'}</div><div class="value red">${topGame ? topGame[1] + '%' : '—'}</div></div>
     </div>
 
     <div class="section">
       <h2>Score Distribution</h2>
       ${renderHistogram(agg.histogram)}
     </div>
 
     <div class="section">
       <h2>Category Pass Rates</h2>
       ${renderBarChart(Object.entries(agg.category_rates).map(([k, v]) => ({ label: k, value: v })))}
     </div>
 
     <div class="section">
       <h2>Year Trends</h2>
       ${renderYearTrends(agg.year_trends)}
     </div>
 
     <div class="section">
       <h2>Named Games</h2>
       <p style="font-size:0.82rem;color:var(--text-dim);margin-bottom:0.75rem">Recurring methodological anti-patterns detected by checklist combinations. Percentage = share of papers exhibiting the pattern.</p>
       ${Object.entries(agg.game_pcts).sort((a, b) => b[1] - a[1]).map(([name, pct]) =>
         `<div class="game-row"><div><span class="game-name">${name}</span><div class="game-desc">${GAME_DESCRIPTIONS[name] || ''}</div></div><span class="game-pct">${pct}%</span></div>`
       ).join('')}
     </div>
 
     <div class="section">
       <h2>Archetypes</h2>
       ${Object.entries(agg.archetype_counts).sort((a, b) => b[1] - a[1]).map(([name, count]) =>
         `<div class="game-row"><span><span class="archetype ${name}">${name}</span></span><span style="color:var(--text-dim);font-family:var(--font)">${count} (${Math.round(count / agg.n * 100)}%)</span></div>`
       ).join('')}
     </div>
   `;
 }
 
 function renderYearTrends(trends: Record<string, { n: number; mean: number; median: number }>): string {
   const years = Object.keys(trends).map(Number).sort();
   if (years.length < 2) return '<p>Not enough data for trends.</p>';
 
   const w = 500, h = 180;
   const pad = { l: 50, r: 20, t: 10, b: 30 };
   const chartW = w - pad.l - pad.r;
   const chartH = h - pad.t - pad.b;
 
   const minY = 0, maxY = 100;
   const xScale = (y: number) => pad.l + ((y - years[0]) / (years[years.length - 1] - years[0])) * chartW;
   const yScale = (v: number) => pad.t + chartH - ((v - minY) / (maxY - minY)) * chartH;
 
   const medianPoints = years.map(y => `${xScale(y)},${yScale(trends[y].median)}`).join(' ');
   const meanPoints = years.map(y => `${xScale(y)},${yScale(trends[y].mean)}`).join(' ');
 
   let labels = years.map(y =>
     `<text x="${xScale(y)}" y="${h - 5}" text-anchor="middle">${y}</text>`
   ).join('');
 
   for (let v = 0; v <= 100; v += 25) {
     labels += `<text x="${pad.l - 8}" y="${yScale(v) + 4}" text-anchor="end">${v}%</text>`;
     labels += `<line class="grid-line" x1="${pad.l}" x2="${w - pad.r}" y1="${yScale(v)}" y2="${yScale(v)}" stroke-dasharray="3"/>`;
   }
 
   const dataLabels = years.map(y => {
     const t = trends[y];
     return `<text x="${xScale(y)}" y="${yScale(t.median) - 8}" text-anchor="middle" fill="var(--yellow)" font-size="10">${t.median}% (n=${t.n})</text>`;
   }).join('');
 
   return `<svg viewBox="0 0 ${w} ${h}" class="trend-chart" style="width:100%;max-width:${w}px">
     ${labels}
     <polyline points="${medianPoints}" fill="none" stroke="var(--yellow)" stroke-width="2"/>
     <polyline points="${meanPoints}" fill="none" stroke="var(--accent)" stroke-width="2" stroke-dasharray="4"/>
     ${years.map(y => `<circle cx="${xScale(y)}" cy="${yScale(trends[y].median)}" r="3" fill="var(--yellow)"/>`).join('')}
     ${dataLabels}
     <text x="${w - pad.r}" y="${pad.t + 12}" text-anchor="end" fill="var(--yellow)" font-size="10">median</text>
     <text x="${w - pad.r}" y="${pad.t + 24}" text-anchor="end" fill="var(--accent)" font-size="10">mean</text>
   </svg>`;
 }