feat(grid): remove viewportIndex and only rely on viewportId (#3591)

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -271,7 +271,6 @@ PanelSegmentation.propTypes = {
   commandsManager: PropTypes.shape({
     runCommand: PropTypes.func.isRequired,
   }),
-  appConfig: PropTypes.object.isRequired,
   servicesManager: PropTypes.shape({
     services: PropTypes.shape({
       segmentationService: PropTypes.shape({

extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts

@@ -1,6 +1,6 @@
 async function _hydrateSEGDisplaySet({
   segDisplaySet,
-  viewportIndex,
+  viewportId: targetViewportId,
   servicesManager,
 }) {
   const {
@@ -27,7 +27,7 @@ async function _hydrateSEGDisplaySet({
   const { viewports } = viewportGridService.getState();
 
   const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(
-    viewportIndex,
+    targetViewportId,
     displaySetInstanceUID
   );
 
@@ -37,8 +37,8 @@ async function _hydrateSEGDisplaySet({
   // is being displayed, if so we need to update the viewport to use volume viewport
   // (if already is not using it) since Cornerstone3D currently only supports
   // volume viewport for segmentation
-  viewports.forEach((viewport, index) => {
-    if (index === viewportIndex) {
+  viewports.forEach((viewport, viewportId) => {
+    if (targetViewportId === viewportId) {
       return;
     }
 
@@ -49,9 +49,16 @@ async function _hydrateSEGDisplaySet({
 
     if (shouldDisplaySeg) {
       updatedViewports.push({
-        viewportIndex: index,
+        viewportId,
         displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
         viewportOptions: {
+          // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
+          // Used for segmentation hydration right now, since the logic to decide whether
+          // a viewport needs to render a segmentation lives inside the CornerstoneViewportService
+          // so we need to re-render (force update via change of the needsRerendering) so that React
+          // does the diffing and decides we should render this again (although the id and element has not changed)
+          // so that the CornerstoneViewportService can decide whether to render the segmentation or not.
+          needsRerendering: true,
           initialImageOptions: {
             preset: 'middle',
           },

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -10,16 +10,13 @@ const RESPONSE = {
 function promptHydrateSEG({
   servicesManager,
   segDisplaySet,
-  viewportIndex,
+  viewportId,
   preHydrateCallbacks,
 }) {
   const { uiViewportDialogService } = servicesManager.services;
 
   return new Promise(async function(resolve, reject) {
-    const promptResult = await _askHydrate(
-      uiViewportDialogService,
-      viewportIndex
-    );
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportId);
 
     if (promptResult === RESPONSE.HYDRATE_SEG) {
       preHydrateCallbacks?.forEach(callback => {
@@ -28,7 +25,7 @@ function promptHydrateSEG({
 
       const isHydrated = await hydrateSEGDisplaySet({
         segDisplaySet,
-        viewportIndex,
+        viewportId,
         servicesManager,
       });
 
@@ -37,7 +34,7 @@ function promptHydrateSEG({
   });
 }
 
-function _askHydrate(uiViewportDialogService, viewportIndex) {
+function _askHydrate(uiViewportDialogService, viewportId) {
   return new Promise(function(resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
@@ -58,7 +55,7 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     };
 
     uiViewportDialogService.show({
-      viewportIndex,
+      viewportId,
       type: 'info',
       message,
       actions,

extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx

@@ -20,7 +20,6 @@ function OHIFCornerstoneSEGViewport(props) {
     children,
     displaySets,
     viewportOptions,
-    viewportIndex,
     viewportLabel,
     servicesManager,
     extensionManager,
@@ -28,6 +27,7 @@ function OHIFCornerstoneSEGViewport(props) {
   } = props;
 
   const { t } = useTranslation('SEGViewport');
+  const viewportId = viewportOptions.viewportId;
 
   const {
     displaySetService,
@@ -37,7 +37,7 @@ function OHIFCornerstoneSEGViewport(props) {
     customizationService,
   } = servicesManager.services;
 
-  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
 
   // SEG viewport will always have a single display set
   if (displaySets.length > 1) {
@@ -67,7 +67,7 @@ function OHIFCornerstoneSEGViewport(props) {
   // refs
   const referencedDisplaySetRef = useRef(null);
 
-  const { viewports, activeViewportIndex } = viewportGrid;
+  const { viewports, activeViewportId } = viewportGrid;
 
   const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
   const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(
@@ -94,9 +94,9 @@ function OHIFCornerstoneSEGViewport(props) {
   };
 
   const storePresentationState = useCallback(() => {
-    viewportGrid?.viewports.forEach(({ viewportIndex }) => {
+    viewportGrid?.viewports.forEach(({ viewportId }) => {
       commandsManager.runCommand('storePresentation', {
-        viewportIndex,
+        viewportId,
       });
     });
   }, [viewportGrid]);
@@ -126,7 +126,7 @@ function OHIFCornerstoneSEGViewport(props) {
         // initialImageIndex={initialImageIndex}
       ></Component>
     );
-  }, [viewportIndex, segDisplaySet, toolGroupId]);
+  }, [viewportId, segDisplaySet, toolGroupId]);
 
   const onSegmentChange = useCallback(
     direction => {
@@ -165,7 +165,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
     promptHydrateSEG({
       servicesManager,
-      viewportIndex,
+      viewportId,
       segDisplaySet,
       preHydrateCallbacks: [storePresentationState],
     }).then(isHydrated => {
@@ -173,7 +173,7 @@ function OHIFCornerstoneSEGViewport(props) {
         setIsHydrated(true);
       }
     });
-  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
+  }, [servicesManager, viewportId, segDisplaySet, segIsLoading]);
 
   useEffect(() => {
     const { unsubscribe } = segmentationService.subscribe(
@@ -225,12 +225,12 @@ function OHIFCornerstoneSEGViewport(props) {
     const onDisplaySetsRemovedSubscription = displaySetService.subscribe(
       displaySetService.EVENTS.DISPLAY_SETS_REMOVED,
       ({ displaySetInstanceUIDs }) => {
-        const activeViewport = viewports[activeViewportIndex];
+        const activeViewport = viewports.get(activeViewportId);
         if (
           displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
         ) {
           viewportGridService.setDisplaySetsForViewport({
-            viewportIndex: activeViewportIndex,
+            viewportId: activeViewportId,
             displaySetInstanceUIDs: [],
           });
         }
@@ -296,7 +296,7 @@ function OHIFCornerstoneSEGViewport(props) {
       return (
         child &&
         React.cloneElement(child, {
-          viewportIndex,
+          viewportId,
           key: index,
         })
       );
@@ -325,7 +325,7 @@ function OHIFCornerstoneSEGViewport(props) {
     storePresentationState();
     const isHydrated = await hydrateSEGDisplaySet({
       segDisplaySet,
-      viewportIndex,
+      viewportId,
       servicesManager,
     });
 
@@ -388,7 +388,7 @@ function OHIFCornerstoneSEGViewport(props) {
 
 OHIFCornerstoneSEGViewport.propTypes = {
   displaySets: PropTypes.arrayOf(PropTypes.object),
-  viewportIndex: PropTypes.number.isRequired,
+  viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
   customProps: PropTypes.object,