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

compare: highlight mismatched N/T/J/s params in red between the two panels

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-22 14:37:04 -06:00
parent c9868ff83e
commit 41ce5ee88a
4 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -365,12 +365,39 @@ function renderError(panelEl, stem, msg) {
panelEl.querySelector('[data-role="params"]').textContent = '(error)';
}
const PARAM_FIELDS = [
{ key: 'num_points', prefix: 'N' },
{ key: 'num_timesteps', prefix: 'T' },
{ key: 'jitter_scale', prefix: 'J' },
{ key: 'seed', prefix: 's' },
];
function renderHeader(panelEl, data) {
const m = data.meta || {};
panelEl.querySelector('[data-role="embedder"]').textContent = m.embedder || '—';
panelEl.querySelector('[data-role="generator"]').textContent = m.generator || '—';
const terse = `N${m.num_points ?? '?'} / T${m.num_timesteps ?? '?'} / J${m.jitter_scale ?? '?'} / s${m.seed ?? '?'}`;
panelEl.querySelector('[data-role="params"]').textContent = terse;
const host = panelEl.querySelector('[data-role="params"]');
host.textContent = '';
PARAM_FIELDS.forEach(({ key, prefix }, i) => {
if (i > 0) host.appendChild(document.createTextNode(' / '));
const span = document.createElement('span');
span.className = 'param';
span.dataset.key = key;
span.textContent = `${prefix}${m[key] ?? '?'}`;
host.appendChild(span);
});
}
// Toggle .diff on each param span where the two panels disagree.
function markParamDiffs(metaA, metaB) {
if (!metaA || !metaB) return;
for (const { key } of PARAM_FIELDS) {
const differs = metaA[key] !== metaB[key];
for (const panelEl of [panelElA, panelElB]) {
const span = panelEl.querySelector(`[data-role="params"] .param[data-key="${key}"]`);
if (span) span.classList.toggle('diff', differs);
}
}
}
// -------- main ------------------------------------------------------------
@ -411,6 +438,8 @@ async function main() {
renderError(panelElB, STEM_B, resB.reason?.message || String(resB.reason));
}
if (panels.a && panels.b) markParamDiffs(panels.a.data.meta, panels.b.data.meta);
// Nothing loaded — no animation loop to start.
if (!panels.a && !panels.b) return;

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

@ -1527,6 +1527,10 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
font-size: 0.74rem;
flex-basis: 100%;
}
.compare-panel-head .panel-params .param.diff {
color: var(--alarm);
font-weight: 600;
}
.compare-panel-head .panel-stem {
margin-left: auto;

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

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook &middot; compare</title>
<link rel="stylesheet" href="/static/style.css?v=23" />
<link rel="stylesheet" href="/static/style.css?v=24" />
<script type="importmap">
{
"imports": {
@ -111,6 +111,6 @@
</section>
<script src="/static/theme.js?v=11"></script>
<script type="module" src="/static/compare.js?v=3"></script>
<script type="module" src="/static/compare.js?v=4"></script>
</body>
</html>

2
app/web/templates/index.html
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=23" />
<link rel="stylesheet" href="/static/style.css?v=24" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script type="importmap">
{