@ohif/app 3.7.0-beta.33 → 3.7.0-beta.36

package/dist/{app.bundle.543496e18d21f3595028.js → app.bundle.53e7fd8f8335245828d8.js}

@@ -4207,16 +4207,15 @@ exports.Z = function (file, acceptedFiles) {
 
 /***/ }),
 
-/***/ 39852:
+/***/ 42492:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  Nr: () => (/* reexport */ useDebounce),
-  aM: () => (/* reexport */ useQuery),
-  lr: () => (/* reexport */ useSearchParams)
+  N: () => (/* reexport */ useDebounce),
+  l: () => (/* reexport */ useSearchParams/* default */.Z)
 });
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
@@ -4250,35 +4249,48 @@ function useDebounce(value, delay) {
 
   return debouncedValue;
 }
-// EXTERNAL MODULE: ../node_modules/react-router-dom/dist/index.js
-var dist = __webpack_require__(65783);
-;// CONCATENATED MODULE: ./hooks/useQuery.js
+// EXTERNAL MODULE: ./hooks/useSearchParams.ts
+var useSearchParams = __webpack_require__(2318);
+;// CONCATENATED MODULE: ./hooks/index.js
 
-function useQuery() {
-  return new URLSearchParams((0,dist/* useLocation */.TH)().search);
-}
-;// CONCATENATED MODULE: ./hooks/useSearchParams.js
+
+
+
+/***/ }),
+
+/***/ 2318:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Z: () => (/* binding */ useSearchParams)
+/* harmony export */ });
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(14935);
 
 
 /**
- * It returns a Map of the query parameters in the URL, where the keys are
- * lowercase
- * @returns A function that returns a Map of the query parameters.
+ * It returns a URLSearchParams of the query parameters in the URL, where the keys are
+ * either lowercase or maintain their case based on the lowerCaseKeys parameter.
+ * @param {lowerCaseKeys:boolean} true to return lower case keys; false (default) to maintain casing;
+ * @returns {URLSearchParams}
  */
 function useSearchParams() {
-  const query = useQuery();
-  // make query params case-insensitive
-  const searchParams = new Map();
-  for (const [key, value] of query) {
-    searchParams.set(key.toLowerCase(), value);
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    lowerCaseKeys: false
+  };
+  const {
+    lowerCaseKeys
+  } = options;
+  const searchParams = new URLSearchParams((0,react_router__WEBPACK_IMPORTED_MODULE_0__/* .useLocation */ .TH)().search);
+  if (!lowerCaseKeys) {
+    return searchParams;
   }
-  return searchParams;
+  const lowerCaseSearchParams = new URLSearchParams();
+  for (const [key, value] of searchParams) {
+    lowerCaseSearchParams.set(key.toLowerCase(), value);
+  }
+  return lowerCaseSearchParams;
 }
-;// CONCATENATED MODULE: ./hooks/index.js
-
-
-
-
 
 /***/ }),
 
@@ -4334,10 +4346,12 @@ Compose.propTypes = {
 var ui_src = __webpack_require__(28619);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(22896);
-// EXTERNAL MODULE: ../../core/src/index.ts + 102 modules
-var core_src = __webpack_require__(62771);
+// EXTERNAL MODULE: ../../core/src/index.ts + 103 modules
+var core_src = __webpack_require__(87754);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
 var react_router_dist = __webpack_require__(14935);
+// EXTERNAL MODULE: ./hooks/useSearchParams.ts
+var useSearchParams = __webpack_require__(2318);
 ;// CONCATENATED MODULE: ./routes/DataSourceWrapper.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); }
 /* eslint-disable react/jsx-props-no-spreading */
@@ -4348,6 +4362,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
+/**
+ * Determines if two React Router location objects are the same.
+ */
+const areLocationsTheSame = (location0, location1) => {
+  return location0.pathname === location1.pathname && location0.search === location1.search && location0.hash === location1.hash;
+};
+
 /**
  * Uses route properties to determine the data source that should be passed
  * to the child layout template. In some instances, initiates requests and
@@ -4363,33 +4385,10 @@ function DataSourceWrapper(props) {
   } = props;
   const params = (0,react_router_dist/* useParams */.UO)();
   const location = (0,react_router_dist/* useLocation */.TH)();
-
-  // TODO - get the variable from the props all the time...
-  let dataSourceName = new URLSearchParams(location.search).get('datasources');
-  const dataPath = dataSourceName ? `/${dataSourceName}` : '';
-  if (!dataSourceName && window.config.defaultDataSourceName) {
-    dataSourceName = window.config.defaultDataSourceName;
-  } else if (!dataSourceName) {
-    // Gets the first defined datasource with the right name
-    // Mostly for historical reasons - new configs should use the defaultDataSourceName
-    const dataSourceModules = extensionManager.modules[core_src/* MODULE_TYPES */.OB.DATA_SOURCE];
-    // TODO: Good usecase for flatmap?
-    const webApiDataSources = dataSourceModules.reduce((acc, curr) => {
-      const mods = [];
-      curr.module.forEach(mod => {
-        if (mod.type === 'webApi') {
-          mods.push(mod);
-        }
-      });
-      return acc.concat(mods);
-    }, []);
-    dataSourceName = webApiDataSources.map(ds => ds.name).find(it => extensionManager.getDataSources(it)?.[0] !== undefined);
-  }
-  const dataSource = extensionManager.getDataSources(dataSourceName)?.[0];
-  if (!dataSource) {
-    throw new Error(`No data source found for ${dataSourceName}`);
-  }
-
+  const lowerCaseSearchParams = (0,useSearchParams/* default */.Z)({
+    lowerCaseKeys: true
+  });
+  const query = (0,useSearchParams/* default */.Z)();
   // Route props --> studies.mapParams
   // mapParams --> studies.search
   // studies.search --> studies.processResults
@@ -4404,9 +4403,84 @@ function DataSourceWrapper(props) {
     pageNumber: 1,
     location: 'Not a valid location, causes first load to occur'
   };
+  const getInitialDataSourceName = (0,react.useCallback)(() => {
+    // TODO - get the variable from the props all the time...
+    let dataSourceName = lowerCaseSearchParams.get('datasources');
+    if (!dataSourceName && window.config.defaultDataSourceName) {
+      return '';
+    }
+    if (!dataSourceName) {
+      // Gets the first defined datasource with the right name
+      // Mostly for historical reasons - new configs should use the defaultDataSourceName
+      const dataSourceModules = extensionManager.modules[core_src/* MODULE_TYPES */.OB.DATA_SOURCE];
+      // TODO: Good usecase for flatmap?
+      const webApiDataSources = dataSourceModules.reduce((acc, curr) => {
+        const mods = [];
+        curr.module.forEach(mod => {
+          if (mod.type === 'webApi') {
+            mods.push(mod);
+          }
+        });
+        return acc.concat(mods);
+      }, []);
+      dataSourceName = webApiDataSources.map(ds => ds.name).find(it => extensionManager.getDataSources(it)?.[0] !== undefined);
+    }
+    return dataSourceName;
+  }, []);
+  const [isDataSourceInitialized, setIsDataSourceInitialized] = (0,react.useState)(false);
+
+  // The path to the data source to be used in the URL for a mode (e.g. mode/dataSourcePath?StudyIntanceUIDs=1.2.3)
+  const [dataSourcePath, setDataSourcePath] = (0,react.useState)(() => {
+    const dataSourceName = getInitialDataSourceName();
+    return dataSourceName ? `/${dataSourceName}` : '';
+  });
+  const [dataSource, setDataSource] = (0,react.useState)(() => {
+    const dataSourceName = getInitialDataSourceName();
+    if (!dataSourceName) {
+      return extensionManager.getActiveDataSource()[0];
+    }
+    const dataSource = extensionManager.getDataSources(dataSourceName)?.[0];
+    if (!dataSource) {
+      throw new Error(`No data source found for ${dataSourceName}`);
+    }
+    return dataSource;
+  });
   const [data, setData] = (0,react.useState)(DEFAULT_DATA);
   const [isLoading, setIsLoading] = (0,react.useState)(false);
+
+  /**
+   * The effect to initialize the data source whenever it changes. Similar to
+   * whenever a different Mode is entered, the Mode's data source is initialized, so
+   * too this DataSourceWrapper must initialize its data source whenever a different
+   * data source is activated. Furthermore, a data source might be initialized
+   * several times as it gets activated/deactivated because the location URL
+   * might change and data sources initialize based on the URL.
+   */
+  (0,react.useEffect)(() => {
+    const initializeDataSource = async () => {
+      await dataSource.initialize({
+        params,
+        query
+      });
+      setIsDataSourceInitialized(true);
+    };
+    initializeDataSource();
+  }, [dataSource]);
   (0,react.useEffect)(() => {
+    const dataSourceChangedCallback = () => {
+      setIsDataSourceInitialized(false);
+      setDataSourcePath('');
+      setDataSource(extensionManager.getActiveDataSource()[0]);
+      // Setting data to DEFAULT_DATA triggers a new query just like it does for the initial load.
+      setData(DEFAULT_DATA);
+    };
+    const sub = extensionManager.subscribe(core_src/* ExtensionManager */.W$.EVENTS.ACTIVE_DATA_SOURCE_CHANGED, dataSourceChangedCallback);
+    return () => sub.unsubscribe();
+  }, []);
+  (0,react.useEffect)(() => {
+    if (!isDataSourceInitialized) {
+      return;
+    }
     const queryFilterValues = _getQueryFilterValues(location.search, STUDIES_LIMIT);
 
     // 204: no content
@@ -4429,7 +4503,10 @@ function DataSourceWrapper(props) {
       const isSamePage = data.pageNumber === queryFilterValues.pageNumber;
       const previousOffset = Math.floor(data.pageNumber * data.resultsPerPage / STUDIES_LIMIT) * (STUDIES_LIMIT - 1);
       const newOffset = Math.floor(queryFilterValues.pageNumber * queryFilterValues.resultsPerPage / STUDIES_LIMIT) * (STUDIES_LIMIT - 1);
-      const isLocationUpdated = data.location !== location;
+      // Simply checking data.location !== location is not sufficient because even though the location href (i.e. entire URL)
+      // has not changed, the React Router still provides a new location reference and would result in two study queries
+      // on initial load. Alternatively, window.location.href could be used.
+      const isLocationUpdated = typeof data.location === 'string' || !areLocationsTheSame(data.location, location);
       const isDataInvalid = !isSamePage || !isLoading && (newOffset !== previousOffset || isLocationUpdated);
       if (isDataInvalid) {
         getData();
@@ -4438,13 +4515,13 @@ function DataSourceWrapper(props) {
       console.warn(ex);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, location, params, isLoading, setIsLoading]);
+  }, [data, location, params, isLoading, setIsLoading, dataSource, isDataSourceInitialized]);
   // queryFilterValues
 
   // TODO: Better way to pass DataSource?
   return /*#__PURE__*/react.createElement(LayoutTemplate, _extends({}, rest, {
     data: data.studies,
-    dataPath: dataPath,
+    dataPath: dataSourcePath,
     dataTotal: data.total,
     dataSource: dataSource,
     isLoadingData: isLoading
@@ -4777,8 +4854,8 @@ const filtersMeta = [{
   gridCol: 2
 }];
 /* harmony default export */ const WorkList_filtersMeta = (filtersMeta);
-// EXTERNAL MODULE: ./hooks/index.js + 3 modules
-var hooks = __webpack_require__(39852);
+// EXTERNAL MODULE: ./hooks/index.js + 1 modules
+var hooks = __webpack_require__(42492);
 ;// CONCATENATED MODULE: ./routes/WorkList/WorkList.tsx
 
 
@@ -4834,7 +4911,7 @@ function WorkList(_ref) {
   // ~ Modes
   const [appConfig] = (0,state/* useAppConfig */.M)();
   // ~ Filters
-  const searchParams = (0,hooks/* useSearchParams */.lr)();
+  const searchParams = (0,hooks/* useSearchParams */.l)();
   const navigate = (0,dist/* useNavigate */.s0)();
   const STUDIES_LIMIT = 101;
   const queryFilterValues = WorkList_getQueryFilterValues(searchParams);
@@ -4842,7 +4919,7 @@ function WorkList(_ref) {
     ...defaultFilterValues,
     ...queryFilterValues
   });
-  const debouncedFilterValues = (0,hooks/* useDebounce */.Nr)(filterValues, 200);
+  const debouncedFilterValues = (0,hooks/* useDebounce */.N)(filterValues, 200);
   const {
     resultsPerPage,
     pageNumber,
@@ -4890,6 +4967,9 @@ function WorkList(_ref) {
   const [expandedRows, setExpandedRows] = (0,react.useState)([]);
   const [studiesWithSeriesData, setStudiesWithSeriesData] = (0,react.useState)([]);
   const numOfStudies = studiesTotal;
+  const querying = (0,react.useMemo)(() => {
+    return isLoadingData || expandedRows.length > 0;
+  }, [isLoadingData, expandedRows]);
   const setFilterValues = val => {
     if (filterValues.pageNumber === val.pageNumber) {
       val.pageNumber = 1;
@@ -4985,6 +5065,7 @@ function WorkList(_ref) {
       }
       fetchSeries(studyInstanceUid);
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [expandedRows, studies]);
   const isFiltering = (filterValues, defaultFilterValues) => {
@@ -5118,8 +5199,8 @@ function WorkList(_ref) {
     };
   });
   const hasStudies = numOfStudies > 0;
-  const versionNumber = "3.7.0-beta.33";
-  const commitHash = "18156bb7b1cc24c47beadb0a6acd31db7fa076a3";
+  const versionNumber = "3.7.0-beta.36";
+  const commitHash = "7bbc213f58a1be3560c0414242549007885d0f13";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -5169,7 +5250,7 @@ function WorkList(_ref) {
   const {
     component: dicomUploadComponent
   } = customizationService.get('dicomUploadComponent') ?? {};
-  const uploadProps = dicomUploadComponent && dataSource.getConfig().dicomUploadEnabled ? {
+  const uploadProps = dicomUploadComponent && dataSource.getConfig()?.dicomUploadEnabled ? {
     title: 'Upload files',
     closeButton: true,
     shouldCloseOnEsc: false,
@@ -5214,6 +5295,7 @@ function WorkList(_ref) {
   }, /*#__PURE__*/react.createElement(ui_src/* StudyListTable */.X7, {
     tableDataSource: tableDataSource.slice(offset, offsetAndTake),
     numOfStudies: numOfStudies,
+    querying: querying,
     filtersMeta: WorkList_filtersMeta
   }), /*#__PURE__*/react.createElement("div", {
     className: "grow"
@@ -6053,15 +6135,15 @@ async function loadModule(module) {
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(331), __webpack_require__.e(270), __webpack_require__.e(935), __webpack_require__.e(728), __webpack_require__.e(625)]).then(__webpack_require__.bind(__webpack_require__, 39501));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(389), __webpack_require__.e(270), __webpack_require__.e(935), __webpack_require__.e(728), __webpack_require__.e(625)]).then(__webpack_require__.bind(__webpack_require__, 39501));
     return imported.default;
   }
   if (module === "@ohif/extension-measurement-tracking") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(331), __webpack_require__.e(270), __webpack_require__.e(606), __webpack_require__.e(531), __webpack_require__.e(984), __webpack_require__.e(744)]).then(__webpack_require__.bind(__webpack_require__, 43744));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(389), __webpack_require__.e(270), __webpack_require__.e(606), __webpack_require__.e(531), __webpack_require__.e(984), __webpack_require__.e(744)]).then(__webpack_require__.bind(__webpack_require__, 43744));
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone-dicom-sr") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(331), __webpack_require__.e(270), __webpack_require__.e(606), __webpack_require__.e(984)]).then(__webpack_require__.bind(__webpack_require__, 65948));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(389), __webpack_require__.e(270), __webpack_require__.e(606), __webpack_require__.e(984)]).then(__webpack_require__.bind(__webpack_require__, 65948));
     return imported.default;
   }
   if (module === "@ohif/extension-cornerstone-dicom-seg") {
@@ -6081,7 +6163,7 @@ async function loadModule(module) {
     return imported.default;
   }
   if (module === "@ohif/extension-tmtv") {
-    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(331), __webpack_require__.e(270), __webpack_require__.e(283)]).then(__webpack_require__.bind(__webpack_require__, 66135));
+    const imported = await Promise.all(/* import() */[__webpack_require__.e(780), __webpack_require__.e(381), __webpack_require__.e(389), __webpack_require__.e(270), __webpack_require__.e(283)]).then(__webpack_require__.bind(__webpack_require__, 66135));
     return imported.default;
   }
   if (module === "@ohif/extension-test") {
@@ -6215,9 +6297,15 @@ function ModeRoute(_ref3) {
   } = _ref3;
   // Parse route params/querystring
   const location = (0,react_router_dist/* useLocation */.TH)();
-  const query = (0,hooks/* useQuery */.aM)();
+
+  // The react router DOM placeholder map (see https://reactrouter.com/en/main/hooks/use-params).
   const params = (0,react_router_dist/* useParams */.UO)();
-  const searchParams = (0,hooks/* useSearchParams */.lr)();
+  // The URL's query search parameters where the keys casing is maintained
+  const query = (0,hooks/* useSearchParams */.l)();
+  // The URL's query search parameters where the keys are all lower case.
+  const lowerCaseSearchParams = (0,hooks/* useSearchParams */.l)({
+    lowerCaseKeys: true
+  });
   const [studyInstanceUIDs, setStudyInstanceUIDs] = (0,react.useState)();
   const [refresh, setRefresh] = (0,react.useState)(false);
   const [ExtensionDependenciesLoaded, setExtensionDependenciesLoaded] = (0,react.useState)(false);
@@ -6242,8 +6330,8 @@ function ModeRoute(_ref3) {
     hotkeys: hotkeyObj,
     hangingProtocol
   } = mode;
-  const runTimeHangingProtocolId = searchParams.get('hangingprotocolid');
-  const token = searchParams.get('token');
+  const runTimeHangingProtocolId = lowerCaseSearchParams.get('hangingprotocolid');
+  const token = lowerCaseSearchParams.get('token');
   if (token) {
     // if a token is passed in, set the userAuthenticationService to use it
     // for the Authorization header for all requests
@@ -6269,10 +6357,11 @@ function ModeRoute(_ref3) {
   // Preserve the old array interface for hotkeys
   const hotkeys = Array.isArray(hotkeyObj) ? hotkeyObj : hotkeyObj?.hotkeys;
   const hotkeyName = hotkeyObj?.name || 'hotkey-definitions-v2';
-  if (dataSourceName === undefined) {
-    dataSourceName = extensionManager.defaultDataSourceName;
+
+  // An undefined dataSourceName implies that the active data source that is already set in the ExtensionManager should be used.
+  if (dataSourceName !== undefined) {
+    extensionManager.setActiveDataSource(dataSourceName);
   }
-  extensionManager.setActiveDataSource(dataSourceName);
   const dataSource = extensionManager.getActiveDataSource()[0];
 
   // Only handling one route per mode for now
@@ -6335,11 +6424,14 @@ function ModeRoute(_ref3) {
 
     // Todo: this should not be here, data source should not care about params
     const initializeDataSource = async (params, query) => {
-      const studyInstanceUIDs = await dataSource.initialize({
+      await dataSource.initialize({
         params,
         query
       });
-      setStudyInstanceUIDs(studyInstanceUIDs);
+      setStudyInstanceUIDs(dataSource.getStudyInstanceUIDs({
+        params,
+        query
+      }));
     };
     initializeDataSource(params, query);
     return () => {
@@ -6574,15 +6666,14 @@ function buildModeRoutes(_ref) {
         private: true
       });
     });
-    const defaultDataSourceName = extensionManager.defaultDataSourceName;
 
-    // Add default DataSource route.
+    // Add active DataSource route.
+    // This is the DataSource route for the active data source defined in ExtensionManager.getActiveDataSource
     const path = `/${mode.routeName}`;
 
     // TODO move up.
     const children = () => /*#__PURE__*/react.createElement(ModeRoute, {
       mode: mode,
-      dataSourceName: defaultDataSourceName,
       extensionManager: extensionManager,
       servicesManager: servicesManager,
       commandsManager: commandsManager,
@@ -6677,7 +6768,8 @@ const createRoutes = _ref => {
     private: true,
     props: {
       children: WorkList_WorkList,
-      servicesManager
+      servicesManager,
+      extensionManager
     }
   };
   const customRoutes = customizationService.getGlobalCustomization('customRoutes');
@@ -7448,7 +7540,7 @@ function _getImageOrientationPatient(image) {
 
 /***/ }),
 
-/***/ 62771:
+/***/ 87754:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -7515,379 +7607,6 @@ const log = {
   timeEnd: console.timeEnd
 };
 /* harmony default export */ const src_log = (log);
-;// CONCATENATED MODULE: ../../core/src/extensions/ExtensionManager.ts
-
-
-
-/**
- * This is the arguments given to create the extension.
- */
-
-/**
- * The configuration of an extension.
- * This uses type as the extension manager only knows that the configuration
- * is an object of some sort, and doesn't know anything else about it.
- */
-
-/**
- * The parameters passed to the extension.
- */
-
-/**
- * The type of an actual extension instance.
- * This is an interface as it declares possible calls, but extensions can
- * have more values than this.
- */
-
-class ExtensionManager {
-  constructor(_ref) {
-    var _this = this;
-    let {
-      commandsManager,
-      servicesManager,
-      hotkeysManager,
-      appConfig = {}
-    } = _ref;
-    this._commandsManager = void 0;
-    this._servicesManager = void 0;
-    this._hotkeysManager = void 0;
-    /**
-     * An array of extensions, or an array of arrays that contains extension
-     * configuration pairs.
-     *
-     * @param {Object[]} extensions - Array of extensions
-     */
-    this.registerExtensions = async function (extensions) {
-      let dataSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      // Todo: we ideally should be able to run registrations in parallel
-      // but currently since some extensions need to be registered before
-      // others, we need to run them sequentially. We need a postInit hook
-      // to avoid this sequential async registration
-      for (let i = 0; i < extensions.length; i++) {
-        const extension = extensions[i];
-        const hasConfiguration = Array.isArray(extension);
-        try {
-          if (hasConfiguration) {
-            // Important: for some reason in the line below the type
-            // of extension is not recognized as [ExtensionRegister,
-            // ExtensionConfiguration] by babel DON"T CHANGE IT
-            // Same for the for loop above don't use
-            // for (const extension of extensions)
-            const ohifExtension = extension[0];
-            const configuration = extension[1];
-            await _this.registerExtension(ohifExtension, configuration, dataSources);
-          } else {
-            await _this.registerExtension(extension, {}, dataSources);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    };
-    /**
-     *
-     * TODO: Id Management: SopClassHandlers currently refer to viewport module by id; setting the extension id as viewport module id is a workaround for now
-     * @param {Object} extension
-     * @param {Object} configuration
-     */
-    this.registerExtension = async function (extension) {
-      let configuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      let dataSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-      if (!extension) {
-        throw new Error('Attempting to register a null/undefined extension.');
-      }
-      const extensionId = extension.id;
-      if (!extensionId) {
-        // Note: Mode framework cannot function without IDs.
-        src_log.warn(extension);
-        throw new Error(`Extension ID not set`);
-      }
-      if (_this.registeredExtensionIds.includes(extensionId)) {
-        src_log.warn(`Extension ID ${extensionId} has already been registered. Exiting before duplicating modules.`);
-        return;
-      }
-
-      // preRegistrationHook
-      if (extension.preRegistration) {
-        await extension.preRegistration({
-          servicesManager: _this._servicesManager,
-          commandsManager: _this._commandsManager,
-          hotkeysManager: _this._hotkeysManager,
-          extensionManager: _this,
-          appConfig: _this._appConfig,
-          configuration
-        });
-      }
-      if (extension.onModeEnter) {
-        _this._extensionLifeCycleHooks.onModeEnter[extensionId] = extension.onModeEnter;
-      }
-      if (extension.onModeExit) {
-        _this._extensionLifeCycleHooks.onModeExit[extensionId] = extension.onModeExit;
-      }
-
-      // Register Modules
-      _this.moduleTypeNames.forEach(moduleType => {
-        const extensionModule = _this._getExtensionModule(moduleType, extension, extensionId, configuration);
-        if (extensionModule) {
-          switch (moduleType) {
-            case MODULE_TYPES.COMMANDS:
-              _this._initCommandsModule(extensionModule);
-              break;
-            case MODULE_TYPES.DATA_SOURCE:
-              _this._initDataSourcesModule(extensionModule, extensionId, dataSources);
-              break;
-            case MODULE_TYPES.HANGING_PROTOCOL:
-              _this._initHangingProtocolsModule(extensionModule, extensionId);
-            case MODULE_TYPES.TOOLBAR:
-            case MODULE_TYPES.VIEWPORT:
-            case MODULE_TYPES.PANEL:
-            case MODULE_TYPES.SOP_CLASS_HANDLER:
-            case MODULE_TYPES.CONTEXT:
-            case MODULE_TYPES.LAYOUT_TEMPLATE:
-            case MODULE_TYPES.CUSTOMIZATION:
-            case MODULE_TYPES.STATE_SYNC:
-            case MODULE_TYPES.UTILITY:
-              // Default for most extension points,
-              // Just adds each entry ready for consumption by mode.
-              extensionModule.forEach(element => {
-                if (!element.name) {
-                  throw new Error(`Extension ID ${extensionId} module ${moduleType} element has no name`);
-                }
-                const id = `${extensionId}.${moduleType}.${element.name}`;
-                element.id = id;
-                _this.modulesMap[id] = element;
-              });
-              break;
-            default:
-              throw new Error(`Module type invalid: ${moduleType}`);
-          }
-          _this.modules[moduleType].push({
-            extensionId,
-            module: extensionModule
-          });
-        }
-      });
-
-      // Track extension registration
-      _this.registeredExtensionIds.push(extensionId);
-    };
-    this.getModuleEntry = stringEntry => {
-      return this.modulesMap[stringEntry];
-    };
-    this.getDataSources = dataSourceName => {
-      if (dataSourceName === undefined) {
-        // Default to the activeDataSource
-        dataSourceName = this.activeDataSource;
-      }
-
-      // Note: this currently uses the data source name, which feels weird...
-      return this.dataSourceMap[dataSourceName];
-    };
-    this.getActiveDataSource = () => {
-      return this.dataSourceMap[this.activeDataSource];
-    };
-    this.getDataSource = () => {
-      return this.dataSourceMap[this.activeDataSource];
-    };
-    /**
-     * @private
-     * @param {string} moduleType
-     * @param {Object} extension
-     * @param {string} extensionId - Used for logging warnings
-     */
-    this._getExtensionModule = (moduleType, extension, extensionId, configuration) => {
-      const getModuleFnName = 'get' + _capitalizeFirstCharacter(moduleType);
-      const getModuleFn = extension[getModuleFnName];
-      if (!getModuleFn) {
-        return;
-      }
-      try {
-        const extensionModule = extension[getModuleFnName]({
-          appConfig: this._appConfig,
-          commandsManager: this._commandsManager,
-          servicesManager: this._servicesManager,
-          hotkeysManager: this._hotkeysManager,
-          extensionManager: this,
-          configuration
-        });
-        if (!extensionModule) {
-          src_log.warn(`Null or undefined returned when registering the ${getModuleFnName} module for the ${extensionId} extension`);
-        }
-        return extensionModule;
-      } catch (ex) {
-        console.log(ex);
-        throw new Error(`Exception thrown while trying to call ${getModuleFnName} for the ${extensionId} extension`);
-      }
-    };
-    this._initHangingProtocolsModule = (extensionModule, extensionId) => {
-      const {
-        hangingProtocolService
-      } = this._servicesManager.services;
-      extensionModule.forEach(_ref2 => {
-        let {
-          name,
-          protocol
-        } = _ref2;
-        if (protocol) {
-          // Only auto-register if protocol specified, otherwise let mode register
-          hangingProtocolService.addProtocol(name, protocol);
-        }
-      });
-    };
-    /**
-     *
-     * @private
-     * @param {Object[]} commandDefinitions
-     */
-    this._initCommandsModule = extensionModule => {
-      let {
-        definitions,
-        defaultContext
-      } = extensionModule;
-      if (!definitions || Object.keys(definitions).length === 0) {
-        src_log.warn('Commands Module contains no command definitions');
-        return;
-      }
-      defaultContext = defaultContext || 'VIEWER';
-      if (!this._commandsManager.getContext(defaultContext)) {
-        this._commandsManager.createContext(defaultContext);
-      }
-      Object.keys(definitions).forEach(commandName => {
-        const commandDefinition = definitions[commandName];
-        const commandHasContextThatDoesNotExist = commandDefinition.context && !this._commandsManager.getContext(commandDefinition.context);
-        if (commandHasContextThatDoesNotExist) {
-          this._commandsManager.createContext(commandDefinition.context);
-        }
-        this._commandsManager.registerCommand(commandDefinition.context || defaultContext, commandName, commandDefinition);
-      });
-    };
-    this.modules = {};
-    this.registeredExtensionIds = [];
-    this.moduleTypeNames = Object.values(MODULE_TYPES);
-    //
-    this._commandsManager = commandsManager;
-    this._servicesManager = servicesManager;
-    this._hotkeysManager = hotkeysManager;
-    this._appConfig = appConfig;
-    this.modulesMap = {};
-    this.moduleTypeNames.forEach(moduleType => {
-      this.modules[moduleType] = [];
-    });
-    this._extensionLifeCycleHooks = {
-      onModeEnter: {},
-      onModeExit: {}
-    };
-    this.dataSourceMap = {};
-    this.dataSourceDefs = {};
-    this.defaultDataSourceName = appConfig.defaultDataSourceName;
-    this.activeDataSource = undefined;
-  }
-  setActiveDataSource(dataSourceName) {
-    this.activeDataSource = dataSourceName;
-  }
-
-  /**
-   * Calls all the services and extension on mode enters.
-   * The service onModeEnter is called first
-   * Then registered extensions onModeEnter is called
-   * This is supposed to setup the extension for a standard entry.
-   */
-  onModeEnter() {
-    const {
-      registeredExtensionIds,
-      _servicesManager,
-      _commandsManager,
-      _hotkeysManager,
-      _extensionLifeCycleHooks
-    } = this;
-
-    // The onModeEnter of the service must occur BEFORE the extension
-    // onModeEnter in order to reset the state to a standard state
-    // before the extension restores and cached data.
-    for (const service of Object.values(_servicesManager.services)) {
-      service?.onModeEnter?.();
-    }
-    registeredExtensionIds.forEach(extensionId => {
-      const onModeEnter = _extensionLifeCycleHooks.onModeEnter[extensionId];
-      if (typeof onModeEnter === 'function') {
-        onModeEnter({
-          servicesManager: _servicesManager,
-          commandsManager: _commandsManager,
-          hotkeysManager: _hotkeysManager
-        });
-      }
-    });
-  }
-  onModeExit() {
-    const {
-      registeredExtensionIds,
-      _servicesManager,
-      _commandsManager,
-      _extensionLifeCycleHooks
-    } = this;
-    registeredExtensionIds.forEach(extensionId => {
-      const onModeExit = _extensionLifeCycleHooks.onModeExit[extensionId];
-      if (typeof onModeExit === 'function') {
-        onModeExit({
-          servicesManager: _servicesManager,
-          commandsManager: _commandsManager
-        });
-      }
-    });
-
-    // The service onModeExit calls must occur after the extension ones
-    // so that extension ones can store/restore data.
-    for (const service of Object.values(_servicesManager.services)) {
-      try {
-        service?.onModeExit?.();
-      } catch (e) {
-        console.warn('onModeExit caught', e);
-      }
-    }
-  }
-  _initDataSourcesModule(extensionModule, extensionId) {
-    let dataSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-    const {
-      userAuthenticationService
-    } = this._servicesManager.services;
-    dataSources.forEach(dataSource => {
-      this.dataSourceDefs[dataSource.sourceName] = dataSource;
-    });
-    extensionModule.forEach(element => {
-      const namespace = `${extensionId}.${MODULE_TYPES.DATA_SOURCE}.${element.name}`;
-      dataSources.forEach(dataSource => {
-        if (dataSource.namespace === namespace) {
-          const dataSourceInstance = element.createDataSource(dataSource.configuration, userAuthenticationService);
-          if (this.dataSourceMap[dataSource.sourceName]) {
-            this.dataSourceMap[dataSource.sourceName].push(dataSourceInstance);
-          } else {
-            this.dataSourceMap[dataSource.sourceName] = [dataSourceInstance];
-          }
-        }
-      });
-    });
-    extensionModule.forEach(element => {
-      this.modulesMap[`${extensionId}.${MODULE_TYPES.DATA_SOURCE}.${element.name}`] = element;
-    });
-  }
-}
-
-/**
- * @private
- * @param {string} lower
- */
-function _capitalizeFirstCharacter(lower) {
-  return lower.charAt(0).toUpperCase() + lower.substring(1);
-}
-;// CONCATENATED MODULE: ../../core/src/extensions/index.js
-
-
-const DEFAULT_EXPORTS = {
-  ExtensionManager: ExtensionManager,
-  MODULE_TYPES: MODULE_TYPES
-};
-/* harmony default export */ const extensions = ((/* unused pure expression or super */ null && (DEFAULT_EXPORTS)));
-
 // EXTERNAL MODULE: ../../core/src/utils/guid.js
 var guid = __webpack_require__(33464);
 ;// CONCATENATED MODULE: ../../core/src/services/_shared/pubSubServiceInterface.js
@@ -14516,6 +14235,450 @@ PanelService.REGISTRATION = {
 
 
 
+;// CONCATENATED MODULE: ../../core/src/extensions/ExtensionManager.ts
+
+
+
+
+/**
+ * This is the arguments given to create the extension.
+ */
+
+/**
+ * The configuration of an extension.
+ * This uses type as the extension manager only knows that the configuration
+ * is an object of some sort, and doesn't know anything else about it.
+ */
+
+/**
+ * The parameters passed to the extension.
+ */
+
+/**
+ * The type of an actual extension instance.
+ * This is an interface as it declares possible calls, but extensions can
+ * have more values than this.
+ */
+
+class ExtensionManager extends PubSubService {
+  constructor(_ref) {
+    var _this;
+    let {
+      commandsManager,
+      servicesManager,
+      hotkeysManager,
+      appConfig = {}
+    } = _ref;
+    super(ExtensionManager.EVENTS);
+    _this = this;
+    this._commandsManager = void 0;
+    this._servicesManager = void 0;
+    this._hotkeysManager = void 0;
+    /**
+     * An array of extensions, or an array of arrays that contains extension
+     * configuration pairs.
+     *
+     * @param {Object[]} extensions - Array of extensions
+     */
+    this.registerExtensions = async function (extensions) {
+      let dataSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      // Todo: we ideally should be able to run registrations in parallel
+      // but currently since some extensions need to be registered before
+      // others, we need to run them sequentially. We need a postInit hook
+      // to avoid this sequential async registration
+      for (let i = 0; i < extensions.length; i++) {
+        const extension = extensions[i];
+        const hasConfiguration = Array.isArray(extension);
+        try {
+          if (hasConfiguration) {
+            // Important: for some reason in the line below the type
+            // of extension is not recognized as [ExtensionRegister,
+            // ExtensionConfiguration] by babel DON"T CHANGE IT
+            // Same for the for loop above don't use
+            // for (const extension of extensions)
+            const ohifExtension = extension[0];
+            const configuration = extension[1];
+            await _this.registerExtension(ohifExtension, configuration, dataSources);
+          } else {
+            await _this.registerExtension(extension, {}, dataSources);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    };
+    /**
+     *
+     * TODO: Id Management: SopClassHandlers currently refer to viewport module by id; setting the extension id as viewport module id is a workaround for now
+     * @param {Object} extension
+     * @param {Object} configuration
+     */
+    this.registerExtension = async function (extension) {
+      let configuration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      let dataSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+      if (!extension) {
+        throw new Error('Attempting to register a null/undefined extension.');
+      }
+      const extensionId = extension.id;
+      if (!extensionId) {
+        // Note: Mode framework cannot function without IDs.
+        src_log.warn(extension);
+        throw new Error(`Extension ID not set`);
+      }
+      if (_this.registeredExtensionIds.includes(extensionId)) {
+        src_log.warn(`Extension ID ${extensionId} has already been registered. Exiting before duplicating modules.`);
+        return;
+      }
+
+      // preRegistrationHook
+      if (extension.preRegistration) {
+        await extension.preRegistration({
+          servicesManager: _this._servicesManager,
+          commandsManager: _this._commandsManager,
+          hotkeysManager: _this._hotkeysManager,
+          extensionManager: _this,
+          appConfig: _this._appConfig,
+          configuration
+        });
+      }
+      if (extension.onModeEnter) {
+        _this._extensionLifeCycleHooks.onModeEnter[extensionId] = extension.onModeEnter;
+      }
+      if (extension.onModeExit) {
+        _this._extensionLifeCycleHooks.onModeExit[extensionId] = extension.onModeExit;
+      }
+
+      // Register Modules
+      _this.moduleTypeNames.forEach(moduleType => {
+        const extensionModule = _this._getExtensionModule(moduleType, extension, extensionId, configuration);
+        if (extensionModule) {
+          switch (moduleType) {
+            case MODULE_TYPES.COMMANDS:
+              _this._initCommandsModule(extensionModule);
+              break;
+            case MODULE_TYPES.DATA_SOURCE:
+              _this._initDataSourcesModule(extensionModule, extensionId, dataSources);
+              break;
+            case MODULE_TYPES.HANGING_PROTOCOL:
+              _this._initHangingProtocolsModule(extensionModule, extensionId);
+            case MODULE_TYPES.TOOLBAR:
+            case MODULE_TYPES.VIEWPORT:
+            case MODULE_TYPES.PANEL:
+            case MODULE_TYPES.SOP_CLASS_HANDLER:
+            case MODULE_TYPES.CONTEXT:
+            case MODULE_TYPES.LAYOUT_TEMPLATE:
+            case MODULE_TYPES.CUSTOMIZATION:
+            case MODULE_TYPES.STATE_SYNC:
+            case MODULE_TYPES.UTILITY:
+              // Default for most extension points,
+              // Just adds each entry ready for consumption by mode.
+              extensionModule.forEach(element => {
+                if (!element.name) {
+                  throw new Error(`Extension ID ${extensionId} module ${moduleType} element has no name`);
+                }
+                const id = `${extensionId}.${moduleType}.${element.name}`;
+                element.id = id;
+                _this.modulesMap[id] = element;
+              });
+              break;
+            default:
+              throw new Error(`Module type invalid: ${moduleType}`);
+          }
+          _this.modules[moduleType].push({
+            extensionId,
+            module: extensionModule
+          });
+        }
+      });
+
+      // Track extension registration
+      _this.registeredExtensionIds.push(extensionId);
+    };
+    this.getModuleEntry = stringEntry => {
+      return this.modulesMap[stringEntry];
+    };
+    this.getDataSources = dataSourceName => {
+      if (dataSourceName === undefined) {
+        // Default to the activeDataSource
+        dataSourceName = this.activeDataSource;
+      }
+
+      // Note: this currently uses the data source name, which feels weird...
+      return this.dataSourceMap[dataSourceName];
+    };
+    this.getActiveDataSource = () => {
+      return this.dataSourceMap[this.activeDataSource];
+    };
+    /**
+     * Gets the data source definition for the given data source name.
+     * If no data source name is provided, the active data source definition is
+     * returned.
+     * @param dataSourceName the data source name
+     * @returns the data source definition
+     */
+    this.getDataSourceDef = dataSourceName => {
+      if (dataSourceName === undefined) {
+        // Default to the activeDataSource
+        dataSourceName = this.activeDataSource;
+      }
+      return this.dataSourceDefs[dataSourceName];
+    };
+    /**
+     * @private
+     * @param {string} moduleType
+     * @param {Object} extension
+     * @param {string} extensionId - Used for logging warnings
+     */
+    this._getExtensionModule = (moduleType, extension, extensionId, configuration) => {
+      const getModuleFnName = 'get' + _capitalizeFirstCharacter(moduleType);
+      const getModuleFn = extension[getModuleFnName];
+      if (!getModuleFn) {
+        return;
+      }
+      try {
+        const extensionModule = extension[getModuleFnName]({
+          appConfig: this._appConfig,
+          commandsManager: this._commandsManager,
+          servicesManager: this._servicesManager,
+          hotkeysManager: this._hotkeysManager,
+          extensionManager: this,
+          configuration
+        });
+        if (!extensionModule) {
+          src_log.warn(`Null or undefined returned when registering the ${getModuleFnName} module for the ${extensionId} extension`);
+        }
+        return extensionModule;
+      } catch (ex) {
+        console.log(ex);
+        throw new Error(`Exception thrown while trying to call ${getModuleFnName} for the ${extensionId} extension`);
+      }
+    };
+    this._initHangingProtocolsModule = (extensionModule, extensionId) => {
+      const {
+        hangingProtocolService
+      } = this._servicesManager.services;
+      extensionModule.forEach(_ref2 => {
+        let {
+          name,
+          protocol
+        } = _ref2;
+        if (protocol) {
+          // Only auto-register if protocol specified, otherwise let mode register
+          hangingProtocolService.addProtocol(name, protocol);
+        }
+      });
+    };
+    /**
+     *
+     * @private
+     * @param {Object[]} commandDefinitions
+     */
+    this._initCommandsModule = extensionModule => {
+      let {
+        definitions,
+        defaultContext
+      } = extensionModule;
+      if (!definitions || Object.keys(definitions).length === 0) {
+        src_log.warn('Commands Module contains no command definitions');
+        return;
+      }
+      defaultContext = defaultContext || 'VIEWER';
+      if (!this._commandsManager.getContext(defaultContext)) {
+        this._commandsManager.createContext(defaultContext);
+      }
+      Object.keys(definitions).forEach(commandName => {
+        const commandDefinition = definitions[commandName];
+        const commandHasContextThatDoesNotExist = commandDefinition.context && !this._commandsManager.getContext(commandDefinition.context);
+        if (commandHasContextThatDoesNotExist) {
+          this._commandsManager.createContext(commandDefinition.context);
+        }
+        this._commandsManager.registerCommand(commandDefinition.context || defaultContext, commandName, commandDefinition);
+      });
+    };
+    this.modules = {};
+    this.registeredExtensionIds = [];
+    this.moduleTypeNames = Object.values(MODULE_TYPES);
+    //
+    this._commandsManager = commandsManager;
+    this._servicesManager = servicesManager;
+    this._hotkeysManager = hotkeysManager;
+    this._appConfig = appConfig;
+    this.modulesMap = {};
+    this.moduleTypeNames.forEach(moduleType => {
+      this.modules[moduleType] = [];
+    });
+    this._extensionLifeCycleHooks = {
+      onModeEnter: {},
+      onModeExit: {}
+    };
+    this.dataSourceMap = {};
+    this.dataSourceDefs = {};
+    this.defaultDataSourceName = appConfig.defaultDataSourceName;
+    this.activeDataSource = appConfig.defaultDataSourceName;
+  }
+  setActiveDataSource(dataSource) {
+    if (this.activeDataSource === dataSource) {
+      return;
+    }
+    this.activeDataSource = dataSource;
+    this._broadcastEvent(ExtensionManager.EVENTS.ACTIVE_DATA_SOURCE_CHANGED, this.dataSourceDefs[this.activeDataSource]);
+  }
+
+  /**
+   * Calls all the services and extension on mode enters.
+   * The service onModeEnter is called first
+   * Then registered extensions onModeEnter is called
+   * This is supposed to setup the extension for a standard entry.
+   */
+  onModeEnter() {
+    const {
+      registeredExtensionIds,
+      _servicesManager,
+      _commandsManager,
+      _hotkeysManager,
+      _extensionLifeCycleHooks
+    } = this;
+
+    // The onModeEnter of the service must occur BEFORE the extension
+    // onModeEnter in order to reset the state to a standard state
+    // before the extension restores and cached data.
+    for (const service of Object.values(_servicesManager.services)) {
+      service?.onModeEnter?.();
+    }
+    registeredExtensionIds.forEach(extensionId => {
+      const onModeEnter = _extensionLifeCycleHooks.onModeEnter[extensionId];
+      if (typeof onModeEnter === 'function') {
+        onModeEnter({
+          servicesManager: _servicesManager,
+          commandsManager: _commandsManager,
+          hotkeysManager: _hotkeysManager
+        });
+      }
+    });
+  }
+  onModeExit() {
+    const {
+      registeredExtensionIds,
+      _servicesManager,
+      _commandsManager,
+      _extensionLifeCycleHooks
+    } = this;
+    registeredExtensionIds.forEach(extensionId => {
+      const onModeExit = _extensionLifeCycleHooks.onModeExit[extensionId];
+      if (typeof onModeExit === 'function') {
+        onModeExit({
+          servicesManager: _servicesManager,
+          commandsManager: _commandsManager
+        });
+      }
+    });
+
+    // The service onModeExit calls must occur after the extension ones
+    // so that extension ones can store/restore data.
+    for (const service of Object.values(_servicesManager.services)) {
+      try {
+        service?.onModeExit?.();
+      } catch (e) {
+        console.warn('onModeExit caught', e);
+      }
+    }
+  }
+  /**
+   * Adds the given data source and optionally sets it as the active data source.
+   * The method does this by first creating the data source.
+   * @param dataSourceDef the data source definition to be added
+   * @param activate flag to indicate if the added data source should be set to the active data source
+   */
+  addDataSource(dataSourceDef) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      activate: false
+    };
+    const existingDataSource = this.getDataSources(dataSourceDef.sourceName);
+    if (existingDataSource?.[0]) {
+      // The data source already exists and cannot be added.
+      return;
+    }
+    this._createDataSourceInstance(dataSourceDef);
+    if (options.activate) {
+      this.setActiveDataSource(dataSourceDef.sourceName);
+    }
+  }
+
+  /**
+   * Updates the configuration of the given data source name. It first creates a new data source with
+   * the existing definition and the new configuration passed in.
+   * @param dataSourceName the name of the data source to update
+   * @param dataSourceConfiguration the new configuration to update the data source with
+   */
+  updateDataSourceConfiguration(dataSourceName, dataSourceConfiguration) {
+    const existingDataSource = this.getDataSources(dataSourceName);
+    if (!existingDataSource?.[0]) {
+      // Cannot update a non existent data source.
+      return;
+    }
+    const dataSourceDef = this.dataSourceDefs[dataSourceName];
+    // Update the configuration.
+    dataSourceDef.configuration = dataSourceConfiguration;
+    this._createDataSourceInstance(dataSourceDef);
+    if (this.activeDataSource === dataSourceName) {
+      // When the active data source is changed/set, fire an event to indicate that its configuration has changed.
+      this._broadcastEvent(ExtensionManager.EVENTS.ACTIVE_DATA_SOURCE_CHANGED, dataSourceDef);
+    }
+  }
+
+  /**
+   * Creates a data source instance from the given definition. The definition is
+   * added to dataSourceDefs and the created instance is added to dataSourceMap.
+   * @param dataSourceDef
+   * @returns
+   */
+  _createDataSourceInstance(dataSourceDef) {
+    const module = this.getModuleEntry(dataSourceDef.namespace);
+    if (!module) {
+      return;
+    }
+    this.dataSourceDefs[dataSourceDef.sourceName] = dataSourceDef;
+    const {
+      userAuthenticationService
+    } = this._servicesManager.services;
+    const dataSourceInstance = module.createDataSource(dataSourceDef.configuration, userAuthenticationService);
+    this.dataSourceMap[dataSourceDef.sourceName] = [dataSourceInstance];
+  }
+  _initDataSourcesModule(extensionModule, extensionId) {
+    let dataSources = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+    extensionModule.forEach(element => {
+      this.modulesMap[`${extensionId}.${MODULE_TYPES.DATA_SOURCE}.${element.name}`] = element;
+    });
+    extensionModule.forEach(element => {
+      const namespace = `${extensionId}.${MODULE_TYPES.DATA_SOURCE}.${element.name}`;
+      dataSources.forEach(dataSource => {
+        if (dataSource.namespace === namespace) {
+          this.addDataSource(dataSource);
+        }
+      });
+    });
+  }
+}
+
+/**
+ * @private
+ * @param {string} lower
+ */
+ExtensionManager.EVENTS = {
+  ACTIVE_DATA_SOURCE_CHANGED: 'event::activedatasourcechanged'
+};
+function _capitalizeFirstCharacter(lower) {
+  return lower.charAt(0).toUpperCase() + lower.substring(1);
+}
+;// CONCATENATED MODULE: ../../core/src/extensions/index.js
+
+
+const DEFAULT_EXPORTS = {
+  ExtensionManager: ExtensionManager,
+  MODULE_TYPES: MODULE_TYPES
+};
+/* harmony default export */ const extensions = ((/* unused pure expression or super */ null && (DEFAULT_EXPORTS)));
+
 ;// CONCATENATED MODULE: ../../core/src/classes/CommandsManager.ts
 
 /**
@@ -16264,6 +16427,9 @@ const bindings = [{
 
 // EXTERNAL MODULE: ../../core/src/classes/Hotkey.ts
 var Hotkey = __webpack_require__(57374);
+;// CONCATENATED MODULE: ../../core/src/types/DataSource.ts
+
+
 ;// CONCATENATED MODULE: ../../core/src/services/CustomizationService/types.ts
 
 
@@ -16294,6 +16460,7 @@ var IPubSub = __webpack_require__(98844);
 
 
 
+
 // Separate out some generic types
 
 
@@ -16331,7 +16498,8 @@ function create(_ref) {
     deleteStudyMetadataPromise,
     getImageIdsForDisplaySet,
     getImageIdsForInstance,
-    getConfig
+    getConfig,
+    getStudyInstanceUIDs
   } = _ref;
   const defaultQuery = {
     studies: {
@@ -16377,7 +16545,8 @@ function create(_ref) {
     deleteStudyMetadataPromise,
     getImageIdsForDisplaySet,
     getImageIdsForInstance,
-    getConfig: getConfig || defaultGetConfig
+    getConfig: getConfig || defaultGetConfig,
+    getStudyInstanceUIDs: getStudyInstanceUIDs
   };
 }
 const IWebApiDataSource = {
@@ -20375,7 +20544,7 @@ const detectionOptions = {
   }
 });
 ;// CONCATENATED MODULE: ../../i18n/package.json
-const package_namespaceObject = JSON.parse('{"i8":"3.7.0-beta.32"}');
+const package_namespaceObject = JSON.parse('{"i8":"3.7.0-beta.35"}');
 ;// CONCATENATED MODULE: ../../i18n/src/utils.js
 const languagesMap = {
   ar: 'Arabic',
@@ -31266,8 +31435,8 @@ ViewportDialogProvider.propTypes = {
 // EXTERNAL MODULE: ../../../node_modules/lodash.isequal/index.js
 var lodash_isequal = __webpack_require__(68652);
 var lodash_isequal_default = /*#__PURE__*/__webpack_require__.n(lodash_isequal);
-// EXTERNAL MODULE: ../../core/src/index.ts + 102 modules
-var src = __webpack_require__(62771);
+// EXTERNAL MODULE: ../../core/src/index.ts + 103 modules
+var src = __webpack_require__(87754);
 ;// CONCATENATED MODULE: ../../ui/src/utils/viewportLabels.ts
 const viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 /* harmony default export */ const utils_viewportLabels = (viewportLabels);
@@ -33260,6 +33429,7 @@ const Footer = _ref => {
     });
     return /*#__PURE__*/react.createElement(components_Button, {
       key: index,
+      name: action.text,
       className: classnames_default()({
         'ml-2': !isFirst
       }, action.classes),
@@ -57220,7 +57390,8 @@ StudyListTableRow.propTypes = {
 
 const StudyListTable_StudyListTable = _ref => {
   let {
-    tableDataSource
+    tableDataSource,
+    querying
   } = _ref;
   return /*#__PURE__*/react.createElement("div", {
     className: "bg-black"
@@ -57229,7 +57400,8 @@ const StudyListTable_StudyListTable = _ref => {
   }, /*#__PURE__*/react.createElement("table", {
     className: "w-full text-white"
   }, /*#__PURE__*/react.createElement("tbody", {
-    "data-cy": "study-list-results"
+    "data-cy": "study-list-results",
+    "data-querying": querying
   }, tableDataSource.map((tableData, i) => {
     return /*#__PURE__*/react.createElement(StudyListTable_StudyListTableRow, {
       tableData: tableData,
@@ -57241,6 +57413,7 @@ StudyListTable_StudyListTable.propTypes = {
   tableDataSource: prop_types_default().arrayOf(prop_types_default().shape({
     row: (prop_types_default()).array.isRequired,
     expandedContent: (prop_types_default()).node.isRequired,
+    querying: (prop_types_default()).bool,
     onClickRow: (prop_types_default()).func.isRequired,
     isExpanded: (prop_types_default()).bool.isRequired
   }))
@@ -148569,7 +148742,6 @@ module.exports = warning;
 "use strict";
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   AW: () => (/* reexport safe */ react_router__WEBPACK_IMPORTED_MODULE_1__.AW),
-/* harmony export */   TH: () => (/* reexport safe */ react_router__WEBPACK_IMPORTED_MODULE_1__.TH),
 /* harmony export */   VK: () => (/* binding */ BrowserRouter),
 /* harmony export */   Z5: () => (/* reexport safe */ react_router__WEBPACK_IMPORTED_MODULE_1__.Z5),
 /* harmony export */   rU: () => (/* binding */ Link),
@@ -154443,7 +154615,7 @@ var selectOrdinal = function selectOrdinal() {
 /******/ 		// This function allow to reference async chunks
 /******/ 		__webpack_require__.u = (chunkId) => {
 /******/ 			// return url for filenames based on template
-/******/ 			return "" + (chunkId === 18 ? "dicom-microscopy-viewer" : chunkId) + ".bundle." + {"18":"aa60bdf008c32c39cfd7","50":"c11736e7c4a5b65f67e6","55":"3fdadd0823a136eb4585","82":"3328dd25b6fd1c1c43f6","151":"31ea35044218837bf73f","192":"6290fb2377d6a0ea268d","199":"4fb8686e11821dae0c90","205":"b5a473c200dcf2bbcdb4","208":"fe1e91f0acf3742925f9","270":"49a50e13715da82c083f","283":"f82d3dc59066b118cf27","295":"957b1159fec14b9199a1","331":"6d141ff13ae957b1db6f","351":"444e1c32785871760302","381":"0905e683605fcbc0895f","404":"7b7f4990f9762c2c24ed","531":"2a82fb1d69e5b57cc72b","569":"ee136cf6526a6380633c","581":"ab8d1f1e75de3c98dd10","606":"5d876f5f3dd8287f0a28","616":"a18d837e98dc2fad072c","625":"e80ea79cda37ee4b6263","642":"23c1d28e6689362f106f","664":"09abae984223969d1bde","728":"38ad0fbfcf6cfd8f9e9e","744":"fd4eae46f382b3e1d496","780":"fd0f13dc92e9caa0581e","790":"ebfacd71c3af955a92b3","799":"620e1df13daf7b31cb3f","806":"2e7934d0833c4315c292","917":"cb498f4f4d85e0248a14","926":"dbc9d0e591cb9217fda2","935":"deeffff0e4f7b528e3c3","953":"4b8fee7d9484456a99b5","973":"62c5bba110e379cef75e","976":"b61d2e7e5ed3bc534c2c","984":"5e08be248b0bced4e89b"}[chunkId] + ".js";
+/******/ 			return "" + (chunkId === 18 ? "dicom-microscopy-viewer" : chunkId) + ".bundle." + {"18":"aa60bdf008c32c39cfd7","50":"260f830a3870cae30cf5","55":"fe53f3784bfe7db4a5a5","82":"11e08acaf3e1f527278d","151":"31ea35044218837bf73f","192":"160fffd248385d501d87","199":"fe8e31ccab2445a9721d","205":"b5a473c200dcf2bbcdb4","208":"ee392e7c48237252ea8e","270":"2d215f8720350f03e171","283":"b19d7099a6fb8c957fb1","295":"957b1159fec14b9199a1","351":"2e949640c417cd735688","381":"0905e683605fcbc0895f","389":"38df7e54d2f632cfa7a0","404":"051cd13557d04cc76630","531":"2a82fb1d69e5b57cc72b","569":"e77c17d37a65e5dedfed","581":"15078e71fe52b53f48b3","606":"5d876f5f3dd8287f0a28","616":"fc1820b3d98da340218c","625":"7de4074e256c743ca500","642":"f03da99e63dbfdc1cf1c","664":"09abae984223969d1bde","728":"5bef7c8643b42d70a79f","744":"08e4a5bbc4fd371a50b3","780":"fd0f13dc92e9caa0581e","790":"6fa09929a3203bcf3f2c","799":"d8e50f1fd6bf4fa3a5e1","806":"2e7934d0833c4315c292","917":"e0647888c6fff8e72e95","926":"dbc9d0e591cb9217fda2","935":"deeffff0e4f7b528e3c3","953":"95b0621f1da8dfeaed8a","973":"634f585248ead3160ff2","976":"9dec94108550ad448773","984":"1149cce5c5ecb63e76a9"}[chunkId] + ".js";
 /******/ 		};
 /******/ 	})();
 /******/