Simplify feature mapping interaction

assets/feature_story.js

@@ -176,9 +176,7 @@
       attributionData.tied ? "Feature order" : "SHAP rank"
     );
     targetLabel.classList.add("target");
-    const replay = htmlElement("button", "feature-story-replay", "Replay mapping");
-    replay.type = "button";
-    playback.append(sourceLabel, slider, targetLabel, replay);
+    playback.append(sourceLabel, slider, targetLabel);
     container.append(visual, playback);
 
     const state = {
@@ -193,7 +191,6 @@
       canvas,
       svg,
       slider,
-      replay,
       progress: 1,
       hovered: null,
       locked: null,
@@ -776,7 +773,6 @@
       state.animationFrame = null;
       updatePositions(state, Number(state.slider.value));
     }, { signal });
-    state.replay.addEventListener("click", () => replay(state), { signal });
     state.container.addEventListener("keydown", (event) => {
       if (!["ArrowDown", "ArrowUp", "Home", "End", "Enter", "Escape"].includes(event.key)) return;
       event.preventDefault();
@@ -816,7 +812,10 @@
         window.requestAnimationFrame(() => draw(state));
       });
       state.resizeObserver.observe(container);
-      window.requestAnimationFrame(() => draw(state));
+      window.requestAnimationFrame(() => {
+        draw(state);
+        window.requestAnimationFrame(() => replay(state));
+      });
       detailNode.textContent = "Hover or tap a raster row or attribution dot to trace the same feature.";
       return signature;
     } catch (error) {

assets/styles.css

@@ -744,8 +744,8 @@ h2 {
 
 .feature-story-playback {
   display: grid;
-  grid-template-areas: "source slider target replay";
-  grid-template-columns: auto minmax(150px, 1fr) auto auto;
+  grid-template-areas: "source slider target";
+  grid-template-columns: auto minmax(150px, 1fr) auto;
   gap: 10px;
   align-items: center;
   min-height: 58px;
@@ -777,25 +777,6 @@ h2 {
   cursor: ew-resize;
 }
 
-.feature-story-replay {
-  grid-area: replay;
-  min-height: 34px;
-  padding: 7px 12px;
-  border: 1px solid #b9accf;
-  border-radius: 6px;
-  background: #f4f1f8;
-  color: #4d3880;
-  cursor: pointer;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 750;
-}
-
-.feature-story-replay:hover {
-  border-color: #846fa6;
-  background: #eee9f5;
-}
-
 .feature-story-render-token {
   display: none;
 }
@@ -1117,8 +1098,7 @@ h2 {
   .feature-story-playback {
     grid-template-areas:
       "source target"
-      "slider slider"
-      "replay replay";
+      "slider slider";
     grid-template-columns: 1fr 1fr;
     gap: 8px 12px;
     padding: 11px 12px 12px;
@@ -1128,11 +1108,6 @@ h2 {
     text-align: right;
   }
 
-  .feature-story-replay {
-    width: 100%;
-    min-height: 40px;
-  }
-
   .site-nav {
     align-items: flex-start;
     padding: 15px 0;