@ohif/app 3.7.0-beta.43 → 3.7.0-beta.46

package/dist/{150.bundle.94cbce497cafacd4a7d7.js → 150.bundle.2fa62b4d658df1500a7a.js}

@@ -9,7 +9,8 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "default": () => (/* binding */ cornerstone_dicom_seg_src)
+  "default": () => (/* binding */ cornerstone_dicom_seg_src),
+  hydrateSEGDisplaySet: () => (/* reexport */ _hydrateSEG/* default */.Z)
 });
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/package.json
@@ -571,6 +572,8 @@ function getHangingProtocolModule() {
 }
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
 
+// EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts
+var _hydrateSEG = __webpack_require__(28417);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/index.tsx
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -578,8 +581,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 const Component = /*#__PURE__*/react.lazy(() => {
-  return __webpack_require__.e(/* import() */ 869).then(__webpack_require__.bind(__webpack_require__, 87869));
+  return __webpack_require__.e(/* import() */ 451).then(__webpack_require__.bind(__webpack_require__, 4451));
 });
 const OHIFCornerstoneSEGViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -631,7 +635,8 @@ const extension = {
     const ExtendedOHIFCornerstoneSEGViewport = props => {
       return /*#__PURE__*/react.createElement(OHIFCornerstoneSEGViewport, _extends({
         servicesManager: servicesManager,
-        extensionManager: extensionManager
+        extensionManager: extensionManager,
+        commandsManager: commandsManager
       }, props));
     };
     return [{
@@ -650,6 +655,69 @@ const extension = {
 };
 /* harmony default export */ const cornerstone_dicom_seg_src = (extension);
 
+
+/***/ }),
+
+/***/ 28417:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Z: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+async function _hydrateSEGDisplaySet(_ref) {
+  let {
+    segDisplaySet,
+    viewportIndex,
+    servicesManager
+  } = _ref;
+  const {
+    segmentationService,
+    hangingProtocolService,
+    viewportGridService
+  } = servicesManager.services;
+  const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
+  let segmentationId = null;
+
+  // We need the hydration to notify panels about the new segmentation added
+  const suppressEvents = false;
+  segmentationId = await segmentationService.createSegmentationForSEGDisplaySet(segDisplaySet, segmentationId, suppressEvents);
+  segmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
+  const {
+    viewports
+  } = viewportGridService.getState();
+  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportIndex, displaySetInstanceUID);
+
+  // Todo: fix this after we have a better way for stack viewport segmentations
+
+  // check every viewport in the viewports to see if the displaySetInstanceUID
+  // 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) {
+      return;
+    }
+    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(viewport.displaySetInstanceUIDs, segDisplaySet.displaySetInstanceUID);
+    if (shouldDisplaySeg) {
+      updatedViewports.push({
+        viewportIndex: index,
+        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
+        viewportOptions: {
+          initialImageOptions: {
+            preset: 'middle'
+          }
+        }
+      });
+    }
+  });
+
+  // Do the entire update at once
+  viewportGridService.setDisplaySetsForViewports(updatedViewports);
+  return true;
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_hydrateSEGDisplaySet);
+
 /***/ }),
 
 /***/ 78753:

package/dist/{181.bundle.817ca1ba6479fca5fd15.js → 181.bundle.f5476625f4ca901a1b91.js}

@@ -1132,6 +1132,7 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     viewportOptions,
     displaySetOptions,
     servicesManager,
+    commandsManager,
     onElementEnabled,
     onElementDisabled,
     isJumpToMeasurementDisabled,
@@ -1168,35 +1169,6 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       setImageScrollBarHeight();
     }
   }, [elementRef]);
-  const storePresentation = () => {
-    const currentPresentation = cornerstoneViewportService.getPresentation(viewportIndex);
-    if (!currentPresentation || !currentPresentation.presentationIds) return;
-    const {
-      lutPresentationStore,
-      positionPresentationStore
-    } = stateSyncService.getState();
-    const {
-      presentationIds
-    } = currentPresentation;
-    const {
-      lutPresentationId,
-      positionPresentationId
-    } = presentationIds || {};
-    const storeState = {};
-    if (lutPresentationId) {
-      storeState.lutPresentationStore = {
-        ...lutPresentationStore,
-        [lutPresentationId]: currentPresentation
-      };
-    }
-    if (positionPresentationId) {
-      storeState.positionPresentationStore = {
-        ...positionPresentationStore,
-        [positionPresentationId]: currentPresentation
-      };
-    }
-    stateSyncService.store(storeState);
-  };
   const cleanUpServices = (0,react.useCallback)(() => {
     const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
     if (!viewportInfo) {
@@ -1237,7 +1209,9 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
     dist_esm.eventTarget.addEventListener(dist_esm.Enums.Events.ELEMENT_ENABLED, elementEnabledHandler);
     setImageScrollBarHeight();
     return () => {
-      storePresentation();
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex
+      });
       cleanUpServices();
       const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(viewportIndex);
       cornerstoneViewportService.disableElement(viewportIndex);
@@ -1329,7 +1303,6 @@ const OHIFCornerstoneViewport = /*#__PURE__*/react.memo(props => {
       unsubscribeFromJumpToMeasurementEvents();
     };
   }, [displaySets, elementRef, viewportIndex]);
-  console.debug('OHIFCornerstoneViewport rendering');
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "viewport-wrapper"
   }, /*#__PURE__*/react.createElement(index_esm/* default */.ZP, {
@@ -1379,7 +1352,9 @@ function _subscribeToJumpToMeasurementEvents(measurementService, displaySetServi
       measurement,
       isConsumed
     } = props;
-    if (!measurement || isConsumed) return;
+    if (!measurement || isConsumed) {
+      return;
+    }
     if (cacheJumpToMeasurementEvent.cornerstoneViewport === undefined) {
       // Decide on which viewport should handle this
       cacheJumpToMeasurementEvent.cornerstoneViewport = cornerstoneViewportService.getViewportIndexToJump(jumpIndex, measurement.displaySetInstanceUID, {
@@ -1396,13 +1371,17 @@ function _subscribeToJumpToMeasurementEvents(measurementService, displaySetServi
 
 // Check if there is a queued jumpToMeasurement event
 function _checkForCachedJumpToMeasurementEvents(measurementService, displaySetService, elementRef, viewportIndex, displaySets, viewportGridService, cornerstoneViewportService) {
-  if (!cacheJumpToMeasurementEvent) return;
+  if (!cacheJumpToMeasurementEvent) {
+    return;
+  }
   if (cacheJumpToMeasurementEvent.isConsumed) {
     cacheJumpToMeasurementEvent = null;
     return;
   }
   const displaysUIDs = displaySets.map(displaySet => displaySet.displaySetInstanceUID);
-  if (!displaysUIDs?.length) return;
+  if (!displaysUIDs?.length) {
+    return;
+  }
 
   // Jump to measurement if the measurement exists
   const {

package/dist/{236.bundle.3c5f844ce9de4ec0777d.js → 236.bundle.c0a68163699ecfe3169a.js}

@@ -61,7 +61,9 @@ function coordinateFormatScoord3d2Geometry(coordinates, pyramid) {
   return coordinates;
 }
 function _getPixelSpacing(metadata) {
-  if (metadata.PixelSpacing) return metadata.PixelSpacing;
+  if (metadata.PixelSpacing) {
+    return metadata.PixelSpacing;
+  }
   const functionalGroup = metadata.SharedFunctionalGroupsSequence[0];
   const pixelMeasures = functionalGroup.PixelMeasuresSequence[0];
   return pixelMeasures.PixelSpacing;
@@ -811,7 +813,7 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
   clear() {
     this.managedViewers.forEach(managedViewer => managedViewer.destroy());
     this.managedViewers.clear();
-    for (var key in this.annotations) {
+    for (const key in this.annotations) {
       delete this.annotations[key];
     }
     this.roiUids.clear();
@@ -879,7 +881,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
       managedViewer
     } = data;
     const roiAnnotation = this.getAnnotation(roiGraphic.uid);
-    if (!roiAnnotation) return;
+    if (!roiAnnotation) {
+      return;
+    }
     roiAnnotation.setRoiGraphic(roiGraphic);
     roiAnnotation.setViewState(managedViewer.getViewState());
   }
@@ -933,7 +937,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
     } = data;
     const selectedAnnotation = this.getAnnotation(roiGraphic.uid);
     if (selectedAnnotation && selectedAnnotation !== this.getSelectedAnnotation()) {
-      if (this.selectedAnnotation) this.clearSelection();
+      if (this.selectedAnnotation) {
+        this.clearSelection();
+      }
       this.selectedAnnotation = selectedAnnotation;
       this._broadcastEvent(MicroscopyService_EVENTS.ANNOTATION_SELECTED, selectedAnnotation);
     }
@@ -1188,7 +1194,9 @@ class MicroscopyService extends core_src/* PubSubService */.hC {
    * @param {RoiAnnotation} roiAnnotation The instance to be selected
    */
   selectAnnotation(roiAnnotation) {
-    if (this.selectedAnnotation) this.clearSelection();
+    if (this.selectedAnnotation) {
+      this.clearSelection();
+    }
     this.selectedAnnotation = roiAnnotation;
     this._broadcastEvent(MicroscopyService_EVENTS.ANNOTATION_SELECTED, roiAnnotation);
     this.setROIStyle(roiAnnotation.uid, utils_styles.active);
@@ -1544,7 +1552,9 @@ function constructSR(metadata, _ref, annotations) {
     console.debug('[SR] storing measurements...', measurements);
     console.debug('[SR] storing evaluations...', evaluations);
     console.debug('[SR] storing presentation state...', presentationState);
-    if (presentationState) presentationState.marker = marker;
+    if (presentationState) {
+      presentationState.marker = marker;
+    }
 
     /** Avoid incompatibility with dcmjs */
     measurements = measurements.map(measurement => {
@@ -1654,10 +1664,10 @@ function constructSR(metadata, _ref, annotations) {
  * @param filename
  */
 function saveByteArray(buffer, filename) {
-  var blob = new Blob([buffer], {
+  const blob = new Blob([buffer], {
     type: 'application/dicom'
   });
-  var link = document.createElement('a');
+  const link = document.createElement('a');
   link.href = window.URL.createObjectURL(blob);
   link.download = filename;
   link.click();
@@ -2057,7 +2067,9 @@ function getCommandsModule(_ref) {
       } = _ref2;
       if (uid) {
         const roiAnnotation = microscopyService.getAnnotation(uid);
-        if (roiAnnotation) microscopyService.removeAnnotation(roiAnnotation);
+        if (roiAnnotation) {
+          microscopyService.removeAnnotation(roiAnnotation);
+        }
       }
     },
     setLabel: _ref3 => {
@@ -2096,7 +2108,7 @@ function getCommandsModule(_ref) {
       }];
       if (['line', 'box', 'circle', 'point', 'polygon', 'freehandpolygon', 'freehandline'].indexOf(toolName) >= 0) {
         // TODO: read from configuration
-        let options = {
+        const options = {
           geometryType: toolName,
           vertexEnabled: true,
           styleOptions: utils_styles["default"],
@@ -2147,7 +2159,9 @@ function getCommandsModule(_ref) {
       const overlays = document.getElementsByClassName('microscopy-viewport-overlay');
       let onoff = false; // true if this will toggle on
       for (let i = 0; i < overlays.length; i++) {
-        if (i === 0) onoff = overlays.item(0).classList.contains('hidden');
+        if (i === 0) {
+          onoff = overlays.item(0).classList.contains('hidden');
+        }
         overlays.item(i).classList.toggle('hidden');
       }
 

package/dist/{250.bundle.ee4bcf159c4d610acc3e.js → 250.bundle.1c1cb3520a9285138cfa.js}

@@ -36,11 +36,17 @@ const listComponentGenerator = props => {
     list,
     itemGenerator
   } = props;
-  if (!list) return;
+  if (!list) {
+    return;
+  }
   return list.map(item => {
-    if (!item) return;
+    if (!item) {
+      return;
+    }
     const generator = item.generator || itemGenerator;
-    if (!generator) throw new Error(`No generator for ${item}`);
+    if (!generator) {
+      throw new Error(`No generator for ${item}`);
+    }
     return generator({
       ...props,
       item
@@ -230,8 +236,12 @@ const itemGenerator = props => {
   props.formatTime = formatDICOMTime;
   props.formatPN = formatPN;
   props.formatNumberPrecision = formatNumberPrecision;
-  if (condition && !condition(props)) return null;
-  if (!contents && !valueFunc) return null;
+  if (condition && !condition(props)) {
+    return null;
+  }
+  if (!contents && !valueFunc) {
+    return null;
+  }
   const value = valueFunc && valueFunc(props);
   const contentsValue = contents && contents(props) || [{
     className: 'mr-1',
@@ -430,7 +440,9 @@ class DicomMicroscopyViewport extends react.Component {
     } = this.props.servicesManager.services;
     this.microscopyService = microscopyService;
     this.debouncedResize = lodash_debounce_default()(() => {
-      if (this.viewer) this.viewer.resize();
+      if (this.viewer) {
+        this.viewer.resize();
+      }
     }, 100);
   }
   /**

package/dist/{30.bundle.8fb93818b3a58f29f7e3.js → 30.bundle.c0b2fa8984080ebcfbbc.js}

@@ -2211,7 +2211,9 @@ function _mapMeasurementToDisplay(measurement, types, displaySetService) {
   if (findingSites) {
     const siteText = [];
     findingSites.forEach(site => {
-      if (site?.text !== label) siteText.push(site.text);
+      if (site?.text !== label) {
+        siteText.push(site.text);
+      }
     });
     displayText = [...siteText, ...displayText];
   }

package/dist/{378.bundle.c908a6194c50544b45db.js → 378.bundle.61261ee41e0ea0955440.js}

@@ -103,7 +103,9 @@ const codeMenuItem = {
     const {
       code: codeRef
     } = this;
-    if (!codeRef) throw new Error(`item ${this} has no code ref`);
+    if (!codeRef) {
+      throw new Error(`item ${this} has no code ref`);
+    }
     const codingValues = customizationService.get('codingValues');
     const code = codingValues[codeRef];
     return {
@@ -239,7 +241,7 @@ function getCustomizationModule() {
  * From 'this', it uses:
  *    `sameAttribute` as the attribute name to look for
  *    `sameDisplaySetId` as the display set id to look for
- * From `options`, it looks for 
+ * From `options`, it looks for
  */
 /* harmony default export */ function sameAs(displaySet, options) {
   const {
@@ -247,11 +249,11 @@ function getCustomizationModule() {
     sameDisplaySetId
   } = this;
   if (!sameAttribute) {
-    console.log("sameAttribute not defined in", this);
+    console.log('sameAttribute not defined in', this);
     return `sameAttribute not defined in ${this.id}`;
   }
   if (!sameDisplaySetId) {
-    console.log("sameDisplaySetId not defined in", this);
+    console.log('sameDisplaySetId not defined in', this);
     return `sameDisplaySetId not defined in ${this.id}`;
   }
   const {
@@ -260,7 +262,7 @@ function getCustomizationModule() {
   } = options;
   const match = displaySetMatchDetails.get(sameDisplaySetId);
   if (!match) {
-    console.log("No match for display set", sameDisplaySetId);
+    console.log('No match for display set', sameDisplaySetId);
     return false;
   }
   const {
@@ -268,7 +270,7 @@ function getCustomizationModule() {
   } = match;
   const altDisplaySet = displaySets.find(it => it.displaySetInstanceUID == displaySetInstanceUID);
   if (!altDisplaySet) {
-    console.log("No display set found with", displaySetInstanceUID, "in", displaySets);
+    console.log('No display set found with', displaySetInstanceUID, 'in', displaySets);
     return false;
   }
   const testValue = altDisplaySet[sameAttribute];

package/dist/{869.bundle.c9c018e6757410919ed8.js → 451.bundle.a08889b823fb10803bd8.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[869],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[451],{
 
-/***/ 87869:
+/***/ 4451:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -31,59 +31,8 @@ function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, t
   return ToolGroupService.createToolGroupAndAddTools(toolGroupId, tools, {});
 }
 /* harmony default export */ const initSEGToolGroup = (createSEGToolGroupAndAddTools);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts
-async function _hydrateSEGDisplaySet(_ref) {
-  let {
-    segDisplaySet,
-    viewportIndex,
-    servicesManager
-  } = _ref;
-  const {
-    segmentationService,
-    hangingProtocolService,
-    viewportGridService
-  } = servicesManager.services;
-  const displaySetInstanceUID = segDisplaySet.referencedDisplaySetInstanceUID;
-  let segmentationId = null;
-
-  // We need the hydration to notify panels about the new segmentation added
-  const suppressEvents = false;
-  segmentationId = await segmentationService.createSegmentationForSEGDisplaySet(segDisplaySet, segmentationId, suppressEvents);
-  segmentationService.hydrateSegmentation(segDisplaySet.displaySetInstanceUID);
-  const {
-    viewports
-  } = viewportGridService.getState();
-  const updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportIndex, displaySetInstanceUID);
-
-  // Todo: fix this after we have a better way for stack viewport segmentations
-
-  // check every viewport in the viewports to see if the displaySetInstanceUID
-  // 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) {
-      return;
-    }
-    const shouldDisplaySeg = segmentationService.shouldRenderSegmentation(viewport.displaySetInstanceUIDs, segDisplaySet.displaySetInstanceUID);
-    if (shouldDisplaySeg) {
-      updatedViewports.push({
-        viewportIndex: index,
-        displaySetInstanceUIDs: viewport.displaySetInstanceUIDs,
-        viewportOptions: {
-          initialImageOptions: {
-            preset: 'middle'
-          }
-        }
-      });
-    }
-  });
-
-  // Do the entire update at once
-  viewportGridService.setDisplaySetsForViewports(updatedViewports);
-  return true;
-}
-/* harmony default export */ const _hydrateSEG = (_hydrateSEGDisplaySet);
+// EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/_hydrateSEG.ts
+var _hydrateSEG = __webpack_require__(28417);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts
 
 
@@ -96,7 +45,8 @@ function promptHydrateSEG(_ref) {
   let {
     servicesManager,
     segDisplaySet,
-    viewportIndex
+    viewportIndex,
+    preHydrateCallbacks
   } = _ref;
   const {
     uiViewportDialogService
@@ -104,7 +54,10 @@ function promptHydrateSEG(_ref) {
   return new Promise(async function (resolve, reject) {
     const promptResult = await _askHydrate(uiViewportDialogService, viewportIndex);
     if (promptResult === RESPONSE.HYDRATE_SEG) {
-      const isHydrated = await _hydrateSEG({
+      preHydrateCallbacks?.forEach(callback => {
+        callback();
+      });
+      const isHydrated = await (0,_hydrateSEG/* default */.Z)({
         segDisplaySet,
         viewportIndex,
         servicesManager
@@ -156,8 +109,8 @@ function _getStatusComponent(_ref) {
   let StatusIcon = null;
   const {
     t
-  } = (0,es/* useTranslation */.$G)("Common");
-  const loadStr = t("LOAD");
+  } = (0,es/* useTranslation */.$G)('Common');
+  const loadStr = t('LOAD');
   switch (isHydrated) {
     case true:
       StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
@@ -211,7 +164,8 @@ function OHIFCornerstoneSEGViewport(props) {
     viewportIndex,
     viewportLabel,
     servicesManager,
-    extensionManager
+    extensionManager,
+    commandsManager
   } = props;
   const {
     t
@@ -233,7 +187,6 @@ function OHIFCornerstoneSEGViewport(props) {
   const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
 
   // States
-  const [isToolGroupCreated, setToolGroupCreated] = (0,react.useState)(false);
   const [selectedSegment, setSelectedSegment] = (0,react.useState)(1);
 
   // Hydration means that the SEG is opened and segments are loaded into the
@@ -273,6 +226,16 @@ function OHIFCornerstoneSEGViewport(props) {
   const onElementDisabled = () => {
     setElement(null);
   };
+  const storePresentationState = (0,react.useCallback)(() => {
+    viewportGrid?.viewports.forEach(_ref => {
+      let {
+        viewportIndex
+      } = _ref;
+      commandsManager.runCommand('storePresentation', {
+        viewportIndex
+      });
+    });
+  }, [viewportGrid]);
   const getCornerstoneViewport = (0,react.useCallback)(() => {
     const {
       component: Component
@@ -322,7 +285,8 @@ function OHIFCornerstoneSEGViewport(props) {
     utils_promptHydrateSEG({
       servicesManager,
       viewportIndex,
-      segDisplaySet
+      segDisplaySet,
+      preHydrateCallbacks: [storePresentationState]
     }).then(isHydrated => {
       if (isHydrated) {
         setIsHydrated(true);
@@ -351,11 +315,11 @@ function OHIFCornerstoneSEGViewport(props) {
   (0,react.useEffect)(() => {
     const {
       unsubscribe
-    } = segmentationService.subscribe(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, _ref => {
+    } = segmentationService.subscribe(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, _ref2 => {
       let {
         percentComplete,
         numSegments
-      } = _ref;
+      } = _ref2;
       setProcessingProgress({
         percentComplete,
         totalSegments: numSegments
@@ -370,10 +334,10 @@ function OHIFCornerstoneSEGViewport(props) {
    Cleanup the SEG viewport when the viewport is destroyed
    */
   (0,react.useEffect)(() => {
-    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_REMOVED, _ref2 => {
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_REMOVED, _ref3 => {
       let {
         displaySetInstanceUIDs
-      } = _ref2;
+      } = _ref3;
       const activeViewport = viewports[activeViewportIndex];
       if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
         viewportGridService.setDisplaySetsForViewport({
@@ -395,7 +359,6 @@ function OHIFCornerstoneSEGViewport(props) {
     // This creates a custom tool group which has the lifetime of this view
     // only, and does NOT interfere with currently displayed segmentations.
     toolGroup = initSEGToolGroup(toolGroupService, customizationService, toolGroupId);
-    setToolGroupCreated(true);
     return () => {
       // remove the segmentation representations if seg displayset changed
       segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
@@ -438,7 +401,14 @@ function OHIFCornerstoneSEGViewport(props) {
     SpacingBetweenSlices
   } = referencedDisplaySetRef.current.metadata;
   const onStatusClick = async () => {
-    const isHydrated = await _hydrateSEG({
+    // Before hydrating a SEG and make it added to all viewports in the grid
+    // that share the same frameOfReferenceUID, we need to store the viewport grid
+    // presentation state, so that we can restore it after hydrating the SEG. This is
+    // required if the user has changed the viewport (other viewport than SEG viewport)
+    // presentation state (w/l and invert) and then opens the SEG. If we don't store
+    // the presentation state, the viewport will be reset to the default presentation
+    storePresentationState();
+    const isHydrated = await (0,_hydrateSEG/* default */.Z)({
       segDisplaySet,
       viewportIndex,
       servicesManager