@ohif/app 3.10.0-beta.69 → 3.10.0-beta.70

package/dist/{1394.bundle.d19f0a0deb8a73c8fefd.js → 1394.bundle.1a453834d06334cef67f.js}

@@ -22,8 +22,8 @@ var es = __webpack_require__(70574);
 var react_es = __webpack_require__(95261);
 // EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
 var src = __webpack_require__(18817);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js
 
 const RESPONSE = {
@@ -1168,8 +1168,8 @@ var src = __webpack_require__(10532);
 var ui_src = __webpack_require__(32907);
 // EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
 var ui_next_src = __webpack_require__(18817);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 ;// CONCATENATED MODULE: ../../../extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/constants/actionIcons.ts
 const defaultActionIcons = [{
   id: 'settings',

package/dist/{4834.bundle.367db81c87eeb401e656.js → 4834.bundle.49abf3aa79c4997b4b0e.js}

@@ -266,11 +266,13 @@ function modeFactory({
           id: ohif.layout,
           props: {
             leftPanels: [ohif.leftPanel],
+            leftPanelResizable: true,
             leftPanelClosed: true,
             // we have problem with rendering thumbnails for microscopy images
             rightPanelClosed: true,
             // we do not have the save microscopy measurements yet
             rightPanels: ['@ohif/extension-dicom-microscopy.panelModule.measure'],
+            rightPanelResizable: true,
             viewports: [{
               namespace: '@ohif/extension-dicom-microscopy.viewportModule.microscopy-dicom',
               displaySetsToDisplay: [

package/dist/{5247.bundle.db088038874e41000468.js → 5247.bundle.90fabd86036d59556d50.js}

@@ -1381,8 +1381,8 @@ MicroscopyService.REGISTRATION = servicesManager => {
 
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
 var dcmjs_es = __webpack_require__(5842);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/utils/DEVICE_OBSERVER_UID.js
 // We need to define a UID for this extension as a device, and it should be the same for all saves:
 

package/dist/{6027.bundle.0e0854c3f867f5e7f02c.js → 6027.bundle.eb3f3ec47661a86d0fec.js}

@@ -390,7 +390,9 @@ function modeFactory({
           props: {
             // TODO: Should be optional, or required to pass empty array for slots?
             leftPanels: [ohif.thumbnailList],
+            leftPanelResizable: true,
             rightPanels: [ohif.measurements],
+            rightPanelResizable: true,
             viewports: [{
               namespace: cs3d.viewport,
               displaySetsToDisplay: [ohif.sopClassHandler]

package/dist/{6925.bundle.55d26c569ab76e06359b.js → 6925.bundle.41ea5717e0d6374935af.js}

@@ -970,8 +970,8 @@ function initWADOImageLoader(userAuthenticationService, appConfig, extensionMana
 function destroy() {
   console.debug('Destroying WADO Image Loader');
 }
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(71353);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/getActiveViewportEnabledElement.ts

package/dist/{7197.bundle.a6cd0d7b57ccbfbaa4ef.js → 7197.bundle.728479d2fa3c04cdbd48.js}

@@ -345,8 +345,8 @@ function getHangingProtocolModule() {
 }
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
 
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Filters/General/ImageMarchingSquares.js + 2 modules
 var ImageMarchingSquares = __webpack_require__(38993);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/DataArray.js

package/dist/{7955.bundle.c4ce2e5172462f80c452.js → 7955.bundle.04aef52ad63c3c407657.js}

@@ -777,7 +777,9 @@ function modeFactory({
           id: ohif.layout,
           props: {
             leftPanels: [[src_dynamicVolume.leftPanel, src_cornerstone.activeViewportWindowLevel]],
+            leftPanelResizable: true,
             rightPanels: [],
+            rightPanelResizable: true,
             rightPanelClosed: true,
             viewports: [{
               namespace: src_cornerstone.viewport,

package/dist/{8008.bundle.02e4aad2abe7339284c5.js → 8008.bundle.c5dfef69ca623e291f85.js}

@@ -782,7 +782,9 @@ function modeFactory({
           id: ohif.layout,
           props: {
             leftPanels: [ohif.leftPanel],
+            leftPanelResizable: true,
             rightPanels: [cornerstone.panelTool],
+            rightPanelResizable: true,
             // leftPanelClosed: true,
             viewports: [{
               namespace: cornerstone.viewport,

package/dist/{8228.bundle.cd7fee1b0b4b230de88f.js → 8228.bundle.acc58a15955327766ded.js}

@@ -19,8 +19,8 @@ var prop_types = __webpack_require__(97598);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 // EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
 var src = __webpack_require__(32907);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 120 modules
-var default_src = __webpack_require__(90265);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 121 modules
+var default_src = __webpack_require__(8836);
 ;// CONCATENATED MODULE: ../../../extensions/dicom-microscopy/src/DicomMicroscopyViewport.css
 // extracted by mini-css-extract-plugin
 

package/dist/{8259.bundle.f990309d26067a952af4.js → 8259.bundle.de3a8dd3ec5caac634f6.js}

@@ -852,8 +852,10 @@ function modeFactory() {
             // leftPanels: [ohif.thumbnailList],
             // rightPanels: [dicomSeg.panel, ohif.measurements],
             leftPanels: [tracked.thumbnailList],
+            leftPanelResizable: true,
             // Can use cornerstone.measurements for all measurements
             rightPanels: [cornerstone.panel, tracked.measurements, cornerstone.measurements],
+            rightPanelResizable: true,
             // rightPanelClosed: true, // optional prop to start with collapse panels
             viewports: [{
               namespace: tracked.viewport,

package/dist/{8558.bundle.842c0850e1f3d2cf4f5d.js → 8558.bundle.70268b078cd338afe0e7.js}

@@ -740,7 +740,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return Promise.all(/* import() */[__webpack_require__.e(5038), __webpack_require__.e(3864), __webpack_require__.e(3334), __webpack_require__.e(265), __webpack_require__.e(6925), __webpack_require__.e(4438)]).then(__webpack_require__.bind(__webpack_require__, 23121));
+  return Promise.all(/* import() */[__webpack_require__.e(5038), __webpack_require__.e(3864), __webpack_require__.e(3334), __webpack_require__.e(8836), __webpack_require__.e(6925), __webpack_require__.e(4438)]).then(__webpack_require__.bind(__webpack_require__, 23121));
 });
 const OHIFCornerstoneRTViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {

package/dist/{265.bundle.4fbbcbfef613fe7759c0.js → 8836.bundle.a286b662d44377751f02.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[265],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[8836],{
 
-/***/ 90265:
+/***/ 8836:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -3051,8 +3051,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.10.0-beta.69";
-  const commitHash = "f00d18292f02e8910215d913edfc994850a68d88";
+  const versionNumber = "3.10.0-beta.70";
+  const commitHash = "d9abc3da8d94d6c5ab0cc5af25a5f61849905a35";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -3213,21 +3213,46 @@ const SidePanelWithServices = ({
 /* harmony default export */ const Components_SidePanelWithServices = (SidePanelWithServices);
 // EXTERNAL MODULE: ../../../node_modules/react-resizable-panels/dist/react-resizable-panels.browser.esm.js
 var react_resizable_panels_browser_esm = __webpack_require__(17825);
+;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/constants/panels.ts
+const expandedInsideBorderSize = 4;
+const collapsedInsideBorderSize = 4;
+const collapsedOutsideBorderSize = 8;
+const collapsedWidth = 25;
+const rightPanelInitialExpandedWidth = 280;
+const leftPanelInitialExpandedWidth = 282;
+const panelGroupDefinition = {
+  groupId: 'viewerLayoutResizablePanelGroup',
+  shared: {
+    expandedInsideBorderSize,
+    collapsedInsideBorderSize,
+    collapsedOutsideBorderSize,
+    collapsedWidth
+  },
+  left: {
+    // id
+    panelId: 'viewerLayoutResizableLeftPanel',
+    // expanded width
+    initialExpandedWidth: leftPanelInitialExpandedWidth,
+    // expanded width + expanded inside border
+    minimumExpandedOffsetWidth: 145 + expandedInsideBorderSize,
+    // initial expanded width
+    initialExpandedOffsetWidth: leftPanelInitialExpandedWidth + expandedInsideBorderSize,
+    // collapsed width + collapsed inside border + collapsed outside border
+    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize
+  },
+  right: {
+    panelId: 'viewerLayoutResizableRightPanel',
+    initialExpandedWidth: rightPanelInitialExpandedWidth,
+    minimumExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+    initialExpandedOffsetWidth: rightPanelInitialExpandedWidth + expandedInsideBorderSize,
+    collapsedOffsetWidth: collapsedWidth + collapsedInsideBorderSize + collapsedOutsideBorderSize
+  }
+};
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/ResizablePanelsHook.tsx
 
 
 
-// Id needed to grab the panel group for converting pixels to percentages
-const viewerLayoutResizablePanelGroupId = 'viewerLayoutResizablePanelGroup';
-const viewerLayoutResizableLeftPanelId = 'viewerLayoutResizableLeftPanel';
-const viewerLayoutResizableRightPanelId = 'viewerLayoutResizableRightPanel';
-const sidePanelExpandedDefaultWidth = 280;
-const sidePanelExpandedInsideBorderSize = 4;
-const sidePanelExpandedDefaultOffsetWidth = sidePanelExpandedDefaultWidth + sidePanelExpandedInsideBorderSize;
-const sidePanelCollapsedInsideBorderSize = 4;
-const sidePanelCollapsedOutsideBorderSize = 8;
-const sidePanelCollapsedWidth = 25;
-const sidePanelCollapsedOffsetWidth = sidePanelCollapsedWidth + sidePanelCollapsedInsideBorderSize + sidePanelCollapsedOutsideBorderSize;
 
 /**
  * Set the minimum and maximum css style width attributes for the given element.
@@ -3247,12 +3272,12 @@ const setMinMaxWidth = (elem, width) => {
   elem.style.maxWidth = elem.style.minWidth;
 };
 const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClosed, setRightPanelClosed) => {
-  const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = (0,react.useState)(sidePanelExpandedDefaultWidth);
-  const [rightPanelExpandedWidth, setRightPanelExpandedWidth] = (0,react.useState)(sidePanelExpandedDefaultWidth);
-
-  // Percentage sizes.
-  const [resizablePanelCollapsedSize, setResizablePanelCollapsedSize] = (0,react.useState)(0);
-  const [resizablePanelDefaultSize, setResizablePanelDefaultSize] = (0,react.useState)(0);
+  const [leftPanelExpandedWidth, setLeftPanelExpandedWidth] = (0,react.useState)(panelGroupDefinition.left.initialExpandedWidth);
+  const [rightPanelExpandedWidth, setRightPanelExpandedWidth] = (0,react.useState)(panelGroupDefinition.right.initialExpandedWidth);
+  const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = (0,react.useState)(0);
+  const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = (0,react.useState)(0);
+  const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = (0,react.useState)(0);
+  const [rightResizePanelCollapsedSize, setRightResizePanelCollapsedSize] = (0,react.useState)(0);
   const resizablePanelGroupElemRef = (0,react.useRef)(null);
   const resizableLeftPanelElemRef = (0,react.useRef)(null);
   const resizableRightPanelElemRef = (0,react.useRef)(null);
@@ -3265,26 +3290,29 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
   //   converting between percentages and pixels in various callbacks.
   // - Expand those panels that are initially expanded.
   (0,react.useLayoutEffect)(() => {
-    const panelGroupElem = (0,react_resizable_panels_browser_esm/* getPanelGroupElement */.Gx)(viewerLayoutResizablePanelGroupId);
+    const panelGroupElem = (0,react_resizable_panels_browser_esm/* getPanelGroupElement */.Gx)(panelGroupDefinition.groupId);
     resizablePanelGroupElemRef.current = panelGroupElem;
     const {
       width: panelGroupWidth
     } = panelGroupElem.getBoundingClientRect();
-    const leftPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(viewerLayoutResizableLeftPanelId);
+    const leftPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(panelGroupDefinition.left.panelId);
     resizableLeftPanelElemRef.current = leftPanelElem;
-    const rightPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(viewerLayoutResizableRightPanelId);
+    const rightPanelElem = (0,react_resizable_panels_browser_esm/* getPanelElement */.PV)(panelGroupDefinition.right.panelId);
     resizableRightPanelElemRef.current = rightPanelElem;
-    const resizablePanelExpandedSize = sidePanelExpandedDefaultOffsetWidth / panelGroupWidth * 100;
 
     // Since both resizable panels are collapsed by default (i.e. their default size is zero),
     // on the very first render check if either/both side panels should be expanded.
+    // we use the initialExpandedOffsetWidth on the first render incase the panel has min width but we want the initial state to be larger than that
+
     if (!leftPanelClosed) {
-      resizableLeftPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
-      setMinMaxWidth(leftPanelElem, sidePanelExpandedDefaultOffsetWidth);
+      const leftResizablePanelExpandedSize = panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth * 100;
+      resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
+      setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
     }
     if (!rightPanelClosed) {
-      resizableRightPanelAPIRef?.current?.expand(resizablePanelExpandedSize);
-      setMinMaxWidth(rightPanelElem, sidePanelExpandedDefaultOffsetWidth);
+      const rightResizablePanelExpandedSize = panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth * 100;
+      resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
+      setMinMaxWidth(rightPanelElem, panelGroupDefinition.right.initialExpandedOffsetWidth);
     }
   }, []); // no dependencies because this useLayoutEffect is only needed on the very first render
 
@@ -3311,11 +3339,11 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     // is executed on the render following an update of the minimum percentage size
     // for a panel.
     if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
-      const leftSize = (leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth * 100;
+      const leftSize = (leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) / panelGroupWidth * 100;
       resizableLeftPanelAPIRef.current.resize(leftSize);
     }
     if (!resizableRightPanelAPIRef.current.isCollapsed()) {
-      const rightSize = (rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize) / panelGroupWidth * 100;
+      const rightSize = (rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize) / panelGroupWidth * 100;
       resizableRightPanelAPIRef.current.resize(rightSize);
     }
 
@@ -3325,11 +3353,14 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
       const {
         width: panelGroupWidth
       } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-      const defaultSize = sidePanelExpandedDefaultOffsetWidth / panelGroupWidth * 100;
+      const minimumLeftSize = panelGroupDefinition.left.minimumExpandedOffsetWidth / panelGroupWidth * 100;
+      const minimumRightSize = panelGroupDefinition.right.minimumExpandedOffsetWidth / panelGroupWidth * 100;
 
       // Set the new default and collapsed resizable panel sizes.
-      setResizablePanelDefaultSize(Math.min(50, defaultSize));
-      setResizablePanelCollapsedSize(sidePanelCollapsedOffsetWidth / panelGroupWidth * 100);
+      setLeftResizablePanelMinimumSize(Math.min(50, minimumLeftSize));
+      setRightResizablePanelMinimumSize(Math.min(50, minimumRightSize));
+      setLeftResizePanelCollapsedSize(panelGroupDefinition.left.collapsedOffsetWidth / panelGroupWidth * 100);
+      setRightResizePanelCollapsedSize(panelGroupDefinition.right.collapsedOffsetWidth / panelGroupWidth * 100);
       if (resizableLeftPanelAPIRef.current.isCollapsed() && resizableRightPanelAPIRef.current.isCollapsed()) {
         return;
       }
@@ -3338,22 +3369,22 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
       // too small to display either side panel at its current width.
 
       // Determine the current widths of the two side panels.
-      let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed() ? sidePanelCollapsedOffsetWidth : leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
-      let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed() ? sidePanelCollapsedOffsetWidth : rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize;
+      let leftPanelOffsetWidth = resizableLeftPanelAPIRef.current.isCollapsed() ? panelGroupDefinition.left.collapsedOffsetWidth : leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
+      let rightPanelOffsetWidth = resizableRightPanelAPIRef.current.isCollapsed() ? panelGroupDefinition.right.collapsedOffsetWidth : rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize;
       if (!resizableLeftPanelAPIRef.current.isCollapsed() && leftPanelOffsetWidth + rightPanelOffsetWidth > panelGroupWidth) {
         // There is not enough space to show both panels at their pre-resize widths.
         // Note that at this point, the viewport grid component is zero width.
         // Reduce the left panel width so that both panels might fit.
-        leftPanelOffsetWidth = Math.max(panelGroupWidth - rightPanelOffsetWidth, sidePanelExpandedDefaultOffsetWidth);
-        setLeftPanelExpandedWidth(leftPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
+        leftPanelOffsetWidth = Math.max(panelGroupWidth - rightPanelOffsetWidth, panelGroupDefinition.left.minimumExpandedOffsetWidth);
+        setLeftPanelExpandedWidth(leftPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize);
         setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelOffsetWidth);
       }
       if (!resizableRightPanelAPIRef.current.isCollapsed() && rightPanelOffsetWidth + leftPanelOffsetWidth > panelGroupWidth) {
         // There is not enough space to show both panels at their pre-resize widths.
         // Note that at this point, the viewport grid component is zero width.
         // Reduce the right panel width so that both panels might fit.
-        rightPanelOffsetWidth = Math.max(panelGroupWidth - leftPanelOffsetWidth, sidePanelExpandedDefaultOffsetWidth);
-        setRightPanelExpandedWidth(rightPanelOffsetWidth - sidePanelExpandedInsideBorderSize);
+        rightPanelOffsetWidth = Math.max(panelGroupWidth - leftPanelOffsetWidth, panelGroupDefinition.right.minimumExpandedOffsetWidth);
+        setRightPanelExpandedWidth(rightPanelOffsetWidth - panelGroupDefinition.shared.expandedInsideBorderSize);
         setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelOffsetWidth);
       }
     });
@@ -3361,7 +3392,7 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     return () => {
       observer.disconnect();
     };
-  }, [leftPanelExpandedWidth, resizablePanelDefaultSize, rightPanelExpandedWidth]);
+  }, [leftPanelExpandedWidth, rightPanelExpandedWidth, leftResizablePanelMinimumSize, rightResizablePanelMinimumSize]);
 
   /**
    * Handles dragging of either side panel resize handle.
@@ -3374,10 +3405,10 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     } else {
       isResizableHandleDraggingRef.current = false;
       if (resizableLeftPanelAPIRef?.current?.isExpanded()) {
-        setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize);
+        setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
       }
       if (resizableRightPanelAPIRef?.current?.isExpanded()) {
-        setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize);
+        setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
       }
     }
   }, [leftPanelExpandedWidth, rightPanelExpandedWidth]);
@@ -3387,12 +3418,12 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     resizableLeftPanelAPIRef?.current?.collapse();
   }, [setLeftPanelClosed]);
   const onLeftPanelOpen = (0,react.useCallback)(() => {
-    resizableLeftPanelAPIRef?.current?.expand();
-    if (!isResizableHandleDraggingRef.current) {
-      setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelExpandedWidth + sidePanelExpandedInsideBorderSize);
-    }
+    const {
+      width: panelGroupWidth
+    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    resizableLeftPanelAPIRef?.current?.expand(panelGroupDefinition.left.initialExpandedOffsetWidth / panelGroupWidth * 100);
     setLeftPanelClosed(false);
-  }, [leftPanelExpandedWidth, setLeftPanelClosed]);
+  }, [setLeftPanelClosed]);
   const onLeftPanelResize = (0,react.useCallback)(size => {
     if (resizableLeftPanelAPIRef.current.isCollapsed()) {
       return;
@@ -3400,7 +3431,8 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     const {
       width: panelGroupWidth
     } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setLeftPanelExpandedWidth(size / 100 * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    const newExpandedWidth = size / 100 * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
+    setLeftPanelExpandedWidth(newExpandedWidth);
   }, []);
   const onRightPanelClose = (0,react.useCallback)(() => {
     setRightPanelClosed(true);
@@ -3408,12 +3440,12 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     resizableRightPanelAPIRef?.current?.collapse();
   }, [setRightPanelClosed]);
   const onRightPanelOpen = (0,react.useCallback)(() => {
-    resizableRightPanelAPIRef?.current?.expand();
-    if (!isResizableHandleDraggingRef.current) {
-      setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelExpandedWidth + sidePanelExpandedInsideBorderSize);
-    }
+    const {
+      width: panelGroupWidth
+    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    resizableRightPanelAPIRef?.current?.expand(panelGroupDefinition.right.initialExpandedOffsetWidth / panelGroupWidth * 100);
     setRightPanelClosed(false);
-  }, [rightPanelExpandedWidth, setRightPanelClosed]);
+  }, [setRightPanelClosed]);
   const onRightPanelResize = (0,react.useCallback)(size => {
     if (resizableRightPanelAPIRef?.current?.isCollapsed()) {
       return;
@@ -3421,52 +3453,53 @@ const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClose
     const {
       width: panelGroupWidth
     } = resizablePanelGroupElemRef.current.getBoundingClientRect();
-    setRightPanelExpandedWidth(size / 100 * panelGroupWidth - sidePanelExpandedInsideBorderSize);
+    const newExpandedWidth = size / 100 * panelGroupWidth - panelGroupDefinition.shared.expandedInsideBorderSize;
+    setRightPanelExpandedWidth(newExpandedWidth);
   }, []);
   return [{
     expandedWidth: leftPanelExpandedWidth,
-    collapsedWidth: sidePanelCollapsedWidth,
-    collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
-    collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
-    expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+    collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
+    collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
+    collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
+    expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
     onClose: onLeftPanelClose,
     onOpen: onLeftPanelOpen
   }, {
     expandedWidth: rightPanelExpandedWidth,
-    collapsedWidth: sidePanelCollapsedWidth,
-    collapsedInsideBorderSize: sidePanelCollapsedInsideBorderSize,
-    collapsedOutsideBorderSize: sidePanelCollapsedOutsideBorderSize,
-    expandedInsideBorderSize: sidePanelExpandedInsideBorderSize,
+    collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
+    collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
+    collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
+    expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
     onClose: onRightPanelClose,
     onOpen: onRightPanelOpen
   }, {
     direction: 'horizontal',
-    id: viewerLayoutResizablePanelGroupId
+    id: panelGroupDefinition.groupId
   }, {
-    defaultSize: resizablePanelDefaultSize,
-    minSize: resizablePanelDefaultSize,
+    defaultSize: leftResizablePanelMinimumSize,
+    minSize: leftResizablePanelMinimumSize,
     onResize: onLeftPanelResize,
     collapsible: true,
-    collapsedSize: resizablePanelCollapsedSize,
+    collapsedSize: leftResizeablePanelCollapsedSize,
     onCollapse: () => setLeftPanelClosed(true),
     onExpand: () => setLeftPanelClosed(false),
     ref: resizableLeftPanelAPIRef,
     order: 0,
-    id: viewerLayoutResizableLeftPanelId
+    id: panelGroupDefinition.left.panelId
   }, {
     order: 1,
     id: 'viewerLayoutResizableViewportGridPanel'
   }, {
-    defaultSize: resizablePanelDefaultSize,
-    minSize: resizablePanelDefaultSize,
+    defaultSize: rightResizablePanelMinimumSize,
+    minSize: rightResizablePanelMinimumSize,
     onResize: onRightPanelResize,
     collapsible: true,
-    collapsedSize: resizablePanelCollapsedSize,
+    collapsedSize: rightResizePanelCollapsedSize,
     onCollapse: () => setRightPanelClosed(true),
     onExpand: () => setRightPanelClosed(false),
     ref: resizableRightPanelAPIRef,
     order: 2,
-    id: viewerLayoutResizableRightPanelId
+    id: panelGroupDefinition.right.panelId
   }, onHandleDragging];
 };
 /* harmony default export */ const ResizablePanelsHook = (useResizablePanels);

package/dist/{9551.bundle.fb487aea1dde51b9702b.js → 9551.bundle.7bc33b964167fbd1abcc.js}

@@ -717,8 +717,10 @@ function modeFactory({
           id: ohif.layout,
           props: {
             leftPanels: [ohif.thumbnailList],
+            leftPanelResizable: true,
             leftPanelClosed: true,
             rightPanels: [tmtv.tmtv, tmtv.petSUV],
+            rightPanelResizable: true,
             viewports: [{
               namespace: cs3d.viewport,
               displaySetsToDisplay: [ohif.sopClassHandler]