d70eff3704
- Add N and T axes alongside dataset/algorithm; chips populated from runs in the list, axis group hidden when there's a single unique value. - Dataset+algorithm on row 1, N+T on row 2 via two explicit .runs-filter-row flex containers (cleaner than a sentinel break elem that double-counted the row-gap). - 'all' and 'none' meta-chips now wrap as a unit inside .chip-meta-wrap so one doesn't orphan to the next line. - Row is hidden entirely when every axis in it collapses to a single value (:has selector on .runs-filter-row).
110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>embedding notebook · compare</title>
|
|
<link rel="stylesheet" href="/static/style.css?v=36" />
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
|
|
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='%231f4e5f'/%3E%3C/svg%3E" />
|
|
<script>
|
|
(function(){try{
|
|
var t=localStorage.getItem('theme');
|
|
if(!t)t=matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';
|
|
document.documentElement.setAttribute('data-theme',t);
|
|
}catch(e){}})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="masthead">
|
|
<div>
|
|
<h1 class="title">embedding notebook <em>— compare</em></h1>
|
|
</div>
|
|
<div class="meta">
|
|
<a href="/" class="masthead-link">← runs</a>
|
|
<button type="button" class="theme-toggle" id="theme-toggle" aria-label="toggle theme">◐</button>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="compare-layout" id="compare-layout">
|
|
|
|
<div class="compare-controls" id="compare-controls">
|
|
<button type="button" class="cc-play" id="cc-play" aria-label="play / pause">▶</button>
|
|
|
|
<input class="cc-scrub" id="cc-scrub" type="range"
|
|
min="0" max="1000" step="1" value="0" aria-label="time scrubber" />
|
|
|
|
<div class="cc-time" id="cc-times"></div>
|
|
|
|
<label class="cc-speed-wrap">
|
|
<span class="cc-lbl">speed</span>
|
|
<select class="cc-speed" id="cc-speed">
|
|
<option value="0.5">0.5×</option>
|
|
<option value="1" selected>1×</option>
|
|
<option value="2">2×</option>
|
|
<option value="4">4×</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-motion-wrap">
|
|
<span class="cc-lbl">motion</span>
|
|
<select class="cc-motion" id="cc-motion">
|
|
<option value="smooth" selected>smooth</option>
|
|
<option value="step">step</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-color-wrap">
|
|
<span class="cc-lbl">color</span>
|
|
<select class="cc-color" id="cc-color">
|
|
<option value="mono">mono</option>
|
|
<option value="original" selected>original</option>
|
|
</select>
|
|
</label>
|
|
|
|
<label class="cc-sync-wrap">
|
|
<span class="cc-lbl">axes</span>
|
|
<select class="cc-sync" id="cc-sync">
|
|
<option value="scaled-1x1">scaled · 1:1</option>
|
|
<option value="scaled-3x2" selected>scaled · 3:2</option>
|
|
<option value="locked-1x1">locked · 1:1</option>
|
|
<option value="locked-3x2">locked · 3:2</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="compare-grid" id="panel-host"></div>
|
|
|
|
</section>
|
|
|
|
<template id="compare-panel-tpl">
|
|
<article class="compare-panel">
|
|
<header class="compare-panel-head">
|
|
<span class="panel-tag" data-role="label">●</span>
|
|
<span class="panel-embedder" data-role="embedder">…</span>
|
|
<span class="panel-sep">·</span>
|
|
<span class="panel-generator" data-role="generator">…</span>
|
|
<a class="panel-stem" data-role="stem-link" href="#" target="_blank">↗</a>
|
|
<span class="panel-params" data-role="params">loading…</span>
|
|
</header>
|
|
<div class="compare-canvas" data-role="canvas">
|
|
<div class="compare-status" data-role="status">loading…</div>
|
|
</div>
|
|
</article>
|
|
</template>
|
|
|
|
<script src="/static/theme.js?v=11"></script>
|
|
<script type="module" src="/static/compare.js?v=17"></script>
|
|
<!-- panel-grid.js is imported by compare.js (module); versioned via compare.js cache-bust -->
|
|
|
|
</body>
|
|
</html>
|