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

package/dist/{342.bundle.e7c3d500f86fdfcc62b5.js → 206.bundle.f957e0d1cdff66dbac69.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[342],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[206],{
 
-/***/ 56342:
+/***/ 7206:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -11,6 +11,7 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
   ContextMenuController: () => (/* reexport */ ContextMenuController),
   CustomizableContextMenuTypes: () => (/* reexport */ types_namespaceObject),
+  StaticWadoClient: () => (/* reexport */ StaticWadoClient),
   createReportAsync: () => (/* reexport */ Actions_createReportAsync),
   createReportDialogPrompt: () => (/* reexport */ CreateReportDialogPrompt),
   "default": () => (/* binding */ default_src),
@@ -30,11 +31,11 @@ __webpack_require__.d(utils_namespaceObject, {
 });
 
 // EXTERNAL MODULE: ../../../node_modules/dicomweb-client/build/dicomweb-client.es.js
-var dicomweb_client_es = __webpack_require__(97604);
-// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
-var src = __webpack_require__(71771);
+var dicomweb_client_es = __webpack_require__(36922);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
-var sortStudy = __webpack_require__(62971);
+var sortStudy = __webpack_require__(45476);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
 /**
  * QIDO - Query based on ID for DICOM Objects
@@ -125,7 +126,7 @@ function processSeriesResults(qidoSeries) {
       description: getString(qidoSeries['0008103E'])
     }));
   }
-  (0,sortStudy/* sortStudySeries */.IO)(series);
+  (0,sortStudy/* sortStudySeries */.LM)(series);
   return series;
 }
 
@@ -179,8 +180,7 @@ function searchStudies(server, filter) {
  * @param serverSupportsQIDOIncludeField
  * @returns {string} The URL with encoded filter query data
  */
-function mapParams(params) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function mapParams(params, options = {}) {
   if (!params) {
     return;
   }
@@ -354,13 +354,12 @@ function buildInstanceWadoUrl(config, instance) {
  * @param thumbnail
  * @returns {string} The imageId to be used by Cornerstone
  */
-function getImageId(_ref) {
-  let {
-    instance,
-    frame,
-    config,
-    thumbnail = false
-  } = _ref;
+function getImageId({
+  instance,
+  frame,
+  config,
+  thumbnail = false
+}) {
   if (!instance) {
     return;
   }
@@ -380,7 +379,7 @@ function getImageId(_ref) {
   }
 }
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(67540);
+var dcmjs_es = __webpack_require__(31426);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/wado/retrieveMetadataLoader.js
 /**
  * Class to define inheritance of load retrieve strategy.
@@ -395,13 +394,11 @@ class RetrieveMetadataLoader {
    * @param {Object} client The dicomweb-client.
    * @param {Array} studyInstanceUID Study instance ui to be retrieved
    * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
-   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
-   * @param {Function} [sortSeries] - Custom sort function for series
+   * @param {string} [filters.seriesInstanceUID] - series instance uid to filter results against
+   * @param {Object} [sortCriteria] - Custom sort criteria used for series
+   * @param {Function} [sortFunction] - Custom sort function for series
    */
-  constructor(client, studyInstanceUID) {
-    let filters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    let sortCriteria = arguments.length > 3 ? arguments[3] : undefined;
-    let sortFunction = arguments.length > 4 ? arguments[4] : undefined;
+  constructor(client, studyInstanceUID, filters = {}, sortCriteria = undefined, sortFunction = undefined) {
     this.client = client;
     this.studyInstanceUID = studyInstanceUID;
     this.filters = filters;
@@ -422,13 +419,9 @@ class RetrieveMetadataLoader {
   async runLoaders(loaders) {
     let result;
     for (const loader of loaders) {
-      try {
-        result = await loader();
-        if (result && result.length) {
-          break; // closes iterator in case data is retrieved successfully
-        }
-      } catch (e) {
-        throw e;
+      result = await loader();
+      if (result && result.length) {
+        break; // closes iterator in case data is retrieved successfully
       }
     }
     if (loaders.next().done && !result) {
@@ -511,11 +504,64 @@ class RetrieveMetadataLoaderSync extends RetrieveMetadataLoader {
 
 
 
+// Series Date, Series Time, Series Description and Series Number to be included
+// in the series metadata query result
+const includeField = ['00080021', '00080031', '0008103E', '00200011'].join(',');
+class DeferredPromise {
+  constructor() {
+    this.metadata = undefined;
+    this.processFunction = undefined;
+    this.internalPromise = undefined;
+    this.thenFunction = undefined;
+    this.rejectFunction = undefined;
+  }
+  setMetadata(metadata) {
+    this.metadata = metadata;
+  }
+  setProcessFunction(func) {
+    this.processFunction = func;
+  }
+  getPromise() {
+    return this.start();
+  }
+  start() {
+    if (this.internalPromise) {
+      return this.internalPromise;
+    }
+    this.internalPromise = this.processFunction();
+    // in case then and reject functions called before start
+    if (this.thenFunction) {
+      this.then(this.thenFunction);
+      this.thenFunction = undefined;
+    }
+    if (this.rejectFunction) {
+      this.reject(this.rejectFunction);
+      this.rejectFunction = undefined;
+    }
+    return this.internalPromise;
+  }
+  then(func) {
+    if (this.internalPromise) {
+      return this.internalPromise.then(func);
+    } else {
+      this.thenFunction = func;
+    }
+  }
+  reject(func) {
+    if (this.internalPromise) {
+      return this.internalPromise.reject(func);
+    } else {
+      this.rejectFunction = func;
+    }
+  }
+}
 /**
- * Creates an immutable series loader object which loads each series sequentially using the iterator interface
+ * Creates an immutable series loader object which loads each series sequentially using the iterator interface.
+ *
  * @param {DICOMWebClient} dicomWebClient The DICOMWebClient instance to be used for series load
  * @param {string} studyInstanceUID The Study Instance UID from which series will be loaded
  * @param {Array} seriesInstanceUIDList A list of Series Instance UIDs
+ *
  * @returns {Object} Returns an object which supports loading of instances from each of given Series Instance UID
  */
 function makeSeriesAsyncLoader(client, studyInstanceUID, seriesInstanceUIDList) {
@@ -523,12 +569,20 @@ function makeSeriesAsyncLoader(client, studyInstanceUID, seriesInstanceUIDList)
     hasNext() {
       return seriesInstanceUIDList.length > 0;
     },
-    async next() {
-      const seriesInstanceUID = seriesInstanceUIDList.shift();
-      return client.retrieveSeriesMetadata({
-        studyInstanceUID,
-        seriesInstanceUID
+    next() {
+      const {
+        seriesInstanceUID,
+        metadata
+      } = seriesInstanceUIDList.shift();
+      const promise = new DeferredPromise();
+      promise.setMetadata(metadata);
+      promise.setProcessFunction(() => {
+        return client.retrieveSeriesMetadata({
+          studyInstanceUID,
+          seriesInstanceUID
+        });
       });
+      return promise;
     }
   });
 }
@@ -552,19 +606,22 @@ class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader {
       } = {},
       client
     } = this;
+
+    // asking to include Series Date, Series Time, Series Description
+    // and Series Number in the series metadata returned to better sort series
+    // in preLoad function
+    let options = {
+      studyInstanceUID,
+      queryParams: {
+        includefield: includeField
+      }
+    };
     if (seriesInstanceUID) {
-      const options = {
-        studyInstanceUID,
-        queryParams: {
-          SeriesInstanceUID: seriesInstanceUID
-        }
-      };
+      options.queryParams.SeriesInstanceUID = seriesInstanceUID;
       preLoaders.push(client.searchForSeries.bind(client, options));
     }
     // Fallback preloader
-    preLoaders.push(client.searchForSeries.bind(client, {
-      studyInstanceUID
-    }));
+    preLoaders.push(client.searchForSeries.bind(client, options));
     yield* preLoaders;
   }
   async preLoad() {
@@ -574,31 +631,36 @@ class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader {
     const sortFunction = this.sortFunction;
     const {
       naturalizeDataset
-    } = dcmjs_es["default"].data.DicomMetaDictionary;
+    } = dcmjs_es/* default.data */.Ay.data.DicomMetaDictionary;
     const naturalized = result.map(naturalizeDataset);
-    return (0,sortStudy/* sortStudySeries */.IO)(naturalized, sortCriteria || sortStudy/* sortingCriteria */.S1.seriesSortCriteria.seriesInfoSortingCriteria, sortFunction);
+    return (0,sortStudy/* sortStudySeries */.LM)(naturalized, sortCriteria, sortFunction);
   }
   async load(preLoadData) {
     const {
       client,
       studyInstanceUID
     } = this;
-    const seriesInstanceUIDs = preLoadData.map(s => s.SeriesInstanceUID);
+    const seriesInstanceUIDs = preLoadData.map(seriesMetadata => {
+      return {
+        seriesInstanceUID: seriesMetadata.SeriesInstanceUID,
+        metadata: seriesMetadata
+      };
+    });
     const seriesAsyncLoader = makeSeriesAsyncLoader(client, studyInstanceUID, seriesInstanceUIDs);
     const promises = [];
     while (seriesAsyncLoader.hasNext()) {
-      promises.push(seriesAsyncLoader.next());
+      const promise = seriesAsyncLoader.next();
+      promises.push(promise);
     }
     return {
       preLoadData,
       promises
     };
   }
-  async posLoad(_ref) {
-    let {
-      preLoadData,
-      promises
-    } = _ref;
+  async posLoad({
+    preLoadData,
+    promises
+  }) {
     return {
       preLoadData,
       promises
@@ -613,40 +675,91 @@ class RetrieveMetadataLoaderAsync extends RetrieveMetadataLoader {
  * Retrieve Study metadata from a DICOM server. If the server is configured to use lazy load, only the first series
  * will be loaded and the property "studyLoader" will be set to let consumer load remaining series as needed.
  *
- * @param {Object} dicomWebClient The dicomweb-client.
- * @param {string} studyInstanceUid The Study Instance UID of the study which needs to be loaded
- * @param {Object} [filters] - Object containing filters to be applied on retrieve metadata process
- * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
- * @returns {Object} A study descriptor object
+ * @param {*} dicomWebClient The DICOMWebClient instance to be used for series load
+ * @param {*} StudyInstanceUID The UID of the Study to be retrieved
+ * @param {*} enableStudyLazyLoad Whether the study metadata should be loaded asynchronously
+ * @param {object} filters Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filters.seriesInstanceUID] Series instance uid to filter results against
+ * @param {array} [filters.SeriesInstanceUIDs] Series instance uids to filter results against
+ * @param {function} [sortCriteria] Sort criteria function
+ * @param {function} [sortFunction] Sort function
+ *
+ * @returns {Promise} A promises that resolves the study descriptor object
  */
-async function RetrieveMetadata(dicomWebClient, studyInstanceUid, enableStudyLazyLoad) {
-  let filters = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  let sortCriteria = arguments.length > 4 ? arguments[4] : undefined;
-  let sortFunction = arguments.length > 5 ? arguments[5] : undefined;
+async function RetrieveMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters = {}, sortCriteria, sortFunction) {
   const RetrieveMetadataLoader = enableStudyLazyLoad !== false ? RetrieveMetadataLoaderAsync : RetrieveMetadataLoaderSync;
-  const retrieveMetadataLoader = new RetrieveMetadataLoader(dicomWebClient, studyInstanceUid, filters, sortCriteria, sortFunction);
+  const retrieveMetadataLoader = new RetrieveMetadataLoader(dicomWebClient, StudyInstanceUID, filters, sortCriteria, sortFunction);
   const data = await retrieveMetadataLoader.execLoad();
   return data;
 }
 /* harmony default export */ const retrieveMetadata = (RetrieveMetadata);
+;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/utils/retrieveMetadataFiltered.js
+
+
+/**
+ * Retrieve metadata filtered.
+ *
+ * @param {*} dicomWebClient The DICOMWebClient instance to be used for series load
+ * @param {*} StudyInstanceUID The UID of the Study to be retrieved
+ * @param {*} enableStudyLazyLoad Whether the study metadata should be loaded asynchronously
+ * @param {object} filters Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filters.seriesInstanceUID] Series instance uid to filter results against
+ * @param {array} [filters.SeriesInstanceUIDs] Series instance uids to filter results against
+ * @param {function} [sortCriteria] Sort criteria function
+ * @param {function} [sortFunction] Sort function
+ *
+ * @returns
+ */
+function retrieveMetadataFiltered(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction) {
+  const {
+    SeriesInstanceUIDs
+  } = filters;
+  return new Promise((resolve, reject) => {
+    const promises = SeriesInstanceUIDs.map(uid => {
+      const seriesSpecificFilters = Object.assign({}, filters, {
+        seriesInstanceUID: uid
+      });
+      return retrieveMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, seriesSpecificFilters, sortCriteria, sortFunction);
+    });
+    Promise.all(promises).then(results => {
+      const aggregatedResult = {
+        preLoadData: [],
+        promises: []
+      };
+      results.forEach(({
+        preLoadData,
+        promises
+      }) => {
+        aggregatedResult.preLoadData = aggregatedResult.preLoadData.concat(preLoadData);
+        aggregatedResult.promises = aggregatedResult.promises.concat(promises);
+      });
+      resolve(aggregatedResult);
+    }, reject);
+  });
+}
+/* harmony default export */ const utils_retrieveMetadataFiltered = (retrieveMetadataFiltered);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/retrieveStudyMetadata.js
 
+
 const moduleName = 'RetrieveStudyMetadata';
 // Cache for promises. Prevents unnecessary subsequent calls to the server
 const StudyMetaDataPromises = new Map();
 
 /**
- * Retrieves study metadata
+ * Retrieves study metadata.
  *
- * @param {Object} server Object with server configuration parameters
+ * @param {Object} dicomWebClient The DICOMWebClient instance to be used for series load
  * @param {string} StudyInstanceUID The UID of the Study to be retrieved
- * @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
+ * @param {boolean} enableStudyLazyLoad Whether the study metadata should be loaded asynchronously.
+ * @param {Object} [filters] Object containing filters to be applied on retrieve metadata process
+ * @param {string} [filters.seriesInstanceUID] Series instance uid to filter results against
+ * @param {array} [filters.SeriesInstanceUIDs] Series instance uids to filter results against
+ * @param {function} [sortCriteria] Sort criteria function
+ * @param {function} [sortFunction] Sort function
+ *
  * @returns {Promise} that will be resolved with the metadata or rejected with the error
  */
-function retrieveStudyMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction) {
+function retrieveStudyMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction, dicomWebConfig = {}) {
   // @TODO: Whenever a study metadata request has failed, its related promise will be rejected once and for all
   // and further requests for that metadata will always fail. On failure, we probably need to remove the
   // corresponding promise from the "StudyMetaDataPromises" map...
@@ -657,39 +770,157 @@ function retrieveStudyMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazy
   if (!StudyInstanceUID) {
     throw new Error(`${moduleName}: Required 'StudyInstanceUID' parameter not provided.`);
   }
+  const promiseId = `${dicomWebConfig.name}:${StudyInstanceUID}`;
 
   // Already waiting on result? Return cached promise
-  if (StudyMetaDataPromises.has(StudyInstanceUID)) {
-    return StudyMetaDataPromises.get(StudyInstanceUID);
+  if (StudyMetaDataPromises.has(promiseId)) {
+    return StudyMetaDataPromises.get(promiseId);
+  }
+  let promise;
+  if (filters && filters.SeriesInstanceUIDs) {
+    promise = utils_retrieveMetadataFiltered(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction);
+  } else {
+    // Create a promise to handle the data retrieval
+    promise = new Promise((resolve, reject) => {
+      retrieveMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction).then(function (data) {
+        resolve(data);
+      }, reject);
+    });
   }
-
-  // Create a promise to handle the data retrieval
-  const promise = new Promise((resolve, reject) => {
-    retrieveMetadata(dicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction).then(function (data) {
-      resolve(data);
-    }, reject);
-  });
 
   // Store the promise in cache
-  StudyMetaDataPromises.set(StudyInstanceUID, promise);
+  StudyMetaDataPromises.set(promiseId, promise);
   return promise;
 }
 
 /**
  * Delete the cached study metadata retrieval promise to ensure that the browser will
- * re-retrieve the study metadata when it is next requested
+ * re-retrieve the study metadata when it is next requested.
  *
  * @param {String} StudyInstanceUID The UID of the Study to be removed from cache
- *
  */
 function deleteStudyMetadataPromise(StudyInstanceUID) {
   if (StudyMetaDataPromises.has(StudyInstanceUID)) {
     StudyMetaDataPromises.delete(StudyInstanceUID);
   }
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/utils/findIndexOfString.ts
+function checkToken(token, data, dataOffset) {
+  if (dataOffset + token.length > data.length) {
+    return false;
+  }
+  let endIndex = dataOffset;
+  for (let i = 0; i < token.length; i++) {
+    if (token[i] !== data[endIndex++]) {
+      return false;
+    }
+  }
+  return true;
+}
+function stringToUint8Array(str) {
+  const uint = new Uint8Array(str.length);
+  for (let i = 0, j = str.length; i < j; i++) {
+    uint[i] = str.charCodeAt(i);
+  }
+  return uint;
+}
+function findIndexOfString(data, str, offset) {
+  offset = offset || 0;
+  const token = stringToUint8Array(str);
+  for (let i = offset; i < data.length; i++) {
+    if (token[0] === data[i]) {
+      // console.log('match @', i);
+      if (checkToken(token, data, i)) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+/* harmony default export */ const utils_findIndexOfString = (findIndexOfString);
+;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/utils/fixMultipart.ts
+
+
+/**
+ * Fix multipart data coming back from the retrieve bulkdata request, but
+ * incorrectly tagged as application/octet-stream.  Some servers don't handle
+ * the response type correctly, and this method is relatively robust about
+ * detecting multipart data correctly.  It will only extract one value.
+ */
+function fixMultipart(arrayData) {
+  const data = new Uint8Array(arrayData[0]);
+  // Don't know the exact minimum length, but it is at least 25 to encode multipart
+  if (data.length < 25) {
+    return arrayData;
+  }
+  const dashIndex = utils_findIndexOfString(data, '--');
+  if (dashIndex > 6) {
+    return arrayData;
+  }
+  const tokenIndex = utils_findIndexOfString(data, '\r\n\r\n', dashIndex);
+  if (tokenIndex > 512) {
+    // Allow for 512 characters in the header - there is no apriori limit, but
+    // this seems ok for now as we only expect it to have content type in it.
+    return arrayData;
+  }
+  const header = uint8ArrayToString(data, 0, tokenIndex);
+  // Now find the boundary  marker
+  const responseHeaders = header.split('\r\n');
+  const boundary = findBoundary(responseHeaders);
+  if (!boundary) {
+    return arrayData;
+  }
+  // Start of actual data is 4 characters after the token
+  const offset = tokenIndex + 4;
+  const endIndex = utils_findIndexOfString(data, boundary, offset);
+  if (endIndex === -1) {
+    return arrayData;
+  }
+  return [data.slice(offset, endIndex - 2).buffer];
+}
+function findBoundary(header) {
+  for (let i = 0; i < header.length; i++) {
+    if (header[i].substr(0, 2) === '--') {
+      return header[i];
+    }
+  }
+}
+function findContentType(header) {
+  for (let i = 0; i < header.length; i++) {
+    if (header[i].substr(0, 13) === 'Content-Type:') {
+      return header[i].substr(13).trim();
+    }
+  }
+}
+function uint8ArrayToString(data, offset, length) {
+  offset = offset || 0;
+  length = length || data.length - offset;
+  let str = '';
+  for (let i = offset; i < offset + length; i++) {
+    str += String.fromCharCode(data[i]);
+  }
+  return str;
+}
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/utils/StaticWadoClient.ts
 
 
+const {
+  DICOMwebClient
+} = dicomweb_client_es/* api */.FH;
+const anyDicomwebClient = DICOMwebClient;
+
+// Ugly over-ride, but the internals aren't otherwise accessible.
+if (!anyDicomwebClient._orig_buildMultipartAcceptHeaderFieldValue) {
+  anyDicomwebClient._orig_buildMultipartAcceptHeaderFieldValue = anyDicomwebClient._buildMultipartAcceptHeaderFieldValue;
+  anyDicomwebClient._buildMultipartAcceptHeaderFieldValue = function (mediaTypes, acceptableTypes) {
+    if (mediaTypes.length === 1 && mediaTypes[0].mediaType.endsWith('/*')) {
+      return '*/*';
+    } else {
+      return anyDicomwebClient._orig_buildMultipartAcceptHeaderFieldValue(mediaTypes, acceptableTypes);
+    }
+  };
+}
+
 /**
  * An implementation of the static wado client, that fetches data from
  * a static response rather than actually doing real queries.  This allows
@@ -697,10 +928,53 @@ function deleteStudyMetadataPromise(StudyInstanceUID) {
  * performing searches doesn't work.  This version fixes the query issue
  * by manually implementing a query option.
  */
-class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
-  constructor(qidoConfig) {
-    super(qidoConfig);
-    this.staticWado = qidoConfig.staticWado;
+
+class StaticWadoClient extends dicomweb_client_es/* api */.FH.DICOMwebClient {
+  constructor(config) {
+    super(config);
+    this.config = void 0;
+    this.staticWado = void 0;
+    this.staticWado = config.staticWado;
+    this.config = config;
+  }
+
+  /**
+   * Handle improperly specified multipart/related return type.
+   * Note if the response is SUPPOSED to be multipart encoded already, then this
+   * will double-decode it.
+   *
+   * @param options
+   * @returns De-multiparted response data.
+   *
+   */
+  retrieveBulkData(options) {
+    const shouldFixMultipart = this.config.fixBulkdataMultipart !== false;
+    const useOptions = {
+      ...options
+    };
+    if (this.staticWado) {
+      useOptions.mediaTypes = [{
+        mediaType: 'application/*'
+      }];
+    }
+    return super.retrieveBulkData(useOptions).then(result => shouldFixMultipart ? fixMultipart(result) : result);
+  }
+
+  /**
+   * Retrieves instance frames using the image/* media type when configured
+   * to do so (static wado back end).
+   */
+  retrieveInstanceFrames(options) {
+    if (this.staticWado) {
+      return super.retrieveInstanceFrames({
+        ...options,
+        mediaTypes: [{
+          mediaType: 'image/*'
+        }]
+      });
+    } else {
+      return super.retrieveInstanceFrames(options);
+    }
   }
 
   /**
@@ -841,8 +1115,7 @@ class StaticWadoClient extends dicomweb_client_es.api.DICOMwebClient {
   /** Converts the query parameters to lower case query parameters */
   toLowerParams(queryParams) {
     const lowerParams = {};
-    Object.entries(queryParams).forEach(_ref => {
-      let [key, value] = _ref;
+    Object.entries(queryParams).forEach(([key, value]) => {
       lowerParams[key.toLowerCase()] = value;
     });
     return lowerParams;
@@ -875,6 +1148,7 @@ StaticWadoClient.seriesFilterKeys = {
  * @param {string} params.defaultType is the mime type of the response
  * @param {string} params.singlepart is the type of the part to retrieve
  * @param {string} params.fetchPart unknown?
+ * @param {string} params.url unknown?
  * @returns an absolute URL to the resource, if the absolute URL can be retrieved as singlepart,
  *    or is already retrieved, or a promise to a URL for such use if a BulkDataURI
  */
@@ -888,8 +1162,12 @@ const getDirectURL = (config, params) => {
     tag = 'PixelData',
     defaultPath = '/pixeldata',
     defaultType = 'video/mp4',
-    singlepart: fetchPart = 'video'
+    singlepart: fetchPart = 'video',
+    url = null
   } = params;
+  if (url) {
+    return url;
+  }
   const value = instance[tag];
   if (!value) {
     return undefined;
@@ -904,7 +1182,11 @@ const getDirectURL = (config, params) => {
   }
   if (!singlepart || singlepart !== true && singlepart.indexOf(fetchPart) === -1) {
     if (value.retrieveBulkData) {
-      return value.retrieveBulkData().then(arr => {
+      // Try the specified retrieve type.
+      const options = {
+        mediaType: defaultType
+      };
+      return value.retrieveBulkData(options).then(arr => {
         value.DirectRetrieveURL = URL.createObjectURL(new Blob([arr], {
           type: defaultType
         }));
@@ -995,7 +1277,7 @@ function fixBulkDataURI(value, instance, dicomWebConfig) {
 const {
   DicomMetaDictionary,
   DicomDict
-} = dcmjs_es["default"].data;
+} = dcmjs_es/* default.data */.Ay.data;
 const {
   naturalizeDataset,
   denaturalizeDataset
@@ -1006,26 +1288,47 @@ const EXPLICIT_VR_LITTLE_ENDIAN = '1.2.840.10008.1.2.1';
 const metadataProvider = src.classes.MetadataProvider;
 
 /**
+ * Creates a DICOM Web API based on the provided configuration.
  *
- * @param {string} name - Data source name
- * @param {string} wadoUriRoot - Legacy? (potentially unused/replaced)
- * @param {string} qidoRoot - Base URL to use for QIDO requests
- * @param {string} wadoRoot - Base URL to use for WADO requests
- * @param {boolean} qidoSupportsIncludeField - Whether QIDO supports the "Include" option to request additional fields in response
- * @param {string} imageRengering - wadors | ? (unsure of where/how this is used)
- * @param {string} thumbnailRendering - wadors | ? (unsure of where/how this is used)
- * @param {bool} supportsReject - Whether the server supports reject calls (i.e. DCM4CHEE)
- * @param {bool} lazyLoadStudy - "enableStudyLazyLoad"; Request series meta async instead of blocking
- * @param {string|bool} singlepart - indicates of the retrieves can fetch singlepart.  Options are bulkdata, video, image or boolean true
+ * @param {object} dicomWebConfig - Configuration for the DICOM Web API
+ * @param {string} dicomWebConfig.name - Data source name
+ * @param {string} dicomWebConfig.wadoUriRoot - Legacy? (potentially unused/replaced)
+ * @param {string} dicomWebConfig.qidoRoot - Base URL to use for QIDO requests
+ * @param {string} dicomWebConfig.wadoRoot - Base URL to use for WADO requests
+ * @param {string} dicomWebConfig.wadoUri - Base URL to use for WADO URI requests
+ * @param {boolean} dicomWebConfig.qidoSupportsIncludeField - Whether QIDO supports the "Include" option to request additional fields in response
+ * @param {string} dicomWebConfig.imageRendering - wadors | ? (unsure of where/how this is used)
+ * @param {string} dicomWebConfig.thumbnailRendering - wadors | ? (unsure of where/how this is used)
+ * @param {boolean} dicomWebConfig.supportsReject - Whether the server supports reject calls (i.e. DCM4CHEE)
+ * @param {boolean} dicomWebConfig.lazyLoadStudy - "enableStudyLazyLoad"; Request series meta async instead of blocking
+ * @param {string|boolean} dicomWebConfig.singlepart - indicates if the retrieves can fetch singlepart. Options are bulkdata, video, image, or boolean true
+ * @param {string} dicomWebConfig.requestTransferSyntaxUID - Transfer syntax to request from the server
+ * @param {object} dicomWebConfig.acceptHeader - Accept header to use for requests
+ * @param {boolean} dicomWebConfig.omitQuotationForMultipartRequest - Whether to omit quotation marks for multipart requests
+ * @param {boolean} dicomWebConfig.supportsFuzzyMatching - Whether the server supports fuzzy matching
+ * @param {boolean} dicomWebConfig.supportsWildcard - Whether the server supports wildcard matching
+ * @param {boolean} dicomWebConfig.supportsNativeDICOMModel - Whether the server supports the native DICOM model
+ * @param {boolean} dicomWebConfig.enableStudyLazyLoad - Whether to enable study lazy loading
+ * @param {boolean} dicomWebConfig.enableRequestTag - Whether to enable request tag
+ * @param {boolean} dicomWebConfig.enableStudyLazyLoad - Whether to enable study lazy loading
+ * @param {boolean} dicomWebConfig.bulkDataURI - Whether to enable bulkDataURI
+ * @param {function} dicomWebConfig.onConfiguration - Function that is called after the configuration is initialized
+ * @param {boolean} dicomWebConfig.staticWado - Whether to use the static WADO client
+ * @param {object} userAuthenticationService - User authentication service
+ * @param {object} userAuthenticationService.getAuthorizationHeader - Function that returns the authorization header
+ * @returns {object} - DICOM Web API object
  */
-function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
+function createDicomWebApi(dicomWebConfig, servicesManager) {
+  const {
+    userAuthenticationService,
+    customizationService
+  } = servicesManager.services;
   let dicomWebConfigCopy, qidoConfig, wadoConfig, qidoDicomWebClient, wadoDicomWebClient, getAuthrorizationHeader, generateWadoHeader;
   const implementation = {
-    initialize: _ref => {
-      let {
-        params,
-        query
-      } = _ref;
+    initialize: ({
+      params,
+      query
+    }) => {
       if (dicomWebConfig.onConfiguration && typeof dicomWebConfig.onConfiguration === 'function') {
         dicomWebConfig = dicomWebConfig.onConfiguration(dicomWebConfig, {
           params,
@@ -1055,20 +1358,20 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         staticWado: dicomWebConfig.staticWado,
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
-        errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
+        errorInterceptor: src/* errorHandler */.r_.getHTTPErrorHandler()
       };
       wadoConfig = {
         url: dicomWebConfig.wadoRoot,
         staticWado: dicomWebConfig.staticWado,
         singlepart: dicomWebConfig.singlepart,
         headers: userAuthenticationService.getAuthorizationHeader(),
-        errorInterceptor: src/* errorHandler */.Po.getHTTPErrorHandler()
+        errorInterceptor: src/* errorHandler */.r_.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);
+      qidoDicomWebClient = dicomWebConfig.staticWado ? new StaticWadoClient(qidoConfig) : new dicomweb_client_es/* api */.FH.DICOMwebClient(qidoConfig);
+      wadoDicomWebClient = dicomWebConfig.staticWado ? new StaticWadoClient(wadoConfig) : new dicomweb_client_es/* api */.FH.DICOMwebClient(wadoConfig);
     },
     query: {
       studies: {
@@ -1097,11 +1400,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         }
         // processResults: processResults.bind(),
       },
-
       instances: {
         search: (studyInstanceUid, queryParameters) => {
           qidoDicomWebClient.headers = getAuthrorizationHeader();
-          search.call(undefined, qidoDicomWebClient, studyInstanceUid, null, queryParameters);
+          return search.call(undefined, qidoDicomWebClient, studyInstanceUid, null, queryParameters);
         }
       }
     },
@@ -1123,11 +1425,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           singlepart: dicomWebConfig.singlepart
         }, params);
       },
-      bulkDataURI: async _ref2 => {
-        let {
-          StudyInstanceUID,
-          BulkDataURI
-        } = _ref2;
+      bulkDataURI: async ({
+        StudyInstanceUID,
+        BulkDataURI
+      }) => {
         qidoDicomWebClient.headers = getAuthrorizationHeader();
         const options = {
           multipart: false,
@@ -1140,26 +1441,26 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         });
       },
       series: {
-        metadata: async function () {
-          let {
-            StudyInstanceUID,
-            filters,
-            sortCriteria,
-            sortFunction,
-            madeInClient = false
-          } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        metadata: async ({
+          StudyInstanceUID,
+          filters,
+          sortCriteria,
+          sortFunction,
+          madeInClient = false,
+          returnPromises = false
+        } = {}) => {
           if (!StudyInstanceUID) {
             throw new Error('Unable to query for SeriesMetadata without StudyInstanceUID');
           }
           if (dicomWebConfig.enableStudyLazyLoad) {
-            return implementation._retrieveSeriesMetadataAsync(StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient);
+            return implementation._retrieveSeriesMetadataAsync(StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient, returnPromises);
           }
           return implementation._retrieveSeriesMetadataSync(StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient);
         }
       }
     },
     store: {
-      dicom: async (dataset, request) => {
+      dicom: async (dataset, request, dicomDict) => {
         wadoDicomWebClient.headers = getAuthrorizationHeader();
         if (dataset instanceof ArrayBuffer) {
           const options = {
@@ -1168,18 +1469,22 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           };
           await wadoDicomWebClient.storeInstances(options);
         } else {
-          const meta = {
-            FileMetaInformationVersion: dataset._meta?.FileMetaInformationVersion?.Value,
-            MediaStorageSOPClassUID: dataset.SOPClassUID,
-            MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
-            TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
-            ImplementationClassUID,
-            ImplementationVersionName
-          };
-          const denaturalized = denaturalizeDataset(meta);
-          const dicomDict = new DicomDict(denaturalized);
-          dicomDict.dict = denaturalizeDataset(dataset);
-          const part10Buffer = dicomDict.write();
+          let effectiveDicomDict = dicomDict;
+          if (!dicomDict) {
+            const meta = {
+              FileMetaInformationVersion: dataset._meta?.FileMetaInformationVersion?.Value,
+              MediaStorageSOPClassUID: dataset.SOPClassUID,
+              MediaStorageSOPInstanceUID: dataset.SOPInstanceUID,
+              TransferSyntaxUID: EXPLICIT_VR_LITTLE_ENDIAN,
+              ImplementationClassUID,
+              ImplementationVersionName
+            };
+            const denaturalized = denaturalizeDataset(meta);
+            const defaultDicomDict = new DicomDict(denaturalized);
+            defaultDicomDict.dict = denaturalizeDataset(dataset);
+            effectiveDicomDict = defaultDicomDict;
+          }
+          const part10Buffer = effectiveDicomDict.write();
           const options = {
             datasets: [part10Buffer],
             request
@@ -1192,7 +1497,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       const enableStudyLazyLoad = false;
       wadoDicomWebClient.headers = generateWadoHeader();
       // data is all SOPInstanceUIDs
-      const data = await retrieveStudyMetadata(wadoDicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction);
+      const data = await retrieveStudyMetadata(wadoDicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction, dicomWebConfig);
 
       // first naturalize the data
       const naturalizedInstancesMetadata = data.map(naturalizeDataset);
@@ -1233,16 +1538,16 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       const seriesMetadata = Object.values(seriesSummaryMetadata);
       src.DicomMetadataStore.addSeriesMetadata(seriesMetadata, madeInClient);
       Object.keys(instancesPerSeries).forEach(seriesInstanceUID => src.DicomMetadataStore.addInstances(instancesPerSeries[seriesInstanceUID], madeInClient));
+      return seriesSummaryMetadata;
     },
-    _retrieveSeriesMetadataAsync: async function (StudyInstanceUID, filters, sortCriteria, sortFunction) {
-      let madeInClient = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+    _retrieveSeriesMetadataAsync: async (StudyInstanceUID, filters, sortCriteria, sortFunction, madeInClient = false, returnPromises = false) => {
       const enableStudyLazyLoad = true;
       wadoDicomWebClient.headers = generateWadoHeader();
       // Get Series
       const {
         preLoadData: seriesSummaryMetadata,
         promises: seriesPromises
-      } = await retrieveStudyMetadata(wadoDicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction);
+      } = await retrieveStudyMetadata(wadoDicomWebClient, StudyInstanceUID, enableStudyLazyLoad, filters, sortCriteria, sortFunction, dicomWebConfig);
 
       /**
        * naturalizes the dataset, and adds a retrieve bulkdata method
@@ -1264,10 +1569,13 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
           // in which case it isn't necessary to re-read this.
           if (value && value.BulkDataURI && !value.Value) {
             // Provide a method to fetch bulkdata
-            value.retrieveBulkData = () => {
+            value.retrieveBulkData = (options = {}) => {
               // handle the scenarios where bulkDataURI is relative path
               fixBulkDataURI(value, naturalized, dicomWebConfig);
-              const options = {
+              const {
+                mediaType
+              } = options;
+              const useOptions = {
                 // The bulkdata fetches work with either multipart or
                 // singlepart, so set multipart to false to let the server
                 // decide which type to respond with.
@@ -1277,10 +1585,16 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
                 // is relative - that isn't disallowed by DICOMweb, but
                 // isn't well specified in the standard, but is needed in
                 // any implementation that stores static copies of the metadata
-                StudyInstanceUID: naturalized.StudyInstanceUID
+                StudyInstanceUID: naturalized.StudyInstanceUID,
+                mediaTypes: mediaType ? [{
+                  mediaType
+                }, {
+                  mediaType: 'application/octet-stream'
+                }] : undefined,
+                ...options
               };
               // Todo: this needs to be from wado dicom web client
-              return qidoDicomWebClient.retrieveBulkData(options).then(val => {
+              return qidoDicomWebClient.retrieveBulkData(useOptions).then(val => {
                 // There are DICOM PDF cases where the first ArrayBuffer in the array is
                 // the bulk data and DICOM video cases where the second ArrayBuffer is
                 // the bulk data. Here we play it safe and do a find.
@@ -1299,7 +1613,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         const naturalizedInstances = instances.map(addRetrieveBulkData);
 
         // Adding instanceMetadata to OHIF MetadataProvider
-        naturalizedInstances.forEach((instance, index) => {
+        naturalizedInstances.forEach(instance => {
           instance.wadoRoot = dicomWebConfig.wadoRoot;
           instance.wadoUri = dicomWebConfig.wadoUri;
           const imageId = implementation.getImageIdsForInstance({
@@ -1323,7 +1637,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         src.DicomMetadataStore.addInstances(naturalizedInstances, madeInClient);
       }
       function setSuccessFlag() {
-        const study = src.DicomMetadataStore.getStudy(StudyInstanceUID, madeInClient);
+        const study = src.DicomMetadataStore.getStudy(StudyInstanceUID);
+        if (!study) {
+          return;
+        }
         study.isLoaded = true;
       }
 
@@ -1333,11 +1650,22 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
         aSeries.StudyInstanceUID = StudyInstanceUID;
       });
       src.DicomMetadataStore.addSeriesMetadata(seriesSummaryMetadata, madeInClient);
-      const seriesDeliveredPromises = seriesPromises.map(promise => promise.then(instances => {
-        storeInstances(instances);
-      }));
-      await Promise.all(seriesDeliveredPromises);
-      setSuccessFlag();
+      const seriesDeliveredPromises = seriesPromises.map(promise => {
+        if (!returnPromises) {
+          promise?.start();
+        }
+        return promise.then(instances => {
+          storeInstances(instances);
+        });
+      });
+      if (returnPromises) {
+        Promise.all(seriesDeliveredPromises).then(() => setSuccessFlag());
+        return seriesPromises;
+      } else {
+        await Promise.all(seriesDeliveredPromises);
+        setSuccessFlag();
+      }
+      return seriesSummaryMetadata;
     },
     deleteStudyMetadataPromise: deleteStudyMetadataPromise,
     getImageIdsForDisplaySet(displaySet) {
@@ -1365,11 +1693,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
       });
       return imageIds;
     },
-    getImageIdsForInstance(_ref3) {
-      let {
-        instance,
-        frame
-      } = _ref3;
+    getImageIdsForInstance({
+      instance,
+      frame = undefined
+    }) {
       const imageIds = getImageId({
         instance,
         frame,
@@ -1380,11 +1707,10 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
     getConfig() {
       return dicomWebConfigCopy;
     },
-    getStudyInstanceUIDs(_ref4) {
-      let {
-        params,
-        query
-      } = _ref4;
+    getStudyInstanceUIDs({
+      params,
+      query
+    }) {
       const {
         StudyInstanceUIDs: paramsStudyInstanceUIDs
       } = params;
@@ -1397,7 +1723,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
   if (dicomWebConfig.supportsReject) {
     implementation.reject = dcm4cheeReject(dicomWebConfig.wadoRoot);
   }
-  return src/* IWebApiDataSource */.Is.create(implementation);
+  return src/* IWebApiDataSource */.pt.create(implementation);
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomJSONDataSource/index.js
@@ -1405,7 +1731,7 @@ function createDicomWebApi(dicomWebConfig, userAuthenticationService) {
 
 
 
-const DicomJSONDataSource_metadataProvider = src["default"].classes.MetadataProvider;
+const DicomJSONDataSource_metadataProvider = src/* default.classes */.Ay.classes.MetadataProvider;
 const mappings = {
   studyInstanceUid: 'StudyInstanceUID',
   patientId: 'PatientID'
@@ -1423,7 +1749,20 @@ let _store = {
   // }
   // }
 };
-
+function wrapSequences(obj) {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      // Recursively wrap sequences for nested objects
+      acc[key] = wrapSequences(obj[key]);
+    } else {
+      acc[key] = obj[key];
+    }
+    if (key.endsWith('Sequence')) {
+      acc[key] = src/* default.utils */.Ay.utils.addAccessors(acc[key]);
+    }
+    return acc;
+  }, Array.isArray(obj) ? [] : {});
+}
 const getMetaDataByURL = url => {
   return _store.urls.find(metaData => metaData.url === url);
 };
@@ -1443,11 +1782,10 @@ function createDicomJSONApi(dicomJsonConfig) {
     wadoRoot
   } = dicomJsonConfig;
   const implementation = {
-    initialize: async _ref => {
-      let {
-        query,
-        url
-      } = _ref;
+    initialize: async ({
+      query,
+      url
+    }) => {
       if (!url) {
         url = query.get('url');
       }
@@ -1545,15 +1883,14 @@ function createDicomJSONApi(dicomJsonConfig) {
        *    or is already retrieved, or a promise to a URL for such use if a BulkDataURI
        */
       directURL: params => {
-        return utils_getDirectURL(wadoRoot, params);
+        return utils_getDirectURL(dicomJsonConfig, params);
       },
       series: {
-        metadata: async function () {
-          let {
-            StudyInstanceUID,
-            madeInClient = false,
-            customSort
-          } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        metadata: async ({
+          StudyInstanceUID,
+          madeInClient = false,
+          customSort
+        } = {}) => {
           if (!StudyInstanceUID) {
             throw new Error('Unable to query for SeriesMetadata without StudyInstanceUID');
           }
@@ -1585,8 +1922,13 @@ function createDicomJSONApi(dicomJsonConfig) {
           const numberOfSeries = series.length;
           series.forEach((series, index) => {
             const instances = series.instances.map(instance => {
+              // for instance.metadata if the key ends with sequence then
+              // we need to add a proxy to the first item in the sequence
+              // so that we can access the value of the sequence
+              // by using sequenceName.value
+              const modifiedMetadata = wrapSequences(instance.metadata);
               const obj = {
-                ...instance.metadata,
+                ...modifiedMetadata,
                 url: instance.url,
                 imageId: instance.url,
                 ...series,
@@ -1636,34 +1978,32 @@ function createDicomJSONApi(dicomJsonConfig) {
       });
       return imageIds;
     },
-    getImageIdsForInstance(_ref2) {
-      let {
-        instance,
-        frame
-      } = _ref2;
+    getImageIdsForInstance({
+      instance,
+      frame
+    }) {
       const imageIds = getImageId({
         instance,
         frame
       });
       return imageIds;
     },
-    getStudyInstanceUIDs: _ref3 => {
-      let {
-        params,
-        query
-      } = _ref3;
+    getStudyInstanceUIDs: ({
+      params,
+      query
+    }) => {
       const url = query.get('url');
       return _store.studyInstanceUIDMap.get(url);
     }
   };
-  return src/* IWebApiDataSource */.Is.create(implementation);
+  return src/* IWebApiDataSource */.pt.create(implementation);
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomLocalDataSource/index.js
 
 
 
-const DicomLocalDataSource_metadataProvider = src["default"].classes.MetadataProvider;
+const DicomLocalDataSource_metadataProvider = src/* default.classes */.Ay.classes.MetadataProvider;
 const {
   EVENTS
 } = src.DicomMetadataStore;
@@ -1672,8 +2012,7 @@ const END_MODALITIES = {
   SEG: true,
   DOC: true
 };
-const compareValue = function (v1, v2) {
-  let def = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+const compareValue = (v1, v2, def = 0) => {
   if (v1 === v2) {
     return def;
   }
@@ -1705,12 +2044,10 @@ function createDicomLocalApi(dicomLocalConfig) {
     name
   } = dicomLocalConfig;
   const implementation = {
-    initialize: _ref => {
-      let {
-        params,
-        query
-      } = _ref;
-    },
+    initialize: ({
+      params,
+      query
+    }) => {},
     query: {
       studies: {
         mapParams: () => {},
@@ -1789,11 +2126,10 @@ function createDicomLocalApi(dicomLocalConfig) {
         }
       },
       series: {
-        metadata: async function () {
-          let {
-            StudyInstanceUID,
-            madeInClient = false
-          } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        metadata: async ({
+          StudyInstanceUID,
+          madeInClient = false
+        } = {}) => {
           if (!StudyInstanceUID) {
             throw new Error('Unable to query for SeriesMetadata without StudyInstanceUID');
           }
@@ -1839,7 +2175,7 @@ function createDicomLocalApi(dicomLocalConfig) {
     },
     store: {
       dicom: naturalizedReport => {
-        const reportBlob = dcmjs_es["default"].data.datasetToBlob(naturalizedReport);
+        const reportBlob = dcmjs_es/* default.data */.Ay.data.datasetToBlob(naturalizedReport);
 
         //Create a URL for the binary.
         var objectUrl = URL.createObjectURL(reportBlob);
@@ -1872,11 +2208,10 @@ function createDicomLocalApi(dicomLocalConfig) {
       });
       return imageIds;
     },
-    getImageIdsForInstance(_ref2) {
-      let {
-        instance,
-        frame
-      } = _ref2;
+    getImageIdsForInstance({
+      instance,
+      frame
+    }) {
       const {
         StudyInstanceUID,
         SeriesInstanceUID,
@@ -1892,11 +2227,10 @@ function createDicomLocalApi(dicomLocalConfig) {
     deleteStudyMetadataPromise() {
       console.log('deleteStudyMetadataPromise not implemented');
     },
-    getStudyInstanceUIDs: _ref3 => {
-      let {
-        params,
-        query
-      } = _ref3;
+    getStudyInstanceUIDs: ({
+      params,
+      query
+    }) => {
       const {
         StudyInstanceUIDs: paramsStudyInstanceUIDs
       } = params;
@@ -1916,7 +2250,7 @@ function createDicomLocalApi(dicomLocalConfig) {
       return isStudyInCache ? StudyInstanceUIDsAsArray : [];
     }
   };
-  return src/* IWebApiDataSource */.Is.create(implementation);
+  return src/* IWebApiDataSource */.pt.create(implementation);
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebProxyDataSource/index.js
@@ -1931,17 +2265,16 @@ function createDicomLocalApi(dicomLocalConfig) {
  * dicomWeb configuration array
  *
  */
-function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService) {
+function createDicomWebProxyApi(dicomWebProxyConfig, servicesManager) {
   const {
     name
   } = dicomWebProxyConfig;
   let dicomWebDelegate = undefined;
   const implementation = {
-    initialize: async _ref => {
-      let {
-        params,
-        query
-      } = _ref;
+    initialize: async ({
+      params,
+      query
+    }) => {
       const url = query.get('url');
       if (!url) {
         throw new Error(`No url for '${name}'`);
@@ -1951,7 +2284,7 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
         if (!data.servers?.dicomWeb?.[0]) {
           throw new Error('Invalid configuration returned by url');
         }
-        dicomWebDelegate = createDicomWebApi(data.servers.dicomWeb[0].configuration, UserAuthenticationService);
+        dicomWebDelegate = createDicomWebApi(data.servers.dicomWeb[0].configuration, servicesManager);
         dicomWebDelegate.initialize({
           params,
           query
@@ -1963,43 +2296,28 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
         search: params => dicomWebDelegate.query.studies.search(params)
       },
       series: {
-        search: function () {
-          return dicomWebDelegate.query.series.search(...arguments);
-        }
+        search: (...args) => dicomWebDelegate.query.series.search(...args)
       },
       instances: {
         search: (studyInstanceUid, queryParameters) => dicomWebDelegate.query.instances.search(studyInstanceUid, queryParameters)
       }
     },
     retrieve: {
-      directURL: function () {
-        return dicomWebDelegate.retrieve.directURL(...arguments);
-      },
+      directURL: (...args) => dicomWebDelegate.retrieve.directURL(...args),
       series: {
-        metadata: async function () {
-          return dicomWebDelegate.retrieve.series.metadata(...arguments);
-        }
+        metadata: async (...args) => dicomWebDelegate.retrieve.series.metadata(...args)
       }
     },
     store: {
-      dicom: function () {
-        return dicomWebDelegate.store(...arguments);
-      }
-    },
-    deleteStudyMetadataPromise: function () {
-      return dicomWebDelegate.deleteStudyMetadataPromise(...arguments);
-    },
-    getImageIdsForDisplaySet: function () {
-      return dicomWebDelegate.getImageIdsForDisplaySet(...arguments);
+      dicom: (...args) => dicomWebDelegate.store(...args)
     },
-    getImageIdsForInstance: function () {
-      return dicomWebDelegate.getImageIdsForInstance(...arguments);
-    },
-    getStudyInstanceUIDs(_ref2) {
-      let {
-        params,
-        query
-      } = _ref2;
+    deleteStudyMetadataPromise: (...args) => dicomWebDelegate.deleteStudyMetadataPromise(...args),
+    getImageIdsForDisplaySet: (...args) => dicomWebDelegate.getImageIdsForDisplaySet(...args),
+    getImageIdsForInstance: (...args) => dicomWebDelegate.getImageIdsForInstance(...args),
+    getStudyInstanceUIDs({
+      params,
+      query
+    }) {
       let studyInstanceUIDs = [];
 
       // there seem to be a couple of variations of the case for this parameter
@@ -2011,7 +2329,278 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
       return studyInstanceUIDs;
     }
   };
-  return src/* IWebApiDataSource */.Is.create(implementation);
+  return src/* IWebApiDataSource */.pt.create(implementation);
+}
+
+// EXTERNAL MODULE: ../../../node_modules/lodash/lodash.js
+var lodash = __webpack_require__(5517);
+;// CONCATENATED MODULE: ../../../extensions/default/src/MergeDataSource/index.ts
+
+
+const mergeMap = {
+  'query.studies.search': {
+    mergeKey: 'studyInstanceUid',
+    tagFunc: x => x
+  },
+  'query.series.search': {
+    mergeKey: 'seriesInstanceUid',
+    tagFunc: (series, sourceName) => {
+      series.forEach(series => {
+        series.RetrieveAETitle = sourceName;
+        src.DicomMetadataStore.updateSeriesMetadata(series);
+      });
+      return series;
+    }
+  }
+};
+
+/**
+ * Calls all data sources asynchronously and merges the results.
+ * @param {CallForAllDataSourcesAsyncOptions} options - The options for calling all data sources.
+ * @param {string} options.path - The path to the function to be called on each data source.
+ * @param {unknown[]} options.args - The arguments to be passed to the function.
+ * @param {ExtensionManager} options.extensionManager - The extension manager.
+ * @param {string[]} options.dataSourceNames - The names of the data sources to be called.
+ * @param {string} options.defaultDataSourceName - The name of the default data source.
+ * @returns {Promise<unknown[]>} - A promise that resolves to the merged data from all data sources.
+ */
+const callForAllDataSourcesAsync = async ({
+  mergeMap,
+  path,
+  args,
+  extensionManager,
+  dataSourceNames,
+  defaultDataSourceName
+}) => {
+  const {
+    mergeKey,
+    tagFunc
+  } = mergeMap[path] || {
+    tagFunc: x => x
+  };
+
+  /** Sort by default data source */
+  const defs = Object.values(extensionManager.dataSourceDefs);
+  const defaultDataSourceDef = defs.find(def => def.sourceName === defaultDataSourceName);
+  const dataSourceDefs = defs.filter(def => def.sourceName !== defaultDataSourceName);
+  if (defaultDataSourceDef) {
+    dataSourceDefs.unshift(defaultDataSourceDef);
+  }
+  const promises = [];
+  const sourceNames = [];
+  for (const dataSourceDef of dataSourceDefs) {
+    const {
+      configuration,
+      sourceName
+    } = dataSourceDef;
+    if (!!configuration && dataSourceNames.includes(sourceName)) {
+      const [dataSource] = extensionManager.getDataSources(sourceName);
+      const func = (0,lodash.get)(dataSource, path);
+      const promise = func.apply(dataSource, args);
+      promises.push(promise);
+      sourceNames.push(sourceName);
+    }
+  }
+  const data = await Promise.allSettled(promises);
+  const mergedData = data.map((data, i) => tagFunc(data.value, sourceNames[i]));
+  let results = [];
+  if (mergeKey) {
+    results = (0,lodash.uniqBy)(mergedData.flat(), obj => (0,lodash.get)(obj, mergeKey));
+  } else {
+    results = mergedData.flat();
+  }
+  return results;
+};
+
+/**
+ * Calls all data sources that match the provided names and merges their data.
+ * @param options - The options for calling all data sources.
+ * @param options.path - The path to the function to be called on each data source.
+ * @param options.args - The arguments to be passed to the function.
+ * @param options.extensionManager - The extension manager instance.
+ * @param options.dataSourceNames - The names of the data sources to be called.
+ * @param options.defaultDataSourceName - The name of the default data source.
+ * @returns The merged data from all the matching data sources.
+ */
+const callForAllDataSources = ({
+  path,
+  args,
+  extensionManager,
+  dataSourceNames,
+  defaultDataSourceName
+}) => {
+  /** Sort by default data source */
+  const defs = Object.values(extensionManager.dataSourceDefs);
+  const defaultDataSourceDef = defs.find(def => def.sourceName === defaultDataSourceName);
+  const dataSourceDefs = defs.filter(def => def.sourceName !== defaultDataSourceName);
+  if (defaultDataSourceDef) {
+    dataSourceDefs.unshift(defaultDataSourceDef);
+  }
+  const mergedData = [];
+  for (const dataSourceDef of dataSourceDefs) {
+    const {
+      configuration,
+      sourceName
+    } = dataSourceDef;
+    if (!!configuration && dataSourceNames.includes(sourceName)) {
+      const [dataSource] = extensionManager.getDataSources(sourceName);
+      const func = (0,lodash.get)(dataSource, path);
+      const data = func.apply(dataSource, args);
+      mergedData.push(data);
+    }
+  }
+  return mergedData.flat();
+};
+
+/**
+ * Calls the default data source function specified by the given path with the provided arguments.
+ * @param {CallForDefaultDataSourceOptions} options - The options for calling the default data source.
+ * @param {string} options.path - The path to the function within the default data source.
+ * @param {unknown[]} options.args - The arguments to pass to the function.
+ * @param {string} options.defaultDataSourceName - The name of the default data source.
+ * @param {ExtensionManager} options.extensionManager - The extension manager instance.
+ * @returns {unknown} - The result of calling the default data source function.
+ */
+const callForDefaultDataSource = ({
+  path,
+  args,
+  defaultDataSourceName,
+  extensionManager
+}) => {
+  const [dataSource] = extensionManager.getDataSources(defaultDataSourceName);
+  const func = (0,lodash.get)(dataSource, path);
+  return func.apply(dataSource, args);
+};
+
+/**
+ * Calls the data source specified by the RetrieveAETitle of the given display set.
+ * @typedef {Object} CallByRetrieveAETitleOptions
+ * @property {string} path - The path of the method to call on the data source.
+ * @property {any[]} args - The arguments to pass to the method.
+ * @property {string} defaultDataSourceName - The name of the default data source.
+ * @property {ExtensionManager} extensionManager - The extension manager.
+ */
+const callByRetrieveAETitle = ({
+  path,
+  args,
+  defaultDataSourceName,
+  extensionManager
+}) => {
+  const [displaySet] = args;
+  const seriesMetadata = src.DicomMetadataStore.getSeries(displaySet.StudyInstanceUID, displaySet.SeriesInstanceUID);
+  const [dataSource] = extensionManager.getDataSources(seriesMetadata.RetrieveAETitle || defaultDataSourceName);
+  return dataSource[path](...args);
+};
+function createMergeDataSourceApi(mergeConfig, servicesManager, extensionManager) {
+  const {
+    seriesMerge
+  } = mergeConfig;
+  const {
+    dataSourceNames,
+    defaultDataSourceName
+  } = seriesMerge;
+  const implementation = {
+    initialize: (...args) => callForAllDataSources({
+      path: 'initialize',
+      args,
+      extensionManager,
+      dataSourceNames,
+      defaultDataSourceName
+    }),
+    query: {
+      studies: {
+        search: (...args) => callForAllDataSourcesAsync({
+          mergeMap,
+          path: 'query.studies.search',
+          args,
+          extensionManager,
+          dataSourceNames,
+          defaultDataSourceName
+        })
+      },
+      series: {
+        search: (...args) => callForAllDataSourcesAsync({
+          mergeMap,
+          path: 'query.series.search',
+          args,
+          extensionManager,
+          dataSourceNames,
+          defaultDataSourceName
+        })
+      },
+      instances: {
+        search: (...args) => callForAllDataSourcesAsync({
+          mergeMap,
+          path: 'query.instances.search',
+          args,
+          extensionManager,
+          dataSourceNames,
+          defaultDataSourceName
+        })
+      }
+    },
+    retrieve: {
+      bulkDataURI: (...args) => callForAllDataSourcesAsync({
+        mergeMap,
+        path: 'retrieve.bulkDataURI',
+        args,
+        extensionManager,
+        dataSourceNames,
+        defaultDataSourceName
+      }),
+      directURL: (...args) => callForDefaultDataSource({
+        path: 'retrieve.directURL',
+        args,
+        defaultDataSourceName,
+        extensionManager
+      }),
+      series: {
+        metadata: (...args) => callForAllDataSourcesAsync({
+          mergeMap,
+          path: 'retrieve.series.metadata',
+          args,
+          extensionManager,
+          dataSourceNames,
+          defaultDataSourceName
+        })
+      }
+    },
+    store: {
+      dicom: (...args) => callForDefaultDataSource({
+        path: 'store.dicom',
+        args,
+        defaultDataSourceName,
+        extensionManager
+      })
+    },
+    deleteStudyMetadataPromise: (...args) => callForAllDataSources({
+      path: 'deleteStudyMetadataPromise',
+      args,
+      extensionManager,
+      dataSourceNames,
+      defaultDataSourceName
+    }),
+    getImageIdsForDisplaySet: (...args) => callByRetrieveAETitle({
+      path: 'getImageIdsForDisplaySet',
+      args,
+      defaultDataSourceName,
+      extensionManager
+    }),
+    getImageIdsForInstance: (...args) => callByRetrieveAETitle({
+      path: 'getImageIdsForDisplaySet',
+      args,
+      defaultDataSourceName,
+      extensionManager
+    }),
+    getStudyInstanceUIDs: (...args) => callForAllDataSources({
+      path: 'getStudyInstanceUIDs',
+      args,
+      extensionManager,
+      dataSourceNames,
+      defaultDataSourceName
+    })
+  };
+  return src/* IWebApiDataSource */.pt.create(implementation);
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getDataSourcesModule.js
@@ -2024,6 +2613,7 @@ function createDicomWebProxyApi(dicomWebProxyConfig, UserAuthenticationService)
 
 
 
+
 /**
  *
  */
@@ -2044,77 +2634,66 @@ function getDataSourcesModule() {
     name: 'dicomlocal',
     type: 'localApi',
     createDataSource: createDicomLocalApi
+  }, {
+    name: 'merge',
+    type: 'mergeApi',
+    createDataSource: createMergeDataSourceApi
   }];
 }
 /* harmony default export */ const src_getDataSourcesModule = (getDataSourcesModule);
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(43001);
+var react = __webpack_require__(41766);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(3827);
+var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 486 modules
-var ui_src = __webpack_require__(22582);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var ui_src = __webpack_require__(5085);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
-var state = __webpack_require__(62657);
+var state = __webpack_require__(15575);
 // EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
-var dist = __webpack_require__(62474);
+var dist = __webpack_require__(37396);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var es = __webpack_require__(69190);
+var es = __webpack_require__(80619);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
-var react_router_dist = __webpack_require__(85066);
-// EXTERNAL MODULE: ../../i18n/src/index.js + 132 modules
-var i18n_src = __webpack_require__(45964);
-// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
-var classnames = __webpack_require__(44921);
-var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+var react_router_dist = __webpack_require__(10971);
+// EXTERNAL MODULE: ../../i18n/src/index.js + 150 modules
+var i18n_src = __webpack_require__(912);
 ;// 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); }
 
 
-
-function Toolbar(_ref) {
-  let {
-    servicesManager
-  } = _ref;
+function Toolbar({
+  servicesManager,
+  buttonSection = 'primary'
+}) {
   const {
-    toolbarService
-  } = servicesManager.services;
-  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
-  const [toolbarButtons, setToolbarButtons] = (0,react.useState)([]);
-  (0,react.useEffect)(() => {
-    const updateToolbar = () => {
-      const toolGroupId = viewportGridService.getActiveViewportOptionByKey('toolGroupId') ?? 'default';
-      setToolbarButtons(toolbarService.getButtonSection(toolGroupId));
-    };
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, updateToolbar);
-    updateToolbar();
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService, viewportGrid]);
-  const onInteraction = (0,react.useCallback)(args => toolbarService.recordInteraction(args), [toolbarService]);
+    toolbarButtons,
+    onInteraction
+  } = (0,src/* useToolbar */.tR)({
+    servicesManager,
+    buttonSection
+  });
+  if (!toolbarButtons.length) {
+    return null;
+  }
   return /*#__PURE__*/react.createElement(react.Fragment, null, toolbarButtons.map(toolDef => {
+    if (!toolDef) {
+      return null;
+    }
     const {
       id,
       Component,
       componentProps
     } = toolDef;
-    return (
-      /*#__PURE__*/
-      // The margin for separating the tools on the toolbar should go here and NOT in each individual component (button) item.
-      // This allows for the individual items to be included in other UI components where perhaps alternative margins are desired.
-      react.createElement("div", {
-        key: id,
-        className: classnames_default()('mr-1')
-      }, /*#__PURE__*/react.createElement(Component, _extends({
-        id: id
-      }, componentProps, {
-        onInteraction: onInteraction,
-        servicesManager: servicesManager
-      })))
-    );
+    const tool = /*#__PURE__*/react.createElement(Component, _extends({
+      key: id,
+      id: id,
+      onInteraction: onInteraction,
+      servicesManager: servicesManager
+    }, componentProps));
+    return /*#__PURE__*/react.createElement("div", {
+      key: id
+    }, tool);
   }));
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/ViewerHeader.tsx
@@ -2126,21 +2705,19 @@ function Toolbar(_ref) {
 
 
 
-
 const {
   availableLanguages,
   defaultLanguage,
   currentLanguage
-} = i18n_src["default"];
-function ViewerHeader(_ref) {
-  let {
-    hotkeysManager,
-    extensionManager,
-    servicesManager
-  } = _ref;
-  const [appConfig] = (0,state/* useAppConfig */.M)();
-  const navigate = (0,dist/* useNavigate */.s0)();
-  const location = (0,react_router_dist/* useLocation */.TH)();
+} = i18n_src/* default */.A;
+function ViewerHeader({
+  hotkeysManager,
+  extensionManager,
+  servicesManager,
+  appConfig
+}) {
+  const navigate = (0,dist/* useNavigate */.Zp)();
+  const location = (0,react_router_dist/* useLocation */.zy)();
   const onClickReturnButton = () => {
     const {
       pathname
@@ -2164,34 +2741,35 @@ function ViewerHeader(_ref) {
   };
   const {
     t
-  } = (0,es/* useTranslation */.$G)();
+  } = (0,es/* useTranslation */.Bd)();
   const {
     show,
     hide
-  } = (0,ui_src/* useModal */.dd)();
+  } = (0,ui_src/* useModal */.hS)();
   const {
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.8.0-beta.8";
-  const commitHash = "330e11c7ff0151e1096e19b8ffdae7d64cae280e";
+  const versionNumber = "3.8.0-beta.80";
+  const commitHash = "e80fc6f47708e1d6b1a1e1de438196a4b74ec637";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
     onClick: () => show({
-      content: ui_src/* AboutModal */.tk,
+      content: ui_src/* AboutModal */.VT,
       title: t('AboutModal:About OHIF Viewer'),
       contentProps: {
         versionNumber,
         commitHash
-      }
+      },
+      containerDimensions: 'max-w-4xl max-h-4xl'
     })
   }, {
     title: t('Header:Preferences'),
     icon: 'settings',
     onClick: () => show({
       title: t('UserPreferencesModal:User preferences'),
-      content: ui_src/* UserPreferences */.i1,
+      content: ui_src/* UserPreferences */.im,
       contentProps: {
         hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
         hotkeyDefinitions,
@@ -2199,23 +2777,22 @@ function ViewerHeader(_ref) {
         availableLanguages,
         defaultLanguage,
         onCancel: () => {
-          src/* hotkeys */.dD.stopRecord();
-          src/* hotkeys */.dD.unpause();
+          src/* hotkeys */.ot.stopRecord();
+          src/* hotkeys */.ot.unpause();
           hide();
         },
-        onSubmit: _ref2 => {
-          let {
-            hotkeyDefinitions,
-            language
-          } = _ref2;
+        onSubmit: ({
+          hotkeyDefinitions,
+          language
+        }) => {
           if (language.value !== currentLanguage().value) {
-            i18n_src["default"].changeLanguage(language.value);
+            i18n_src/* default */.A.changeLanguage(language.value);
           }
           hotkeysManager.setHotkeys(hotkeyDefinitions);
           hide();
         },
         onReset: () => hotkeysManager.restoreDefaultBindings(),
-        hotkeysModule: src/* hotkeys */.dD
+        hotkeysModule: src/* hotkeys */.ot
       }
     })
   }];
@@ -2228,61 +2805,93 @@ function ViewerHeader(_ref) {
       }
     });
   }
-  return /*#__PURE__*/react.createElement(ui_src/* Header */.h4, {
+  return /*#__PURE__*/react.createElement(ui_src/* Header */.Y9, {
     menuOptions: menuOptions,
     isReturnEnabled: !!appConfig.showStudyList,
     onClickReturnButton: onClickReturnButton,
-    WhiteLabeling: appConfig.whiteLabeling
-  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
+    WhiteLabeling: appConfig.whiteLabeling,
+    showPatientInfo: appConfig.showPatientInfo,
+    servicesManager: servicesManager,
+    Secondary: /*#__PURE__*/react.createElement(Toolbar, {
+      servicesManager: servicesManager,
+      buttonSection: "secondary"
+    }),
+    appConfig: appConfig
+  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Primary Toolbar"
   }, /*#__PURE__*/react.createElement("div", {
-    className: "relative flex justify-center"
+    className: "relative flex justify-center gap-[4px]"
   }, /*#__PURE__*/react.createElement(Toolbar, {
     servicesManager: servicesManager
   }))));
 }
 /* harmony default export */ const ViewerLayout_ViewerHeader = (ViewerHeader);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Components/SidePanelWithServices.tsx
+function SidePanelWithServices_extends() { SidePanelWithServices_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 SidePanelWithServices_extends.apply(this, arguments); }
 
 
-const SidePanelWithServices = _ref => {
-  let {
-    servicesManager,
-    side,
-    className,
-    activeTabIndex: activeTabIndexProp,
-    tabs
-  } = _ref;
+const SidePanelWithServices = ({
+  servicesManager,
+  side,
+  activeTabIndex: activeTabIndexProp,
+  tabs: tabsProp,
+  expandedWidth,
+  ...props
+}) => {
   const panelService = servicesManager?.services?.panelService;
 
   // Tracks whether this SidePanel has been opened at least once since this SidePanel was inserted into the DOM.
   // Thus going to the Study List page and back to the viewer resets this flag for a SidePanel.
   const [hasBeenOpened, setHasBeenOpened] = (0,react.useState)(false);
   const [activeTabIndex, setActiveTabIndex] = (0,react.useState)(activeTabIndexProp);
+  const [tabs, setTabs] = (0,react.useState)(tabsProp ?? panelService.getPanels(side));
+  const handleSidePanelOpen = (0,react.useCallback)(() => {
+    setHasBeenOpened(true);
+  }, []);
+  const handleActiveTabIndexChange = (0,react.useCallback)(({
+    activeTabIndex
+  }) => {
+    setActiveTabIndex(activeTabIndex);
+  }, []);
+
+  /** update the active tab index from outside */
   (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);
-          }
+    setActiveTabIndex(activeTabIndexProp);
+  }, [activeTabIndexProp]);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = panelService.subscribe(panelService.EVENTS.PANELS_CHANGED, panelChangedEvent => {
+      if (panelChangedEvent.position !== side) {
+        return;
+      }
+      setTabs(panelService.getPanels(side));
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [panelService, side]);
+  (0,react.useEffect)(() => {
+    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();
-      };
-    }
+      }
+    });
+    return () => {
+      activatePanelSubscription.unsubscribe();
+    };
   }, [tabs, hasBeenOpened, panelService]);
-  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.hs, {
+  return /*#__PURE__*/react.createElement(ui_src/* SidePanel */.wv, SidePanelWithServices_extends({}, props, {
     side: side,
-    className: className,
-    activeTabIndex: activeTabIndex,
     tabs: tabs,
-    onOpen: () => {
-      setHasBeenOpened(true);
-    }
-  });
+    activeTabIndex: activeTabIndex,
+    onOpen: handleSidePanelOpen,
+    onActiveTabIndexChange: handleActiveTabIndexChange,
+    expandedWidth: expandedWidth
+  }));
 };
 /* harmony default export */ const Components_SidePanelWithServices = (SidePanelWithServices);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/ViewerLayout/index.tsx
@@ -2293,26 +2902,29 @@ const SidePanelWithServices = _ref => {
 
 
 
-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)();
+function ViewerLayout({
+  // From Extension Module Params
+  extensionManager,
+  servicesManager,
+  hotkeysManager,
+  commandsManager,
+  // From Modes
+  viewports,
+  ViewportGridComp,
+  leftPanelClosed = false,
+  rightPanelClosed = false
+}) {
+  const [appConfig] = (0,state/* useAppConfig */.r)();
   const {
+    panelService,
     hangingProtocolService
   } = servicesManager.services;
   const [showLoadingIndicator, setShowLoadingIndicator] = (0,react.useState)(appConfig.showLoadingIndicator);
+  const hasPanels = (0,react.useCallback)(side => !!panelService.getPanels(side).length, [panelService]);
+  const [hasRightPanels, setHasRightPanels] = (0,react.useState)(hasPanels('right'));
+  const [hasLeftPanels, setHasLeftPanels] = (0,react.useState)(hasPanels('left'));
+  const [leftPanelClosedState, setLeftPanelClosed] = (0,react.useState)(leftPanelClosed);
+  const [rightPanelClosedState, setRightPanelClosed] = (0,react.useState)(rightPanelClosed);
 
   /**
    * Set body classes (tailwindcss) that don't allow vertical
@@ -2329,38 +2941,18 @@ function ViewerLayout(_ref) {
   }, []);
   const getComponent = id => {
     const entry = extensionManager.getModuleEntry(id);
-    if (!entry) {
-      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) {
-      content = entry.component;
-    } else {
-      throw new Error(`No component found from extension ${id}. Check the reference string to the extension in your Mode configuration`);
+    if (!entry || !entry.component) {
+      throw new Error(`${id} is not valid for an extension module or no component found from extension ${id}. 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). Check the reference string to the extension in your Mode configuration`);
     }
     return {
       entry,
-      content
-    };
-  };
-  const getPanelData = id => {
-    const {
-      content,
-      entry
-    } = getComponent(id);
-    return {
-      id: entry.id,
-      iconName: entry.iconName,
-      iconLabel: entry.iconLabel,
-      label: entry.label,
-      name: entry.name,
-      content
+      content: entry.component
     };
   };
   (0,react.useEffect)(() => {
     const {
       unsubscribe
-    } = hangingProtocolService.subscribe(src/* HangingProtocolService */.hy.EVENTS.PROTOCOL_CHANGED,
+    } = hangingProtocolService.subscribe(src/* HangingProtocolService */.Qe.EVENTS.PROTOCOL_CHANGED,
     // Todo: right now to set the loading indicator to false, we need to wait for the
     // hangingProtocolService to finish applying the viewport matching to each viewport,
     // however, this might not be the only approach to set the loading indicator to false. we need to explore this further.
@@ -2380,58 +2972,76 @@ function ViewerLayout(_ref) {
       displaySetsToDisplay: viewportComponent.displaySetsToDisplay
     };
   };
-  const leftPanelComponents = leftPanels.map(getPanelData);
-  const rightPanelComponents = rightPanels.map(getPanelData);
+  (0,react.useEffect)(() => {
+    const {
+      unsubscribe
+    } = panelService.subscribe(panelService.EVENTS.PANELS_CHANGED, ({
+      options
+    }) => {
+      setHasLeftPanels(hasPanels('left'));
+      setHasRightPanels(hasPanels('right'));
+      if (options?.leftPanelClosed !== undefined) {
+        setLeftPanelClosed(options.leftPanelClosed);
+      }
+      if (options?.rightPanelClosed !== undefined) {
+        setRightPanelClosed(options.rightPanelClosed);
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [panelService, hasPanels]);
   const viewportComponents = viewports.map(getViewportComponentData);
   return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(ViewerLayout_ViewerHeader, {
     hotkeysManager: hotkeysManager,
     extensionManager: extensionManager,
-    servicesManager: servicesManager
+    servicesManager: servicesManager,
+    appConfig: appConfig
   }), /*#__PURE__*/react.createElement("div", {
     className: "relative flex w-full flex-row flex-nowrap items-stretch overflow-hidden bg-black",
     style: {
       height: 'calc(100vh - 52px'
     }
-  }, /*#__PURE__*/react.createElement(react.Fragment, null, showLoadingIndicator && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.LE, {
+  }, /*#__PURE__*/react.createElement(react.Fragment, null, showLoadingIndicator && /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.Jx, {
     className: "h-full w-full bg-black"
-  }), leftPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
+  }), hasLeftPanels ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Left Panel"
   }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "left",
-    activeTabIndex: leftPanelDefaultClosed ? null : 0,
-    tabs: leftPanelComponents,
+    activeTabIndex: leftPanelClosedState ? null : 0,
     servicesManager: servicesManager
   })) : null, /*#__PURE__*/react.createElement("div", {
     className: "flex h-full flex-1 flex-col"
   }, /*#__PURE__*/react.createElement("div", {
     className: "relative flex h-full flex-1 items-center justify-center overflow-hidden bg-black"
-  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
+  }, /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Grid"
   }, /*#__PURE__*/react.createElement(ViewportGridComp, {
     servicesManager: servicesManager,
     viewportComponents: viewportComponents,
     commandsManager: commandsManager
-  })))), rightPanelComponents.length ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.SV, {
+  })))), hasRightPanels ? /*#__PURE__*/react.createElement(ui_src/* ErrorBoundary */.tH, {
     context: "Right Panel"
   }, /*#__PURE__*/react.createElement(Components_SidePanelWithServices, {
     side: "right",
-    activeTabIndex: rightPanelDefaultClosed ? null : 0,
-    tabs: rightPanelComponents,
+    activeTabIndex: rightPanelClosedState ? null : 0,
     servicesManager: servicesManager
-  })) : null)));
+  })) : null)), /*#__PURE__*/react.createElement(ui_src/* InvestigationalUseDialog */.j, {
+    dialogConfiguration: appConfig?.investigationalUseDialog
+  }));
 }
 ViewerLayout.propTypes = {
   // From extension module params
   extensionManager: prop_types_default().shape({
     getModuleEntry: (prop_types_default()).func.isRequired
   }).isRequired,
-  commandsManager: prop_types_default().instanceOf(src/* CommandsManager */.HQ),
-  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.Xw),
+  commandsManager: prop_types_default().instanceOf(src/* CommandsManager */.Sp),
+  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.CS),
   // From modes
   leftPanels: (prop_types_default()).array,
   rightPanels: (prop_types_default()).array,
-  leftPanelDefaultClosed: (prop_types_default()).bool.isRequired,
-  rightPanelDefaultClosed: (prop_types_default()).bool.isRequired,
+  leftPanelClosed: (prop_types_default()).bool.isRequired,
+  rightPanelClosed: (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,
   viewports: (prop_types_default()).array
@@ -2445,13 +3055,12 @@ ViewerLayout.propTypes = {
 - Init layout based on the displaySets and the objects.
 */
 
-/* harmony default export */ function getLayoutTemplateModule(_ref) {
-  let {
-    servicesManager,
-    extensionManager,
-    commandsManager,
-    hotkeysManager
-  } = _ref;
+/* harmony default export */ function getLayoutTemplateModule({
+  servicesManager,
+  extensionManager,
+  commandsManager,
+  hotkeysManager
+}) {
   function ViewerLayoutWithServices(props) {
     return src_ViewerLayout({
       servicesManager,
@@ -2485,31 +3094,30 @@ const {
  *
  * @param {*} param0
  */
-function PanelStudyBrowser(_ref) {
-  let {
-    servicesManager,
-    getImageSrc,
-    getStudiesForPatientByMRN,
-    requestDisplaySetCreationForStudy,
-    dataSource
-  } = _ref;
+function PanelStudyBrowser({
+  servicesManager,
+  getImageSrc,
+  getStudiesForPatientByMRN,
+  requestDisplaySetCreationForStudy,
+  dataSource
+}) {
   const {
     hangingProtocolService,
     displaySetService,
     uiNotificationService
   } = servicesManager.services;
-  const navigate = (0,dist/* useNavigate */.s0)();
+  const navigate = (0,dist/* useNavigate */.Zp)();
 
   // 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
   const {
     StudyInstanceUIDs
-  } = (0,ui_src/* useImageViewer */.zG)();
+  } = (0,ui_src/* useImageViewer */.Bz)();
   const [{
     activeViewportId,
     viewports
-  }, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
+  }, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
   const [activeTabName, setActiveTabName] = (0,react.useState)('primary');
   const [expandedStudyInstanceUIDs, setExpandedStudyInstanceUIDs] = (0,react.useState)([...StudyInstanceUIDs]);
   const [studyDisplayList, setStudyDisplayList] = (0,react.useState)([]);
@@ -2675,7 +3283,7 @@ function PanelStudyBrowser(_ref) {
     }
   }
   const activeDisplaySetInstanceUIDs = viewports.get(activeViewportId)?.displaySetInstanceUIDs;
-  return /*#__PURE__*/react.createElement(ui_src/* StudyBrowser */.eX, {
+  return /*#__PURE__*/react.createElement(ui_src/* StudyBrowser */.M4, {
     tabs: tabs,
     servicesManager: servicesManager,
     activeTabName: activeTabName,
@@ -2745,7 +3353,6 @@ function _mapDisplaySets(displaySets, thumbnailImageSrcMap) {
         displaySetInstanceUID: ds.displaySetInstanceUID
         // .. Any other data to pass
       },
-
       isHydratedForDerivedDisplaySet: ds.isHydrated
     });
   });
@@ -2812,6 +3419,11 @@ function _createStudyBrowserTabs(primaryStudyInstanceUIDs, studyDisplayList, dis
 function getImageSrcFromImageId(cornerstone, imageId) {
   return new Promise((resolve, reject) => {
     const canvas = document.createElement('canvas');
+    // Note: the default width and height of the canvas is 300x150
+    // but we need to set the width and height to the same number since
+    // the thumbnails are usually square and we want to maintain the aspect ratio
+    canvas.width = 128 / window.devicePixelRatio;
+    canvas.height = 128 / window.devicePixelRatio;
     cornerstone.utilities.loadImageToCanvas({
       canvas,
       imageId
@@ -2860,17 +3472,16 @@ function requestDisplaySetCreationForStudy(dataSource, displaySetService, StudyI
  * @param {object} commandsManager
  * @param {object} extensionManager
  */
-function WrappedPanelStudyBrowser(_ref) {
-  let {
-    commandsManager,
-    extensionManager,
-    servicesManager
-  } = _ref;
+function WrappedPanelStudyBrowser({
+  commandsManager,
+  extensionManager,
+  servicesManager
+}) {
   // TODO: This should be made available a different way; route should have
   // already determined our datasource
   const dataSource = extensionManager.getDataSources()[0];
   const _getStudiesForPatientByMRN = Panels_getStudiesForPatientByMRN.bind(null, dataSource);
-  const _getImageSrcFromImageId = _createGetImageSrcFromImageIdFn(extensionManager);
+  const _getImageSrcFromImageId = (0,react.useCallback)(_createGetImageSrcFromImageIdFn(extensionManager), []);
   const _requestDisplaySetCreationForStudy = Panels_requestDisplaySetCreationForStudy.bind(null, dataSource);
   return /*#__PURE__*/react.createElement(Panels_PanelStudyBrowser, {
     servicesManager: servicesManager,
@@ -2907,41 +3518,8 @@ WrappedPanelStudyBrowser.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired
 };
 /* harmony default export */ const Panels_WrappedPanelStudyBrowser = (WrappedPanelStudyBrowser);
-;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/ActionButtons.tsx
-
-
-
-
-function ActionButtons(_ref) {
-  let {
-    onExportClick,
-    onCreateReportClick
-  } = _ref;
-  const {
-    t
-  } = (0,es/* useTranslation */.$G)('MeasurementTable');
-  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, {
-    className: "px-2 py-2 text-base",
-    onClick: onExportClick
-  }, t('Export CSV')), /*#__PURE__*/react.createElement(ui_src/* LegacyButton */.mN, {
-    className: "px-2 py-2 text-base",
-    onClick: onCreateReportClick
-  }, t('Create Report'))));
-}
-ActionButtons.propTypes = {
-  onExportClick: (prop_types_default()).func,
-  onCreateReportClick: (prop_types_default()).func
-};
-ActionButtons.defaultProps = {
-  onExportClick: () => alert('Export'),
-  onCreateReportClick: () => alert('Create Report')
-};
-/* harmony default export */ const Panels_ActionButtons = (ActionButtons);
 // EXTERNAL MODULE: ../../../node_modules/lodash.debounce/index.js
-var lodash_debounce = __webpack_require__(8324);
+var lodash_debounce = __webpack_require__(14771);
 var lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(lodash_debounce);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/Panels/createReportDialogPrompt.tsx
 
@@ -2950,10 +3528,9 @@ const CREATE_REPORT_DIALOG_RESPONSE = {
   CANCEL: 0,
   CREATE_REPORT: 1
 };
-function CreateReportDialogPrompt(uiDialogService, _ref) {
-  let {
-    extensionManager
-  } = _ref;
+function CreateReportDialogPrompt(uiDialogService, {
+  extensionManager
+}) {
   return new Promise(function (resolve, reject) {
     let dialogId = undefined;
     const _handleClose = () => {
@@ -2974,11 +3551,10 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
      * @param {string} param0.action - value of action performed
      * @param {string} param0.value - value from input field
      */
-    const _handleFormSubmit = _ref2 => {
-      let {
-        action,
-        value
-      } = _ref2;
+    const _handleFormSubmit = ({
+      action,
+      value
+    }) => {
       uiDialogService.dismiss({
         id: dialogId
       });
@@ -3013,7 +3589,7 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
     dialogId = uiDialogService.create({
       centralize: true,
       isDraggable: false,
-      content: ui_src/* Dialog */.Vq,
+      content: ui_src/* Dialog */.lG,
       useLastPosition: false,
       showOverlay: true,
       contentProps: {
@@ -3027,19 +3603,18 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.primary
         }],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,
-        body: _ref3 => {
-          let {
-            value,
-            setValue
-          } = _ref3;
+        body: ({
+          value,
+          setValue
+        }) => {
           const onChangeHandler = event => {
             event.persist();
             setValue(value => ({
@@ -3060,7 +3635,7 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
           };
           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, {
+          }, "Data Source"), /*#__PURE__*/react.createElement(ui_src/* Select */.l6, {
             closeMenuOnSelect: true,
             className: "border-primary-main  mt-2 bg-black",
             options: dataSourcesOpts,
@@ -3075,7 +3650,7 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
             isClearable: false
           })), /*#__PURE__*/react.createElement("div", {
             className: "mt-3"
-          }, /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
+          }, /*#__PURE__*/react.createElement(ui_src/* Input */.pd, {
             autoFocus: true,
             label: "Enter the report name",
             labelClassName: "text-white text-[14px] leading-[1.2]",
@@ -3099,12 +3674,11 @@ function CreateReportDialogPrompt(uiDialogService, _ref) {
  *
  * @param {*} servicesManager
  */
-async function createReportAsync(_ref) {
-  let {
-    servicesManager,
-    getReport,
-    reportType = 'measurement'
-  } = _ref;
+async function createReportAsync({
+  servicesManager,
+  getReport,
+  reportType = 'measurement'
+}) {
   const {
     displaySetService,
     uiNotificationService,
@@ -3218,13 +3792,15 @@ function findSRWithSameSeriesDescription(SeriesDescription, displaySetService) {
 const {
   downloadCSVReport
 } = src.utils;
-function PanelMeasurementTable(_ref) {
-  let {
-    servicesManager,
-    commandsManager,
-    extensionManager
-  } = _ref;
-  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.O_)();
+function PanelMeasurementTable({
+  servicesManager,
+  commandsManager,
+  extensionManager
+}) {
+  const {
+    t
+  } = (0,es/* useTranslation */.Bd)('MeasurementTable');
+  const [viewportGrid, viewportGridService] = (0,ui_src/* useViewportGrid */.ih)();
   const {
     activeViewportId,
     viewports
@@ -3310,31 +3886,28 @@ function PanelMeasurementTable(_ref) {
       });
     }
   }
-  const jumpToImage = _ref2 => {
-    let {
-      uid,
-      isActive
-    } = _ref2;
+  const jumpToImage = ({
+    uid,
+    isActive
+  }) => {
     measurementService.jumpToMeasurement(viewportGrid.activeViewportId, uid);
     onMeasurementItemClickHandler({
       uid,
       isActive
     });
   };
-  const onMeasurementItemEditHandler = _ref3 => {
-    let {
-      uid,
-      isActive
-    } = _ref3;
+  const onMeasurementItemEditHandler = ({
+    uid,
+    isActive
+  }) => {
     const measurement = measurementService.getMeasurement(uid);
     //Todo: why we are jumping to image?
     // jumpToImage({ id, isActive });
 
-    const onSubmitHandler = _ref4 => {
-      let {
-        action,
-        value
-      } = _ref4;
+    const onSubmitHandler = ({
+      action,
+      value
+    }) => {
       switch (action.id) {
         case 'save':
           {
@@ -3353,18 +3926,17 @@ function PanelMeasurementTable(_ref) {
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* Dialog */.Vq,
+      content: ui_src/* Dialog */.lG,
       contentProps: {
         title: 'Annotation',
         noCloseButton: true,
         value: {
           label: measurement.label || ''
         },
-        body: _ref5 => {
-          let {
-            value,
-            setValue
-          } = _ref5;
+        body: ({
+          value,
+          setValue
+        }) => {
           const onChangeHandler = event => {
             event.persist();
             setValue(value => ({
@@ -3382,7 +3954,7 @@ function PanelMeasurementTable(_ref) {
               });
             }
           };
-          return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
+          return /*#__PURE__*/react.createElement(ui_src/* Input */.pd, {
             label: "Enter your annotation",
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
@@ -3397,21 +3969,20 @@ function PanelMeasurementTable(_ref) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.secondary
         }, {
           id: 'save',
           text: 'Save',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.primary
         }],
         onSubmit: onSubmitHandler
       }
     });
   };
-  const onMeasurementItemClickHandler = _ref6 => {
-    let {
-      uid,
-      isActive
-    } = _ref6;
+  const onMeasurementItemClickHandler = ({
+    uid,
+    isActive
+  }) => {
     if (!isActive) {
       const measurements = [...displayMeasurements];
       const measurement = measurements.find(m => m.uid === uid);
@@ -3423,22 +3994,27 @@ function PanelMeasurementTable(_ref) {
   return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
     className: "ohif-scrollbar overflow-y-auto overflow-x-hidden",
     "data-cy": 'measurements-panel'
-  }, /*#__PURE__*/react.createElement(ui_src/* MeasurementTable */.wt, {
-    title: "Measurements",
+  }, /*#__PURE__*/react.createElement(ui_src/* MeasurementTable */.V, {
+    title: t('Measurements'),
     servicesManager: servicesManager,
     data: displayMeasurements,
     onClick: jumpToImage,
     onEdit: onMeasurementItemEditHandler
   })), /*#__PURE__*/react.createElement("div", {
     className: "flex justify-center p-4"
-  }, /*#__PURE__*/react.createElement(Panels_ActionButtons, {
-    onExportClick: exportReport,
-    onClearMeasurementsClick: clearMeasurements,
-    onCreateReportClick: createReport
+  }, /*#__PURE__*/react.createElement(ui_src/* ActionButtons */.wr, {
+    t: t('MeasurementTable'),
+    actions: [{
+      label: 'Export',
+      onClick: exportReport
+    }, {
+      label: 'Create Report',
+      onClick: createReport
+    }]
   })));
 }
 PanelMeasurementTable.propTypes = {
-  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.Xw).isRequired
+  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.CS).isRequired
 };
 function _getMappedMeasurements(measurementService) {
   const measurements = measurementService.getMeasurements();
@@ -3495,21 +4071,23 @@ function _mapMeasurementToDisplay(measurement, index, types) {
 
 
 
+// EXTERNAL MODULE: ../../../node_modules/i18next/dist/esm/i18next.js
+var i18next = __webpack_require__(92344);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPanelModule.tsx
 
 
 
+
 // TODO:
 // - No loading UI exists yet
 // - cancel promises when component is destroyed
 // - show errors in UI for thumbnails if promise fails
 
-function getPanelModule(_ref) {
-  let {
-    commandsManager,
-    extensionManager,
-    servicesManager
-  } = _ref;
+function getPanelModule({
+  commandsManager,
+  extensionManager,
+  servicesManager
+}) {
   const wrappedMeasurementPanel = () => {
     return /*#__PURE__*/react.createElement(PanelMeasurementTable, {
       commandsManager: commandsManager,
@@ -3521,7 +4099,7 @@ function getPanelModule(_ref) {
     name: 'seriesList',
     iconName: 'tab-studies',
     iconLabel: 'Studies',
-    label: 'Studies',
+    label: i18next/* default */.A.t('SidePanel:Studies'),
     component: Panels_WrappedPanelStudyBrowser.bind(null, {
       commandsManager,
       extensionManager,
@@ -3531,28 +4109,28 @@ function getPanelModule(_ref) {
     name: 'measure',
     iconName: 'tab-linear',
     iconLabel: 'Measure',
-    label: 'Measurements',
-    secondaryLabel: 'Measurements',
+    label: i18next/* default */.A.t('SidePanel:Measurements'),
+    secondaryLabel: i18next/* default */.A.t('SidePanel:Measurements'),
     component: wrappedMeasurementPanel
   }];
 }
 /* harmony default export */ const src_getPanelModule = (getPanelModule);
 // EXTERNAL MODULE: ../../core/src/utils/isImage.js
-var isImage = __webpack_require__(11835);
+var isImage = __webpack_require__(8094);
 // EXTERNAL MODULE: ../../core/src/utils/sopClassDictionary.js
-var sopClassDictionary = __webpack_require__(24369);
+var sopClassDictionary = __webpack_require__(48085);
 // EXTERNAL MODULE: ../../core/src/classes/ImageSet.ts
-var ImageSet = __webpack_require__(13950);
+var ImageSet = __webpack_require__(14169);
 // EXTERNAL MODULE: ../../core/src/utils/isDisplaySetReconstructable.js
-var isDisplaySetReconstructable = __webpack_require__(89359);
+var isDisplaySetReconstructable = __webpack_require__(13835);
 ;// CONCATENATED MODULE: ../../../extensions/default/package.json
-const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-default"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-default"}');
 ;// CONCATENATED MODULE: ../../../extensions/default/src/id.js
 
-const id = package_namespaceObject.u2;
+const id = package_namespaceObject.UU;
 
 // EXTERNAL MODULE: ../../core/src/utils/sortInstancesByPosition.ts
-var sortInstancesByPosition = __webpack_require__(87425);
+var sortInstancesByPosition = __webpack_require__(44563);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/checkMultiframe.ts
 
 
@@ -3563,18 +4141,18 @@ var sortInstancesByPosition = __webpack_require__(87425);
  * @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/* hasPixelMeasurements */.Yt)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.MULTIFRAME_NO_PIXEL_MEASUREMENTS);
   }
-  if (!(0,isDisplaySetReconstructable/* hasOrientation */.sb)(multiFrameInstance)) {
-    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MULTIFRAME_NO_ORIENTATION);
+  if (!(0,isDisplaySetReconstructable/* hasOrientation */.VX)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.MULTIFRAME_NO_ORIENTATION);
   }
-  if (!(0,isDisplaySetReconstructable/* hasPosition */.kN)(multiFrameInstance)) {
-    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.MULTIFRAME_NO_POSITION_INFORMATION);
+  if (!(0,isDisplaySetReconstructable/* hasPosition */.sL)(multiFrameInstance)) {
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.MULTIFRAME_NO_POSITION_INFORMATION);
   }
 }
 // EXTERNAL MODULE: ../../core/src/utils/toNumber.js
-var toNumber = __webpack_require__(94972);
+var toNumber = __webpack_require__(58099);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImageDimensionsEqual.ts
 
 
@@ -3588,8 +4166,8 @@ function areAllImageDimensionsEqual(instances) {
     return false;
   }
   const firstImage = instances[0];
-  const firstImageRows = (0,toNumber/* default */.Z)(firstImage.Rows);
-  const firstImageColumns = (0,toNumber/* default */.Z)(firstImage.Columns);
+  const firstImageRows = (0,toNumber/* default */.A)(firstImage.Rows);
+  const firstImageColumns = (0,toNumber/* default */.A)(firstImage.Columns);
   for (let i = 1; i < instances.length; i++) {
     const instance = instances[i];
     const {
@@ -3615,7 +4193,7 @@ function areAllImageComponentsEqual(instances) {
     return false;
   }
   const firstImage = instances[0];
-  const firstImageSamplesPerPixel = (0,toNumber/* default */.Z)(firstImage.SamplesPerPixel);
+  const firstImageSamplesPerPixel = (0,toNumber/* default */.A)(firstImage.SamplesPerPixel);
   for (let i = 1; i < instances.length; i++) {
     const instance = instances[i];
     const {
@@ -3641,18 +4219,18 @@ function areAllImageOrientationsEqual(instances) {
     return false;
   }
   const firstImage = instances[0];
-  const firstImageOrientationPatient = (0,toNumber/* default */.Z)(firstImage.ImageOrientationPatient);
+  const firstImageOrientationPatient = (0,toNumber/* default */.A)(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)) {
+    const imageOrientationPatient = (0,toNumber/* default */.A)(instance.ImageOrientationPatient);
+    if (!(0,isDisplaySetReconstructable/* _isSameOrientation */.sW)(imageOrientationPatient, firstImageOrientationPatient)) {
       return false;
     }
   }
   return true;
 }
-// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
-var esm = __webpack_require__(45451);
+// EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
+var esm = __webpack_require__(44753);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/utils/calculateScanAxisNormal.ts
 
 
@@ -3662,9 +4240,9 @@ var esm = __webpack_require__(45451);
  * @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);
+  const rowCosineVec = esm/* vec3.fromValues */.eR.fromValues(imageOrientation[0], imageOrientation[1], imageOrientation[2]);
+  const colCosineVec = esm/* vec3.fromValues */.eR.fromValues(imageOrientation[3], imageOrientation[4], imageOrientation[5]);
+  return esm/* vec3.cross */.eR.cross(esm/* vec3.create */.eR.create(), rowCosineVec, colCosineVec);
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/utils/validations/areAllImagePositionsEqual.ts
 
@@ -3683,8 +4261,8 @@ function calculateScanAxisNormal(imageOrientation) {
 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;
+  const predictedPosition = esm/* vec3.scaleAndAdd */.eR.scaleAndAdd(esm/* vec3.create */.eR.create(), previousPosition, scanAxisNormal, averageSpacingBetweenFrames);
+  return esm/* vec3.distance */.eR.distance(actualPosition, predictedPosition) > averageSpacingBetweenFrames;
 }
 
 /**
@@ -3696,18 +4274,18 @@ function areAllImagePositionsEqual(instances) {
   if (!instances?.length) {
     return false;
   }
-  const firstImageOrientationPatient = (0,toNumber/* default */.Z)(instances[0].ImageOrientationPatient);
+  const firstImageOrientationPatient = (0,toNumber/* default */.A)(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);
+  const firstImagePositionPatient = (0,toNumber/* default */.A)(instances[0].ImagePositionPatient);
+  const lastIpp = (0,toNumber/* default */.A)(instances[instances.length - 1].ImagePositionPatient);
+  const averageSpacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.jj)(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);
+    const imagePositionPatient = (0,toNumber/* default */.A)(instance.ImagePositionPatient);
     if (_checkSeriesPositionShift(previousImagePositionPatient, imagePositionPatient, scanAxisNormal, averageSpacingBetweenFrames)) {
       return false;
     }
@@ -3728,29 +4306,29 @@ function areAllImageSpacingEqual(instances, messages) {
   if (!instances?.length) {
     return;
   }
-  const firstImagePositionPatient = (0,toNumber/* default */.Z)(instances[0].ImagePositionPatient);
+  const firstImagePositionPatient = (0,toNumber/* default */.A)(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);
+  const lastIpp = (0,toNumber/* default */.A)(instances[instances.length - 1].ImagePositionPatient);
+  const averageSpacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.jj)(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);
+    const imagePositionPatient = (0,toNumber/* default */.A)(instance.ImagePositionPatient);
+    const spacingBetweenFrames = (0,isDisplaySetReconstructable/* _getPerpendicularDistance */.jj)(imagePositionPatient, previousImagePositionPatient);
+    const spacingIssue = (0,isDisplaySetReconstructable/* _getSpacingIssue */.Op)(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);
+        if (issue === isDisplaySetReconstructable/* reconstructionIssues */.JG.MISSING_FRAMES) {
+          messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.MISSING_FRAMES);
+        } else if (issue === isDisplaySetReconstructable/* reconstructionIssues */.JG.IRREGULAR_SPACING) {
+          messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.IRREGULAR_SPACING);
         }
       }
       // we just want to find issues not how many
@@ -3777,16 +4355,16 @@ function areAllImageSpacingEqual(instances, messages) {
 function checkSingleFrames(instances, messages) {
   if (instances.length > 2) {
     if (!areAllImageDimensionsEqual(instances)) {
-      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_DIMENSIONS);
+      messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.INCONSISTENT_DIMENSIONS);
     }
     if (!areAllImageComponentsEqual(instances)) {
-      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_COMPONENTS);
+      messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.INCONSISTENT_COMPONENTS);
     }
     if (!areAllImageOrientationsEqual(instances)) {
-      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_ORIENTATIONS);
+      messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.INCONSISTENT_ORIENTATIONS);
     }
     if (!areAllImagePositionsEqual(instances)) {
-      messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.INCONSISTENT_POSITION_INFORMATION);
+      messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.INCONSISTENT_POSITION_INFORMATION);
     }
     areAllImageSpacingEqual(instances, messages);
   }
@@ -3802,10 +4380,13 @@ function checkSingleFrames(instances, messages) {
  *
  * @param {Object[]} instances An array of `OHIFInstanceMetadata` objects.
  */
-function getDisplaySetMessages(instances, isReconstructable) {
-  const messages = new src/* DisplaySetMessageList */.iK();
+function getDisplaySetMessages(instances, isReconstructable, isDynamicVolume) {
+  const messages = new src/* DisplaySetMessageList */.WZ();
+  if (isDynamicVolume) {
+    return messages;
+  }
   if (!instances.length) {
-    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.NO_VALID_INSTANCES);
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.NO_VALID_INSTANCES);
     return;
   }
   const firstInstance = instances[0];
@@ -3818,18 +4399,18 @@ function getDisplaySetMessages(instances, isReconstructable) {
   if (ImageType?.includes('LOCALIZER')) {
     return messages;
   }
-  if (!isDisplaySetReconstructable/* constructableModalities */.M6.includes(Modality)) {
+  if (!isDisplaySetReconstructable/* constructableModalities */.Hf.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);
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.NO_POSITION_INFORMATION);
   }
-  const sortedInstances = (0,sortInstancesByPosition/* default */.Z)(instances);
+  const sortedInstances = (0,sortInstancesByPosition/* default */.A)(instances);
   isMultiframe ? checkMultiFrame(sortedInstances[0], messages) : checkSingleFrames(sortedInstances, messages);
   if (!isReconstructable) {
-    messages.addMessage(src/* DisplaySetMessage */.Lt.CODES.NOT_RECONSTRUCTABLE);
+    messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.NOT_RECONSTRUCTABLE);
   }
   return messages;
 }
@@ -3840,9 +4421,9 @@ function getDisplaySetMessages(instances, isReconstructable) {
  * 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 imageSet = new ImageSet/* default */.A(instances);
+  const messages = new src/* DisplaySetMessageList */.WZ();
+  messages.addMessage(src/* DisplaySetMessage */.Ob.CODES.UNSUPPORTED_DISPLAYSET);
   const instance = instances[0];
   imageSet.setAttributes({
     displaySetInstanceUID: imageSet.uid,
@@ -3864,6 +4445,86 @@ function getDisplaySetsFromUnsupportedSeries(instances) {
   });
   return [imageSet];
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/SOPClassHandlers/chartSOPClassHandler.ts
+
+
+const SOPClassHandlerName = 'chart';
+const CHART_MODALITY = 'CHT';
+
+// Private SOPClassUid for chart data
+const ChartDataSOPClassUid = '1.9.451.13215.7.3.2.7.6.1';
+const sopClassUids = [ChartDataSOPClassUid];
+const makeChartDataDisplaySet = (instance, sopClassUids) => {
+  const {
+    StudyInstanceUID,
+    SeriesInstanceUID,
+    SOPInstanceUID,
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPClassUID
+  } = instance;
+  return {
+    Modality: CHART_MODALITY,
+    loading: false,
+    isReconstructable: false,
+    displaySetInstanceUID: src.utils.guid(),
+    SeriesDescription,
+    SeriesNumber,
+    SeriesDate,
+    SOPInstanceUID,
+    SeriesInstanceUID,
+    StudyInstanceUID,
+    SOPClassHandlerId: `${id}.sopClassHandlerModule.${SOPClassHandlerName}`,
+    SOPClassUID,
+    isDerivedDisplaySet: true,
+    isLoaded: true,
+    sopClassUids,
+    instance,
+    instances: [instance],
+    /**
+     * Adds instances to the chart displaySet, rather than creating a new one
+     * when user moves to a different workflow step and gets back to a step that
+     * recreates the chart
+     */
+    addInstances: function (instances, _displaySetService) {
+      this.instances.push(...instances);
+      this.instance = this.instances[this.instances.length - 1];
+      return this;
+    }
+  };
+};
+function getSopClassUids(instances) {
+  const uniqueSopClassUidsInSeries = new Set();
+  instances.forEach(instance => {
+    uniqueSopClassUidsInSeries.add(instance.SOPClassUID);
+  });
+  const sopClassUids = Array.from(uniqueSopClassUidsInSeries);
+  return sopClassUids;
+}
+function _getDisplaySetsFromSeries(instances) {
+  debugger;
+  // If the series has no instances, stop here
+  if (!instances || !instances.length) {
+    throw new Error('No instances were provided');
+  }
+  const sopClassUids = getSopClassUids(instances);
+  const displaySets = instances.map(instance => {
+    if (instance.Modality === CHART_MODALITY) {
+      return makeChartDataDisplaySet(instance, sopClassUids);
+    }
+    throw new Error('Unsupported modality');
+  });
+  return displaySets;
+}
+const chartHandler = {
+  name: SOPClassHandlerName,
+  sopClassUids,
+  getDisplaySetsFromSeries: instances => {
+    return _getDisplaySetsFromSeries(instances);
+  }
+};
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getSopClassHandlerModule.js
 
 
@@ -3872,20 +4533,69 @@ function getDisplaySetsFromUnsupportedSeries(instances) {
 
 
 
+
+const DEFAULT_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingImageVolume';
+const DYNAMIC_VOLUME_LOADER_SCHEME = 'cornerstoneStreamingDynamicImageVolume';
 const sopClassHandlerName = 'stack';
+let appContext = {};
+const getDynamicVolumeInfo = instances => {
+  const {
+    extensionManager
+  } = appContext;
+  if (!extensionManager) {
+    throw new Error('extensionManager is not available');
+  }
+  const imageIds = instances.map(({
+    imageId
+  }) => imageId);
+  const volumeLoaderUtility = extensionManager.getModuleEntry('@ohif/extension-cornerstone.utilityModule.volumeLoader');
+  const {
+    getDynamicVolumeInfo: csGetDynamicVolumeInfo
+  } = volumeLoaderUtility.exports;
+  return csGetDynamicVolumeInfo(imageIds);
+};
 const isMultiFrame = instance => {
   return instance.NumberOfFrames > 1;
 };
+function getDisplaySetInfo(instances) {
+  const dynamicVolumeInfo = getDynamicVolumeInfo(instances);
+  const {
+    isDynamicVolume,
+    timePoints
+  } = dynamicVolumeInfo;
+  let displaySetInfo;
+  if (isDynamicVolume) {
+    const timePoint = timePoints[0];
+    const instancesMap = new Map();
+
+    // O(n) to convert it into a map and O(1) to find each instance
+    instances.forEach(instance => instancesMap.set(instance.imageId, instance));
+    const firstTimePointInstances = timePoint.map(imageId => instancesMap.get(imageId));
+    displaySetInfo = (0,isDisplaySetReconstructable/* default */.Ay)(firstTimePointInstances);
+  } else {
+    displaySetInfo = (0,isDisplaySetReconstructable/* default */.Ay)(instances);
+  }
+  return {
+    isDynamicVolume,
+    ...displaySetInfo,
+    dynamicVolumeInfo
+  };
+}
 const makeDisplaySet = instances => {
   const instance = instances[0];
-  const imageSet = new ImageSet/* default */.Z(instances);
+  const imageSet = new ImageSet/* default */.A(instances);
   const {
+    isDynamicVolume,
     value: isReconstructable,
-    averageSpacingBetweenFrames
-  } = (0,isDisplaySetReconstructable/* default */.ZP)(instances);
+    averageSpacingBetweenFrames,
+    dynamicVolumeInfo
+  } = getDisplaySetInfo(instances);
+  const volumeLoaderSchema = isDynamicVolume ? DYNAMIC_VOLUME_LOADER_SCHEME : DEFAULT_VOLUME_LOADER_SCHEME;
+
   // set appropriate attributes to image set...
-  const messages = getDisplaySetMessages(instances, isReconstructable);
+  const messages = getDisplaySetMessages(instances, isReconstructable, isDynamicVolume);
   imageSet.setAttributes({
+    volumeLoaderSchema,
     displaySetInstanceUID: imageSet.uid,
     // create a local alias for the imageSet UID
     SeriesDate: instance.SeriesDate,
@@ -3903,7 +4613,9 @@ const makeDisplaySet = instances => {
     SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
     isReconstructable,
     messages,
-    averageSpacingBetweenFrames: averageSpacingBetweenFrames || null
+    averageSpacingBetweenFrames: averageSpacingBetweenFrames || null,
+    isDynamicVolume,
+    dynamicVolumeInfo
   });
 
   // Sort the images in this series if needed
@@ -3934,7 +4646,7 @@ const makeDisplaySet = instances => {
 const isSingleImageModality = modality => {
   return modality === 'CR' || modality === 'MG' || modality === 'DX';
 };
-function getSopClassUids(instances) {
+function getSopClassHandlerModule_getSopClassUids(instances) {
   const uniqueSopClassUidsInSeries = new Set();
   instances.forEach(instance => {
     uniqueSopClassUidsInSeries.add(instance.SOPClassUID);
@@ -3948,7 +4660,6 @@ function getSopClassUids(instances) {
  * - For all Image types that are stackable, create
  *   a displaySet with a stack of images
  *
- * @param {Array} sopClassHandlerModules List of SOP Class Modules
  * @param {SeriesMetadata} series The series metadata object from which the display sets will be created
  * @returns {Array} The list of display sets created for the given series object
  */
@@ -3958,7 +4669,7 @@ function getDisplaySetsFromSeries(instances) {
     throw new Error('No instances were provided');
   }
   const displaySets = [];
-  const sopClassUids = getSopClassUids(instances);
+  const sopClassUids = getSopClassHandlerModule_getSopClassUids(instances);
 
   // Search through the instances (InstanceMetadata object) of this series
   // Split Multi-frame instances and Single-image modalities
@@ -3967,7 +4678,7 @@ function getDisplaySetsFromSeries(instances) {
   const stackableInstances = [];
   instances.forEach(instance => {
     // All imaging modalities must have a valid value for sopClassUid (x00080016) or rows (x00280010)
-    if (!(0,isImage/* isImage */.O)(instance.SOPClassUID) && !instance.Rows) {
+    if (!(0,isImage/* isImage */.w)(instance.SOPClassUID) && !instance.Rows) {
       return;
     }
     let displaySet;
@@ -4003,16 +4714,21 @@ function getDisplaySetsFromSeries(instances) {
   }
   return displaySets;
 }
-const sopClassUids = [sopClassDictionary/* default */.Z.ComputedRadiographyImageStorage, sopClassDictionary/* default */.Z.DigitalXRayImageStorageForPresentation, sopClassDictionary/* default */.Z.DigitalXRayImageStorageForProcessing, sopClassDictionary/* default */.Z.DigitalMammographyXRayImageStorageForPresentation, sopClassDictionary/* default */.Z.DigitalMammographyXRayImageStorageForProcessing, sopClassDictionary/* default */.Z.DigitalIntraOralXRayImageStorageForPresentation, sopClassDictionary/* default */.Z.DigitalIntraOralXRayImageStorageForProcessing, sopClassDictionary/* default */.Z.CTImageStorage, sopClassDictionary/* default */.Z.EnhancedCTImageStorage, sopClassDictionary/* default */.Z.LegacyConvertedEnhancedCTImageStorage, sopClassDictionary/* default */.Z.UltrasoundMultiframeImageStorage, sopClassDictionary/* default */.Z.MRImageStorage, sopClassDictionary/* default */.Z.EnhancedMRImageStorage, sopClassDictionary/* default */.Z.EnhancedMRColorImageStorage, sopClassDictionary/* default */.Z.LegacyConvertedEnhancedMRImageStorage, sopClassDictionary/* default */.Z.UltrasoundImageStorage, sopClassDictionary/* default */.Z.UltrasoundImageStorageRET, sopClassDictionary/* default */.Z.SecondaryCaptureImageStorage, sopClassDictionary/* default */.Z.MultiframeSingleBitSecondaryCaptureImageStorage, sopClassDictionary/* default */.Z.MultiframeGrayscaleByteSecondaryCaptureImageStorage, sopClassDictionary/* default */.Z.MultiframeGrayscaleWordSecondaryCaptureImageStorage, sopClassDictionary/* default */.Z.MultiframeTrueColorSecondaryCaptureImageStorage, sopClassDictionary/* default */.Z.XRayAngiographicImageStorage, sopClassDictionary/* default */.Z.EnhancedXAImageStorage, sopClassDictionary/* default */.Z.XRayRadiofluoroscopicImageStorage, sopClassDictionary/* default */.Z.EnhancedXRFImageStorage, sopClassDictionary/* default */.Z.XRay3DAngiographicImageStorage, sopClassDictionary/* default */.Z.XRay3DCraniofacialImageStorage, sopClassDictionary/* default */.Z.BreastTomosynthesisImageStorage, sopClassDictionary/* default */.Z.BreastProjectionXRayImageStorageForPresentation, sopClassDictionary/* default */.Z.BreastProjectionXRayImageStorageForProcessing, sopClassDictionary/* default */.Z.IntravascularOpticalCoherenceTomographyImageStorageForPresentation, sopClassDictionary/* default */.Z.IntravascularOpticalCoherenceTomographyImageStorageForProcessing, sopClassDictionary/* default */.Z.NuclearMedicineImageStorage, sopClassDictionary/* default */.Z.VLEndoscopicImageStorage, sopClassDictionary/* default */.Z.VideoEndoscopicImageStorage, sopClassDictionary/* default */.Z.VLMicroscopicImageStorage, sopClassDictionary/* default */.Z.VideoMicroscopicImageStorage, sopClassDictionary/* default */.Z.VLSlideCoordinatesMicroscopicImageStorage, sopClassDictionary/* default */.Z.VLPhotographicImageStorage, sopClassDictionary/* default */.Z.VideoPhotographicImageStorage, sopClassDictionary/* default */.Z.OphthalmicPhotography8BitImageStorage, sopClassDictionary/* default */.Z.OphthalmicPhotography16BitImageStorage, sopClassDictionary/* default */.Z.OphthalmicTomographyImageStorage, sopClassDictionary/* default */.Z.VLWholeSlideMicroscopyImageStorage, sopClassDictionary/* default */.Z.PositronEmissionTomographyImageStorage, sopClassDictionary/* default */.Z.EnhancedPETImageStorage, sopClassDictionary/* default */.Z.LegacyConvertedEnhancedPETImageStorage, sopClassDictionary/* default */.Z.RTImageStorage, sopClassDictionary/* default */.Z.EnhancedUSVolumeStorage];
-function getSopClassHandlerModule() {
+const getSopClassHandlerModule_sopClassUids = [sopClassDictionary/* default */.A.ComputedRadiographyImageStorage, sopClassDictionary/* default */.A.DigitalXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalMammographyXRayImageStorageForProcessing, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForPresentation, sopClassDictionary/* default */.A.DigitalIntraOralXRayImageStorageForProcessing, sopClassDictionary/* default */.A.CTImageStorage, sopClassDictionary/* default */.A.EnhancedCTImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedCTImageStorage, sopClassDictionary/* default */.A.UltrasoundMultiframeImageStorage, sopClassDictionary/* default */.A.MRImageStorage, sopClassDictionary/* default */.A.EnhancedMRImageStorage, sopClassDictionary/* default */.A.EnhancedMRColorImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedMRImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorage, sopClassDictionary/* default */.A.UltrasoundImageStorageRET, sopClassDictionary/* default */.A.SecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeSingleBitSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleByteSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeGrayscaleWordSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.MultiframeTrueColorSecondaryCaptureImageStorage, sopClassDictionary/* default */.A.XRayAngiographicImageStorage, sopClassDictionary/* default */.A.EnhancedXAImageStorage, sopClassDictionary/* default */.A.XRayRadiofluoroscopicImageStorage, sopClassDictionary/* default */.A.EnhancedXRFImageStorage, sopClassDictionary/* default */.A.XRay3DAngiographicImageStorage, sopClassDictionary/* default */.A.XRay3DCraniofacialImageStorage, sopClassDictionary/* default */.A.BreastTomosynthesisImageStorage, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForPresentation, sopClassDictionary/* default */.A.BreastProjectionXRayImageStorageForProcessing, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForPresentation, sopClassDictionary/* default */.A.IntravascularOpticalCoherenceTomographyImageStorageForProcessing, sopClassDictionary/* default */.A.NuclearMedicineImageStorage, sopClassDictionary/* default */.A.VLEndoscopicImageStorage, sopClassDictionary/* default */.A.VideoEndoscopicImageStorage, sopClassDictionary/* default */.A.VLMicroscopicImageStorage, sopClassDictionary/* default */.A.VideoMicroscopicImageStorage, sopClassDictionary/* default */.A.VLSlideCoordinatesMicroscopicImageStorage, sopClassDictionary/* default */.A.VLPhotographicImageStorage, sopClassDictionary/* default */.A.VideoPhotographicImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography8BitImageStorage, sopClassDictionary/* default */.A.OphthalmicPhotography16BitImageStorage, sopClassDictionary/* default */.A.OphthalmicTomographyImageStorage, sopClassDictionary/* default */.A.VLWholeSlideMicroscopyImageStorage, sopClassDictionary/* default */.A.PositronEmissionTomographyImageStorage, sopClassDictionary/* default */.A.EnhancedPETImageStorage, sopClassDictionary/* default */.A.LegacyConvertedEnhancedPETImageStorage, sopClassDictionary/* default */.A.RTImageStorage, sopClassDictionary/* default */.A.EnhancedUSVolumeStorage];
+function getSopClassHandlerModule(appContextParam) {
+  appContext = appContextParam;
   return [{
     name: sopClassHandlerName,
-    sopClassUids,
+    sopClassUids: getSopClassHandlerModule_sopClassUids,
     getDisplaySetsFromSeries
   }, {
     name: 'not-supported-display-sets-handler',
     sopClassUids: [],
     getDisplaySetsFromSeries: getDisplaySetsFromUnsupportedSeries
+  }, {
+    name: chartHandler.name,
+    sopClassUids: chartHandler.sopClassUids,
+    getDisplaySetsFromSeries: chartHandler.getDisplaySetsFromSeries
   }];
 }
 /* harmony default export */ const src_getSopClassHandlerModule = (getSopClassHandlerModule);
@@ -4029,39 +4745,99 @@ function ToolbarLayoutSelector_extends() { ToolbarLayoutSelector_extends = Objec
 
 
 
-function ToolbarLayoutSelectorWithServices(_ref) {
-  let {
-    servicesManager,
-    ...props
-  } = _ref;
-  const {
-    toolbarService
-  } = servicesManager.services;
+const defaultCommonPresets = [{
+  icon: 'layout-common-1x1',
+  commandOptions: {
+    numRows: 1,
+    numCols: 1
+  }
+}, {
+  icon: 'layout-common-1x2',
+  commandOptions: {
+    numRows: 1,
+    numCols: 2
+  }
+}, {
+  icon: 'layout-common-2x2',
+  commandOptions: {
+    numRows: 2,
+    numCols: 2
+  }
+}, {
+  icon: 'layout-common-2x3',
+  commandOptions: {
+    numRows: 2,
+    numCols: 3
+  }
+}];
+const generateAdvancedPresets = hangingProtocolService => {
+  const hangingProtocols = Array.from(hangingProtocolService.protocols.values());
+  return hangingProtocols.map(hp => {
+    if (!hp.isPreset) {
+      return null;
+    }
+    return {
+      icon: hp.icon,
+      title: hp.name,
+      commandOptions: {
+        protocolId: hp.id
+      }
+    };
+  }).filter(preset => preset !== null);
+};
+function ToolbarLayoutSelectorWithServices({
+  commandsManager,
+  servicesManager,
+  ...props
+}) {
+  const [isDisabled, setIsDisabled] = (0,react.useState)(false);
+  const handleMouseEnter = () => {
+    setIsDisabled(false);
+  };
   const onSelection = (0,react.useCallback)(props => {
-    toolbarService.recordInteraction({
-      interactionType: 'action',
-      commands: [{
-        commandName: 'setViewportGridLayout',
-        commandOptions: {
-          ...props
-        },
-        context: 'DEFAULT'
-      }]
+    commandsManager.run({
+      commandName: 'setViewportGridLayout',
+      commandOptions: {
+        ...props
+      }
     });
-  }, [toolbarService]);
-  return /*#__PURE__*/react.createElement(LayoutSelector, ToolbarLayoutSelector_extends({}, props, {
-    onSelection: onSelection
-  }));
+    setIsDisabled(true);
+  }, []);
+  const onSelectionPreset = (0,react.useCallback)(props => {
+    commandsManager.run({
+      commandName: 'setHangingProtocol',
+      commandOptions: {
+        ...props
+      }
+    });
+    setIsDisabled(true);
+  }, []);
+  return /*#__PURE__*/react.createElement("div", {
+    onMouseEnter: handleMouseEnter
+  }, /*#__PURE__*/react.createElement(LayoutSelector, ToolbarLayoutSelector_extends({}, props, {
+    onSelection: onSelection,
+    onSelectionPreset: onSelectionPreset,
+    servicesManager: servicesManager,
+    tooltipDisabled: isDisabled
+  })));
 }
-function LayoutSelector(_ref2) {
-  let {
-    rows,
-    columns,
-    className,
-    onSelection,
-    ...rest
-  } = _ref2;
+function LayoutSelector({
+  rows,
+  columns,
+  className,
+  onSelection,
+  onSelectionPreset,
+  servicesManager,
+  tooltipDisabled,
+  ...rest
+}) {
   const [isOpen, setIsOpen] = (0,react.useState)(false);
+  const {
+    customizationService,
+    hangingProtocolService
+  } = servicesManager.services;
+  const commonPresets = customizationService.get('commonPresets') || defaultCommonPresets;
+  const advancedPresets = customizationService.get('advancedPresets') || generateAdvancedPresets(hangingProtocolService);
   const closeOnOutsideClick = () => {
     if (isOpen) {
       setIsOpen(false);
@@ -4073,20 +4849,56 @@ function LayoutSelector(_ref2) {
       window.removeEventListener('click', closeOnOutsideClick);
     };
   }, [isOpen]);
-  const onInteractionHandler = () => setIsOpen(!isOpen);
-  const DropdownContent = isOpen ? ui_src/* LayoutSelector */.OF : null;
-  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, {
+  const onInteractionHandler = () => {
+    setIsOpen(!isOpen);
+  };
+  const DropdownContent = isOpen ? ui_src/* LayoutSelector */.sG : null;
+  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.IB, {
     id: "Layout",
-    label: "Grid Layout",
+    label: "Layout",
     icon: "tool-layout",
     onInteraction: onInteractionHandler,
     className: className,
     rounded: rest.rounded,
-    dropdownContent: DropdownContent !== null && /*#__PURE__*/react.createElement(DropdownContent, {
+    disableToolTip: tooltipDisabled,
+    dropdownContent: DropdownContent !== null && /*#__PURE__*/react.createElement("div", {
+      className: "flex "
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "bg-secondary-dark flex flex-col gap-2.5 p-2"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-aqua-pale text-xs"
+    }, "Common"), /*#__PURE__*/react.createElement("div", {
+      className: "flex gap-4"
+    }, commonPresets.map((preset, index) => /*#__PURE__*/react.createElement(ui_src/* LayoutPreset */.qu, {
+      key: index,
+      classNames: "hover:bg-primary-dark group p-1 cursor-pointer",
+      icon: preset.icon,
+      commandOptions: preset.commandOptions,
+      onSelection: onSelection
+    }))), /*#__PURE__*/react.createElement("div", {
+      className: "h-[2px] bg-black"
+    }), /*#__PURE__*/react.createElement("div", {
+      className: "text-aqua-pale text-xs"
+    }, "Advanced"), /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-col gap-2.5"
+    }, advancedPresets.map((preset, index) => /*#__PURE__*/react.createElement(ui_src/* LayoutPreset */.qu, {
+      key: index + commonPresets.length,
+      classNames: "hover:bg-primary-dark group flex gap-2 p-1 cursor-pointer",
+      icon: preset.icon,
+      title: preset.title,
+      commandOptions: preset.commandOptions,
+      onSelection: onSelectionPreset
+    })))), /*#__PURE__*/react.createElement("div", {
+      className: "bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black  p-2"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-aqua-pale text-xs"
+    }, "Custom"), /*#__PURE__*/react.createElement(DropdownContent, {
       rows: rows,
       columns: columns,
       onSelection: onSelection
-    }),
+    }), /*#__PURE__*/react.createElement("p", {
+      className: "text-aqua-pale text-xs leading-tight"
+    }, "Hover to select ", /*#__PURE__*/react.createElement("br", null), "rows and columns ", /*#__PURE__*/react.createElement("br", null), " Click to apply"))),
     isActive: isOpen,
     type: "toggle"
   });
@@ -4095,11 +4907,11 @@ LayoutSelector.propTypes = {
   rows: (prop_types_default()).number,
   columns: (prop_types_default()).number,
   onLayoutChange: (prop_types_default()).func,
-  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.Xw)
+  servicesManager: prop_types_default().instanceOf(src/* ServicesManager */.CS)
 };
 LayoutSelector.defaultProps = {
+  columns: 4,
   rows: 3,
-  columns: 3,
   onLayoutChange: () => {}
 };
 /* harmony default export */ const ToolbarLayoutSelector = (ToolbarLayoutSelectorWithServices);
@@ -4108,122 +4920,39 @@ function ToolbarSplitButtonWithServices_extends() { ToolbarSplitButtonWithServic
 
 
 
-
-function ToolbarSplitButtonWithServices(_ref) {
-  let {
-    isRadio,
-    isAction,
-    groupId,
-    primary,
-    secondary,
-    items,
-    renderer,
-    onInteraction,
-    servicesManager
-  } = _ref;
+function ToolbarSplitButtonWithServices({
+  groupId,
+  primary,
+  secondary,
+  items,
+  renderer,
+  onInteraction,
+  servicesManager
+}) {
   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) => ({
+  const getSplitButtonItems = (0,react.useCallback)(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
+    onClick: () => {
+      onInteraction({
+        groupId,
+        itemId: item.id,
+        commands: item.commands
       });
-    });
-    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,
+    }
+  })), []);
+  const PrimaryButtonComponent = toolbarService?.getButtonComponentForUIType(primary.uiType) ?? ui_src/* ToolbarButton */.IB;
+  const listItemRenderer = renderer;
+  return /*#__PURE__*/react.createElement(ui_src/* SplitButton */.fk, {
+    primary: primary,
     secondary: secondary,
-    items: updatedItems,
+    items: getSplitButtonItems(items),
     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
@@ -4232,11 +4961,9 @@ function ToolbarSplitButtonWithServices(_ref) {
 }
 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({
@@ -4244,14 +4971,16 @@ ToolbarSplitButtonWithServices.propTypes = {
     icon: (prop_types_default()).string.isRequired,
     label: (prop_types_default()).string,
     tooltip: (prop_types_default()).string.isRequired,
-    isActive: (prop_types_default()).bool
+    disabled: (prop_types_default()).bool,
+    className: (prop_types_default()).string
   }),
   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
+    tooltip: (prop_types_default()).string,
+    disabled: (prop_types_default()).bool,
+    className: (prop_types_default()).string
   })),
   renderer: (prop_types_default()).func,
   onInteraction: (prop_types_default()).func.isRequired,
@@ -4266,108 +4995,194 @@ ToolbarSplitButtonWithServices.defaultProps = {
   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); }
-
-
-
-function ToolbarButtonWithServices(_ref) {
-  let {
-    id,
-    type,
-    commands,
-    onInteraction,
-    servicesManager,
-    ...props
-  } = _ref;
-  const {
-    toolbarService
-  } = servicesManager?.services || {};
-  const [buttonsState, setButtonState] = (0,react.useState)({
-    primaryToolId: '',
-    toggles: {},
-    groups: {}
-  });
+;// CONCATENATED MODULE: ../../../extensions/default/src/Toolbar/ToolbarButtonGroupWithServices.tsx
+
+
+function ToolbarButtonGroupWithServices({
+  groupId,
+  items,
+  onInteraction,
+  size
+}) {
+  const getSplitButtonItems = (0,react.useCallback)(items => items.map((item, index) => /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.IB, {
+    key: item.id,
+    icon: item.icon,
+    label: item.label,
+    disabled: item.disabled,
+    className: item.className,
+    id: item.id,
+    size: size,
+    onClick: () => {
+      onInteraction({
+        groupId,
+        itemId: item.id,
+        commands: item.commands
+      });
+    }
+    // Note: this is necessary since tooltip will add
+    // default styles to the tooltip container which
+    // we don't want for groups
+    ,
+    toolTipClassName: ""
+  })), [onInteraction, groupId]);
+  return /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, null, getSplitButtonItems(items));
+}
+/* harmony default export */ const Toolbar_ToolbarButtonGroupWithServices = (ToolbarButtonGroupWithServices);
+;// CONCATENATED MODULE: ../../../extensions/default/src/components/ProgressDropdownWithService/ProgressDropdownWithService.tsx
+
+
+const workflowStepsToDropdownOptions = (steps = []) => steps.map(step => ({
+  label: step.name,
+  value: step.id,
+  info: step.info,
+  activated: false,
+  completed: false
+}));
+function ProgressDropdownWithService({
+  servicesManager
+}) {
   const {
-    primaryToolId
-  } = buttonsState;
-  const isActive = type === 'tool' && id === primaryToolId || type === 'toggle' && buttonsState.toggles[id] === true;
+    workflowStepsService
+  } = servicesManager.services;
+  const [activeStepId, setActiveStepId] = (0,react.useState)(workflowStepsService.activeWorkflowStep?.id);
+  const [dropdownOptions, setDropdownOptions] = (0,react.useState)(workflowStepsToDropdownOptions(workflowStepsService.workflowSteps));
+  const setCurrentAndPreviousOptionsAsCompleted = (0,react.useCallback)(currentOption => {
+    if (currentOption.completed) {
+      return;
+    }
+    setDropdownOptions(prevOptions => {
+      const newOptionsState = [...prevOptions];
+      const startIndex = newOptionsState.findIndex(option => option.value === currentOption.value);
+      for (let i = startIndex; i >= 0; i--) {
+        const option = newOptionsState[i];
+        if (option.completed) {
+          break;
+        }
+        newOptionsState[i] = {
+          ...option,
+          completed: true
+        };
+      }
+      return newOptionsState;
+    });
+  }, []);
+  const handleDropdownChange = (0,react.useCallback)(({
+    selectedOption
+  }) => {
+    if (!selectedOption) {
+      return;
+    }
+
+    // TODO: Steps should be marked as completed after user has
+    // completed some action when required (not implemented)
+    setCurrentAndPreviousOptionsAsCompleted(selectedOption);
+    setActiveStepId(selectedOption.value);
+  }, [setCurrentAndPreviousOptionsAsCompleted]);
+  (0,react.useEffect)(() => {
+    let timeoutId;
+    if (activeStepId) {
+      // We've used setTimeout to give it more time to update the UI since
+      // create3DFilterableFromDataArray from Texture.js may take 600+ ms to run
+      // when there is a new series to load in the next step but that resulted
+      // in the followed React error when updating the content from left/right panels
+      // and all component states were being lost:
+      //   Error: Can't perform a React state update on an unmounted component
+      workflowStepsService.setActiveWorkflowStep(activeStepId);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [activeStepId, workflowStepsService]);
   (0,react.useEffect)(() => {
     const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, state => {
-      setButtonState({
-        ...state
-      });
-    });
+      unsubscribe: unsubStepsChanged
+    } = workflowStepsService.subscribe(workflowStepsService.EVENTS.STEPS_CHANGED, () => setDropdownOptions(workflowStepsToDropdownOptions(workflowStepsService.workflowSteps)));
+    const {
+      unsubscribe: unsubActiveStepChanged
+    } = workflowStepsService.subscribe(workflowStepsService.EVENTS.ACTIVE_STEP_CHANGED, () => setActiveStepId(workflowStepsService.activeWorkflowStep.id));
     return () => {
-      unsubscribe();
+      unsubStepsChanged();
+      unsubActiveStepChanged();
     };
-  }, [toolbarService]);
-  return /*#__PURE__*/react.createElement(ui_src/* ToolbarButton */.hA, ToolbarButtonWithServices_extends({
-    commands: commands,
-    id: id,
-    type: type,
-    isActive: isActive,
-    onInteraction: onInteraction
-  }, props));
+  }, [servicesManager, workflowStepsService]);
+  return /*#__PURE__*/react.createElement(ui_src/* ProgressDropdown */.LW, {
+    options: dropdownOptions,
+    value: activeStepId,
+    onChange: handleDropdownChange
+  });
 }
-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()).any)
-        }).isRequired
-      }).isRequired
-    }).isRequired
-  }).isRequired
-};
-/* harmony default export */ const Toolbar_ToolbarButtonWithServices = (ToolbarButtonWithServices);
+/* harmony default export */ const ProgressDropdownWithService_ProgressDropdownWithService = (ProgressDropdownWithService);
+;// CONCATENATED MODULE: ../../../extensions/default/src/components/ProgressDropdownWithService/index.js
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getToolbarModule.tsx
 
 
 
 
-function getToolbarModule(_ref) {
-  let {
-    commandsManager,
-    servicesManager
-  } = _ref;
+
+
+const getClassName = isToggled => {
+  return {
+    className: isToggled ? '!text-primary-active' : '!text-common-bright hover:!bg-primary-dark hover:text-primary-light'
+  };
+};
+function getToolbarModule({
+  commandsManager,
+  servicesManager
+}) {
+  const {
+    cineService
+  } = servicesManager.services;
   return [{
-    name: 'ohif.divider',
-    defaultComponent: ToolbarDivider,
-    clickHandler: () => {}
-  }, {
-    name: 'ohif.action',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
-  }, {
     name: 'ohif.radioGroup',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
+    defaultComponent: ui_src/* ToolbarButton */.IB
+  }, {
+    name: 'ohif.divider',
+    defaultComponent: ToolbarDivider
   }, {
     name: 'ohif.splitButton',
-    defaultComponent: Toolbar_ToolbarSplitButtonWithServices,
-    clickHandler: () => {}
+    defaultComponent: Toolbar_ToolbarSplitButtonWithServices
   }, {
     name: 'ohif.layoutSelector',
-    defaultComponent: ToolbarLayoutSelector,
-    clickHandler: (evt, clickedBtn, btnSectionName) => {}
+    defaultComponent: props => ToolbarLayoutSelector({
+      ...props,
+      commandsManager,
+      servicesManager
+    })
+  }, {
+    name: 'ohif.buttonGroup',
+    defaultComponent: Toolbar_ToolbarButtonGroupWithServices
+  }, {
+    name: 'ohif.progressDropdown',
+    defaultComponent: ProgressDropdownWithService_ProgressDropdownWithService
   }, {
-    name: 'ohif.toggle',
-    defaultComponent: Toolbar_ToolbarButtonWithServices,
-    clickHandler: () => {}
+    name: 'evaluate.group.promoteToPrimary',
+    evaluate: ({
+      viewportId,
+      button,
+      itemId
+    }) => {
+      const {
+        items
+      } = button.props;
+      if (!itemId) {
+        return {
+          primary: button.props.primary,
+          items
+        };
+      }
+
+      // other wise we can move the clicked tool to the primary button
+      const clickedItemProps = items.find(item => item.id === itemId || item.itemId === itemId);
+      return {
+        primary: clickedItemProps,
+        items
+      };
+    }
+  }, {
+    name: 'evaluate.cine',
+    evaluate: () => {
+      const isToggled = cineService.getState().isCineEnabled;
+      return getClassName(isToggled);
+    }
   }];
 }
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/ContextMenuItemsBuilder.ts
@@ -4433,7 +5248,6 @@ function findMenu(menus, props, menuIdFilter) {
     }
     current = findIt.next();
   }
-  console.log('Menu chosen', menu?.id || 'NONE');
   return menu;
 }
 
@@ -4536,8 +5350,12 @@ function adaptItem(item, subProps) {
   return newItem;
 }
 // EXTERNAL MODULE: ../../ui/src/components/ContextMenu/ContextMenu.tsx
-var ContextMenu = __webpack_require__(5638);
+var ContextMenu = __webpack_require__(59852);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 18 modules
+var dist_esm = __webpack_require__(24542);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/CustomizableContextMenu/ContextMenuController.tsx
+var _ContextMenuController;
+
 
 
 /**
@@ -4584,7 +5402,16 @@ class ContextMenuController {
       menus,
       selectorProps
     } = contextMenuProps;
-    console.log('Getting items from', menus);
+    const annotationManager = dist_esm.annotation.state.getAnnotationManager();
+    const {
+      locking
+    } = dist_esm.annotation;
+    const targetAnnotationId = selectorProps?.nearbyToolData?.annotationUID;
+    const isLocked = locking.isAnnotationLocked(annotationManager.getAnnotation(targetAnnotationId));
+    if (isLocked) {
+      console.warn('Annotation is locked.');
+      return;
+    }
     const items = getMenuItems(selectorProps || contextMenuProps, event, menus, menuId);
     this.services.uiDialogService.dismiss({
       id: 'context-menu'
@@ -4596,7 +5423,7 @@ class ContextMenuController {
       preventCutOf: true,
       defaultPosition: ContextMenuController._getDefaultPosition(defaultPointsPosition, event?.detail, viewportElement),
       event,
-      content: ContextMenu/* default */.Z,
+      content: ContextMenu/* default */.A,
       // This naming is part of the uiDialogService convention
       // Clicking outside simply closes the dialog box.
       onClickOutside: () => this.services.uiDialogService.dismiss({
@@ -4642,6 +5469,7 @@ class ContextMenuController {
     });
   }
 }
+_ContextMenuController = ContextMenuController;
 ContextMenuController.getDefaultPosition = () => {
   return {
     x: 0,
@@ -4665,16 +5493,14 @@ ContextMenuController._getElementDefaultPosition = element => {
     y: undefined
   };
 };
-ContextMenuController._getCanvasPointsPosition = function () {
-  let points = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let element = arguments.length > 1 ? arguments[1] : undefined;
-  const viewerPos = ContextMenuController._getElementDefaultPosition(element);
+ContextMenuController._getCanvasPointsPosition = (points = [], element) => {
+  const viewerPos = _ContextMenuController._getElementDefaultPosition(element);
   for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
     const point = {
       x: points[pointIndex][0] || points[pointIndex]['x'],
       y: points[pointIndex][1] || points[pointIndex]['y']
     };
-    if (ContextMenuController._isValidPosition(point) && ContextMenuController._isValidPosition(viewerPos)) {
+    if (_ContextMenuController._isValidPosition(point) && _ContextMenuController._isValidPosition(viewerPos)) {
       return {
         x: point.x + viewerPos.x,
         y: point.y + viewerPos.y
@@ -4690,17 +5516,17 @@ ContextMenuController._isValidPosition = source => {
  */
 ContextMenuController._getDefaultPosition = (canvasPoints, eventDetail, viewerElement) => {
   function* getPositionIterator() {
-    yield ContextMenuController._getCanvasPointsPosition(canvasPoints, viewerElement);
-    yield ContextMenuController._getEventDefaultPosition(eventDetail);
-    yield ContextMenuController._getElementDefaultPosition(viewerElement);
-    yield ContextMenuController.getDefaultPosition();
+    yield _ContextMenuController._getCanvasPointsPosition(canvasPoints, viewerElement);
+    yield _ContextMenuController._getEventDefaultPosition(eventDetail);
+    yield _ContextMenuController._getElementDefaultPosition(viewerElement);
+    yield _ContextMenuController.getDefaultPosition();
   }
   const positionIterator = getPositionIterator();
   let current = positionIterator.next();
   let position = current.value;
   while (!current.done) {
     position = current.value;
-    if (ContextMenuController._isValidPosition(position)) {
+    if (_ContextMenuController._isValidPosition(position)) {
       positionIterator.return();
     }
     current = positionIterator.next();
@@ -4715,12 +5541,9 @@ const defaultContextMenu = {
   // Get the items from the UI Customization for the menu name (and have a custom name)
   {
     id: 'forExistingMeasurement',
-    selector: _ref => {
-      let {
-        nearbyToolData
-      } = _ref;
-      return !!nearbyToolData;
-    },
+    selector: ({
+      nearbyToolData
+    }) => !!nearbyToolData,
     items: [{
       label: 'Delete measurement',
       commands: [{
@@ -4745,10 +5568,13 @@ const defaultContextMenu = {
 
 
 // EXTERNAL MODULE: ../../../node_modules/moment/moment.js
-var moment = __webpack_require__(71271);
+var moment = __webpack_require__(8291);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 // EXTERNAL MODULE: ../../../node_modules/react-window/dist/index.esm.js
-var index_esm = __webpack_require__(94614);
+var index_esm = __webpack_require__(6943);
+// EXTERNAL MODULE: ../../../node_modules/classnames/index.js
+var classnames = __webpack_require__(61466);
+var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomTagBrowser/DicomTagTable.tsx
 
 
@@ -4765,13 +5591,12 @@ const rowStyle = {
   borderBottomWidth: `${rowBottomBorderPx}px`,
   ...rowVerticalPaddingStyle
 };
-function ColumnHeaders(_ref) {
-  let {
-    tagRef,
-    vrRef,
-    keywordRef,
-    valueRef
-  } = _ref;
+function ColumnHeaders({
+  tagRef,
+  vrRef,
+  keywordRef,
+  valueRef
+}) {
   return /*#__PURE__*/react.createElement("div", {
     className: classnames_default()('bg-secondary-dark ohif-scrollbar flex w-full flex-row overflow-y-scroll'),
     style: rowVerticalPaddingStyle
@@ -4805,10 +5630,9 @@ function ColumnHeaders(_ref) {
     className: "flex flex-row items-center focus:outline-none"
   }, "Value"))));
 }
-function DicomTagTable(_ref2) {
-  let {
-    rows
-  } = _ref2;
+function DicomTagTable({
+  rows
+}) {
   const listRef = (0,react.useRef)();
   const canvasRef = (0,react.useRef)();
   const [tagHeaderElem, setTagHeaderElem] = (0,react.useState)(null);
@@ -4862,11 +5686,10 @@ function DicomTagTable(_ref2) {
       window.removeEventListener('resize', debouncedResize);
     };
   }, []);
-  const Row = (0,react.useCallback)(_ref3 => {
-    let {
-      index,
-      style
-    } = _ref3;
+  const Row = (0,react.useCallback)(({
+    index,
+    style
+  }) => {
     const row = rows[index];
     return /*#__PURE__*/react.createElement("div", {
       style: {
@@ -4924,7 +5747,7 @@ function DicomTagTable(_ref2) {
     style: {
       height: '32rem'
     }
-  }, isHeaderRendered() && /*#__PURE__*/react.createElement(index_esm/* VariableSizeList */.S_, {
+  }, isHeaderRendered() && /*#__PURE__*/react.createElement(index_esm/* VariableSizeList */._m, {
     ref: listRef,
     height: 500,
     itemCount: rows.length,
@@ -4951,15 +5774,14 @@ const {
 } = src.classes;
 const {
   DicomMetaDictionary: DicomTagBrowser_DicomMetaDictionary
-} = dcmjs_es["default"].data;
+} = dcmjs_es/* default.data */.Ay.data;
 const {
   nameMap
 } = DicomTagBrowser_DicomMetaDictionary;
-const DicomTagBrowser = _ref => {
-  let {
-    displaySets,
-    displaySetInstanceUID
-  } = _ref;
+const DicomTagBrowser = ({
+  displaySets,
+  displaySetInstanceUID
+}) => {
   // The column indices that are to be excluded during a filter of the table.
   // At present the column indices are:
   // 0: DICOM tag
@@ -5042,12 +5864,12 @@ const DicomTagBrowser = _ref => {
     className: "mb-6 flex flex-row items-center pl-1"
   }, /*#__PURE__*/react.createElement("div", {
     className: "flex w-1/2 flex-row items-center"
-  }, /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Typography */.o5, {
     variant: "subtitle",
     className: "mr-4"
   }, "Series"), /*#__PURE__*/react.createElement("div", {
     className: "mr-8 grow"
-  }, /*#__PURE__*/react.createElement(ui_src/* Select */.Ph, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Select */.l6, {
     id: "display-set-selector",
     isClearable: false,
     onChange: onSelectChange,
@@ -5056,12 +5878,12 @@ const DicomTagBrowser = _ref => {
     className: "text-white"
   }))), /*#__PURE__*/react.createElement("div", {
     className: "flex w-1/2 flex-row items-center"
-  }, showInstanceList && /*#__PURE__*/react.createElement(ui_src/* Typography */.ZT, {
+  }, showInstanceList && /*#__PURE__*/react.createElement(ui_src/* Typography */.o5, {
     variant: "subtitle",
     className: "mr-4"
   }, "Instance Number"), showInstanceList && /*#__PURE__*/react.createElement("div", {
     className: "grow"
-  }, /*#__PURE__*/react.createElement(ui_src/* InputRange */.OX, {
+  }, /*#__PURE__*/react.createElement(ui_src/* InputRange */.Qr, {
     value: instanceNumber,
     key: selectedDisplaySetInstanceUID,
     onChange: value => {
@@ -5077,7 +5899,7 @@ const DicomTagBrowser = _ref => {
     className: "h-1 w-full bg-black"
   }), /*#__PURE__*/react.createElement("div", {
     className: "my-3 flex w-1/2 flex-row"
-  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
+  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Cv, {
     className: "mr-8 block w-full",
     placeholder: "Search metadata...",
     onDebounceChange: setFilterValue
@@ -5101,7 +5923,7 @@ function getFormattedRowsFromTags(tags, metadata) {
     } else {
       if (tagInfo.vr === 'xs') {
         try {
-          const tag = dcmjs_es["default"].data.Tag.fromPString(tagInfo.tag).toCleanString();
+          const tag = dcmjs_es/* default.data */.Ay.data.Tag.fromPString(tagInfo.tag).toCleanString();
           const originalTagInfo = metadata[tag];
           tagInfo.vr = originalTagInfo.vr;
         } catch (error) {
@@ -5120,8 +5942,7 @@ function getSortedTags(metadata) {
   _sortTagList(tagList);
   return tagList;
 }
-function getRows(metadata) {
-  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function getRows(metadata, depth = 0) {
   // Tag, Type, Value, Keyword
 
   const keywords = Object.keys(metadata);
@@ -5132,7 +5953,6 @@ function getRows(metadata) {
   if (depth > 0) {
     tagIndent += ' '; // If indented, add a space after the indents.
   }
-
   const rows = [];
   for (let i = 0; i < keywords.length; i++) {
     let keyword = keywords[i];
@@ -5259,6 +6079,9 @@ const reuseCachedLayout = (state, hangingProtocolService, syncService) => {
   const {
     protocol
   } = hangingProtocolService.getActiveProtocol();
+  if (!protocol) {
+    return;
+  }
   const hpInfo = hangingProtocolService.getState();
   const {
     protocolId,
@@ -5361,6 +6184,13 @@ const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, vi
       }
     };
   }
+
+  // and lastly if there is no default viewport, then we see if we can grab the
+  // viewportsByPosition at the position index and use that
+  // const candidate = Object.values(viewportsByPosition)[position];
+
+  // // if it has something to display, then we can use it
+  // return candidate?.displaySetInstanceUIDs ? candidate : {};
   return {};
 };
 
@@ -5373,11 +6203,10 @@ const findViewportsByPosition_findOrCreateViewport = (hangingProtocolService, vi
  * @returns Set of states that can be applied to the state sync to remember
  *   the current view state.
  */
-const findViewportsByPosition = (state, _ref, syncService) => {
-  let {
-    numRows,
-    numCols
-  } = _ref;
+const findViewportsByPosition = (state, {
+  numRows,
+  numCols
+}, syncService) => {
   const {
     viewports
   } = state;
@@ -5414,8 +6243,8 @@ const findViewportsByPosition = (state, _ref, syncService) => {
   };
 };
 /* harmony default export */ const src_findViewportsByPosition = (findViewportsByPosition);
-// EXTERNAL MODULE: ./index.js + 33 modules
-var index = __webpack_require__(59754);
+// EXTERNAL MODULE: ./index.js + 35 modules
+var index = __webpack_require__(68870);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/commandsModule.ts
 
 
@@ -5426,17 +6255,10 @@ var index = __webpack_require__(59754);
 const {
   subscribeToNextViewportGridChange
 } = src.utils;
-/**
- * Determine if a command is a hanging protocol one.
- * For now, just use the two hanging protocol commands that are in this
- * commands module, but if others get added elsewhere this may need enhancing.
- */
-const isHangingProtocolCommand = command => command && (command.commandName === 'setHangingProtocol' || command.commandName === 'toggleHangingProtocol');
-const commandsModule = _ref => {
-  let {
-    servicesManager,
-    commandsManager
-  } = _ref;
+const commandsModule = ({
+  servicesManager,
+  commandsManager
+}) => {
   const {
     customizationService,
     measurementService,
@@ -5444,8 +6266,7 @@ const commandsModule = _ref => {
     uiNotificationService,
     viewportGridService,
     displaySetService,
-    stateSyncService,
-    toolbarService
+    stateSyncService
   } = servicesManager.services;
 
   // Define a context menu controller for use with any context menus
@@ -5491,12 +6312,11 @@ const commandsModule = _ref => {
     closeContextMenu: () => {
       contextMenuController.closeContextMenu();
     },
-    displayNotification: _ref2 => {
-      let {
-        text,
-        title,
-        type
-      } = _ref2;
+    displayNotification: ({
+      text,
+      title,
+      type
+    }) => {
       uiNotificationService.show({
         title: title,
         message: text,
@@ -5506,41 +6326,6 @@ const commandsModule = _ref => {
     clearMeasurements: () => {
       measurementService.clear();
     },
-    /**
-     * Toggles off all tools which contain a commandName of setHangingProtocol
-     * or toggleHangingProtocol, and which match/don't match the protocol id/stage
-     */
-    toggleHpTools: () => {
-      const {
-        protocol,
-        stageIndex: toggleStageIndex,
-        stage
-      } = hangingProtocolService.getActiveProtocol();
-      const enableListener = button => {
-        if (!button.id) {
-          return;
-        }
-        const {
-          commands,
-          items
-        } = button.props || button;
-        if (items) {
-          items.forEach(enableListener);
-        }
-        const hpCommand = commands?.find?.(isHangingProtocolCommand);
-        if (!hpCommand) {
-          return;
-        }
-        const {
-          protocolId,
-          stageIndex,
-          stageId
-        } = hpCommand.commandOptions;
-        const isActive = (!protocolId || protocolId === protocol.id) && (stageIndex === undefined || stageIndex === toggleStageIndex) && (!stageId || stageId === stage.id);
-        toolbarService.setToggled(button.id, isActive);
-      };
-      Object.values(toolbarService.getButtons()).forEach(enableListener);
-    },
     /**
      *  Sets the specified protocol
      *    1. Records any existing state using the viewport grid service
@@ -5565,24 +6350,19 @@ const commandsModule = _ref => {
      * @param options.stageIndex - the index of the stage to go to.
      * @param options.reset - flag to indicate if the HP should be reset to its original and not restored to a previous state
      */
-    setHangingProtocol: _ref3 => {
-      let {
-        activeStudyUID = '',
-        protocolId,
-        stageId,
-        stageIndex,
-        reset = false
-      } = _ref3;
-      const primaryToolBeforeHPChange = toolbarService.getActivePrimaryTool();
+    setHangingProtocol: ({
+      activeStudyUID = '',
+      protocolId,
+      stageId,
+      stageIndex,
+      reset = false
+    }) => {
       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
         // the activeViewportId
         const state = viewportGridService.getState();
         const hpInfo = hangingProtocolService.getState();
-        const {
-          protocol: oldProtocol
-        } = hangingProtocolService.getActiveProtocol();
         const stateSyncReduce = reuseCachedLayouts(state, hangingProtocolService, stateSyncService);
         const {
           hangingProtocolStageIndexMap,
@@ -5632,45 +6412,9 @@ const commandsModule = _ref => {
         // multi-study display.
         delete displaySetSelectorMap[`${activeStudyUID || hpInfo.activeStudyUID}:activeDisplaySet:0`];
         stateSyncService.store(stateSyncReduce);
-        // This is a default action applied
-        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) {
-          // 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);
         return true;
       } catch (e) {
         console.error(e);
-        actions.toggleHpTools();
         uiNotificationService.show({
           title: 'Apply Hanging Protocol',
           message: 'The hanging protocol could not be applied.',
@@ -5680,11 +6424,10 @@ const commandsModule = _ref => {
         return false;
       }
     },
-    toggleHangingProtocol: _ref4 => {
-      let {
-        protocolId,
-        stageIndex
-      } = _ref4;
+    toggleHangingProtocol: ({
+      protocolId,
+      stageIndex
+    }) => {
       const {
         protocol,
         stageIndex: desiredStageIndex,
@@ -5717,10 +6460,9 @@ const commandsModule = _ref => {
         });
       }
     },
-    deltaStage: _ref5 => {
-      let {
-        direction
-      } = _ref5;
+    deltaStage: ({
+      direction
+    }) => {
       const {
         protocolId,
         stageIndex: oldStageIndex
@@ -5746,11 +6488,10 @@ const commandsModule = _ref => {
     /**
      * Changes the viewport grid layout in terms of the MxN layout.
      */
-    setViewportGridLayout: _ref6 => {
-      let {
-        numRows,
-        numCols
-      } = _ref6;
+    setViewportGridLayout: ({
+      numRows,
+      numCols
+    }) => {
       const {
         protocol
       } = hangingProtocolService.getActiveProtocol();
@@ -5897,7 +6638,7 @@ const commandsModule = _ref => {
      *                      for `replace` is false
      */
     navigateHistory(historyArgs) {
-      index/* history */.m.navigate(historyArgs.to, historyArgs.options);
+      index/* history */.b.navigate(historyArgs.to, historyArgs.options);
     },
     openDICOMTagViewer() {
       const {
@@ -5920,6 +6661,7 @@ const commandsModule = _ref => {
           displaySetInstanceUID,
           onClose: UIModalService.hide
         },
+        containerDimensions: 'max-w-4xl max-h-4xl',
         title: 'DICOM Tag Browser'
       });
     },
@@ -5960,11 +6702,10 @@ const commandsModule = _ref => {
         behavior: 'smooth'
       });
     },
-    updateViewportDisplaySet: _ref7 => {
-      let {
-        direction,
-        excludeNonImageModalities
-      } = _ref7;
+    updateViewportDisplaySet: ({
+      direction,
+      excludeNonImageModalities
+    }) => {
       const nonImageModalities = ['SR', 'SEG', 'SM', 'RTSTRUCT', 'RTPLAN', 'RTDOSE'];
 
       // Sort the display sets as per the hanging protocol service viewport/display set scoring system.
@@ -6016,61 +6757,43 @@ const commandsModule = _ref => {
       commandFn: actions.closeContextMenu
     },
     clearMeasurements: {
-      commandFn: actions.clearMeasurements,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.clearMeasurements
     },
     displayNotification: {
-      commandFn: actions.displayNotification,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.displayNotification
     },
     setHangingProtocol: {
-      commandFn: actions.setHangingProtocol,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.setHangingProtocol
     },
     toggleHangingProtocol: {
-      commandFn: actions.toggleHangingProtocol,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.toggleHangingProtocol
     },
     navigateHistory: {
-      commandFn: actions.navigateHistory,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.navigateHistory
     },
     nextStage: {
       commandFn: actions.deltaStage,
-      storeContexts: [],
       options: {
         direction: 1
       }
     },
     previousStage: {
       commandFn: actions.deltaStage,
-      storeContexts: [],
       options: {
         direction: -1
       }
     },
     setViewportGridLayout: {
-      commandFn: actions.setViewportGridLayout,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.setViewportGridLayout
     },
     toggleOneUp: {
-      commandFn: actions.toggleOneUp,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.toggleOneUp
     },
     openDICOMTagViewer: {
       commandFn: actions.openDICOMTagViewer
     },
     updateViewportDisplaySet: {
-      commandFn: actions.updateViewportDisplaySet,
-      storeContexts: [],
-      options: {}
+      commandFn: actions.updateViewportDisplaySet
     }
   };
   return {
@@ -6480,6 +7203,9 @@ const defaultProtocol = {
   editableBy: {},
   protocolMatchingRules: [],
   toolGroupIds: ['default'],
+  hpInitiationCriteria: {
+    minSeriesLoaded: 1
+  },
   // -1 would be used to indicate active only, whereas other values are
   // the number of required priors referenced - so 0 means active with
   // 0 or more priors.
@@ -6524,7 +7250,6 @@ const defaultProtocol = {
       // studyMatchingRules: [],
     }
   },
-
   stages: [{
     name: 'default',
     viewportStructure: {
@@ -6550,7 +7275,6 @@ const defaultProtocol = {
         //   preset: 'middle', // 'first', 'last', 'middle'
         // },
       },
-
       displaySets: [{
         id: 'defaultDisplaySetId'
       }]
@@ -6582,8 +7306,8 @@ function getHangingProtocolModule() {
 
 
 function DataSourceSelector() {
-  const [appConfig] = (0,state/* useAppConfig */.M)();
-  const navigate = (0,dist/* useNavigate */.s0)();
+  const [appConfig] = (0,state/* useAppConfig */.r)();
+  const navigate = (0,dist/* useNavigate */.Zp)();
 
   // This is frowned upon, but the raw config is needed here to provide
   // the selector
@@ -6607,8 +7331,8 @@ function DataSourceSelector() {
     key: ds.sourceName
   }, /*#__PURE__*/react.createElement("h1", {
     className: "text-white"
-  }, ds.configuration?.friendlyName || ds.friendlyName), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
-    type: ui_src/* ButtonEnums.type */.LZ.dt.primary,
+  }, ds.configuration?.friendlyName || ds.friendlyName), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+    type: ui_src/* ButtonEnums.type */.Ny.NW.primary,
     className: classnames_default()('ml-2'),
     onClick: () => {
       navigate({
@@ -6624,15 +7348,14 @@ function DataSourceSelector() {
 
 
 
-function ItemListComponent(_ref) {
-  let {
-    itemLabel,
-    itemList,
-    onItemClicked
-  } = _ref;
+function ItemListComponent({
+  itemLabel,
+  itemList,
+  onItemClicked
+}) {
   const {
     t
-  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  } = (0,es/* useTranslation */.Bd)('DataSourceConfiguration');
   const [filterValue, setFilterValue] = (0,react.useState)('');
   (0,react.useEffect)(() => {
     setFilterValue('');
@@ -6643,18 +7366,18 @@ function ItemListComponent(_ref) {
     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, {
+  }, t(`Select ${itemLabel}`)), /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Cv, {
     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, {
+  }, itemList == null ? /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.Jx, {
     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, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
     name: "magnifier",
     className: "mb-4"
   }), /*#__PURE__*/react.createElement("span", null, t(`No ${itemLabel} available`))) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
@@ -6666,10 +7389,10 @@ function ItemListComponent(_ref) {
     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, {
+    }, /*#__PURE__*/react.createElement("div", null, item.name), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
       onClick: () => onItemClicked(item),
       className: "invisible group-hover:visible",
-      endIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+      endIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
         name: "arrow-left"
       })
     }, t('Select')));
@@ -6683,15 +7406,14 @@ function ItemListComponent(_ref) {
 
 
 const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
-function DataSourceConfigurationModalComponent(_ref) {
-  let {
-    configurationAPI,
-    configuredItems,
-    onHide
-  } = _ref;
+function DataSourceConfigurationModalComponent({
+  configurationAPI,
+  configuredItems,
+  onHide
+}) {
   const {
     t
-  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  } = (0,es/* useTranslation */.Bd)('DataSourceConfiguration');
   const [itemList, setItemList] = (0,react.useState)();
   const [selectedItems, setSelectedItems] = (0,react.useState)(configuredItems);
   const [errorMessage, setErrorMessage] = (0,react.useState)();
@@ -6765,9 +7487,9 @@ function DataSourceConfigurationModalComponent(_ref) {
         } : undefined
       }, /*#__PURE__*/react.createElement("div", {
         className: "text- flex items-center gap-2"
-      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
         name: "status-tracked"
-      }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+      }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
         name: "status-untracked"
       }), /*#__PURE__*/react.createElement("div", {
         className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES)
@@ -6795,18 +7517,17 @@ function DataSourceConfigurationModalComponent(_ref) {
 
 
 
-function DataSourceConfigurationComponent(_ref) {
-  let {
-    servicesManager,
-    extensionManager
-  } = _ref;
+function DataSourceConfigurationComponent({
+  servicesManager,
+  extensionManager
+}) {
   const {
     t
-  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  } = (0,es/* useTranslation */.Bd)('DataSourceConfiguration');
   const {
     show,
     hide
-  } = (0,ui_src/* useModal */.dd)();
+  } = (0,ui_src/* useModal */.hS)();
   const {
     customizationService
   } = servicesManager.services;
@@ -6865,7 +7586,7 @@ function DataSourceConfigurationComponent(_ref) {
   }, [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, {
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
     name: "settings",
     className: "mr-2.5 h-3.5 w-3.5 shrink-0 cursor-pointer",
     onClick: showConfigurationModal
@@ -7017,9 +7738,7 @@ class GoogleCloudDataSourceConfigurationAPI {
    * @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] : {};
+  static async _doFetch(urlStr, fetchItemType, fetchOptions = {}, fetchSearchParams = {}) {
     try {
       const url = new URL(urlStr);
       url.search = new URLSearchParams(fetchSearchParams).toString();
@@ -7055,6 +7774,7 @@ class GoogleCloudDataSourceConfigurationAPI {
 
 
 
+
 /**
  *
  * Note: this is an example of how the customization module can be used
@@ -7064,11 +7784,10 @@ class GoogleCloudDataSourceConfigurationAPI {
  * custom page for the user to view their profile, or to add a custom
  * page for login etc.
  */
-function getCustomizationModule(_ref) {
-  let {
-    servicesManager,
-    extensionManager
-  } = _ref;
+function getCustomizationModule({
+  servicesManager,
+  extensionManager
+}) {
   return [{
     name: 'helloPage',
     value: {
@@ -7193,14 +7912,65 @@ function getCustomizationModule(_ref) {
       // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
       id: 'ohif.dataSourceConfigurationAPI.google',
       factory: dataSourceName => new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager)
+    }, {
+      id: 'progressDropdownWithServiceComponent',
+      component: ProgressDropdownWithService_ProgressDropdownWithService
     }]
   }];
 }
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/LineChartViewport/LineChartViewport.tsx
+
+
+const LineChartViewport = ({
+  displaySets
+}) => {
+  const displaySet = displaySets[0];
+  const {
+    axis: chartAxis,
+    series: chartSeries
+  } = displaySet.instance.chartData;
+  return /*#__PURE__*/react.createElement(ui_src/* LineChart */.bl, {
+    showLegend: true,
+    legendWidth: 150,
+    axis: {
+      x: {
+        label: chartAxis.x.label,
+        indexRef: 0,
+        type: 'x',
+        range: {
+          min: 0
+        }
+      },
+      y: {
+        label: chartAxis.y.label,
+        indexRef: 1,
+        type: 'y'
+      }
+    },
+    series: chartSeries
+  });
+};
+
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/LineChartViewport/index.ts
+
+;// CONCATENATED MODULE: ../../../extensions/default/src/getViewportModule.tsx
+
+const getViewportModule = ({
+  servicesManager,
+  commandsManager,
+  extensionManager
+}) => {
+  return [{
+    name: 'chartViewport',
+    component: LineChartViewport
+  }];
+};
+
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/calculate-suv/dist/calculate-suv.esm.js
-var calculate_suv_esm = __webpack_require__(15747);
+var calculate_suv_esm = __webpack_require__(79717);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getPTImageIdInstanceMetadata.ts
 
-const getPTImageIdInstanceMetadata_metadataProvider = src["default"].classes.MetadataProvider;
+const getPTImageIdInstanceMetadata_metadataProvider = src/* default.classes */.Ay.classes.MetadataProvider;
 function getPTImageIdInstanceMetadata(imageId) {
   const dicomMetaData = getPTImageIdInstanceMetadata_metadataProvider.get('instance', imageId);
   if (!dicomMetaData) {
@@ -7276,14 +8046,18 @@ const init_metadataProvider = src.classes.MetadataProvider;
  * @param {Object} servicesManager
  * @param {Object} configuration
  */
-function init(_ref) {
-  let {
-    servicesManager,
-    configuration = {}
-  } = _ref;
+function init({
+  servicesManager,
+  configuration = {},
+  commandsManager
+}) {
   const {
-    stateSyncService
+    stateSyncService,
+    toolbarService,
+    cineService,
+    viewportGridService
   } = servicesManager.services;
+  toolbarService.registerEventForToolbarUpdate(cineService, [cineService.EVENTS.CINE_STATE_CHANGED]);
   // Add
   src.DicomMetadataStore.subscribe(src.DicomMetadataStore.EVENTS.INSTANCES_ADDED, handlePETImageMetadata);
 
@@ -7298,6 +8072,12 @@ function init(_ref) {
     clearOnModeExit: true
   });
 
+  // uiStateStore is a sync state which stores the relevant
+  // UI state for the viewer
+  stateSyncService.register('uiStateStore', {
+    clearOnModeExit: true
+  });
+
   // displaySetSelectorMap stores a map from
   // `<activeStudyUID>:<displaySetSelectorId>:<matchOffset>` to
   // a displaySetInstanceUID, used to display named display sets in
@@ -7314,7 +8094,7 @@ function init(_ref) {
   });
 
   // Stores a map from the to be applied hanging protocols `<activeStudyUID>:<protocolId>`
-  // to the previously applied hanging protolStageIndexMap key, in order to toggle
+  // to the previously applied hanging protocolStageIndexMap key, in order to toggle
   // off the applied protocol and remember the old state.
   stateSyncService.register('toggleHangingProtocol', {
     clearOnModeExit: true
@@ -7326,44 +8106,83 @@ function init(_ref) {
   stateSyncService.register('viewportsByPosition', {
     clearOnModeExit: true
   });
+
+  // Function to process and subscribe to events for a given set of commands and listeners
+  const subscribeToEvents = listeners => {
+    Object.entries(listeners).forEach(([event, commands]) => {
+      const supportedEvents = [viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED, viewportGridService.EVENTS.VIEWPORTS_READY];
+      if (supportedEvents.includes(event)) {
+        viewportGridService.subscribe(event, eventData => {
+          const viewportId = eventData?.viewportId ?? viewportGridService.getActiveViewportId();
+          commandsManager.run(commands, {
+            viewportId
+          });
+        });
+      }
+    });
+  };
+  toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_MODIFIED, state => {
+    const {
+      buttons
+    } = state;
+    for (const [id, button] of Object.entries(buttons)) {
+      const {
+        groupId,
+        items,
+        listeners
+      } = button.props || {};
+
+      // Handle group items' listeners
+      if (groupId && items) {
+        items.forEach(item => {
+          if (item.listeners) {
+            subscribeToEvents(item.listeners);
+          }
+        });
+      }
+
+      // Handle button listeners
+      if (listeners) {
+        subscribeToEvents(listeners);
+      }
+    }
+  });
 }
-const handlePETImageMetadata = _ref2 => {
-  let {
-    SeriesInstanceUID,
-    StudyInstanceUID
-  } = _ref2;
+const handlePETImageMetadata = ({
+  SeriesInstanceUID,
+  StudyInstanceUID
+}) => {
   const {
     instances
   } = src.DicomMetadataStore.getSeries(StudyInstanceUID, SeriesInstanceUID);
+  if (!instances?.length) {
+    return;
+  }
   const modality = instances[0].Modality;
-  if (modality !== 'PT') {
+  if (!modality || modality !== 'PT') {
     return;
   }
   const imageIds = instances.map(instance => instance.imageId);
   const instanceMetadataArray = [];
-  imageIds.forEach(imageId => {
-    const instanceMetadata = getPTImageIdInstanceMetadata(imageId);
-    if (instanceMetadata) {
-      instanceMetadataArray.push(instanceMetadata);
-    }
-  });
-  if (!instanceMetadataArray.length) {
-    return;
-  }
 
   // try except block to prevent errors when the metadata is not correct
-  let suvScalingFactors;
   try {
-    suvScalingFactors = (0,calculate_suv_esm/* calculateSUVScalingFactors */.d)(instanceMetadataArray);
+    imageIds.forEach(imageId => {
+      const instanceMetadata = getPTImageIdInstanceMetadata(imageId);
+      if (instanceMetadata) {
+        instanceMetadataArray.push(instanceMetadata);
+      }
+    });
+    if (!instanceMetadataArray.length) {
+      return;
+    }
+    const suvScalingFactors = (0,calculate_suv_esm/* calculateSUVScalingFactors */.C)(instanceMetadataArray);
+    instanceMetadataArray.forEach((instanceMetadata, index) => {
+      init_metadataProvider.addCustomMetadata(imageIds[index], 'scalingModule', suvScalingFactors[index]);
+    });
   } catch (error) {
     console.log(error);
   }
-  if (!suvScalingFactors) {
-    return;
-  }
-  instanceMetadataArray.forEach((instanceMetadata, index) => {
-    init_metadataProvider.addCustomMetadata(imageIds[index], 'scalingModule', suvScalingFactors[index]);
-  });
 };
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/utils/index.ts
 
@@ -7384,6 +8203,8 @@ const handlePETImageMetadata = _ref2 => {
 
 
 
+
+
 const defaultExtension = {
   /**
    * Only required property. Should be a unique value across all extensions.
@@ -7391,16 +8212,16 @@ const defaultExtension = {
   id: id,
   preRegistration: init,
   getDataSourcesModule: src_getDataSourcesModule,
+  getViewportModule: getViewportModule,
   getLayoutTemplateModule: getLayoutTemplateModule,
   getPanelModule: src_getPanelModule,
   getHangingProtocolModule: src_getHangingProtocolModule,
   getSopClassHandlerModule: src_getSopClassHandlerModule,
   getToolbarModule: getToolbarModule,
   getCommandsModule: src_commandsModule,
-  getUtilityModule(_ref) {
-    let {
-      servicesManager
-    } = _ref;
+  getUtilityModule({
+    servicesManager
+  }) {
     return [{
       name: 'common',
       exports: {