loop-benchmarking

ConfigTreemap.tsx (9319B)

---

 import React, { useState, useCallback } from "react";
 import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
 import type { TreemapNode } from "recharts/types/chart/Treemap";
 import type { Run, AxisName } from "../lib/types";
 import { groupIntoCells, type Cell } from "../lib/analysis";
 
 interface ConfigTreemapProps {
   runs: Run[];
 }
 
 const SECONDARY_AXES: AxisName[] = [
   "prompt_style",
   "effort",
   "language",
   "human_language",
   "linter",
   "playwright",
   "context_file",
   "web_search",
   "max_budget",
   "tests_provided",
   "strategy",
   "design_guidance",
   "architecture",
   "error_checking",
   "context_noise",
   "renderer",
 ];
 
 function scoreColor(avgScore: number | null): string {
   if (avgScore === null) return "hsl(213 14% 30%)";
   const pct = avgScore * 100;
   if (pct > 60) return "hsl(92 28% 45%)";
   if (pct >= 30) return "hsl(40 71% 50%)";
   return "hsl(355 52% 48%)";
 }
 
 interface LeafData {
   name: string;
   displayName: string;
   size: number;
   avgScore: number | null;
   avgScorePct: string;
   model: string;
   configValue: string;
   color: string;
   [key: string]: unknown;
 }
 
 interface GroupData {
   name: string;
   children: LeafData[];
   [key: string]: unknown;
 }
 
 function buildTreeData(runs: Run[], secondaryAxis: AxisName): GroupData[] {
   const cells = groupIntoCells(runs);
   const byModel: Record<string, Record<string, Cell[]>> = {};
 
   for (const cell of cells) {
     const model = cell.meta.model;
     const secondary = String(cell.meta[secondaryAxis]);
     if (!byModel[model]) byModel[model] = {};
     if (!byModel[model][secondary]) byModel[model][secondary] = [];
     byModel[model][secondary].push(cell);
   }
 
   return Object.entries(byModel)
     .sort(([a], [b]) => a.localeCompare(b))
     .map(([model, configs]) => ({
       name: model,
       children: Object.entries(configs)
         .sort(([a], [b]) => a.localeCompare(b))
         .map(([configValue, configCells]) => {
           const scoredCells = configCells.filter((c) => c.score.avg > 0);
           const avgScore =
             scoredCells.length > 0
               ? scoredCells.reduce((s, c) => s + c.score.avg, 0) / scoredCells.length
               : null;
 
           return {
             name: `${model} / ${configValue}`,
             displayName: `${model} / ${configValue}`,
             size: configCells.length,
             avgScore,
             avgScorePct:
               avgScore !== null ? `${(avgScore * 100).toFixed(0)}%` : "--",
             model,
             configValue,
             color: scoreColor(avgScore),
           };
         }),
     }));
 }
 
 function CustomContent(props: TreemapNode): React.ReactElement {
   const { x, y, width, height, depth, name } = props;
 
   // Only render leaf nodes (depth === 2 in a two-level hierarchy via 'flat' type)
   // depth 1 = model group, depth 2 = leaf
   if (depth < 2) return <g />;
 
   const avgScorePct = (props as unknown as LeafData).avgScorePct ?? "--";
   const count = (props as unknown as LeafData).size ?? 0;
   const color = (props as unknown as LeafData).color ?? "hsl(213 14% 30%)";
 
   const showText = width > 50 && height > 36;
   const showCount = width > 50 && height > 50;
 
   return (
     <g>
       <rect
         x={x}
         y={y}
         width={width}
         height={height}
         fill={color}
         stroke="hsl(213 16% 12%)"
         strokeWidth={2}
       />
       {showText && (
         <>
           <text
             x={x + width / 2}
             y={y + height / 2 - (showCount ? 8 : 0)}
             textAnchor="middle"
             dominantBaseline="central"
             fill="hsl(213 27% 95%)"
             style={{
               fontFamily: "'JetBrains Mono', monospace",
               fontSize: "11px",
               fontWeight: 600,
               textTransform: "uppercase",
             }}
           >
             {width > 100 ? name : (props as unknown as LeafData).configValue}
           </text>
           <text
             x={x + width / 2}
             y={y + height / 2 + 8}
             textAnchor="middle"
             dominantBaseline="central"
             fill="hsl(213 27% 95%)"
             style={{
               fontFamily: "'JetBrains Mono', monospace",
               fontSize: "11px",
               fontWeight: 500,
               textTransform: "uppercase",
             }}
           >
             {avgScorePct}
           </text>
           {showCount && (
             <text
               x={x + width / 2}
               y={y + height / 2 + 22}
               textAnchor="middle"
               dominantBaseline="central"
               fill="hsla(213, 27%, 95%, 0.65)"
               style={{
                 fontFamily: "'JetBrains Mono', monospace",
                 fontSize: "11px",
                 fontWeight: 400,
                 textTransform: "uppercase",
               }}
             >
               n={count}
             </text>
           )}
         </>
       )}
     </g>
   );
 }
 
 function CustomTooltip({
   active,
   payload,
 }: {
   active?: boolean;
   payload?: Array<{ payload: TreemapNode }>;
 }) {
   if (!active || !payload || payload.length === 0) return null;
 
   const node = payload[0].payload as unknown as LeafData;
   if (!node.displayName) return null;
 
   return (
     <div
       style={{
         background: "hsl(217 16% 15.5%)",
         border: "1px solid hsl(217 17% 28%)",
         padding: "8px 12px",
         fontFamily: "'JetBrains Mono', monospace",
         fontSize: "11px",
         textTransform: "uppercase",
         letterSpacing: "0.5px",
       }}
     >
       <div style={{ fontWeight: 600, marginBottom: 4, color: "hsl(213 27% 88%)" }}>
         {node.displayName}
       </div>
       <div style={{ color: "hsl(213 14% 65%)" }}>
         Score: {node.avgScorePct}
       </div>
       <div style={{ color: "hsl(213 14% 65%)" }}>
         Cells: {node.size}
       </div>
     </div>
   );
 }
 
 export default function ConfigTreemap({ runs }: ConfigTreemapProps) {
   const [secondaryAxis, setSecondaryAxis] = useState<AxisName>("prompt_style");
 
   const handleClick = useCallback(
     (node: TreemapNode) => {
       const leaf = node as unknown as LeafData;
       if (leaf.model && leaf.configValue) {
         const params = new URLSearchParams();
         params.set("model", leaf.model);
         params.set(secondaryAxis, leaf.configValue);
         window.location.href = `/?${params.toString()}`;
       }
     },
     [secondaryAxis],
   );
 
   if (runs.length === 0) {
     return (
       <div
         className="card"
         style={{
           textAlign: "center",
           padding: "40px",
           color: "var(--text-muted)",
         }}
       >
         No data for treemap.
       </div>
     );
   }
 
   const treeData = buildTreeData(runs, secondaryAxis);
 
   return (
     <div
       className="card"
       style={{
         background: "var(--surface-1)",
         border: "1px solid var(--border)",
         borderRadius: 0,
         padding: "20px",
       }}
     >
       <div
         style={{
           display: "flex",
           justifyContent: "space-between",
           alignItems: "center",
           marginBottom: "16px",
         }}
       >
         <h3 style={{ margin: 0 }}>Configuration Treemap</h3>
         <div className="filter-group">
           <label htmlFor="treemap-axis">Group by</label>
           <select
             id="treemap-axis"
             value={secondaryAxis}
             onChange={(e) => setSecondaryAxis(e.target.value as AxisName)}
           >
             {SECONDARY_AXES.map((axis) => (
               <option key={axis} value={axis}>
                 {axis}
               </option>
             ))}
           </select>
         </div>
       </div>
 
       <div
         style={{
           display: "flex",
           gap: "16px",
           marginBottom: "12px",
           fontSize: "11px",
           fontFamily: "var(--font-mono)",
           textTransform: "uppercase",
           letterSpacing: "0.5px",
           color: "var(--text-muted)",
         }}
       >
         <span>
           <span
             style={{
               display: "inline-block",
               width: 10,
               height: 10,
               background: "hsl(92 28% 45%)",
               marginRight: 4,
               verticalAlign: "middle",
             }}
           />
           {">"} 60%
         </span>
         <span>
           <span
             style={{
               display: "inline-block",
               width: 10,
               height: 10,
               background: "hsl(40 71% 50%)",
               marginRight: 4,
               verticalAlign: "middle",
             }}
           />
           30-60%
         </span>
         <span>
           <span
             style={{
               display: "inline-block",
               width: 10,
               height: 10,
               background: "hsl(355 52% 48%)",
               marginRight: 4,
               verticalAlign: "middle",
             }}
           />
           {"<"} 30%
         </span>
       </div>
 
       <ResponsiveContainer width="100%" height={400}>
         <Treemap
           data={treeData}
           dataKey="size"
           nameKey="name"
           type="flat"
           content={CustomContent}
           onClick={handleClick}
           isAnimationActive={false}
           stroke="hsl(213 16% 12%)"
         >
           <Tooltip content={<CustomTooltip />} />
         </Treemap>
       </ResponsiveContainer>
     </div>
   );
 }