ui-manchette: integration manchette + spacetimechart done

OpenRailAssociation · Jul 5, 2024 · 28fa47c · 28fa47c
1 parent 102e682
commit 28fa47c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 21 deletions.
diff --git a/ui-manchette/src/components/Manchette.tsx b/ui-manchette/src/components/Manchette.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import OperationalPointList from './OperationalPointList';
 import { OperationalPointType, ProjectPathTrainResult, StyledOperationalPointType } from '../types';
 import { ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 import { SpaceTimeChart, PathLayer } from '@osrd-project/ui-spacetimechart';
 import { calcOperationalPointsToDisplay, operationalPointsHeight } from './helpers';
 import { OperationalPoint, PathData } from 'ui-spacetimechart/dist/lib/types';
-import { BASE_KM_HEIGHT } from './consts';
+import { BASE_KM_HEIGHT, BASE_OP_HEIGHT } from './consts';
 import { SpaceScale } from 'ui-spacetimechart/dist/lib/types';
 
 type ManchetteProps = {
@@ -19,6 +19,8 @@ const Manchette: React.FC<ManchetteProps> = ({
   projectPathTrainResult,
   isProportionnal = false,
 }) => {
+  const manchette = useRef(null);
+
   const [zoomY, setZoomY] = React.useState(1);
 
   const xZoomLevel = 1;
@@ -27,6 +29,8 @@ const Manchette: React.FC<ManchetteProps> = ({
 
   const [yOffset, setYOffset] = React.useState(0);
 
+  const [scrollPosition, setScrollPosition] = React.useState(0);
+
   const [operationalPointsToDisplay, setOperationalPointsToDisplay] = React.useState<
     StyledOperationalPointType[]
   >([]);
@@ -80,13 +84,21 @@ const Manchette: React.FC<ManchetteProps> = ({
         from: point.position,
         to: ops[i + 1].position,
         ...(!isProportionnal
-          ? { size: 50 * zoomY }
+          ? { size: BASE_OP_HEIGHT * zoomY }
           : { coefficient: ((1000 / BASE_KM_HEIGHT) * 1000) / zoomY }),
       };
     });
     return scales;
   };
 
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
   useEffect(() => {
     const computedOperationalPoints = calcOperationalPointsToDisplay(
       operationalPoints,
@@ -104,10 +116,19 @@ const Manchette: React.FC<ManchetteProps> = ({
     setScales(getScales(operationalPointsChart));
   }, [operationalPointsChart]);
 
+  const handleScroll = () => {
+    if (manchette.current) {
+      const { scrollTop } = manchette.current;
+      if (scrollTop || scrollTop === 0) setScrollPosition(scrollTop);
+    }
+  };
+
   return (
-    <div className="manchette flex">
+    <div ref={manchette} className="manchette flex" onScroll={handleScroll}>
       <div className="manchette-container">
-        <OperationalPointList operationalPoints={operationalPointsToDisplay} />
+        <div className=" bg-ambientB-10" style={{ minHeight: '521px' }}>
+          <OperationalPointList operationalPoints={operationalPointsToDisplay} />
+        </div>
         <div className="manchette-actions flex items-center">
           <div className=" flex items-center ">
             <button className="h-full px-3 w-full" onClick={zoomYOut} disabled={zoomY === 1}>
@@ -121,22 +142,28 @@ const Manchette: React.FC<ManchetteProps> = ({
           </div>
         </div>
       </div>
-      {scales.length > 0 && (
-        <SpaceTimeChart
-          className="inset-0 absolute"
-          operationalPoints={operationalPointsChart}
-          spaceOrigin={0}
-          spaceScales={scales}
-          timeOrigin={Math.min(...projectPathTrainResult.map((p) => +new Date(p.departure_time)))}
-          timeScale={60000 / xZoomLevel}
-          xOffset={xOffset}
-          yOffset={yOffset}
-        >
-          {paths.map((path, i) => (
-            <PathLayer key={path.id} index={i} path={path} color={path.color} />
-          ))}
-        </SpaceTimeChart>
-      )}
+      <div
+        className="space-time-chart-container w-full sticky"
+        style={{ bottom: 0, left: 0, top: 0, height: '561px' }}
+      >
+        {scales.length > 0 && (
+          <SpaceTimeChart
+            className="inset-0 absolute h-full"
+            style={{ top: 0, height: 'calc(100% - 6px)' }}
+            operationalPoints={operationalPointsChart}
+            spaceOrigin={0}
+            spaceScales={scales}
+            timeOrigin={Math.min(...projectPathTrainResult.map((p) => +new Date(p.departure_time)))}
+            timeScale={60000 / xZoomLevel}
+            xOffset={xOffset}
+            yOffset={-scrollPosition + 14}
+          >
+            {paths.map((path, i) => (
+              <PathLayer key={path.id} index={i} path={path} color={path.color} />
+            ))}
+          </SpaceTimeChart>
+        )}
+      </div>
     </div>
   );
 };

diff --git a/ui-manchette/src/styles/manchette.css b/ui-manchette/src/styles/manchette.css
@@ -18,4 +18,10 @@
     border: solid 1px;
     @apply border-black-25
   }
+
+  .space-time-chart-container {
+    height: 561px;
+    width: 100%;
+    bottom:0;
+  }
 }