fix data late update bug

waldowred5 · Jun 10, 2024 · 89bf620 · 89bf620
1 parent 6f92b91
commit 89bf620
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
@@ -104,7 +104,11 @@ export const Dashboard = () => {
             setObservationsCount={setObservationsCount}
             setObservationsLoading={setObservationsLoading}
           />
-          <StatsBar observationsData={observationsData} observationsCount={observationsCount}/>
+          <StatsBar
+            observationsData={observationsData}
+            observationsCount={observationsCount}
+            observationsLoading={observationsLoading}
+          />
           <div className="h-full p-4">
             <Observations
               isLoading={observationsLoading}

diff --git a/src/components/DatastreamSelect.tsx b/src/components/DatastreamSelect.tsx
@@ -3,6 +3,8 @@ import { buildUrlWithParams } from "../api/utils.ts";
 import { useEffect, useState } from "react";
 import { DatastreamsByFeature, EntityData, Observation } from "../types.ts";
 
+type OptionValue = { id: number, url: string }
+
 interface ISensorSelectProps {
   datastreams: DatastreamsByFeature;
   selectedFeature: string;
@@ -19,53 +21,70 @@ export const DatastreamSelect = (
     setObservationsCount,
     setObservationsLoading,
   }: ISensorSelectProps) => {
-  const [selectedDatastreamUrl, setSelectedDatastreamUrl] = useState<string>('');
+  const [selectedDatastream, setSelectedDatastreamUrl] = useState<string>('');
   const [observationsUrl, setObservationsUrl] = useState<string>('');
+  const [datastreamId, setDatastreamId] = useState<number>(0);
+  const [datastreamUrl, setDatastreamUrl] = useState<string>('');
 
   const {
     isPending,
     isError,
     isFetching,
     data,
   } = useQuery<EntityData<Observation>>({
-    queryKey: [`observations:${selectedDatastreamUrl}`, selectedDatastreamUrl],
+    queryKey: [`observations:${datastreamId}`, datastreamUrl],
     queryFn: () => fetch(observationsUrl).then((res) => res.json()),
-    enabled: !!selectedDatastreamUrl,
+    enabled: !!datastreamUrl,
   });
 
   useEffect(() => {
-    if (selectedDatastreamUrl) {
-      const url = buildUrlWithParams(selectedDatastreamUrl, { '$count': true, '$top': 500, '$filter': `year(phenomenonTime) eq 2023` });
-      setObservationsUrl(url);
+    if (selectedDatastream) {
+      const { id, url } = JSON.parse(selectedDatastream) as OptionValue;
+      setDatastreamId(id);
+      setDatastreamUrl(url);
     }
-  }, [selectedDatastreamUrl]);
+  }, [selectedDatastream]);
+
+  useEffect(() => {
+    if (selectedDatastream) {
+      const { url } = JSON.parse(selectedDatastream) as OptionValue;
+      const urlWithParams = buildUrlWithParams(url, { '$count': true, '$top': 500, '$filter': `year(phenomenonTime) eq 2023` });
+      setObservationsUrl(urlWithParams);
+    }
+  }, [selectedDatastream]);
 
   useEffect(() => {
     if (isFetching) {
       setObservationsLoading(true);
     }
 
-    if (!isPending && !isError) {
+    if (!isPending && !isError && !isFetching) {
       setObservationsCount(data['@iot.count'] || 0);
       setObservationsData(data.value);
       setObservationsLoading(false);
     }
-  }, [data, isPending, isError, isFetching, setObservationsData, setObservationsCount, setObservationsLoading]);
+  }, [data, isPending, isFetching, isError, setObservationsData, setObservationsCount, setObservationsLoading]);
 
   return (
     <div className="selector-container">
       <label className="label p-0">...then select a Datastream</label>
       <select
         className="selector"
-        value={selectedDatastreamUrl}
+        value={selectedDatastream}
         onChange={(e) => setSelectedDatastreamUrl(e.target.value)}
         disabled={!selectedFeature}
       >
         <option value="">Select a datastream...</option>
         {
           datastreams[selectedFeature] && datastreams[selectedFeature].map((datastream) => {
+            const optionData = { id: datastream['@iot.id'], url: datastream['Observations@iot.navigationLink'] };
+            const optionValue = JSON.stringify(optionData);
+
             return (
-              <option key={datastream['@iot.id']} value={datastream['Observations@iot.navigationLink']}>
+              <option
+                key={datastream['@iot.id']}
+                value={optionValue}
+              >
                 {datastream.description}
               </option>
             );

diff --git a/src/components/StatsBar.tsx b/src/components/StatsBar.tsx
@@ -4,21 +4,31 @@ import { useEffect, useState } from "react";
 interface IStatsBarProps {
   observationsData: Observation[];
   observationsCount: number;
+  observationsLoading: boolean;
 }
 
-export const StatsBar = ({ observationsData, observationsCount }: IStatsBarProps) => {
-  const [dataPointsCount, setDataPointsCount] = useState<number>(0);
-  const [minValue, setMinValue] = useState<number>(0);
-  const [maxValue, setMaxValue] = useState<number>(0);
-  const [meanValue, setMeanValue] = useState<number>(0);
+export const StatsBar = ({ observationsData, observationsCount, observationsLoading }: IStatsBarProps) => {
+  const [dataPointsCount, setDataPointsCount] = useState<string>('--');
+  const [minValue, setMinValue] = useState<string>('--');
+  const [maxValue, setMaxValue] = useState<string>('--');
+  const [meanValue, setMeanValue] = useState<string>('--');
+
+  useEffect(() => {
+    if (observationsLoading) {
+      setDataPointsCount('--');
+      setMinValue('--');
+      setMaxValue('--');
+      setMeanValue('--');
+    }
+  }, [observationsLoading]);
 
   useEffect(() => {
     if (observationsData.length > 0) {
-      setDataPointsCount(observationsCount);
+      setDataPointsCount(observationsCount.toString());
 
       const minVal = Math.min(...observationsData.map(observation => observation.result));
-      setMinValue(minVal);
-      setMaxValue(Math.max(...observationsData.map(observation => observation.result)));
+      setMinValue(minVal.toString());
+      setMaxValue(Math.max(...observationsData.map(observation => observation.result)).toString());
 
       const decimalIndex = minVal.toString().indexOf('.');
       const normalisedDecimalPlaces = decimalIndex === -1 ? 0 : decimalIndex;
@@ -28,9 +38,9 @@ export const StatsBar = ({ observationsData, observationsCount }: IStatsBarProps
       }, 0) / observationsData.length;
       const trimmedMeanValue = Number(meanValue.toFixed(decimalPlaces));
 
-      setMeanValue(trimmedMeanValue);
+      setMeanValue(trimmedMeanValue.toString());
     }
-  }, [observationsData]);
+  }, [observationsData, observationsCount]);
 
   return (
     <div className="flex justify-around border-b-4 border-accent p-4">