Frontend cleanup

Signed-off-by: Emil Balitzki <[email protected]>
amosproj · Jul 14, 2024 · c977350 · c977350
1 parent 0da046d
commit c977350
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 15 deletions.
diff --git a/backend/metadata-database/init-db.js b/backend/metadata-database/init-db.js
@@ -171,10 +171,10 @@ const datasets = [
       MarkersThreshold: -1,
       DisplayProperty: [
         { displayName: "Station Name", value: "station_name" },
-        { displayName: "Nitrogen Dioxide (NO2)", value: "no2" },
-        { displayName: "Particulate Matter (PM10)", value: "pm10" },
-        { displayName: "Particulate Matter (PM2'5)", value: "pm2_5" },
-        { displayName: "Ozone (O3)", value: "o3" },
+        { displayName: "Nitrogen Dioxide (NO₂)", value: "no2" },
+        { displayName: "Particulate Matter (PM₁₀)", value: "pm10" },
+        { displayName: "Particulate Matter (PM₂,₅)", value: "pm2_5" },
+        { displayName: "Ozone (O₃)", value: "o3" },
         { displayName: "Carbon monoxide (CO)", value: "co" },
         { displayName: "Date", value: "date" },
         { displayName: "Time", value: "time" },

diff --git a/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs b/backend/src/BIE.Core/BIE.Core.API/DatasetHandlers/CsvDatasetHandler.cs
@@ -72,11 +72,11 @@ public string GetDataInsideArea(BoundingBox boundingBox)
             if (mMetadata.basicData.DatasetId == "air_pollutants")
             {
                 properties["station_name"] = row["station_name"];
-                properties["pm10"] = row["pm10"] + row["unit"];
-                properties["pm2_5"] = row["pm2_5"] + row["unit"];
-                properties["no2"] = row["no2"] + row["unit"];
-                properties["o3"] = row["o3"] + row["unit"];
-                properties["co"] = row["co"] + row["unit"];
+                properties["pm10"] = row["pm10"] == "-" ? row["pm10"] : row["pm10"] + row["unit"];
+                properties["pm2_5"] = row["pm2_5"] == "-" ? row["pm2_5"] : row["pm2_5"] + row["unit"];
+                properties["no2"] = row["no2"] == "-" ? row["no2"] : row["no2"] + row["unit"];
+                properties["o3"] = row["o3"] == "-" ? row["o3"] : row["o3"] + row["unit"];
+                properties["co"] = row["co"] == "-" ? row["co"] : row["co"] + row["unit"];
                 properties["date"] = row["date"];
                 properties["time"] = row["time"];
             }

diff --git a/frontend/src/components/DataView/DataRow.css b/frontend/src/components/DataView/DataRow.css
@@ -45,3 +45,8 @@
   text-align: center;
   display: flex;
 }
+
+.subrow-filler {
+  max-width: 4rem !important;
+  width: 4rem;
+}
diff --git a/frontend/src/components/DataView/DataRow.tsx b/frontend/src/components/DataView/DataRow.tsx
@@ -24,6 +24,7 @@ import { AlertContext } from "../../contexts/AlertContext";
 import L, { LatLng } from "leaflet";
 import { TabsContext } from "../../contexts/TabsContext";
 import { MapContext } from "../../contexts/MapContext";
+import { MarkerSelection } from "../../types/MapSelectionTypes";
 
 interface RowProps {
   row: DatasetItem;
@@ -36,24 +37,39 @@ interface RowProps {
 const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
   const [open, setOpen] = useState(false);
   const [shouldFlyTo, setShouldFlyTo] = useState<LatLng | null>(null);
+  const [shouldFlyToName, setShouldFlyToName] = useState<string | null>(null);
   const { currentAlertCache, setCurrentAlertCache } = useContext(AlertContext);
   const { changeToOrOpenNewTab } = useContext(TabsContext);
-  const { currentMapCache } = useContext(MapContext);
+  const { setCurrentMapCache, currentMapCache } = useContext(MapContext);
 
   /**
    * Triggers fly to on the next map change
    */
   useEffect(() => {
-    if (shouldFlyTo && currentMapCache.mapInstance) {
-      currentMapCache.mapInstance.flyTo(shouldFlyTo, currentMapCache.zoom);
+    if (shouldFlyTo && shouldFlyToName && currentMapCache.mapInstance) {
+      currentMapCache.mapInstance.flyTo(shouldFlyTo, 16, {
+        animate: true,
+        duration: 5,
+      });
+      // Change the selection
+      setCurrentMapCache({
+        ...currentMapCache,
+        selectedCoordinates: new MarkerSelection(
+          shouldFlyTo,
+          shouldFlyToName,
+          false
+        ),
+      });
       setShouldFlyTo(null);
+      setShouldFlyToName(null);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentMapCache.mapInstance]);
 
   const openDatasetFromMapIcon = async (
     mapId: string | null,
-    coordinates: number[] | null
+    coordinates: number[] | null,
+    displayName: string
   ) => {
     if (currentDatasets) {
       const datasetToOpen = currentDatasets.find(
@@ -83,9 +99,22 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
           const latLng = new LatLng(coordinates[0], coordinates[1]);
           if (ifSwitched) {
             setShouldFlyTo(latLng);
+            setShouldFlyToName(displayName);
           } else {
             if (currentMapCache.mapInstance) {
-              currentMapCache.mapInstance.flyTo(latLng, currentMapCache.zoom);
+              currentMapCache.mapInstance.flyTo(latLng, 16, {
+                animate: true,
+                duration: 5,
+              });
+              // Change the selection
+              setCurrentMapCache({
+                ...currentMapCache,
+                selectedCoordinates: new MarkerSelection(
+                  latLng,
+                  displayName,
+                  false
+                ),
+              });
             }
           }
         }
@@ -167,7 +196,11 @@ const DataRow: React.FC<RowProps> = ({ row, currentDatasets }) => {
                 aria-label="open on the map"
                 size="small"
                 onClick={() => {
-                  openDatasetFromMapIcon(row.datasetId, row.coordinate);
+                  openDatasetFromMapIcon(
+                    row.datasetId,
+                    row.coordinate,
+                    row.displayName
+                  );
                 }}
               >
                 <MapPin />