{% extends "base.html" %}
{% from "_palette_options.html" import continuous_palette_options %}
{# 4×4 mini-grids: row i = top→bottom, col j = left→right; matches zᵢ (row) vs zⱼ (col) #}
{% macro picto_lower() %}
<svg class="pair-picto" width="32" height="32" viewBox="0 0 34 34" aria-hidden="true" focusable="false"
  role="presentation">
  {% set lo = "#e8ecf1" %}
  {% set hi = "#3d5a80" %}
  <rect x="1" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="9" width="7" height="7" fill="{{ hi }}"/>
  <rect x="9" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="17" width="7" height="7" fill="{{ hi }}"/>
  <rect x="9" y="17" width="7" height="7" fill="{{ hi }}"/>
  <rect x="17" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="25" width="7" height="7" fill="{{ hi }}"/>
  <rect x="9" y="25" width="7" height="7" fill="{{ hi }}"/>
  <rect x="17" y="25" width="7" height="7" fill="{{ hi }}"/>
  <rect x="25" y="25" width="7" height="7" fill="{{ lo }}"/>
</svg>
{% endmacro %}
{% macro picto_diagonal() %}
<svg class="pair-picto" width="32" height="32" viewBox="0 0 34 34" aria-hidden="true" focusable="false"
  role="presentation">
  {% set lo = "#e8ecf1" %}
  {% set hi = "#3d5a80" %}
  <rect x="1" y="1" width="7" height="7" fill="{{ hi }}"/>
  <rect x="9" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="9" width="7" height="7" fill="{{ hi }}"/>
  <rect x="17" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="17" width="7" height="7" fill="{{ hi }}"/>
  <rect x="25" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="1" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="25" width="7" height="7" fill="{{ hi }}"/>
</svg>
{% endmacro %}
{% macro picto_upper() %}
<svg class="pair-picto" width="32" height="32" viewBox="0 0 34 34" aria-hidden="true" focusable="false"
  role="presentation">
  {% set lo = "#e8ecf1" %}
  {% set hi = "#3d5a80" %}
  <rect x="1" y="1" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="1" width="7" height="7" fill="{{ hi }}"/>
  <rect x="17" y="1" width="7" height="7" fill="{{ hi }}"/>
  <rect x="25" y="1" width="7" height="7" fill="{{ hi }}"/>
  <rect x="1" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="9" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="9" width="7" height="7" fill="{{ hi }}"/>
  <rect x="25" y="9" width="7" height="7" fill="{{ hi }}"/>
  <rect x="1" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="17" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="17" width="7" height="7" fill="{{ hi }}"/>
  <rect x="1" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="9" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="17" y="25" width="7" height="7" fill="{{ lo }}"/>
  <rect x="25" y="25" width="7" height="7" fill="{{ lo }}"/>
</svg>
{% endmacro %}
{# Full 4×4 grid — same layout as other pair-pictos; accents pair with .cryo-cc-legend__filter-em #}
{% macro picto_filter_all_panels() %}
<svg class="pair-picto pair-picto--filter-grid" width="32" height="32" viewBox="0 0 34 34"
  aria-hidden="true" focusable="false"
  role="presentation">
  {% set soft = "#f6efea" %}
  {% set acc = "rgba(196, 112, 58, 0.42)" %}
  <rect x="1" y="1" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="9" y="1" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="17" y="1" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="25" y="1" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="1" y="9" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="9" y="9" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="17" y="9" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="25" y="9" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="1" y="17" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="9" y="17" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="17" y="17" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="25" y="17" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="1" y="25" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="9" y="25" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="17" y="25" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
  <rect x="25" y="25" width="7" height="7" fill="{{ soft }}" stroke="{{ acc }}" stroke-width="0.55"/>
</svg>
{% endmacro %}
{% block title %}Latent pairs · cryoDRGN{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cryo_cc_legend_palette_menu.css') }}"/>
<style>
  .pairplot-viewport {
    --pairplot-max-h: min(90vh, calc(100svh - 6.5rem));
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    max-height: var(--pairplot-max-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-width: 0;
    background: var(--cream, #faf8f4);
    border-radius: 2px;
  }
  .pairplot-stack {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    max-height: var(--pairplot-max-h);
    /* Height comes from the PNG (or reserved slot); avoid min-height so the slot matches the real figure. */
    min-height: 0;
    vertical-align: top;
  }
  .pairplot-img {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: var(--pairplot-max-h);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 0.2s ease-out;
    box-sizing: border-box;
  }
  .pairplot-img.pairplot-img--ready {
    opacity: 1;
  }
  .pairplot-skeleton {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    box-sizing: border-box;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0.15s;
  }
  .pairplot-skeleton.pairplot-skeleton--show {
    opacity: 1;
    visibility: visible;
  }
  .pairplot-skel-cell {
    position: absolute;
    box-sizing: border-box;
    container-type: size;
    container-name: pair-skel;
    margin: 0;
    padding: 0;
    background: transparent;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    z-index: 1;
  }
  .pairplot-skeleton.pairplot-skeleton--show .pairplot-skel-cell {
    border: 1.05px solid rgba(90, 107, 122, 0.55);
  }
  .pairplot-skeleton.pairplot-skeleton--show .pairplot-skel-cell--diag {
    border-width: 2.1px;
    border-color: #334e68;
  }
  .pairplot-skel-edge-labels {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .pairplot-skel-edge-label {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    line-height: 1.05;
    font-weight: 700;
    color: #243b53;
    white-space: nowrap;
    font-size: clamp(0.52rem, 2.2cqw, 0.78rem);
    letter-spacing: 0.01em;
  }
  .pairplot-skel-cell--busy .pairplot-skel-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(3px, 1cqmin, 5px);
    position: absolute;
    top: 2px;
    right: 2px;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: calc(100% - 4px);
    padding: clamp(2px, 0.7cqmin, 4px) clamp(4px, 1.2cqmin, 6px);
    margin: 0;
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.94);
    border: 1px solid rgba(36, 59, 83, 0.13);
    box-shadow: 0 1px 7px rgba(36, 59, 83, 0.1);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1;
  }
  .pairplot-skel-text {
    line-height: 1.05;
    color: var(--nav-bg, #243b53);
    font-weight: 700;
    white-space: nowrap;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.52rem, 7.5cqmin, 0.68rem);
    max-width: 5.2rem;
  }
  .pairplot-skel-track {
    width: clamp(1.35rem, 22cqmin, 2.25rem);
    min-width: 1.2rem;
    flex-shrink: 0;
    max-width: 100%;
    height: clamp(2px, 2cqmin, 3px);
    border-radius: 999px;
    background: rgba(36, 59, 83, 0.14);
    overflow: hidden;
    position: relative;
  }
  .pairplot-skel-indeterminate {
    position: absolute;
    top: 0;
    height: 100%;
    width: 38%;
    border-radius: 999px;
    background: var(--accent, #c4703a);
    opacity: 0.95;
    animation: cryo-dash-render-bar 1.15s ease-in-out infinite alternate;
  }
  @supports not (container-type: size) {
    .pairplot-skel-text {
      max-width: 4.5rem;
      font-size: clamp(0.5rem, 2.2vw, 0.65rem);
    }
    .pairplot-skel-track {
      width: min(2rem, 24vw);
      height: clamp(2px, 0.45vw, 3px);
    }
  }
  .pairplot-skel-cell:not(.pairplot-skel-cell--busy) .pairplot-skel-inner {
    display: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .pairplot-skel-indeterminate {
      animation: none;
      left: 0;
      transform: none;
      width: 100%;
      opacity: 0.35;
    }
  }
  #pair-controls-card legend {
    font-size: calc(0.82rem * 1.35 * 0.9);
    line-height: 1.28;
  }
  .cryo-dash-controls .legend-row .pair-picto {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(36, 59, 83, 0.12);
    display: block;
  }
  #pair-controls-card label.radio-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.22rem 0;
    font-weight: 400;
    font-size: calc(0.86rem * 1.2);
    cursor: pointer;
  }
  .cryo-dash-controls .color-grid {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-height: 13rem;
    overflow-y: auto;
    margin-top: 0.15rem;
  }
  #pair-controls-card .color-grid label.radio-line {
    margin: 0;
  }
  .cryo-dash-controls .btn-row {
    width: 100%;
  }
  .cryo-dash-controls .btn-row .btn {
    width: 100%;
    box-sizing: border-box;
    display: block;
    text-align: center;
  }
  .cryo-dash-row--plot-triple .pairplot-viewport-col {
    width: 100%;
    min-width: 0;
  }
  /* Fill grid cell: stretch plot column. */
  .cryo-dash-page--pairplot .cryo-dash-main {
    justify-content: flex-start;
    align-items: stretch;
  }
  .pairplot-viewport-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    align-self: stretch;
  }
  .pairplot-color-legend-aside {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: flex-start;
    align-items: stretch;
  }
  .pairplot-color-legend-aside .cryo-cc-legend {
    box-sizing: border-box;
    padding: 0.4rem 0.45rem 0.35rem;
    border: 1px solid rgba(36, 59, 83, 0.13);
    border-radius: 4px;
    background: rgba(250, 248, 244, 0.85);
    width: max-content;
    max-width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(80vh, 80svh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pairplot-color-legend-aside #pair-color-discrete-wrap.cryo-cc-discrete-wrap--show {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .cryo-cc-legend--vertical {
    gap: 0.35rem;
  }
  .pairplot-color-legend-aside .cryo-cc-legend__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    font-size: calc(0.82rem * 1.35 * 0.9);
    line-height: 1.28;
    font-weight: 700;
    color: var(--nav-bg, #243b53);
    margin: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-legend__heading .pair-picto {
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(36, 59, 83, 0.12);
    display: block;
  }
  .pairplot-color-legend-aside .pair-picto--filter-grid {
    box-shadow:
      0 0 0 1px rgba(36, 59, 83, 0.12),
      0 0 0 2px rgba(196, 112, 58, 0.1);
  }
  .pairplot-color-legend-aside .cryo-cc-legend__heading-text {
    font-weight: 700;
    color: var(--nav-bg, #243b53);
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pairplot-color-legend-aside .cryo-cc-legend__filter-em {
    color: rgba(149, 87, 45, 0.92);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(196, 112, 58, 0.28);
    text-underline-offset: 0.1em;
  }
  .pairplot-color-legend-aside #pair-color-continuous-wrap:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }
  .pairplot-color-legend-aside .pair-legend-continuous-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: var(--pair-legend-middle-w, max-content);
    max-width: 100%;
    min-width: min(10.5rem, 100%);
  }
  .pairplot-color-legend-aside .pair-legend-middle-track--continuous {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.4rem;
    padding-right: 0.15rem;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .pairplot-color-legend-aside .pair-legend-middle-track--continuous #pair-color-hist {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-legend__footer--continuous {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
    margin-top: 0.35rem;
    width: 100%;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-legend__footer--continuous #pairplot-palette-select {
    margin-top: 0;
  }
  .pairplot-color-legend-aside #pair-color-hist.cryo-cc-hist--pair-vertical {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 120px;
    box-sizing: border-box;
    align-self: stretch;
  }
  .cryo-cc-legend #pair-color-hist {
    flex: 1 1 auto;
    min-height: 7rem;
    width: 100%;
    min-width: 10.5rem;
    box-sizing: border-box;
  }
  .cryo-cc-legend-hist-ctrl {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.75rem;
    color: var(--muted, #5c6b7a);
    flex-shrink: 0;
  }
  .pairplot-color-legend-aside #pairplot-palette-select {
    width: 100%;
    max-width: 100%;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(36, 59, 83, 0.1);
    font-size: 0.78rem;
    color: var(--nav-bg, #243b53);
    box-sizing: border-box;
  }
  .pairplot-color-legend-aside #pairplot-palette-select.pairplot-palette-select--hidden-during-plot-render {
    opacity: 0.45;
    pointer-events: none;
  }
  .pairplot-color-legend-aside .pairplot-palette-select__title {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    line-height: 1.05;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(36, 59, 83, 0.14);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--nav-bg, #243b53);
    padding: 0.18rem 0.34rem;
    font: inherit;
    font-weight: 600;
  }
  .pairplot-color-legend-aside .pairplot-palette-select__title:hover {
    background: rgba(36, 59, 83, 0.06);
  }
  .pairplot-color-legend-aside .pairplot-palette-select__chevron {
    flex: 0 0 auto;
    font-size: 0.7rem;
    transition: transform 0.12s ease;
  }
  .pairplot-color-legend-aside .pairplot-palette-select__title[aria-expanded="true"] .pairplot-palette-select__chevron {
    transform: rotate(90deg);
  }
  .cryo-cc-legend-hist-ctrl label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    cursor: pointer;
    color: var(--nav-bg, #243b53);
    font-weight: 500;
  }
  #pair-color-continuous-wrap[hidden] {
    display: none !important;
  }
  #pair-color-discrete-wrap {
    display: none;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switches--pair-2col {
    /* --cryo-discrete-legend-w set from JS from pairplot viewport column width */
    width: var(--cryo-discrete-legend-w, 100%);
    max-width: 100%;
  }
  .cryo-cc-discrete-toggle-heading-row {
    display: none;
    flex-direction: row;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin: 0 0 0.32rem;
    min-width: 0;
    line-height: 1.15;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nav-bg, #243b53);
    flex-shrink: 0;
  }
  .cryo-cc-discrete-toggle-heading-row:not([hidden]) {
    display: flex;
  }
  .cryo-cc-discrete-toggle-heading-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-cell {
    padding: 0;
    border-radius: 2px;
    box-sizing: border-box;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-cell--plastic:not(.cryo-cc-discrete-cell--invert) {
    border-radius: 7px;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switch {
    font-size: 0.72rem;
    box-sizing: border-box;
    min-width: 0;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switch-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switch-label {
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.15;
    color: var(--nav-bg, #243b53);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switch-count {
    font-size: 0.6rem;
    line-height: 1.12;
    color: var(--muted, #5c6b7a);
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .cryo-cc-discrete-switch-count {
    font-size: 0.72rem;
    color: var(--muted, #5c6b7a);
  }
  .pairplot-color-legend-aside .cryo-cc-discrete-switch input[type="checkbox"] {
    margin: 0 0.35rem 0 0;
    flex-shrink: 0;
  }
  /* Invert button now part of the grid - hide original container */
  .cryo-cc-discrete-actions {
    display: none !important;
  }
  /* Invert beside “toggle selection” title — slot styles from base `.cryo-cc-region-invert-slot` */
  #pair-color-discrete-invert-slot
  .cryo-cc-discrete-cell--invert
  .cryo-cc-discrete-invert-fitbox
  .cryo-cc-discrete-switch-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align-self: center;
    max-height: 100%;
    box-sizing: border-box;
    line-height: 1.05;
    font-weight: 700;
  }
</style>
{% endblock %}
{% from "_macros.html" import nav_page_title_span %}
{% block nav_page_title %}{{ nav_page_title_span("Pair-plot generator") }}{% endblock %}
{% block content %}
<div class="cryo-dash-page cryo-dash-page--pairplot cryo-dash-page--menu-scroll-fade">
<div class="cryo-dash-row cryo-dash-row--plot-triple">
  <div class="cryo-dash-side">
    <p class="cryo-dash-lead">Each panel square compares two latent z-space axes, with coloring according to the chosen
      covariate in the squares below the diagonal. The diagonal panels show a 2D embedding across all z-space axes
      colored by the given row/column z-latent-space axis. Filter particles shown across all panels using the
      legend interface shown on the right.</p>
    <div class="card cryo-dash-controls" id="pair-controls-card">
      <fieldset>
        <legend>
          <span class="legend-row">{{ picto_lower() }}<span>Covariate coloring<br>(below diagonal)</span></span>
        </legend>
        <div class="color-grid">
          <label class="radio-line">
            <input type="radio" name="color_cov" value="none" {% if default_color == "none" %}checked{% endif %}/>
            <span>None</span>
          </label>
          {% for c in color_choices %}
          <label class="radio-line">
            <input type="radio" name="color_cov" value="{{ c }}" {% if c == default_color %}checked{% endif %}/>
            <span>{{ covariate_display_map.get(c, c) }}</span>
          </label>
          {% endfor %}
        </div>
      </fieldset>
      <fieldset>
        <legend>
          <span class="legend-row">{{ picto_diagonal() }}<span>Embedding method<br>(on the diagonal)</span></span>
        </legend>
        <label class="radio-line">
          <input type="radio" name="diag_emb" value="umap" {% if has_umap %}checked{% endif %}
            {% if not has_umap %}disabled{% endif %}/>
          <span>UMAP{% if not has_umap %} <span class="muted">(n/a)</span>{% endif %}</span>
        </label>
        <label class="radio-line">
          <input type="radio" name="diag_emb" value="pc" {% if not has_umap %}checked{% endif %}/>
          <span>PCA</span>
        </label>
      </fieldset>
      <fieldset>
        <legend>
          <span class="legend-row">{{ picto_upper() }}<span>Plotting method<br>(above diagonal)</span></span>
        </legend>
        <label class="radio-line">
          <input type="radio" name="upper_style" value="scatter" checked/>
          <span>Scatter</span>
        </label>
        <label class="radio-line">
          <input type="radio" name="upper_style" value="hex"/>
          <span>Hex density</span>
        </label>
      </fieldset>
      <p class="btn-row">
        <button type="button" class="btn" id="save-pairplot-png">Save to PNG</button>
      </p>
      <p id="pair-status" class="status"></p>
    </div>
  </div>
  <div class="cryo-dash-main">
    <div class="pairplot-viewport-col">
        <div class="pairplot-viewport" id="pairplot-viewport" aria-busy="true">
          <div class="pairplot-stack" id="pairplot-stack">
            <img id="pairplot" class="pairplot-img" alt="Latent pair grid"/>
            <div
              class="pairplot-skeleton"
              id="pairplot-skeleton"
              aria-hidden="true"
            >
              <div class="pairplot-skel-edge-labels" id="pairplot-skel-edge-labels" aria-hidden="true"></div>
              {% for i in range(zdim) %}
              {% for j in range(zdim) %}
              <div
                class="pairplot-skel-cell{% if i == j %} pairplot-skel-cell--diag{% endif %}"
                data-row="{{ i }}"
                data-col="{{ j }}"
                data-idx="{{ i * zdim + j }}">
                <div class="pairplot-skel-inner" aria-hidden="true">
                  <span class="pairplot-skel-text">Rendering…</span>
                  <div class="pairplot-skel-track">
                    <div class="pairplot-skel-indeterminate"></div>
                  </div>
                </div>
              </div>
              {% endfor %}
              {% endfor %}
            </div>
            <div id="pairplot-rendering-overlay" class="cryo-plot-rendering-overlay"
              aria-hidden="true">
              <div class="cryo-plot-rendering-overlay__inner">
                <span class="cryo-plot-rendering-overlay__label">Rendering…</span>
                <div class="cryo-plot-rendering-overlay__track" role="progressbar" aria-valuetext="Loading plot">
                  <div class="cryo-plot-rendering-overlay__indeterminate"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      <aside class="pairplot-color-legend-aside" aria-label="Colour covariate filter">
        <div id="pair-color-legend-panel" class="cryo-cc-legend" hidden aria-hidden="true">
          <div class="cryo-cc-legend__heading legend-row"
            title="Covariate colours in the legend; filtering applies to every square in the pair grid.">
            {{ picto_lower() }}
            <span class="cryo-cc-legend__heading-text">Color legend and
              <span class="cryo-cc-legend__filter-em">filtering</span></span>
            {{ picto_filter_all_panels() }}
          </div>
          <div id="pair-color-continuous-wrap">
            <div class="pair-legend-continuous-stack">
              <div class="pair-legend-middle-track pair-legend-middle-track--continuous">
                <div id="pair-color-hist" class="cryo-cc-hist--pair-vertical"></div>
              </div>
              <div class="cryo-cc-legend__footer cryo-cc-legend__footer--continuous">
                <div class="cryo-cc-legend-hist-ctrl">
                  <label for="pair-color-threshold-use-max">
                    <input type="checkbox" id="pair-color-threshold-use-max"/>
                    <span id="pair-color-threshold-mode-caption">Use as maximum (≤)</span>
                  </label>
                  <span id="pair-color-threshold-status" class="status"></span>
                </div>
                <div id="pairplot-palette-select"
                  class="cryo-cc-legend-palette-shell pairplot-palette-select cryo-palette-select"
                  aria-label="Continuous color palette">
                  <button type="button" id="pair-palette-toggle"
                    class="pairplot-palette-select__title cryo-palette-select__title"
                    aria-expanded="false" aria-controls="pair-palette-options">
                    <span class="pairplot-palette-select__chevron cryo-palette-select__chevron"
                      aria-hidden="true">▶</span>
                    <span>Choose<br/>palette</span>
                  </button>
                  <div id="pair-palette-options"
                    class="cryo-cc-legend-palette-menu pairplot-palette-select__options
                      cryo-palette-select__options pairplot-palette-select__options--collapsed">
                    {{ continuous_palette_options("pairplot_palette") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="pair-color-discrete-wrap" class="cryo-cc-discrete-wrap">
            <div id="pair-color-discrete-heading-row" class="cryo-cc-discrete-toggle-heading-row" hidden>
              <button type="button" class="cryo-cc-discrete-toggle-title" data-cryo-discrete-collapse-toggle
                aria-expanded="true" aria-controls="pair-color-discrete-switches" title="Hide toggle selection">
                <span class="cryo-cc-discrete-collapse-chevron" aria-hidden="true">▼</span>
                <span class="cryo-cc-discrete-toggle-heading-text">Toggle selection</span>
              </button>
              <div
                id="pair-color-discrete-invert-slot"
                class="cryo-cc-region-invert-slot"
                hidden
                aria-hidden="true"></div>
            </div>
            <div
              id="pair-color-discrete-switches"
              class="cryo-cc-discrete-switches cryo-cc-discrete-switches--pair-2col"
              role="group" aria-label="Discrete colour filter"></div>
            <div class="cryo-cc-discrete-actions">
              <button type="button" id="pair-btn-discrete-invert" class="btn btn-secondary" disabled>
                no selection
              </button>
            </div>
          </div>
        </div>
      </aside>
</div>
</div>

<script src="{{ url_for('static', filename='js/cryo_cc_legend_primitives.js') }}"></script>
<script src="{{ url_for('static', filename='js/color_covariate_legend.js') }}"></script>
<script>
(function() {
  var el = document.getElementById("pairplot");
  var status = document.getElementById("pair-status");
  var viewport = document.getElementById("pairplot-viewport");
  var stack = document.getElementById("pairplot-stack");
  var skel = document.getElementById("pairplot-skeleton");
  var renderOverlay = document.getElementById("pairplot-rendering-overlay");
  var pairPaletteSelect = document.getElementById("pairplot-palette-select");
  var pairPaletteToggle = document.getElementById("pair-palette-toggle");
  var pairPaletteOptions = document.getElementById("pair-palette-options");
  var pairColorHist = document.getElementById("pair-color-hist");
  var controlsCard = document.getElementById("pair-controls-card");
  var controlsSide = controlsCard ? controlsCard.closest(".cryo-dash-side") : null;
  var hasUmap = {{ has_umap | tojson }};
  var zdim = {{ zdim | int }};
  var pairplotObjectUrl = null;
  /**
   * When true, ignore naturalWidth/height so we size from pairplotFigAspect
   * (avoids stale intrinsics after src change).
   */
  var pairplotImgIntrinsicStale = false;
  var lastPayload = null;
  var placeholderCells = {{ skeleton_placeholder_cells | tojson }};
  var pairplotFigAspect = {{ pairplot_fig_aspect | tojson }};
  var pairplotMarginFracs = {{ pairplot_margin_fractions | tojson }};
  var activeCellLayout = placeholderCells;
  var saveDefaultName = {{ pairplot_save_default_name | tojson }};
  var saveDefaultDir = {{ pairplot_save_default_dir | tojson }};
  var saveBtn = document.getElementById("save-pairplot-png");
  var covariateDisplayMap = {{ covariate_display_map | tojson }};
  var legendContextUrl = "{{ url_for('api_covariate_legend_context') }}";

  function checkedVal(name) {
    var r = document.querySelector("input[name=\"" + name + "\"]:checked");
    return r ? r.value : null;
  }

  var pairPaletteMenu = CryoColorCovariateLegend.wirePaletteSelect({
    toggle: pairPaletteToggle,
    options: pairPaletteOptions,
    select: pairPaletteSelect,
    hiddenClass: "pairplot-palette-select--hidden-during-plot-render"
  });

  /** Pixel width of the discrete 2-col switch grid; drives continuous histogram column width. */
  var pairLegendMiddleWidthPx = null;

  /**
   * Legend column width: 77% × ((viewport width − left controls panel width)
   * − (viewport height − nav header height)), clamped so the plot column keeps room.
   */
  function syncPairplotTripleGridColumns() {
    var row = document.querySelector(".cryo-dash-page--pairplot .cryo-dash-row--plot-triple");
    var side = row && row.querySelector(":scope > .cryo-dash-side");
    var nav = document.querySelector("header.nav");
    if (!row || !side) return;
    var vw = document.documentElement.clientWidth || window.innerWidth || 0;
    var vh = window.innerHeight || document.documentElement.clientHeight || 0;
    if (vw < 320) return;
    var sideW = Math.max(0, Math.round(side.getBoundingClientRect().width));
    var headerH = nav ? Math.round(nav.getBoundingClientRect().height) : 0;
    var belowHeader = Math.max(0, vh - headerH);
    var raw = (vw - sideW) - belowHeader;
    var minLegend = 160;
    var legendW = Math.round(0.77 * raw);
    if (!isFinite(legendW) || legendW < minLegend) legendW = minLegend;
    var gapApprox = 32;
    var minPlot = 240;
    var maxLegend = Math.max(minLegend, vw - sideW - gapApprox - minPlot);
    if (legendW > maxLegend) legendW = maxLegend;
    row.style.gridTemplateColumns =
      "minmax(0," + sideW + "px) minmax(0,1fr) minmax(0," + legendW + "px)";
  }

  function syncPairDiscreteLegendTargetWidth() {
    var panelLegend = document.getElementById("pair-color-legend-panel");
    var viewportCol = document.querySelector(".cryo-dash-page--pairplot .pairplot-viewport-col");
    var disc = document.getElementById("pair-color-discrete-wrap");
    if (!panelLegend || !viewportCol) {
      return;
    }
    var showDiscrete =
      disc && !disc.hidden && disc.classList.contains("cryo-cc-discrete-wrap--show");
    if (showDiscrete) {
      var pw = viewportCol.getBoundingClientRect().width;
      if (pw > 1) {
        panelLegend.style.setProperty(
          "--cryo-discrete-legend-w",
          Math.max(1, Math.floor(pw * 0.9)) + "px"
        );
      }
    } else {
      panelLegend.style.removeProperty("--cryo-discrete-legend-w");
    }
  }

  function syncPairLegendMiddleWidth() {
    syncPairDiscreteLegendTargetWidth();
    var panel = document.getElementById("pair-color-legend-panel");
    var sw = document.getElementById("pair-color-discrete-switches");
    var disc = document.getElementById("pair-color-discrete-wrap");
    if (!panel || !sw) {
      return;
    }
    if (disc && !disc.hidden && disc.classList.contains("cryo-cc-discrete-wrap--show")) {
      var w = sw.offsetWidth;
      if (w > 0) {
        pairLegendMiddleWidthPx = w;
      }
    }
    if (pairLegendMiddleWidthPx != null && pairLegendMiddleWidthPx > 0) {
      panel.style.setProperty("--pair-legend-middle-w", pairLegendMiddleWidthPx + "px");
    } else {
      panel.style.removeProperty("--pair-legend-middle-w");
    }
    if (typeof pairColorLegend !== "undefined" && pairColorLegend) {
      if (typeof pairColorLegend.fitDiscreteSwitchColumnWidths === "function") {
        pairColorLegend.fitDiscreteSwitchColumnWidths();
      }
      if (typeof pairColorLegend.fitDiscreteLegendScrollRegion === "function") {
        pairColorLegend.fitDiscreteLegendScrollRegion();
      }
      if (typeof pairColorLegend.scheduleInvertTypographyFit === "function") {
        pairColorLegend.scheduleInvertTypographyFit();
      }
    }
  }

  function syncPairHistVerticalMetrics() {
    var histEl = pairColorHist;
    if (!histEl || !histEl.classList.contains("cryo-cc-hist--pair-vertical")) {
      return;
    }
    var panel = document.getElementById("pair-color-legend-panel");
    if (panel && (panel.hidden || panel.getAttribute("aria-hidden") === "true")) {
      return;
    }
    var wrap = document.getElementById("pair-color-continuous-wrap");
    if (!wrap || wrap.hidden) {
      return;
    }
    var vw = window.innerWidth || document.documentElement.clientWidth || 0;
    var vh = window.innerHeight || document.documentElement.clientHeight || 0;
    if (vw < 1 || vh < 1) {
      return;
    }
    histEl.style.maxWidth = "";
    var rect = histEl.getBoundingClientRect();
    var targetBottom = vh * 0.9;
    var padding = 6;
    var h = Math.floor(targetBottom - rect.top - padding);
    var minH = 120;
    if (h < minH) {
      h = minH;
    }
    var maxH = Math.floor(vh * 0.92);
    if (h > maxH) {
      h = maxH;
    }
    histEl.style.height = h + "px";
    histEl.style.minHeight = minH + "px";
    try {
      if (window.Plotly && histEl.data && histEl.data.length) {
        window.Plotly.Plots.resize(histEl);
      }
    } catch (e1) { /* ignore */ }
  }

  function syncPairContinuousHistogramLayout() {
    syncPairLegendMiddleWidth();
    syncPairHistVerticalMetrics();
  }

  // Store discrete color overrides for pair plot
  var pairDiscreteColorOverrides = {};

  var pairColorLegend = new CryoColorCovariateLegend({
    legendContextUrl: legendContextUrl,
    getDiscreteColorOverrides: function() { return pairDiscreteColorOverrides; },
    covariateDisplayMap: covariateDisplayMap,
    /** ``afterLayout`` / control handlers call ``draw()``; skip extra draws from ``refresh()`` completion. */
    notifyOnRefresh: false,
    getColorColumn: function() { return checkedVal("color_cov"); },
    getPaletteName: function() { return checkedVal("pairplot_palette") || "Viridis"; },
    panel: document.getElementById("pair-color-legend-panel"),
    continuousWrap: document.getElementById("pair-color-continuous-wrap"),
    discreteWrap: document.getElementById("pair-color-discrete-wrap"),
    histDiv: document.getElementById("pair-color-hist"),
    thresholdUseMax: document.getElementById("pair-color-threshold-use-max"),
    thresholdModeCaption: document.getElementById("pair-color-threshold-mode-caption"),
    thresholdStatus: document.getElementById("pair-color-threshold-status"),
    discreteSwitches: document.getElementById("pair-color-discrete-switches"),
    invertHeadingSlotEl: document.getElementById("pair-color-discrete-invert-slot"),
    invertHeadingRowEl: document.getElementById("pair-color-discrete-heading-row"),
    invertBtn: document.getElementById("pair-btn-discrete-invert"),
    discreteChipMatplotlibBlend: false,
    vertical: true,
    histPlotVertical: true,
    onContinuousHistogramLayout: syncPairContinuousHistogramLayout,
    onDiscreteLayout: syncPairLegendMiddleWidth,
    onDiscreteColorChange: function(evt) {
      if (evt && evt.catKey && evt.hex) {
        pairDiscreteColorOverrides[String(evt.catKey)] = String(evt.hex);
        draw();
      }
    },
    onFilterChange: function() {
      draw();
    }
  });

  function currentPayload() {
    var cf = pairColorLegend.getFilterForApi();
    var payload = {
      color_col: checkedVal("color_cov"),
      diagonal_emb: checkedVal("diag_emb") || (hasUmap ? "umap" : "pc"),
      upper_style: checkedVal("upper_style") || "scatter",
      palette: checkedVal("pairplot_palette") || "Viridis",
      color_filter: cf || null
    };
    // Include discrete color overrides if any exist
    var hasOverrides = false;
    for (var k in pairDiscreteColorOverrides) {
      if (Object.prototype.hasOwnProperty.call(pairDiscreteColorOverrides, k)) {
        hasOverrides = true;
        break;
      }
    }
    if (hasOverrides) {
      payload.discrete_label_colors = pairDiscreteColorOverrides;
    }
    return payload;
  }

  function syncPairplotEdgeLabels(cells) {
    var wrap = document.getElementById("pairplot-skel-edge-labels");
    if (!wrap || !cells || cells.length !== zdim * zdim) {
      return;
    }
    var m = pairplotMarginFracs;
    if (!m || typeof m.left_m !== "number") {
      return;
    }
    var eg = m.edge_gap;
    var rg = m.right_gap;
    var leftM = m.left_m;
    var topM = m.top_m;
    var bottomM = m.bottom_m;
    var rightAxes = m.right_axes;
    function cellAt(row, col) {
      return cells[row * zdim + col];
    }
    var parts = [];
    var j;
    var i;
    var c;
    var fx;
    var fy;
    for (j = 1; j < zdim; j++) {
      c = cellAt(0, j);
      fx = (c.x0 + c.x1) / 2;
      fy = topM + eg;
      parts.push({
        text: "zdim " + (j + 1),
        left_pct: fx * 100,
        top_pct: (1 - fy) * 100,
        transform: "translate(-50%, -100%)",
        origin: "center bottom"
      });
    }
    for (j = 0; j < zdim - 1; j++) {
      c = cellAt(zdim - 1, j);
      fx = (c.x0 + c.x1) / 2;
      fy = bottomM - eg;
      parts.push({
        text: "zdim " + (j + 1),
        left_pct: fx * 100,
        top_pct: (1 - fy) * 100,
        transform: "translate(-50%, 0)",
        origin: "center top"
      });
    }
    for (i = 0; i < zdim - 1; i++) {
      c = cellAt(i, zdim - 1);
      fy = (c.y0 + c.y1) / 2;
      fx = rightAxes + rg;
      parts.push({
        text: "zdim " + (i + 1),
        left_pct: fx * 100,
        top_pct: (1 - fy) * 100,
        transform: "translate(0, -50%) rotate(-90deg)",
        origin: "left center"
      });
    }
    for (i = 1; i < zdim; i++) {
      c = cellAt(i, 0);
      fy = (c.y0 + c.y1) / 2;
      fx = leftM - eg;
      parts.push({
        text: "zdim " + (i + 1),
        left_pct: fx * 100,
        top_pct: (1 - fy) * 100,
        transform: "translate(0, -50%) rotate(90deg)",
        origin: "right center"
      });
    }
    wrap.innerHTML = "";
    for (var p = 0; p < parts.length; p++) {
      var sp = document.createElement("span");
      sp.className = "pairplot-skel-edge-label";
      sp.setAttribute("aria-hidden", "true");
      var pr = parts[p];
      sp.style.left = pr.left_pct + "%";
      sp.style.top = pr.top_pct + "%";
      sp.style.transform = pr.transform;
      sp.style.transformOrigin = pr.origin;
      sp.textContent = pr.text;
      wrap.appendChild(sp);
    }
  }

  function applyCellLayout(cells, opts) {
    opts = opts || {};
    if (!cells || !cells.length) {
      return;
    }
    cells.forEach(function(c, idx) {
      var cell = skel.querySelector("[data-idx=\"" + idx + "\"]");
      if (!cell) {
        return;
      }
      var x0 = c.x0;
      var x1 = c.x1;
      var y0 = c.y0;
      var y1 = c.y1;
      cell.style.left = (x0 * 100) + "%";
      cell.style.width = ((x1 - x0) * 100) + "%";
      cell.style.top = ((1 - y1) * 100) + "%";
      cell.style.height = ((y1 - y0) * 100) + "%";
    });
    if (opts.edgeLabels === false) {
      var edgeWrap = document.getElementById("pairplot-skel-edge-labels");
      if (edgeWrap) {
        edgeWrap.innerHTML = "";
      }
    } else {
      syncPairplotEdgeLabels(cells);
    }
  }

  function gridVerticalInsetsFromCells(cells) {
    if (!cells || !cells.length) {
      return { top: 0, bottom: 0 };
    }
    var minTop = 1;
    var minBottom = 1;
    cells.forEach(function(c) {
      var topInset = 1 - c.y1;
      var bottomInset = c.y0;
      if (topInset < minTop) {
        minTop = topInset;
      }
      if (bottomInset < minBottom) {
        minBottom = bottomInset;
      }
    });
    if (!isFinite(minTop) || !isFinite(minBottom)) {
      return { top: 0, bottom: 0 };
    }
    return {
      top: Math.max(0, Math.min(1, minTop)),
      bottom: Math.max(0, Math.min(1, minBottom))
    };
  }

  function readCssLengthPx(elem, prop) {
    if (!elem) {
      return null;
    }
    var raw = window.getComputedStyle(elem)[prop];
    if (!raw || raw === "none") {
      return null;
    }
    var m = /^([\d.]+)px$/.exec(raw);
    if (!m) {
      return null;
    }
    var x = parseFloat(m[1]);
    return isFinite(x) && x > 0 ? x : null;
  }

  /**
   * Scale the pairplot PNG to use stack width and viewport height while keeping
   * aspect ratio (square cells in the figure stay square on screen).
   */
  function syncPairplotImgScale() {
    if (!el || !stack || !viewport) {
      return;
    }
    var maxW = stack.clientWidth;
    if (!maxW) {
      return;
    }
    var cssCap =
      readCssLengthPx(viewport, "maxHeight") ||
      readCssLengthPx(stack, "maxHeight") ||
      Math.min(window.innerHeight * 0.88, 1200);
    var palH = 0;
    var maxH = Math.max(160, cssCap - palH - 10);
    var nw;
    var nh;
    if (
      pairplotObjectUrl &&
      el.naturalWidth &&
      el.naturalHeight &&
      !pairplotImgIntrinsicStale
    ) {
      nw = el.naturalWidth;
      nh = el.naturalHeight;
    } else if (pairplotFigAspect && isFinite(pairplotFigAspect) && pairplotFigAspect > 0) {
      nh = 1000;
      nw = 1000 * pairplotFigAspect;
    } else {
      el.style.width = "";
      el.style.height = "";
      return;
    }
    var scale = Math.min(maxW / nw, maxH / nh);
    if (!isFinite(scale) || scale <= 0) {
      return;
    }
    el.style.width = Math.round(nw * scale) + "px";
    el.style.height = Math.round(nh * scale) + "px";
  }

  function syncSkeletonBounds() {
    syncPairLegendMiddleWidth();
    syncPairHistVerticalMetrics();
    if (!stack || !skel || !el) {
      return;
    }
    syncPairplotImgScale();
    var stackRect = stack.getBoundingClientRect();
    if (!stackRect.width || !stackRect.height) {
      return;
    }
    var imgRect = el.getBoundingClientRect();
    var useImgRect = imgRect.width > 0 && imgRect.height > 0;
    var left = 0;
    var top = 0;
    var width = stackRect.width;
    var height = stackRect.height;
    if (useImgRect) {
      left = imgRect.left - stackRect.left;
      top = imgRect.top - stackRect.top;
      width = imgRect.width;
      height = imgRect.height;
    }
    skel.style.left = left + "px";
    skel.style.top = top + "px";
    skel.style.width = width + "px";
    skel.style.height = height + "px";
  }

  function syncControlsAlignment(cells) {
    if (!controlsCard || !controlsSide || !el) {
      return;
    }
    var minGapPx = 8;
    var insets = gridVerticalInsetsFromCells(cells || placeholderCells);
    var imgRect = el.getBoundingClientRect();
    var sideRect = controlsSide.getBoundingClientRect();
    if (!imgRect || imgRect.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 plotCenterGlobal = imgRect.top + imgRect.height * (insets.top + (1 - insets.top - insets.bottom) * 0.5);
    var plotCenterLocal = plotCenterGlobal - sideRect.top;
    var desiredTop = plotCenterLocal - cardHalf;
    var px = Math.max(minGapPx, desiredTop - baseTop);
    controlsCard.style.marginTop = Math.round(px) + "px";
  }

  function discreteLabelColorsSig(p) {
    var d = (p && p.discrete_label_colors) || {};
    if (!d || typeof d !== "object") {
      return "";
    }
    var ks = Object.keys(d).sort();
    var parts = [];
    var ki;
    for (ki = 0; ki < ks.length; ki++) {
      parts.push(ks[ki] + "=" + String(d[ks[ki]]));
    }
    return parts.join("|");
  }

  function dirtyIndices(prev, cur) {
    if (!prev) {
      var all = [];
      for (var t = 0; t < zdim * zdim; t++) {
        all.push(t);
      }
      return all;
    }
    var palPrev = prev.palette || "Viridis";
    var palCur = cur.palette || "Viridis";
    var cfPrev = JSON.stringify(prev.color_filter != null ? prev.color_filter : null);
    var cfCur = JSON.stringify(cur.color_filter != null ? cur.color_filter : null);
    if (cfPrev !== cfCur) {
      var allF = [];
      for (var tf = 0; tf < zdim * zdim; tf++) {
        allF.push(tf);
      }
      return allF;
    }
    if (discreteLabelColorsSig(prev) !== discreteLabelColorsSig(cur)) {
      var allD = [];
      for (var td = 0; td < zdim * zdim; td++) {
        allD.push(td);
      }
      return allD;
    }
    if (
      prev.color_col === cur.color_col
      && prev.diagonal_emb === cur.diagonal_emb
      && prev.upper_style === cur.upper_style
      && palPrev === palCur
    ) {
      return [];
    }
    if (palPrev !== palCur) {
      var allPal = [];
      for (var tp = 0; tp < zdim * zdim; tp++) {
        allPal.push(tp);
      }
      return allPal;
    }
    var s = new Set();
    if (prev.color_col !== cur.color_col) {
      for (var i = 0; i < zdim; i++) {
        for (var j = 0; j < zdim; j++) {
          if (i > j) {
            s.add(i * zdim + j);
          }
        }
      }
    }
    if (prev.diagonal_emb !== cur.diagonal_emb) {
      for (var k = 0; k < zdim; k++) {
        s.add(k * zdim + k);
      }
    }
    if (prev.upper_style !== cur.upper_style) {
      for (var ii = 0; ii < zdim; ii++) {
        for (var jj = 0; jj < zdim; jj++) {
          if (ii < jj) {
            s.add(ii * zdim + jj);
          }
        }
      }
    }
    return Array.from(s);
  }

  function applyBusy(indices) {
    var busy = new Set(indices);
    skel.querySelectorAll(".pairplot-skel-cell").forEach(function(cell) {
      var idx = parseInt(cell.getAttribute("data-idx"), 10);
      var on = busy.has(idx);
      cell.classList.toggle("pairplot-skel-cell--busy", on);
    });
  }

  function setPairLoading(on, opts) {
    opts = opts || {};
    var keepImageVisible = !!opts.keepImageVisible;
    /** First PNG load: no grid skeleton — only the full-stack overlay message. */
    var simpleInitialLoad = on && !keepImageVisible;
    viewport.setAttribute("aria-busy", on ? "true" : "false");
    /** PNG already includes axis labels — drop any HTML copies before showing skeleton on top. */
    if (on && keepImageVisible) {
      var edgeLabEarly = document.getElementById("pairplot-skel-edge-labels");
      if (edgeLabEarly) {
        edgeLabEarly.innerHTML = "";
      }
    }
    skel.classList.toggle("pairplot-skeleton--show", on && !simpleInitialLoad);
    if (!on) {
      applyBusy([]);
    }
    if (renderOverlay) {
      if (simpleInitialLoad) {
        renderOverlay.classList.remove("cryo-plot-rendering-overlay--nonblocking");
        renderOverlay.classList.add("cryo-plot-rendering-overlay--show");
        renderOverlay.setAttribute("aria-hidden", "false");
      } else if (on && keepImageVisible) {
        renderOverlay.classList.add("cryo-plot-rendering-overlay--nonblocking");
        renderOverlay.classList.add("cryo-plot-rendering-overlay--show");
        renderOverlay.setAttribute("aria-hidden", "false");
      } else {
        renderOverlay.classList.remove("cryo-plot-rendering-overlay--show");
        renderOverlay.classList.remove("cryo-plot-rendering-overlay--nonblocking");
        renderOverlay.setAttribute("aria-hidden", "true");
      }
    }
    if (on) {
      if (!keepImageVisible) {
        el.classList.remove("pairplot-img--ready");
      }
    } else {
      el.classList.add("pairplot-img--ready");
    }
    if (pairPaletteSelect) {
      pairPaletteSelect.classList.toggle("pairplot-palette-select--hidden-during-plot-render", on);
    }
    if (!on) pairPaletteMenu.close();
  }

  applyCellLayout(placeholderCells);
  syncSkeletonBounds();
  syncControlsAlignment(placeholderCells);

  function draw() {
    var colorCol = checkedVal("color_cov");
    if (!colorCol || colorCol === "none") {
      status.textContent = "Pick a color covariate.";
      setPairLoading(false);
      lastPayload = null;
      if (pairplotObjectUrl) {
        URL.revokeObjectURL(pairplotObjectUrl);
        pairplotObjectUrl = null;
      }
      pairplotImgIntrinsicStale = false;
      el.removeAttribute("src");
      el.style.width = "";
      el.style.height = "";
      el.classList.remove("pairplot-img--ready");
      syncSkeletonBounds();
      syncControlsAlignment(placeholderCells);
      return;
    }
    var payload = currentPayload();
    status.textContent = "";
    var dirty = dirtyIndices(lastPayload, payload);
    if (dirty.length === 0) {
      return;
    }
    var hasRenderableImg = !!(pairplotObjectUrl && el.complete && el.naturalWidth > 0);
    if (hasRenderableImg) {
      applyBusy(dirty);
    } else {
      applyBusy([]);
    }
    setPairLoading(true, {
      keepImageVisible: hasRenderableImg
    });
    syncSkeletonBounds();
    syncControlsAlignment(activeCellLayout);
    var prevUrl = pairplotObjectUrl;
    /** PNG already has Matplotlib axis labels — skip HTML duplicates during incremental refresh. */
    var skipHtmlEdgeLabels = hasRenderableImg;
    requestAnimationFrame(function() {
      requestAnimationFrame(function() {
        fetch("{{ url_for('api_pairplot') }}", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(payload)
        })
          .then(function(r) {
            return r.text().then(function(text) {
              var data;
              try {
                data = JSON.parse(text);
              } catch (parseErr) {
                throw new Error(
                  r.ok
                    ? "Invalid JSON from server."
                    : "Server error (non-JSON — check terminal / logs)."
                );
              }
              if (!r.ok) {
                throw new Error((data && data.error) || r.statusText || "Request failed");
              }
              if (!data.png_b64 || !data.cells) {
                throw new Error("Invalid pairplot response.");
              }
              return data;
            });
          })
          .then(function(data) {
            applyCellLayout(data.cells, {
              edgeLabels: !skipHtmlEdgeLabels
            });
            activeCellLayout = data.cells;
            syncControlsAlignment(data.cells);
            syncPairplotImgScale();
            syncSkeletonBounds();
            var bin = atob(data.png_b64);
            var bytes = new Uint8Array(bin.length);
            for (var b = 0; b < bin.length; b++) {
              bytes[b] = bin.charCodeAt(b);
            }
            var blob = new Blob([bytes], { type: "image/png" });
            var nextUrl = URL.createObjectURL(blob);
            pairplotObjectUrl = nextUrl;
            pairplotImgIntrinsicStale = true;
            el.onload = function() {
              if (prevUrl) {
                URL.revokeObjectURL(prevUrl);
              }
              el.onload = null;
              pairplotImgIntrinsicStale = false;
              lastPayload = payload;
              setPairLoading(false);
              syncPairplotImgScale();
              syncSkeletonBounds();
              syncControlsAlignment(data.cells);
              el.classList.add("pairplot-img--ready");
            };
            el.onerror = function() {
              el.onerror = null;
              el.onload = null;
              URL.revokeObjectURL(nextUrl);
              pairplotObjectUrl = prevUrl || null;
              pairplotImgIntrinsicStale = false;
              setPairLoading(false);
              status.textContent = "Image failed to load.";
            };
            el.src = nextUrl;
            syncPairplotImgScale();
            syncSkeletonBounds();
            syncControlsAlignment(data.cells);
            /* Do not call ``onload`` from ``complete``/``naturalWidth`` here — right after a new
               ``blob:`` ``src`` those fields can still describe the *previous* image, so a manual
               ``onload`` runs too early: ``lastPayload`` updates while the bitmap is stale, and the
               next discrete toggle can look like a no-op (``dirtyIndices`` thinks nothing changed). */
          })
          .catch(function(e) {
            setPairLoading(false);
            status.textContent = e.message || "Failed.";
          });
      });
    });
  }

  document.querySelectorAll("input[name=\"color_cov\"]").forEach(function(inp) {
    inp.addEventListener("change", function() {
      pairDiscreteColorOverrides = {};
      pairColorLegend.refresh({
        afterLayout: function() {
          draw();
        }
      });
    });
  });
  document.querySelectorAll(".cryo-dash-controls input[type=radio]").forEach(function(inp) {
    if (inp.name === "color_cov") {
      return;
    }
    inp.addEventListener("change", draw);
  });
  document.querySelectorAll("#pairplot-palette-select input[name=\"pairplot_palette\"]").forEach(function(inp) {
    inp.addEventListener("change", function() {
      pairColorLegend.refreshHistogramColors();
      draw();
    });
  });
  if (saveBtn) {
    saveBtn.addEventListener("click", function() {
      var payload = currentPayload();
      if (!payload.color_col || payload.color_col === "none") {
        status.textContent = "Pick a color covariate before saving.";
        return;
      }
      var entered = window.prompt(
        "PNG filename (saved under: " + saveDefaultDir + ")",
        saveDefaultName
      );
      if (entered === null) return;
      var filename = String(entered).trim() || saveDefaultName;
      saveBtn.disabled = true;
      status.textContent = "Saving PNG…";
      var saveBody = {
        color_col: payload.color_col,
        diagonal_emb: payload.diagonal_emb,
        upper_style: payload.upper_style,
        palette: payload.palette || "Viridis",
        color_filter: payload.color_filter || null,
        filename: filename
      };
      if (payload.discrete_label_colors) {
        saveBody.discrete_label_colors = payload.discrete_label_colors;
      }
      fetch("{{ url_for('api_save_pairplot_png') }}", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(saveBody)
      })
        .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 && res.j.error) ? res.j.error : "Save failed.";
            return;
          }
          status.textContent = "Saved PNG to " + res.j.path;
        })
        .catch(function(err) {
          status.textContent = (err && err.message) ? err.message : "Save failed.";
        })
        .finally(function() {
          saveBtn.disabled = false;
        });
    });
  }
  window.addEventListener("resize", syncSkeletonBounds);
  window.addEventListener("resize", function() {
    syncPairplotTripleGridColumns();
    syncPairLegendMiddleWidth();
    syncControlsAlignment(activeCellLayout);
  });
  if (window.CryoResizeObserverUtils) {
    var pairTripleRow = document.querySelector(
      ".cryo-dash-page--pairplot .cryo-dash-row--plot-triple"
    );
    window.CryoResizeObserverUtils.observeResize(
      [stack, el, pairTripleRow],
      function() {
        syncPairplotTripleGridColumns();
        syncPairLegendMiddleWidth();
        syncSkeletonBounds();
        syncControlsAlignment(activeCellLayout);
      }
    );
  }
  requestAnimationFrame(function() {
    requestAnimationFrame(function() {
      syncPairplotTripleGridColumns();
      syncPairLegendMiddleWidth();
    });
  });
  pairColorLegend.refresh({
    afterLayout: function() {
      if (checkedVal("color_cov") && checkedVal("color_cov") !== "none") {
        draw();
      }
    }
  });
})();
</script>
</div>
{% endblock %}