import prettyMs from "pretty-ms"; import { BenchmarkResult, ChangeInfo, GroupedResult } from "./types"; import { calculateChange } from "./utils"; import React, { useState, useMemo } from "react"; import { ChevronDown, ChevronUp, Search, ArrowUpDown } from "lucide-react"; import Image from "next/image"; import { BENCHMARK_TREATMENT_COLOR } from "@/constants"; import { DataTableCard } from "@/components/ui/data-table-card"; interface BenchmarkDetailedTableProps { results: BenchmarkResult[]; testCaseMap: Record; lastRunDate?: string; } type SortField = | "testName" | "inputTokens" | "outputTokens" | "cost" | "duration" | "toolCalls"; type SortDirection = "asc" | "desc"; interface SortIconProps { field: SortField; sortField: SortField; sortDirection: SortDirection; } interface MetricColumn { label: string; sortField: SortField; controlValue: (result?: BenchmarkResult) => string; treatmentValue: (result?: BenchmarkResult) => string; change: ( control?: BenchmarkResult, treatment?: BenchmarkResult, ) => ChangeInfo; sortValue: (result?: BenchmarkResult) => number; } const METRIC_COLUMNS: MetricColumn[] = [ { label: "Input Tokens", sortField: "inputTokens", controlValue: (result) => result?.inputTokens ? result.inputTokens.toLocaleString() : "-", treatmentValue: (result) => result?.inputTokens ? result.inputTokens.toLocaleString() : "-", change: (control, treatment) => calculateChange(control?.inputTokens, treatment?.inputTokens), sortValue: (result) => result?.inputTokens ?? 0, }, { label: "Output Tokens", sortField: "outputTokens", controlValue: (result) => result?.outputTokens ? result.outputTokens.toLocaleString() : "-", treatmentValue: (result) => result?.outputTokens ? result.outputTokens.toLocaleString() : "-", change: (control, treatment) => calculateChange(control?.outputTokens, treatment?.outputTokens), sortValue: (result) => result?.outputTokens ?? 0, }, { label: "Cost", sortField: "cost", controlValue: (result) => result?.costUsd !== undefined ? "$" + result.costUsd.toFixed(2) : "-", treatmentValue: (result) => result?.costUsd !== undefined ? "$" + result.costUsd.toFixed(2) : "-", change: (control, treatment) => calculateChange(control?.costUsd, treatment?.costUsd), sortValue: (result) => result?.costUsd ?? 0, }, { label: "Duration", sortField: "duration", controlValue: (result) => result?.durationMs ? prettyMs(result.durationMs) : "-", treatmentValue: (result) => result?.durationMs ? prettyMs(result.durationMs) : "-", change: (control, treatment) => calculateChange(control?.durationMs, treatment?.durationMs), sortValue: (result) => result?.durationMs ?? 0, }, { label: "Tool Calls", sortField: "toolCalls", controlValue: (result) => result?.toolCalls !== undefined ? String(result.toolCalls) : "-", treatmentValue: (result) => result?.toolCalls !== undefined ? String(result.toolCalls) : "-", change: (control, treatment) => calculateChange(control?.toolCalls, treatment?.toolCalls), sortValue: (result) => result?.toolCalls ?? 0, }, ]; const HEADER_CLASS = "text-left py-2 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider cursor-pointer hover:text-foreground transition-colors group"; const CONTROL_SUBHEADER_CLASS = "text-left py-1.5 px-3 text-[10px] font-normal text-muted-foreground/60 uppercase tracking-wide"; const TREATMENT_SUBHEADER_CLASS = "text-left py-1.5 px-3 text-[10px] font-normal text-muted-foreground/60 uppercase tracking-wide bg-popover/30"; const SortIcon = ({ field, sortField, sortDirection }: SortIconProps) => { if (sortField !== field) return ; return sortDirection === "asc" ? ( ) : ( ); }; SortIcon.displayName = "SortIcon"; const TreatmentLabel = () => (

React Grab

); TreatmentLabel.displayName = "TreatmentLabel"; export const BenchmarkDetailedTable = ({ results, testCaseMap, lastRunDate, }: BenchmarkDetailedTableProps) => { const [searchQuery, setSearchQuery] = useState(""); const [sortField, setSortField] = useState("testName"); const [sortDirection, setSortDirection] = useState("asc"); const groupedByTest = useMemo(() => { return results.reduce>((grouped, result) => { if (!grouped[result.testName]) { grouped[result.testName] = {}; } grouped[result.testName][result.type] = result; return grouped; }, {}); }, [results]); const filteredAndSortedResults = useMemo(() => { let entries = Object.entries(groupedByTest); if (searchQuery) { const query = searchQuery.toLowerCase(); entries = entries.filter(([testName]) => testName.toLowerCase().includes(query), ); } entries.sort(([nameA, resultsA], [nameB, resultsB]) => { let valueA: number | string = 0; let valueB: number | string = 0; if (sortField === "testName") { valueA = nameA; valueB = nameB; } else { const column = METRIC_COLUMNS.find( (col) => col.sortField === sortField, ); if (column) { valueA = column.sortValue(resultsA.treatment); valueB = column.sortValue(resultsB.treatment); } } if (valueA < valueB) return sortDirection === "asc" ? -1 : 1; if (valueA > valueB) return sortDirection === "asc" ? 1 : -1; return 0; }); return entries; }, [groupedByTest, searchQuery, sortField, sortDirection]); const handleSort = (field: SortField) => { if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc"); } else { setSortField(field); setSortDirection("asc"); } }; return ( Performance metrics per test: tokens, cost (USD), duration, and tool calls. React Grab shows % change vs. Control. {lastRunDate && Last run: {lastRunDate}} } actions={

setSearchQuery(e.target.value)} className="bg-popover border border-border rounded-md py-1.5 pl-9 pr-3 text-xs text-foreground/80 placeholder:text-muted-foreground/60 focus:outline-none focus:border-ring w-full sm:w-[200px]" />

} > {METRIC_COLUMNS.map((column) => ( ))} {METRIC_COLUMNS.map((column) => ( ))} {filteredAndSortedResults.length === 0 ? ( ) : ( filteredAndSortedResults.map(([testName, groupedResults]) => { const { control, treatment } = groupedResults; const prompt = testCaseMap[testName] || ""; return ( {METRIC_COLUMNS.map((column) => { const changeInfo = column.change(control, treatment); return ( ); })} ); }) )}

handleSort("testName")} > Test Name	handleSort(column.sortField)} > {column.label}
Control
No results found matching "{searchQuery}"
{testName}	{column.controlValue(control)}	{column.treatmentValue(treatment)} {changeInfo.change && ( {changeInfo.change} )}

); }; BenchmarkDetailedTable.displayName = "BenchmarkDetailedTable";