Tooltip Index Overlay

[camdnnn]

Description
Replaced the existing text based index values overlay with a new one matching the style of the tooltip

Changes
List the main changes made in this PR:

• Added Index Tooltip
• Removed text based index
• Renamed all instances of cursor to index

Screenshots (if applicable)

[Copilot]

Pull request overview

This PR updates the Graph2D “index overlay” by replacing the prior text-based cursor/index overlay with a tooltip-styled DOM overlay component, and wires it into the main Graph2D rendering flow.

Changes:

• Introduces IndexOverlay to render an index line, dots, and a tooltip-styled overlay.
• Removes the old cursor overlay styling and updates Graph2D to use the new overlay.
• Minor formatting-only change in chartOptions.ts.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx	New overlay implementation and replay-driven DOM updates.
frontend/src/components/graph2D/indexOverlay/IndexOverlay.module.scss	Styles for the new index line/dots/tooltip overlay.
frontend/src/components/graph2D/graph2D.tsx	Switches Graph2D from CursorOverlay to IndexOverlay.
frontend/src/components/graph2D/cursorOverlay/CursorOverlay.module.scss	Removes old cursor overlay styles.
frontend/src/components/graph2D/chartOptions.ts	No functional change (formatting only).

Comments suppressed due to low confidence (3)

frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx:63

• updateIndexDom returns early when xValue is null/undefined, but it doesn't hide/reset the overlay DOM. ReplayController can emit a Progress event with currentIndex === data.length (end-of-playback), which makes xData[index] undefined and leaves the last overlay state stuck on screen. Consider clamping the index to xData.length - 1 (or explicitly hiding the line/dots/tooltip when the index is out of bounds).
  frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx:116
• tooltipEl.innerHTML = ... interpolates xAxis.label, yAxis.label, and seriesNames directly into HTML. If any of those values can originate from user/config input, this is an XSS vector. Prefer constructing the tooltip DOM with document.createElement + textContent (or at minimum HTML-escape the interpolated strings) instead of assigning innerHTML.
  frontend/src/components/graph2D/indexOverlay/IndexOverlay.tsx:136
• updateGridRect only handles numeric grid.left/right/top/bottom values and falls back to hard-coded defaults otherwise. Since chartOptions allows callers to override grid with percentages/strings, the overlay can become misaligned. Consider supporting string values (e.g., percentage of width/height) or deriving the grid rect from the chart model/coordinate system instead of re-parsing options.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[gr812b]

Does the line still go out of the box or is that fixed?

[camdnnn]

Does the line still go out of the box or is that fixed?

Not fixed in this PR but I did make an issue for it #427