{% extends "base.html" %}
{% block title %}Trajectory creator · cryoDRGN{% endblock %}
{% from "_macros.html" import nav_page_title_span %}
{% from "_palette_options.html" import continuous_palette_options %}
{% block nav_page_title %}{{ nav_page_title_span("Trajectory creator") }}{% endblock %}
{% block head %}
<style>
  .cryo-traj-vol-column {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    width: 100%;
    margin-top: 0.35rem;
    max-height: 42svh;
    border: 1px solid rgba(36, 59, 83, 0.14);
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.62);
    padding: 0.38rem;
    box-sizing: border-box;
  }
  .cryo-traj-vol-display-region {
    width: 100%;
    margin-top: 0.7rem;
    box-sizing: border-box;
  }
  /* Extra space under the indeterminate bar while volumes are generating */
  #traj-progress:not([hidden]) + .cryo-traj-vol-column {
    margin-top: 0.55rem;
  }
  .cryo-traj-vol-cell {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--paper, #fff);
    border: 1px solid rgba(36, 59, 83, 0.12);
    box-sizing: border-box;
  }
  .cryo-traj-vol-cell img.cryo-traj-vol-main {
    width: 100%;
    height: 100%;
    display: block;
    background: #e8ecf1;
    object-fit: contain;
  }
  .cryo-traj-vol-cell img.cryo-traj-vol-main[src=""] { visibility: hidden; }
  .cryo-traj-vol-label {
    position: absolute;
    top: 2px;
    left: 4px;
    font-weight: 700;
    font-size: 1.36rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    font-family: Georgia, "Times New Roman", serif;
    pointer-events: none;
    z-index: 2;
  }
  .cryo-traj-vol-meta {
    position: absolute;
    top: 3px;
    right: 4px;
    z-index: 3;
    max-width: 62%;
    text-align: right;
    font-size: 0.58rem;
    line-height: 1.28;
    font-weight: 600;
    font-family: "Barlow", ui-sans-serif, system-ui, sans-serif;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.5);
    white-space: pre-line;
    pointer-events: none;
  }
  .cryo-traj-vol-inset {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 17%;
    height: 17%;
    min-width: 28px;
    min-height: 28px;
    z-index: 4;
    box-sizing: border-box;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.85);
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
    background: rgba(10, 14, 20, 0.92);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .cryo-traj-vol-inset.cryo-traj-vol-inset--show {
    visibility: visible;
  }
  .cryo-traj-vol-inset img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
  /* HTML glyphs above Plotly (Scattergl base cannot stroke SVG markers/text). */
  .cryo-traj-glyph-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 4;
  }
  .cryo-traj-glyph-marker {
    position: absolute;
    box-sizing: border-box;
    border: 1.25px solid #ffffff;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(36, 59, 83, 0.12);
  }
  .cryo-traj-glyph-marker--square {
    border-radius: 2px;
  }
  .cryo-traj-glyph-marker--diamond {
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .cryo-traj-glyph-label {
    position: absolute;
    transform: translate(-50%, calc(-100% - 7px));
    font-weight: 700;
    font-family: "Barlow", sans-serif;
    font-size: 20px;
    line-height: 1.05;
    pointer-events: none;
    white-space: nowrap;
    -webkit-text-stroke: 2.5px #ffffff;
    paint-order: stroke fill;
    text-shadow:
      0 0 3px #ffffff,
      1px 0 0 #ffffff,
      -1px 0 0 #ffffff,
      0 1px 0 #ffffff,
      0 -1px 0 #ffffff;
  }
  .cryo-traj-glyph-label--anchor {
    font-size: 23px;
  }
  .cryo-traj-mode-fieldset {
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
    flex: 0 0 auto;
  }
  .cryo-traj-mode-seg.volsketch-seg {
    display: flex;
    width: 100%;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(36, 59, 83, 0.28);
    background: #e8ecf1;
    box-sizing: border-box;
  }
  .cryo-traj-mode-seg input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
  }
  .cryo-traj-mode-seg label {
    flex: 1 1 0;
    text-align: center;
    padding: 0.38rem 0.22rem;
    font-size: 0.65rem;
    line-height: 1.04;
    white-space: normal;
    cursor: pointer;
    margin: 0;
    color: var(--muted, #5c6b7a);
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .cryo-traj-mode-seg label:not(:last-of-type) {
    border-right: 1px solid rgba(36, 59, 83, 0.18);
  }
  .cryo-traj-mode-seg input:focus-visible + label {
    outline: 2px solid var(--nav-bg, #243b53);
    outline-offset: -2px;
    z-index: 1;
  }
  .cryo-traj-mode-seg input:checked + label {
    background: var(--nav-bg, #243b53);
    color: #fff;
    font-weight: 600;
  }
  .cryo-traj-mode-seg input:disabled + label {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .cryo-traj-npoints-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--muted, #5c6b7a);
    font-weight: 600;
  }
  .cryo-traj-npoints-label select {
    width: 4.5rem;
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
  }
  .cryo-traj-neighbor-row {
    display: none;
    margin-top: 0.35rem;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .cryo-traj-neighbor-row.cryo-traj-neighbor-row--show {
    display: flex;
  }
  .cryo-traj-neighbor-row label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted, #5c6b7a);
  }
  .cryo-traj-neighbor-row select {
    width: 4.5rem;
    padding: 0.1rem 0.25rem;
    font-size: 0.82rem;
  }
  .cryo-traj-status {
    font-size: 0.82rem;
    color: var(--muted, #5c6b7a);
    min-height: 1.2em;
    line-height: 1.35;
    flex: 0 0 auto;
  }
  .cryo-traj-hint {
    font-size: 0.78rem;
    color: var(--muted, #5c6b7a);
    line-height: 1.32;
    margin: 0;
  }
  .cryo-dash-page--image-viewer .cryo-dash-montage {
    display: flex;
    flex-direction: column;
  }
  /* Keep this right-side panel for trajectory controls/actions. */
  .cryo-dash-page--image-viewer .cryo-dash-montage.cryo-dash-montage--trajectory-volumes {
    align-self: stretch;
    min-height: 0;
    max-height: none;
    overflow: visible;
    flex: 0 0 30%;
    width: 30%;
    min-width: 30%;
    max-width: 30%;
    box-sizing: border-box;
  }
  .cryo-palette-radios {
    margin: 0.5rem 0 0;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(36, 59, 83, 0.15);
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.75);
    max-width: 100%;
    box-sizing: border-box;
  }
  .cryo-palette-radios legend {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nav-bg, #243b53);
    padding: 0 0.2rem;
  }
  .cryo-palette-radios__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    align-items: center;
  }
  .cryo-palette-radios label {
    font-size: 0.78rem;
    color: var(--nav-bg, #243b53);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
  }
  .cryo-palette-radios label input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
  }
  .cryo-palette-radios__swatch {
    flex: 0 0 2.25rem;
    height: 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(36, 59, 83, 0.16);
  }
  #traj-palette-radios.traj-palette-radios--suppressed {
    display: none;
  }
  .cryo-traj-z-panel {
    margin-top: 0.45rem;
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-z-details {
    border: 1px solid rgba(36, 59, 83, 0.18);
    border-radius: 4px;
    padding: 0.35rem 0.5rem 0.45rem;
    background: rgba(250, 248, 244, 0.85);
  }
  .cryo-traj-z-details summary {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--nav-bg, #243b53);
    cursor: pointer;
  }
  .cryo-traj-z-actions {
    margin: 0.25rem 0 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .cryo-traj-z-actions .btn {
    font-size: 0.78rem;
    padding: 0.28rem 0.45rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-anchor-row {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-anchor-import-grid {
    display: grid;
    grid-template-columns: minmax(0, 21%) minmax(0, 1fr);
    gap: 0.35rem 0.65rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-anchor-import-grid .btn {
    justify-self: start;
    width: 100%;
    max-width: 100%;
    font-size: 0.72rem;
    padding: 0.32rem 0.4rem;
    line-height: 1.25;
    box-sizing: border-box;
    text-align: center;
  }
  .cryo-traj-anchor-desc-line {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.38;
    color: var(--muted, #5c6b7a);
  }
  .cryo-traj-anchor-manual-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-anchor-manual-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.74rem;
    padding: 0.28rem 0.42rem;
    border: 1px solid rgba(36, 59, 83, 0.22);
    border-radius: 4px;
  }
  .cryo-traj-anchor-manual-btn {
    font-size: 0.74rem;
    padding: 0.28rem 0.45rem;
    white-space: nowrap;
  }
  .cryo-traj-file-browser-panel {
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-file-browser-panel[hidden] {
    display: none !important;
  }
  #btn-anchor-remove {
    display: none;
    width: 100%;
    font-size: 0.78rem;
    padding: 0.28rem 0.45rem;
    box-sizing: border-box;
  }
  #btn-anchor-remove.cryo-traj-remove--visible {
    display: block;
  }
  .cryo-file-browser {
    border: 1px solid rgba(36, 59, 83, 0.15);
    border-radius: 4px;
    background: #fff;
    max-height: 14rem;
    display: flex;
    flex-direction: column;
    font-size: 0.72rem;
    width: 100%;
    box-sizing: border-box;
  }
  .cryo-traj-z-wrap {
    display: flex;
    max-height: 9rem;
    overflow: auto;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(36, 59, 83, 0.12);
    border-radius: 3px;
  }
  .cryo-traj-z-nums {
    margin: 0;
    padding: 0.35rem 0.3rem 0.35rem 0.4rem;
    font-size: 0.65rem;
    line-height: 1.25;
    white-space: pre;
    text-align: left;
    color: rgba(36, 59, 83, 0.5);
    font-family: "IBM Plex Mono", monospace;
    border-right: 1px solid rgba(36, 59, 83, 0.10);
    user-select: none;
    flex-shrink: 0;
  }
  .cryo-traj-z-pre {
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.25;
    padding: 0.35rem 0.4rem;
    background: transparent;
    border: none;
    border-radius: 0;
    white-space: pre;
    word-break: normal;
    flex: 1;
  }
</style>
{% endblock %}
{% block content %}
<!-- === Trajectory creator: interactive path + volume strip === -->
<div class="cryo-dash-page cryo-dash-page--image-viewer cryo-dash-page--menu-scroll-fade">
<div class="cryo-dash-row">
  <div class="cryo-dash-side">
    <div class="card cryo-dash-controls" id="scatter-controls-card">
      <fieldset>
        <legend>Choose axes</legend>
        <label class="cryo-select-line" for="sx">Horizontal (X)</label>
        <select id="sx"></select>
        <label class="cryo-select-line" for="sy">Vertical (Y)</label>
        <select id="sy"></select>
      </fieldset>
      <fieldset>
        <legend>Choose color scale</legend>
        <label class="cryo-select-line" for="sc">Color by</label>
        <select id="sc"><option value="none">None</option></select>
      </fieldset>
      <fieldset>
        <legend>Trajectory settings</legend>
        <div class="cryo-traj-npoints-label" id="traj-points-row">
          <span id="traj-points-label">Points</span>
          <select id="n-points">
            {% for n in range(2, 21) %}
            <option value="{{ n }}"{% if n == 4 %} selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="cryo-traj-neighbor-row" id="traj-neighbor-row">
          <label for="max-neighbors">Max neighbors</label>
          <select id="max-neighbors">
            {% for n in range(2, 21) %}
            <option value="{{ n }}"{% if n == 10 %} selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
          <label for="avg-neighbors">Avg. neighbors</label>
          <select id="avg-neighbors">
            {% for n in range(2, 21) %}
            <option value="{{ n }}"{% if n == 5 %} selected{% endif %}>{{ n }}</option>
            {% endfor %}
          </select>
        </div>
        <p class="cryo-traj-hint" id="traj-settings-hint" style="margin-top:0.35rem;">Drag the orange and navy handles
          on the plot to edit the trajectory.</p>
      </fieldset>
      <div style="margin-top:0.35rem;">
        <button type="button" class="btn" id="btn-reset"
          style="width:100%;font-size:0.88rem;padding:0.4rem 0.5rem;">Reset trajectory</button>
      </div>
    </div>
  </div>

  <div class="cryo-dash-viewport--plotly">
    <p id="scatter-plot-status" class="cryo-dash-legend-note"
      style="margin:0 0 0.35rem;color:var(--accent,#c4703a);min-height:1.2em;"></p>
    <div class="cryo-plotly-stack" id="scatter-plot-stack">
      <div id="scatter" class="cryo-plotly-graph-host"></div>
      <div id="traj-glyph-overlay" class="cryo-traj-glyph-overlay" aria-hidden="true"></div>
      <div id="scatter-rendering-overlay" class="cryo-plot-rendering-overlay cryo-plot-rendering-overlay--show"
        aria-hidden="false">
        <div class="cryo-plot-rendering-overlay__inner">
          <span class="cryo-plot-rendering-overlay__label">Rendering…</span>
          <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Loading plot">
            <div class="cryo-plot-rendering-overlay__indeterminate"></div>
          </div>
        </div>
      </div>
    </div>
    <fieldset id="traj-palette-radios" class="cryo-palette-radios traj-palette-radios--suppressed"
      aria-label="Continuous color palette">
      <legend>Palette (continuous color)</legend>
      <div class="cryo-palette-radios__row">
        {{ continuous_palette_options("traj_palette", "traj-palette-radio", "cryo-palette-radios__swatch") }}
      </div>
    </fieldset>
  </div>

  <aside class="cryo-dash-montage cryo-dash-montage--trajectory-volumes" aria-label="Trajectory volumes">
    <fieldset class="cryo-traj-mode-fieldset">
      <div class="volsketch-seg cryo-traj-mode-seg" role="radiogroup" aria-label="Traversal mode">
        <input type="radio" name="traj-mode" id="traj-mode-direct" value="direct" checked />
        <label for="traj-mode-direct" id="traj-mode-direct-label">Direct traversal through<br />space</label>
        <input type="radio" name="traj-mode" id="traj-mode-alt" value="nearest" />
        <label for="traj-mode-alt" id="traj-mode-alt-label">Nearest particle neighbor in<br />space</label>
      </div>
    </fieldset>
    <div class="cryo-traj-anchor-row" id="traj-anchor-wrap">
      <div class="cryo-traj-anchor-import-grid" id="traj-anchor-pick">
        <button type="button" class="btn btn-secondary" id="btn-anchor-import-pkl">Import anchor .txt</button>
        <p class="cryo-traj-anchor-desc-line">Open a server-side file picker to choose a <code>.txt</code> file
          containing a whitespace-delimited list of particle indices.</p>
        <button type="button" class="btn btn-secondary" id="btn-anchor-kmeans">K-means centers</button>
        <p class="cryo-traj-anchor-desc-line">Build the path from cluster centers in
          <code>kmeansK/centers_ind.txt</code> for the current analysis folder.</p>
        <button type="button" class="btn btn-secondary" id="btn-anchor-random">10 random indices</button>
        <p class="cryo-traj-anchor-desc-line">Sample ten random particles from the dataset as anchor points along the
          trajectory.</p>
      </div>
      <div class="cryo-traj-anchor-manual-row" id="traj-anchor-manual-row">
        <input
          type="text"
          id="anchor-indices-manual"
          class="cryo-traj-anchor-manual-input"
          placeholder="Enter anchors, e.g. 0, 105, 220 351"
          aria-label="Manual anchor indices"
        />
        <button type="button" class="btn btn-secondary cryo-traj-anchor-manual-btn" id="btn-anchor-manual-load">Use
          typed indices</button>
      </div>
      <div id="traj-file-browser-panel" class="cryo-traj-file-browser-panel" hidden aria-hidden="true">
        <div class="cryo-file-browser" id="server-file-browser">
          <div class="cryo-file-browser-bar">
            <button type="button" id="fb-up" title="Parent directory">&#8593; Up</button>
            <span class="cryo-file-browser-path" id="fb-path"></span>
            <button type="button" id="fb-cancel">Cancel</button>
          </div>
          <ul class="cryo-file-browser-list" id="fb-list"></ul>
          <div id="fb-save-row" class="cryo-file-browser-save-row" hidden>
            <input
              id="fb-save-name"
              class="cryo-file-browser-save-input"
              type="text"
              value="z-path.txt"
              spellcheck="false"
              aria-label="Save filename"
            />
            <button type="button" id="fb-save-btn" class="btn btn-secondary">Save here</button>
          </div>
        </div>
      </div>
      <button type="button" class="btn btn-secondary" id="btn-anchor-remove">Remove indices</button>
    </div>
    <button type="button" class="btn" id="btn-generate-volumes"
      style="width:77%;display:block;margin:0.45rem auto 0;font-size:0.88rem;padding:0.45rem 0.5rem;">Generate 4 volumes</button>
    <p id="traj-status" class="cryo-traj-status"></p>
    <div id="traj-z-panel" class="cryo-traj-z-panel" hidden>
      <details class="cryo-traj-z-details">
        <summary>Latent <code>z</code> for each trajectory point</summary>
        <div class="cryo-traj-z-actions">
          <button type="button" class="btn btn-secondary" id="btn-save-zpath-workdir">Save z-path.txt to output
            folder</button>
          <button type="button" class="btn btn-secondary" id="btn-save-zpath-as">Save as…</button>
        </div>
        <div class="cryo-traj-z-wrap">
          <pre id="traj-z-nums" class="cryo-traj-z-nums"></pre>
          <pre id="traj-z-pre" class="cryo-traj-z-pre" aria-label="Trajectory z values"></pre>
        </div>
      </details>
    </div>
  </aside>
</div>
<section class="cryo-traj-vol-display-region" aria-label="Trajectory volume gallery">
  <div id="traj-progress" class="cryo-plot-rendering-overlay__track" role="progressbar"
    aria-valuetext="Generating volumes" hidden style="flex:0 0 auto;">
    <div class="cryo-plot-rendering-overlay__indeterminate"></div>
  </div>
  <div id="traj-vol-column" class="cryo-traj-vol-column"></div>
</section>
</div>

<script src="{{ url_for('static', filename='js/color_covariate_legend.js') }}"></script>
<script>
(function() {
  var trajAxisCols = {{ traj_axis_cols | tojson }};
  var colorCols = {{ numeric_cols | tojson }};
  var covariateDisplayMap = {{ covariate_display_map | tojson }};
  var dx = {{ default_x | tojson }};
  var dy = {{ default_y | tojson }};
  var zdim = {{ zdim | tojson }};
  var expWorkdir = {{ exp_workdir | tojson }};
  var trajChimeraxCpus = {{ chimerax_cpus_default | tojson }};

  var trajectoryMode = "direct";
  var anchorIndicesActive = null;
  var anchorTrajXY = null;
  var editableTrajXY = null;
  var trajPlotRows = null;
  var trajMarkerColors = null;
  var startXY = null;
  var endXY = null;
  var scatterLoadGeneration = 0;
  var volumeGeneration = 0;
  var dragEndpoint = null;
  var dragPointIndex = -1;
  var dragListenersWired = false;
  var trajOutlineHookWired = false;

  var gd = document.getElementById("scatter");
  var trajGlyphOverlayEl = document.getElementById("traj-glyph-overlay");
  var overlay = document.getElementById("scatter-rendering-overlay");
  var trajScatterRenderingEverCompleted = false;
  var paletteFieldset = document.getElementById("traj-palette-radios");
  var plotStatus = document.getElementById("scatter-plot-status");
  var trajStatus = document.getElementById("traj-status");
  var trajProgress = document.getElementById("traj-progress");
  var trajVolColumn = document.getElementById("traj-vol-column");
  var trajModeDirectRadio = document.getElementById("traj-mode-direct");
  var trajModeAltRadio = document.getElementById("traj-mode-alt");
  var trajModeDirectLabel = document.getElementById("traj-mode-direct-label");
  var trajModeAltLabel = document.getElementById("traj-mode-alt-label");
  var btnGenerateVolumesEl = document.getElementById("btn-generate-volumes");
  var btnResetEl = document.getElementById("btn-reset");
  var nPointsEl = document.getElementById("n-points");
  var trajPointsRowEl = document.getElementById("traj-points-row");
  var trajNeighborRowEl = document.getElementById("traj-neighbor-row");
  var maxNeighborsEl = document.getElementById("max-neighbors");
  var avgNeighborsEl = document.getElementById("avg-neighbors");
  var trajPointsLabelEl = document.getElementById("traj-points-label");
  var trajSettingsHintEl = document.getElementById("traj-settings-hint");
  var trajZPanel = document.getElementById("traj-z-panel");
  var trajZNums = document.getElementById("traj-z-nums");
  var trajZPre = document.getElementById("traj-z-pre");
  var btnSaveZpathWorkdir = document.getElementById("btn-save-zpath-workdir");
  var btnSaveZpathAs = document.getElementById("btn-save-zpath-as");
  var trajAnchorPick = document.getElementById("traj-anchor-pick");
  var trajAnchorManualRow = document.getElementById("traj-anchor-manual-row");
  var btnAnchorImportPkl = document.getElementById("btn-anchor-import-pkl");
  var btnAnchorKmeans = document.getElementById("btn-anchor-kmeans");
  var btnAnchorRandom = document.getElementById("btn-anchor-random");
  var anchorIndicesManualEl = document.getElementById("anchor-indices-manual");
  var btnAnchorManualLoad = document.getElementById("btn-anchor-manual-load");
  var btnAnchorRemove = document.getElementById("btn-anchor-remove");
  var trajFileBrowserPanel = document.getElementById("traj-file-browser-panel");
  var serverFileBrowser = document.getElementById("server-file-browser");
  var fbList = document.getElementById("fb-list");
  var fbPath = document.getElementById("fb-path");
  var fbUp = document.getElementById("fb-up");
  var fbCancel = document.getElementById("fb-cancel");
  var fbSaveRow = document.getElementById("fb-save-row");
  var fbSaveName = document.getElementById("fb-save-name");
  var fbSaveBtn = document.getElementById("fb-save-btn");
  var fbCurrentDir = null;
  var fbMode = "import";
  var lastZPathTxt = null;
  var coordsRequestId = 0;
  var coordsDragTimer = 0;
  var lastTrajectoryVolumeCacheId = "";
  var generatedTrajectoryVolumeCount = 0;

  var scatterControlsCard = document.getElementById("scatter-controls-card");
  var scatterControlsSide = scatterControlsCard ? scatterControlsCard.closest(".cryo-dash-side") : null;
  var scatterPlotStack = document.getElementById("scatter-plot-stack");
  var plotlyStackEl = gd && gd.parentElement;

  var TRAJ_PALETTE_KEYS = {
    Viridis: 1,
    Magma: 1,
    Cividis: 1,
    Turbo: 1,
    Blues: 1,
    Greens: 1,
    Greys: 1,
    Oranges: 1,
    Purples: 1,
    Reds: 1,
    YlGnBu: 1,
    YlOrRd: 1,
    RdBu: 1,
    Portland: 1,
    Jet: 1,
    Hot: 1,
    Blackbody: 1,
    Electric: 1,
    Rainbow: 1,
    Earth: 1,
  };
  function selectedTrajPalette() {
    var r = document.querySelector("input[name=\"traj_palette\"]:checked");
    var v = r && r.value ? String(r.value) : "Viridis";
    return TRAJ_PALETTE_KEYS[v] ? v : "Viridis";
  }

  function fillSelect(sel, values, includeNone) {
    sel.innerHTML = "";
    if (includeNone) {
      var o = document.createElement("option");
      o.value = "none"; o.textContent = "None";
      sel.appendChild(o);
    }
    values.forEach(function(c) {
      var o = document.createElement("option");
      o.value = c;
      o.textContent = covariateDisplayMap[c] || c;
      sel.appendChild(o);
    });
  }

  var sx = document.getElementById("sx");
  var sy = document.getElementById("sy");
  var sc = document.getElementById("sc");
  fillSelect(sx, trajAxisCols, false);
  fillSelect(sy, trajAxisCols, false);
  fillSelect(sc, colorCols, true);
  sx.value = trajAxisCols.indexOf(dx) >= 0 ? dx : trajAxisCols[0];
  sy.value = trajAxisCols.indexOf(dy) >= 0 ? dy : trajAxisCols[Math.min(1, trajAxisCols.length - 1)];

  /* Matches scatter_json / particle explorer: only ``labels`` is discrete (no sequential palette). */
  function trajColorByIsDiscrete() {
    return sc.value === "labels";
  }

  function syncTrajPaletteFieldset() {
    if (!paletteFieldset) return;
    var rendering = !!(overlay && overlay.classList.contains("cryo-plot-rendering-overlay--show"));
    var hasColor = sc.value && sc.value !== "none";
    var suppress = rendering || !hasColor || trajColorByIsDiscrete();
    paletteFieldset.classList.toggle("traj-palette-radios--suppressed", suppress);
  }

  function setRendering(on) {
    if (overlay) {
      if (on) {
        if (trajScatterRenderingEverCompleted) {
          overlay.classList.add("cryo-plot-rendering-overlay--nonblocking");
        } else {
          overlay.classList.remove("cryo-plot-rendering-overlay--nonblocking");
        }
      } else {
        overlay.classList.remove("cryo-plot-rendering-overlay--nonblocking");
      }
      overlay.classList.toggle("cryo-plot-rendering-overlay--show", on);
      overlay.setAttribute("aria-hidden", on ? "false" : "true");
    }
    syncTrajPaletteFieldset();
  }

  function setTrajStatus(msg, showProgress) {
    if (trajStatus) trajStatus.textContent = msg || "";
    if (trajProgress) trajProgress.hidden = !showProgress;
  }

  function currentNPoints() {
    var n = parseInt(nPointsEl.value, 10);
    if (!Number.isFinite(n)) n = 4;
    var minN = (hasAnchorIndices() && currentAnchorTraversalMode() === "direct") ? 0 : 2;
    return Math.max(minN, Math.min(20, n));
  }

  function syncPointsSelectorRange() {
    if (!nPointsEl) return;
    var minN = (hasAnchorIndices() && currentAnchorTraversalMode() === "direct") ? 0 : 2;
    var current = parseInt(nPointsEl.value, 10);
    if (!Number.isFinite(current)) current = 4;
    var next = Math.max(minN, Math.min(20, current));
    if (String(nPointsEl.options[0] && nPointsEl.options[0].value) === String(minN)) {
      nPointsEl.value = String(next);
      return;
    }
    nPointsEl.innerHTML = "";
    for (var i = minN; i <= 20; i++) {
      var o = document.createElement("option");
      o.value = String(i);
      o.textContent = String(i);
      nPointsEl.appendChild(o);
    }
    nPointsEl.value = String(next);
  }

  function currentMaxNeighbors() {
    var n = parseInt(maxNeighborsEl && maxNeighborsEl.value, 10);
    if (!Number.isFinite(n)) n = 10;
    return Math.max(2, Math.min(20, n));
  }

  function currentAvgNeighbors() {
    var n = parseInt(avgNeighborsEl && avgNeighborsEl.value, 10);
    if (!Number.isFinite(n)) n = 5;
    return Math.max(2, Math.min(20, n));
  }

  function requestedAnchorNPoints(mode) {
    return mode === "direct" ? 0 : currentNPoints();
  }

  function hasAnchorIndices() {
    return !!(anchorIndicesActive && anchorIndicesActive.length >= 2);
  }

  function currentAnchorTraversalMode() {
    return trajectoryMode === "graph" ? "graph" : "direct";
  }

  function trajectoryModeAxisPairLabel() {
    return axisDisplayName(sx.value) + " vs. " + axisDisplayName(sy.value);
  }

  function syncTraversalModeLabels() {
    var axes = trajectoryModeAxisPairLabel();
    if (trajModeDirectLabel) {
      trajModeDirectLabel.innerHTML = "Direct traversal through<br />" + axes + " space";
    }
    if (trajModeAltLabel) {
      var hasAnchors = hasAnchorIndices();
      trajModeAltLabel.innerHTML = hasAnchors
        ? "Graph traversal through<br />" + axes + " space"
        : "Nearest particle neighbor in<br />" + axes + " space";
    }
    if (trajModeAltRadio) {
      trajModeAltRadio.value = hasAnchorIndices() ? "graph" : "nearest";
    }
  }

  function syncTraversalSettingsText() {
    var hasAnchors = hasAnchorIndices();
    syncTraversalModeLabels();
    if (!trajPointsLabelEl || !trajSettingsHintEl) return;
    var graphMode = hasAnchors && currentAnchorTraversalMode() === "graph";
    syncPointsSelectorRange();
    if (trajPointsRowEl) trajPointsRowEl.style.display = graphMode ? "none" : "flex";
    if (trajNeighborRowEl) {
      trajNeighborRowEl.classList.toggle("cryo-traj-neighbor-row--show", graphMode);
    }
    if (!hasAnchors) {
      trajPointsLabelEl.textContent = "Points";
      trajSettingsHintEl.textContent = "Drag the orange and navy handles on the plot to edit the trajectory.";
      return;
    }
    if (graphMode) {
      trajSettingsHintEl.textContent =
        "Anchors are fixed. Max and Avg. neighbors control graph traversal between each anchor pair.";
      return;
    }
    trajPointsLabelEl.textContent = "Interpolation points between anchors";
    trajSettingsHintEl.textContent =
      "Anchors are fixed. Points sets interpolation points between each consecutive anchor pair (0-20).";
  }

  function currentVolumeCount() {
    if (hasAnchorIndices()) {
      if (currentAnchorTraversalMode() === "direct") {
        var segs = Math.max(0, anchorIndicesActive.length - 1);
        return segs * (currentNPoints() + 1) + 1;
      }
      if (anchorTrajXY && anchorTrajXY.length) return anchorTrajXY.length;
      return anchorIndicesActive.length;
    }
    return currentNPoints();
  }

  function updateGenerateVolumesButtonLabel() {
    if (!btnGenerateVolumesEl) return;
    var n = currentVolumeCount();
    if (lastTrajectoryVolumeCacheId) {
      var saveCount = generatedTrajectoryVolumeCount > 0 ? generatedTrajectoryVolumeCount : n;
      var saveLabel = "Save " + saveCount + " volumes";
      if (typeof CryoDashboardIcons !== "undefined"
          && typeof CryoDashboardIcons.setSaveButtonLabel === "function") {
        CryoDashboardIcons.setSaveButtonLabel(btnGenerateVolumesEl, saveLabel);
      } else {
        btnGenerateVolumesEl.textContent = saveLabel;
      }
      return;
    }
    btnGenerateVolumesEl.removeAttribute("data-cryo-save-icon");
    btnGenerateVolumesEl.classList.remove(
      "cryo-btn-with-save-icon",
      "cryo-btn-with-save-icon--icon-only"
    );
    btnGenerateVolumesEl.textContent = "Generate " + n + " volumes";
  }

  function setGeneratedVolumesState(cacheId, nGenerated) {
    lastTrajectoryVolumeCacheId = String(cacheId || "");
    generatedTrajectoryVolumeCount = Number.isFinite(nGenerated) ? Math.max(0, nGenerated) : 0;
    if (!lastTrajectoryVolumeCacheId && trajVolColumn) {
      trajVolColumn.innerHTML = "";
    }
    updateGenerateVolumesButtonLabel();
  }

  function redrawTrajectoryOverlay() {
    if (!gd || !gd.data || !gd.data.length) return;
    if (anchorIndicesActive && anchorTrajXY && anchorTrajXY.length >= 2) {
      drawAnchorPolyline(anchorTrajXY);
      return;
    }
    if (!hasAnchorIndices() && editableTrajXY && editableTrajXY.length >= 2) {
      drawEditableTrajectory(editableTrajXY);
      return;
    }
    if (!startXY || !endXY) return;
    drawLineAndEndpoints(startXY[0], startXY[1], endXY[0], endXY[1]);
  }

  function clearTrajectoryZPanel() {
    lastZPathTxt = null;
    if (trajZNums) trajZNums.textContent = "";
    if (trajZPre) trajZPre.textContent = "";
    if (trajZPanel) trajZPanel.hidden = true;
  }

  function clearVolumeMontage() {
    volumeGeneration++;
    coordsRequestId++;
    if (trajVolColumn) trajVolColumn.innerHTML = "";
    setGeneratedVolumesState("", 0);
    editableTrajXY = null;
    clearTrajectoryZPanel();
    if (gd && gd.data && gd.data.length > 3) {
      try { Plotly.deleteTraces(gd, [3]); } catch (e) {}
    }
  }

  /** Drop numbered trajectory markers without touching thumbnails or in-flight decode. */
  function removeTrajectorySampleMarkersOnly() {
    if (gd && gd.data && gd.data.length > 3) {
      try { Plotly.deleteTraces(gd, [3]); } catch (e) {}
    }
  }

  var dragRestyleRaf = 0;
  var editableDragRaf = 0;

  function cancelDragRestyleRaf() {
    if (dragRestyleRaf) {
      cancelAnimationFrame(dragRestyleRaf);
      dragRestyleRaf = 0;
    }
  }

  /** Update line + endpoint traces (indices 1 and 2) without touching sample markers. */
  function restyleTrajectoryLineOnly() {
    if (!gd || !gd.data || gd.data.length < 2) return;
    try {
      var xs;
      var ys;
      if (editableTrajXY && editableTrajXY.length >= 2) {
        xs = [editableTrajXY.map(function(p) { return p[0]; })];
        ys = [editableTrajXY.map(function(p) { return p[1]; })];
      } else if (startXY && endXY) {
        xs = [[startXY[0], endXY[0]]];
        ys = [[startXY[1], endXY[1]]];
      } else {
        return;
      }
      Plotly.restyle(gd, { x: xs, y: ys }, [1]);
      syncTrajGlyphOverlay();
    } catch (e) {
      console.error(e);
    }
  }

  function scheduleTrajectoryRestyle() {
    if (dragRestyleRaf) return;
    dragRestyleRaf = requestAnimationFrame(function() {
      dragRestyleRaf = 0;
      restyleTrajectoryLineOnly();
    });
  }

  function cancelEditableDragRaf() {
    if (editableDragRaf) {
      cancelAnimationFrame(editableDragRaf);
      editableDragRaf = 0;
    }
  }

  function restyleEditableTrajectoryFromState() {
    if (!gd || !gd.data || !editableTrajXY || editableTrajXY.length < 2) return;
    redrawTrajectoryOverlay();
  }

  function scheduleEditableTrajectoryRestyle() {
    if (editableDragRaf) return;
    editableDragRaf = requestAnimationFrame(function() {
      editableDragRaf = 0;
      restyleTrajectoryLineOnly();
    });
  }

  function fmtCoord(v) {
    if (v == null) return "?";
    var a = Math.abs(v);
    if (a === 0) return "0";
    if (a >= 100) return v.toFixed(0);
    if (a >= 1) return v.toFixed(1);
    return v.toPrecision(3);
  }
  function fmtXY(xy) {
    if (!xy) return "(?, ?)";
    return "(" + fmtCoord(xy[0]) + ", " + fmtCoord(xy[1]) + ")";
  }

  function formatZPathDisplayFromZTraj(zTraj) {
    if (!zTraj || !zTraj.length) return "";
    var nCols = Array.isArray(zTraj[0]) ? zTraj[0].length : 0;
    var zHead = [];
    for (var j = 0; j < nCols; j++) zHead.push("z" + j);
    var body = zTraj.map(function(row) {
      return row.map(function(v) {
        var x = Number(v);
        if (!Number.isFinite(x)) return String(v);
        return x.toFixed(3);
      }).join(" ");
    }).join("\n");
    return (zHead.length ? zHead.join(" ") + "\n" : "") + body;
  }

  function formatZPathGutterFromPayload(j) {
    if (!j) return "";
    var traj_xy = (j.traj_xy && j.traj_xy.length) ? j.traj_xy : [];
    var pidx = (j.traj_particle_indices && j.traj_particle_indices.length)
      ? j.traj_particle_indices
      : [];
    var n = 0;
    if (j.z_traj && j.z_traj.length) n = j.z_traj.length;
    else if (traj_xy.length) n = traj_xy.length;
    if (!n) return "";
    var nDigits = String(n).length;
    var lines = [];
    var xLabel = j.xcol || "x";
    var yLabel = j.ycol || "y";
    lines.push("pt  particle  (" + xLabel + ", " + yLabel + ")");
    for (var i = 0; i < n; i++) {
      var idxTxt = String(i + 1);
      while (idxTxt.length < nDigits) idxTxt = " " + idxTxt;
      var p = (pidx[i] != null) ? String(pidx[i]) : "—";
      var xy = traj_xy[i];
      var xyTxt = "(?, ?)";
      if (xy && xy.length >= 2) {
        xyTxt = "(" + fmtCoord(xy[0]) + ", " + fmtCoord(xy[1]) + ")";
      }
      lines.push(idxTxt + "  #" + p + "  " + xyTxt);
    }
    return lines.join("\n");
  }

  function axisDisplayName(col) {
    return covariateDisplayMap[col] || col;
  }

  function applyVolumeCellAnnotations(entries, j) {
    var mode = (j && j.mode) || trajectoryMode;
    var traj_xy = (j && j.traj_xy) || [];
    var xcol = (j && j.xcol) || sx.value;
    var ycol = (j && j.ycol) || sy.value;
    var xdn = axisDisplayName(xcol);
    var ydn = axisDisplayName(ycol);
    for (var i = 0; i < entries.length; i++) {
      var ent = entries[i];
      var xy = traj_xy[i];
      ent.inset.classList.remove("cryo-traj-vol-inset--show");
      ent.insetImg.src = "";
      if (!xy || xy.length < 2) {
        ent.meta.textContent = "";
        continue;
      }
      if ((mode === "nearest" || mode === "graph") && j.traj_particle_indices && j.traj_particle_indices[i] != null) {
        var pidx = j.traj_particle_indices[i];
        var row = j.traj_rows && j.traj_rows[i] != null ? j.traj_rows[i] : "";
        ent.meta.textContent = "#" + pidx + (row !== "" ? " · row " + row : "")
          + "\n" + xdn + ": " + fmtCoord(xy[0]) + "\n" + ydn + ": " + fmtCoord(xy[1]);
        var thumb = j.particle_thumbs && j.particle_thumbs[i];
        if (thumb) {
          ent.insetImg.src = "data:image/jpeg;base64," + thumb;
          ent.inset.classList.add("cryo-traj-vol-inset--show");
        }
      } else {
        ent.meta.textContent = xdn + ": " + fmtCoord(xy[0]) + "\n" + ydn + ": " + fmtCoord(xy[1]);
      }
    }
  }

  function syncScatterControlsAlignment() {
    if (!scatterControlsCard || !scatterControlsSide || !scatterPlotStack) return;
    var minGapPx = 8;
    var stackRect = scatterPlotStack.getBoundingClientRect();
    var sideRect = scatterControlsSide.getBoundingClientRect();
    if (!stackRect || stackRect.height <= 0 || !sideRect) {
      scatterControlsCard.style.marginTop = "0px";
      return;
    }
    var previousMargin = scatterControlsCard.style.marginTop;
    scatterControlsCard.style.marginTop = "0px";
    var baseTop = scatterControlsCard.offsetTop;
    var cardHalf = scatterControlsCard.offsetHeight * 0.5;
    scatterControlsCard.style.marginTop = previousMargin;
    var plotCenterLocal = (stackRect.top + stackRect.height * 0.5) - sideRect.top;
    var desiredTop = plotCenterLocal - cardHalf;
    var px = Math.max(minGapPx, desiredTop - baseTop);
    scatterControlsCard.style.marginTop = Math.round(px) + "px";
  }

  if (plotlyStackEl && window.CryoResizeObserverUtils) {
    window.CryoResizeObserverUtils.observeResize([plotlyStackEl], function() {
      window.requestAnimationFrame(function() {
        syncScatterControlsAlignment();
        if (!gd || !gd.data || !gd.data.length) return;
        try { Plotly.Plots.resize(gd); } catch (e) {}
      });
    });
  }

  /* ── Convert a DOM click on the plot to data coordinates ── */
  function plotClickToData(evt, clamp) {
    var dragLayer = gd.querySelector(".nsewdrag");
    if (!dragLayer) return null;
    var rect = dragLayer.getBoundingClientRect();
    var fracX = (evt.clientX - rect.left) / rect.width;
    var fracY = (evt.clientY - rect.top) / rect.height;
    if (clamp) {
      fracX = Math.max(0, Math.min(1, fracX));
      fracY = Math.max(0, Math.min(1, fracY));
    } else if (fracX < 0 || fracX > 1 || fracY < 0 || fracY > 1) {
      return null;
    }
    var fl = gd._fullLayout;
    if (!fl || !fl.xaxis || !fl.yaxis) return null;
    var xr = fl.xaxis.range;
    var yr = fl.yaxis.range;
    var dataX = xr[0] + fracX * (xr[1] - xr[0]);
    var dataY = yr[1] - fracY * (yr[1] - yr[0]);
    return [dataX, dataY];
  }

  function dataToPixelXY(dataX, dataY) {
    var pt = dataToPlotStackXY(dataX, dataY);
    if (!pt || !trajGlyphOverlayEl) return null;
    var stackRect = trajGlyphOverlayEl.parentElement.getBoundingClientRect();
    return [stackRect.left + pt[0], stackRect.top + pt[1]];
  }

  function dataToPlotStackXY(dataX, dataY) {
    var fl = gd._fullLayout;
    if (!fl || !fl.xaxis || !fl.yaxis || !trajGlyphOverlayEl) return null;
    var plotArea = gd.querySelector(".nsewdrag");
    if (!plotArea) return null;
    var plotRect = plotArea.getBoundingClientRect();
    var stackRect = trajGlyphOverlayEl.parentElement.getBoundingClientRect();
    var xr = fl.xaxis.range;
    var yr = fl.yaxis.range;
    if (!xr || xr.length < 2 || !yr || yr.length < 2) return null;
    if (xr[1] === xr[0] || yr[1] === yr[0]) return null;
    var fracX = (dataX - xr[0]) / (xr[1] - xr[0]);
    var fracY = (yr[1] - dataY) / (yr[1] - yr[0]);
    return [
      plotRect.left - stackRect.left + fracX * plotRect.width,
      plotRect.top - stackRect.top + fracY * plotRect.height
    ];
  }

  function pixelDist(ax, ay, bx, by) {
    var ddx = ax - bx, ddy = ay - by;
    return Math.sqrt(ddx * ddx + ddy * ddy);
  }

  var DRAG_HANDLE_PX = 18;

  function restyleLineAndHandles() {
    if (!gd || !gd.data || gd.data.length < 3) return;
    try {
      if (gd.data.length > 3) Plotly.deleteTraces(gd, [3]);
    } catch (e) {}
    restyleTrajectoryLineOnly();
  }

  function setTrajectoryModesLockedForAnchors(on) {
    // Keep signature for call sites; mode buttons now remain active with anchors loaded.
    syncTraversalModeButtonStates();
  }

  function directTraversalAllowedForAxes(xc, yc) {
    function zCol(c) { return /^z[0-9]+$/.test(c); }
    function pcCol(c) { return /^PC[0-9]+$/.test(c); }
    return (zCol(xc) || pcCol(xc)) && (zCol(yc) || pcCol(yc));
  }

  function syncTraversalModeButtonStates() {
    var hasAnchors = hasAnchorIndices();
    syncTraversalSettingsText();
    var altMode = hasAnchors ? "graph" : "nearest";
    if (hasAnchors) {
      if (trajectoryMode !== "direct" && trajectoryMode !== "graph") {
        trajectoryMode = "direct";
      }
      if (trajModeDirectRadio) {
        trajModeDirectRadio.disabled = false;
        trajModeDirectRadio.checked = trajectoryMode === "direct";
      }
      if (trajModeAltRadio) {
        trajModeAltRadio.disabled = false;
        trajModeAltRadio.checked = trajectoryMode === altMode;
      }
      return;
    }
    var allowDirect = directTraversalAllowedForAxes(sx.value, sy.value);
    if (trajModeDirectRadio) {
      trajModeDirectRadio.disabled = !allowDirect;
    }
    if (trajModeAltRadio) {
      trajModeAltRadio.disabled = false;
    }
    if (!allowDirect && trajectoryMode === "direct") {
      trajectoryMode = "nearest";
      if (startXY && endXY) {
        fetchTrajectoryCoords();
      }
    }
    if (trajModeDirectRadio) {
      trajModeDirectRadio.checked = trajectoryMode === "direct";
    }
    if (trajModeAltRadio) {
      trajModeAltRadio.checked = trajectoryMode === altMode;
    }
  }

  function syncAnchorIndicesUI() {
    var on = anchorIndicesActive && anchorIndicesActive.length >= 2;
    if (trajAnchorPick) trajAnchorPick.hidden = !!on;
    if (trajAnchorManualRow) trajAnchorManualRow.hidden = !!on;
    if (on) {
      closeFileBrowser();
    }
    if (btnAnchorRemove) {
      btnAnchorRemove.classList.toggle("cryo-traj-remove--visible", !!on);
      btnAnchorRemove.setAttribute("aria-hidden", on ? "false" : "true");
    }
  }

  function clearAnchorMode() {
    anchorIndicesActive = null;
    anchorTrajXY = null;
    editableTrajXY = null;
    if (nPointsEl) nPointsEl.disabled = false;
    setTrajectoryModesLockedForAnchors(false);
    updateGenerateVolumesButtonLabel();
    syncAnchorIndicesUI();
    closeFileBrowser();
  }

  function onTrajectoryIndicesLoaded(res) {
    anchorIndicesActive = res.anchor_indices ? res.anchor_indices.slice() : null;
    anchorTrajXY = res.traj_xy ? res.traj_xy.slice() : null;
    editableTrajXY = null;
    if (res && (res.mode === "direct" || res.mode === "graph")) {
      trajectoryMode = res.mode;
    }
    if (nPointsEl) nPointsEl.disabled = false;
    setTrajectoryModesLockedForAnchors(true);
    syncPointsSelectorRange();
    if (nPointsEl && currentAnchorTraversalMode() === "direct") {
      nPointsEl.value = "0";
    }
    setGeneratedVolumesState("", 0);
    updateGenerateVolumesButtonLabel();
    syncAnchorIndicesUI();
    applyTrajectoryCoordsPayload(res);
    redrawTrajectoryOverlay();
    setTrajStatus("Index trajectory ready — press Generate to decode volumes.", false);
  }

  function makeLinearEditablePath(firstPt, lastPt, nPoints) {
    if (!firstPt || !lastPt) return null;
    var n = Math.max(2, parseInt(nPoints, 10) || 2);
    var out = [];
    var x0 = Number(firstPt[0]), y0 = Number(firstPt[1]);
    var x1 = Number(lastPt[0]), y1 = Number(lastPt[1]);
    if (!Number.isFinite(x0) || !Number.isFinite(y0) || !Number.isFinite(x1) || !Number.isFinite(y1)) {
      return null;
    }
    for (var i = 0; i < n; i++) {
      var t = (n <= 1) ? 0 : (i / (n - 1));
      out.push([x0 + t * (x1 - x0), y0 + t * (y1 - y0)]);
    }
    return out;
  }

  /* ── Mode toggle (also refreshes latent z via coords API) ── */
  function setMode(mode) {
    var prevMode = trajectoryMode;
    var hasAnchors = hasAnchorIndices();
    if (hasAnchors) {
      if (mode !== "direct" && mode !== "graph") return;
    } else if (mode !== "direct" && mode !== "nearest") {
      return;
    }
    if (!hasAnchors && mode === "direct" && trajModeDirectRadio && trajModeDirectRadio.disabled) {
      return;
    }
    trajectoryMode = mode;
    if (!hasAnchors && prevMode === "nearest" && mode === "direct") {
      var nLinear = (editableTrajXY && editableTrajXY.length >= 2)
        ? editableTrajXY.length
        : currentNPoints();
      var firstPt = (editableTrajXY && editableTrajXY.length >= 2)
        ? editableTrajXY[0]
        : startXY;
      var lastPt = (editableTrajXY && editableTrajXY.length >= 2)
        ? editableTrajXY[editableTrajXY.length - 1]
        : endXY;
      var linearPath = makeLinearEditablePath(firstPt, lastPt, nLinear);
      if (linearPath && linearPath.length >= 2) {
        editableTrajXY = linearPath;
      } else {
        editableTrajXY = null;
      }
    }
    syncTraversalModeButtonStates();
    updateGenerateVolumesButtonLabel();
    if (hasAnchors) {
      fetchTrajectoryCoords();
      return;
    }
    if (startXY && endXY) {
      redrawTrajectoryOverlay();
      fetchTrajectoryCoords();
    }
  }
  document.querySelectorAll('input[name="traj-mode"]').forEach(function(radio) {
    radio.addEventListener("change", function() {
      if (!radio.checked) return;
      setMode(radio.value);
    });
  });
  if (btnGenerateVolumesEl) {
    btnGenerateVolumesEl.addEventListener("click", function() {
      if (lastTrajectoryVolumeCacheId) {
        saveTrajectoryVolumes();
      } else {
        generateTrajectory();
      }
    });
  }
  if (btnSaveZpathAs) {
    btnSaveZpathAs.addEventListener("click", function() {
      if (!lastZPathTxt) return;
      if (fbSaveName) fbSaveName.value = "z-path.txt";
      openFileBrowser("", "save-zpath");
    });
  }
  if (btnSaveZpathWorkdir) {
    btnSaveZpathWorkdir.addEventListener("click", function() {
      if (!lastZPathTxt) return;
      fetch("{{ url_for('api_trajectory_save_zpath') }}", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ z_path_txt: lastZPathTxt })
      })
        .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
        .then(function(res) {
          if (!res.ok) {
            setTrajStatus(res.j.error || "Could not save z-path.txt.", false);
            return;
          }
          var p = res.j.path || (expWorkdir ? expWorkdir + "/z-path.txt" : "z-path.txt");
          setTrajStatus("Saved " + p, false);
        })
        .catch(function(err) {
          console.error(err);
          setTrajStatus("Save failed.", false);
        });
    });
  }
  function postTrajectoryIndices(url, statusMsg, errPrefix) {
    closeFileBrowser();
    setTrajStatus(statusMsg, false);
    var anchorMode = currentAnchorTraversalMode();
    var nPointsReq = requestedAnchorNPoints(anchorMode);
    fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        x: sx.value,
        y: sy.value,
        mode: anchorMode,
        n_points: nPointsReq,
        max_neighbors: currentMaxNeighbors(),
        avg_neighbors: currentAvgNeighbors()
      })
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          setTrajStatus(res.j.error || (errPrefix + " failed."), false);
          return;
        }
        onTrajectoryIndicesLoaded(res.j);
      })
      .catch(function(err) {
        console.error(err);
        setTrajStatus(errPrefix + " request failed.", false);
      });
  }

  function parseManualAnchorIndices(raw) {
    var txt = String(raw || "").trim();
    if (!txt) return [];
    txt = txt.replace(/[\[\]\(\)]/g, " ");
    var toks = txt.split(/[\s,;]+/).filter(Boolean);
    var out = [];
    for (var i = 0; i < toks.length; i++) {
      var t = toks[i];
      if (!/^-?[0-9]+$/.test(t)) return null;
      out.push(parseInt(t, 10));
    }
    return out;
  }

  function loadManualAnchorIndices() {
    closeFileBrowser();
    var parsed = parseManualAnchorIndices(anchorIndicesManualEl && anchorIndicesManualEl.value);
    if (!parsed || parsed.length < 2) {
      setTrajStatus("Enter at least two integer anchor indices (comma or space separated).", false);
      return;
    }
    anchorIndicesActive = parsed.slice();
    anchorTrajXY = null;
    if (nPointsEl) nPointsEl.disabled = false;
    if (nPointsEl && currentAnchorTraversalMode() === "direct") {
      nPointsEl.value = "0";
    }
    setTrajectoryModesLockedForAnchors(true);
    updateGenerateVolumesButtonLabel();
    syncAnchorIndicesUI();
    fetchTrajectoryCoords();
  }

  function syncFileBrowserModeUI() {
    var saveMode = fbMode === "save-zpath";
    if (fbSaveRow) fbSaveRow.hidden = !saveMode;
  }

  function openFileBrowser(startDir, mode) {
    if (!trajFileBrowserPanel || !serverFileBrowser) return;
    fbMode = (mode === "save-zpath") ? "save-zpath" : "import";
    trajFileBrowserPanel.hidden = false;
    trajFileBrowserPanel.setAttribute("aria-hidden", "false");
    syncFileBrowserModeUI();
    loadFileBrowserDir(startDir || "");
  }

  function closeFileBrowser() {
    if (trajFileBrowserPanel) {
      trajFileBrowserPanel.hidden = true;
      trajFileBrowserPanel.setAttribute("aria-hidden", "true");
    }
    fbCurrentDir = null;
    fbMode = "import";
    syncFileBrowserModeUI();
  }

  function normalizedSaveFilename() {
    var name = String((fbSaveName && fbSaveName.value) || "").trim();
    if (!name) name = "z-path.txt";
    if (name.indexOf("/") >= 0 || name.indexOf("\\") >= 0) return null;
    if (!/\.txt$/i.test(name)) name = name + ".txt";
    return name;
  }

  function saveZPathViaBrowser() {
    if (!lastZPathTxt) {
      setTrajStatus("No latent z path to save yet.", false);
      return;
    }
    if (!fbCurrentDir) {
      setTrajStatus("Choose a destination folder first.", false);
      return;
    }
    var fname = normalizedSaveFilename();
    if (!fname) {
      setTrajStatus("Filename cannot contain path separators.", false);
      return;
    }
    var outPath = fbCurrentDir + "/" + fname;
    setTrajStatus("Saving latent z path…", false);
    fetch("{{ url_for('api_trajectory_save_zpath') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        z_path_txt: lastZPathTxt,
        out_path: outPath
      })
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          setTrajStatus(res.j.error || "Could not save z-path.txt.", false);
          return;
        }
        closeFileBrowser();
        setTrajStatus("Saved " + (res.j.path || outPath), false);
      })
      .catch(function(err) {
        console.error(err);
        setTrajStatus("Save request failed.", false);
      });
  }

  function loadFileBrowserDir(dir) {
    if (!fbList || !fbPath) return;
    fbList.innerHTML = "<li class='cryo-file-browser-empty'>Loading…</li>";
    var q = dir ? ("?dir=" + encodeURIComponent(dir)) : "";
    fetch("{{ url_for('api_list_server_files') }}" + q)
      .then(function(r) { return r.json(); })
      .then(function(j) {
        if (!j.ok) {
          fbList.innerHTML = "<li class='cryo-file-browser-empty'>" + (j.error || "Error") + "</li>";
          return;
        }
        fbCurrentDir = j.dir;
        fbPath.textContent = j.dir;
        fbPath.title = j.dir;
        fbList.innerHTML = "";
        if (!j.entries || !j.entries.length) {
          fbList.innerHTML = "<li class='cryo-file-browser-empty'>No entries here</li>";
          return;
        }
        j.entries.forEach(function(ent) {
          var li = document.createElement("li");
          var icon = document.createElement("span");
          icon.className = "fb-icon";
          icon.textContent = ent.type === "dir" ? "\uD83D\uDCC1" : "\uD83D\uDCC4";
          var name = document.createElement("span");
          name.className = "fb-name";
          name.textContent = ent.name;
          li.appendChild(icon);
          li.appendChild(name);
          if (ent.type === "dir") {
            li.addEventListener("click", function() {
              loadFileBrowserDir(j.dir + "/" + ent.name);
            });
          } else {
            li.addEventListener("click", function() {
              var fullPath = j.dir + "/" + ent.name;
              if (fbMode === "save-zpath") {
                if (fbSaveName) fbSaveName.value = ent.name;
              } else {
                closeFileBrowser();
                importServerPklFile(fullPath);
              }
            });
          }
          fbList.appendChild(li);
        });
      })
      .catch(function() {
        fbList.innerHTML = "<li class='cryo-file-browser-empty'>Could not list directory</li>";
      });
  }

  function importServerPklFile(serverPath) {
    setTrajStatus("Loading anchor indices…", false);
    var anchorMode = currentAnchorTraversalMode();
    var nPointsReq = requestedAnchorNPoints(anchorMode);
    fetch("{{ url_for('api_trajectory_import_anchors') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        server_path: serverPath,
        x: sx.value,
        y: sy.value,
        mode: anchorMode,
        n_points: nPointsReq,
        max_neighbors: currentMaxNeighbors(),
        avg_neighbors: currentAvgNeighbors()
      })
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          setTrajStatus(res.j.error || "Import failed.", false);
          return;
        }
        onTrajectoryIndicesLoaded(res.j);
      })
      .catch(function(err) {
        console.error(err);
        setTrajStatus("Import request failed.", false);
      });
  }

  if (btnAnchorImportPkl) {
    btnAnchorImportPkl.addEventListener("click", function() {
      openFileBrowser("", "import");
    });
  }
  if (fbUp) {
    fbUp.addEventListener("click", function() {
      if (fbCurrentDir) {
        var parent = fbCurrentDir.replace(/\/[^\/]*\/?$/, "") || "/";
        loadFileBrowserDir(parent);
      }
    });
  }
  if (fbCancel) {
    fbCancel.addEventListener("click", function() {
      closeFileBrowser();
    });
  }
  if (fbSaveBtn) {
    fbSaveBtn.addEventListener("click", function() {
      saveZPathViaBrowser();
    });
  }
  if (fbSaveName) {
    fbSaveName.addEventListener("keydown", function(evt) {
      if (evt.key === "Enter") {
        evt.preventDefault();
        saveZPathViaBrowser();
      }
    });
  }
  if (btnAnchorKmeans) {
    btnAnchorKmeans.addEventListener("click", function() {
      postTrajectoryIndices(
        "{{ url_for('api_trajectory_kmeans_centers') }}",
        "Loading k-means centers…",
        "K-means centers"
      );
    });
  }
  if (btnAnchorRandom) {
    btnAnchorRandom.addEventListener("click", function() {
      postTrajectoryIndices(
        "{{ url_for('api_trajectory_random_indices') }}",
        "Sampling random indices…",
        "Random indices"
      );
    });
  }
  if (btnAnchorManualLoad) {
    btnAnchorManualLoad.addEventListener("click", loadManualAnchorIndices);
  }
  if (anchorIndicesManualEl) {
    anchorIndicesManualEl.addEventListener("keydown", function(evt) {
      if (evt.key === "Enter") {
        evt.preventDefault();
        loadManualAnchorIndices();
      }
    });
  }
  if (btnAnchorRemove) {
    btnAnchorRemove.addEventListener("click", function() {
      clearAnchorMode();
      clearTrajectoryZPanel();
      initDefaultTrajectory(scatterLoadGeneration);
    });
  }

  /* ── Before reloading scatter (axes / color): cancel in-flight requests, clear stale 2D state ── */
  function preparePlotReload() {
    volumeGeneration++;
    coordsRequestId++;
    dragEndpoint = null;
    dragPointIndex = -1;
    clearTrajGlyphOverlay();
    trajPlotRows = null;
    trajMarkerColors = null;
    startXY = null;
    endXY = null;
    anchorTrajXY = null;
    editableTrajXY = null;
    setTrajStatus("", false);
    if (!anchorIndicesActive) {
      trajVolColumn.innerHTML = "";
      clearTrajectoryZPanel();
    }
  }

  function resetTrajectory() {
    clearAnchorMode();
    initDefaultTrajectory(scatterLoadGeneration);
  }
  btnResetEl.addEventListener("click", resetTrajectory);

  /* ── Overlay traces (markers + line) on the scatter ── */
  var TRAJ_MARKER_ENDPOINT = "square";
  var TRAJ_MARKER_WAYPOINT = "diamond";
  var TRAJ_MARKER_SIZE_ENDPOINT = 14;
  var TRAJ_MARKER_SIZE_WAYPOINT = 12;
  var TRAJ_TEXTFONT_SIZE = 20;
  var TRAJ_ANCHOR_MARKER_SIZE = 13;
  var TRAJ_ANCHOR_TEXTFONT_SIZE = 23;

  function trajectoryLabelCount(pointCount) {
    if (typeof pointCount === "number" && pointCount >= 2) return pointCount;
    if (editableTrajXY && editableTrajXY.length >= 2) return editableTrajXY.length;
    return Math.max(2, currentNPoints());
  }

  function buildTrajectoryPointLabels(pointCount) {
    var n = trajectoryLabelCount(pointCount);
    var labels = [];
    for (var i = 0; i < n; i++) {
      if (i === 0) labels.push("<b>Start (1)</b>");
      else if (i === n - 1) labels.push("<b>End (" + n + ")</b>");
      else labels.push("<b>" + (i + 1) + "</b>");
    }
    return labels;
  }

  function trajColorPayloadFields() {
    var colorCol = sc.value || "none";
    var fields = { color: colorCol };
    if (colorCol !== "none" && !trajColorByIsDiscrete()) {
      fields.palette = selectedTrajPalette();
    }
    return fields;
  }

  function trajNeighborColoringActive() {
    if (trajectoryMode !== "nearest" || !sc.value || sc.value === "none") return false;
    if (trajMarkerColors && trajMarkerColors.length >= 2) return true;
    return !!(trajPlotRows && trajPlotRows.length >= 2);
  }

  function plotlyColorToCss(c) {
    if (c == null) return null;
    if (typeof c === "string") {
      if (/^#/.test(c) || c.indexOf("rgb") === 0) return c;
      return null;
    }
    if (typeof c === "object" && c.r != null) {
      return "rgb(" + Math.round(c.r) + "," + Math.round(c.g) + "," + Math.round(c.b) + ")";
    }
    return null;
  }

  function scatterColorMode() {
    var meta = gd && gd.layout && gd.layout.meta;
    if (meta && meta.cdrgn_color_mode) return String(meta.cdrgn_color_mode);
    var mc = gd && gd.data && gd.data[0] && gd.data[0].marker && gd.data[0].marker.color;
    if (Array.isArray(mc) && mc.length && typeof mc[0] === "string" && /^#/.test(String(mc[0]))) {
      return "discrete";
    }
    return "continuous";
  }

  function discreteScatterColorMap() {
    var out = Object.create(null);
    var leg = gd && gd.layout && gd.layout.meta && gd.layout.meta.cdrgn_color_legend;
    if (!leg || leg.type !== "discrete" || !leg.items) return out;
    for (var li = 0; li < leg.items.length; li++) {
      var it = leg.items[li];
      if (!it || it.label == null || !it.color) continue;
      out[String(it.label)] = String(it.color);
    }
    return out;
  }

  function continuousHexFromCovariateValue(val) {
    if (typeof val !== "number" || !isFinite(val)) return null;
    var trace = gd && gd.data && gd.data[0];
    var mk = (trace && trace.marker) || {};
    var cmin = mk.cmin;
    var cmax = mk.cmax;
    var leg = gd && gd.layout && gd.layout.meta && gd.layout.meta.cdrgn_color_legend;
    if (leg && leg.type === "continuous") {
      if (cmin == null || !isFinite(cmin)) cmin = leg.min;
      if (cmax == null || !isFinite(cmax)) cmax = leg.max;
    }
    cmin = typeof cmin === "number" && isFinite(cmin) ? cmin : 0;
    cmax = typeof cmax === "number" && isFinite(cmax) ? cmax : 1;
    var span = cmax - cmin;
    var t = span > 0 ? (val - cmin) / span : 0.5;
    t = Math.max(0, Math.min(1, t));
    var pal = selectedTrajPalette();
    if (typeof CryoColorCovariateLegend !== "undefined"
        && CryoColorCovariateLegend.hasPalette
        && CryoColorCovariateLegend.hasPalette(pal)
        && typeof CryoColorCovariateLegend.paletteScaleCSS === "function") {
      return CryoColorCovariateLegend.paletteScaleCSS(pal, t);
    }
    return null;
  }

  function scatterRowToTraceIndex(plotRow) {
    if (!gd || !gd.data || !gd.data[0] || !gd.data[0].customdata) return -1;
    var want = Number(plotRow);
    if (!Number.isFinite(want)) return -1;
    var cd = gd.data[0].customdata;
    for (var i = 0; i < cd.length; i++) {
      if (cd[i] && Number(cd[i][1]) === want) return i;
    }
    return -1;
  }

  function scatterMarkerFillHexAtTraceIndex(ti) {
    if (ti < 0 || !gd || !gd.data || !gd.data[0]) return null;
    var full = gd._fullData && gd._fullData[0];
    if (full && full.marker && Array.isArray(full.marker.color) && full.marker.color[ti] != null) {
      var fromFull = plotlyColorToCss(full.marker.color[ti]);
      if (fromFull) return fromFull;
    }
    var trace = gd.data[0];
    var mc = trace.marker && trace.marker.color;
    if (Array.isArray(mc) && mc[ti] != null) {
      var direct = plotlyColorToCss(mc[ti]);
      if (direct) return direct;
      if (typeof mc[ti] === "string" && /^#/.test(mc[ti])) return mc[ti];
    }
    var cd = trace.customdata;
    var row = cd && cd[ti] ? cd[ti] : null;
    var covKey = row && row.length >= 3 && row[2] != null ? String(row[2]) : "";
    if (scatterColorMode() === "discrete") {
      if (covKey && discreteScatterColorMap()[covKey]) return discreteScatterColorMap()[covKey];
      if (Array.isArray(mc) && mc[ti] != null && typeof mc[ti] === "string") return mc[ti];
    } else if (covKey !== "") {
      var cVal = parseFloat(covKey);
      if (isFinite(cVal)) {
        var fromVal = continuousHexFromCovariateValue(cVal);
        if (fromVal) return fromVal;
      }
      if (Array.isArray(mc) && mc[ti] != null && typeof mc[ti] === "number" && isFinite(mc[ti])) {
        return continuousHexFromCovariateValue(mc[ti]);
      }
    }
    return null;
  }

  function scatterColorForPlotRow(plotRow, fallbackHex) {
    var ti = scatterRowToTraceIndex(plotRow);
    if (ti < 0) return fallbackHex;
    return scatterMarkerFillHexAtTraceIndex(ti) || fallbackHex;
  }

  function defaultTrajectoryPointColor(i, n) {
    if (i === 0) return "#c4703a";
    if (i === n - 1) return "#243b53";
    return "#243b53";
  }

  function buildTrajectoryMarkerArrays(pointCount, trajIndexMap) {
    var n = (typeof pointCount === "number" && pointCount >= 2) ? pointCount : trajectoryLabelCount();
    var labelN = trajectoryLabelCount(n);
    var symbols = [];
    var colors = [];
    var sizes = [];
    var useNeighborColors = trajNeighborColoringActive();
    for (var ii = 0; ii < n; ii++) {
      var ti = (trajIndexMap && trajIndexMap[ii] != null) ? trajIndexMap[ii] : ii;
      if (ti === 0) {
        symbols.push(TRAJ_MARKER_ENDPOINT);
        sizes.push(TRAJ_MARKER_SIZE_ENDPOINT);
      } else if (ti === labelN - 1) {
        symbols.push(TRAJ_MARKER_ENDPOINT);
        sizes.push(TRAJ_MARKER_SIZE_ENDPOINT);
      } else {
        symbols.push(TRAJ_MARKER_WAYPOINT);
        sizes.push(TRAJ_MARKER_SIZE_WAYPOINT);
      }
      var fallback = defaultTrajectoryPointColor(ti, labelN);
      if (useNeighborColors && trajMarkerColors && ti < trajMarkerColors.length) {
        colors.push(trajMarkerColors[ti] || fallback);
      } else if (useNeighborColors && trajPlotRows && ti < trajPlotRows.length) {
        colors.push(scatterColorForPlotRow(trajPlotRows[ti], fallback));
      } else {
        colors.push(fallback);
      }
    }
    return { symbol: symbols, color: colors, size: sizes };
  }

  function clearTrajGlyphOverlay() {
    if (trajGlyphOverlayEl) trajGlyphOverlayEl.innerHTML = "";
  }

  function glyphMarkerClass(symbol) {
    return symbol === TRAJ_MARKER_ENDPOINT
      ? "cryo-traj-glyph-marker--square"
      : "cryo-traj-glyph-marker--diamond";
  }

  function collectTrajGlyphSpecs() {
    var specs = [];
    if (anchorIndicesActive && anchorTrajXY && anchorTrajXY.length >= 2) {
      if (anchorTrajXY.length > 40) return specs;
      var anchorMk = buildTrajectoryMarkerArrays(anchorTrajXY.length);
      for (var ai = 0; ai < anchorTrajXY.length; ai++) {
        specs.push({
          x: anchorTrajXY[ai][0],
          y: anchorTrajXY[ai][1],
          labelHtml: "<b>" + (ai + 1) + "</b>",
          color: anchorMk.color[ai],
          symbol: anchorMk.symbol[ai],
          size: TRAJ_ANCHOR_MARKER_SIZE,
          labelSize: TRAJ_ANCHOR_TEXTFONT_SIZE,
          labelClass: "cryo-traj-glyph-label--anchor"
        });
      }
      return specs;
    }
    if (!hasAnchorIndices() && editableTrajXY && editableTrajXY.length >= 2) {
      var n = editableTrajXY.length;
      var labels = buildTrajectoryPointLabels(n);
      var mk = buildTrajectoryMarkerArrays(n);
      for (var ei = 0; ei < n; ei++) {
        specs.push({
          x: editableTrajXY[ei][0],
          y: editableTrajXY[ei][1],
          labelHtml: labels[ei],
          color: mk.color[ei],
          symbol: mk.symbol[ei],
          size: mk.size[ei],
          labelSize: TRAJ_TEXTFONT_SIZE
        });
      }
      return specs;
    }
    if (startXY && endXY) {
      var nLbl = trajectoryLabelCount();
      var lastTrajIdx = (trajPlotRows && trajPlotRows.length >= 2)
        ? trajPlotRows.length - 1
        : 1;
      var mkEp = buildTrajectoryMarkerArrays(2, [0, lastTrajIdx]);
      var epLabels = ["<b>Start (1)</b>", "<b>End (" + nLbl + ")</b>"];
      specs.push({
        x: startXY[0],
        y: startXY[1],
        labelHtml: epLabels[0],
        color: mkEp.color[0],
        symbol: mkEp.symbol[0],
        size: mkEp.size[0],
        labelSize: TRAJ_TEXTFONT_SIZE
      });
      specs.push({
        x: endXY[0],
        y: endXY[1],
        labelHtml: epLabels[1],
        color: mkEp.color[1],
        symbol: mkEp.symbol[1],
        size: mkEp.size[1],
        labelSize: TRAJ_TEXTFONT_SIZE
      });
    }
    return specs;
  }

  function syncTrajGlyphOverlay() {
    clearTrajGlyphOverlay();
    if (!trajGlyphOverlayEl || !gd || !gd._fullLayout) return;
    var specs = collectTrajGlyphSpecs();
    for (var i = 0; i < specs.length; i++) {
      var spec = specs[i];
      var pt = dataToPlotStackXY(spec.x, spec.y);
      if (!pt) continue;
      var sizePx = Number(spec.size) || TRAJ_MARKER_SIZE_WAYPOINT;
      var markerEl = document.createElement("div");
      markerEl.className = "cryo-traj-glyph-marker " + glyphMarkerClass(spec.symbol);
      markerEl.style.left = pt[0] + "px";
      markerEl.style.top = pt[1] + "px";
      markerEl.style.width = sizePx + "px";
      markerEl.style.height = sizePx + "px";
      markerEl.style.backgroundColor = spec.color || "#243b53";
      var labelEl = document.createElement("div");
      labelEl.className = "cryo-traj-glyph-label"
        + (spec.labelClass ? " " + spec.labelClass : "");
      labelEl.style.left = pt[0] + "px";
      labelEl.style.top = pt[1] + "px";
      labelEl.style.fontSize = (spec.labelSize || TRAJ_TEXTFONT_SIZE) + "px";
      labelEl.style.color = spec.color || "#243b53";
      labelEl.innerHTML = spec.labelHtml || "";
      trajGlyphOverlayEl.appendChild(markerEl);
      trajGlyphOverlayEl.appendChild(labelEl);
    }
  }

  function wireTrajectoryGlyphOverlayHook() {
    if (trajOutlineHookWired || !gd) return;
    trajOutlineHookWired = true;
    gd.on("plotly_afterplot", syncTrajGlyphOverlay);
    gd.on("plotly_relayout", syncTrajGlyphOverlay);
  }

  function finishTrajectoryOverlayDraw(plotPromise) {
    wireTrajectoryGlyphOverlayHook();
    function run() {
      requestAnimationFrame(syncTrajGlyphOverlay);
    }
    if (plotPromise && typeof plotPromise.then === "function") {
      plotPromise.then(run);
    } else {
      run();
    }
  }

  function removeOverlayTraces() {
    clearTrajGlyphOverlay();
    if (!gd || !gd.data) return;
    var toRemove = [];
    for (var i = gd.data.length - 1; i >= 1; i--) toRemove.push(i);
    if (toRemove.length) {
      try { Plotly.deleteTraces(gd, toRemove); } catch (e) {}
    }
  }

  function drawTrajLineTrace(xs, ys, lineWidth) {
    return {
      x: xs,
      y: ys,
      mode: "lines",
      type: "scatter",
      line: { color: "#c4703a", width: lineWidth || 2.2, dash: "dot" },
      hoverinfo: "skip",
      showlegend: false
    };
  }

  function drawAnchorPolyline(traj_xy) {
    if (!gd || !gd.data || !traj_xy || traj_xy.length < 2) return;
    removeOverlayTraces();
    var xs = traj_xy.map(function(p) { return p[0]; });
    var ys = traj_xy.map(function(p) { return p[1]; });
    finishTrajectoryOverlayDraw(Plotly.addTraces(gd, [drawTrajLineTrace(xs, ys, 2.5)]));
  }

  function drawLineAndEndpoints(sx, sy, ex, ey) {
    removeOverlayTraces();
    finishTrajectoryOverlayDraw(Plotly.addTraces(gd, [
      drawTrajLineTrace([sx, ex], [sy, ey], 2.5)
    ]));
  }

  function drawEditableTrajectory(points) {
    if (!gd || !gd.data || !points || points.length < 2) return;
    removeOverlayTraces();
    var xs = points.map(function(p) { return p[0]; });
    var ys = points.map(function(p) { return p[1]; });
    finishTrajectoryOverlayDraw(Plotly.addTraces(gd, [drawTrajLineTrace(xs, ys, 2.2)]));
  }

  function applyTrajectoryCoordsPayload(j) {
    if (!j || !j.ok) return;
    removeTrajectorySampleMarkersOnly();
    if (j.traj_rows && j.traj_rows.length) {
      trajPlotRows = j.traj_rows.map(function(r) { return Number(r); });
    } else if (trajectoryMode !== "nearest") {
      trajPlotRows = null;
    }
    if (j.traj_marker_colors && j.traj_marker_colors.length) {
      trajMarkerColors = j.traj_marker_colors.map(function(c) { return String(c); });
    } else if (trajectoryMode !== "nearest" || !sc.value || sc.value === "none") {
      trajMarkerColors = null;
    }
    if (hasAnchorIndices() && j.traj_xy) {
      anchorTrajXY = j.traj_xy;
      editableTrajXY = null;
    } else if (j.traj_xy && j.traj_xy.length) {
      editableTrajXY = j.traj_xy.map(function(p) { return [Number(p[0]), Number(p[1])]; });
      redrawTrajectoryOverlay();
    }
    if (j.z_path_txt && trajZPre && trajZPanel) {
      lastZPathTxt = j.z_path_txt;
      var hasZTraj = j.z_traj && j.z_traj.length;
      trajZPre.textContent = hasZTraj
        ? formatZPathDisplayFromZTraj(j.z_traj)
        : j.z_path_txt;
      if (trajZNums) trajZNums.textContent = hasZTraj
        ? formatZPathGutterFromPayload(j)
        : "";
      trajZPanel.hidden = false;
    } else {
      clearTrajectoryZPanel();
    }
  }

  function scheduleCoordsAfterDrag() {
    if (anchorIndicesActive && anchorIndicesActive.length >= 2) return;
    if (coordsDragTimer) {
      clearTimeout(coordsDragTimer);
      coordsDragTimer = 0;
    }
    coordsDragTimer = setTimeout(function() {
      coordsDragTimer = 0;
      fetchTrajectoryCoords();
    }, 300);
  }

  function fetchTrajectoryCoords() {
    setGeneratedVolumesState("", 0);
    if (hasAnchorIndices()) {
      var myIdA = ++coordsRequestId;
      setTrajStatus("Computing latent z…", false);
      fetch("{{ url_for('api_trajectory_coords') }}", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(Object.assign({
          anchor_indices: anchorIndicesActive,
          mode: currentAnchorTraversalMode(),
          n_points: currentNPoints(),
          max_neighbors: currentMaxNeighbors(),
          avg_neighbors: currentAvgNeighbors(),
          x: sx.value,
          y: sy.value
        }, trajColorPayloadFields()))
      })
        .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
        .then(function(res) {
          if (myIdA !== coordsRequestId) return;
          if (!res.ok) {
            setTrajStatus(res.j.error || "Could not compute latent z.", false);
            return;
          }
          applyTrajectoryCoordsPayload(res.j);
          redrawTrajectoryOverlay();
          setTrajStatus("Latent z ready — press Generate to decode volumes.", false);
        })
        .catch(function(err) {
          if (myIdA !== coordsRequestId) return;
          console.error(err);
          setTrajStatus("Latent z request failed.", false);
        });
      return;
    }
    if (!startXY || !endXY) return;
    var myId = ++coordsRequestId;
    setTrajStatus("Computing latent z…", false);
    var payload = Object.assign({
      mode: trajectoryMode,
      start: startXY,
      end: endXY,
      x: sx.value,
      y: sy.value,
      n_points: currentNPoints()
    }, trajColorPayloadFields());
    if (editableTrajXY && editableTrajXY.length >= 2) {
      payload.traj_xy = editableTrajXY;
    }
    fetch("{{ url_for('api_trajectory_coords') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (myId !== coordsRequestId) return;
        if (!res.ok) {
          setTrajStatus(res.j.error || "Could not compute latent z.", false);
          return;
        }
        applyTrajectoryCoordsPayload(res.j);
        setTrajStatus("Latent z ready — press Generate to decode volumes.", false);
      })
      .catch(function(err) {
        if (myId !== coordsRequestId) return;
        console.error(err);
        setTrajStatus("Latent z request failed.", false);
      });
  }

  /* ── Volume column ── */
  function buildVolumeColumn(n) {
    trajVolColumn.innerHTML = "";
    var entries = [];
    for (var i = 0; i < n; i++) {
      var cell = document.createElement("div");
      cell.className = "cryo-traj-vol-cell";
      var mainImg = document.createElement("img");
      mainImg.className = "cryo-traj-vol-main";
      mainImg.src = "";
      mainImg.alt = "Volume " + (i + 1);
      var lbl = document.createElement("span");
      lbl.className = "cryo-traj-vol-label";
      lbl.textContent = String(i + 1);
      var meta = document.createElement("div");
      meta.className = "cryo-traj-vol-meta";
      meta.setAttribute("aria-hidden", "true");
      var inset = document.createElement("div");
      inset.className = "cryo-traj-vol-inset";
      var insetImg = document.createElement("img");
      insetImg.alt = "";
      inset.appendChild(insetImg);
      cell.appendChild(mainImg);
      cell.appendChild(lbl);
      cell.appendChild(meta);
      cell.appendChild(inset);
      trajVolColumn.appendChild(cell);
      entries.push({
        mainImg: mainImg,
        meta: meta,
        inset: inset,
        insetImg: insetImg
      });
    }
    return entries;
  }

  /* ── Generate trajectory volumes ── */
  function generateTrajectory() {
    var useAnchors = hasAnchorIndices();
    if (!useAnchors && (!startXY || !endXY)) return;
    var myGen = ++volumeGeneration;
    var n = currentVolumeCount();
    var volumeEntries = buildVolumeColumn(n);
    setTrajStatus("Decoding " + n + " volumes and rendering (ChimeraX)…", true);
    if (plotStatus) plotStatus.textContent = "Generating trajectory…";

    redrawTrajectoryOverlay();

    var payload = useAnchors
      ? Object.assign({
          anchor_indices: anchorIndicesActive,
          mode: currentAnchorTraversalMode(),
          n_points: currentNPoints(),
          max_neighbors: currentMaxNeighbors(),
          avg_neighbors: currentAvgNeighbors(),
          x: sx.value,
          y: sy.value
        }, trajColorPayloadFields())
      : Object.assign({
          mode: trajectoryMode,
          start: startXY,
          end: endXY,
          x: sx.value,
          y: sy.value,
          n_points: currentNPoints()
        }, trajColorPayloadFields());
    if (!useAnchors && editableTrajXY && editableTrajXY.length >= 2) {
      payload.traj_xy = editableTrajXY;
    }
    payload.chimerax_cpus = trajChimeraxCpus;
    fetch("{{ url_for('api_trajectory_volumes') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (myGen !== volumeGeneration) return;
        if (!res.ok) {
          if (res.j.need_chimerax) {
            window.alert(res.j.error || "Set CHIMERAX_PATH and try again.");
          }
          setTrajStatus(res.j.error || "Volume generation failed.", false);
          if (plotStatus) plotStatus.textContent = "Volume generation failed.";
          return;
        }
        var imgs = res.j.images || [];
        for (var ci = 0; ci < volumeEntries.length && ci < imgs.length; ci++) {
          volumeEntries[ci].mainImg.src = "data:image/png;base64," + imgs[ci];
        }
        applyVolumeCellAnnotations(volumeEntries, res.j);
        applyTrajectoryCoordsPayload(res.j);
        setGeneratedVolumesState(String(res.j.volume_cache_id || ""), imgs.length);
        redrawTrajectoryOverlay();
        setTrajStatus(imgs.length + " volumes generated.", false);
        if (plotStatus) {
          if (useAnchors) {
            plotStatus.textContent = "Index trajectory — click Remove indices or change axes to edit.";
          } else {
            plotStatus.textContent = "Showing trajectory between "
              + fmtXY(startXY) + " and " + fmtXY(endXY)
              + " — drag the Start / End handles to adjust.";
          }
        }
      })
      .catch(function(err) {
        if (myGen !== volumeGeneration) return;
        console.error(err);
        setTrajStatus("Request failed.", false);
        if (plotStatus) plotStatus.textContent = "Request failed.";
      });
  }

  function saveTrajectoryVolumes() {
    if (!lastTrajectoryVolumeCacheId) {
      setTrajStatus("Generate volumes first.", false);
      return;
    }
    var n = generatedTrajectoryVolumeCount > 0 ? generatedTrajectoryVolumeCount : currentVolumeCount();
    var suggestedDir = expWorkdir ? String(expWorkdir).replace(/\/+$/, "") + "/trajectory_volumes" : "";
    var outDir = window.prompt("Choose server folder for saving " + n + " .mrc files:", suggestedDir);
    if (outDir == null) return;
    outDir = String(outDir || "").trim();
    if (!outDir) {
      setTrajStatus("Choose an output folder.", false);
      return;
    }
    setTrajStatus("Saving " + n + " volumes…", true);
    fetch("{{ url_for('api_trajectory_save_volumes') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        volume_cache_id: lastTrajectoryVolumeCacheId,
        out_dir: outDir
      })
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          var msg = res.j && res.j.error ? String(res.j.error) : "Could not save volumes.";
          if (/expired|unknown/i.test(msg)) {
            setGeneratedVolumesState("", 0);
          }
          setTrajStatus(msg, false);
          return;
        }
        var savedN = Number(res.j.n_saved || 0);
        var out = res.j.out_dir || outDir;
        setTrajStatus("Saved " + savedN + " volumes to " + out, false);
      })
      .catch(function(err) {
        console.error(err);
        setTrajStatus("Save request failed.", false);
      });
  }

  function initDefaultTrajectory(gen) {
    var q = "x=" + encodeURIComponent(sx.value) + "&y=" + encodeURIComponent(sy.value);
    fetch("{{ url_for('api_default_trajectory_endpoints') }}?" + q)
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (gen !== scatterLoadGeneration) return;
        if (!res.ok || !res.j.ok || !res.j.start || !res.j.end) {
          if (plotStatus) {
            plotStatus.textContent = (res.j && res.j.error)
              ? String(res.j.error)
              : "Could not compute default trajectory for these axes.";
          }
          return;
        }
        /* New default path (load / axis change / reset): drop stale thumbnails; drag/mode/n alone do not. */
        clearVolumeMontage();
        startXY = res.j.start.slice();
        endXY = res.j.end.slice();
        editableTrajXY = null;
        redrawTrajectoryOverlay();
        fetchTrajectoryCoords();
        if (plotStatus) {
          plotStatus.textContent = "Default trajectory on long axis — choose mode for z, then Generate for volumes.";
        }
      })
      .catch(function() {
        if (gen !== scatterLoadGeneration) return;
        if (plotStatus) plotStatus.textContent = "Could not load default trajectory.";
      });
  }

  /* ── Scatter plot load ── */
  function loadPlot(opts) {
    var preserveTrajectoryState = !!(opts && opts.preserveTrajectoryState);
    var gen = ++scatterLoadGeneration;
    dragEndpoint = null;
    setRendering(true);
    if (plotStatus) plotStatus.textContent = "";
    var x = sx.value, y = sy.value, c = sc.value;
    var q = "x=" + encodeURIComponent(x)
      + "&y=" + encodeURIComponent(y)
      + "&color=" + encodeURIComponent(c)
      + "&marker_size=2"
      + "&max_points=60000"
      + "&palette=" + encodeURIComponent(selectedTrajPalette());
    fetch("{{ url_for('api_scatter') }}?" + q)
      .then(function(r) {
        return r.text().then(function(text) {
          var j;
          try { j = JSON.parse(text); }
          catch (e) { throw new Error("Scatter API did not return JSON"); }
          if (!r.ok) throw new Error(j.error || r.statusText);
          return j;
        });
      })
      .then(function(fig) {
        if (gen !== scatterLoadGeneration) return;
        fig.layout.title = "";
        fig.layout.margin = Object.assign(fig.layout.margin || {}, {t: 16});
        fig.layout.dragmode = "pan";
        var axFont = {size: 15, family: "Barlow, sans-serif", color: "#243b53"};
        fig.layout.xaxis = Object.assign(fig.layout.xaxis || {}, {title: {text: x, font: axFont}});
        fig.layout.yaxis = Object.assign(fig.layout.yaxis || {}, {title: {text: y, font: axFont}});
        if (/^umap/i.test(x)) fig.layout.xaxis.showticklabels = false;
        if (/^umap/i.test(y)) fig.layout.yaxis.showticklabels = false;
        var opts = {responsive: true};
        var p;
        if (!gd.data || gd.data.length === 0) {
          p = Plotly.newPlot(gd, fig.data, fig.layout, opts);
        } else {
          p = Plotly.react(gd, fig.data, fig.layout, opts);
        }
        function afterPlot() {
          if (gen !== scatterLoadGeneration) return;
          trajScatterRenderingEverCompleted = true;
          setRendering(false);
          wireUpPlotDrag();
          wireTrajectoryGlyphOverlayHook();
          syncTrajGlyphOverlay();
          syncScatterControlsAlignment();
          var canReuseTrajectory = false;
          if (preserveTrajectoryState) {
            if (anchorIndicesActive && anchorIndicesActive.length >= 2) {
              canReuseTrajectory = !!(anchorTrajXY && anchorTrajXY.length >= 2);
            } else {
              canReuseTrajectory = !!(
                (editableTrajXY && editableTrajXY.length >= 2) ||
                (startXY && endXY)
              );
            }
          }
          if (canReuseTrajectory) {
            if (trajectoryMode === "nearest" && sc.value && sc.value !== "none") {
              fetchTrajectoryCoords();
            } else {
              redrawTrajectoryOverlay();
            }
            requestAnimationFrame(function() {
              try { Plotly.Plots.resize(gd); } catch (e) {}
            });
            return;
          }
          if (anchorIndicesActive && anchorIndicesActive.length >= 2) {
            fetchTrajectoryCoords();
          } else {
            initDefaultTrajectory(gen);
          }
          requestAnimationFrame(function() {
            try { Plotly.Plots.resize(gd); } catch (e) {}
          });
        }
        if (p && typeof p.then === "function") {
          p.then(afterPlot).catch(function(err) {
            setRendering(false);
            if (plotStatus) plotStatus.textContent = err.message || "Could not load scatter.";
          });
        } else {
          afterPlot();
        }
      })
      .catch(function(e) {
        console.error(e);
        setRendering(false);
        if (plotStatus) plotStatus.textContent = e.message || "Could not load scatter.";
      });
  }

  /* ── Drag handles (Start / End) ── */
  function wireUpPlotDrag() {
    if (dragListenersWired) return;
    dragListenersWired = true;
    gd.addEventListener("mousedown", function(evt) {
      if (anchorIndicesActive && anchorIndicesActive.length >= 2) return;
      if (editableTrajXY && editableTrajXY.length >= 2) {
        var pClickM = [evt.clientX, evt.clientY];
        var bestI = -1;
        var bestD = Infinity;
        for (var mi = 0; mi < editableTrajXY.length; mi++) {
          var pp = dataToPixelXY(editableTrajXY[mi][0], editableTrajXY[mi][1]);
          if (!pp) continue;
          var dd = pixelDist(pClickM[0], pClickM[1], pp[0], pp[1]);
          if (dd < bestD) { bestD = dd; bestI = mi; }
        }
        if (bestI >= 0 && bestD <= DRAG_HANDLE_PX) {
          dragPointIndex = bestI;
          evt.preventDefault();
          evt.stopPropagation();
          return;
        }
      }
      if (!startXY || !endXY) return;
      var pClick = [evt.clientX, evt.clientY];
      var pS = dataToPixelXY(startXY[0], startXY[1]);
      var pE = dataToPixelXY(endXY[0], endXY[1]);
      if (!pS || !pE) return;
      var ds = pixelDist(pClick[0], pClick[1], pS[0], pS[1]);
      var de = pixelDist(pClick[0], pClick[1], pE[0], pE[1]);
      if (ds <= DRAG_HANDLE_PX && ds <= de) {
        dragEndpoint = "start";
        removeTrajectorySampleMarkersOnly();
        evt.preventDefault();
        evt.stopPropagation();
      } else if (de <= DRAG_HANDLE_PX) {
        dragEndpoint = "end";
        removeTrajectorySampleMarkersOnly();
        evt.preventDefault();
        evt.stopPropagation();
      }
    }, true);
    window.addEventListener("mousemove", function(evt) {
      if (dragPointIndex >= 0) {
        var ptd = plotClickToData(evt, true);
        if (!ptd || !editableTrajXY || !editableTrajXY.length) return;
        if (lastTrajectoryVolumeCacheId) setGeneratedVolumesState("", 0);
        var lastIdx = editableTrajXY.length - 1;
        editableTrajXY[dragPointIndex] = [ptd[0], ptd[1]];
        startXY = editableTrajXY[0].slice();
        endXY = editableTrajXY[lastIdx].slice();
        scheduleEditableTrajectoryRestyle();
        return;
      }
      if (!dragEndpoint) return;
      var pt = plotClickToData(evt, true);
      if (!pt) return;
      if (lastTrajectoryVolumeCacheId) setGeneratedVolumesState("", 0);
      if (dragEndpoint === "start") {
        startXY = [pt[0], pt[1]];
        if (editableTrajXY && editableTrajXY.length) {
          editableTrajXY[0] = startXY.slice();
        }
      } else {
        endXY = [pt[0], pt[1]];
        if (editableTrajXY && editableTrajXY.length) {
          editableTrajXY[editableTrajXY.length - 1] = endXY.slice();
        }
      }
      if (editableTrajXY && editableTrajXY.length >= 2) {
        scheduleEditableTrajectoryRestyle();
      } else {
        scheduleTrajectoryRestyle();
      }
    });
    window.addEventListener("mouseup", function() {
      if (dragPointIndex >= 0) {
        cancelEditableDragRaf();
        restyleEditableTrajectoryFromState();
        dragPointIndex = -1;
        scheduleCoordsAfterDrag();
        return;
      }
      if (!dragEndpoint) return;
      var hadDrag = dragEndpoint;
      dragEndpoint = null;
      cancelDragRestyleRaf();
      if (editableTrajXY && editableTrajXY.length >= 2) {
        restyleEditableTrajectoryFromState();
      } else {
        restyleTrajectoryLineOnly();
      }
      if (!anchorIndicesActive && (hadDrag === "start" || hadDrag === "end") && startXY && endXY) {
        scheduleCoordsAfterDrag();
      }
    });
  }

  /* ── Axis/color change ── */
  function triggerRedraw() {
    preparePlotReload();
    syncTraversalModeButtonStates();
    loadPlot();
  }
  [sx, sy].forEach(function(s) {
    s.addEventListener("change", triggerRedraw);
  });
  sc.addEventListener("change", function() {
    loadPlot({ preserveTrajectoryState: true });
  });
  document.querySelectorAll("input[name=\"traj_palette\"]").forEach(function(inp) {
    inp.addEventListener("change", function() {
      loadPlot({ preserveTrajectoryState: true });
    });
  });
  nPointsEl.addEventListener("change", function() {
    syncPointsSelectorRange();
    updateGenerateVolumesButtonLabel();
    removeTrajectorySampleMarkersOnly();
    if (hasAnchorIndices() && currentAnchorTraversalMode() === "graph") return;
    if (hasAnchorIndices()) {
      fetchTrajectoryCoords();
      return;
    }
    editableTrajXY = null;
    if (startXY && endXY) {
      fetchTrajectoryCoords();
    }
  });
  if (maxNeighborsEl) {
    maxNeighborsEl.addEventListener("change", function() {
      if (hasAnchorIndices() && currentAnchorTraversalMode() === "graph") {
        fetchTrajectoryCoords();
      }
    });
  }
  if (avgNeighborsEl) {
    avgNeighborsEl.addEventListener("change", function() {
      if (hasAnchorIndices() && currentAnchorTraversalMode() === "graph") {
        fetchTrajectoryCoords();
      }
    });
  }

  updateGenerateVolumesButtonLabel();
  syncAnchorIndicesUI();
  syncTraversalModeButtonStates();
  syncScatterControlsAlignment();
  loadPlot();
})();
</script>
{% endblock %}