mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modal: hide axes dropdown for single-panel runs

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/static/compare.js
View File

@ -1,7 +1,7 @@
// compare.js — thin shim that parses ?stem=…&stem=… (legacy ?a=&b=) and // compare.js — thin shim that parses ?stem=…&stem=… (legacy ?a=&b=) and
// hands off to panel-grid.js. // 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); const params = new URLSearchParams(window.location.search);
let stems = params.getAll('stem').filter(Boolean); let stems = params.getAll('stem').filter(Boolean);

3
app/web/static/panel-grid.js
View File

@ -567,6 +567,9 @@ export function mountPanels({ host, controls, stems }) {
// Reset controls to a clean state (they may be reused across opens). // Reset controls to a clean state (they may be reused across opens).
if (scrub) scrub.value = '0'; if (scrub) scrub.value = '0';
if (playBtn) { playBtn.textContent = '▶'; playBtn.setAttribute('aria-label', 'play'); } 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. // Parallel fetch; each panel's error is independent.
const ready = Promise.allSettled(stems.map(fetchFrames)).then((results) => { const ready = Promise.allSettled(stems.map(fetchFrames)).then((results) => {

2
app/web/static/run-modal.js
View File

@ -1,7 +1,7 @@
// run-modal.js — homepage click-hijack for embedding links. Opens a // 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. // <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 dialog = document.getElementById('run-modal');
const host = document.getElementById('modal-panel-host'); const host = document.getElementById('modal-panel-host');

3
app/web/static/style.css
View File

@ -1695,6 +1695,9 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
align-items: center; align-items: center;
gap: 0.35rem; 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 { .compare-controls .cc-lbl {
color: var(--faint); color: var(--faint);
text-transform: lowercase; text-transform: lowercase;

2
app/web/templates/compare.html
View File

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

4
app/web/templates/index.html
View File

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