fix: don't double-fetch before scope is set + fetch data before click…

src/js/components/BentoAppRouter.tsx

@@ -66,10 +66,15 @@ const BentoAppRouter = () => {
   const { selectedScope, isFetching: isFetchingProjects } = useAppSelector((state) => state.metadata);
 
   useEffect(() => {
+    if (!selectedScope.scopeSet) return;
     dispatch(makeGetConfigRequest()).then(() => dispatch(getBeaconConfig()));
     dispatch(makeGetAboutRequest());
-    dispatch(makeGetDataRequestThunk());
-    dispatch(makeGetSearchFields()).then(() => dispatch(populateClickable()));
+    // The "Populate clickable" action needs both chart sections and search fields to be available.
+    // TODO: this is not a very good pattern. It would be better to have a memoized way of determining click-ability at
+    //  render time.
+    Promise.all([dispatch(makeGetDataRequestThunk()), dispatch(makeGetSearchFields())]).then(() =>
+      dispatch(populateClickable())
+    );
     dispatch(makeGetKatsuPublic());
     dispatch(fetchKatsuData());
   }, [dispatch, isAuthenticated, selectedScope]);

src/js/features/metadata/metadata.store.ts

@@ -11,6 +11,7 @@ export type DiscoveryScope = { project?: string; dataset?: string };
 
 export type DiscoveryScopeSelection = {
   scope: DiscoveryScope;
+  scopeSet: boolean;
   fixedProject: boolean;
   fixedDataset: boolean;
 };
@@ -26,6 +27,8 @@ const initialState: MetadataState = {
   isFetching: false,
   selectedScope: {
     scope: { project: undefined, dataset: undefined },
+    // Whether scope has been set from URL/action yet. If it hasn't, we need to wait before fetching scoped data.
+    scopeSet: false,
     fixedProject: false,
     fixedDataset: false,
   },

src/js/utils/router.ts

@@ -17,6 +17,7 @@ export const validProjectDataset = (projects: Project[], unvalidatedScope: Disco
 
   const valid: DiscoveryScopeSelection = {
     scope: { project: undefined, dataset: undefined },
+    scopeSet: true,
     fixedProject: false,
     fixedDataset: false,
   };