modal: hide axes dropdown for single-panel runs

Disable #cc-sync in panel-grid when there's only one stem (nothing to
sync; aspect is fixed by the dialog) and hide any .compare-controls
label whose select is disabled via :has.
This commit is contained in:
Michael Pilosov 2026-04-22 17:23:51 -06:00
parent d70eff3704
commit 4ecdc7f586
6 changed files with 11 additions and 5 deletions

View File

@ -1,7 +1,7 @@
// compare.js — thin shim that parses ?stem=…&stem=… (legacy ?a=&b=) and
// hands off to panel-grid.js.
import { mountPanels } from './panel-grid.js?v=5';
import { mountPanels } from './panel-grid.js?v=6';
const params = new URLSearchParams(window.location.search);
let stems = params.getAll('stem').filter(Boolean);

View File

@ -567,6 +567,9 @@ export function mountPanels({ host, controls, stems }) {
// Reset controls to a clean state (they may be reused across opens).
if (scrub) scrub.value = '0';
if (playBtn) { playBtn.textContent = '▶'; playBtn.setAttribute('aria-label', 'play'); }
// Axes dropdown is meaningless for a single-panel view (nothing to lock
// against; aspect is fixed by the modal dialog's own sizing).
if (syncSel) syncSel.disabled = total < 2;
// Parallel fetch; each panel's error is independent.
const ready = Promise.allSettled(stems.map(fetchFrames)).then((results) => {

View File

@ -1,7 +1,7 @@
// run-modal.js — homepage click-hijack for embedding links. Opens a
// <dialog id="run-modal"> that renders the run's embedding via panel-grid.js.
import { mountPanels } from './panel-grid.js?v=5';
import { mountPanels } from './panel-grid.js?v=6';
const dialog = document.getElementById('run-modal');
const host = document.getElementById('modal-panel-host');

View File

@ -1695,6 +1695,9 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
align-items: center;
gap: 0.35rem;
}
/* Hide a wrap entirely when its select is disabled (e.g., axes on a
single-panel modal view). */
.compare-controls label:has(select:disabled) { display: none; }
.compare-controls .cc-lbl {
color: var(--faint);
text-transform: lowercase;

View File

@ -102,7 +102,7 @@
</template>
<script src="/static/theme.js?v=11"></script>
<script type="module" src="/static/compare.js?v=17"></script>
<script type="module" src="/static/compare.js?v=18"></script>
<!-- panel-grid.js is imported by compare.js (module); versioned via compare.js cache-bust -->
</body>

View File

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook</title>
<link rel="stylesheet" href="/static/style.css?v=36" />
<link rel="stylesheet" href="/static/style.css?v=37" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script type="importmap">
{
@ -498,7 +498,7 @@
<script type="module" src="/static/metrics.js?v=11"></script>
<script src="/static/compare-select.js?v=2"></script>
<script src="/static/runs-filter.js?v=3"></script>
<script type="module" src="/static/run-modal.js?v=2"></script>
<script type="module" src="/static/run-modal.js?v=3"></script>
<script>
// Anchor-links alone don't expand <details>; force it.
document.querySelector('a[href="#metrics"]')?.addEventListener('click', () => {