@ohif/app 3.10.0-beta.8 → 3.10.0-beta.80

package/dist/{1520.bundle.8138f1baf81233ac0ce1.js → 1395.bundle.8176cda4db90bc91a0b5.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[1520],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[1395],{
 
-/***/ 71520:
+/***/ 91395:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -11,6 +11,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   ContextMenuController: () => (/* reexport */ ContextMenuController),
   CustomizableContextMenuTypes: () => (/* reexport */ types_namespaceObject),
+  MoreDropdownMenu: () => (/* reexport */ MoreDropdownMenu),
   PanelStudyBrowserHeader: () => (/* reexport */ PanelStudyBrowserHeader),
   StaticWadoClient: () => (/* reexport */ StaticWadoClient),
   callInputDialog: () => (/* reexport */ callInputDialog),
@@ -24,12 +25,13 @@ __webpack_require__.d(__webpack_exports__, {
   getStudiesForPatientByMRN: () => (/* reexport */ Panels_getStudiesForPatientByMRN),
   promptLabelAnnotation: () => (/* reexport */ utils_promptLabelAnnotation),
   promptSaveReport: () => (/* reexport */ utils_promptSaveReport),
+  requestDisplaySetCreationForStudy: () => (/* reexport */ Panels_requestDisplaySetCreationForStudy),
   showLabelAnnotationPopup: () => (/* reexport */ showLabelAnnotationPopup),
   useDisplaySetSelectorStore: () => (/* reexport */ useDisplaySetSelectorStore),
   useHangingProtocolStageIndexStore: () => (/* reexport */ useHangingProtocolStageIndexStore),
   usePatientInfo: () => (/* reexport */ hooks_usePatientInfo),
   useToggleHangingProtocolStore: () => (/* reexport */ useToggleHangingProtocolStore),
-  useToggleOneUpViewportGridStore: () => (/* reexport */ useToggleOneUpViewportGridStore/* useToggleOneUpViewportGridStore */.Y),
+  useToggleOneUpViewportGridStore: () => (/* reexport */ useToggleOneUpViewportGridStore),
   useUIStateStore: () => (/* reexport */ useUIStateStore),
   useViewportGridStore: () => (/* reexport */ useViewportGridStore),
   useViewportsByPositionStore: () => (/* reexport */ useViewportsByPositionStore),
@@ -59,8 +61,8 @@ __webpack_require__.d(src_utils_namespaceObject, {
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
 var dicomweb_client_es = __webpack_require__(83562);
-// EXTERNAL MODULE: ../../core/src/index.ts + 71 modules
-var src = __webpack_require__(29463);
+// EXTERNAL MODULE: ../../core/src/index.ts + 73 modules
+var src = __webpack_require__(10532);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
 var sortStudy = __webpack_require__(45476);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
@@ -270,7 +272,7 @@ function mapParams(params, options = {}) {
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/dcm4cheeReject.js
-/* harmony default export */ function dcm4cheeReject(wadoRoot) {
+/* harmony default export */ function dcm4cheeReject(wadoRoot, getAuthrorizationHeader) {
   return {
     series: (StudyInstanceUID, SeriesInstanceUID) => {
       return new Promise((resolve, reject) => {
@@ -279,6 +281,10 @@ function mapParams(params, options = {}) {
         const url = `${wadoRoot}/studies/${StudyInstanceUID}/series/${SeriesInstanceUID}/reject/${CodeValueAndCodeSchemeDesignator}`;
         const xhr = new XMLHttpRequest();
         xhr.open('POST', url, true);
+        const headers = getAuthrorizationHeader();
+        for (const key in headers) {
+          xhr.setRequestHeader(key, headers[key]);
+        }
 
         //Send the proper header information along with the request
         // TODO -> Auth when we re-add authorization.
@@ -469,7 +475,6 @@ class RetrieveMetadataLoader {
 // import DICOMWeb from '../../../DICOMWeb/';
 
 
-
 /**
  * Class for sync load of study metadata.
  * It inherits from RetrieveMetadataLoader
@@ -1069,18 +1074,33 @@ class StaticWadoClient extends dicomweb_client_es/* api */.FH.DICOMwebClient {
    *
    * @param {*} desired
    * @param {*} actual
+   * @param {*} options - fuzzyMatching: if true, then do a sub-string match
    * @returns true if the values match
    */
-  compareValues(desired, actual) {
+  compareValues(desired, actual, options) {
+    const {
+      fuzzyMatching
+    } = options;
     if (Array.isArray(desired)) {
-      return desired.find(item => this.compareValues(item, actual));
+      return desired.find(item => this.compareValues(item, actual, options));
     }
     if (Array.isArray(actual)) {
-      return actual.find(actualItem => this.compareValues(desired, actualItem));
+      return actual.find(actualItem => this.compareValues(desired, actualItem, options));
     }
     if (actual?.Alphabetic) {
       actual = actual.Alphabetic;
     }
+    if (fuzzyMatching && typeof actual === 'string' && typeof desired === 'string') {
+      const normalizeValue = str => {
+        return str.toLowerCase();
+      };
+      const normalizedDesired = normalizeValue(desired);
+      const normalizedActual = normalizeValue(actual);
+      const tokenizeAndNormalize = str => str.split(/[\s^]+/).filter(Boolean);
+      const desiredTokens = tokenizeAndNormalize(normalizedDesired);
+      const actualTokens = tokenizeAndNormalize(normalizedActual);
+      return desiredTokens.every(desiredToken => actualTokens.some(actualToken => actualToken.startsWith(desiredToken)));
+    }
     if (typeof actual == 'string') {
       if (actual.length === 0) {
         return true;
@@ -1107,7 +1127,7 @@ class StaticWadoClient extends dicomweb_client_es/* api */.FH.DICOMwebClient {
     }
     const dash = range.indexOf('-');
     if (dash === -1) {
-      return this.compareValues(range, value);
+      return this.compareValues(range, value, {});
     }
     const start = range.substring(0, dash);
     const end = range.substring(dash + 1);
@@ -1124,6 +1144,13 @@ class StaticWadoClient extends dicomweb_client_es/* api */.FH.DICOMwebClient {
    * @returns
    */
   filterItem(key, queryParams, study, sourceFilterMap) {
+    const isName = key => key.indexOf('name') !== -1;
+    const {
+      supportsFuzzyMatching = false
+    } = this.config;
+    const options = {
+      fuzzyMatching: isName(key) && supportsFuzzyMatching
+    };
     const altKey = sourceFilterMap[key] || key;
     if (!queryParams) {
       return true;
@@ -1140,7 +1167,7 @@ class StaticWadoClient extends dicomweb_client_es/* api */.FH.DICOMwebClient {
       return this.compareDateRange(testValue, valueElem.Value[0]);
     }
     const value = valueElem.Value;
-    return this.compareValues(testValue, value);
+    return this.compareValues(testValue, value, options);
   }
 
   /** Converts the query parameters to lower case query parameters */
@@ -1383,7 +1410,7 @@ function fixBulkDataURI(value, instance, dicomWebConfig) {
   }
 }
 
-;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/index.js
+;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/index.ts
 
 
 
@@ -1406,44 +1433,22 @@ const ImplementationClassUID = '2.25.270695996825855179949881587723571202391.2.0
 const ImplementationVersionName = 'OHIF-VIEWER-2.0.0';
 const EXPLICIT_VR_LITTLE_ENDIAN = '1.2.840.10008.1.2.1';
 const metadataProvider = src/* classes */.Ly.MetadataProvider;
-
 /**
  * Creates a DICOM Web API based on the provided configuration.
  *
- * @param {object} dicomWebConfig - Configuration for the DICOM Web API
- * @param {string} dicomWebConfig.name - Data source name
- * @param {string} dicomWebConfig.wadoUriRoot - Legacy? (potentially unused/replaced)
- * @param {string} dicomWebConfig.qidoRoot - Base URL to use for QIDO requests
- * @param {string} dicomWebConfig.wadoRoot - Base URL to use for WADO requests
- * @param {string} dicomWebConfig.wadoUri - Base URL to use for WADO URI requests
- * @param {boolean} dicomWebConfig.qidoSupportsIncludeField - Whether QIDO supports the "Include" option to request additional fields in response
- * @param {string} dicomWebConfig.imageRendering - wadors | ? (unsure of where/how this is used)
- * @param {string} dicomWebConfig.thumbnailRendering - wadors | ? (unsure of where/how this is used)
- * @param {boolean} dicomWebConfig.supportsReject - Whether the server supports reject calls (i.e. DCM4CHEE)
- * @param {boolean} dicomWebConfig.lazyLoadStudy - "enableStudyLazyLoad"; Request series meta async instead of blocking
- * @param {string|boolean} dicomWebConfig.singlepart - indicates if the retrieves can fetch singlepart. Options are bulkdata, video, image, or boolean true
- * @param {string} dicomWebConfig.requestTransferSyntaxUID - Transfer syntax to request from the server
- * @param {object} dicomWebConfig.acceptHeader - Accept header to use for requests
- * @param {boolean} dicomWebConfig.omitQuotationForMultipartRequest - Whether to omit quotation marks for multipart requests
- * @param {boolean} dicomWebConfig.supportsFuzzyMatching - Whether the server supports fuzzy matching
- * @param {boolean} dicomWebConfig.supportsWildcard - Whether the server supports wildcard matching
- * @param {boolean} dicomWebConfig.supportsNativeDICOMModel - Whether the server supports the native DICOM model
- * @param {boolean} dicomWebConfig.enableStudyLazyLoad - Whether to enable study lazy loading
- * @param {boolean} dicomWebConfig.enableRequestTag - Whether to enable request tag
- * @param {boolean} dicomWebConfig.enableStudyLazyLoad - Whether to enable study lazy loading
- * @param {boolean} dicomWebConfig.bulkDataURI - Whether to enable bulkDataURI
- * @param {function} dicomWebConfig.onConfiguration - Function that is called after the configuration is initialized
- * @param {boolean} dicomWebConfig.staticWado - Whether to use the static WADO client
- * @param {object} userAuthenticationService - User authentication service
- * @param {object} userAuthenticationService.getAuthorizationHeader - Function that returns the authorization header
- * @returns {object} - DICOM Web API object
+ * @param dicomWebConfig - Configuration for the DICOM Web API
+ * @returns DICOM Web API object
  */
 function createDicomWebApi(dicomWebConfig, servicesManager) {
   const {
-    userAuthenticationService,
-    customizationService
+    userAuthenticationService
   } = servicesManager.services;
-  let dicomWebConfigCopy, qidoConfig, wadoConfig, qidoDicomWebClient, wadoDicomWebClient, getAuthrorizationHeader, generateWadoHeader;
+  let dicomWebConfigCopy, qidoConfig, wadoConfig, qidoDicomWebClient, wadoDicomWebClient, getAuthorizationHeader, generateWadoHeader;
+  // Default to enabling bulk data retrieves, with no other customization as
+  // this is part of hte base standard.
+  dicomWebConfig.bulkDataURI ||= {
+    enabled: true
+  };
   const implementation = {
     initialize: ({
       params,
@@ -1456,7 +1461,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         });
       }
       dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));
-      getAuthrorizationHeader = () => {
+      getAuthorizationHeader = () => {
         const xhrRequestHeaders = {};
         const authHeaders = userAuthenticationService.getAuthorizationHeader();
         if (authHeaders && authHeaders.Authorization) {
@@ -1465,7 +1470,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         return xhrRequestHeaders;
       };
       generateWadoHeader = () => {
-        const authorizationHeader = getAuthrorizationHeader();
+        const authorizationHeader = getAuthorizationHeader();
         //Generate accept header depending on config params
         const formattedAcceptHeader = src/* utils */.Wp.generateAcceptHeader(dicomWebConfig.acceptHeader, dicomWebConfig.requestTransferSyntaxUID, dicomWebConfig.omitQuotationForMultipartRequest);
         return {
@@ -1478,14 +1483,16 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         staticWado: dicomWebConfig.staticWado,
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
-        errorInterceptor: src/* errorHandler */.r_.getHTTPErrorHandler()
+        errorInterceptor: src/* errorHandler */.r_.getHTTPErrorHandler(),
+        supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching
       };
       wadoConfig = {
         url: dicomWebConfig.wadoRoot,
         staticWado: dicomWebConfig.staticWado,
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
-        errorInterceptor: src/* errorHandler */.r_.getHTTPErrorHandler()
+        errorInterceptor: src/* errorHandler */.r_.getHTTPErrorHandler(),
+        supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching
       };
 
       // TODO -> Two clients sucks, but its better than 1000.
@@ -1497,7 +1504,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
       studies: {
         mapParams: mapParams.bind(),
         search: async function (origParams) {
-          qidoDicomWebClient.headers = getAuthrorizationHeader();
+          qidoDicomWebClient.headers = getAuthorizationHeader();
           const {
             studyInstanceUid,
             seriesInstanceUid,
@@ -1514,7 +1521,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
       series: {
         // mapParams: mapParams.bind(),
         search: async function (studyInstanceUid) {
-          qidoDicomWebClient.headers = getAuthrorizationHeader();
+          qidoDicomWebClient.headers = getAuthorizationHeader();
           const results = await seriesInStudy(qidoDicomWebClient, studyInstanceUid);
           return processSeriesResults(results);
         }
@@ -1522,7 +1529,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
       },
       instances: {
         search: (studyInstanceUid, queryParameters) => {
-          qidoDicomWebClient.headers = getAuthrorizationHeader();
+          qidoDicomWebClient.headers = getAuthorizationHeader();
           return search.call(undefined, qidoDicomWebClient, studyInstanceUid, null, queryParameters);
         }
       }
@@ -1557,7 +1564,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         StudyInstanceUID,
         BulkDataURI
       }) => {
-        qidoDicomWebClient.headers = getAuthrorizationHeader();
+        qidoDicomWebClient.headers = getAuthorizationHeader();
         const options = {
           multipart: false,
           BulkDataURI,
@@ -1589,7 +1596,7 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
     },
     store: {
       dicom: async (dataset, request, dicomDict) => {
-        wadoDicomWebClient.headers = getAuthrorizationHeader();
+        wadoDicomWebClient.headers = getAuthorizationHeader();
         if (dataset instanceof ArrayBuffer) {
           const options = {
             datasets: [dataset],
@@ -1686,7 +1693,8 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
           const value = naturalized[key];
           if (Array.isArray(value) && typeof value[0] === 'object') {
             // Fix recursive values
-            value.forEach(child => addRetrieveBulkDataNaturalized(child, instance));
+            const validValues = value.filter(Boolean);
+            validValues.forEach(child => addRetrieveBulkDataNaturalized(child, instance));
             continue;
           }
 
@@ -1726,23 +1734,35 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
         naturalizedInstances.forEach(instance => {
           instance.wadoRoot = dicomWebConfig.wadoRoot;
           instance.wadoUri = dicomWebConfig.wadoUri;
-          const imageId = implementation.getImageIdsForInstance({
-            instance
-          });
+          const {
+            StudyInstanceUID,
+            SeriesInstanceUID,
+            SOPInstanceUID
+          } = instance;
+          const numberOfFrames = instance.NumberOfFrames || 1;
+          // Process all frames consistently, whether single or multiframe
+          for (let i = 0; i < numberOfFrames; i++) {
+            const frameNumber = i + 1;
+            const frameImageId = implementation.getImageIdsForInstance({
+              instance,
+              frame: frameNumber
+            });
+            // Add imageId specific mapping to this data as the URL isn't necessarily WADO-URI.
+            metadataProvider.addImageIdToUIDs(frameImageId, {
+              StudyInstanceUID,
+              SeriesInstanceUID,
+              SOPInstanceUID,
+              frameNumber: numberOfFrames > 1 ? frameNumber : undefined
+            });
+          }
 
           // Adding imageId to each instance
           // Todo: This is not the best way I can think of to let external
           // metadata handlers know about the imageId that is stored in the store
-          instance.imageId = imageId;
-
-          // Adding UIDs to metadataProvider
-          // Note: storing imageURI in metadataProvider since stack viewports
-          // will use the same imageURI
-          metadataProvider.addImageIdToUIDs(imageId, {
-            StudyInstanceUID,
-            SeriesInstanceUID: instance.SeriesInstanceUID,
-            SOPInstanceUID: instance.SOPInstanceUID
+          const imageId = implementation.getImageIdsForInstance({
+            instance
           });
+          instance.imageId = imageId;
         });
         src/* DicomMetadataStore */.H8.addInstances(naturalizedInstances, madeInClient);
       }
@@ -1821,17 +1841,15 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
       params,
       query
     }) {
-      const {
-        StudyInstanceUIDs: paramsStudyInstanceUIDs
-      } = params;
-      const queryStudyInstanceUIDs = src/* utils */.Wp.splitComma(query.getAll('StudyInstanceUIDs'));
+      const paramsStudyInstanceUIDs = params.StudyInstanceUIDs || params.studyInstanceUIDs;
+      const queryStudyInstanceUIDs = src/* utils */.Wp.splitComma(query.getAll('StudyInstanceUIDs').concat(query.getAll('studyInstanceUIDs')));
       const StudyInstanceUIDs = queryStudyInstanceUIDs.length && queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
       const StudyInstanceUIDsAsArray = StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs) ? StudyInstanceUIDs : [StudyInstanceUIDs];
       return StudyInstanceUIDsAsArray;
     }
   };
   if (dicomWebConfig.supportsReject) {
-    implementation.reject = dcm4cheeReject(dicomWebConfig.wadoRoot);
+    implementation.reject = dcm4cheeReject(dicomWebConfig.wadoRoot, getAuthorizationHeader);
   }
   return src/* IWebApiDataSource */.pt.create(implementation);
 }
@@ -1964,7 +1982,7 @@ function createDicomJSONApi(dicomJsonConfig) {
               query
             } = query_string.parseUrl(instance.url);
 
-            // Add imageId specific mapping to this data as the URL isn't necessarliy WADO-URI.
+            // Add imageId specific mapping to this data as the URL isn't necessarily WADO-URI.
             DicomJSONDataSource_metadataProvider.addImageIdToUIDs(imageId, {
               StudyInstanceUID,
               SeriesInstanceUID,
@@ -2388,14 +2406,17 @@ function createDicomLocalApi(dicomLocalConfig) {
       instance,
       frame
     }) {
-      if (instance.imageId) {
-        return instance.imageId;
-      }
+      // Important: Never use instance.imageId because it might be multiframe,
+      // which would make it an invalid imageId.
+      // if (instance.imageId) {
+      //   return instance.imageId;
+      // }
+
       const {
         StudyInstanceUID,
-        SeriesInstanceUID,
-        SOPInstanceUID
+        SeriesInstanceUID
       } = instance;
+      const SOPInstanceUID = instance.SOPInstanceUID || instance.SopInstanceUID;
       const storedInstance = src/* DicomMetadataStore */.H8.getInstance(StudyInstanceUID, SeriesInstanceUID, SOPInstanceUID);
       let imageId = storedInstance.url;
       if (frame !== undefined) {
@@ -2825,18 +2846,16 @@ var react = __webpack_require__(86326);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(97598);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 690 modules
-var ui_src = __webpack_require__(35647);
+// EXTERNAL MODULE: ../../ui/src/index.js + 691 modules
+var ui_src = __webpack_require__(32907);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(45981);
 // EXTERNAL MODULE: ../../../node_modules/react-router-dom/dist/index.js
 var dist = __webpack_require__(4194);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(99993);
-// EXTERNAL MODULE: ../../../node_modules/react-router/dist/index.js
-var react_router_dist = __webpack_require__(42277);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2483 modules
-var ui_next_src = __webpack_require__(35570);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2624 modules
+var ui_next_src = __webpack_require__(18817);
 // EXTERNAL MODULE: ../../i18n/src/index.js + 150 modules
 var i18n_src = __webpack_require__(16076);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/Toolbar.tsx
@@ -2918,7 +2937,7 @@ function usePatientInfo(servicesManager) {
     }
     setPatientInfo({
       PatientID: instance.PatientID || null,
-      PatientName: instance.PatientName ? formatPN(instance.PatientName.Alphabetic) : null,
+      PatientName: instance.PatientName ? formatPN(instance.PatientName) : null,
       PatientSex: instance.PatientSex || null,
       PatientDOB: formatDate(instance.PatientBirthDate) || null
     });
@@ -2991,7 +3010,7 @@ function HeaderPatientInfo({
     className: "text-aqua-pale flex gap-2 text-[11px]"
   }, /*#__PURE__*/react.createElement("div", null, formattedPatientID), /*#__PURE__*/react.createElement("div", null, patientInfo.PatientSex), /*#__PURE__*/react.createElement("div", null, patientInfo.PatientDOB))) : /*#__PURE__*/react.createElement("div", {
     className: "text-primary-active self-center text-[13px]"
-  }, isMixedPatients ? 'Multiple Patients' : 'Patient')), /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ChevronPatient, {
+  }, isMixedPatients ? 'Multiple Patients' : 'Patient')), /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ArrowLeft, {
     className: `text-primary-active ${expanded ? 'rotate-180' : ''}`
   }));
 }
@@ -2999,6 +3018,8 @@ function HeaderPatientInfo({
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/HeaderPatientInfo/index.js
 
 /* harmony default export */ const ViewerLayout_HeaderPatientInfo = (HeaderPatientInfo_HeaderPatientInfo);
+// EXTERNAL MODULE: ./index.js + 43 modules
+var index = __webpack_require__(50484);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/ViewerHeader.tsx
 
 
@@ -3023,25 +3044,21 @@ function ViewerHeader({
   appConfig
 }) {
   const navigate = (0,dist/* useNavigate */.Zp)();
-  const location = (0,react_router_dist/* useLocation */.zy)();
+  const location = (0,dist/* useLocation */.zy)();
   const onClickReturnButton = () => {
     const {
       pathname
     } = location;
     const dataSourceIdx = pathname.indexOf('/', 1);
-    const query = new URLSearchParams(window.location.search);
-    const configUrl = query.get('configUrl');
     const dataSourceName = pathname.substring(dataSourceIdx + 1);
     const existingDataSource = extensionManager.getDataSources(dataSourceName);
     const searchQuery = new URLSearchParams();
     if (dataSourceIdx !== -1 && existingDataSource) {
       searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
     }
-    if (configUrl) {
-      searchQuery.append('configUrl', configUrl);
-    }
+    (0,index/* preserveQueryParameters */.Nn)(searchQuery);
     navigate({
-      pathname: '/',
+      pathname: index/* publicUrl */.x6,
       search: decodeURIComponent(searchQuery.toString())
     });
   };
@@ -3056,8 +3073,8 @@ function ViewerHeader({
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.10.0-beta.8";
-  const commitHash = "44648eef92265f0a80c0c72ca1729d6eca6c4178";
+  const versionNumber = "3.10.0-beta.80";
+  const commitHash = "054b262e9cbeb0f44de65d05641efe1e8944a4f5";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -3140,38 +3157,41 @@ const SidePanelWithServices = ({
   servicesManager,
   side,
   activeTabIndex: activeTabIndexProp,
+  isExpanded,
   tabs: tabsProp,
-  expandedWidth,
+  onOpen,
+  onClose,
   ...props
 }) => {
   const panelService = servicesManager?.services?.panelService;
 
   // Tracks whether this SidePanel has been opened at least once since this SidePanel was inserted into the DOM.
   // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
-  const [sidePanelOpen, setSidePanelOpen] = (0,react.useState)(activeTabIndexProp !== null);
-  const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp);
+  const [sidePanelExpanded, setSidePanelExpanded] = (0,react.useState)(isExpanded);
+  const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp ?? 0);
+  const [closedManually, setClosedManually] = (0,react.useState)(false);
   const [tabs, setTabs] = (0,react.useState)(tabsProp ?? panelService.getPanels(side));
   const handleActiveTabIndexChange = (0,react.useCallback)(({
     activeTabIndex
   }) => {
     setActiveTabIndex(activeTabIndex);
-    setSidePanelOpen(activeTabIndex !== null);
   }, []);
   const handleOpen = (0,react.useCallback)(() => {
-    setSidePanelOpen(true);
-    // If panel is being opened but no tab is active, set first tab as active
-    if (activeTabIndex === null && tabs.length > 0) {
-      setActiveTabIndex(0);
-    }
-  }, [activeTabIndex, tabs]);
+    setSidePanelExpanded(true);
+    onOpen?.();
+  }, [onOpen]);
   const handleClose = (0,react.useCallback)(() => {
-    setSidePanelOpen(false);
-    setActiveTabIndex(null);
-  }, []);
+    setSidePanelExpanded(false);
+    setClosedManually(true);
+    onClose?.();
+  }, [onClose]);
+  (0,react.useEffect)(() => {
+    setSidePanelExpanded(isExpanded);
+  }, [isExpanded]);
 
   /** update the active tab index from outside */
   (0,react.useEffect)(() => {
-    setActiveTabIndex(activeTabIndexProp);
+    setActiveTabIndex(activeTabIndexProp ?? 0);
   }, [activeTabIndexProp]);
   (0,react.useEffect)(() => {
     const {
@@ -3188,9 +3208,12 @@ const SidePanelWithServices = ({
   }, [panelService, side]);
   (0,react.useEffect)(() => {
     const activatePanelSubscription = panelService.subscribe(panelService.EVENTS.ACTIVATE_PANEL, activatePanelEvent => {
-      if (sidePanelOpen || activatePanelEvent.forceActive) {
+      if (sidePanelExpanded || activatePanelEvent.forceActive) {
         const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
         if (tabIndex !== -1) {
+          if (!closedManually) {
+            setSidePanelExpanded(true);
+          }
           setActiveTabIndex(tabIndex);
         }
       }
@@ -3198,19 +3221,310 @@ const SidePanelWithServices = ({
     return () => {
       activatePanelSubscription.unsubscribe();
     };
-  }, [tabs, sidePanelOpen, panelService]);
+  }, [tabs, sidePanelExpanded, panelService, closedManually]);
   return /*#__PURE__*/react.createElement(ui_next_src/* SidePanel */.d_, SidePanelWithServices_extends({}, props, {
     side: side,
     tabs: tabs,
     activeTabIndex: activeTabIndex,
+    isExpanded: sidePanelExpanded,
     onOpen: handleOpen,
     onClose: handleClose,
-    onActiveTabIndexChange: handleActiveTabIndexChange,
-    expandedWidth: expandedWidth
+    onActiveTabIndexChange: handleActiveTabIndexChange
   }));
 };
 /* 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 = 0;
+const collapsedInsideBorderSize = 4;
+const collapsedOutsideBorderSize = 4;
+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
+
+
+
+
+/**
+ * Set the minimum and maximum css style width attributes for the given element.
+ * The two style attributes are cleared whenever the width
+ * argument is undefined.
+ * <p>
+ * This utility is used as part of a HACK throughout the ViewerLayout component as
+ * the means of restricting the side panel widths during the resizing of the
+ * browser window. In general, the widths are always set unless the resize
+ * handle for either side panel is being dragged (i.e. a side panel is being resized).
+ *
+ * @param elem the element
+ * @param width the max and min width to set on the element
+ */
+const setMinMaxWidth = (elem, width) => {
+  elem.style.minWidth = width === undefined ? '' : `${width}px`;
+  elem.style.maxWidth = elem.style.minWidth;
+};
+const useResizablePanels = (leftPanelClosed, setLeftPanelClosed, rightPanelClosed, setRightPanelClosed) => {
+  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 [leftResizablePanelCollapsedSize, 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);
+  const resizableLeftPanelAPIRef = (0,react.useRef)(null);
+  const resizableRightPanelAPIRef = (0,react.useRef)(null);
+  const isResizableHandleDraggingRef = (0,react.useRef)(false);
+
+  // The total width of both handles.
+  const resizableHandlesWidth = (0,react.useRef)(null);
+
+  // This useLayoutEffect is used to...
+  // - Grab a reference to the various resizable panel elements needed for
+  //   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)(panelGroupDefinition.groupId);
+    resizablePanelGroupElemRef.current = panelGroupElem;
+    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)(panelGroupDefinition.right.panelId);
+    resizableRightPanelElemRef.current = rightPanelElem;
+
+    // Calculate and set the width of both handles combined.
+    const resizeHandles = document.querySelectorAll('[data-panel-resize-handle-id]');
+    resizableHandlesWidth.current = 0;
+    resizeHandles.forEach(resizeHandle => {
+      resizableHandlesWidth.current += resizeHandle.offsetWidth;
+    });
+
+    // 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) {
+      const leftResizablePanelExpandedSize = getPercentageSize(panelGroupDefinition.left.initialExpandedOffsetWidth);
+      resizableLeftPanelAPIRef?.current?.expand(leftResizablePanelExpandedSize);
+      setMinMaxWidth(leftPanelElem, panelGroupDefinition.left.initialExpandedOffsetWidth);
+    }
+    if (!rightPanelClosed) {
+      const rightResizablePanelExpandedSize = getPercentageSize(panelGroupDefinition.right.initialExpandedOffsetWidth);
+      resizableRightPanelAPIRef?.current?.expand(rightResizablePanelExpandedSize);
+      setMinMaxWidth(rightPanelElem, panelGroupDefinition.right.initialExpandedOffsetWidth);
+    }
+  }, []); // no dependencies because this useLayoutEffect is only needed on the very first render
+
+  // This useLayoutEffect follows the pattern prescribed by the react-resizable-panels
+  // readme for converting between pixel values and percentages. An example of
+  // the pattern can be found here:
+  // https://github.com/bvaughn/react-resizable-panels/issues/46#issuecomment-1368108416
+  // This useLayoutEffect is used to...
+  // - Ensure that the percentage size is up-to-date with the pixel sizes
+  // - Add a resize observer to the resizable panel group to reset various state
+  //   values whenever the resizable panel group is resized (e.g. whenever the
+  //   browser window is resized).
+  (0,react.useLayoutEffect)(() => {
+    // Ensure the side panels' percentage size is in synch with the pixel width of the
+    // expanded side panels. In general the two get out-of-sync during a browser
+    // window resize. Note that this code is here and NOT in the ResizeObserver
+    // because it has to be done AFTER the minimum percentage size for a panel is
+    // updated which occurs only AFTER the render following a browser window resize.
+    // And by virtue of the dependency on the minimum size state variables, this code
+    // is executed on the render following an update of the minimum percentage sizes
+    // for a panel.
+    if (!resizableLeftPanelAPIRef.current.isCollapsed()) {
+      const leftSize = getPercentageSize(leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
+      resizableLeftPanelAPIRef.current.resize(leftSize);
+    }
+    if (!resizableRightPanelAPIRef.current.isCollapsed()) {
+      const rightSize = getPercentageSize(rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
+      resizableRightPanelAPIRef.current.resize(rightSize);
+    }
+
+    // This observer kicks in when the ViewportLayout resizable panel group
+    // component is resized. This typically occurs when the browser window resizes.
+    const observer = new ResizeObserver(() => {
+      const minimumLeftSize = getPercentageSize(panelGroupDefinition.left.minimumExpandedOffsetWidth);
+      const minimumRightSize = getPercentageSize(panelGroupDefinition.right.minimumExpandedOffsetWidth);
+
+      // Set the new minimum and collapsed resizable panel sizes.
+      setLeftResizablePanelMinimumSize(minimumLeftSize);
+      setRightResizablePanelMinimumSize(minimumRightSize);
+      setLeftResizePanelCollapsedSize(getPercentageSize(panelGroupDefinition.left.collapsedOffsetWidth));
+      setRightResizePanelCollapsedSize(getPercentageSize(panelGroupDefinition.right.collapsedOffsetWidth));
+    });
+    observer.observe(resizablePanelGroupElemRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [leftPanelExpandedWidth, rightPanelExpandedWidth, leftResizablePanelMinimumSize, rightResizablePanelMinimumSize]);
+
+  /**
+   * Handles dragging of either side panel resize handle.
+   */
+  const onHandleDragging = (0,react.useCallback)(isStartDrag => {
+    if (isStartDrag) {
+      isResizableHandleDraggingRef.current = true;
+      setMinMaxWidth(resizableLeftPanelElemRef.current);
+      setMinMaxWidth(resizableRightPanelElemRef.current);
+    } else {
+      isResizableHandleDraggingRef.current = false;
+      if (resizableLeftPanelAPIRef?.current?.isExpanded()) {
+        setMinMaxWidth(resizableLeftPanelElemRef.current, leftPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
+      }
+      if (resizableRightPanelAPIRef?.current?.isExpanded()) {
+        setMinMaxWidth(resizableRightPanelElemRef.current, rightPanelExpandedWidth + panelGroupDefinition.shared.expandedInsideBorderSize);
+      }
+    }
+  }, [leftPanelExpandedWidth, rightPanelExpandedWidth]);
+  const onLeftPanelClose = (0,react.useCallback)(() => {
+    setLeftPanelClosed(true);
+    setMinMaxWidth(resizableLeftPanelElemRef.current);
+    resizableLeftPanelAPIRef?.current?.collapse();
+  }, [setLeftPanelClosed]);
+  const onLeftPanelOpen = (0,react.useCallback)(() => {
+    resizableLeftPanelAPIRef?.current?.expand(getPercentageSize(panelGroupDefinition.left.initialExpandedOffsetWidth));
+    setLeftPanelClosed(false);
+  }, [setLeftPanelClosed]);
+  const onLeftPanelResize = (0,react.useCallback)(size => {
+    if (!resizablePanelGroupElemRef?.current || resizableLeftPanelAPIRef.current.isCollapsed()) {
+      return;
+    }
+    const newExpandedWidth = getExpandedPixelWidth(size);
+    setLeftPanelExpandedWidth(newExpandedWidth);
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the left panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onLeftPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableLeftPanelElemRef.current, newExpandedWidth);
+    }
+  }, []);
+  const onRightPanelClose = (0,react.useCallback)(() => {
+    setRightPanelClosed(true);
+    setMinMaxWidth(resizableRightPanelElemRef.current);
+    resizableRightPanelAPIRef?.current?.collapse();
+  }, [setRightPanelClosed]);
+  const onRightPanelOpen = (0,react.useCallback)(() => {
+    resizableRightPanelAPIRef?.current?.expand(getPercentageSize(panelGroupDefinition.right.initialExpandedOffsetWidth));
+    setRightPanelClosed(false);
+  }, [setRightPanelClosed]);
+  const onRightPanelResize = (0,react.useCallback)(size => {
+    if (!resizablePanelGroupElemRef?.current || resizableRightPanelAPIRef.current.isCollapsed()) {
+      return;
+    }
+    const newExpandedWidth = getExpandedPixelWidth(size);
+    setRightPanelExpandedWidth(newExpandedWidth);
+    if (!isResizableHandleDraggingRef.current) {
+      // This typically gets executed when the right panel is expanded via one of the UI
+      // buttons. It is done here instead of in the onRightPanelOpen method
+      // because here we know the size of the expanded panel.
+      setMinMaxWidth(resizableRightPanelElemRef.current, newExpandedWidth);
+    }
+  }, []);
+
+  /**
+   * Gets the percentage size corresponding to the given pixel size.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getPercentageSize = pixelSize => {
+    const {
+      width: panelGroupWidth
+    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    return pixelSize / (panelGroupWidth - resizableHandlesWidth.current) * 100;
+  };
+
+  /**
+   * Gets the width in pixels for an expanded panel given its percentage size/width.
+   * Note that the width attributed to the handles must be taken into account.
+   */
+  const getExpandedPixelWidth = percentageSize => {
+    const {
+      width: panelGroupWidth
+    } = resizablePanelGroupElemRef.current.getBoundingClientRect();
+    const expandedWidth = percentageSize / 100 * (panelGroupWidth - resizableHandlesWidth.current) - panelGroupDefinition.shared.expandedInsideBorderSize;
+    return expandedWidth;
+  };
+  return [{
+    expandedWidth: leftPanelExpandedWidth,
+    collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
+    collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
+    collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
+    expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
+    onClose: onLeftPanelClose,
+    onOpen: onLeftPanelOpen
+  }, {
+    expandedWidth: rightPanelExpandedWidth,
+    collapsedWidth: panelGroupDefinition.shared.collapsedWidth,
+    collapsedInsideBorderSize: panelGroupDefinition.shared.collapsedInsideBorderSize,
+    collapsedOutsideBorderSize: panelGroupDefinition.shared.collapsedOutsideBorderSize,
+    expandedInsideBorderSize: panelGroupDefinition.shared.expandedInsideBorderSize,
+    onClose: onRightPanelClose,
+    onOpen: onRightPanelOpen
+  }, {
+    direction: 'horizontal',
+    id: panelGroupDefinition.groupId
+  }, {
+    defaultSize: leftResizablePanelMinimumSize,
+    minSize: leftResizablePanelMinimumSize,
+    onResize: onLeftPanelResize,
+    collapsible: true,
+    collapsedSize: leftResizablePanelCollapsedSize,
+    onCollapse: () => setLeftPanelClosed(true),
+    onExpand: () => setLeftPanelClosed(false),
+    ref: resizableLeftPanelAPIRef,
+    order: 0,
+    id: panelGroupDefinition.left.panelId
+  }, {
+    order: 1,
+    id: 'viewerLayoutResizableViewportGridPanel'
+  }, {
+    defaultSize: rightResizablePanelMinimumSize,
+    minSize: rightResizablePanelMinimumSize,
+    onResize: onRightPanelResize,
+    collapsible: true,
+    collapsedSize: rightResizePanelCollapsedSize,
+    onCollapse: () => setRightPanelClosed(true),
+    onExpand: () => setRightPanelClosed(false),
+    ref: resizableRightPanelAPIRef,
+    order: 2,
+    id: panelGroupDefinition.right.panelId
+  }, onHandleDragging];
+};
+/* harmony default export */ const ResizablePanelsHook = (useResizablePanels);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
+function ViewerLayout_extends() { return ViewerLayout_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; }, ViewerLayout_extends.apply(null, arguments); }
+
 
 
 
@@ -3219,6 +3533,7 @@ const SidePanelWithServices = ({
 
 
 
+const resizableHandleClassName = 'mt-[1px] bg-black';
 function ViewerLayout({
   // From Extension Module Params
   extensionManager,
@@ -3229,7 +3544,9 @@ function ViewerLayout({
   viewports,
   ViewportGridComp,
   leftPanelClosed = false,
-  rightPanelClosed = false
+  rightPanelClosed = false,
+  leftPanelResizable = false,
+  rightPanelResizable = false
 }) {
   const [appConfig] = (0,state/* useAppConfig */.r)();
   const {
@@ -3242,6 +3559,7 @@ function ViewerLayout({
   const [hasLeftPanels, setHasLeftPanels] = (0,react.useState)(hasPanels('left'));
   const [leftPanelClosedState, setLeftPanelClosed] = (0,react.useState)(leftPanelClosed);
   const [rightPanelClosedState, setRightPanelClosed] = (0,react.useState)(rightPanelClosed);
+  const [leftPanelProps, rightPanelProps, resizablePanelGroupProps, resizableLeftPanelProps, resizableViewportGridPanelProps, resizableRightPanelProps, onHandleDragging] = ResizablePanelsHook(leftPanelClosed, setLeftPanelClosed, rightPanelClosed, setRightPanelClosed);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -3321,11 +3639,15 @@ function ViewerLayout({
     }
   }, /*#__PURE__*/react.createElement(react.Fragment, null, showLoadingIndicator && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.Jx, {
     className: "h-full w-full bg-black"
-  }), hasLeftPanels ? /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
+  }), /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanelGroup */.HK, resizablePanelGroupProps, hasLeftPanels ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanel */.wV, resizableLeftPanelProps, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, ViewerLayout_extends({
     side: "left",
-    activeTabIndex: leftPanelClosedState ? null : 0,
+    isExpanded: !leftPanelClosedState,
     servicesManager: servicesManager
-  }) : null, /*#__PURE__*/react.createElement("div", {
+  }, leftPanelProps))), /*#__PURE__*/react.createElement(ui_next_src/* ResizableHandle */.WM, {
+    onDragging: onHandleDragging,
+    disabled: !leftPanelResizable,
+    className: resizableHandleClassName
+  })) : null, /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanel */.wV, resizableViewportGridPanelProps, /*#__PURE__*/react.createElement("div", {
     className: "flex h-full flex-1 flex-col"
   }, /*#__PURE__*/react.createElement("div", {
     className: "relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
@@ -3333,11 +3655,15 @@ function ViewerLayout({
     servicesManager: servicesManager,
     viewportComponents: viewportComponents,
     commandsManager: commandsManager
-  }))), hasRightPanels ? /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
+  })))), hasRightPanels ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_next_src/* ResizableHandle */.WM, {
+    onDragging: onHandleDragging,
+    disabled: !rightPanelResizable,
+    className: resizableHandleClassName
+  }), /*#__PURE__*/react.createElement(ui_next_src/* ResizablePanel */.wV, resizableRightPanelProps, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, ViewerLayout_extends({
     side: "right",
-    activeTabIndex: rightPanelClosedState ? null : 0,
+    isExpanded: !rightPanelClosedState,
     servicesManager: servicesManager
-  }) : null)), /*#__PURE__*/react.createElement(ui_next_src/* Onboarding */.M7, null), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.j, {
+  }, rightPanelProps)))) : null))), /*#__PURE__*/react.createElement(ui_next_src/* Onboarding */.M7, null), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.j, {
     dialogConfiguration: appConfig?.investigationalUseDialog
   }));
 }
@@ -3453,6 +3779,84 @@ const defaultViewPresets = [{
 
 
 
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/MoreDropdownMenu.tsx
+
+
+
+/**
+ * The default sub-menu appearance and setup is defined here, but this can be
+ * replaced by
+ */
+const getMenuItemsDefault = ({
+  commandsManager,
+  items,
+  servicesManager,
+  ...props
+}) => {
+  const {
+    customizationService
+  } = servicesManager.services;
+
+  // This allows replacing the default child item for menus, whereas the entire
+  // getMenuItems can also be replaced by providing it to the MoreDropdownMenu
+  const menuContent = customizationService.getCustomization('ohif.menuContent');
+  return /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuContent */.SQ, {
+    hideWhenDetached: true,
+    align: "start",
+    onClick: e => {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, items?.map((item, index) => /*#__PURE__*/react.createElement(menuContent.content, {
+    key: item.id || `menu-item-${index}`,
+    item,
+    commandsManager,
+    servicesManager,
+    ...props
+  })));
+};
+
+/**
+ * The component provides a ... sub-menu for various components which appears
+ * on hover over the main component.
+ *
+ * @param bindProps - properties to define the sub-menu
+ * @returns Component bound to the bindProps
+ */
+function MoreDropdownMenu(bindProps) {
+  const {
+    menuItemsKey,
+    getMenuItems = getMenuItemsDefault,
+    commandsManager,
+    servicesManager
+  } = bindProps;
+  const {
+    customizationService
+  } = servicesManager.services;
+  const items = customizationService.getCustomization(menuItemsKey);
+  if (!items?.length) {
+    return null;
+  }
+  function BoundMoreDropdownMenu(props) {
+    return /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenu */.rI, null, /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuTrigger */.ty, {
+      asChild: true
+    }, /*#__PURE__*/react.createElement(ui_next_src/* Button */.$n, {
+      variant: "ghost",
+      size: "icon",
+      className: "hidden group-hover:inline-flex data-[state=open]:inline-flex",
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.More, null))), getMenuItems({
+      ...props,
+      commandsManager: commandsManager,
+      servicesManager: servicesManager,
+      items
+    }));
+  }
+  return BoundMoreDropdownMenu;
+}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx
 
 
@@ -3462,6 +3866,8 @@ const defaultViewPresets = [{
 
 
 
+
+
 const {
   sortStudyInstances,
   formatDate: PanelStudyBrowser_formatDate,
@@ -3498,14 +3904,14 @@ function PanelStudyBrowser({
     activeViewportId,
     viewports,
     isHangingProtocolLayout
-  }, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
+  }, viewportGridService] = (0,ui_next_src/* useViewportGrid */.ih)();
   const [activeTabName, setActiveTabName] = (0,react.useState)('all');
   const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = (0,react.useState)([...StudyInstanceUIDs]);
   const [hasLoadedViewports, setHasLoadedViewports] = (0,react.useState)(false);
   const [studyDisplayList, setStudyDisplayList] = (0,react.useState)([]);
   const [displaySets, setDisplaySets] = (0,react.useState)([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = (0,react.useState)({});
-  const [viewPresets, setViewPresets] = (0,react.useState)(customizationService.getCustomization('studyBrowser.viewPresets')?.value || defaultViewPresets);
+  const [viewPresets, setViewPresets] = (0,react.useState)(customizationService.getCustomization('studyBrowser.viewPresets'));
   const [actionIcons, setActionIcons] = (0,react.useState)(defaultActionIcons);
 
   // multiple can be true or false
@@ -3699,9 +4105,6 @@ function PanelStudyBrowser({
     }
   }
   const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
-  const onThumbnailContextMenu = (commandName, options) => {
-    commandsManager.runCommand(commandName, options);
-  };
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(PanelStudyBrowserHeader, {
     viewPresets: viewPresets,
     updateViewPresetValue: updateViewPresetValue,
@@ -3715,16 +4118,26 @@ function PanelStudyBrowser({
     tabs: tabs,
     servicesManager: servicesManager,
     activeTabName: activeTabName,
-    onDoubleClickThumbnail: onDoubleClickThumbnailHandler,
-    activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
     expandedStudyInstanceUIDs: expandedStudyInstanceUIDs,
     onClickStudy: _handleStudyClick,
     onClickTab: clickedTabName => {
       setActiveTabName(clickedTabName);
     },
+    onClickThumbnail: () => {},
+    onDoubleClickThumbnail: onDoubleClickThumbnailHandler,
+    activeDisplaySetInstanceUIDs: activeDisplaySetInstanceUIDs,
     showSettings: actionIcons.find(icon => icon.id === 'settings').value,
     viewPresets: viewPresets,
-    onThumbnailContextMenu: onThumbnailContextMenu
+    ThumbnailMenuItems: MoreDropdownMenu({
+      commandsManager,
+      servicesManager,
+      menuItemsKey: 'studyBrowser.thumbnailMenuItems'
+    }),
+    StudyMenuItems: MoreDropdownMenu({
+      commandsManager,
+      servicesManager,
+      menuItemsKey: 'studyBrowser.studyMenuItems'
+    })
   }));
 }
 /* harmony default export */ const StudyBrowser_PanelStudyBrowser = (PanelStudyBrowser);
@@ -3824,7 +4237,7 @@ function requestDisplaySetCreationForStudy(dataSource, displaySetService, StudyI
   if (displaySetService.activeDisplaySets.some(displaySet => displaySet.StudyInstanceUID === StudyInstanceUID)) {
     return;
   }
-  dataSource.retrieve.series.metadata({
+  return dataSource.retrieve.series.metadata({
     StudyInstanceUID,
     madeInClient
   });
@@ -3847,18 +4260,19 @@ function requestDisplaySetCreationForStudy(dataSource, displaySetService, StudyI
  * @param {object} extensionManager
  */
 function WrappedPanelStudyBrowser({
-  commandsManager,
   extensionManager,
-  servicesManager
+  servicesManager,
+  commandsManager
 }) {
   // TODO: This should be made available a different way; route should have
   // already determined our datasource
-  const dataSource = extensionManager.getDataSources()[0];
+  const [dataSource] = extensionManager.getActiveDataSource();
   const _getStudiesForPatientByMRN = Panels_getStudiesForPatientByMRN.bind(null, dataSource);
   const _getImageSrcFromImageId = (0,react.useCallback)(_createGetImageSrcFromImageIdFn(extensionManager), []);
   const _requestDisplaySetCreationForStudy = Panels_requestDisplaySetCreationForStudy.bind(null, dataSource);
   return /*#__PURE__*/react.createElement(StudyBrowser_PanelStudyBrowser, {
     servicesManager: servicesManager,
+    commandsManager: commandsManager,
     dataSource: dataSource,
     getImageSrc: _getImageSrcFromImageId,
     getStudiesForPatientByMRN: _getStudiesForPatientByMRN,
@@ -4133,7 +4547,7 @@ function areAllImageDimensionsEqual(instances) {
       Rows,
       Columns
     } = instance;
-    if (Rows !== firstImageRows || Columns !== firstImageColumns) {
+    if ((0,toNumber/* default */.A)(Rows) !== firstImageRows || (0,toNumber/* default */.A)(Columns) !== firstImageColumns) {
       return false;
     }
   }
@@ -4240,6 +4654,9 @@ function areAllImagePositionsEqual(instances) {
   const scanAxisNormal = calculateScanAxisNormal(firstImageOrientationPatient);
   const firstImagePositionPatient = (0,toNumber/* default */.A)(instances[0].ImagePositionPatient);
   const lastIpp = (0,toNumber/* default */.A)(instances[instances.length - 1].ImagePositionPatient);
+  if (!firstImagePositionPatient || !lastIpp) {
+    return false;
+  }
   const averageSpacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.jj)(firstImagePositionPatient, lastIpp) / (instances.length - 1);
   let previousImagePositionPatient = firstImagePositionPatient;
   for (let i = 1; i < instances.length; i++) {
@@ -4714,70 +5131,6 @@ function ToolbarLayoutSelector_extends() { return ToolbarLayoutSelector_extends
 
 
 
-const defaultCommonPresets = [{
-  icon: 'layout-common-1x1',
-  commandOptions: {
-    numRows: 1,
-    numCols: 1
-  }
-}, {
-  icon: 'layout-common-1x2',
-  commandOptions: {
-    numRows: 1,
-    numCols: 2
-  }
-}, {
-  icon: 'layout-common-2x2',
-  commandOptions: {
-    numRows: 2,
-    numCols: 2
-  }
-}, {
-  icon: 'layout-common-2x3',
-  commandOptions: {
-    numRows: 2,
-    numCols: 3
-  }
-}];
-const _areSelectorsValid = (hp, displaySets, hangingProtocolService) => {
-  if (!hp.displaySetSelectors || Object.values(hp.displaySetSelectors).length === 0) {
-    return true;
-  }
-  return hangingProtocolService.areRequiredSelectorsValid(Object.values(hp.displaySetSelectors), displaySets[0]);
-};
-const generateAdvancedPresets = ({
-  servicesManager
-}) => {
-  const {
-    hangingProtocolService,
-    viewportGridService,
-    displaySetService
-  } = servicesManager.services;
-  const hangingProtocols = Array.from(hangingProtocolService.protocols.values());
-  const viewportId = viewportGridService.getActiveViewportId();
-  if (!viewportId) {
-    return [];
-  }
-  const displaySetInsaneUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId);
-  if (!displaySetInsaneUIDs) {
-    return [];
-  }
-  const displaySets = displaySetInsaneUIDs.map(uid => displaySetService.getDisplaySetByUID(uid));
-  return hangingProtocols.map(hp => {
-    if (!hp.isPreset) {
-      return null;
-    }
-    const areValid = _areSelectorsValid(hp, displaySets, hangingProtocolService);
-    return {
-      icon: hp.icon,
-      title: hp.name,
-      commandOptions: {
-        protocolId: hp.id
-      },
-      disabled: !areValid
-    };
-  }).filter(preset => preset !== null);
-};
 function ToolbarLayoutSelectorWithServices({
   commandsManager,
   servicesManager,
@@ -4830,8 +5183,9 @@ function LayoutSelector({
   const {
     customizationService
   } = servicesManager.services;
-  const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
-  const advancedPresets = customizationService.get('advancedPresets') || generateAdvancedPresets({
+  const commonPresets = customizationService.getCustomization('layoutSelector.commonPresets');
+  const advancedPresetsGenerator = customizationService.getCustomization('layoutSelector.advancedPresetGenerator');
+  const advancedPresets = advancedPresetsGenerator({
     servicesManager
   });
   const closeOnOutsideClick = event => {
@@ -4893,7 +5247,7 @@ function LayoutSelector({
       commandOptions: preset.commandOptions,
       onSelection: onSelectionPreset
     })))), /*#__PURE__*/react.createElement("div", {
-      className: "bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black  p-2"
+      className: "bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black p-2"
     }, /*#__PURE__*/react.createElement("div", {
       className: "text-aqua-pale text-xs"
     }, "Custom"), /*#__PURE__*/react.createElement(DropdownContent, {
@@ -5319,7 +5673,7 @@ function adaptItem(item, subProps) {
     value: subProps.selectorProps?.value
   };
   if (item.actionType === 'ShowSubMenu' && !newItem.iconRight) {
-    newItem.iconRight = 'chevron-menu';
+    newItem.iconRight = 'chevron-down';
   }
   if (!item.action) {
     newItem.action = (itemRef, componentProps) => {
@@ -5343,8 +5697,8 @@ function adaptItem(item, subProps) {
 }
 // EXTERNAL MODULE: ../../ui/src/components/ContextMenu/ContextMenu.tsx
 var ContextMenu = __webpack_require__(59852);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 82 modules
-var dist_esm = __webpack_require__(55139);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 94 modules
+var dist_esm = __webpack_require__(75851);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx
 var _ContextMenuController;
 
@@ -5394,15 +5748,22 @@ class ContextMenuController {
       menus,
       selectorProps
     } = contextMenuProps;
-    const annotationManager = dist_esm.annotation.state.getAnnotationManager();
+    if (!menus) {
+      console.warn('No menus found for', menuId);
+      return;
+    }
     const {
-      locking
+      locking,
+      visibility
     } = dist_esm.annotation;
     const targetAnnotationId = selectorProps?.nearbyToolData?.annotationUID;
-    const isLocked = locking.isAnnotationLocked(annotationManager.getAnnotation(targetAnnotationId));
-    if (isLocked) {
-      console.warn('Annotation is locked.');
-      return;
+    if (targetAnnotationId) {
+      const isLocked = locking.isAnnotationLocked(targetAnnotationId);
+      const isVisible = visibility.isAnnotationVisible(targetAnnotationId);
+      if (isLocked || !isVisible) {
+        console.warn(`Annotation is ${isLocked ? 'locked' : 'not visible'}.`);
+        return;
+      }
     }
     const items = getMenuItems(selectorProps || contextMenuProps, event, menus, menuId);
     this.services.uiDialogService.dismiss({
@@ -5413,7 +5774,7 @@ class ContextMenuController {
       isDraggable: false,
       preservePosition: false,
       preventCutOf: true,
-      defaultPosition: ContextMenuController._getDefaultPosition(defaultPointsPosition, event?.detail, viewportElement),
+      defaultPosition: ContextMenuController._getDefaultPosition(defaultPointsPosition, event?.detail || event, viewportElement),
       event,
       content: ContextMenu/* default */.A,
       // This naming is part of the uiDialogService convention
@@ -5427,7 +5788,7 @@ class ContextMenuController {
         menus,
         event,
         subMenu,
-        eventData: event?.detail,
+        eventData: event?.detail || event,
         onClose: () => {
           this.services.uiDialogService.dismiss({
             id: 'context-menu'
@@ -5469,8 +5830,8 @@ ContextMenuController.getDefaultPosition = () => {
   };
 };
 ContextMenuController._getEventDefaultPosition = eventDetail => ({
-  x: eventDetail && eventDetail.currentPoints.client[0],
-  y: eventDetail && eventDetail.currentPoints.client[1]
+  x: eventDetail?.currentPoints?.client[0] ?? eventDetail?.pageX,
+  y: eventDetail?.currentPoints?.client[1] ?? eventDetail?.pageY
 });
 ContextMenuController._getElementDefaultPosition = element => {
   if (element) {
@@ -5525,34 +5886,6 @@ ContextMenuController._getDefaultPosition = (canvasPoints, eventDetail, viewerEl
   }
   return position;
 };
-;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/defaultContextMenu.ts
-const defaultContextMenu = {
-  id: 'measurementsContextMenu',
-  customizationType: 'ohif.contextMenu',
-  menus: [
-  // Get the items from the UI Customization for the menu name (and have a custom name)
-  {
-    id: 'forExistingMeasurement',
-    selector: ({
-      nearbyToolData
-    }) => !!nearbyToolData,
-    items: [{
-      label: 'Delete measurement',
-      commands: [{
-        commandName: 'deleteMeasurement',
-        // we only have support for cornerstoneTools context menu since
-        // they are svg based
-        context: 'CORNERSTONE'
-      }]
-    }, {
-      label: 'Add Label',
-      commands: [{
-        commandName: 'setMeasurementLabel'
-      }]
-    }]
-  }]
-};
-/* harmony default export */ const CustomizableContextMenu_defaultContextMenu = (defaultContextMenu);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/types.ts
 
 
@@ -5561,7 +5894,6 @@ const defaultContextMenu = {
 
 
 
-
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
 var moment = __webpack_require__(14867);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
@@ -6301,7 +6633,7 @@ const reuseCachedLayout = (state, hangingProtocolService) => {
 
 
 const useViewportsByPositionStore_PRESENTATION_TYPE_ID = 'viewportsByPositionId';
-const useViewportsByPositionStore_DEBUG_STORE = true;
+const useViewportsByPositionStore_DEBUG_STORE = false;
 
 /**
  * Represents the state and actions for managing viewports by position.
@@ -6450,8 +6782,6 @@ const findViewportsByPosition = (state, {
   initialInDisplay.forEach(displaySetInstanceUID => addInitialInDisplay(displaySetInstanceUID));
 };
 /* harmony default export */ const src_findViewportsByPosition = (findViewportsByPosition);
-// EXTERNAL MODULE: ./index.js + 41 modules
-var index = __webpack_require__(16265);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/stores/useToggleHangingProtocolStore.ts
 
 
@@ -6495,8 +6825,21 @@ const createToggleHangingProtocolStore = set => ({
 const useToggleHangingProtocolStore = (0,zustand_esm/* create */.vt)()(useToggleHangingProtocolStore_DEBUG_STORE ? (0,middleware/* devtools */.lt)(createToggleHangingProtocolStore, {
   name: 'ToggleHangingProtocolStore'
 }) : createToggleHangingProtocolStore);
-// EXTERNAL MODULE: ../../../extensions/default/src/stores/useToggleOneUpViewportGridStore.ts
-var useToggleOneUpViewportGridStore = __webpack_require__(73325);
+;// CONCATENATED MODULE: ../../../extensions/default/src/stores/useToggleOneUpViewportGridStore.ts
+
+const useToggleOneUpViewportGridStore_PRESENTATION_TYPE_ID = 'toggleOneUpViewportGridId';
+// Stores the entire ViewportGridService getState when toggling to one up
+// (e.g. via a double click) so that it can be restored when toggling back.
+const useToggleOneUpViewportGridStore = (0,zustand_esm/* create */.vt)(set => ({
+  toggleOneUpViewportGridStore: null,
+  type: useToggleOneUpViewportGridStore_PRESENTATION_TYPE_ID,
+  setToggleOneUpViewportGridStore: state => set({
+    toggleOneUpViewportGridStore: state
+  }),
+  clearToggleOneUpViewportGridStore: () => set({
+    toggleOneUpViewportGridStore: null
+  })
+}));
 ;// CONCATENATED MODULE: ../../../extensions/default/src/commandsModule.ts
 
 
@@ -6509,9 +6852,12 @@ var useToggleOneUpViewportGridStore = __webpack_require__(73325);
 
 
 
+
+
 const commandsModule = ({
   servicesManager,
-  commandsManager
+  commandsManager,
+  extensionManager
 }) => {
   const {
     customizationService,
@@ -6519,12 +6865,55 @@ const commandsModule = ({
     hangingProtocolService,
     uiNotificationService,
     viewportGridService,
-    displaySetService
+    displaySetService,
+    multiMonitorService
   } = servicesManager.services;
 
   // Define a context menu controller for use with any context menus
   const contextMenuController = new ContextMenuController(servicesManager, commandsManager);
   const actions = {
+    /**
+     * Runs a command in multi-monitor mode.  No-op if not multi-monitor.
+     */
+    multimonitor: async options => {
+      const {
+        screenDelta,
+        StudyInstanceUID,
+        commands,
+        hashParams
+      } = options;
+      if (multiMonitorService.numberOfScreens < 2) {
+        return options.fallback?.(options);
+      }
+      const newWindow = await multiMonitorService.launchWindow(StudyInstanceUID, screenDelta, hashParams);
+
+      // Only run commands if we successfully got a window with a commands manager
+      if (newWindow && commands) {
+        // Todo: fix this properly, but it takes time for the new window to load
+        // and then the commandsManager is available for it
+        setTimeout(() => {
+          multiMonitorService.run(screenDelta, commands, options);
+        }, 1000);
+      }
+    },
+    /**
+     * Ensures that the specified study is available for display
+     * Then, if commands is specified, runs the given commands list/instance
+     */
+    loadStudy: async options => {
+      const {
+        StudyInstanceUID
+      } = options;
+      const displaySets = displaySetService.getActiveDisplaySets();
+      const isActive = displaySets.find(ds => ds.StudyInstanceUID === StudyInstanceUID);
+      if (isActive) {
+        return;
+      }
+      const [dataSource] = extensionManager.getActiveDataSource();
+      await Panels_requestDisplaySetCreationForStudy(dataSource, displaySetService, StudyInstanceUID);
+      const study = src/* DicomMetadataStore */.H8.getStudy(StudyInstanceUID);
+      hangingProtocolService.addStudy(study);
+    },
     /**
      * Show the context menu.
      * @param options.menuId defines the menu name to lookup, from customizationService
@@ -6545,7 +6934,7 @@ const commandsModule = ({
         ...options
       };
       if (menuCustomizationId) {
-        Object.assign(optionsToUse, customizationService.get(menuCustomizationId, CustomizableContextMenu_defaultContextMenu));
+        Object.assign(optionsToUse, customizationService.getCustomization(menuCustomizationId));
       }
 
       // TODO - make the selectorProps richer by including the study metadata and display set.
@@ -6577,7 +6966,7 @@ const commandsModule = ({
       });
     },
     clearMeasurements: () => {
-      measurementService.clear();
+      measurementService.clearMeasurements();
     },
     /**
      *  Sets the specified protocol
@@ -6602,14 +6991,24 @@ const commandsModule = ({
      * @param options.stageId - the stageId to apply
      * @param options.stageIndex - the index of the stage to go to.
      * @param options.reset - flag to indicate if the HP should be reset to its original and not restored to a previous state
+     *
+     * commandsManager.run('setHangingProtocol', {
+     *   activeStudyUID: '1.2.3',
+     *   protocolId: 'myProtocol',
+     *   stageId: 'myStage',
+     *   stageIndex: 0,
+     *   reset: false,
+     * });
      */
     setHangingProtocol: ({
       activeStudyUID = '',
+      StudyInstanceUID = '',
       protocolId,
       stageId,
       stageIndex,
       reset = false
     }) => {
+      const toUseStudyInstanceUID = activeStudyUID || StudyInstanceUID;
       try {
         // Stores in the state the display set selector id to displaySetUID mapping
         // Pass in viewportId for the active viewport.  This item will get set as
@@ -6631,22 +7030,30 @@ const commandsModule = ({
           }
         } else if (stageIndex === undefined && stageId === undefined) {
           // Re-set the same stage as was previously used
-          const hangingId = `${activeStudyUID || hpInfo.activeStudyUID}:${protocolId}`;
+          const hangingId = `${toUseStudyInstanceUID || hpInfo.activeStudyUID}:${protocolId}`;
           stageIndex = hangingProtocolStageIndexMap[hangingId]?.stageIndex;
         }
         const useStageIdx = stageIndex ?? hangingProtocolService.getStageIndex(protocolId, {
           stageId,
           stageIndex
         });
-        if (activeStudyUID) {
-          hangingProtocolService.setActiveStudyUID(activeStudyUID);
-        }
-        const storedHanging = `${hangingProtocolService.getState().activeStudyUID}:${protocolId}:${useStageIdx || 0}`;
+        const activeStudyChanged = hangingProtocolService.setActiveStudyUID(toUseStudyInstanceUID);
+        const storedHanging = `${toUseStudyInstanceUID || hangingProtocolService.getState().activeStudyUID}:${protocolId}:${useStageIdx || 0}`;
         const {
           viewportGridState
         } = useViewportGridStore.getState();
         const restoreProtocol = !reset && viewportGridState[storedHanging];
-        if (protocolId === hpInfo.protocolId && useStageIdx === hpInfo.stageIndex && !activeStudyUID) {
+        if (reset || activeStudyChanged && !viewportGridState[storedHanging] && stageIndex === undefined && stageId === undefined) {
+          // Run the hanging protocol fresh, re-using the existing study data
+          // This is done on reset or when the study changes and we haven't yet
+          // applied it, and don't specify exact stage to use.
+          const displaySets = displaySetService.getActiveDisplaySets();
+          const activeStudy = {
+            StudyInstanceUID: toUseStudyInstanceUID,
+            displaySets
+          };
+          hangingProtocolService.run(activeStudy, protocolId);
+        } else if (protocolId === hpInfo.protocolId && useStageIdx === hpInfo.stageIndex && !toUseStudyInstanceUID) {
           // Clear the HP setting to reset them
           hangingProtocolService.setProtocol(protocolId, {
             stageId,
@@ -6667,7 +7074,7 @@ const commandsModule = ({
         const {
           setDisplaySetSelector
         } = useDisplaySetSelectorStore.getState();
-        setDisplaySetSelector(`${activeStudyUID || hpInfo.activeStudyUID}:activeDisplaySet:0`, null);
+        setDisplaySetSelector(`${toUseStudyInstanceUID || hpInfo.activeStudyUID}:activeDisplaySet:0`, null);
         return true;
       } catch (e) {
         console.error(e);
@@ -6798,7 +7205,7 @@ const commandsModule = ({
         // The viewer is in one-up. Check if there is a state to restore/toggle back to.
         const {
           toggleOneUpViewportGridStore
-        } = useToggleOneUpViewportGridStore/* useToggleOneUpViewportGridStore */.Y.getState();
+        } = useToggleOneUpViewportGridStore.getState();
         if (!toggleOneUpViewportGridStore) {
           return;
         }
@@ -6854,7 +7261,7 @@ const commandsModule = ({
         // Store the current viewport grid state so we can toggle it back later.
         const {
           setToggleOneUpViewportGridStore
-        } = useToggleOneUpViewportGridStore/* useToggleOneUpViewportGridStore */.Y.getState();
+        } = useToggleOneUpViewportGridStore.getState();
         setToggleOneUpViewportGridStore(viewportGridState);
 
         // one being toggled to one up.
@@ -6894,7 +7301,7 @@ const commandsModule = ({
      *                      for `replace` is false
      */
     navigateHistory(historyArgs) {
-      index/* history */.b.navigate(historyArgs.to, historyArgs.options);
+      index/* history */.b6.navigate(historyArgs.to, historyArgs.options);
     },
     openDICOMTagViewer({
       displaySetInstanceUID
@@ -7004,27 +7411,15 @@ const commandsModule = ({
     }
   };
   const definitions = {
-    showContextMenu: {
-      commandFn: actions.showContextMenu
-    },
-    closeContextMenu: {
-      commandFn: actions.closeContextMenu
-    },
-    clearMeasurements: {
-      commandFn: actions.clearMeasurements
-    },
-    displayNotification: {
-      commandFn: actions.displayNotification
-    },
-    setHangingProtocol: {
-      commandFn: actions.setHangingProtocol
-    },
-    toggleHangingProtocol: {
-      commandFn: actions.toggleHangingProtocol
-    },
-    navigateHistory: {
-      commandFn: actions.navigateHistory
-    },
+    multimonitor: actions.multimonitor,
+    loadStudy: actions.loadStudy,
+    showContextMenu: actions.showContextMenu,
+    closeContextMenu: actions.closeContextMenu,
+    clearMeasurements: actions.clearMeasurements,
+    displayNotification: actions.displayNotification,
+    setHangingProtocol: actions.setHangingProtocol,
+    toggleHangingProtocol: actions.toggleHangingProtocol,
+    navigateHistory: actions.navigateHistory,
     nextStage: {
       commandFn: actions.deltaStage,
       options: {
@@ -7037,18 +7432,10 @@ const commandsModule = ({
         direction: -1
       }
     },
-    setViewportGridLayout: {
-      commandFn: actions.setViewportGridLayout
-    },
-    toggleOneUp: {
-      commandFn: actions.toggleOneUp
-    },
-    openDICOMTagViewer: {
-      commandFn: actions.openDICOMTagViewer
-    },
-    updateViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet
-    }
+    setViewportGridLayout: actions.setViewportGridLayout,
+    toggleOneUp: actions.toggleOneUp,
+    openDICOMTagViewer: actions.openDICOMTagViewer,
+    updateViewportDisplaySet: actions.updateViewportDisplaySet
   };
   return {
     actions,
@@ -7057,22 +7444,71 @@ const commandsModule = ({
   };
 };
 /* harmony default export */ const src_commandsModule = (commandsModule);
-;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/hpMNGrid.ts
-/**
- * Sync group configuration for hydrating segmentations across viewports
- * that share the same frame of reference
- * @type {Types.HangingProtocol.SyncGroup}
- */
-const HYDRATE_SEG_SYNC_GROUP = {
-  type: 'hydrateseg',
-  id: 'sameFORId',
-  source: true,
-  target: true,
-  options: {
-    matchingRules: ['sameFOR']
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/studySelectors.ts
+const studyWithImages = [{
+  id: 'OneOrMoreSeries',
+  weight: 25,
+  attribute: 'numberOfDisplaySetsWithImages',
+  constraint: {
+    greaterThan: 0
   }
-};
-
+}];
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/seriesSelectors.ts
+const seriesWithImages = [{
+  attribute: 'numImageFrames',
+  constraint: {
+    greaterThan: {
+      value: 0
+    }
+  },
+  weight: 1,
+  required: true
+},
+// This display set will select the specified items by preference
+// It has no affect if nothing is specified in the URL.
+{
+  attribute: 'isDisplaySetFromUrl',
+  weight: 20,
+  constraint: {
+    equals: true
+  }
+}];
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/viewportOptions.ts
+/** A default viewport options */
+const viewportOptions = {
+  toolGroupId: 'default',
+  allowUnmatchedView: true,
+  syncGroups: [{
+    type: 'hydrateseg',
+    id: 'sameFORId',
+    source: true,
+    target: true,
+    options: {
+      matchingRules: ['sameFOR']
+    }
+  }]
+};
+const hydrateSegDefault = (/* unused pure expression or super */ null && (viewportOptions));
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/hpMNGrid.ts
+
+
+
+
+/**
+ * Sync group configuration for hydrating segmentations across viewports
+ * that share the same frame of reference
+ * @type {Types.HangingProtocol.SyncGroup}
+ */
+const HYDRATE_SEG_SYNC_GROUP = {
+  type: 'hydrateseg',
+  id: 'sameFORId',
+  source: true,
+  target: true,
+  options: {
+    matchingRules: ['sameFOR']
+  }
+};
+
 /**
  * This hanging protocol can be activated on the primary mode by directly
  * referencing it in a URL or by directly including it within a mode, e.g.:
@@ -7083,42 +7519,18 @@ const hpMN = {
   id: '@ohif/mnGrid',
   description: 'Has various hanging protocol grid layouts',
   name: '2x2',
-  protocolMatchingRules: [{
-    id: 'OneOrMoreSeries',
-    weight: 25,
-    attribute: 'numberOfDisplaySetsWithImages',
-    constraint: {
-      greaterThan: 0
-    }
-  }],
+  protocolMatchingRules: studyWithImages,
   toolGroupIds: ['default'],
   displaySetSelectors: {
     defaultDisplaySetId: {
-      seriesMatchingRules: [{
-        attribute: 'numImageFrames',
-        constraint: {
-          greaterThan: {
-            value: 0
-          }
-        },
-        required: true
-      },
-      // This display set will select the specified items by preference
-      // It has no affect if nothing is specified in the URL.
-      {
-        attribute: 'isDisplaySetFromUrl',
-        weight: 10,
-        constraint: {
-          equals: true
-        }
-      }]
+      allowUnmatchedView: true,
+      seriesMatchingRules: seriesWithImages
     }
   },
   defaultViewport: {
     viewportOptions: {
       viewportType: 'stack',
       toolGroupId: 'default',
-      allowUnmatchedView: true,
       syncGroups: [HYDRATE_SEG_SYNC_GROUP]
     },
     displaySets: [{
@@ -7142,63 +7554,24 @@ const hpMN = {
       }
     },
     viewports: [{
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true,
-        syncGroups: [{
-          type: 'hydrateseg',
-          id: 'sameFORId',
-          source: true,
-          target: true,
-          options: {
-            matchingRules: ['sameFOR']
-          }
-        }]
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId'
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         matchedDisplaySetsIndex: 1,
         id: 'defaultDisplaySetId'
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true,
-        syncGroups: [{
-          type: 'hydrateseg',
-          id: 'sameFORId',
-          source: true,
-          target: true
-          // options: {
-          //   matchingRules: ['sameFOR'],
-          // },
-        }]
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         matchedDisplaySetsIndex: 2,
         id: 'defaultDisplaySetId'
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true,
-        syncGroups: [{
-          type: 'hydrateseg',
-          id: 'sameFORId',
-          source: true,
-          target: true
-          // options: {
-          //   matchingRules: ['sameFOR'],
-          // },
-        }]
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         matchedDisplaySetsIndex: 3,
         id: 'defaultDisplaySetId'
@@ -7207,11 +7580,7 @@ const hpMN = {
   },
   // 3x1 stage
   {
-    id: '3x1',
-    // Obsolete settings:
-    requiredViewports: 1,
-    preferredViewports: 3,
-    // New equivalent:
+    name: '3x1',
     stageActivation: {
       enabled: {
         minViewportsMatched: 3
@@ -7225,27 +7594,18 @@ const hpMN = {
       }
     },
     viewports: [{
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId'
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId',
         matchedDisplaySetsIndex: 1
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId',
         matchedDisplaySetsIndex: 2
@@ -7254,9 +7614,7 @@ const hpMN = {
   },
   // A 2x1 stage
   {
-    id: '2x1',
-    requiredViewports: 1,
-    preferredViewports: 2,
+    name: '2x1',
     stageActivation: {
       enabled: {
         minViewportsMatched: 2
@@ -7270,18 +7628,12 @@ const hpMN = {
       }
     },
     viewports: [{
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId'
       }]
     }, {
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         matchedDisplaySetsIndex: 1,
         id: 'defaultDisplaySetId'
@@ -7290,9 +7642,7 @@ const hpMN = {
   },
   // A 1x1 stage - should be automatically activated if there is only 1 viewable instance
   {
-    id: '1x1',
-    requiredViewports: 1,
-    preferredViewports: 1,
+    name: '1x1',
     stageActivation: {
       enabled: {
         minViewportsMatched: 1
@@ -7306,10 +7656,7 @@ const hpMN = {
       }
     },
     viewports: [{
-      viewportOptions: {
-        toolGroupId: 'default',
-        allowUnmatchedView: true
-      },
+      viewportOptions: viewportOptions,
       displaySets: [{
         id: 'defaultDisplaySetId'
       }]
@@ -7317,7 +7664,135 @@ const hpMN = {
   }],
   numberOfPriorsReferenced: -1
 };
-/* harmony default export */ const hpMNGrid = (hpMN);
+
+/**
+ * This hanging protocol can be activated on the primary mode by directly
+ * referencing it in a URL or by directly including it within a mode, e.g.:
+ * `&hangingProtocolId=@ohif/mnGrid8` added to the viewer URL
+ * It is not included in the viewer mode by default.
+ */
+const hpMN8 = {
+  ...hpMN,
+  id: '@ohif/mnGrid8',
+  description: 'Has various hanging protocol grid layouts up to 4x2',
+  name: '4x2',
+  stages: [{
+    id: '4x2',
+    name: '4x2',
+    stageActivation: {
+      enabled: {
+        minViewportsMatched: 7
+      }
+    },
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 4
+      }
+    },
+    viewports: [{
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 1,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 2,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 3,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 4,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 5,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 6,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 7,
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, {
+    id: '3x2',
+    name: '3x2',
+    stageActivation: {
+      enabled: {
+        minViewportsMatched: 5
+      }
+    },
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 3
+      }
+    },
+    viewports: [{
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 1,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 2,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 3,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 4,
+        id: 'defaultDisplaySetId'
+      }]
+    }, {
+      viewportOptions: viewportOptions,
+      displaySets: [{
+        matchedDisplaySetsIndex: 5,
+        id: 'defaultDisplaySetId'
+      }]
+    }]
+  }, ...hpMN.stages]
+};
+/* harmony default export */ const hpMNGrid = ((/* unused pure expression or super */ null && (hpMN)));
 ;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/hpCompare.ts
 const defaultDisplaySetSelector = {
   studyMatchingRules: [{
@@ -7344,7 +7819,7 @@ const defaultDisplaySetSelector = {
   // It has no affect if nothing is specified in the URL.
   {
     attribute: 'isDisplaySetFromUrl',
-    weight: 10,
+    weight: 20,
     constraint: {
       equals: true
     }
@@ -7375,7 +7850,7 @@ const priorDisplaySetSelector = {
   // It has no affect if nothing is specified in the URL.
   {
     attribute: 'isDisplaySetFromUrl',
-    weight: 10,
+    weight: 20,
     constraint: {
       equals: true
     }
@@ -7485,7 +7960,7 @@ const hpMNCompare = {
   }]
 };
 /* harmony default export */ const hpCompare = (hpMNCompare);
-;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/mammoDisplaySetSelector.ts
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/mammoDisplaySetSelector.ts
 const priorStudyMatchingRules = [{
   // The priorInstance is a study counter that indicates what position this study is in
   // and the value comes from the options parameter.
@@ -7865,7 +8340,7 @@ const hpScale = {
       // It has no affect if nothing is specified in the URL.
       {
         attribute: 'isDisplaySetFromUrl',
-        weight: 10,
+        weight: 20,
         constraint: {
           equals: true
         }
@@ -8001,7 +8476,7 @@ const defaultProtocol = {
       // It has no affect if nothing is specified in the URL.
       {
         attribute: 'isDisplaySetFromUrl',
-        weight: 10,
+        weight: 20,
         constraint: {
           equals: true
         }
@@ -8067,11 +8542,51 @@ function getHangingProtocolModule() {
   },
   // Create a MxN hanging protocol available by default
   {
-    name: hpMNGrid.id,
-    protocol: hpMNGrid
+    name: hpMN.id,
+    protocol: hpMN
+  }, {
+    name: hpMN8.id,
+    protocol: hpMN8
   }];
 }
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/defaultContextMenuCustomization.ts
+/* harmony default export */ const defaultContextMenuCustomization = ({
+  measurementsContextMenu: {
+    inheritsFrom: 'ohif.contextMenu',
+    menus: [
+    // Get the items from the UI Customization for the menu name (and have a custom name)
+    {
+      id: 'forExistingMeasurement',
+      selector: ({
+        nearbyToolData
+      }) => !!nearbyToolData,
+      items: [{
+        label: 'Delete measurement',
+        commands: 'deleteMeasurement'
+      }, {
+        label: 'Add Label',
+        commands: 'setMeasurementLabel'
+      }]
+    }]
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/helloPageCustomization.tsx
+
+/* harmony default export */ const helloPageCustomization = ({
+  'routes.customRoutes': {
+    routes: {
+      $push: [{
+        path: '/custom',
+        children: () => /*#__PURE__*/react.createElement("h1", {
+          style: {
+            color: 'white'
+          }
+        }, "Hello Custom Route")
+      }]
+    }
+  }
+});
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/DataSourceSelector.tsx
 
 
@@ -8091,7 +8606,7 @@ function DataSourceSelector() {
       height: '100%'
     }
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex h-screen w-screen items-center justify-center "
+    className: "flex h-screen w-screen items-center justify-center"
   }, /*#__PURE__*/react.createElement("div", {
     className: "bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md"
   }, /*#__PURE__*/react.createElement("img", {
@@ -8116,11 +8631,230 @@ function DataSourceSelector() {
   }, ds.sourceName), /*#__PURE__*/react.createElement("br", null)))))));
 }
 /* harmony default export */ const Panels_DataSourceSelector = (DataSourceSelector);
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/datasourcesCustomization.tsx
+
+/* harmony default export */ const datasourcesCustomization = ({
+  'routes.customRoutes': {
+    routes: {
+      $push: [{
+        path: '/datasources',
+        children: Panels_DataSourceSelector
+      }]
+    }
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/multimonitorCustomization.ts
+/* harmony default export */ const multimonitorCustomization = ({
+  'studyBrowser.studyMenuItems': {
+    $push: [{
+      id: 'applyHangingProtocol',
+      label: 'Apply Hanging Protocol',
+      iconName: 'ViewportViews',
+      items: [{
+        id: 'applyDefaultProtocol',
+        label: 'Default',
+        commands: ['loadStudy', {
+          commandName: 'setHangingProtocol',
+          commandOptions: {
+            protocolId: 'default'
+          }
+        }]
+      }, {
+        id: 'applyMPRProtocol',
+        label: '2x2 Grid',
+        commands: ['loadStudy', {
+          commandName: 'setHangingProtocol',
+          commandOptions: {
+            protocolId: '@ohif/mnGrid'
+          }
+        }]
+      }]
+    }, {
+      id: 'showInOtherMonitor',
+      label: 'Launch On Second Monitor',
+      iconName: 'DicomTagBrowser',
+      selector: ({
+        servicesManager
+      }) => {
+        const {
+          multiMonitorService
+        } = servicesManager.services;
+        return multiMonitorService.isMultimonitor;
+      },
+      commands: {
+        commandName: 'multimonitor',
+        commandOptions: {
+          hashParams: '&hangingProtocolId=@ohif/mnGrid8',
+          commands: ['loadStudy', {
+            commandName: 'setHangingProtocol',
+            commandOptions: {
+              protocolId: '@ohif/mnGrid8'
+            }
+          }]
+        }
+      }
+    }]
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/customRoutesCustomization.ts
+/* harmony default export */ const customRoutesCustomization = ({
+  'routes.customRoutes': {
+    routes: [],
+    notFoundRoute: null
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/studyBrowserCustomization.ts
+
+const {
+  formatDate: studyBrowserCustomization_formatDate
+} = src/* utils */.Wp;
+/* harmony default export */ const studyBrowserCustomization = ({
+  'studyBrowser.studyMenuItems': [],
+  'studyBrowser.thumbnailMenuItems': [{
+    id: 'tagBrowser',
+    label: 'Tag Browser',
+    iconName: 'DicomTagBrowser',
+    commands: 'openDICOMTagViewer'
+  }],
+  'studyBrowser.sortFunctions': [{
+    label: 'Series Number',
+    sortFunction: (a, b) => {
+      return a?.SeriesNumber - b?.SeriesNumber;
+    }
+  }, {
+    label: 'Series Date',
+    sortFunction: (a, b) => {
+      const dateA = new Date(studyBrowserCustomization_formatDate(a?.SeriesDate));
+      const dateB = new Date(studyBrowserCustomization_formatDate(b?.SeriesDate));
+      return dateB.getTime() - dateA.getTime();
+    }
+  }],
+  'studyBrowser.viewPresets': [{
+    id: 'list',
+    iconName: 'ListView',
+    selected: false
+  }, {
+    id: 'thumbnails',
+    iconName: 'ThumbnailView',
+    selected: true
+  }],
+  'studyBrowser.studyMode': 'all'
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/overlayItemCustomization.tsx
+
+/* harmony default export */ const overlayItemCustomization = ({
+  'ohif.overlayItem': function (props) {
+    if (this.condition && !this.condition(props)) {
+      return null;
+    }
+    const {
+      instance
+    } = props;
+    const value = instance && this.attribute ? instance[this.attribute] : this.contentF && typeof this.contentF === 'function' ? this.contentF(props) : null;
+    if (!value) {
+      return null;
+    }
+    return /*#__PURE__*/react.createElement("span", {
+      className: "overlay-item flex flex-row",
+      style: {
+        color: this.color || undefined
+      },
+      title: this.title || ''
+    }, this.label && /*#__PURE__*/react.createElement("span", {
+      className: "mr-1 shrink-0"
+    }, this.label), /*#__PURE__*/react.createElement("span", {
+      className: "font-light"
+    }, value));
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/contextMenuCustomization.ts
+/* harmony default export */ const contextMenuCustomization = ({
+  'ohif.contextMenu': {
+    $transform: function (customizationService) {
+      /**
+       * Applies the inheritsFrom to all the menu items.
+       * This function clones the object and child objects to prevent
+       * changes to the original customization object.
+       */
+      // Don't modify the children, as those are copied by reference
+      const clonedObject = {
+        ...this
+      };
+      clonedObject.menus = this.menus.map(menu => ({
+        ...menu
+      }));
+      for (const menu of clonedObject.menus) {
+        const {
+          items: originalItems
+        } = menu;
+        menu.items = [];
+        for (const item of originalItems) {
+          menu.items.push(customizationService.transform(item));
+        }
+      }
+      return clonedObject;
+    }
+  }
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/menuContentCustomization.tsx
+
+
+/* harmony default export */ const menuContentCustomization = ({
+  'ohif.menuContent': function (props) {
+    const {
+      item: topLevelItem,
+      commandsManager,
+      servicesManager,
+      ...rest
+    } = props;
+    const content = function (subProps) {
+      const {
+        item: subItem
+      } = subProps;
+
+      // Regular menu item
+      const isDisabled = subItem.selector && !subItem.selector({
+        servicesManager
+      });
+      return /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuItem */._2, {
+        disabled: isDisabled,
+        onSelect: () => {
+          commandsManager.runAsync(subItem.commands, {
+            ...subItem.commandOptions,
+            ...rest
+          });
+        },
+        className: "gap-[6px]"
+      }, subItem.iconName && /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
+        name: subItem.iconName,
+        className: "-ml-1"
+      }), subItem.label);
+    };
+
+    // If item has sub-items, render a submenu
+    if (topLevelItem.items) {
+      return /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuSub */.lv, null, /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuSubTrigger */.nV, {
+        className: "gap-[6px]"
+      }, topLevelItem.iconName && /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
+        name: topLevelItem.iconName,
+        className: "-ml-1"
+      }), topLevelItem.label), /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuPortal */.dc, null, /*#__PURE__*/react.createElement(ui_next_src/* DropdownMenuSubContent */.M5, null, topLevelItem.items.map(subItem => content({
+        ...props,
+        item: subItem
+      })))));
+    }
+    return content({
+      ...props,
+      item: topLevelItem
+    });
+  }
+});
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/ItemListComponent.tsx
 
 
 
 
+
 function ItemListComponent({
   itemLabel,
   itemList,
@@ -8150,8 +8884,7 @@ function ItemListComponent({
     className: 'h-full w-full'
   }) : itemList.length === 0 ? /*#__PURE__*/react.createElement("div", {
     className: "text-primary-light flex h-full flex-col items-center justify-center px-6 py-4"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
-    name: "magnifier",
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ToolMagnify, {
     className: "mb-4"
   }), /*#__PURE__*/react.createElement("span", null, t(`No ${itemLabel} available`))) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "bg-secondary-dark px-3 py-1.5 text-white"
@@ -8165,7 +8898,7 @@ function ItemListComponent({
     }, /*#__PURE__*/react.createElement("div", null, item.name), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
       onClick: () => onItemClicked(item),
       className: "invisible group-hover:visible",
-      endIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      endIcon: /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
         name: "arrow-left"
       })
     }, t('Select')));
@@ -8260,9 +8993,9 @@ function DataSourceConfigurationModalComponent({
         } : undefined
       }, /*#__PURE__*/react.createElement("div", {
         className: "text- flex items-center gap-2"
-      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
         name: "status-tracked"
-      }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+      }) : /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
         name: "status-untracked"
       }), /*#__PURE__*/react.createElement("div", {
         className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES)
@@ -8290,6 +9023,7 @@ function DataSourceConfigurationModalComponent({
 
 
 
+
 function DataSourceConfigurationComponent({
   servicesManager,
   extensionManager
@@ -8315,7 +9049,9 @@ function DataSourceConfigurationComponent({
       }
       const {
         factory: configurationAPIFactory
-      } = customizationService.get(activeDataSourceDef.configuration.configurationAPI) ?? {};
+      } = customizationService.getCustomization(activeDataSourceDef.configuration.configurationAPI) ?? {
+        factory: () => null
+      };
       if (!configurationAPIFactory) {
         return;
       }
@@ -8359,8 +9095,7 @@ function DataSourceConfigurationComponent({
   }, [configurationAPI, configuredItems, showConfigurationModal]);
   return configuredItems ? /*#__PURE__*/react.createElement("div", {
     className: "text-aqua-pale flex items-center overflow-hidden"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
-    name: "settings",
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.Settings, {
     className: "mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer",
     onClick: showConfigurationModal
   }), configuredItems.map((item, itemIndex) => {
@@ -8541,6 +9276,44 @@ class GoogleCloudDataSourceConfigurationAPI {
   }
 }
 
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/dataSourceConfigurationCustomization.ts
+
+
+function getDataSourceConfigurationCustomization({
+  servicesManager,
+  extensionManager
+}) {
+  return {
+    // the generic GUI component to configure a data source using an instance of a BaseDataSourceConfigurationAPI
+    'ohif.dataSourceConfigurationComponent': Components_DataSourceConfigurationComponent.bind(null, {
+      servicesManager,
+      extensionManager
+    }),
+    // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
+    'ohif.dataSourceConfigurationAPI.google': dataSourceName => new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager)
+  };
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/progressDropdownCustomization.ts
+
+/* harmony default export */ const progressDropdownCustomization = ({
+  progressDropdownWithServiceComponent: ProgressDropdownWithService
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/sortingCriteriaCustomization.ts
+
+const {
+  sortingCriteria
+} = src/* utils */.Wp;
+/* harmony default export */ const sortingCriteriaCustomization = ({
+  sortingCriteria: sortingCriteria.seriesSortCriteria.seriesInfoSortingCriteria
+});
+;// CONCATENATED MODULE: ../../../extensions/default/src/customizations/onDropHandlerCustomization.ts
+/* harmony default export */ const onDropHandlerCustomization = ({
+  customOnDropHandler: () => {
+    return Promise.resolve({
+      handled: false
+    });
+  }
+});
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getCustomizationModule.tsx
 
 
@@ -8548,7 +9321,13 @@ class GoogleCloudDataSourceConfigurationAPI {
 
 
 
-const getCustomizationModule_formatDate = src/* utils */.Wp.formatDate;
+
+
+
+
+
+
+
 
 /**
  *
@@ -8565,161 +9344,30 @@ function getCustomizationModule({
 }) {
   return [{
     name: 'helloPage',
-    merge: 'Append',
-    value: {
-      id: 'customRoutes',
-      routes: [{
-        path: '/custom',
-        children: () => /*#__PURE__*/react.createElement("h1", {
-          style: {
-            color: 'white'
-          }
-        }, "Hello Custom Route")
-      }]
-    }
-  },
-  // Example customization to list a set of datasources
-  {
+    value: helloPageCustomization
+  }, {
     name: 'datasources',
-    merge: 'Append',
-    value: {
-      id: 'customRoutes',
-      routes: [{
-        path: '/datasources',
-        children: Panels_DataSourceSelector
-      }]
-    }
+    value: datasourcesCustomization
+  }, {
+    name: 'multimonitor',
+    value: multimonitorCustomization
   }, {
     name: 'default',
-    value: [
-    /**
-     * Customization Component Type definition for overlay items.
-     * Overlay items are texts (or other components) that will be displayed
-     * on a Viewport Overlay, which contains the information panels on the
-     * four corners of a viewport.
-     *
-     * @definition of a overlay item using this type
-     * The value to be displayed is defined by
-     *  - setting DICOM image instance's property to this field,
-     *  - or defining contentF()
-     *
-     * {
-     *   id: string - unique id for the overlay item
-     *   customizationType: string - indicates customization type definition to this
-     *   label: string - Label, to be displayed for the item
-     *   title: string - Tooltip, for the item
-     *   color: string - Color of the text
-     *   condition: ({ instance }) => boolean - decides whether to display the overlay item or not
-     *   attribute: string - property name of the DICOM image instance
-     *   contentF: ({ instance, formatters }) => string | component,
-     * }
-     *
-     * @example
-     *  {
-     *    id: 'PatientNameOverlay',
-     *    customizationType: 'ohif.overlayItem',
-     *    label: 'PN:',
-     *    title: 'Patient Name',
-     *    color: 'yellow',
-     *    condition: ({ instance }) => instance && instance.PatientName && instance.PatientName.Alphabetic,
-     *    attribute: 'PatientName',
-     *    contentF: ({ instance, formatters: { formatPN } }) => `${formatPN(instance.PatientName.Alphabetic)} ${(instance.PatientSex ? '(' + instance.PatientSex + ')' : '')}`,
-     *  },
-     *
-     * @see CustomizableViewportOverlay
-     */
-    {
-      id: 'ohif.overlayItem',
-      content: function (props) {
-        if (this.condition && !this.condition(props)) {
-          return null;
-        }
-        const {
-          instance
-        } = props;
-        const value = instance && this.attribute ? instance[this.attribute] : this.contentF && typeof this.contentF === 'function' ? this.contentF(props) : null;
-        if (!value) {
-          return null;
-        }
-        return /*#__PURE__*/react.createElement("span", {
-          className: "overlay-item flex flex-row",
-          style: {
-            color: this.color || undefined
-          },
-          title: this.title || ''
-        }, this.label && /*#__PURE__*/react.createElement("span", {
-          className: "mr-1 shrink-0"
-        }, this.label), /*#__PURE__*/react.createElement("span", {
-          className: "font-light"
-        }, value));
-      }
-    }, {
-      id: 'ohif.contextMenu',
-      /** Applies the customizationType to all the menu items.
-       * This function clones the object and child objects to prevent
-       * changes to the original customization object.
-       */
-      transform: function (customizationService) {
-        // Don't modify the children, as those are copied by reference
-        const clonedObject = {
-          ...this
-        };
-        clonedObject.menus = this.menus.map(menu => ({
-          ...menu
-        }));
-        for (const menu of clonedObject.menus) {
-          const {
-            items: originalItems
-          } = menu;
-          menu.items = [];
-          for (const item of originalItems) {
-            menu.items.push(customizationService.transform(item));
-          }
-        }
-        return clonedObject;
-      }
-    }, {
-      // the generic GUI component to configure a data source using an instance of a BaseDataSourceConfigurationAPI
-      id: 'ohif.dataSourceConfigurationComponent',
-      component: Components_DataSourceConfigurationComponent.bind(null, {
+    value: {
+      ...customRoutesCustomization,
+      ...studyBrowserCustomization,
+      ...overlayItemCustomization,
+      ...contextMenuCustomization,
+      ...menuContentCustomization,
+      ...getDataSourceConfigurationCustomization({
         servicesManager,
         extensionManager
-      })
-    }, {
-      // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
-      id: 'ohif.dataSourceConfigurationAPI.google',
-      factory: dataSourceName => new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager)
-    }, {
-      id: 'progressDropdownWithServiceComponent',
-      component: ProgressDropdownWithService
-    }, {
-      id: 'studyBrowser.sortFunctions',
-      values: [{
-        label: 'Series Number',
-        sortFunction: (a, b) => {
-          return a?.SeriesNumber - b?.SeriesNumber;
-        }
-      }, {
-        label: 'Series Date',
-        sortFunction: (a, b) => {
-          const dateA = new Date(getCustomizationModule_formatDate(a?.SeriesDate));
-          const dateB = new Date(getCustomizationModule_formatDate(b?.SeriesDate));
-          return dateB.getTime() - dateA.getTime();
-        }
-      }]
-    }, {
-      id: 'studyBrowser.viewPresets',
-      // change your default selected preset here
-      value: [{
-        id: 'list',
-        iconName: 'ListView',
-        selected: false
-      }, {
-        id: 'thumbnails',
-        iconName: 'ThumbnailView',
-        selected: true
-      }]
-    }]
+      }),
+      ...progressDropdownCustomization,
+      ...sortingCriteriaCustomization,
+      ...defaultContextMenuCustomization,
+      ...onDropHandlerCustomization
+    }
   }];
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/LineChartViewport/LineChartViewport.tsx
@@ -8839,7 +9487,7 @@ function convertInterfaceDateToString(date) {
   return dateString;
 }
 
-;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/viewCode.ts
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/viewCode.ts
 /* harmony default export */ const viewCode = (displaySet => {
   const ViewCodeSequence = displaySet?.images[0]?.ViewCodeSequence[0];
   if (!ViewCodeSequence) {
@@ -8854,7 +9502,7 @@ function convertInterfaceDateToString(date) {
   }
   return `${CodingSchemeDesignator}:${CodeValue}`;
 });
-;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/laterality.ts
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/laterality.ts
 /* harmony default export */ const laterality = (displaySet => {
   const frameAnatomy = displaySet?.images?.[0]?.SharedFunctionalGroupsSequence?.[0]?.FrameAnatomySequence?.[0];
   if (!frameAnatomy) {
@@ -8863,7 +9511,7 @@ function convertInterfaceDateToString(date) {
   const laterality = frameAnatomy?.FrameLaterality;
   return laterality;
 });
-;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/registerHangingProtocolAttributes.ts
+;// CONCATENATED MODULE: ../../../extensions/default/src/hangingprotocols/utils/registerHangingProtocolAttributes.ts
 
 
 function registerHangingProtocolAttributes({
@@ -8883,6 +9531,7 @@ function registerHangingProtocolAttributes({
 
 
 
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/init.ts
 
 
@@ -9525,7 +10174,7 @@ function promptLabelAnnotation({
     measurementId
   } = evt;
   return new Promise(async function (resolve) {
-    const labelConfig = customizationService.get('measurementLabels');
+    const labelConfig = customizationService.getCustomization('measurementLabels');
     const measurement = measurementService.getMeasurement(measurementId);
     const value = await showLabelAnnotationPopup(measurement, servicesManager.services.uiDialogService, labelConfig);
     measurementService.update(measurementId, {
@@ -9580,6 +10229,8 @@ function addIcon(name, icon) {
 
 
 
+
+
 
 
 
@@ -9620,30 +10271,6 @@ const defaultExtension = {
 /* harmony default export */ const default_src = (defaultExtension);
 
 
-/***/ }),
-
-/***/ 73325:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Y: () => (/* binding */ useToggleOneUpViewportGridStore)
-/* harmony export */ });
-/* harmony import */ var zustand__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(78713);
-
-const PRESENTATION_TYPE_ID = 'toggleOneUpViewportGridId';
-// Stores the entire ViewportGridService getState when toggling to one up
-// (e.g. via a double click) so that it can be restored when toggling back.
-const useToggleOneUpViewportGridStore = (0,zustand__WEBPACK_IMPORTED_MODULE_0__/* .create */ .vt)(set => ({
-  toggleOneUpViewportGridStore: null,
-  type: PRESENTATION_TYPE_ID,
-  setToggleOneUpViewportGridStore: state => set({
-    toggleOneUpViewportGridStore: state
-  }),
-  clearToggleOneUpViewportGridStore: () => set({
-    toggleOneUpViewportGridStore: null
-  })
-}));
-
 /***/ })
 
 }]);