fix: show perfusions as "terminal surgery"

Author: dbirman

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

@@ -114,6 +114,18 @@ describe('parseProcedure', () => {
     expect(ev.details).toContain('Brain injection');
   });
 
+  it('labels surgery as Terminal Surgery when perfusion is present', () => {
+    const ev = parseProcedure({
+      object_type: 'Surgery',
+      start_date: '2025-03-01',
+      procedures: [
+        { object_type: 'Perfusion' },
+      ],
+    });
+    expect(ev.type).toBe('Surgery');
+    expect(ev.event).toBe('Terminal Surgery');
+  });
+
   it('uses end_date when provided', () => {
     const ev = parseProcedure({
       object_type: 'Headframe',

web/src/__tests__/subject-view-dom.test.js

@@ -100,6 +100,40 @@ describe('createSubjectView — timeline click', () => {
     expect(bubbles[0].classList.contains('tl-bubble--selected')).toBe(false);
     expect(bubbles[1].classList.contains('tl-bubble--selected')).toBe(true);
   });
+
+  it('shows Terminal Surgery label when surgery contains perfusion', async () => {
+    queryDocDb.mockResolvedValue([
+      {
+        ...MINIMAL_RECORD('42', 'my-asset_42'),
+        procedures: {
+          subject_procedures: [
+            {
+              object_type: 'Surgery',
+              start_date: '2024-01-02',
+              procedures: [{ object_type: 'Perfusion' }],
+            },
+          ],
+          specimen_procedures: [],
+        },
+      },
+    ]);
+
+    const view = createSubjectView({ subjectId: '42' });
+    document.body.appendChild(view);
+    await flushPromises();
+
+    const labels = [...view.querySelectorAll('.tl-bubble-type')].map((el) => el.textContent);
+    expect(labels).toContain('Terminal Surgery');
+
+    const surgeryBubble = [...view.querySelectorAll('.tl-bubble')].find((el) =>
+      el.querySelector('.tl-bubble-type')?.textContent === 'Terminal Surgery'
+    );
+    expect(surgeryBubble).toBeDefined();
+
+    surgeryBubble.click();
+    const heading = view.querySelector('.subject-detail-container .detail-card h4');
+    expect(heading?.textContent).toBe('Terminal Surgery');
+  });
 });
 
 describe('organizeSubjectData — unique procedures', () => {

web/src/subject/details.js

@@ -232,6 +232,7 @@ function createTabWidget(tabs) {
 
 function buildSurgeryOverviewHtml(event) {
   const { start, details, data = {} } = event;
+  const title = event.event === 'Terminal Surgery' ? 'Terminal Surgery' : 'Surgery Overview';
   const anaes = data.anaesthesia;
   const extra = [
     anaes
@@ -252,7 +253,7 @@ function buildSurgeryOverviewHtml(event) {
   ].join('');
   return `
     <div class="detail-card">
-      <h4>Surgery Overview</h4>
+      <h4>${title}</h4>
       <dl>
         <dt>Date</dt><dd>${fmtDate(start)}</dd>
         <dt>Procedures</dt><dd>${details ?? ''}</dd>

web/src/subject/parsers.js

@@ -113,15 +113,19 @@ export function parseProcedure(proc) {
     : new Date(start.getTime() + NO_END_DATE_DURATION_MS);
 
   let detailStr;
+  let eventLabel = procType;
   if (procType === 'Surgery') {
     const subProcs = (proc.procedures ?? []).filter(Boolean);
     const parts = subProcs.map((sp) => sp.object_type ?? 'Unknown');
+    if (subProcs.some((sp) => sp?.object_type === 'Perfusion')) {
+      eventLabel = 'Terminal Surgery';
+    }
     detailStr = parts.length ? parts.join(', ') : 'Surgery';
   } else {
     detailStr = procType;
   }
 
-  return { start, end, event: procType, type: procType, details: detailStr, data: proc, dateOnly: true };
+  return { start, end, event: eventLabel, type: procType, details: detailStr, data: proc, dateOnly: true };
 }
 
 /**

web/src/subject/timeline.js

@@ -199,7 +199,7 @@ export function createSubjectTimeline(events, opts = {}) {
 
     const typeEl = document.createElement('span');
     typeEl.className = 'tl-bubble-type';
-    typeEl.textContent = ev.type;
+    typeEl.textContent = ev.type === 'Surgery' ? (ev.event ?? ev.type) : ev.type;
 
     const dateEl = document.createElement('span');
     dateEl.className = 'tl-bubble-date';