@ohif/app 3.7.0-beta.11 → 3.7.0-beta.110

package/dist/{82.bundle.9a0e7f08d4bce18d302f.js → 342.bundle.7d6c1e6bda1c67d729a7.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[82],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[342],{
 
-/***/ 96082:
+/***/ 56342:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -11,6 +11,8 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   ContextMenuController: () => (/* reexport */ ContextMenuController),
   CustomizableContextMenuTypes: () => (/* reexport */ types_namespaceObject),
+  createReportAsync: () => (/* reexport */ Actions_createReportAsync),
+  createReportDialogPrompt: () => (/* reexport */ CreateReportDialogPrompt),
   "default": () => (/* binding */ default_src),
   dicomWebUtils: () => (/* reexport */ utils_namespaceObject),
   getStudiesForPatientByMRN: () => (/* reexport */ Panels_getStudiesForPatientByMRN)
@@ -28,11 +30,11 @@ __webpack_require__.d(utils_namespaceObject, {
 });
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(75935);
-// EXTERNAL MODULE: ../../core/src/index.ts + 101 modules
-var src = __webpack_require__(48501);
+var dicomweb_client_es = __webpack_require__(97604);
+// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
+var src = __webpack_require__(71771);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
-var sortStudy = __webpack_require__(87853);
+var sortStudy = __webpack_require__(62971);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
 /**
  * QIDO - Query based on ID for DICOM Objects
@@ -378,7 +380,7 @@ function getImageId(_ref) {
   }
 }
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(22737);
+var dcmjs_es = __webpack_require__(67540);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/wado/retrieveMetadataLoader.js
 /**
  * Class to define inheritance of load retrieve strategy.
@@ -638,7 +640,7 @@ const StudyMetaDataPromises = new Map();
  *
  * @param {Object} server Object with server configuration parameters
  * @param {string} StudyInstanceUID The UID of the Study to be retrieved
- * @param {boolean} enabledStudyLazyLoad Whether the study metadata should be loaded asynchronusly.
+ * @param {boolean} enabledStudyLazyLoad Whether the study metadata should be loaded asynchronously.
  * @param {function} storeInstancesCallback A callback used to store the retrieved instance metadata.
  * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
  * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
@@ -708,12 +710,16 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
    * @returns
    */
   async searchForStudies(options) {
-    if (!this.staticWado) return super.searchForStudies(options);
+    if (!this.staticWado) {
+      return super.searchForStudies(options);
+    }
     const searchResult = await super.searchForStudies(options);
     const {
       queryParams
     } = options;
-    if (!queryParams) return searchResult;
+    if (!queryParams) {
+      return searchResult;
+    }
     const lowerParams = this.toLowerParams(queryParams);
     const filtered = searchResult.filter(study => {
       for (const key of Object.keys(StaticWadoClient.studyFilterKeys)) {
@@ -726,12 +732,16 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
     return filtered;
   }
   async searchForSeries(options) {
-    if (!this.staticWado) return super.searchForSeries(options);
+    if (!this.staticWado) {
+      return super.searchForSeries(options);
+    }
     const searchResult = await super.searchForSeries(options);
     const {
       queryParams
     } = options;
-    if (!queryParams) return searchResult;
+    if (!queryParams) {
+      return searchResult;
+    }
     const lowerParams = this.toLowerParams(queryParams);
     const filtered = searchResult.filter(series => {
       for (const key of Object.keys(StaticWadoClient.seriesFilterKeys)) {
@@ -767,8 +777,12 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
       actual = actual.Alphabetic;
     }
     if (typeof actual == 'string') {
-      if (actual.length === 0) return true;
-      if (desired.length === 0 || desired === '*') return true;
+      if (actual.length === 0) {
+        return true;
+      }
+      if (desired.length === 0 || desired === '*') {
+        return true;
+      }
       if (desired[0] === '*' && desired[desired.length - 1] === '*') {
         // console.log(`Comparing ${actual} to ${desired.substring(1, desired.length - 1)}`)
         return actual.indexOf(desired.substring(1, desired.length - 1)) != -1;
@@ -783,9 +797,13 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
 
   /** Compares a pair of dates to see if the value is within the range */
   compareDateRange(range, value) {
-    if (!value) return true;
+    if (!value) {
+      return true;
+    }
     const dash = range.indexOf('-');
-    if (dash === -1) return this.compareValues(range, value);
+    if (dash === -1) {
+      return this.compareValues(range, value);
+    }
     const start = range.substring(0, dash);
     const end = range.substring(dash + 1);
     return (!start || value >= start) && (!end || value <= end);
@@ -802,12 +820,18 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
    */
   filterItem(key, queryParams, study, sourceFilterMap) {
     const altKey = sourceFilterMap[key] || key;
-    if (!queryParams) return true;
+    if (!queryParams) {
+      return true;
+    }
     const testValue = queryParams[key] || queryParams[altKey];
-    if (!testValue) return true;
+    if (!testValue) {
+      return true;
+    }
     const valueElem = study[key] || study[altKey];
-    if (!valueElem) return false;
-    if (valueElem.vr == 'DA') {
+    if (!valueElem) {
+      return false;
+    }
+    if (valueElem.vr === 'DA' && valueElem.Value?.[0]) {
       return this.compareDateRange(testValue, valueElem.Value[0]);
     }
     const value = valueElem.Value;
@@ -867,8 +891,12 @@ const getDirectURL = (config, params) => {
     singlepart: fetchPart = 'video'
   } = params;
   const value = instance[tag];
-  if (!value) return undefined;
-  if (value.DirectRetrieveURL) return value.DirectRetrieveURL;
+  if (!value) {
+    return undefined;
+  }
+  if (value.DirectRetrieveURL) {
+    return value.DirectRetrieveURL;
+  }
   if (value.InlineBinary) {
     const blob = src.utils.b64toBlob(value.InlineBinary, defaultType);
     value.DirectRetrieveURL = URL.createObjectURL(blob);
@@ -991,65 +1019,69 @@ const metadataProvider = src.classes.MetadataProvider;
  * @param {string|bool} singlepart - indicates of the retrieves can fetch singlepart.  Options are bulkdata, video, image or boolean true
  */
 function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
-  const {
-    qidoRoot,
-    wadoRoot,
-    enableStudyLazyLoad,
-    supportsFuzzyMatching,
-    supportsWildcard,
-    supportsReject,
-    staticWado,
-    singlepart
-  } = dicomWebConfig;
-  const dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));
-  const qidoConfig = {
-    url: qidoRoot,
-    staticWado,
-    singlepart,
-    headers: userAuthenticationService.getAuthorizationHeader(),
-    errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
-  };
-  const wadoConfig = {
-    url: wadoRoot,
-    staticWado,
-    singlepart,
-    headers: userAuthenticationService.getAuthorizationHeader(),
-    errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
-  };
-
-  // TODO -> Two clients sucks, but its better than 1000.
-  // TODO -> We'll need to merge auth later.
-  const qidoDicomWebClient = staticWado ? new StaticWadoClient(qidoConfig) : new dicomweb_client_es.api.DICOMwebClient(qidoConfig);
-  const wadoDicomWebClient = staticWado ? new StaticWadoClient(wadoConfig) : new dicomweb_client_es.api.DICOMwebClient(wadoConfig);
+  let dicomWebConfigCopy, qidoConfig, wadoConfig, qidoDicomWebClient, wadoDicomWebClient, getAuthrorizationHeader, generateWadoHeader;
   const implementation = {
     initialize: _ref => {
       let {
         params,
         query
       } = _ref;
-      const {
-        StudyInstanceUIDs: paramsStudyInstanceUIDs
-      } = params;
-      const queryStudyInstanceUIDs = src.utils.splitComma(query.getAll('StudyInstanceUIDs'));
-      const StudyInstanceUIDs = queryStudyInstanceUIDs.length && queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
-      const StudyInstanceUIDsAsArray = StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs) ? StudyInstanceUIDs : [StudyInstanceUIDs];
-      return StudyInstanceUIDsAsArray;
+      if (dicomWebConfig.onConfiguration && typeof dicomWebConfig.onConfiguration === 'function') {
+        dicomWebConfig = dicomWebConfig.onConfiguration(dicomWebConfig, {
+          params,
+          query
+        });
+      }
+      dicomWebConfigCopy = JSON.parse(JSON.stringify(dicomWebConfig));
+      getAuthrorizationHeader = () => {
+        const xhrRequestHeaders = {};
+        const authHeaders = userAuthenticationService.getAuthorizationHeader();
+        if (authHeaders && authHeaders.Authorization) {
+          xhrRequestHeaders.Authorization = authHeaders.Authorization;
+        }
+        return xhrRequestHeaders;
+      };
+      generateWadoHeader = () => {
+        let authorizationHeader = getAuthrorizationHeader();
+        //Generate accept header depending on config params
+        let formattedAcceptHeader = src.utils.generateAcceptHeader(dicomWebConfig.acceptHeader, dicomWebConfig.requestTransferSyntaxUID, dicomWebConfig.omitQuotationForMultipartRequest);
+        return {
+          ...authorizationHeader,
+          Accept: formattedAcceptHeader
+        };
+      };
+      qidoConfig = {
+        url: dicomWebConfig.qidoRoot,
+        staticWado: dicomWebConfig.staticWado,
+        singlepart: dicomWebConfig.singlepart,
+        headers: userAuthenticationService.getAuthorizationHeader(),
+        errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
+      };
+      wadoConfig = {
+        url: dicomWebConfig.wadoRoot,
+        staticWado: dicomWebConfig.staticWado,
+        singlepart: dicomWebConfig.singlepart,
+        headers: userAuthenticationService.getAuthorizationHeader(),
+        errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
+      };
+
+      // TODO -> Two clients sucks, but its better than 1000.
+      // TODO -> We'll need to merge auth later.
+      qidoDicomWebClient = dicomWebConfig.staticWado ? new StaticWadoClient(qidoConfig) : new dicomweb_client_es.api.DICOMwebClient(qidoConfig);
+      wadoDicomWebClient = dicomWebConfig.staticWado ? new StaticWadoClient(wadoConfig) : new dicomweb_client_es.api.DICOMwebClient(wadoConfig);
     },
     query: {
       studies: {
         mapParams: mapParams.bind(),
         search: async function (origParams) {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           const {
             studyInstanceUid,
             seriesInstanceUid,
             ...mappedParams
           } = mapParams(origParams, {
-            supportsFuzzyMatching,
-            supportsWildcard
+            supportsFuzzyMatching: dicomWebConfig.supportsFuzzyMatching,
+            supportsWildcard: dicomWebConfig.supportsWildcard
           }) || {};
           const results = await search(qidoDicomWebClient, undefined, undefined, mappedParams);
           return processResults(results);
@@ -1059,10 +1091,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       series: {
         // mapParams: mapParams.bind(),
         search: async function (studyInstanceUid) {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           const results = await seriesInStudy(qidoDicomWebClient, studyInstanceUid);
           return processSeriesResults(results);
         }
@@ -1071,10 +1100,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
 
       instances: {
         search: (studyInstanceUid, queryParameters) => {
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            qidoDicomWebClient.headers = headers;
-          }
+          qidoDicomWebClient.headers = getAuthrorizationHeader();
           search.call(undefined, qidoDicomWebClient, studyInstanceUid, null, queryParameters);
         }
       }
@@ -1093,8 +1119,8 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
        */
       directURL: params => {
         return utils_getDirectURL({
-          wadoRoot,
-          singlepart
+          wadoRoot: dicomWebConfig.wadoRoot,
+          singlepart: dicomWebConfig.singlepart
         }, params);
       },
       bulkDataURI: async _ref2 => {
@@ -1102,6 +1128,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           StudyInstanceUID,
           BulkDataURI
         } = _ref2;
+        qidoDicomWebClient.headers = getAuthrorizationHeader();
         const options = {
           multipart: false,
           BulkDataURI,
@@ -1121,14 +1148,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
             sortFunction,
             madeInClient = false
           } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-          const headers = userAuthenticationService.getAuthorizationHeader();
-          if (headers) {
-            wadoDicomWebClient.headers = headers;
-          }
           if (!StudyInstanceUID) {
             throw new Error('Unable to query for SeriesMetadata without StudyInstanceUID');
           }
-          if (enableStudyLazyLoad) {
+          if (dicomWebConfig.enableStudyLazyLoad) {
             return implementation._retrieveSeriesMetadataAsync(StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient);
           }
           return implementation._retrieveSeriesMetadataSync(StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient);
@@ -1137,10 +1160,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     },
     store: {
       dicom: async (dataset, request) => {
-        const headers = userAuthenticationService.getAuthorizationHeader();
-        if (headers) {
-          wadoDicomWebClient.headers = headers;
-        }
+        wadoDicomWebClient.headers = getAuthrorizationHeader();
         if (dataset instanceof ArrayBuffer) {
           const options = {
             datasets: [dataset],
@@ -1149,7 +1169,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           await wadoDicomWebClient.storeInstances(options);
         } else {
           const meta = {
-            FileMetaInformationVersion: dataset._meta.FileMetaInformationVersion.Value,
+            FileMetaInformationVersion: dataset._meta?.FileMetaInformationVersion?.Value,
             MediaStorageSOPClassUID: dataset.SOPClassUID,
             MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
             TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
@@ -1170,7 +1190,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     },
     _retrieveSeriesMetadataSync: async (StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient) => {
       const enableStudyLazyLoad = false;
-
+      wadoDicomWebClient.headers = generateWadoHeader();
       // data is all SOPInstanceUIDs
       const data = await retrieveStudyMetadata(wadoDicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction);
 
@@ -1199,6 +1219,8 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           instance
         });
         instance.imageId = imageId;
+        instance.wadoRoot = dicomWebConfig.wadoRoot;
+        instance.wadoUri = dicomWebConfig.wadoUri;
         metadataProvider.addImageIdToUIDs(imageId, {
           StudyInstanceUID,
           SeriesInstanceUID: instance.SeriesInstanceUID,
@@ -1215,6 +1237,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     _retrieveSeriesMetadataAsync: async function (StudyInstanceUID, filters, sortCriteria, sortFunction) {
       let madeInClient = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       const enableStudyLazyLoad = true;
+      wadoDicomWebClient.headers = generateWadoHeader();
       // Get Series
       const {
         preLoadData: seriesSummaryMetadata,
@@ -1230,7 +1253,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       const addRetrieveBulkData = instance => {
         const naturalized = naturalizeDataset(instance);
 
-        // if we konw the server doesn't use bulkDataURI, then don't
+        // if we know the server doesn't use bulkDataURI, then don't
         if (!dicomWebConfig.bulkDataURI?.enabled) {
           return naturalized;
         }
@@ -1356,10 +1379,23 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     },
     getConfig() {
       return dicomWebConfigCopy;
+    },
+    getStudyInstanceUIDs(_ref4) {
+      let {
+        params,
+        query
+      } = _ref4;
+      const {
+        StudyInstanceUIDs: paramsStudyInstanceUIDs
+      } = params;
+      const queryStudyInstanceUIDs = src.utils.splitComma(query.getAll('StudyInstanceUIDs'));
+      const StudyInstanceUIDs = queryStudyInstanceUIDs.length && queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
+      const StudyInstanceUIDsAsArray = StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs) ? StudyInstanceUIDs : [StudyInstanceUIDs];
+      return StudyInstanceUIDsAsArray;
     }
   };
-  if (supportsReject) {
-    implementation.reject = dcm4cheeReject(wadoRoot);
+  if (dicomWebConfig.supportsReject) {
+    implementation.reject = dcm4cheeReject(dicomWebConfig.wadoRoot);
   }
   return src/* IWebApiDataSource */.Is.create(implementation);
 }
@@ -1375,7 +1411,8 @@ const mappings = {
   patientId: 'PatientID'
 };
 let _store = {
-  urls: []
+  urls: [],
+  studyInstanceUIDMap: new Map() // map of urls to array of study instance UIDs
   // {
   //   url: url1
   //   studies: [Study1, Study2], // if multiple studies
@@ -1403,17 +1440,17 @@ const findStudies = (key, value) => {
 };
 function createDicomJSONApi(dicomJsonConfig) {
   const {
-    name,
     wadoRoot
   } = dicomJsonConfig;
   const implementation = {
     initialize: async _ref => {
       let {
-        params,
         query,
         url
       } = _ref;
-      if (!url) url = query.get('url');
+      if (!url) {
+        url = query.get('url');
+      }
       let metaData = getMetaDataByURL(url);
 
       // if we have already cached the data from this specific url
@@ -1425,8 +1462,7 @@ function createDicomJSONApi(dicomJsonConfig) {
         });
       }
       const response = await fetch(url);
-      let data = await response.json();
-      const studyInstanceUIDs = data.studies.map(study => study.StudyInstanceUID);
+      const data = await response.json();
       let StudyInstanceUID;
       let SeriesInstanceUID;
       data.studies.forEach(study => {
@@ -1452,7 +1488,7 @@ function createDicomJSONApi(dicomJsonConfig) {
         url,
         studies: [...data.studies]
       });
-      return studyInstanceUIDs;
+      _store.studyInstanceUIDMap.set(url, data.studies.map(study => study.StudyInstanceUID));
     },
     query: {
       studies: {
@@ -1479,18 +1515,18 @@ function createDicomJSONApi(dicomJsonConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMJson QUERY processResults');
+          console.warn(' DICOMJson QUERY processResults not implemented');
         }
       },
       series: {
         // mapParams: mapParams.bind(),
         search: () => {
-          console.debug(' DICOMJson QUERY SERIES SEARCH');
+          console.warn(' DICOMJson QUERY SERIES SEARCH not implemented');
         }
       },
       instances: {
         search: () => {
-          console.debug(' DICOMJson QUERY instances SEARCH');
+          console.warn(' DICOMJson QUERY instances SEARCH not implemented');
         }
       }
     },
@@ -1512,7 +1548,7 @@ function createDicomJSONApi(dicomJsonConfig) {
         return utils_getDirectURL(wadoRoot, params);
       },
       series: {
-        metadata: function () {
+        metadata: async function () {
           let {
             StudyInstanceUID,
             madeInClient = false,
@@ -1561,14 +1597,16 @@ function createDicomJSONApi(dicomJsonConfig) {
               return obj;
             });
             storeInstances(instances);
-            if (index === numberOfSeries - 1) setSuccessFlag();
+            if (index === numberOfSeries - 1) {
+              setSuccessFlag();
+            }
           });
         }
       }
     },
     store: {
       dicom: () => {
-        console.debug(' DICOMJson store dicom');
+        console.warn(' DICOMJson store dicom not implemented');
       }
     },
     getImageIdsForDisplaySet(displaySet) {
@@ -1608,6 +1646,14 @@ function createDicomJSONApi(dicomJsonConfig) {
         frame
       });
       return imageIds;
+    },
+    getStudyInstanceUIDs: _ref3 => {
+      let {
+        params,
+        query
+      } = _ref3;
+      const url = query.get('url');
+      return _store.studyInstanceUIDMap.get(url);
     }
   };
   return src/* IWebApiDataSource */.Is.create(implementation);
@@ -1628,8 +1674,12 @@ const END_MODALITIES = {
 };
 const compareValue = function (v1, v2) {
   let def = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  if (v1 === v2) return def;
-  if (v1 < v2) return -1;
+  if (v1 === v2) {
+    return def;
+  }
+  if (v1 < v2) {
+    return -1;
+  }
   return 1;
 };
 
@@ -1660,19 +1710,6 @@ function createDicomLocalApi(dicomLocalConfig) {
         params,
         query
       } = _ref;
-      const {
-        StudyInstanceUIDs: paramsStudyInstanceUIDs
-      } = params;
-      const queryStudyInstanceUIDs = query.getAll('StudyInstanceUIDs');
-      const StudyInstanceUIDs = queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
-      const StudyInstanceUIDsAsArray = StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs) ? StudyInstanceUIDs : [StudyInstanceUIDs];
-
-      // Put SRs at the end of series list to make sure images are loaded first
-      StudyInstanceUIDsAsArray.forEach(StudyInstanceUID => {
-        const study = src.DicomMetadataStore.getStudy(StudyInstanceUID);
-        study.series = study.series.sort(customSort);
-      });
-      return StudyInstanceUIDsAsArray;
     },
     query: {
       studies: {
@@ -1711,7 +1748,7 @@ function createDicomLocalApi(dicomLocalConfig) {
           });
         },
         processResults: () => {
-          console.debug(' DICOMLocal QUERY processResults');
+          console.warn(' DICOMLocal QUERY processResults not implemented');
         }
       },
       series: {
@@ -1733,7 +1770,7 @@ function createDicomLocalApi(dicomLocalConfig) {
       },
       instances: {
         search: () => {
-          console.debug(' DICOMLocal QUERY instances SEARCH');
+          console.warn(' DICOMLocal QUERY instances SEARCH not implemented');
         }
       }
     },
@@ -1854,6 +1891,29 @@ function createDicomLocalApi(dicomLocalConfig) {
     },
     deleteStudyMetadataPromise() {
       console.log('deleteStudyMetadataPromise not implemented');
+    },
+    getStudyInstanceUIDs: _ref3 => {
+      let {
+        params,
+        query
+      } = _ref3;
+      const {
+        StudyInstanceUIDs: paramsStudyInstanceUIDs
+      } = params;
+      const queryStudyInstanceUIDs = query.getAll('StudyInstanceUIDs');
+      const StudyInstanceUIDs = queryStudyInstanceUIDs || paramsStudyInstanceUIDs;
+      const StudyInstanceUIDsAsArray = StudyInstanceUIDs && Array.isArray(StudyInstanceUIDs) ? StudyInstanceUIDs : [StudyInstanceUIDs];
+
+      // Put SRs at the end of series list to make sure images are loaded first
+      let isStudyInCache = false;
+      StudyInstanceUIDsAsArray.forEach(StudyInstanceUID => {
+        const study = src.DicomMetadataStore.getStudy(StudyInstanceUID);
+        if (study) {
+          study.series = study.series.sort(customSort);
+          isStudyInCache = true;
+        }
+      });
+      return isStudyInCache ? StudyInstanceUIDsAsArray : [];
     }
   };
   return src/* IWebApiDataSource */.Is.create(implementation);
@@ -1882,13 +1942,6 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
         params,
         query
       } = _ref;
-      let studyInstanceUIDs = [];
-
-      // there seem to be a couple of variations of the case for this parameter
-      const queryStudyInstanceUIDs = query.get('studyInstanceUIDs') || query.get('studyInstanceUids');
-      if (!queryStudyInstanceUIDs) {
-        throw new Error(`No studyInstanceUids in request for '${name}'`);
-      }
       const url = query.get('url');
       if (!url) {
         throw new Error(`No url for '${name}'`);
@@ -1898,10 +1951,12 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
         if (!data.servers?.dicomWeb?.[0]) {
           throw new Error('Invalid configuration returned by url');
         }
-        dicomWebDelegate = createDicomWebApi(data.servers.dicomWeb[0], UserAuthenticationService);
-        studyInstanceUIDs = queryStudyInstanceUIDs.split(';');
+        dicomWebDelegate = createDicomWebApi(data.servers.dicomWeb[0].configuration, UserAuthenticationService);
+        dicomWebDelegate.initialize({
+          params,
+          query
+        });
       }
-      return studyInstanceUIDs;
     },
     query: {
       studies: {
@@ -1921,7 +1976,7 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
         return dicomWebDelegate.retrieve.directURL(...arguments);
       },
       series: {
-        metadata: function () {
+        metadata: async function () {
           return dicomWebDelegate.retrieve.series.metadata(...arguments);
         }
       }
@@ -1939,6 +1994,21 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
     },
     getImageIdsForInstance: function () {
       return dicomWebDelegate.getImageIdsForInstance(...arguments);
+    },
+    getStudyInstanceUIDs(_ref2) {
+      let {
+        params,
+        query
+      } = _ref2;
+      let studyInstanceUIDs = [];
+
+      // there seem to be a couple of variations of the case for this parameter
+      const queryStudyInstanceUIDs = query.get('studyInstanceUIDs') || query.get('studyInstanceUids');
+      if (!queryStudyInstanceUIDs) {
+        throw new Error(`No studyInstanceUids in request for '${name}'`);
+      }
+      studyInstanceUIDs = queryStudyInstanceUIDs.split(';');
+      return studyInstanceUIDs;
     }
   };
   return src/* IWebApiDataSource */.Is.create(implementation);
@@ -1978,24 +2048,24 @@ function getDataSourcesModule() {
 }
 /* harmony default export */ const src_getDataSourcesModule = (getDataSourcesModule);
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(32735);
+var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(60216);
+var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
+// EXTERNAL MODULE: ../../ui/src/index.js + 485 modules
+var ui_src = __webpack_require__(71783);
+// EXTERNAL MODULE: ./state/index.js + 1 modules
+var state = __webpack_require__(62657);
 // EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
-var dist = __webpack_require__(65783);
+var dist = __webpack_require__(62474);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var es = __webpack_require__(21572);
+var es = __webpack_require__(69190);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
-var react_router_dist = __webpack_require__(14935);
-// EXTERNAL MODULE: ../../ui/src/index.js + 452 modules
-var ui_src = __webpack_require__(28619);
-// EXTERNAL MODULE: ../../i18n/src/index.js + 95 modules
-var i18n_src = __webpack_require__(93058);
-// EXTERNAL MODULE: ./state/index.js + 1 modules
-var state = __webpack_require__(22896);
+var react_router_dist = __webpack_require__(85066);
+// EXTERNAL MODULE: ../../i18n/src/index.js + 134 modules
+var i18n_src = __webpack_require__(50376);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(40841);
+var classnames = __webpack_require__(44921);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/Toolbar.tsx
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -2009,48 +2079,21 @@ function Toolbar(_ref) {
     toolbarService
   } = servicesManager.services;
   const [toolbarButtons, setToolbarButtons] = (0,react.useState)([]);
-  const [buttonState, setButtonState] = (0,react.useState)({
-    primaryToolId: '',
-    toggles: {},
-    groups: {}
-  });
-
-  // Could track buttons and state separately...?
   (0,react.useEffect)(() => {
     const {
-      unsubscribe: unsub1
+      unsubscribe
     } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, () => setToolbarButtons(toolbarService.getButtonSection('primary')));
-    const {
-      unsubscribe: unsub2
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, () => setButtonState({
-      ...toolbarService.state
-    }));
     return () => {
-      unsub1();
-      unsub2();
+      unsubscribe();
     };
   }, [toolbarService]);
-  return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map((toolDef, index) => {
+  const onInteraction = (0,react.useCallback)(args => toolbarService.recordInteraction(args), [toolbarService]);
+  return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map(toolDef => {
     const {
       id,
       Component,
       componentProps
     } = toolDef;
-    // TODO: ...
-
-    // isActive if:
-    // - id is primary?
-    // - id is in list of "toggled on"?
-    let isActive;
-    if (componentProps.type === 'toggle') {
-      isActive = buttonState.toggles[id];
-    }
-    // Also need... to filter list for splitButton, and set primary based on most recently clicked
-    // Also need to kill the radioGroup button's magic logic
-    // Everything should be reactive off these props, so commands can inform ToolbarService
-
-    // These can... Trigger toolbar events based on updates?
-    // Then sync using useEffect, or simply modify the state here?
     return (
       /*#__PURE__*/
       // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
@@ -2061,16 +2104,13 @@ function Toolbar(_ref) {
       }, /*#__PURE__*/react.createElement(Component, _extends({
         id: id
       }, componentProps, {
-        bState: buttonState,
-        isActive: isActive,
-        onInteraction: args => toolbarService.recordInteraction(args),
+        onInteraction: onInteraction,
         servicesManager: servicesManager
       })))
     );
   }));
 }
-;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
-
+;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/ViewerHeader.tsx
 
 
 
@@ -2085,20 +2125,11 @@ const {
   defaultLanguage,
   currentLanguage
 } = i18n_src["default"];
-function ViewerLayout(_ref) {
+function ViewerHeader(_ref) {
   let {
-    // From Extension Module Params
-    extensionManager,
-    servicesManager,
     hotkeysManager,
-    commandsManager,
-    // From Modes
-    viewports,
-    ViewportGridComp,
-    leftPanels = [],
-    rightPanels = [],
-    leftPanelDefaultClosed = false,
-    rightPanelDefaultClosed = false
+    extensionManager,
+    servicesManager
   } = _ref;
   const [appConfig] = (0,state/* useAppConfig */.M)();
   const navigate = (0,dist/* useNavigate */.s0)();
@@ -2108,16 +2139,12 @@ function ViewerLayout(_ref) {
       pathname
     } = location;
     const dataSourceIdx = pathname.indexOf('/', 1);
-    // const search =
-    //   dataSourceIdx === -1
-    //     ? undefined
-    //     : `datasources=${pathname.substring(dataSourceIdx + 1)}`;
-
-    // Todo: Handle parameters in a better way.
     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) {
+    if (dataSourceIdx !== -1 && existingDataSource) {
       searchQuery.append('datasources', pathname.substring(dataSourceIdx + 1));
     }
     if (configUrl) {
@@ -2135,16 +2162,12 @@ function ViewerLayout(_ref) {
     show,
     hide
   } = (0,ui_src/* useModal */.dd)();
-  const [showLoadingIndicator, setShowLoadingIndicator] = (0,react.useState)(appConfig.showLoadingIndicator);
-  const {
-    hangingProtocolService
-  } = servicesManager.services;
   const {
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.7.0-beta.11";
-  const commitHash = "d51211f6b97a7ad07cd87470a8f251a728cd7b28";
+  const versionNumber = "3.7.0-beta.110";
+  const commitHash = "157b88c909d3289cb89ace731c1f9a19d40797ac";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -2178,7 +2201,9 @@ function ViewerLayout(_ref) {
             hotkeyDefinitions,
             language
           } = _ref2;
-          i18n_src["default"].changeLanguage(language.value);
+          if (language.value !== currentLanguage().value) {
+            i18n_src["default"].changeLanguage(language.value);
+          }
           hotkeysManager.setHotkeys(hotkeyDefinitions);
           hide();
         },
@@ -2196,6 +2221,91 @@ function ViewerLayout(_ref) {
       }
     });
   }
+  return /*#__PURE__*/react.createElement(ui_src/* Header */.h4, {
+    menuOptions: menuOptions,
+    isReturnEnabled: !!appConfig.showStudyList,
+    onClickReturnButton: onClickReturnButton,
+    WhiteLabeling: appConfig.whiteLabeling
+  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
+    context: "Primary Toolbar"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "relative flex justify-center"
+  }, /*#__PURE__*/react.createElement(Toolbar, {
+    servicesManager: servicesManager
+  }))));
+}
+/* harmony default export */ const ViewerLayout_ViewerHeader = (ViewerHeader);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/SidePanelWithServices.tsx
+
+
+const SidePanelWithServices = _ref => {
+  let {
+    servicesManager,
+    side,
+    className,
+    activeTabIndex: activeTabIndexProp,
+    tabs
+  } = _ref;
+  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 [hasBeenOpened, setHasBeenOpened] = (0,react.useState)(false);
+  const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp);
+  (0,react.useEffect)(() => {
+    if (panelService) {
+      const activatePanelSubscription = panelService.subscribe(panelService.EVENTS.ACTIVATE_PANEL, activatePanelEvent => {
+        if (!hasBeenOpened || activatePanelEvent.forceActive) {
+          const tabIndex = tabs.findIndex(tab => tab.id === activatePanelEvent.panelId);
+          if (tabIndex !== -1) {
+            setActiveTabIndex(tabIndex);
+          }
+        }
+      });
+      return () => {
+        activatePanelSubscription.unsubscribe();
+      };
+    }
+  }, [tabs, hasBeenOpened, panelService]);
+  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+    side: side,
+    className: className,
+    activeTabIndex: activeTabIndex,
+    tabs: tabs,
+    onOpen: () => {
+      setHasBeenOpened(true);
+    }
+  });
+};
+/* harmony default export */ const Components_SidePanelWithServices = (SidePanelWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
+
+
+
+
+
+
+
+function ViewerLayout(_ref) {
+  let {
+    // From Extension Module Params
+    extensionManager,
+    servicesManager,
+    hotkeysManager,
+    commandsManager,
+    // From Modes
+    viewports,
+    ViewportGridComp,
+    leftPanels = [],
+    rightPanels = [],
+    leftPanelDefaultClosed = false,
+    rightPanelDefaultClosed = false
+  } = _ref;
+  const [appConfig] = (0,state/* useAppConfig */.M)();
+  const {
+    hangingProtocolService
+  } = servicesManager.services;
+  const [showLoadingIndicator, setShowLoadingIndicator] = (0,react.useState)(appConfig.showLoadingIndicator);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -2213,7 +2323,7 @@ function ViewerLayout(_ref) {
   const getComponent = id => {
     const entry = extensionManager.getModuleEntry(id);
     if (!entry) {
-      throw new Error(`${id} is not a valid entry for an extension module, please check your configuration or make sure the extension is registered.`);
+      throw new Error(`${id} is not valid for an extension module. Please verify your configuration or ensure that the extension is properly registered. It's also possible that your mode is utilizing a module from an extension that hasn't been included in its dependencies (add the extension to the "extensionDependencies" array in your mode's index.js file)`);
     }
     let content;
     if (entry && entry.component) {
@@ -2266,19 +2376,12 @@ function ViewerLayout(_ref) {
   const leftPanelComponents = leftPanels.map(getPanelData);
   const rightPanelComponents = rightPanels.map(getPanelData);
   const viewportComponents = viewports.map(getViewportComponentData);
-  return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(ui_src/* Header */.h4, {
-    menuOptions: menuOptions,
-    isReturnEnabled: !!appConfig.showStudyList,
-    onClickReturnButton: onClickReturnButton,
-    WhiteLabeling: appConfig.whiteLabeling
-  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
-    context: "Primary Toolbar"
-  }, /*#__PURE__*/react.createElement("div", {
-    className: "relative flex justify-center"
-  }, /*#__PURE__*/react.createElement(Toolbar, {
+  return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(ViewerLayout_ViewerHeader, {
+    hotkeysManager: hotkeysManager,
+    extensionManager: extensionManager,
     servicesManager: servicesManager
-  })))), /*#__PURE__*/react.createElement("div", {
-    className: "bg-black flex flex-row items-stretch w-full overflow-hidden flex-nowrap relative",
+  }), /*#__PURE__*/react.createElement("div", {
+    className: "relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black",
     style: {
       height: 'calc(100vh - 52px'
     }
@@ -2286,15 +2389,15 @@ function ViewerLayout(_ref) {
     className: "h-full w-full bg-black"
   }), leftPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Left Panel"
-  }, /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+  }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "left",
     activeTabIndex: leftPanelDefaultClosed ? null : 0,
     tabs: leftPanelComponents,
     servicesManager: servicesManager
   })) : null, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-col flex-1 h-full"
+    className: "flex h-full flex-1 flex-col"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex items-center justify-center flex-1 h-full overflow-hidden bg-black relative"
+    className: "relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
   }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Grid"
   }, /*#__PURE__*/react.createElement(ViewportGridComp, {
@@ -2303,7 +2406,7 @@ function ViewerLayout(_ref) {
     commandsManager: commandsManager
   })))), rightPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
     context: "Right Panel"
-  }, /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+  }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "right",
     activeTabIndex: rightPanelDefaultClosed ? null : 0,
     tabs: rightPanelComponents,
@@ -2323,7 +2426,8 @@ ViewerLayout.propTypes = {
   leftPanelDefaultClosed: (prop_types_default()).bool.isRequired,
   rightPanelDefaultClosed: (prop_types_default()).bool.isRequired,
   /** Responsible for rendering our grid of viewports; provided by consuming application */
-  children: prop_types_default().oneOfType([(prop_types_default()).node, (prop_types_default()).func]).isRequired
+  children: prop_types_default().oneOfType([(prop_types_default()).node, (prop_types_default()).func]).isRequired,
+  viewports: (prop_types_default()).array
 };
 /* harmony default export */ const src_ViewerLayout = (ViewerLayout);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getLayoutTemplateModule.js
@@ -2364,6 +2468,7 @@ ViewerLayout.propTypes = {
 
 
 
+
 const {
   sortStudyInstances,
   formatDate
@@ -2386,6 +2491,8 @@ function PanelStudyBrowser(_ref) {
     displaySetService,
     uiNotificationService
   } = servicesManager.services;
+  const navigate = (0,dist/* useNavigate */.s0)();
+
   // Normally you nest the components so the tree isn't so deep, and the data
   // doesn't have to have such an intense shape. This works well enough for now.
   // Tabs --> Studies --> DisplaySets --> Thumbnails
@@ -2393,7 +2500,7 @@ function PanelStudyBrowser(_ref) {
     StudyInstanceUIDs
   } = (0,ui_src/* useImageViewer */.zG)();
   const [{
-    activeViewportIndex,
+    activeViewportId,
     viewports
   }, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
   const [activeTabName, setActiveTabName] = (0,react.useState)('primary');
@@ -2401,12 +2508,11 @@ function PanelStudyBrowser(_ref) {
   const [studyDisplayList, setStudyDisplayList] = (0,react.useState)([]);
   const [displaySets, setDisplaySets] = (0,react.useState)([]);
   const [thumbnailImageSrcMap, setThumbnailImageSrcMap] = (0,react.useState)({});
-  const isMounted = (0,react.useRef)(true);
   const onDoubleClickThumbnailHandler = displaySetInstanceUID => {
     let updatedViewports = [];
-    const viewportIndex = activeViewportIndex;
+    const viewportId = activeViewportId;
     try {
-      updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportIndex, displaySetInstanceUID);
+      updatedViewports = hangingProtocolService.getViewportsRequireUpdate(viewportId, displaySetInstanceUID);
     } catch (error) {
       console.warn(error);
       uiNotificationService.show({
@@ -2427,6 +2533,10 @@ function PanelStudyBrowser(_ref) {
       const qidoForStudyUID = await dataSource.query.studies.search({
         studyInstanceUid: StudyInstanceUID
       });
+      if (!qidoForStudyUID?.length) {
+        navigate('/notfoundstudy', '_self');
+        throw new Error('Invalid study URL');
+      }
       let qidoStudiesForPatient = qidoForStudyUID;
 
       // try to fetch the prior studies based on the patientID if the
@@ -2457,8 +2567,7 @@ function PanelStudyBrowser(_ref) {
       });
     }
     StudyInstanceUIDs.forEach(sid => fetchStudiesForPatient(sid));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [StudyInstanceUIDs, getStudiesForPatientByMRN]);
+  }, [StudyInstanceUIDs, dataSource, getStudiesForPatientByMRN, navigate]);
 
   // // ~~ Initial Thumbnails
   (0,react.useEffect)(() => {
@@ -2470,24 +2579,19 @@ function PanelStudyBrowser(_ref) {
       const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
       // TODO: Is it okay that imageIds are not returned here for SR displaySets?
-      if (imageId) {
-        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
-        if (isMounted.current) {
-          setThumbnailImageSrcMap(prevState => {
-            return {
-              ...prevState,
-              ...newImageSrcEntry
-            };
-          });
-        }
+      if (!imageId || displaySet?.unsupported) {
+        return;
       }
+      // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+      newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId);
+      setThumbnailImageSrcMap(prevState => {
+        return {
+          ...prevState,
+          ...newImageSrcEntry
+        };
+      });
     });
-    return () => {
-      isMounted.current = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, dataSource, displaySetService, getImageSrc]);
 
   // ~~ displaySets
   (0,react.useEffect)(() => {
@@ -2496,50 +2600,59 @@ function PanelStudyBrowser(_ref) {
     const mappedDisplaySets = _mapDisplaySets(currentDisplaySets, thumbnailImageSrcMap);
     sortStudyInstances(mappedDisplaySets);
     setDisplaySets(mappedDisplaySets);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [thumbnailImageSrcMap]);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
 
   // ~~ subscriptions --> displaySets
   (0,react.useEffect)(() => {
     // DISPLAY_SETS_ADDED returns an array of DisplaySets that were added
     const SubscriptionDisplaySetsAdded = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_ADDED, data => {
       const {
-        displaySetsAdded
+        displaySetsAdded,
+        options
       } = data;
       displaySetsAdded.forEach(async dSet => {
         const newImageSrcEntry = {};
         const displaySet = displaySetService.getDisplaySetByUID(dSet.displaySetInstanceUID);
+        if (displaySet?.unsupported) {
+          return;
+        }
         const imageIds = dataSource.getImageIdsForDisplaySet(displaySet);
         const imageId = imageIds[Math.floor(imageIds.length / 2)];
 
         // TODO: Is it okay that imageIds are not returned here for SR displaysets?
-        if (imageId) {
-          // When the image arrives, render it and store the result in the thumbnailImgSrcMap
-          newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId, dSet.initialViewport);
-          if (isMounted.current) {
-            setThumbnailImageSrcMap(prevState => {
-              return {
-                ...prevState,
-                ...newImageSrcEntry
-              };
-            });
-          }
+        if (!imageId) {
+          return;
         }
-      });
-    });
-
+        // When the image arrives, render it and store the result in the thumbnailImgSrcMap
+        newImageSrcEntry[dSet.displaySetInstanceUID] = await getImageSrc(imageId, dSet.initialViewport);
+        setThumbnailImageSrcMap(prevState => {
+          return {
+            ...prevState,
+            ...newImageSrcEntry
+          };
+        });
+      });
+    });
+    return () => {
+      SubscriptionDisplaySetsAdded.unsubscribe();
+    };
+  }, [getImageSrc, dataSource, displaySetService]);
+  (0,react.useEffect)(() => {
     // TODO: Will this always hold _all_ the displaySets we care about?
     // DISPLAY_SETS_CHANGED returns `DisplaySerService.activeDisplaySets`
     const SubscriptionDisplaySetsChanged = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SETS_CHANGED, changedDisplaySets => {
       const mappedDisplaySets = _mapDisplaySets(changedDisplaySets, thumbnailImageSrcMap);
       setDisplaySets(mappedDisplaySets);
     });
+    const SubscriptionDisplaySetMetaDataInvalidated = displaySetService.subscribe(displaySetService.EVENTS.DISPLAY_SET_SERIES_METADATA_INVALIDATED, () => {
+      const mappedDisplaySets = _mapDisplaySets(displaySetService.getActiveDisplaySets(), thumbnailImageSrcMap);
+      setDisplaySets(mappedDisplaySets);
+    });
     return () => {
-      SubscriptionDisplaySetsAdded.unsubscribe();
       SubscriptionDisplaySetsChanged.unsubscribe();
+      SubscriptionDisplaySetMetaDataInvalidated.unsubscribe();
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [StudyInstanceUIDs, thumbnailImageSrcMap, displaySetService]);
   const tabs = _createStudyBrowserTabs(StudyInstanceUIDs, studyDisplayList, displaySets);
 
   // TODO: Should not fire this on "close"
@@ -2554,7 +2667,7 @@ function PanelStudyBrowser(_ref) {
       requestDisplaySetCreationForStudy(displaySetService, StudyInstanceUID, madeInClient);
     }
   }
-  const activeDisplaySetInstanceUIDs = viewports[activeViewportIndex]?.displaySetInstanceUIDs;
+  const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
   return /*#__PURE__*/react.createElement(ui_src/* StudyBrowser */.eX, {
     tabs: tabs,
     servicesManager: servicesManager,
@@ -2605,7 +2718,7 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
   const thumbnailNoImageDisplaySets = [];
   displaySets.filter(ds => !ds.excludeFromThumbnailBrowser).forEach(ds => {
     const imageSrc = thumbnailImageSrcMap[ds.displaySetInstanceUID];
-    const componentType = _getComponentType(ds.Modality);
+    const componentType = _getComponentType(ds);
     const array = componentType === 'thumbnail' ? thumbnailDisplaySets : thumbnailNoImageDisplaySets;
     array.push({
       displaySetInstanceUID: ds.displaySetInstanceUID,
@@ -2617,21 +2730,23 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
       numInstances: ds.numImageFrames,
       countIcon: ds.countIcon,
       StudyInstanceUID: ds.StudyInstanceUID,
+      messages: ds.messages,
       componentType,
       imageSrc,
       dragData: {
         type: 'displayset',
         displaySetInstanceUID: ds.displaySetInstanceUID
         // .. Any other data to pass
-      }
+      },
+
+      isHydratedForDerivedDisplaySet: ds.isHydrated
     });
   });
-
   return [...thumbnailDisplaySets, ...thumbnailNoImageDisplaySets];
 }
 const thumbnailNoImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
-function _getComponentType(Modality) {
-  if (thumbnailNoImageModalities.includes(Modality)) {
+function _getComponentType(ds) {
+  if (thumbnailNoImageModalities.includes(ds.Modality) || ds?.unsupported) {
     // TODO probably others.
     return 'thumbnailNoImage';
   }
@@ -2798,7 +2913,7 @@ function ActionButtons(_ref) {
   const {
     t
   } = (0,es/* useTranslation */.$G)('MeasurementTable');
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.hE, {
+  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* LegacyButtonGroup */.HO, {
     color: "black",
     size: "inherit"
   }, /*#__PURE__*/react.createElement(ui_src/* LegacyButton */.mN, {
@@ -2819,17 +2934,16 @@ ActionButtons.defaultProps = {
 };
 /* harmony default export */ const Panels_ActionButtons = (ActionButtons);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
-var lodash_debounce = __webpack_require__(40001);
+var lodash_debounce = __webpack_require__(8324);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/createReportDialogPrompt.tsx
-/* eslint-disable react/display-name */
 
 
 const CREATE_REPORT_DIALOG_RESPONSE = {
   CANCEL: 0,
   CREATE_REPORT: 1
 };
-function createReportDialogPrompt(uiDialogService, _ref) {
+function CreateReportDialogPrompt(uiDialogService, _ref) {
   let {
     extensionManager
   } = _ref;
@@ -2906,11 +3020,11 @@ function createReportDialogPrompt(uiDialogService, _ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.U.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,
@@ -2937,9 +3051,11 @@ function createReportDialogPrompt(uiDialogService, _ref) {
               });
             }
           };
-          return /*#__PURE__*/react.createElement(react.Fragment, null, dataSourcesOpts.length > 1 && /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
+          return /*#__PURE__*/react.createElement(react.Fragment, null, dataSourcesOpts.length > 1 && window.config?.allowMultiSelectExport && /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("label", {
+            className: "text-[14px] leading-[1.2] text-white"
+          }, "Data Source"), /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
             closeMenuOnSelect: true,
-            className: "mr-2 bg-black border-primary-main",
+            className: "border-primary-main  mt-2 bg-black",
             options: dataSourcesOpts,
             placeholder: dataSourcesOpts.find(option => option.value === value.dataSourceName).placeHolder,
             value: value.dataSourceName,
@@ -2950,17 +3066,19 @@ function createReportDialogPrompt(uiDialogService, _ref) {
               }));
             },
             isClearable: false
-          }), /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
+          })), /*#__PURE__*/react.createElement("div", {
+            className: "mt-3"
+          }, /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
             autoFocus: true,
             label: "Enter the report name",
             labelClassName: "text-white text-[14px] leading-[1.2]",
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             value: value.label,
             onChange: onChangeHandler,
             onKeyPress: onKeyPressHandler,
             required: true
-          }));
+          })));
         }
       }
     });
@@ -2973,12 +3091,13 @@ function createReportDialogPrompt(uiDialogService, _ref) {
 /**
  *
  * @param {*} servicesManager
- * @param {*} dataSource
- * @param {*} measurements
- * @param {*} options
- * @returns {string[]} displaySetInstanceUIDs
  */
-async function createReportAsync(servicesManager, commandsManager, dataSource, measurements, options) {
+async function createReportAsync(_ref) {
+  let {
+    servicesManager,
+    getReport,
+    reportType = 'measurement'
+  } = _ref;
   const {
     displaySetService,
     uiNotificationService,
@@ -2988,32 +3107,27 @@ async function createReportAsync(servicesManager, commandsManager, dataSource, m
     showOverlay: true,
     isDraggable: false,
     centralize: true,
-    // TODO: Create a loading indicator component + zeplin design?
     content: Loading
   });
   try {
-    const naturalizedReport = await commandsManager.runCommand('storeMeasurements', {
-      measurementData: measurements,
-      dataSource,
-      additionalFindingTypes: ['ArrowAnnotate'],
-      options
-    }, 'CORNERSTONE_STRUCTURED_REPORT');
+    const naturalizedReport = await getReport();
 
     // The "Mode" route listens for DicomMetadataStore changes
     // When a new instance is added, it listens and
     // automatically calls makeDisplaySets
     src.DicomMetadataStore.addInstances([naturalizedReport], true);
-    const displaySetInstanceUID = displaySetService.getMostRecentDisplaySet();
+    const displaySet = displaySetService.getMostRecentDisplaySet();
+    const displaySetInstanceUID = displaySet.displaySetInstanceUID;
     uiNotificationService.show({
       title: 'Create Report',
-      message: 'Measurements saved successfully',
+      message: `${reportType} saved successfully`,
       type: 'success'
     });
     return [displaySetInstanceUID];
   } catch (error) {
     uiNotificationService.show({
       title: 'Create Report',
-      message: error.message || 'Failed to store measurements',
+      message: error.message || `Failed to store ${reportType}`,
       type: 'error'
     });
   } finally {
@@ -3105,7 +3219,7 @@ function PanelMeasurementTable(_ref) {
   } = _ref;
   const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
   const {
-    activeViewportIndex,
+    activeViewportId,
     viewports
   } = viewportGrid;
   const {
@@ -3148,7 +3262,7 @@ function PanelMeasurementTable(_ref) {
   }
   async function createReport() {
     // filter measurements that are added to the active study
-    const activeViewport = viewports[activeViewportIndex];
+    const activeViewport = viewports.get(activeViewportId);
     const measurements = measurementService.getMeasurements();
     const displaySet = displaySetService.getDisplaySetByUID(activeViewport.displaySetInstanceUIDs[0]);
     const trackedMeasurements = measurements.filter(m => displaySet.StudyInstanceUID === m.referenceStudyUID);
@@ -3161,7 +3275,7 @@ function PanelMeasurementTable(_ref) {
       });
       return;
     }
-    const promptResult = await createReportDialogPrompt(uiDialogService, {
+    const promptResult = await CreateReportDialogPrompt(uiDialogService, {
       extensionManager
     });
     if (promptResult.action === CREATE_REPORT_DIALOG_RESPONSE.CREATE_REPORT) {
@@ -3172,10 +3286,21 @@ function PanelMeasurementTable(_ref) {
       promptResult.value === undefined || promptResult.value === '' ? 'Research Derived Series' // default
       : promptResult.value; // provided value
 
-      // Re-use an existing series having the same series description to avoid
+      // Reuse an existing series having the same series description to avoid
       // creating too many series instances.
       const options = findSRWithSameSeriesDescription(SeriesDescription, displaySetService);
-      return Actions_createReportAsync(servicesManager, commandsManager, dataSource, trackedMeasurements, options);
+      const getReport = async () => {
+        return commandsManager.runCommand('storeMeasurements', {
+          measurementData: trackedMeasurements,
+          dataSource,
+          additionalFindingTypes: ['ArrowAnnotate'],
+          options
+        }, 'CORNERSTONE_STRUCTURED_REPORT');
+      };
+      return Actions_createReportAsync({
+        servicesManager,
+        getReport
+      });
     }
   }
   const jumpToImage = _ref2 => {
@@ -3183,7 +3308,7 @@ function PanelMeasurementTable(_ref) {
       uid,
       isActive
     } = _ref2;
-    measurementService.jumpToMeasurement(viewportGrid.activeViewportIndex, uid);
+    measurementService.jumpToMeasurement(viewportGrid.activeViewportId, uid);
     onMeasurementItemClickHandler({
       uid,
       isActive
@@ -3255,7 +3380,7 @@ function PanelMeasurementTable(_ref) {
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
             id: "annotation",
-            className: "bg-black border-primary-main",
+            className: "border-primary-main bg-black",
             type: "text",
             value: value.label,
             onChange: onChangeHandler,
@@ -3265,11 +3390,11 @@ function PanelMeasurementTable(_ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.U.secondary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.U.primary
+          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
         }],
         onSubmit: onSubmitHandler
       }
@@ -3289,7 +3414,7 @@ function PanelMeasurementTable(_ref) {
     }
   };
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "overflow-x-hidden overflow-y-auto ohif-scrollbar",
+    className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
   }, /*#__PURE__*/react.createElement(ui_src/* MeasurementTable */.wt, {
     title: "Measurements",
@@ -3316,7 +3441,7 @@ function _getMappedMeasurements(measurementService) {
 
 /**
  * Map the measurements to the display text.
- * Adds finding and site inforamtion to the displayText and/or label,
+ * Adds finding and site information to the displayText and/or label,
  * and provides as 'displayText' and 'label', while providing the original
  * values as baseDisplayText and baseLabel
  */
@@ -3336,7 +3461,9 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   if (findingSites) {
     const siteText = [];
     findingSites.forEach(site => {
-      if (site?.text !== label) siteText.push(site.text);
+      if (site?.text !== label) {
+        siteText.push(site.text);
+      }
     });
     displayText = [...siteText, ...displayText];
   }
@@ -3360,6 +3487,7 @@ function _mapMeasurementToDisplay(measurement, index, types) {
 
 
 
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPanelModule.tsx
 
 
@@ -3384,7 +3512,7 @@ function getPanelModule(_ref) {
   };
   return [{
     name: 'seriesList',
-    iconName: 'group-layers',
+    iconName: 'tab-studies',
     iconLabel: 'Studies',
     label: 'Studies',
     component: Panels_WrappedPanelStudyBrowser.bind(null, {
@@ -3403,25 +3531,340 @@ function getPanelModule(_ref) {
 }
 /* harmony default export */ const src_getPanelModule = (getPanelModule);
 // EXTERNAL MODULE: ../../core/src/utils/isImage.js
-var isImage = __webpack_require__(81596);
+var isImage = __webpack_require__(11835);
 // EXTERNAL MODULE: ../../core/src/utils/sopClassDictionary.js
-var sopClassDictionary = __webpack_require__(32746);
+var sopClassDictionary = __webpack_require__(24369);
 // EXTERNAL MODULE: ../../core/src/classes/ImageSet.ts
-var ImageSet = __webpack_require__(4797);
+var ImageSet = __webpack_require__(13950);
 // EXTERNAL MODULE: ../../core/src/utils/isDisplaySetReconstructable.js
-var isDisplaySetReconstructable = __webpack_require__(51227);
+var isDisplaySetReconstructable = __webpack_require__(89359);
 ;// CONCATENATED MODULE: ../../../extensions/default/package.json
 const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-default"}');
 ;// CONCATENATED MODULE: ../../../extensions/default/src/id.js
 
 const id = package_namespaceObject.u2;
 
+// EXTERNAL MODULE: ../../core/src/utils/sortInstancesByPosition.ts
+var sortInstancesByPosition = __webpack_require__(87425);
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/checkMultiframe.ts
+
+
+
+/**
+ * Check various multi frame issues. It calls OHIF core functions
+ * @param {*} multiFrameInstance
+ * @param {*} warnings
+ */
+function checkMultiFrame(multiFrameInstance, messages) {
+  if (!(0,isDisplaySetReconstructable/* hasPixelMeasurements */.hu)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MULTIFRAME_NO_PIXEL_MEASUREMENTS);
+  }
+  if (!(0,isDisplaySetReconstructable/* hasOrientation */.sb)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MULTIFRAME_NO_ORIENTATION);
+  }
+  if (!(0,isDisplaySetReconstructable/* hasPosition */.kN)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MULTIFRAME_NO_POSITION_INFORMATION);
+  }
+}
+// EXTERNAL MODULE: ../../core/src/utils/toNumber.js
+var toNumber = __webpack_require__(94972);
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImageDimensionsEqual.ts
+
+
+/**
+ * Check if the frames in a series has different dimensions
+ * @param {*} instances
+ * @returns
+ */
+function areAllImageDimensionsEqual(instances) {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageRows = (0,toNumber/* default */.Z)(firstImage.Rows);
+  const firstImageColumns = (0,toNumber/* default */.Z)(firstImage.Columns);
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const {
+      Rows,
+      Columns
+    } = instance;
+    if (Rows !== firstImageRows || Columns !== firstImageColumns) {
+      return false;
+    }
+  }
+  return true;
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImageComponentsEqual.ts
+
+
+/**
+ * Check if all voxels in series images has same number of components (samplesPerPixel)
+ * @param {*} instances
+ * @returns
+ */
+function areAllImageComponentsEqual(instances) {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageSamplesPerPixel = (0,toNumber/* default */.Z)(firstImage.SamplesPerPixel);
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const {
+      SamplesPerPixel
+    } = instance;
+    if (SamplesPerPixel !== firstImageSamplesPerPixel) {
+      return false;
+    }
+  }
+  return true;
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImageOrientationsEqual.ts
+
+
+
+/**
+ * Check is the series has frames with different orientations
+ * @param {*} instances
+ * @returns
+ */
+function areAllImageOrientationsEqual(instances) {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImage = instances[0];
+  const firstImageOrientationPatient = (0,toNumber/* default */.Z)(firstImage.ImageOrientationPatient);
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imageOrientationPatient = (0,toNumber/* default */.Z)(instance.ImageOrientationPatient);
+    if (!(0,isDisplaySetReconstructable/* _isSameOrientation */.NB)(imageOrientationPatient, firstImageOrientationPatient)) {
+      return false;
+    }
+  }
+  return true;
+}
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
+var esm = __webpack_require__(45451);
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/calculateScanAxisNormal.ts
+
+
+/**
+ * Calculates the scanAxisNormal based on a image orientation vector extract from a frame
+ * @param {*} imageOrientation
+ * @returns
+ */
+function calculateScanAxisNormal(imageOrientation) {
+  const rowCosineVec = esm/* vec3.fromValues */.R3.fromValues(imageOrientation[0], imageOrientation[1], imageOrientation[2]);
+  const colCosineVec = esm/* vec3.fromValues */.R3.fromValues(imageOrientation[3], imageOrientation[4], imageOrientation[5]);
+  return esm/* vec3.cross */.R3.cross(esm/* vec3.create */.R3.create(), rowCosineVec, colCosineVec);
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImagePositionsEqual.ts
+
+
+
+
+
+/**
+ * Checks if there is a position shift between consecutive frames
+ * @param {*} previousPosition
+ * @param {*} actualPosition
+ * @param {*} scanAxisNormal
+ * @param {*} averageSpacingBetweenFrames
+ * @returns
+ */
+function _checkSeriesPositionShift(previousPosition, actualPosition, scanAxisNormal, averageSpacingBetweenFrames) {
+  // predicted position should be the previous position added by the multiplication
+  // of the scanAxisNormal and the average spacing between frames
+  const predictedPosition = esm/* vec3.scaleAndAdd */.R3.scaleAndAdd(esm/* vec3.create */.R3.create(), previousPosition, scanAxisNormal, averageSpacingBetweenFrames);
+  return esm/* vec3.distance */.R3.distance(actualPosition, predictedPosition) > averageSpacingBetweenFrames;
+}
+
+/**
+ * Checks if a series has position shifts between consecutive frames
+ * @param {*} instances
+ * @returns
+ */
+function areAllImagePositionsEqual(instances) {
+  if (!instances?.length) {
+    return false;
+  }
+  const firstImageOrientationPatient = (0,toNumber/* default */.Z)(instances[0].ImageOrientationPatient);
+  if (!firstImageOrientationPatient) {
+    return false;
+  }
+  const scanAxisNormal = calculateScanAxisNormal(firstImageOrientationPatient);
+  const firstImagePositionPatient = (0,toNumber/* default */.Z)(instances[0].ImagePositionPatient);
+  const lastIpp = (0,toNumber/* default */.Z)(instances[instances.length - 1].ImagePositionPatient);
+  const averageSpacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.Xn)(firstImagePositionPatient, lastIpp) / (instances.length - 1);
+  let previousImagePositionPatient = firstImagePositionPatient;
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imagePositionPatient = (0,toNumber/* default */.Z)(instance.ImagePositionPatient);
+    if (_checkSeriesPositionShift(previousImagePositionPatient, imagePositionPatient, scanAxisNormal, averageSpacingBetweenFrames)) {
+      return false;
+    }
+    previousImagePositionPatient = imagePositionPatient;
+  }
+  return true;
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImageSpacingEqual.ts
+
+
+
+/**
+ * Checks if series has spacing issues
+ * @param {*} instances
+ * @param {*} warnings
+ */
+function areAllImageSpacingEqual(instances, messages) {
+  if (!instances?.length) {
+    return;
+  }
+  const firstImagePositionPatient = (0,toNumber/* default */.Z)(instances[0].ImagePositionPatient);
+  if (!firstImagePositionPatient) {
+    return;
+  }
+  const lastIpp = (0,toNumber/* default */.Z)(instances[instances.length - 1].ImagePositionPatient);
+  const averageSpacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.Xn)(firstImagePositionPatient, lastIpp) / (instances.length - 1);
+  let previousImagePositionPatient = firstImagePositionPatient;
+  const issuesFound = [];
+  for (let i = 1; i < instances.length; i++) {
+    const instance = instances[i];
+    const imagePositionPatient = (0,toNumber/* default */.Z)(instance.ImagePositionPatient);
+    const spacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.Xn)(imagePositionPatient, previousImagePositionPatient);
+    const spacingIssue = (0,isDisplaySetReconstructable/* _getSpacingIssue */.bg)(spacingBetweenFrames, averageSpacingBetweenFrames);
+    if (spacingIssue) {
+      const issue = spacingIssue.issue;
+
+      // avoid multiple warning of the same thing
+      if (!issuesFound.includes(issue)) {
+        issuesFound.push(issue);
+        if (issue === isDisplaySetReconstructable/* reconstructionIssues */.e1.MISSING_FRAMES) {
+          messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MISSING_FRAMES);
+        } else if (issue === isDisplaySetReconstructable/* reconstructionIssues */.e1.IRREGULAR_SPACING) {
+          messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.IRREGULAR_SPACING);
+        }
+      }
+      // we just want to find issues not how many
+      if (issuesFound.length > 1) {
+        break;
+      }
+    }
+    previousImagePositionPatient = imagePositionPatient;
+  }
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/checkSingleFrames.ts
+
+
+
+
+
+
+
+/**
+ * Runs various checks in a single frame series
+ * @param {*} instances
+ * @param {*} warnings
+ */
+function checkSingleFrames(instances, messages) {
+  if (instances.length > 2) {
+    if (!areAllImageDimensionsEqual(instances)) {
+      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_DIMENSIONS);
+    }
+    if (!areAllImageComponentsEqual(instances)) {
+      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_COMPONENTS);
+    }
+    if (!areAllImageOrientationsEqual(instances)) {
+      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_ORIENTATIONS);
+    }
+    if (!areAllImagePositionsEqual(instances)) {
+      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_POSITION_INFORMATION);
+    }
+    areAllImageSpacingEqual(instances, messages);
+  }
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/getDisplaySetMessages.ts
+
+
+
+
+
+/**
+ * Checks if a series is reconstructable to a 3D volume.
+ *
+ * @param {Object[]} instances An array of `OHIFInstanceMetadata` objects.
+ */
+function getDisplaySetMessages(instances, isReconstructable) {
+  const messages = new src/* DisplaySetMessageList */.iK();
+  if (!instances.length) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.NO_VALID_INSTANCES);
+    return;
+  }
+  const firstInstance = instances[0];
+  const {
+    Modality,
+    ImageType,
+    NumberOfFrames
+  } = firstInstance;
+  // Due to current requirements, LOCALIZER series doesn't have any messages
+  if (ImageType?.includes('LOCALIZER')) {
+    return messages;
+  }
+  if (!isDisplaySetReconstructable/* constructableModalities */.M6.includes(Modality)) {
+    return messages;
+  }
+  const isMultiframe = NumberOfFrames > 1;
+  // Can't reconstruct if all instances don't have the ImagePositionPatient.
+  if (!isMultiframe && !instances.every(instance => instance.ImagePositionPatient)) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.NO_POSITION_INFORMATION);
+  }
+  const sortedInstances = (0,sortInstancesByPosition/* default */.Z)(instances);
+  isMultiframe ? checkMultiFrame(sortedInstances[0], messages) : checkSingleFrames(sortedInstances, messages);
+  if (!isReconstructable) {
+    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.NOT_RECONSTRUCTABLE);
+  }
+  return messages;
+}
+;// CONCATENATED MODULE: ../../../extensions/default/src/getDisplaySetsFromUnsupportedSeries.js
+
+
+/**
+ * Default handler for a instance list with an unsupported sopClassUID
+ */
+function getDisplaySetsFromUnsupportedSeries(instances) {
+  const imageSet = new ImageSet/* default */.Z(instances);
+  const messages = new src/* DisplaySetMessageList */.iK();
+  messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.UNSUPPORTED_DISPLAYSET);
+  const instance = instances[0];
+  imageSet.setAttributes({
+    displaySetInstanceUID: imageSet.uid,
+    // create a local alias for the imageSet UID
+    SeriesDate: instance.SeriesDate,
+    SeriesTime: instance.SeriesTime,
+    SeriesInstanceUID: instance.SeriesInstanceUID,
+    StudyInstanceUID: instance.StudyInstanceUID,
+    SeriesNumber: instance.SeriesNumber || 0,
+    FrameRate: instance.FrameTime,
+    SOPClassUID: instance.SOPClassUID,
+    SeriesDescription: instance.SeriesDescription || '',
+    Modality: instance.Modality,
+    numImageFrames: instances.length,
+    unsupported: true,
+    SOPClassHandlerId: 'unsupported',
+    isReconstructable: false,
+    messages
+  });
+  return [imageSet];
+}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getSopClassHandlerModule.js
 
 
 
 
 
+
+
 const sopClassHandlerName = 'stack';
 const isMultiFrame = instance => {
   return instance.NumberOfFrames > 1;
@@ -3432,9 +3875,9 @@ const makeDisplaySet = instances => {
   const {
     value: isReconstructable,
     averageSpacingBetweenFrames
-  } = (0,isDisplaySetReconstructable/* default */.Z)(instances);
-
+  } = (0,isDisplaySetReconstructable/* default */.ZP)(instances);
   // set appropriate attributes to image set...
+  const messages = getDisplaySetMessages(instances, isReconstructable);
   imageSet.setAttributes({
     displaySetInstanceUID: imageSet.uid,
     // create a local alias for the imageSet UID
@@ -3452,6 +3895,7 @@ const makeDisplaySet = instances => {
     numImageFrames: instances.length,
     SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
     isReconstructable,
+    messages,
     averageSpacingBetweenFrames: averageSpacingBetweenFrames || null
   });
 
@@ -3558,6 +4002,10 @@ function getSopClassHandlerModule() {
     name: sopClassHandlerName,
     sopClassUids,
     getDisplaySetsFromSeries
+  }, {
+    name: 'not-supported-display-sets-handler',
+    sopClassUids: [],
+    getDisplaySetsFromSeries: getDisplaySetsFromUnsupportedSeries
   }];
 }
 /* harmony default export */ const src_getSopClassHandlerModule = (getSopClassHandlerModule);
@@ -3565,44 +4013,53 @@ function getSopClassHandlerModule() {
 
 function ToolbarDivider() {
   return /*#__PURE__*/react.createElement("span", {
-    className: "self-center w-4 h-8 mx-2 border-l border-common-dark"
+    className: "border-common-dark mx-2 h-8 w-4 self-center border-l"
   });
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
+function ToolbarLayoutSelector_extends() { ToolbarLayoutSelector_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarLayoutSelector_extends.apply(this, arguments); }
 
 
 
 
-function LayoutSelector(_ref) {
+function ToolbarLayoutSelectorWithServices(_ref) {
   let {
-    rows,
-    columns,
-    className,
     servicesManager,
-    ...rest
+    ...props
   } = _ref;
-  const [isOpen, setIsOpen] = (0,react.useState)(false);
   const {
-    hangingProtocolService,
     toolbarService
   } = servicesManager.services;
+  const onSelection = (0,react.useCallback)(props => {
+    toolbarService.recordInteraction({
+      interactionType: 'action',
+      commands: [{
+        commandName: 'setViewportGridLayout',
+        commandOptions: {
+          ...props
+        },
+        context: 'DEFAULT'
+      }]
+    });
+  }, [toolbarService]);
+  return /*#__PURE__*/react.createElement(LayoutSelector, ToolbarLayoutSelector_extends({}, props, {
+    onSelection: onSelection
+  }));
+}
+function LayoutSelector(_ref2) {
+  let {
+    rows,
+    columns,
+    className,
+    onSelection,
+    ...rest
+  } = _ref2;
+  const [isOpen, setIsOpen] = (0,react.useState)(false);
   const closeOnOutsideClick = () => {
     if (isOpen) {
       setIsOpen(false);
     }
   };
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = hangingProtocolService.subscribe(hangingProtocolService.EVENTS.PROTOCOL_CHANGED, evt => {
-      const {
-        protocol
-      } = evt;
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [hangingProtocolService]);
   (0,react.useEffect)(() => {
     window.addEventListener('click', closeOnOutsideClick);
     return () => {
@@ -3611,18 +4068,6 @@ function LayoutSelector(_ref) {
   }, [isOpen]);
   const onInteractionHandler = () => setIsOpen(!isOpen);
   const DropdownContent = isOpen ? ui_src/* LayoutSelector */.OF : null;
-  const onSelectionHandler = props => {
-    toolbarService.recordInteraction({
-      interactionType: 'action',
-      commands: [{
-        commandName: 'setViewportGridLayout',
-        commandOptions: {
-          ...props
-        },
-        context: 'DEFAULT'
-      }]
-    });
-  };
   return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, {
     id: "Layout",
     label: "Grid Layout",
@@ -3633,7 +4078,7 @@ function LayoutSelector(_ref) {
     dropdownContent: DropdownContent !== null && /*#__PURE__*/react.createElement(DropdownContent, {
       rows: rows,
       columns: columns,
-      onSelection: onSelectionHandler
+      onSelection: onSelection
     }),
     isActive: isOpen,
     type: "toggle"
@@ -3650,10 +4095,238 @@ LayoutSelector.defaultProps = {
   columns: 3,
   onLayoutChange: () => {}
 };
-/* harmony default export */ const ToolbarLayoutSelector = (LayoutSelector);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarSplitButton.tsx
+/* harmony default export */ const ToolbarLayoutSelector = (ToolbarLayoutSelectorWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
+function ToolbarSplitButtonWithServices_extends() { ToolbarSplitButtonWithServices_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarSplitButtonWithServices_extends.apply(this, arguments); }
+
+
+
+
+function ToolbarSplitButtonWithServices(_ref) {
+  let {
+    isRadio,
+    isAction,
+    groupId,
+    primary,
+    secondary,
+    items,
+    renderer,
+    onInteraction,
+    servicesManager
+  } = _ref;
+  const {
+    toolbarService
+  } = servicesManager?.services;
+  const handleItemClick = (item, index) => {
+    const {
+      id,
+      type,
+      commands
+    } = item;
+    onInteraction({
+      groupId,
+      itemId: id,
+      interactionType: type,
+      commands
+    });
+    setState(state => ({
+      ...state,
+      primary: !isAction && isRadio ? {
+        ...item,
+        index
+      } : state.primary,
+      isExpanded: false,
+      items: getSplitButtonItems(items).filter(item => isRadio && !isAction ? item.index !== index : true)
+    }));
+  };
+
+  /* Bubbles up individual item clicks */
+  const getSplitButtonItems = items => items.map((item, index) => ({
+    ...item,
+    index,
+    onClick: () => handleItemClick(item, index)
+  }));
+  const [buttonsState, setButtonState] = (0,react.useState)({
+    primaryToolId: '',
+    toggles: {},
+    groups: {}
+  });
+  const [state, setState] = (0,react.useState)({
+    primary,
+    items: getSplitButtonItems(items).filter(item => isRadio && !isAction ? item.id !== primary.id : true)
+  });
+  const {
+    primaryToolId,
+    toggles
+  } = buttonsState;
+  const isPrimaryToggle = state.primary.type === 'toggle';
+  const isPrimaryActive = state.primary.type === 'tool' && primaryToolId === state.primary.id || isPrimaryToggle && toggles[state.primary.id] === true;
+  const PrimaryButtonComponent = toolbarService?.getButtonComponentForUIType(state.primary.uiType) ?? ui_src/* ToolbarButton */.hA;
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
+      setButtonState({
+        ...state
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+  const updatedItems = state.items.map(item => {
+    const isActive = item.type === 'tool' && primaryToolId === item.id;
+
+    // We could have added the
+    // item.type === 'toggle' && toggles[item.id] === true
+    // too but that makes the button active when the toggle is active under it
+    // which feels weird
+    return {
+      ...item,
+      isActive
+    };
+  });
+  const DefaultListItemRenderer = _ref2 => {
+    let {
+      type,
+      icon,
+      label,
+      t,
+      id
+    } = _ref2;
+    const isActive = type === 'toggle' && toggles[id] === true;
+    return /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('hover:bg-primary-dark flex h-8 w-full flex-row items-center p-3', 'whitespace-pre text-base', isActive && 'bg-primary-dark', isActive ? 'text-[#348CFD]' : 'text-common-bright hover:bg-primary-dark hover:text-primary-light')
+    }, icon && /*#__PURE__*/react.createElement("span", {
+      className: "mr-4"
+    }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+      name: icon,
+      className: "h-5 w-5"
+    })), /*#__PURE__*/react.createElement("span", {
+      className: "mr-5"
+    }, t(label)));
+  };
+  const listItemRenderer = renderer || DefaultListItemRenderer;
+  return /*#__PURE__*/react.createElement(ui_src/* SplitButton */.aW, {
+    isRadio: isRadio,
+    isAction: isAction,
+    primary: state.primary,
+    secondary: secondary,
+    items: updatedItems,
+    groupId: groupId,
+    renderer: listItemRenderer,
+    isActive: isPrimaryActive || updatedItems.some(item => item.isActive),
+    isToggle: isPrimaryToggle,
+    onInteraction: onInteraction,
+    Component: props => /*#__PURE__*/react.createElement(PrimaryButtonComponent, ToolbarSplitButtonWithServices_extends({}, props, {
+      servicesManager: servicesManager
+    }))
+  });
+}
+ToolbarSplitButtonWithServices.propTypes = {
+  isRadio: (prop_types_default()).bool,
+  isAction: (prop_types_default()).bool,
+  groupId: (prop_types_default()).string,
+  primary: prop_types_default().shape({
+    id: (prop_types_default()).string.isRequired,
+    type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
+    uiType: (prop_types_default()).string
+  }),
+  secondary: prop_types_default().shape({
+    id: (prop_types_default()).string,
+    icon: (prop_types_default()).string.isRequired,
+    label: (prop_types_default()).string,
+    tooltip: (prop_types_default()).string.isRequired,
+    isActive: (prop_types_default()).bool
+  }),
+  items: prop_types_default().arrayOf(prop_types_default().shape({
+    id: (prop_types_default()).string.isRequired,
+    type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
+    icon: (prop_types_default()).string,
+    label: (prop_types_default()).string,
+    tooltip: (prop_types_default()).string
+  })),
+  renderer: (prop_types_default()).func,
+  onInteraction: (prop_types_default()).func.isRequired,
+  servicesManager: prop_types_default().shape({
+    services: prop_types_default().shape({
+      toolbarService: (prop_types_default()).object
+    })
+  })
+};
+ToolbarSplitButtonWithServices.defaultProps = {
+  isRadio: false,
+  isAction: false
+};
+/* harmony default export */ const Toolbar_ToolbarSplitButtonWithServices = (ToolbarSplitButtonWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarButtonWithServices.tsx
+function ToolbarButtonWithServices_extends() { ToolbarButtonWithServices_extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return ToolbarButtonWithServices_extends.apply(this, arguments); }
 
-/* harmony default export */ const ToolbarSplitButton = (ui_src/* SplitButton */.aW);
+
+
+function ToolbarButtonWithServices(_ref) {
+  let {
+    id,
+    type,
+    commands,
+    onInteraction,
+    servicesManager,
+    ...props
+  } = _ref;
+  const {
+    toolbarService
+  } = servicesManager?.services || {};
+  const [buttonsState, setButtonState] = (0,react.useState)({
+    primaryToolId: '',
+    toggles: {},
+    groups: {}
+  });
+  const {
+    primaryToolId
+  } = buttonsState;
+  const isActive = type === 'tool' && id === primaryToolId || type === 'toggle' && buttonsState.toggles[id] === true;
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
+      setButtonState({
+        ...state
+      });
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [toolbarService]);
+  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, ToolbarButtonWithServices_extends({
+    commands: commands,
+    id: id,
+    type: type,
+    isActive: isActive,
+    onInteraction: onInteraction
+  }, props));
+}
+ToolbarButtonWithServices.propTypes = {
+  id: (prop_types_default()).string.isRequired,
+  type: prop_types_default().oneOf(['tool', 'action', 'toggle']).isRequired,
+  commands: prop_types_default().arrayOf(prop_types_default().shape({
+    commandName: (prop_types_default()).string.isRequired,
+    context: (prop_types_default()).string
+  })),
+  onInteraction: (prop_types_default()).func.isRequired,
+  servicesManager: prop_types_default().shape({
+    services: prop_types_default().shape({
+      toolbarService: prop_types_default().shape({
+        subscribe: (prop_types_default()).func.isRequired,
+        state: prop_types_default().shape({
+          primaryToolId: (prop_types_default()).string,
+          toggles: prop_types_default().objectOf((prop_types_default()).bool),
+          groups: prop_types_default().objectOf((prop_types_default()).object)
+        }).isRequired
+      }).isRequired
+    }).isRequired
+  }).isRequired
+};
+/* harmony default export */ const Toolbar_ToolbarButtonWithServices = (ToolbarButtonWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
@@ -3670,15 +4343,15 @@ function getToolbarModule(_ref) {
     clickHandler: () => {}
   }, {
     name: 'ohif.action',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.radioGroup',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.splitButton',
-    defaultComponent: ToolbarSplitButton,
+    defaultComponent: Toolbar_ToolbarSplitButtonWithServices,
     clickHandler: () => {}
   }, {
     name: 'ohif.layoutSelector',
@@ -3686,7 +4359,7 @@ function getToolbarModule(_ref) {
     clickHandler: (evt, clickedBtn, btnSectionName) => {}
   }, {
     name: 'ohif.toggle',
-    defaultComponent: ui_src/* ToolbarButton */.hA,
+    defaultComponent: Toolbar_ToolbarButtonWithServices,
     clickHandler: () => {}
   }];
 }
@@ -3856,7 +4529,7 @@ function adaptItem(item, subProps) {
   return newItem;
 }
 // EXTERNAL MODULE: ../../ui/src/components/ContextMenu/ContextMenu.tsx
-var ContextMenu = __webpack_require__(63021);
+var ContextMenu = __webpack_require__(5638);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx
 
 
@@ -3917,8 +4590,8 @@ class ContextMenuController {
       defaultPosition: ContextMenuController._getDefaultPosition(defaultPointsPosition, event?.detail, viewportElement),
       event,
       content: ContextMenu/* default */.Z,
-      // This naming is part of hte uiDialogService convention
-      // Clicking outside simpy closes the dialog box.
+      // This naming is part of the uiDialogService convention
+      // Clicking outside simply closes the dialog box.
       onClickOutside: () => this.services.uiDialogService.dismiss({
         id: 'context-menu'
       }),
@@ -4065,10 +4738,10 @@ const defaultContextMenu = {
 
 
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment = __webpack_require__(53806);
+var moment = __webpack_require__(71271);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 // EXTERNAL MODULE: ../../../node_modules/react-window/dist/index.esm.js
-var index_esm = __webpack_require__(21767);
+var index_esm = __webpack_require__(94614);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
 
 
@@ -4093,34 +4766,34 @@ function ColumnHeaders(_ref) {
     valueRef
   } = _ref;
   return /*#__PURE__*/react.createElement("div", {
-    className: classnames_default()('flex flex-row w-full bg-secondary-dark ohif-scrollbar overflow-y-scroll'),
+    className: classnames_default()('bg-secondary-dark ohif-scrollbar flex w-full flex-row overflow-y-scroll'),
     style: rowVerticalPaddingStyle
   }, /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-4/24"
+    className: "w-4/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: tagRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Tag"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-2/24"
+    className: "w-2/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: vrRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "VR"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-6/24"
+    className: "w-6/24 px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: keywordRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Keyword"))), /*#__PURE__*/react.createElement("div", {
-    className: "px-3 w-5/24 grow"
+    className: "w-5/24 grow px-3"
   }, /*#__PURE__*/react.createElement("label", {
     ref: valueRef,
-    className: "flex flex-col flex-1 text-white text-lg pl-1 select-none"
+    className: "flex flex-1 select-none flex-col pl-1 text-lg text-white"
   }, /*#__PURE__*/react.createElement("span", {
     className: "flex flex-row items-center focus:outline-none"
   }, "Value"))));
@@ -4193,16 +4866,16 @@ function DicomTagTable(_ref2) {
         ...style,
         ...rowStyle
       },
-      className: classnames_default()('hover:bg-secondary-main transition duration-300 bg-black flex flex-row w-full border-secondary-light items-center text-base break-all', lineHeightClassName),
+      className: classnames_default()('hover:bg-secondary-main border-secondary-light flex w-full flex-row items-center break-all bg-black text-base transition duration-300', lineHeightClassName),
       key: `DICOMTagRow-${index}`
     }, /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-4/24"
+      className: "w-4/24 px-3"
     }, row[0]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-2/24"
+      className: "w-2/24 px-3"
     }, row[1]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-6/24"
+      className: "w-6/24 px-3"
     }, row[2]), /*#__PURE__*/react.createElement("div", {
-      className: "px-3 w-5/24 grow"
+      className: "w-5/24 grow px-3"
     }, row[3]));
   }, [rows]);
 
@@ -4240,7 +4913,7 @@ function DicomTagTable(_ref2) {
     keywordRef: keywordRef,
     valueRef: valueRef
   }), /*#__PURE__*/react.createElement("div", {
-    className: "m-auto relative border-2 border-black bg-black",
+    className: "relative m-auto border-2 border-black bg-black",
     style: {
       height: '32rem'
     }
@@ -4266,7 +4939,6 @@ function DicomTagTable(_ref2) {
 
 
 
-
 const {
   ImageSet: DicomTagBrowser_ImageSet
 } = src.classes;
@@ -4295,7 +4967,6 @@ const DicomTagBrowser = _ref => {
     setSelectedDisplaySetInstanceUID(value.value);
     setInstanceNumber(1);
   };
-  const searchInputRef = (0,react.useRef)(null);
   const activeDisplaySet = displaySets.find(ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID);
   const isImageStack = _isImageStack(activeDisplaySet);
   const showInstanceList = isImageStack && activeDisplaySet.images.length > 1;
@@ -4361,14 +5032,14 @@ const DicomTagBrowser = _ref => {
   return /*#__PURE__*/react.createElement("div", {
     className: "dicom-tag-browser-content"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row mb-6 items-center pl-1"
+    className: "mb-6 flex flex-row items-center pl-1"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row items-center w-1/2"
+    className: "flex w-1/2 flex-row items-center"
   }, /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
     variant: "subtitle",
     className: "mr-4"
   }, "Series"), /*#__PURE__*/react.createElement("div", {
-    className: "grow mr-8"
+    className: "mr-8 grow"
   }, /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
     id: "display-set-selector",
     isClearable: false,
@@ -4377,7 +5048,7 @@ const DicomTagBrowser = _ref => {
     value: displaySetList.find(ds => ds.value === selectedDisplaySetInstanceUID),
     className: "text-white"
   }))), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row items-center w-1/2"
+    className: "flex w-1/2 flex-row items-center"
   }, showInstanceList && /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
     variant: "subtitle",
     className: "mr-4"
@@ -4396,32 +5067,14 @@ const DicomTagBrowser = _ref => {
     labelPosition: "left",
     trackColor: '#3a3f99'
   })))), /*#__PURE__*/react.createElement("div", {
-    className: "w-full h-1 bg-black"
+    className: "h-1 w-full bg-black"
   }), /*#__PURE__*/react.createElement("div", {
-    className: "flex flex-row my-3 w-1/2"
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "relative block w-full mr-8"
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "absolute inset-y-0 left-0 flex items-center pl-2"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    name: "icon-search"
-  })), /*#__PURE__*/react.createElement("input", {
-    ref: searchInputRef,
-    type: "text",
-    className: "block bg-black w-full shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded w-full py-2 px-9 text-base leading-tight placeholder:text-inputfield-placeholder",
+    className: "my-3 flex w-1/2 flex-row"
+  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
+    className: "mr-8 block w-full",
     placeholder: "Search metadata...",
-    onChange: event => debouncedSetFilterValue(event.target.value),
-    autoComplete: "off"
-  }), /*#__PURE__*/react.createElement("span", {
-    className: "absolute inset-y-0 right-0 flex items-center pr-2"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    name: "icon-clear-field",
-    className: classnames_default()('cursor-pointer', filterValue ? '' : 'hidden'),
-    onClick: () => {
-      searchInputRef.current.value = '';
-      debouncedSetFilterValue('');
-    }
-  })))), /*#__PURE__*/react.createElement(DicomTagBrowser_DicomTagTable, {
+    onDebounceChange: setFilterValue
+  })), /*#__PURE__*/react.createElement(DicomTagBrowser_DicomTagTable, {
     rows: filteredRows
   }));
 };
@@ -4594,61 +5247,62 @@ function _sortTagList(tagList) {
  */
 const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
   const {
-    activeViewportIndex,
-    viewports,
-    layout
+    activeViewportId
   } = state;
+  const {
+    protocol
+  } = hangingProtocolService.getActiveProtocol();
   const hpInfo = hangingProtocolService.getState();
   const {
     protocolId,
     stageIndex,
     activeStudyUID
   } = hpInfo;
-  const {
-    protocol
-  } = hangingProtocolService.getActiveProtocol();
-  const stage = protocol.stages[stageIndex];
-  const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
   const syncState = syncService.getState();
-  const cacheId = `${activeStudyUID}:${protocolId}`;
   const viewportGridStore = {
     ...syncState.viewportGridStore
   };
-  const hangingProtocolStageIndexMap = {
-    ...syncState.hangingProtocolStageIndexMap
-  };
   const displaySetSelectorMap = {
     ...syncState.displaySetSelectorMap
   };
+  const stage = protocol.stages[stageIndex];
+  const storeId = `${activeStudyUID}:${protocolId}:${stageIndex}`;
+  const cacheId = `${activeStudyUID}:${protocolId}`;
+  const hangingProtocolStageIndexMap = {
+    ...syncState.hangingProtocolStageIndexMap
+  };
   const {
     rows,
     columns
   } = stage.viewportStructure.properties;
-  const custom = stage.viewports.length !== state.viewports.length || state.layout.numRows !== rows || state.layout.numCols !== columns;
+  const custom = stage.viewports.length !== state.viewports.size || state.layout.numRows !== rows || state.layout.numCols !== columns;
   hangingProtocolStageIndexMap[cacheId] = hpInfo;
   if (storeId && custom) {
     viewportGridStore[storeId] = {
       ...state
     };
   }
-  for (let idx = 0; idx < state.viewports.length; idx++) {
-    const viewport = state.viewports[idx];
+  state.viewports.forEach((viewport, viewportId) => {
     const {
       displaySetOptions,
       displaySetInstanceUIDs
     } = viewport;
-    if (!displaySetOptions) continue;
+    if (!displaySetOptions) {
+      return;
+    }
     for (let i = 0; i < displaySetOptions.length; i++) {
       const displaySetUID = displaySetInstanceUIDs[i];
-      if (!displaySetUID) continue;
-      if (idx === activeViewportIndex && i === 0) {
+      if (!displaySetUID) {
+        continue;
+      }
+      if (viewportId === activeViewportId && i === 0) {
         displaySetSelectorMap[`${activeStudyUID}:activeDisplaySet:0`] = displaySetUID;
       }
       if (displaySetOptions[i]?.id) {
         displaySetSelectorMap[`${activeStudyUID}:${displaySetOptions[i].id}:${displaySetOptions[i].matchedDisplaySetsIndex || 0}`] = displaySetUID;
       }
     }
-  }
+  });
   return {
     hangingProtocolStageIndexMap,
     viewportGridStore,
@@ -4660,22 +5314,24 @@ const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
 /**
  * This find or create viewport is paired with the reduce results from
  * below, and the action of this viewport is to look for previously filled
- * viewports, and to re-use by position id.  If there is no filled viewport,
+ * viewports, and to reuse by position id.  If there is no filled viewport,
  * then one can be re-used from the display set if it isn't going to be displayed.
  * @param hangingProtocolService - bound parameter supplied before using this
  * @param viewportsByPosition - bound parameter supplied before using this
- * @param viewportIndex - the index to retrieve
+ * @param position - the position in the grid to retrieve
  * @param positionId - the current position on screen to retrieve
  * @param options - the set of options used, so that subsequent calls can
  *                  store state that is reset by the setLayout.
  *                  This class uses the options to store the already viewed
  *                  display sets, filling it initially with the pre-existing viewports.
  */
-const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, viewportsByPosition, viewportIndex, positionId, options) => {
+const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, viewportsByPosition, position, positionId, options) => {
   const byPositionViewport = viewportsByPosition?.[positionId];
-  if (byPositionViewport) return {
-    ...byPositionViewport
-  };
+  if (byPositionViewport) {
+    return {
+      ...byPositionViewport
+    };
+  }
   const {
     protocolId,
     stageIndex
@@ -4723,7 +5379,7 @@ const findViewportsByPosition = (state, _ref, syncService) => {
     ...syncState.viewportsByPosition
   };
   const initialInDisplay = [];
-  for (const viewport of viewports) {
+  viewports.forEach(viewport => {
     if (viewport.positionId) {
       const storedViewport = {
         ...viewport,
@@ -4732,16 +5388,11 @@ const findViewportsByPosition = (state, _ref, syncService) => {
         }
       };
       viewportsByPosition[viewport.positionId] = storedViewport;
-      // The cache doesn't store the viewport options - it is only useful
-      // for remembering the type of viewport and UIDs
-      delete storedViewport.viewportId;
-      delete storedViewport.viewportOptions.viewportId;
     }
-  }
+  });
   for (let row = 0; row < numRows; row++) {
     for (let col = 0; col < numCols; col++) {
-      const pos = col + row * numCols;
-      const positionId = viewports?.[pos]?.positionId || `${col}-${row}`;
+      const positionId = `${col}-${row}`;
       const viewport = viewportsByPosition[positionId];
       if (viewport?.displaySetInstanceUIDs) {
         initialInDisplay.push(...viewport.displaySetInstanceUIDs);
@@ -4756,8 +5407,8 @@ const findViewportsByPosition = (state, _ref, syncService) => {
   };
 };
 /* harmony default export */ const src_findViewportsByPosition = (findViewportsByPosition);
-// EXTERNAL MODULE: ./index.js + 32 modules
-var index = __webpack_require__(97837);
+// EXTERNAL MODULE: ./index.js + 33 modules
+var index = __webpack_require__(59754);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/commandsModule.ts
 
 
@@ -4859,7 +5510,9 @@ const commandsModule = _ref => {
         stage
       } = hangingProtocolService.getActiveProtocol();
       const enableListener = button => {
-        if (!button.id) return;
+        if (!button.id) {
+          return;
+        }
         const {
           commands,
           items
@@ -4868,14 +5521,16 @@ const commandsModule = _ref => {
           items.forEach(enableListener);
         }
         const hpCommand = commands?.find?.(isHangingProtocolCommand);
-        if (!hpCommand) return;
+        if (!hpCommand) {
+          return;
+        }
         const {
           protocolId,
           stageIndex,
           stageId
         } = hpCommand.commandOptions;
         const isActive = (!protocolId || protocolId === protocol.id) && (stageIndex === undefined || stageIndex === toggleStageIndex) && (!stageId || stageId === stage.id);
-        toolbarService.setActive(button.id, isActive);
+        toolbarService.setToggled(button.id, isActive);
       };
       Object.values(toolbarService.getButtons()).forEach(enableListener);
     },
@@ -4911,6 +5566,7 @@ const commandsModule = _ref => {
         stageIndex,
         reset = false
       } = _ref3;
+      const primaryToolBeforeHPChange = toolbarService.getActivePrimaryTool();
       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
@@ -4927,7 +5583,7 @@ const commandsModule = _ref => {
           displaySetSelectorMap
         } = stateSyncReduce;
         if (!protocolId) {
-          // Re-use the previous protocol id, and optionally stage
+          // Reuse the previous protocol id, and optionally stage
           protocolId = hpInfo.protocolId;
           if (stageId === undefined && stageIndex === undefined) {
             stageIndex = hpInfo.stageIndex;
@@ -4970,22 +5626,44 @@ const commandsModule = _ref => {
         delete displaySetSelectorMap[`${activeStudyUID || hpInfo.activeStudyUID}:activeDisplaySet:0`];
         stateSyncService.store(stateSyncReduce);
         // This is a default action applied
-        actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
+        const {
+          protocol
+        } = hangingProtocolService.getActiveProtocol();
+        actions.toggleHpTools();
+
+        // try to use the same tool in the new hanging protocol stage
+        const primaryButton = toolbarService.getButton(primaryToolBeforeHPChange);
+        if (primaryButton) {
+          // is there any type of interaction on this button, if not it might be in the
+          // items. This is a bit of a hack, but it works for now.
+
+          let interactionType = primaryButton.props?.interactionType;
+          if (!interactionType && primaryButton.props?.items) {
+            const firstItem = primaryButton.props.items[0];
+            interactionType = firstItem.props?.interactionType || firstItem.props?.type;
+          }
+          if (interactionType) {
+            toolbarService.recordInteraction({
+              interactionType,
+              ...primaryButton.props
+            });
+          }
+        }
+
         // Send the notification about updating the state
         if (protocolId !== hpInfo.protocolId) {
-          const {
-            protocol
-          } = hangingProtocolService.getActiveProtocol();
           // The old protocol callbacks are used for turning off things
           // like crosshairs when moving to the new HP
           commandsManager.run(oldProtocol.callbacks?.onProtocolExit);
           // The new protocol callback is used for things like
           // activating modes etc.
-          commandsManager.run(protocol.callbacks?.onProtocolEnter);
         }
+
+        commandsManager.run(protocol.callbacks?.onProtocolEnter);
         return true;
       } catch (e) {
-        actions.toggleHpTools(hangingProtocolService.getActiveProtocol());
+        console.error(e);
+        actions.toggleHpTools();
         uiNotificationService.show({
           title: 'Apply Hanging Protocol',
           message: 'The hanging protocol could not be applied.',
@@ -5098,7 +5776,7 @@ const commandsModule = _ref => {
     toggleOneUp() {
       const viewportGridState = viewportGridService.getState();
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports,
         layout
       } = viewportGridState;
@@ -5106,7 +5784,7 @@ const commandsModule = _ref => {
         displaySetInstanceUIDs,
         displaySetOptions,
         viewportOptions
-      } = viewports[activeViewportIndex];
+      } = viewports.get(activeViewportId);
       if (layout.numCols === 1 && layout.numRows === 1) {
         // The viewer is in one-up. Check if there is a state to restore/toggle back to.
         const {
@@ -5117,24 +5795,33 @@ const commandsModule = _ref => {
         }
         // There is a state to toggle back to. The viewport that was
         // originally toggled to one up was the former active viewport.
-        const viewportIndexToUpdate = toggleOneUpViewportGridStore.activeViewportIndex;
+        const viewportIdToUpdate = toggleOneUpViewportGridStore.activeViewportId;
 
-        // Determine which viewports need to be updated. This is particularly
-        // important when MPR is toggled to one up and a different reconstructable
-        // is swapped in. Note that currently HangingProtocolService.getViewportsRequireUpdate
-        // does not support viewport with multiple display sets.
-        const updatedViewports = displaySetInstanceUIDs.length > 1 ? [] : displaySetInstanceUIDs.map(displaySetInstanceUID => hangingProtocolService.getViewportsRequireUpdate(viewportIndexToUpdate, displaySetInstanceUID)).flat();
+        // We are restoring the previous layout but taking into the account that
+        // the current one up viewport might have a new displaySet dragged and dropped on it.
+        // updatedViewportsViaHP below contains the viewports applicable to the HP that existed
+        // prior to the toggle to one-up - including the updated viewports if a display
+        // set swap were to have occurred.
+        const updatedViewportsViaHP = displaySetInstanceUIDs.length > 1 ? [] : displaySetInstanceUIDs.map(displaySetInstanceUID => hangingProtocolService.getViewportsRequireUpdate(viewportIdToUpdate, displaySetInstanceUID)).flat();
 
-        // This findOrCreateViewport returns either one of the updatedViewports
+        // findOrCreateViewport returns either one of the updatedViewportsViaHP
         // returned from the HP service OR if there is not one from the HP service then
-        // simply returns what was in the previous state.
-        const findOrCreateViewport = viewportIndex => {
-          const viewport = updatedViewports.find(viewport => viewport.viewportIndex === viewportIndex);
-          return viewport ? {
+        // simply returns what was in the previous state for a given position in the layout.
+        const findOrCreateViewport = (position, positionId) => {
+          // Find the viewport for the given position prior to the toggle to one-up.
+          const preOneUpViewport = Array.from(toggleOneUpViewportGridStore.viewports.values()).find(viewport => viewport.positionId === positionId);
+
+          // Use the viewport id from before the toggle to one-up to find any updates to the viewport.
+          const viewport = updatedViewportsViaHP.find(viewport => viewport.viewportId === preOneUpViewport.viewportId);
+          return viewport ?
+          // Use the applicable viewport from the HP updated viewports
+          {
             viewportOptions,
             displaySetOptions,
             ...viewport
-          } : toggleOneUpViewportGridStore.viewports[viewportIndex];
+          } :
+          // Use the previous viewport for the given position
+          preOneUpViewport;
         };
         const layoutOptions = viewportGridService.getLayoutOptionsFromState(toggleOneUpViewportGridStore);
 
@@ -5142,7 +5829,7 @@ const commandsModule = _ref => {
         viewportGridService.setLayout({
           numRows: toggleOneUpViewportGridStore.layout.numRows,
           numCols: toggleOneUpViewportGridStore.layout.numCols,
-          activeViewportIndex: viewportIndexToUpdate,
+          activeViewportId: viewportIdToUpdate,
           layoutOptions,
           findOrCreateViewport
         });
@@ -5207,10 +5894,10 @@ const commandsModule = _ref => {
     },
     openDICOMTagViewer() {
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      const activeViewportSpecificData = viewports[activeViewportIndex];
+      const activeViewportSpecificData = viewports.get(activeViewportId);
       const {
         displaySetInstanceUIDs
       } = activeViewportSpecificData;
@@ -5242,13 +5929,10 @@ const commandsModule = _ref => {
     },
     scrollActiveThumbnailIntoView: () => {
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
-      if (!viewports || activeViewportIndex < 0 || activeViewportIndex > viewports.length - 1) {
-        return;
-      }
-      const activeViewport = viewports[activeViewportIndex];
+      const activeViewport = viewports.get(activeViewportId);
       const activeDisplaySetInstanceUID = activeViewport.displaySetInstanceUIDs[0];
       const thumbnailList = document.querySelector('#ohif-thumbnail-list');
       if (!thumbnailList) {
@@ -5282,12 +5966,12 @@ const commandsModule = _ref => {
       const currentDisplaySets = [...displaySetService.activeDisplaySets];
       currentDisplaySets.sort(dsSortFn);
       const {
-        activeViewportIndex,
+        activeViewportId,
         viewports
       } = viewportGridService.getState();
       const {
         displaySetInstanceUIDs
-      } = viewports[activeViewportIndex];
+      } = viewports.get(activeViewportId);
       const activeDisplaySetIndex = currentDisplaySets.findIndex(displaySet => displaySetInstanceUIDs.includes(displaySet.displaySetInstanceUID));
       let displaySetIndexToShow;
       for (displaySetIndexToShow = activeDisplaySetIndex + direction; displaySetIndexToShow > -1 && displaySetIndexToShow < currentDisplaySets.length; displaySetIndexToShow += direction) {
@@ -5303,7 +5987,7 @@ const commandsModule = _ref => {
       } = currentDisplaySets[displaySetIndexToShow];
       let updatedViewports = [];
       try {
-        updatedViewports = hangingProtocolService.getViewportsRequireUpdate(activeViewportIndex, displaySetInstanceUID);
+        updatedViewports = hangingProtocolService.getViewportsRequireUpdate(activeViewportId, displaySetInstanceUID);
       } catch (error) {
         console.warn(error);
         uiNotificationService.show({
@@ -5397,7 +6081,6 @@ const commandsModule = _ref => {
  * It is not included in the viewer mode by default.
  */
 const hpMN = {
-  hasUpdatedPriorsInformation: false,
   id: '@ohif/mnGrid',
   description: 'Has various hanging protocol grid layouts',
   name: '2x2',
@@ -5418,7 +6101,8 @@ const hpMN = {
           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.
@@ -5606,15 +6290,182 @@ const hpMN = {
   numberOfPriorsReferenced: -1
 };
 /* harmony default export */ const hpMNGrid = (hpMN);
+;// CONCATENATED MODULE: ../../../extensions/default/src/hpCompare.ts
+const defaultDisplaySetSelector = {
+  studyMatchingRules: [{
+    // The priorInstance is a study counter that indicates what position this study is in
+    // and the value comes from the options parameter.
+    attribute: 'studyInstanceUIDsIndex',
+    from: 'options',
+    required: true,
+    constraint: {
+      equals: {
+        value: 0
+      }
+    }
+  }],
+  seriesMatchingRules: [{
+    attribute: 'numImageFrames',
+    constraint: {
+      greaterThan: {
+        value: 0
+      }
+    }
+  },
+  // 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
+    }
+  }]
+};
+const priorDisplaySetSelector = {
+  studyMatchingRules: [{
+    // The priorInstance is a study counter that indicates what position this study is in
+    // and the value comes from the options parameter.
+    attribute: 'studyInstanceUIDsIndex',
+    from: 'options',
+    required: true,
+    constraint: {
+      equals: {
+        value: 1
+      }
+    }
+  }],
+  seriesMatchingRules: [{
+    attribute: 'numImageFrames',
+    constraint: {
+      greaterThan: {
+        value: 0
+      }
+    }
+  },
+  // 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
+    }
+  }]
+};
+const currentDisplaySet = {
+  id: 'defaultDisplaySetId'
+};
+const priorDisplaySet = {
+  id: 'priorDisplaySetId'
+};
+const currentViewport0 = {
+  viewportOptions: {
+    toolGroupId: 'default',
+    allowUnmatchedView: true
+  },
+  displaySets: [currentDisplaySet]
+};
+const currentViewport1 = {
+  ...currentViewport0,
+  displaySets: [{
+    ...currentDisplaySet,
+    matchedDisplaySetsIndex: 1
+  }]
+};
+const priorViewport0 = {
+  ...currentViewport0,
+  displaySets: [priorDisplaySet]
+};
+const priorViewport1 = {
+  ...priorViewport0,
+  displaySets: [{
+    ...priorDisplaySet,
+    matchedDisplaySetsIndex: 1
+  }]
+};
+
+/**
+ * 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/mnGrid` added to the viewer URL
+ * It is not included in the viewer mode by default.
+ */
+const hpMNCompare = {
+  id: '@ohif/hpCompare',
+  description: 'Compare two studies in various layouts',
+  name: 'Compare Two Studies',
+  numberOfPriorsReferenced: 1,
+  protocolMatchingRules: [{
+    id: 'Two Studies',
+    weight: 1000,
+    attribute: 'StudyInstanceUID',
+    // The 'from' attribute says where to get the 'attribute' value from.  In this case
+    // prior means the second study in the study list.
+    from: 'prior',
+    required: true,
+    constraint: {
+      notNull: true
+    }
+  }],
+  toolGroupIds: ['default'],
+  displaySetSelectors: {
+    defaultDisplaySetId: defaultDisplaySetSelector,
+    priorDisplaySetId: priorDisplaySetSelector
+  },
+  defaultViewport: {
+    viewportOptions: {
+      viewportType: 'stack',
+      toolGroupId: 'default',
+      allowUnmatchedView: true
+    },
+    displaySets: [{
+      id: 'defaultDisplaySetId',
+      matchedDisplaySetsIndex: -1
+    }]
+  },
+  stages: [{
+    name: '2x2',
+    stageActivation: {
+      enabled: {
+        minViewportsMatched: 4
+      }
+    },
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 2,
+        columns: 2
+      }
+    },
+    viewports: [currentViewport0, priorViewport0, currentViewport1, priorViewport1]
+  }, {
+    name: '2x1',
+    stageActivation: {
+      enabled: {
+        minViewportsMatched: 2
+      }
+    },
+    viewportStructure: {
+      layoutType: 'grid',
+      properties: {
+        rows: 1,
+        columns: 2
+      }
+    },
+    viewports: [currentViewport0, priorViewport0]
+  }]
+};
+/* harmony default export */ const hpCompare = (hpMNCompare);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getHangingProtocolModule.js
 
+
 const defaultProtocol = {
   id: 'default',
   locked: true,
   // Don't store this hanging protocol as it applies to the currently active
   // display set by default
   // cacheId: null,
-  hasUpdatedPriorsInformation: false,
   name: 'Default',
   createdDate: '2021-02-23T19:22:08.894Z',
   modifiedDate: '2023-04-01',
@@ -5679,6 +6530,7 @@ const defaultProtocol = {
     viewports: [{
       viewportOptions: {
         viewportType: 'stack',
+        viewportId: 'default',
         toolGroupId: 'default',
         // This will specify the initial image options index if it matches in the URL
         // and will otherwise not specify anything.
@@ -5708,6 +6560,11 @@ function getHangingProtocolModule() {
   {
     name: hpMNGrid.id,
     protocol: hpMNGrid
+  },
+  // Create a MxN comparison hanging protocol available by default
+  {
+    name: hpCompare.id,
+    protocol: hpCompare
   }];
 }
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
@@ -5730,21 +6587,21 @@ function DataSourceSelector() {
       height: '100%'
     }
   }, /*#__PURE__*/react.createElement("div", {
-    className: "h-screen w-screen flex justify-center items-center "
+    className: "flex h-screen w-screen items-center justify-center "
   }, /*#__PURE__*/react.createElement("div", {
-    className: "py-8 px-8 mx-auto bg-secondary-dark drop-shadow-md space-y-2 rounded-lg"
+    className: "bg-secondary-dark mx-auto space-y-2 rounded-lg py-8 px-8 drop-shadow-md"
   }, /*#__PURE__*/react.createElement("img", {
-    className: "block mx-auto h-14",
+    className: "mx-auto block h-14",
     src: "./ohif-logo.svg",
     alt: "OHIF"
   }), /*#__PURE__*/react.createElement("div", {
-    className: "text-center space-y-2 pt-4"
+    className: "space-y-2 pt-4 text-center"
   }, dsConfigs.filter(it => it.sourceName !== 'dicomjson' && it.sourceName !== 'dicomlocal').map(ds => /*#__PURE__*/react.createElement("div", {
     key: ds.sourceName
   }, /*#__PURE__*/react.createElement("h1", {
     className: "text-white"
-  }, ds.friendlyName), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
-    type: ui_src/* ButtonEnums.type */.LZ.U.primary,
+  }, ds.configuration?.friendlyName || ds.friendlyName), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
+    type: ui_src/* ButtonEnums.type */.LZ.dt.primary,
     className: classnames_default()('ml-2'),
     onClick: () => {
       navigate({
@@ -5755,10 +6612,442 @@ function DataSourceSelector() {
   }, ds.sourceName), /*#__PURE__*/react.createElement("br", null)))))));
 }
 /* harmony default export */ const Panels_DataSourceSelector = (DataSourceSelector);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/ItemListComponent.tsx
+
+
+
+
+function ItemListComponent(_ref) {
+  let {
+    itemLabel,
+    itemList,
+    onItemClicked
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const [filterValue, setFilterValue] = (0,react.useState)('');
+  (0,react.useEffect)(() => {
+    setFilterValue('');
+  }, [itemList]);
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex min-h-[1px] grow flex-col gap-4"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-primary-light text-[20px]"
+  }, t(`Select ${itemLabel}`)), /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
+    className: "max-w-[40%] grow",
+    value: filterValue,
+    onDebounceChange: setFilterValue,
+    placeholder: t(`Search ${itemLabel} list`)
+  })), /*#__PURE__*/react.createElement("div", {
+    className: "relative flex min-h-[1px] grow flex-col bg-black text-[14px]"
+  }, itemList == null ? /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.LE, {
+    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 */.JO, {
+    name: "magnifier",
+    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"
+  }, t(itemLabel)), /*#__PURE__*/react.createElement("div", {
+    className: "ohif-scrollbar overflow-auto"
+  }, itemList.filter(item => !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())).map(item => {
+    const border = 'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
+    return /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('hover:text-primary-light hover:bg-primary-dark group mx-2 flex items-center justify-between px-6 py-2', border),
+      key: item.id
+    }, /*#__PURE__*/react.createElement("div", null, item.name), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
+      onClick: () => onItemClicked(item),
+      className: "invisible group-hover:visible",
+      endIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "arrow-left"
+      })
+    }, t('Select')));
+  })))));
+}
+/* harmony default export */ const Components_ItemListComponent = (ItemListComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
+
+
+
+
+
+const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
+function DataSourceConfigurationModalComponent(_ref) {
+  let {
+    configurationAPI,
+    configuredItems,
+    onHide
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const [itemList, setItemList] = (0,react.useState)();
+  const [selectedItems, setSelectedItems] = (0,react.useState)(configuredItems);
+  const [errorMessage, setErrorMessage] = (0,react.useState)();
+  const [itemLabels] = (0,react.useState)(configurationAPI.getItemLabels());
+
+  // Determines whether to show the full/existing configuration for the data source.
+  // A full or complete configuration is one where the data source (path) has the
+  // maximum/required number of path items. Anything less is considered not complete and
+  // the configuration starts from scratch (i.e. as if no items are configured at all).
+  // TODO: consider configuration starting from a partial (i.e. non-empty) configuration
+  const [showFullConfig, setShowFullConfig] = (0,react.useState)(itemLabels.length === configuredItems.length);
+
+  /**
+   * The index of the selected item that is considered current and for which
+   * its sub-items should be displayed in the items list component. When the
+   * full/existing configuration for a data source is to be shown, the current
+   * selected item is the second to last in the `selectedItems` list.
+   */
+  const currentSelectedItemIndex = showFullConfig ? selectedItems.length - 2 : selectedItems.length - 1;
+  (0,react.useEffect)(() => {
+    let shouldUpdate = true;
+    setErrorMessage(null);
+
+    // Clear out the former/old list while we fetch the next sub item list.
+    setItemList(null);
+    if (selectedItems.length === 0) {
+      configurationAPI.initialize().then(items => {
+        if (shouldUpdate) {
+          setItemList(items);
+        }
+      }).catch(error => setErrorMessage(error.message));
+    } else if (!showFullConfig && selectedItems.length === itemLabels.length) {
+      // The last item to configure the data source (path) has been selected.
+      configurationAPI.setCurrentItem(selectedItems[selectedItems.length - 1]);
+      // We can hide the modal dialog now.
+      onHide();
+    } else {
+      configurationAPI.setCurrentItem(selectedItems[currentSelectedItemIndex]).then(items => {
+        if (shouldUpdate) {
+          setItemList(items);
+        }
+      }).catch(error => setErrorMessage(error.message));
+    }
+    return () => {
+      shouldUpdate = false;
+    };
+  }, [selectedItems, configurationAPI, onHide, itemLabels, showFullConfig, currentSelectedItemIndex]);
+  const getSelectedItemCursorClasses = itemIndex => itemIndex !== itemLabels.length - 1 && itemIndex < selectedItems.length ? 'cursor-pointer' : 'cursor-auto';
+  const getSelectedItemBackgroundClasses = itemIndex => itemIndex < selectedItems.length ? classnames_default()('bg-black/[.4]', itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-secondary-dark' : '') : 'bg-transparent';
+  const getSelectedItemBorderClasses = itemIndex => itemIndex === currentSelectedItemIndex + 1 ? classnames_default()('border-2', 'border-solid', 'border-primary-light') : itemIndex < selectedItems.length ? 'border border-solid border-primary-active hover:border-primary-light active:border-white' : 'border border-dashed border-secondary-light';
+  const getSelectedItemTextClasses = itemIndex => itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary-active';
+  const getErrorComponent = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex min-h-[1px] grow flex-col gap-4"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-primary-light text-[20px]"
+    }, t(`Error fetching ${itemLabels[selectedItems.length]} list`)), /*#__PURE__*/react.createElement("div", {
+      className: "grow bg-black p-4 text-[14px]"
+    }, errorMessage));
+  };
+  const getSelectedItemsComponent = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex gap-4"
+    }, itemLabels.map((itemLabel, itemLabelIndex) => {
+      return /*#__PURE__*/react.createElement("div", {
+        key: itemLabel,
+        className: classnames_default()('flex min-w-[1px] shrink basis-[200px] flex-col gap-1 rounded-md p-3.5', getSelectedItemCursorClasses(itemLabelIndex), getSelectedItemBackgroundClasses(itemLabelIndex), getSelectedItemBorderClasses(itemLabelIndex), getSelectedItemTextClasses(itemLabelIndex)),
+        onClick: showFullConfig && itemLabelIndex < currentSelectedItemIndex || itemLabelIndex <= currentSelectedItemIndex ? () => {
+          setShowFullConfig(false);
+          setSelectedItems(theList => theList.slice(0, itemLabelIndex));
+        } : undefined
+      }, /*#__PURE__*/react.createElement("div", {
+        className: "text- flex items-center gap-2"
+      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-tracked"
+      }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-untracked"
+      }), /*#__PURE__*/react.createElement("div", {
+        className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES)
+      }, t(itemLabel))), itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement("div", {
+        className: classnames_default()('text-[14px] text-white', NO_WRAP_ELLIPSIS_CLASS_NAMES)
+      }, selectedItems[itemLabelIndex].name) : /*#__PURE__*/react.createElement("br", null));
+    }));
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex h-[calc(100vh-300px)] select-none flex-col gap-4 pt-0.5"
+  }, getSelectedItemsComponent(), /*#__PURE__*/react.createElement("div", {
+    className: "h-0.5 w-full shrink-0 bg-black"
+  }), errorMessage ? getErrorComponent() : /*#__PURE__*/react.createElement(Components_ItemListComponent, {
+    itemLabel: itemLabels[currentSelectedItemIndex + 1],
+    itemList: itemList,
+    onItemClicked: item => {
+      setShowFullConfig(false);
+      setSelectedItems(theList => [...theList.slice(0, currentSelectedItemIndex + 1), item]);
+    }
+  }));
+}
+/* harmony default export */ const Components_DataSourceConfigurationModalComponent = (DataSourceConfigurationModalComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/DataSourceConfigurationComponent.tsx
+
+
+
+
+function DataSourceConfigurationComponent(_ref) {
+  let {
+    servicesManager,
+    extensionManager
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const {
+    show,
+    hide
+  } = (0,ui_src/* useModal */.dd)();
+  const {
+    customizationService
+  } = servicesManager.services;
+  const [configurationAPI, setConfigurationAPI] = (0,react.useState)();
+  const [configuredItems, setConfiguredItems] = (0,react.useState)();
+  (0,react.useEffect)(() => {
+    let shouldUpdate = true;
+    const dataSourceChangedCallback = async () => {
+      const activeDataSourceDef = extensionManager.getActiveDataSourceDefinition();
+      if (!activeDataSourceDef.configuration.configurationAPI) {
+        return;
+      }
+      const {
+        factory: configurationAPIFactory
+      } = customizationService.get(activeDataSourceDef.configuration.configurationAPI) ?? {};
+      if (!configurationAPIFactory) {
+        return;
+      }
+      const configAPI = configurationAPIFactory(activeDataSourceDef.sourceName);
+      setConfigurationAPI(configAPI);
+
+      // New configuration API means that the existing configured items must be cleared.
+      setConfiguredItems(null);
+      configAPI.getConfiguredItems().then(list => {
+        if (shouldUpdate) {
+          setConfiguredItems(list);
+        }
+      });
+    };
+    const sub = extensionManager.subscribe(extensionManager.EVENTS.ACTIVE_DATA_SOURCE_CHANGED, dataSourceChangedCallback);
+    dataSourceChangedCallback();
+    return () => {
+      shouldUpdate = false;
+      sub.unsubscribe();
+    };
+  }, []);
+  const showConfigurationModal = (0,react.useCallback)(() => {
+    show({
+      content: Components_DataSourceConfigurationModalComponent,
+      title: t('Configure Data Source'),
+      contentProps: {
+        configurationAPI,
+        configuredItems,
+        onHide: hide
+      }
+    });
+  }, [configurationAPI, configuredItems]);
+  (0,react.useEffect)(() => {
+    if (!configurationAPI || !configuredItems) {
+      return;
+    }
+    if (configuredItems.length !== configurationAPI.getItemLabels().length) {
+      // Not the correct number of configured items, so show the modal to configure the data source.
+      showConfigurationModal();
+    }
+  }, [configurationAPI, configuredItems, showConfigurationModal]);
+  return configuredItems ? /*#__PURE__*/react.createElement("div", {
+    className: "text-aqua-pale flex items-center overflow-hidden"
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+    name: "settings",
+    className: "mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer",
+    onClick: showConfigurationModal
+  }), configuredItems.map((item, itemIndex) => {
+    return /*#__PURE__*/react.createElement("div", {
+      key: itemIndex,
+      className: "flex overflow-hidden"
+    }, /*#__PURE__*/react.createElement("div", {
+      key: itemIndex,
+      className: "overflow-hidden text-ellipsis whitespace-nowrap"
+    }, item.name), itemIndex !== configuredItems.length - 1 && /*#__PURE__*/react.createElement("div", {
+      className: "px-2.5"
+    }, "|"));
+  })) : /*#__PURE__*/react.createElement(react.Fragment, null);
+}
+/* harmony default export */ const Components_DataSourceConfigurationComponent = (DataSourceConfigurationComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI.ts
+/**
+ * This file contains the implementations of BaseDataSourceConfigurationAPIItem
+ * and BaseDataSourceConfigurationAPI for the Google cloud healthcare API. To
+ * better understand this implementation and/or to implement custom implementations,
+ * see the platform\core\src\types\DataSourceConfigurationAPI.ts and its JS doc
+ * comments as a guide.
+ */
+/**
+ * The various Google Cloud Healthcare path item types.
+ */
+var ItemType = /*#__PURE__*/function (ItemType) {
+  ItemType[ItemType["projects"] = 0] = "projects";
+  ItemType[ItemType["locations"] = 1] = "locations";
+  ItemType[ItemType["datasets"] = 2] = "datasets";
+  ItemType[ItemType["dicomStores"] = 3] = "dicomStores";
+  return ItemType;
+}(ItemType || {});
+const initialUrl = 'https://cloudresourcemanager.googleapis.com/v1';
+const baseHealthcareUrl = 'https://healthcare.googleapis.com/v1';
+class GoogleCloudDataSourceConfigurationAPIItem {
+  constructor() {
+    this.id = void 0;
+    this.name = void 0;
+    this.url = void 0;
+    this.itemType = void 0;
+  }
+}
+class GoogleCloudDataSourceConfigurationAPI {
+  constructor(dataSourceName, servicesManager, extensionManager) {
+    this._extensionManager = void 0;
+    this._fetchOptions = void 0;
+    this._dataSourceName = void 0;
+    this.getItemLabels = () => ['Project', 'Location', 'Data set', 'DICOM store'];
+    this._dataSourceName = dataSourceName;
+    this._extensionManager = extensionManager;
+    const userAuthenticationService = servicesManager.services.userAuthenticationService;
+    this._fetchOptions = {
+      method: 'GET',
+      headers: userAuthenticationService.getAuthorizationHeader()
+    };
+  }
+  async initialize() {
+    const url = `${initialUrl}/projects`;
+    const projects = await GoogleCloudDataSourceConfigurationAPI._doFetch(url, ItemType.projects, this._fetchOptions);
+    if (!projects?.length) {
+      return [];
+    }
+    const projectItems = projects.map(project => {
+      return {
+        id: project.projectId,
+        name: project.name,
+        itemType: ItemType.projects,
+        url: `${baseHealthcareUrl}/projects/${project.projectId}`
+      };
+    });
+    return projectItems;
+  }
+  async setCurrentItem(anItem) {
+    const googleCloudItem = anItem;
+    if (googleCloudItem.itemType === ItemType.dicomStores) {
+      // Last configurable item, so update the data source configuration.
+      const url = `${googleCloudItem.url}/dicomWeb`;
+      const dataSourceDefCopy = JSON.parse(JSON.stringify(this._extensionManager.getDataSourceDefinition(this._dataSourceName)));
+      dataSourceDefCopy.configuration = {
+        ...dataSourceDefCopy.configuration,
+        wadoUriRoot: url,
+        qidoRoot: url,
+        wadoRoot: url
+      };
+      this._extensionManager.updateDataSourceConfiguration(dataSourceDefCopy.sourceName, dataSourceDefCopy.configuration);
+      return [];
+    }
+    const subItemType = googleCloudItem.itemType + 1;
+    const subItemField = `${ItemType[subItemType]}`;
+    const url = `${googleCloudItem.url}/${subItemField}`;
+    const fetchedSubItems = await GoogleCloudDataSourceConfigurationAPI._doFetch(url, subItemType, this._fetchOptions);
+    if (!fetchedSubItems?.length) {
+      return [];
+    }
+    const subItems = fetchedSubItems.map(subItem => {
+      const nameSplit = subItem.name.split('/');
+      return {
+        id: subItem.name,
+        name: nameSplit[nameSplit.length - 1],
+        itemType: subItemType,
+        url: `${baseHealthcareUrl}/${subItem.name}`
+      };
+    });
+    return subItems;
+  }
+  async getConfiguredItems() {
+    const dataSourceDefinition = this._extensionManager.getDataSourceDefinition(this._dataSourceName);
+    const url = dataSourceDefinition.configuration.wadoUriRoot;
+    const projectsIndex = url.indexOf('projects');
+    // Split the configured URL into (essentially) pairs (i.e. item type followed by item)
+    // Explicitly: ['projects','aProject','locations','aLocation','datasets','aDataSet','dicomStores','aDicomStore']
+    // Note that a partial configuration will have a subset of the above.
+    const urlSplit = url.substring(projectsIndex).split('/');
+    const configuredItems = [];
+    for (let itemType = 0;
+    // the number of configured items is either the max (4) or the number extracted from the url split
+    itemType < 4 && (itemType + 1) * 2 < urlSplit.length; itemType += 1) {
+      if (itemType === ItemType.projects) {
+        const projectId = urlSplit[1];
+        const projectUrl = `${initialUrl}/projects/${projectId}`;
+        const data = await GoogleCloudDataSourceConfigurationAPI._doFetch(projectUrl, ItemType.projects, this._fetchOptions);
+        const project = data[0];
+        configuredItems.push({
+          id: project.projectId,
+          name: project.name,
+          itemType: itemType,
+          url: `${baseHealthcareUrl}/projects/${project.projectId}`
+        });
+      } else {
+        const relativePath = urlSplit.slice(0, itemType * 2 + 2).join('/');
+        configuredItems.push({
+          id: relativePath,
+          name: urlSplit[itemType * 2 + 1],
+          itemType: itemType,
+          url: `${baseHealthcareUrl}/${relativePath}`
+        });
+      }
+    }
+    return configuredItems;
+  }
+
+  /**
+   * Fetches an array of items the specified item type.
+   * @param urlStr the fetch url
+   * @param fetchItemType the type to fetch
+   * @param fetchOptions the header options for the fetch (e.g. authorization header)
+   * @param fetchSearchParams any search query params; currently only used for paging results
+   * @returns an array of items of the specified type
+   */
+  static async _doFetch(urlStr, fetchItemType) {
+    let fetchOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let fetchSearchParams = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    try {
+      const url = new URL(urlStr);
+      url.search = new URLSearchParams(fetchSearchParams).toString();
+      const response = await fetch(url, fetchOptions);
+      const data = await response.json();
+      if (response.status >= 200 && response.status < 300 && data != null) {
+        if (data.nextPageToken != null) {
+          fetchSearchParams.pageToken = data.nextPageToken;
+          const subPageData = await this._doFetch(urlStr, fetchItemType, fetchOptions, fetchSearchParams);
+          data[ItemType[fetchItemType]] = data[ItemType[fetchItemType]].concat(subPageData);
+        }
+        if (data[ItemType[fetchItemType]]) {
+          return data[ItemType[fetchItemType]];
+        } else if (data.name) {
+          return [data];
+        } else {
+          return [];
+        }
+      } else {
+        const message = data?.error?.message || `Error returned from Google Cloud Healthcare: ${response.status} - ${response.statusText}`;
+        throw new Error(message);
+      }
+    } catch (err) {
+      const message = err?.message || 'Error occurred during fetch request.';
+      throw new Error(message);
+    }
+  }
+}
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getCustomizationModule.tsx
 
 
 
+
+
 /**
  *
  * Note: this is an example of how the customization module can be used
@@ -5768,7 +7057,11 @@ function DataSourceSelector() {
  * custom page for the user to view their profile, or to add a custom
  * page for login etc.
  */
-function getCustomizationModule() {
+function getCustomizationModule(_ref) {
+  let {
+    servicesManager,
+    extensionManager
+  } = _ref;
   return [{
     name: 'helloPage',
     value: {
@@ -5835,12 +7128,16 @@ function getCustomizationModule() {
     {
       id: 'ohif.overlayItem',
       content: function (props) {
-        if (this.condition && !this.condition(props)) return null;
+        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;
+        if (!value) {
+          return null;
+        }
         return /*#__PURE__*/react.createElement("span", {
           className: "overlay-item flex flex-row",
           style: {
@@ -5878,11 +7175,22 @@ function getCustomizationModule() {
         }
         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, {
+        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)
     }]
   }];
 }
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/calculate-suv/dist/calculate-suv.esm.js
-var calculate_suv_esm = __webpack_require__(71251);
+var calculate_suv_esm = __webpack_require__(15747);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPTImageIdInstanceMetadata.ts
 
 const getPTImageIdInstanceMetadata_metadataProvider = src["default"].classes.MetadataProvider;
@@ -5891,9 +7199,12 @@ function getPTImageIdInstanceMetadata(imageId) {
   if (!dicomMetaData) {
     throw new Error('dicom metadata are required');
   }
-  if (dicomMetaData.SeriesDate === undefined || dicomMetaData.SeriesTime === undefined || dicomMetaData.PatientWeight === undefined || dicomMetaData.CorrectedImage === undefined || dicomMetaData.Units === undefined || !dicomMetaData.RadiopharmaceuticalInformationSequence || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadionuclideHalfLife === undefined || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadionuclideTotalDose === undefined || dicomMetaData.DecayCorrection === undefined || dicomMetaData.AcquisitionDate === undefined || dicomMetaData.AcquisitionTime === undefined || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadiopharmaceuticalStartDateTime === undefined && dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadiopharmaceuticalStartTime === undefined) {
+  if (dicomMetaData.SeriesDate === undefined || dicomMetaData.SeriesTime === undefined || dicomMetaData.CorrectedImage === undefined || dicomMetaData.Units === undefined || !dicomMetaData.RadiopharmaceuticalInformationSequence || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadionuclideHalfLife === undefined || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadionuclideTotalDose === undefined || dicomMetaData.DecayCorrection === undefined || dicomMetaData.AcquisitionDate === undefined || dicomMetaData.AcquisitionTime === undefined || dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadiopharmaceuticalStartDateTime === undefined && dicomMetaData.RadiopharmaceuticalInformationSequence[0].RadiopharmaceuticalStartTime === undefined) {
     throw new Error('required metadata are missing');
   }
+  if (dicomMetaData.PatientWeight === undefined) {
+    console.warn('PatientWeight missing from PT instance metadata');
+  }
   const instanceMetadata = {
     CorrectedImage: dicomMetaData.CorrectedImage,
     Units: dicomMetaData.Units,
@@ -6064,6 +7375,8 @@ const handlePETImageMetadata = _ref2 => {
 
 
 
+
+
 const defaultExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.