assets/dataset_link.js

(function () {
  "use strict";

  const CURSOR_COLOR = "#D55E00";
  const PLAYBACK_DURATION_MS = 4200;
  let activeState = null;
  let scheduleGeneration = 0;

  function clamp(value, low, high) {
    return Math.max(low, Math.min(high, value));
  }

  function traceRole(trace) {
    return trace && trace.meta && trace.meta.benchdash_role;
  }

  function traceIndex(graph, role) {
    return graph.data.findIndex((trace) => traceRole(trace) === role);
  }

  function graphDataset(graph) {
    return graph && graph.layout && graph.layout.meta && graph.layout.meta.benchdash_dataset;
  }

  function formatNumber(value, digits) {
    if (!Number.isFinite(Number(value))) return "—";
    const number = Number(value);
    const magnitude = Math.abs(number);
    const precision = magnitude >= 10 ? 2 : digits;
    return number.toFixed(precision).replace(/^-/, "−");
  }

  function formatSignedTime(value) {
    const rounded = Math.round(Number(value));
    if (rounded === 0) return "0 ms";
    return `${rounded < 0 ? "−" : "+"}${Math.abs(rounded)} ms`;
  }

  function makeElement(tag, className, text) {
    const node = document.createElement(tag);
    if (className) node.className = className;
    if (text !== undefined) node.textContent = text;
    return node;
  }

  function buildControls(state) {
    const lead = makeElement("div", "dataset-link-lead");
    lead.append(
      makeElement("strong", "dataset-link-title", "Linked trial"),
      makeElement(
        "span",
        "dataset-link-hint",
        "Playback loops automatically. Hover to pause; scrub to inspect."
      )
    );

    const button = makeElement("button", "dataset-link-button", "Play");
    button.type = "button";
    button.setAttribute("aria-label", "Play linked neural activity and target trajectory");

    const slider = makeElement("input", "dataset-link-slider");
    slider.type = "range";
    slider.min = "0";
    slider.max = String(state.payload.time_ms.length - 1);
    slider.step = "1";
    slider.value = String(state.payload.initial_index || 0);
    slider.setAttribute("aria-label", "Linked trial time bin");

    const readout = makeElement("div", "dataset-link-readout");
    const time = makeElement("span", "dataset-link-time");
    const value = makeElement("span", "dataset-link-value");
    readout.append(time, value);

    const transport = makeElement("div", "dataset-link-transport");
    transport.append(button, slider, readout);
    state.controls.replaceChildren(lead, transport);
    state.button = button;
    state.slider = slider;
    state.timeReadout = time;
    state.valueReadout = value;
  }

  function setButton(state) {
    state.button.textContent = state.playing ? "Pause" : "Play";
    state.button.setAttribute(
      "aria-label",
      state.playing
        ? "Pause linked neural activity and target trajectory"
        : "Play linked neural activity and target trajectory"
    );
  }

  function positionPlayhead(state) {
    if (!state.neural.isConnected || !state.neural._fullLayout) return;
    const layout = state.neural._fullLayout;
    const axis = layout.xaxis;
    const size = layout._size;
    if (!axis || !size) return;
    const time = Number(state.payload.time_ms[state.index]);
    const left = size.l + axis.l2p(time);
    state.playhead.style.left = `${left}px`;
    state.playhead.style.top = `${size.t}px`;
    state.playhead.style.height = `${size.h}px`;
  }

  function updateReadout(state) {
    const index = state.index;
    const x = Number(state.payload.plot_x[index]);
    const y = Number(state.payload.plot_y[index]);
    const neuralTime = Number(state.payload.time_ms[index]);
    const targetLag = Number(state.payload.target_lag_ms || 0);
    state.timeReadout.textContent = `Neural time ${formatSignedTime(neuralTime)}`;
    if (targetLag !== 0) {
      state.valueReadout.textContent = (
        `Target time ${formatSignedTime(neuralTime + targetLag)}`
        + ` · x ${formatNumber(x, 3)} · y ${formatNumber(y, 3)}`
      );
    } else if (state.payload.value_kind === "force") {
      state.valueReadout.textContent = `Paired force ${formatNumber(y, 3)}`;
    } else {
      state.valueReadout.textContent = (
        `Paired target x ${formatNumber(x, 3)} · y ${formatNumber(y, 3)}`
      );
    }
  }

  function renderIndex(state, requestedIndex) {
    const lastIndex = state.payload.time_ms.length - 1;
    const index = clamp(Math.round(Number(requestedIndex)), 0, lastIndex);
    if (!Number.isFinite(index)) return;
    state.index = index;
    state.slider.value = String(index);
    positionPlayhead(state);
    updateReadout(state);

    if (state.renderFrame !== null) cancelAnimationFrame(state.renderFrame);
    state.renderFrame = requestAnimationFrame(() => {
      state.renderFrame = null;
      if (!state.target.isConnected || !state.target._fullLayout || !window.Plotly) return;
      const progressX = state.payload.plot_x.slice(0, index + 1);
      const progressY = state.payload.plot_y.slice(0, index + 1);
      window.Plotly.restyle(
        state.target,
        {
          x: [progressX, [state.payload.plot_x[index]]],
          y: [progressY, [state.payload.plot_y[index]]],
        },
        [state.progressTrace, state.cursorTrace]
      );
    });
  }

  function pause(state) {
    state.playing = false;
    if (state.animationFrame !== null) cancelAnimationFrame(state.animationFrame);
    state.animationFrame = null;
    setButton(state);
  }

  function play(state) {
    pause(state);
    const finalIndex = state.payload.time_ms.length - 1;
    if (state.index >= finalIndex) renderIndex(state, 0);
    const startIndex = state.index;
    const stepDuration = PLAYBACK_DURATION_MS / Math.max(finalIndex, 1);
    const start = performance.now();
    state.playing = true;
    setButton(state);

    const advance = (now) => {
      if (!state.playing || activeState !== state) return;
      const elapsedSteps = Math.floor((now - start) / stepDuration);
      const nextIndex = Math.min(finalIndex, startIndex + elapsedSteps);
      if (nextIndex !== state.index) renderIndex(state, nextIndex);
      if (nextIndex >= finalIndex) {
        state.animationFrame = requestAnimationFrame(() => {
          if (!state.playing || activeState !== state) return;
          renderIndex(state, 0);
          play(state);
        });
        return;
      }
      state.animationFrame = requestAnimationFrame(advance);
    };
    state.animationFrame = requestAnimationFrame(advance);
  }

  function eventIndex(state, event) {
    const point = event && event.points && event.points[0];
    const custom = point && point.customdata;
    if (Array.isArray(custom) && Number.isFinite(Number(custom[1]))) {
      return Number(custom[1]);
    }
    const time = point && Number(point.x);
    if (!Number.isFinite(time)) return null;
    let bestIndex = 0;
    let bestDistance = Infinity;
    state.payload.time_ms.forEach((candidate, index) => {
      const distance = Math.abs(Number(candidate) - time);
      if (distance < bestDistance) {
        bestDistance = distance;
        bestIndex = index;
      }
    });
    return bestIndex;
  }

  function bindInteractions(state) {
    const abort = state.abortController;
    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;
      if (state.playing) state.resumeAfterHover = true;
      pause(state);
      renderIndex(state, index);
    };

    const holdSelection = (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;
      state.resumeAfterHover = false;
      pause(state);
      renderIndex(state, index);
    };

    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", 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 });
    state.resizeObserver = new ResizeObserver(() => {
      requestAnimationFrame(() => positionPlayhead(state));
    });
    state.resizeObserver.observe(state.neural);
  }

  function maybeAutoplay(state) {
    state.autoplayTimer = window.setTimeout(() => {
      if (activeState === state) {
        renderIndex(state, 0);
        play(state);
      }
    }, 150);
  }

  function destroy(state) {
    if (!state) return;
    pause(state);
    if (state.renderFrame !== null) cancelAnimationFrame(state.renderFrame);
    if (state.autoplayTimer !== null) window.clearTimeout(state.autoplayTimer);
    if (state.resizeObserver) state.resizeObserver.disconnect();
    if (state.abortController) state.abortController.abort();
    (state.plotlyListeners || []).forEach(([graph, event, listener]) => {
      if (graph && typeof graph.removeListener === "function") {
        graph.removeListener(event, listener);
      }
    });
    if (state.playhead) state.playhead.remove();
  }

  function mount(payload) {
    const controls = document.getElementById("dataset-link-controls");
    const neural = document.querySelector("#dataset-neural-example .js-plotly-plot");
    const target = document.querySelector("#dataset-target-trajectory .js-plotly-plot");
    if (!controls || !neural || !target || !neural._fullLayout || !target._fullLayout) {
      return false;
    }
    if (graphDataset(neural) !== payload.dataset || graphDataset(target) !== payload.dataset) {
      return false;
    }
    const exampleTrace = traceIndex(target, "example_trajectory");
    const progressTrace = traceIndex(target, "linked_target_progress");
    const cursorTrace = traceIndex(target, "linked_target_cursor");
    if ([exampleTrace, progressTrace, cursorTrace].some((index) => index < 0)) return false;

    const state = {
      payload,
      controls,
      neural,
      target,
      exampleTrace,
      progressTrace,
      cursorTrace,
      index: payload.initial_index || 0,
      playing: false,
      resumeAfterHover: false,
      animationFrame: null,
      renderFrame: null,
      autoplayTimer: null,
      resizeObserver: null,
      abortController: new AbortController(),
      plotlyListeners: [],
    };
    const playhead = makeElement("div", "dataset-linked-playhead");
    playhead.style.backgroundColor = CURSOR_COLOR;
    playhead.setAttribute("aria-hidden", "true");
    neural.style.position = "relative";
    neural.appendChild(playhead);
    state.playhead = playhead;
    buildControls(state);
    bindInteractions(state);
    activeState = state;
    renderIndex(state, state.index);
    maybeAutoplay(state);
    return true;
  }

  function schedule(payload, activeTab) {
    scheduleGeneration += 1;
    const generation = scheduleGeneration;
    destroy(activeState);
    activeState = null;
    const controls = document.getElementById("dataset-link-controls");
    if (!payload || !payload.enabled || activeTab !== "datasets") {
      if (controls) controls.replaceChildren();
      return `${payload && payload.dataset ? payload.dataset : "none"}:inactive`;
    }
    let attempts = 0;
    const tryMount = () => {
      if (generation !== scheduleGeneration) return;
      if (mount(payload)) return;
      attempts += 1;
      if (attempts < 180) requestAnimationFrame(tryMount);
    };
    requestAnimationFrame(tryMount);
    return `${payload.dataset}:scheduled`;
  }

  window.benchdashDatasetLink = { schedule };
})();