@ohif/app 3.7.0-beta.57 → 3.7.0-beta.58

package/dist/{654.bundle.a2d29dc0d277100f8bee.js → 362.bundle.52c5185d34f5f0dac3ab.js}

@@ -1,7 +1,7 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[654],{
+(self["webpackChunk"] = self["webpackChunk"] || []).push([[362],{
 
-/***/ 75654:
+/***/ 13362:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -29,8 +29,8 @@ __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 + 105 modules
-var src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
 // EXTERNAL MODULE: ../../core/src/utils/sortStudy.ts
 var sortStudy = __webpack_require__(62971);
 ;// CONCATENATED MODULE: ../../../extensions/default/src/DicomWebDataSource/qido.js
@@ -2054,10 +2054,10 @@ var dist = __webpack_require__(62474);
 var es = __webpack_require__(69190);
 // EXTERNAL MODULE: ../node_modules/react-router/dist/index.js
 var react_router_dist = __webpack_require__(85066);
-// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
-var ui_src = __webpack_require__(60082);
-// EXTERNAL MODULE: ../../i18n/src/index.js + 97 modules
-var i18n_src = __webpack_require__(24908);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var ui_src = __webpack_require__(33570);
+// EXTERNAL MODULE: ../../i18n/src/index.js + 98 modules
+var i18n_src = __webpack_require__(43040);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(62657);
 // EXTERNAL MODULE: ../../../node_modules/classnames/index.js
@@ -2211,8 +2211,8 @@ function ViewerLayout(_ref) {
     hotkeyDefinitions,
     hotkeyDefaults
   } = hotkeysManager;
-  const versionNumber = "3.7.0-beta.57";
-  const commitHash = "65b49aeb1b5f38224e4892bdf32453500ee351f8";
+  const versionNumber = "3.7.0-beta.58";
+  const commitHash = "a336992971c07552c9dbb6e1de43169d37762ef1";
   const menuOptions = [{
     title: t('Header:About'),
     icon: 'info',
@@ -4661,7 +4661,6 @@ function DicomTagTable(_ref2) {
 
 
 
-
 const {
   ImageSet: DicomTagBrowser_ImageSet
 } = src.classes;
@@ -4690,7 +4689,6 @@ const DicomTagBrowser = _ref => {
     setSelectedDisplaySetInstanceUID(value.value);
     setInstanceNumber(1);
   };
-  const searchInputRef = (0,react.useRef)(null);
   const activeDisplaySet = displaySets.find(ds => ds.displaySetInstanceUID === selectedDisplaySetInstanceUID);
   const isImageStack = _isImageStack(activeDisplaySet);
   const showInstanceList = isImageStack && activeDisplaySet.images.length > 1;
@@ -4794,29 +4792,11 @@ const DicomTagBrowser = _ref => {
     className: "w-full h-1 bg-black"
   }), /*#__PURE__*/react.createElement("div", {
     className: "flex flex-row my-3 w-1/2"
-  }, /*#__PURE__*/react.createElement("label", {
-    className: "relative block w-full mr-8"
-  }, /*#__PURE__*/react.createElement("span", {
-    className: "absolute inset-y-0 left-0 flex items-center pl-2"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    name: "icon-search"
-  })), /*#__PURE__*/react.createElement("input", {
-    ref: searchInputRef,
-    type: "text",
-    className: "block bg-black w-full shadow transition duration-300 appearance-none border border-inputfield-main focus:border-inputfield-focus focus:outline-none disabled:border-inputfield-disabled rounded w-full py-2 px-9 text-base leading-tight placeholder:text-inputfield-placeholder",
+  }, /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
+    className: "block w-full mr-8",
     placeholder: "Search metadata...",
-    onChange: event => debouncedSetFilterValue(event.target.value),
-    autoComplete: "off"
-  }), /*#__PURE__*/react.createElement("span", {
-    className: "absolute inset-y-0 right-0 flex items-center pr-2"
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
-    name: "icon-clear-field",
-    className: classnames_default()('cursor-pointer', filterValue ? '' : 'hidden'),
-    onClick: () => {
-      searchInputRef.current.value = '';
-      debouncedSetFilterValue('');
-    }
-  })))), /*#__PURE__*/react.createElement(DicomTagBrowser_DicomTagTable, {
+    onDebounceChange: setFilterValue
+  })), /*#__PURE__*/react.createElement(DicomTagBrowser_DicomTagTable, {
     rows: filteredRows
   }));
 };
@@ -6331,10 +6311,419 @@ function DataSourceSelector() {
   }, ds.sourceName), /*#__PURE__*/react.createElement("br", null)))))));
 }
 /* harmony default export */ const Panels_DataSourceSelector = (DataSourceSelector);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/ItemListComponent.tsx
+
+
+
+
+function ItemListComponent(_ref) {
+  let {
+    itemLabel,
+    itemList,
+    onItemClicked
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const [filterValue, setFilterValue] = (0,react.useState)('');
+  (0,react.useEffect)(() => {
+    setFilterValue('');
+  }, [itemList]);
+  return /*#__PURE__*/react.createElement("div", {
+    className: "flex flex-col gap-4 min-h-[1px] grow"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "flex justify-between items-center"
+  }, /*#__PURE__*/react.createElement("div", {
+    className: "text-primary-light text-[20px]"
+  }, t(`Select ${itemLabel}`)), /*#__PURE__*/react.createElement(ui_src/* InputFilterText */.Xe, {
+    className: "grow max-w-[40%]",
+    value: filterValue,
+    onDebounceChange: setFilterValue,
+    placeholder: t(`Search ${itemLabel} list`)
+  })), /*#__PURE__*/react.createElement("div", {
+    className: "flex flex-col relative min-h-[1px] grow text-[14px] bg-black"
+  }, itemList == null ? /*#__PURE__*/react.createElement(ui_src/* LoadingIndicatorProgress */.LE, {
+    className: 'w-full h-full'
+  }) : itemList.length === 0 ? /*#__PURE__*/react.createElement("div", {
+    className: "flex flex-col h-full px-6 py-4 items-center justify-center text-primary-light"
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+    name: "magnifier",
+    className: "mb-4"
+  }), /*#__PURE__*/react.createElement("span", null, t(`No ${itemLabel} available`))) : /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
+    className: "bg-secondary-dark text-white px-3 py-1.5"
+  }, t(itemLabel)), /*#__PURE__*/react.createElement("div", {
+    className: "overflow-auto ohif-scrollbar"
+  }, itemList.filter(item => !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())).map(item => {
+    const border = 'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
+    return /*#__PURE__*/react.createElement("div", {
+      className: classnames_default()('group mx-2 px-6 py-2 flex justify-between items-center hover:text-primary-light hover:bg-primary-dark', border),
+      key: item.id
+    }, /*#__PURE__*/react.createElement("div", null, item.name), /*#__PURE__*/react.createElement(ui_src/* Button */.zx, {
+      onClick: () => onItemClicked(item),
+      className: "invisible group-hover:visible",
+      endIcon: /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "arrow-left"
+      })
+    }, t('Select')));
+  })))));
+}
+/* harmony default export */ const Components_ItemListComponent = (ItemListComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/DataSourceConfigurationModalComponent.tsx
+
+
+
+
+
+const NO_WRAP_ELLIPSIS_CLASS_NAMES = 'text-ellipsis whitespace-nowrap overflow-hidden';
+function DataSourceConfigurationModalComponent(_ref) {
+  let {
+    configurationAPI,
+    configuredItems,
+    onHide
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const [itemList, setItemList] = (0,react.useState)();
+  const [selectedItems, setSelectedItems] = (0,react.useState)(configuredItems);
+
+  // Determines whether to show the full configuration for the data source.
+  // This typically occurs when the configuration component is first displayed.
+  const [showFullConfig, setShowFullConfig] = (0,react.useState)(true);
+  const [errorMessage, setErrorMessage] = (0,react.useState)();
+  const [itemLabels] = (0,react.useState)(configurationAPI.getItemLabels());
+
+  /**
+   * The index of the selected item that is considered current and for which
+   * its sub-items should be displayed in the items list component. When the
+   * full/existing configuration for a data source is to be shown, the current
+   * selected item is the second to last in the `selectedItems` list.
+   */
+  const currentSelectedItemIndex = showFullConfig ? selectedItems.length - 2 : selectedItems.length - 1;
+  (0,react.useEffect)(() => {
+    let shouldUpdate = true;
+    setErrorMessage(null);
+
+    // Clear out the former/old list while we fetch the next sub item list.
+    setItemList(null);
+    if (selectedItems.length === 0) {
+      configurationAPI.initialize().then(items => {
+        if (shouldUpdate) {
+          setItemList(items);
+        }
+      }).catch(error => setErrorMessage(error.message));
+    } else if (!showFullConfig && selectedItems.length === itemLabels.length) {
+      // The last item to configure the data source (path) has been selected.
+      configurationAPI.setCurrentItem(selectedItems[selectedItems.length - 1]);
+      // We can hide the modal dialog now.
+      onHide();
+    } else {
+      configurationAPI.setCurrentItem(selectedItems[currentSelectedItemIndex]).then(items => {
+        if (shouldUpdate) {
+          setItemList(items);
+        }
+      }).catch(error => setErrorMessage(error.message));
+    }
+    return () => {
+      shouldUpdate = false;
+    };
+  }, [selectedItems, configurationAPI, onHide, itemLabels, showFullConfig, currentSelectedItemIndex]);
+  const getSelectedItemCursorClasses = itemIndex => itemIndex !== itemLabels.length - 1 && itemIndex < selectedItems.length ? 'cursor-pointer' : 'cursor-auto';
+  const getSelectedItemBackgroundClasses = itemIndex => itemIndex < selectedItems.length ? classnames_default()('bg-black/[.4]', itemIndex !== itemLabels.length - 1 ? 'hover:bg-transparent active:bg-secondary-dark' : '') : 'bg-transparent';
+  const getSelectedItemBorderClasses = itemIndex => itemIndex === currentSelectedItemIndex + 1 ? classnames_default()('border-2', 'border-solid', 'border-primary-light') : itemIndex < selectedItems.length ? 'border border-solid border-primary-active hover:border-primary-light active:border-white' : 'border border-dashed border-secondary-light';
+  const getSelectedItemTextClasses = itemIndex => itemIndex <= selectedItems.length ? 'text-primary-light' : 'text-primary-active';
+  const getErrorComponent = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex flex-col gap-4 min-h-[1px] grow"
+    }, /*#__PURE__*/react.createElement("div", {
+      className: "text-primary-light text-[20px]"
+    }, t(`Error fetching ${itemLabels[selectedItems.length]} list`)), /*#__PURE__*/react.createElement("div", {
+      className: "bg-black text-[14px] grow p-4"
+    }, errorMessage));
+  };
+  const getSelectedItemsComponent = () => {
+    return /*#__PURE__*/react.createElement("div", {
+      className: "flex gap-4"
+    }, itemLabels.map((itemLabel, itemLabelIndex) => {
+      return /*#__PURE__*/react.createElement("div", {
+        key: itemLabel,
+        className: classnames_default()('rounded-md p-3.5 flex flex-col gap-1 shrink min-w-[1px] basis-[200px]', getSelectedItemCursorClasses(itemLabelIndex), getSelectedItemBackgroundClasses(itemLabelIndex), getSelectedItemBorderClasses(itemLabelIndex), getSelectedItemTextClasses(itemLabelIndex)),
+        onClick: showFullConfig && itemLabelIndex < currentSelectedItemIndex || itemLabelIndex <= currentSelectedItemIndex ? () => {
+          setShowFullConfig(false);
+          setSelectedItems(theList => theList.slice(0, itemLabelIndex));
+        } : undefined
+      }, /*#__PURE__*/react.createElement("div", {
+        className: "flex gap-2 items-center text-"
+      }, itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-tracked"
+      }) : /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        name: "status-untracked"
+      }), /*#__PURE__*/react.createElement("div", {
+        className: classnames_default()(NO_WRAP_ELLIPSIS_CLASS_NAMES)
+      }, t(itemLabel))), itemLabelIndex < selectedItems.length ? /*#__PURE__*/react.createElement("div", {
+        className: classnames_default()('text-white text-[14px]', NO_WRAP_ELLIPSIS_CLASS_NAMES)
+      }, selectedItems[itemLabelIndex].name) : /*#__PURE__*/react.createElement("br", null));
+    }));
+  };
+  return /*#__PURE__*/react.createElement("div", {
+    className: "h-[calc(100vh-300px)] flex flex-col pt-0.5 gap-4 select-none"
+  }, getSelectedItemsComponent(), /*#__PURE__*/react.createElement("div", {
+    className: "w-full h-0.5 shrink-0 bg-black"
+  }), errorMessage ? getErrorComponent() : /*#__PURE__*/react.createElement(Components_ItemListComponent, {
+    itemLabel: itemLabels[currentSelectedItemIndex + 1],
+    itemList: itemList,
+    onItemClicked: item => {
+      setShowFullConfig(false);
+      setSelectedItems(theList => [...theList.slice(0, currentSelectedItemIndex + 1), item]);
+    }
+  }));
+}
+/* harmony default export */ const Components_DataSourceConfigurationModalComponent = (DataSourceConfigurationModalComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/Components/DataSourceConfigurationComponent.tsx
+
+
+
+
+function DataSourceConfigurationComponent(_ref) {
+  let {
+    servicesManager,
+    extensionManager
+  } = _ref;
+  const {
+    t
+  } = (0,es/* useTranslation */.$G)('DataSourceConfiguration');
+  const {
+    show,
+    hide
+  } = (0,ui_src/* useModal */.dd)();
+  const {
+    customizationService
+  } = servicesManager.services;
+  const [configurationAPI, setConfigurationAPI] = (0,react.useState)();
+  const [configuredItems, setConfiguredItems] = (0,react.useState)();
+  (0,react.useEffect)(() => {
+    let shouldUpdate = true;
+    const dataSourceChangedCallback = async () => {
+      const activeDataSourceDef = extensionManager.getActiveDataSourceDefinition();
+      if (!activeDataSourceDef.configuration.configurationAPI) {
+        return;
+      }
+      const {
+        factory: configurationAPIFactory
+      } = customizationService.get(activeDataSourceDef.configuration.configurationAPI) ?? {};
+      if (!configurationAPIFactory) {
+        return;
+      }
+      const configAPI = configurationAPIFactory(activeDataSourceDef.sourceName);
+      setConfigurationAPI(configAPI);
+      configAPI.getConfiguredItems().then(list => {
+        if (shouldUpdate) {
+          setConfiguredItems(list);
+        }
+      });
+    };
+    const sub = extensionManager.subscribe(extensionManager.EVENTS.ACTIVE_DATA_SOURCE_CHANGED, dataSourceChangedCallback);
+    dataSourceChangedCallback();
+    return () => {
+      shouldUpdate = false;
+      sub.unsubscribe();
+    };
+  }, []);
+  return configuredItems ? /*#__PURE__*/react.createElement("div", {
+    className: "flex text-aqua-pale overflow-hidden items-center"
+  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+    name: "settings",
+    className: "cursor-pointer shrink-0 w-3.5 h-3.5 mr-2.5",
+    onClick: () => show({
+      content: Components_DataSourceConfigurationModalComponent,
+      title: t('Configure Data Source'),
+      contentProps: {
+        configurationAPI,
+        configuredItems,
+        onHide: hide
+      }
+    })
+  }), configuredItems.map((item, itemIndex) => {
+    return /*#__PURE__*/react.createElement("div", {
+      key: itemIndex,
+      className: "flex overflow-hidden"
+    }, /*#__PURE__*/react.createElement("div", {
+      key: itemIndex,
+      className: "text-ellipsis whitespace-nowrap overflow-hidden"
+    }, item.name), itemIndex !== configuredItems.length - 1 && /*#__PURE__*/react.createElement("div", {
+      className: "px-2.5"
+    }, "|"));
+  })) : /*#__PURE__*/react.createElement(react.Fragment, null);
+}
+/* harmony default export */ const Components_DataSourceConfigurationComponent = (DataSourceConfigurationComponent);
+;// CONCATENATED MODULE: ../../../extensions/default/src/DataSourceConfigurationAPI/GoogleCloudDataSourceConfigurationAPI.ts
+/**
+ * This file contains the implementations of BaseDataSourceConfigurationAPIItem
+ * and BaseDataSourceConfigurationAPI for the Google cloud healthcare API. To
+ * better understand this implementation and/or to implement custom implementations,
+ * see the platform\core\src\types\DataSourceConfigurationAPI.ts and its JS doc
+ * comments as a guide.
+ */
+/**
+ * The various Google Cloud Healthcare path item types.
+ */
+var ItemType = /*#__PURE__*/function (ItemType) {
+  ItemType[ItemType["projects"] = 0] = "projects";
+  ItemType[ItemType["locations"] = 1] = "locations";
+  ItemType[ItemType["datasets"] = 2] = "datasets";
+  ItemType[ItemType["dicomStores"] = 3] = "dicomStores";
+  return ItemType;
+}(ItemType || {});
+const initialUrl = 'https://cloudresourcemanager.googleapis.com/v1';
+const baseHealthcareUrl = 'https://healthcare.googleapis.com/v1';
+class GoogleCloudDataSourceConfigurationAPIItem {
+  constructor() {
+    this.id = void 0;
+    this.name = void 0;
+    this.url = void 0;
+    this.itemType = void 0;
+  }
+}
+class GoogleCloudDataSourceConfigurationAPI {
+  constructor(dataSourceName, servicesManager, extensionManager) {
+    this._extensionManager = void 0;
+    this._fetchOptions = void 0;
+    this._dataSourceName = void 0;
+    this.getItemLabels = () => ['Project', 'Location', 'Data set', 'DICOM store'];
+    this._dataSourceName = dataSourceName;
+    this._extensionManager = extensionManager;
+    const userAuthenticationService = servicesManager.services.userAuthenticationService;
+    this._fetchOptions = {
+      method: 'GET',
+      headers: userAuthenticationService.getAuthorizationHeader()
+    };
+  }
+  async initialize() {
+    const url = `${initialUrl}/projects`;
+    const projects = await GoogleCloudDataSourceConfigurationAPI._doFetch(url, ItemType.projects, this._fetchOptions);
+    if (!projects?.length) {
+      return [];
+    }
+    const projectItems = projects.map(project => {
+      return {
+        id: project.projectId,
+        name: project.name,
+        itemType: ItemType.projects,
+        url: `${baseHealthcareUrl}/projects/${project.projectId}`
+      };
+    });
+    return projectItems;
+  }
+  async setCurrentItem(anItem) {
+    const googleCloudItem = anItem;
+    if (googleCloudItem.itemType === ItemType.dicomStores) {
+      // Last configurable item, so update the data source configuration.
+      const url = `${googleCloudItem.url}/dicomWeb`;
+      const dataSourceDefCopy = JSON.parse(JSON.stringify(this._extensionManager.getDataSourceDefinition(this._dataSourceName)));
+      dataSourceDefCopy.configuration = {
+        ...dataSourceDefCopy.configuration,
+        wadoUriRoot: url,
+        qidoRoot: url,
+        wadoRoot: url
+      };
+      this._extensionManager.updateDataSourceConfiguration(dataSourceDefCopy.sourceName, dataSourceDefCopy.configuration);
+      return [];
+    }
+    const subItemType = googleCloudItem.itemType + 1;
+    const subItemField = `${ItemType[subItemType]}`;
+    const url = `${googleCloudItem.url}/${subItemField}`;
+    const fetchedSubItems = await GoogleCloudDataSourceConfigurationAPI._doFetch(url, subItemType, this._fetchOptions);
+    if (!fetchedSubItems?.length) {
+      return [];
+    }
+    const subItems = fetchedSubItems.map(subItem => {
+      const nameSplit = subItem.name.split('/');
+      return {
+        id: subItem.name,
+        name: nameSplit[nameSplit.length - 1],
+        itemType: subItemType,
+        url: `${baseHealthcareUrl}/${subItem.name}`
+      };
+    });
+    return subItems;
+  }
+  async getConfiguredItems() {
+    const dataSourceDefinition = this._extensionManager.getDataSourceDefinition(this._dataSourceName);
+    const url = dataSourceDefinition.configuration.wadoUriRoot;
+    const projectsIndex = url.indexOf('projects');
+    const urlSplit = url.substring(projectsIndex).split('/');
+    const configuredItems = [];
+    for (let itemType = 0; itemType < 4; itemType += 1) {
+      if (itemType === ItemType.projects) {
+        const projectId = urlSplit[1];
+        const projectUrl = `${initialUrl}/projects/${projectId}`;
+        const data = await GoogleCloudDataSourceConfigurationAPI._doFetch(projectUrl, ItemType.projects, this._fetchOptions);
+        const project = data[0];
+        configuredItems.push({
+          id: project.projectId,
+          name: project.name,
+          itemType: itemType,
+          url: `${baseHealthcareUrl}/projects/${project.projectId}`
+        });
+      } else {
+        const relativePath = urlSplit.slice(0, itemType * 2 + 2).join('/');
+        configuredItems.push({
+          id: relativePath,
+          name: urlSplit[itemType * 2 + 1],
+          itemType: itemType,
+          url: `${baseHealthcareUrl}/${relativePath}`
+        });
+      }
+    }
+    return configuredItems;
+  }
+
+  /**
+   * Fetches an array of items the specified item type.
+   * @param urlStr the fetch url
+   * @param fetchItemType the type to fetch
+   * @param fetchOptions the header options for the fetch (e.g. authorization header)
+   * @param fetchSearchParams any search query params; currently only used for paging results
+   * @returns an array of items of the specified type
+   */
+  static async _doFetch(urlStr, fetchItemType) {
+    let fetchOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    let fetchSearchParams = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    try {
+      const url = new URL(urlStr);
+      url.search = new URLSearchParams(fetchSearchParams).toString();
+      const response = await fetch(url, fetchOptions);
+      const data = await response.json();
+      if (response.status >= 200 && response.status < 300 && data != null) {
+        if (data.nextPageToken != null) {
+          fetchSearchParams.pageToken = data.nextPageToken;
+          const subPageData = await this._doFetch(urlStr, fetchItemType, fetchOptions, fetchSearchParams);
+          data[ItemType[fetchItemType]] = data[ItemType[fetchItemType]].concat(subPageData);
+        }
+        if (data[ItemType[fetchItemType]]) {
+          return data[ItemType[fetchItemType]];
+        } else if (data.name) {
+          return [data];
+        } else {
+          return [];
+        }
+      } else {
+        const message = data?.error?.message || `Error returned from Google Cloud Healthcare: ${response.status} - ${response.statusText}`;
+        throw new Error(message);
+      }
+    } catch (err) {
+      const message = err?.message || 'Error occurred during fetch request.';
+      throw new Error(message);
+    }
+  }
+}
+
 ;// CONCATENATED MODULE: ../../../extensions/default/src/getCustomizationModule.tsx
 
 
 
+
+
 /**
  *
  * Note: this is an example of how the customization module can be used
@@ -6344,7 +6733,11 @@ function DataSourceSelector() {
  * custom page for the user to view their profile, or to add a custom
  * page for login etc.
  */
-function getCustomizationModule() {
+function getCustomizationModule(_ref) {
+  let {
+    servicesManager,
+    extensionManager
+  } = _ref;
   return [{
     name: 'helloPage',
     value: {
@@ -6458,6 +6851,17 @@ function getCustomizationModule() {
         }
         return clonedObject;
       }
+    }, {
+      // the generic GUI component to configure a data source using an instance of a BaseDataSourceConfigurationAPI
+      id: 'ohif.dataSourceConfigurationComponent',
+      component: Components_DataSourceConfigurationComponent.bind(null, {
+        servicesManager,
+        extensionManager
+      })
+    }, {
+      // The factory for creating an instance of a BaseDataSourceConfigurationAPI for Google Cloud Healthcare
+      id: 'ohif.dataSourceConfigurationAPI.google',
+      factory: dataSourceName => new GoogleCloudDataSourceConfigurationAPI(dataSourceName, servicesManager, extensionManager)
     }]
   }];
 }

package/dist/{410.bundle.819f12d4a10a16f66582.js → 410.bundle.73658423c3c2c6f7263f.js}

@@ -12,10 +12,10 @@ __webpack_require__.d(__webpack_exports__, {
   "default": () => (/* binding */ basic_dev_mode_src)
 });
 
-// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
-var src = __webpack_require__(60082);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var core_src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var src = __webpack_require__(33570);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var core_src = __webpack_require__(38930);
 ;// CONCATENATED MODULE: ../../../modes/basic-dev-mode/src/toolbarButtons.js
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l

package/dist/{451.bundle.353be6110631bf74541b.js → 451.bundle.a573877dff7b43382138.js}

@@ -19,10 +19,10 @@ var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
 var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
 var es = __webpack_require__(69190);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
-// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
-var ui_src = __webpack_require__(60082);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var ui_src = __webpack_require__(33570);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/initSEGToolGroup.ts
 function createSEGToolGroupAndAddTools(ToolGroupService, customizationService, toolGroupId) {
   const {
@@ -120,6 +120,7 @@ function _getStatusComponent(_ref) {
       break;
     case false:
       StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        className: "text-aqua-pale",
         name: "status-untracked"
       });
       ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "Click LOAD to load segmentation.");

package/dist/{471.bundle.26a7b18545380999bf15.js → 471.bundle.e9ecd59867a19e323234.js}

@@ -17,10 +17,10 @@ var react = __webpack_require__(43001);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(3827);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
-// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
-var ui_src = __webpack_require__(60082);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var ui_src = __webpack_require__(33570);
 // EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-rt/src/utils/_hydrateRT.ts
 var _hydrateRT = __webpack_require__(50995);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
@@ -114,6 +114,7 @@ function _getStatusComponent(_ref) {
       break;
     case false:
       StatusIcon = () => /*#__PURE__*/react.createElement(ui_src/* Icon */.JO, {
+        className: "text-aqua-pale",
         name: "status-untracked"
       });
       ToolTipMessage = () => /*#__PURE__*/react.createElement("div", null, "Click LOAD to load RTSTRUCT.");

package/dist/{506.bundle.a283db0a482175fbb3ac.js → 506.bundle.25789c2270ca2f0d97d1.js}

@@ -23,8 +23,8 @@ const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(43001);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
 var dcmjs_es = __webpack_require__(67540);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-rt/src/loadRTStruct.js

package/dist/{663.bundle.751d2d27e38cd81e4ecb.js → 663.bundle.55721e776396d06003ca.js}

@@ -25,8 +25,8 @@ const id = package_namespaceObject.u2;
 const SOPClassHandlerName = 'dicom-sr';
 const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 10 modules
 var esm = __webpack_require__(45451);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 323 modules
@@ -1596,8 +1596,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 337 modules
 var esm = __webpack_require__(45754);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-sr/src/utils/getLabelFromDCMJSImportedToolData.js
 /**
  * Extracts the label from the toolData imported from dcmjs. We need to do this

package/dist/{678.bundle.9995ff30e61c63ed6e9b.js → 678.bundle.eb17b616827ad2710f8f.js}

@@ -37,8 +37,8 @@ var react = __webpack_require__(43001);
 var esm = __webpack_require__(45754);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 323 modules
 var dist_esm = __webpack_require__(26925);
-// EXTERNAL MODULE: ../../core/src/index.ts + 105 modules
-var src = __webpack_require__(61529);
+// EXTERNAL MODULE: ../../core/src/index.ts + 106 modules
+var src = __webpack_require__(38930);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/streaming-image-volume-loader/dist/esm/index.js + 13 modules
 var streaming_image_volume_loader_dist_esm = __webpack_require__(7087);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js
@@ -116,8 +116,8 @@ function destroy() {
   }
   webWorkers.length = 0;
 }
-// EXTERNAL MODULE: ../../ui/src/index.js + 456 modules
-var ui_src = __webpack_require__(60082);
+// EXTERNAL MODULE: ../../ui/src/index.js + 458 modules
+var ui_src = __webpack_require__(33570);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone/src/utils/callInputDialog.tsx