feat: Add DICOM SEG support and MPR, referenceLines and StackSync and more (#3015)

* feat: add initial sop class handler for SEG

* feat: move segmentation service

* update segmentation service methods

* fix: viewport data structure

* feat: Add initial render for the DICOM SEG for each displaySet

* fix: various wrong architectural dependencies between services

* feat: initial separate SEG display in each viewport

* feat: refactore viewport action bar

* initial work for SEG hydration

* fix: various bugs regarding drag and dropping different viewports

* fix: rendering issues for multiple seg displaysets

* fix: bugs for thumbnail and hydration

* feat: fix the initial segment color

* update after rebase

* feat: initial design for the segmentation group table

* feat: initial new design for the segmentation panel

* feat: segmentation panel

* feat: make segmentation appear on all related viewports

* fix: segmentation load bug based on functional groups

* initial work for segmentation crosshairs

* fix: various stylings and functionality

* fix: various stylings for the seg panel

* fix: overflow styles

* feat: add more ui components

* feat: added segmentation config

* feat: add jump to segment

* feat: add jump to segment for DICOM SEG viewport

* fix: bugs after rebase

* feat: jump in segmentation viewport

* fix: mpr support for seg

* feat: add more icons

* feat: new icons

* feat: add new side panel

* feat: add segmentation config

* feat: add loading indicator to ohif

* feat: make hanging protocols follow matching rules for viewports

* feat: enhance drag and drop to be hanging protocol aware

* fix: mpr restore previous layout

* fix: crosshairs toggle

* fix: add auth headers to the dicom loader via dicomwebclient

* fix: bug for crosshairs toggle in mpr

* fix: seg viewport reusing old toolGroup

* feat: add loading animation with lottie

* fix: various bugs for Segmentation hydration in mpr

* feat: change outline alpha to outline opacity

* feat: loading indicator for seg viewport

* fix: various segmentation group styles

* fix: local mode for seg

* feat: add animation for the highlight

* fix: loading indicatro to show segment indices

* feat: enhance modality drop down ui

* fix: panels

* fix: download form

* fix: layout shift in loading indicator

* fix: loading indicator to have correct values

* fix: update software number

* fix: image jump between MPR and default

* fix: segmentation cleanup and cine service cleanup

* fix: segmentation toolgroup clena up

* fix: highlight interval should not trigger again

* fix: issue with multiframe sorting

* rename: change onSeriesChange to onArrowsClick

* fix: buttons for tmtv and layout shift

* fix: various bugs wrt crosshairs

* fix: crosshairs re init on reset camera

* fix: middle slice calculation different from cs middle reset camera

* fix: reset camera should reset viewport camera

* fix: loading segments in MPR mode

* fix: tmtv hp back to before

* fix: layout shift

* feat: orientation markers for volume viewport

* fix: capture for volume viewports

* fix: memory leak for back to worklist

* fix: loading bar bg color

* fix: side panel for only one panel

* fix: react select style in production

* fix: various styling for segmentation groups

* fix: various ui styles

* feat: add new segmentation config styles

* fix: hover state for segmentation item

* fix: side panel layout shift

* temp add panels

* try to fix scrollbar for thimbnail

* fix: scroll not appearing for side panels

* feat: changed styles for scrollbar

* feat: add cpu fallback warning

* fix: webworker destroy

* fix: select styles

* fix: orientation marker color and position

* fix: capture screenshot for volume viewports

* fix: hide segment visibility on mpr

* fix: reloading an already loaded seg displayset

* feat: add is equal

* fix: mpr jump to measurements

* apply review comments

* fix: optimization for the segmentation load

* fix: remove unnecessary context menu and hp service reset

* fix: segmentation service wrt brush settings

* feat: initial work for the stack synchronization

* fix: add validateDisplaySetSelectorsForNewDisplaySets to make sure drag and drop can follow requirements

* fix: various react proptypes

* fix: thumbnails for the tmtv and change default props to default params

* feat: make showing loading indicator configurable and add docs

* bump versions and add more docs

* fix demo

* update cornerstone versions

* apply review comments

* feat: add reference lines

* fix build

* fix unit tests

* add reference lines icon

* fix: e2e tests

* fix static wado config

* docs: add segmentation service docs

* fix: docker build

* fix: keep camera and bump versions

* Try re-enabling minification to fix deploy previews

Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>

platform/viewer/src/components/ViewportGrid.tsx

@@ -1,9 +1,27 @@
 import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
+import { utils } from '@ohif/core';
 import EmptyViewport from './EmptyViewport';
 import classNames from 'classnames';
 
+const { isEqualWithin } = utils;
+
+const ORIENTATION_MAP = {
+  axial: {
+    viewPlaneNormal: [0, 0, -1],
+    viewUp: [0, -1, 0],
+  },
+  sagittal: {
+    viewPlaneNormal: [1, 0, 0],
+    viewUp: [0, 0, 1],
+  },
+  coronal: {
+    viewPlaneNormal: [0, 1, 0],
+    viewUp: [0, 0, 1],
+  },
+};
+
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
   const [viewportGrid, viewportGridService] = useViewportGrid();
@@ -15,6 +33,7 @@ function ViewerViewportGrid(props) {
     DisplaySetService,
     MeasurementService,
     HangingProtocolService,
+    UINotificationService,
   } = servicesManager.services;
 
   /**
@@ -31,23 +50,29 @@ function ViewerViewportGrid(props) {
         hpAlreadyApplied,
       } = HangingProtocolService.getMatchDetails();
 
-      if (!viewportMatchDetails.length) {
+      if (!viewportMatchDetails.size) {
         return;
       }
 
       // Match each viewport individually
       const numViewports = viewportGrid.numRows * viewportGrid.numCols;
-      for (let i = 0; i < numViewports; i++) {
-        if (hpAlreadyApplied[i] === true) {
+      for (
+        let viewportIndex = 0;
+        viewportIndex < numViewports;
+        viewportIndex++
+      ) {
+        if (hpAlreadyApplied.get(viewportIndex)) {
           continue;
         }
 
         // if current viewport doesn't have a match
-        if (viewportMatchDetails[i] === undefined) {
+        if (viewportMatchDetails.get(viewportIndex) === undefined) {
           return;
         }
 
-        const { displaySetsInfo, viewportOptions } = viewportMatchDetails[i];
+        const { displaySetsInfo, viewportOptions } = viewportMatchDetails.get(
+          viewportIndex
+        );
 
         const displaySetUIDsToHang = [];
         const displaySetUIDsToHangOptions = [];
@@ -62,12 +87,8 @@ function ViewerViewportGrid(props) {
           }
         );
 
-        if (!displaySetUIDsToHang.length) {
-          continue;
-        }
-
         viewportGridService.setDisplaySetsForViewport({
-          viewportIndex: i,
+          viewportIndex: viewportIndex,
           displaySetInstanceUIDs: displaySetUIDsToHang,
           viewportOptions,
           displaySetOptions: displaySetUIDsToHangOptions,
@@ -79,14 +100,45 @@ function ViewerViewportGrid(props) {
         // update the hanging protocol after making sure all the matched display sets are available
         // and set on the viewport
         if (displaySetUIDsToHang.length === displaySetsInfo.length) {
-          // The following will set the hpAlreadyApplied state
-          HangingProtocolService.setHangingProtocolAppliedForViewport(i);
+          // The following will set the viewportsDisplaySetsMatched state
+
+          const suppressEvent = true;
+          const applied = true;
+          HangingProtocolService.setHangingProtocolAppliedForViewport(
+            viewportIndex,
+            applied,
+            suppressEvent
+          );
         }
       }
     },
     [viewportGrid, numRows, numCols]
   );
 
+  const _getUpdatedViewports = useCallback(
+    (viewportIndex, displaySetInstanceUID) => {
+      let updatedViewports = [];
+      try {
+        updatedViewports = HangingProtocolService.getViewportsRequireUpdate(
+          viewportIndex,
+          displaySetInstanceUID
+        );
+      } catch (error) {
+        console.warn(error);
+        UINotificationService.show({
+          title: 'Drag and Drop',
+          message:
+            'The selected display sets could not be added to the viewport due to a mismatch in the Hanging Protocol rules.',
+          type: 'info',
+          duration: 3000,
+        });
+      }
+
+      return updatedViewports;
+    },
+    [HangingProtocolService, UINotificationService]
+  );
+
   useEffect(() => {
     const displaySets = DisplaySetService.getActiveDisplaySets();
     updateDisplaySetsForViewports(displaySets);
@@ -109,7 +161,7 @@ function ViewerViewportGrid(props) {
     return () => {
       unsubscribe();
     };
-  }, [viewports]);
+  }, []);
 
   // Using Hanging protocol engine to match the displaySets
   useEffect(() => {
@@ -130,8 +182,10 @@ function ViewerViewportGrid(props) {
     const { unsubscribe } = MeasurementService.subscribe(
       MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
       ({ viewportIndex, measurement }) => {
-        const referencedDisplaySetInstanceUID =
-          measurement.displaySetInstanceUID;
+        const {
+          displaySetInstanceUID: referencedDisplaySetInstanceUID,
+          metadata: { viewPlaneNormal },
+        } = measurement;
 
         // if we already have the displaySet in one of the viewports
         // Todo: handle fusion display sets?
@@ -156,16 +210,47 @@ function ViewerViewportGrid(props) {
           );
         }
 
-        // If not in any of the viewports, hang it inside the active viewport
-        viewportGridService.setDisplaySetsForViewport({
+        const updatedViewports = _getUpdatedViewports(
           viewportIndex,
-          displaySetInstanceUIDs: [referencedDisplaySetInstanceUID],
-          viewportOptions: {
-            initialImageOptions: {
+          referencedDisplaySetInstanceUID
+        );
+
+        if (!updatedViewports || !updatedViewports.length) {
+          return;
+        }
+
+        updatedViewports.forEach(vp => {
+          const { orientation, viewportType } = vp.viewportOptions;
+          let initialImageOptions;
+
+          // For initial imageIndex to hang be careful for the volume viewport
+          if (viewportType === 'stack') {
+            initialImageOptions = {
               index: imageIndex,
-            },
-          },
+            };
+          } else if (viewportType === 'volume') {
+            // For the volume viewports, be careful to not jump in the viewports
+            // that are not in the same orientation.
+            // Todo: this doesn't work for viewports that have custom orientation
+            // vectors specified
+            if (
+              orientation &&
+              viewPlaneNormal &&
+              isEqualWithin(
+                ORIENTATION_MAP[orientation]?.viewPlaneNormal,
+                viewPlaneNormal
+              )
+            ) {
+              initialImageOptions = {
+                index: imageIndex,
+              };
+            }
+          }
+
+          vp.viewportOptions['initialImageOptions'] = initialImageOptions;
         });
+
+        viewportGridService.setDisplaySetsForViewports(updatedViewports);
       }
     );
 
@@ -175,28 +260,6 @@ function ViewerViewportGrid(props) {
   }, [viewports]);
 
   /**
-  //Changing the Hanging protocol while viewing
-  useEffect(() => {
-    const displaySets = DisplaySetService.getActiveDisplaySets();
-    updateDisplaySetsForViewports(displaySets);
-  }, [viewports]);
-
-
-  // subscribe to displayset metadata changes
-  useEffect(() => {
-    const { unsubscribe } = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_METADATA_UPDATED,
-      displaySets => {
-        // Todo: properly refresh the viewportGrid to use the new displaySet
-        // with the new metadata.
-        setState({});
-      }
-    );
-    return () => {
-      unsubscribe();
-    };
-  }, [viewports]);
-
   const onDoubleClick = viewportIndex => {
     // TODO -> Disabled for now.
     // onNewImage on a cornerstone viewport is firing setDisplaySetsForViewport.
@@ -238,14 +301,14 @@ function ViewerViewportGrid(props) {
       },
     });
   };
-
   */
 
   const onDropHandler = (viewportIndex, { displaySetInstanceUID }) => {
-    viewportGridService.setDisplaySetsForViewport({
+    const updatedViewports = _getUpdatedViewports(
       viewportIndex,
-      displaySetInstanceUIDs: [displaySetInstanceUID],
-    });
+      displaySetInstanceUID
+    );
+    viewportGridService.setDisplaySetsForViewports(updatedViewports);
   };
 
   const getViewportPanes = useCallback(() => {
@@ -279,7 +342,8 @@ function ViewerViewportGrid(props) {
 
       const ViewportComponent = _getViewportComponent(
         displaySets,
-        viewportComponents
+        viewportComponents,
+        UINotificationService
       );
 
       // look inside displaySets to see if they need reRendering
@@ -361,7 +425,11 @@ ViewerViewportGrid.defaultProps = {
   viewportComponents: [],
 };
 
-function _getViewportComponent(displaySets, viewportComponents) {
+function _getViewportComponent(
+  displaySets,
+  viewportComponents,
+  UINotificationService
+) {
   if (!displaySets || !displaySets.length) {
     return EmptyViewport;
   }
@@ -383,7 +451,14 @@ function _getViewportComponent(displaySets, viewportComponents) {
       return component;
     }
   }
-  throw new Error(`No display set handler for ${SOPClassHandlerId}`);
+
+  UINotificationService.show({
+    title: 'Viewport Not Supported Yet',
+    message: `Cannot display SOPClassId of ${displaySets[0].SOPClassUID} yet`,
+    type: 'error',
+  });
+
+  return EmptyViewport;
 }
 
 export default ViewerViewportGrid;