[WIP] refact: use index as identifier for chart sections

src/js/components/Overview/ChartCard.tsx

@@ -73,9 +73,9 @@ const ChartCard = memo(({ section, chart, onRemoveChart, searchable }: ChartCard
 ChartCard.displayName = 'ChartCard';
 
 export interface ChartCardProps {
-  section: string;
+  section: number; // Section index (ID)
   chart: ChartDataField;
-  onRemoveChart: (arg: { section: string; id: string }) => void;
+  onRemoveChart: (arg: { section: number; id: string }) => void;
   searchable?: boolean;
 }
 

src/js/components/Overview/Drawer/ChartTree.tsx

@@ -84,7 +84,7 @@ const ChartTree = ({ charts, section }: ChartTreeProps) => {
 
 export interface ChartTreeProps {
   charts: ChartDataField[];
-  section: string;
+  section: number;
 }
 
 export default ChartTree;

src/js/components/Overview/Drawer/ManageChartsDrawer.tsx

@@ -4,7 +4,6 @@ const { Title } = Typography;
 
 import ChartTree from './ChartTree';
 
-import type { ChartDataField } from '@/types/data';
 import { useAppSelector, useAppDispatch, useTranslationFn } from '@/hooks';
 import { hideAllSectionCharts, setAllDisplayedCharts, resetLayout } from '@/features/data/data.store';
 
@@ -42,8 +41,8 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
         </Space>
       }
     >
-      {sections.map(({ sectionTitle, charts }: { sectionTitle: string; charts: ChartDataField[] }, i: number) => (
-        <div key={i}>
+      {sections.map(({ index, sectionTitle, charts }) => (
+        <div key={index}>
           <Flex justify="space-between" align="center" style={{ padding: '10px 0' }}>
             <Title level={5} style={{ margin: '0' }}>
               {t(sectionTitle)}
@@ -52,22 +51,22 @@ const ManageChartsDrawer = ({ onManageDrawerClose, manageDrawerVisible }: Manage
               <Button
                 size="small"
                 onClick={() => {
-                  dispatch(setAllDisplayedCharts({ section: sectionTitle }));
+                  dispatch(setAllDisplayedCharts({ section: index }));
                 }}
               >
                 Show All
               </Button>
               <Button
                 size="small"
                 onClick={() => {
-                  dispatch(hideAllSectionCharts({ section: sectionTitle }));
+                  dispatch(hideAllSectionCharts({ section: index }));
                 }}
               >
                 Hide All
               </Button>
             </Space>
           </Flex>
-          <ChartTree charts={charts} section={sectionTitle} />
+          <ChartTree charts={charts} section={index} />
         </div>
       ))}
     </Drawer>

src/js/components/Overview/OverviewDisplayData.tsx

@@ -9,9 +9,9 @@ import { CHART_WIDTH, GRID_GAP } from '@/constants/overviewConstants';
 
 import ChartCard from './ChartCard';
 
-import type { ChartDataField } from '@/types/data';
+import type { ChartDataField, Section } from '@/types/data';
 
-const OverviewDisplayData = ({ section, allCharts, searchableFields }: OverviewDisplayDataProps) => {
+const OverviewDisplayData = ({ section, searchableFields }: OverviewDisplayDataProps) => {
   const dispatch = useAppDispatch();
   const isSmallScreen = useSmallScreen();
 
@@ -21,10 +21,12 @@ const OverviewDisplayData = ({ section, allCharts, searchableFields }: OverviewD
     gridTemplateColumns: `repeat(auto-fit, ${CHART_WIDTH}px)`,
   };
 
+  const { index: sectionIndex, charts: allCharts } = section;
+
   const displayedCharts = useMemo(() => allCharts.filter((e) => e.isDisplayed), [allCharts]);
 
   const onRemoveChart = useCallback(
-    ({ section, id }: { section: string; id: string }) => {
+    ({ section, id }: { section: number; id: string }) => {
       dispatch(disableChart({ section, id }));
     },
     [dispatch]
@@ -35,7 +37,7 @@ const OverviewDisplayData = ({ section, allCharts, searchableFields }: OverviewD
       <ChartCard
         key={chart.id}
         chart={chart}
-        section={section}
+        section={sectionIndex}
         onRemoveChart={onRemoveChart}
         searchable={searchableFields.has(chart.id)}
       />
@@ -54,8 +56,7 @@ const OverviewDisplayData = ({ section, allCharts, searchableFields }: OverviewD
 };
 
 export interface OverviewDisplayDataProps {
-  section: string;
-  allCharts: ChartDataField[];
+  section: Section;
   searchableFields: Set<string>;
 }
 

src/js/components/Overview/OverviewSection.tsx

@@ -2,23 +2,16 @@ import { Typography, Space } from 'antd';
 
 import OverviewDisplayData from './OverviewDisplayData';
 import { useTranslationFn } from '@/hooks';
-import type { ChartDataField } from '@/types/data';
+import type { Section } from '@/types/data';
 
-const OverviewSection = ({
-  title,
-  chartData,
-  searchableFields,
-}: {
-  title: string;
-  chartData: ChartDataField[];
-  searchableFields: Set<string>;
-}) => {
+const OverviewSection = ({ section, searchableFields }: { section: Section; searchableFields: Set<string> }) => {
   const t = useTranslationFn();
+  const { sectionTitle: title } = section;
 
   return (
     <Space direction="vertical" size={0} style={{ width: '100%' }}>
       <Typography.Title level={3}>{t(title)}</Typography.Title>
-      <OverviewDisplayData section={title} allCharts={chartData} searchableFields={searchableFields} />
+      <OverviewDisplayData section={section} searchableFields={searchableFields} />
     </Space>
   );
 };

src/js/components/Overview/PublicOverview.tsx

@@ -92,10 +92,8 @@ const PublicOverview = () => {
       )}
       <Row>
         <Col flex={1}>
-          {displayedSections.map(({ sectionTitle, charts }, i) => (
-            <div key={i} className="overview">
-              <OverviewSection title={sectionTitle} chartData={charts} searchableFields={searchableFields} />
-            </div>
+          {displayedSections.map((section) => (
+            <OverviewSection key={section.index} section={section} searchableFields={searchableFields} />
           ))}
           <LastIngestionInfo />
         </Col>

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

@@ -28,50 +28,44 @@ const data = createSlice({
   name: 'data',
   initialState,
   reducers: {
-    rearrange: (state, { payload }: PayloadAction<{ section: string; arrangement: string[] }>) => {
+    rearrange: (state, { payload }: PayloadAction<{ section: number; arrangement: string[] }>) => {
       const { section, arrangement } = payload;
-      const sectionObj = state.sections.find((e) => e.sectionTitle === section)!;
+      const sectionObj = state.sections[section]!;
       const chartsCopy = [...sectionObj.charts];
       sectionObj.charts = arrangement.map((e) => chartsCopy.find((i) => e === i.id)!);
     },
-    disableChart: (state, { payload }: PayloadAction<{ section: string; id: string }>) => {
+    disableChart: (state, { payload }: PayloadAction<{ section: number; id: string }>) => {
       const { section, id } = payload;
-      state.sections.find((e) => e.sectionTitle === section)!.charts.find((e) => e.id === id)!.isDisplayed = false;
+      state.sections[section]!.charts.find((e) => e.id === id)!.isDisplayed = false;
     },
-    setDisplayedCharts: (state, { payload }: PayloadAction<{ section: string; charts: string[] }>) => {
+    setDisplayedCharts: (state, { payload }: PayloadAction<{ section: number; charts: string[] }>) => {
       const { section, charts } = payload;
-      state.sections
-        .find((e) => e.sectionTitle === section)!
-        .charts.forEach((val, ind, arr) => {
-          arr[ind].isDisplayed = charts.includes(val.id);
-        });
+      state.sections[section]!.charts.forEach((val, ind, arr) => {
+        arr[ind].isDisplayed = charts.includes(val.id);
+      });
     },
-    setChartWidth: (state, { payload }: PayloadAction<{ section: string; chart: string; width: number }>) => {
+    setChartWidth: (state, { payload }: PayloadAction<{ section: number; chart: string; width: number }>) => {
       const { section, chart, width } = payload;
-      const chartObj = state.sections.find((e) => e.sectionTitle === section)!.charts.find((c) => c.id === chart)!;
+      const chartObj = state.sections[section]!.charts.find((c) => c.id === chart)!;
       chartObj.width = width;
     },
-    setAllDisplayedCharts: (state, { payload }: PayloadAction<{ section?: string }>) => {
-      if (payload.section) {
-        state.sections
-          .find((e) => e.sectionTitle === payload.section)!
-          .charts.forEach((_, ind, arr) => {
-            arr[ind].isDisplayed = true;
-          });
+    setAllDisplayedCharts: (state, { payload: { section } }: PayloadAction<{ section?: number }>) => {
+      if (section) {
+        state.sections[section]!.charts.forEach((_, ind, arr) => {
+          arr[ind].isDisplayed = true;
+        });
       } else {
         state.sections.forEach((section) => {
-          section.charts.forEach((val, ind, arr) => {
+          section.charts.forEach((_, ind, arr) => {
             arr[ind].isDisplayed = true;
           });
         });
       }
     },
-    hideAllSectionCharts: (state, { payload }: PayloadAction<{ section: string }>) => {
-      state.sections
-        .find((e) => e.sectionTitle === payload.section)!
-        .charts.forEach((_, ind, arr) => {
-          arr[ind].isDisplayed = false;
-        });
+    hideAllSectionCharts: (state, { payload: { section } }: PayloadAction<{ section: number }>) => {
+      state.sections[section]!.charts.forEach((_, ind, arr) => {
+        arr[ind].isDisplayed = false;
+      });
     },
     resetLayout: (state) => {
       state.sections = state.defaultLayout;

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

@@ -43,7 +43,9 @@ export const makeGetDataRequestThunk = createAsyncThunk<
     };
   };
 
-  const sectionData: Sections = sections.map(({ section_title, charts }) => ({
+  const sectionData: Sections = sections.map(({ section_title, charts }, index) => ({
+    // Give every overview section a unique ID by way of using the index, before any filtering occurs.
+    index,
     sectionTitle: section_title,
     charts: charts.map(normalizeChart),
   }));

src/js/types/data.ts

@@ -4,6 +4,7 @@ import type { OverviewResponseDataField } from '@/types/overviewResponse';
 export type Sections = Section[];
 
 export type Section = {
+  index: number;
   sectionTitle: string;
   charts: ChartDataField[];
 };

src/js/utils/localStorage.ts

@@ -48,8 +48,8 @@ export const getValue = <T>(key: string, defaultVal: T, verifyFunc: (arg: any) =
 
 export const convertSequenceAndDisplayData = (sections: Sections) => {
   const temp: LocalStorageData = {};
-  sections.forEach(({ sectionTitle, charts }) => {
-    temp[sectionTitle] = charts.map(({ id, isDisplayed, width }) => ({ id, isDisplayed, width }));
+  sections.forEach(({ index, charts }) => {
+    temp[index] = charts.map(({ id, isDisplayed, width }) => ({ id, isDisplayed, width }));
   });
   return temp;
 };