diff --git a/apps/web-roo-code/src/app/evals/plot.tsx b/apps/web-roo-code/src/app/evals/plot.tsx index ddecda9555..a8a0066472 100644 --- a/apps/web-roo-code/src/app/evals/plot.tsx +++ b/apps/web-roo-code/src/app/evals/plot.tsx @@ -14,33 +14,8 @@ type PlotProps = { type LabelPosition = "top" | "bottom" | "left" | "right" -// Constants for chart configuration -const MAX_COST_LIMIT = 60 -const CHART_ROUNDING_INTERVAL = 5 - -// Constants for overlap detection thresholds -const OVERLAP_THRESHOLDS = { - horizontal: 4, // Cost units - vertical: 5, // Score units - labelToPoint: { - horizontal: 3, - vertical: 6, - }, -} as const - -// Helper function to calculate rounded domain bounds -const calculateRoundedDomain = ( - min: number, - max: number, - interval: number = CHART_ROUNDING_INTERVAL, -): [number, number] => { - const roundedMin = Math.max(0, Math.round((min - interval) / interval) * interval) - const roundedMax = Math.round((max + interval) / interval) * interval - return [roundedMin, roundedMax] -} - export const Plot = ({ tableData }: PlotProps) => { - const chartData = useMemo(() => tableData.filter(({ cost }) => cost < MAX_COST_LIMIT), [tableData]) + const chartData = useMemo(() => tableData.filter(({ cost }) => cost < 60), [tableData]) const chartConfig = useMemo( () => chartData.reduce((acc, run) => ({ ...acc, [run.label]: run }), {} as ChartConfig), @@ -64,21 +39,21 @@ export const Plot = ({ tableData }: PlotProps) => { p1: { cost: number; score: number; position: LabelPosition }, p2: { cost: number; score: number; position: LabelPosition }, ): boolean => { + // Approximate thresholds for overlap detection. + const horizontalThreshold = 4 // Cost units. + const verticalThreshold = 5 // Score units. + const costDiff = Math.abs(p1.cost - p2.cost) const scoreDiff = Math.abs(p1.score - p2.score) // If points are far apart, no overlap. - if (costDiff > OVERLAP_THRESHOLDS.horizontal * 2 || scoreDiff > OVERLAP_THRESHOLDS.vertical * 2) { + if (costDiff > horizontalThreshold * 2 || scoreDiff > verticalThreshold * 2) { return false } // Check specific position combinations for overlap. // Same position for nearby points definitely overlaps. - if ( - p1.position === p2.position && - costDiff < OVERLAP_THRESHOLDS.horizontal && - scoreDiff < OVERLAP_THRESHOLDS.vertical - ) { + if (p1.position === p2.position && costDiff < horizontalThreshold && scoreDiff < verticalThreshold) { return true } @@ -91,7 +66,7 @@ export const Plot = ({ tableData }: PlotProps) => { // If both labels are on the same vertical side and points are close // horizontally. if ((p1IsTop && p2IsTop) || (p1IsBottom && p2IsBottom)) { - if (costDiff < OVERLAP_THRESHOLDS.horizontal && scoreDiff < OVERLAP_THRESHOLDS.vertical / 2) { + if (costDiff < horizontalThreshold && scoreDiff < verticalThreshold / 2) { return true } } @@ -113,41 +88,25 @@ export const Plot = ({ tableData }: PlotProps) => { switch (position) { case "top": // Label is above, check if there's a point above. - if ( - costDiff < OVERLAP_THRESHOLDS.labelToPoint.horizontal && - other.score > point.score && - other.score - point.score < OVERLAP_THRESHOLDS.labelToPoint.vertical - ) { + if (costDiff < 3 && other.score > point.score && other.score - point.score < 6) { return true } break case "bottom": // Label is below, check if there's a point below. - if ( - costDiff < OVERLAP_THRESHOLDS.labelToPoint.horizontal && - other.score < point.score && - point.score - other.score < OVERLAP_THRESHOLDS.labelToPoint.vertical - ) { + if (costDiff < 3 && other.score < point.score && point.score - other.score < 6) { return true } break case "left": // Label is to the left, check if there's a point to the left. - if ( - scoreDiff < OVERLAP_THRESHOLDS.labelToPoint.horizontal && - other.cost < point.cost && - point.cost - other.cost < OVERLAP_THRESHOLDS.horizontal - ) { + if (scoreDiff < 3 && other.cost < point.cost && point.cost - other.cost < 4) { return true } break case "right": // Label is to the right, check if there's a point to the right. - if ( - scoreDiff < OVERLAP_THRESHOLDS.labelToPoint.horizontal && - other.cost > point.cost && - other.cost - point.cost < OVERLAP_THRESHOLDS.horizontal - ) { + if (scoreDiff < 3 && other.cost > point.cost && other.cost - point.cost < 4) { return true } break @@ -222,8 +181,8 @@ export const Plot = ({ tableData }: PlotProps) => { dataKey="cost" name="Cost" domain={[ - (dataMin: number) => calculateRoundedDomain(dataMin, 0)[0], - () => MAX_COST_LIMIT, // Always use 60 as the max + (dataMin: number) => Math.max(0, Math.round((dataMin - 5) / 5) * 5), + (dataMax: number) => Math.round((dataMax + 5) / 5) * 5, ]} tickFormatter={(value) => formatCurrency(value)} /> @@ -232,8 +191,8 @@ export const Plot = ({ tableData }: PlotProps) => { dataKey="score" name="Score" domain={[ - (dataMin: number) => calculateRoundedDomain(dataMin, 0)[0], - (dataMax: number) => Math.min(100, calculateRoundedDomain(0, dataMax)[1]), + (dataMin: number) => Math.max(0, Math.round((dataMin - 5) / 5) * 5), + (dataMax: number) => Math.min(100, Math.round((dataMax + 5) / 5) * 5), ]} tickFormatter={(value) => `${value}%`} /> @@ -276,7 +235,7 @@ export const Plot = ({ tableData }: PlotProps) => {