Highlight the hovered score in the evaluations chart - #2203
Conversation
The chart and the table did not tell the user which score they looked at. Three changes fix this. Hover a score cell in the table. The chart now spotlights that score's line, lights every dot of that run, and grows the one point where the run and the score meet. The spotlighted score renders last, so its line and its dot paint on top. A later series would otherwise bury the exact point under its own dot. Score column headers now show the score's color dot. One helper, scoreChartConfig, gives the color to the lines, the legend and the headers, so the three cannot drift. Score columns are 14px wider to pay for the dot. The chart tooltip still lists every score. It now marks the score whose point is nearest the cursor. Recharts gives the tooltip the cursor's y position, and the chart records each dot's y position as it renders. Cost heatmaps are now on by default in the trace view and the session view. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 2 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 41d55c8. Configure here.
| className="flex h-full w-full min-w-0 items-center" | ||
| onMouseEnter={() => onHoverScore(scoreName)} | ||
| onMouseLeave={() => onHoverScore(null)} | ||
| > |
There was a problem hiding this comment.
Hidden score hover dims all lines
Medium Severity
Hovering a score cell always sets hoveredScore, even when that score is hidden in the chart legend. CombinedChart then treats every visible series as dimmed because none match the hidden name, so all lines fade and nothing is spotlighted. The legend already skips hover for hidden scores; the table path does not.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 41d55c8. Configure here.
| // The tooltip needs it to tell which line the cursor is nearest, and recharts | ||
| // exposes no per-series geometry to tooltip content. Entries for a rendered | ||
| // (score, slot) are always rewritten this pass, so a lookup is never stale. | ||
| const dotPositionsRef = useRef<Map<string, number>>(new Map()); |
There was a problem hiding this comment.
Stale tooltip dot positions
Low Severity
dotPositionsRef only writes Y when a dot renders and never clears entries. When a (score, slot) later becomes null (baseline subtraction, missing values, data refresh), the old cy remains. Nearest-score marking can then highlight a score that shows —, or pick the wrong line using outdated geometry.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 41d55c8. Configure here.
The chart and the table did not tell the user which score they looked at. Three changes fix this.
Hover a score cell in the table
The chart now spotlights that score's line, lights every dot of that run, and grows the one point where the run and the score meet.
The spotlighted score renders last. Recharts paints series in array order, so a later series' dot buried the exact point the user pointed at and left only a ring of it. Two scores often share a value at the same run, which is when this showed.
Row hover and legend hover keep their old behavior.
Color dots in the score column headers
One helper,
scoreChartConfig, gives the color to the lines, the legend and the table headers, so the three cannot drift. Score columns are 14px wider to pay for the dot, so the name truncates no earlier than before.Tooltip marks the nearest score
The tooltip still lists every score. It now marks the score whose point is nearest the cursor. Recharts gives the tooltip content the cursor's y position (only
xsnaps to the slot), and the chart records each dot's y position as it renders.Also
allowDataOverflowclips the series to the plot rect, so a point on a domain edge lost half its dot.Test
Verified in the running app against local data (14 runs, 6 scores): score-cell hover, row hover, legend hover, tooltip tracking between lines at one x, and header colors against the legend.
tscandeslintare clean.🤖 Generated with Claude Code
Note
Low Risk
UI-only evaluations and trace-view defaults; no API, auth, or data-path changes.
Overview
Evaluations chart and table now share a single
hoveredScorestate (parent-owned) andscoreChartConfigcolors so legend hover, score-cell hover, and column headers stay aligned.Hovering a score cell spotlights that score’s line in the chart; combined with row hover it emphasizes the run×score point with a larger dot. The spotlighted series is painted last so overlapping dots at the same run stay visible. Score column headers show the same color dot as the chart legend; columns are slightly wider to fit the dot.
Chart polish: tooltip highlights the score whose dot is nearest the cursor (using recorded dot Y positions). X-axis domain padding avoids clipping edge dots. Trace/session views default
isCostHeatmapVisibleto on.Reviewed by Cursor Bugbot for commit 41d55c8. Bugbot is set up for automated code reviews on this repo. Configure here.