feat: materialize modality metadata

Author: dbirman

web/src/__tests__/subject-parsers.test.js

@@ -142,7 +142,7 @@ describe('parseAcquisition', () => {
     });
     expect(ev.type).toBe('Acquisition');
     expect(ev.event).toContain('Ephys');
-    expect(ev.details).toContain('4.0');
+    expect(Array.isArray(ev.modalities)).toBe(true);
   });
 
   it('includes protocol in label when present', () => {

web/src/subject/details.js

@@ -16,7 +16,7 @@ import {
 } from './parsers.js';
 import { createBrainVizCanvas } from './brain-viz.js';
 import { createBrainViz3D } from './brain-viz-3d.js';
-import { buildQcLink, buildMetadataLink, buildCoLink } from '../assets/view.js';
+import { buildQcLink, buildMetadataLink, buildCoLink, buildS3ConsoleUrl } from '../assets/view.js';
 
 // ---------------------------------------------------------------------------
 // Pure HTML-string builders (Node-testable)
@@ -60,13 +60,15 @@ export function buildBirthDetail(event) {
  * @returns {string}
  */
 export function buildAcquisitionDetail(event) {
-  const { start, end, event: label, details, data = {} } = event;
+  const { start, end, event: label, modalities, data = {} } = event;
   const durationHrs = start && end ? ((end - start) / 3_600_000).toFixed(2) : 'N/A';
   const assetName = data._assetName ?? null;
   const qcHref = buildQcLink(assetName);
   const metaHref = buildMetadataLink(assetName);
   const coHref = buildCoLink(data._codeOcean ?? null);
+  const s3Href = buildS3ConsoleUrl(data._location ?? null);
   const linkParts = [
+    s3Href ? `<a href="${s3Href}" target="_blank" rel="noopener noreferrer">S3</a>` : '',
     coHref ? `<a href="${coHref}" target="_blank" rel="noopener noreferrer">Code Ocean</a>` : '',
     metaHref ? `<a href="${metaHref}" target="_blank" rel="noopener noreferrer">Metadata</a>` : '',
     qcHref ? `<a href="${qcHref}" target="_blank" rel="noopener noreferrer">QC Portal</a>` : '',
@@ -81,6 +83,7 @@ export function buildAcquisitionDetail(event) {
     data.reward_consumed_total != null
       ? `<dt>Reward consumed</dt><dd>${data.reward_consumed_total} ${data.reward_consumed_unit ?? ''}</dd>`
       : '',
+    modalities?.length ? `<dt>Modalities</dt><dd>${modalities.join(', ')}</dd>` : '',
     linkParts ? `<dt>Links</dt><dd>${linkParts}</dd>` : '',
   ].join('');
   return `
@@ -90,7 +93,6 @@ export function buildAcquisitionDetail(event) {
         <dt>Start</dt><dd>${fmtDateTime(start)}</dd>
         <dt>End</dt><dd>${fmtDateTime(end)}</dd>
         <dt>Duration</dt><dd>${durationHrs} hours</dd>
-        <dt>Details</dt><dd>${details ?? ''}</dd>
         ${extra}
       </dl>
     </div>`;

web/src/subject/parsers.js

@@ -141,12 +141,16 @@ export function parseAcquisition(acquisition) {
   const label = protocol ? `${acqType} (${protocol})` : acqType;
   const durationHrs = (end - start) / 3_600_000;
 
+  const modalities = (acquisition._modalities ?? [])
+    .map((m) => m.abbreviation ?? m.name)
+    .filter(Boolean);
+
   return {
     start,
     end,
     event: label,
     type: 'Acquisition',
-    details: `Duration: ${durationHrs.toFixed(1)} hours`,
+    modalities,
     data: acquisition,
   };
 }

web/src/subject/timeline.js

@@ -220,6 +220,13 @@ export function createSubjectTimeline(events, opts = {}) {
     bubble.appendChild(typeEl);
     bubble.appendChild(dateEl);
 
+    if (ev.type === 'Acquisition' && ev.modalities?.length) {
+      const modEl = document.createElement('span');
+      modEl.className = 'tl-bubble-modalities';
+      modEl.textContent = ev.modalities.join(', ');
+      bubble.appendChild(modEl);
+    }
+
     bubble.addEventListener('click', () => {
       if (selectedBubble) selectedBubble.classList.remove('tl-bubble--selected');
       bubble.classList.add('tl-bubble--selected');

web/src/subject/view.js

@@ -120,7 +120,7 @@ export function organizeSubjectData(records, subjectId) {
       rec.acquisition?.acquisition_start_time &&
       rec.data_description?.data_level !== 'derived'
     ) {
-      bundle.acquisitions.push({ ...rec.acquisition, _assetName: rec.name ?? '' });
+      bundle.acquisitions.push({ ...rec.acquisition, _assetName: rec.name ?? '', _modalities: rec.data_description?.modalities ?? [] });
     }
   }
 
@@ -294,7 +294,6 @@ async function _loadSubject(contentEl, subjectId, coordinator, signal) {
           assetsTableEl.querySelectorAll('tr[data-asset-name]').forEach((r) => {
             const isTarget = targetName && r.dataset.assetName === targetName;
             r.classList.toggle('asset-highlighted', isTarget);
-            if (isTarget) r.scrollIntoView({ block: 'nearest' });
           });
         }
       },
@@ -310,8 +309,21 @@ async function _loadSubject(contentEl, subjectId, coordinator, signal) {
 
     // Async: fetch DuckDB asset data (projects + grouped assets table)
     if (coordinator) {
-      _fetchAndRenderAssets(coordinator, subjectId, infoEl, assetsSection, bundle.subject).then((tableEl) => {
+      _fetchAndRenderAssets(coordinator, subjectId, infoEl, assetsSection, bundle.subject).then(({ tableEl, assets }) => {
         assetsTableEl = tableEl;
+        // Enrich acquisition event data with S3 location and Code Ocean from DuckDB
+        if (assets?.length) {
+          const assetByName = new Map(assets.map((a) => [a.name, a]));
+          for (const ev of events) {
+            if (ev.type === 'Acquisition' && ev.data?._assetName) {
+              const asset = assetByName.get(ev.data._assetName);
+              if (asset) {
+                ev.data._codeOcean = asset.code_ocean ?? null;
+                ev.data._location = asset.location ?? null;
+              }
+            }
+          }
+        }
       }).catch((err) => {
         console.error('[SubjectView] Asset fetch failed:', err);
         assetsSection.innerHTML = `<h3>Assets</h3><p class="error-banner">Failed to load assets: ${err.message}</p>`;
@@ -388,7 +400,7 @@ async function _fetchAndRenderAssets(coordinator, subjectId, infoEl, assetsSecti
   assetsSection.innerHTML = '<h3>Assets</h3>';
   const tableEl = _buildAssetsTable(assets, sourceMap);
   assetsSection.appendChild(tableEl);
-  return tableEl;
+  return { tableEl, assets };
 }
 
 function _buildAssetsTable(assets, sourceMap) {