Fix initial experiment state namespace bug (#57)

G-Research · Apr 1, 2024 · e6946ab · e6946ab
1 parent 582ed30
commit e6946ab
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/src/src/pages/Experiment/useExperimentState.tsx b/src/src/pages/Experiment/useExperimentState.tsx
@@ -5,7 +5,7 @@ import { IExperimentData } from 'modules/core/api/experimentsApi';
 
 import experimentEngine from './ExperimentStore';
 
-function useExperimentState(experimentId: string) {
+function useExperimentState(experimentId?: string) {
   const { current: engine } = React.useRef(experimentEngine);
   const experimentState: IResourceState<IExperimentData> =
     engine.experimentState((state) => state);
@@ -21,7 +21,12 @@ function useExperimentState(experimentId: string) {
   }, []);
 
   React.useEffect(() => {
-    engine.fetchExperimentData(experimentId as any);
+    if (experimentId) {
+      engine.fetchExperimentData(experimentId as any);
+    } else {
+      // Fetch the default experiment in the namespace
+      engine.fetchExperimentsData();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [experimentId]);
 

diff --git a/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx b/src/src/pages/Metrics/components/MetricsBar/MetricsBar.tsx
@@ -13,6 +13,10 @@ import ConfirmModal from 'components/ConfirmModal/ConfirmModal';
 
 import { DOCUMENTATIONS } from 'config/references';
 
+import { IResourceState } from 'modules/core/utils/createResource';
+import { IExperimentData } from 'modules/core/api/experimentsApi';
+
+import createExperimentEngine from 'pages/Dashboard/components/ExploreSection/ExperimentsCard/ExperimentsStore';
 import ExperimentBar from 'pages/Experiment/components/ExperimentBar';
 import useExperimentState from 'pages/Experiment/useExperimentState';
 
@@ -41,9 +45,22 @@ function MetricsBar({
 
   const route = useRouteMatch<any>();
 
+  const { current: experimentsEngine } = React.useRef(createExperimentEngine);
+
+  const experimentsStore: IResourceState<IExperimentData[]> =
+    experimentsEngine.experimentsState((state) => state);
+
+  React.useEffect(() => {
+    experimentsEngine.fetchExperiments();
+    return () => {
+      experimentsEngine.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Fetch all experiments along with default
   const { experimentState, experimentsState, getExperimentsData } =
-    useExperimentState('0');
+    useExperimentState(experimentsStore.data?.[0]?.id);
 
   const { data: experimentData, loading: isExperimentLoading } =
     experimentState;