test-graph-view | added force map update on conditions map to trigger…

… "referesh"
DTU-SE-Group-D · Oct 8, 2023 · 58d656f · 58d656f
1 parent 2505497
commit 58d656f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/frontend/src/Components/Map/ForceMapUpdate.tsx b/frontend/src/Components/Map/ForceMapUpdate.tsx
@@ -16,6 +16,7 @@ const ForceMapUpdate: React.FC<Props> = ({ triggerUpdate, position }) => {
   const map = useMap();
 
   useEffect(() => {
+    console.log('hello');
     map.invalidateSize();
   }, [triggerUpdate]);
 

diff --git a/frontend/src/Components/RoadConditions/ConditionsMap.tsx b/frontend/src/Components/RoadConditions/ConditionsMap.tsx
@@ -1,15 +1,20 @@
 import MapWrapper from '../Map/MapWrapper';
 import { FC } from 'react';
 import '../../css/road_conditions.css';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
-interface Props {}
+interface Props {
+  triggerUpdate: number;
+}
 
-const ConditionsMap: FC<Props> = () => {
+const ConditionsMap: FC<Props> = ({ triggerUpdate }) => {
   //TODO trigger redrwaw the plot
 
   return (
     <div className="road-conditions-map">
-      <MapWrapper></MapWrapper>
+      <MapWrapper>
+        <ForceMapUpdate triggerUpdate={triggerUpdate} />
+      </MapWrapper>
     </div>
   );
 };

diff --git a/frontend/src/pages/RoadConditions.tsx b/frontend/src/pages/RoadConditions.tsx
@@ -16,6 +16,7 @@ import { getConditionsWay } from '../queries/conditions';
 const RoadConditions = () => {
   const [wayData, setWayData] =
     useState<ChartData<'scatter', number[], number>>();
+  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
 
   console.log(wayData);
 
@@ -60,9 +61,12 @@ const RoadConditions = () => {
         sizes={[45, 55]}
         minSize={150}
         snapOffset={10}
+        onDragEnd={() => {
+          setTriggerUpdate((prev) => prev + 1);
+        }}
         // dragInterval={50}
       >
-        <ConditionsMap />
+        <ConditionsMap triggerUpdate={triggerUpdate} />
         <ConditionsGraph data={wayData} />
       </Split>
     </GraphProvider>