Pause linked playback while hovering

assets/dataset_link.js

@@ -50,7 +50,7 @@
       makeElement(
         "span",
         "dataset-link-hint",
-        "Playback loops automatically. Pause or scrub to inspect."
+        "Playback loops automatically. Hover to pause; scrub to inspect."
       )
     );
 
@@ -207,38 +207,56 @@
 
   function bindInteractions(state) {
     const abort = state.abortController;
-    const selectFromNeural = (event) => {
+    const pauseForHover = (event, fromTarget) => {
+      const point = event && event.points && event.points[0];
+      if (fromTarget && (!point || point.curveNumber !== state.exampleTrace)) return;
       const index = eventIndex(state, event);
       if (index === null) return;
-      const keepPlaying = state.playing;
+      if (state.playing) state.resumeAfterHover = true;
+      pause(state);
       renderIndex(state, index);
-      if (keepPlaying) play(state);
     };
-    const selectFromTarget = (event) => {
+
+    const holdSelection = (event, fromTarget) => {
       const point = event && event.points && event.points[0];
-      if (!point || point.curveNumber !== state.exampleTrace) return;
+      if (fromTarget && (!point || point.curveNumber !== state.exampleTrace)) return;
       const index = eventIndex(state, event);
       if (index === null) return;
-      const keepPlaying = state.playing;
+      state.resumeAfterHover = false;
+      pause(state);
       renderIndex(state, index);
-      if (keepPlaying) play(state);
     };
-    state.neural.on("plotly_hover", selectFromNeural);
-    state.neural.on("plotly_click", selectFromNeural);
-    state.target.on("plotly_hover", selectFromTarget);
-    state.target.on("plotly_click", selectFromTarget);
+
+    const neuralHover = (event) => pauseForHover(event, false);
+    const neuralClick = (event) => holdSelection(event, false);
+    const targetHover = (event) => pauseForHover(event, true);
+    const targetClick = (event) => holdSelection(event, true);
+    const resumeAfterHover = () => {
+      if (!state.resumeAfterHover || activeState !== state) return;
+      state.resumeAfterHover = false;
+      play(state);
+    };
+
+    state.neural.on("plotly_hover", neuralHover);
+    state.neural.on("plotly_click", neuralClick);
+    state.target.on("plotly_hover", targetHover);
+    state.target.on("plotly_click", targetClick);
     state.plotlyListeners = [
-      [state.neural, "plotly_hover", selectFromNeural],
-      [state.neural, "plotly_click", selectFromNeural],
-      [state.target, "plotly_hover", selectFromTarget],
-      [state.target, "plotly_click", selectFromTarget],
+      [state.neural, "plotly_hover", neuralHover],
+      [state.neural, "plotly_click", neuralClick],
+      [state.target, "plotly_hover", targetHover],
+      [state.target, "plotly_click", targetClick],
     ];
+    state.neural.addEventListener("mouseleave", resumeAfterHover, { signal: abort.signal });
+    state.target.addEventListener("mouseleave", resumeAfterHover, { signal: abort.signal });
 
     state.button.addEventListener("click", () => {
+      state.resumeAfterHover = false;
       if (state.playing) pause(state);
       else play(state);
     }, { signal: abort.signal });
     state.slider.addEventListener("input", () => {
+      state.resumeAfterHover = false;
       pause(state);
       renderIndex(state, Number(state.slider.value));
     }, { signal: abort.signal });
@@ -297,6 +315,7 @@
       cursorTrace,
       index: payload.initial_index || 0,
       playing: false,
+      resumeAfterHover: false,
       animationFrame: null,
       renderFrame: null,
       autoplayTimer: null,