@ohif/app 3.8.0-beta.66 → 3.8.0-beta.68

package/dist/{121.bundle.fda405f29003c308ce09.js → 121.bundle.a8fc45e3d88d0a8b82a8.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 + 521 modules
+var src = __webpack_require__(59134);
 ;// 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.e9fdaa40010cc784f389.js → 155.bundle.7b87a2dbfaf2c36326bd.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 + 521 modules
+var src = __webpack_require__(59134);
 ;// 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 + 521 modules
+var ui_src = __webpack_require__(59134);
 ;// 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.67df9790c453b185fe1d.js → 188.bundle.022af4c804b855ca2f60.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/{638.bundle.4d7da6fe507df0000718.js → 2.bundle.962c8d8b57c4f94324b4.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[638,481],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[2,481],{
 
-/***/ 92169:
+/***/ 14349:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -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/@cornerstonejs/core/dist/esm/index.js + 383 modules
 var esm = __webpack_require__(50719);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
@@ -315,13 +315,19 @@ function getHangingProtocolModule() {
 
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(15575);
-// EXTERNAL MODULE: ../../ui/src/index.js + 497 modules
-var ui_src = __webpack_require__(58046);
+// EXTERNAL MODULE: ../../ui/src/index.js + 521 modules
+var ui_src = __webpack_require__(59134);
 // EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 78 modules
 var default_src = __webpack_require__(54090);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/types/segmentation.tsx
+let SegmentationPanelMode = /*#__PURE__*/function (SegmentationPanelMode) {
+  SegmentationPanelMode["Expanded"] = "expanded";
+  SegmentationPanelMode["Dropdown"] = "dropdown";
+  return SegmentationPanelMode;
+}({});
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
 
 
@@ -489,6 +495,11 @@ var dist_es = __webpack_require__(80619);
 
 
 
+
+const components = {
+  [SegmentationPanelMode.Expanded]: ui_src/* SegmentationGroupTableExpanded */.fO,
+  [SegmentationPanelMode.Dropdown]: ui_src/* SegmentationGroupTable */.QQ
+};
 function PanelSegmentation({
   servicesManager,
   commandsManager,
@@ -623,6 +634,15 @@ function PanelSegmentation({
   };
   const onToggleSegmentationVisibility = segmentationId => {
     segmentationService.toggleSegmentationVisibility(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const isVisible = segmentation.isVisible;
+    const segments = segmentation.segments;
+    const toolGroupIds = getToolGroupIds(segmentationId);
+    toolGroupIds.forEach(toolGroupId => {
+      segments.forEach((segment, segmentIndex) => {
+        segmentationService.setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId);
+      });
+    });
   };
   const _setSegmentationConfiguration = (0,react.useCallback)((segmentationId, key, value) => {
     segmentationService.setConfiguration({
@@ -663,9 +683,8 @@ function PanelSegmentation({
       segmentationId
     });
   };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto"
-  }, /*#__PURE__*/react.createElement(ui_src/* SegmentationGroupTable */.QQ, {
+  const SegmentationGroupTableComponent = components[configuration?.segmentationPanelMode];
+  return /*#__PURE__*/react.createElement(SegmentationGroupTableComponent, {
     title: t('Segmentations'),
     segmentations: segmentations,
     disableEditing: configuration.disableEditing,
@@ -696,7 +715,7 @@ function PanelSegmentation({
     setOutlineWidthActive: value => _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value),
     setFillAlpha: value => _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value),
     setFillAlphaInactive: value => _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
-  })));
+  });
 }
 PanelSegmentation.propTypes = {
   commandsManager: prop_types_default().shape({
@@ -719,6 +738,7 @@ PanelSegmentation.propTypes = {
 
 
 
+
 const getPanelModule = ({
   commandsManager,
   servicesManager,
@@ -732,17 +752,21 @@ const getPanelModule = ({
   const wrappedPanelSegmentation = configuration => {
     const [appConfig] = (0,state/* useAppConfig */.r)();
     const disableEditingForMode = customizationService.get('segmentation.disableEditing');
+    const segmentationPanelMode = customizationService.get('segmentation.segmentationPanelMode')?.value || SegmentationPanelMode.Dropdown;
     return /*#__PURE__*/react.createElement(PanelSegmentation, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
       extensionManager: extensionManager,
       configuration: {
         ...configuration,
-        disableEditing: appConfig.disableEditing || disableEditingForMode?.value
+        disableEditing: appConfig.disableEditing || disableEditingForMode?.value,
+        segmentationPanelMode: segmentationPanelMode
       }
     });
   };
   const wrappedPanelSegmentationWithTools = configuration => {
+    const [appConfig] = (0,state/* useAppConfig */.r)();
+    const segmentationPanelMode = customizationService.get('segmentation.segmentationPanelMode')?.value || SegmentationPanelMode.Dropdown;
     return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* Toolbox */.OO, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
@@ -757,7 +781,8 @@ const getPanelModule = ({
       servicesManager: servicesManager,
       extensionManager: extensionManager,
       configuration: {
-        ...configuration
+        ...configuration,
+        segmentationPanelMode: segmentationPanelMode
       }
     }));
   };
@@ -1135,6 +1160,7 @@ const commandsModule = ({
     }) => {
       // Todo: handle adding more than one segmentation
       const displaySet = displaySets[0];
+      const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySet.referencedDisplaySetInstanceUID);
       updateViewportsForSegmentationRendering({
         viewportId,
         servicesManager,
@@ -1145,6 +1171,8 @@ const commandsModule = ({
           const serviceFunction = segDisplaySet.Modality === 'SEG' ? 'createSegmentationForSEGDisplaySet' : 'createSegmentationForRTDisplaySet';
           const boundFn = segmentationService[serviceFunction].bind(segmentationService);
           const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
+          const segmentation = segmentationService.getSegmentation(segmentationId);
+          segmentation.description = `S${referencedDisplaySet.SeriesNumber}: ${referencedDisplaySet.SeriesDescription}`;
           return segmentationId;
         }
       });
@@ -1420,7 +1448,8 @@ function getToolbarModule({
     evaluate: ({
       viewportId,
       button,
-      toolNames
+      toolNames,
+      disabledText
     }) => {
       // Todo: we need to pass in the button section Id since we are kind of
       // forcing the button to have black background since initially
@@ -1430,7 +1459,8 @@ function getToolbarModule({
       if (!segmentations?.length) {
         return {
           disabled: true,
-          className: '!text-common-bright !bg-black opacity-50'
+          className: '!text-common-bright !bg-black opacity-50',
+          disabledText: disabledText ?? 'No segmentations available'
         };
       }
       const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
@@ -1441,7 +1471,8 @@ function getToolbarModule({
       if (!toolGroup || !toolGroup.hasTool(toolName)) {
         return {
           disabled: true,
-          className: '!text-common-bright ohif-disabled'
+          className: '!text-common-bright ohif-disabled',
+          disabledText: disabledText ?? 'Not available on the current viewport'
         };
       }
       const isPrimaryActive = toolNames ? toolNames.includes(toolGroup.getActivePrimaryMouseButtonTool()) : toolGroup.getActivePrimaryMouseButtonTool() === toolName;