@ohif/app 3.8.0-beta.65 → 3.8.0-beta.67

package/dist/{121.bundle.fda405f29003c308ce09.js → 121.bundle.d8b3c6b530d6151f251d.js}

@@ -17,10 +17,8 @@ var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
-var src = __webpack_require__(78198);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var ui_src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../ui/src/index.js + 519 modules
+var src = __webpack_require__(3962);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
 
 const RESPONSE = {
@@ -59,11 +57,11 @@ function _askHydrate(uiViewportDialogService, viewportId) {
   return new Promise(function (resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [{
-      type: ui_src/* ButtonEnums.type */.Ny.NW.secondary,
+      type: src/* ButtonEnums.type */.Ny.NW.secondary,
       text: 'No',
       value: RESPONSE.CANCEL
     }, {
-      type: ui_src/* ButtonEnums.type */.Ny.NW.primary,
+      type: src/* ButtonEnums.type */.Ny.NW.primary,
       text: 'Yes',
       value: RESPONSE.HYDRATE_SEG
     }];
@@ -97,37 +95,39 @@ function _getStatusComponent({
 }) {
   let ToolTipMessage = null;
   let StatusIcon = null;
-  const {
-    t
-  } = (0,es/* useTranslation */.Bd)('Common');
-  const loadStr = t('LOAD');
   switch (isHydrated) {
     case true:
-      StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      StatusIcon = () => /*#__PURE__*/react.createElement(src/* Icon */.In, {
         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 */.In, {
+      StatusIcon = () => /*#__PURE__*/react.createElement(src/* Icon */.In, {
         className: "text-aqua-pale",
         name: "status-untracked"
       });
       ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "Click LOAD to load RTSTRUCT.");
   }
-  const StatusArea = () => /*#__PURE__*/react.createElement("div", {
-    className: "flex h-6 cursor-default text-sm leading-6 text-white"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1"
-  }, /*#__PURE__*/react.createElement(StatusIcon, null), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1"
-  }, "RTSTRUCT")), !isHydrated && /*#__PURE__*/react.createElement("div", {
-    className: "bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
-    // 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 */.m_, {
+  const StatusArea = () => {
+    const {
+      t
+    } = (0,es/* useTranslation */.Bd)('Common');
+    const loadStr = t('LOAD');
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex h-6 cursor-default text-sm leading-6 text-white"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1"
+    }, /*#__PURE__*/react.createElement(StatusIcon, null), /*#__PURE__*/react.createElement("span", {
+      className: "ml-1"
+    }, "RTSTRUCT")), !isHydrated && /*#__PURE__*/react.createElement("div", {
+      className: "bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+      // 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(src/* Tooltip */.m_, {
     content: /*#__PURE__*/react.createElement(ToolTipMessage, null),
     position: "bottom-left"
   }, /*#__PURE__*/react.createElement(StatusArea, null)), !ToolTipMessage && /*#__PURE__*/react.createElement(StatusArea, null));
@@ -148,17 +148,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-
-const {
-  formatDate
-} = src.utils;
 const RT_TOOLGROUP_BASE_NAME = 'RTToolGroup';
 function OHIFCornerstoneRTViewport(props) {
   const {
     children,
     displaySets,
     viewportOptions,
-    viewportLabel,
     servicesManager,
     extensionManager,
     commandsManager
@@ -168,7 +163,8 @@ function OHIFCornerstoneRTViewport(props) {
     toolGroupService,
     segmentationService,
     uiNotificationService,
-    customizationService
+    customizationService,
+    viewportActionCornersService
   } = servicesManager.services;
   const viewportId = viewportOptions.viewportId;
   const toolGroupId = `${RT_TOOLGROUP_BASE_NAME}-${viewportId}`;
@@ -178,7 +174,7 @@ function OHIFCornerstoneRTViewport(props) {
     throw new Error('RT viewport should only have a single display set');
   }
   const rtDisplaySet = displaySets[0];
-  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
+  const [viewportGrid, viewportGridService] = (0,src/* useViewportGrid */.ih)();
 
   // States
   const [isToolGroupCreated, setToolGroupCreated] = (0,react.useState)(false);
@@ -261,7 +257,6 @@ function OHIFCornerstoneRTViewport(props) {
     }));
   }, [viewportId, rtDisplaySet, toolGroupId]);
   const onSegmentChange = (0,react.useCallback)(direction => {
-    direction = direction === 'left' ? -1 : 1;
     const segmentationId = rtDisplaySet.displaySetInstanceUID;
     const segmentation = segmentationService.getSegmentation(segmentationId);
     const {
@@ -387,19 +382,7 @@ function OHIFCornerstoneRTViewport(props) {
       });
     });
   }
-  const {
-    PatientID,
-    PatientName,
-    PatientSex,
-    PatientAge,
-    SliceThickness,
-    ManufacturerModelName,
-    StudyDate,
-    SeriesDescription,
-    SpacingBetweenSlices,
-    SeriesNumber
-  } = referencedDisplaySetRef.current.metadata;
-  const onStatusClick = async () => {
+  const onStatusClick = (0,react.useCallback)(async () => {
     // Before hydrating a RT 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 RT. This is
@@ -412,38 +395,32 @@ function OHIFCornerstoneRTViewport(props) {
       viewportId
     });
     setIsHydrated(isHydrated);
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* ViewportActionBar */.cS, {
-    onDoubleClick: evt => {
-      evt.stopPropagation();
-      evt.preventDefault();
-    },
-    onArrowsClick: onSegmentChange,
-    getStatusComponent: () => {
-      return _getStatusComponent({
+  }, [hydrateRTDisplaySet, rtDisplaySet, storePresentationState, viewportId]);
+  (0,react.useEffect)(() => {
+    viewportActionCornersService.setComponents([{
+      viewportId,
+      id: 'viewportStatusComponent',
+      component: _getStatusComponent({
         isHydrated,
         onStatusClick
-      });
-    },
-    studyData: {
-      label: viewportLabel,
-      useAltStyling: true,
-      studyDate: formatDate(StudyDate),
-      currentSeries: SeriesNumber,
-      seriesDescription: `RT Viewport ${SeriesDescription}`,
-      patientInformation: {
-        patientName: PatientName ? src/* default.utils */.Ay.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", {
+      }),
+      indexPriority: -100,
+      location: viewportActionCornersService.LOCATIONS.topLeft
+    }, {
+      viewportId,
+      id: 'viewportActionArrowsComponent',
+      component: /*#__PURE__*/react.createElement(src/* ViewportActionArrows */.$I, {
+        key: "actionArrows",
+        onArrowsClick: onSegmentChange,
+        className: viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
+      }),
+      indexPriority: 0,
+      location: viewportActionCornersService.LOCATIONS.topRight
+    }]);
+  }, [activeViewportId, isHydrated, onSegmentChange, onStatusClick, viewportActionCornersService, viewportId]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "relative flex h-full w-full flex-row overflow-hidden"
-  }, rtIsLoading && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorTotalPercent */.pT, {
+  }, rtIsLoading && /*#__PURE__*/react.createElement(src/* LoadingIndicatorTotalPercent */.pT, {
     className: "h-full w-full",
     totalNumbers: processingProgress.totalSegments,
     percentComplete: processingProgress.percentComplete,

package/dist/{155.bundle.a57744809d0f46030ee0.js → 155.bundle.a2b8640977007e407d30.js}

@@ -20,8 +20,8 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var es = __webpack_require__(57593);
 // EXTERNAL MODULE: ../../../node_modules/@xstate/react/es/index.js + 8 modules
 var react_es = __webpack_require__(6835);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../ui/src/index.js + 519 modules
+var src = __webpack_require__(3962);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js
 
 const RESPONSE = {
@@ -1102,10 +1102,10 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var dist = __webpack_require__(37396);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(80619);
-// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
-var src = __webpack_require__(78198);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var ui_src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
+var src = __webpack_require__(85073);
+// EXTERNAL MODULE: ../../ui/src/index.js + 519 modules
+var ui_src = __webpack_require__(3962);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx
 
 
@@ -1429,14 +1429,6 @@ viewportGridService, dataSource, displaySetService, uiDialogService, uiNotificat
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
     const componentType = _getComponentType(ds);
     const numPanes = viewportGridService.getNumViewportPanes();
-    const viewportIdentificator = [];
-    if (numPanes !== 1) {
-      viewports.forEach(viewportData => {
-        if (viewportData?.displaySetInstanceUIDs?.includes(ds.displaySetInstanceUID)) {
-          viewportIdentificator.push(viewportData.viewportLabel);
-        }
-      });
-    }
     const array = componentType === 'thumbnailTracked' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
     const {
       displaySetInstanceUID
@@ -1459,8 +1451,7 @@ viewportGridService, dataSource, displaySetService, uiDialogService, uiNotificat
         // .. Any other data to pass
       },
       isTracked: trackedSeriesInstanceUIDs.includes(ds.SeriesInstanceUID),
-      isHydratedForDerivedDisplaySet: ds.isHydrated,
-      viewportIdentificator
+      isHydratedForDerivedDisplaySet: ds.isHydrated
     };
     if (componentType === 'thumbnailNoImage') {
       if (dataSource.reject && dataSource.reject.series) {

package/dist/{188.bundle.c448aed48915741e9f97.js → 188.bundle.b6a7e833fdf99cee3ee6.js}

@@ -22,8 +22,8 @@ const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(41766);
-// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
-var src = __webpack_require__(78198);
+// EXTERNAL MODULE: ../../core/src/index.ts + 68 modules
+var src = __webpack_require__(85073);
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
 var dcmjs_es = __webpack_require__(31426);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-rt/src/loadRTStruct.js

package/dist/{191.bundle.4850ab82949bb6f0eb73.js → 191.bundle.7d89c921abefd1140d50.js}

@@ -9784,6 +9784,26 @@ class TrackballRotateTool extends base/* BaseTool */.oS {
         },
     }) {
         super(toolProps, defaultToolProps);
+        this.preMouseDownCallback = (evt) => {
+            const eventDetail = evt.detail;
+            const { element } = eventDetail;
+            const enabledElement = (0,esm.getEnabledElement)(element);
+            const { viewport } = enabledElement;
+            const actorEntry = viewport.getDefaultActor();
+            const actor = actorEntry.actor;
+            const mapper = actor.getMapper();
+            const originalSampleDistance = mapper.getSampleDistance();
+            mapper.setSampleDistance(originalSampleDistance * 2);
+            if (this.cleanUp !== null) {
+                element.removeEventListener('mouseup', this.cleanUp);
+            }
+            this.cleanUp = () => {
+                mapper.setSampleDistance(originalSampleDistance);
+                viewport.render();
+            };
+            element.addEventListener('mouseup', this.cleanUp, { once: true });
+            return true;
+        };
         this.rotateCamera = (viewport, centerWorld, axis, angle) => {
             const vtkCamera = viewport.getVtkActiveCamera();
             const viewUp = vtkCamera.getViewUp();
@@ -24581,7 +24601,6 @@ function getToolStateByViewportId(viewportId) {
 const { ViewportStatus } = esm.Enums;
 const { triggerEvent } = esm.utilities;
 const debounced = true;
-const loop = true;
 const dynamicVolumesPlayingMap = new Map();
 function playClip(element, playClipOptions) {
     let playClipTimeouts;
@@ -24642,7 +24661,7 @@ function playClip(element, playClipOptions) {
         const { numScrollSteps, currentStepIndex } = playClipContext;
         let newStepIndex = currentStepIndex + (playClipData.reverse ? -1 : 1);
         const newStepIndexOutOfRange = newStepIndex < 0 || newStepIndex >= numScrollSteps;
-        if (!loop && newStepIndexOutOfRange) {
+        if (!playClipData.loop && newStepIndexOutOfRange) {
             _stopClip(element, {
                 stopDynamicCine: !isDynamicCinePlaying,
                 viewportId: viewport.id,
@@ -28270,6 +28289,7 @@ __webpack_require__.d(__webpack_exports__, {
   floodFill: () => (/* reexport */ floodFill/* default */.A),
   getBrushSizeForToolGroup: () => (/* reexport */ getBrushSizeForToolGroup),
   getBrushThresholdForToolGroup: () => (/* reexport */ getBrushThresholdForToolGroup),
+  getBrushToolInstances: () => (/* reexport */ segmentation_utilities/* getBrushToolInstances */.n7),
   getDefaultRepresentationConfig: () => (/* reexport */ getDefaultRepresentationConfig),
   getHoveredContourSegmentationAnnotation: () => (/* reexport */ getHoveredContourSegmentationAnnotation),
   getSegmentAtLabelmapBorder: () => (/* reexport */ getSegmentAtLabelmapBorder),
@@ -28522,7 +28542,7 @@ function setBrushSizeForToolGroup(toolGroupId, brushSize, toolName) {
     if (toolGroup === undefined) {
         return;
     }
-    const brushBasedToolInstances = (0,segmentation_utilities/* default */.Ay)(toolGroupId, toolName);
+    const brushBasedToolInstances = (0,segmentation_utilities/* getBrushToolInstances */.n7)(toolGroupId, toolName);
     brushBasedToolInstances.forEach((tool) => {
         tool.configuration.brushSize = brushSize;
         tool.invalidateBrushCursor();
@@ -28546,7 +28566,7 @@ function getBrushSizeForToolGroup(toolGroupId, toolName) {
     if (!Object.keys(toolInstances).length) {
         return;
     }
-    const brushBasedToolInstances = (0,segmentation_utilities/* default */.Ay)(toolGroupId, toolName);
+    const brushBasedToolInstances = (0,segmentation_utilities/* getBrushToolInstances */.n7)(toolGroupId, toolName);
     const brushToolInstance = brushBasedToolInstances[0];
     if (!brushToolInstance) {
         return;
@@ -28564,7 +28584,7 @@ function setBrushThresholdForToolGroup(toolGroupId, threshold, otherArgs = { isD
     if (toolGroup === undefined) {
         return;
     }
-    const brushBasedToolInstances = (0,segmentation_utilities/* default */.Ay)(toolGroupId);
+    const brushBasedToolInstances = (0,segmentation_utilities/* getBrushToolInstances */.n7)(toolGroupId);
     const configuration = {
         ...otherArgs,
         ...(threshold !== undefined && { threshold }),
@@ -28593,7 +28613,7 @@ function getBrushThresholdForToolGroup(toolGroupId) {
     if (!Object.keys(toolInstances).length) {
         return;
     }
-    const brushBasedToolInstances = (0,segmentation_utilities/* default */.Ay)(toolGroupId);
+    const brushBasedToolInstances = (0,segmentation_utilities/* getBrushToolInstances */.n7)(toolGroupId);
     const brushToolInstance = brushBasedToolInstances[0];
     if (!brushToolInstance) {
         return;
@@ -28992,7 +29012,7 @@ function invalidateBrushCursor(toolGroupId) {
     if (toolGroup === undefined) {
         return;
     }
-    const brushBasedToolInstances = (0,segmentation_utilities/* default */.Ay)(toolGroupId);
+    const brushBasedToolInstances = (0,segmentation_utilities/* getBrushToolInstances */.n7)(toolGroupId);
     brushBasedToolInstances.forEach((tool) => {
         tool.invalidateBrushCursor();
     });
@@ -29208,6 +29228,7 @@ function getHoveredContourSegmentationAnnotation(segmentationId) {
 
 
 
+
 
 
 /***/ }),
@@ -29340,8 +29361,8 @@ function triggerSegmentationRender(toolGroupId) {
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Ay: () => (/* binding */ getBrushToolInstances),
 /* harmony export */   Q5: () => (/* binding */ getVoxelOverlap),
+/* harmony export */   n7: () => (/* binding */ getBrushToolInstances),
 /* harmony export */   zf: () => (/* binding */ processVolumes)
 /* harmony export */ });
 /* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(50719);

package/dist/{295.bundle.57700cd41fd87e1521b4.js → 295.bundle.075944a082306d2e432f.js}

@@ -19,10 +19,8 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(80619);
-// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
-var src = __webpack_require__(78198);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var ui_src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../ui/src/index.js + 519 modules
+var src = __webpack_require__(3962);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const {
@@ -66,11 +64,11 @@ function _askHydrate(uiViewportDialogService, viewportId) {
   return new Promise(function (resolve, reject) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [{
-      type: ui_src/* ButtonEnums.type */.Ny.NW.secondary,
+      type: src/* ButtonEnums.type */.Ny.NW.secondary,
       text: 'No',
       value: RESPONSE.CANCEL
     }, {
-      type: ui_src/* ButtonEnums.type */.Ny.NW.primary,
+      type: src/* ButtonEnums.type */.Ny.NW.primary,
       text: 'Yes',
       value: RESPONSE.HYDRATE_SEG
     }];
@@ -102,37 +100,39 @@ function _getStatusComponent({
 }) {
   let ToolTipMessage = null;
   let StatusIcon = null;
-  const {
-    t
-  } = (0,es/* useTranslation */.Bd)('Common');
-  const loadStr = t('LOAD');
   switch (isHydrated) {
     case true:
-      StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      StatusIcon = () => /*#__PURE__*/react.createElement(src/* Icon */.In, {
         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 */.In, {
+      StatusIcon = () => /*#__PURE__*/react.createElement(src/* Icon */.In, {
         className: "text-aqua-pale",
         name: "status-untracked"
       });
       ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "Click LOAD to load segmentation.");
   }
-  const StatusArea = () => /*#__PURE__*/react.createElement("div", {
-    className: "flex h-6 cursor-default text-sm leading-6 text-white"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1"
-  }, /*#__PURE__*/react.createElement(StatusIcon, null), /*#__PURE__*/react.createElement("span", {
-    className: "ml-1"
-  }, "SEG")), !isHydrated && /*#__PURE__*/react.createElement("div", {
-    className: "bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
-    // 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 */.m_, {
+  const StatusArea = () => {
+    const {
+      t
+    } = (0,es/* useTranslation */.Bd)('Common');
+    const loadStr = t('LOAD');
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex h-6 cursor-default text-sm leading-6 text-white"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "bg-customgray-100 flex min-w-[45px] items-center rounded-l-xl rounded-r p-1"
+    }, /*#__PURE__*/react.createElement(StatusIcon, null), /*#__PURE__*/react.createElement("span", {
+      className: "ml-1"
+    }, "SEG")), !isHydrated && /*#__PURE__*/react.createElement("div", {
+      className: "bg-primary-main hover:bg-primary-light ml-1 cursor-pointer rounded px-1.5 hover:text-black"
+      // 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(src/* Tooltip */.m_, {
     content: /*#__PURE__*/react.createElement(ToolTipMessage, null),
     position: "bottom-left"
   }, /*#__PURE__*/react.createElement(StatusArea, null)), !ToolTipMessage && /*#__PURE__*/react.createElement(StatusArea, null));
@@ -146,17 +146,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
-
-const {
-  formatDate
-} = src.utils;
 const SEG_TOOLGROUP_BASE_NAME = 'SEGToolGroup';
 function OHIFCornerstoneSEGViewport(props) {
   const {
     children,
     displaySets,
     viewportOptions,
-    viewportLabel,
     servicesManager,
     extensionManager,
     commandsManager
@@ -170,7 +165,8 @@ function OHIFCornerstoneSEGViewport(props) {
     toolGroupService,
     segmentationService,
     uiNotificationService,
-    customizationService
+    customizationService,
+    viewportActionCornersService
   } = servicesManager.services;
   const toolGroupId = `${SEG_TOOLGROUP_BASE_NAME}-${viewportId}`;
 
@@ -179,7 +175,7 @@ function OHIFCornerstoneSEGViewport(props) {
     throw new Error('SEG viewport should only have a single display set');
   }
   const segDisplaySet = displaySets[0];
-  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
+  const [viewportGrid, viewportGridService] = (0,src/* useViewportGrid */.ih)();
 
   // States
   const [selectedSegment, setSelectedSegment] = (0,react.useState)(1);
@@ -252,7 +248,6 @@ function OHIFCornerstoneSEGViewport(props) {
     }));
   }, [viewportId, segDisplaySet, toolGroupId]);
   const onSegmentChange = (0,react.useCallback)(direction => {
-    direction = direction === 'left' ? -1 : 1;
     const segmentationId = segDisplaySet.displaySetInstanceUID;
     const segmentation = segmentationService.getSegmentation(segmentationId);
     const {
@@ -360,6 +355,51 @@ function OHIFCornerstoneSEGViewport(props) {
       referencedDisplaySetRef.current = null;
     };
   }, [segDisplaySet]);
+  const hydrateSEGDisplaySet = (0,react.useCallback)(({
+    segDisplaySet,
+    viewportId
+  }) => {
+    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
+      displaySets: [segDisplaySet],
+      viewportId
+    });
+  }, [commandsManager]);
+  const onStatusClick = (0,react.useCallback)(async () => {
+    // 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 hydrateSEGDisplaySet({
+      segDisplaySet,
+      viewportId
+    });
+    setIsHydrated(isHydrated);
+  }, [hydrateSEGDisplaySet, segDisplaySet, storePresentationState, viewportId]);
+  (0,react.useEffect)(() => {
+    viewportActionCornersService.setComponents([{
+      viewportId,
+      id: 'viewportStatusComponent',
+      component: _getStatusComponent({
+        isHydrated,
+        onStatusClick
+      }),
+      indexPriority: -100,
+      location: viewportActionCornersService.LOCATIONS.topLeft
+    }, {
+      viewportId,
+      id: 'viewportActionArrowsComponent',
+      component: /*#__PURE__*/react.createElement(src/* ViewportActionArrows */.$I, {
+        key: "actionArrows",
+        onArrowsClick: onSegmentChange,
+        className: viewportId === activeViewportId ? 'visible' : 'invisible group-hover:visible'
+      }),
+      indexPriority: 0,
+      location: viewportActionCornersService.LOCATIONS.topRight
+    }]);
+  }, [activeViewportId, isHydrated, onSegmentChange, onStatusClick, viewportActionCornersService, viewportId]);
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   let childrenWithProps = null;
@@ -385,60 +425,9 @@ function OHIFCornerstoneSEGViewport(props) {
     SeriesDescription,
     SpacingBetweenSlices
   } = referencedDisplaySetRef.current.metadata;
-  const hydrateSEGDisplaySet = ({
-    segDisplaySet,
-    viewportId
-  }) => {
-    commandsManager.runCommand('loadSegmentationDisplaySetsForViewport', {
-      displaySets: [segDisplaySet],
-      viewportId
-    });
-  };
-  const onStatusClick = async () => {
-    // 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 hydrateSEGDisplaySet({
-      segDisplaySet,
-      viewportId
-    });
-    setIsHydrated(isHydrated);
-  };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* ViewportActionBar */.cS, {
-    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 */.Ay.utils.formatPN(PatientName.Alphabetic) : '',
-        patientSex: PatientSex || '',
-        patientAge: PatientAge || '',
-        MRN: PatientID || '',
-        thickness: SliceThickness ? src.utils.roundNumber(SliceThickness, 2) : '',
-        thicknessUnits: SliceThickness !== undefined ? 'mm' : '',
-        spacing: SpacingBetweenSlices !== undefined ? src.utils.roundNumber(SpacingBetweenSlices, 2) : '',
-        scanner: ManufacturerModelName || ''
-      }
-    }
-  }), /*#__PURE__*/react.createElement("div", {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "relative flex h-full w-full flex-row overflow-hidden"
-  }, segIsLoading && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorTotalPercent */.pT, {
+  }, segIsLoading && /*#__PURE__*/react.createElement(src/* LoadingIndicatorTotalPercent */.pT, {
     className: "h-full w-full",
     totalNumbers: processingProgress.totalSegments,
     percentComplete: processingProgress.percentComplete,