diff --git a/src/js/components/BentoAppRouter.tsx b/src/js/components/BentoAppRouter.tsx index a0bbb4ba..e1eff82b 100644 --- a/src/js/components/BentoAppRouter.tsx +++ b/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]); diff --git a/src/js/features/metadata/metadata.store.ts b/src/js/features/metadata/metadata.store.ts index a4db6abc..fff237ee 100644 --- a/src/js/features/metadata/metadata.store.ts +++ b/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, }, diff --git a/src/js/utils/router.ts b/src/js/utils/router.ts index 21c98edb..fb098e30 100644 --- a/src/js/utils/router.ts +++ b/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, };