front: Rank the map layers in the right order #2187

front/.eslintrc

@@ -34,7 +34,8 @@
       }
     ],
     "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"]
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }]
   },
   "settings": {
     "import/resolver": {

front/package.json

@@ -32,9 +32,9 @@
     "classnames": "^2.3.2",
     "d3": "^5.16.0",
     "d3-brush": "^3.0.0",
+    "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "d3-drag": "^3.0.0",
     "fast-json-patch": "^3.1.1",
     "geojson": "^0.5.0",
     "history": "^5.3.0",

front/src/applications/carto/Map.js → front/src/applications/carto/Map.tsx

@@ -1,9 +1,13 @@
-import 'common/Map/Map.scss';
-
 import React, { useCallback, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import ReactMapGL, { AttributionControl, FlyToInterpolator, ScaleControl } from 'react-map-gl';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { updateViewport } from 'reducers/map';
+import { RootState } from 'reducers';
+
+import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
+
 /* Main data & layers */
 import Background from 'common/Map/Layers/Background';
 import BufferStops from 'common/Map/Layers/BufferStops';
@@ -18,7 +22,6 @@ import OperationalPoints from 'common/Map/Layers/OperationalPoints';
 import Platform from 'common/Map/Layers/Platform';
 import Routes from 'common/Map/Layers/Routes';
 import SearchMarker from 'common/Map/Layers/SearchMarker';
-import SignalingType from 'common/Map/Layers/SignalingType';
 import Signals from 'common/Map/Layers/Signals';
 import SpeedLimits from 'common/Map/Layers/SpeedLimits';
 import SNCF_LPV from 'common/Map/Layers/extensions/SNCF/SNCF_LPV';
@@ -28,15 +31,15 @@ import TracksOSM from 'common/Map/Layers/TracksOSM';
 import TracksSchematic from 'common/Map/Layers/TracksSchematic';
 import colors from 'common/Map/Consts/colors';
 import osmBlankStyle from 'common/Map/Layers/osmBlankStyle';
-import { updateViewport } from 'reducers/map';
-import { useParams } from 'react-router-dom';
+
+import 'common/Map/Map.scss';
 
 function Map() {
   const { viewport, mapSearchMarker, mapStyle, mapTrackSources, showOSM, layersSettings } =
-    useSelector((state) => state.map);
-  const [idHover, setIdHover] = useState(undefined);
+    useSelector((state: RootState) => state.map);
+  const [idHover, setIdHover] = useState('');
   const { urlLat, urlLon, urlZoom, urlBearing, urlPitch } = useParams();
-  const { fullscreen } = useSelector((state) => state.main);
+  const { fullscreen } = useSelector((state: RootState) => state.main);
   const dispatch = useDispatch();
   const updateViewportChange = useCallback(
     (value) => dispatch(updateViewport(value, '/carto')),
@@ -51,8 +54,8 @@ function Map() {
   const resetPitchBearing = () => {
     updateViewportChange({
       ...viewport,
-      bearing: parseFloat(0),
-      pitch: parseFloat(0),
+      bearing: parseFloat('0'),
+      pitch: parseFloat('0'),
       transitionDuration: 1000,
       transitionInterpolator: new FlyToInterpolator(),
     });
@@ -116,44 +119,130 @@ function Map() {
         />
         <ScaleControl maxWidth={100} unit="metric" style={scaleControlStyle} />
 
-        <Background colors={colors[mapStyle]} />
+        <Background
+          colors={colors[mapStyle]}
+          layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
+        />
 
         {!showOSM ? null : (
           <>
-            <OSM mapStyle={mapStyle} />
-            <Hillshade mapStyle={mapStyle} />
+            <OSM mapStyle={mapStyle} layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]} />
+            <Hillshade
+              mapStyle={mapStyle}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BACKGROUND.GROUP]}
+            />
           </>
         )}
 
         {/* Have to duplicate objects with sourceLayer to avoid cache problems in mapbox */}
         {mapTrackSources === 'geographic' ? (
           <>
-            <Platform colors={colors[mapStyle]} />
-            <TracksGeographic colors={colors[mapStyle]} />
-            <Catenaries geomType="geo" colors={colors[mapStyle]} />
-            <TracksOSM colors={colors[mapStyle]} />
-            <OperationalPoints geomType="geo" colors={colors[mapStyle]} />
-            <SignalingType geomType="geo" />
-            <Routes geomType="geo" colors={colors[mapStyle]} />
-            <SpeedLimits geomType="geo" colors={colors[mapStyle]} />
+            <Platform
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.PLATFORM.GROUP]}
+            />
+
+            <TracksGeographic
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.TRACKS_GEOGRAPHIC.GROUP]}
+            />
+            <TracksOSM
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.TRACKS_OSM.GROUP]}
+            />
+
+            <Routes
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP]}
+            />
+            <OperationalPoints
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.OPERATIONAL_POINTS.GROUP]}
+            />
+            <Catenaries
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.CATENARIES.GROUP]}
+            />
+            <BufferStops
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP]}
+            />
+            <Detectors
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP]}
+            />
+            <Switches
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP]}
+            />
+
+            <SpeedLimits
+              geomType="geo"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
+            />
             <SNCF_LPV geomType="geo" colors={colors[mapStyle]} />
-            <Signals sourceLayer="geo" sourceTable="signals" colors={colors[mapStyle]} />
-            <BufferStops geomType="geo" colors={colors[mapStyle]} />
-            <Detectors geomType="geo" colors={colors[mapStyle]} />
-            <Switches geomType="geo" colors={colors[mapStyle]} />
+
+            <Signals
+              sourceTable="signals"
+              colors={colors[mapStyle]}
+              sourceLayer="geo"
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP]}
+            />
           </>
         ) : (
           <>
-            <TracksSchematic colors={colors[mapStyle]} idHover={idHover} />
-            <Catenaries geomType="sch" colors={colors[mapStyle]} />
-            <OperationalPoints geomType="sch" colors={colors[mapStyle]} />
-            <Routes geomType="sch" colors={colors[mapStyle]} />
-            <SpeedLimits geomType="sch" colors={colors[mapStyle]} />
+            <TracksSchematic
+              colors={colors[mapStyle]}
+              idHover={idHover}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.TRACKS_SCHEMATIC.GROUP]}
+            />
+
+            <Routes
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP]}
+            />
+            <OperationalPoints
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.OPERATIONAL_POINTS.GROUP]}
+            />
+            <BufferStops
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP]}
+            />
+            <Detectors
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP]}
+            />
+            <Switches
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP]}
+            />
+
+            <SpeedLimits
+              geomType="sch"
+              colors={colors[mapStyle]}
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP]}
+            />
             <SNCF_LPV geomType="sch" colors={colors[mapStyle]} />
-            <Signals sourceLayer="sch" sourceTable="signals" colors={colors[mapStyle]} />
-            <BufferStops geomType="sch" colors={colors[mapStyle]} />
-            <Detectors geomType="sch" colors={colors[mapStyle]} />
-            <Switches geomType="sch" colors={colors[mapStyle]} />
+
+            <Signals
+              sourceTable="signals"
+              colors={colors[mapStyle]}
+              sourceLayer="sch"
+              layerOrder={LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP]}
+            />
           </>
         )}
 

front/src/applications/osrd/components/OSRDConfMap/RenderItinerary.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Source, Layer } from 'react-map-gl';
+import { useSelector } from 'react-redux';
+
+import { RootState } from 'reducers';
+
+import OrderedLayer from 'common/Map/Layers/OrderedLayer';
+
+interface RenderItineraryProps {
+  layerOrder: number;
+}
+
+export default function RenderItinerary(props: RenderItineraryProps) {
+  const { layerOrder } = props;
+  const { geojson, origin, destination } = useSelector((state: RootState) => state.osrdconf);
+  const { mapTrackSources } = useSelector((state: RootState) => state.map);
+  if (geojson && geojson[mapTrackSources] && origin !== undefined && destination !== undefined) {
+    return (
+      <Source type="geojson" data={geojson[mapTrackSources]}>
+        <OrderedLayer
+          type="line"
+          paint={{
+            'line-width': 5,
+            'line-color': 'rgba(210, 225, 0, 0.75)',
+          }}
+          layerOrder={layerOrder}
+        />
+      </Source>
+    );
+  }
+  return null;
+}

front/src/applications/osrd/components/Simulation/SpaceTimeChart/createChart.ts

@@ -1,10 +1,9 @@
 import * as d3 from 'd3';
 import { select as d3select } from 'd3-selection';
 
-import { Chart } from 'reducers/osrdsimulation';
+import { Chart, SimulationTrain } from 'reducers/osrdsimulation';
 import { defineLinear, defineTime } from 'applications/osrd/components/Helpers/ChartHelpers';
 import defineChart from 'applications/osrd/components/Simulation/defineChart';
-import { SimulationTrain } from './createTrain';
 
 export default function createChart(
   chart: Chart,

front/src/applications/osrd/components/Simulation/SpaceTimeChart/createTrain.ts

@@ -7,34 +7,10 @@ import {
   formatStepsWithTime,
   formatStepsWithTimeMulti,
   mergeDatasArea,
-  MergedDataPoint,
 } from 'applications/osrd/components/Helpers/ChartHelpers';
 
 import { setFailure } from 'reducers/main';
-import { Train, Position, RouteAspect, SignalAspect, PositionSpeed } from 'reducers/osrdsimulation';
-
-export interface SimulationTrain {
-  id: number;
-  isStdcm: boolean;
-  name: string;
-  trainNumber: number;
-  headPosition: Position<Date | null>[][];
-  tailPosition: Position<Date | null>[][];
-  routeEndOccupancy: Position<Date | null>[][];
-  routeBeginOccupancy: Position<Date | null>[][];
-  routeAspects: RouteAspect<Date | null, string>[];
-  signalAspects: SignalAspect<Date | null, string>[];
-  areaBlock: MergedDataPoint<Date | null>[][];
-  speed: PositionSpeed<Date | null>[];
-  eco_headPosition?: Position<Date | null>[][];
-  eco_tailPosition?: Position<Date | null>[][];
-  eco_routeEndOccupancy?: Position<Date | null>[][];
-  eco_routeBeginOccupancy?: Position<Date | null>[][];
-  eco_routeAspects?: RouteAspect<Date | null, string>[];
-  eco_signalAspects?: SignalAspect<Date | null, string>[];
-  eco_areaBlock?: MergedDataPoint<Date | null>[][];
-  eco_speed?: PositionSpeed<Date | null>[];
-}
+import { Train, SimulationTrain } from 'reducers/osrdsimulation';
 
 /**
  * Will do some formating & computation to get a trains to be displayed. Stored then with currentSimulation splitted reducer
@@ -49,7 +25,7 @@ export default function createTrain(
   keyValues: string[],
   simulationTrains: Train[],
   t: TFunction
-) {
+): SimulationTrain[] {
   // Prepare data
   const dataSimulation = simulationTrains.map((train: Train, trainNumber: number) => {
     const routeEndOccupancy = formatStepsWithTimeMulti(train.base.route_end_occupancy);