44de8deeeb
- panel-grid.js (new): exports mountPanels({host, controls, stems}) → {destroy}.
Moved createPanel + shared control wiring + linked-hover + pad-to-match
time mapping out of compare.js. Stem-count-agnostic; works for 1, 2, or N.
- Panel DOM is cloned from <template id=compare-panel-tpl> on each page.
- compare.js is now a ~10-line shim: parse ?a=&b=, call mountPanels.
- Per-panel color is viridis-sampled by index/N (middle viridis for N=1,
ends-of-palette for N=2, linear lerp for N≤8, cycle at N≥9). Set as
--panel-color on the panel element; CSS reads it for tag/time-seg.
- Homepage <dialog id=run-modal> + run-modal.js hijack the 'embedding' link
(plain click → modal; meta/ctrl/middle-click still opens plotly HTML).
Dialog close disposes every panel's renderer/geometry/material.
- .compare-grid → repeat(auto-fit, minmax(360px, 1fr)) handles N=1..many,
replaces the <900px one-column media rule.
- Runs list: relabel Prefect's 'Late' state as 'Queued' — more honest
description of what the runner is doing at the concurrency cap.
107 lines
3.6 KiB
HTML
107 lines
3.6 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=28" />
|
|
<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"
|
|
data-stem-a="{{ stem_a }}" data-stem-b="{{ stem_b }}">
|
|
|
|
<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="independent" selected>independent</option>
|
|
<option value="locked">locked</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=11"></script>
|
|
</body>
|
|
</html>
|