fixup! ui-manchette: first version of proportional manchette

package.json

@@ -56,4 +56,4 @@
     "rollup": "^4.13.0",
     "typescript": "^5.4.2"
   }
-}
+}

ui-manchette/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
+    "lodash.isequal": "^4.5.0",
     "tailwindcss": "^3.4.1"
   },
   "peerDependencies": {

ui-manchette/src/components/Manchette.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import OperationalPointList from './OperationalPointList';
-import { OperationalPointType } from '../types/pathPropertiesTypes';
+import { OperationalPointType } from '../types';
 import { ZoomIn, ZoomOut } from '@osrd-project/ui-icons';
 
-interface ManchetteProps {
+type ManchetteProps = {
   operationalPoints: OperationalPointType[];
   children?: React.ReactNode;
   isProportionnal?: boolean;
-}
+};
 
 const Manchette: React.FC<ManchetteProps> = ({
   operationalPoints,

ui-manchette/src/components/OperationalPoint.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
-import { OperationalPointType } from '../types/pathPropertiesTypes';
+import { OperationalPointType } from '../types';
 import '@osrd-project/ui-core/dist/theme.css';
-import { positionKm } from './helpers';
+import { positionMmtoKm } from './helpers';
 
-const OperationalPoint: React.FC<OperationalPointType> = ({ extensions, id, part, position }) => {
+const OperationalPoint: React.FC<OperationalPointType> = ({ extensions, id, position }) => {
   return (
     <div className="flex op items-baseline" id={id}>
-      <div className="op-position justify-self-start text-end">{positionKm(position)}</div>
+      <div className="op-position justify-self-start text-end">{positionMmtoKm(position)}</div>
 
-      <div className="op-name mr-2 ml-2 justify-self-start">{extensions?.identifier?.name}</div>
+      <div className="op-name mx-2 justify-self-start">{extensions?.identifier?.name}</div>
       <div className="op-separator"></div>
       <div className="op-ch font-mono justify-self-end">{extensions?.sncf?.ch}</div>
       <div className="op-separator"></div>
 
       <div className="op-type"></div>
       <div className="op-separator"></div>
-      {/* <div className="lines"></div> */}
     </div>
   );
 };

ui-manchette/src/components/OperationalPointList.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
-import { OperationalPointType } from '../types/pathPropertiesTypes';
+import { isEqual } from 'lodash';
+import { OperationalPointType } from '../types';
 import OperationalPoint from './OperationalPoint';
-import cx from 'classnames';
-import { positionKm } from './helpers';
+import { positionMmtoKm } from './helpers';
+import { BASE_KM_HEIGHT, BASE_OP_HEIGHT } from './consts';
 
-interface OperationalPointListProps {
+type OperationalPointListProps = {
   operationalPoints: OperationalPointType[];
   isProportionnal?: boolean;
   zoom?: number;
-  width?: number;
-}
+};
 
 const OperationalPointList: React.FC<OperationalPointListProps> = ({
   operationalPoints,
@@ -19,45 +19,46 @@ const OperationalPointList: React.FC<OperationalPointListProps> = ({
   const [operationalPointsToDisplay, setOperationalPointsToDisplay] = React.useState<
     OperationalPointType[]
   >([]);
-  const baseHeight = 32;
 
-  const operationalPointStyle = (op: OperationalPointType, nextOp: OperationalPointType) => {
+  const operationalPointStyle = (op: OperationalPointType, currentOp: OperationalPointType) => {
     if (isProportionnal) {
-      if (!nextOp) {
-        return { height: `${baseHeight}px` };
+      if (!currentOp) {
+        return { height: `${BASE_OP_HEIGHT}px` };
       } else {
-        return { height: `${positionKm(nextOp.position - op.position) * zoom * 8}px` };
+        return {
+          height: `${positionMmtoKm(currentOp.position - op.position) * zoom * BASE_KM_HEIGHT}px`,
+        };
       }
     } else {
-      return { height: `${baseHeight * zoom}px` };
+      return { height: `${BASE_OP_HEIGHT * zoom}px` };
     }
   };
 
   useEffect(() => {
     const calcOperationalPointsToDisplay = () => {
       if (isProportionnal) {
         const result = operationalPoints.reduce(
-          (acc, nextOp) => {
-            const op = acc[acc.length - 1];
-            const diff = positionKm(nextOp.position - op.position);
-            if (diff * 8 * zoom >= baseHeight) {
-              acc.push(nextOp);
+          (accumulatedPoints, currentOp) => {
+            const lastDisplayedPoint = accumulatedPoints[accumulatedPoints.length - 1];
+            const distance = positionMmtoKm(currentOp.position - lastDisplayedPoint.position);
+            if (distance * BASE_KM_HEIGHT * zoom >= BASE_OP_HEIGHT) {
+              accumulatedPoints.push(currentOp);
             }
-            return acc;
+            return accumulatedPoints;
           },
           [operationalPoints[0]]
         );
 
-        const lastElement = operationalPoints[operationalPoints.length - 1];
-        if (result[result.length - 1] !== lastElement) {
-          result.push(lastElement);
+        const lastPoint = operationalPoints[operationalPoints.length - 1];
+        if (isEqual(result[result.length - 1], lastPoint)) {
+          result.push(lastPoint);
         }
 
         const secondLastIndex = result.length - 2;
         if (secondLastIndex >= 0) {
-          const secondLastElement = result[secondLastIndex];
-          const lastDiff = positionKm(lastElement.position - secondLastElement.position);
-          if (lastDiff * 8 * zoom < baseHeight) {
+          const secondLastPoint = result[secondLastIndex];
+          const lastDiff = positionMmtoKm(lastPoint.position - secondLastPoint.position);
+          if (lastDiff * BASE_KM_HEIGHT * zoom < BASE_OP_HEIGHT) {
             result.splice(secondLastIndex, 1);
           }
         }
@@ -73,10 +74,9 @@ const OperationalPointList: React.FC<OperationalPointListProps> = ({
   return (
     <div className="operational-point-list">
       {operationalPointsToDisplay.map((op, index) => (
-        //WIP : length will be usefull for proportionnal display
         <div
           key={index}
-          className={cx('operational-point-wrapper flex flex-col justify-start', {})}
+          className="operational-point-wrapper flex flex-col justify-start"
           style={operationalPointStyle(op, operationalPointsToDisplay[index + 1])}
         >
           <OperationalPoint {...op} />

ui-manchette/src/components/consts.ts

@@ -0,0 +1,2 @@
+export const BASE_OP_HEIGHT = 32;
+export const BASE_KM_HEIGHT = 8;

ui-manchette/src/components/helpers.ts

@@ -1,3 +1,3 @@
-export const positionKm = (position: number) => {
+export const positionMmtoKm = (position: number) => {
   return Math.round((position / 1000000) * 10) / 10;
 };

ui-manchette/src/stories/Manchette.stories.ts

@@ -5,11 +5,11 @@ import { SAMPLE_DATA } from './assets/sampleData';
 
 import Manchette from '../components/Manchette';
 
-const OperationalPointListData = SAMPLE_DATA.operational_points;
+const OperationalPointListData = SAMPLE_DATA.operational_points ?? [];
 
 const meta: Meta<typeof Manchette> = {
   component: Manchette,
-  title: 'Manchette',
+  title: 'Manchette/Manchette',
   tags: ['autodocs'],
 };
 

ui-manchette/src/stories/OperationalPoint.stories.ts

@@ -5,11 +5,11 @@ import { SAMPLE_DATA } from './assets/sampleData';
 
 import OperationalPoint from '../components/OperationalPoint';
 
-const { id, extensions, part, position } = SAMPLE_DATA.operational_points[12];
+const { id, extensions, part, position } = SAMPLE_DATA.operational_points?.[0] ?? {};
 
 const meta: Meta<typeof OperationalPoint> = {
   component: OperationalPoint,
-  title: 'OperationalPoint',
+  title: 'Manchette/OperationalPoint',
   tags: ['autodocs'],
 };
 

ui-manchette/src/stories/OperationalPointList.stories.ts

@@ -5,11 +5,11 @@ import { SAMPLE_DATA } from './assets/sampleData';
 
 import OperationalPointList from '../components/OperationalPointList';
 
-const OperationalPointListData = SAMPLE_DATA.operational_points;
+const OperationalPointListData = SAMPLE_DATA.operational_points ?? [];
 
 const meta: Meta<typeof OperationalPointList> = {
   component: OperationalPointList,
-  title: 'OperationalPointList',
+  title: 'Manchette/OperationalPointList',
   tags: ['autodocs'],
 };