speedspacechart: rewrite steps and reticle management

- Gather steps rectangle, lines and title together
  - Hidden if the layer is disabled
- Match style with mock-up (color, size, opacity)
- Step snapping matches the mock-up
- Add vetical and horizontal lines from crosshair to axis
- Multiple small fixes

Signed-off-by: Florian Amsallem <[email protected]>

Author: flomonster

package-lock.json

@@ -40,6 +40,7 @@
     "@osrd-project/ui-core": "0.0.1-dev",
     "@osrd-project/ui-icons": "0.0.1-dev",
     "@types/d3": "^7.4.3",
+    "chroma-js": "^3.1.1",
     "classnames": "^2.5.1",
     "d3": "^7.9.0",
     "tailwindcss": "^3.4.1"

ui-speedspacechart/package.json

@@ -5,17 +5,16 @@ import SettingsPanel from './common/SettingsPanel';
 import { LINEAR_LAYERS_HEIGHTS, MARGINS } from './const';
 import { resetZoom } from './helpers/layersManager';
 import {
-  AxisLayerX,
+  StepsLayer,
+  AxisLayerY,
   CurveLayer,
   DeclivityLayer,
   ElectricalProfileLayer,
   FrontInteractivityLayer,
   PowerRestrictionsLayer,
   ReticleLayer,
   SpeedLimitTagsLayer,
-  StepLayer,
   TickLayerX,
-  AxisLayerY,
   TickLayerYRight,
 } from './layers/index';
 import { getAdaptiveHeight, getGraphOffsets, getLinearLayerMarginTop } from './utils';
@@ -182,9 +181,8 @@ const SpeedSpaceChart = ({
         <DeclivityLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
       )}
       <CurveLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
-      <AxisLayerX width={adjustedWidthRightAxis} height={height} store={store} />
       {store.layersDisplay.steps && (
-        <StepLayer width={WIDTH_OFFSET} height={HEIGHT_OFFSET} store={store} />
+        <StepsLayer width={adjustedWidthRightAxis} height={height} store={store} />
       )}
       <AxisLayerY width={width} height={height} store={store} />
       {store.layersDisplay.electricalProfiles && (

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -36,7 +36,7 @@ const DetailsBox = ({
   previousGradientText,
   modeText,
 }: DetailsBoxProps) => {
-  const { MARGIN_TOP, MARGIN_BOTTOM, MARGIN_LEFT, MARGIN_RIGHT } = MARGINS;
+  const { MARGIN_BOTTOM, MARGIN_RIGHT } = MARGINS;
   const { energySource, tractionStatus, declivities, electricalProfiles, powerRestrictions } =
     store.detailsBoxDisplay;
 
@@ -46,12 +46,12 @@ const DetailsBox = ({
   const adaptedOffset = store.isSettingsPanelOpened ? 641 : 115;
 
   // find out if the box is going out off the right side of the canvas
-  if (curveX + MARGIN_LEFT + adaptedOffset > width - MARGIN_RIGHT - 10) rightOffset = 127;
+  if (curveX + adaptedOffset > width - MARGIN_RIGHT - 10) rightOffset = 127;
   // find out if the box is going out off the bottom side of the canvas
-  if (curveY + MARGIN_TOP + 180 > height - MARGIN_BOTTOM - 10) bottomOffset = 192;
+  if (curveY + 180 > height - MARGIN_BOTTOM - 10) bottomOffset = 192;
 
-  const boxX = curveX + MARGIN_LEFT + 6 - rightOffset;
-  const boxY = curveY + MARGIN_TOP + 6 - bottomOffset;
+  const boxX = curveX + 6 - rightOffset;
+  const boxY = curveY + 6 - bottomOffset;
 
   const speedDifference = Number(speedText) - Number(ecoSpeedText);
   const speedDifferenceText =

ui-speedspacechart/src/components/common/DetailsBox.tsx

@@ -1,3 +1,5 @@
+import chroma from 'chroma-js';
+
 import { type ColorDictionary, type Store } from '../types/chartTypes';
 
 export const SLOPE_FILL_COLOR = '#CFDDCE';
@@ -23,6 +25,8 @@ export const MARGINS = {
   OFFSET_RIGHT_AXIS: 42,
 };
 
+export const CURSOR_SNAP_DISTANCE = 6;
+
 export const LINEAR_LAYERS_HEIGHTS = {
   ELECTRICAL_PROFILES_HEIGHT: 56,
   POWER_RESTRICTIONS_HEIGHT: 40,
@@ -63,6 +67,13 @@ export const LAYERS_SELECTION: Array<keyof Store['layersDisplay']> = [
   'speedLimitTags',
 ];
 
+// Colors
+
+export const BLACK = chroma(0, 0, 0);
+export const GREY_50 = chroma(121, 118, 113);
+export const GREY_80 = chroma(49, 46, 43);
+export const LIGHT_BLUE = chroma(33, 112, 185);
+
 /**
  * COLOR_DICTIONARY maps specific colors to their corresponding secondary colors used for speed limit tags.
  */