feat: add native Plotly hover styling for clickable points

Replace expensive Plotly.restyle() hover handlers with native hoverlabel
styling to indicate clickable points without performance degradation.

Implementation:
- Add hoverlabel configuration to document trace with distinct styling
- Bright blue background (#0082c9) to make hover state obvious
- Larger font size (15px) for better visibility
- White text for contrast against blue background
- Handled natively by Plotly - no JavaScript event handlers needed

Benefits:
- Zero performance impact - no chart re-renders on hover
- Smooth, responsive hover feedback
- Clear visual indication that points are clickable
- Consistent with existing hover tooltip pattern

Removed:
- Expensive handlePlotHover() and handlePlotUnhover() methods
- Plotly.restyle() calls that caused severe lag and freezing
- hover/unhover event listener registrations

The hover tooltip now uses the styled hoverlabel to stand out visually,
providing clear feedback that points are interactive without any
performance cost.
This commit is contained in:
Chris Coutinho
2025-12-16 00:29:39 +01:00
parent fba4b9b785
commit 6da98b4e7b
+8
View File
@@ -669,6 +669,14 @@ export default {
+ 'Raw Score: %{customdata.raw_score:.3f} (%{customdata.relative_score:.0%} relative)<br>'
+ '(x=%{customdata.x}, y=%{customdata.y}, z=%{customdata.z})'
+ '<extra></extra>',
hoverlabel: {
bgcolor: '#0082c9',
bordercolor: '#0082c9',
font: {
size: 15,
color: 'white',
},
},
marker: {
size: results.map(r => 4 + (Math.pow(r.score, 2) * 10)),
opacity: results.map(r => 0.3 + (r.score * 0.7)),