{% extends "base.html" %}
{% block title %}Particle explorer · cryoDRGN{% endblock %}
{% block nav_page_title %}<span class="nav-title-sep" aria-hidden="true">·</span><span class="nav-page-title">Particle explorer</span>{% endblock %}
{% block head %}
<style>
  .cryo-montage-grid {
    display: grid;
    gap: 4px;
    margin-top: 0.5rem;
  }
  .cryo-montage-grid-wrap {
    position: relative;
  }
  .cryo-montage-grid-wrap .cryo-plot-rendering-overlay {
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.92);
  }
  .cryo-montage-cell {
    display: flex;
    flex-direction: column;
    background: var(--accent, #c4703a);
    border-radius: 3px;
    overflow: hidden;
  }
  .cryo-montage-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 1px 4px;
    min-height: 0;
    line-height: 1.15;
    text-shadow: 0 0 3px rgba(0,0,0,0.6);
  }
  .cryo-montage-label {
    font-weight: 700;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    white-space: nowrap;
  }
  .cryo-montage-covar {
    font-size: 0.52rem;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
  }
  .cryo-montage-img-wrap {
    position: relative;
    aspect-ratio: 1;
    flex: 1 1 auto;
  }
  .cryo-montage-img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    background: #e8ecf1;
    object-fit: cover;
  }
  .cryo-montage-img-wrap img[src=""] { visibility: hidden; }
  .cryo-montage-footer {
    padding: 0 4px 1px;
    line-height: 1.15;
    min-height: 0;
    text-shadow: 0 0 3px rgba(0,0,0,0.6);
  }
  .cryo-montage-idx {
    font-size: 0.52rem;
    color: rgba(255,255,255,0.88);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .cryo-dash-montage-inner--disabled {
    opacity: 0.48;
    pointer-events: none;
    user-select: none;
  }
  fieldset#particle-sel-fieldset:disabled {
    opacity: 0.55;
  }
  fieldset#particle-sel-fieldset:disabled .cryo-dash-legend-note {
    display: none;
  }
  #scatter-controls-card {
    min-width: 0;
  }
  #particle-sel-fieldset {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }
  .cryo-explorer-save-btns {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.45rem;
  }
  .cryo-explorer-save-btns .btn {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.25;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    white-space: normal;
    text-align: center;
  }
  .cryo-explorer-montage-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.45rem;
  }
  .cryo-explorer-action-row {
    display: grid;
    grid-template-columns: max-content minmax(11.5rem, 1fr);
    gap: 0.4rem 0.55rem;
    align-items: center;
  }
  .cryo-explorer-action-row__btn {
    flex-shrink: 0;
  }
  .cryo-explorer-action-row__btn .btn {
    width: auto;
    max-width: min(10.25rem, 100%);
    box-sizing: border-box;
    margin: 0;
    line-height: 1.2;
    padding: 0.4rem 0.55rem;
    white-space: normal;
    text-align: center;
  }
  .cryo-explorer-action-row__hint {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.32;
    color: var(--muted, #5c6b7a);
    min-width: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  /* Beat base.html montage .cryo-dash-legend-note margins for these rows */
  .cryo-dash-page--image-viewer .cryo-explorer-action-row .cryo-dash-legend-note {
    margin: 0;
  }
  .cryo-explorer-save-inverse-label {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.55rem 0 0;
    font-weight: 500;
    cursor: pointer;
  }
  .cryo-explorer-save-inverse-label input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0.2rem 0 0;
  }
  .cryo-explorer-save-inverse-label span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
  }
  #save-status {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 1.2em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .cryo-traj-file-browser-panel {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.55rem;
  }
  .cryo-traj-file-browser-panel[hidden] {
    display: none !important;
  }
  .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-file-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid rgba(36, 59, 83, 0.10);
    background: rgba(36, 59, 83, 0.04);
    flex-shrink: 0;
  }
  .cryo-file-browser-bar button {
    background: none;
    border: 1px solid rgba(36, 59, 83, 0.18);
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    color: #243b53;
    flex-shrink: 0;
  }
  .cryo-file-browser-bar button:hover {
    background: rgba(36, 59, 83, 0.08);
  }
  .cryo-file-browser-path {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    direction: rtl;
    text-align: left;
    color: rgba(36, 59, 83, 0.6);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.65rem;
  }
  .cryo-file-browser-list {
    overflow-y: auto;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .cryo-file-browser-list li {
    padding: 0.22rem 0.45rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border-bottom: 1px solid rgba(36, 59, 83, 0.04);
  }
  .cryo-file-browser-list li:hover {
    background: rgba(36, 59, 83, 0.06);
  }
  .cryo-file-browser-list .fb-icon {
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
    opacity: 0.5;
  }
  .cryo-file-browser-list .fb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cryo-file-browser-empty {
    padding: 0.6rem 0.45rem;
    color: rgba(36, 59, 83, 0.45);
    text-align: center;
    font-style: italic;
  }
  .cryo-file-browser-save-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem;
    align-items: center;
    padding: 0.35rem 0.4rem;
    border-top: 1px solid rgba(36, 59, 83, 0.10);
    background: rgba(36, 59, 83, 0.03);
  }
  .cryo-file-browser-save-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: 0.72rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid rgba(36, 59, 83, 0.22);
    border-radius: 3px;
    font-family: "IBM Plex Mono", monospace;
  }
  .cryo-file-browser-save-row .btn {
    font-size: 0.72rem;
    padding: 0.2rem 0.45rem;
    white-space: nowrap;
  }
  .cryo-volume-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--muted, #5c6b7a);
    min-height: 1.1em;
  }
  .cryo-volume-status-row .cryo-plot-rendering-overlay__track {
    width: min(11rem, 55vw);
    flex: 0 0 auto;
  }
  .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;
  }
  #scatter-palette-radios.scatter-palette-radios--suppressed {
    display: none;
  }
</style>
{% endblock %}
{% block content %}
<div class="cryo-dash-page cryo-dash-page--image-viewer">
<div class="cryo-dash-row">
  <div class="cryo-dash-side">
    <div class="cryo-dash-top" style="margin-bottom:0.25rem;">
      <a href="/">← Back</a>
    </div>
    <p class="cryo-dash-lead">Choose covariates for plot axes and point coloring. Use lasso selection to create a particle filtering index; generate images and volumes with or without a selection using the interface on the right.</p>
    <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 id="particle-sel-fieldset" disabled>
        <legend>Create particle indices</legend>
        <p class="cryo-dash-legend-note" style="margin:0 0 0.4rem;">Active after you lasso or box-select on the plot.</p>
        <p id="sel-count" class="status" style="margin:0;font-weight:600;color:var(--nav-bg,#243b53);">Selected: 0/0 particles</p>
        <div class="cryo-explorer-save-btns">
          <button type="button" class="btn" id="save-indices-pkl">Save selection<br/>as <code>indices.pkl</code></button>
          <button type="button" class="btn btn-secondary" id="save-indices-custom">Save selection<br/>as…</button>
        </div>
        <label class="cryo-explorer-save-inverse-label" for="save-inverse">
          <input type="checkbox" id="save-inverse"/>
          <span>Also save inverse selection (<code>*_inverse.pkl</code>)</span>
        </label>
        <p id="save-status" class="status" style="margin:0.35rem 0 0;font-size:0.88rem;"></p>
      </fieldset>
    </div>
    <div id="sel-file-browser-panel" class="cryo-traj-file-browser-panel" hidden aria-hidden="true">
      <div class="cryo-file-browser">
        <div class="cryo-file-browser-bar">
          <button type="button" id="sel-fb-up" title="Parent directory">&#8593; Up</button>
          <span class="cryo-file-browser-path" id="sel-fb-path"></span>
          <button type="button" id="sel-fb-cancel">Cancel</button>
        </div>
        <ul class="cryo-file-browser-list" id="sel-fb-list"></ul>
        <div class="cryo-file-browser-save-row">
          <input
            id="sel-fb-save-name"
            class="cryo-file-browser-save-input"
            type="text"
            value="indices.pkl"
            spellcheck="false"
            aria-label="Selection filename"
          />
          <button type="button" id="sel-fb-save-btn" class="btn btn-secondary">Save here</button>
        </div>
      </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="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="scatter-palette-radios" class="cryo-palette-radios scatter-palette-radios--suppressed" aria-label="Continuous color palette">
      <legend>Palette (continuous color)</legend>
      <div class="cryo-palette-radios__row">
        <label><input type="radio" name="scatter_palette" value="Viridis" checked/> Viridis</label>
        <label><input type="radio" name="scatter_palette" value="Plasma"/> Plasma</label>
        <label><input type="radio" name="scatter_palette" value="Inferno"/> Inferno</label>
        <label><input type="radio" name="scatter_palette" value="Magma"/> Magma</label>
        <label><input type="radio" name="scatter_palette" value="Cividis"/> Cividis</label>
        <label><input type="radio" name="scatter_palette" value="Turbo"/> Turbo</label>
      </div>
    </fieldset>
  </div>

  <aside class="cryo-dash-montage" aria-label="Particle preview">
    <div id="montage-actions" class="cryo-explorer-montage-actions">
      <div class="cryo-explorer-action-row">
        <div class="cryo-explorer-action-row__btn">
          <button type="button" class="btn" id="btn-view-images">View images</button>
        </div>
        <p id="preload-status" class="cryo-explorer-action-row__hint cryo-dash-legend-note">
          First click builds image cache for these plot axes ({{ preload_cache_time_hint }}) before displaying images.
        </p>
      </div>
      {% if show_volume_explorer %}
      <div class="cryo-explorer-action-row">
        <div class="cryo-explorer-action-row__btn">
          <button type="button" class="btn btn-secondary" id="btn-volume-generate" disabled>Generate volumes</button>
        </div>
        <p class="cryo-explorer-action-row__hint cryo-dash-legend-note">
          Use decoder to produce and display volumes for particles currently shown in grid.
        </p>
      </div>
      <div class="cryo-explorer-action-row">
        <div class="cryo-explorer-action-row__btn">
          <button type="button" class="btn btn-secondary" id="btn-volume-animate" disabled>Animate volumes</button>
        </div>
        <p class="cryo-explorer-action-row__hint cryo-dash-legend-note">
          Rotate currently displayed volumes.
        </p>
      </div>
      <div class="cryo-volume-status-row" aria-live="polite">
        <span id="volume-status" class="status" style="margin:0;"></span>
        <div
          id="volume-status-progress"
          class="cryo-plot-rendering-overlay__track"
          role="progressbar"
          aria-valuetext="Generating volumes"
          hidden
        >
          <div class="cryo-plot-rendering-overlay__indeterminate"></div>
        </div>
      </div>
      {% endif %}
    </div>
    <div id="montage-inner" class="cryo-dash-montage-inner cryo-dash-montage-inner--disabled">
      <div style="display:flex;align-items:baseline;gap:0.6rem;flex-wrap:wrap;margin-top:0.45rem;">
        <label style="display:flex;align-items:center;gap:0.3rem;font-size:0.82rem;color:var(--muted,#5c6b7a);">
          Grid
          <select id="grid-size" disabled style="width:4.2rem;padding:0.1rem 0.2rem;font-size:0.82rem;">
            <option value="1">1 × 1</option>
            <option value="2">2 × 2</option>
            <option value="3" selected>3 × 3</option>
            <option value="4">4 × 4</option>
            <option value="5">5 × 5</option>
            <option value="6">6 × 6</option>
            <option value="7">7 × 7</option>
            <option value="8">8 × 8</option>
          </select>
        </label>
      </div>
      <div class="cryo-montage-grid-wrap">
        <div id="montage-grid" class="cryo-montage-grid"></div>
        <div id="montage-preload-overlay" class="cryo-plot-rendering-overlay" aria-hidden="true">
          <div class="cryo-plot-rendering-overlay__inner">
            <span class="cryo-plot-rendering-overlay__label">Loading image cache…</span>
            <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Loading image cache">
              <div class="cryo-plot-rendering-overlay__indeterminate"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>
</div>

<script>
(function() {
  var cols = {{ numeric_cols | tojson }};
  var covariateDisplayMap = {{ covariate_display_map | tojson }};
  var dx = {{ default_x | tojson }};
  var dy = {{ default_y | tojson }};
  var initialRows = {{ initial_rows | tojson }};
  var totalParticles = {{ total_particles | tojson }};
  var workdirForSaveHint = {{ workdir | tojson }};
  var showVolumeExplorer = {{ show_volume_explorer | default(false) | tojson }};

  var preselectRowsForNextFetch = (initialRows && initialRows.length && initialRows.length <= 5000)
    ? initialRows.slice() : [];
  var saveSelectionRows = [];
  var imagesViewEnabled = false;
  var particleSelFs = document.getElementById("particle-sel-fieldset");
  var selCountEl = document.getElementById("sel-count");
  var montageInner = document.getElementById("montage-inner");
  var montagePreloadOverlayEl = document.getElementById("montage-preload-overlay");
  var btnViewImages = document.getElementById("btn-view-images");
  var btnVolumeGenerate = document.getElementById("btn-volume-generate");
  var btnVolumeAnimate = document.getElementById("btn-volume-animate");
  var volumeStatusEl = document.getElementById("volume-status");
  var volumeStatusProgressEl = document.getElementById("volume-status-progress");
  var gridSizeSelect = document.getElementById("grid-size");
  var scatterControlsCard = document.getElementById("scatter-controls-card");
  var scatterControlsSide = scatterControlsCard ? scatterControlsCard.closest(".cryo-dash-side") : null;
  var scatterPlotStack = document.getElementById("scatter-plot-stack");
  var montageActionsEl = document.getElementById("montage-actions");

  var montageDisplayMode = "images";
  var volumeStaticDataUrls = null;
  var volumeStaticKey = null;
  var volumeGifDataUrls = null;
  var volumeGifsKey = null;
  var EXPLORER_GIF_FRAMES = 40;
  var EXPLORER_CHIMERAX_CPUS = 16;
  var lastMontageRows = [];
  var volumeCacheId = null;
  var volumeAnimateGeneration = 0;

  function montageRowsOrderKey() {
    return lastMontageRows.length ? lastMontageRows.join(",") : "";
  }

  function setMontagePreloadOverlay(on) {
    if (!montagePreloadOverlayEl) return;
    montagePreloadOverlayEl.classList.toggle("cryo-plot-rendering-overlay--show", !!on);
    montagePreloadOverlayEl.setAttribute("aria-hidden", on ? "false" : "true");
  }

  function setVolumeStatus(msg, showProgress) {
    if (volumeStatusEl) volumeStatusEl.textContent = msg || "";
    if (volumeStatusProgressEl) volumeStatusProgressEl.hidden = !showProgress;
  }

  function invalidateVolumeArtifacts() {
    if (!showVolumeExplorer) return;
    volumeStaticDataUrls = null;
    volumeStaticKey = null;
    volumeGifDataUrls = null;
    volumeGifsKey = null;
    volumeCacheId = null;
    volumeAnimateGeneration++;
    montageDisplayMode = "images";
    setVolumeStatus("", false);
    syncVolumeExploreButtons();
  }

  function syncVolumeExploreButtons() {
    if (!showVolumeExplorer) return;
    var hasGrid = lastMontageRows && lastMontageRows.length > 0;
    var key = montageRowsOrderKey();
    var hasStatic = volumeStaticDataUrls && volumeStaticKey === key && volumeStaticDataUrls.length;
    var hasCache = !!(volumeCacheId && volumeStaticKey === key);
    if (btnVolumeGenerate) {
      btnVolumeGenerate.disabled = !plotHasScatterData();
    }
    if (btnVolumeAnimate) {
      btnVolumeAnimate.disabled = !hasGrid || !hasStatic || !hasCache;
    }
  }

  function showImagesInMontageFromCache() {
    if (!preloaded || !lastMontageRows.length) return;
    for (var i = 0; i < montageCells.length; i++) {
      if (i < lastMontageRows.length) {
        var r = lastMontageRows[i];
        var src = preloaded.rowToSrc.get(r);
        if (src) montageCells[i].img.src = src;
      }
    }
    montageDisplayMode = "images";
    syncVolumeExploreButtons();
  }

  function showVolumesInMontage() {
    if (!lastMontageRows.length) return;
    var key = montageRowsOrderKey();
    if (!(volumeStaticDataUrls && volumeStaticKey === key && volumeStaticDataUrls.length)) return;
    var n = Math.min(montageCells.length, lastMontageRows.length, volumeStaticDataUrls.length);
    for (var i = 0; i < montageCells.length; i++) {
      if (i < n) {
        var g = volumeGifDataUrls && volumeGifDataUrls[i];
        var s = volumeStaticDataUrls[i];
        montageCells[i].img.src = g || s || "";
      } else {
        montageCells[i].img.src = "";
      }
    }
    montageDisplayMode = "volumes";
    syncVolumeExploreButtons();
  }

  function updateParticleSelFieldset() {
    var n = saveSelectionRows.length;
    if (selCountEl) {
      var nFmt = Number(n).toLocaleString("en-CA");
      var totalFmt = Number(totalParticles).toLocaleString("en-CA");
      selCountEl.textContent = "Selected: " + nFmt + "/" + totalFmt + " particles";
    }
    if (particleSelFs) particleSelFs.disabled = (n === 0);
  }

  /** A–Z omitting I, O, U (easier to read vs 1/0 and avoids ambiguous glyphs). */
  var SAFE_LETTERS = (function() {
    var out = [];
    for (var c = 65; c <= 90; c++) {
      if (c !== 73 && c !== 79 && c !== 85) out.push(String.fromCharCode(c));
    }
    return out;
  })();

  /**
   * Generate labels for the current grid.
   * ≤26 images: first labels are single safe letters; any past 23 use pairs (AA, AB, …).
   * >26 images: row letter from safe alphabet × column number (e.g. A1…An, B1…Bn).
   */
  function makeLabels(gridSz) {
    var k = gridSz * gridSz;
    function labelAt(idx) {
      if (idx < SAFE_LETTERS.length) return SAFE_LETTERS[idx];
      var j = idx - SAFE_LETTERS.length;
      return SAFE_LETTERS[Math.floor(j / SAFE_LETTERS.length)]
        + SAFE_LETTERS[j % SAFE_LETTERS.length];
    }
    if (k <= 26) {
      var out = [];
      for (var i = 0; i < k; i++) out.push(labelAt(i));
      return out;
    }
    var out2 = [];
    for (var row = 0; row < gridSz; row++) {
      var letter = SAFE_LETTERS[row];
      for (var col = 0; col < gridSz; col++) {
        out2.push(letter + (col + 1));
      }
    }
    return out2;
  }

  /* RGB stops for montage cell tinting (aligned with Plotly sequential scales). */
  var CONTINUOUS_PALETTE_RGB = {
    Viridis: [[68,1,84],[72,39,119],[63,74,138],[49,104,142],[38,130,142],[31,157,138],[53,183,121],[109,205,89],[253,231,37]],
    Plasma: [[13,8,135],[76,2,161],[126,3,168],[170,35,149],[204,71,120],[230,108,92],[248,149,64],[253,197,39],[240,249,33]],
    Inferno: [[0,0,4],[41,10,108],[108,2,112],[187,55,84],[249,142,8],[252,208,74],[252,254,164]],
    Magma: [[0,0,4],[59,15,112],[122,4,111],[203,62,65],[252,141,89],[252,208,136],[252,253,191]],
    Cividis: [[0,34,78],[0,57,112],[68,90,129],[115,128,131],[159,161,135],[206,186,122],[253,231,37]],
    Turbo: [[48,18,59],[61,99,221],[26,152,223],[25,189,114],[208,230,28],[250,85,8],[144,12,2]]
  };
  function selectedScatterPalette() {
    var r = document.querySelector("input[name=\"scatter_palette\"]:checked");
    var v = r && r.value ? String(r.value) : "Viridis";
    return CONTINUOUS_PALETTE_RGB[v] ? v : "Viridis";
  }
  function covariateScaleCSS(t) {
    t = Math.max(0, Math.min(1, t));
    var pal = CONTINUOUS_PALETTE_RGB[selectedScatterPalette()] || CONTINUOUS_PALETTE_RGB.Viridis;
    var n = pal.length - 1, i = Math.min(Math.floor(t * n), n - 1), f = t * n - i;
    var a = pal[i], b = pal[i + 1];
    return "rgb(" + Math.round(a[0]+(b[0]-a[0])*f) + ","
                  + Math.round(a[1]+(b[1]-a[1])*f) + ","
                  + Math.round(a[2]+(b[2]-a[2])*f) + ")";
  }
  var ACCENT = "#c4703a";

  var gridSize = 3;
  var neighborK = gridSize * gridSize;
  var labels = makeLabels(gridSize);

  /* ---------- montage grid DOM ---------- */
  var gridEl = document.getElementById("montage-grid");
  var montageCells = [];  /* [{img, idx, covar, cell}] */

  function rebuildGrid() {
    neighborK = gridSize * gridSize;
    labels = makeLabels(gridSize);
    gridEl.innerHTML = "";
    gridEl.style.gridTemplateColumns = "repeat(" + gridSize + ", 1fr)";
    montageCells = [];
    var labelSize = gridSize <= 3 ? "0.82rem" : gridSize <= 5 ? "0.65rem" : "0.52rem";
    var metaSize = gridSize <= 3 ? "0.52rem" : gridSize <= 5 ? "0.46rem" : "0.4rem";
    for (var i = 0; i < neighborK; i++) {
      var cell = document.createElement("div");
      cell.className = "cryo-montage-cell";

      var hdr = document.createElement("div");
      hdr.className = "cryo-montage-header";
      var lbl = document.createElement("span");
      lbl.className = "cryo-montage-label";
      lbl.textContent = labels[i];
      lbl.style.fontSize = labelSize;
      var covar = document.createElement("span");
      covar.className = "cryo-montage-covar";
      covar.style.fontSize = metaSize;
      hdr.appendChild(lbl);
      hdr.appendChild(covar);

      var wrap = document.createElement("div");
      wrap.className = "cryo-montage-img-wrap";
      var img = document.createElement("img");
      img.src = ""; img.alt = "";
      wrap.appendChild(img);

      var ftr = document.createElement("div");
      ftr.className = "cryo-montage-footer";
      var idxSpan = document.createElement("span");
      idxSpan.className = "cryo-montage-idx";
      idxSpan.style.fontSize = metaSize;
      ftr.appendChild(idxSpan);

      cell.appendChild(hdr);
      cell.appendChild(wrap);
      cell.appendChild(ftr);
      gridEl.appendChild(cell);
      montageCells.push({img: img, idx: idxSpan, covar: covar, cell: cell});
    }
  }
  rebuildGrid();

  gridSizeSelect.addEventListener("change", function() {
    gridSize = parseInt(this.value) || 3;
    rebuildGrid();
    refillMontageForNewGridSize();
  });

  function fillSelect(sel, includeNone) {
    sel.innerHTML = "";
    if (includeNone) {
      var o = document.createElement("option");
      o.value = "none"; o.textContent = "None";
      sel.appendChild(o);
    }
    cols.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, false);
  fillSelect(sy, false);
  fillSelect(sc, true);
  sx.value = cols.indexOf(dx) >= 0 ? dx : cols[0];
  sy.value = cols.indexOf(dy) >= 0 ? dy : cols[Math.min(1, cols.length - 1)];
  var renderedScatterAxes = {x: sx.value, y: sy.value};

  var gd = document.getElementById("scatter");
  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";
  }

  function equalizeMontageActionButtonWidths() {
    if (!montageActionsEl) return;
    var btns = montageActionsEl.querySelectorAll(".cryo-explorer-action-row__btn .btn");
    if (!btns || !btns.length) return;
    for (var i = 0; i < btns.length; i++) {
      btns[i].style.width = "auto";
    }
    var maxW = 0;
    for (var j = 0; j < btns.length; j++) {
      var w = btns[j].getBoundingClientRect().width;
      if (w > maxW) maxW = w;
    }
    if (!maxW) return;
    var px = Math.ceil(maxW) + "px";
    for (var k = 0; k < btns.length; k++) {
      btns[k].style.width = px;
    }
  }

  var plotlyStackEl = gd && gd.parentElement;
  if (plotlyStackEl && typeof ResizeObserver !== "undefined") {
    var plotStackResizeObserver = new ResizeObserver(function() {
      window.requestAnimationFrame(function() {
        syncScatterControlsAlignment();
        equalizeMontageActionButtonWidths();
        if (!gd || !gd.data || !gd.data.length) return;
        try { Plotly.Plots.resize(gd); } catch (e) {}
      });
    });
    plotStackResizeObserver.observe(plotlyStackEl);
  }
  var overlay = document.getElementById("scatter-rendering-overlay");
  var paletteFieldset = document.getElementById("scatter-palette-radios");
  var plotStatus = document.getElementById("scatter-plot-status");
  var preloadStatus = document.getElementById("preload-status");
  var scatterPlotWatchdog = null;
  var SCATTER_PLOT_TIMEOUT_MS = 90000;
  var scatterLoadGeneration = 0;
  var pendingScatterAfterPlot = null;
  var highlightTraceAdded = false;
  var suppressSelectionEvents = false;

  var selFileBrowserPanel = document.getElementById("sel-file-browser-panel");
  var selFbList = document.getElementById("sel-fb-list");
  var selFbPath = document.getElementById("sel-fb-path");
  var selFbUp = document.getElementById("sel-fb-up");
  var selFbCancel = document.getElementById("sel-fb-cancel");
  var selFbSaveName = document.getElementById("sel-fb-save-name");
  var selFbSaveBtn = document.getElementById("sel-fb-save-btn");
  var selFbCurrentDir = null;

  function plotHasScatterData() {
    return !!(gd && gd.data && gd.data[0] && gd.data[0].customdata && gd.data[0].customdata.length);
  }

  function shuffleInPlace(arr) {
    for (var i = arr.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var t = arr[i];
      arr[i] = arr[j];
      arr[j] = t;
    }
    return arr;
  }

  function allPlotRowsFromTrace() {
    var cd = gd.data[0].customdata;
    var out = [];
    for (var i = 0; i < cd.length; i++) {
      out.push(cd[i][1]);
    }
    return out;
  }

  function rowToTraceIndex(row) {
    var cd = gd.data[0].customdata;
    for (var i = 0; i < cd.length; i++) {
      if (cd[i][1] === row) return i;
    }
    return -1;
  }

  function montageItemForRow(r) {
    var ti = rowToTraceIndex(r);
    if (ti < 0) return null;
    var src = "";
    if (preloaded && preloaded.rowToSrc) {
      src = preloaded.rowToSrc.get(r) || "";
    }
    return { ti: ti, row: r, src: src };
  }

  /** Random grid: prefer lasso/box selection, pad from full plot if needed. */
  function pickRandomMontageItemsFilled(want) {
    if (!plotHasScatterData()) return [];
    var primary = [];
    if (saveSelectionRows && saveSelectionRows.length) {
      primary = saveSelectionRows.slice();
      shuffleInPlace(primary);
    } else {
      primary = allPlotRowsFromTrace();
      shuffleInPlace(primary);
    }
    var seen = new Set();
    var out = [];
    for (var a = 0; a < primary.length && out.length < want; a++) {
      var r = primary[a];
      if (seen.has(r)) continue;
      var it = montageItemForRow(r);
      if (!it) continue;
      seen.add(r);
      out.push(it);
    }
    if (out.length < want) {
      var fallback = allPlotRowsFromTrace();
      shuffleInPlace(fallback);
      for (var b = 0; b < fallback.length && out.length < want; b++) {
        var r2 = fallback[b];
        if (seen.has(r2)) continue;
        var it2 = montageItemForRow(r2);
        if (!it2) continue;
        seen.add(r2);
        out.push(it2);
      }
    }
    return out;
  }

  /* ---------- preloaded image cache ---------- */
  var preloaded = null;
  var preloadedAxes = {x: "", y: ""};

  function axesMatchPreloadedCache() {
    return !!(preloaded && sx.value === preloadedAxes.x && sy.value === preloadedAxes.y);
  }

  function fetchPreload(xcol, ycol, onDone) {
    preloadedAxes = {x: xcol, y: ycol};
    if (preloadStatus) preloadStatus.textContent = "Loading image cache…";
    setMontagePreloadOverlay(true);
    var body = { x: xcol, y: ycol };
    fetch("{{ url_for('api_preload_images') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body),
    })
      .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) ? res.j.error : "Image cache request failed.";
          if (preloadStatus) preloadStatus.textContent = msg;
          setMontagePreloadOverlay(false);
          if (onDone) onDone(new Error(msg));
          return;
        }
        var data = res.j;
        if (!data.rows || !data.images || !data.rows.length) {
          if (preloadStatus) preloadStatus.textContent = "No images available.";
          setMontagePreloadOverlay(false);
          if (onDone) onDone(new Error("no images"));
          return;
        }
        var rowToSrc = new Map();
        data.rows.forEach(function(r, i) {
          rowToSrc.set(r, "data:image/jpeg;base64," + data.images[i]);
        });
        preloaded = {rows: new Set(data.rows), rowToSrc: rowToSrc, traceMap: null};
        buildTraceMap();
        /* Lasso/box before “View images” only set saveSelectionRows — rebuild activePool for montage + clicks. */
        if (saveSelectionRows && saveSelectionRows.length) {
          var sset = new Set(saveSelectionRows);
          var ap = preloaded.traceMap.filter(function(item) {
            return sset.has(item.row);
          });
          if (ap.length) {
            activePool = ap;
            lassoSelectedRowSet = new Set();
            for (var li = 0; li < ap.length; li++) {
              lassoSelectedRowSet.add(ap[li].row);
            }
          }
        }
        var msg = data.rows.length + " images cached";
        if (data.elapsed != null) msg += " in " + data.elapsed + "s";
        if (preloadStatus) {
          if (activePool && activePool.length) {
            preloadStatus.textContent = activePool.length + " of " + preloaded.traceMap.length
              + " in selection — " + msg + ".";
          } else {
            preloadStatus.textContent = msg + ".";
          }
        }
        setMontagePreloadOverlay(false);
        showRandomPreloaded();
        if (onDone) onDone(null);
      })
      .catch(function(e) {
        console.error("preload failed", e);
        if (preloadStatus) preloadStatus.textContent = "Image cache failed.";
        setMontagePreloadOverlay(false);
        if (onDone) onDone(e);
      });
  }

  btnViewImages.addEventListener("click", function() {
    if (imagesViewEnabled && preloaded && montageDisplayMode === "volumes") {
      showImagesInMontageFromCache();
      return;
    }
    if (imagesViewEnabled && preloaded && axesMatchPreloadedCache()) {
      montageInner.classList.remove("cryo-dash-montage-inner--disabled");
      gridSizeSelect.disabled = false;
      buildTraceMap();
      if (montageDisplayMode === "images") {
        restoreMontageAfterScatterReload();
      }
      if (preloadStatus && preloaded.rows) {
        preloadStatus.textContent = preloaded.rows.size + " images in cache (no reload).";
      }
      syncVolumeExploreButtons();
      return;
    }
    btnViewImages.disabled = true;
    fetchPreload(sx.value, sy.value, function(err) {
      btnViewImages.disabled = false;
      if (err) return;
      imagesViewEnabled = true;
      montageInner.classList.remove("cryo-dash-montage-inner--disabled");
      gridSizeSelect.disabled = false;
      syncVolumeExploreButtons();
    });
  });

  function postVolumeStatic() {
    return fetch("{{ url_for('api_explorer_volume_media') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ rows: lastMontageRows.slice(), mode: "static" }),
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          if (res.j.need_chimerax) {
            window.alert(res.j.error || "Set CHIMERAX_PATH to your ChimeraX executable and try again.");
            setVolumeStatus("", false);
          } else {
            setVolumeStatus(res.j.error || "Volume request failed.", false);
          }
          return null;
        }
        return res.j;
      });
  }

  function postVolumeAnimateCell(cacheId, cellIndex) {
    return fetch("{{ url_for('api_explorer_volume_media') }}", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        mode: "animate",
        volume_cache_id: cacheId,
        cell_index: cellIndex,
        rows: lastMontageRows.slice(),
        gif_frames: EXPLORER_GIF_FRAMES,
        chimerax_cpus: EXPLORER_CHIMERAX_CPUS,
      }),
    })
      .then(function(r) { return r.json().then(function(j) { return { ok: r.ok, j: j }; }); })
      .then(function(res) {
        if (!res.ok) {
          if (res.j.need_chimerax) {
            window.alert(res.j.error || "Set CHIMERAX_PATH to your ChimeraX executable and try again.");
            setVolumeStatus("", false);
          } else {
            setVolumeStatus(res.j.error || "Animate request failed.", false);
          }
          return null;
        }
        return res.j;
      });
  }

  function runVolumeAnimateSequential() {
    var key = montageRowsOrderKey();
    if (!volumeCacheId || !lastMontageRows.length || volumeStaticKey !== key) return;
    var n = lastMontageRows.length;
    volumeAnimateGeneration++;
    var myGen = volumeAnimateGeneration;
    btnVolumeAnimate.disabled = true;
    if (btnVolumeGenerate) btnVolumeGenerate.disabled = true;
    volumeGifDataUrls = new Array(n);
    volumeGifsKey = null;
    montageDisplayMode = "volumes";
    showVolumesInMontage();
    var i = 0;
    function step() {
      if (myGen !== volumeAnimateGeneration) return;
      if (i >= n) {
        volumeGifsKey = key;
        setVolumeStatus("", false);
        syncVolumeExploreButtons();
        return;
      }
      setVolumeStatus("GIF " + (i + 1) + " / " + n + "…", false);
      postVolumeAnimateCell(volumeCacheId, i)
        .then(function(j) {
          if (myGen !== volumeAnimateGeneration) return;
          if (!j || !j.image) {
            syncVolumeExploreButtons();
            return;
          }
          var url = "data:image/gif;base64," + j.image;
          volumeGifDataUrls[i] = url;
          if (i < montageCells.length) montageCells[i].img.src = url;
          i++;
          step();
        })
        .catch(function() {
          if (myGen === volumeAnimateGeneration) {
            setVolumeStatus("Request failed.", false);
          }
          syncVolumeExploreButtons();
        });
    }
    step();
  }

  if (showVolumeExplorer && btnVolumeGenerate) {
    btnVolumeGenerate.addEventListener("click", function() {
      if (!plotHasScatterData()) return;
      if (!lastMontageRows.length) {
        ensureHighlightTrace();
        var picked = pickRandomMontageItemsFilled(neighborK);
        if (!picked.length) return;
        montageInner.classList.remove("cryo-dash-montage-inner--disabled");
        gridSizeSelect.disabled = false;
        updateMontage(picked);
      }
      if (!lastMontageRows.length) return;
      var key = montageRowsOrderKey();
      btnVolumeGenerate.disabled = true;
      if (btnVolumeAnimate) btnVolumeAnimate.disabled = true;
      setVolumeStatus("Decoding volumes and rendering (ChimeraX)…", true);
      postVolumeStatic()
        .then(function(j) {
          if (!j || !j.images || !j.volume_cache_id) {
            syncVolumeExploreButtons();
            return;
          }
          volumeStaticDataUrls = j.images.map(function(b) { return "data:image/png;base64," + b; });
          volumeStaticKey = key;
          volumeGifDataUrls = null;
          volumeGifsKey = null;
          volumeCacheId = j.volume_cache_id;
          showVolumesInMontage();
          setVolumeStatus("", false);
        })
        .catch(function() {
          setVolumeStatus("Request failed.", false);
        })
        .then(function() { syncVolumeExploreButtons(); });
    });
  }

  if (showVolumeExplorer && btnVolumeAnimate) {
    btnVolumeAnimate.addEventListener("click", function() {
      runVolumeAnimateSequential();
    });
  }

  function scatterTraceColorMode() {
    var meta = gd.layout && gd.layout.meta;
    var m = meta && meta.cdrgn_color_mode;
    if (m === "discrete" || m === "continuous") return m;
    var mc = 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 traceCustomdataColorDisp(ti) {
    var cd = gd.data[0].customdata;
    if (!cd || ti < 0 || ti >= cd.length) return null;
    var row = cd[ti];
    if (row && row.length > 2 && row[2] != null && row[2] !== "") return row[2];
    return null;
  }

  /** Parse #rgb / #rrggbb → {r,g,b} or null. */
  function parseMarkerHexRgb(hex) {
    if (typeof hex !== "string") return null;
    var h = hex.trim();
    if (h.charAt(0) !== "#") return null;
    h = h.slice(1);
    var r;
    var g;
    var b;
    if (h.length === 3) {
      r = parseInt(h.charAt(0) + h.charAt(0), 16);
      g = parseInt(h.charAt(1) + h.charAt(1), 16);
      b = parseInt(h.charAt(2) + h.charAt(2), 16);
    } else if (h.length === 6) {
      r = parseInt(h.slice(0, 2), 16);
      g = parseInt(h.slice(2, 4), 16);
      b = parseInt(h.slice(4, 6), 16);
    } else {
      return null;
    }
    if (!isFinite(r) || !isFinite(g) || !isFinite(b)) return null;
    return { r: r, g: g, b: b };
  }

  /**
   * k-means / discrete ChimeraX colours: bright pastel cell fill (blend toward white) plus
   * a darker saturated tint for the covariate line so it stays readable on the light chip.
   */
  function discreteLabelMontageStyles(hex) {
    var rgb = parseMarkerHexRgb(hex);
    if (!rgb) return { bg: "", covarColor: "" };
    var r = rgb.r;
    var g = rgb.g;
    var b = rgb.b;
    var towardWhite = 0.5;
    var rf = Math.round(r * (1 - towardWhite) + 255 * towardWhite);
    var gf = Math.round(g * (1 - towardWhite) + 255 * towardWhite);
    var bf = Math.round(b * (1 - towardWhite) + 255 * towardWhite);
    rf = Math.max(0, Math.min(255, rf));
    gf = Math.max(0, Math.min(255, gf));
    bf = Math.max(0, Math.min(255, bf));
    var textDim = 0.46;
    var rt = Math.max(0, Math.min(255, Math.round(r * textDim)));
    var gt = Math.max(0, Math.min(255, Math.round(g * textDim)));
    var bt = Math.max(0, Math.min(255, Math.round(b * textDim)));
    return {
      bg: "rgb(" + rf + "," + gf + "," + bf + ")",
      covarColor: "rgb(" + rt + "," + gt + "," + bt + ")"
    };
  }

  function discreteMontageSortKey(ti) {
    var d = traceCustomdataColorDisp(ti);
    if (d == null) return { n: NaN, s: "" };
    if (typeof d === "number" && isFinite(d)) return { n: d, s: String(d) };
    var sn = String(d);
    var pn = parseFloat(sn);
    if (sn !== "" && isFinite(pn) && String(pn) === sn) return { n: pn, s: sn };
    return { n: NaN, s: sn };
  }

  function buildTraceMap() {
    if (!preloaded || !gd.data || !gd.data[0]) return;
    var cd = gd.data[0].customdata;
    var tm = [];
    for (var i = 0; i < cd.length; i++) {
      var row = cd[i][1];
      if (preloaded.rows.has(row)) {
        tm.push({ti: i, src: preloaded.rowToSrc.get(row), row: row});
      }
    }
    preloaded.traceMap = tm;
  }

  function showRandomPreloaded() {
    if (!preloaded || !preloaded.traceMap) return;
    /* Only sample from cached rows so first "View images" never picks uncached (blank) cells. */
    var pool = (activePool && activePool.length) ? activePool : preloaded.traceMap;
    if (!pool.length) return;
    var shuffled = pool.slice();
    shuffleInPlace(shuffled);
    updateMontage(shuffled.slice(0, Math.min(neighborK, shuffled.length)));
  }

  function updateMontage(nbs) {
    nbs = nbs.slice();
    var newOrdered = nbs.map(function(x) { return x.row; }).join(",");
    var oldOrdered = lastMontageRows.join(",");
    var newStable = nbs.map(function(x) { return x.row; }).slice().sort(function(a, b) { return a - b; }).join(",");
    var oldStable = lastMontageRows.length
      ? lastMontageRows.slice().sort(function(a, b) { return a - b; }).join(",")
      : "";
    if (newOrdered !== oldOrdered || newStable !== oldStable) {
      invalidateVolumeArtifacts();
    }
    var colorCol = sc.value;
    var colorColLabel = covariateDisplayMap[colorCol] || colorCol;
    var markerColors = gd.data && gd.data[0] && gd.data[0].marker ? gd.data[0].marker.color : null;
    var hasColor = colorCol !== "none" && Array.isArray(markerColors);
    var colorMode = hasColor ? scatterTraceColorMode() : "continuous";
    var cmin = Infinity;
    var cmax = -Infinity;
    if (hasColor && colorMode === "continuous") {
      for (var ci = 0; ci < markerColors.length; ci++) {
        var vci = markerColors[ci];
        if (typeof vci === "number" && isFinite(vci)) {
          if (vci < cmin) cmin = vci;
          if (vci > cmax) cmax = vci;
        }
      }
    }
    if (hasColor && colorMode === "discrete") {
      nbs = nbs.slice().sort(function(a, b) {
        var ka = discreteMontageSortKey(a.ti);
        var kb = discreteMontageSortKey(b.ti);
        if (isFinite(ka.n) && isFinite(kb.n) && ka.n !== kb.n) return ka.n - kb.n;
        if (ka.s !== kb.s) return ka.s < kb.s ? -1 : ka.s > kb.s ? 1 : 0;
        return a.row - b.row;
      });
    } else if (hasColor) {
      nbs = nbs.slice().sort(function(a, b) {
        return markerColors[a.ti] - markerColors[b.ti];
      });
    } else {
      var xs = gd.data && gd.data[0] ? gd.data[0].x : null;
      nbs = nbs.slice().sort(function(a, b) {
        var ax = xs ? xs[a.ti] : 0;
        var bx = xs ? xs[b.ti] : 0;
        if (ax !== bx) return ax - bx;
        return a.row - b.row;
      });
    }
    for (var i = 0; i < montageCells.length; i++) {
      if (i < nbs.length) {
        montageCells[i].img.src = nbs[i].src || "";
        montageCells[i].idx.textContent = "idx " + nbs[i].row;
        if (hasColor) {
          var ti = nbs[i].ti;
          var dispVal = traceCustomdataColorDisp(ti);
          if (dispVal == null && colorMode === "continuous") {
            var vmc = markerColors[ti];
            dispVal = typeof vmc === "number" && isFinite(vmc) ? vmc : vmc;
          }
          var dispStr = dispVal == null ? "—" : (
            typeof dispVal === "number" && isFinite(dispVal) ? dispVal.toFixed(2) : String(dispVal)
          );
          montageCells[i].covar.textContent = colorColLabel + "=" + dispStr;
          if (colorMode === "discrete") {
            var hexCol = markerColors[ti];
            var dStyles = discreteLabelMontageStyles(String(hexCol));
            montageCells[i].cell.style.background = dStyles.bg;
            montageCells[i].covar.style.color = dStyles.covarColor || "";
          } else {
            montageCells[i].covar.style.color = "";
            var val = markerColors[ti];
            var t = cmax > cmin && typeof val === "number" && isFinite(val)
              ? (val - cmin) / (cmax - cmin)
              : 0.5;
            montageCells[i].cell.style.background = covariateScaleCSS(t);
          }
        } else {
          montageCells[i].covar.textContent = "";
          montageCells[i].covar.style.color = "";
          montageCells[i].cell.style.background = "";
        }
      } else {
        montageCells[i].img.src = "";
        montageCells[i].idx.textContent = "";
        montageCells[i].covar.textContent = "";
        montageCells[i].covar.style.color = "";
        montageCells[i].cell.style.background = "";
      }
    }
    if (highlightTraceAdded && gd.data && gd.data[0]) {
      var nx = [], ny = [], txt = [];
      for (var k = 0; k < nbs.length; k++) {
        nx.push(gd.data[0].x[nbs[k].ti]);
        ny.push(gd.data[0].y[nbs[k].ti]);
        txt.push(labels[k]);
      }
      var restyleData = {x: [nx], y: [ny], text: [txt]};
      if (hasColor) {
        var colorVals = [];
        for (var k = 0; k < nbs.length; k++) colorVals.push(markerColors[nbs[k].ti]);
        restyleData["marker.color"] = [colorVals];
        if (colorMode === "continuous") {
          restyleData["marker.colorscale"] = [selectedScatterPalette()];
          restyleData["marker.cmin"] = cmin;
          restyleData["marker.cmax"] = cmax;
        }
        restyleData["marker.line.color"] = ["#fff"];
        restyleData["marker.line.width"] = [1.5];
      } else {
        restyleData["marker.color"] = [ACCENT];
        restyleData["marker.line.width"] = [0];
      }
      queueHighlightRestyle(restyleData);
    }
    lastMontageRows = [];
    for (var mi = 0; mi < nbs.length; mi++) {
      lastMontageRows.push(nbs[mi].row);
    }
    if (montageDisplayMode === "volumes") {
      var vkey = montageRowsOrderKey();
      if (volumeStaticDataUrls && volumeStaticKey === vkey && volumeStaticDataUrls.length) {
        showVolumesInMontage();
      } else {
        syncVolumeExploreButtons();
      }
    } else {
      syncVolumeExploreButtons();
    }
  }

  /** After color-only scatter reload: same particles, pad from lasso pool or full cache if grid needs more. */
  function restoreMontageAfterScatterReload() {
    if (!preloaded || !preloaded.traceMap) return;
    var rowToItem = new Map();
    for (var ri = 0; ri < preloaded.traceMap.length; ri++) {
      var it0 = preloaded.traceMap[ri];
      rowToItem.set(it0.row, it0);
    }
    var want = neighborK;
    var items = [];
    if (lastMontageRows && lastMontageRows.length) {
      for (var i = 0; i < lastMontageRows.length && items.length < want; i++) {
        var found = rowToItem.get(lastMontageRows[i]);
        if (found) items.push(found);
      }
    }
    var poolItems = (activePool && activePool.length) ? activePool : preloaded.traceMap;
    if (items.length < want && poolItems.length) {
      var used = new Set();
      for (var u = 0; u < items.length; u++) used.add(items[u].row);
      var extras = [];
      for (var pi = 0; pi < poolItems.length; pi++) {
        if (!used.has(poolItems[pi].row)) extras.push(poolItems[pi]);
      }
      for (var ei = extras.length - 1; ei > 0; ei--) {
        var j = Math.floor(Math.random() * (ei + 1));
        var tmp = extras[ei]; extras[ei] = extras[j]; extras[j] = tmp;
      }
      for (var k = 0; k < extras.length && items.length < want; k++) items.push(extras[k]);
    }
    if (items.length) {
      updateMontage(items);
    } else if (activePool && activePool.length >= neighborK) {
      showRandomFromPool();
    } else {
      showRandomPreloaded();
    }
  }

  /** After grid size change: keep current rows where possible; add more only from lasso pool if active, else full cache. */
  function refillMontageForNewGridSize() {
    var want = neighborK;
    if (!preloaded || !preloaded.traceMap) {
      if (!plotHasScatterData() || !lastMontageRows.length) return;
      ensureHighlightTrace();
      var picked = pickRandomMontageItemsFilled(want);
      if (picked.length) updateMontage(picked);
      return;
    }
    var poolItems = (activePool && activePool.length) ? activePool : preloaded.traceMap;
    if (!poolItems.length) return;
    var byRow = new Map();
    for (var pi = 0; pi < poolItems.length; pi++) {
      byRow.set(poolItems[pi].row, poolItems[pi]);
    }
    var items = [];
    if (lastMontageRows && lastMontageRows.length) {
      for (var i = 0; i < lastMontageRows.length && items.length < want; i++) {
        var it = byRow.get(lastMontageRows[i]);
        if (it) items.push(it);
      }
    }
    if (items.length < want) {
      var used2 = new Set();
      for (var u2 = 0; u2 < items.length; u2++) used2.add(items[u2].row);
      var extras2 = [];
      for (var ex = 0; ex < poolItems.length; ex++) {
        if (!used2.has(poolItems[ex].row)) extras2.push(poolItems[ex]);
      }
      for (var ei2 = extras2.length - 1; ei2 > 0; ei2--) {
        var j2 = Math.floor(Math.random() * (ei2 + 1));
        var t2 = extras2[ei2]; extras2[ei2] = extras2[j2]; extras2[j2] = t2;
      }
      for (var kk = 0; kk < extras2.length && items.length < want; kk++) {
        items.push(extras2[kk]);
      }
    }
    if (items.length) {
      updateMontage(items);
    } else if (poolItems.length >= want) {
      if (activePool && activePool.length) showRandomFromPool();
      else showRandomPreloaded();
    }
  }

  /* ---------- rendering overlay ---------- */
  function cancelPendingScatterAfterPlot() {
    if (pendingScatterAfterPlot) {
      gd.removeListener("plotly_afterplot", pendingScatterAfterPlot);
      pendingScatterAfterPlot = null;
    }
  }
  function clearScatterPlotWatchdog() {
    if (scatterPlotWatchdog) { clearTimeout(scatterPlotWatchdog); scatterPlotWatchdog = null; }
  }
  function scatterColorByIsDiscrete() {
    /* Matches ``scatter_json``: only ``labels`` uses ChimeraX discrete colours (no sequential palette). */
    return sc.value === "labels";
  }

  function syncScatterPaletteFieldset() {
    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 || scatterColorByIsDiscrete();
    paletteFieldset.classList.toggle("scatter-palette-radios--suppressed", suppress);
  }
  function setRendering(on) {
    if (overlay) {
      overlay.classList.toggle("cryo-plot-rendering-overlay--show", on);
      overlay.setAttribute("aria-hidden", on ? "false" : "true");
    }
    syncScatterPaletteFieldset();
  }

  /* ---------- lasso / selection state (shared by scatter load + events) ---------- */
  var activePool = null;
  var lassoSelectedRowSet = null;
  var lassoSelectionDebounceTimer = null;
  var LASSO_SELECTION_DEBOUNCE_MS = 200;
  var highlightRestyleRaf = null;
  var pendingHighlightRestyle = null;

  function applyPreselectedTraceIndices() {
    var meta = gd.layout && gd.layout.meta;
    var pre = meta && meta.cdrgn_preselected;
    if (!pre || !pre.length) return;
    try {
      Plotly.restyle(gd, { selectedpoints: [pre] }, [0]);
    } catch (err) {
      console.error(err);
    }
  }

  function applySavedSelectionToCurrentTrace() {
    if (!gd || !gd.data || !gd.data[0] || !gd.data[0].customdata) return;
    var rows = saveSelectionRows && saveSelectionRows.length ? saveSelectionRows : [];
    if (!rows.length) {
      try { Plotly.restyle(gd, { selectedpoints: [null] }, [0]); } catch (err) {}
      lassoSelectedRowSet = null;
      return;
    }
    var rowSet = new Set(rows);
    var cd = gd.data[0].customdata;
    var selected = [];
    for (var i = 0; i < cd.length; i++) {
      var row = cd[i] && cd[i].length > 1 ? cd[i][1] : null;
      if (rowSet.has(row)) selected.push(i);
    }
    try {
      Plotly.restyle(gd, { selectedpoints: [selected] }, [0]);
    } catch (err) {
      console.error(err);
    }
    lassoSelectedRowSet = new Set();
    for (var si = 0; si < selected.length; si++) {
      var r = cd[selected[si]][1];
      lassoSelectedRowSet.add(r);
    }
  }

  /* ---------- highlight trace ---------- */
  function ensureHighlightTrace() {
    if (highlightTraceAdded) return;
    highlightTraceAdded = true;
    Plotly.addTraces(gd, [{
      x: [], y: [],
      mode: "markers+text",
      text: [],
      textposition: "middle center",
      textfont: {size: 9, color: "#fff", family: "Georgia, 'Times New Roman', serif"},
      marker: {size: 15, color: "#c4703a", line: {width: 0}},
      hoverinfo: "skip",
      showlegend: false
    }]);
  }

  /* ---------- scatter load ---------- */
  function loadPlot(axesChanged) {
    var gen = ++scatterLoadGeneration;
    var preservedDragMode = (
      gd && gd.layout && gd.layout.dragmode
    ) ? String(gd.layout.dragmode) : "";
    var hasActiveSelection = !!(saveSelectionRows && saveSelectionRows.length);
    suppressSelectionEvents = true;
    highlightTraceAdded = false;
    cancelLassoSelectionDebounce();
    cancelPendingHighlightRestyle();
    cancelPendingScatterAfterPlot();
    clearScatterPlotWatchdog();
    if (plotStatus) plotStatus.textContent = "";
    setRendering(true);
    scatterPlotWatchdog = setTimeout(function() {
      scatterPlotWatchdog = null;
      if (!overlay || !overlay.classList.contains("cryo-plot-rendering-overlay--show")) return;
      cancelPendingScatterAfterPlot();
      setRendering(false);
      suppressSelectionEvents = false;
      if (plotStatus) plotStatus.textContent = "Plot took too long — try a hard refresh.";
    }, SCATTER_PLOT_TIMEOUT_MS);
    var x = sx.value, y = sy.value, c = sc.value;
    var q = "x=" + encodeURIComponent(x)
      + "&y=" + encodeURIComponent(y)
      + "&color=" + encodeURIComponent(c)
      + "&marker_size=2"
      + "&palette=" + encodeURIComponent(selectedScatterPalette());
    if (preselectRowsForNextFetch.length) {
      q += "&preselect_rows=" + preselectRowsForNextFetch.map(Number).join(",");
    }
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        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) {
            fig.layout.title = "";
            fig.layout.margin = Object.assign(fig.layout.margin || {}, {t: 16});
            var nextDragMode = preservedDragMode;
            if (hasActiveSelection) {
              if (nextDragMode !== "lasso" && nextDragMode !== "select") {
                nextDragMode = "select";
              }
            }
            if (nextDragMode) {
              fig.layout.dragmode = nextDragMode;
            }
            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;
            function finishScatterDraw() {
              if (gen !== scatterLoadGeneration) return;
              cancelPendingScatterAfterPlot();
              wireUpPlotlyEvents();
              suppressSelectionEvents = true;
              renderedScatterAxes = {x: x, y: y};
              clearScatterPlotWatchdog();
              setRendering(false);
              buildTraceMap();
              updateParticleSelFieldset();
              if (preselectRowsForNextFetch.length) {
                saveSelectionRows = preselectRowsForNextFetch.slice();
                updateParticleSelFieldset();
                applyPreselectedTraceIndices();
                preselectRowsForNextFetch = [];
              }
              applySavedSelectionToCurrentTrace();
              if (imagesViewEnabled && preloaded && preloaded.traceMap) {
                if (lassoSelectedRowSet && lassoSelectedRowSet.size) {
                  activePool = preloaded.traceMap.filter(function(item) {
                    return lassoSelectedRowSet.has(item.row);
                  });
                  if (preloadStatus) {
                    if (activePool.length) {
                      preloadStatus.textContent = activePool.length + " of " + preloaded.traceMap.length
                        + " cached images in selection.";
                    } else {
                      preloadStatus.textContent = preloaded.traceMap.length + " images cached.";
                    }
                  }
                }
                restoreMontageAfterScatterReload();
              } else if (!imagesViewEnabled) {
                if (lastMontageRows.length) {
                  ensureHighlightTrace();
                  var keepItems = [];
                  for (var li = 0; li < lastMontageRows.length; li++) {
                    var itKeep = montageItemForRow(lastMontageRows[li]);
                    if (itKeep) keepItems.push(itKeep);
                  }
                  if (keepItems.length) updateMontage(keepItems);
                } else {
                  updateMontage([]);
                }
              }
              if (showVolumeExplorer) syncVolumeExploreButtons();
              syncScatterControlsAlignment();
              requestAnimationFrame(function() {
                try { Plotly.Plots.resize(gd); } catch (e) {}
              });
              setTimeout(function() { suppressSelectionEvents = false; }, 0);
            }
            var opts = {responsive: true};
            var p;
            try {
              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);
              }
            } catch (err) { throw err; }
            pendingScatterAfterPlot = finishScatterDraw;
            gd.on("plotly_afterplot", pendingScatterAfterPlot);
            setTimeout(function() {
              if (gen !== scatterLoadGeneration) return;
              if (pendingScatterAfterPlot && gd.data && gd.data.length) finishScatterDraw();
            }, 800);
            if (p && typeof p.then === "function") {
              return p.catch(function(err) { cancelPendingScatterAfterPlot(); throw err; });
            }
            return Promise.resolve();
          })
          .catch(function(e) {
            console.error(e);
            cancelPendingScatterAfterPlot();
            clearScatterPlotWatchdog();
            setRendering(false);
            suppressSelectionEvents = false;
            if (plotStatus) plotStatus.textContent = e.message || "Could not load scatter.";
          });
      });
    });
  }

  function cancelLassoSelectionDebounce() {
    if (lassoSelectionDebounceTimer) {
      clearTimeout(lassoSelectionDebounceTimer);
      lassoSelectionDebounceTimer = null;
    }
  }

  function cancelPendingHighlightRestyle() {
    if (highlightRestyleRaf != null) {
      cancelAnimationFrame(highlightRestyleRaf);
      highlightRestyleRaf = null;
    }
    pendingHighlightRestyle = null;
  }

  /** Copy indices immediately — Plotly may reuse the event object on the next tick. */
  function snapshotSelectedPoints(ev) {
    if (!ev || !ev.points || !ev.points.length) return [];
    var pts = ev.points;
    var out = new Array(pts.length);
    for (var i = 0; i < pts.length; i++) {
      var p = pts[i];
      out[i] = {curveNumber: p.curveNumber, pointIndex: p.pointIndex};
    }
    return out;
  }

  function snapshotRowsFromPoints(ev) {
    var set = new Set();
    if (ev && ev.points) {
      for (var i = 0; i < ev.points.length; i++) {
        var p = ev.points[i];
        if (p.curveNumber !== 0) continue;
        if (p.customdata != null && p.customdata.length > 1) {
          set.add(p.customdata[1]);
        }
      }
    }
    return Array.from(set);
  }

  function queueHighlightRestyle(restyleData) {
    pendingHighlightRestyle = restyleData;
    if (highlightRestyleRaf != null) return;
    highlightRestyleRaf = requestAnimationFrame(function() {
      highlightRestyleRaf = null;
      var payload = pendingHighlightRestyle;
      pendingHighlightRestyle = null;
      if (!payload || !highlightTraceAdded || !gd.data || !gd.data[0]) return;
      try {
        Plotly.restyle(gd, payload, [1]);
      } catch (err) {
        console.error(err);
      }
    });
  }

  function findKNearestInPool(px, py, k) {
    var items = activePool || (preloaded && preloaded.traceMap) || [];
    if (!items.length) return [];
    var xs = gd.data[0].x, ys = gd.data[0].y;
    var best = [];
    for (var j = 0; j < items.length; j++) {
      var ti = items[j].ti;
      var ddx = xs[ti] - px, ddy = ys[ti] - py;
      var d2 = ddx * ddx + ddy * ddy;
      if (best.length < k) {
        best.push({j: j, d: d2});
        if (best.length === k) best.sort(function(a, b) { return a.d - b.d; });
      } else if (d2 < best[k - 1].d) {
        best[k - 1] = {j: j, d: d2};
        best.sort(function(a, b) { return a.d - b.d; });
      }
    }
    return best.map(function(b) { return items[b.j]; });
  }

  /* ---------- plot events ---------- */
  var plotlyEventsWired = false;
  function wireUpPlotlyEvents() {
    if (plotlyEventsWired) return;
    plotlyEventsWired = true;
    ensureHighlightTrace();
    gd.on("plotly_click", function(ev) {
      if (!imagesViewEnabled || !preloaded || !preloaded.traceMap) return;
      if (!ev.points || !ev.points.length) return;
      var pt = ev.points[0];
      if (pt.curveNumber !== 0) return;
      var nbs = findKNearestInPool(pt.x, pt.y, neighborK);
      if (nbs.length) updateMontage(nbs);
    });
    function applyLassoSelectionFromSnapshot(snap) {
      if (!preloaded || !preloaded.traceMap) return;
      if (!snap.length) {
        activePool = null;
        lassoSelectedRowSet = null;
        if (preloadStatus) preloadStatus.textContent = preloaded.traceMap.length + " images cached.";
        return;
      }
      var selectedTi = new Set();
      for (var i = 0; i < snap.length; i++) {
        if (snap[i].curveNumber === 0) selectedTi.add(snap[i].pointIndex);
      }
      activePool = preloaded.traceMap.filter(function(item) {
        return selectedTi.has(item.ti);
      });
      lassoSelectedRowSet = new Set();
      for (var lp = 0; lp < activePool.length; lp++) {
        lassoSelectedRowSet.add(activePool[lp].row);
      }
      var msg = activePool.length + " of " + preloaded.traceMap.length + " cached images in selection";
      if (preloadStatus) preloadStatus.textContent = msg + ".";
      if (activePool.length) {
        showRandomFromPool();
      }
    }

    gd.on("plotly_selected", function(ev) {
      if (suppressSelectionEvents) return;
      var snap = snapshotSelectedPoints(ev);
      var rowsSnap = snapshotRowsFromPoints(ev);
      cancelLassoSelectionDebounce();
        lassoSelectionDebounceTimer = setTimeout(function() {
        lassoSelectionDebounceTimer = null;
        saveSelectionRows = rowsSnap;
        updateParticleSelFieldset();
        if (imagesViewEnabled && preloaded && preloaded.traceMap) {
          applyLassoSelectionFromSnapshot(snap);
        }
      }, LASSO_SELECTION_DEBOUNCE_MS);
    });
    gd.on("plotly_deselect", function() {
      if (suppressSelectionEvents) return;
      cancelLassoSelectionDebounce();
      saveSelectionRows = [];
      updateParticleSelFieldset();
      activePool = null;
      lassoSelectedRowSet = null;
      if (imagesViewEnabled && preloaded && preloadStatus) {
        preloadStatus.textContent = preloaded.traceMap.length + " images cached.";
      }
    });
  }

  function showRandomFromPool() {
    var pool = (activePool || (preloaded && preloaded.traceMap) || []).slice();
    if (pool.length < neighborK) return;
    for (var i = pool.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var tmp = pool[i]; pool[i] = pool[j]; pool[j] = tmp;
    }
    updateMontage(pool.slice(0, neighborK));
  }

  function triggerRedraw(preserveSelectionAndMontage) {
    var axesChanged = sx.value !== renderedScatterAxes.x || sy.value !== renderedScatterAxes.y;
    var keepState = !!preserveSelectionAndMontage && !axesChanged;
    if (keepState) {
      /* Re-apply selection highlight after color-only redraw (keep URI size bounded). */
      preselectRowsForNextFetch = (saveSelectionRows && saveSelectionRows.length && saveSelectionRows.length <= 5000)
        ? saveSelectionRows.slice()
        : [];
    } else {
      saveSelectionRows = [];
      preselectRowsForNextFetch = [];
      activePool = null;
      lassoSelectedRowSet = null;
      lastMontageRows = [];
    }
    updateParticleSelFieldset();
    invalidateVolumeArtifacts();
    if (axesChanged) {
      imagesViewEnabled = false;
      preloaded = null;
      montageInner.classList.add("cryo-dash-montage-inner--disabled");
      gridSizeSelect.disabled = true;
      if (preloadStatus) {
        preloadStatus.textContent = "First click builds image cache for these plot axes before displaying images.";
      }
    }
    cancelLassoSelectionDebounce();
    cancelPendingHighlightRestyle();
    plotlyEventsWired = false;
    loadPlot(axesChanged);
  }

  function saveInverseChecked() {
    var el = document.getElementById("save-inverse");
    return el && el.checked;
  }

  function openSelectionFileBrowser(startDir) {
    if (!selFileBrowserPanel || !selFbList || !selFbPath) return;
    if (selFbSaveName && !String(selFbSaveName.value || "").trim()) {
      selFbSaveName.value = "indices.pkl";
    }
    selFileBrowserPanel.hidden = false;
    selFileBrowserPanel.setAttribute("aria-hidden", "false");
    loadSelectionFileBrowserDir(startDir || "");
  }

  function closeSelectionFileBrowser() {
    if (!selFileBrowserPanel) return;
    selFileBrowserPanel.hidden = true;
    selFileBrowserPanel.setAttribute("aria-hidden", "true");
    selFbCurrentDir = null;
  }

  function normalizedSelectionBasename() {
    var raw = String((selFbSaveName && selFbSaveName.value) || "").trim();
    if (!raw) raw = "indices.pkl";
    if (raw.indexOf("/") >= 0 || raw.indexOf("\\") >= 0) return null;
    if (!/\.pkl$/i.test(raw)) raw += ".pkl";
    var base = raw.replace(/\.pkl$/i, "");
    return base || "indices";
  }

  function loadSelectionFileBrowserDir(dir) {
    if (!selFbList || !selFbPath) return;
    selFbList.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) {
          selFbList.innerHTML = "<li class='cryo-file-browser-empty'>" + (j.error || "Error") + "</li>";
          return;
        }
        selFbCurrentDir = j.dir;
        selFbPath.textContent = j.dir;
        selFbPath.title = j.dir;
        selFbList.innerHTML = "";
        if (!j.entries || !j.entries.length) {
          selFbList.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() {
              loadSelectionFileBrowserDir(j.dir + "/" + ent.name);
            });
          } else {
            li.addEventListener("click", function() {
              if (selFbSaveName) selFbSaveName.value = ent.name;
            });
          }
          selFbList.appendChild(li);
        });
      })
      .catch(function() {
        selFbList.innerHTML = "<li class='cryo-file-browser-empty'>Could not list directory</li>";
      });
  }

  function saveSelectionViaBrowser() {
    var status = document.getElementById("save-status");
    if (!selFbCurrentDir) {
      status.textContent = "Choose a destination folder first.";
      return;
    }
    var basename = normalizedSelectionBasename();
    if (!basename) {
      status.textContent = "Filename cannot contain path separators.";
      return;
    }
    closeSelectionFileBrowser();
    postSaveSelection({ force: false, sel_dir: selFbCurrentDir, basename: basename });
  }

  function postSaveSelection(payload) {
    var status = document.getElementById("save-status");
    status.textContent = "";
    status.title = "";
    if (!saveSelectionRows.length) {
      status.textContent = "Select particles on the plot before saving.";
      status.title = status.textContent;
      return;
    }
    payload.rows = saveSelectionRows;
    payload.save_inverse = saveInverseChecked();
    fetch("{{ url_for('api_save_selection') }}", {
      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 (!res.ok) {
          status.textContent = res.j.error || "Save failed.";
          status.title = status.textContent;
          return;
        }
        var msg = "Saved " + res.j.n_selected + " indices to " + res.j.path;
        if (res.j.inverse_path) {
          msg += "; inverse to " + res.j.inverse_path;
        }
        status.textContent = msg + ".";
        status.title = status.textContent;
      })
      .catch(function() {
        status.textContent = "Request failed.";
        status.title = status.textContent;
      });
  }

  document.getElementById("save-indices-pkl").addEventListener("click", function() {
    postSaveSelection({ force: true, sel_dir: "", basename: "indices" });
  });
  document.getElementById("save-indices-custom").addEventListener("click", function() {
    if (selFbSaveName) selFbSaveName.value = "indices.pkl";
    openSelectionFileBrowser(workdirForSaveHint || "");
  });
  if (selFbUp) {
    selFbUp.addEventListener("click", function() {
      if (selFbCurrentDir) {
        var parent = selFbCurrentDir.replace(/\/[^\/]*\/?$/, "") || "/";
        loadSelectionFileBrowserDir(parent);
      }
    });
  }
  if (selFbCancel) {
    selFbCancel.addEventListener("click", function() {
      closeSelectionFileBrowser();
    });
  }
  if (selFbSaveBtn) {
    selFbSaveBtn.addEventListener("click", function() {
      saveSelectionViaBrowser();
    });
  }
  if (selFbSaveName) {
    selFbSaveName.addEventListener("keydown", function(evt) {
      if (evt.key === "Enter") {
        evt.preventDefault();
        saveSelectionViaBrowser();
      }
    });
  }

  [sx, sy].forEach(function(s) {
    s.addEventListener("change", function() { triggerRedraw(false); });
  });
  sc.addEventListener("change", function() { triggerRedraw(true); });
  document.querySelectorAll("input[name=\"scatter_palette\"]").forEach(function(inp) {
    inp.addEventListener("change", function() { triggerRedraw(true); });
  });
  updateParticleSelFieldset();
  if (showVolumeExplorer) syncVolumeExploreButtons();
  syncScatterControlsAlignment();
  equalizeMontageActionButtonWidths();
  window.addEventListener("resize", equalizeMontageActionButtonWidths);
  syncScatterPaletteFieldset();
  loadPlot(true);
})();
</script>
{% endblock %}