Loading...
)}
+
+ {debugSliceScores && isZHeld ? (
+
+
+ ) : null}
);
@@ -400,6 +565,9 @@ interface CornerstoneImageProps {
imageFilter: string;
imageTransform: string;
alt: string;
+
+ /** Called after Cornerstone actually displays the requested image. */
+ onDisplayedContentKey?: (contentKey: string) => void;
}
function DelayedSpinnerOverlay({ delayMs = 150 }: { delayMs?: number }) {
@@ -435,7 +603,14 @@ function ErrorOverlay({ message }: { message: string }) {
);
}
-function CornerstoneImage({ imageId, contentKey, imageFilter, imageTransform, alt }: CornerstoneImageProps) {
+function CornerstoneImage({
+ imageId,
+ contentKey,
+ imageFilter,
+ imageTransform,
+ alt,
+ onDisplayedContentKey,
+}: CornerstoneImageProps) {
const elementRef = useRef
+
+ SSIM: {sliceScore ? sliceScore.ssim.toFixed(6) : '—'}
+ LNCC: {sliceScore ? sliceScore.lncc.toFixed(6) : '—'}
+ ZNCC: {sliceScore ? sliceScore.zncc.toFixed(6) : '—'}
+ NGF: {sliceScore ? sliceScore.ngf.toFixed(6) : '—'}
+ Census: {sliceScore ? sliceScore.census.toFixed(6) : '—'}
+ MIND: {sliceScore && sliceScore.mind != null ? sliceScore.mind.toFixed(6) : '—'}
+ Phase: {sliceScore && sliceScore.phase != null ? sliceScore.phase.toFixed(6) : '—'}
+ MI: {sliceScore ? sliceScore.mi.toFixed(6) : '—'}
+ NMI: {sliceScore ? sliceScore.nmi.toFixed(6) : '—'}
+ Score: {sliceScore ? sliceScore.score.toFixed(6) : '—'}
+ {
+ // Prevent the browser context menu while drawing.
+ if (!enabled) return;
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >
+ {/* UI chrome */}
+ {/*
+ Position below the viewer's top hover controls (Tumor/GT buttons + ImageControls).
+ Otherwise it visually overlaps the control bar in GridView/OverlayView.
+ */}
+
+ );
+}
diff --git a/frontend/src/components/HelpModal.tsx b/frontend/src/components/HelpModal.tsx
index 757d744..7d65f28 100644
--- a/frontend/src/components/HelpModal.tsx
+++ b/frontend/src/components/HelpModal.tsx
@@ -41,7 +41,10 @@ export function HelpModal({ onClose }: HelpModalProps) {
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {savedPolygon ? (
+
+ ) : null}
+
+
+ {/* Error / status */}
+ {error ? (
+
+ {error}
+
+ ) : !isClosed ? (
+
+ Click to add points. Click the first point (or press Enter) to close.
+
+ ) : (
+
+ Polygon closed. Save to persist.
+
+ )}
+
+ {/* Saved polygon */}
+ {savedPath ? (
+
+ ) : null}
+
+ {/* Draft polyline (during drawing) */}
+ {!isClosed && draftPointsDisplay.length > 0 ? (
+
+ ) : null}
+
+ {/* Draft closed polygon */}
+ {draftPath ? (
+
+ ) : null}
+
+ {/* Vertex handles */}
+ {draftPointsDisplay.length > 0 ? (
+
+ ) : null}
+ Viewing
- - Scroll anywhere in the center pane to navigate slices. + Scroll over an image to zoom. + +
- + Scroll elsewhere in the center pane to navigate slices.
-
Click on an image to center that point.
@@ -80,11 +83,13 @@ export function HelpModal({ onClose }: HelpModalProps) {
- - on any image (Grid or Overlay) to define an exclusion region, then click - the button that appears. + on any image (Grid or Overlay), then choose an action: + (use the rectangle as an exclusion region) or (start a + tumor segmentation from that rectangle).
- - The exclusion region tells the algorithm to ignore that area (e.g. a tumor) when matching slices. + For alignment, the exclusion region tells the algorithm to ignore that area (e.g. a tumor) when matching + slices.
-
Press Esc or the button to clear the selection.
diff --git a/frontend/src/components/Svr3DView.tsx b/frontend/src/components/Svr3DView.tsx
new file mode 100644
index 0000000..3c5b364
--- /dev/null
+++ b/frontend/src/components/Svr3DView.tsx
@@ -0,0 +1,1104 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import cornerstone from 'cornerstone-core';
+import { getDB } from '../db/db';
+import type { DicomInstance } from '../db/schema';
+import type { ComparisonData } from '../types/api';
+import type { SvrParams, SvrRoi, SvrRoiPlane, SvrSelectedSeries } from '../types/svr';
+import { formatSequenceLabel } from '../utils/clinicalData';
+import { DEFAULT_SVR_PARAMS } from '../types/svr';
+import { useSvrReconstruction } from '../hooks/useSvrReconstruction';
+import { getSortedSopInstanceUidsForSeries } from '../utils/localApi';
+import type { SliceGeometry } from '../utils/svr/dicomGeometry';
+import { getSliceGeometryFromInstance } from '../utils/svr/dicomGeometry';
+import { resample2dAreaAverage } from '../utils/svr/resample2d';
+import { SvrVolume3DViewer } from './SvrVolume3DViewer';
+
+function sortedDatesDesc(dates: string[]): string[] {
+ return [...dates].sort((a, b) => b.localeCompare(a));
+}
+
+function formatSeriesLabel(seq: { plane: string | null; weight: string | null; sequence: string | null }): string {
+ const base = formatSequenceLabel(seq);
+ return [seq.plane, base].filter(Boolean).join(' ') || 'Unknown';
+}
+
+function sequenceGroupKey(seq: { weight: string | null; sequence: string | null }): string {
+ return `${seq.weight ?? ''}|||${seq.sequence ?? ''}`;
+}
+
+
+type RoiRect01 = {
+ x0: number;
+ y0: number;
+ x1: number;
+ y1: number;
+};
+
+function clamp01(x: number): number {
+ return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+
+function normalizeRect01(rect: RoiRect01): { left: number; right: number; top: number; bottom: number } {
+ return {
+ left: Math.min(rect.x0, rect.x1),
+ right: Math.max(rect.x0, rect.x1),
+ top: Math.min(rect.y0, rect.y1),
+ bottom: Math.max(rect.y0, rect.y1),
+ };
+}
+
+function clampInt(x: number, min: number, max: number): number {
+ if (!Number.isFinite(x)) return min;
+ const xi = Math.round(x);
+ return xi < min ? min : xi > max ? max : xi;
+}
+
+function inferRoiPlaneFromNormalDir(normalDir: SliceGeometry['normalDir']): SvrRoiPlane {
+ const ax = Math.abs(normalDir.x);
+ const ay = Math.abs(normalDir.y);
+ const az = Math.abs(normalDir.z);
+
+ // DICOM patient/world axes: X=left-right, Y=posterior-anterior, Z=foot-head.
+ // Normal mostly along Z => axial slices.
+ if (az >= ax && az >= ay) return 'axial';
+ if (ay >= ax && ay >= az) return 'coronal';
+ return 'sagittal';
+}
+
+function computeCubeRoiFromDicomRect01(params: {
+ rect: RoiRect01;
+ geom: SliceGeometry;
+ sourceSeriesUid: string;
+}): SvrRoi | null {
+ const { rect, geom, sourceSeriesUid } = params;
+
+ const r = normalizeRect01(rect);
+ const w01 = r.right - r.left;
+ const h01 = r.bottom - r.top;
+ if (w01 <= 1e-4 || h01 <= 1e-4) return null;
+
+ const rMax = Math.max(0, geom.rows - 1);
+ const cMax = Math.max(0, geom.cols - 1);
+
+ // Pixel-space center.
+ const rowCenter = (r.top + r.bottom) * 0.5 * rMax;
+ const colCenter = (r.left + r.right) * 0.5 * cMax;
+
+ // World center using the same mapping used by the reconstruction:
+ // world(r,c) = IPP + colDir*(r*rowSpacing) + rowDir*(c*colSpacing)
+ const cx =
+ geom.ippMm.x + geom.colDir.x * (rowCenter * geom.rowSpacingMm) + geom.rowDir.x * (colCenter * geom.colSpacingMm);
+ const cy =
+ geom.ippMm.y + geom.colDir.y * (rowCenter * geom.rowSpacingMm) + geom.rowDir.y * (colCenter * geom.colSpacingMm);
+ const cz =
+ geom.ippMm.z + geom.colDir.z * (rowCenter * geom.rowSpacingMm) + geom.rowDir.z * (colCenter * geom.colSpacingMm);
+
+ // In-plane box extents in mm.
+ const widthMm = w01 * cMax * geom.colSpacingMm;
+ const heightMm = h01 * rMax * geom.rowSpacingMm;
+
+ // Expand to a cube (equal extents along X/Y/Z) for simplicity.
+ const sideMm = Math.max(widthMm, heightMm);
+ if (!(sideMm > 1e-6)) return null;
+
+ const half = sideMm * 0.5;
+ return {
+ mode: 'cube',
+ sourcePlane: inferRoiPlaneFromNormalDir(geom.normalDir),
+ sourceSeriesUid,
+ boundsMm: {
+ min: [cx - half, cy - half, cz - half],
+ max: [cx + half, cy + half, cz + half],
+ },
+ };
+}
+
+function computeDownsampleSize(rows: number, cols: number, maxSize: number): { dsRows: number; dsCols: number } {
+ const maxDim = Math.max(rows, cols);
+ if (!Number.isFinite(maxSize) || maxSize <= 1) {
+ return { dsRows: Math.max(1, rows), dsCols: Math.max(1, cols) };
+ }
+
+ const scale = maxDim > maxSize ? maxSize / maxDim : 1;
+ return {
+ dsRows: Math.max(1, Math.round(rows * scale)),
+ dsCols: Math.max(1, Math.round(cols * scale)),
+ };
+}
+
+function drawDicomPixelDataToCanvas(params: {
+ canvas: HTMLCanvasElement;
+ pixelData: ArrayLike
; + rows: number; + cols: number; + maxSize: number; + slope?: number; + intercept?: number; +}): void { + const { canvas, pixelData, rows, cols, maxSize } = params; + const slope = typeof params.slope === 'number' ? params.slope : 1; + const intercept = typeof params.intercept === 'number' ? params.intercept : 0; + + const { dsRows, dsCols } = computeDownsampleSize(rows, cols, maxSize); + + // Higher-fidelity downsampling (box/area average) to reduce aliasing in the ROI preview. + const down = resample2dAreaAverage(pixelData, rows, cols, dsRows, dsCols); + + // Apply modality scaling when available. (Linear, so applying post-downsample is equivalent.) + if (slope !== 1 || intercept !== 0) { + for (let i = 0; i < down.length; i++) { + down[i] = down[i] * slope + intercept; + } + } + + if (canvas.width !== dsCols) canvas.width = dsCols; + if (canvas.height !== dsRows) canvas.height = dsRows; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + // Robust windowing (percentiles) is less sensitive to background/outliers than raw min/max. + const finite: number[] = []; + for (let i = 0; i < down.length; i++) { + const v = down[i]; + if (Number.isFinite(v)) finite.push(v); + } + + finite.sort((a, b) => a - b); + + const quantileSorted = (sorted: number[], q: number): number => { + const n = sorted.length; + if (n === 0) return 0; + const qq = q < 0 ? 0 : q > 1 ? 1 : q; + const idx = qq * (n - 1); + const i0 = Math.floor(idx); + const i1 = Math.min(n - 1, i0 + 1); + const t = idx - i0; + const a = sorted[i0] ?? 0; + const b = sorted[i1] ?? a; + return a + (b - a) * t; + }; + + let lo = quantileSorted(finite, 0.01); + let hi = quantileSorted(finite, 0.99); + + if (!(hi > lo + 1e-12)) { + lo = finite[0] ?? 0; + hi = finite[finite.length - 1] ?? lo + 1; + } + + const invRange = hi > lo + 1e-12 ? 1 / (hi - lo) : 0; + + const img = ctx.createImageData(dsCols, dsRows); + const out = img.data; + + for (let i = 0; i < down.length; i++) { + const v = down[i]; + const n = Number.isFinite(v) && invRange > 0 ? (v - lo) * invRange : 0; + const b = Math.round(clamp01(n) * 255); + + const idx = i * 4; + out[idx] = b; + out[idx + 1] = b; + out[idx + 2] = b; + out[idx + 3] = 255; + } + + ctx.putImageData(img, 0, 0); +} + +export function DicomRoiSlicePreview(props: { + slice: { sopInstanceUid: string; geom: SliceGeometry } | null; + sourceSeriesUid: string | null; + maxSize: number; + roiRect: RoiRect01 | null; + setRoiRect: (next: RoiRect01 | null) => void; + roiDragRef: { current: { x0: number; y0: number } | null }; + onSliceDelta: (delta: number) => void; + onRoiFinalized: (roi: SvrRoi | null) => void; + disabled?: boolean; +}) { + const { slice, sourceSeriesUid, maxSize, roiRect, setRoiRect, roiDragRef, onSliceDelta, onRoiFinalized, disabled } = props; + + const rect = roiRect ? normalizeRect01(roiRect) : null; + + const canvasRef = useRef (null); + const [renderError, setRenderError] = useState (null); + + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + setRenderError(null); + + if (!slice) { + // Clear canvas. + const ctx = canvas.getContext('2d'); + if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height); + return; + } + + let alive = true; + + const run = async () => { + try { + const imageId = `miradb:${slice.sopInstanceUid}`; + const image = await cornerstone.loadImage(imageId); + + const getPixelData = (image as unknown as { getPixelData?: () => ArrayLike }).getPixelData; + if (typeof getPixelData !== 'function') { + throw new Error('Cornerstone image did not expose getPixelData()'); + } + + const pixelData = getPixelData.call(image); + + if (!alive) return; + + const slope = typeof (image as unknown as { slope?: unknown }).slope === 'number' ? (image as unknown as { slope: number }).slope : 1; + const intercept = + typeof (image as unknown as { intercept?: unknown }).intercept === 'number' ? (image as unknown as { intercept: number }).intercept : 0; + + drawDicomPixelDataToCanvas({ + canvas, + pixelData, + rows: slice.geom.rows, + cols: slice.geom.cols, + maxSize, + slope, + intercept, + }); + } catch (e) { + const msg = e instanceof Error ? e.message : String(e); + if (!alive) return; + setRenderError(msg); + } + }; + + void run(); + + return () => { + alive = false; + }; + }, [maxSize, slice]); + + const wheelAccumRef = useRef(0); + const wheelTargetRef = useRef (null); + useEffect(() => { + const el = wheelTargetRef.current; + if (!el) return; + + const onWheel = (e: WheelEvent) => { + if (disabled) return; + if (!Number.isFinite(e.deltaY) || e.deltaY === 0) return; + + // Trackpads generate many small deltas; accumulate and step in whole slices. + wheelAccumRef.current += e.deltaY; + + const stepPx = 60; + while (Math.abs(wheelAccumRef.current) >= stepPx) { + const dir = wheelAccumRef.current > 0 ? 1 : -1; + wheelAccumRef.current -= dir * stepPx; + + // Convention: wheel down (deltaY>0) => next slice. + onSliceDelta(dir); + } + + e.preventDefault(); + e.stopPropagation(); + }; + + el.addEventListener('wheel', onWheel, { passive: false }); + return () => el.removeEventListener('wheel', onWheel); + }, [disabled, onSliceDelta]); + + const aspect = slice ? { w: slice.geom.cols, h: slice.geom.rows } : { w: 1, h: 1 }; + + return ( + +{alignmentProgress.phase !== 'capturing' && alignmentProgress.slicesChecked ? (+ + + {rect ? ( + + ) : null} + + {renderError ? ( ++ ); +} + +const lastRoiPreviewSliceIndexBySeriesUid = new Map+ {renderError} ++ ) : !slice ? ( ++ Select a series to preview an input slice. ++ ) : null} + +{ + if (disabled || !slice || !sourceSeriesUid) return; + const box = e.currentTarget.getBoundingClientRect(); + const x = clamp01((e.clientX - box.left) / box.width); + const y = clamp01((e.clientY - box.top) / box.height); + + roiDragRef.current = { x0: x, y0: y }; + setRoiRect({ x0: x, y0: y, x1: x, y1: y }); + onRoiFinalized(null); + + e.currentTarget.setPointerCapture(e.pointerId); + e.preventDefault(); + e.stopPropagation(); + }} + onPointerMove={(e) => { + const drag = roiDragRef.current; + if (disabled || !slice || !drag) return; + + const box = e.currentTarget.getBoundingClientRect(); + const x = clamp01((e.clientX - box.left) / box.width); + const y = clamp01((e.clientY - box.top) / box.height); + + setRoiRect({ x0: drag.x0, y0: drag.y0, x1: x, y1: y }); + e.preventDefault(); + e.stopPropagation(); + }} + onPointerUp={(e) => { + const drag = roiDragRef.current; + roiDragRef.current = null; + + if (!drag || !slice || !sourceSeriesUid) { + e.preventDefault(); + e.stopPropagation(); + return; + } + + const box = e.currentTarget.getBoundingClientRect(); + const x = clamp01((e.clientX - box.left) / box.width); + const y = clamp01((e.clientY - box.top) / box.height); + + const finalRect: RoiRect01 = { x0: drag.x0, y0: drag.y0, x1: x, y1: y }; + setRoiRect(finalRect); + + const roi = computeCubeRoiFromDicomRect01({ rect: finalRect, geom: slice.geom, sourceSeriesUid }); + onRoiFinalized(roi); + + e.preventDefault(); + e.stopPropagation(); + }} + onPointerCancel={(e) => { + roiDragRef.current = null; + e.preventDefault(); + e.stopPropagation(); + }} + /> ++ ++ Input slice + {roiRect ? Box : null} ++(() => ({ + ...DEFAULT_SVR_PARAMS, + sliceDownsampleMode: 'voxel-aware', + seriesRegistrationMode: 'roi-rigid', + })); + const [generationCollapsed, setGenerationCollapsed] = useState(false); + + const [sliceInspectorPortalTarget, setSliceInspectorPortalTarget] = useState (null); + const sliceInspectorPortalRef = useCallback((el: HTMLElement | null) => { + setSliceInspectorPortalTarget(el); + }, []); + + const { isRunning, progress, result, error, run, cancel, clear } = useSvrReconstruction(); + + const sequenceGroupsForDate = useMemo(() => { + if (!dateIso) return []; + + const byKey = new Map< + string, + { + label: string; + weight: string | null; + sequence: string | null; + series: SvrSelectedSeries[]; + planeSet: Set ; + sliceCount: number; + } + >(); + + for (const seq of data.sequences) { + const ref = data.series_map[seq.id]?.[dateIso]; + if (!ref) continue; + + const seqLabel = formatSequenceLabel(seq); + if (seqLabel === 'Unknown') continue; + + const key = sequenceGroupKey(seq); + let g = byKey.get(key); + if (!g) { + g = { + label: seqLabel, + weight: seq.weight, + sequence: seq.sequence, + series: [], + planeSet: new Set (), + sliceCount: 0, + }; + byKey.set(key, g); + } + + g.series.push({ + seriesUid: ref.series_uid, + studyId: ref.study_id, + dateIso, + instanceCount: ref.instance_count, + label: formatSeriesLabel(seq), + plane: seq.plane, + weight: seq.weight, + sequence: seq.sequence, + }); + + g.planeSet.add(seq.plane || 'Unknown'); + g.sliceCount += ref.instance_count; + } + + const out = Array.from(byKey, ([key, g]) => { + // Keep stable ordering within a group: plane, then label. + g.series.sort((a, b) => { + const pa = a.plane || ''; + const pb = b.plane || ''; + if (pa !== pb) return pa.localeCompare(pb); + return a.label.localeCompare(b.label); + }); + + return { + key, + label: g.label, + weight: g.weight, + sequence: g.sequence, + series: g.series, + planeCount: g.planeSet.size, + sliceCount: g.sliceCount, + }; + }); + + out.sort((a, b) => a.label.localeCompare(b.label)); + return out; + }, [data.sequences, data.series_map, dateIso]); + + const defaultSelectedSequenceKey = useMemo(() => { + if (!dateIso) return null; + + const fallback = sequenceGroupsForDate[0]?.key ?? null; + if (!defaultSeqId) return fallback; + + const currentSeq = data.sequences.find((s) => s.id === defaultSeqId); + if (!currentSeq) return fallback; + + if (formatSequenceLabel(currentSeq) === 'Unknown') return fallback; + + const key = sequenceGroupKey(currentSeq); + return sequenceGroupsForDate.some((g) => g.key === key) ? key : fallback; + }, [data.sequences, dateIso, defaultSeqId, sequenceGroupsForDate]); + + const [selectedSequenceKey, setSelectedSequenceKey] = useState (defaultSelectedSequenceKey); + + useEffect(() => { + setSelectedSequenceKey(defaultSelectedSequenceKey); + }, [defaultSelectedSequenceKey]); + + const selectedGroup = useMemo(() => { + if (!selectedSequenceKey) return null; + return sequenceGroupsForDate.find((g) => g.key === selectedSequenceKey) ?? null; + }, [selectedSequenceKey, sequenceGroupsForDate]); + + const selectedSeries = useMemo(() => selectedGroup?.series ?? [], [selectedGroup]); + + // ROI-first flow: pick a ROI on an input slice, then run SVR restricted to that cube. + const [roiSeriesUid, setRoiSeriesUid] = useState (null); + + const preferredRoiSeriesUid = useMemo(() => { + if (!defaultSeqId) return null; + const seq = data.sequences.find((s) => s.id === defaultSeqId); + if (!seq) return null; + + // Prefer the same plane the user was looking at in the comparison grid/overlay. + const match = selectedSeries.find((s) => (s.plane ?? null) === (seq.plane ?? null)); + return match?.seriesUid ?? null; + }, [data.sequences, defaultSeqId, selectedSeries]); + + const effectiveRoiSeriesUid = useMemo(() => { + if (roiSeriesUid && selectedSeries.some((s) => s.seriesUid === roiSeriesUid)) { + return roiSeriesUid; + } + return preferredRoiSeriesUid ?? selectedSeries[0]?.seriesUid ?? null; + }, [preferredRoiSeriesUid, roiSeriesUid, selectedSeries]); + + const roiSeries = useMemo(() => { + if (!effectiveRoiSeriesUid) return null; + return selectedSeries.find((s) => s.seriesUid === effectiveRoiSeriesUid) ?? null; + }, [effectiveRoiSeriesUid, selectedSeries]); + + const [roiSeriesSopUids, setRoiSeriesSopUids] = useState (null); + + // Use -1 as a sentinel meaning "auto (middle slice)". + const [roiSliceIndex, setRoiSliceIndex] = useState(-1); + + const [roiSliceGeom, setRoiSliceGeom] = useState (null); + const [roiSliceGeomError, setRoiSliceGeomError] = useState (null); + + // Keep a stable preview slice so we don't clear the canvas between fast slice changes. + const [roiPreviewSliceStable, setRoiPreviewSliceStable] = useState<{ sopInstanceUid: string; geom: SliceGeometry } | null>( + null, + ); + + const [roiRect, setRoiRect] = useState (null); + const roiDragRef = useRef<{ x0: number; y0: number } | null>(null); + + // Keep fallback slice inputs in refs so ROI-series effects don't retrigger on every slice tick. + const fallbackRoiSeriesUidRef = useRef (fallbackRoiSeriesUid); + const fallbackRoiSliceIndexRef = useRef (fallbackRoiSliceIndex); + useEffect(() => { + fallbackRoiSeriesUidRef.current = fallbackRoiSeriesUid; + fallbackRoiSliceIndexRef.current = fallbackRoiSliceIndex; + }, [fallbackRoiSeriesUid, fallbackRoiSliceIndex]); + + // Canonical ROI used for reconstruction (stays valid even if the user scrolls away from the selection slice). + const [roiWorld, setRoiWorld] = useState (null); + + // Date is controlled by the surrounding UI (Dates sidebar). When it changes, clear local selection/ROI/run results. + const prevDateIsoRef = useRef (dateIso); + useEffect(() => { + if (prevDateIsoRef.current === dateIso) return; + prevDateIsoRef.current = dateIso; + + setRoiSeriesUid(null); + setRoiRect(null); + roiDragRef.current = null; + setRoiWorld(null); + setRoiPreviewSliceStable(null); + + clear(); + }, [clear, dateIso]); + + useEffect(() => { + setRoiSeriesSopUids(null); + setRoiSeriesSopUidsError(null); + + // Slice selection priority: + // 1) The last slice the user viewed in the SVR ROI preview for this series. + // 2) The last slice the user viewed in the grid/overlay views (if it matches this series). + // 3) Default to the middle slice. + const saved = effectiveRoiSeriesUid ? lastRoiPreviewSliceIndexBySeriesUid.get(effectiveRoiSeriesUid) : undefined; + + let nextSliceIndex = -1; + if (typeof saved === 'number' && Number.isFinite(saved)) { + nextSliceIndex = Math.round(saved); + } else { + const fallbackSeries = fallbackRoiSeriesUidRef.current; + const fallbackSlice = fallbackRoiSliceIndexRef.current; + + if ( + effectiveRoiSeriesUid && + fallbackSeries && + effectiveRoiSeriesUid === fallbackSeries && + typeof fallbackSlice === 'number' && + Number.isFinite(fallbackSlice) + ) { + nextSliceIndex = Math.round(fallbackSlice); + } + } + + setRoiSliceIndex(nextSliceIndex); + setRoiSliceGeom(null); + setRoiSliceGeomError(null); + + setRoiRect(null); + roiDragRef.current = null; + setRoiWorld(null); + setRoiPreviewSliceStable(null); + + if (!effectiveRoiSeriesUid) return; + + let alive = true; + const run = async () => { + try { + const uids = await getSortedSopInstanceUidsForSeries(effectiveRoiSeriesUid); + if (!alive) return; + setRoiSeriesSopUids(uids); + } catch (e) { + const msg = e instanceof Error ? e.message : String(e); + if (!alive) return; + setRoiSeriesSopUidsError(msg); + } + }; + + void run(); + return () => { + alive = false; + }; + }, [effectiveRoiSeriesUid]); + + // Persist explicit slice selection (>=0) so leaving/re-entering SVR preserves ROI preview position. + const roiSeriesCount = roiSeriesSopUids?.length ?? 0; + useEffect(() => { + if (!effectiveRoiSeriesUid) return; + if (roiSliceIndex < 0) return; + + const idx = roiSeriesCount > 0 ? clampInt(roiSliceIndex, 0, roiSeriesCount - 1) : roiSliceIndex; + lastRoiPreviewSliceIndexBySeriesUid.set(effectiveRoiSeriesUid, idx); + }, [effectiveRoiSeriesUid, roiSeriesCount, roiSliceIndex]); + + const effectiveRoiSliceIndex = useMemo(() => { + if (roiSeriesCount <= 0) return 0; + + const dflt = Math.floor(roiSeriesCount / 2); + return roiSliceIndex >= 0 ? clampInt(roiSliceIndex, 0, roiSeriesCount - 1) : dflt; + }, [roiSeriesCount, roiSliceIndex]); + + const roiSopInstanceUid = roiSeriesSopUids ? (roiSeriesSopUids[effectiveRoiSliceIndex] ?? null) : null; + + useEffect(() => { + setRoiSliceGeom(null); + setRoiSliceGeomError(null); + + // The selection rectangle is tied to a specific slice; clear it when the slice changes. + setRoiRect(null); + roiDragRef.current = null; + + if (!roiSopInstanceUid) return; + + let alive = true; + const run = async () => { + try { + const db = await getDB(); + const inst = (await db.get('instances', roiSopInstanceUid)) as DicomInstance | undefined; + if (!inst) { + throw new Error('Missing DICOM instance for ROI preview'); + } + + const geom = getSliceGeometryFromInstance(inst); + if (!alive) return; + setRoiSliceGeom(geom); + } catch (e) { + const msg = e instanceof Error ? e.message : String(e); + if (!alive) return; + setRoiSliceGeomError(msg); + } + }; + + void run(); + return () => { + alive = false; + }; + }, [roiSopInstanceUid]); + + useEffect(() => { + if (!roiSopInstanceUid || !roiSliceGeom) return; + setRoiPreviewSliceStable({ sopInstanceUid: roiSopInstanceUid, geom: roiSliceGeom }); + }, [roiSliceGeom, roiSopInstanceUid]); + + const roiSideMm = useMemo(() => { + if (!roiWorld) return null; + const dx = roiWorld.boundsMm.max[0] - roiWorld.boundsMm.min[0]; + const dy = roiWorld.boundsMm.max[1] - roiWorld.boundsMm.min[1]; + const dz = roiWorld.boundsMm.max[2] - roiWorld.boundsMm.min[2]; + return Math.max(dx, dy, dz); + }, [roiWorld]); + + const selectedPlaneCount = selectedGroup?.planeCount ?? 0; + const canRun = !isRunning && selectedSeries.length >= 2 && selectedPlaneCount >= 2; + const percent = progress ? Math.round((progress.current / Math.max(1, progress.total)) * 100) : 0; + + const progressMessage = progress ? progress.message : ''; + + return ( + ++ ); +} diff --git a/frontend/src/components/SvrModal.tsx b/frontend/src/components/SvrModal.tsx new file mode 100644 index 0000000..48d765a --- /dev/null +++ b/frontend/src/components/SvrModal.tsx @@ -0,0 +1,793 @@ +import { useEffect, useMemo, useRef, useState } from 'react'; +import { X, Layers3, Loader2, Download } from 'lucide-react'; +import type { ComparisonData } from '../types/api'; +import type { SvrParams, SvrRoi, SvrRoiPlane, SvrSelectedSeries } from '../types/svr'; +import { DEFAULT_SVR_PARAMS } from '../types/svr'; +import { useSvrReconstruction } from '../hooks/useSvrReconstruction'; +import { SvrVolume3DModal } from './SvrVolume3DModal'; + +export type SvrModalProps = { + data: ComparisonData; + defaultDateIso?: string | null; + defaultSeqId?: string | null; + onClose: () => void; +}; + +function sortedDatesDesc(dates: string[]): string[] { + return [...dates].sort((a, b) => b.localeCompare(a)); +} + +function formatSeqLabel(seq: { plane: string | null; weight: string | null; sequence: string | null }): string { + return [seq.plane, seq.weight, seq.sequence].filter(Boolean).join(' ') || 'Unknown'; +} + +function downloadBlob(blob: Blob, filename: string): void { + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + // Best-effort cleanup. + setTimeout(() => URL.revokeObjectURL(url), 2000); +} + +function toArrayBuffer(view: ArrayBufferView): ArrayBuffer { + // TS's DOM lib types require BlobParts to be backed by ArrayBuffer (not SharedArrayBuffer). + // Copying also ensures the bytes match the view's byteOffset/byteLength. + const bytes = new Uint8Array(view.buffer, view.byteOffset, view.byteLength); + const copy = new Uint8Array(bytes.byteLength); + copy.set(bytes); + return copy.buffer; +} + +type RoiRect01 = { + plane: SvrRoiPlane; + x0: number; + y0: number; + x1: number; + y1: number; +}; + +function clamp01(x: number): number { + return x < 0 ? 0 : x > 1 ? 1 : x; +} + +function normalizeRect01(rect: RoiRect01): { left: number; right: number; top: number; bottom: number } { + return { + left: Math.min(rect.x0, rect.x1), + right: Math.max(rect.x0, rect.x1), + top: Math.min(rect.y0, rect.y1), + bottom: Math.max(rect.y0, rect.y1), + }; +} + +function fitIntervalToBounds(params: { min: number; max: number; boundMin: number; boundMax: number }): { min: number; max: number } { + let { min, max } = params; + const { boundMin, boundMax } = params; + + const len = max - min; + const boundLen = boundMax - boundMin; + if (!(len > 0) || !(boundLen > 0)) { + return { min: boundMin, max: boundMax }; + } + + // If the interval is larger than bounds, clamp (shrinks). + if (len >= boundLen) { + return { min: boundMin, max: boundMax }; + } + + // Otherwise, shift the interval so it fits without shrinking. + if (min < boundMin) { + max += boundMin - min; + min = boundMin; + } + if (max > boundMax) { + min -= max - boundMax; + max = boundMax; + } + + // Final safety clamp. + if (min < boundMin) min = boundMin; + if (max > boundMax) max = boundMax; + + return { min, max }; +} + +function computeCubeRoiFromRect01(rect: RoiRect01, volume: { dims: [number, number, number]; voxelSizeMm: [number, number, number]; originMm: [number, number, number] }): SvrRoi | null { + const { dims, voxelSizeMm, originMm } = volume; + const [nx, ny, nz] = dims; + + // SVR output is isotropic today. + const vox = voxelSizeMm[0]; + if (!Number.isFinite(vox) || vox <= 0) return null; + + const [ox, oy, oz] = originMm; + + const fullX = { min: ox, max: ox + (nx - 1) * vox }; + const fullY = { min: oy, max: oy + (ny - 1) * vox }; + const fullZ = { min: oz, max: oz + (nz - 1) * vox }; + + const r = normalizeRect01(rect); + const w01 = r.right - r.left; + const h01 = r.bottom - r.top; + if (w01 <= 1e-4 || h01 <= 1e-4) return null; + + const midX = ox + Math.floor(nx / 2) * vox; + const midY = oy + Math.floor(ny / 2) * vox; + const midZ = oz + Math.floor(nz / 2) * vox; + + // Map the 2D rect to two world axes (A,B); then expand to a cube by making A/B square + // and adding equal extent along the through-plane axis (C). + let a0 = 0; + let a1 = 0; + let b0 = 0; + let b1 = 0; + + // Centers for the through-plane axis. + let cx = midX; + let cy = midY; + let cz = midZ; + + if (rect.plane === 'axial') { + a0 = ox + r.left * (nx - 1) * vox; + a1 = ox + r.right * (nx - 1) * vox; + b0 = oy + r.top * (ny - 1) * vox; + b1 = oy + r.bottom * (ny - 1) * vox; + // through-plane is Z + cz = midZ; + } else if (rect.plane === 'coronal') { + a0 = ox + r.left * (nx - 1) * vox; + a1 = ox + r.right * (nx - 1) * vox; + b0 = oz + r.top * (nz - 1) * vox; + b1 = oz + r.bottom * (nz - 1) * vox; + // through-plane is Y + cy = midY; + } else { + // sagittal + a0 = oy + r.left * (ny - 1) * vox; + a1 = oy + r.right * (ny - 1) * vox; + b0 = oz + r.top * (nz - 1) * vox; + b1 = oz + r.bottom * (nz - 1) * vox; + // through-plane is X + cx = midX; + } + + const aCenter = (a0 + a1) * 0.5; + const bCenter = (b0 + b1) * 0.5; + const sideMm = Math.max(Math.abs(a1 - a0), Math.abs(b1 - b0)); + if (!(sideMm > 1e-6)) return null; + + // Start with a cube centered on the drawn box (in-plane) and the mid-slice (through-plane). + // Then shift it as needed to keep it inside the current volume bounds. + let xMin = 0; + let xMax = 0; + let yMin = 0; + let yMax = 0; + let zMin = 0; + let zMax = 0; + + const half = sideMm * 0.5; + + if (rect.plane === 'axial') { + const xi = fitIntervalToBounds({ min: aCenter - half, max: aCenter + half, boundMin: fullX.min, boundMax: fullX.max }); + const yi = fitIntervalToBounds({ min: bCenter - half, max: bCenter + half, boundMin: fullY.min, boundMax: fullY.max }); + const zi = fitIntervalToBounds({ min: cz - half, max: cz + half, boundMin: fullZ.min, boundMax: fullZ.max }); + xMin = xi.min; + xMax = xi.max; + yMin = yi.min; + yMax = yi.max; + zMin = zi.min; + zMax = zi.max; + } else if (rect.plane === 'coronal') { + const xi = fitIntervalToBounds({ min: aCenter - half, max: aCenter + half, boundMin: fullX.min, boundMax: fullX.max }); + const zi = fitIntervalToBounds({ min: bCenter - half, max: bCenter + half, boundMin: fullZ.min, boundMax: fullZ.max }); + const yi = fitIntervalToBounds({ min: cy - half, max: cy + half, boundMin: fullY.min, boundMax: fullY.max }); + xMin = xi.min; + xMax = xi.max; + yMin = yi.min; + yMax = yi.max; + zMin = zi.min; + zMax = zi.max; + } else { + const yi = fitIntervalToBounds({ min: aCenter - half, max: aCenter + half, boundMin: fullY.min, boundMax: fullY.max }); + const zi = fitIntervalToBounds({ min: bCenter - half, max: bCenter + half, boundMin: fullZ.min, boundMax: fullZ.max }); + const xi = fitIntervalToBounds({ min: cx - half, max: cx + half, boundMin: fullX.min, boundMax: fullX.max }); + xMin = xi.min; + xMax = xi.max; + yMin = yi.min; + yMax = yi.max; + zMin = zi.min; + zMax = zi.max; + } + + return { + mode: 'cube', + sourcePlane: rect.plane, + boundsMm: { + min: [xMin, yMin, zMin], + max: [xMax, yMax, zMax], + }, + }; +} + +function RoiSelectablePreview(props: { + plane: SvrRoiPlane; + label: string; + url: string | undefined; + aspectW: number; + aspectH: number; + roiRect: RoiRect01 | null; + setRoiRect: (next: RoiRect01 | null) => void; + roiDragRef: { current: { plane: SvrRoiPlane; x0: number; y0: number } | null }; + disabled?: boolean; +}) { + const { plane, label, url, aspectW, aspectH, roiRect, setRoiRect, roiDragRef, disabled } = props; + + const rect = roiRect?.plane === plane ? normalizeRect01(roiRect) : null; + + return ( ++ {generationCollapsed ? null : ( ++++ )} + +++ ++ Sequence on this date (uses all planes) +++ {sequenceGroupsForDate.length === 0 ? ( ++No series found for this date.+ ) : ( ++ {sequenceGroupsForDate.map((g) => { + const checked = selectedSequenceKey === g.key; + + const planeLabel = `${g.planeCount} plane${g.planeCount === 1 ? '' : 's'}`; + const sliceLabel = `${g.sliceCount} slice${g.sliceCount === 1 ? '' : 's'}`; + + return ( + + ); + })} ++ )} +++ ++ Advanced SVR settings +
+ ++++ + + + ++ ++++ Voxel size: Target isotropic output spacing. Smaller = more detail but slower/heavier. The voxel size may be + increased automatically to respect Max volume dim. +++ Iterations: How many SVR refinement passes to run. 0 = quick “splat/average only”; higher can reduce + slice-to-slice inconsistency but costs time. +++ Slice downsample max: Each input slice may be downsampled before reconstruction, but we won't downsample so far + that in-plane spacing becomes worse than the target voxel size. +++ Max volume dim: Caps each output grid dimension (in voxels) by increasing voxel size if needed. Lower = + faster/smaller; higher = more memory/time. +++ Tip: draw a box on an input slice and run Run SVR (box) to keep the volume smaller + faster. ++++ +Focus box (optional)
++++ + ++ + {roiSeriesSopUidsError ? ( +{roiSeriesSopUidsError}+ ) : roiSliceGeomError ? ( +{roiSliceGeomError}+ ) : null} + +++ ++ {roiSeriesSopUids && roiSeriesSopUids.length > 0 + ? `Slice ${effectiveRoiSliceIndex + 1} / ${roiSeriesSopUids.length}` + : roiSeries + ? 'Loading slices…' + : 'Select a series to preview'} ++ ++ + + ++{ + if (!roiSeriesSopUids || roiSeriesSopUids.length === 0) return; + const cur = roiSliceIndex >= 0 ? roiSliceIndex : effectiveRoiSliceIndex; + setRoiSliceIndex(clampInt(cur + delta, 0, roiSeriesSopUids.length - 1)); + }} + onRoiFinalized={(roi) => { + setRoiWorld(roi); + if (!roi) return; + + setParams((p) => { + const clamp = (x: number, min: number, max: number) => (x < min ? min : x > max ? max : x); + + const inPlaneMm = roiSliceGeom ? Math.min(roiSliceGeom.rowSpacingMm, roiSliceGeom.colSpacingMm) : p.targetVoxelSizeMm; + const nextVoxel = clamp(inPlaneMm, 0.25, 1.0); + + return { + ...p, + // Favor voxel size at (or slightly above) the best in-plane spacing. + targetVoxelSizeMm: nextVoxel, + // Ensure we don't downsample to a coarser spacing than the output voxels. + sliceDownsampleMode: 'voxel-aware', + // Allow near-native resolution (especially once ROI cropping is in place). + sliceDownsampleMaxSize: Math.max(p.sliceDownsampleMaxSize, 512), + // Allow higher-res grids for ROI work. + maxVolumeDim: Math.max(p.maxVolumeDim, 320), + // More refinement iterations for detail. + iterations: Math.max(p.iterations, 6), + stepSize: 0.5, + // Always use ROI rigid alignment. + seriesRegistrationMode: 'roi-rigid', + }; + }); + }} + disabled={isRunning} + /> + + + + + {roiWorld && roiSideMm ? ( ++ ++ Box: ~{roiSideMm.toFixed(1)}mm cube ({roiWorld.sourcePlane}) ++ ) : null} ++ Drag to draw a box on an input slice. When a box is set, Run SVR will reconstruct only that box. Starting + with a smaller box lets you decrease voxel size for more detail without making the volume huge. +++ + ++ + {progress && ( ++ {isRunning ? ( + + ) : null} + + ++++ )} + + {error && ( ++++ {progressMessage} + {percent}% + + +++ {error} ++ )} + + {!result ? ( +Run SVR to generate a 3D volume (uses a focus box when set).+ ) : ( ++ Volume: {result.volume.dims[0]}×{result.volume.dims[1]}×{result.volume.dims[2]} @ {result.volume.voxelSizeMm[0]}mm ++ )} + + ++ + +++ +diff --git a/frontend/src/components/comparison/GridCell.tsx b/frontend/src/components/comparison/GridCell.tsx new file mode 100644 index 0000000..43a9373 --- /dev/null +++ b/frontend/src/components/comparison/GridCell.tsx @@ -0,0 +1,280 @@ +import { useState, useRef } from 'react'; +import { Link2, Pencil, Sparkles } from 'lucide-react'; +import type { AlignmentReference, ExclusionMask, PanelSettings, SeriesRef } from '../../types/api'; +import { formatDate } from '../../utils/format'; +import { getSliceIndex, getEffectiveInstanceIndex, getProgressFromSlice } from '../../utils/math'; +import { ImageControls } from '../ImageControls'; +import { StepControl } from '../StepControl'; +import { DragRectActionOverlay } from '../DragRectActionOverlay'; +import { DicomViewer, type DicomViewerHandle } from '../DicomViewer'; +import { GroundTruthPolygonOverlay } from '../GroundTruthPolygonOverlay'; +import { TumorSavedSegmentationOverlay } from '../TumorSavedSegmentationOverlay'; +import { TumorSegmentationOverlay } from '../TumorSegmentationOverlaySeedGrow'; + +export type GridCellProps = { + comboId: string; + date: string; + refData: SeriesRef | undefined; + settings: PanelSettings; + progress: number; + setProgress: (next: number) => void; + updatePanelSetting: (date: string, update: Partial+ {url ?+ ); +} + +export function SvrModal({ data, defaultDateIso, defaultSeqId, onClose }: SvrModalProps) { + const dates = useMemo(() => sortedDatesDesc(data.dates), [data.dates]); + const initialDate = defaultDateIso && dates.includes(defaultDateIso) ? defaultDateIso : dates[0] || null; + + const [dateIso, setDateIso] = useState: null} + + {rect ? ( + + ) : null} + + {url ? ( +
{ + if (disabled) return; + const box = e.currentTarget.getBoundingClientRect(); + const x = clamp01((e.clientX - box.left) / box.width); + const y = clamp01((e.clientY - box.top) / box.height); + + roiDragRef.current = { plane, x0: x, y0: y }; + setRoiRect({ plane, x0: x, y0: y, x1: x, y1: y }); + + e.currentTarget.setPointerCapture(e.pointerId); + e.preventDefault(); + e.stopPropagation(); + }} + onPointerMove={(e) => { + const drag = roiDragRef.current; + if (disabled || !drag || drag.plane !== plane) return; + + const box = e.currentTarget.getBoundingClientRect(); + const x = clamp01((e.clientX - box.left) / box.width); + const y = clamp01((e.clientY - box.top) / box.height); + + setRoiRect({ plane, x0: drag.x0, y0: drag.y0, x1: x, y1: y }); + e.preventDefault(); + e.stopPropagation(); + }} + onPointerUp={(e) => { + const drag = roiDragRef.current; + if (drag?.plane === plane) { + roiDragRef.current = null; + } + e.preventDefault(); + e.stopPropagation(); + }} + onPointerCancel={(e) => { + const drag = roiDragRef.current; + if (drag?.plane === plane) { + roiDragRef.current = null; + } + e.preventDefault(); + e.stopPropagation(); + }} + /> + ) : null} ++ ++ {label} + {roiRect?.plane === plane ? ROI : null} ++(initialDate); + const [params, setParams] = useState (DEFAULT_SVR_PARAMS); + + const { isRunning, progress, result, error, run, cancel, clear } = useSvrReconstruction(); + + const [viewer3dOpen, setViewer3dOpen] = useState(false); + + const [roiRect, setRoiRect] = useState (null); + const roiDragRef = useRef<{ plane: SvrRoiPlane; x0: number; y0: number } | null>(null); + + const [lastRunMeta, setLastRunMeta] = useState<{ params: SvrParams; selectedSeries: SvrSelectedSeries[] } | null>(null); + + const roi = useMemo(() => { + if (!roiRect || !result) return null; + return computeCubeRoiFromRect01(roiRect, result.volume); + }, [roiRect, result]); + + const roiSideMm = useMemo(() => { + if (!roi) return null; + const dx = roi.boundsMm.max[0] - roi.boundsMm.min[0]; + const dy = roi.boundsMm.max[1] - roi.boundsMm.min[1]; + const dz = roi.boundsMm.max[2] - roi.boundsMm.min[2]; + return Math.max(dx, dy, dz); + }, [roi]); + + const optionsForDate: SvrSelectedSeries[] = useMemo(() => { + if (!dateIso) return []; + + const out: SvrSelectedSeries[] = []; + + for (const seq of data.sequences) { + const ref = data.series_map[seq.id]?.[dateIso]; + if (!ref) continue; + + out.push({ + seriesUid: ref.series_uid, + studyId: ref.study_id, + dateIso, + instanceCount: ref.instance_count, + label: formatSeqLabel(seq), + plane: seq.plane, + weight: seq.weight, + sequence: seq.sequence, + }); + } + + // Keep stable ordering: plane, then label. + out.sort((a, b) => { + const pa = a.plane || ''; + const pb = b.plane || ''; + if (pa !== pb) return pa.localeCompare(pb); + return a.label.localeCompare(b.label); + }); + + return out; + }, [data.sequences, data.series_map, dateIso]); + + const [selectedUids, setSelectedUids] = useState (); + for (const opt of optionsForDate) { + if (opt.weight === currentSeq.weight && opt.sequence === currentSeq.sequence) { + next.add(opt.seriesUid); + } + } + + if (next.size > 0) { + setSelectedUids(next); + } + }, [data.sequences, dateIso, defaultSeqId, optionsForDate]); + + // Object URLs for previews + const [previewUrls, setPreviewUrls] = useState<{ axial?: string; coronal?: string; sagittal?: string }>({}); + useEffect(() => { + // Cleanup previous URLs. + for (const url of Object.values(previewUrls)) { + if (url) URL.revokeObjectURL(url); + } + + if (!result) { + setPreviewUrls({}); + return; + } + + const next = { + axial: URL.createObjectURL(result.previews.axial), + coronal: URL.createObjectURL(result.previews.coronal), + sagittal: URL.createObjectURL(result.previews.sagittal), + }; + + setPreviewUrls(next); + + return () => { + for (const url of Object.values(next)) { + if (url) URL.revokeObjectURL(url); + } + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [result]); + + const selectedSeries = useMemo(() => { + const m = new Map(optionsForDate.map((o) => [o.seriesUid, o] as const)); + return Array.from(selectedUids) + .map((uid) => m.get(uid)) + .filter((x): x is SvrSelectedSeries => !!x); + }, [optionsForDate, selectedUids]); + + const canRun = !isRunning && selectedSeries.length >= 2; + + const percent = progress ? Math.round((progress.current / Math.max(1, progress.total)) * 100) : 0; + + return ( + <> + {viewer3dOpen && result ? ( + { + setViewer3dOpen(false); + }} + /> + ) : null} + + ++ + ); +} diff --git a/frontend/src/components/SvrVolume3DModal.tsx b/frontend/src/components/SvrVolume3DModal.tsx new file mode 100644 index 0000000..e0f006a --- /dev/null +++ b/frontend/src/components/SvrVolume3DModal.tsx @@ -0,0 +1,37 @@ +import { X } from 'lucide-react'; +import type { SvrVolume } from '../types/svr'; +import { SvrVolume3DViewer } from './SvrVolume3DViewer'; + +export type SvrVolume3DModalProps = { + volume: SvrVolume; + onClose: () => void; +}; + +export function SvrVolume3DModal({ volume, onClose }: SvrVolume3DModalProps) { + const [nx, ny, nz] = volume.dims; + + return ( +++++ ++
+ ++ Slice-to-Volume Reconstruction (SVR) + ++++ ++ Select multiple series from different planes for a single date, then run iterative SVR (multi-plane fusion + refinement). ++ ++ + ++ +++ ++ Series on this date (pick 2+ across planes) +++ {optionsForDate.length === 0 ? ( ++No series found for this date.+ ) : ( ++ {optionsForDate.map((opt) => { + const checked = selectedUids.has(opt.seriesUid); + return ( + + ); + })} ++ )} ++ + + + ++ ++ + ++ + {progress && ( ++ {isRunning ? ( + + ) : null} + + ++++ )} + + {error && ( ++++ {progress.message} + {percent}% + + +++ {error} ++ )} +++Result+ + {!result ? ( ++ Run SVR to generate a reconstructed volume and orthogonal previews. ++ ) : ( + <> ++ Volume: {result.volume.dims[0]}×{result.volume.dims[1]}×{result.volume.dims[2]} @ {result.volume.voxelSizeMm[0]}mm ++ +++ ++ + + + Drag a box on a preview to define a cube ROI (the box is expanded to a cube automatically), then run SVR in ROI. ++ ++ + + + + {roi && roiSideMm ? ( ++ ++ ROI: ~{roiSideMm.toFixed(1)}mm cube ({roi.sourcePlane}) ++ ) : null} ++ + + + + ++ ++ Note: .f32 is raw Float32 voxels in x-fastest order. Use the JSON sidecar for dims/spacing/origin. ++ + )} +++ ); +} diff --git a/frontend/src/components/SvrVolume3DViewer.tsx b/frontend/src/components/SvrVolume3DViewer.tsx new file mode 100644 index 0000000..96a73ae --- /dev/null +++ b/frontend/src/components/SvrVolume3DViewer.tsx @@ -0,0 +1,2938 @@ +import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; +import { createPortal } from 'react-dom'; +import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'; +import type * as Ort from 'onnxruntime-web'; +import type { SvrLabelVolume, SvrVolume } from '../types/svr'; +import { BRATS_BASE_LABEL_META, BRATS_LABEL_ID, type BratsBaseLabelId } from '../utils/segmentation/brats'; +import { buildRgbaPalette256, rgbCss } from '../utils/segmentation/labelPalette'; +import { deleteModelBlob, getModelBlob, getModelSavedAtMs, putModelBlob } from '../utils/segmentation/onnx/modelCache'; +import { createOrtSessionFromModelBlob } from '../utils/segmentation/onnx/ortLoader'; +import { runTumorSegmentationOnnx } from '../utils/segmentation/onnx/tumorSegmentation'; +import { computeSeedRange01, type RegionGrow3DRoi, type Vec3i } from '../utils/segmentation/regionGrow3D'; +import { regionGrow3D_v2 } from '../utils/segmentation/regionGrow3D_v2'; +import { computeRoiCubeBoundsFromSliceDrag } from '../utils/segmentation/roiCube3d'; +import { resample2dAreaAverage } from '../utils/svr/resample2d'; +import { formatMiB } from '../utils/svr/svrUtils'; +import { + buildRenderVolumeTexData, + computeRenderPlan, + downsampleLabelsNearest, + toUint8Volume, + type RenderDims, + type RenderQualityPreset, + type RenderTextureMode, + type RenderVolumeTexData, +} from '../utils/svr/renderLod'; + +function clamp(x: number, min: number, max: number): number { + return x < min ? min : x > max ? max : x; +} + + +/** + * Camera model constants used by both: + * - the fragment shader (ray origin + image plane) + * - the 2D axes overlay projection helper (`projectWorldToCanvas`) + * + * Keep these in sync or the overlay will drift relative to the 3D render. + */ +const SVR3D_CAMERA_Z = 1.6; +const SVR3D_FOCAL_Z = 1.2; + +// IndexedDB key for the cached tumor segmentation ONNX model. +const ONNX_TUMOR_MODEL_KEY = 'brats-tumor-v1'; + +// ONNX preflight: extremely large 3D volumes can trigger huge intermediate/logits allocations. +// We block full-res runs by default above a conservative budget, with an explicit user override. +const ONNX_PREFLIGHT_CLASS_COUNT = 4; +const ONNX_PREFLIGHT_LOGITS_BUDGET_BYTES = 384 * 1024 * 1024; + +// Render defaults +const DEFAULT_RENDER_QUALITY: RenderQualityPreset = 'auto'; +const DEFAULT_RENDER_GPU_BUDGET_MIB = 256; +const DEFAULT_RENDER_TEXTURE_MODE: RenderTextureMode = 'auto'; + +const LABEL_PLACEHOLDER_DIMS: RenderDims = { nx: 1, ny: 1, nz: 1 }; +const LABEL_PLACEHOLDER_DATA = new Uint8Array([0]); + +type GlLabelState = { + gl: WebGL2RenderingContext; + texLabels: WebGLTexture; + texPalette: WebGLTexture; + texDims: RenderDims; + /** Dimensions currently allocated on the GPU for texLabels. */ + labelsTexDims: RenderDims; +}; + +type OnnxSessionMode = 'webgpu-preferred' | 'wasm'; + +async function rgbaToPngBlob(params: { rgba: Uint8ClampedArray; width: number; height: number }): Promise++++++ +SVR 3D Viewer++ {nx}×{ny}×{nz} +++++ { + const { rgba, width, height } = params; + + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + + const ctx = canvas.getContext('2d'); + if (!ctx) { + throw new Error('Failed to create 2D canvas context'); + } + + const img = ctx.createImageData(width, height); + img.data.set(rgba); + ctx.putImageData(img, 0, 0); + + const blob = await new Promise ((resolve, reject) => { + canvas.toBlob((b) => { + if (!b) { + reject(new Error('canvas.toBlob() returned null')); + return; + } + resolve(b); + }, 'image/png'); + }); + + return blob; +} + +type Vec3 = { x: number; y: number; z: number }; +// Quaternion [x, y, z, w] +type Quat = [number, number, number, number]; + +function v3Add(a: Vec3, b: Vec3): Vec3 { + return { x: a.x + b.x, y: a.y + b.y, z: a.z + b.z }; +} + +function v3Scale(v: Vec3, s: number): Vec3 { + return { x: v.x * s, y: v.y * s, z: v.z * s }; +} + +function v3ApplyMat3(m: Float32Array, v: Vec3): Vec3 { + // Column-major 3x3. + return { + x: m[0]! * v.x + m[3]! * v.y + m[6]! * v.z, + y: m[1]! * v.x + m[4]! * v.y + m[7]! * v.z, + z: m[2]! * v.x + m[5]! * v.y + m[8]! * v.z, + }; +} + +function projectWorldToCanvas(params: { + world: Vec3; + canvasW: number; + canvasH: number; + aspect: number; + zoom: number; +}): { x: number; y: number } | null { + const { world, canvasW, canvasH, aspect, zoom } = params; + + // Must match the simple camera model used in the fragment shader: + // roW = (0,0,CAM_Z) + // rdW = normalize(vec3(p, -FOCAL_Z)) + const CAM_Z = SVR3D_CAMERA_Z; + const FOCAL_Z = SVR3D_FOCAL_Z; + + const vz = world.z - CAM_Z; + if (!(vz < -1e-6)) { + // Point is at/behind the camera plane; skip. + return null; + } + + // Intersect the ray from camera origin through the point with the image plane at z = CAM_Z - FOCAL_Z. + const t = -FOCAL_Z / vz; + + const px = world.x * t; + const py = world.y * t; + + // In shader: p.x *= aspect; p /= zoom. + // So inverse mapping is: ndc.x = px * zoom / aspect; ndc.y = py * zoom. + const ndcX = (px * zoom) / Math.max(1e-6, aspect); + const ndcY = py * zoom; + + return { + x: (ndcX * 0.5 + 0.5) * canvasW, + y: (1 - (ndcY * 0.5 + 0.5)) * canvasH, + }; +} + +function niceStepMm(rangeMm: number, targetTicks: number): number { + const r = Math.abs(rangeMm); + if (!(r > 1e-6) || !(targetTicks > 0)) return 1; + + const raw = r / targetTicks; + const pow10 = Math.pow(10, Math.floor(Math.log10(raw))); + const x = raw / pow10; + + const nice = x <= 1 ? 1 : x <= 2 ? 2 : x <= 5 ? 5 : 10; + return nice * pow10; +} + +type DrawAxesOverlayParams = { + axesCanvas: HTMLCanvasElement; + axesCtx: CanvasRenderingContext2D; + canvas: HTMLCanvasElement; + volume: SvrVolume; + boxScale: readonly [number, number, number]; + rotMat: Float32Array; + zoom: number; +}; + +function drawAxesOverlay(params: DrawAxesOverlayParams): void { + const { axesCanvas, axesCtx, canvas, volume, boxScale, rotMat, zoom } = params; + + const w = axesCanvas.width; + const h = axesCanvas.height; + if (!(w > 0 && h > 0)) return; + + // Clear. + axesCtx.clearRect(0, 0, w, h); + + // Volume physical size in mm. + const [nx, ny, nz] = volume.dims; + const [vx, vy, vz] = volume.voxelSizeMm; + + const sizeMm = { + x: Math.abs(nx * vx), + y: Math.abs(ny * vy), + z: Math.abs(nz * vz), + }; + + // Object-space box extents used by the shader. + const box = { x: boxScale[0], y: boxScale[1], z: boxScale[2] }; + + // Place axes on the (x-, y-, z+) corner of the box. + const originObj: Vec3 = { + x: -0.5 * box.x, + y: -0.5 * box.y, + z: 0.5 * box.z, + }; + + const aspect = w / Math.max(1, h); + const dpr = canvas.clientWidth > 0 ? canvas.width / canvas.clientWidth : window.devicePixelRatio || 1; + + // NOTE: `rotMat` here is the same u_rot we send to the shader, so object->world matches. + const projectObj = (obj: Vec3) => { + const world = v3ApplyMat3(rotMat, obj); + return projectWorldToCanvas({ world, canvasW: w, canvasH: h, aspect, zoom }); + }; + + // 2D styling. + axesCtx.save(); + axesCtx.lineCap = 'round'; + axesCtx.lineJoin = 'round'; + + const fontPx = Math.max(10, Math.round(10 * dpr)); + axesCtx.font = `${fontPx}px ui-sans-serif, system-ui`; + axesCtx.textBaseline = 'middle'; + + const tickMajorPx = 7 * dpr; + const tickMinorPx = 4 * dpr; + const labelOffsetPx = 10 * dpr; + + const axes: Array<{ + name: 'X' | 'Y' | 'Z'; + dirObj: Vec3; + lenObj: number; + lenMm: number; + rgba: string; + }> = [ + { name: 'X', dirObj: { x: 1, y: 0, z: 0 }, lenObj: box.x, lenMm: sizeMm.x, rgba: 'rgba(255,80,80,0.9)' }, + { name: 'Y', dirObj: { x: 0, y: 1, z: 0 }, lenObj: box.y, lenMm: sizeMm.y, rgba: 'rgba(80,255,80,0.9)' }, + // Use -Z so the axis spans the full box depth from the front face into the volume. + { name: 'Z', dirObj: { x: 0, y: 0, z: -1 }, lenObj: box.z, lenMm: sizeMm.z, rgba: 'rgba(80,160,255,0.9)' }, + ]; + + for (const axis of axes) { + if (!(axis.lenObj > 1e-9) || !(axis.lenMm > 1e-6)) continue; + + const p0 = projectObj(originObj); + const p1 = projectObj(v3Add(originObj, v3Scale(axis.dirObj, axis.lenObj))); + if (!p0 || !p1) continue; + + const dx = p1.x - p0.x; + const dy = p1.y - p0.y; + const dLen = Math.hypot(dx, dy); + if (!(dLen > 1e-6)) continue; + + const ux = dx / dLen; + const uy = dy / dLen; + const px = -uy; + const py = ux; + + // Main axis line. + axesCtx.lineWidth = 1.25 * dpr; + axesCtx.strokeStyle = axis.rgba; + axesCtx.beginPath(); + axesCtx.moveTo(p0.x, p0.y); + axesCtx.lineTo(p1.x, p1.y); + axesCtx.stroke(); + + // Ticks. + const majorStepMm = niceStepMm(axis.lenMm, 5); + const minorStepMm = majorStepMm >= 10 ? majorStepMm / 5 : majorStepMm / 2; + + const stepObj = axis.lenObj / axis.lenMm; + + const isNear = (a: number, b: number) => Math.abs(a - b) <= 1e-6 * Math.max(1, axis.lenMm); + + const drawTickAt = (tMm: number, isMajor: boolean) => { + const tObj = tMm * stepObj; + const ptObj = v3Add(originObj, v3Scale(axis.dirObj, tObj)); + const p = projectObj(ptObj); + if (!p) return; + + const half = (isMajor ? tickMajorPx : tickMinorPx) * 0.5; + axesCtx.lineWidth = (isMajor ? 1.25 : 1.0) * dpr; + axesCtx.strokeStyle = axis.rgba; + axesCtx.beginPath(); + axesCtx.moveTo(p.x - px * half, p.y - py * half); + axesCtx.lineTo(p.x + px * half, p.y + py * half); + axesCtx.stroke(); + + if (isMajor && tMm > 0) { + const text = `${Math.round(tMm)}mm`; + const lx = p.x + px * labelOffsetPx; + const ly = p.y + py * labelOffsetPx; + + axesCtx.textAlign = px >= 0 ? 'left' : 'right'; + axesCtx.lineWidth = 3 * dpr; + axesCtx.strokeStyle = 'rgba(0,0,0,0.8)'; + axesCtx.strokeText(text, lx, ly); + axesCtx.fillStyle = axis.rgba; + axesCtx.fillText(text, lx, ly); + } + }; + + // Minor ticks. + for (let t = 0; t <= axis.lenMm + minorStepMm * 0.25; t += minorStepMm) { + // Skip ticks that coincide with major ticks. + const q = Math.round(t / majorStepMm); + const isMajor = isNear(t, q * majorStepMm); + drawTickAt(Math.min(t, axis.lenMm), isMajor); + } + + // Axis label at end. + { + const text = `${axis.name}: ${Math.round(axis.lenMm)}mm`; + const lx = p1.x + px * (labelOffsetPx * 1.2) + ux * (6 * dpr); + const ly = p1.y + py * (labelOffsetPx * 1.2) + uy * (6 * dpr); + axesCtx.textAlign = px >= 0 ? 'left' : 'right'; + axesCtx.lineWidth = 3 * dpr; + axesCtx.strokeStyle = 'rgba(0,0,0,0.8)'; + axesCtx.strokeText(text, lx, ly); + axesCtx.fillStyle = axis.rgba; + axesCtx.fillText(text, lx, ly); + } + } + + axesCtx.restore(); +} + +function v3Normalize(v: Vec3): Vec3 { + const len = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z); + if (len <= 1e-12) return { x: 0, y: 0, z: 1 }; + const inv = 1 / len; + return { x: v.x * inv, y: v.y * inv, z: v.z * inv }; +} + +function quatNormalize(q: Quat): Quat { + const [x, y, z, w] = q; + const len = Math.sqrt(x * x + y * y + z * z + w * w); + if (len <= 1e-12) return [0, 0, 0, 1]; + const inv = 1 / len; + return [x * inv, y * inv, z * inv, w * inv]; +} + +function quatMultiply(a: Quat, b: Quat): Quat { + // Hamilton product (composition) + const ax = a[0]; + const ay = a[1]; + const az = a[2]; + const aw = a[3]; + + const bx = b[0]; + const by = b[1]; + const bz = b[2]; + const bw = b[3]; + + return [ + aw * bx + ax * bw + ay * bz - az * by, + aw * by - ax * bz + ay * bw + az * bx, + aw * bz + ax * by - ay * bx + az * bw, + aw * bw - ax * bx - ay * by - az * bz, + ]; +} + +function quatFromAxisAngle(axis: Vec3, angleRad: number): Quat { + const a = v3Normalize(axis); + const half = angleRad * 0.5; + const s = Math.sin(half); + const c = Math.cos(half); + return quatNormalize([a.x * s, a.y * s, a.z * s, c]); +} + +function mat3FromQuat(q: Quat, out: Float32Array): void { + const x = q[0]; + const y = q[1]; + const z = q[2]; + const w = q[3]; + + const x2 = x + x; + const y2 = y + y; + const z2 = z + z; + + const xx = x * x2; + const yy = y * y2; + const zz = z * z2; + + const xy = x * y2; + const xz = x * z2; + const yz = y * z2; + + const wx = w * x2; + const wy = w * y2; + const wz = w * z2; + + // WebGL expects column-major layout when transpose=false. + // These are the standard quaternion->matrix terms (row/column layout handled below). + const m00 = 1 - (yy + zz); + const m01 = xy - wz; + const m02 = xz + wy; + + const m10 = xy + wz; + const m11 = 1 - (xx + zz); + const m12 = yz - wx; + + const m20 = xz - wy; + const m21 = yz + wx; + const m22 = 1 - (xx + yy); + + // Column-major mat3 for WebGL. + out[0] = m00; + out[1] = m10; + out[2] = m20; + + out[3] = m01; + out[4] = m11; + out[5] = m21; + + out[6] = m02; + out[7] = m12; + out[8] = m22; +} + +type VolumeTextureFormat = + | { kind: 'f32'; internalFormat: number; format: number; type: number; minMagFilter: number } + | { kind: 'u8'; internalFormat: number; format: number; type: number; minMagFilter: number }; + +function chooseVolumeTextureFormat(gl: WebGL2RenderingContext): { + primary: VolumeTextureFormat; + fallback: VolumeTextureFormat; +} { + // Float textures preserve subtle contrast; if linear filtering isn't supported we can still sample with NEAREST. + const floatLinear = !!gl.getExtension('OES_texture_float_linear'); + + const primary: VolumeTextureFormat = { + kind: 'f32', + internalFormat: gl.R32F, + format: gl.RED, + type: gl.FLOAT, + minMagFilter: floatLinear ? gl.LINEAR : gl.NEAREST, + }; + + const fallback: VolumeTextureFormat = { + kind: 'u8', + internalFormat: gl.R8, + format: gl.RED, + type: gl.UNSIGNED_BYTE, + minMagFilter: gl.LINEAR, + }; + + return { primary, fallback }; +} + +function compileShader(gl: WebGL2RenderingContext, type: number, src: string): WebGLShader { + const sh = gl.createShader(type); + if (!sh) throw new Error('Failed to create shader'); + gl.shaderSource(sh, src); + gl.compileShader(sh); + if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) { + const log = gl.getShaderInfoLog(sh) || '(no log)'; + gl.deleteShader(sh); + throw new Error(log); + } + return sh; +} + +function createProgram(gl: WebGL2RenderingContext, vsSrc: string, fsSrc: string): WebGLProgram { + const vs = compileShader(gl, gl.VERTEX_SHADER, vsSrc); + const fs = compileShader(gl, gl.FRAGMENT_SHADER, fsSrc); + + const prog = gl.createProgram(); + if (!prog) throw new Error('Failed to create program'); + gl.attachShader(prog, vs); + gl.attachShader(prog, fs); + gl.linkProgram(prog); + + gl.deleteShader(vs); + gl.deleteShader(fs); + + if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { + const log = gl.getProgramInfoLog(prog) || '(no log)'; + gl.deleteProgram(prog); + throw new Error(log); + } + + return prog; +} + +type RenderBuildState = { + status: 'idle' | 'building' | 'ready' | 'error'; + key: string | null; + data: RenderVolumeTexData | null; + buildMs?: number; + error?: string; +}; + +export type SvrVolume3DViewerProps = { + volume: SvrVolume | null; + labels?: SvrLabelVolume | null; + /** + * Optional portal target used to render the Slice Inspector outside of the viewer layout + * (e.g. inside the SVR generation panel). + * + * If this prop is provided (even as null), the viewer will NOT render the Slice Inspector inline. + */ + sliceInspectorPortalTarget?: Element | null; +}; + +export type SvrVolume3DViewerHandle = { + /** Capture the current 3D canvas frame as a PNG (best-effort). */ + capture3dPng: () => Promise ; + /** Reset view + controls to a stable preset for reproducible harness captures. */ + applyHarnessPreset: () => void; +}; + +export const SvrVolume3DViewer = forwardRef (null); + const axesCanvasRef = useRef (null); + const pendingCapture3dRef = useRef<{ resolve: (b: Blob | null) => void } | null>(null); + + const glLabelStateRef = useRef (null); + + const [initError, setInitError] = useState (null); + const [glEpoch, setGlEpoch] = useState(0); + + const renderBuildIdRef = useRef(0); + const [renderBuild, setRenderBuild] = useState (() => ({ + status: 'idle', + key: null, + data: null, + })); + + // Optional externally-provided labels (e.g. from an ML pipeline) can override internal generation. + const [generatedLabels, setGeneratedLabels] = useState (null); + const labels = labelsOverride ?? generatedLabels; + + // Phase 3: ONNX model execution (offline; model cached in IndexedDB). + const onnxSessionRef = useRef (null); + const onnxSessionModeRef = useRef (null); + const onnxFileInputRef = useRef (null); + + const releaseOnnxSession = useCallback((reason: string) => { + const session = onnxSessionRef.current; + onnxSessionRef.current = null; + onnxSessionModeRef.current = null; + + if (session) { + // Avoid leaking WebGPU/WASM resources if the user swaps/clears models. + void session.release().catch((e) => { + console.warn('[onnx] Failed to release session', { reason, e }); + }); + } + }, []); + + useEffect(() => { + return () => { + releaseOnnxSession('unmount'); + }; + }, [releaseOnnxSession]); + const [onnxStatus, setOnnxStatus] = useState<{ + cached: boolean; + savedAtMs: number | null; + loading: boolean; + sessionReady: boolean; + message?: string; + error?: string; + }>(() => ({ + cached: false, + savedAtMs: null, + loading: false, + sessionReady: false, + })); + + // Phase 4a: Best-effort cancellation. + // NOTE: We can't reliably abort ORT execution mid-run in the browser; cancellation just ignores late results. + const onnxSegRunIdRef = useRef(0); + const [onnxSegRunning, setOnnxSegRunning] = useState(false); + const [allowUnsafeOnnxFullRes, setAllowUnsafeOnnxFullRes] = useState(false); + + const refreshOnnxCacheStatus = useCallback(() => { + void getModelSavedAtMs(ONNX_TUMOR_MODEL_KEY) + .then((savedAtMs) => { + setOnnxStatus((s) => ({ ...s, cached: savedAtMs !== null, savedAtMs, error: undefined })); + }) + .catch((e) => { + const msg = e instanceof Error ? e.message : String(e); + setOnnxStatus((s) => ({ ...s, error: msg })); + }); + }, []); + + useEffect(() => { + refreshOnnxCacheStatus(); + }, [refreshOnnxCacheStatus]); + + // Viewer controls (composite-only) + const [controlsCollapsed, setControlsCollapsed] = useState(false); + // Radial threshold is applied as a center->edge ramp in the shader. + // Keep the UI range small so the slider isn't overly sensitive. + const [threshold, setThreshold] = useState(0.05); + const THRESHOLD_EDGE_MAX = 0.12; + // Always use max raymarch samples for quality; no UI control. + const steps = 256; + const [gamma, setGamma] = useState(1.0); + const [opacity, setOpacity] = useState(4.0); + const [zoom, setZoom] = useState(1.0); + + // Render quality (GPU-budgeted LOD) to avoid allocating full-res 3D textures on huge volumes. + const [renderQuality, setRenderQuality] = useState (DEFAULT_RENDER_QUALITY); + const [renderGpuBudgetMiB, setRenderGpuBudgetMiB] = useState(DEFAULT_RENDER_GPU_BUDGET_MIB); + const [renderTextureMode, setRenderTextureMode] = useState (DEFAULT_RENDER_TEXTURE_MODE); + + // Optional segmentation overlay (label volume). + // No UI controls: labels are always shown when available. + const labelsEnabled = true; + const labelMix = 0.65; + + const [segmentationCollapsed, setSegmentationCollapsed] = useState(false); + + // Baseline interactive segmentation (Phase 2): seeded 3D region-growing. + const [seedVoxel, setSeedVoxel] = useState (null); + const [growTargetLabel, setGrowTargetLabel] = useState (BRATS_LABEL_ID.ENHANCING); + const [growTolerance, setGrowTolerance] = useState(0.12); + const [growAuto, setGrowAuto] = useState(true); + + // ROI guidance: draw a box on the slice inspector to reduce leakage. + // NOTE: the 2D rectangle is interpreted as an axis-aligned *3D* cube-like ROI whose depth is + // chosen to be roughly isotropic in mm (and centered on the current inspector slice). + // The ROI acts as a smooth radial prior about its centroid (not a hard clamp). + const [growRoiOutsideScale, setGrowRoiOutsideScale] = useState(0.6); + const [growRoiBounds, setGrowRoiBounds] = useState<{ min: Vec3i; max: Vec3i } | null>(null); + const [growRoiDraftBounds, setGrowRoiDraftBounds] = useState<{ min: Vec3i; max: Vec3i } | null>(null); + + const [growStatus, setGrowStatus] = useState<{ running: boolean; message?: string; error?: string }>(() => ({ + running: false, + })); + const growAbortRef = useRef (null); + const growRunIdRef = useRef(0); + const growAutoTimerRef = useRef (null); + + // For live-updating tolerance we need to *replace* the previous preview rather than accumulate. + // We store sparse previous label values so we can revert without copying the entire label volume. + const growOverlayRef = useRef< + | { + key: string; + seedKey: string; + workLabels: Uint8Array; + prevIndices: Uint32Array | null; + prevValues: Uint8Array | null; + } + | null + >(null); + + const sliceInspectorDragRef = useRef< + | { + pointerId: number; + startClientX: number; + startClientY: number; + startVoxel: Vec3i; + lastVoxel: Vec3i; + draggingRoi: boolean; + } + | null + >(null); + + // When the underlying volume changes, drop any internally-generated labels, seeds, and ROI state. + useEffect(() => { + setGeneratedLabels(null); + setSeedVoxel(null); + setGrowAuto(true); + setGrowRoiOutsideScale(0.6); + setGrowRoiBounds(null); + setGrowRoiDraftBounds(null); + + // Clear any pending/active grow. + setGrowStatus({ running: false }); + growAbortRef.current?.abort(); + growAbortRef.current = null; + growRunIdRef.current++; + + if (growAutoTimerRef.current !== null) { + window.clearTimeout(growAutoTimerRef.current); + growAutoTimerRef.current = null; + } + + growOverlayRef.current = null; + sliceInspectorDragRef.current = null; + + // Cancel any in-flight ONNX segmentation (best-effort). + onnxSegRunIdRef.current++; + setOnnxSegRunning(false); + setAllowUnsafeOnnxFullRes(false); + setOnnxStatus((s) => (s.loading ? { ...s, loading: false } : s)); + }, [volume]); + + const hasLabels = useMemo(() => { + if (!volume) return false; + if (!labels) return false; + + const [nx, ny, nz] = volume.dims; + const [lx, ly, lz] = labels.dims; + if (nx !== lx || ny !== ly || nz !== lz) return false; + + return labels.data.length === nx * ny * nz; + }, [labels, volume]); + + const labelMetrics = useMemo(() => { + if (!volume) return null; + if (!labels) return null; + if (!hasLabels) return null; + + const counts = new Map (null); + const [inspectPlane, setInspectPlane] = useState<'axial' | 'coronal' | 'sagittal'>('axial'); + const [inspectIndex, setInspectIndex] = useState(0); + + const paramsRef = useRef({ threshold, steps, gamma, opacity, zoom, labelsEnabled, labelMix, hasLabels }); + useEffect(() => { + paramsRef.current = { threshold, steps, gamma, opacity, zoom, labelsEnabled, labelMix, hasLabels }; + }, [gamma, hasLabels, labelMix, labelsEnabled, opacity, steps, threshold, zoom]); + + const rotationRef = useRef ([0, 0, 0, 1]); + + const { boxScale, volDims } = useMemo(() => { + if (!volume) { + return { + volDims: { nx: 1, ny: 1, nz: 1 }, + boxScale: [1, 1, 1] as const, + }; + } + + const [nx, ny, nz] = volume.dims; + const maxDim = Math.max(1, nx, ny, nz); + return { + volDims: { nx, ny, nz }, + boxScale: [nx / maxDim, ny / maxDim, nz / maxDim] as const, + }; + }, [volume]); + + const renderPlan = useMemo(() => { + if (!volume) return null; + + return computeRenderPlan({ + srcDims: volDims, + labelsEnabled, + hasLabels, + budgetMiB: renderGpuBudgetMiB, + quality: renderQuality, + textureMode: renderTextureMode, + }); + }, [hasLabels, labelsEnabled, renderGpuBudgetMiB, renderQuality, renderTextureMode, volume, volDims]); + + const renderBuildKey = useMemo(() => { + if (!renderPlan) return null; + const d = renderPlan.dims; + return `${renderPlan.kind}:${d.nx}x${d.ny}x${d.nz}`; + }, [renderPlan]); + + useEffect(() => { + if (!volume || !renderPlan || !renderBuildKey) { + setRenderBuild({ status: 'idle', key: null, data: null }); + return; + } + + setInitError(null); + + const key = renderBuildKey; + + const srcDims: RenderDims = volDims; + const dstDims: RenderDims = renderPlan.dims; + + const isSameDims = srcDims.nx === dstDims.nx && srcDims.ny === dstDims.ny && srcDims.nz === dstDims.nz; + + // Preserve the fast-path: full-res float uses the SVR volume buffer directly (no extra allocations). + if (isSameDims && renderPlan.kind === 'f32') { + setRenderBuild({ + status: 'ready', + key, + data: { kind: 'f32', dims: dstDims, data: volume.data }, + buildMs: 0, + }); + return; + } + + const buildId = ++renderBuildIdRef.current; + const started = performance.now(); + + setRenderBuild({ status: 'building', key, data: null }); + + void (async () => { + try { + const isCancelled = () => renderBuildIdRef.current !== buildId; + + const tex = await buildRenderVolumeTexData({ + src: volume.data, + srcDims, + plan: { kind: renderPlan.kind, dims: dstDims }, + isCancelled, + }); + + if (renderBuildIdRef.current !== buildId) return; + + const ms = Math.round(performance.now() - started); + setRenderBuild({ + status: 'ready', + key, + data: tex, + buildMs: ms, + }); + } catch (e) { + if (renderBuildIdRef.current !== buildId) return; + const msg = e instanceof Error ? e.message : String(e); + setRenderBuild({ status: 'error', key, data: null, error: msg }); + } + })(); + }, [renderBuildKey, renderPlan, volume, volDims]); + + const resetView = useCallback(() => { + rotationRef.current = [0, 0, 0, 1]; + setZoom(1.0); + }, []); + + useImperativeHandle( + ref, + () => ({ + capture3dPng: () => { + if (!volume) return Promise.resolve(null); + if (!canvasRef.current) return Promise.resolve(null); + + return new Promise ((resolve) => { + // Only allow one pending capture; resolve any previous request. + if (pendingCapture3dRef.current) { + pendingCapture3dRef.current.resolve(null); + } + + pendingCapture3dRef.current = { resolve }; + + // Safety: don't leave callers hanging if the GL loop isn't running. + window.setTimeout(() => { + if (pendingCapture3dRef.current?.resolve === resolve) { + pendingCapture3dRef.current = null; + resolve(null); + } + }, 1500); + }); + }, + applyHarnessPreset: () => { + // Stable defaults for harness screenshots. + setThreshold(0.05); + setGamma(1.0); + setOpacity(4.0); + + // Keep the 3D render memory bounded for harness runs. + setRenderQuality(DEFAULT_RENDER_QUALITY); + setRenderGpuBudgetMiB(DEFAULT_RENDER_GPU_BUDGET_MIB); + setRenderTextureMode(DEFAULT_RENDER_TEXTURE_MODE); + + setControlsCollapsed(false); + resetView(); + }, + }), + [resetView, volume], + ); + + // Pointer drag rotation (viewport-relative yaw/pitch). + // + // Goal: keep controls constant relative to the viewport: + // - horizontal mouse movement => yaw about screen vertical axis + // - vertical mouse movement => pitch about screen horizontal axis + const dragRef = useRef<{ lastX: number; lastY: number; pointerId: number } | null>(null); + + const onPointerDown = useCallback((e: React.PointerEvent) => { + const canvas = canvasRef.current; + if (!canvas) return; + + dragRef.current = { + lastX: e.clientX, + lastY: e.clientY, + pointerId: e.pointerId, + }; + + canvas.setPointerCapture(e.pointerId); + e.preventDefault(); + e.stopPropagation(); + }, []); + + const onPointerMove = useCallback((e: React.PointerEvent) => { + const canvas = canvasRef.current; + const d = dragRef.current; + if (!canvas || !d || d.pointerId !== e.pointerId) return; + + const dx = e.clientX - d.lastX; + const dy = e.clientY - d.lastY; + + d.lastX = e.clientX; + d.lastY = e.clientY; + + const minDim = Math.max(1, Math.min(canvas.clientWidth, canvas.clientHeight)); + const anglePerPx = Math.PI / minDim; + + // Apply *delta* rotations about fixed viewport/world axes. + // + // Important: composing absolute yaw/pitch as `R = R_pitch * R_yaw` makes yaw behave like a local-axis + // rotation once pitch != 0 (unintuitive). Pre-multiplying the current rotation with world-axis deltas + // keeps both axes fixed relative to the viewport. + // NOTE: positive clientY is down, so `deltaPitch = +dy` feels like “drag down -> tilt down”. + const deltaYaw = dx * anglePerPx; + const deltaPitch = dy * anglePerPx; + + const qYaw = quatFromAxisAngle({ x: 0, y: 1, z: 0 }, deltaYaw); + const qPitch = quatFromAxisAngle({ x: 1, y: 0, z: 0 }, deltaPitch); + + // Apply yaw first (screen vertical axis), then pitch (screen horizontal axis). + const qDelta = quatMultiply(qPitch, qYaw); + rotationRef.current = quatNormalize(quatMultiply(qDelta, rotationRef.current)); + + e.preventDefault(); + e.stopPropagation(); + }, []); + + const onPointerUp = useCallback((e: React.PointerEvent) => { + if (dragRef.current?.pointerId === e.pointerId) { + dragRef.current = null; + } + e.preventDefault(); + e.stopPropagation(); + }, []); + + // Mousewheel zoom on the canvas. + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + + const onWheel = (e: WheelEvent) => { + if (!Number.isFinite(e.deltaY) || e.deltaY === 0) return; + + // Multiplicative zoom feels better across trackpads (small deltas) and mouse wheels (large deltas). + const factor = Math.exp(-e.deltaY * 0.001); + setZoom((z) => clamp(z * factor, 0.6, 10.0)); + + e.preventDefault(); + e.stopPropagation(); + }; + + canvas.addEventListener('wheel', onWheel, { passive: false }); + return () => canvas.removeEventListener('wheel', onWheel); + }, []); + + const inspectorInfo = useMemo(() => { + if (!volume) { + return { + maxIndex: 0, + srcRows: 1, + srcCols: 1, + }; + } + + const [nx, ny, nz] = volume.dims; + + if (inspectPlane === 'axial') { + return { + maxIndex: Math.max(0, nz - 1), + srcRows: ny, + srcCols: nx, + }; + } + + if (inspectPlane === 'coronal') { + return { + maxIndex: Math.max(0, ny - 1), + srcRows: nz, + srcCols: nx, + }; + } + + // sagittal + return { + maxIndex: Math.max(0, nx - 1), + srcRows: nz, + srcCols: ny, + }; + }, [inspectPlane, volume]); + + // Default the inspector to the mid-slice when the volume or plane changes. + useEffect(() => { + if (!volume) return; + setInspectIndex(Math.floor(inspectorInfo.maxIndex / 2)); + }, [inspectPlane, inspectorInfo.maxIndex, volume]); + + const inspectorPointerToVoxel = useCallback( + (e: React.PointerEvent ): Vec3i | null => { + if (!volume) return null; + + const rect = e.currentTarget.getBoundingClientRect(); + const w = Math.max(1, rect.width); + const h = Math.max(1, rect.height); + + const u = (e.clientX - rect.left) / w; + const v = (e.clientY - rect.top) / h; + + const srcCols = inspectorInfo.srcCols; + const srcRows = inspectorInfo.srcRows; + const sliceIdx = Math.round(clamp(inspectIndex, 0, inspectorInfo.maxIndex)); + + const sx = Math.round(clamp(u, 0, 1) * Math.max(0, srcCols - 1)); + const sy = Math.round(clamp(v, 0, 1) * Math.max(0, srcRows - 1)); + + if (inspectPlane === 'axial') { + return { x: sx, y: sy, z: sliceIdx }; + } + + if (inspectPlane === 'coronal') { + return { x: sx, y: sliceIdx, z: sy }; + } + + // sagittal + return { x: sliceIdx, y: sx, z: sy }; + }, + [inspectIndex, inspectPlane, inspectorInfo.maxIndex, inspectorInfo.srcCols, inspectorInfo.srcRows, volume], + ); + + const computeRoiBoundsFromSliceVoxels = useCallback( + (a: Vec3i, b: Vec3i): { min: Vec3i; max: Vec3i } | null => { + if (!volume) return null; + + // Convert the 2D drag rectangle into a bounded 3D "cube" centered on the current inspector slice. + // This keeps the ROI as a meaningful spatial prior (instead of spanning the full depth). + const axisIndex = Math.round(clamp(inspectIndex, 0, inspectorInfo.maxIndex)); + + return computeRoiCubeBoundsFromSliceDrag({ + plane: inspectPlane, + dims: volume.dims, + voxelSizeMm: volume.voxelSizeMm, + sliceIndex: axisIndex, + a, + b, + depthScale: 1, + }); + }, + [inspectIndex, inspectPlane, inspectorInfo.maxIndex, volume], + ); + + type StartSeedGrowParams = { + seed?: Vec3i; + tolerance?: number; + targetLabel?: BratsBaseLabelId; + roiBounds?: { min: Vec3i; max: Vec3i } | null; + roiOutsideScale?: number; + auto?: boolean; + }; + + const cancelSeedGrow = useCallback((message?: string) => { + growRunIdRef.current++; + growAbortRef.current?.abort(); + growAbortRef.current = null; + + if (growAutoTimerRef.current !== null) { + window.clearTimeout(growAutoTimerRef.current); + growAutoTimerRef.current = null; + } + + setGrowStatus({ running: false, message: message ?? 'Cancelled' }); + }, []); + + const startSeedGrow = useCallback( + (params?: StartSeedGrowParams) => { + if (!volume) return; + if (onnxSegRunning) return; + + const roiBounds = params && 'roiBounds' in params ? (params.roiBounds ?? null) : growRoiBounds; + if (!roiBounds) { + setGrowStatus({ running: false, error: 'Draw an ROI box in the slice inspector first.' }); + return; + } + + // Use a single seed at the ROI center. + const seed: Vec3i = { + x: Math.floor((roiBounds.min.x + roiBounds.max.x) * 0.5), + y: Math.floor((roiBounds.min.y + roiBounds.max.y) * 0.5), + z: Math.floor((roiBounds.min.z + roiBounds.max.z) * 0.5), + }; + + const tolerance = params?.tolerance ?? growTolerance; + const targetLabel = params?.targetLabel ?? growTargetLabel; + + const roiOutsideScale = params?.roiOutsideScale ?? growRoiOutsideScale; + + const isAuto = params?.auto ?? false; + + if (growAutoTimerRef.current !== null) { + window.clearTimeout(growAutoTimerRef.current); + growAutoTimerRef.current = null; + } + + growAbortRef.current?.abort(); + + const controller = new AbortController(); + growAbortRef.current = controller; + + const runId = ++growRunIdRef.current; + + setGrowStatus({ running: true, message: isAuto ? 'Previewing…' : 'Growing…' }); + + const [nx, ny, nz] = volume.dims; + const strideZ = nx * ny; + const seedIdx = seed.z * strideZ + seed.y * nx + seed.x; + const seedValue = volume.data[seedIdx] ?? 0; + + const { min, max } = computeSeedRange01({ seedValue, tolerance }); + + const maxVoxels = (() => { + const rx = Math.abs(roiBounds.max.x - roiBounds.min.x) + 1; + const ry = Math.abs(roiBounds.max.y - roiBounds.min.y) + 1; + const rz = Math.abs(roiBounds.max.z - roiBounds.min.z) + 1; + const roiVoxels = rx * ry * rz; + + // Prefer sizing relative to the ROI so we don't allocate enormous output buffers. + // Allow some slack for guide-mode margin expansion. + return Math.min(volume.data.length, Math.min(Math.max(roiVoxels * 4, 50_000), 2_000_000)); + })(); + + const roi: RegionGrow3DRoi = { + mode: 'guide', + min: roiBounds.min, + max: roiBounds.max, + outsideToleranceScale: roiOutsideScale, + }; + + const volumeKey = `${nx}x${ny}x${nz}`; + const seedKey = `${seed.x},${seed.y},${seed.z}:${targetLabel}`; + + // Keep one working label buffer per volume. When the seed/target changes, we "commit" the + // previous preview by dropping its bookkeeping (prevIndices/prevValues). + let overlay = growOverlayRef.current; + if (!overlay || overlay.key !== volumeKey) { + const workLabels = hasLabels && labels ? new Uint8Array(labels.data) : new Uint8Array(volume.data.length); + overlay = { key: volumeKey, seedKey, workLabels, prevIndices: null, prevValues: null }; + growOverlayRef.current = overlay; + } else if (overlay.seedKey !== seedKey) { + overlay.seedKey = seedKey; + overlay.prevIndices = null; + overlay.prevValues = null; + } + + const yieldEvery = isAuto ? 60_000 : 160_000; + + const debugGrow3d = + typeof localStorage !== 'undefined' && localStorage.getItem('miraviewer:debug-grow3d') === '1'; + + const growPromise = regionGrow3D_v2({ + volume: volume.data, + dims: volume.dims, + seed, + min, + max, + roi, + opts: { + signal: controller.signal, + maxVoxels, + connectivity: 6, + yieldEvery, + debug: debugGrow3d, + onProgress: (p) => { + const prefix = isAuto ? 'Previewing…' : 'Growing…'; + setGrowStatus((s) => (s.running ? { ...s, message: `${prefix} ${p.queued.toLocaleString()} voxels` } : s)); + }, + }, + }); + + void growPromise + .then((res) => { + if (controller.signal.aborted) return; + if (growRunIdRef.current !== runId) return; + + const o = growOverlayRef.current; + if (!o || o.key !== volumeKey || o.seedKey !== seedKey) return; + + // Restore the previous preview region (sparse). + if (o.prevIndices && o.prevValues && o.prevValues.length === o.prevIndices.length) { + const prev = o.prevIndices; + const vals = o.prevValues; + for (let i = 0; i < prev.length; i++) { + o.workLabels[prev[i]!] = vals[i] ?? 0; + } + } + + // Apply the new preview, capturing previous values so we can restore on the next update. + const idx = res.indices; + const nextPrevValues = new Uint8Array(idx.length); + for (let i = 0; i < idx.length; i++) { + const vi = idx[i]!; + nextPrevValues[i] = o.workLabels[vi] ?? 0; + o.workLabels[vi] = targetLabel; + } + o.prevIndices = idx; + o.prevValues = nextPrevValues; + + setGeneratedLabels({ data: o.workLabels, dims: volume.dims, meta: BRATS_BASE_LABEL_META }); + + setGrowStatus({ + running: false, + message: `Seed ${seedValue.toFixed(3)} ±${tolerance.toFixed(3)} → ${res.count.toLocaleString()} voxels${ + res.hitMaxVoxels ? ' (hit limit)' : '' + } · ROI decay`, + }); + }) + .catch((e) => { + if (controller.signal.aborted) return; + if (growRunIdRef.current !== runId) return; + const msg = e instanceof Error ? e.message : String(e); + setGrowStatus({ running: false, error: msg }); + }) + .finally(() => { + if (growAbortRef.current === controller) { + growAbortRef.current = null; + } + }); + }, + [ + growRoiBounds, + growRoiOutsideScale, + growTargetLabel, + growTolerance, + hasLabels, + labels, + onnxSegRunning, + volume, + ], + ); + + const scheduleSeedGrow = useCallback( + (params?: Omit ) => { + if (!volume) return; + if (onnxSegRunning) return; + + const voxel = inspectorPointerToVoxel(e); + if (!voxel) return; + + sliceInspectorDragRef.current = { + pointerId: e.pointerId, + startClientX: e.clientX, + startClientY: e.clientY, + startVoxel: voxel, + lastVoxel: voxel, + draggingRoi: false, + }; + + setGrowRoiDraftBounds(null); + + e.currentTarget.setPointerCapture(e.pointerId); + e.preventDefault(); + e.stopPropagation(); + }, + [inspectorPointerToVoxel, onnxSegRunning, volume], + ); + + const onSliceInspectorPointerMove = useCallback( + (e: React.PointerEvent ) => { + const drag = sliceInspectorDragRef.current; + if (!drag || drag.pointerId !== e.pointerId) return; + + const voxel = inspectorPointerToVoxel(e); + if (voxel) { + drag.lastVoxel = voxel; + } + + const dx = e.clientX - drag.startClientX; + const dy = e.clientY - drag.startClientY; + const dist2 = dx * dx + dy * dy; + + // Promote from click -> drag when the pointer moves a little. + if (!drag.draggingRoi && dist2 >= 16) { + drag.draggingRoi = true; + } + + if (drag.draggingRoi && voxel) { + setGrowRoiDraftBounds(computeRoiBoundsFromSliceVoxels(drag.startVoxel, voxel)); + } + + e.preventDefault(); + e.stopPropagation(); + }, + [computeRoiBoundsFromSliceVoxels, inspectorPointerToVoxel], + ); + + const onSliceInspectorPointerUp = useCallback( + (e: React.PointerEvent ) => { + const drag = sliceInspectorDragRef.current; + if (!drag || drag.pointerId !== e.pointerId) return; + + sliceInspectorDragRef.current = null; + + const voxel = inspectorPointerToVoxel(e) ?? drag.lastVoxel; + if (!voxel) return; + + if (drag.draggingRoi) { + const bounds = computeRoiBoundsFromSliceVoxels(drag.startVoxel, voxel); + setGrowRoiDraftBounds(null); + if (bounds) { + setGrowRoiBounds(bounds); + + const seed: Vec3i = { + x: Math.floor((bounds.min.x + bounds.max.x) * 0.5), + y: Math.floor((bounds.min.y + bounds.max.y) * 0.5), + z: Math.floor((bounds.min.z + bounds.max.z) * 0.5), + }; + setSeedVoxel(seed); + + if (growAuto) { + startSeedGrow({ auto: true, roiBounds: bounds, seed }); + } + } + } else { + // No single-click seeding: box draw is required. + setGrowRoiDraftBounds(null); + } + + e.preventDefault(); + e.stopPropagation(); + }, + [computeRoiBoundsFromSliceVoxels, growAuto, inspectorPointerToVoxel, startSeedGrow], + ); + + const onSliceInspectorPointerCancel = useCallback((e: React.PointerEvent ) => { + const drag = sliceInspectorDragRef.current; + if (!drag || drag.pointerId !== e.pointerId) return; + + sliceInspectorDragRef.current = null; + setGrowRoiDraftBounds(null); + + e.preventDefault(); + e.stopPropagation(); + }, []); + + const onnxPreflight = useMemo(() => { + if (!volume) return null; + + const [nx, ny, nz] = volume.dims; + const nvox = nx * ny * nz; + + // Lower-bound estimate: logits are float32 with C channels. + const logitsBytes = nvox * ONNX_PREFLIGHT_CLASS_COUNT * 4; + const inputBytes = nvox * 4; + + const blockedByDefault = logitsBytes > ONNX_PREFLIGHT_LOGITS_BUDGET_BYTES; + + return { nx, ny, nz, nvox, logitsBytes, inputBytes, blockedByDefault }; + }, [volume]); + + const onnxUploadClick = useCallback(() => { + onnxFileInputRef.current?.click(); + }, []); + + const onnxClearModel = useCallback(() => { + releaseOnnxSession('clear-model'); + setOnnxStatus((s) => ({ + ...s, + sessionReady: false, + loading: true, + message: 'Clearing cached model…', + error: undefined, + })); + + void deleteModelBlob(ONNX_TUMOR_MODEL_KEY) + .then(() => { + setOnnxStatus((s) => ({ ...s, loading: false, message: 'Cleared cached model' })); + refreshOnnxCacheStatus(); + }) + .catch((e) => { + const msg = e instanceof Error ? e.message : String(e); + setOnnxStatus((s) => ({ ...s, loading: false, error: msg })); + }); + }, [refreshOnnxCacheStatus, releaseOnnxSession]); + + const onnxHandleSelectedFile = useCallback( + (file: File) => { + releaseOnnxSession('upload-model'); + setOnnxStatus((s) => ({ + ...s, + loading: true, + sessionReady: false, + message: `Caching model: ${file.name}`, + error: undefined, + })); + + void putModelBlob(ONNX_TUMOR_MODEL_KEY, file) + .then(() => { + setOnnxStatus((s) => ({ ...s, loading: false, message: 'Model cached' })); + refreshOnnxCacheStatus(); + }) + .catch((e) => { + const msg = e instanceof Error ? e.message : String(e); + setOnnxStatus((s) => ({ ...s, loading: false, error: msg })); + }); + }, + [refreshOnnxCacheStatus, releaseOnnxSession], + ); + + const ensureOnnxSession = useCallback(async (): Promise<{ session: Ort.InferenceSession; mode: OnnxSessionMode }> => { + if (onnxSessionRef.current) { + return { + session: onnxSessionRef.current, + mode: onnxSessionModeRef.current ?? 'webgpu-preferred', + }; + } + + const blob = await getModelBlob(ONNX_TUMOR_MODEL_KEY); + if (!blob) { + throw new Error('No cached ONNX model found. Upload one first.'); + } + + try { + const session = await createOrtSessionFromModelBlob({ model: blob, preferWebGpu: true, logLevel: 'warning' }); + onnxSessionRef.current = session; + onnxSessionModeRef.current = 'webgpu-preferred'; + return { session, mode: 'webgpu-preferred' }; + } catch { + // Fallback to WASM-only. + const session = await createOrtSessionFromModelBlob({ model: blob, preferWebGpu: false, logLevel: 'warning' }); + onnxSessionRef.current = session; + onnxSessionModeRef.current = 'wasm'; + return { session, mode: 'wasm' }; + } + }, []); + + const initOnnxSession = useCallback(() => { + setOnnxStatus((s) => ({ ...s, loading: true, message: 'Initializing ONNX runtime…', error: undefined })); + + void ensureOnnxSession() + .then(({ mode }) => { + setOnnxStatus((s) => ({ + ...s, + loading: false, + sessionReady: true, + message: mode === 'wasm' ? 'ONNX session ready (WASM)' : 'ONNX session ready (WebGPU preferred)', + })); + }) + .catch((e) => { + const msg = e instanceof Error ? e.message : String(e); + setOnnxStatus((s) => ({ ...s, loading: false, sessionReady: false, error: msg })); + }); + }, [ensureOnnxSession]); + + const runOnnxSegmentation = useCallback(() => { + if (!volume) return; + + // Guardrail: full-res ONNX on huge volumes can OOM the tab. + if (onnxPreflight?.blockedByDefault && !allowUnsafeOnnxFullRes) { + const dims = `${onnxPreflight.nx}×${onnxPreflight.ny}×${onnxPreflight.nz}`; + const msg = `ONNX blocked for huge volume by default (${dims}; est logits ${formatMiB(onnxPreflight.logitsBytes)}). Re-run SVR at lower resolution/ROI or enable the unsafe override.`; + setOnnxStatus((s) => ({ ...s, loading: false, error: msg })); + return; + } + + const runId = ++onnxSegRunIdRef.current; + setOnnxSegRunning(true); + + const started = performance.now(); + setOnnxStatus((s) => ({ ...s, loading: true, message: 'Running ONNX segmentation…', error: undefined })); + + void (async () => { + try { + const { session, mode } = await ensureOnnxSession(); + if (onnxSegRunIdRef.current !== runId) return; + + setOnnxStatus((s) => ({ + ...s, + sessionReady: true, + loading: true, + message: + mode === 'wasm' ? 'Running ONNX segmentation… (WASM)' : 'Running ONNX segmentation… (WebGPU preferred)', + })); + + const res = await runTumorSegmentationOnnx({ session, volume: volume.data, dims: volume.dims }); + if (onnxSegRunIdRef.current !== runId) return; + + setGeneratedLabels({ data: res.labels, dims: volume.dims, meta: BRATS_BASE_LABEL_META }); + + const ms = Math.round(performance.now() - started); + setOnnxStatus((s) => ({ + ...s, + loading: false, + sessionReady: true, + message: `Segmentation complete (${ms}ms)`, + })); + } catch (e) { + if (onnxSegRunIdRef.current !== runId) return; + const msg = e instanceof Error ? e.message : String(e); + const hasSession = onnxSessionRef.current !== null; + setOnnxStatus((s) => ({ ...s, loading: false, sessionReady: hasSession, error: msg })); + } finally { + if (onnxSegRunIdRef.current === runId) { + setOnnxSegRunning(false); + } + } + })(); + }, [allowUnsafeOnnxFullRes, ensureOnnxSession, onnxPreflight, volume]); + + const cancelOnnxSegmentation = useCallback(() => { + if (!onnxSegRunning) return; + onnxSegRunIdRef.current++; + setOnnxSegRunning(false); + setOnnxStatus((s) => ({ ...s, loading: false, message: 'Segmentation cancelled', error: undefined })); + }, [onnxSegRunning]); + + // Draw the inspector slice to a 2D canvas. + useEffect(() => { + const canvas = sliceCanvasRef.current; + if (!canvas) return; + if (!volume) return; + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const [nx, ny, nz] = volume.dims; + const data = volume.data; + + const idx = Math.round(clamp(inspectIndex, 0, inspectorInfo.maxIndex)); + + const srcRows = inspectorInfo.srcRows; + const srcCols = inspectorInfo.srcCols; + + const src = new Float32Array(srcRows * srcCols); + + const strideY = nx; + const strideZ = nx * ny; + + if (inspectPlane === 'axial') { + const z = idx; + const zBase = z * strideZ; + for (let y = 0; y < ny; y++) { + const inBase = zBase + y * strideY; + const outBase = y * nx; + for (let x = 0; x < nx; x++) { + src[outBase + x] = data[inBase + x] ?? 0; + } + } + } else if (inspectPlane === 'coronal') { + const y = idx; + for (let z = 0; z < nz; z++) { + const inBase = z * strideZ + y * strideY; + const outBase = z * nx; + for (let x = 0; x < nx; x++) { + src[outBase + x] = data[inBase + x] ?? 0; + } + } + } else { + // sagittal + const x = idx; + for (let z = 0; z < nz; z++) { + const zBase = z * strideZ; + const outBase = z * ny; + for (let y = 0; y < ny; y++) { + src[outBase + y] = data[zBase + y * strideY + x] ?? 0; + } + } + } + + // Downsample for interactive rendering (avoid huge canvases). + const MAX_SIZE = 256; + const maxDim = Math.max(srcRows, srcCols); + const scale = maxDim > MAX_SIZE ? MAX_SIZE / maxDim : 1; + const dsRows = Math.max(1, Math.round(srcRows * scale)); + const dsCols = Math.max(1, Math.round(srcCols * scale)); + + const down = resample2dAreaAverage(src, srcRows, srcCols, dsRows, dsCols); + + if (canvas.width !== dsCols) canvas.width = dsCols; + if (canvas.height !== dsRows) canvas.height = dsRows; + + const img = ctx.createImageData(dsCols, dsRows); + const out = img.data; + + const overlayAlpha = hasLabels && labelsEnabled ? clamp(labelMix, 0, 1) : 0; + const palette = hasLabels && labelsEnabled && labels ? buildRgbaPalette256(labels.meta) : null; + + for (let i = 0; i < down.length; i++) { + const v = down[i] ?? 0; + const b0 = Math.round(clamp(v, 0, 1) * 255); + + let r = b0; + let g = b0; + let b = b0; + + if (palette && overlayAlpha > 0 && labels) { + const px = i % dsCols; + const py = Math.floor(i / dsCols); + + const srcX = dsCols > 1 ? Math.round((px / (dsCols - 1)) * (srcCols - 1)) : 0; + const srcY = dsRows > 1 ? Math.round((py / (dsRows - 1)) * (srcRows - 1)) : 0; + + let vx = 0; + let vy = 0; + let vz = 0; + + if (inspectPlane === 'axial') { + vx = srcX; + vy = srcY; + vz = idx; + } else if (inspectPlane === 'coronal') { + vx = srcX; + vy = idx; + vz = srcY; + } else { + // sagittal + vx = idx; + vy = srcX; + vz = srcY; + } + + const labelId = labels.data[vz * strideZ + vy * strideY + vx] ?? 0; + if (labelId !== 0) { + const o = labelId * 4; + const lr = palette[o] ?? 0; + const lg = palette[o + 1] ?? 0; + const lb = palette[o + 2] ?? 0; + + const a = overlayAlpha; + r = Math.round((1 - a) * r + a * lr); + g = Math.round((1 - a) * g + a * lg); + b = Math.round((1 - a) * b + a * lb); + } + } + + const j = i * 4; + out[j] = r; + out[j + 1] = g; + out[j + 2] = b; + out[j + 3] = 255; + } + + ctx.putImageData(img, 0, 0); + + // Draw a small crosshair for the current seed (if it lies on the current inspector slice). + if (seedVoxel) { + const isOnSlice = + inspectPlane === 'axial' + ? seedVoxel.z === idx + : inspectPlane === 'coronal' + ? seedVoxel.y === idx + : seedVoxel.x === idx; + + if (isOnSlice) { + const seedCol = inspectPlane === 'axial' ? seedVoxel.x : inspectPlane === 'coronal' ? seedVoxel.x : seedVoxel.y; + const seedRow = inspectPlane === 'axial' ? seedVoxel.y : inspectPlane === 'coronal' ? seedVoxel.z : seedVoxel.z; + + const cx = srcCols > 1 ? (seedCol / (srcCols - 1)) * (dsCols - 1) : 0; + const cy = srcRows > 1 ? (seedRow / (srcRows - 1)) * (dsRows - 1) : 0; + + ctx.save(); + ctx.strokeStyle = 'rgba(255, 80, 80, 0.95)'; + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(cx - 6, cy); + ctx.lineTo(cx + 6, cy); + ctx.moveTo(cx, cy - 6); + ctx.lineTo(cx, cy + 6); + ctx.stroke(); + ctx.restore(); + } + } + + const drawRoiBounds = (bounds: { min: Vec3i; max: Vec3i }, opts: { stroke: string; fill?: string; dashed?: boolean }) => { + const toCanvasX = (col: number) => (srcCols > 1 ? (col / (srcCols - 1)) * (dsCols - 1) : 0); + const toCanvasY = (row: number) => (srcRows > 1 ? (row / (srcRows - 1)) * (dsRows - 1) : 0); + + let col0 = 0; + let col1 = 0; + let row0 = 0; + let row1 = 0; + + if (inspectPlane === 'axial') { + col0 = bounds.min.x; + col1 = bounds.max.x; + row0 = bounds.min.y; + row1 = bounds.max.y; + } else if (inspectPlane === 'coronal') { + col0 = bounds.min.x; + col1 = bounds.max.x; + row0 = bounds.min.z; + row1 = bounds.max.z; + } else { + // sagittal + col0 = bounds.min.y; + col1 = bounds.max.y; + row0 = bounds.min.z; + row1 = bounds.max.z; + } + + const x0 = toCanvasX(col0); + const x1 = toCanvasX(col1); + const y0 = toCanvasY(row0); + const y1 = toCanvasY(row1); + + const left = Math.min(x0, x1); + const right = Math.max(x0, x1); + const top = Math.min(y0, y1); + const bottom = Math.max(y0, y1); + + const w = right - left; + const h = bottom - top; + + ctx.save(); + if (opts.dashed) ctx.setLineDash([4, 3]); + + if (opts.fill) { + ctx.fillStyle = opts.fill; + ctx.fillRect(left, top, w, h); + } + + ctx.strokeStyle = opts.stroke; + ctx.lineWidth = 1; + ctx.strokeRect(left, top, w, h); + ctx.restore(); + }; + + const roiIntersectsCurrentSlice = (bounds: { min: Vec3i; max: Vec3i }): boolean => { + if (inspectPlane === 'axial') { + return idx >= bounds.min.z && idx <= bounds.max.z; + } + if (inspectPlane === 'coronal') { + return idx >= bounds.min.y && idx <= bounds.max.y; + } + return idx >= bounds.min.x && idx <= bounds.max.x; + }; + + if (growRoiBounds && roiIntersectsCurrentSlice(growRoiBounds)) { + drawRoiBounds(growRoiBounds, { + stroke: 'rgba(0, 220, 255, 0.95)', + fill: 'rgba(0, 220, 255, 0.08)', + }); + } + + if (growRoiDraftBounds && roiIntersectsCurrentSlice(growRoiDraftBounds)) { + drawRoiBounds(growRoiDraftBounds, { + stroke: 'rgba(255, 210, 0, 0.95)', + fill: 'rgba(255, 210, 0, 0.06)', + dashed: true, + }); + } + }, [ + growRoiBounds, + growRoiDraftBounds, + hasLabels, + inspectIndex, + inspectPlane, + inspectorInfo.maxIndex, + inspectorInfo.srcCols, + inspectorInfo.srcRows, + labelMix, + labels, + labelsEnabled, + seedVoxel, + volume, + ]); + + useEffect(() => { + setInitError(null); + + const canvas = canvasRef.current; + if (!canvas) return; + + if (!volume) { + // No volume yet; nothing to initialize. + return; + } + + if (renderBuild.status !== 'ready' || !renderBuild.data) { + // Render volume is still being prepared (or failed). + return; + } + + const renderTex = renderBuild.data; + const texDims = renderTex.dims; + + const gl = canvas.getContext('webgl2', { + antialias: true, + alpha: false, + depth: false, + stencil: false, + preserveDrawingBuffer: false, + }); + + if (!gl) { + setInitError('WebGL2 is not available in this browser/environment.'); + return; + } + + // Prefer float textures for fidelity; fall back to 8-bit if unavailable. + const { primary, fallback } = chooseVolumeTextureFormat(gl); + + const vsSrc = `#version 300 es +in vec2 a_pos; +out vec2 v_uv; +void main() { + v_uv = a_pos * 0.5 + 0.5; + gl_Position = vec4(a_pos, 0.0, 1.0); +}`; + + const fsSrc = `#version 300 es +precision highp float; +precision highp sampler3D; +precision highp usampler3D; +precision highp sampler2D; + +in vec2 v_uv; +out vec4 outColor; + +uniform sampler3D u_vol; +uniform usampler3D u_labels; +uniform sampler2D u_palette; +uniform int u_labelsEnabled; +uniform float u_labelMix; + +uniform mat3 u_rot; +uniform vec3 u_box; +uniform float u_aspect; +uniform float u_zoom; +uniform float u_thr; +uniform int u_steps; +uniform float u_gamma; +uniform float u_opacity; +uniform vec3 u_texel; + +const float CAM_Z = ${SVR3D_CAMERA_Z}; +const float FOCAL_Z = ${SVR3D_FOCAL_Z}; + +float saturate(float x) { + return clamp(x, 0.0, 1.0); +} + +float radial01(vec3 pos) { + // pos is in object space centered at the volume centroid. + // Normalize by the half box extents so that r=1 is approximately the box surface (clamped). + vec3 halfBox = 0.5 * u_box; + vec3 q = pos / max(halfBox, vec3(1e-6)); + return saturate(length(q)); +} + +bool intersectBox(vec3 ro, vec3 rd, vec3 bmin, vec3 bmax, out float t0, out float t1) { + vec3 invD = 1.0 / rd; + vec3 tbot = (bmin - ro) * invD; + vec3 ttop = (bmax - ro) * invD; + vec3 tmin = min(ttop, tbot); + vec3 tmax = max(ttop, tbot); + t0 = max(max(tmin.x, tmin.y), tmin.z); + t1 = min(min(tmax.x, tmax.y), tmax.z); + return t1 >= max(t0, 0.0); +} + +void main() { + // NDC in [-1, 1] + vec2 p = v_uv * 2.0 - 1.0; + p.x *= u_aspect; + p /= max(1e-3, u_zoom); + + // World/view ray + vec3 roW = vec3(0.0, 0.0, CAM_Z); + vec3 rdW = normalize(vec3(p, -FOCAL_Z)); + + // Rotate ray into volume/object space (volume is rotated by u_rot). + mat3 invR = transpose(u_rot); + vec3 ro = invR * roW; + vec3 rd = invR * rdW; + + vec3 bmin = -0.5 * u_box; + vec3 bmax = 0.5 * u_box; + + float t0; + float t1; + if (!intersectBox(ro, rd, bmin, bmax, t0, t1)) { + outColor = vec4(0.0, 0.0, 0.0, 1.0); + return; + } + + // Raymarch (front-to-back compositing) + const int MAX_STEPS = 256; + int n = clamp(u_steps, 8, MAX_STEPS); + float dt = (t1 - t0) / float(n); + + // Radial prior + gradient-based shading. + // + // Prior: the center of the box is more likely to contain the structure of interest. + // We use that to: + // - keep the intensity threshold low near the center and higher near the edges + // - boost edge shading near the center + // + // NOTE: Use *linear* radial ramps for predictability. + const float EDGE_K = 14.0; + const float CENTER_EDGE_GAIN = 2.5; + + vec3 accum = vec3(0.0); + float aAccum = 0.0; + + float t = max(t0, 0.0); + + // View direction in object space (toward the camera). + vec3 vDir = normalize(-rd); + + for (int i = 0; i < MAX_STEPS; i++) { + if (i >= n) break; + vec3 pos = ro + rd * (t + float(i) * dt); + + // Map object-space box to texture coords [0,1] + vec3 tc = pos / u_box + 0.5; + + float r = radial01(pos); + + // thrW ramps 0 at center -> 1 at edge. + float thrW = r; + // centerW ramps 1 at center -> 0 at edge. + float centerW = 1.0 - r; + + float thr = saturate(u_thr * thrW); + + float v = saturate(texture(u_vol, tc).r); + + if (v >= thr) { + float val = saturate((v - thr) / max(1e-6, 1.0 - thr)); + + // Gradient in object/texture space (central differences). + vec3 d = u_texel; + float vx1 = saturate(texture(u_vol, clamp(tc + vec3(d.x, 0.0, 0.0), 0.0, 1.0)).r); + float vx0 = saturate(texture(u_vol, clamp(tc - vec3(d.x, 0.0, 0.0), 0.0, 1.0)).r); + float vy1 = saturate(texture(u_vol, clamp(tc + vec3(0.0, d.y, 0.0), 0.0, 1.0)).r); + float vy0 = saturate(texture(u_vol, clamp(tc - vec3(0.0, d.y, 0.0), 0.0, 1.0)).r); + float vz1 = saturate(texture(u_vol, clamp(tc + vec3(0.0, 0.0, d.z), 0.0, 1.0)).r); + float vz0 = saturate(texture(u_vol, clamp(tc - vec3(0.0, 0.0, d.z), 0.0, 1.0)).r); + + vec3 grad = vec3(vx1 - vx0, vy1 - vy0, vz1 - vz0); + float gmag = length(grad); + + // Edge factor (boosted near the center). + // + // IMPORTANT: use an exponential mapping so the "Edge strength" slider stays responsive + // instead of quickly saturating to 1.0 for most edges. + float centerGain = mix(1.0, CENTER_EDGE_GAIN, saturate(centerW)); + float edgeRaw = gmag * EDGE_K * centerGain; + float edge = 1.0 - exp(-edgeRaw * u_gamma); + edge = saturate(edge); + edge = edge * edge; + + // Simple shading using the gradient as a normal (view-aligned light). + vec3 nrm = normalize(grad + vec3(1e-6)); + float diff = abs(dot(nrm, vDir)); + float shade = 0.25 + 0.75 * diff; + + // Make edges matter for visibility (opacity) and for perceived contrast (brightness). + float a = saturate(val * (0.15 + 0.85 * edge)); + + // Convert to per-step opacity; dt keeps opacity roughly stable as step count changes. + float aStep = 1.0 - exp(-u_opacity * a * dt * 4.0); + aStep = saturate(aStep); + + float sampleV = v * shade * (0.6 + 0.4 * edge); + + vec3 sampleColor = vec3(sampleV); + + if (u_labelsEnabled != 0) { + uint lid = texture(u_labels, tc).r; + if (lid != 0u) { + vec3 labelRgb = texelFetch(u_palette, ivec2(int(lid), 0), 0).rgb; + float mixK = clamp(u_labelMix, 0.0, 1.0); + sampleColor = mix(sampleColor, labelRgb, mixK); + } + } + + accum += (1.0 - aAccum) * sampleColor * aStep; + aAccum += (1.0 - aAccum) * aStep; + + if (aAccum > 0.98) { + break; + } + } + } + + outColor = vec4(clamp(accum, 0.0, 1.0), 1.0); +}`; + + let program: WebGLProgram | null = null; + let vao: WebGLVertexArrayObject | null = null; + let vbo: WebGLBuffer | null = null; + let texVol: WebGLTexture | null = null; + let texLabels: WebGLTexture | null = null; + let texPalette: WebGLTexture | null = null; + let raf = 0; + + try { + program = createProgram(gl, vsSrc, fsSrc); + + // Full-screen triangle (2D clip space) + vao = gl.createVertexArray(); + vbo = gl.createBuffer(); + if (!vao || !vbo) throw new Error('Failed to allocate GL buffers'); + + gl.bindVertexArray(vao); + gl.bindBuffer(gl.ARRAY_BUFFER, vbo); + + // Triangle: (-1,-1), (3,-1), (-1,3) + const verts = new Float32Array([-1, -1, 3, -1, -1, 3]); + gl.bufferData(gl.ARRAY_BUFFER, verts, gl.STATIC_DRAW); + + const aPos = gl.getAttribLocation(program, 'a_pos'); + gl.enableVertexAttribArray(aPos); + gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0); + + gl.bindVertexArray(null); + gl.bindBuffer(gl.ARRAY_BUFFER, null); + + // Volume texture (prefer float for fidelity; fall back to 8-bit for compatibility) + texVol = gl.createTexture(); + if (!texVol) throw new Error('Failed to allocate 3D texture'); + + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_3D, texVol); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + + // Prefer float textures for fidelity, but honor the GPU-budgeted plan (which may request u8). + let fmt: VolumeTextureFormat; + let uploadedData: ArrayBufferView; + + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); + + const tryUpload = (candidate: VolumeTextureFormat, candidateData: ArrayBufferView) => { + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, candidate.minMagFilter); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, candidate.minMagFilter); + + gl.texImage3D( + gl.TEXTURE_3D, + 0, + candidate.internalFormat, + texDims.nx, + texDims.ny, + texDims.nz, + 0, + candidate.format, + candidate.type, + candidateData, + ); + + const err = gl.getError(); + return err === gl.NO_ERROR; + }; + + if (renderTex.kind === 'u8') { + fmt = fallback; + uploadedData = renderTex.data; + tryUpload(fallback, uploadedData); + } else { + fmt = primary; + uploadedData = renderTex.data; + + try { + const ok = tryUpload(primary, uploadedData); + if (!ok) { + // Fall back to 8-bit normalized. + const u8 = toUint8Volume(renderTex.data as Float32Array); + fmt = fallback; + uploadedData = u8; + tryUpload(fallback, uploadedData); + } + } catch { + const u8 = toUint8Volume(renderTex.data as Float32Array); + fmt = fallback; + uploadedData = u8; + tryUpload(fallback, uploadedData); + } + } + + console.info('[svr3d] Volume texture format', { + kind: fmt.kind, + texDims, + sourceDims: { nx: volume.dims[0], ny: volume.dims[1], nz: volume.dims[2] }, + }); + + gl.bindTexture(gl.TEXTURE_3D, null); + + // Label texture (uint8 IDs). We always allocate a valid texture to keep the shader path stable, + // even when no segmentation is present yet. + texLabels = gl.createTexture(); + if (!texLabels) throw new Error('Failed to allocate label 3D texture'); + + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_3D, texLabels); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_WRAP_R, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + + // Lazy allocation: keep a tiny 1x1x1 "no label" texture until we actually need to show labels. + gl.texImage3D( + gl.TEXTURE_3D, + 0, + gl.R8UI, + LABEL_PLACEHOLDER_DIMS.nx, + LABEL_PLACEHOLDER_DIMS.ny, + LABEL_PLACEHOLDER_DIMS.nz, + 0, + gl.RED_INTEGER, + gl.UNSIGNED_BYTE, + LABEL_PLACEHOLDER_DATA, + ); + + gl.bindTexture(gl.TEXTURE_3D, null); + + // Palette texture: 256x1 RGBA8 lookup table for label->color. + texPalette = gl.createTexture(); + if (!texPalette) throw new Error('Failed to allocate label palette texture'); + + gl.activeTexture(gl.TEXTURE2); + gl.bindTexture(gl.TEXTURE_2D, texPalette); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 256, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(256 * 4)); + gl.bindTexture(gl.TEXTURE_2D, null); + + glLabelStateRef.current = { + gl, + texLabels, + texPalette, + texDims, + labelsTexDims: LABEL_PLACEHOLDER_DIMS, + }; + setGlEpoch((v) => v + 1); + + const u = { + vol: gl.getUniformLocation(program, 'u_vol'), + labels: gl.getUniformLocation(program, 'u_labels'), + palette: gl.getUniformLocation(program, 'u_palette'), + labelsEnabled: gl.getUniformLocation(program, 'u_labelsEnabled'), + labelMix: gl.getUniformLocation(program, 'u_labelMix'), + + rot: gl.getUniformLocation(program, 'u_rot'), + box: gl.getUniformLocation(program, 'u_box'), + aspect: gl.getUniformLocation(program, 'u_aspect'), + zoom: gl.getUniformLocation(program, 'u_zoom'), + thr: gl.getUniformLocation(program, 'u_thr'), + steps: gl.getUniformLocation(program, 'u_steps'), + gamma: gl.getUniformLocation(program, 'u_gamma'), + opacity: gl.getUniformLocation(program, 'u_opacity'), + texel: gl.getUniformLocation(program, 'u_texel'), + } as const; + + const rotMat = new Float32Array(9); + + const axesCanvas = axesCanvasRef.current; + const axesCtx = axesCanvas ? axesCanvas.getContext('2d') : null; + + const resizeAndViewport = () => { + const dpr = window.devicePixelRatio || 1; + const w = Math.max(1, Math.floor(canvas.clientWidth * dpr)); + const h = Math.max(1, Math.floor(canvas.clientHeight * dpr)); + if (canvas.width !== w || canvas.height !== h) { + canvas.width = w; + canvas.height = h; + } + + if (axesCanvas) { + if (axesCanvas.width !== w || axesCanvas.height !== h) { + axesCanvas.width = w; + axesCanvas.height = h; + } + } + + gl.viewport(0, 0, canvas.width, canvas.height); + }; + + const draw = () => { + resizeAndViewport(); + + const { threshold, steps, gamma, opacity, zoom, labelsEnabled, labelMix, hasLabels } = paramsRef.current; + + gl.disable(gl.DEPTH_TEST); + gl.disable(gl.CULL_FACE); + + gl.useProgram(program); + gl.bindVertexArray(vao); + + // Bind textures + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_3D, texVol); + gl.uniform1i(u.vol, 0); + + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_3D, texLabels); + gl.uniform1i(u.labels, 1); + + gl.activeTexture(gl.TEXTURE2); + gl.bindTexture(gl.TEXTURE_2D, texPalette); + gl.uniform1i(u.palette, 2); + + const labelsOn = labelsEnabled && hasLabels ? 1 : 0; + gl.uniform1i(u.labelsEnabled, labelsOn); + gl.uniform1f(u.labelMix, clamp(labelMix, 0, 1)); + + // Uniforms + mat3FromQuat(rotationRef.current, rotMat); + gl.uniformMatrix3fv(u.rot, false, rotMat); + gl.uniform3f(u.box, boxScale[0], boxScale[1], boxScale[2]); + gl.uniform1f(u.aspect, canvas.width / Math.max(1, canvas.height)); + gl.uniform1f(u.zoom, zoom); + // Threshold is the *edge* threshold (center is always ~0); shader applies a linear center→edge ramp. + gl.uniform1f(u.thr, clamp(threshold, 0, THRESHOLD_EDGE_MAX)); + gl.uniform1i(u.steps, Math.round(clamp(steps, 8, 256))); + gl.uniform1f(u.gamma, clamp(gamma, 0.1, 10)); + gl.uniform1f(u.opacity, clamp(opacity, 0.1, 20)); + gl.uniform3f(u.texel, 1 / Math.max(1, texDims.nx), 1 / Math.max(1, texDims.ny), 1 / Math.max(1, texDims.nz)); + + gl.drawArrays(gl.TRIANGLES, 0, 3); + + // Overlay reference axes with mm tick marks for gauging physical size. + if (axesCanvas && axesCtx) { + drawAxesOverlay({ axesCanvas, axesCtx, canvas, volume, boxScale, rotMat, zoom }); + } + + // One-shot capture for the harness export: read pixels from the current frame. + const pending = pendingCapture3dRef.current; + if (pending) { + pendingCapture3dRef.current = null; + + try { + const w = canvas.width; + const h = canvas.height; + + const rgba = new Uint8Array(w * h * 4); + gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, rgba); + + // Flip Y (WebGL origin is bottom-left; ImageData expects top-left). + const flipped = new Uint8ClampedArray(rgba.length); + const rowBytes = w * 4; + for (let y = 0; y < h; y++) { + const srcStart = (h - 1 - y) * rowBytes; + const dstStart = y * rowBytes; + flipped.set(rgba.subarray(srcStart, srcStart + rowBytes), dstStart); + } + + void rgbaToPngBlob({ rgba: flipped, width: w, height: h }) + .then((b) => pending.resolve(b)) + .catch(() => pending.resolve(null)); + } catch (e) { + console.warn('[svr3d] Failed to capture screenshot', e); + pending.resolve(null); + } + } + + // Reset bindings (avoid leaking WebGL state across frames). + gl.activeTexture(gl.TEXTURE2); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_3D, null); + gl.activeTexture(gl.TEXTURE0); + gl.bindTexture(gl.TEXTURE_3D, null); + + gl.bindVertexArray(null); + + raf = window.requestAnimationFrame(draw); + }; + + raf = window.requestAnimationFrame(draw); + } catch (e) { + const msg = e instanceof Error ? e.message : String(e); + console.error('[SVR3D] Failed to initialize:', e); + setInitError(msg); + } + + return () => { + if (pendingCapture3dRef.current) { + pendingCapture3dRef.current.resolve(null); + pendingCapture3dRef.current = null; + } + + if (raf) window.cancelAnimationFrame(raf); + + glLabelStateRef.current = null; + + if (gl) { + if (texVol) gl.deleteTexture(texVol); + if (texLabels) gl.deleteTexture(texLabels); + if (texPalette) gl.deleteTexture(texPalette); + if (vbo) gl.deleteBuffer(vbo); + if (vao) gl.deleteVertexArray(vao); + if (program) gl.deleteProgram(program); + } + }; + }, [boxScale, renderBuild.key, renderBuild.status, renderBuild.data, volume]); + + // Incrementally upload label data + palette without re-initializing the whole GL program. + // IMPORTANT: allocate the full 3D label texture only when labels are enabled + present. + useEffect(() => { + const st = glLabelStateRef.current; + if (!st) return; + + const { gl, texLabels, texPalette, texDims } = st; + + if (!labelsEnabled || !volume || !labels || !hasLabels) { + if (volume && labels && !hasLabels) { + console.warn('[svr3d] Ignoring label volume (dims mismatch)', { + volumeDims: volume.dims, + labelDims: labels.dims, + labelLen: labels.data.length, + }); + } + + // Free GPU label texture memory when not in use. + if ( + st.labelsTexDims.nx !== LABEL_PLACEHOLDER_DIMS.nx || + st.labelsTexDims.ny !== LABEL_PLACEHOLDER_DIMS.ny || + st.labelsTexDims.nz !== LABEL_PLACEHOLDER_DIMS.nz + ) { + try { + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_3D, texLabels); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + gl.texImage3D( + gl.TEXTURE_3D, + 0, + gl.R8UI, + LABEL_PLACEHOLDER_DIMS.nx, + LABEL_PLACEHOLDER_DIMS.ny, + LABEL_PLACEHOLDER_DIMS.nz, + 0, + gl.RED_INTEGER, + gl.UNSIGNED_BYTE, + LABEL_PLACEHOLDER_DATA, + ); + gl.bindTexture(gl.TEXTURE_3D, null); + + st.labelsTexDims = LABEL_PLACEHOLDER_DIMS; + } catch (e) { + console.warn('[svr3d] Failed to reset label texture to placeholder', e); + } finally { + gl.activeTexture(gl.TEXTURE0); + } + } + + return; + } + + const srcDims = { nx: volume.dims[0], ny: volume.dims[1], nz: volume.dims[2] }; + const dstDims = texDims; + + const dataForUpload = + srcDims.nx === dstDims.nx && srcDims.ny === dstDims.ny && srcDims.nz === dstDims.nz + ? labels.data + : downsampleLabelsNearest({ src: labels.data, srcDims, dstDims }); + + try { + // Label IDs (uint8) + gl.activeTexture(gl.TEXTURE1); + gl.bindTexture(gl.TEXTURE_3D, texLabels); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + + if ( + st.labelsTexDims.nx !== dstDims.nx || + st.labelsTexDims.ny !== dstDims.ny || + st.labelsTexDims.nz !== dstDims.nz + ) { + // Allocate+upload in one go (avoids ever allocating a full-size zero fill array). + gl.texImage3D( + gl.TEXTURE_3D, + 0, + gl.R8UI, + dstDims.nx, + dstDims.ny, + dstDims.nz, + 0, + gl.RED_INTEGER, + gl.UNSIGNED_BYTE, + dataForUpload, + ); + st.labelsTexDims = { nx: dstDims.nx, ny: dstDims.ny, nz: dstDims.nz }; + } else { + gl.texSubImage3D( + gl.TEXTURE_3D, + 0, + 0, + 0, + 0, + dstDims.nx, + dstDims.ny, + dstDims.nz, + gl.RED_INTEGER, + gl.UNSIGNED_BYTE, + dataForUpload, + ); + } + + gl.bindTexture(gl.TEXTURE_3D, null); + + // Palette lookup table + const rgba = buildRgbaPalette256(labels.meta); + gl.activeTexture(gl.TEXTURE2); + gl.bindTexture(gl.TEXTURE_2D, texPalette); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); + gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, 256, 1, gl.RGBA, gl.UNSIGNED_BYTE, rgba); + gl.bindTexture(gl.TEXTURE_2D, null); + } catch (e) { + console.warn('[svr3d] Failed to upload label textures', e); + } finally { + gl.activeTexture(gl.TEXTURE0); + } + }, [glEpoch, hasLabels, labels, labelsEnabled, volume]); + + const sliceInspectorCard = ( + ++ ); + + const wantsSliceInspectorPortal = sliceInspectorPortalTarget !== undefined; + const sliceInspectorPortal = sliceInspectorPortalTarget ? createPortal(sliceInspectorCard, sliceInspectorPortalTarget) : null; + + return ( +Slice Inspector++++ + + ++ ++ Drag to draw ROI box (required) · Intensities are shown with a fixed 0 to 1 mapping. ++ +++ + {volume ? ( ++ Volume dims: {volDims.nx}×{volDims.ny}×{volDims.nz} ++ ) : null} ++ {sliceInspectorPortal} + ++ ); +}); diff --git a/frontend/src/components/TumorSavedSegmentationOverlay.tsx b/frontend/src/components/TumorSavedSegmentationOverlay.tsx new file mode 100644 index 0000000..7732484 --- /dev/null +++ b/frontend/src/components/TumorSavedSegmentationOverlay.tsx @@ -0,0 +1,134 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { TumorPolygon, ViewerTransform } from '../db/schema'; +import { getSopInstanceUidForInstanceIndex, getTumorSegmentationForInstance } from '../utils/localApi'; +import { normalizeViewerTransform, remapPolygonBetweenViewerTransforms } from '../utils/viewTransform'; + +function polygonToSvgPath(p: TumorPolygon): string { + const pts = p.points ?? []; + if (pts.length === 0) return ''; + + const d = [`M ${pts[0]!.x.toFixed(4)} ${pts[0]!.y.toFixed(4)}`]; + for (let i = 1; i < pts.length; i++) { + d.push(`L ${pts[i]!.x.toFixed(4)} ${pts[i]!.y.toFixed(4)}`); + } + d.push('Z'); + return d.join(' '); +} + +export type TumorSavedSegmentationOverlayProps = { + enabled: boolean; + + seriesUid: string; + /** Instance index in effective slice ordering (i.e. after reverseSliceOrder mapping). */ + effectiveInstanceIndex: number; + + /** Current viewer transform (pan/zoom/rotation/affine). */ + viewerTransform: ViewerTransform; + + /** Optional override for styling. */ + color?: { + fill: string; + stroke: string; + }; +}; + +export function TumorSavedSegmentationOverlay({ + enabled, + seriesUid, + effectiveInstanceIndex, + viewerTransform, + color, +}: TumorSavedSegmentationOverlayProps) { + const containerRef = useRef++ + {controlsCollapsed ? null : ( ++++ + + + + + + {!volume ? ( +++ Run SVR to generate a volume for 3D viewing. ++ ) : renderBuild.status === 'error' ? ( ++ {renderBuild.error ?? 'Failed to prepare 3D render volume.'} ++ ) : renderBuild.status !== 'ready' ? ( +++ ) : initError ? ( +++Preparing 3D render…+ {renderPlan ? ( ++ {renderPlan.dims.nx}×{renderPlan.dims.ny}×{renderPlan.dims.nz} ·{' '} + {renderPlan.kind === 'f32' ? 'float' : 'u8'} · {renderPlan.note} ++ ) : null} ++ {initError} ++ ) : ( ++ Drag to rotate · Wheel to zoom ++ )} +++ )} +3D Controls+ ++ + + + + ++ ++ ++ ++ Composite rendering with edge shading: tune opacity/threshold, and increase edge strength to make boundaries + pop (stronger near the box center). ++ ++ + + {segmentationCollapsed ? null : ( ++ + {!wantsSliceInspectorPortal ? sliceInspectorCard : null} +++ )} ++ + + ++ ++ + Seed (ROI center):{' '} + {seedVoxel ? ( + + {seedVoxel.x},{seedVoxel.y},{seedVoxel.z} + + ) : ( + — + )} + ++ ++ + + ++ ++ {growStatus.running ? ( + + ) : null} + + ++ + {growStatus.error ? ( +{growStatus.error}+ ) : growStatus.message ? ( +{growStatus.message}+ ) : null} + +++ + {!hasLabels || !labels ? ( +ONNX tumor model+ + { + const f = e.target.files?.[0]; + if (f) { + onnxHandleSelectedFile(f); + } + // Allow re-uploading the same file. + e.target.value = ''; + }} + /> + ++ + + + + + + {onnxSegRunning ? ( + + ) : null} + + ++ + + {onnxPreflight?.blockedByDefault ? ( +++ ) : null} + + {onnxStatus.error ? ( ++ Full-res ONNX is disabled by default for this volume ({onnxPreflight.nx}×{onnxPreflight.ny}× + {onnxPreflight.nz}; est logits {formatMiB(onnxPreflight.logitsBytes)}). This may crash the tab. ++ + +{onnxStatus.error}+ ) : onnxStatus.message ? ( +{onnxStatus.message}+ ) : null} +No segmentation labels available yet.+ ) : ( ++ {labels.meta + .filter((m) => m.id !== 0) + .map((m) => { + const count = labelMetrics?.counts.get(m.id) ?? 0; + const ml = labelMetrics ? (count * labelMetrics.voxelVolMm3) / 1000 : 0; + + return ( ++ )} + ++ + {m.name} + + {count.toLocaleString()} vox · {ml.toFixed(2)} mL + ++ ); + })} + + {labelMetrics ? ( ++ Total labeled: {labelMetrics.totalCount.toLocaleString()} vox · {labelMetrics.totalMl.toFixed(2)} mL ++ ) : null} +(null); + const [containerSize, setContainerSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 }); + + const [savedPolygon, setSavedPolygon] = useState (null); + const [savedViewTransform, setSavedViewTransform] = useState (null); + + // Track container size (needed to correctly re-project polygon points). + useEffect(() => { + if (!enabled) return; + const el = containerRef.current; + if (!el) return; + + const update = () => { + const r = el.getBoundingClientRect(); + setContainerSize({ w: r.width, h: r.height }); + }; + + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + return () => ro.disconnect(); + }, [enabled]); + + // Load saved segmentation when enabled or when slice changes. + useEffect(() => { + if (!enabled) return; + + let cancelled = false; + (async () => { + try { + const sop = await getSopInstanceUidForInstanceIndex(seriesUid, effectiveInstanceIndex); + const row = await getTumorSegmentationForInstance(seriesUid, sop); + if (cancelled) return; + + setSavedPolygon(row?.polygon ?? null); + setSavedViewTransform(row?.meta?.viewTransform ?? normalizeViewerTransform(null)); + } catch (e) { + console.error(e); + if (cancelled) return; + setSavedPolygon(null); + setSavedViewTransform(normalizeViewerTransform(null)); + } + })(); + + return () => { + cancelled = true; + }; + }, [enabled, seriesUid, effectiveInstanceIndex]); + + const viewSize = useMemo(() => ({ w: containerSize.w, h: containerSize.h }), [containerSize.h, containerSize.w]); + + const savedPolygonDisplay = useMemo(() => { + if (!enabled) return null; + if (!savedPolygon) return null; + + if (viewSize.w <= 0 || viewSize.h <= 0) return savedPolygon; + + const from = savedViewTransform ?? normalizeViewerTransform(null); + return remapPolygonBetweenViewerTransforms(savedPolygon, viewSize, from, viewerTransform); + }, [enabled, savedPolygon, savedViewTransform, viewSize, viewerTransform]); + + const path = useMemo(() => (savedPolygonDisplay ? polygonToSvgPath(savedPolygonDisplay) : ''), [savedPolygonDisplay]); + + const palette = useMemo(() => { + return ( + color ?? { + fill: 'rgba(16, 185, 129, 0.10)', + stroke: 'rgba(16, 185, 129, 0.85)', + } + ); + }, [color]); + + const styleForPath = useCallback(() => { + return { + fill: palette.fill, + stroke: palette.stroke, + strokeWidth: 2, + vectorEffect: 'non-scaling-stroke' as const, + }; + }, [palette.fill, palette.stroke]); + + if (!enabled) return null; + + return ( + + {path ? ( + + ) : null} ++ ); +} diff --git a/frontend/src/components/TumorSegmentationOverlay.tsx b/frontend/src/components/TumorSegmentationOverlay.tsx new file mode 100644 index 0000000..de61a12 --- /dev/null +++ b/frontend/src/components/TumorSegmentationOverlay.tsx @@ -0,0 +1,2107 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { BarChart3, Copy, Download, Eye, EyeOff, RotateCcw, Save, Sparkles, Wand2, X } from 'lucide-react'; +import { propagateTumorAcrossSeries } from '../utils/tumorPropagation'; +import type { NormalizedPoint, TumorPolygon, TumorThreshold, ViewerTransform } from '../db/schema'; +import type { DicomViewerHandle } from './DicomViewer'; +import { + getAllTumorGroundTruth, + getSopInstanceUidForInstanceIndex, + getTumorGroundTruthForInstance, + getTumorSegmentationForInstance, + saveTumorSegmentation, +} from '../utils/localApi'; +import { + decodeCapturedPngToGrayscale, + estimateThresholdFromSeedPoints, + segmentTumorFromGrayscale, + type SegmentTumorOptions, +} from '../utils/segmentation/segmentTumor'; +import { runGtBenchmark } from '../utils/segmentation/gtBenchmark'; +import { exportTumorHarnessDatasetAndDownload } from '../utils/segmentation/harness/exportTumorHarnessDataset'; +import { computeMaskMetrics, type MaskMetrics } from '../utils/segmentation/maskMetrics'; +import { + computePolygonBoundaryMetrics, + type PolygonBoundaryMetrics, +} from '../utils/segmentation/polygonBoundaryMetrics'; +import { rasterizePolygonToMask } from '../utils/segmentation/rasterizePolygon'; +import { + normalizeViewerTransform, + remapPolygonBetweenViewerTransforms, + remapPointsBetweenViewerTransforms, +} from '../utils/viewTransform'; + +function clamp01(v: number) { + return Math.max(0, Math.min(1, v)); +} + +function polygonToSvgPath(p: TumorPolygon): string { + if (!p.points.length) return ''; + + const d = [`M ${p.points[0].x.toFixed(4)} ${p.points[0].y.toFixed(4)}`]; + for (let i = 1; i < p.points.length; i++) { + d.push(`L ${p.points[i].x.toFixed(4)} ${p.points[i].y.toFixed(4)}`); + } + d.push('Z'); + return d.join(' '); +} + +function polygonBounds01(p: TumorPolygon): { minX: number; minY: number; maxX: number; maxY: number } { + let minX = Number.POSITIVE_INFINITY; + let minY = Number.POSITIVE_INFINITY; + let maxX = Number.NEGATIVE_INFINITY; + let maxY = Number.NEGATIVE_INFINITY; + + for (const pt of p.points) { + if (pt.x < minX) minX = pt.x; + if (pt.y < minY) minY = pt.y; + if (pt.x > maxX) maxX = pt.x; + if (pt.y > maxY) maxY = pt.y; + } + + return { + minX: clamp01(minX), + minY: clamp01(minY), + maxX: clamp01(maxX), + maxY: clamp01(maxY), + }; +} + +function pointsBounds01(points: NormalizedPoint[]): { minX: number; minY: number; maxX: number; maxY: number } { + let minX = Number.POSITIVE_INFINITY; + let minY = Number.POSITIVE_INFINITY; + let maxX = Number.NEGATIVE_INFINITY; + let maxY = Number.NEGATIVE_INFINITY; + + for (const pt of points) { + if (pt.x < minX) minX = pt.x; + if (pt.y < minY) minY = pt.y; + if (pt.x > maxX) maxX = pt.x; + if (pt.y > maxY) maxY = pt.y; + } + + return { + minX: clamp01(minX), + minY: clamp01(minY), + maxX: clamp01(maxX), + maxY: clamp01(maxY), + }; +} + +export type TumorSegmentationOverlayProps = { + enabled: boolean; + onRequestClose: () => void; + + viewerRef: React.RefObject; + + comboId: string; + dateIso: string; + studyId: string; + seriesUid: string; + /** Instance index in effective slice ordering (i.e. after reverseSliceOrder mapping). */ + effectiveInstanceIndex: number; + + /** Current viewer transform (pan/zoom/rotation/affine). */ + viewerTransform: ViewerTransform; +}; + +export function TumorSegmentationOverlay({ + enabled, + onRequestClose, + viewerRef, + comboId, + dateIso, + studyId, + seriesUid, + effectiveInstanceIndex, + viewerTransform, +}: TumorSegmentationOverlayProps) { + const containerRef = useRef (null); + + // Keep the latest viewer transform in a ref so we can snapshot it at specific lifecycle moments + // (e.g. when capturing a PNG) without re-running those effects on every pan/zoom/rotation change. + const viewerTransformRef = useRef(viewerTransform); + useEffect(() => { + viewerTransformRef.current = viewerTransform; + }, [viewerTransform]); + + const [paintPoints, setPaintPoints] = useState (null); + const [isPainting, setIsPainting] = useState(false); + + const [draftThreshold, setDraftThreshold] = useState (null); + const [draftPolygon, setDraftPolygon] = useState (null); + const [draftPolygonViewTransform, setDraftPolygonViewTransform] = useState (null); + const [draftSeed, setDraftSeed] = useState (null); + + const [savedPolygon, setSavedPolygon] = useState (null); + const [savedPolygonViewTransform, setSavedPolygonViewTransform] = useState (null); + const [savedSeed, setSavedSeed] = useState (null); + const [savedThreshold, setSavedThreshold] = useState (null); + + const [groundTruthPolygon, setGroundTruthPolygon] = useState (null); + const [groundTruthPolygonViewTransform, setGroundTruthPolygonViewTransform] = useState (null); + + const [tunedOptions, setTunedOptions] = useState (null); + + const [gtMetrics, setGtMetrics] = useState (null); + const [gtBoundaryMetrics, setGtBoundaryMetrics] = useState (null); + + const [diffOverlayEnabled, setDiffOverlayEnabled] = useState(true); + const diffCanvasRef = useRef (null); + + const [autoTuneStatus, setAutoTuneStatus] = useState<{ running: boolean; message?: string }>( + () => ({ running: false }) + ); + const [gtBenchmarkStatus, setGtBenchmarkStatus] = useState<{ running: boolean; message?: string }>( + () => ({ running: false }) + ); + const [harnessExportStatus, setHarnessExportStatus] = useState<{ running: boolean; message?: string }>( + () => ({ running: false }) + ); + const [autoTuneLastStats, setAutoTuneLastStats] = useState< + | { + evals: { + stage1TolSweep: number; + stage2ParamTune: number; + stage3TolRefine: number; + stage4PolyTune: number; + total: number; + }; + ms: { + stage1TolSweep: number; + stage2ParamTune: number; + stage3TolRefine: number; + stage4PolyTune: number; + total: number; + }; + } + | null + >(null); + const [autoTuneLastBest, setAutoTuneLastBest] = useState< + | { + anchor: number; + tol: number; + opts: SegmentTumorOptions | undefined; + metrics: MaskMetrics; + boundary: PolygonBoundaryMetrics; + paintLeakPx: number; + paintDistMeanPx: number; + paintDistP95Px: number; + paintDistMaxPx: number; + } + | null + >(null); + + const [containerSize, setContainerSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 }); + + // Cache the grayscale pixels captured after the user paints so threshold tuning doesn't + // re-capture PNGs (which can be slow/flaky and was causing "Error 5"-style crashes). + const capturedRef = useRef<{ gray: Uint8Array; w: number; h: number; viewTransform: ViewerTransform } | null>(null); + const [captureVersion, setCaptureVersion] = useState(0); + + const [busy, setBusy] = useState(false); + const busyRef = useRef(false); // Track busy state in ref for use in effects + const [error, setError] = useState (null); + + // Tolerance slider: anchor stays fixed, tolerance changes. + // This makes the segmentation area monotonic with slider movement. + const [thresholdAnchor, setThresholdAnchor] = useState (null); + const [thresholdTolerance, setThresholdTolerance] = useState(24); + + const effectiveThresholdFromSlider: TumorThreshold = useMemo(() => { + const anchor = Math.max(0, Math.min(255, Math.round(thresholdAnchor ?? 128))); + const tolerance = Math.max(0, Math.min(127, Math.round(thresholdTolerance))); + return { + low: Math.max(0, anchor - tolerance), + high: Math.min(255, anchor + tolerance), + anchor, + tolerance, + }; + }, [thresholdAnchor, thresholdTolerance]); + + const computeDraftFromCurrentCapture = useCallback( + (threshold: TumorThreshold, overrideOpts?: SegmentTumorOptions) => { + const opts = overrideOpts ?? tunedOptions ?? undefined; + + console.log('[TumorOverlay] computeDraftFromCurrentCapture START', { + threshold, + paintPointsCount: paintPoints.length, + opts, + }); + const t0 = performance.now(); + + const cap = capturedRef.current; + if (!cap) { + console.error('[TumorOverlay] No captured image available'); + throw new Error('No captured image available'); + } + + console.log('[TumorOverlay] Captured image:', { w: cap.w, h: cap.h, grayLength: cap.gray.length }); + + try { + const result = segmentTumorFromGrayscale(cap.gray, cap.w, cap.h, paintPoints, threshold, opts); + console.log('[TumorOverlay] Segmentation result:', { pointsCount: result.polygon.points.length, area: result.meta.areaPx }); + setDraftPolygon(result.polygon); + setDraftPolygonViewTransform(cap.viewTransform); + setDraftThreshold(threshold); + setDraftSeed(result.seed); + const elapsed = performance.now() - t0; + console.log('[TumorOverlay] computeDraftFromCurrentCapture DONE', { elapsed: elapsed.toFixed(1) + 'ms' }); + } catch (err) { + console.error('[TumorOverlay] Segmentation failed:', err); + throw err; + } + }, + [paintPoints, tunedOptions] + ); + + // Load existing saved segmentation when enabled or when slice changes. + useEffect(() => { + if (!enabled) return; + + let cancelled = false; + (async () => { + try { + setError(null); + const sop = await getSopInstanceUidForInstanceIndex(seriesUid, effectiveInstanceIndex); + + const [row, gt] = await Promise.all([ + getTumorSegmentationForInstance(seriesUid, sop), + getTumorGroundTruthForInstance(seriesUid, sop), + ]); + + if (cancelled) return; + + const fallbackView = normalizeViewerTransform(null); + + setSavedPolygon(row?.polygon ?? null); + setSavedPolygonViewTransform(row?.meta?.viewTransform ?? fallbackView); + setSavedSeed(row?.seed ?? null); + setSavedThreshold(row?.threshold ?? null); + + setGroundTruthPolygon(gt?.polygon ?? null); + setGroundTruthPolygonViewTransform(gt?.viewTransform ?? fallbackView); + } catch (e) { + console.error(e); + } + })(); + + return () => { + cancelled = true; + }; + }, [enabled, seriesUid, effectiveInstanceIndex]); + + // Reset draft state when turning on. + useEffect(() => { + if (!enabled) return; + setPaintPoints([]); + setPaintPointsViewTransform(null); + setDraftPolygon(null); + setDraftPolygonViewTransform(null); + setDraftThreshold(null); + setDraftSeed(null); + setError(null); + setGroundTruthPolygon(null); + setGroundTruthPolygonViewTransform(null); + capturedRef.current = null; + setCaptureVersion((v) => v + 1); + setGtMetrics(null); + setGtBoundaryMetrics(null); + }, [enabled]); + + // Track container size (used for brush sizing + UI placement). + useEffect(() => { + if (!enabled) return; + const el = containerRef.current; + if (!el) return; + + const update = () => { + const r = el.getBoundingClientRect(); + setContainerSize({ w: r.width, h: r.height }); + }; + + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + return () => ro.disconnect(); + }, [enabled]); + + const getLocalNormPoint = useCallback((e: PointerEvent | React.PointerEvent): NormalizedPoint | null => { + const el = containerRef.current; + if (!el) return null; + const r = el.getBoundingClientRect(); + if (r.width <= 0 || r.height <= 0) return null; + const x = ((e as PointerEvent).clientX - r.left) / r.width; + const y = ((e as PointerEvent).clientY - r.top) / r.height; + return { x: clamp01(x), y: clamp01(y) }; + }, []); + + const onPointerDown = useCallback( + (e: React.PointerEvent) => { + if (!enabled) return; + if (!e.isPrimary) return; + if (e.button !== 0) return; + + didPaintRef.current = false; + + // Avoid starting a paint gesture on overlay buttons. + const target = e.target as HTMLElement | null; + if (target?.closest('[data-tumor-ui="true"]')) return; + + const p = getLocalNormPoint(e); + if (!p) return; + + setError(null); + setPaintPointsViewTransform({ ...viewerTransformRef.current }); + setPaintPoints([p]); + setDraftPolygon(null); + setDraftPolygonViewTransform(null); + setDraftThreshold(null); + setDraftSeed(null); + setIsPainting(true); + capturedRef.current = null; + setCaptureVersion((v) => v + 1); + setGtMetrics(null); + setGtBoundaryMetrics(null); + + try { + containerRef.current?.setPointerCapture(e.pointerId); + } catch { + // ignore + } + }, + [enabled, getLocalNormPoint] + ); + + const didPaintRef = useRef(false); + + const onPointerMove = useCallback( + (e: React.PointerEvent) => { + if (!enabled) return; + if (!isPainting) return; + const p = getLocalNormPoint(e); + if (!p) return; + setPaintPoints((prev) => { + const last = prev[prev.length - 1]; + if (last && Math.hypot(last.x - p.x, last.y - p.y) < 0.002) { + return prev; + } + didPaintRef.current = true; + return [...prev, p]; + }); + }, + [enabled, getLocalNormPoint, isPainting] + ); + + // Prevent the underlying viewer from interpreting a paint drag as a click. + const onClickCapture = useCallback((e: React.MouseEvent) => { + if (!didPaintRef.current) return; + didPaintRef.current = false; + e.preventDefault(); + e.stopPropagation(); + }, []); + + const onPointerUp = useCallback( + async (e: React.PointerEvent) => { + if (!enabled) return; + if (!isPainting) return; + + try { + containerRef.current?.releasePointerCapture(e.pointerId); + } catch { + // ignore + } + + setIsPainting(false); + + // Ignore click-only gestures. + if (paintPoints.length < 4) { + setError('Click and drag to paint over the tumor region'); + return; + } + + // Compute initial segmentation. + busyRef.current = true; + setBusy(true); + try { + console.log('[TumorOverlay] Starting initial segmentation after paint'); + const v = viewerRef.current; + if (!v) throw new Error('Viewer not ready'); + + const png = await v.captureVisiblePng({ maxSize: 512 }); // Higher resolution for smoother polygons + console.log('[TumorOverlay] PNG captured, decoding...'); + const decoded = await decodeCapturedPngToGrayscale(png); + console.log('[TumorOverlay] Decoded grayscale:', { w: decoded.width, h: decoded.height }); + capturedRef.current = { + gray: decoded.gray, + w: decoded.width, + h: decoded.height, + viewTransform: { ...viewerTransformRef.current }, + }; + setCaptureVersion((v) => v + 1); + + const initialThreshold = estimateThresholdFromSeedPoints( + decoded.gray, + decoded.width, + decoded.height, + paintPoints + ); + console.log('[TumorOverlay] Initial threshold:', initialThreshold); + + // Initialize tolerance-mode slider state. + const anchor = + typeof initialThreshold.anchor === 'number' + ? initialThreshold.anchor + : Math.round((initialThreshold.low + initialThreshold.high) / 2); + const tolerance = + typeof initialThreshold.tolerance === 'number' + ? initialThreshold.tolerance + : Math.round((initialThreshold.high - initialThreshold.low) / 2); + + setThresholdAnchor(anchor); + setThresholdTolerance(tolerance); + + // Use the threshold derived from (anchor, tolerance) so the slider starts "in sync". + const thresholdForSeg: TumorThreshold = { + low: Math.max(0, Math.min(255, Math.round(anchor - tolerance))), + high: Math.max(0, Math.min(255, Math.round(anchor + tolerance))), + anchor, + tolerance, + }; + + computeDraftFromCurrentCapture(thresholdForSeg); + + console.log('[TumorOverlay] Initial segmentation complete'); + } catch (err) { + console.error('[TumorOverlay] Initial segmentation error:', err); + setError(err instanceof Error ? err.message : 'Segmentation failed'); + } finally { + busyRef.current = false; + setBusy(false); + } + }, + [computeDraftFromCurrentCapture, enabled, isPainting, paintPoints, viewerRef] + ); + + // Live update segmentation when threshold changes (debounced). + // + // Important: we reuse the grayscale pixels captured after painting, instead of re-capturing + // PNGs on every slider move (which can be slow/flaky and was causing crashes). + useEffect(() => { + if (!enabled) return; + if (!draftPolygon) return; + if (!draftThreshold) return; + if (paintPoints.length < 4) return; + if (!capturedRef.current) return; + + if (draftThreshold.low === effectiveThresholdFromSlider.low && draftThreshold.high === effectiveThresholdFromSlider.high) { + return; + } + + // Don't trigger new segmentation while one is in progress. + if (busyRef.current) { + console.log('[TumorOverlay] Skipping threshold update - busy'); + return; + } + + // Debounce slider changes to avoid firing too frequently. + const timeout = window.setTimeout(() => { + // Double-check busy state at execution time. + if (busyRef.current) { + console.log('[TumorOverlay] Skipping threshold update at exec time - busy'); + return; + } + + busyRef.current = true; + setBusy(true); + + // Use requestAnimationFrame to give UI a chance to update. + requestAnimationFrame(() => { + try { + console.log('[TumorOverlay] Running threshold-triggered segmentation'); + computeDraftFromCurrentCapture(effectiveThresholdFromSlider); + } catch (err) { + console.error('[TumorOverlay] Threshold segmentation error:', err); + setError(err instanceof Error ? err.message : 'Segmentation failed'); + } finally { + busyRef.current = false; + setBusy(false); + } + }); + }, 150); // Increased debounce to 150ms + + return () => window.clearTimeout(timeout); + }, [draftPolygon, draftThreshold, effectiveThresholdFromSlider, enabled, paintPoints.length, computeDraftFromCurrentCapture]); + + const viewSize = useMemo(() => ({ w: containerSize.w, h: containerSize.h }), [containerSize.h, containerSize.w]); + + const paintPointsDisplay = useMemo(() => { + if (paintPoints.length === 0) return []; + const from = paintPointsViewTransform ?? viewerTransform; + return viewSize.w > 0 && viewSize.h > 0 + ? remapPointsBetweenViewerTransforms(paintPoints, viewSize, from, viewerTransform) + : paintPoints; + }, [paintPoints, paintPointsViewTransform, viewSize, viewerTransform]); + + const draftPolygonDisplay = useMemo(() => { + if (!draftPolygon) return null; + const from = draftPolygonViewTransform ?? viewerTransform; + return viewSize.w > 0 && viewSize.h > 0 + ? remapPolygonBetweenViewerTransforms(draftPolygon, viewSize, from, viewerTransform) + : draftPolygon; + }, [draftPolygon, draftPolygonViewTransform, viewSize, viewerTransform]); + + const savedPolygonDisplay = useMemo(() => { + if (!savedPolygon) return null; + const from = savedPolygonViewTransform ?? viewerTransform; + return viewSize.w > 0 && viewSize.h > 0 + ? remapPolygonBetweenViewerTransforms(savedPolygon, viewSize, from, viewerTransform) + : savedPolygon; + }, [savedPolygon, savedPolygonViewTransform, viewSize, viewerTransform]); + + const groundTruthPolygonDisplay = useMemo(() => { + if (!groundTruthPolygon) return null; + const from = groundTruthPolygonViewTransform ?? viewerTransform; + return viewSize.w > 0 && viewSize.h > 0 + ? remapPolygonBetweenViewerTransforms(groundTruthPolygon, viewSize, from, viewerTransform) + : groundTruthPolygon; + }, [groundTruthPolygon, groundTruthPolygonViewTransform, viewSize, viewerTransform]); + + const draftPath = useMemo(() => { + if (!draftPolygonDisplay) return ''; + return polygonToSvgPath(draftPolygonDisplay); + }, [draftPolygonDisplay]); + + const savedPath = useMemo(() => { + if (!savedPolygonDisplay) return ''; + return polygonToSvgPath(savedPolygonDisplay); + }, [savedPolygonDisplay]); + + const groundTruthPath = useMemo(() => { + if (!groundTruthPolygonDisplay) return ''; + return polygonToSvgPath(groundTruthPolygonDisplay); + }, [groundTruthPolygonDisplay]); + + const [propStatus, setPropStatus] = useState<{ running: boolean; saved: number; message?: string }>( + { running: false, saved: 0 } + ); + + const onSave = useCallback(async () => { + if (!draftPolygon || !draftThreshold || !draftSeed) return; + + setBusy(true); + setError(null); + try { + const sop = await getSopInstanceUidForInstanceIndex(seriesUid, effectiveInstanceIndex); + + const view = + draftPolygonViewTransform ?? + capturedRef.current?.viewTransform ?? + ({ ...viewerTransformRef.current } as ViewerTransform); + + const viewportSize = + viewSize.w > 0 && viewSize.h > 0 + ? { w: Math.round(viewSize.w), h: Math.round(viewSize.h) } + : undefined; + + await saveTumorSegmentation({ + comboId, + dateIso, + studyId, + seriesUid, + sopInstanceUid: sop, + polygon: draftPolygon, + threshold: draftThreshold, + seed: draftSeed, + meta: { viewTransform: view, viewportSize }, + }); + + setSavedPolygon(draftPolygon); + setSavedPolygonViewTransform(view); + setSavedSeed(draftSeed); + setSavedThreshold(draftThreshold); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : 'Save failed'); + } finally { + setBusy(false); + } + }, [ + comboId, + dateIso, + draftPolygon, + draftPolygonViewTransform, + draftSeed, + draftThreshold, + effectiveInstanceIndex, + seriesUid, + studyId, + viewSize, + ]); + + const onPropagateSeries = useCallback(async () => { + if (!savedSeed || !savedThreshold) return; + + if (viewSize.w <= 0 || viewSize.h <= 0) { + setPropStatus({ running: false, saved: 0, message: 'Viewer size not ready (try again).' }); + return; + } + + setPropStatus({ running: true, saved: 0, message: 'Propagating…' }); + try { + const result = await propagateTumorAcrossSeries({ + comboId, + dateIso, + studyId, + seriesUid, + viewportSize: viewSize, + startEffectiveIndex: effectiveInstanceIndex, + seed: savedSeed, + seedViewTransform: savedPolygonViewTransform ?? { ...viewerTransformRef.current }, + threshold: savedThreshold, + stop: { + minAreaPx: 80, + maxMissesInARow: 3, + }, + onProgress: ({ direction, index, saved }) => { + setPropStatus({ + running: true, + saved, + message: `Propagating ${direction} (slice ${index + 1})…`, + }); + }, + }); + + setPropStatus({ + running: false, + saved: result.saved, + message: `Propagation complete (saved ${result.saved} slices).`, + }); + } catch (err) { + console.error(err); + setPropStatus({ running: false, saved: 0, message: err instanceof Error ? err.message : 'Propagation failed' }); + } + }, [comboId, dateIso, effectiveInstanceIndex, savedPolygonViewTransform, savedSeed, savedThreshold, seriesUid, studyId, viewSize]); + + const clearDiffOverlay = useCallback(() => { + const canvas = diffCanvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext('2d'); + if (!ctx) return; + ctx.clearRect(0, 0, canvas.width, canvas.height); + }, []); + + const drawDiffOverlay = useCallback( + (predMask: Uint8Array, gtMask: Uint8Array, w: number, h: number) => { + const canvas = diffCanvasRef.current; + if (!canvas) return; + + if (canvas.width !== w || canvas.height !== h) { + canvas.width = w; + canvas.height = h; + } + + const ctx = canvas.getContext('2d'); + if (!ctx) return; + + const rgba = new Uint8ClampedArray(w * h * 4); + + // FN (miss): red. FP (over-seg): magenta. + for (let i = 0; i < predMask.length; i++) { + const p = predMask[i] ? 1 : 0; + const g = gtMask[i] ? 1 : 0; + + const o = i * 4; + if (g && !p) { + rgba[o] = 255; + rgba[o + 1] = 0; + rgba[o + 2] = 0; + rgba[o + 3] = 150; + } else if (!g && p) { + rgba[o] = 255; + rgba[o + 1] = 0; + rgba[o + 2] = 255; + rgba[o + 3] = 110; + } + } + + const img = + typeof ImageData !== 'undefined' + ? new ImageData(rgba, w, h) + : (() => { + const id = ctx.createImageData(w, h); + id.data.set(rgba); + return id; + })(); + + ctx.putImageData(img, 0, 0); + }, + [] + ); + + useEffect(() => { + if (!enabled) return; + + const cap = capturedRef.current; + const gtRaw = groundTruthPolygon; + const predRaw = draftPolygon ?? savedPolygon; + + if (!cap || !gtRaw || !predRaw) { + setGtMetrics(null); + setGtBoundaryMetrics(null); + clearDiffOverlay(); + return; + } + + const size = { w: cap.w, h: cap.h }; + const evalView = cap.viewTransform; + + const predFrom = draftPolygon + ? draftPolygonViewTransform ?? evalView + : savedPolygonViewTransform ?? evalView; + + const gtFrom = groundTruthPolygonViewTransform ?? evalView; + + try { + // Metrics are computed in the capture/eval view so they stay stable as the user pans/zooms. + const gtEval = remapPolygonBetweenViewerTransforms(gtRaw, size, gtFrom, evalView); + const predEval = remapPolygonBetweenViewerTransforms(predRaw, size, predFrom, evalView); + + const gtMaskEval = rasterizePolygonToMask(gtEval, cap.w, cap.h); + const predMaskEval = rasterizePolygonToMask(predEval, cap.w, cap.h); + + const metrics = computeMaskMetrics(predMaskEval, gtMaskEval); + const boundary = computePolygonBoundaryMetrics(predEval, gtEval, cap.w, cap.h); + + setGtMetrics(metrics); + setGtBoundaryMetrics(boundary); + + // Diff overlay is drawn in the *current* viewer transform so it stays visually aligned. + if (diffOverlayEnabled) { + const gtDisplay = remapPolygonBetweenViewerTransforms(gtRaw, size, gtFrom, viewerTransform); + const predDisplay = remapPolygonBetweenViewerTransforms(predRaw, size, predFrom, viewerTransform); + + const gtMaskDisplay = rasterizePolygonToMask(gtDisplay, cap.w, cap.h); + const predMaskDisplay = rasterizePolygonToMask(predDisplay, cap.w, cap.h); + + drawDiffOverlay(predMaskDisplay, gtMaskDisplay, cap.w, cap.h); + } else { + clearDiffOverlay(); + } + } catch (e) { + console.error('[TumorOverlay] GT evaluation failed:', e); + setGtMetrics(null); + setGtBoundaryMetrics(null); + clearDiffOverlay(); + } + }, [ + captureVersion, + clearDiffOverlay, + diffOverlayEnabled, + drawDiffOverlay, + draftPolygon, + draftPolygonViewTransform, + enabled, + groundTruthPolygon, + groundTruthPolygonViewTransform, + savedPolygon, + savedPolygonViewTransform, + viewerTransform, + ]); + + const onCopyGtReport = useCallback(async () => { + const effectiveThreshold = (() => { + const t = effectiveThresholdFromSlider; + if (!t) return null; + + // The slider threshold is symmetric (anchor ± tolerance), but the segmentation can apply + // asymmetric scaling (toleranceLowScale/toleranceHighScale) via tunedOptions. + const tol = t.tolerance ?? Math.round((t.high - t.low) / 2); + + // NOTE: These defaults must match `segmentTumorFromGrayscale` (segmentTumor.ts). Otherwise + // the report can be misleading: the UI slider shows a symmetric range, but segmentation may + // apply asymmetric scaling even when the user hasn't explicitly tuned it. + const lowScale = tunedOptions?.toleranceLowScale ?? 1; + const highScale = tunedOptions?.toleranceHighScale ?? 1; + + const clamp8 = (v: number) => Math.max(0, Math.min(255, Math.round(v))); + + const anchorRaw = + typeof t.anchor === 'number' && Number.isFinite(t.anchor) ? t.anchor : Math.round((t.low + t.high) * 0.5); + const anchor = clamp8(anchorRaw); + + return { + anchor, + tolerance: tol, + toleranceLowScale: lowScale, + toleranceHighScale: highScale, + low: clamp8(anchor - tol * lowScale), + high: clamp8(anchor + tol * highScale), + }; + })(); + + const report = { + comboId, + dateIso, + seriesUid, + effectiveInstanceIndex, + capture: capturedRef.current ? { w: capturedRef.current.w, h: capturedRef.current.h } : null, + threshold: effectiveThresholdFromSlider, + effectiveThreshold, + tunedOptions, + paintPointsCount: paintPoints.length, + draftPolygonPoints: draftPolygon?.points.length ?? 0, + savedPolygonPoints: savedPolygon?.points.length ?? 0, + gtPolygonPoints: groundTruthPolygon?.points.length ?? 0, + metrics: gtMetrics, + boundaryMetrics: gtBoundaryMetrics, + autoTuneLastStats, + autoTuneLastBest, + note: 'Auto-tune uses a recall guardrail, then prioritizes staying near paint + reducing FP + boundary overshoot. Metrics are vs GT when available. FN=miss (red), FP=over-seg (magenta).', + }; + + const text = JSON.stringify(report, null, 2); + + try { + await navigator.clipboard.writeText(text); + } catch (e) { + console.warn('[TumorOverlay] Failed to write to clipboard; logging report instead', e); + console.log('[TumorOverlay] GT report:', report); + setError('Failed to copy; report was logged to console.'); + } + }, [ + autoTuneLastBest, + autoTuneLastStats, + comboId, + dateIso, + effectiveInstanceIndex, + effectiveThresholdFromSlider, + draftPolygon, + groundTruthPolygon, + gtMetrics, + gtBoundaryMetrics, + paintPoints, + savedPolygon, + seriesUid, + tunedOptions, + ]); + + const onCopyGtBenchmark = useCallback(async () => { + if (busyRef.current || gtBenchmarkStatus.running) return; + + const prevBusy = busyRef.current; + busyRef.current = true; + setBusy(true); + setError(null); + setGtBenchmarkStatus({ running: true, message: 'Benchmark: loading GT rows…' }); + + try { + const gtRows = await getAllTumorGroundTruth(); + const cases = gtRows + .filter((r) => (r.polygon?.points?.length ?? 0) >= 3) + .map((r) => ({ + id: r.id, + comboId: r.comboId, + dateIso: r.dateIso, + seriesUid: r.seriesUid, + sopInstanceUid: r.sopInstanceUid, + gtPolygon: r.polygon, + gtViewTransform: r.viewTransform, + gtViewportSize: r.viewportSize, + })); + + if (cases.length === 0) { + throw new Error('No ground truth polygons found in IndexedDB.'); + } + + const v2Off: SegmentTumorOptions = { + bgModel: { enabled: false }, + geodesic: { enabled: false }, + }; + + const v2Bg: SegmentTumorOptions = { + bgModel: { enabled: true }, + geodesic: { enabled: false }, + }; + + const v2BgGeo: SegmentTumorOptions = { + bgModel: { enabled: true }, + geodesic: { enabled: true }, + }; + + const configs = [ + { name: 'baseline', opts: v2Off }, + { name: 'v2:bg', opts: v2Bg }, + { name: 'v2:bg+geo', opts: v2BgGeo }, + ...(tunedOptions + ? [ + { name: 'tuned', opts: { ...tunedOptions, ...v2Off } }, + { name: 'tuned+v2:bg', opts: { ...tunedOptions, ...v2Bg } }, + { name: 'tuned+v2:bg+geo', opts: { ...tunedOptions, ...v2BgGeo } }, + ] + : []), + ]; + + const report = await runGtBenchmark({ + cases, + configs, + maxEvalDim: 256, + paintPointsPerCase: 24, + yieldEveryCases: 1, + onProgress: (p) => setGtBenchmarkStatus({ running: true, message: p.message }), + }); + + const wrapped = { + comboId, + dateIso, + tunedOptions, + report, + note: 'Benchmark uses deterministic auto-generated paint points derived from GT polygons. baseline forces v2 features off so results are comparable even if localStorage segmentation flags are set. v2:* enables brush-only background model and/or geodesic edge-aware gating.', + }; + + const text = JSON.stringify(wrapped, null, 2); + + try { + await navigator.clipboard.writeText(text); + setGtBenchmarkStatus({ running: false, message: `Benchmark copied (${cases.length} cases).` }); + } catch (e) { + console.warn('[TumorOverlay] Failed to write benchmark to clipboard; logging instead', e); + console.log('[TumorOverlay] GT benchmark report:', wrapped); + setGtBenchmarkStatus({ running: false, message: 'Benchmark done (logged to console).' }); + setError('Failed to copy; benchmark report was logged to console.'); + } + } catch (e) { + console.error('[TumorOverlay] GT benchmark failed:', e); + setGtBenchmarkStatus({ running: false, message: 'Benchmark failed (see console).' }); + setError(e instanceof Error ? e.message : 'GT benchmark failed'); + } finally { + busyRef.current = prevBusy; + setBusy(false); + } + }, [comboId, dateIso, gtBenchmarkStatus.running, tunedOptions]); + + const onExportHarnessDataset = useCallback(async () => { + if (busyRef.current || harnessExportStatus.running) return; + + const prevBusy = busyRef.current; + busyRef.current = true; + setBusy(true); + setError(null); + setHarnessExportStatus({ running: true, message: 'Export: loading ground truth rows…' }); + + try { + const gtRows = await getAllTumorGroundTruth(); + + const startSopInstanceUid = await getSopInstanceUidForInstanceIndex(seriesUid, effectiveInstanceIndex); + + await exportTumorHarnessDatasetAndDownload({ + maxEvalDim: 256, + gtRows, + paintPointsPerCase: 24, + propagationScenario: + paintPoints.length >= 4 && viewSize.w > 0 && viewSize.h > 0 + ? { + comboId, + dateIso, + studyId, + seriesUid, + startEffectiveIndex: effectiveInstanceIndex, + startSopInstanceUid, + paintPointsViewer01: paintPoints, + paintPointsViewTransform: paintPointsViewTransform, + viewportSize: viewSize, + threshold: effectiveThresholdFromSlider, + stop: { minAreaPx: 80, maxMissesInARow: 3 }, + marginSlices: 2, + } + : undefined, + onProgress: (message) => setHarnessExportStatus({ running: true, message }), + }); + + setHarnessExportStatus({ running: false, message: 'Export complete (downloaded zip).' }); + } catch (e) { + console.error('[TumorOverlay] Harness export failed:', e); + setHarnessExportStatus({ running: false, message: 'Export failed (see console).' }); + setError(e instanceof Error ? e.message : 'Export failed'); + } finally { + busyRef.current = prevBusy; + setBusy(false); + } + }, [ + comboId, + dateIso, + effectiveInstanceIndex, + effectiveThresholdFromSlider, + harnessExportStatus.running, + paintPoints, + paintPointsViewTransform, + seriesUid, + studyId, + viewSize, + ]); + + const onResetTuning = useCallback(() => { + // Force a recompute with default options so the UI reflects the reset immediately. + try { + if (capturedRef.current && paintPoints.length >= 4) { + computeDraftFromCurrentCapture(effectiveThresholdFromSlider, {}); + } + } catch (e) { + console.error('[TumorOverlay] Failed to recompute after tuning reset:', e); + } + + setTunedOptions(null); + }, [computeDraftFromCurrentCapture, effectiveThresholdFromSlider, paintPoints]); + + const onAutoTune = useCallback(async () => { + if (busyRef.current || autoTuneStatus.running) return; + + const cap = capturedRef.current; + if (!cap) { + setError('Paint first (we need a captured image to evaluate against GT).'); + return; + } + + if (paintPoints.length < 4) { + setError('Paint first (not enough paint points to run segmentation).'); + return; + } + + if (!groundTruthPolygon) { + setError('No ground truth polygon found for this slice. Use the GT tool to draw + save one.'); + return; + } + + const anchor = Math.round( + thresholdAnchor ?? + (draftThreshold?.anchor ?? + (draftThreshold ? (draftThreshold.low + draftThreshold.high) / 2 : 128)) + ); + const baseTol = Math.max(0, Math.min(127, Math.round(thresholdTolerance))); + + // Auto-tune can be expensive (many candidates). Use a downsampled grid for mask metrics. + // Polygons are in normalized coords, so rasterizing at lower res is a good approximation. + const evalW = Math.max(128, Math.round(cap.w / 2)); + const evalH = Math.max(128, Math.round(cap.h / 2)); + + const gtFrom = groundTruthPolygonViewTransform ?? cap.viewTransform; + + // Auto-tune evaluates candidates in the captured-image coordinate system (cap.viewTransform). + // If the GT polygon was drawn under a different viewer transform, re-project it into cap space. + const gtPolyEval = remapPolygonBetweenViewerTransforms( + groundTruthPolygon, + { w: evalW, h: evalH }, + gtFrom, + cap.viewTransform + ); + const gtMask = rasterizePolygonToMask(gtPolyEval, evalW, evalH); + + const gtPolyCap = remapPolygonBetweenViewerTransforms( + groundTruthPolygon, + { w: cap.w, h: cap.h }, + gtFrom, + cap.viewTransform + ); + + // Heuristic: penalize candidates whose predicted polygon drifts far outside the user's painted bbox. + // This correlates strongly with "leaky" segmentations (low precision) and matches what feels wrong in the UI. + const paintBounds = pointsBounds01(paintPoints); + + // Additional heuristic: measure how far predicted pixels are from the painted stroke itself. + // This catches the common failure mode where the polygon stays within the paint bbox but still + // "fills" large same-intensity regions far from the actual stroke. + const paintDistEval = (() => { + const out = new Int32Array(evalW * evalH); + out.fill(-1); + + const qx = new Int32Array(evalW * evalH); + const qy = new Int32Array(evalW * evalH); + let qh = 0; + let qt = 0; + + const push = (x: number, y: number, d: number) => { + const i = y * evalW + x; + if (out[i] !== -1) return; + out[i] = d; + qx[qt] = x; + qy[qt] = y; + qt++; + }; + + for (const p of paintPoints) { + const x = Math.max(0, Math.min(evalW - 1, Math.round(p.x * (evalW - 1)))); + const y = Math.max(0, Math.min(evalH - 1, Math.round(p.y * (evalH - 1)))); + push(x, y, 0); + } + + // Fallback: if somehow we have no seeds, treat everything as far away. + if (qt === 0) { + out.fill(999999); + return out; + } + + while (qh < qt) { + const x = qx[qh]!; + const y = qy[qh]!; + qh++; + + const base = out[y * evalW + x]!; + const nd = base + 1; + + if (x > 0) push(x - 1, y, nd); + if (x < evalW - 1) push(x + 1, y, nd); + if (y > 0) push(x, y - 1, nd); + if (y < evalH - 1) push(x, y + 1, nd); + } + + return out; + })(); + + const mkThreshold = (thAnchor: number, tol: number): TumorThreshold => { + const a = Math.max(0, Math.min(255, Math.round(thAnchor))); + const t = Math.max(0, Math.min(127, Math.round(tol))); + return { + low: Math.max(0, Math.min(255, a - t)), + high: Math.max(0, Math.min(255, a + t)), + anchor: a, + tolerance: t, + }; + }; + + type Candidate = { + anchor: number; + tol: number; + opts: SegmentTumorOptions | undefined; + metrics: MaskMetrics; + boundary: PolygonBoundaryMetrics; + /** Max outward expansion beyond the painted bbox (pixels). Lower is better. */ + paintLeakPx: number; + /** Mean Manhattan distance (in eval pixels) from predicted pixels to the painted stroke. Lower is better. */ + paintDistMeanPx: number; + /** 95th percentile Manhattan distance (eval px) from predicted pixels to the painted stroke. Lower is better. */ + paintDistP95Px: number; + /** Maximum Manhattan distance (eval px) from predicted pixels to the painted stroke. Lower is better. */ + paintDistMaxPx: number; + }; + + const isBetter = (a: Candidate, b: Candidate) => { + // IMPORTANT: use near-tie thresholds so we don't choose a meaningfully worse boundary + // just to gain ~0.0001 of overlap metric. + const EPS_F2 = 0.003; + const EPS_RECALL = 0.003; + const EPS_DICE = 0.003; + const EPS_BND_MEAN = 0.25; // px + const EPS_BND_MAX = 0.75; // px + + // Paint-leak/dist thresholds: + // - Keep them fairly small so auto-tune actively searches for candidates that stay near the paint. + // - We still allow a little slack because paint points are noisy (pointer sampling + brush width). + const EPS_PAINT_LEAK = 4; // px (full-res) + const EPS_PAINT_DIST_MEAN = 0.35; // eval px + const EPS_PAINT_DIST_P95 = 0.75; // eval px + const EPS_PAINT_DIST_MAX = 1.5; // eval px + + // When FP is extremely close (near-tie), prefer fewer FN to avoid under-segmentation. + // NOTE: This is at eval resolution, so values are smaller than full-res. + const EPS_FP_TIE = 3; + + // Guardrail: keep recall above a minimum, then aggressively optimize precision / boundary fit. + // + // Why: + // - In the UI, users can usually fix small FN by painting a bit more. + // - Huge FP (low precision) is much harder to correct and often corresponds to "escaping" the paint bbox. + const MIN_RECALL = 0.97; + const aMeetsRecall = a.metrics.recall >= MIN_RECALL; + const bMeetsRecall = b.metrics.recall >= MIN_RECALL; + + if (aMeetsRecall && !bMeetsRecall) return true; + if (bMeetsRecall && !aMeetsRecall) return false; + + if (aMeetsRecall && bMeetsRecall) { + // Within the acceptable-recall region, prioritize: + // 1) staying near the paint (prevents "fill" leaks) + // 2) fewer false positives (precision) + // 3) then boundary fit + // 4) then overlap + if (a.paintLeakPx < b.paintLeakPx - EPS_PAINT_LEAK) return true; + if (b.paintLeakPx < a.paintLeakPx - EPS_PAINT_LEAK) return false; + + // Use a tail metric first: mean can hide a small-but-important leak far from paint. + if (a.paintDistP95Px < b.paintDistP95Px - EPS_PAINT_DIST_P95) return true; + if (b.paintDistP95Px < a.paintDistP95Px - EPS_PAINT_DIST_P95) return false; + + if (a.paintDistMaxPx < b.paintDistMaxPx - EPS_PAINT_DIST_MAX) return true; + if (b.paintDistMaxPx < a.paintDistMaxPx - EPS_PAINT_DIST_MAX) return false; + + if (a.paintDistMeanPx < b.paintDistMeanPx - EPS_PAINT_DIST_MEAN) return true; + if (b.paintDistMeanPx < a.paintDistMeanPx - EPS_PAINT_DIST_MEAN) return false; + + if (Math.abs(a.metrics.fp - b.metrics.fp) <= EPS_FP_TIE) { + if (a.metrics.fn !== b.metrics.fn) return a.metrics.fn < b.metrics.fn; + } + + if (a.metrics.fp !== b.metrics.fp) return a.metrics.fp < b.metrics.fp; + + // Reduce outward leakage / overshoot. + if (a.boundary.meanPredToGtPx < b.boundary.meanPredToGtPx - EPS_BND_MEAN) return true; + if (b.boundary.meanPredToGtPx < a.boundary.meanPredToGtPx - EPS_BND_MEAN) return false; + + if (a.metrics.fn !== b.metrics.fn) return a.metrics.fn < b.metrics.fn; + + if (a.boundary.maxPredToGtPx < b.boundary.maxPredToGtPx - EPS_BND_MAX) return true; + if (b.boundary.maxPredToGtPx < a.boundary.maxPredToGtPx - EPS_BND_MAX) return false; + + if (a.boundary.meanSymPx < b.boundary.meanSymPx - EPS_BND_MEAN) return true; + if (b.boundary.meanSymPx < a.boundary.meanSymPx - EPS_BND_MEAN) return false; + + if (a.metrics.dice > b.metrics.dice + EPS_DICE) return true; + if (b.metrics.dice > a.metrics.dice + EPS_DICE) return false; + + return a.metrics.iou > b.metrics.iou; + } + + // Below the recall guardrail, keep optimizing for recall-weighted overlap. + if (a.metrics.f2 > b.metrics.f2 + EPS_F2) return true; + if (b.metrics.f2 > a.metrics.f2 + EPS_F2) return false; + + if (a.metrics.recall > b.metrics.recall + EPS_RECALL) return true; + if (b.metrics.recall > a.metrics.recall + EPS_RECALL) return false; + + if (a.metrics.fn !== b.metrics.fn) return a.metrics.fn < b.metrics.fn; + + if (a.boundary.meanPredToGtPx < b.boundary.meanPredToGtPx - EPS_BND_MEAN) return true; + if (b.boundary.meanPredToGtPx < a.boundary.meanPredToGtPx - EPS_BND_MEAN) return false; + + if (a.metrics.fp !== b.metrics.fp) return a.metrics.fp < b.metrics.fp; + + if (a.boundary.maxPredToGtPx < b.boundary.maxPredToGtPx - EPS_BND_MAX) return true; + if (b.boundary.maxPredToGtPx < a.boundary.maxPredToGtPx - EPS_BND_MAX) return false; + + if (a.metrics.dice > b.metrics.dice + EPS_DICE) return true; + if (b.metrics.dice > a.metrics.dice + EPS_DICE) return false; + + return a.metrics.iou > b.metrics.iou; + }; + + const paintDistMaxPossible = evalW + evalH; + const paintDistHist = new Int32Array(paintDistMaxPossible + 1); + + const evalCandidate = ( + thAnchor: number, + tol: number, + opts: SegmentTumorOptions | undefined + ): Candidate | null => { + const threshold = mkThreshold(thAnchor, tol); + try { + const res = segmentTumorFromGrayscale(cap.gray, cap.w, cap.h, paintPoints, threshold, opts); + const predMask = rasterizePolygonToMask(res.polygon, evalW, evalH); + + // Compute overlap metrics and paint-distance metrics in a single pass. + let tp = 0; + let fp = 0; + let fn = 0; + let tn = 0; + + paintDistHist.fill(0); + let predCount = 0; + let sumPaintDist = 0; + let paintDistMaxPx = 0; + + for (let i = 0; i < predMask.length; i++) { + const p = predMask[i] ? 1 : 0; + const g = gtMask[i] ? 1 : 0; + + if (p) { + predCount++; + + const dRaw = paintDistEval[i] ?? 0; + const d = Math.max(0, Math.min(paintDistMaxPossible, dRaw)); + + sumPaintDist += d; + paintDistHist[d] = (paintDistHist[d] ?? 0) + 1; + if (d > paintDistMaxPx) paintDistMaxPx = d; + } + + if (p && g) tp++; + else if (p && !g) fp++; + else if (!p && g) fn++; + else tn++; + } + + const safeDiv = (num: number, den: number) => (den > 0 ? num / den : 0); + const precision = safeDiv(tp, tp + fp); + const recall = safeDiv(tp, tp + fn); + const dice = safeDiv(2 * tp, 2 * tp + fp + fn); + const iou = safeDiv(tp, tp + fp + fn); + + const beta2 = 4; + const f2 = safeDiv((1 + beta2) * precision * recall, beta2 * precision + recall); + + const metrics: MaskMetrics = { tp, fp, fn, tn, precision, recall, dice, iou, f2 }; + + const paintDistMeanPx = predCount > 0 ? sumPaintDist / predCount : Number.POSITIVE_INFINITY; + + // Tail distance metric: approximate via histogram to avoid storing per-pixel distances. + let paintDistP95Px = Number.POSITIVE_INFINITY; + if (predCount > 0) { + const target = Math.ceil(predCount * 0.95); + let cum = 0; + for (let d = 0; d < paintDistHist.length; d++) { + cum += paintDistHist[d] ?? 0; + if (cum >= target) { + paintDistP95Px = d; + break; + } + } + } + + const boundary = computePolygonBoundaryMetrics(res.polygon, gtPolyCap, cap.w, cap.h); + + const predBounds = polygonBounds01(res.polygon); + const leakLeftPx = predBounds.minX < paintBounds.minX ? (paintBounds.minX - predBounds.minX) * cap.w : 0; + const leakRightPx = predBounds.maxX > paintBounds.maxX ? (predBounds.maxX - paintBounds.maxX) * cap.w : 0; + const leakTopPx = predBounds.minY < paintBounds.minY ? (paintBounds.minY - predBounds.minY) * cap.h : 0; + const leakBottomPx = predBounds.maxY > paintBounds.maxY ? (predBounds.maxY - paintBounds.maxY) * cap.h : 0; + const paintLeakPx = Math.max(leakLeftPx, leakRightPx, leakTopPx, leakBottomPx); + + return { + anchor: thAnchor, + tol: threshold.tolerance ?? tol, + opts, + metrics, + boundary, + paintLeakPx, + paintDistMeanPx, + paintDistP95Px, + paintDistMaxPx, + }; + } catch { + return null; + } + }; + + const yieldToUi = () => new Promise ((resolve) => window.setTimeout(resolve, 0)); + + const stats = { + evals: { + stage1TolSweep: 0, + stage2ParamTune: 0, + stage3TolRefine: 0, + stage4PolyTune: 0, + total: 0, + }, + ms: { + stage1TolSweep: 0, + stage2ParamTune: 0, + stage3TolRefine: 0, + stage4PolyTune: 0, + total: 0, + }, + }; + + busyRef.current = true; + setBusy(true); + setError(null); + + try { + const baselineOpts = tunedOptions ?? undefined; + + // Stage 1: sweep (anchor, tolerance) around the current estimate. + setAutoTuneStatus({ running: true, message: 'Auto-tune: sweeping anchor+tolerance…' }); + + let best: Candidate | null = null; + + const anchorCandidates: number[] = []; + // Include both parities. Otherwise, when `anchor` is odd we'd only test odd anchors (and vice versa), + // which can miss materially better solutions (e.g. true best anchor at anchor±7). + for (let a = anchor - 12; a <= anchor + 12; a += 2) { + anchorCandidates.push(Math.max(0, Math.min(255, a))); + } + for (let a = anchor - 11; a <= anchor + 11; a += 2) { + anchorCandidates.push(Math.max(0, Math.min(255, a))); + } + const uniqAnchor = Array.from(new Set(anchorCandidates)).sort((a, b) => a - b); + + const tolCandidates: number[] = []; + for (let t = baseTol - 30; t <= baseTol + 30; t += 2) { + tolCandidates.push(Math.max(0, Math.min(127, t))); + } + // Ensure unique + deterministic. + const uniqTol = Array.from(new Set(tolCandidates)).sort((a, b) => a - b); + + const stage1Total = uniqAnchor.length * uniqTol.length; + let stage1Done = 0; + + const stage1Start = performance.now(); + for (const a of uniqAnchor) { + for (const tol of uniqTol) { + const cand = evalCandidate(a, tol, baselineOpts); + stats.evals.stage1TolSweep++; + stats.evals.total++; + stage1Done++; + + if (cand && (!best || isBetter(cand, best))) best = cand; + + if (stage1Done % 60 === 0) { + setAutoTuneStatus({ + running: true, + message: `Auto-tune: sweeping anchor+tolerance… (${stage1Done}/${stage1Total})`, + }); + await yieldToUi(); + } + } + } + stats.ms.stage1TolSweep = performance.now() - stage1Start; + + if (!best) { + throw new Error('Auto-tune failed: no valid segmentations produced.'); + } + + // Stage 2: parameter tuning. + // + // IMPORTANT: Full grid search is combinatorially expensive and can freeze the UI. + // We use a small, deterministic coordinate-descent search instead. + // + // Key quality improvement: couple tolerance with parameter updates by evaluating a small + // local tolerance window per candidate. + setAutoTuneStatus({ running: true, message: 'Auto-tune: tuning parameters…' }); + + const stage2Start = performance.now(); + const optsKey = (o: SegmentTumorOptions | undefined) => JSON.stringify(o ?? null); + const stage2StartOptsKey = optsKey(best.opts); + + // Bias the search toward tighter distance gating. + // This matters a lot for FLAIR-like cases where leakage can explode FP. + const baseMins = [2, 4, 8]; + const paintFactors = [0.25, 0.35, 0.6]; + const widthFactors = [0.05, 0.1, 0.2]; + + const maxDistTriples: Array<{ baseMin: number; paintScaleFactor: number; thresholdWidthFactor: number }> = []; + for (const baseMin of baseMins) { + for (const paintScaleFactor of paintFactors) { + for (const thresholdWidthFactor of widthFactors) { + maxDistTriples.push({ baseMin, paintScaleFactor, thresholdWidthFactor }); + } + } + } + + const openIters = [0, 1]; + const closeIters = [0, 1, 2]; + const adaptiveFlags = [false, true]; + + // Asymmetric tolerance can reduce leakage when only one side is problematic. + const tolLowScales = [0.6, 0.8, 1, 1.25]; + const tolHighScales = [0.6, 0.8, 1, 1.25]; + + // Include mild values near 1.0 so we can get "just a bit" tighter without increasing FN. + const distTolScaleMins = [1, 0.85, 0.7, 0.55, 0.4, 0.25]; + + // Include a gentle edge penalty; 0.35/0.65 were sometimes too coarse. + const edgePenaltyStrengths = [0, 0.15, 0.35, 0.55]; + + // When options change, the best tolerance can move a lot. Use wider offsets so parameter tuning + // can "pull" the search toward a different tolerance regime. + const tolOffsets = [-16, -8, 0, 8, 16]; + const uniqTolAround = (center: number) => { + const out: number[] = []; + for (const off of tolOffsets) { + out.push(Math.max(0, Math.min(127, Math.round(center + off)))); + } + return Array.from(new Set(out)).sort((a, b) => a - b); + }; + + // If Stage 1 found a good (anchor,tol) using baselineOpts, Stage 2 can still need to "jump" + // to a different anchor once maxDist/morph/asymmetry changes. + const anchorOffsets = [-12, 0, 12]; + const uniqAnchorAround = (center: number) => { + const out: number[] = []; + for (const off of anchorOffsets) { + out.push(Math.max(0, Math.min(255, Math.round(center + off)))); + } + return Array.from(new Set(out)).sort((a, b) => a - b); + }; + + // One pass is usually enough once we allow anchor to move; keep it fast. + const PASSES = 1; + const totalUpperBound = + PASSES * + (maxDistTriples.length + + openIters.length + + closeIters.length + + adaptiveFlags.length + + tolLowScales.length + + tolHighScales.length + + distTolScaleMins.length + + edgePenaltyStrengths.length) * + tolOffsets.length * + anchorOffsets.length; + + let idx = 0; + const maybeYield = async () => { + if (idx % 32 === 0) { + setAutoTuneStatus({ + running: true, + message: `Auto-tune: tuning parameters… (${idx}/${totalUpperBound})`, + }); + await yieldToUi(); + } + }; + + const tryUpdate = async (opts: SegmentTumorOptions | undefined) => { + if (!best) return; + + const centerTol = best.tol; + const tols = uniqTolAround(centerTol); + + const centerAnchor = best.anchor; + const anchors = uniqAnchorAround(centerAnchor); + + let localBest: Candidate | null = null; + for (const anchorCand of anchors) { + for (const tol of tols) { + const cand = evalCandidate(anchorCand, tol, opts); + stats.evals.stage2ParamTune++; + stats.evals.total++; + idx++; + + if (cand && (!localBest || isBetter(cand, localBest))) localBest = cand; + await maybeYield(); + } + } + + if (localBest && isBetter(localBest, best)) best = localBest; + }; + + for (let pass = 0; pass < PASSES; pass++) { + // 2a) Tune the distance gate triple. + for (const t of maxDistTriples) { + await tryUpdate({ ...(best.opts ?? {}), maxDistToPaint: t }); + } + + // 2b) Tune morphology. + for (const morphologicalOpenIterations of openIters) { + await tryUpdate({ ...(best.opts ?? {}), morphologicalOpenIterations }); + } + for (const morphologicalCloseIterations of closeIters) { + await tryUpdate({ ...(best.opts ?? {}), morphologicalCloseIterations }); + } + + // 2c) Tune adaptive flag (edge penalty is disabled for adaptive candidates). + for (const adaptiveEnabled of adaptiveFlags) { + await tryUpdate({ + ...(best.opts ?? {}), + adaptiveEnabled, + edgePenaltyStrength: adaptiveEnabled ? 0 : (best.opts?.edgePenaltyStrength ?? 0), + }); + } + + // 2d) Tune asymmetric tolerance. + for (const toleranceLowScale of tolLowScales) { + await tryUpdate({ ...(best.opts ?? {}), toleranceLowScale }); + } + for (const toleranceHighScale of tolHighScales) { + await tryUpdate({ ...(best.opts ?? {}), toleranceHighScale }); + } + + // 2e) Tune soft distance penalty. + for (const distanceToleranceScaleMin of distTolScaleMins) { + await tryUpdate({ ...(best.opts ?? {}), distanceToleranceScaleMin }); + } + + // 2f) Tune edge penalty (only relevant when adaptive is off). + if (best.opts?.adaptiveEnabled !== true) { + for (const edgePenaltyStrength of edgePenaltyStrengths) { + await tryUpdate({ ...(best.opts ?? {}), edgePenaltyStrength }); + } + } + } + stats.ms.stage2ParamTune = performance.now() - stage2Start; + + // Stage 3: refine anchor + tolerance around the best. + // + // Why: + // - Stage 1 chooses (anchor,tol) using baselineOpts. + // - Stage 2 may change opts materially (distance gating / morphology / asymmetry), which can shift + // the best (anchor,tol) pair. + // - Anchor/tolerance interact, so do a small local 2D search (instead of independent 1D passes). + setAutoTuneStatus({ running: true, message: 'Auto-tune: refining threshold…' }); + + const stage3Start = performance.now(); + const stage2EndOptsKey = optsKey(best.opts); + const tolRefineRadius = stage2EndOptsKey === stage2StartOptsKey ? 8 : 20; + const anchorRefineRadius = stage2EndOptsKey === stage2StartOptsKey ? 4 : 10; + + const tolStep = tolRefineRadius > 12 ? 2 : 1; + const anchorStep = anchorRefineRadius > 6 ? 2 : 1; + + for (let a = best.anchor - anchorRefineRadius; a <= best.anchor + anchorRefineRadius; a += anchorStep) { + const anchorCand = Math.max(0, Math.min(255, a)); + + for (let t = best.tol - tolRefineRadius; t <= best.tol + tolRefineRadius; t += tolStep) { + const tol = Math.max(0, Math.min(127, t)); + const cand = evalCandidate(anchorCand, tol, best.opts); + stats.evals.stage3TolRefine++; + stats.evals.total++; + + if (cand && isBetter(cand, best)) best = cand; + } + } + + stats.ms.stage3TolRefine = performance.now() - stage3Start; + + // Stage 4: tune display-side smoothing/simplification. + setAutoTuneStatus({ running: true, message: 'Auto-tune: tuning polygon smoothing…' }); + + const stage4Start = performance.now(); + const smoothingCandidates = [0, 1, 2]; + const epsCandidates = [0.0003, 0.0005, 0.0008, 0.0012, 0.0018, 0.0024]; + + for (const smoothingIterations of smoothingCandidates) { + for (const simplifyEpsilon of epsCandidates) { + const opts: SegmentTumorOptions = { + ...(best.opts ?? {}), + smoothingIterations, + simplifyEpsilon, + }; + const cand = evalCandidate(best.anchor, best.tol, opts); + stats.evals.stage4PolyTune++; + stats.evals.total++; + + if (cand && isBetter(cand, best)) best = cand; + } + } + stats.ms.stage4PolyTune = performance.now() - stage4Start; + + stats.ms.total = performance.now() - stage1Start; + setAutoTuneLastStats(stats); + setAutoTuneLastBest({ + anchor: best.anchor, + tol: best.tol, + opts: best.opts, + metrics: best.metrics, + boundary: best.boundary, + paintLeakPx: best.paintLeakPx, + paintDistMeanPx: best.paintDistMeanPx, + paintDistP95Px: best.paintDistP95Px, + paintDistMaxPx: best.paintDistMaxPx, + }); + + setAutoTuneStatus({ + running: false, + message: `Auto-tune done (F2 ${best.metrics.f2.toFixed(3)}, recall ${best.metrics.recall.toFixed(3)}).`, + }); + + console.log('[TumorOverlay] Auto-tune BEST', { + anchor: best.anchor, + tol: best.tol, + opts: best.opts, + metrics: best.metrics, + boundary: best.boundary, + paintLeakPx: best.paintLeakPx, + paintDistMeanPx: best.paintDistMeanPx, + paintDistP95Px: best.paintDistP95Px, + paintDistMaxPx: best.paintDistMaxPx, + }); + console.log('[TumorOverlay] Auto-tune STATS', stats); + + setTunedOptions(best.opts ?? null); + setThresholdAnchor(best.anchor); + setThresholdTolerance(best.tol); + + computeDraftFromCurrentCapture(mkThreshold(best.anchor, best.tol), best.opts); + } catch (e) { + console.error('[TumorOverlay] Auto-tune failed:', e); + setAutoTuneStatus({ running: false, message: 'Auto-tune failed (see console).' }); + setError(e instanceof Error ? e.message : 'Auto-tune failed'); + } finally { + busyRef.current = false; + setBusy(false); + } + }, [ + autoTuneStatus.running, + computeDraftFromCurrentCapture, + draftThreshold, + groundTruthPolygon, + groundTruthPolygonViewTransform, + paintPoints, + thresholdAnchor, + thresholdTolerance, + tunedOptions, + ]); + + if (!enabled) return null; + + return ( + + {/* UI chrome */} + {/* + Position below the viewer's top hover controls (Tumor/GT buttons + ImageControls). + Otherwise it visually overlaps the control bar in GridView/OverlayView. + */} ++ ); +} diff --git a/frontend/src/components/TumorSegmentationOverlaySeedGrow.tsx b/frontend/src/components/TumorSegmentationOverlaySeedGrow.tsx new file mode 100644 index 0000000..b66bcae --- /dev/null +++ b/frontend/src/components/TumorSegmentationOverlaySeedGrow.tsx @@ -0,0 +1,1353 @@ +import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { Sparkles, X } from 'lucide-react'; +import type { + NormalizedPoint, + TumorGrow2dMeta, + TumorPolygon, + TumorThreshold, + ViewerTransform, +} from '../db/schema'; +import type { DicomViewerHandle } from './DicomViewer'; +import { + getSopInstanceUidForInstanceIndex, + getTumorGroundTruthForInstance, + getTumorSegmentationForInstance, + saveTumorSegmentation, +} from '../utils/localApi'; +import { decodeCapturedPngToGrayscale } from '../utils/segmentation/segmentTumor'; +import { + computeCostDistanceMap, + distThresholdFromSlider, + type CostDistanceGrow2dResult, + type CostDistanceGrow2dTuning, +} from '../utils/segmentation/costDistanceGrow2d'; +import { marchingSquaresContour } from '../utils/segmentation/marchingSquares'; +import { + normalizeViewerTransform, + remapPointBetweenViewerTransforms, + remapPolygonBetweenViewerTransforms, +} from '../utils/viewTransform'; + +function clamp01(v: number) { + return Math.max(0, Math.min(1, v)); +} + +function clamp(v: number, lo: number, hi: number) { + return Math.max(lo, Math.min(hi, v)); +} + +const GROW2D_UI_STORAGE_KEY_PREFIX = 'miraviewer:tumor-grow2d-ui-v1'; +const LEGACY_GROW2D_TUNING_STORAGE_KEY = 'miraviewer:tumor-grow2d-tuning-v1'; + +function getGrow2dUiStorageKey(params: { comboId: string; dateIso: string }): string { + return `${GROW2D_UI_STORAGE_KEY_PREFIX}:${params.dateIso}:${params.comboId}`; +} + +type Grow2dTuningUi = Pick++ + {/* Threshold + save controls (only after painting / draft segmentation exists) */} + {draftPolygon && containerSize.w > 0 && containerSize.h > 0 + ? (() => { + // Anchor threshold controls next to the *user-painted area*, not the draft polygon. + // The polygon can change substantially as the threshold moves, but the painted region + // is the user's mental anchor for where they were working. + const bbox = paintPointsDisplay.length + ? pointsBounds01(paintPointsDisplay) + : polygonBounds01(draftPolygonDisplay ?? draftPolygon); + + // Place the control panel next to the painted region, preferring the right side. + const panelWidth = 176; + const sliderHeight = Math.max( + 120, + Math.min(260, Math.round((bbox.maxY - bbox.minY) * containerSize.h)) + ); + + const gtSectionHeight = groundTruthPolygon ? 175 : 0; + const panelHeight = sliderHeight + 78 + gtSectionHeight; + + const minXpx = bbox.minX * containerSize.w; + const maxXpx = bbox.maxX * containerSize.w; + const minYpx = bbox.minY * containerSize.h; + + let left = maxXpx + 12; + if (left + panelWidth > containerSize.w - 8) { + left = minXpx - panelWidth - 12; + } + left = Math.max(8, Math.min(containerSize.w - panelWidth - 8, left)); + + let top = minYpx; + top = Math.max(8, Math.min(containerSize.h - panelHeight - 8, top)); + + return ( +++ + ++ Tumor + {busy ? … : null} + + {/* Vertical threshold slider */} ++ ); + })() + : null} + + {/* Error / status */} + {error ? ( ++ setThresholdTolerance(parseInt(e.target.value, 10))} + className="absolute" + style={{ + width: sliderHeight, + transform: 'rotate(-90deg)', + transformOrigin: 'center', + }} + aria-label="Tolerance" + /> ++ ++ {effectiveThresholdFromSlider.low}–{effectiveThresholdFromSlider.high} ++ + + + {savedSeed && savedThreshold ? ( + + ) : null} + + {groundTruthPolygon ? ( +++ ) : null} +++ + {gtMetrics ? ( ++ GT Eval + {tunedOptions ? (tuned) : null} ++ + +++ ) : ( ++ F2 + {gtMetrics.f2.toFixed(3)} +++ Recall + {gtMetrics.recall.toFixed(3)} +++ Prec + {gtMetrics.precision.toFixed(3)} +++ IoU + {gtMetrics.iou.toFixed(3)} +++ Dice + {gtMetrics.dice.toFixed(3)} ++ + {gtBoundaryMetrics ? ( + <> ++ Bnd out μ + {gtBoundaryMetrics.meanPredToGtPx.toFixed(2)} px +++ Bnd in μ + {gtBoundaryMetrics.meanGtToPredPx.toFixed(2)} px +++ Bnd μ + {gtBoundaryMetrics.meanSymPx.toFixed(2)} px +++ Bnd max + {gtBoundaryMetrics.maxSymPx.toFixed(1)} px ++ + ) : null} + ++ FN + {gtMetrics.fn} +++ FP + {gtMetrics.fp} ++Paint + segment to evaluate vs GT.+ )} + ++ + + + + {import.meta.env.DEV ? ( + + ) : null} + + + + ++ + {autoTuneStatus.message ? ( +{autoTuneStatus.message}+ ) : null} + {gtBenchmarkStatus.message ? ( +{gtBenchmarkStatus.message}+ ) : null} + {harnessExportStatus.message ? ( +{harnessExportStatus.message}+ ) : null} ++ {error} ++ ) : propStatus.message ? ( ++ {propStatus.message} ++ ) : !draftPolygon ? ( ++ Click and drag to paint the tumor region. ++ ) : null} + + {/* GT diff overlay (FN red, FP magenta) */} + {groundTruthPolygon && diffOverlayEnabled ? ( + + ) : null} + + {/* Paint stroke preview (transparent pink brush) */} + {paintPointsDisplay.length > 1 ? ( + + ) : null} + + {/* Ground truth polygon (debug) */} + {groundTruthPath ? ( + + ) : null} + + {/* Saved polygon */} + {savedPath ? ( + + ) : null} + + {/* Draft polygon (overlays saved) */} + {draftPath ? ( + + ) : null} +; + + comboId: string; + dateIso: string; + studyId: string; + seriesUid: string; + /** Instance index in effective slice ordering (i.e. after reverseSliceOrder mapping). */ + effectiveInstanceIndex: number; + + /** Current viewer transform (pan/zoom/rotation/affine). */ + viewerTransform: ViewerTransform; +}; + +type Capture = { gray: Uint8Array; w: number; h: number; viewTransform: ViewerTransform }; + +type NormalizedRoi = { x0: number; y0: number; x1: number; y1: number }; + +function pointsToSvgPath(points: NormalizedPoint[]): string { + if (points.length === 0) return ''; + const d = [`M ${points[0].x.toFixed(4)} ${points[0].y.toFixed(4)}`]; + for (let i = 1; i < points.length; i++) { + d.push(`L ${points[i].x.toFixed(4)} ${points[i].y.toFixed(4)}`); + } + d.push('Z'); + return d.join(' '); +} + +function toGrow2dMeta(params: { + grow: CostDistanceGrow2dResult; + targetAreaPx: number; + maxTargetAreaPx: number; +}): TumorGrow2dMeta { + const { grow, targetAreaPx, maxTargetAreaPx } = params; + + const maxA = Math.max(1, Math.round(maxTargetAreaPx)); + const a = Math.max(1, Math.min(maxA, Math.round(targetAreaPx))); + + return { + kind: 'cost-distance', + slider: { + value01: clamp01(a / maxA), + targetAreaPx: a, + maxTargetAreaPx: maxA, + }, + roi: { ...grow.roi }, + captureSize: { w: grow.w, h: grow.h }, + stats: { + tumorMu: grow.stats.tumor.mu, + tumorSigma: grow.stats.tumor.sigma, + bgMu: grow.stats.bg?.mu, + bgSigma: grow.stats.bg?.sigma, + edgeBarrier: grow.stats.edgeBarrier, + }, + weights: { + edgeCostStrength: grow.weights.edgeCostStrength, + crossCostStrength: grow.weights.crossCostStrength, + tumorCostStrength: grow.weights.tumorCostStrength, + bgCostStrength: grow.weights.bgCostStrength, + bgRejectMarginZ: grow.weights.bgRejectMarginZ, + allowDiagonal: grow.weights.allowDiagonal, + }, + tuning: { + ...grow.tuning, + }, + dist: { + maxFiniteDist: grow.maxFiniteDist, + }, + }; +} + +export function TumorSegmentationOverlay({ + enabled, + onRequestClose, + seedBoxToStart, + onSeedBoxToStartConsumed, + viewerRef, + comboId, + dateIso, + studyId, + seriesUid, + effectiveInstanceIndex, + viewerTransform, +}: TumorSegmentationOverlayProps) { + const containerRef = useRef (null); + + // Keep the latest viewer transform in a ref so we can snapshot it during capture. + const viewerTransformRef = useRef(viewerTransform); + useEffect(() => { + viewerTransformRef.current = viewerTransform; + }, [viewerTransform]); + + const [containerSize, setContainerSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 }); + const viewSize = useMemo(() => ({ w: containerSize.w, h: containerSize.h }), [containerSize.h, containerSize.w]); + const viewSizeRef = useRef(viewSize); + useEffect(() => { + viewSizeRef.current = viewSize; + }, [viewSize]); + + const [busy, setBusy] = useState(false); + const [saving, setSaving] = useState(false); + const [error, setError] = useState (null); + + const [sopInstanceUid, setSopInstanceUid] = useState (null); + + const capturedRef = useRef (null); + const [captureVersion, setCaptureVersion] = useState(0); + + const growRef = useRef (null); + const [growVersion, setGrowVersion] = useState(0); + + // Cap for the area-target slider. This controls how far the user can expand the grow. + // NOTE: Keeping this too large makes the range input feel overly sensitive. + const MAX_TARGET_AREA_PX = 10_000; + + const grow2dUiStorageKey = getGrow2dUiStorageKey({ comboId, dateIso }); + const [grow2dUiStorageKeyForState, setGrow2dUiStorageKeyForState] = useState(grow2dUiStorageKey); + + const [grow2dUi, setGrow2dUi] = useState (() => + loadGrow2dUiSettings({ storageKey: grow2dUiStorageKey, maxTargetAreaPx: MAX_TARGET_AREA_PX }), + ); + + const grow2dTuning = grow2dUi.tuning; + const targetAreaPx = grow2dUi.targetAreaPx; + + const setGrow2dTuning = useCallback( + (updater: Grow2dTuningUi | ((prev: Grow2dTuningUi) => Grow2dTuningUi)) => { + setGrow2dUi((s) => ({ + ...s, + tuning: + typeof updater === 'function' ? (updater as (p: Grow2dTuningUi) => Grow2dTuningUi)(s.tuning) : updater, + })); + }, + [], + ); + + const setTargetAreaPx = useCallback( + (updater: number | ((prev: number) => number)) => { + setGrow2dUi((s) => { + const nextRaw = typeof updater === 'function' ? (updater as (p: number) => number)(s.targetAreaPx) : updater; + const next = Math.max(1, Math.min(MAX_TARGET_AREA_PX, Math.round(nextRaw))); + return { ...s, targetAreaPx: next }; + }); + }, + [MAX_TARGET_AREA_PX], + ); + + // Load per-sequence/date slider settings. + useEffect(() => { + const loaded = loadGrow2dUiSettings({ storageKey: grow2dUiStorageKey, maxTargetAreaPx: MAX_TARGET_AREA_PX }); + setGrow2dUi(loaded); + setGrow2dUiStorageKeyForState(grow2dUiStorageKey); + }, [MAX_TARGET_AREA_PX, grow2dUiStorageKey]); + + // Persist per-sequence/date slider settings. + useEffect(() => { + if (grow2dUiStorageKeyForState !== grow2dUiStorageKey) return; + if (typeof localStorage === 'undefined') return; + try { + localStorage.setItem( + grow2dUiStorageKey, + JSON.stringify({ + v: 1, + tuning: grow2dUi.tuning, + targetAreaPx: Math.round(grow2dUi.targetAreaPx), + }), + ); + } catch { + // Ignore quota / privacy-mode errors. + } + }, [grow2dUi, grow2dUiStorageKey, grow2dUiStorageKeyForState]); + + // Precomputed mapping: N pixels -> distance threshold for selecting dist<=T. + // Built once per seed grow so the slider isn't overly sensitive (especially at small areas). + const areaThresholdsRef = useRef (null); + + + // Segmentation starts from a user-drawn seed box (no single-click anchor). + // Use a single seed at the box centroid. + const SEED_COUNT = 1; + + const [draftSeed, setDraftSeed] = useState (null); + const draftSeedRef = useRef (null); + useEffect(() => { + draftSeedRef.current = draftSeed; + }, [draftSeed]); + + const [draftSeedViewTransform, setDraftSeedViewTransform] = useState (null); + const draftSeedViewTransformRef = useRef (null); + useEffect(() => { + draftSeedViewTransformRef.current = draftSeedViewTransform; + }, [draftSeedViewTransform]); + + + const [draftPolygon, setDraftPolygon] = useState (null); + const [draftPolygonViewTransform, setDraftPolygonViewTransform] = useState (null); + const [draftAreaPx, setDraftAreaPx] = useState (null); + + const [savedPolygon, setSavedPolygon] = useState (null); + const [savedPolygonViewTransform, setSavedPolygonViewTransform] = useState (null); + const [savedSeed, setSavedSeed] = useState (null); + const [savedGrow2d, setSavedGrow2d] = useState (null); + + // Keep per-slice saved seed + viewTransform in refs so slice-change auto-start can avoid stale state. + const savedDataSliceKeyRef = useRef (null); + const savedSeedRef = useRef (null); + const savedViewTransformRef = useRef (normalizeViewerTransform(null)); + + const [groundTruthPolygon, setGroundTruthPolygon] = useState (null); + const [groundTruthPolygonViewTransform, setGroundTruthPolygonViewTransform] = useState (null); + + const abortRef = useRef (null); + + const startGrowRef = useRef<((params: { seedBox: NormalizedRoi }) => Promise ) | null>(null); + const autoStartSliceKeyRef = useRef (null); + + const debugEnabled = + typeof localStorage !== 'undefined' && localStorage.getItem('miraviewer:debug-grow2d') === '1'; + + // Track container size (used for hit-testing + UI placement). + useEffect(() => { + if (!enabled) return; + const el = containerRef.current; + if (!el) return; + + const update = () => { + const r = el.getBoundingClientRect(); + setContainerSize({ w: r.width, h: r.height }); + }; + + update(); + const ro = new ResizeObserver(update); + ro.observe(el); + return () => ro.disconnect(); + }, [enabled]); + + + + // Load saved segmentation + GT when enabled or slice changes. + // IMPORTANT: clear any draft/captured state immediately so we don't render stale overlays while loading. + useEffect(() => { + if (!enabled) return; + + const sliceKey = `${seriesUid}:${effectiveInstanceIndex}`; + savedDataSliceKeyRef.current = sliceKey; + savedSeedRef.current = null; + savedViewTransformRef.current = normalizeViewerTransform(null); + + setError(null); + setBusy(false); + setSaving(false); + + // Cancel any in-flight grow. + abortRef.current?.abort(); + abortRef.current = null; + + capturedRef.current = null; + setCaptureVersion((v) => v + 1); + + growRef.current = null; + setGrowVersion((v) => v + 1); + + areaThresholdsRef.current = null; + + // Keep the seed anchor across slice changes so the tool stays "live" as the user scrolls. + // We only clear the draft segmentation + capture/grow state, which are slice-specific. + setDraftPolygon(null); + setDraftPolygonViewTransform(null); + setDraftAreaPx(null); + + + // Clear per-slice saved/GT state until the async load completes. + setSopInstanceUid(null); + setSavedPolygon(null); + setSavedPolygonViewTransform(normalizeViewerTransform(null)); + setSavedSeed(null); + setSavedGrow2d(null); + + // Also clear refs so slice-change auto-start can't use stale saved state. + savedSeedRef.current = null; + savedViewTransformRef.current = normalizeViewerTransform(null); + + setGroundTruthPolygon(null); + setGroundTruthPolygonViewTransform(normalizeViewerTransform(null)); + + let cancelled = false; + (async () => { + try { + const sop = await getSopInstanceUidForInstanceIndex(seriesUid, effectiveInstanceIndex); + if (cancelled) return; + + setSopInstanceUid(sop); + + const [row, gt] = await Promise.all([ + getTumorSegmentationForInstance(seriesUid, sop), + getTumorGroundTruthForInstance(seriesUid, sop), + ]); + + if (cancelled) return; + + const fallbackView = normalizeViewerTransform(null); + + const savedView = row?.meta?.viewTransform ?? fallbackView; + + setSavedPolygon(row?.polygon ?? null); + setSavedPolygonViewTransform(savedView); + setSavedSeed(row?.seed ?? null); + setSavedGrow2d((row?.meta?.grow2d as TumorGrow2dMeta | undefined) ?? null); + + // Update refs for slice-change auto-start. + if (savedDataSliceKeyRef.current === sliceKey) { + savedSeedRef.current = row?.seed ?? null; + savedViewTransformRef.current = savedView; + } + + setGroundTruthPolygon(gt?.polygon ?? null); + setGroundTruthPolygonViewTransform(gt?.viewTransform ?? fallbackView); + } catch (e) { + console.error(e); + } + })(); + + return () => { + cancelled = true; + }; + }, [enabled, effectiveInstanceIndex, seriesUid]); + + + // If we have a saved grow2d row and no per-sequence/date slider settings yet, seed the settings from it. + useEffect(() => { + if (!enabled) return; + if (draftSeed) return; + + if (typeof localStorage !== 'undefined') { + try { + if (localStorage.getItem(grow2dUiStorageKey)) return; + } catch { + // Ignore quota / privacy-mode errors. + } + } + + const s = savedGrow2d?.slider; + const savedTuning = savedGrow2d?.tuning; + + if (savedTuning) { + setGrow2dTuning(normalizeGrow2dTuning(savedTuning)); + } + + if (!s) return; + + const a = + typeof s.targetAreaPx === 'number' && Number.isFinite(s.targetAreaPx) + ? Math.round(s.targetAreaPx) + : typeof s.value01 === 'number' && Number.isFinite(s.value01) + ? Math.round(clamp01(s.value01) * MAX_TARGET_AREA_PX) + : null; + + if (a != null) { + setTargetAreaPx(Math.max(1, Math.min(MAX_TARGET_AREA_PX, a))); + } + }, [MAX_TARGET_AREA_PX, draftSeed, enabled, grow2dUiStorageKey, savedGrow2d, setGrow2dTuning, setTargetAreaPx]); + + const computeDraftPolygonFromGrow = useCallback( + (overrideTargetAreaPx?: number) => { + const cap = capturedRef.current; + const grow = growRef.current; + if (!cap || !grow) return; + + const thresholds = areaThresholdsRef.current; + + const aRaw = + typeof overrideTargetAreaPx === 'number' && Number.isFinite(overrideTargetAreaPx) + ? overrideTargetAreaPx + : targetAreaPx; + const a = Math.max(1, Math.min(MAX_TARGET_AREA_PX, Math.round(aRaw))); + + const T = (() => { + if (thresholds && thresholds.length > 0) { + const idx = Math.min(a, thresholds.length) - 1; + return thresholds[idx] ?? thresholds[thresholds.length - 1] ?? 0; + } + + // Fallback: quantile LUT (coarser, but better than nothing). + const s = clamp01(a / MAX_TARGET_AREA_PX); + return distThresholdFromSlider({ quantileLut: grow.quantileLut, slider01: s, gamma: 1 }); + })(); + + const mask = (() => { + const out = new Uint8Array(grow.w * grow.h); + const { x0, y0, x1, y1 } = grow.roi; + + let area = 0; + + for (let y = y0; y <= y1; y++) { + const row = y * grow.w; + for (let x = x0; x <= x1; x++) { + const i = row + x; + const d = grow.dist[i] ?? Number.POSITIVE_INFINITY; + if (d <= T) { + out[i] = 1; + area++; + } + } + } + + return { out, area }; + })(); + + if (mask.area <= 0) { + setDraftPolygon(null); + setDraftPolygonViewTransform(null); + setDraftAreaPx(0); + return; + } + + const contourPx = marchingSquaresContour(mask.out, grow.w, grow.h, grow.roi); + if (contourPx.length < 3) { + setDraftPolygon(null); + setDraftPolygonViewTransform(null); + setDraftAreaPx(mask.area); + return; + } + + const points = contourPx.map((p) => ({ + x: p.x / Math.max(1, grow.w - 1), + y: p.y / Math.max(1, grow.h - 1), + })); + + setDraftPolygon({ points }); + setDraftPolygonViewTransform(cap.viewTransform); + setDraftAreaPx(mask.area); + + if (debugEnabled) { + console.log('[TumorSeedGrow] draft polygon updated', { + targetAreaPx: a, + T, + points: points.length, + area: mask.area, + }); + } + }, + [MAX_TARGET_AREA_PX, debugEnabled, targetAreaPx] + ); + + // Update draft polygon when slider changes (throttled to animation frames). + const rafRef = useRef (null); + useEffect(() => { + if (!enabled) return; + if (!growRef.current || !capturedRef.current || !draftSeed) return; + + if (rafRef.current != null) { + cancelAnimationFrame(rafRef.current); + } + + rafRef.current = requestAnimationFrame(() => { + rafRef.current = null; + computeDraftPolygonFromGrow(); + }); + + return () => { + if (rafRef.current != null) { + cancelAnimationFrame(rafRef.current); + rafRef.current = null; + } + }; + }, [computeDraftPolygonFromGrow, draftSeed, enabled, targetAreaPx, growVersion]); + + const startGrow = useCallback( + async (params: { seedBox: NormalizedRoi }) => { + const v = viewerRef.current; + if (!v) { + setError('Viewer not ready'); + return; + } + + setError(null); + setBusy(true); + + // Abort any in-flight grow and replace its controller. + abortRef.current?.abort(); + const ac = new AbortController(); + abortRef.current = ac; + + try { + const viewTransformAtCapture = { ...viewerTransformRef.current }; + + const anchor: NormalizedPoint = { + x: (params.seedBox.x0 + params.seedBox.x1) * 0.5, + y: (params.seedBox.y0 + params.seedBox.y1) * 0.5, + }; + + if (debugEnabled) { + console.log('[TumorSeedGrow] capturing PNG for grow', { + anchor, + seedBox: params.seedBox, + viewTransformAtCapture, + }); + } + + const png = await v.captureVisiblePng({ maxSize: 512 }); + const decoded = await decodeCapturedPngToGrayscale(png); + + const cap: Capture = { + gray: decoded.gray, + w: decoded.width, + h: decoded.height, + viewTransform: viewTransformAtCapture, + }; + capturedRef.current = cap; + setCaptureVersion((x) => x + 1); + + setDraftSeed(anchor); + setDraftSeedViewTransform(viewTransformAtCapture); + + const seedPx = { + x: anchor.x * (cap.w - 1), + y: anchor.y * (cap.h - 1), + }; + + + const grow = await computeCostDistanceMap({ + gray: cap.gray, + w: cap.w, + h: cap.h, + seedPx, + seedCount: SEED_COUNT, + tuning: { ...grow2dTuning, baseStepScale: LOCKED_BASE_STEP_SCALE }, + yieldEvery: 20000, + yieldToUi: () => new Promise ((resolve) => window.setTimeout(resolve, 0)), + signal: ac.signal, + }); + + growRef.current = grow; + + // Precompute area→threshold mapping so the slider stays well-behaved at small sizes. + areaThresholdsRef.current = (() => { + const { x0, y0, x1, y1 } = grow.roi; + const roiW = Math.max(1, x1 - x0 + 1); + const roiH = Math.max(1, y1 - y0 + 1); + + const tmp = new Float32Array(roiW * roiH); + let n = 0; + + for (let y = y0; y <= y1; y++) { + const row = y * grow.w; + for (let x = x0; x <= x1; x++) { + const d = grow.dist[row + x] ?? Number.POSITIVE_INFINITY; + if (!Number.isFinite(d)) continue; + tmp[n++] = d; + } + } + + if (n <= 0) return new Float32Array([0]); + + const finite = tmp.subarray(0, n); + finite.sort(); + + const outN = Math.min(MAX_TARGET_AREA_PX, finite.length); + return finite.slice(0, outN); + })(); + + setGrowVersion((x) => x + 1); + + // Start with the persisted value (clamped to the available threshold LUT for this grow). + const thresholds = areaThresholdsRef.current; + const maxA = Math.max(1, Math.min(MAX_TARGET_AREA_PX, thresholds?.length ?? MAX_TARGET_AREA_PX)); + const initialTargetAreaPx = Math.max(1, Math.min(maxA, Math.round(targetAreaPx))); + setTargetAreaPx(initialTargetAreaPx); + + // Compute an initial draft immediately (avoid relying on async state timing). + computeDraftPolygonFromGrow(initialTargetAreaPx); + } catch (e) { + // When restarting quickly (or navigating slices), we may intentionally abort the previous grow. + if (ac.signal.aborted) return; + + console.error('[TumorSeedGrow] Seed segmentation failed', e); + setError(e instanceof Error ? e.message : 'Segmentation failed'); + } finally { + // Only clear busy if we're still the most recent grow. + if (abortRef.current === ac) { + abortRef.current = null; + setBusy(false); + } + } + }, + [SEED_COUNT, computeDraftPolygonFromGrow, debugEnabled, grow2dTuning, viewerRef, setTargetAreaPx, targetAreaPx] + ); + + // Keep a ref so slice-change auto-start can call the latest startGrow without pulling its deps. + startGrowRef.current = startGrow; + + const recomputeGrowFromCurrent = useCallback(async () => { + const cap = capturedRef.current; + const anchor = draftSeedRef.current; + + if (!cap || !anchor) return; + + setError(null); + setBusy(true); + + // Abort any in-flight grow and replace its controller. + abortRef.current?.abort(); + const ac = new AbortController(); + abortRef.current = ac; + + try { + const seedPx = { + x: anchor.x * (cap.w - 1), + y: anchor.y * (cap.h - 1), + }; + + const grow = await computeCostDistanceMap({ + gray: cap.gray, + w: cap.w, + h: cap.h, + seedPx, + seedCount: SEED_COUNT, + tuning: { ...grow2dTuning, baseStepScale: LOCKED_BASE_STEP_SCALE }, + yieldEvery: 20000, + yieldToUi: () => new Promise ((resolve) => window.setTimeout(resolve, 0)), + signal: ac.signal, + }); + + if (ac.signal.aborted) return; + + growRef.current = grow; + + // Precompute area→threshold mapping so the slider stays well-behaved at small sizes. + areaThresholdsRef.current = (() => { + const { x0, y0, x1, y1 } = grow.roi; + const roiW = Math.max(1, x1 - x0 + 1); + const roiH = Math.max(1, y1 - y0 + 1); + + const tmp = new Float32Array(roiW * roiH); + let n = 0; + + for (let y = y0; y <= y1; y++) { + const row = y * grow.w; + for (let x = x0; x <= x1; x++) { + const d = grow.dist[row + x] ?? Number.POSITIVE_INFINITY; + if (!Number.isFinite(d)) continue; + tmp[n++] = d; + } + } + + if (n <= 0) return new Float32Array([0]); + + const finite = tmp.subarray(0, n); + finite.sort(); + + const outN = Math.min(MAX_TARGET_AREA_PX, finite.length); + return finite.slice(0, outN); + })(); + + const thresholds = areaThresholdsRef.current; + const maxA = Math.max(1, Math.min(MAX_TARGET_AREA_PX, thresholds?.length ?? MAX_TARGET_AREA_PX)); + const aClamped = Math.max(1, Math.min(maxA, Math.round(targetAreaPx))); + if (aClamped !== targetAreaPx) setTargetAreaPx(aClamped); + + setGrowVersion((x) => x + 1); + + // Compute an updated draft immediately. + computeDraftPolygonFromGrow(aClamped); + + if (debugEnabled) { + console.log('[TumorSeedGrow] grow recomputed', { tuning: grow2dTuning }); + } + } catch (e) { + if (ac.signal.aborted) return; + console.error('[TumorSeedGrow] Recompute failed', e); + setError(e instanceof Error ? e.message : 'Segmentation failed'); + } finally { + if (abortRef.current === ac) { + abortRef.current = null; + setBusy(false); + } + } + }, [MAX_TARGET_AREA_PX, SEED_COUNT, computeDraftPolygonFromGrow, debugEnabled, grow2dTuning, setTargetAreaPx, targetAreaPx]); + + const tuningRecomputeTimerRef = useRef (null); + + useEffect(() => { + if (!enabled) return; + if (!draftSeed) return; + if (!capturedRef.current) return; + + const cur = growRef.current?.tuning; + if (!cur) return; + + const diff = (a: number, b: number) => Math.abs(a - b) > 1e-6; + + const changed = diff(cur.surfaceTension, grow2dTuning.surfaceTension); + + if (!changed) return; + + if (tuningRecomputeTimerRef.current !== null) { + window.clearTimeout(tuningRecomputeTimerRef.current); + } + + tuningRecomputeTimerRef.current = window.setTimeout(() => { + tuningRecomputeTimerRef.current = null; + void recomputeGrowFromCurrent(); + }, 150); + + return () => { + if (tuningRecomputeTimerRef.current !== null) { + window.clearTimeout(tuningRecomputeTimerRef.current); + tuningRecomputeTimerRef.current = null; + } + }; + }, [draftSeed, enabled, grow2dTuning, growVersion, recomputeGrowFromCurrent]); + + // Support starting the grow from an external seed box (e.g. via the shared drag-rect overlay). + useEffect(() => { + if (!enabled) return; + const box = seedBoxToStart; + if (!box) return; + + onSeedBoxToStartConsumed?.(); + void startGrow({ seedBox: box }); + }, [enabled, onSeedBoxToStartConsumed, seedBoxToStart, startGrow]); + + // When browsing slices, keep tumor mode "live": + // - If we have a seed (carried from the previous slice) or a saved seed for this slice, + // automatically recompute the grow so the user immediately sees a segmentation preview. + useEffect(() => { + if (!enabled) { + autoStartSliceKeyRef.current = null; + return; + } + + // Avoid fighting an explicit start request. + if (seedBoxToStart) return; + + const sliceKey = `${seriesUid}:${effectiveInstanceIndex}`; + + const v = viewerRef.current; + const start = startGrowRef.current; + if (!v || !start) return; + + const size = viewSizeRef.current; + const curView = viewerTransformRef.current; + + const savedSeedForSlice = savedDataSliceKeyRef.current === sliceKey ? savedSeedRef.current : null; + const savedFrom = savedViewTransformRef.current; + + const carriedSeed = draftSeedRef.current; + const carriedFrom = draftSeedViewTransformRef.current ?? curView; + + const { anchor, source } = (() => { + if (savedSeedForSlice) { + const a = + size.w > 0 && size.h > 0 + ? remapPointBetweenViewerTransforms(savedSeedForSlice, size, savedFrom, curView) + : savedSeedForSlice; + return { anchor: a, source: 'saved' as const }; + } + if (carriedSeed) { + const a = + size.w > 0 && size.h > 0 + ? remapPointBetweenViewerTransforms(carriedSeed, size, carriedFrom, curView) + : carriedSeed; + return { anchor: a, source: 'carried' as const }; + } + return { anchor: null, source: null }; + })(); + + if (!anchor || !source) return; + + const token = `${sliceKey}:${source}`; + if (autoStartSliceKeyRef.current === token) return; + autoStartSliceKeyRef.current = token; + + void (async () => { + const myToken = token; + const contentKey = `${studyId}:${seriesUid}:${effectiveInstanceIndex}`; + + try { + await v.waitForDisplayedContentKey(contentKey, 2500); + } catch (e) { + if (debugEnabled) { + console.warn('[TumorSeedGrow] waitForDisplayedContentKey timed out; capturing anyway', { + contentKey, + error: e, + }); + } + } + + // If the user scrolled again (or the seed source changed), do not run a stale auto-start. + if (autoStartSliceKeyRef.current !== myToken) return; + + const ax = clamp01(anchor.x); + const ay = clamp01(anchor.y); + await start({ seedBox: { x0: ax, y0: ay, x1: ax, y1: ay } }); + })(); + }, [debugEnabled, draftSeed, effectiveInstanceIndex, enabled, savedSeed, seedBoxToStart, seriesUid, studyId, viewerRef]); + + const seedBoxPath = useMemo(() => { + // Depend on capture/grow versions so we recompute when the underlying refs update. + const _version = captureVersion + growVersion; + void _version; + + const cap = capturedRef.current; + const grow = growRef.current; + if (!draftSeed || !cap || !grow) return ''; + + const w = Math.max(1, grow.w - 1); + const h = Math.max(1, grow.h - 1); + + // Seed sampling box (in capture coords) remapped to the current viewer transform. + const corners: NormalizedPoint[] = [ + { x: grow.seedBox.x0 / w, y: grow.seedBox.y0 / h }, + { x: grow.seedBox.x1 / w, y: grow.seedBox.y0 / h }, + { x: grow.seedBox.x1 / w, y: grow.seedBox.y1 / h }, + { x: grow.seedBox.x0 / w, y: grow.seedBox.y1 / h }, + ].map((p) => remapPointBetweenViewerTransforms(p, viewSize, cap.viewTransform, viewerTransform)); + + return pointsToSvgPath(corners); + }, [captureVersion, draftSeed, growVersion, viewSize, viewerTransform]); + + const seedClusterDisplay = useMemo(() => { + // Depend on capture/grow versions so we recompute when the underlying refs update. + const _version = captureVersion + growVersion; + void _version; + + const cap = capturedRef.current; + const grow = growRef.current; + if (!draftSeed || !cap || !grow) return null; + + const w = Math.max(1, grow.w - 1); + const h = Math.max(1, grow.h - 1); + + const pts = grow.seedPxs.map((sp) => ({ x: sp.x / w, y: sp.y / h })); + return pts.map((p) => remapPointBetweenViewerTransforms(p, viewSize, cap.viewTransform, viewerTransform)); + }, [captureVersion, draftSeed, growVersion, viewSize, viewerTransform]); + + const draftPolygonDisplay = useMemo(() => { + if (!draftPolygon) return null; + if (viewSize.w <= 0 || viewSize.h <= 0) return draftPolygon; + + const from = draftPolygonViewTransform ?? viewerTransform; + return remapPolygonBetweenViewerTransforms(draftPolygon, viewSize, from, viewerTransform); + }, [draftPolygon, draftPolygonViewTransform, viewSize, viewerTransform]); + + const savedPolygonDisplay = useMemo(() => { + if (!savedPolygon) return null; + if (viewSize.w <= 0 || viewSize.h <= 0) return savedPolygon; + + const from = savedPolygonViewTransform ?? viewerTransform; + return remapPolygonBetweenViewerTransforms(savedPolygon, viewSize, from, viewerTransform); + }, [savedPolygon, savedPolygonViewTransform, viewSize, viewerTransform]); + + const groundTruthPolygonDisplay = useMemo(() => { + if (!groundTruthPolygon) return null; + if (viewSize.w <= 0 || viewSize.h <= 0) return groundTruthPolygon; + + const from = groundTruthPolygonViewTransform ?? viewerTransform; + return remapPolygonBetweenViewerTransforms(groundTruthPolygon, viewSize, from, viewerTransform); + }, [groundTruthPolygon, groundTruthPolygonViewTransform, viewSize, viewerTransform]); + + const draftPath = useMemo(() => (draftPolygonDisplay ? polygonToSvgPath(draftPolygonDisplay) : ''), [draftPolygonDisplay]); + const savedPath = useMemo(() => (savedPolygonDisplay ? polygonToSvgPath(savedPolygonDisplay) : ''), [savedPolygonDisplay]); + const groundTruthPath = useMemo( + () => (groundTruthPolygonDisplay ? polygonToSvgPath(groundTruthPolygonDisplay) : ''), + [groundTruthPolygonDisplay] + ); + + + const AUTO_SAVE_DEBOUNCE_MS = 350; + const autoSaveTimerRef = useRef (null); + const autoSaveInFlightRef = useRef(false); + const autoSaveNeedsFlushRef = useRef(false); + + type AutoSaveContext = { + enabled: boolean; + busy: boolean; + comboId: string; + dateIso: string; + studyId: string; + seriesUid: string; + effectiveInstanceIndex: number; + sopInstanceUid: string | null; + viewSize: { w: number; h: number }; + draftSeed: NormalizedPoint | null; + draftPolygon: TumorPolygon | null; + draftPolygonViewTransform: ViewerTransform | null; + draftAreaPx: number | null; + targetAreaPx: number; + }; + + const autoSaveCtxRef = useRef ({ + enabled, + busy, + comboId, + dateIso, + studyId, + seriesUid, + effectiveInstanceIndex, + sopInstanceUid, + viewSize, + draftSeed, + draftPolygon, + draftPolygonViewTransform, + draftAreaPx, + targetAreaPx, + }); + + autoSaveCtxRef.current = { + enabled, + busy, + comboId, + dateIso, + studyId, + seriesUid, + effectiveInstanceIndex, + sopInstanceUid, + viewSize, + draftSeed, + draftPolygon, + draftPolygonViewTransform, + draftAreaPx, + targetAreaPx, + }; + + const flushAutoSave = useCallback(() => { + if (autoSaveInFlightRef.current) { + autoSaveNeedsFlushRef.current = true; + return; + } + + const ctx = autoSaveCtxRef.current; + if (!ctx.enabled) return; + if (ctx.busy) { + autoSaveNeedsFlushRef.current = true; + return; + } + + const grow = growRef.current; + const cap = capturedRef.current; + if (!grow || !cap) return; + + const polygon = ctx.draftPolygon; + const seed = ctx.draftSeed; + if (!polygon || !seed) return; + + autoSaveInFlightRef.current = true; + setSaving(true); + + void (async () => { + try { + const sop = + ctx.sopInstanceUid ?? (await getSopInstanceUidForInstanceIndex(ctx.seriesUid, ctx.effectiveInstanceIndex)); + + const view = + ctx.draftPolygonViewTransform ?? cap.viewTransform ?? ({ ...viewerTransformRef.current } as ViewerTransform); + + const viewportSize = + ctx.viewSize.w > 0 && ctx.viewSize.h > 0 + ? { w: Math.round(ctx.viewSize.w), h: Math.round(ctx.viewSize.h) } + : undefined; + + // Keep threshold field conservative: store the seed-tumor intensity anchor. + const clamp8 = (v: number) => Math.max(0, Math.min(255, Math.round(v))); + const anchor = clamp8(grow.stats.tumor.mu); + const threshold: TumorThreshold = { low: anchor, high: anchor, anchor, tolerance: 0 }; + + const grow2d = toGrow2dMeta({ + grow, + targetAreaPx: ctx.targetAreaPx, + maxTargetAreaPx: MAX_TARGET_AREA_PX, + }); + + await saveTumorSegmentation({ + comboId: ctx.comboId, + dateIso: ctx.dateIso, + studyId: ctx.studyId, + seriesUid: ctx.seriesUid, + sopInstanceUid: sop, + polygon, + threshold, + seed, + meta: { areaPx: ctx.draftAreaPx ?? undefined, viewTransform: view, viewportSize, grow2d }, + algorithmVersion: 'v12-seedbox-areacap10000-costgrow2d-directional-v6-tensionq-step15', + }); + + setSopInstanceUid(sop); + setSavedPolygon(polygon); + setSavedPolygonViewTransform(view); + setSavedSeed(seed); + setSavedGrow2d(grow2d); + } catch (err) { + console.error(err); + setError(err instanceof Error ? err.message : 'Save failed'); + } + })() + .finally(() => { + autoSaveInFlightRef.current = false; + setSaving(false); + + if (autoSaveNeedsFlushRef.current) { + autoSaveNeedsFlushRef.current = false; + // Defer to avoid deep recursion if the UI is in a rapid-update loop. + window.setTimeout(() => flushAutoSave(), 0); + } + }); + }, [MAX_TARGET_AREA_PX]); + + useEffect(() => { + const ctx = autoSaveCtxRef.current; + if (!ctx.enabled) return; + if (ctx.busy) return; + if (!ctx.draftSeed || !ctx.draftPolygon) return; + + if (autoSaveTimerRef.current !== null) { + window.clearTimeout(autoSaveTimerRef.current); + } + + autoSaveTimerRef.current = window.setTimeout(() => { + autoSaveTimerRef.current = null; + flushAutoSave(); + }, AUTO_SAVE_DEBOUNCE_MS); + + return () => { + if (autoSaveTimerRef.current !== null) { + window.clearTimeout(autoSaveTimerRef.current); + autoSaveTimerRef.current = null; + } + }; + }, [draftAreaPx, draftPolygon, draftSeed, enabled, flushAutoSave, targetAreaPx, busy]); + + if (!enabled) return null; + + const panel = (() => { + if (containerSize.w <= 0 || containerSize.h <= 0) return null; + + const sliderHeight = 200; + + const aClamped = Math.max(1, Math.min(MAX_TARGET_AREA_PX, Math.round(targetAreaPx))); + + return ( + + {/* tension */} ++ ); + })(); + + return ( +++ + {/* capPx */} ++ tension {grow2dTuning.surfaceTension.toFixed(2)} +++ + setGrow2dTuning((t) => ({ + ...t, + surfaceTension: parseFloat(e.target.value), + })) + } + className="tumor-vert-slider absolute" + style={{ + width: sliderHeight, + left: '50%', + top: '50%', + transform: 'translate(-50%, -50%) rotate(-90deg)', + transformOrigin: 'center', + }} + aria-label="Surface tension" + /> +++++ capPx {aClamped} +++ setTargetAreaPx(parseInt(e.target.value, 10))} + className="tumor-vert-slider absolute" + style={{ + width: sliderHeight, + left: '50%', + top: '50%', + transform: 'translate(-50%, -50%) rotate(-90deg)', + transformOrigin: 'center', + }} + title={`capPx ${targetAreaPx}${draftAreaPx != null ? ` · areaPx ${draftAreaPx}` : ''}${saving ? ' · saving…' : ''}`} + aria-label="Area cap (px)" + /> ++e.preventDefault()} + > + {/* UI chrome */} ++ ); +} diff --git a/frontend/src/components/comparison/ComparisonFiltersSidebar.tsx b/frontend/src/components/comparison/ComparisonFiltersSidebar.tsx index 822f7b9..63a2c08 100644 --- a/frontend/src/components/comparison/ComparisonFiltersSidebar.tsx +++ b/frontend/src/components/comparison/ComparisonFiltersSidebar.tsx @@ -61,29 +61,31 @@ export function ComparisonFiltersSidebar({++ + {/* Error / status */} + {error ? ( +++ + ++ Tumor + {busy ? … : null} + + {error} ++ ) : !draftSeed ? ( ++ Drag a rectangle on the image, then click Segment. Drag the slider to grow/shrink. ++ ) : null} + + {panel} + + {/* Seed sampling box + markers */} + {debugEnabled && seedBoxPath ? ( + + ) : null} + {seedClusterDisplay && seedClusterDisplay.length > 0 ? ( + + ) : null} + + {/* Ground truth polygon */} + {groundTruthPath ? ( + + ) : null} + + {/* Saved polygon */} + {savedPath ? ( + + ) : null} + + {/* Draft polygon (overlays saved) */} + {draftPath ? ( + + ) : null} +Sequence- {sequencesForPlane.map((seq) => { - const hasData = sequencesWithDataForDates.has(seq.id); - const isSelected = selectedSeqId === seq.id; + {sequencesForPlane + .filter((seq) => formatSequenceLabel(seq) !== 'Unknown') + .map((seq) => { + const hasData = sequencesWithDataForDates.has(seq.id); + const isSelected = selectedSeqId === seq.id; - return ( - - ); - })} + return ( + + ); + })}) => void; + + isHovered: boolean; + + overlayColumns: { date: string; ref?: SeriesRef }[]; + isAligning: boolean; + + startAlignAll: (reference: AlignmentReference, exclusion: ExclusionMask) => Promise ; +}; + +type NormalizedRoi = { x0: number; y0: number; x1: number; y1: number }; + +export function GridCell({ + comboId, + date, + refData, + settings, + progress, + setProgress, + updatePanelSetting, + isHovered, + overlayColumns, + isAligning, + startAlignAll, +}: GridCellProps) { + const [showSavedTumor, setShowSavedTumor] = useState(false); + const [tumorToolOpen, setTumorToolOpen] = useState(false); + const [tumorSeedBoxToStart, setTumorSeedBoxToStart] = useState (null); + const [gtPolygonToolOpen, setGtPolygonToolOpen] = useState(false); + const tumorViewerRef = useRef (null); + + if (!refData) { + return ( + ++ ); + } + + const idx = getSliceIndex(refData.instance_count, progress, settings.offset); + const effectiveIdx = getEffectiveInstanceIndex(idx, refData.instance_count, settings.reverseSliceOrder); + + return ( ++ {formatDate(date)} ++No series++ {/* Cell controls (shown on hover) */} ++ ); +} diff --git a/frontend/src/components/comparison/GridView.tsx b/frontend/src/components/comparison/GridView.tsx index 156e631..a213459 100644 --- a/frontend/src/components/comparison/GridView.tsx +++ b/frontend/src/components/comparison/GridView.tsx @@ -1,6 +1,7 @@ import { useCallback, useState } from 'react'; import type { MouseEvent } from 'react'; import { Loader2 } from 'lucide-react'; +import { GridCell } from './GridCell'; import type { AlignmentProgress, AlignmentReference, @@ -10,13 +11,10 @@ import type { } from '../../types/api'; import { formatDate } from '../../utils/format'; import { DEFAULT_PANEL_SETTINGS } from '../../utils/constants'; -import { getSliceIndex, getEffectiveInstanceIndex, getProgressFromSlice } from '../../utils/math'; -import { ImageControls } from '../ImageControls'; -import { StepControl } from '../StepControl'; -import { DragRectActionOverlay } from '../DragRectActionOverlay'; -import { DicomViewer } from '../DicomViewer'; export type GridViewProps = { + comboId: string; + columns: { date: string; ref?: SeriesRef }[]; gridCols: number; gridCellSize: number; @@ -32,6 +30,7 @@ export type GridViewProps = { }; export function GridView({ + comboId, columns, gridCols, gridCellSize, @@ -80,7 +79,7 @@ export function GridView({++ + {/* Slice selector (shown on hover, bottom-right corner) */} ++++ + + ++ +{ + updatePanelSetting(date, update); + }} + showSliceControl={false} + /> + e.stopPropagation()} + > ++ +++{ + updatePanelSetting(date, { offset: settings.offset - 1 }); + }} + onIncrement={() => { + updatePanelSetting(date, { offset: settings.offset + 1 }); + }} + /> + ++, + variant: 'primary', + minSizeSpace: 'base', + disabled: overlayColumns.length < 2 || isAligning, + onConfirm: (masks) => { + void startAlignAll( + { + date, + seriesUid: refData.series_uid, + sliceIndex: effectiveIdx, + sliceCount: refData.instance_count, + settings, + }, + masks.base + ); + }, + }, + { + key: 'segment-tumor', + label: 'Segment', + title: 'Segment tumor from this rectangle', + icon: , + variant: 'secondary', + minSizeSpace: 'screen', + disabled: isAligning, + onConfirm: (masks) => { + setTumorToolOpen(true); + setTumorSeedBoxToStart({ + x0: masks.screen.x, + y0: masks.screen.y, + x1: masks.screen.x + masks.screen.width, + y1: masks.screen.y + masks.screen.height, + }); + }, + }, + ]} + > + { + setProgress(getProgressFromSlice(i, refData.instance_count, settings.offset)); + }} + brightness={settings.brightness} + contrast={settings.contrast} + zoom={settings.zoom} + rotation={settings.rotation} + panX={settings.panX} + panY={settings.panY} + affine00={settings.affine00} + affine01={settings.affine01} + affine10={settings.affine10} + affine11={settings.affine11} + onPanChange={(newPanX, newPanY) => { + updatePanelSetting(date, { panX: newPanX, panY: newPanY }); + }} + onZoomChange={(newZoom) => { + updatePanelSetting(date, { zoom: newZoom }); + }} + /> + + + + { + setTumorToolOpen(false); + setTumorSeedBoxToStart(null); + }} + seedBoxToStart={tumorSeedBoxToStart} + onSeedBoxToStartConsumed={() => setTumorSeedBoxToStart(null)} + viewerRef={tumorViewerRef} + comboId={comboId} + dateIso={date} + studyId={refData.study_id} + seriesUid={refData.series_uid} + effectiveInstanceIndex={effectiveIdx} + viewerTransform={settings} + /> + + setGtPolygonToolOpen(false)} + comboId={comboId} + dateIso={date} + studyId={refData.study_id} + seriesUid={refData.series_uid} + effectiveInstanceIndex={effectiveIdx} + viewerTransform={settings} + /> + + {/* Date overlay (matches overlay view style) */} + + {formatDate(date)} ++ +- {alignmentProgress.slicesChecked} slices · MI {alignmentProgress.bestMiSoFar.toFixed(3)} + {alignmentProgress.slicesChecked} slices · Score {alignmentProgress.bestMiSoFar.toFixed(3)}) : null} @@ -108,131 +107,23 @@ export function GridView({ > {columns.map(({ date, ref }) => { const settings = panelSettings.get(date) || DEFAULT_PANEL_SETTINGS; - - if (!ref) { - return ( --- ); - } - - const idx = getSliceIndex(ref.instance_count, progress, settings.offset); - const effectiveIdx = getEffectiveInstanceIndex(idx, ref.instance_count, settings.reverseSliceOrder); - const isHovered = hoveredGridCellDate === date; return ( -- {formatDate(date)} --No series-- {/* Cell controls (shown on hover) */} -+ comboId={comboId} + date={date} + refData={ref} + settings={settings} + progress={progress} + setProgress={setProgress} + updatePanelSetting={updatePanelSetting} + isHovered={isHovered} + overlayColumns={overlayColumns} + isAligning={isAligning} + startAlignAll={startAlignAll} + /> ); })} {columns.length === 0 &&-- - {/* Slice selector (shown on hover, bottom-right corner) */} ---{ - updatePanelSetting(date, update); - }} - showSliceControl={false} - /> - e.stopPropagation()} - > -- ---{ - updatePanelSetting(date, { offset: settings.offset - 1 }); - }} - onIncrement={() => { - updatePanelSetting(date, { offset: settings.offset + 1 }); - }} - /> - --{ - void startAlignAll( - { - date, - seriesUid: ref.series_uid, - sliceIndex: effectiveIdx, - sliceCount: ref.instance_count, - settings, - }, - mask - ); - }} - actionTitle={`Align all other dates to ${formatDate(date)}`} - > - -{ - setProgress(getProgressFromSlice(i, ref.instance_count, settings.offset)); - }} - brightness={settings.brightness} - contrast={settings.contrast} - zoom={settings.zoom} - rotation={settings.rotation} - panX={settings.panX} - panY={settings.panY} - affine00={settings.affine00} - affine01={settings.affine01} - affine10={settings.affine10} - affine11={settings.affine11} - onPanChange={(newPanX, newPanY) => { - updatePanelSetting(date, { panX: newPanX, panY: newPanY }); - }} - /> - - {/* Date overlay (matches overlay view style) */} - - {formatDate(date)} --Select dates to view} diff --git a/frontend/src/components/comparison/OverlayView.tsx b/frontend/src/components/comparison/OverlayView.tsx index 7c81538..846dafc 100644 --- a/frontend/src/components/comparison/OverlayView.tsx +++ b/frontend/src/components/comparison/OverlayView.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; -import { Loader2 } from 'lucide-react'; +import { useEffect, useRef, useState } from 'react'; +import { Link2, Loader2, Pencil, Sparkles } from 'lucide-react'; import type { AlignmentProgress, AlignmentReference, @@ -8,13 +8,18 @@ import type { SeriesRef, } from '../../types/api'; import { formatDate } from '../../utils/format'; -import { getProgressFromSlice } from '../../utils/math'; +import { getEffectiveInstanceIndex, getProgressFromSlice } from '../../utils/math'; import { ImageControls } from '../ImageControls'; import { StepControl } from '../StepControl'; import { DragRectActionOverlay } from '../DragRectActionOverlay'; -import { DicomViewer } from '../DicomViewer'; +import { DicomViewer, type DicomViewerHandle } from '../DicomViewer'; +import { GroundTruthPolygonOverlay } from '../GroundTruthPolygonOverlay'; +import { TumorSavedSegmentationOverlay } from '../TumorSavedSegmentationOverlay'; +import { TumorSegmentationOverlay } from '../TumorSegmentationOverlaySeedGrow'; export type OverlayViewProps = { + comboId: string; + overlayColumns: { date: string; ref?: SeriesRef }[]; overlayViewerSize: number; @@ -46,7 +51,10 @@ export type OverlayViewProps = { setProgress: (nextProgress: number) => void; }; +type NormalizedRoi = { x0: number; y0: number; x1: number; y1: number }; + export function OverlayView({ + comboId, overlayColumns, overlayViewerSize, overlayDisplayedRef, @@ -72,6 +80,43 @@ export function OverlayView({ setProgress, }: OverlayViewProps) { const [isOverlayViewerHovered, setIsOverlayViewerHovered] = useState(false); + const [showSavedTumor, setShowSavedTumor] = useState(false); + const [tumorToolOpen, setTumorToolOpen] = useState(false); + const [tumorSeedBoxToStart, setTumorSeedBoxToStart] = useState(null); + const [gtPolygonToolOpen, setGtPolygonToolOpen] = useState(false); + const tumorViewerRef = useRef (null); + + // Compare mode is read-only: ensure the tumor tool isn't active. + // We schedule the close to avoid calling setState synchronously inside the effect body. + useEffect(() => { + if (!isOverlayComparing) return; + + const t = window.setTimeout(() => { + setTumorToolOpen(false); + setGtPolygonToolOpen(false); + }, 0); + + return () => window.clearTimeout(t); + }, [isOverlayComparing]); + + // Note: the tool only operates on the *selected* date when not comparing. + const tumorEffectiveSliceIndex = + overlaySelectedRef && overlaySelectedDate + ? getEffectiveInstanceIndex( + overlaySelectedSliceIndex, + overlaySelectedRef.instance_count, + overlaySelectedSettings.reverseSliceOrder + ) + : 0; + + const compareEffectiveSliceIndex = + overlayCompareRef && overlayCompareDate + ? getEffectiveInstanceIndex( + overlayCompareSliceIndex, + overlayCompareRef.instance_count, + overlayCompareSettings.reverseSliceOrder + ) + : 0; return ( @@ -94,7 +139,48 @@ export function OverlayView({ : 'opacity-0 pointer-events-none' }`} > -{alignmentProgress.phase !== 'capturing' && alignmentProgress.slicesChecked ? (+) : null} @@ -255,7 +421,7 @@ export function OverlayView({+@@ -237,6 +393,16 @@ export function OverlayView({ affine11={overlayCompareSettings.affine11} // Compare mode is read-only for geometry edits. onPanChange={undefined} + onZoomChange={(newZoom) => { + updatePanelSetting(overlayCompareDate, { zoom: newZoom }); + }} + /> + ++ + + ++{ - void startAlignAll( - { - date: overlayDisplayedDate, - seriesUid: overlayDisplayedRef.series_uid, - sliceIndex: overlayDisplayedEffectiveSliceIndex, - sliceCount: overlayDisplayedRef.instance_count, - settings: overlayDisplayedSettings, + disabled={isAligning || isOverlayComparing || gtPolygonToolOpen} + actions={[ + { + key: 'align-all', + label: 'Align All', + title: `Align all other dates to ${formatDate(overlayDisplayedDate)}`, + icon: , + variant: 'primary', + minSizeSpace: 'base', + disabled: overlayColumns.length < 2 || isAligning, + onConfirm: (masks) => { + void startAlignAll( + { + date: overlayDisplayedDate, + seriesUid: overlayDisplayedRef.series_uid, + sliceIndex: overlayDisplayedEffectiveSliceIndex, + sliceCount: overlayDisplayedRef.instance_count, + settings: overlayDisplayedSettings, + }, + masks.base + ); }, - mask - ); - }} - actionTitle={`Align all other dates to ${formatDate(overlayDisplayedDate)}`} + }, + { + key: 'segment-tumor', + label: 'Segment', + title: 'Segment tumor from this rectangle', + icon: , + variant: 'secondary', + minSizeSpace: 'screen', + disabled: isAligning || isOverlayComparing, + onConfirm: (masks) => { + setTumorToolOpen(true); + setTumorSeedBoxToStart({ + x0: masks.screen.x, + y0: masks.screen.y, + x1: masks.screen.x + masks.screen.width, + y1: masks.screen.y + masks.screen.height, + }); + setGtPolygonToolOpen(false); + }, + }, + ]} > {/* Space compare should feel instant. @@ -175,7 +290,9 @@ export function OverlayView({ className={`absolute inset-0 ${isOverlayComparing ? 'opacity-0 pointer-events-none' : 'opacity-100'}`} > {overlaySelectedRef && overlaySelectedDate ? ( + <> { + updatePanelSetting(overlaySelectedDate, { zoom: newZoom }); + }} /> + + + + { + setTumorToolOpen(false); + setTumorSeedBoxToStart(null); + }} + seedBoxToStart={tumorSeedBoxToStart} + onSeedBoxToStartConsumed={() => setTumorSeedBoxToStart(null)} + viewerRef={tumorViewerRef} + comboId={comboId} + dateIso={overlaySelectedDate} + studyId={overlaySelectedRef.study_id} + seriesUid={overlaySelectedRef.series_uid} + effectiveInstanceIndex={tumorEffectiveSliceIndex} + viewerTransform={overlaySelectedSettings} + /> + + setGtPolygonToolOpen(false)} + comboId={comboId} + dateIso={overlaySelectedDate} + studyId={overlaySelectedRef.study_id} + seriesUid={overlaySelectedRef.series_uid} + effectiveInstanceIndex={tumorEffectiveSliceIndex} + viewerTransform={overlaySelectedSettings} + /> + ) : null} - {alignmentProgress.slicesChecked} slices · MI {alignmentProgress.bestMiSoFar.toFixed(3)} + {alignmentProgress.slicesChecked} slices · Score {alignmentProgress.bestMiSoFar.toFixed(3)}) : null} diff --git a/frontend/src/db/db.ts b/frontend/src/db/db.ts index 19bba6f..307792e 100644 --- a/frontend/src/db/db.ts +++ b/frontend/src/db/db.ts @@ -3,7 +3,7 @@ import type { IDBPDatabase } from 'idb'; import type { MiraDB } from './schema'; const DB_NAME = 'MiraViewerDB'; -const DB_VERSION = 2; +const DB_VERSION = 4; let dbPromise: Promise