@ohif/app 3.9.0-beta.82 → 3.9.0-beta.84

package/dist/{1169.bundle.d32f38ab5aa329346850.js → 1169.bundle.4622fde2805592aad5d0.js}

@@ -25,8 +25,8 @@ var esm = __webpack_require__(93725);
 var dist_esm = __webpack_require__(12651);
 // EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
 var src = __webpack_require__(84793);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var ui_src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var ui_src = __webpack_require__(50395);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(13000);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css

package/dist/{1498.bundle.a2d05ac1f27d0c2d2c9f.js → 1498.bundle.ff6ba98c695ef559fec2.js}

@@ -11,7 +11,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(43001);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3827);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(38604);
+/* harmony import */ var _ohif_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(50395);
 /* harmony import */ var _cornerstonejs_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(93725);
 /* harmony import */ var _getContextModule__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(89859);
 /* harmony import */ var _cornerstonejs_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(12651);

package/dist/{2898.bundle.21f0702e5d67b8aca5af.js → 2898.bundle.ef8d98b006bd8386d599.js}

@@ -17,8 +17,8 @@ var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(43001);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var src = __webpack_require__(50395);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-pmap/src/utils/initPMAPToolGroup.ts
 function createPMAPToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const {

package/dist/{1994.bundle.875a9af3f3071de48396.js → 3482.bundle.d884959c8b0c990061da.js}

@@ -1,5 +1,5 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[1994,4757],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[3482,4757],{
 
 /***/ 89859:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@@ -20,8 +20,8 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var es = __webpack_require__(261);
 // EXTERNAL MODULE: ../../../node_modules/@xstate/react/es/index.js + 8 modules
 var react_es = __webpack_require__(44530);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var src = __webpack_require__(50395);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js
 
 const RESPONSE = {
@@ -714,8 +714,8 @@ function promptTrackNewStudy_askSaveDiscardOrCancel(UIViewportDialogService, vie
   });
 }
 /* harmony default export */ const TrackedMeasurementsContext_promptTrackNewStudy = (promptTrackNewStudy);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 95 modules
-var default_src = __webpack_require__(10655);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 99 modules
+var default_src = __webpack_require__(56552);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/_shared/getNextSRSeriesNumber.js
 const MIN_SR_SERIES_NUMBER = 4700;
 function getNextSRSeriesNumber(displaySetService) {
@@ -1251,7 +1251,7 @@ function getContextModule({
 
 /***/ }),
 
-/***/ 64595:
+/***/ 21177:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -1275,8 +1275,79 @@ var dist = __webpack_require__(62474);
 var es = __webpack_require__(69190);
 // EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
 var src = __webpack_require__(84793);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var ui_src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var ui_src = __webpack_require__(50395);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2440 modules
+var ui_next_src = __webpack_require__(45185);
+// EXTERNAL MODULE: ./state/index.js + 1 modules
+var state = __webpack_require__(52490);
+;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTrackingHeader.tsx
+
+
+
+function PanelStudyBrowserTrackingHeader({
+  tab,
+  getCloseIcon,
+  viewPresets,
+  updateViewPresetValue,
+  actionIcons,
+  updateActionIconValue
+}) {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-muted flex h-[40px] select-none rounded-t p-2"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: 'flex h-[24px] w-full select-none justify-center self-center text-[14px]'
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex w-full items-center justify-between"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-full items-center justify-center"
+  }, /*#__PURE__*/react.createElement(ui_next_src/* ToggleGroup */.tX, {
+    type: "single",
+    value: viewPresets.filter(preset => preset.selected)[0].id,
+    onValueChange: value => {
+      const selectedViewPreset = viewPresets.find(preset => preset.id === value);
+      updateViewPresetValue(selectedViewPreset);
+    }
+  }, viewPresets.map((viewPreset, index) => /*#__PURE__*/react.createElement(ui_next_src/* ToggleGroupItem */.GX, {
+    key: index,
+    "aria-label": viewPreset.id,
+    value: viewPreset.id,
+    className: "text-actions-primary"
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.PJ[viewPreset.iconName] || ui_next_src/* Icons */.PJ.MissingIcon))))), /*#__PURE__*/react.createElement("div", {
+    className: "text-muted-foreground flex items-center justify-center"
+  }, ' ', /*#__PURE__*/react.createElement("span", null, tab.label), ' '), /*#__PURE__*/react.createElement("div", {
+    className: "mr-[30px] flex items-center justify-center"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center space-x-1"
+  }, actionIcons.map((icon, index) => /*#__PURE__*/react.createElement(ui_next_src/* Icons */.PJ[icon.iconName] || ui_next_src/* Icons */.PJ.MissingIcon, {
+    key: index,
+    onClick: () => updateActionIconValue(icon),
+    className: `cursor-pointer`
+  })))))), getCloseIcon()));
+}
+
+;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/constants/actionIcons.ts
+const defaultActionIcons = [{
+  id: 'settings',
+  iconName: 'Settings',
+  value: false
+}];
+
+;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/constants/viewPresets.ts
+const defaultViewPresets = [{
+  id: 'list',
+  iconName: 'ListView',
+  selected: false
+}, {
+  id: 'thumbnails',
+  iconName: 'ThumbnailView',
+  selected: true
+}];
+
+;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/constants/index.ts
+
+
+
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx
 
 
@@ -1285,6 +1356,12 @@ var ui_src = __webpack_require__(38604);
 
 
 
+
+
+
+
+
+
 const {
   formatDate,
   createStudyBrowserTabs
@@ -1299,7 +1376,10 @@ function PanelStudyBrowserTracking({
   getImageSrc,
   getStudiesForPatientByMRN,
   requestDisplaySetCreationForStudy,
-  dataSource
+  dataSource,
+  renderHeader,
+  getCloseIcon,
+  tab
 }) {
   const {
     displaySetService,
@@ -1307,12 +1387,14 @@ function PanelStudyBrowserTracking({
     hangingProtocolService,
     uiNotificationService,
     measurementService,
-    studyPrefetcherService
+    studyPrefetcherService,
+    customizationService
   } = servicesManager.services;
   const navigate = (0,dist/* useNavigate */.s0)();
   const {
     t
   } = (0,es/* useTranslation */.$G)('Common');
+  const [appConfig] = (0,state/* useAppConfig */.M)();
 
   // Normally you nest the components so the tree isn't so deep, and the data
   // doesn't have to have such an intense shape. This works well enough for now.
@@ -1334,6 +1416,23 @@ function PanelStudyBrowserTracking({
   const [displaySetsLoadingState, setDisplaySetsLoadingState] = (0,react.useState)({});
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = (0,react.useState)({});
   const [jumpToDisplaySet, setJumpToDisplaySet] = (0,react.useState)(null);
+  const [viewPresets, setViewPresets] = (0,react.useState)(customizationService.getCustomization('studyBrowser.viewPresets')?.value || defaultViewPresets);
+  const [actionIcons, setActionIcons] = (0,react.useState)(defaultActionIcons);
+  const updateActionIconValue = actionIcon => {
+    actionIcon.value = !actionIcon.value;
+    const newActionIcons = [...actionIcons];
+    setActionIcons(newActionIcons);
+  };
+  const updateViewPresetValue = viewPreset => {
+    if (!viewPreset) {
+      return;
+    }
+    const newViewPresets = viewPresets.map(preset => {
+      preset.selected = preset.id === viewPreset.id;
+      return preset;
+    });
+    setViewPresets(newViewPresets);
+  };
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     let updatedViewports = [];
     const viewportId = activeViewportId;
@@ -1632,7 +1731,19 @@ function PanelStudyBrowserTracking({
       }
     });
   };
-  return /*#__PURE__*/react.createElement(ui_src/* StudyBrowser */.eX, {
+  const StudyBrowser = appConfig.useExperimentalUI ? ui_next_src/* StudyBrowser */.eX : ui_src/* StudyBrowser */.eX;
+  return /*#__PURE__*/react.createElement(react.Fragment, null, renderHeader && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(PanelStudyBrowserTrackingHeader, {
+    tab: tab,
+    getCloseIcon: getCloseIcon,
+    viewPresets: viewPresets,
+    updateViewPresetValue: updateViewPresetValue,
+    actionIcons: actionIcons,
+    updateActionIconValue: updateActionIconValue
+  }), /*#__PURE__*/react.createElement(ui_next_src/* Separator */.Z0, {
+    orientation: "horizontal",
+    className: "bg-black",
+    thickness: "2px"
+  })), /*#__PURE__*/react.createElement(StudyBrowser, {
     tabs: tabs,
     servicesManager: servicesManager,
     activeTabName: activeTabName,
@@ -1646,8 +1757,10 @@ function PanelStudyBrowserTracking({
     },
     onClickThumbnail: () => {},
     onDoubleClickThumbnail: onDoubleClickThumbnailHandler,
-    activeDisplaySetInstanceUIDs: activeViewportDisplaySetInstanceUIDs
-  });
+    activeDisplaySetInstanceUIDs: activeViewportDisplaySetInstanceUIDs,
+    showSettings: actionIcons.find(icon => icon.id === 'settings').value,
+    viewPresets: viewPresets
+  }));
 }
 PanelStudyBrowserTracking.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired,
@@ -1889,7 +2002,10 @@ function _getStudyForPatientUtility(extensionManager) {
 function WrappedPanelStudyBrowserTracking({
   commandsManager,
   extensionManager,
-  servicesManager
+  servicesManager,
+  renderHeader,
+  getCloseIcon,
+  tab
 }) {
   const dataSource = extensionManager.getActiveDataSource()[0];
   const getStudiesForPatientByMRN = _getStudyForPatientUtility(extensionManager);
@@ -1901,7 +2017,10 @@ function WrappedPanelStudyBrowserTracking({
     dataSource: dataSource,
     getImageSrc: _getImageSrcFromImageId,
     getStudiesForPatientByMRN: _getStudiesForPatientByMRN,
-    requestDisplaySetCreationForStudy: _requestDisplaySetCreationForStudy
+    requestDisplaySetCreationForStudy: _requestDisplaySetCreationForStudy,
+    renderHeader: renderHeader,
+    getCloseIcon: getCloseIcon,
+    tab: tab
   });
 }
 
@@ -1933,8 +2052,6 @@ WrappedPanelStudyBrowserTracking.propTypes = {
 /* harmony default export */ const panels_PanelStudyBrowserTracking = (WrappedPanelStudyBrowserTracking);
 // EXTERNAL MODULE: ./hooks/index.js + 1 modules
 var hooks = __webpack_require__(75213);
-// EXTERNAL MODULE: ./state/index.js + 1 modules
-var state = __webpack_require__(52490);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
 var lodash_debounce = __webpack_require__(8324);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
@@ -1948,6 +2065,7 @@ var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce
 
 
 
+
 const {
   downloadCSVReport
 } = src.utils;
@@ -1965,7 +2083,10 @@ const DISPLAY_STUDY_SUMMARY_INITIAL_VALUE = {
 };
 function PanelMeasurementTableTracking({
   servicesManager,
-  extensionManager
+  extensionManager,
+  renderHeader,
+  getCloseIcon,
+  tab
 }) {
   const [viewportGrid] = (0,ui_src/* useViewportGrid */.O_)();
   const {
@@ -2109,7 +2230,17 @@ function PanelMeasurementTableTracking({
   const additionalFindings = displayMeasurements.filter(dm => dm.measurementType === measurementService.VALUE_TYPES.POINT && dm.referencedImageId);
   const nonAcquisitionMeasurements = displayMeasurements.filter(dm => dm.referencedImageId == null);
   const disabled = additionalFindings.length === 0 && displayMeasurementsWithoutFindings.length === 0 && nonAcquisitionMeasurements.length === 0;
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, renderHeader && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]"
+  }, /*#__PURE__*/react.createElement("span", null, tab.label))), getCloseIcon()), /*#__PURE__*/react.createElement(ui_next_src/* Separator */.Z0, {
+    orientation: "horizontal",
+    className: "bg-black",
+    thickness: "2px"
+  })), /*#__PURE__*/react.createElement("div", {
     className: "invisible-scrollbar overflow-y-auto overflow-x-hidden",
     ref: measurementsPanelRef,
     "data-cy": 'trackedMeasurements-panel'
@@ -2227,6 +2358,8 @@ function _mapMeasurementToDisplay(measurement, types, displaySetService) {
 // EXTERNAL MODULE: ../../../node_modules/i18next/dist/esm/i18next.js
 var i18next = __webpack_require__(73577);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/getPanelModule.tsx
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+
 
 
 
@@ -2234,6 +2367,7 @@ var i18next = __webpack_require__(73577);
 // - No loading UI exists yet
 // - cancel promises when component is destroyed
 // - show errors in UI for thumbnails if promise fails
+
 function getPanelModule({
   commandsManager,
   extensionManager,
@@ -2244,26 +2378,26 @@ function getPanelModule({
     iconName: 'tab-studies',
     iconLabel: 'Studies',
     label: i18next/* default */.Z.t('SidePanel:Studies'),
-    component: panels_PanelStudyBrowserTracking.bind(null, {
-      commandsManager,
-      extensionManager,
-      servicesManager
-    })
+    component: props => /*#__PURE__*/react.createElement(panels_PanelStudyBrowserTracking, _extends({}, props, {
+      commandsManager: commandsManager,
+      extensionManager: extensionManager,
+      servicesManager: servicesManager
+    }))
   }, {
     name: 'trackedMeasurements',
     iconName: 'tab-linear',
     iconLabel: 'Measure',
     label: i18next/* default */.Z.t('SidePanel:Measurements'),
-    component: panels_PanelMeasurementTableTracking.bind(null, {
-      commandsManager,
-      extensionManager,
-      servicesManager
-    })
+    component: props => /*#__PURE__*/react.createElement(panels_PanelMeasurementTableTracking, _extends({}, props, {
+      commandsManager: commandsManager,
+      extensionManager: extensionManager,
+      servicesManager: servicesManager
+    }))
   }];
 }
 /* harmony default export */ const src_getPanelModule = (getPanelModule);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/getViewportModule.tsx
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function getViewportModule_extends() { return getViewportModule_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, getViewportModule_extends.apply(null, arguments); }
 
 const Component = /*#__PURE__*/react.lazy(() => {
   return __webpack_require__.e(/* import() */ 1498).then(__webpack_require__.bind(__webpack_require__, 11498));
@@ -2279,7 +2413,7 @@ function getViewportModule({
   extensionManager
 }) {
   const ExtendedOHIFCornerstoneTrackingViewport = props => {
-    return /*#__PURE__*/react.createElement(OHIFCornerstoneViewport, _extends({
+    return /*#__PURE__*/react.createElement(OHIFCornerstoneViewport, getViewportModule_extends({
       servicesManager: servicesManager,
       commandsManager: commandsManager,
       extensionManager: extensionManager

package/dist/{3658.bundle.ca4d24aa942995e51df2.js → 3658.bundle.e44755981b64e69a8d7e.js}

@@ -17,8 +17,8 @@ var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var src = __webpack_require__(50395);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
 
 const RESPONSE = {

package/dist/{3962.bundle.bb6085989a02e6911bea.js → 3962.bundle.587fa615caa9f13808dc.js}

@@ -656,8 +656,8 @@ var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var ui_src = __webpack_require__(38604);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var ui_src = __webpack_require__(50395);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
 var streaming_image_volume_loader_dist_esm = __webpack_require__(15793);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
@@ -1073,20 +1073,36 @@ PanelGenerateImage.propTypes = {
     }).isRequired
   }).isRequired
 };
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2440 modules
+var ui_next_src = __webpack_require__(45185);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx
 
 
+
 function DynamicDataPanel({
   servicesManager,
-  commandsManager
+  commandsManager,
+  renderHeader,
+  getCloseIcon,
+  tab
 }) {
-  return /*#__PURE__*/react.createElement("div", {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, renderHeader && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]"
+  }, /*#__PURE__*/react.createElement("span", null, tab.label))), getCloseIcon()), /*#__PURE__*/react.createElement(ui_next_src/* Separator */.Z0, {
+    orientation: "horizontal",
+    className: "bg-black",
+    thickness: "2px"
+  })), /*#__PURE__*/react.createElement("div", {
     className: "flex flex-col text-white",
     "data-cy": 'dynamic-volume-panel'
   }, /*#__PURE__*/react.createElement(PanelGenerateImage, {
     commandsManager: commandsManager,
     servicesManager: servicesManager
-  }));
+  })));
 }
 /* harmony default export */ const panels_DynamicDataPanel = (DynamicDataPanel);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/WorkflowPanel.tsx
@@ -1110,6 +1126,8 @@ function WorkflowPanel({
 
 
 
+// EXTERNAL MODULE: ./state/index.js + 1 modules
+var state = __webpack_require__(52490);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(69190);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicExport.tsx
@@ -1190,25 +1208,43 @@ function DynamicExport({
 
 
 
+
+
 function getPanelModule({
   commandsManager,
   extensionManager,
   servicesManager
 }) {
-  const wrappedDynamicDataPanel = () => {
+  const wrappedDynamicDataPanel = ({
+    renderHeader,
+    getCloseIcon,
+    tab
+  }) => {
     return /*#__PURE__*/react.createElement(panels_DynamicDataPanel, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
-      extensionManager: extensionManager
+      extensionManager: extensionManager,
+      renderHeader: renderHeader,
+      getCloseIcon: getCloseIcon,
+      tab: tab
     });
   };
-  const wrappedDynamicToolbox = () => {
-    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* Toolbox */.vb, {
+  const wrappedDynamicToolbox = ({
+    renderHeader,
+    getCloseIcon,
+    tab
+  }) => {
+    const [appConfig] = (0,state/* useAppConfig */.M)();
+    const Toolbox = appConfig.useExperimentalUI ? ui_next_src/* Toolbox */.vb : ui_src/* Toolbox */.vb;
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(Toolbox, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
       extensionManager: extensionManager,
       buttonSectionId: "dynamic-toolbox",
-      title: "Threshold Tools"
+      title: "Threshold Tools",
+      renderHeader: renderHeader,
+      getCloseIcon: getCloseIcon,
+      tab: tab
     }));
   };
   const wrappedDynamicExport = () => {

package/dist/{4210.bundle.92b0d101882497244c0d.js → 4210.bundle.4676d87115aa2408100b.js}

@@ -315,10 +315,12 @@ function getHangingProtocolModule() {
 
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(52490);
-// EXTERNAL MODULE: ../../ui/src/index.js + 784 modules
-var ui_src = __webpack_require__(38604);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 95 modules
-var default_src = __webpack_require__(10655);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2440 modules
+var ui_next_src = __webpack_require__(45185);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var ui_src = __webpack_require__(50395);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 99 modules
+var default_src = __webpack_require__(56552);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
@@ -496,6 +498,7 @@ var dist_es = __webpack_require__(69190);
 
 
 
+
 const components = {
   [SegmentationPanelMode.Expanded]: ui_src/* SegmentationGroupTableExpanded */.s_,
   [SegmentationPanelMode.Dropdown]: ui_src/* SegmentationGroupTable */.cX
@@ -504,7 +507,10 @@ function PanelSegmentation({
   servicesManager,
   commandsManager,
   extensionManager,
-  configuration
+  configuration,
+  renderHeader,
+  getCloseIcon,
+  tab
 }) {
   const {
     segmentationService,
@@ -745,7 +751,17 @@ function PanelSegmentation({
   const SegmentationGroupTableComponent = components[configuration?.segmentationPanelMode] || ui_src/* SegmentationGroupTable */.cX;
   const allowAddSegment = configuration?.addSegment;
   const onSegmentationAddWrapper = configuration?.onSegmentationAdd && typeof configuration?.onSegmentationAdd === 'function' ? configuration?.onSegmentationAdd : onSegmentationAdd;
-  return /*#__PURE__*/react.createElement(SegmentationGroupTableComponent, {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, renderHeader && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-primary-dark flex select-none rounded-t pt-1.5 pb-[2px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[24px] w-full cursor-pointer select-none justify-center self-center text-[14px]"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-primary-active flex grow cursor-pointer select-none justify-center self-center text-[13px]"
+  }, /*#__PURE__*/react.createElement("span", null, tab.label))), getCloseIcon()), /*#__PURE__*/react.createElement(ui_next_src/* Separator */.Z0, {
+    orientation: "horizontal",
+    className: "bg-black",
+    thickness: "2px"
+  })), /*#__PURE__*/react.createElement(SegmentationGroupTableComponent, {
     title: t('Segmentations'),
     segmentations: segmentations,
     disableEditing: configuration.disableEditing,
@@ -778,7 +794,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({
@@ -801,6 +817,7 @@ PanelSegmentation.propTypes = {
 
 
 
+
 const getPanelModule = ({
   commandsManager,
   servicesManager,
@@ -811,7 +828,30 @@ const getPanelModule = ({
   const {
     customizationService
   } = servicesManager.services;
-  const wrappedPanelSegmentation = configuration => {
+  const wrappedPanelSegmentation = ({
+    configuration,
+    renderHeader,
+    getCloseIcon,
+    tab
+  }) => {
+    const [appConfig] = (0,state/* useAppConfig */.M)();
+    return /*#__PURE__*/react.createElement(PanelSegmentation, {
+      commandsManager: commandsManager,
+      servicesManager: servicesManager,
+      extensionManager: extensionManager,
+      configuration: {
+        ...configuration,
+        disableEditing: appConfig.disableEditing,
+        ...customizationService.get('segmentation.panel')
+      },
+      renderHeader: renderHeader,
+      getCloseIcon: getCloseIcon,
+      tab: tab
+    });
+  };
+  const wrappedPanelSegmentationNoHeader = ({
+    configuration
+  }) => {
     const [appConfig] = (0,state/* useAppConfig */.M)();
     return /*#__PURE__*/react.createElement(PanelSegmentation, {
       commandsManager: commandsManager,
@@ -824,9 +864,15 @@ const getPanelModule = ({
       }
     });
   };
-  const wrappedPanelSegmentationWithTools = configuration => {
+  const wrappedPanelSegmentationWithTools = ({
+    configuration,
+    renderHeader,
+    getCloseIcon,
+    tab
+  }) => {
     const [appConfig] = (0,state/* useAppConfig */.M)();
-    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* Toolbox */.vb, {
+    const Toolbox = appConfig.useExperimentalUI ? ui_next_src/* Toolbox */.vb : ui_src/* Toolbox */.vb;
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(Toolbox, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
       extensionManager: extensionManager,
@@ -834,7 +880,10 @@ const getPanelModule = ({
       title: "Segmentation Tools",
       configuration: {
         ...configuration
-      }
+      },
+      renderHeader: renderHeader,
+      getCloseIcon: getCloseIcon,
+      tab: tab
     }), /*#__PURE__*/react.createElement(PanelSegmentation, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
@@ -858,6 +907,12 @@ const getPanelModule = ({
     iconLabel: 'Segmentation',
     label: 'Segmentation',
     component: wrappedPanelSegmentationWithTools
+  }, {
+    name: 'panelSegmentationNoHeader',
+    iconName: 'tab-segmentation',
+    iconLabel: 'Segmentation',
+    label: 'Segmentation',
+    component: wrappedPanelSegmentationNoHeader
   }];
 };
 /* harmony default export */ const src_getPanelModule = (getPanelModule);

package/dist/{4353.bundle.2d8b7b74a84876493021.js → 4353.bundle.8a0df511a9465a4f876c.js}

@@ -546,7 +546,7 @@ const ohif = {
 };
 const cs3d = {
   viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
-  segPanel: '@ohif/extension-cornerstone-dicom-seg.panelModule.panelSegmentation'
+  segPanel: '@ohif/extension-cornerstone-dicom-seg.panelModule.panelSegmentationNoHeader'
 };
 const tmtv = {
   hangingProtocol: '@ohif/extension-tmtv.hangingProtocolModule.ptCT',