Keep automatic dataset playback running

assets/dataset_link.js

@@ -50,7 +50,7 @@
       makeElement(
         "span",
         "dataset-link-hint",
-        "Hover the raster or scrub the timeline to inspect a moment."
+        "Playback loops automatically. Pause or scrub to inspect."
       )
     );
 
@@ -210,16 +210,18 @@
     const selectFromNeural = (event) => {
       const index = eventIndex(state, event);
       if (index === null) return;
-      pause(state);
+      const keepPlaying = state.playing;
       renderIndex(state, index);
+      if (keepPlaying) play(state);
     };
     const selectFromTarget = (event) => {
       const point = event && event.points && event.points[0];
       if (!point || point.curveNumber !== state.exampleTrace) return;
       const index = eventIndex(state, event);
       if (index === null) return;
-      pause(state);
+      const keepPlaying = state.playing;
       renderIndex(state, index);
+      if (keepPlaying) play(state);
     };
     state.neural.on("plotly_hover", selectFromNeural);
     state.neural.on("plotly_click", selectFromNeural);
@@ -249,19 +251,12 @@
   function maybeAutoplay(state) {
     const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
     if (reducedMotion) return;
-    state.intersectionObserver = new IntersectionObserver((entries) => {
-      const visible = entries.some((entry) => entry.isIntersecting && entry.intersectionRatio >= 0.25);
-      if (!visible || activeState !== state) return;
-      state.intersectionObserver.disconnect();
-      state.intersectionObserver = null;
-      state.autoplayTimer = window.setTimeout(() => {
-        if (activeState === state) {
-          renderIndex(state, 0);
-          play(state);
-        }
-      }, 150);
-    }, { threshold: [0.25] });
-    state.intersectionObserver.observe(state.controls);
+    state.autoplayTimer = window.setTimeout(() => {
+      if (activeState === state) {
+        renderIndex(state, 0);
+        play(state);
+      }
+    }, 150);
   }
 
   function destroy(state) {
@@ -270,7 +265,6 @@
     if (state.renderFrame !== null) cancelAnimationFrame(state.renderFrame);
     if (state.autoplayTimer !== null) window.clearTimeout(state.autoplayTimer);
     if (state.resizeObserver) state.resizeObserver.disconnect();
-    if (state.intersectionObserver) state.intersectionObserver.disconnect();
     if (state.abortController) state.abortController.abort();
     (state.plotlyListeners || []).forEach(([graph, event, listener]) => {
       if (graph && typeof graph.removeListener === "function") {
@@ -309,7 +303,6 @@
       renderFrame: null,
       autoplayTimer: null,
       resizeObserver: null,
-      intersectionObserver: null,
       abortController: new AbortController(),
       plotlyListeners: [],
     };