@ohif/app 3.0.0 → 3.5.0

package/dist/55.css

@@ -0,0 +1,3 @@
+.DicomMicroscopyViewer{--ol-partial-background-color:#7f7f7fb3;--ol-foreground-color:#000;--ol-subtle-foreground-color:#000;--ol-subtle-background-color:#4e4e4e80}.DicomMicroscopyViewer .ol-box{background-color:var(--ol-partial-background-color);border:1.5px solid var(--ol-background-color);border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}.DicomMicroscopyViewer .ol-mouse-position{position:absolute;right:8px;top:8px}.DicomMicroscopyViewer .ol-scale-line{background:var(--ol-partial-background-color);border-radius:4px;bottom:8px;left:8px;padding:2px;position:absolute}.DicomMicroscopyViewer .ol-scale-line-inner{border:1px solid var(--ol-subtle-foreground-color);border-top:none;color:var(--ol-foreground-color);font-size:10px;margin:1px;text-align:center;-webkit-transition:all .25s;transition:all .25s;will-change:contents,width}.DicomMicroscopyViewer .ol-scale-bar{bottom:8px;left:8px;position:absolute}.DicomMicroscopyViewer .ol-scale-bar-inner{display:-webkit-box;display:-ms-flexbox;display:flex}.DicomMicroscopyViewer .ol-scale-step-marker{background-color:var(--ol-foreground-color);float:right;height:15px;width:1px;z-index:10}.DicomMicroscopyViewer .ol-scale-step-text{bottom:-5px;font-size:10px;z-index:11}.DicomMicroscopyViewer .ol-scale-step-text,.DicomMicroscopyViewer .ol-scale-text{color:var(--ol-foreground-color);position:absolute;text-shadow:-1.5px 0 var(--ol-partial-background-color),0 1.5px var(--ol-partial-background-color),1.5px 0 var(--ol-partial-background-color),0 -1.5px var(--ol-partial-background-color)}.DicomMicroscopyViewer .ol-scale-text{bottom:25px;font-size:12px;text-align:center}.DicomMicroscopyViewer .ol-scale-singlebar{border:1px solid var(--ol-foreground-color);-webkit-box-sizing:border-box;box-sizing:border-box;height:10px;position:relative;z-index:9}.DicomMicroscopyViewer .ol-scale-singlebar-even{background-color:var(--ol-subtle-foreground-color)}.DicomMicroscopyViewer .ol-scale-singlebar-odd{background-color:var(--ol-background-color)}.DicomMicroscopyViewer .ol-unsupported{display:none}.DicomMicroscopyViewer .ol-unselectable,.DicomMicroscopyViewer .ol-viewport{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none; -ms-user-select:none;     user-select:none}.DicomMicroscopyViewer .ol-viewport canvas{all:unset}.DicomMicroscopyViewer .ol-selectable{-webkit-touch-callout:default;-webkit-user-select:text;-moz-user-select:text; -ms-user-select:text;     user-select:text}.DicomMicroscopyViewer .ol-grabbing{cursor:-webkit-grabbing;cursor:grabbing}.DicomMicroscopyViewer .ol-grab{cursor:move;cursor:-webkit-grab;cursor:grab}.DicomMicroscopyViewer .ol-control{background-color:var(--ol-subtle-background-color);border-radius:4px;position:absolute}.DicomMicroscopyViewer .ol-zoom{left:.5em;top:.5em}.DicomMicroscopyViewer .ol-rotate{right:.5em;top:.5em;-webkit-transition:opacity .25s linear,visibility 0s linear;transition:opacity .25s linear,visibility 0s linear}.DicomMicroscopyViewer .ol-rotate.ol-hidden{opacity:0;-webkit-transition:opacity .25s linear,visibility 0s linear .25s;transition:opacity .25s linear,visibility 0s linear .25s;visibility:hidden}.DicomMicroscopyViewer .ol-zoom-extent{left:.5em;top:4.643em}.DicomMicroscopyViewer .ol-full-screen{right:.5em;top:.5em}.DicomMicroscopyViewer .ol-control button{background-color:var(--ol-background-color);border:none;border-radius:2px;color:var(--ol-subtle-foreground-color);display:block;font-size:inherit;font-weight:700;height:1.375em;line-height:.4em;margin:1px;padding:0;text-align:center;text-decoration:none;width:1.375em}.DicomMicroscopyViewer .ol-control button::-moz-focus-inner{border:none;padding:0}.DicomMicroscopyViewer .ol-zoom-extent button{line-height:1.4em}.DicomMicroscopyViewer .ol-compass{display:block;font-weight:400;will-change:transform}.DicomMicroscopyViewer .ol-touch .ol-control button{font-size:1.5em}.DicomMicroscopyViewer .ol-touch .ol-zoom-extent{top:5.5em}.DicomMicroscopyViewer .ol-control button:focus,.DicomMicroscopyViewer .ol-control button:hover{color:var(--ol-foreground-color);outline:1px solid var(--ol-subtle-foreground-color);text-decoration:none}.DicomMicroscopyViewer .ol-zoom .ol-zoom-in{border-radius:2px 2px 0 0}.DicomMicroscopyViewer .ol-zoom .ol-zoom-out{border-radius:0 0 2px 2px}.DicomMicroscopyViewer .ol-attribution{-webkit-box-align:center;-ms-flex-align:center;align-items:center;bottom:.5em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-flow:row-reverse;flex-flow:row-reverse;max-width:calc(100% - 1.3em);right:.5em;text-align:right}.DicomMicroscopyViewer .ol-attribution a{color:var(--ol-subtle-foreground-color);text-decoration:none}.DicomMicroscopyViewer .ol-attribution ul{color:var(--ol-foreground-color);font-size:12px;margin:0;padding:1px .5em;text-shadow:0 0 2px var(--ol-background-color)}.DicomMicroscopyViewer .ol-attribution li{display:inline;list-style:none}.DicomMicroscopyViewer .ol-attribution li:not(:last-child):after{content:" "}.DicomMicroscopyViewer .ol-attribution img{max-height:2em;max-width:inherit;vertical-align:middle}.DicomMicroscopyViewer .ol-attribution button{-ms-flex-negative:0;flex-shrink:0}.DicomMicroscopyViewer .ol-attribution.ol-collapsed ul{display:none}.DicomMicroscopyViewer .ol-attribution:not(.ol-collapsed){background:var(--ol-partial-background-color)}.DicomMicroscopyViewer .ol-attribution.ol-uncollapsible{border-radius:4px 0 0;bottom:0;right:0}.DicomMicroscopyViewer .ol-attribution.ol-uncollapsible img{margin-top:-.2em;max-height:1.6em}.DicomMicroscopyViewer .ol-attribution.ol-uncollapsible button{display:none}.DicomMicroscopyViewer .ol-zoomslider{height:200px;left:.5em;top:4.5em}.DicomMicroscopyViewer .ol-zoomslider button{height:10px;position:relative}.DicomMicroscopyViewer .ol-touch .ol-zoomslider{top:5.5em}.DicomMicroscopyViewer .ol-overviewmap{bottom:.5em;left:.5em}.DicomMicroscopyViewer .ol-overviewmap.ol-uncollapsible{border-radius:0 4px 0 0;bottom:0;left:0}.DicomMicroscopyViewer .ol-overviewmap .ol-overviewmap-map,.DicomMicroscopyViewer .ol-overviewmap button{display:block}.DicomMicroscopyViewer .ol-overviewmap .ol-overviewmap-map{border:1px solid var(--ol-subtle-foreground-color);height:150px;width:150px}.DicomMicroscopyViewer .ol-overviewmap:not(.ol-collapsed) button{bottom:0;left:0;position:absolute}.DicomMicroscopyViewer .ol-overviewmap.ol-collapsed .ol-overviewmap-map,.DicomMicroscopyViewer .ol-overviewmap.ol-uncollapsible button{display:none}.DicomMicroscopyViewer .ol-overviewmap:not(.ol-collapsed){background:var(--ol-subtle-background-color)}.DicomMicroscopyViewer .ol-overviewmap-box{border:.5px dotted var(--ol-subtle-foreground-color)}.DicomMicroscopyViewer .ol-overviewmap .ol-overviewmap-box:hover{cursor:move}@layout-header-background: #007ea3;@primary-color: #007ea3;@processing-color: #8cb8c6;@success-color: #3f9c35;@warning-color: #eeaf30;@error-color: #96172e;@font-size-base: 14px;.DicomMicroscopyViewer .ol-tooltip{font-size:16px!important}
+.DicomMicroscopyViewer .OpenLayersOverlay{display:block!important;height:100%;pointer-events:none!important;width:100%}.DicomMicroscopyViewer .text-primary-light{color:#ff0;font-size:14px;font-weight:400}.DicomMicroscopyViewer .text-primary-light span{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.DicomMicroscopyViewer .absolute{position:absolute}.DicomMicroscopyViewer .flex{display:-webkit-box;display:-ms-flexbox;display:flex}.DicomMicroscopyViewer .flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.DicomMicroscopyViewer .flex-col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.DicomMicroscopyViewer .pointer-events-none{pointer-events:none}.DicomMicroscopyViewer .left-viewport-scrollbar{left:.5rem}.DicomMicroscopyViewer .right-viewport-scrollbar{right:1.3rem}.DicomMicroscopyViewer .top-viewport{top:.5rem}.DicomMicroscopyViewer .bottom-viewport{bottom:.5rem}.DicomMicroscopyViewer .bottom-viewport.left-viewport{bottom:.5rem;left:calc(.5rem + 250px)}.DicomMicroscopyViewer .right-viewport-scrollbar .flex{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end}.DicomMicroscopyViewer .microscopy-viewport-overlay{background:#00000080;max-width:40%;padding:.5rem 1rem}.DicomMicroscopyViewer .microscopy-viewport-overlay .flex{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.DicomMicroscopyViewer .top-viewport .flex span:not(.font-light){-ms-flex-negative:0;flex-shrink:0}
+.dicom-tag-browser-table{margin-left:auto;margin-right:auto}.dicom-tag-browser-table-wrapper{overflow-x:scroll}.dicom-tag-browser-table tr{border-top:1px solid #ddd;color:#fff;padding-left:10px;padding-right:10px;white-space:nowrap}.stick{overflow:clip;position:sticky}.dicom-tag-browser-content{overflow:hidden;padding-bottom:50px;width:100%}.dicom-tag-browser-instance-range .range{height:20px}.dicom-tag-browser-instance-range{padding:20px 0}.dicom-tag-browser-table td.dicom-tag-browser-table-center{text-align:center}.dicom-tag-browser-table th{color:"#20A5D6";padding-left:10px;padding-right:10px;text-align:center}.dicom-tag-browser-table th.dicom-tag-browser-table-left{text-align:left}

package/dist/569.bundle.d147c0aa0604f8ea2094.js

@@ -0,0 +1,514 @@
+"use strict";
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[569],{
+
+/***/ 33569:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (/* binding */ viewports_OHIFCornerstoneSEGViewport)
+});
+
+// EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
+var prop_types = __webpack_require__(60216);
+var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+// EXTERNAL MODULE: ../../../node_modules/react/index.js
+var react = __webpack_require__(32735);
+// EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
+var es = __webpack_require__(21572);
+// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
+var src = __webpack_require__(48501);
+// EXTERNAL MODULE: ../../ui/src/index.js + 449 modules
+var ui_src = __webpack_require__(43803);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts
+function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
+  const {
+    tools
+  } = customizationService.get('cornerstone.overlayViewportTools') ?? {};
+  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);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts
+
+const RESPONSE = {
+  NO_NEVER: -1,
+  CANCEL: 0,
+  HYDRATE_SEG: 5
+};
+function promptHydrateSEG(_ref) {
+  let {
+    servicesManager,
+    segDisplaySet,
+    viewportIndex
+  } = _ref;
+  const {
+    uiViewportDialogService
+  } = servicesManager.services;
+  return new Promise(async function (resolve, reject) {
+    const promptResult = await _askHydrate(uiViewportDialogService, viewportIndex);
+    if (promptResult === RESPONSE.HYDRATE_SEG) {
+      const isHydrated = await _hydrateSEG({
+        segDisplaySet,
+        viewportIndex,
+        servicesManager
+      });
+      resolve(isHydrated);
+    }
+  });
+}
+function _askHydrate(uiViewportDialogService, viewportIndex) {
+  return new Promise(function (resolve, reject) {
+    const message = 'Do you want to open this Segmentation?';
+    const actions = [{
+      type: 'secondary',
+      text: 'No',
+      value: RESPONSE.CANCEL
+    }, {
+      type: 'primary',
+      text: 'Yes',
+      value: RESPONSE.HYDRATE_SEG
+    }];
+    const onSubmit = result => {
+      uiViewportDialogService.hide();
+      resolve(result);
+    };
+    uiViewportDialogService.show({
+      viewportIndex,
+      type: 'info',
+      message,
+      actions,
+      onSubmit,
+      onOutsideClick: () => {
+        uiViewportDialogService.hide();
+        resolve(RESPONSE.CANCEL);
+      }
+    });
+  });
+}
+/* harmony default export */ const utils_promptHydrateSEG = (promptHydrateSEG);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/viewports/_getStatusComponent.tsx
+
+
+
+function _getStatusComponent(_ref) {
+  let {
+    isHydrated,
+    onStatusClick
+  } = _ref;
+  let ToolTipMessage = null;
+  let StatusIcon = null;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)("Common");
+  const loadStr = t("LOAD");
+  switch (isHydrated) {
+    case true:
+      StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-alert"
+      });
+      ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "This Segmentation is loaded in the segmentation panel");
+      break;
+    case false:
+      StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-untracked"
+      });
+      ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "Click LOAD to load segmentation.");
+  }
+  const StatusArea = () => /*#__PURE__*/react.createElement("div", {
+    className: "flex h-6 leading-6 cursor-default text-sm text-white"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "min-w-[45px] flex items-center p-1 rounded-l-xl rounded-r bg-customgray-100"
+  }, /*#__PURE__*/react.createElement(StatusIcon, null), /*#__PURE__*/react.createElement("span", {
+    className: "ml-1"
+  }, "SEG")), !isHydrated && /*#__PURE__*/react.createElement("div", {
+    className: "ml-1 px-1.5 rounded cursor-pointer hover:text-black bg-primary-main hover:bg-primary-light"
+    // Using onMouseUp here because onClick is not working when the viewport is not active and is styled with pointer-events:none
+    ,
+    onMouseUp: onStatusClick
+  }, loadStr));
+  return /*#__PURE__*/react.createElement(react.Fragment, null, ToolTipMessage && /*#__PURE__*/react.createElement(ui_src/* Tooltip */.u, {
+    content: /*#__PURE__*/react.createElement(ToolTipMessage, null),
+    position: "bottom-left"
+  }, /*#__PURE__*/react.createElement(StatusArea, null)), !ToolTipMessage && /*#__PURE__*/react.createElement(StatusArea, null));
+}
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.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); }
+
+
+
+
+
+
+
+
+
+const {
+  formatDate
+} = src.utils;
+const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';
+function OHIFCornerstoneSEGViewport(props) {
+  const {
+    children,
+    displaySets,
+    viewportOptions,
+    viewportIndex,
+    viewportLabel,
+    servicesManager,
+    extensionManager
+  } = props;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('SEGViewport');
+  const {
+    displaySetService,
+    toolGroupService,
+    segmentationService,
+    uiNotificationService,
+    customizationService
+  } = servicesManager.services;
+  const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportIndex}`;
+
+  // SEG viewport will always have a single display set
+  if (displaySets.length > 1) {
+    throw new Error('SEG viewport should only have a single display set');
+  }
+  const segDisplaySet = displaySets[0];
+  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
+  // segmentation panel, and SEG is also rendered on any viewport that is in the
+  // same frameOfReferenceUID as the referencedSeriesUID of the SEG. However,
+  // loading basically means SEG loading over network and bit unpacking of the
+  // SEG data.
+  const [isHydrated, setIsHydrated] = (0,react.useState)(segDisplaySet.isHydrated);
+  const [segIsLoading, setSegIsLoading] = (0,react.useState)(!segDisplaySet.isLoaded);
+  const [element, setElement] = (0,react.useState)(null);
+  const [processingProgress, setProcessingProgress] = (0,react.useState)({
+    percentComplete: null,
+    totalSegments: null
+  });
+
+  // refs
+  const referencedDisplaySetRef = (0,react.useRef)(null);
+  const {
+    viewports,
+    activeViewportIndex
+  } = viewportGrid;
+  const referencedDisplaySet = segDisplaySet.getReferenceDisplaySet();
+  const referencedDisplaySetMetadata = _getReferencedDisplaySetMetadata(referencedDisplaySet);
+  referencedDisplaySetRef.current = {
+    displaySet: referencedDisplaySet,
+    metadata: referencedDisplaySetMetadata
+  };
+  /**
+   * OnElementEnabled callback which is called after the cornerstoneExtension
+   * has enabled the element. Note: we delegate all the image rendering to
+   * cornerstoneExtension, so we don't need to do anything here regarding
+   * the image rendering, element enabling etc.
+   */
+  const onElementEnabled = evt => {
+    setElement(evt.detail.element);
+  };
+  const onElementDisabled = () => {
+    setElement(null);
+  };
+  const getCornerstoneViewport = (0,react.useCallback)(() => {
+    const {
+      component: Component
+    } = extensionManager.getModuleEntry('@ohif/extension-cornerstone.viewportModule.cornerstone');
+    const {
+      displaySet: referencedDisplaySet
+    } = referencedDisplaySetRef.current;
+
+    // Todo: jump to the center of the first segment
+    return /*#__PURE__*/react.createElement(Component, _extends({}, props, {
+      displaySets: [referencedDisplaySet, segDisplaySet],
+      viewportOptions: {
+        viewportType: 'volume',
+        toolGroupId: toolGroupId,
+        orientation: viewportOptions.orientation,
+        viewportId: viewportOptions.viewportId
+      },
+      onElementEnabled: onElementEnabled,
+      onElementDisabled: onElementDisabled
+      // initialImageIndex={initialImageIndex}
+    }));
+  }, [viewportIndex, segDisplaySet, toolGroupId]);
+  const onSegmentChange = (0,react.useCallback)(direction => {
+    direction = direction === 'left' ? -1 : 1;
+    const segmentationId = segDisplaySet.displaySetInstanceUID;
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const {
+      segments
+    } = segmentation;
+    const numberOfSegments = Object.keys(segments).length;
+    let newSelectedSegmentIndex = selectedSegment + direction;
+
+    // Segment 0 is always background
+
+    if (newSelectedSegmentIndex > numberOfSegments - 1) {
+      newSelectedSegmentIndex = 1;
+    } else if (newSelectedSegmentIndex === 0) {
+      newSelectedSegmentIndex = numberOfSegments - 1;
+    }
+    segmentationService.jumpToSegmentCenter(segmentationId, newSelectedSegmentIndex, toolGroupId);
+    setSelectedSegment(newSelectedSegmentIndex);
+  }, [selectedSegment]);
+  (0,react.useEffect)(() => {
+    if (segIsLoading) {
+      return;
+    }
+    utils_promptHydrateSEG({
+      servicesManager,
+      viewportIndex,
+      segDisplaySet
+    }).then(isHydrated => {
+      if (isHydrated) {
+        setIsHydrated(true);
+      }
+    });
+  }, [servicesManager, viewportIndex, segDisplaySet, segIsLoading]);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = segmentationService.subscribe(segmentationService.EVENTS.SEGMENTATION_LOADING_COMPLETE, evt => {
+      if (evt.segDisplaySet.displaySetInstanceUID === segDisplaySet.displaySetInstanceUID) {
+        setSegIsLoading(false);
+      }
+      if (evt.overlappingSegments) {
+        uiNotificationService.show({
+          title: 'Overlapping Segments',
+          message: 'Overlapping segments detected which is not currently supported',
+          type: 'warning'
+        });
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [segDisplaySet]);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = segmentationService.subscribe(segmentationService.EVENTS.SEGMENT_LOADING_COMPLETE, _ref => {
+      let {
+        percentComplete,
+        numSegments
+      } = _ref;
+      setProcessingProgress({
+        percentComplete,
+        totalSegments: numSegments
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [segDisplaySet]);
+
+  /**
+   Cleanup the SEG viewport when the viewport is destroyed
+   */
+  (0,react.useEffect)(() => {
+    const onDisplaySetsRemovedSubscription = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_REMOVED, _ref2 => {
+      let {
+        displaySetInstanceUIDs
+      } = _ref2;
+      const activeViewport = viewports[activeViewportIndex];
+      if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
+        viewportGridService.setDisplaySetsForViewport({
+          viewportIndex: activeViewportIndex,
+          displaySetInstanceUIDs: []
+        });
+      }
+    });
+    return () => {
+      onDisplaySetsRemovedSubscription.unsubscribe();
+    };
+  }, []);
+  (0,react.useEffect)(() => {
+    let toolGroup = toolGroupService.getToolGroup(toolGroupId);
+    if (toolGroup) {
+      return;
+    }
+
+    // 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);
+
+      // Only destroy the viewport specific implementation
+      toolGroupService.destroyToolGroup(toolGroupId);
+    };
+  }, []);
+  (0,react.useEffect)(() => {
+    setIsHydrated(segDisplaySet.isHydrated);
+    return () => {
+      // remove the segmentation representations if seg displayset changed
+      segmentationService.removeSegmentationRepresentationFromToolGroup(toolGroupId);
+      referencedDisplaySetRef.current = null;
+    };
+  }, [segDisplaySet]);
+
+  // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  let childrenWithProps = null;
+  if (!referencedDisplaySetRef.current || referencedDisplaySet.displaySetInstanceUID !== referencedDisplaySetRef.current.displaySet.displaySetInstanceUID) {
+    return null;
+  }
+  if (children && children.length) {
+    childrenWithProps = children.map((child, index) => {
+      return child && /*#__PURE__*/react.cloneElement(child, {
+        viewportIndex,
+        key: index
+      });
+    });
+  }
+  const {
+    PatientID,
+    PatientName,
+    PatientSex,
+    PatientAge,
+    SliceThickness,
+    ManufacturerModelName,
+    StudyDate,
+    SeriesDescription,
+    SpacingBetweenSlices
+  } = referencedDisplaySetRef.current.metadata;
+  const onStatusClick = async () => {
+    const isHydrated = await _hydrateSEG({
+      segDisplaySet,
+      viewportIndex,
+      servicesManager
+    });
+    setIsHydrated(isHydrated);
+  };
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* ViewportActionBar */.uY, {
+    onDoubleClick: evt => {
+      evt.stopPropagation();
+      evt.preventDefault();
+    },
+    onArrowsClick: onSegmentChange,
+    getStatusComponent: () => {
+      return _getStatusComponent({
+        isHydrated,
+        onStatusClick
+      });
+    },
+    studyData: {
+      label: viewportLabel,
+      useAltStyling: true,
+      studyDate: formatDate(StudyDate),
+      seriesDescription: `SEG Viewport ${SeriesDescription}`,
+      patientInformation: {
+        patientName: PatientName ? src["default"].utils.formatPN(PatientName.Alphabetic) : '',
+        patientSex: PatientSex || '',
+        patientAge: PatientAge || '',
+        MRN: PatientID || '',
+        thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
+        spacing: SpacingBetweenSlices !== undefined ? `${SpacingBetweenSlices.toFixed(2)}mm` : '',
+        scanner: ManufacturerModelName || ''
+      }
+    }
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "relative flex flex-row w-full h-full overflow-hidden"
+  }, segIsLoading && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorTotalPercent */.bk, {
+    className: "w-full h-full",
+    totalNumbers: processingProgress.totalSegments,
+    percentComplete: processingProgress.percentComplete,
+    loadingText: "Loading SEG..."
+  }), getCornerstoneViewport(), childrenWithProps));
+}
+OHIFCornerstoneSEGViewport.propTypes = {
+  displaySets: prop_types_default().arrayOf((prop_types_default()).object),
+  viewportIndex: (prop_types_default()).number.isRequired,
+  dataSource: (prop_types_default()).object,
+  children: (prop_types_default()).node,
+  customProps: (prop_types_default()).object
+};
+OHIFCornerstoneSEGViewport.defaultProps = {
+  customProps: {}
+};
+function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
+  const image0 = referencedDisplaySet.images[0];
+  const referencedDisplaySetMetadata = {
+    PatientID: image0.PatientID,
+    PatientName: image0.PatientName,
+    PatientSex: image0.PatientSex,
+    PatientAge: image0.PatientAge,
+    SliceThickness: image0.SliceThickness,
+    StudyDate: image0.StudyDate,
+    SeriesDescription: image0.SeriesDescription,
+    SeriesInstanceUID: image0.SeriesInstanceUID,
+    SeriesNumber: image0.SeriesNumber,
+    ManufacturerModelName: image0.ManufacturerModelName,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices
+  };
+  return referencedDisplaySetMetadata;
+}
+/* harmony default export */ const viewports_OHIFCornerstoneSEGViewport = (OHIFCornerstoneSEGViewport);
+
+/***/ })
+
+}]);