Update Benchmark tab with live 'Run Benchmark Now' that calls API and populates real data"

web/src/components/tabs/Benchmark.tsx

@@ -7,35 +7,82 @@ import {
   BarChart, Bar, XAxis, YAxis, CartesianGrid,
 } from "recharts";
 
-const DEMO_AGGREGATE = {
-  numSamples: 100,
-  baseline: { avgF1: 0.5523, avgEM: 0.3810, avgContextHit: 0.4520, avgTokens: 952, avgCost: 0.000203, avgLatency: 1240 },
-  graphrag: { avgF1: 0.6241, avgEM: 0.4230, avgContextHit: 0.5830, avgTokens: 2387, avgCost: 0.000518, avgLatency: 3820 },
-  f1WinRate: 0.62,
-  byType: [
-    { type: "bridge", count: 58, baselineF1: 0.52, graphragF1: 0.63 },
-    { type: "comparison", count: 42, baselineF1: 0.58, graphragF1: 0.61 },
-  ],
-};
+interface AggregateData {
+  numSamples: number;
+  baseline: { avgF1: number; avgEM: number; avgTokens: number; avgCost: number; avgLatency: number };
+  graphrag: { avgF1: number; avgEM: number; avgTokens: number; avgCost: number; avgLatency: number };
+  graphragF1WinRate: number;
+  byType: {
+    bridge?: { count: number; baselineF1: number; graphragF1: number } | null;
+    comparison?: { count: number; baselineF1: number; graphragF1: number } | null;
+  };
+}
 
-const radarData = [
-  { metric: "F1 Score", Baseline: 55, GraphRAG: 62 },
-  { metric: "Exact Match", Baseline: 38, GraphRAG: 42 },
-  { metric: "Context Hit", Baseline: 45, GraphRAG: 58 },
-  { metric: "Token Eff.", Baseline: 90, GraphRAG: 40 },
-  { metric: "Cost Eff.", Baseline: 85, GraphRAG: 35 },
-];
+const INITIAL: AggregateData = {
+  numSamples: 0,
+  baseline: { avgF1: 0, avgEM: 0, avgTokens: 0, avgCost: 0, avgLatency: 0 },
+  graphrag: { avgF1: 0, avgEM: 0, avgTokens: 0, avgCost: 0, avgLatency: 0 },
+  graphragF1WinRate: 0,
+  byType: {},
+};
 
 export function Benchmark() {
   const [running, setRunning] = useState(false);
-  const [samples, setSamples] = useState(50);
-  const [data] = useState(DEMO_AGGREGATE);
+  const [samples, setSamples] = useState(10);
+  const [data, setData] = useState<AggregateData>(INITIAL);
+  const [report, setReport] = useState("");
+  const [demoMode, setDemoMode] = useState(false);
+  const [hasResults, setHasResults] = useState(false);
+
+  const runBenchmark = async () => {
+    setRunning(true);
+    setReport("Running benchmark...");
+    try {
+      const res = await fetch("/api/benchmark", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ numSamples: samples }),
+      });
+      const result = await res.json();
+      setData(result.aggregate);
+      setDemoMode(result.demoMode ?? false);
+      setHasResults(true);
 
-  const typeData = data.byType.map((t) => ({
-    name: t.type.charAt(0).toUpperCase() + t.type.slice(1),
-    Baseline: +(t.baselineF1 * 100).toFixed(1),
-    GraphRAG: +(t.graphragF1 * 100).toFixed(1),
-  }));
+      // Build report text
+      const a = result.aggregate;
+      const lines = [
+        `BENCHMARK RESULTS (${a.numSamples} samples, ${result.provider}/${result.model})`,
+        `${result.demoMode ? "⚠️ DEMO MODE — Set API key for real results" : "✅ LIVE RESULTS"}`,
+        "",
+        `Metric                Baseline     GraphRAG     Winner`,
+        `${"─".repeat(60)}`,
+        `Avg F1                ${a.baseline.avgF1.toFixed(4)}       ${a.graphrag.avgF1.toFixed(4)}       ${a.graphrag.avgF1 > a.baseline.avgF1 ? "GraphRAG" : "Baseline"}`,
+        `Avg EM                ${a.baseline.avgEM.toFixed(4)}       ${a.graphrag.avgEM.toFixed(4)}       ${a.graphrag.avgEM > a.baseline.avgEM ? "GraphRAG" : "Baseline"}`,
+        `Avg Tokens            ${a.baseline.avgTokens}            ${a.graphrag.avgTokens}            ${a.baseline.avgTokens < a.graphrag.avgTokens ? "Baseline" : "GraphRAG"}`,
+        `Avg Cost ($)          ${a.baseline.avgCost.toFixed(6)}   ${a.graphrag.avgCost.toFixed(6)}`,
+        `Avg Latency (ms)      ${a.baseline.avgLatency}            ${a.graphrag.avgLatency}`,
+        "",
+        `GraphRAG F1 Win Rate: ${(a.graphragF1WinRate * 100).toFixed(0)}%`,
+        `Token Ratio: ${a.graphrag.avgTokens > 0 && a.baseline.avgTokens > 0 ? (a.graphrag.avgTokens / a.baseline.avgTokens).toFixed(1) : "N/A"}x`,
+      ];
+      setReport(lines.join("\n"));
+    } catch (err) {
+      setReport(`Error: ${err}`);
+    }
+    setRunning(false);
+  };
+
+  const radarData = hasResults ? [
+    { metric: "F1 Score", Baseline: +(data.baseline.avgF1 * 100).toFixed(0), GraphRAG: +(data.graphrag.avgF1 * 100).toFixed(0) },
+    { metric: "Exact Match", Baseline: +(data.baseline.avgEM * 100).toFixed(0), GraphRAG: +(data.graphrag.avgEM * 100).toFixed(0) },
+    { metric: "Speed", Baseline: 85, GraphRAG: Math.max(10, 100 - Math.round(data.graphrag.avgLatency / Math.max(data.baseline.avgLatency, 1) * 30)) },
+    { metric: "Cost Eff.", Baseline: 85, GraphRAG: Math.max(10, 100 - Math.round(data.graphrag.avgCost / Math.max(data.baseline.avgCost, 0.000001) * 20)) },
+    { metric: "Win Rate", Baseline: +((1 - data.graphragF1WinRate) * 100).toFixed(0), GraphRAG: +(data.graphragF1WinRate * 100).toFixed(0) },
+  ] : [];
+
+  const typeData = [];
+  if (data.byType.bridge) typeData.push({ name: "Bridge", Baseline: +(data.byType.bridge.baselineF1 * 100).toFixed(1), GraphRAG: +(data.byType.bridge.graphragF1 * 100).toFixed(1) });
+  if (data.byType.comparison) typeData.push({ name: "Comparison", Baseline: +(data.byType.comparison.baselineF1 * 100).toFixed(1), GraphRAG: +(data.byType.comparison.graphragF1 * 100).toFixed(1) });
 
   return (
     <div>
@@ -45,114 +92,139 @@ export function Benchmark() {
           <div>
             <div className="display-sm mb-2">Batch Benchmark</div>
             <p className="body-sm" style={{ color: "#6c6a64" }}>
-              Run both pipelines on HotpotQA multi-hop questions
+              Run both pipelines on HotpotQA questions and evaluate F1, EM, tokens, cost
             </p>
           </div>
           <div className="flex items-center gap-4 ml-auto">
             <label className="caption">
               Samples
-              <input
-                type="range"
-                min={10}
-                max={500}
-                step={10}
-                value={samples}
-                onChange={(e) => setSamples(+e.target.value)}
-                className="block w-32 mt-1 accent-[#FF6B00]"
-              />
+              <input type="range" min={5} max={10} step={1} value={samples}
+                onChange={e => setSamples(+e.target.value)} className="block w-32 mt-1 accent-[#FF6B00]" />
               <span className="body-sm font-mono">{samples}</span>
             </label>
-            <button className="btn btn-primary" onClick={() => setRunning(true)} disabled={running}>
-              {running ? "Running…" : "🏃 Run Benchmark"}
+            <button className="btn btn-primary" onClick={runBenchmark} disabled={running}>
+              {running ? (
+                <span className="flex items-center gap-2">
+                  <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
+                  Running…
+                </span>
+              ) : "🏃 Run Benchmark Now"}
             </button>
           </div>
         </div>
+        {demoMode && hasResults && (
+          <div className="mt-3 body-sm" style={{ color: "#d4a017" }}>
+            ⚠️ Demo mode — showing simulated results. Set an API key for real benchmark data.
+          </div>
+        )}
       </div>
 
-      {/* Summary Metrics */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-        {[
-          { label: "Avg F1 (Baseline)", value: data.baseline.avgF1.toFixed(4), color: "#0072CE" },
-          { label: "Avg F1 (GraphRAG)", value: data.graphrag.avgF1.toFixed(4), color: "#FF6B00" },
-          { label: "GraphRAG Win Rate", value: (data.f1WinRate * 100).toFixed(0) + "%", color: "#5db872" },
-          { label: "Samples Evaluated", value: data.numSamples.toString(), color: "#002B49" },
-        ].map((m, i) => (
-          <div key={i} className="card-cream text-center" style={{ padding: "20px" }}>
-            <div className="metric-value-sm" style={{ color: m.color }}>{m.value}</div>
-            <div className="metric-label">{m.label}</div>
+      {hasResults && (
+        <>
+          {/* Summary Cards */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            {[
+              { label: "Avg F1 (Baseline)", value: data.baseline.avgF1.toFixed(4), color: "#0072CE" },
+              { label: "Avg F1 (GraphRAG)", value: data.graphrag.avgF1.toFixed(4), color: "#FF6B00" },
+              { label: "GraphRAG Win Rate", value: (data.graphragF1WinRate * 100).toFixed(0) + "%", color: "#5db872" },
+              { label: "Samples Evaluated", value: data.numSamples.toString(), color: "#002B49" },
+            ].map((m, i) => (
+              <div key={i} className="card-cream text-center" style={{ padding: "20px" }}>
+                <div className="metric-value-sm" style={{ color: m.color }}>{m.value}</div>
+                <div className="metric-label">{m.label}</div>
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-        {/* Radar Chart */}
-        <div className="card">
-          <div className="title-md mb-4">Multi-Metric Radar</div>
-          <ResponsiveContainer width="100%" height={340}>
-            <RadarChart data={radarData}>
-              <PolarGrid stroke="#002B49" strokeOpacity={0.12} />
-              <PolarAngleAxis dataKey="metric" tick={{ fill: "#6c6a64", fontSize: 12 }} />
-              <Radar name="Baseline" dataKey="Baseline" stroke="#0072CE" fill="#0072CE" fillOpacity={0.15} strokeWidth={2} />
-              <Radar name="GraphRAG" dataKey="GraphRAG" stroke="#FF6B00" fill="#FF6B00" fillOpacity={0.15} strokeWidth={2} />
-              <Legend />
-              <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }} />
-            </RadarChart>
-          </ResponsiveContainer>
-        </div>
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            {/* Radar */}
+            {radarData.length > 0 && (
+              <div className="card">
+                <div className="title-md mb-4">Multi-Metric Radar</div>
+                <ResponsiveContainer width="100%" height={340}>
+                  <RadarChart data={radarData}>
+                    <PolarGrid stroke="#002B49" strokeOpacity={0.12} />
+                    <PolarAngleAxis dataKey="metric" tick={{ fill: "#6c6a64", fontSize: 12 }} />
+                    <Radar name="Baseline" dataKey="Baseline" stroke="#0072CE" fill="#0072CE" fillOpacity={0.15} strokeWidth={2} />
+                    <Radar name="GraphRAG" dataKey="GraphRAG" stroke="#FF6B00" fill="#FF6B00" fillOpacity={0.15} strokeWidth={2} />
+                    <Legend /><Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }} />
+                  </RadarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
 
-        {/* By Question Type */}
-        <div className="card">
-          <div className="title-md mb-4">F1 by Question Type</div>
-          <ResponsiveContainer width="100%" height={340}>
-            <BarChart data={typeData} margin={{ top: 20, right: 20, left: 0, bottom: 0 }}>
-              <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.08} />
-              <XAxis dataKey="name" tick={{ fill: "#6c6a64", fontSize: 13 }} />
-              <YAxis domain={[0, 100]} tick={{ fill: "#6c6a64", fontSize: 12 }} />
-              <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }} />
-              <Legend />
-              <Bar dataKey="Baseline" fill="#0072CE" radius={[4, 4, 0, 0]} />
-              <Bar dataKey="GraphRAG" fill="#FF6B00" radius={[4, 4, 0, 0]} />
-            </BarChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
+            {/* By Type */}
+            {typeData.length > 0 && (
+              <div className="card">
+                <div className="title-md mb-4">F1 by Question Type</div>
+                <ResponsiveContainer width="100%" height={340}>
+                  <BarChart data={typeData} margin={{ top: 20, right: 20, left: 0, bottom: 0 }}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#002B49" strokeOpacity={0.08} />
+                    <XAxis dataKey="name" tick={{ fill: "#6c6a64", fontSize: 13 }} />
+                    <YAxis domain={[0, 100]} tick={{ fill: "#6c6a64", fontSize: 12 }} />
+                    <Tooltip contentStyle={{ background: "#faf9f5", border: "1px solid #e6dfd8", borderRadius: "8px" }} />
+                    <Legend />
+                    <Bar dataKey="Baseline" fill="#0072CE" radius={[4, 4, 0, 0]} />
+                    <Bar dataKey="GraphRAG" fill="#FF6B00" radius={[4, 4, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            )}
+          </div>
 
-      {/* Detailed Table */}
-      <div className="card">
-        <div className="title-md mb-4">Detailed Comparison</div>
-        <div className="overflow-x-auto">
-          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem" }}>
-            <thead>
-              <tr style={{ borderBottom: "2px solid var(--color-hairline)" }}>
-                {["Metric", "Baseline RAG", "GraphRAG", "Winner"].map((h) => (
-                  <th key={h} className="caption-uppercase text-left" style={{ padding: "12px 16px" }}>{h}</th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {[
-                { metric: "Avg F1 Score", b: data.baseline.avgF1.toFixed(4), g: data.graphrag.avgF1.toFixed(4), winner: "graphrag" },
-                { metric: "Avg Exact Match", b: data.baseline.avgEM.toFixed(4), g: data.graphrag.avgEM.toFixed(4), winner: "graphrag" },
-                { metric: "Avg Context Hit", b: data.baseline.avgContextHit.toFixed(4), g: data.graphrag.avgContextHit.toFixed(4), winner: "graphrag" },
-                { metric: "Avg Tokens/Query", b: data.baseline.avgTokens.toFixed(0), g: data.graphrag.avgTokens.toFixed(0), winner: "baseline" },
-                { metric: "Avg Cost ($)", b: "$" + data.baseline.avgCost.toFixed(6), g: "$" + data.graphrag.avgCost.toFixed(6), winner: "baseline" },
-                { metric: "Avg Latency (ms)", b: data.baseline.avgLatency.toFixed(0), g: data.graphrag.avgLatency.toFixed(0), winner: "baseline" },
-              ].map((row, i) => (
-                <tr key={i} style={{ borderBottom: "1px solid var(--color-hairline-soft)" }}>
-                  <td className="title-sm" style={{ padding: "12px 16px" }}>{row.metric}</td>
-                  <td style={{ padding: "12px 16px", fontFamily: "var(--font-mono)", color: "#0072CE" }}>{row.b}</td>
-                  <td style={{ padding: "12px 16px", fontFamily: "var(--font-mono)", color: "#FF6B00" }}>{row.g}</td>
-                  <td style={{ padding: "12px 16px" }}>
-                    <span className={row.winner === "graphrag" ? "badge-orange" : "badge-blue"} style={{ fontSize: "0.6875rem" }}>
-                      {row.winner === "graphrag" ? "GraphRAG" : "Baseline"}
-                    </span>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+          {/* Detailed Table */}
+          <div className="card mb-6">
+            <div className="title-md mb-4">Detailed Comparison</div>
+            <div className="overflow-x-auto">
+              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.875rem" }}>
+                <thead>
+                  <tr style={{ borderBottom: "2px solid var(--color-hairline)" }}>
+                    {["Metric", "Baseline RAG", "GraphRAG", "Winner"].map(h => (
+                      <th key={h} className="caption-uppercase text-left" style={{ padding: "12px 16px" }}>{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    { metric: "Avg F1 Score", b: data.baseline.avgF1.toFixed(4), g: data.graphrag.avgF1.toFixed(4), winner: data.graphrag.avgF1 > data.baseline.avgF1 ? "graphrag" : "baseline" },
+                    { metric: "Avg Exact Match", b: data.baseline.avgEM.toFixed(4), g: data.graphrag.avgEM.toFixed(4), winner: data.graphrag.avgEM > data.baseline.avgEM ? "graphrag" : "baseline" },
+                    { metric: "Avg Tokens/Query", b: data.baseline.avgTokens.toString(), g: data.graphrag.avgTokens.toString(), winner: data.baseline.avgTokens < data.graphrag.avgTokens ? "baseline" : "graphrag" },
+                    { metric: "Avg Cost ($)", b: "$" + data.baseline.avgCost.toFixed(6), g: "$" + data.graphrag.avgCost.toFixed(6), winner: data.baseline.avgCost < data.graphrag.avgCost ? "baseline" : "graphrag" },
+                    { metric: "Avg Latency (ms)", b: data.baseline.avgLatency.toString(), g: data.graphrag.avgLatency.toString(), winner: data.baseline.avgLatency < data.graphrag.avgLatency ? "baseline" : "graphrag" },
+                    { metric: "F1 Win Rate", b: ((1 - data.graphragF1WinRate) * 100).toFixed(0) + "%", g: (data.graphragF1WinRate * 100).toFixed(0) + "%", winner: data.graphragF1WinRate > 0.5 ? "graphrag" : "baseline" },
+                  ].map((row, i) => (
+                    <tr key={i} style={{ borderBottom: "1px solid var(--color-hairline-soft)" }}>
+                      <td className="title-sm" style={{ padding: "12px 16px" }}>{row.metric}</td>
+                      <td style={{ padding: "12px 16px", fontFamily: "var(--font-mono)", color: "#0072CE" }}>{row.b}</td>
+                      <td style={{ padding: "12px 16px", fontFamily: "var(--font-mono)", color: "#FF6B00" }}>{row.g}</td>
+                      <td style={{ padding: "12px 16px" }}>
+                        <span className={row.winner === "graphrag" ? "badge-orange" : "badge-blue"} style={{ fontSize: "0.6875rem" }}>
+                          {row.winner === "graphrag" ? "GraphRAG ✓" : "Baseline ✓"}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      )}
+
+      {/* Report */}
+      {report && (
+        <div className="card-dark">
+          <div className="code-window-header">
+            <div className="code-window-dot code-window-dot-red" />
+            <div className="code-window-dot code-window-dot-yellow" />
+            <div className="code-window-dot code-window-dot-green" />
+            <span className="body-sm" style={{ color: "#a09d96", marginLeft: "8px" }}>benchmark_report.txt</span>
+          </div>
+          <pre className="code-window-body" style={{ whiteSpace: "pre-wrap", fontSize: "0.8125rem" }}>
+            {report}
+          </pre>
         </div>
-      </div>
+      )}
     </div>
   );
 }