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:
Vendored
+8
@@ -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)),
|
||||
|
||||
Reference in New Issue
Block a user