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

runs: subtle 'clear' button next to compare selected

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-22 18:04:24 -06:00
parent 59a6bece2e
commit ba7eef9df0
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/web/static/compare-select.js
View File

@ -8,6 +8,7 @@
const selected = new Set(); const selected = new Set();
const btn = document.getElementById('compare-btn'); const btn = document.getElementById('compare-btn');
const clearBtn = document.getElementById('compare-clear');
const countEl = document.getElementById('compare-count'); const countEl = document.getElementById('compare-count');
const slot = document.getElementById('runs-slot'); const slot = document.getElementById('runs-slot');
if (!btn || !countEl || !slot) return; if (!btn || !countEl || !slot) return;
@ -16,6 +17,7 @@
const n = selected.size; const n = selected.size;
countEl.textContent = `(${n}/${MAX})`; countEl.textContent = `(${n}/${MAX})`;
btn.disabled = n < MIN || n > MAX; btn.disabled = n < MIN || n > MAX;
if (clearBtn) clearBtn.hidden = n === 0;
} }
function applyToDOM() { function applyToDOM() {
@ -58,5 +60,10 @@
window.open(`/compare?${qs}`, '_blank', 'noopener'); window.open(`/compare?${qs}`, '_blank', 'noopener');
}); });
if (clearBtn) clearBtn.addEventListener('click', () => {
selected.clear();
applyToDOM();
});
applyToDOM(); applyToDOM();
})(); })();

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

@ -513,6 +513,18 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
font-size: 0.76rem; font-size: 0.76rem;
font-style: italic; font-style: italic;
} }
.compare-bar .compare-clear {
background: transparent;
border: 0;
color: var(--faint);
font: inherit;
font-size: 0.72rem;
padding: 0 0.2rem;
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
.compare-bar .compare-clear:hover { color: var(--alarm); }
.runs-filter { .runs-filter {
display: flex; display: flex;

5
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=37" /> <link rel="stylesheet" href="/static/style.css?v=38" />
<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">
{ {
@ -305,6 +305,7 @@
<button type="button" id="compare-btn" disabled> <button type="button" id="compare-btn" disabled>
compare selected <span id="compare-count">(0/8)</span> compare selected <span id="compare-count">(0/8)</span>
</button> </button>
<button type="button" id="compare-clear" class="compare-clear" hidden aria-label="clear selection">clear</button>
<span class="compare-hint muted">pick 2&ndash;8 embeddings &rarr; side-by-side animation in a new tab</span> <span class="compare-hint muted">pick 2&ndash;8 embeddings &rarr; side-by-side animation in a new tab</span>
</div> </div>
@ -500,7 +501,7 @@
<script src="/static/theme.js?v=11"></script> <script src="/static/theme.js?v=11"></script>
<script type="module" src="/static/dataset-picker.js?v=11"></script> <script type="module" src="/static/dataset-picker.js?v=11"></script>
<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=3"></script> <script src="/static/compare-select.js?v=4"></script>
<script src="/static/runs-filter.js?v=6"></script> <script src="/static/runs-filter.js?v=6"></script>
<script type="module" src="/static/run-modal.js?v=3"></script> <script type="module" src="/static/run-modal.js?v=3"></script>
<script> <script>