fix: 🐛 Disable seg panel when data for seg unavailable (#1732)

* Add disable state for invalid data

* fix: 🐛 Disable seg panel when data for seg unavailable

We need to gracefully handle errors if data for segmentation is
unavailable and disable the segmentation panel

✅ Closes: #1728

* Bump dcmjs version

dcmjs
  * @ohif/core: ^0.12.2 → ^0.13.0
  * @ohif/extension-cornerstone: ^0.12.3 → ^0.13.0
  * @ohif/extension-dicom-html: ^0.12.3 → ^0.13.0
  * @ohif/extension-dicom-rt: ^0.12.3 → ^0.13.0
  * @ohif/extension-dicom-segmentation: ^0.12.2 → ^0.13.0
  * @ohif/extension-vtk: ^0.12.2 → ^0.13.0
  * @ohif/viewer: ^0.12.2 → ^0.13.0

* Remove error barrier

* Fix e2e

Co-authored-by: James Petts <jamesapetts@gmail.com>

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

@@ -77,7 +77,8 @@ const SegmentationPanel = ({
     labelmapList: [],
     segmentList: [],
     cachedSegmentsProperties: [],
-    isLoading: false
+    isLoading: false,
+    isDisabled: true
   });
 
   useEffect(() => {
@@ -139,39 +140,45 @@ const SegmentationPanel = ({
   const refreshSegmentations = useCallback(() => {
     const module = cornerstoneTools.getModule('segmentation');
     const activeViewport = viewports[activeIndex];
-    const studyMetadata = studyMetadataManager.get(
-      activeViewport.StudyInstanceUID
-    );
-    const firstImageId = studyMetadata.getFirstImageId(
-      activeViewport.displaySetInstanceUID
-    );
-    const brushStackState = module.state.series[firstImageId];
-    if (brushStackState) {
-      const labelmap3D =
-        brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
-      const labelmapList = getLabelmapList(
-        brushStackState,
-        firstImageId,
-        activeViewport
+
+    const isDisabled = !activeViewport || !activeViewport.StudyInstanceUID;
+    if (!isDisabled) {
+      const studyMetadata = studyMetadataManager.get(
+        activeViewport.StudyInstanceUID
       );
-      const segmentList = getSegmentList(
-        labelmap3D,
-        firstImageId,
-        brushStackState
+      const firstImageId = studyMetadata.getFirstImageId(
+        activeViewport.displaySetInstanceUID
       );
-      setState(state => ({
-        ...state,
-        brushStackState,
-        selectedSegmentation: brushStackState.activeLabelmapIndex,
-        labelmapList,
-        segmentList,
-      }));
-    } else {
-      setState(state => ({
-        ...state,
-        labelmapList: [],
-        segmentList: [],
-      }));
+      const brushStackState = module.state.series[firstImageId];
+      if (brushStackState) {
+        const labelmap3D =
+          brushStackState.labelmaps3D[brushStackState.activeLabelmapIndex];
+        const labelmapList = getLabelmapList(
+          brushStackState,
+          firstImageId,
+          activeViewport
+        );
+        const segmentList = getSegmentList(
+          labelmap3D,
+          firstImageId,
+          brushStackState
+        );
+        setState(state => ({
+          ...state,
+          brushStackState,
+          selectedSegmentation: brushStackState.activeLabelmapIndex,
+          labelmapList,
+          segmentList,
+          isDisabled
+        }));
+      } else {
+        setState(state => ({
+          ...state,
+          labelmapList: [],
+          segmentList: [],
+          isDisabled
+        }));
+      }
     }
   }, [
     viewports,
@@ -181,7 +188,7 @@ const SegmentationPanel = ({
 
   useEffect(() => {
     refreshSegmentations();
-  }, [viewports, activeIndex, state.selectedSegmentation, activeContexts, state.isLoading]);
+  }, [viewports, activeIndex, isOpen, state.selectedSegmentation, activeContexts, state.isLoading]);
 
   /* Handle open/closed panel behaviour */
   useEffect(() => {
@@ -507,7 +514,7 @@ const SegmentationPanel = ({
     );
   } else {
     return (
-      <div className="dcmseg-segmentation-panel">
+      <div className={`dcmseg-segmentation-panel ${state.isDisabled && 'disabled'}`}>
         <Icon
           className="cog-icon"
           name="cog"