Optimized datasets fetching

Signed-off-by: Emil Balitzki <[email protected]>
amosproj · Jul 12, 2024 · 06b87af · 06b87af
1 parent c40ce24
commit 06b87af
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/frontend/src/components/DataView/DataRow.tsx b/frontend/src/components/DataView/DataRow.tsx
@@ -13,8 +13,7 @@ import {
 } from "@mui/material";
 import { CaretDown, CaretUp, MapPin } from "@phosphor-icons/react";
 import "./DataRow.css";
-import { fetchDatasets } from "../../services/datasetsService";
-import { Dataset } from "../../types/DatasetTypes";
+import { Dataset, DatasetBasicData } from "../../types/DatasetTypes";
 import CustomSvgIcon from "../DatasetsList/CustomSvgIcon";
 import { svgIconDefault } from "../DatasetsList/DatasetsList";
 import { AlertContext } from "../../contexts/AlertContext";
@@ -24,9 +23,10 @@ import { MapContext } from "../../contexts/MapContext";
 
 interface RowProps {
   row: DatasetItem;
+  currentDatasets: DatasetBasicData[];
 }
 
-const DataRow: React.FC<RowProps> = ({ row }) => {
+const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
   const [open, setOpen] = useState(false);
   const [shouldFlyTo, setShouldFlyTo] = useState<LatLng | null>(null);
   const { currentAlertCache, setCurrentAlertCache } = useContext(AlertContext);
@@ -38,7 +38,7 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
    */
   useEffect(() => {
     if (shouldFlyTo && currentMapCache.mapInstance) {
-      currentMapCache.mapInstance.flyTo(shouldFlyTo);
+      currentMapCache.mapInstance.flyTo(shouldFlyTo, currentMapCache.zoom);
       setShouldFlyTo(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -48,9 +48,8 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
     mapId: string | null,
     coordinates: number[] | null
   ) => {
-    const datasetsData = await fetchDatasets();
-    if (datasetsData) {
-      const datasetToOpen = datasetsData.find(
+    if (currentDatasets) {
+      const datasetToOpen = currentDatasets.find(
         (dataset) => dataset.datasetId === mapId
       );
       if (datasetToOpen) {
@@ -79,7 +78,7 @@ const DataRow: React.FC<RowProps> = ({ row }) => {
             setShouldFlyTo(latLng);
           } else {
             if (currentMapCache.mapInstance) {
-              currentMapCache.mapInstance.flyTo(latLng);
+              currentMapCache.mapInstance.flyTo(latLng, currentMapCache.zoom);
             }
           }
         }

diff --git a/frontend/src/components/DataView/DataView.tsx b/frontend/src/components/DataView/DataView.tsx
@@ -31,6 +31,8 @@ import {
 } from "../../types/MapSelectionTypes";
 import { MultiPolygon, Position } from "geojson";
 import DataRow from "./DataRow";
+import { fetchDatasets } from "../../services/datasetsService";
+import { DatasetBasicData } from "../../types/DatasetTypes";
 
 // Function to filter and return an array of outer polygons
 function getOuterPolygons(multiPolygon: MultiPolygon): Position[][] {
@@ -47,6 +49,22 @@ const DataView = () => {
   const [data, setData] = useState<LocationDataResponse | undefined>();
   const [showSelectionData, setShowSelectionData] = useState(true);
   const [showIndividualData, setShowIndividualData] = useState(true);
+  const [currentDatasets, setCurrentDatasets] = useState<DatasetBasicData[]>(
+    []
+  );
+
+  /**
+   * Fetch the current datasets
+   */
+  useEffect(() => {
+    const fetchCurrentDatasets = async () => {
+      const datasets = await fetchDatasets();
+      if (datasets) {
+        setCurrentDatasets(datasets);
+      }
+    };
+    fetchCurrentDatasets();
+  });
 
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
@@ -192,7 +210,11 @@ const DataView = () => {
                   <Table>
                     <TableBody>
                       {filterData(data?.selectionData ?? []).map((row) => (
-                        <DataRow key={row.datasetID} row={row} />
+                        <DataRow
+                          key={row.datasetID}
+                          row={row}
+                          currentDatasets={currentDatasets}
+                        />
                       ))}
                     </TableBody>
                   </Table>
@@ -210,7 +232,11 @@ const DataView = () => {
                   <Table>
                     <TableBody>
                       {filterData(data?.individualData ?? []).map((row) => (
-                        <DataRow key={row.datasetID} row={row} />
+                        <DataRow
+                          key={row.datasetID}
+                          row={row}
+                          currentDatasets={currentDatasets}
+                        />
                       ))}
                     </TableBody>
                   </Table>