loop-benchmarking

ScatterPlot.tsx (14834B)

---

 import React from "react";
 import { getModelColor, getModelFillColor, modelSortOrder } from "../lib/colors";
 import {
   ScatterChart,
   Scatter,
   XAxis,
   YAxis,
   ZAxis,
   CartesianGrid,
   ResponsiveContainer,
 } from "recharts";
 import { useXAxisScale, useYAxisScale } from "recharts";
 import type { Run } from "../lib/types";
 import { groupIntoCells } from "../lib/analysis";
 import ModelSelector from "./ModelSelector";
 
 interface ScatterPlotProps {
   runs: Run[];
   defaultX?: string;
   defaultY?: string;
 }
 
 type CellMetricKey =
   | "cost"
   | "score"
   | "turns"
   | "wall_time"
   | "gameplay"
   | "quality"
   | "code_quality"
   | "structural"
   | "sonarqube"
   | "transcript";
 
 interface MetricDef {
   label: string;
   cellKey: CellMetricKey;
   scale: number;
   format: (v: number) => string;
 }
 
 const METRIC_CONFIG: Record<string, MetricDef> = {
   cost: {
     label: "Cost ($)",
     cellKey: "cost",
     scale: 1,
     format: (v) => `$${v.toFixed(2)}`,
   },
   outcome: {
     label: "Outcome Score (%)",
     cellKey: "score",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   gameplay: {
     label: "Gameplay (%)",
     cellKey: "gameplay",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   quality: {
     label: "Quality (%)",
     cellKey: "quality",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   code_quality: {
     label: "Code Quality (%)",
     cellKey: "code_quality",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   structural: {
     label: "Structural (%)",
     cellKey: "structural",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   sonarqube: {
     label: "SonarQube (%)",
     cellKey: "sonarqube",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
   turns: {
     label: "Turns",
     cellKey: "turns",
     scale: 1,
     format: (v) => `${Math.round(v)}`,
   },
   wall_time: {
     label: "Time (s)",
     cellKey: "wall_time",
     scale: 1,
     format: (v) => `${Math.round(v)}s`,
   },
   transcript: {
     label: "Transcript (%)",
     cellKey: "transcript",
     scale: 100,
     format: (v) => `${v.toFixed(0)}%`,
   },
 };
 
 const METRIC_OPTIONS = Object.entries(METRIC_CONFIG).map(([key, conf]) => ({
   value: key,
   label: conf.label,
 }));
 
 function fallbackColor(model: string): string {
   return getModelColor(model);
 }
 
 function fallbackFillPrefix(model: string): string {
   return getModelFillColor(model);
 }
 
 // --- Convex hull (Andrew's monotone chain) ---
 
 type Point = [number, number];
 
 function cross(o: Point, a: Point, b: Point): number {
   return (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
 }
 
 function convexHull(points: Point[]): Point[] {
   const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
   if (sorted.length <= 2) return sorted;
 
   const lower: Point[] = [];
   for (const p of sorted) {
     while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], p) <= 0)
       lower.pop();
     lower.push(p);
   }
 
   const upper: Point[] = [];
   for (let i = sorted.length - 1; i >= 0; i--) {
     const p = sorted[i];
     while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], p) <= 0)
       upper.pop();
     upper.push(p);
   }
 
   return [...lower.slice(0, -1), ...upper.slice(0, -1)];
 }
 
 interface DensityHull {
   pct: number;      // e.g. 100, 75, 50, 25
   hull: Point[];
   opacity: number;
   strokeOpacity: number;
 }
 
 interface ModelRegion {
   model: string;
   points: Point[];
   centroid: Point;
   hulls: DensityHull[];
   n: number;
 }
 
 const DENSITY_LEVELS = [
   { pct: 100, opacity: 0.05, strokeOpacity: 0.20 },
   { pct: 75,  opacity: 0.10, strokeOpacity: 0.25 },
   { pct: 50,  opacity: 0.18, strokeOpacity: 0.35 },
   { pct: 25,  opacity: 0.30, strokeOpacity: 0.50 },
 ];
 
 function computeRegions(
   byModel: Record<string, { x: number; y: number }[]>
 ): ModelRegion[] {
   const regions: ModelRegion[] = [];
 
   for (const [model, data] of Object.entries(byModel)) {
     const points: Point[] = data.map((d) => [d.x, d.y]);
     if (points.length === 0) continue;
 
     const cx = points.reduce((s, p) => s + p[0], 0) / points.length;
     const cy = points.reduce((s, p) => s + p[1], 0) / points.length;
     const centroid: Point = [cx, cy];
 
     const byDist = [...points].sort((a, b) => {
       const da = (a[0] - cx) ** 2 + (a[1] - cy) ** 2;
       const db = (b[0] - cx) ** 2 + (b[1] - cy) ** 2;
       return da - db;
     });
 
     const hulls: DensityHull[] = [];
     for (const level of DENSITY_LEVELS) {
       const count = Math.max(1, Math.ceil(points.length * level.pct / 100));
       const subset = byDist.slice(0, count);
       const hull = subset.length >= 3 ? convexHull(subset) : [...subset];
       hulls.push({
         pct: level.pct,
         hull,
         opacity: level.opacity,
         strokeOpacity: level.strokeOpacity,
       });
     }
 
     regions.push({ model, points, centroid, hulls, n: points.length });
   }
 
   // Model sort order from shared colors
   return regions.sort((a, b) => modelSortOrder(a.model) - modelSortOrder(b.model));
 }
 
 interface CentroidDatum {
   model: string;
   cx: number;
   cy: number;
   n: number;
   xLabel: string;
   yLabel: string;
   xFormat: (v: number) => string;
   yFormat: (v: number) => string;
 }
 
 function HullLayer({
   regions,
   centroids,
   setHover,
 }: {
   regions: ModelRegion[];
   centroids: CentroidDatum[];
   setHover: (c: CentroidDatum | null) => void;
 }) {
   const xScale = useXAxisScale();
   const yScale = useYAxisScale();
 
   if (!xScale || !yScale) return null;
 
   const toSvg = (x: number, y: number): { sx: number; sy: number } => ({
     sx: xScale(x) ?? 0,
     sy: yScale(y) ?? 0,
   });
 
   const hullToPolygonPoints = (hull: Point[]): string =>
     hull
       .map((p) => {
         const { sx, sy } = toSvg(p[0], p[1]);
         return `${sx},${sy}`;
       })
       .join(" ");
 
   return (
     <g>
       {regions.map((region) => {
         const color = fallbackColor(region.model);
         const fillPrefix = fallbackFillPrefix(region.model);
 
         return (
           <g key={region.model}>
             {/* Density hulls - outer to inner */}
             {region.hulls.map((dh) =>
               dh.hull.length >= 3 ? (
                 <polygon
                   key={dh.pct}
                   points={hullToPolygonPoints(dh.hull)}
                   fill={`${fillPrefix} ${dh.opacity})`}
                   stroke={`${fillPrefix} ${dh.strokeOpacity})`}
                   strokeWidth={1}
                 />
               ) : null
             )}
             {/* For 1-2 point models, show individual dots */}
             {region.points.length <= 2 &&
               region.points.map((p, i) => {
                 const { sx, sy } = toSvg(p[0], p[1]);
                 return (
                   <circle
                     key={i}
                     cx={sx}
                     cy={sy}
                     r={5}
                     fill={color}
                     opacity={0.7}
                   />
                 );
               })}
           </g>
         );
       })}
       {/* Centroid dots rendered on top of all hulls */}
       {regions.map((region) => {
         const { sx, sy } = toSvg(region.centroid[0], region.centroid[1]);
         const color = fallbackColor(region.model);
         const centroidData = centroids.find((c) => c.model === region.model);
 
         return (
           <circle
             key={`centroid-${region.model}`}
             cx={sx}
             cy={sy}
             r={8}
             fill={color}
             stroke="hsl(217 16% 15.5%)"
             strokeWidth={2}
             style={{ cursor: "pointer" }}
             onMouseEnter={() => centroidData && setHover(centroidData)}
             onMouseLeave={() => setHover(null)}
           />
         );
       })}
     </g>
   );
 }
 
 function CentroidTooltip({ data }: { data: CentroidDatum }) {
   return (
     <div
       style={{
         background: "hsl(217 16% 15.5%)",
         border: "1px solid hsl(217 17% 28%)",
         borderRadius: "2px",
         fontFamily: "'JetBrains Mono', monospace",
         fontSize: "11px",
         padding: "8px 10px",
         lineHeight: "1.6",
         color: "hsl(213 14% 80%)",
         position: "absolute",
         pointerEvents: "none",
         zIndex: 10,
         top: 8,
         right: 8,
       }}
     >
       <div style={{ fontWeight: 600, marginBottom: 4 }}>{data.model}</div>
       <div>
         {data.xLabel}: {data.xFormat(data.cx)}
       </div>
       <div>
         {data.yLabel}: {data.yFormat(data.cy)}
       </div>
       <div style={{ marginTop: 2, color: "hsl(213 14% 55%)" }}>
         centroid of n={data.n} cell{data.n !== 1 ? "s" : ""}{data.n < 5 ? " (low n)" : ""}
       </div>
     </div>
   );
 }
 
 const selectStyle: React.CSSProperties = {
   background: "hsl(217 16% 15.5%)",
   color: "hsl(213 14% 80%)",
   border: "1px solid hsl(217 17% 28%)",
   borderRadius: "2px",
   fontFamily: "'JetBrains Mono', monospace",
   fontSize: "11px",
   padding: "4px 6px",
   cursor: "pointer",
 };
 
 export default function ScatterPlot({
   runs,
   defaultX = "cost",
   defaultY = "outcome",
 }: ScatterPlotProps) {
   const [xMetric, setXMetric] = React.useState(defaultX);
   const [yMetric, setYMetric] = React.useState(defaultY);
   const [visibleModels, setVisibleModels] = React.useState<Set<string> | null>(null);
 
   const xConf = METRIC_CONFIG[xMetric];
   const yConf = METRIC_CONFIG[yMetric];
   if (!xConf || !yConf) return null;
 
   const cells = groupIntoCells(runs);
 
   const byModel: Record<string, { x: number; y: number }[]> = {};
   let totalCells = 0;
 
   for (const cell of cells) {
     const xAgg = cell[xConf.cellKey];
     const yAgg = cell[yConf.cellKey];
     if (xAgg.avg === 0 && xAgg.min === 0 && xAgg.max === 0) continue;
     if (yAgg.avg === 0 && yAgg.min === 0 && yAgg.max === 0) continue;
 
     const xAvg = xAgg.avg * xConf.scale;
     const yAvg = yAgg.avg * yConf.scale;
 
     const model = cell.meta.model;
     if (!byModel[model]) byModel[model] = [];
     byModel[model].push({ x: xAvg, y: yAvg });
     totalCells++;
   }
 
   // All models present in data (stable order)
   // Model sort order from shared colors
   const allModels = Object.keys(byModel).sort(
     (a, b) => modelSortOrder(a) - modelSortOrder(b)
   );
 
   // Initialize visibleModels on first render or when models change
   const effectiveVisible = visibleModels ?? new Set(allModels);
 
   const handleModelChange = (models: Set<string>) => {
     setVisibleModels(models);
   };
 
   // Compute regions from ALL data (for stable axis domains)
   const allRegions = computeRegions(byModel);
 
   // Filter to visible models for rendering
   const regions = allRegions.filter((r) => effectiveVisible.has(r.model));
 
   const centroids: CentroidDatum[] = regions.map((r) => ({
     model: r.model,
     cx: r.centroid[0],
     cy: r.centroid[1],
     n: r.n,
     xLabel: xConf.label,
     yLabel: yConf.label,
     xFormat: xConf.format,
     yFormat: yConf.format,
   }));
 
   const [hovered, setHovered] = React.useState<CentroidDatum | null>(null);
 
   // Compute axis domains with padding (from ALL data, not just visible)
   const allX = allRegions.flatMap((r) => r.points.map((p) => p[0]));
   const allY = allRegions.flatMap((r) => r.points.map((p) => p[1]));
   const xMin = Math.min(...allX);
   const xMax = Math.max(...allX);
   const yMin = Math.min(...allY);
   const yMax = Math.max(...allY);
   const xPad = (xMax - xMin) * 0.08 || 1;
   const yPad = (yMax - yMin) * 0.08 || 1;
 
   return (
     <div className="card" style={{ position: "relative" }}>
       <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "16px", flexWrap: "wrap" }}>
         <select
           value={xMetric}
           onChange={(e) => setXMetric(e.target.value)}
           style={selectStyle}
         >
           {METRIC_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
         <span style={{ fontSize: "12px", color: "hsl(213 14% 55%)" }}>vs</span>
         <select
           value={yMetric}
           onChange={(e) => setYMetric(e.target.value)}
           style={selectStyle}
         >
           {METRIC_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
         <span
           style={{
             fontSize: "10px",
             fontFamily: "'JetBrains Mono', monospace",
             fontWeight: 400,
             color: "hsl(213 14% 55%)",
           }}
         >
           (n={runs.length} runs across {totalCells} cells)
         </span>
       </div>
 
       {/* Model toggles */}
       <div style={{ marginBottom: "12px" }}>
         <ModelSelector
           allModels={allModels}
           selectedModels={effectiveVisible}
           onChange={handleModelChange}
         />
         {/* Low-n warnings for models with <5 cells */}
         {(() => {
           const lowNModels = allModels.filter((m) => effectiveVisible.has(m) && (byModel[m]?.length ?? 0) < 5 && (byModel[m]?.length ?? 0) > 0);
           if (lowNModels.length === 0) return null;
           return (
             <div style={{ marginTop: "4px", textAlign: "center" }}>
               {lowNModels.map((m) => (
                 <span key={m} style={{ fontSize: "10px", fontFamily: "'JetBrains Mono', monospace", color: "var(--yellow, hsl(40 95% 64%))", marginRight: "12px" }}>
                   {m}: n={byModel[m]?.length ?? 0} cells (low n)
                 </span>
               ))}
             </div>
           );
         })()}
       </div>
 
       {hovered && <CentroidTooltip data={hovered} />}
 
       <ResponsiveContainer width="100%" height={350}>
         <ScatterChart margin={{ top: 10, right: 20, bottom: 10, left: 10 }}>
           <CartesianGrid
             strokeDasharray="3 3"
             stroke="hsl(217 17% 28%)"
           />
           <XAxis
             dataKey="x"
             name={xConf.label}
             type="number"
             domain={[xMin - xPad, xMax + xPad]}
             stroke="hsl(213 14% 65%)"
             fontSize={11}
             tickFormatter={(v) => xConf.format(v)}
           />
           <YAxis
             dataKey="y"
             name={yConf.label}
             type="number"
             domain={[yMin - yPad, yMax + yPad]}
             stroke="hsl(213 14% 65%)"
             fontSize={11}
             tickFormatter={(v) => yConf.format(v)}
           />
           {/* Hidden scatter to seed axis scales with data */}
           <ZAxis range={[0, 0]} />
           <Scatter
             data={allRegions.flatMap((r) => r.points.map((p) => ({ x: p[0], y: p[1] })))}
             fill="transparent"
             isAnimationActive={false}
           />
           <HullLayer
             regions={regions}
             centroids={centroids}
             setHover={setHovered}
           />
         </ScatterChart>
       </ResponsiveContainer>
     </div>
   );
 }