From 6da98b4e7b98e5c07a23fb69837dda747475d616 Mon Sep 17 00:00:00 2001 From: Chris Coutinho Date: Tue, 16 Dec 2025 00:29:39 +0100 Subject: [PATCH] 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. --- third_party/astroglobe/src/App.vue | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/third_party/astroglobe/src/App.vue b/third_party/astroglobe/src/App.vue index b656c33..90d5c70 100644 --- a/third_party/astroglobe/src/App.vue +++ b/third_party/astroglobe/src/App.vue @@ -669,6 +669,14 @@ export default { + 'Raw Score: %{customdata.raw_score:.3f} (%{customdata.relative_score:.0%} relative)
' + '(x=%{customdata.x}, y=%{customdata.y}, z=%{customdata.z})' + '', + 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)),