{% 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 %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cryo_cc_legend_palette_menu.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/trajectory_creator.css') }}"/>
{% 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 cryo-dash-page--trajectory-integrated">
<div class="cryo-dash-row">
  <div class="cryo-dash-side">
    <div class="cryo-traj-menu-scroll-wrap">
    <div class="cryo-traj-menu-scroll">
    <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>
      <div class="cryo-traj-controls-host" id="traj-controls-host">
      <fieldset class="cryo-traj-manual-interp-stack" id="traj-manual-interp-stack" hidden>
        <legend>Add trajectory points<br />through interpolation</legend>
        <div class="cryo-traj-manual-mode-row" id="traj-manual-volume-row">
          <button type="button" class="btn btn-secondary cryo-traj-manual-interp-btn cryo-traj-alt-mode-btn"
            id="btn-traj-manual-volume" aria-pressed="false">Add points along<br />direct line</button>
          <div class="cryo-traj-manual-mode-fields">
            <label class="cryo-traj-manual-npoints" for="manual-snap-n-points">
              <span>Points</span>
              <select id="manual-snap-n-points" aria-label="Interpolation points for particle snap">
                {% for n in range(1, 21) %}
                <option value="{{ n }}"{% if n == 1 %} selected{% endif %}>{{ n }}</option>
                {% endfor %}
              </select>
            </label>
          </div>
        </div>
        <div class="cryo-traj-manual-mode-row" id="traj-manual-graph-row">
          <button type="button" class="btn btn-secondary cryo-traj-manual-interp-btn cryo-traj-alt-mode-btn"
            id="btn-traj-manual-graph" aria-pressed="false">Add points using<br />graph traversal</button>
          <div class="cryo-traj-manual-mode-fields">
            <label class="cryo-traj-manual-npoints" for="manual-graph-n-points">
              <span>Points</span>
              <select id="manual-graph-n-points" aria-label="Interpolation points for graph traversal">
                {% for n in range(1, 21) %}
                <option value="{{ n }}"{% if n == 1 %} selected{% endif %}>{{ n }}</option>
                {% endfor %}
              </select>
            </label>
            <div class="cryo-traj-manual-graph-neighbors">
              <label for="max-neighbors">Max</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.</label>
              <select id="avg-neighbors">
                {% for n in range(2, 21) %}
                <option value="{{ n }}"{% if n == 5 %} selected{% endif %}>{{ n }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </fieldset>
      <fieldset id="traj-controls-fieldset">
        <legend>Trajectory controls</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>
        <fieldset class="cryo-traj-scatter-interp-fieldset" id="traj-scatter-interp-fieldset" hidden>
          <div class="volsketch-seg cryo-traj-mode-seg cryo-traj-mode-seg--stacked" role="radiogroup"
            aria-label="Scatter trajectory interpolation">
            <input type="radio" name="traj-scatter-interp" id="traj-scatter-interp-nearest" value="nearest" />
            <label for="traj-scatter-interp-nearest" id="traj-scatter-interp-nearest-label">Snap to nearest<br />particle points</label>
            <input type="radio" name="traj-scatter-interp" id="traj-scatter-interp-direct" value="direct" checked />
            <label for="traj-scatter-interp-direct" id="traj-scatter-interp-direct-label">Use direct interpolation<br />in space</label>
          </div>
        </fieldset>
        <button type="button" class="btn cryo-traj-action-btn" id="btn-reset">Reset trajectory points</button>
        <button type="button" class="btn btn-secondary cryo-traj-action-btn" id="btn-reverse-traj" disabled
          title="Set up a trajectory with at least two points or volumes first.">Reverse trajectory</button>
        <button type="button" class="btn btn-secondary cryo-traj-action-btn" id="btn-record-traj-gif" disabled
          title="Select and render at least two trajectory volumes first.">Record trajectory<br/>GIF movie</button>
        <div class="cryo-traj-anchor-pick-controls" id="traj-anchor-pick">
          <button type="button" class="btn btn-secondary cryo-traj-action-btn" id="btn-anchor-manual-open">Enter anchors manually</button>
          <button type="button" class="btn btn-secondary cryo-traj-action-btn" id="btn-anchor-import-pkl">Import anchor .txt</button>
          <button type="button" class="btn btn-secondary cryo-traj-action-btn" id="btn-anchor-random">Add 10 random indices</button>
        </div>
        <div class="cryo-traj-anchor-path-order-controls" id="traj-anchor-path-order-controls">
          <span class="cryo-traj-anchor-path-order-legend" id="traj-anchor-path-order-legend">Anchor visit order</span>
          <div class="volsketch-seg cryo-traj-mode-seg cryo-traj-path-order-seg" role="radiogroup"
            aria-labelledby="traj-anchor-path-order-legend">
            <input type="radio" name="traj-anchor-path-order" id="traj-anchor-path-preserve" value="preserve"
              checked />
            <label for="traj-anchor-path-preserve">Original order</label>
            <input type="radio" name="traj-anchor-path-order" id="traj-anchor-path-heuristic" value="heuristic" />
            <label for="traj-anchor-path-heuristic">Inexact</label>
            <input type="radio" name="traj-anchor-path-order" id="traj-anchor-path-exact" value="exact" />
            <label for="traj-anchor-path-exact">Exact shortest path</label>
          </div>
        </div>
      </fieldset>
      <div id="traj-controls-busy-overlay" class="cryo-traj-controls-busy-overlay" hidden aria-hidden="true">
        <span class="cryo-traj-controls-busy-overlay__label">Generating trajectory…</span>
      </div>
      </div>
      <fieldset id="traj-color-controls" class="cryo-traj-color-controls" hidden
        aria-label="Color controls">
        <legend>Color controls</legend>
        <div id="traj-color-continuous-wrap" hidden>
          <div id="traj-palette-select"
            class="cryo-palette-select cryo-cc-legend-palette-shell"
            aria-label="Continuous color palette">
            <button type="button" id="traj-palette-toggle" class="cryo-palette-select__title"
              aria-expanded="false" aria-controls="traj-palette-options">
              <span class="cryo-palette-select__chevron" aria-hidden="true">▶</span>
              <span>Choose palette</span>
            </button>
            <div id="traj-palette-options"
              class="cryo-palette-select__options cryo-palette-select__options--collapsed
                cryo-cc-legend-palette-menu"
              role="group">
              {{ continuous_palette_options("traj_palette", "cryo-palette-option", "cryo-palette-select__swatch") }}
            </div>
          </div>
        </div>
        <div id="traj-color-legend-panel" class="cryo-traj-color-legend-panel" hidden aria-hidden="true">
          <div id="traj-color-discrete-wrap" class="cryo-cc-discrete-wrap" hidden>
            <div id="traj-color-discrete-switches"
              class="cryo-cc-discrete-switches cryo-cc-discrete-switches--traj-menu"
              role="group" aria-label="Discrete level colours"></div>
          </div>
        </div>
      </fieldset>
    </div>
    </div>
    <div class="cryo-traj-menu-fade cryo-traj-menu-fade--cream" aria-hidden="true"></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="traj-scatter-color-legend" class="cryo-traj-scatter-color-legend" hidden
        aria-hidden="true" aria-label="Colour covariate legend"
        title="Drag to reposition; double-click title or labels to edit"></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>
  </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" />
        <label for="traj-mode-direct" id="traj-mode-direct-label">Tracing trajectory path directly<br />in space</label>
        <input type="radio" name="traj-mode" id="traj-mode-manual" value="manual" checked />
        <label for="traj-mode-manual" id="traj-mode-manual-label">Choosing trajectory waypoints<br />using particles and particle sets</label>
      </div>
    </fieldset>
    <div class="cryo-traj-anchor-row" id="traj-anchor-wrap">
      <div class="cryo-traj-picker-anchor-row" id="traj-picker-anchor-row">
        <div class="cryo-traj-manual-picker" id="traj-manual-picker">
          <div id="vslice-volume-picker" class="cryo-vslice-volume-picker">
            <div class="cryo-traj-vol-picker-compact" id="traj-vol-picker-compact">
              <div class="cryo-traj-vol-picker-compact-inner">
                <div class="cryo-traj-vol-picker-set-label" id="traj-vol-picker-set-label">Particle sets</div>
                <div class="cryo-traj-vol-picker-compact-btns-wrap">
                  <div class="cryo-traj-vol-picker-compact-btns" id="traj-vol-picker-compact-btns"
                    role="group" aria-label="Particle sets">
                    <button type="button" class="btn btn-secondary cryo-vslice-vol-btn cryo-traj-vol-group-btn cryo-vslice-vol-btn--placeholder" disabled>Kmeans{{ exp_kmeans }}</button>
                    <button type="button" class="btn btn-secondary cryo-vslice-vol-btn cryo-traj-vol-group-btn cryo-vslice-vol-btn--placeholder" disabled>PC1</button>
                    <button type="button" class="btn btn-secondary cryo-vslice-vol-btn cryo-traj-vol-group-btn cryo-vslice-vol-btn--placeholder" disabled>PC2</button>
                    <button type="button" class="btn btn-secondary cryo-vslice-vol-btn cryo-traj-vol-group-btn cryo-traj-vol-group-btn--custom cryo-vslice-vol-btn--placeholder" disabled>Other</button>
                  </div>
                  <button type="button" class="btn btn-secondary cryo-traj-vol-picker-expand"
                    id="btn-traj-vol-picker-expand" aria-expanded="false"
                    aria-controls="traj-vol-picker-detail" title="Show individual volumes"
                    aria-label="Show individual volumes"><span class="cryo-traj-vol-picker-expand-glyph" aria-hidden="true">&#9656;</span></button>
                </div>
              </div>
            </div>
            <div class="cryo-traj-vol-picker-detail" id="traj-vol-picker-detail" hidden>
              <div class="cryo-vslice-volume-picker-scroll" id="vslice-volume-picker-scroll">
                <div class="cryo-vslice-volume-picker-rows" id="vslice-volume-picker-rows"
                  role="group" aria-label="Individual particle set volumes">
                </div>
              </div>
            </div>
          </div>
        </div>
      </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>
    <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>
    <div class="cryo-traj-volume-actions" id="traj-volume-actions">
      <button type="button" class="btn" id="btn-generate-volumes"
        title="Decode outstanding volumes and render ChimeraX images.">Decode and render volumes</button>
      <button type="button" class="btn btn-secondary" id="btn-save-volumes">Save volumes</button>
    </div>
    <div class="cryo-traj-vol-panel-host" id="traj-vol-panel-root">
      <div class="cryo-vslice-panel-shell cryo-traj-vol-panel-shell" id="traj-vol-aside-shell">
        <div class="cryo-traj-vol-volume-nav-row" id="traj-vol-volume-nav-row">
          <div id="traj-vol-volume-nav" class="cryo-vslice-volume-nav cryo-vslice-volume-nav--inactive"
            role="group" aria-label="Select trajectory volume" aria-disabled="true" hidden>
            <div class="cryo-vslice-volume-slider-wrap">
              <input type="range" id="traj-vol-volume-slider" class="cryo-vslice-volume-slider"
                min="0" max="0" step="1" value="0" disabled
                aria-label="Volume along trajectory" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0" />
              <div id="traj-vol-volume-slider-ticks" class="cryo-vslice-volume-slider-ticks"
                aria-hidden="true"></div>
            </div>
          </div>
        </div>
        <div class="cryo-vslice-display-row" id="vslice-display-row">
          <div class="cryo-vslice-scroll">
            <div class="cryo-vslice-viewport" id="vslice-viewport" hidden>
              <canvas id="vslice-canvas" class="cryo-vslice-canvas" aria-label="Volume slice"></canvas>
              <div id="vslice-vtk-container" class="cryo-vslice-vtk-container" hidden aria-label="Volume 3D raycast"></div>
              <div id="vslice-rendering-overlay" class="cryo-plot-rendering-overlay" hidden aria-hidden="true">
                <div class="cryo-plot-rendering-overlay__inner">
                  <span class="cryo-plot-rendering-overlay__label">Rendering…</span>
                  <div id="vslice-progress" class="cryo-plot-rendering-overlay__track cryo-vslice-progress" role="progressbar"
                    aria-valuetext="Loading volume">
                    <div class="cryo-plot-rendering-overlay__indeterminate"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="cryo-vslice-under-tools" id="vslice-under-tools">
            <div class="cryo-vslice-pad-column" id="vslice-pad-column" hidden>
              <div class="cryo-vslice-pad" role="group" aria-label="Volume pan and zoom">
                <button type="button" class="btn btn-secondary cryo-vslice-pad-btn" id="btn-vslice-pan-up" aria-label="Pan up">▲</button>
                <button type="button" class="btn btn-secondary cryo-vslice-pad-btn" id="btn-vslice-pan-left" aria-label="Pan left">◀</button>
                <div class="cryo-vslice-pad-center">
                  <button type="button" class="btn btn-secondary cryo-vslice-pad-btn cryo-vslice-pad-btn--zoom"
                    id="btn-vslice-zoom-out" aria-label="Zoom out">−</button>
                  <button type="button" class="btn btn-secondary cryo-vslice-pad-btn cryo-vslice-pad-btn--zoom"
                    id="btn-vslice-zoom-in" aria-label="Zoom in">+</button>
                </div>
                <button type="button" class="btn btn-secondary cryo-vslice-pad-btn" id="btn-vslice-pan-right" aria-label="Pan right">▶</button>
                <button type="button" class="btn btn-secondary cryo-vslice-pad-btn" id="btn-vslice-pan-down" aria-label="Pan down">▼</button>
              </div>
            </div>
            <div class="cryo-vslice-slice-slider-column" id="vslice-slice-slider-column" hidden></div>
          </div>
        </div>
        <div class="cryo-vslice-controls-dock" id="vslice-controls-dock" hidden>
          <div class="cryo-vslice-controls" id="vslice-controls">
            <div id="vslice-rotation-lock-toolbar" class="cryo-vslice-rotation-lock-toolbar" hidden>
              <label id="vslice-rotation-lock-wrap" class="cryo-image-grid-invert-switch cryo-vslice-rotation-lock-wrap"
                for="vslice-rotation-lock">
                <input type="checkbox" id="vslice-rotation-lock" role="switch"
                  aria-label="Link slice rotations together" />
                <span class="cryo-image-grid-invert-switch__track" aria-hidden="true">
                  <span class="cryo-image-grid-invert-switch__thumb"></span>
                </span>
                <span class="cryo-vslice-rotation-lock-text">Link rotations</span>
              </label>
            </div>
            <div class="cryo-vslice-iso-reset-row" id="vslice-iso-reset-row">
              <div id="vslice-iso-controls" class="cryo-vslice-iso-controls">
                <label class="cryo-vslice-iso-label" for="vslice-iso-level">Isosurface level</label>
                <input type="range" id="vslice-iso-level" class="cryo-vslice-iso-slider"
                  min="0" max="100" value="50" step="1" aria-label="Isosurface contour level" />
              </div>
              <button type="button" class="btn btn-secondary cryo-vslice-reset-btn" id="btn-vslice-reset-view"
                aria-label="Reset volume view">Reset view</button>
            </div>
            <div class="cryo-vslice-controls-row" id="vslice-slice-controls-row" hidden>
              <div class="cryo-vslice-slice-contrast-stack">
                <label class="cryo-vslice-contrast-label" for="vslice-slice-contrast">Image contrast</label>
                <input type="range" id="vslice-slice-contrast" class="cryo-vslice-contrast-slider"
                  min="0" max="100" value="50" step="1" aria-label="Image contrast" />
              </div>
            </div>
          </div>
          <div class="cryo-vslice-chimerax-view-controls cryo-traj-vol-backend-panel--inactive"
            id="vslice-chimerax-view-controls" aria-hidden="true">
            <div class="volsketch-view-rotate-row is-disabled" id="traj-chimerax-view-rotate-row"
              aria-label="Rotate ChimeraX viewing angle"
              title="Render ChimeraX images before rotating the view.">
              <label for="traj-chimerax-view-rotate-angle">
                Degrees
                <input id="traj-chimerax-view-rotate-angle" type="number" step="1" value="180" disabled />
              </label>
              <button type="button" class="btn traj-chimerax-view-rotate-btn" data-traj-chimerax-view-axis="x"
                disabled title="Rotate view around the X axis">
                <svg class="traj-chimerax-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
                  aria-hidden="true" focusable="false">
                  <line x1="3" y1="12" x2="21" y2="12" stroke="currentColor"
                    stroke-width="1.5" stroke-linecap="round" opacity="0.42"/>
                  <path d="M15.2 6.2a6.2 6.2 0 0 0 0 11.6" fill="none" stroke="currentColor"
                    stroke-width="1.85" stroke-linecap="round"/>
                  <path d="M14.1 16.8l2.1 1.1-1.1-2.1" fill="currentColor" stroke="none"/>
                </svg>
                <span class="traj-chimerax-view-rotate-btn__label">Rotate X</span>
              </button>
              <button type="button" class="btn traj-chimerax-view-rotate-btn" data-traj-chimerax-view-axis="y"
                disabled title="Rotate view around the Y axis">
                <svg class="traj-chimerax-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
                  aria-hidden="true" focusable="false">
                  <line x1="12" y1="3" x2="12" y2="21" stroke="currentColor"
                    stroke-width="1.5" stroke-linecap="round" opacity="0.42"/>
                  <path d="M6.2 8.8a6.2 6.2 0 0 0 11.6 0" fill="none" stroke="currentColor"
                    stroke-width="1.85" stroke-linecap="round"/>
                  <path d="M16.8 9.9l1.1-2.1 2.1 1.1" fill="currentColor" stroke="none"/>
                </svg>
                <span class="traj-chimerax-view-rotate-btn__label">Rotate Y</span>
              </button>
              <button type="button" class="btn traj-chimerax-view-rotate-btn" data-traj-chimerax-view-axis="z"
                disabled title="Rotate view around the Z axis">
                <svg class="traj-chimerax-view-rotate-btn__axis-icon" viewBox="0 0 24 24"
                  aria-hidden="true" focusable="false">
                  <circle cx="12" cy="12" r="1.65" fill="currentColor" opacity="0.42"/>
                  <path d="M12 5.4a6.6 6.6 0 0 1 0 13.2a6.6 6.6 0 0 1-.1-13.2" fill="none"
                    stroke="currentColor" stroke-width="1.85" stroke-linecap="round"/>
                  <path d="M6.1 11.4l-1.8 1.8 2.5.4" fill="currentColor" stroke="none"/>
                </svg>
                <span class="traj-chimerax-view-rotate-btn__label">Rotate Z</span>
              </button>
            </div>
            <div class="volsketch-view-matrix-field">
              <label for="traj-chimerax-view-matrix-input">ChimeraX view matrix</label>
              <div class="volsketch-view-matrix-apply-row">
                <textarea id="traj-chimerax-view-matrix-input" class="volsketch-view-matrix-input" rows="3"
                  placeholder="camera n1,n2,... (12 numbers; available after ChimeraX renders)"
                  disabled></textarea>
                <button type="button" class="btn btn-secondary volsketch-view-matrix-apply"
                  id="traj-chimerax-view-matrix-apply" disabled>Apply view matrix</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cryo-traj-vol-backend-row">
        <div class="cryo-traj-vol-backend-seg" role="radiogroup" aria-label="Volume render backend">
          <input type="radio" name="traj-vol-backend" id="traj-vol-backend-vtk" value="vtk" disabled />
          <label for="traj-vol-backend-vtk" id="traj-vol-backend-vtk-label"
            title="Generate trajectory volumes first">VTK 3D</label>
          <input type="radio" name="traj-vol-backend" id="traj-vol-backend-chimerax" value="chimerax" checked disabled />
          <label for="traj-vol-backend-chimerax" id="traj-vol-backend-chimerax-label"
            title="Generate trajectory volumes first">ChimeraX</label>
          <input type="radio" name="traj-vol-backend" id="traj-vol-backend-slice" value="slice" />
          <label for="traj-vol-backend-slice">2D slice</label>
        </div>
        <button type="button" class="btn btn-secondary cryo-traj-vol-popout-btn" id="btn-traj-vol-dock-below"
          title="Open ChimeraX volume gallery in a popup window" aria-pressed="false"
          hidden>Pop out viewer</button>
        <p id="traj-vol-backend-hint" class="cryo-traj-vol-backend-hint" aria-live="polite">
          VTK 3D and ChimeraX appear once trajectory volumes are decoded. Manual mode can also use pre-generated analyze volumes.
        </p>
      </div>
    </div>
  </aside>
</div>
</div>

<div id="traj-vol-popout-modal"
  class="cryo-explorer-save-modal cryo-explorer-save-modal--wide cryo-traj-vol-popout-modal"
  hidden aria-hidden="true"
  role="dialog" aria-labelledby="traj-vol-popout-modal-title">
  <div class="cryo-explorer-save-modal__backdrop" data-traj-vol-popout-close="1"
    aria-label="Close volume viewer"></div>
  <div class="cryo-explorer-save-modal__dialog cryo-traj-vol-popout-modal__dialog">
    <div class="cryo-explorer-save-modal__header">
      <h2 id="traj-vol-popout-modal-title" class="cryo-explorer-save-modal__title">Volume viewer</h2>
      <button type="button" class="cryo-explorer-save-modal__close" data-traj-vol-popout-close="1"
        aria-label="Close volume viewer">&times;</button>
    </div>
    <div class="cryo-traj-vol-popout-body">
      <div id="traj-vol-expanded-host" class="cryo-traj-vol-expanded-host" hidden
        aria-label="Expanded volume display"></div>
      <div id="traj-vol-column" class="cryo-traj-vol-column" hidden></div>
    </div>
  </div>
</div>

<div id="traj-anchor-manual-modal"
  class="cryo-explorer-save-modal cryo-traj-anchor-manual-modal"
  hidden aria-hidden="true" aria-modal="true"
  role="dialog" aria-labelledby="traj-anchor-manual-modal-title">
  <div class="cryo-explorer-save-modal__backdrop" data-traj-anchor-manual-close="1"
    aria-label="Close dialog"></div>
  <div class="cryo-explorer-save-modal__dialog">
    <div class="cryo-explorer-save-modal__header">
      <h2 id="traj-anchor-manual-modal-title" class="cryo-explorer-save-modal__title">Enter anchors manually</h2>
      <button type="button" class="cryo-explorer-save-modal__close" data-traj-anchor-manual-close="1"
        aria-label="Close dialog">&times;</button>
    </div>
    <p class="cryo-traj-hint" style="margin:0;">Enter at least two particle indices, separated by commas or spaces.</p>
    <input
      type="text"
      id="anchor-indices-manual"
      class="cryo-traj-anchor-manual-input"
      placeholder="e.g. 0, 105, 220 351"
      aria-label="Manual anchor indices"
    />
    <div class="cryo-explorer-save-modal__actions">
      <button type="button" class="btn btn-secondary" data-traj-anchor-manual-close="1">Cancel</button>
      <button type="button" class="btn" id="btn-anchor-manual-load">Use typed indices</button>
    </div>
  </div>
</div>

<div id="traj-gif-main-veil" class="cryo-traj-gif-main-veil" hidden aria-hidden="true"></div>
<div id="traj-gif-record-modal"
  class="cryo-explorer-save-modal cryo-explorer-save-modal--wide cryo-traj-gif-modal"
  hidden aria-hidden="true"
  role="dialog" aria-labelledby="traj-gif-record-modal-title">
  <div class="cryo-explorer-save-modal__backdrop" data-traj-gif-close="1" aria-label="Close dialog"></div>
  <div class="cryo-explorer-save-modal__dialog cryo-traj-gif-modal__dialog">
    <div class="cryo-explorer-save-modal__header">
      <h2 id="traj-gif-record-modal-title" class="cryo-explorer-save-modal__title">Record trajectory GIF</h2>
    </div>
    <label class="cryo-select-line" for="traj-gif-fps">Frames per second</label>
    <input id="traj-gif-fps" type="number" min="0.5" max="30" step="0.5" value="4" style="width:5rem"
      aria-label="Frames per second"/>
    <label class="cryo-traj-gif-scatter-option" id="traj-gif-include-scatter-wrap" for="traj-gif-include-scatter">
      <input type="checkbox" id="traj-gif-include-scatter" checked />
      <span>Include trajectory scatter plot with per-frame highlight</span>
    </label>
    <div id="traj-gif-preview-wrap" class="cryo-traj-gif-preview-wrap">
      <p id="traj-gif-preview-status" class="cryo-traj-gif-preview-status" aria-live="polite"></p>
      <img id="traj-gif-preview-img" class="cryo-traj-gif-preview" alt="Trajectory GIF preview" hidden />
    </div>
    <p class="cryo-traj-hint" style="margin-top:0.35rem;margin-bottom:0.35rem;">Choose a folder and filename on the
      server.</p>
    <div class="cryo-file-browser" id="traj-gif-file-browser">
      <div class="cryo-file-browser-bar">
        <button type="button" id="traj-gif-fb-up" title="Parent directory">&#8593; Up</button>
        <span class="cryo-file-browser-path" id="traj-gif-fb-path"></span>
      </div>
      <ul class="cryo-file-browser-list" id="traj-gif-fb-list"></ul>
      <div class="cryo-traj-gif-save-row">
        <input
          id="traj-gif-save-name"
          class="cryo-file-browser-save-input"
          type="text"
          value="trajectory.gif"
          spellcheck="false"
          aria-label="Save filename"
        />
      </div>
    </div>
    <div class="cryo-explorer-save-modal__actions cryo-traj-gif-modal__actions">
      <button type="button" class="btn btn-secondary" data-traj-gif-close="1">Cancel</button>
      <button type="button" class="btn" id="traj-gif-save-btn">Save GIF</button>
    </div>
  </div>
</div>

{% include "_covariate_pkl_loader.html" %}

<script src="{{ url_for('static', filename='js/cryo_cc_legend_primitives.js') }}"></script>
<script src="{{ url_for('static', filename='js/color_covariate_legend.js') }}"></script>
<script src="{{ url_for('static', filename='js/covariate_pkl_loader.js') }}"></script>
<script src="{{ url_for('static', filename='js/cryo_covariate_selects.js') }}"></script>
<script src="{{ url_for('static', filename='js/volume_3d_utils.js') }}"></script>
<script src="{{ url_for('static', filename='js/volume_slice_canvas.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_volume_display.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_path.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_volume_state.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_path_mutations.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_volume_pipeline.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_rendering_heap.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_session.js') }}"></script>
<script src="{{ url_for('static', filename='js/trajectory_direct_trace_ui.js') }}"></script>
<script>
  {# Test substring hints (keep in this file; not rendered to the browser): #}
  {# enqueueTrajGifScatterCapture #}
  {# restoreTrajGifLiveLayoutBaseline #}
  {# computeTrajGifUnionVolumeCropRect #}
  {# lockTrajGifVolumeAlignment #}
  {% include "_trajectory_creator_script_volume_session.html" %}
  {% include "_trajectory_creator_script_volume_display.html" %}
  {% include "_trajectory_creator_script_volume_chimerax.html" %}
  {% include "_trajectory_creator_script_volume_ui.html" %}
  {% include "_trajectory_creator_script_analyze_preserve.html" %}
  {% include "_trajectory_creator_script_analyze_path_ops.html" %}
  {% include "_trajectory_creator_script_analyze_coords_api.html" %}
  {% include "_trajectory_creator_script_traj_gif_workflow.html" %}
  {% include "_trajectory_creator_script_scatter_legend_glyphs.html" %}
  {% include "_trajectory_creator_script_scatter_generate_boot.html" %}
</script>
{% endblock %}