feat(next): native Generic Viewport migration (useNextViewports)

extensions/cornerstone-dicom-seg/src/commandsModule.ts

@@ -28,7 +28,6 @@ const {
   },
 } = adaptersRT;
 
-
 const commandsModule = ({
   servicesManager,
   extensionManager,
@@ -91,46 +90,69 @@ const commandsModule = ({
       const segmentation = cornerstoneToolsSegmentation.state.getSegmentation(segmentationId);
       const predecessorImageId = options.predecessorImageId ?? segmentation.predecessorImageId;
 
-      const { imageIds } = segmentation.representationData.Labelmap;
-
-      const segImages = imageIds.map(imageId => cache.getImage(imageId));
-      const referencedImages = segImages.map(image => cache.getImage(image.referencedImageId));
-
-      const labelmaps2D = [];
-
-      let z = 0;
+      const labelmapData = segmentation.representationData.Labelmap;
+
+      // Build a labelmap3D (one labelmaps2D entry per source slice) from a list of
+      // derived labelmap image ids. When `referencedImageIds` is supplied (the
+      // multi-layer/overlap path) each frame is indexed by its source slice so the
+      // layers align to the same frames; otherwise frames are sequential (the legacy
+      // single-layer behavior, kept byte-identical).
+      const buildLabelmap3D = (segImageIds: string[], metadata, referencedImageIds?: string[]) => {
+        const segImages = segImageIds.map(imageId => cache.getImage(imageId));
+        const labelmaps2D = [];
+
+        // Map each source imageId to its frame index once (O(n)) so the per-slice lookup
+        // below is O(1) — avoids the O(slices^2) indexOf scan on the multi-layer path.
+        const referencedFrameIndexById = referencedImageIds
+          ? new Map(referencedImageIds.map((imageId, index) => [imageId, index]))
+          : undefined;
+
+        let z = 0;
+
+        for (const segImage of segImages) {
+          const segmentsOnLabelmap = new Set();
+          const pixelData = segImage.getPixelData();
+          const { rows, columns } = segImage;
+
+          // Use a single pass through the pixel data
+          for (let i = 0; i < pixelData.length; i++) {
+            const segment = pixelData[i];
+            if (segment !== 0) {
+              segmentsOnLabelmap.add(segment);
+            }
+          }
 
-      for (const segImage of segImages) {
-        const segmentsOnLabelmap = new Set();
-        const pixelData = segImage.getPixelData();
-        const { rows, columns } = segImage;
+          const frameIndex = referencedFrameIndexById
+            ? referencedFrameIndexById.get(segImage.referencedImageId) ?? -1
+            : z++;
 
-        // Use a single pass through the pixel data
-        for (let i = 0; i < pixelData.length; i++) {
-          const segment = pixelData[i];
-          if (segment !== 0) {
-            segmentsOnLabelmap.add(segment);
+          if (frameIndex < 0) {
+            continue;
           }
-        }
 
-        labelmaps2D[z++] = {
-          segmentsOnLabelmap: Array.from(segmentsOnLabelmap),
-          pixelData,
-          rows,
-          columns,
-        };
-      }
+          labelmaps2D[frameIndex] = {
+            segmentsOnLabelmap: Array.from(segmentsOnLabelmap),
+            pixelData,
+            rows,
+            columns,
+          };
+        }
 
-      const allSegmentsOnLabelmap = labelmaps2D.map(labelmap => labelmap.segmentsOnLabelmap);
+        const allSegmentsOnLabelmap = labelmaps2D
+          .filter(Boolean)
+          .map(labelmap => labelmap.segmentsOnLabelmap);
 
-      const labelmap3D = {
-        segmentsOnLabelmap: Array.from(new Set(allSegmentsOnLabelmap.flat())),
-        metadata: [],
-        labelmaps2D,
+        return {
+          segmentsOnLabelmap: Array.from(new Set(allSegmentsOnLabelmap.flat())),
+          metadata,
+          labelmaps2D,
+        };
       };
 
+      // Segment metadata (shared across all layers).
       const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
       const representations = segmentationService.getRepresentationsForSegmentation(segmentationId);
+      const metadata = [];
 
       Object.entries(segmentationInOHIF.segments).forEach(([segmentIndex, segment]) => {
         // segmentation service already has a color for each segment
@@ -151,7 +173,7 @@ const commandsModule = ({
           color.slice(0, 3).map(value => value / 255)
         ).map(value => Math.round(value));
 
-        const segmentMetadata = {
+        metadata[segmentIndex] = {
           SegmentNumber: segmentIndex.toString(),
           SegmentLabel: label,
           SegmentAlgorithmType: segment?.algorithmType || 'MANUAL',
@@ -168,10 +190,34 @@ const commandsModule = ({
             CodeMeaning: 'Tissue',
           },
         };
-        labelmap3D.metadata[segmentIndex] = segmentMetadata;
       });
 
-      const generatedSegmentation = generateSegmentation(referencedImages, labelmap3D, metaData, {
+      // Multi-layer (overlapping) SEGs register one labelmap layer per conflict-free
+      // group. Export each layer as its own labelmap3D against the UNIQUE referenced
+      // source series, so cornerstone writes overlapping segments as separate frames
+      // that reference the same source slice (the DICOM SEG overlap encoding). The
+      // cs3D adapter's fillSegmentation accepts an array of labelmap3D for exactly
+      // this. Single-layer SEGs keep the original single-labelmap3D path unchanged.
+      const layers = labelmapData.labelmaps ? Object.values(labelmapData.labelmaps) : undefined;
+
+      let referencedImages;
+      let labelmaps3D;
+
+      if (layers && layers.length > 1) {
+        const referencedImageIds =
+          layers[0].referencedImageIds ?? labelmapData.referencedImageIds ?? [];
+        referencedImages = referencedImageIds.map(imageId => cache.getImage(imageId));
+        labelmaps3D = layers.map(layer =>
+          buildLabelmap3D(layer.imageIds ?? [], metadata, referencedImageIds)
+        );
+      } else {
+        const { imageIds } = labelmapData;
+        const segImages = imageIds.map(imageId => cache.getImage(imageId));
+        referencedImages = segImages.map(image => cache.getImage(image.referencedImageId));
+        labelmaps3D = buildLabelmap3D(imageIds, metadata);
+      }
+
+      const generatedSegmentation = generateSegmentation(referencedImages, labelmaps3D, metaData, {
         predecessorImageId,
         ...options,
       });
@@ -240,9 +286,7 @@ const commandsModule = ({
       }
 
       const defaultFileName =
-        modality === 'RTSTRUCT'
-          ? `rtss-${segmentationId}.dcm`
-          : `${label || 'segmentation'}.dcm`;
+        modality === 'RTSTRUCT' ? `rtss-${segmentationId}.dcm` : `${label || 'segmentation'}.dcm`;
 
       const storeFn = commandsManager.runCommand('createStoreFunction', {
         dataSource: dataSourceName,

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { vec3 } from 'gl-matrix';
 import PropTypes from 'prop-types';
-import { metaData, Enums, utilities, eventTarget } from '@cornerstonejs/core';
+import { metaData, Enums, eventTarget } from '@cornerstonejs/core';
 import { Enums as csToolsEnums, UltrasoundPleuraBLineTool } from '@cornerstonejs/tools';
 import type { ImageSliceData } from '@cornerstonejs/core/types';
 import { ViewportOverlay, formatDICOMDate } from '@ohif/ui-next';
 import type { InstanceMetadata } from '@ohif/core/src/types';
 import { formatDICOMTime, formatNumberPrecision } from './utils';
 import { utils } from '@ohif/core';
 import { StackViewportData, VolumeViewportData } from '../../types/CornerstoneCacheService';
+import { getViewportAdapter } from '../../services/ViewportService/adapter';
+import { getViewportDataShapeType } from '../../utils/viewportDataShape';
 
 import './CustomizableViewportOverlay.css';
 import { useViewportRendering } from '../../hooks';
@@ -264,7 +266,7 @@ function getDisplaySets(viewportData, displaySetService) {
 const getInstanceNumber = (viewportData, viewportId, imageIndex, cornerstoneViewportService) => {
   let instanceNumber;
 
-  switch (viewportData.viewportType) {
+  switch (getViewportDataShapeType(viewportData)) {
     case Enums.ViewportType.STACK:
       instanceNumber = _getInstanceNumberFromStack(viewportData, imageIndex);
       break;
@@ -331,8 +333,11 @@ function _getInstanceNumberFromVolume(
     return;
   }
 
-  const camera = cornerstoneViewport.getCamera();
-  const { viewPlaneNormal } = camera;
+  const viewPlaneNormal = getViewportAdapter(cornerstoneViewport).getViewPlaneNormal();
+
+  if (!viewPlaneNormal) {
+    return;
+  }
   // checking if camera is looking at the acquisition plane (defined by the direction on the volume)
 
   const scanAxisNormal = direction.slice(6, 9);

extensions/cornerstone/src/Viewport/Overlays/ViewportImageScrollbar.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Enums, utilities as csUtils } from '@cornerstonejs/core';
+import { utilities as csUtils } from '@cornerstonejs/core';
 import { ImageScrollbar } from '@ohif/ui-next';
 import { isVolume3DViewportType } from '../../utils/getLegacyViewportType';
+import { getSliceEventName, getViewportSliceCount } from '../../utils/viewportDataShape';
 
 function CornerstoneImageScrollbar({
   viewportData,
@@ -47,10 +48,10 @@ function CornerstoneImageScrollbar({
 
     try {
       const imageIndex = viewport.getCurrentImageIdIndex();
-      const numberOfSlices = viewport.getNumberOfSlices();
+      const numberOfSlices = getViewportSliceCount(viewportData, viewport);
 
       setImageSliceData({
-        imageIndex: imageIndex,
+        imageIndex,
         numberOfSlices,
       });
     } catch (error) {
@@ -62,11 +63,7 @@ function CornerstoneImageScrollbar({
     if (!viewportData) {
       return;
     }
-    const { viewportType } = viewportData;
-    const eventId =
-      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_NEW_IMAGE) ||
-      (viewportType === Enums.ViewportType.ORTHOGRAPHIC && Enums.Events.VOLUME_NEW_IMAGE) ||
-      Enums.Events.IMAGE_RENDERED;
+    const eventId = getSliceEventName(viewportData);
 
     const updateIndex = event => {
       const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);

extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx

@@ -6,6 +6,7 @@ import { vec3 } from 'gl-matrix';
 
 import './ViewportOrientationMarkers.css';
 import { useViewportRendering } from '../../hooks';
+import { getViewportDataShapeType } from '../../utils/viewportDataShape';
 const { getOrientationStringLPS, invertOrientationStringLPS } = utilities.orientation;
 
 function ViewportOrientationMarkers({
@@ -46,7 +47,9 @@ function ViewportOrientationMarkers({
       return '';
     }
 
-    if (viewportData.viewportType === 'stack') {
+    // Use the persisted data shape, not viewportType: a native stack reports
+    // PLANAR_NEXT, which would skip this synthetic-IOP default-cosine guard.
+    if (getViewportDataShapeType(viewportData) === Enums.ViewportType.STACK) {
       const imageIndex = imageSliceData.imageIndex;
       const imageId = viewportData.data[0].imageIds?.[imageIndex];
 

extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/helpers.ts

@@ -1,6 +1,6 @@
-import { Enums } from '@cornerstonejs/core';
 import { ViewportData } from './types';
 import { isVolume3DViewportType } from '../../../utils/getLegacyViewportType';
+import { getViewportAdapter } from '../../../services/ViewportService/adapter';
 
 export function getImageIndexFromEvent(event): number | undefined {
   const { imageIndex, newImageIdIndex = imageIndex, imageIdIndex } = event.detail;
@@ -24,12 +24,17 @@ export function isProgressFullMode(viewportData: ViewportData, viewport): boolea
     return false;
   }
 
-  if (viewportData.viewportType === Enums.ViewportType.STACK) {
+  // A stack renders the full progress UI; an acquisition-plane volume is the
+  // volume-mode equivalent. The adapter classifies both lanes (legacy by
+  // viewport type / isInAcquisitionPlane; native by content mode + view-state
+  // orientation, since PLANAR_NEXT collapses the runtime type).
+  const adapter = getViewportAdapter(viewport);
+  const shape = adapter.getShape();
+  if (shape === 'stack') {
     return true;
   }
-
-  if (viewportData.viewportType === Enums.ViewportType.ORTHOGRAPHIC) {
-    return !!viewport.isInAcquisitionPlane?.();
+  if (shape === 'volume') {
+    return adapter.isInAcquisitionPlane();
   }
 
   return false;

extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/hooks.ts

@@ -1,12 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import {
-  cache as cornerstoneCache,
-  Enums,
-  eventTarget,
-  utilities,
-} from '@cornerstonejs/core';
+import { cache as cornerstoneCache, Enums, eventTarget, utilities } from '@cornerstonejs/core';
 import { useByteArray } from '@ohif/ui-next';
 import { isVolume3DViewportType } from '../../../utils/getLegacyViewportType';
+import { getSliceEventName, getViewportSliceCount } from '../../../utils/viewportDataShape';
 import { getImageIdFromCacheEvent, getImageIndexFromEvent, isProgressFullMode } from './helpers';
 import { ImageSliceData, ViewportData } from './types';
 
@@ -97,26 +93,48 @@ export function useViewportSliceSync({
       return;
     }
 
-    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
-    if (viewport && !isVolume3DViewportType(viewport)) {
+    // Last values we pushed, so re-seeding on camera changes does not churn React
+    // state on pure pan/zoom (which keep the slice geometry unchanged).
+    const lastSlice = { imageIndex: -1, numberOfSlices: -1 };
+
+    const pushSliceData = (imageIndex: number, numberOfSlices: number) => {
+      if (imageIndex === lastSlice.imageIndex && numberOfSlices === lastSlice.numberOfSlices) {
+        return;
+      }
+      lastSlice.imageIndex = imageIndex;
+      lastSlice.numberOfSlices = numberOfSlices;
+      setImageSliceData({ imageIndex, numberOfSlices });
+    };
+
+    // Seeds the shared slice state from the live viewport. Re-run on the initial
+    // effect and on camera/orientation changes (below).
+    const syncFromViewport = () => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (!viewport || isVolume3DViewportType(viewport)) {
+        return;
+      }
       try {
         const currentImageIndex = viewport.getCurrentImageIdIndex();
-        const currentNumberOfSlices = viewport.getNumberOfSlices();
+        const currentNumberOfSlices = getViewportSliceCount(viewportData, viewport);
 
-        setImageSliceData({
-          imageIndex: currentImageIndex,
-          numberOfSlices: currentNumberOfSlices,
-        });
+        pushSliceData(currentImageIndex, currentNumberOfSlices);
       } catch (error) {
         console.warn(error);
       }
-    }
+    };
 
-    const { viewportType } = viewportData;
-    const eventId =
-      (viewportType === Enums.ViewportType.STACK && Enums.Events.STACK_NEW_IMAGE) ||
-      (viewportType === Enums.ViewportType.ORTHOGRAPHIC && Enums.Events.VOLUME_NEW_IMAGE) ||
-      Enums.Events.IMAGE_RENDERED;
+    syncFromViewport();
+
+    // A post-mount camera carry (e.g. the layout-selector MPR protocol restoring
+    // the prior stack slice onto the freshly-mounted volume viewport) moves the
+    // camera and fires its slice events synchronously during the mount — before
+    // these listeners attach and around the initial seed above — so the scrollbar
+    // can latch the mount-time index instead of the carried slice. Re-seed once on
+    // the next frame, after the mount+carry settles; pushSliceData makes it a
+    // no-op when nothing changed (no churn/flicker).
+    const reseedRaf = requestAnimationFrame(syncFromViewport);
+
+    const eventId = getSliceEventName(viewportData);
 
     const updateIndex = event => {
       const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
@@ -130,16 +148,22 @@ export function useViewportSliceSync({
       }
       const nextNumberOfSlices = viewport.getNumberOfSlices();
 
-      setImageSliceData({
-        imageIndex: nextImageIndex,
-        numberOfSlices: nextNumberOfSlices,
-      });
+      pushSliceData(nextImageIndex, nextNumberOfSlices);
     };
 
     element.addEventListener(eventId, updateIndex);
+    // Native ("next") viewports keep the same viewportData across a stack->volume
+    // transition or an orientation change, so this effect does not re-run and the
+    // slice-navigation event above may not fire until the first scroll, leaving the
+    // scrollbar unseeded (or stale, with a now-wrong slice count). CAMERA_MODIFIED
+    // fires on those orientation/geometry changes, so re-seed from the viewport
+    // then; the pushSliceData guard makes pan/zoom (same geometry) a no-op.
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, syncFromViewport);
 
     return () => {
+      cancelAnimationFrame(reseedRaf);
       element.removeEventListener(eventId, updateIndex);
+      element.removeEventListener(Enums.Events.CAMERA_MODIFIED, syncFromViewport);
     };
   }, [viewportData, element, viewportId, cornerstoneViewportService, setImageSliceData]);
 }