{% extends "base.html" %}
{% block title %}Volume sketched landscape explorer · cryoDRGN{% endblock %}
{% from "_macros.html" import nav_page_title_span %}
{% block nav_page_title %}{{ nav_page_title_span("Volume sketched landscape explorer") }}{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='css/landscape_volpca.css') }}"/>
{% endblock %}
{% block content %}
<!-- === Volume sketched landscape (analyze_landscape PCA / k-means volumes) === -->
<div class="cryo-dash-page cryo-dash-page--volsketch cryo-dash-page--menu-scroll-fade">
  {% if no_landscape %}
  <p class="cryo-dash-lead">{{ reason|safe }}</p>
  {% else %}
  <div class="volsketch-grid">
    <aside class="volsketch-side">
      <p class="cryo-dash-lead" style="margin-top:0;">Sketched volumes for <strong>epoch {{ exp_epoch }}</strong>
        (nav bar).
        Double-click toggles a point in or out of the selection;
        lasso or box replaces the selection with the enclosed
        points.</p>
      <div class="card cryo-dash-controls" id="volsketch-controls">
        <fieldset>
          <legend>Choose axes<br/>and point color scale</legend>
          <label class="cryo-select-line" for="volsketch-pcx">Horizontal (X)</label>
          <select id="volsketch-pcx"></select>
          <label class="cryo-select-line" for="volsketch-pcy">Vertical (Y)</label>
          <select id="volsketch-pcy"></select>
          <label class="cryo-select-line" for="volsketch-color">Color by</label>
          <select id="volsketch-color"></select>
        </fieldset>
        <p id="volsketch-plot-status" class="status cryo-dash-legend-note"
          style="margin:0.5rem 0 0;min-height:1.2em;"></p>
      </div>
      <div class="card cryo-dash-controls" id="volsketch-selection-panel" style="margin-top:0.75rem;">
        <fieldset style="margin:0;">
          <legend>Selection</legend>
          <p id="volsketch-sel-summary" class="status" style="margin:0 0 0.35rem;" role="status" aria-live="polite">No
            sketched volumes selected</p>
          <div class="volsketch-sel-indices-wrap">
            <details class="volsketch-sel-indices-details" id="volsketch-sel-indices-details" hidden>
              <summary class="volsketch-sel-indices-summary">
                <span class="volsketch-sel-indices-chevron" aria-hidden="true"></span>
                <span id="volsketch-sel-indices-summary-label" class="volsketch-sel-indices-summary-label"></span>
                <span class="volsketch-sel-indices-summary-hint" aria-hidden="true">Tap to toggle</span>
              </summary>
              <ul id="volsketch-sel-indices-list" class="volsketch-sel-indices-list"
                aria-label="Selected sketch volume indices"></ul>
            </details>
          </div>
          <div class="volsketch-selection-actions">
            <button type="button" class="btn" id="volsketch-clear-sel">Clear selection</button>
            <button type="button" class="btn" id="volsketch-random-sel" disabled>Choose volumes at random</button>
          </div>
        </fieldset>
      </div>
    </aside>
    <div class="volsketch-plot-cell">
      <div class="volsketch-plot-square">
        <div id="volsketch" class="cryo-plotly-graph-host"></div>
      </div>
    </div>
    <div class="card volsketch-animate-card" id="volsketch-animate-panel">
      <h3 style="margin:0 0 0.65rem;font-size:1.08rem;color:var(--nav-bg,#243b53);">Animations</h3>
      <fieldset class="volsketch-gif-modes" style="margin:0 0 0.65rem;">
        <legend>Animation output</legend>
        <div class="volsketch-seg" role="radiogroup" aria-label="Animation output style">
          <input type="radio" name="volsketch-gif-mode" id="volsketch-mode-cycle" value="cycle" />
          <label for="volsketch-mode-cycle">Cycle<br />through volumes</label>
          <input type="radio" name="volsketch-gif-mode" id="volsketch-mode-rotate" value="rotate_each" />
          <label for="volsketch-mode-rotate">Rotating<br />tiled grid</label>
          <input type="radio" name="volsketch-gif-mode" id="volsketch-mode-disabled" value="disabled" checked />
          <label for="volsketch-mode-disabled">Disable<br />animation</label>
        </div>
        <p id="volsketch-mode-desc" class="cryo-dash-legend-note"></p>
      </fieldset>
      <div id="volsketch-gif-frames-wrap" style="display:none;">
        <label class="cryo-select-line" for="volsketch-gif-frames">GIF frames (rotation)</label>
        <input id="volsketch-gif-frames" type="number" min="4" max="120" value="20" style="width:5rem"/>
      </div>
      <div class="volsketch-animate-status-row" aria-live="polite">
        <span id="volsketch-animate-status" class="volsketch-animate-status-text"></span>
        <div
          id="volsketch-animate-progress"
          class="cryo-plot-rendering-overlay__track"
          role="progressbar"
          aria-valuetext="Rendering GIFs"
          hidden
        >
          <div class="cryo-plot-rendering-overlay__indeterminate"></div>
        </div>
      </div>
      <div id="volsketch-preview-wrap" class="volsketch-preview-wrap" hidden style="margin-top:0;">
        <div id="volsketch-preview-grid" class="volsketch-preview-grid"></div>
      </div>
      <div class="volsketch-view-rotate-row is-disabled" aria-label="Rotate animation viewing angle"
        title="Load an animation preview before rotating the view.">
        <label for="volsketch-view-rotate-angle">
          Degrees
          <input id="volsketch-view-rotate-angle" type="number" step="1" value="15" />
        </label>
        <button type="button" class="btn" data-volsketch-view-axis="x">Rotate X</button>
        <button type="button" class="btn" data-volsketch-view-axis="y">Rotate Y</button>
        <button type="button" class="btn" data-volsketch-view-axis="z">Rotate Z</button>
      </div>
      <div class="volsketch-view-matrix-field">
        <label for="volsketch-view-matrix-input">ChimeraX view matrix</label>
        <textarea id="volsketch-view-matrix-input" class="volsketch-view-matrix-input" rows="3"
          placeholder="camera n1,n2,... (12 numbers; available after animation loads)"></textarea>
        <button type="button" class="btn btn-secondary volsketch-view-matrix-apply" id="volsketch-view-matrix-apply"
          disabled>Apply view matrix</button>
      </div>
      <p class="cryo-dash-legend-note" style="margin:0.5rem 0 0;">GIF previews update automatically a moment after you
        change the selection (ChimeraX offscreen).</p>
      <div class="cryo-explorer-save-btns" style="margin-top:0.55rem;">
        <button type="button" class="btn btn--primary" id="volsketch-save-gif" disabled>Save GIFs<br/>to k-means folder…</button>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% if not no_landscape %}
<script src="{{ url_for('static', filename='js/landscape_volpca.js') }}"></script>
{% endif %}
{% endblock %}