{% extends "base.html" %}
{% block title %}3-D Latent Space Visualizer · cryoDRGN{% endblock %}
{% block nav_page_title %}<span class="nav-title-sep" aria-hidden="true">·</span><span class="nav-page-title">3D visualizer</span>{% endblock %}
{% block head %}
<style>
  .cryo-dash-page--latent3d .latent3d-figure-legend {
    align-self: stretch;
    position: static;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 0 0 min(260px, 30vw);
    max-width: 320px;
    min-width: 200px;
  }
  .latent3d-figure-legend__intro {
    flex: 0 0 auto;
  }
  .latent3d-legend-items {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 0.65rem;
    overflow: hidden;
  }
  .latent3d-legend-items.latent3d-legend-items--inactive {
    flex: 0 0 auto;
    margin-top: 0.35rem;
    min-height: 0;
    overflow: visible;
  }
  .latent3d-legend-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nav-bg, #243b53);
    margin: 0 0 0.45rem;
    flex-shrink: 0;
    line-height: 1.25;
  }
  .latent3d-legend-continuous-v {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
  }
  .latent3d-legend-continuous-v-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 6rem;
    gap: 0.35rem;
  }
  .latent3d-legend-continuous-bar-v {
    flex: 1 1 auto;
    width: 0.95rem;
    min-height: 4rem;
    border-radius: 4px;
    /* Fallback; JS sets gradient from selected palette (vertical: low → high bottom → top). */
    background: linear-gradient(0deg, #440154 0%, #21918c 50%, #fde725 100%);
    border: 1px solid rgba(36, 59, 83, 0.2);
    align-self: center;
  }
  .latent3d-legend-vlab {
    font-size: 0.98rem;
    color: var(--muted, #5c6b7a);
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
    font-weight: 600;
  }
  /* Two columns so discrete classes use less vertical space beside the 3D view */
  .latent3d-legend-discrete-v {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.55rem;
    row-gap: 0.42rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.2rem;
    align-content: start;
  }
  .latent3d-legend-discrete-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    font-size: 0.98rem;
    color: var(--nav-bg, #243b53);
    flex-shrink: 0;
  }
  .latent3d-legend-discrete-swatch {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(36, 59, 83, 0.3);
    flex-shrink: 0;
  }
  .latent3d-legend-discrete-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 500;
    line-height: 1.2;
  }
  #latent3d-palette-radios.latent3d-palette-radios--suppressed {
    display: none;
  }
  @media (max-width: 900px) {
    .cryo-dash-page--latent3d .latent3d-figure-legend {
      flex: none;
      width: 100%;
      max-width: none;
      min-width: 0;
    }
    .cryo-dash-page--latent3d .latent3d-legend-items {
      max-height: min(45vh, 22rem);
    }
  }
  .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;
  }
</style>
{% endblock %}
{% block content %}
<div class="cryo-dash-page cryo-dash-page--latent3d">
<div class="cryo-dash-row">
  <div class="cryo-dash-side">
    <div class="cryo-dash-top">
      <a href="/">← Back</a>
    </div>
    <p class="cryo-dash-lead">Each point is a particle in the space of three latent coordinates you choose. Optional color encodes another quantity from the analysis table.</p>
    <div class="card cryo-dash-controls" id="latent3d-controls-card">
      <fieldset>
        <legend>Latent axes</legend>
        <p class="cryo-dash-legend-note" style="margin:0 0 0.35rem;">Pick three <strong>different</strong> coordinates (z0, z1, …). The plot uses WebGL — &ldquo;Rendering…&rdquo; appears in the plot area while data loads.</p>
        <label class="cryo-select-line" for="sx">First axis</label>
        <select id="sx"></select>
        <label class="cryo-select-line" for="sy">Second axis</label>
        <select id="sy"></select>
        <label class="cryo-select-line" for="sz">Third axis</label>
        <select id="sz"></select>
      </fieldset>
      <fieldset>
        <legend>Color scale</legend>
        <p class="cryo-dash-legend-note" style="margin:0 0 0.35rem;">Optional point color from the analysis table (same idea as the 2D scatter view).</p>
        <label class="cryo-select-line" for="sc">Color by</label>
        <select id="sc"><option value="none">None</option></select>
      </fieldset>
      <p id="z3-axis-status" class="status"></p>
    </div>
  </div>
  <div class="cryo-dash-main">
    <div class="cryo-dash-main-split">
      <div class="cryo-dash-viewport--plotly">
        <div class="cryo-plotly-stack" id="latent3d-plot-stack">
          <div id="latent3d" class="cryo-plotly-graph-host"></div>
          <div id="latent3d-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="latent3d-palette-radios" class="cryo-palette-radios latent3d-palette-radios--suppressed" aria-label="Continuous color palette">
          <legend>Palette (continuous color)</legend>
          <div class="cryo-palette-radios__row">
            <label><input type="radio" name="latent3d_palette" value="Viridis" checked/> Viridis</label>
            <label><input type="radio" name="latent3d_palette" value="Plasma"/> Plasma</label>
            <label><input type="radio" name="latent3d_palette" value="Inferno"/> Inferno</label>
            <label><input type="radio" name="latent3d_palette" value="Magma"/> Magma</label>
            <label><input type="radio" name="latent3d_palette" value="Cividis"/> Cividis</label>
            <label><input type="radio" name="latent3d_palette" value="Turbo"/> Turbo</label>
          </div>
        </fieldset>
      </div>
      <aside class="cryo-dash-figure-legend latent3d-figure-legend" aria-label="3-D latent space view legend">
        <div class="latent3d-figure-legend__intro">
          <strong>Interpreting the view</strong>
          <p class="cryo-dash-legend-note">Drag to rotate, scroll to zoom, toolbar for reset and camera. Points are particles in latent space; color follows your choice above (or a single color if none).</p>
        </div>
        <div id="latent3d-color-legend" class="latent3d-legend-items latent3d-legend-items--inactive"></div>
      </aside>
    </div>
  </div>
</div>
</div>

<script>
(function() {
  var zcols = {{ z_cols | tojson }};
  var cols = {{ numeric_cols | tojson }};
  var covariateDisplayMap = {{ covariate_display_map | tojson }};
  var dx = {{ default_x | tojson }};
  var dy = {{ default_y | tojson }};
  var dz = {{ default_z | tojson }};

  function fillZSelect(sel, val) {
    sel.innerHTML = "";
    zcols.forEach(function(c) {
      var o = document.createElement("option");
      o.value = c;
      o.textContent = c;
      sel.appendChild(o);
    });
    if (zcols.indexOf(val) >= 0) {
      sel.value = val;
    } else {
      sel.value = zcols[0];
    }
  }

  function fillColorSelect(sel) {
    sel.innerHTML = "";
    var none = document.createElement("option");
    none.value = "none";
    none.textContent = "None";
    sel.appendChild(none);
    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 sz = document.getElementById("sz");
  var sc = document.getElementById("sc");
  fillZSelect(sx, dx);
  fillZSelect(sy, dy);
  fillZSelect(sz, dz);
  fillColorSelect(sc);

  var gd = document.getElementById("latent3d");
  var colorLegend = document.getElementById("latent3d-color-legend");
  var overlay = document.getElementById("latent3d-rendering-overlay");
  var paletteFieldset = document.getElementById("latent3d-palette-radios");
  var controlsCard = document.getElementById("latent3d-controls-card");
  var controlsSide = controlsCard ? controlsCard.closest(".cryo-dash-side") : null;
  var plotStack = document.getElementById("latent3d-plot-stack");

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

  function latent3dColorByIsDiscrete() {
    /* Matches ``scatter3d_z_json``: only ``labels`` uses a fixed discrete palette. */
    return sc.value === "labels";
  }

  function syncLatent3dPaletteFieldset() {
    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 || latent3dColorByIsDiscrete();
    paletteFieldset.classList.toggle("latent3d-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");
    }
    syncLatent3dPaletteFieldset();
  }

  function fmtLegendNumber(v) {
    if (typeof v !== "number" || !isFinite(v)) return "";
    var av = Math.abs(v);
    if (av >= 1000 || (av > 0 && av < 0.01)) return v.toExponential(2);
    return v.toFixed(3).replace(/\.?0+$/, "");
  }

  var LATENT_CONTINUOUS_BAR_BG = {
    Viridis: "linear-gradient(90deg,#440154 0%,#482878 14%,#3e4989 29%,#31688e 43%,#26828e 57%,#1f9e89 71%,#35b779 82%,#90d743 92%,#fde725 100%)",
    Plasma: "linear-gradient(90deg,#0d0887 0%,#6a00a8 20%,#b12a90 40%,#e16462 60%,#fca636 82%,#f0f921 100%)",
    Inferno: "linear-gradient(90deg,#000004 0%,#420a68 35%,#932667 55%,#dd513a 72%,#fca50a 88%,#fcffa4 100%)",
    Magma: "linear-gradient(90deg,#000004 0%,#3b0f70 30%,#8c2981 50%,#de4968 68%,#fe9f6d 85%,#fcfdbf 100%)",
    Cividis: "linear-gradient(90deg,#00224e 0%,#123570 25%,#575d6d 50%,#8c8c78 72%,#cfe49a 88%,#fdea45 100%)",
    Turbo: "linear-gradient(90deg,#30123b 0%,#1a4ac2 17%,#32b4ec 33%,#7cd250 50%,#f8d940 67%,#fe5626 83%,#d73401 100%)"
  };
  function latent3dContinuousBarBackgroundVertical(paletteName) {
    var h = LATENT_CONTINUOUS_BAR_BG[paletteName] || LATENT_CONTINUOUS_BAR_BG.Viridis;
    return h.replace("90deg", "0deg");
  }
  function selectedLatentPalette() {
    var r = document.querySelector("input[name=\"latent3d_palette\"]:checked");
    var v = r && r.value ? String(r.value) : "Viridis";
    return LATENT_CONTINUOUS_BAR_BG[v] ? v : "Viridis";
  }

  function renderColorLegend(fig, colorKey) {
    if (!colorLegend) return;
    if (!colorKey || colorKey === "none") {
      colorLegend.innerHTML = "";
      colorLegend.classList.add("latent3d-legend-items--inactive");
      return;
    }
    var meta = (fig && fig.layout && fig.layout.meta) ? fig.layout.meta : null;
    var legend = (meta && meta.cdrgn_color_legend) ? meta.cdrgn_color_legend : null;
    var title = covariateDisplayMap[colorKey] || colorKey;
    if (!legend || !legend.type) {
      colorLegend.innerHTML = "";
      colorLegend.classList.add("latent3d-legend-items--inactive");
      return;
    }
    colorLegend.classList.remove("latent3d-legend-items--inactive");
    if (legend.type === "discrete" && Array.isArray(legend.items) && legend.items.length) {
      var itemsHtml = legend.items.map(function(item) {
        var label = (item && item.label != null) ? String(item.label) : "";
        var col = (item && item.color) ? String(item.color) : "#aab4bf";
        return (
          '<div class="latent3d-legend-discrete-item">' +
          '<span class="latent3d-legend-discrete-swatch" style="background:' + col + ';"></span>' +
          '<span class="latent3d-legend-discrete-label">' + label + "</span>" +
          "</div>"
        );
      }).join("");
      colorLegend.innerHTML =
        '<p class="latent3d-legend-title">' + title + "</p>" +
        '<div class="latent3d-legend-discrete-v">' + itemsHtml + "</div>";
      return;
    }
    if (legend.type === "continuous") {
      var vmin = fmtLegendNumber(Number(legend.min));
      var vmax = fmtLegendNumber(Number(legend.max));
      colorLegend.innerHTML =
        '<div class="latent3d-legend-continuous-v">' +
        '<p class="latent3d-legend-title">' + title + "</p>" +
        '<div class="latent3d-legend-continuous-v-inner">' +
        '<span class="latent3d-legend-vlab latent3d-legend-vlab--max">' + vmax + "</span>" +
        '<div class="latent3d-legend-continuous-bar-v"></div>' +
        '<span class="latent3d-legend-vlab latent3d-legend-vlab--min">' + vmin + "</span>" +
        "</div></div>";
      var bar = colorLegend.querySelector(".latent3d-legend-continuous-bar-v");
      if (bar) {
        bar.style.background = latent3dContinuousBarBackgroundVertical(selectedLatentPalette());
      }
      return;
    }
    colorLegend.innerHTML = "";
    colorLegend.classList.add("latent3d-legend-items--inactive");
  }

  function loadPlot() {
    var x = sx.value;
    var y = sy.value;
    var z = sz.value;
    var c = sc.value;
    var st = document.getElementById("z3-axis-status");
    if (x === y || x === z || y === z) {
      if (st) st.textContent = "Choose three different latent axes.";
      setRendering(false);
      return;
    }
    if (st) st.textContent = "";
    setRendering(true);
    var q = "x=" + encodeURIComponent(x)
      + "&y=" + encodeURIComponent(y)
      + "&z=" + encodeURIComponent(z)
      + "&color=" + encodeURIComponent(c)
      + "&palette=" + encodeURIComponent(selectedLatentPalette());
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        fetch("{{ url_for('api_scatter3d_z') }}?" + q)
          .then(function(r) {
            return r.text().then(function(text) {
              var j;
              try { j = JSON.parse(text); }
              catch (e) { throw new Error("API did not return JSON"); }
              if (!r.ok) throw new Error(j.error || r.statusText);
              return j;
            });
          })
          .then(function(fig) {
            renderColorLegend(fig, c);
            return Plotly.react(gd, fig.data, fig.layout, {responsive: true});
          })
          .then(function() {
            setRendering(false);
            syncControlsAlignment();
            requestAnimationFrame(function() {
              try {
                Plotly.Plots.resize(gd);
              } catch (e) {}
            });
          })
          .catch(function(e) {
            console.error(e);
            setRendering(false);
            var st2 = document.getElementById("z3-axis-status");
            if (st2) st2.textContent = e.message || "Could not draw plot.";
          });
      });
    });
  }

  [sx, sy, sz, sc].forEach(function(s) {
    s.addEventListener("change", loadPlot);
  });
  document.querySelectorAll("input[name=\"latent3d_palette\"]").forEach(function(inp) {
    inp.addEventListener("change", loadPlot);
  });
  window.addEventListener("resize", function() {
    syncControlsAlignment();
    try {
      Plotly.Plots.resize(gd);
    } catch (e) {}
  });
  if (window.ResizeObserver && plotStack) {
    var latent3dPlotStackObserver = new ResizeObserver(syncControlsAlignment);
    latent3dPlotStackObserver.observe(plotStack);
  }
  syncLatent3dPaletteFieldset();
  syncControlsAlignment();
  loadPlot();
})();
</script>
{% endblock %}