Show experimental metadata above the video in the picker

Each video row now carries a `metadata` dict aggregated from the
merged TSV: species, memory (STM/LTM), training_length_hr,
consolidation_length_hr, age, training/testing date-time, and
trained/naive fly counts. The UI renders these as a row of key:value
pills above the video, with the session role (training/testing)
colour-coded so the analyst can see at a glance what they're picking.

The merged TSV currently has duplicate rows per (date, machine, ROI);
the aggregator de-dups on those keys so counts aren't doubled. (The
duplication itself should be cleaned up upstream.)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-01 12:54:40 +01:00
parent 1a7542def2
commit 4ed988a617
2 changed files with 100 additions and 0 deletions

View file

@ -13,6 +13,14 @@
#status { font-family: ui-monospace, "SF Mono", monospace; font-size: 0.85rem;
color: #9aa; }
#info { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #cce; }
#meta { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem;
font-size: 0.85rem; color: #aab; max-width: 1400px; width: 100%;
justify-content: center; }
#meta .pair { font-family: ui-monospace, monospace; }
#meta .pair .k { color: #678; }
#meta .pair .v { color: #def; margin-left: 0.25rem; }
#meta .role-training { color: #cd6 !important; }
#meta .role-testing { color: #6cd !important; }
main { display: flex; flex-direction: column; align-items: center; padding: 1rem; }
video { width: 100%; max-width: 1400px; height: auto; background: #000;
border-radius: 4px; }
@ -52,6 +60,7 @@
</header>
<main>
<div id="meta"></div>
<video id="player" controls preload="auto"></video>
<div id="controls">
<button class="primary" data-mode="all">All barriers open <kbd>1</kbd></button>
@ -77,6 +86,7 @@
<script>
const player = document.getElementById('player');
const info = document.getElementById('info');
const meta = document.getElementById('meta');
const progress = document.getElementById('progress');
const flash = document.getElementById('flash');
@ -94,6 +104,33 @@
progress.textContent = `${done}/${queue.length} done`;
}
function renderMeta(m) {
meta.innerHTML = '';
if (!m) return;
const fields = [
['role', m.session_role,
m.session_role === 'training' ? 'role-training'
: m.session_role === 'testing' ? 'role-testing' : ''],
['species', m.species],
['memory', m.memory],
['training (hr)', m.training_length_hr],
['consol. (hr)', m.consolidation_length_hr],
['age (d)', m.age],
['flies', (m.n_trained || m.n_naive)
? `${m.n_trained || 0} trained · ${m.n_naive || 0} naive`
: null],
['training time', m.training_date_time],
['testing time', m.testing_date_time],
];
for (const [label, value, cls] of fields) {
if (value === undefined || value === null || value === '') continue;
const span = document.createElement('span');
span.className = 'pair';
span.innerHTML = `<span class="k">${label}:</span><span class="v ${cls||''}">${value}</span>`;
meta.appendChild(span);
}
}
function loadCursor() {
if (queue.length === 0) {
info.textContent = 'queue empty';
@ -105,6 +142,7 @@
`[${cursor + 1}/${queue.length}] ${item.machine_name} ${item.session_date} ${item.session_time} ` +
(item.duration_s ? `(${(item.duration_s/60).toFixed(1)} min)` : '') +
(item.done ? ' — already done' : '');
renderMeta(item.metadata);
player.src = `/api/video/${item.idx}`;
player.load();
}