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/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -26,6 +26,7 @@ const DEFAULT_STATE = {
     },
   ],
   activeViewportIndex: 0,
+  cachedLayout: {},
 };
 
 export const ViewportGridContext = createContext(DEFAULT_STATE);
@@ -73,10 +74,15 @@ export function ViewportGridProvider({ children, service }) {
           viewportLabel: viewportLabels[viewportIndex],
         };
 
-        return { ...state, ...{ viewports }, cachedLayout: null };
+        return { ...state, ...{ viewports } };
       }
       case 'SET_LAYOUT': {
-        const { numCols, numRows, layoutType, layoutOptions } = action.payload;
+        const {
+          numCols,
+          numRows,
+          layoutOptions,
+          layoutType = 'grid',
+        } = action.payload;
 
         // If empty viewportOptions, we use numRow and numCols to calculate number of viewports
         const numPanes = layoutOptions.length || numRows * numCols;
@@ -119,7 +125,6 @@ export function ViewportGridProvider({ children, service }) {
             layoutType,
             viewports,
           },
-          cachedLayout: null,
         };
       }
       case 'RESET': {
@@ -139,13 +144,41 @@ export function ViewportGridProvider({ children, service }) {
               height: 100,
             },
           ],
-          cachedLayout: null,
+          cachedLayout: {},
         };
       }
 
+      // The SET_CACHE_LAYOUT action can be used for caching a layout
+      // for instance double clicking a viewport to maximize it.
+      // and then restoring the previous layout when the viewport is
+      // double clicked again.
       case 'SET_CACHED_LAYOUT': {
-        return { ...state, cachedLayout: action.payload };
+        const { cacheId, cachedLayout } = action.payload;
+
+        // deep copy the cachedLayout into the state
+        return {
+          ...state,
+          cachedLayout: {
+            ...state.cachedLayout,
+            [cacheId]: JSON.parse(JSON.stringify(cachedLayout)),
+          },
+        };
       }
+
+      case 'RESTORE_CACHED_LAYOUT': {
+        const cacheId = action.payload;
+
+        if (!state.cachedLayout[cacheId]) {
+          console.warn(
+            `No cached layout found for cacheId: ${cacheId}. Ignoring...`
+          );
+          return state;
+        }
+
+        const cachedLayout = state.cachedLayout;
+        return { ...state.cachedLayout[cacheId], cachedLayout };
+      }
+
       case 'SET': {
         return {
           ...state,
@@ -163,7 +196,9 @@ export function ViewportGridProvider({ children, service }) {
     DEFAULT_STATE
   );
 
-  const getState = useCallback(() => viewportGridState, [viewportGridState]);
+  const getState = useCallback(() => {
+    return viewportGridState;
+  }, [viewportGridState]);
 
   const setActiveViewportIndex = useCallback(
     index => dispatch({ type: 'SET_ACTIVE_VIEWPORT_INDEX', payload: index }),
@@ -189,6 +224,15 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
 
+  const setDisplaySetsForViewports = useCallback(
+    viewports => {
+      viewports.forEach(data => {
+        setDisplaySetsForViewport(data);
+      });
+    },
+    [setDisplaySetsForViewport]
+  );
+
   const setLayout = useCallback(
     ({ layoutType, numRows, numCols, layoutOptions = [] }) =>
       dispatch({
@@ -221,6 +265,16 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
 
+  const restoreCachedLayout = useCallback(
+    cacheId => {
+      dispatch({
+        type: 'RESTORE_CACHED_LAYOUT',
+        payload: cacheId,
+      });
+    },
+    [dispatch]
+  );
+
   const set = useCallback(
     payload =>
       dispatch({
@@ -231,7 +285,7 @@ export function ViewportGridProvider({ children, service }) {
   );
 
   /**
-   * Sets the implementation of a modal service that can be used by extensions.
+   * Sets the implementation of ViewportGridService that can be used by extensions.
    *
    * @returns void
    */
@@ -241,9 +295,11 @@ export function ViewportGridProvider({ children, service }) {
         getState,
         setActiveViewportIndex,
         setDisplaySetsForViewport,
+        setDisplaySetsForViewports,
         setLayout,
         reset,
         setCachedLayout,
+        restoreCachedLayout,
         set,
       });
     }
@@ -252,18 +308,22 @@ export function ViewportGridProvider({ children, service }) {
     service,
     setActiveViewportIndex,
     setDisplaySetsForViewport,
+    setDisplaySetsForViewports,
     setLayout,
     reset,
     setCachedLayout,
+    restoreCachedLayout,
     set,
   ]);
 
   const api = {
     getState,
-    setActiveViewportIndex,
+    setActiveViewportIndex: index => service.setActiveViewportIndex(index), // run it through the service itself since we want to publish events
     setDisplaySetsForViewport,
+    setDisplaySetsForViewports,
     setLayout,
     setCachedLayout,
+    restoreCachedLayout,
     reset,
     set,
   };