fix: make datasource selection work (#4944)

extensions/default/src/customizations/reportDialogCustomization.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { InputDialog, cn } from '@ohif/ui-next';
+import { InputDialog } from '@ohif/ui-next';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ohif/ui-next';
 import { useSystem } from '@ohif/core';
 
@@ -54,19 +54,19 @@ function ReportDialog({ dataSources, hide, onSave, onCancel }: ReportDialogProps
     setReportName(newReportName);
   }, [selectedSeries, seriesOptions]);
 
-  const handleSave = () => {
+  const handleSave = useCallback(() => {
     onSave({
       reportName,
       dataSource: selectedDataSource,
       series: selectedSeries,
     });
     hide();
-  };
+  }, [selectedDataSource, selectedSeries, reportName, hide, onSave]);
 
-  const handleCancel = () => {
+  const handleCancel = useCallback(() => {
     onCancel();
     hide();
-  };
+  }, [onCancel, hide]);
 
   const showDataSourceSelect = dataSources?.length > 1;
 

extensions/default/src/utils/promptSaveReport.tsx

@@ -40,7 +40,7 @@ async function promptSaveReport({ servicesManager, commandsManager, extensionMan
     });
 
     if (promptResult.action === PROMPT_RESPONSES.CREATE_REPORT) {
-      const dataSources = extensionManager.getDataSources();
+      const dataSources = extensionManager.getDataSources(promptResult.dataSourceName);
       const dataSource = dataSources[0];
       const measurementData = measurementService.getMeasurements(measurementFilter);
 

platform/core/src/extensions/ExtensionManager.ts

@@ -87,9 +87,7 @@ export default class ExtensionManager extends PubSubService {
   };
   private dataSourceMap: Record<string, any>;
   private dataSourceDefs: Record<string, any>;
-  private defaultDataSourceName: string;
+  private activeDataSourceName: string;
-  private activeDataSource: string;
-  private peerImport: (moduleId) => Promise<any>;
 
   constructor({
     commandsManager,
@@ -117,20 +115,20 @@ export default class ExtensionManager extends PubSubService {
     this.dataSourceMap = {};
     this.dataSourceDefs = {};
     this.defaultDataSourceName = appConfig.defaultDataSourceName;
-    this.activeDataSource = appConfig.defaultDataSourceName;
+    this.activeDataSourceName = appConfig.defaultDataSourceName;
     this.peerImport = appConfig.peerImport;
   }
 
   public setActiveDataSource(dataSource: string): void {
-    if (this.activeDataSource === dataSource) {
+    if (this.activeDataSourceName === dataSource) {
       return;
     }
 
-    this.activeDataSource = dataSource;
+    this.activeDataSourceName = dataSource;
 
     this._broadcastEvent(
       ExtensionManager.EVENTS.ACTIVE_DATA_SOURCE_CHANGED,
-      this.dataSourceDefs[this.activeDataSource]
+      this.dataSourceDefs[this.activeDataSourceName]
     );
   }
 
@@ -375,7 +373,7 @@ export default class ExtensionManager extends PubSubService {
   getDataSources = dataSourceName => {
     if (dataSourceName === undefined) {
       // Default to the activeDataSource
-      dataSourceName = this.activeDataSource;
+      dataSourceName = this.activeDataSourceName;
     }
 
     // Note: this currently uses the data source name, which feels weird...
@@ -387,7 +385,7 @@ export default class ExtensionManager extends PubSubService {
   };
 
   getActiveDataSource = () => {
-    return this.dataSourceMap[this.activeDataSource];
+    return this.dataSourceMap[this.activeDataSourceName];
   };
 
   /**
@@ -400,7 +398,7 @@ export default class ExtensionManager extends PubSubService {
   getDataSourceDefinition = dataSourceName => {
     if (dataSourceName === undefined) {
       // Default to the activeDataSource
-      dataSourceName = this.activeDataSource;
+      dataSourceName = this.activeDataSourceName;
     }
 
     return this.dataSourceDefs[dataSourceName];
@@ -410,7 +408,7 @@ export default class ExtensionManager extends PubSubService {
    * Gets the data source definition for the active data source.
    */
   getActiveDataSourceDefinition = () => {
-    return this.getDataSourceDefinition(this.activeDataSource);
+    return this.getDataSourceDefinition(this.activeDataSourceName);
   };
 
   /**
@@ -424,16 +422,21 @@ export default class ExtensionManager extends PubSubService {
       return [];
     }
 
-    return Object.keys(this.dataSourceMap)
+    const inactiveDataSourceNames = Object.keys(this.dataSourceMap).filter(ds => {
-      .filter(ds => {
       const configuration = this.dataSourceDefs[ds]?.configuration;
-        return configuration?.supportsStow ?? configuration?.wadoRoot;
+      const isNotActiveDataSource =
-      })
+        this.dataSourceDefs[ds].sourceName !== this.activeDataSourceName;
-      .map(ds => ({
+      const supportsStowOrWado = configuration?.supportsStow ?? configuration?.wadoRoot;
+      return supportsStowOrWado && isNotActiveDataSource;
+    });
+
+    const allDatasourcesForUI = [this.activeDataSourceName, ...inactiveDataSourceNames].map(ds => ({
       value: ds,
       label: ds,
       placeHolder: ds,
     }));
+
+    return allDatasourcesForUI;
   };
 
   /**
@@ -555,7 +558,7 @@ export default class ExtensionManager extends PubSubService {
     dataSourceDef.configuration = dataSourceConfiguration;
     this._createDataSourceInstance(dataSourceDef);
 
-    if (this.activeDataSource === dataSourceName) {
+    if (this.activeDataSourceName === 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);
     }