[IDC-1670] Better display of derived datasets in side panel. (#1962)

* WIP

* WIP

* WIP

* WIP

* Working click on seg.

* Load SEG if not loaded and set active.

* RTSTRUCT

* feat: 🎸 Display SEG and RTSTRUCT in side panel

* Throw error if dataset not available.

* Add delay in microscopy viewer e2e test.

* Add delay in microscopy viewer e2e test.

extensions/dicom-segmentation/src/components/SegmentationPanel/SegmentationPanel.js

@@ -6,6 +6,9 @@ import moment from 'moment';
 import { utils, log } from '@ohif/core';
 import { ScrollableArea, TableList, Icon } from '@ohif/ui';
 
+import setActiveLabelmap from '../../utils/setActiveLabelMap';
+import refreshViewports from '../../utils/refreshViewports';
+
 import {
   BrushColorSelector,
   BrushRadius,
@@ -19,12 +22,6 @@ import SegmentationSettings from '../SegmentationSettings/SegmentationSettings';
 
 const { studyMetadataManager } = utils;
 
-const refreshViewport = () => {
-  cornerstone.getEnabledElements().forEach(enabledElement => {
-    cornerstone.updateImage(enabledElement.element);
-  });
-};
-
 /**
  * SegmentationPanel component
  *
@@ -68,8 +65,7 @@ const SegmentationPanel = ({
    */
   const [state, setState] = useState({
     brushRadius: DEFAULT_BRUSH_RADIUS,
-    brushColor:
-      'rgba(221, 85, 85, 1)',
+    brushColor: 'rgba(221, 85, 85, 1)',
     selectedSegment: null,
     selectedSegmentation: null,
     showSegmentationSettings: false,
@@ -78,7 +74,7 @@ const SegmentationPanel = ({
     segmentList: [],
     cachedSegmentsProperties: [],
     isLoading: false,
-    isDisabled: true
+    isDisabled: true,
   });
 
   useEffect(() => {
@@ -112,7 +108,10 @@ const SegmentationPanel = ({
      * allows us to easily watch the module or the segmentations loading process in any other component
      * without subscribing to external events.
      */
-    document.addEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
+    document.addEventListener(
+      'extensiondicomsegmentationsegloaded',
+      refreshSegmentations
+    );
 
     /*
      * These are specific to each element;
@@ -127,7 +126,10 @@ const SegmentationPanel = ({
     );
 
     return () => {
-      document.removeEventListener('extensiondicomsegmentationsegloaded', refreshSegmentations);
+      document.removeEventListener(
+        'extensiondicomsegmentationsegloaded',
+        refreshSegmentations
+      );
       cornerstoneTools.store.state.enabledElements.forEach(enabledElement =>
         enabledElement.removeEventListener(
           'cornerstonetoolslabelmapmodified',
@@ -169,26 +171,29 @@ const SegmentationPanel = ({
           selectedSegmentation: brushStackState.activeLabelmapIndex,
           labelmapList,
           segmentList,
-          isDisabled
+          isDisabled,
         }));
       } else {
         setState(state => ({
           ...state,
           labelmapList: [],
           segmentList: [],
-          isDisabled
+          isDisabled,
         }));
       }
     }
-  }, [
-    viewports,
-    activeIndex,
-    state.isLoading
-  ]);
+  }, [viewports, activeIndex, state.isLoading]);
 
   useEffect(() => {
     refreshSegmentations();
-  }, [viewports, activeIndex, isOpen, state.selectedSegmentation, activeContexts, state.isLoading]);
+  }, [
+    viewports,
+    activeIndex,
+    isOpen,
+    state.selectedSegmentation,
+    activeContexts,
+    state.isLoading,
+  ]);
 
   /* Handle open/closed panel behaviour */
   useEffect(() => {
@@ -223,12 +228,10 @@ const SegmentationPanel = ({
           title: displayDescription,
           description: displayDate,
           onClick: async () => {
-            const activatedLabelmapIndex = await _setActiveLabelmap(
+            const activatedLabelmapIndex = await setActiveLabelmap(
               activeViewport,
               studies,
               displaySet,
-              firstImageId,
-              brushStackState.activeLabelmapIndex,
               () => onSelectedSegmentationChange(),
               onDisplaySetLoadFailure
             );
@@ -376,9 +379,13 @@ const SegmentationPanel = ({
           return !segmentsHidden[segmentIndex];
         };
 
-        const cachedSegmentProperties = state.cachedSegmentsProperties[segmentNumber];
+        const cachedSegmentProperties =
+          state.cachedSegmentsProperties[segmentNumber];
         let visible = isSegmentVisible();
-        if (cachedSegmentProperties && cachedSegmentProperties.visible !== visible) {
+        if (
+          cachedSegmentProperties &&
+          cachedSegmentProperties.visible !== visible
+        ) {
           toggleSegmentVisibility();
         }
 
@@ -406,8 +413,10 @@ const SegmentationPanel = ({
                 onSegmentVisibilityChange(segmentNumber, newVisibility);
               }
 
-              updateCachedSegmentsProperties(segmentNumber, { visible: newVisibility });
-              refreshViewport();
+              updateCachedSegmentsProperties(segmentNumber, {
+                visible: newVisibility,
+              });
+              refreshViewports();
             }}
           />
         );
@@ -429,10 +438,9 @@ const SegmentationPanel = ({
     const segmentsProperties = state.cachedSegmentsProperties;
     const segmentProperties = state.cachedSegmentsProperties[segmentNumber];
 
-    segmentsProperties[segmentNumber] =
-      segmentProperties ?
-        { ...segmentProperties, ...properties } :
-        properties;
+    segmentsProperties[segmentNumber] = segmentProperties
+      ? { ...segmentProperties, ...properties }
+      : properties;
 
     updateState('cachedSegmentsProperties', segmentsProperties);
   };
@@ -499,10 +507,13 @@ const SegmentationPanel = ({
     configuration.fillAlphaInactive = newConfiguration.fillAlphaInactive;
     configuration.outlineAlphaInactive = newConfiguration.outlineAlphaInactive;
     onConfigurationChange(newConfiguration);
-    refreshViewport();
+    refreshViewports();
   };
 
-  const disabledConfigurationFields = ['outlineAlpha', 'shouldRenderInactiveLabelmaps'];
+  const disabledConfigurationFields = [
+    'outlineAlpha',
+    'shouldRenderInactiveLabelmaps',
+  ];
   if (state.showSegmentationSettings) {
     return (
       <SegmentationSettings
@@ -514,7 +525,10 @@ const SegmentationPanel = ({
     );
   } else {
     return (
-      <div className={`dcmseg-segmentation-panel ${state.isDisabled && 'disabled'}`}>
+      <div
+        className={`dcmseg-segmentation-panel ${state.isDisabled &&
+          'disabled'}`}
+      >
         <Icon
           className="cog-icon"
           name="cog"
@@ -613,57 +627,6 @@ const _getReferencedSegDisplaysets = (StudyInstanceUID, SeriesInstanceUID) => {
   return referencedDisplaysets;
 };
 
-/**
- *
- *
- * @param {*} viewportSpecificData
- * @param {*} studies
- * @param {*} displaySet
- * @param {*} firstImageId
- * @param {*} activeLabelmapIndex
- * @returns
- */
-const _setActiveLabelmap = async (
-  viewportSpecificData,
-  studies,
-  displaySet,
-  firstImageId,
-  activeLabelmapIndex,
-  callback = () => { },
-  onDisplaySetLoadFailure
-) => {
-  if (displaySet.labelmapIndex === activeLabelmapIndex) {
-    log.warn(`${activeLabelmapIndex} is already the active labelmap`);
-    return displaySet.labelmapIndex;
-  }
-
-  if (!displaySet.isLoaded) {
-    // What props does this expect `viewportSpecificData` to have?
-    // TODO: Should this return the `labelmapIndex`?
-
-    const loadPromise = displaySet.load(viewportSpecificData, studies);
-
-    loadPromise.catch(error => {
-      onDisplaySetLoadFailure(error);
-
-      // Return old index.
-      return activeLabelmapIndex;
-    });
-
-    await loadPromise;
-  }
-
-  const { state } = cornerstoneTools.getModule('segmentation');
-  const brushStackState = state.series[firstImageId];
-  brushStackState.activeLabelmapIndex = displaySet.labelmapIndex;
-
-  refreshViewport();
-
-  callback();
-
-  return displaySet.labelmapIndex;
-};
-
 /**
  *
  * @param {*} firstImageId
@@ -683,7 +646,7 @@ const _setActiveSegment = (firstImageId, segmentIndex, activeSegmentIndex) => {
     brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
   labelmap3D.activeSegmentIndex = segmentIndex;
 
-  refreshViewport();
+  refreshViewports();
 
   return segmentIndex;
 };