test-graph-view | integration with dev + split rework

frontend/src/Components/RoadConditions/ConditionsMap.tsx

@@ -1,6 +1,6 @@
 import MapWrapper from '../Map/MapWrapper';
 import { FC } from 'react';
-import '../../css/road_conditions.css';
+import '../../css/road_details.css';
 import ForceMapUpdate from '../Map/ForceMapUpdate';
 
 interface Props {

frontend/src/Components/RoadDetails/MapArea.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import ImageGallery from './ImageGallery';
 import MapWrapper from '../Map/MapWrapper';
+import ForceMapUpdate from '../Map/ForceMapUpdate';
 
+interface Props {
+  triggerUpdate: number;
+}
 /**
  * The map area op the road details(road inspect) page
  */
-const MapArea: React.FC = () => {
+const MapArea: React.FC<Props> = ({ triggerUpdate }) => {
   return (
     <div className="map-area">
       <div className="map_area" style={{ height: '100%' }}>
-        <MapWrapper></MapWrapper>
+        <MapWrapper>
+          <ForceMapUpdate triggerUpdate={triggerUpdate} />
+        </MapWrapper>
       </div>
       <div className="imageGallery_container">
         <ImageGallery /> {/* Use the imageGallery component */}

frontend/src/css/road_details.css

@@ -81,6 +81,14 @@
   transition: 0.4s;
 }
 
+.road-conditions-graph {
+  position: relative;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 /* Style to change the background color when switched on */
 input:checked + .slider {
   background-color: #4caf50;

frontend/src/pages/RoadConditions.tsx

@@ -8,7 +8,7 @@ import { GraphProvider } from '../context/GraphContext';
 import Split from 'react-split';
 
 import '../css/split.css';
-import '../css/road_conditions.css';
+import '../css/road_details.css';
 import { useEffect, useState } from 'react';
 import { getConditionsWay } from '../queries/conditions';
 

frontend/src/pages/RoadDetails.tsx

@@ -1,19 +1,101 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import '../css/road_details.css'; // Import the CSS file
 import MapArea from '../Components/RoadDetails/MapArea';
 import RoadImage from '../Components/RoadDetails/RoadImage';
 import TopBar from '../Components/RoadDetails/TopBar';
+import Split from 'react-split';
+import ConditionsGraph from '../Components/RoadConditions/ConditionsGraph';
+import { ChartData } from 'chart.js';
+import { getConditionsWay } from '../queries/conditions';
+import '../css/split.css';
 
 const RoadDetails = () => {
   const [showMapImageMode, setShowRoadImageMode] = useState(false);
+  const [wayData, setWayData] =
+    useState<ChartData<'scatter', number[], number>>();
+  const [triggerUpdate, setTriggerUpdate] = useState<number>(0);
+  const [splitElement, setSplitElement] = useState<React.ReactNode>(
+    <Split
+      className="split"
+      direction="vertical"
+      sizes={[45, 55]}
+      minSize={150}
+      snapOffset={10}
+      onDragEnd={() => {
+        setTriggerUpdate((prev) => prev + 1);
+      }}
+      // dragInterval={50}
+    >
+      {showMapImageMode ? (
+        <RoadImage />
+      ) : (
+        <MapArea triggerUpdate={triggerUpdate} />
+      )}
+      <ConditionsGraph data={wayData} />
+    </Split>,
+  );
+
+  useEffect(() => {
+    console.log('showMapImageMode has been changed');
+    setSplitElement(
+      <Split
+        className="split"
+        direction="vertical"
+        sizes={[45, 55]}
+        minSize={150}
+        snapOffset={10}
+        onDragEnd={() => {
+          setTriggerUpdate((prev) => prev + 1);
+        }}
+      >
+        {showMapImageMode ? (
+          <RoadImage />
+        ) : (
+          <MapArea triggerUpdate={triggerUpdate} />
+        )}
+        <ConditionsGraph data={wayData} />
+      </Split>,
+    );
+  }, [showMapImageMode, wayData, triggerUpdate]);
+
+  useEffect(() => {
+    getConditionsWay('0cba0666-d75e-45bd-9da6-62ef0fe9544c', (wc) => {
+      console.log(wc);
+      setWayData({
+        labels: wc.map((p) => p.way_dist * 100),
+        datasets: [
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'KPI',
+            borderColor: 'rgb(255, 99, 132)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.KPI),
+            yAxisID: 'KPI',
+          },
+          {
+            //@ts-ignore
+            type: 'line' as const,
+            label: 'DI',
+            borderColor: 'rgb(120, 245, 23)',
+            borderWidth: 2,
+            fill: false,
+            tension: 0.2,
+            data: wc.map((p) => p.DI),
+            yAxisID: 'DI',
+          },
+        ],
+      });
+    });
+  }, []);
 
   return (
     <div>
       <TopBar isToggleOn={setShowRoadImageMode} />
-      {showMapImageMode ? <RoadImage /> : <MapArea />}
-      {/* TODO: putting plots here */}
-      <div className="plot-area">{/* Content for the plot area */}</div>
+      {splitElement}
     </div>
   );
 };