Disable Click-to-Search for Non-Searchable Fields in Overview

src/js/components/BentoAppRouter.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch } from '@/hooks';
 
 import { makeGetConfigRequest, makeGetServiceInfoRequest } from '@/features/config/config.store';
 import { makeGetAboutRequest } from '@/features/content/content.store';
-import { makeGetDataRequestThunk } from '@/features/data/data.store';
+import { makeGetDataRequestThunk, populateClickable } from '@/features/data/data.store';
 import { makeGetKatsuPublic, makeGetSearchFields } from '@/features/search/query.store';
 import { makeGetProvenanceRequest } from '@/features/provenance/provenance.store';
 import { getBeaconConfig } from '@/features/beacon/beaconConfig.store';
@@ -26,19 +26,31 @@ const BentoAppRouter = () => {
   const isAuthenticated = useIsAuthenticated();
 
   useEffect(() => {
-    dispatch(makeGetConfigRequest()).then(() => dispatch(getBeaconConfig()));
-    dispatch(makeGetAboutRequest());
-    dispatch(makeGetDataRequestThunk());
-    dispatch(makeGetSearchFields());
-    dispatch(makeGetProvenanceRequest());
-    dispatch(makeGetKatsuPublic());
-    dispatch(fetchKatsuData());
-    dispatch(fetchGohanData());
-    dispatch(makeGetServiceInfoRequest());
-    //TODO: Dispatch makeGetDataTypes to get the data types from service-registry
-    if (isAuthenticated) {
-      dispatch(makeGetDataTypes());
-    }
+    const fetchInitialData = async () => {
+      try {
+        await dispatch(makeGetConfigRequest());
+        await dispatch(getBeaconConfig());
+        await dispatch(makeGetAboutRequest());
+
+        await Promise.all([dispatch(makeGetDataRequestThunk()), dispatch(makeGetSearchFields())]);
+
+        dispatch(populateClickable());
+
+        await dispatch(makeGetProvenanceRequest());
+        await dispatch(makeGetKatsuPublic());
+        await dispatch(fetchKatsuData());
+        await dispatch(fetchGohanData());
+        await dispatch(makeGetServiceInfoRequest());
+
+        if (isAuthenticated) {
+          await dispatch(makeGetDataTypes());
+        }
+      } catch (error) {
+        console.error('Error fetching initial data', error);
+      }
+    };
+
+    fetchInitialData();
   }, [isAuthenticated]);
 
   if (isAutoAuthenticating) {

src/js/components/Overview/Chart.tsx

@@ -14,14 +14,17 @@ import {
   ChartConfig,
 } from '@/types/chartConfig';
 
-const Chart = memo(({ chartConfig, data, units, id }: ChartProps) => {
+const Chart = memo(({ chartConfig, data, units, id, isClickable }: ChartProps) => {
   const { t, i18n } = useTranslation();
   const navigate = useNavigate();
   const translateMap = ({ x, y }: { x: string; y: number }) => ({ x: t(x), y });
   const removeMissing = ({ x }: { x: string }) => x !== 'missing';
   const barChartOnClickHandler = (d: { payload: { x: string } }) => {
     navigate(`/${i18n.language}/search?${id}=${d.payload.x}`);
   };
+  const pieChartOnClickHandler = (d: { name: string }) => {
+    navigate(`/${i18n.language}/search?${id}=${d.name}`);
+  };
 
   const { chart_type: type } = chartConfig;
 
@@ -34,7 +37,7 @@ const Chart = memo(({ chartConfig, data, units, id }: ChartProps) => {
           units={units}
           preFilter={removeMissing}
           dataMap={translateMap}
-          onClick={barChartOnClickHandler}
+          {...(isClickable ? { onClick: barChartOnClickHandler } : {})}
         />
       );
     case CHART_TYPE_HISTOGRAM:
@@ -45,7 +48,7 @@ const Chart = memo(({ chartConfig, data, units, id }: ChartProps) => {
           data={data}
           preFilter={removeMissing}
           dataMap={translateMap}
-          onClick={barChartOnClickHandler}
+          {...(isClickable ? { onClick: barChartOnClickHandler } : {})}
         />
       );
     case CHART_TYPE_PIE:
@@ -55,9 +58,7 @@ const Chart = memo(({ chartConfig, data, units, id }: ChartProps) => {
           height={PIE_CHART_HEIGHT}
           preFilter={removeMissing}
           dataMap={translateMap}
-          onClick={(d) => {
-            navigate(`/${i18n.language}/search?${id}=${d.name}`);
-          }}
+          {...(isClickable ? { onClick: pieChartOnClickHandler } : {})}
         />
       );
     case CHART_TYPE_CHOROPLETH: {
@@ -98,6 +99,7 @@ export interface ChartProps {
   data: ChartData[];
   units: string;
   id: string;
+  isClickable: boolean;
 }
 
 export default Chart;

src/js/components/Overview/ChartCard.tsx

@@ -34,6 +34,7 @@ const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChar
     data,
     field: { id, description, title, config },
     chartConfig,
+    isSearchable,
   } = chart;
 
   const extraOptionsData = [
@@ -63,7 +64,14 @@ const ChartCard: React.FC<ChartCardProps> = memo(({ section, chart, onRemoveChar
         }
       >
         {data.filter((e) => !(e.x === 'missing')).length !== 0 ? (
-          <Chart chartConfig={chartConfig} data={data} units={config?.units || ''} id={id} key={id} />
+          <Chart
+            chartConfig={chartConfig}
+            data={data}
+            units={config?.units || ''}
+            id={id}
+            key={id}
+            isClickable={isSearchable}
+          />
         ) : (
           <Row style={ROW_EMPTY_STYLE} justify="center" align="middle">
             <CustomEmpty text="No Data" />

src/js/components/Overview/PublicOverview.tsx

@@ -25,7 +25,11 @@ const PublicOverview = () => {
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [aboutContent, setAboutContent] = useState('');
 
-  const { isFetchingData: isFetchingOverviewData, sections } = useAppSelector((state) => state.data);
+  const {
+    isFetchingData: isFetchingOverviewData,
+    isContentPopulated,
+    sections,
+  } = useAppSelector((state) => state.data);
   const { isFetchingAbout, about } = useAppSelector((state) => state.content);
 
   useEffect(() => {
@@ -49,7 +53,7 @@ const PublicOverview = () => {
     saveToLocalStorage(sections);
   }, [sections]);
 
-  return isFetchingOverviewData ? (
+  return !isContentPopulated ? (
     <Loader />
   ) : (
     <>

src/js/features/data/data.store.ts

@@ -1,18 +1,30 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 import { makeGetDataRequestThunk } from './makeGetDataRequest.thunk';
 import { Sections } from '@/types/data';
 import { Counts } from '@/types/overviewResponse';
+import { QueryState } from '@/features/search/query.store';
+
+export const populateClickable = createAsyncThunk<string[], void, { state: { query: QueryState } }>(
+  'data/populateClickable',
+  async (_, { getState }) => {
+    return getState()
+      .query.querySections.flatMap((section) => section.fields)
+      .map((field) => field.id);
+  }
+);
 
 interface DataState {
   isFetchingData: boolean;
+  isContentPopulated: boolean;
   defaultLayout: Sections;
   sections: Sections;
   counts: Counts;
 }
 
 const initialState: DataState = {
   isFetchingData: true,
+  isContentPopulated: false,
   defaultLayout: [],
   sections: [],
   counts: {
@@ -88,6 +100,14 @@ const data = createSlice({
       })
       .addCase(makeGetDataRequestThunk.rejected, (state) => {
         state.isFetchingData = false;
+      })
+      .addCase(populateClickable.fulfilled, (state, { payload }) => {
+        state.sections.forEach((section) => {
+          section.charts.forEach((chart) => {
+            chart.isSearchable = payload.includes(chart.id);
+          });
+        });
+        state.isContentPopulated = true;
       });
   },
 });

src/js/features/data/makeGetDataRequest.thunk.ts

@@ -38,6 +38,7 @@ export const makeGetDataRequestThunk = createAsyncThunk<
       // Initial display state
       isDisplayed: i < MAX_CHARTS,
       width: chart.width ?? DEFAULT_CHART_WIDTH, // initial configured width; users can change it from here
+      isSearchable: false,
     };
   };
 

src/js/features/search/query.store.ts

@@ -5,7 +5,7 @@ import { serializeChartData } from '@/utils/chart';
 import { KatsuSearchResponse, SearchFieldResponse } from '@/types/search';
 import { ChartData } from '@/types/data';
 
-type QueryState = {
+export type QueryState = {
   isFetchingFields: boolean;
   isFetchingData: boolean;
   attemptedFetch: boolean;

src/js/types/data.ts

@@ -23,6 +23,7 @@ export interface ChartDataField {
   // display options:
   isDisplayed: boolean; // whether the chart is currently displayed (state data)
   width: number; // current width (state data); initial data taken from chart config
+  isSearchable: boolean; // whether the field is searchable
 }
 
 export interface ChartData {