front: editor - implementing ordered layer

- adding in the conf a set by entities type - refacto wrapped map to use this new config - refacto GeoJson to use the orderLayer
OpenRailAssociation · Nov 16, 2023 · 1aebf40 · 1aebf40
1 parent 07ebd6a
commit 1aebf40
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 31 deletions.
diff --git a/front/src/common/Map/Layers/GeoJSONs.tsx b/front/src/common/Map/Layers/GeoJSONs.tsx
@@ -2,13 +2,16 @@ import { useSelector } from 'react-redux';
 import React, { FC, useEffect, useMemo, useState } from 'react';
 import chroma from 'chroma-js';
 import { Feature, FeatureCollection } from 'geojson';
-import { isPlainObject, keyBy, mapValues, omit } from 'lodash';
+import { isPlainObject, mapValues, omit } from 'lodash';
 import { AnyLayer, Layer, Source, LayerProps } from 'react-map-gl/maplibre';
 import { FilterSpecification } from 'maplibre-gl';
-import { getInfraID } from 'reducers/osrdconf/selectors';
 
-import { Theme } from '../../../types';
-import { RootState } from '../../../reducers';
+import { LayerType } from 'applications/editor/tools/types';
+import { RootState } from 'reducers';
+import { MapState } from 'reducers/map';
+import { getInfraID } from 'reducers/osrdconf/selectors';
+import { LAYER_ENTITIES_ORDERS } from 'config/layerOrder';
+import { Theme } from 'types';
 import { geoMainLayer, geoServiceLayer } from './geographiclayers';
 import {
   getPointLayerProps,
@@ -25,15 +28,13 @@ import {
   getPointErrorsLayerProps,
   getPointTextErrorsLayerProps,
 } from './Errors';
-import { LayerType } from '../../../applications/editor/tools/types';
 import { MAP_TRACK_SOURCE, MAP_URL } from '../const';
 import {
   getSpeedSectionsFilter,
   getSpeedSectionsLineLayerProps,
   getSpeedSectionsPointLayerProps,
   getSpeedSectionsTextLayerProps,
 } from './SpeedLimits';
-import { MapState } from '../../../reducers/map';
 import {
   getPSLFilter,
   getPSLSpeedLineBGLayerProps,
@@ -334,10 +335,10 @@ const SOURCES_DEFINITION: {
   { entityType: 'errors', getLayers: getErrorsLayers },
 ];
 
-export const SourcesDefinitionsIndex = mapValues(
-  keyBy(SOURCES_DEFINITION, 'entityType'),
-  (def) => def.getLayers
-) as Record<LayerType, (context: LayerContext, prefix: string) => AnyLayer[]>;
+export const SourcesDefinitionsIndex = SOURCES_DEFINITION.reduce(
+  (acc, curr) => ({ ...acc, [curr.entityType]: curr.getLayers }),
+  {} as Record<LayerType, (context: LayerContext, prefix: string) => AnyLayer[]>
+);
 
 export const EditorSource: FC<{
   id?: string;
@@ -430,6 +431,7 @@ const GeoJSONs: FC<{
               {
                 id: `${prefix}geo/${source.entityType}`,
                 url: `${MAP_URL}/layer/${source.entityType}/mvt/geo/?infra=${infraID}`,
+                layerOrder: LAYER_ENTITIES_ORDERS[source.entityType],
                 layers: source
                   .getLayers({ ...hiddenLayerContext, sourceTable: source.entityType }, prefix)
                   .map((layer) =>
@@ -439,6 +441,7 @@ const GeoJSONs: FC<{
               {
                 id: `${selectedPrefix}geo/${source.entityType}`,
                 url: `${MAP_URL}/layer/${source.entityType}/mvt/geo/?infra=${infraID}`,
+                layerOrder: LAYER_ENTITIES_ORDERS[source.entityType],
                 layers: source
                   .getLayers({ ...layerContext, sourceTable: source.entityType }, selectedPrefix)
                   .map((layer) => adaptFilter(layer, hidden || [], selection || [], renderAll)),
@@ -467,13 +470,13 @@ const GeoJSONs: FC<{
     <>
       {sources.map((source) => (
         <Source key={source.id} promoteId="id" type="vector" url={source.url} id={source.id}>
-          {source.layers.map((layer, index) => (
+          {source.layers.map((layer) => (
             <OrderedLayer
               source-layer={MAP_TRACK_SOURCE}
-              key={`${layer.id}-${index}`}
+              key={layer.id}
               {...layer}
               beforeId={beforeId}
-              layerOrder={index}
+              layerOrder={source.layerOrder}
             />
           ))}
         </Source>

diff --git a/front/src/common/Map/WarpedMap/WarpedMap.tsx b/front/src/common/Map/WarpedMap/WarpedMap.tsx
@@ -7,7 +7,7 @@ import { Feature, FeatureCollection, LineString } from 'geojson';
 import ReactMapGL, { Layer, MapRef, Source } from 'react-map-gl/maplibre';
 import { LngLatBoundsLike } from 'maplibre-gl';
 
-import { LAYER_GROUPS_ORDER, LAYERS } from 'config/layerOrder';
+import { LAYERS, LAYER_ENTITIES_ORDERS, LAYER_GROUPS_ORDER } from 'config/layerOrder';
 import colors from 'common/Map/Consts/colors';
 import { ALL_SIGNAL_LAYERS } from 'common/Map/Consts/SignalsNames';
 import { LayerType } from 'applications/editor/tools/types';
@@ -16,29 +16,14 @@ import VirtualLayers from 'modules/simulationResult/components/SimulationResults
 import RenderItinerary from 'modules/simulationResult/components/SimulationResultsMap/RenderItinerary';
 import TrainHoverPosition from 'modules/simulationResult/components/SimulationResultsMap/TrainHoverPosition';
 import { LayerContext } from 'common/Map/Layers/types';
-import { EditorSource, SourcesDefinitionsIndex } from 'common/Map/Layers/GeoJSONs';
 import OrderedLayer, { OrderedLayerProps } from 'common/Map/Layers/OrderedLayer';
 import { genOSMLayerProps } from 'common/Map/Layers/OSM';
 import { useMapBlankStyle } from 'common/Map/Layers/blankStyle';
+import { EditorSource, SourcesDefinitionsIndex } from 'common/Map/Layers/GeoJSONs';
 import { Viewport } from 'reducers/map';
 import { getMap } from 'reducers/map/selectors';
 import { AllowancesSettings, Train } from 'reducers/osrdsimulation/types';
 
-const OSRD_LAYER_ORDERS: Record<LayerType, number> = {
-  buffer_stops: LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP],
-  detectors: LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP],
-  signals: LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP],
-  switches: LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP],
-  track_sections: LAYER_GROUPS_ORDER[LAYERS.TRACKS_GEOGRAPHIC.GROUP],
-  // Unused:
-  catenaries: 0,
-  psl: 0,
-  psl_signs: 0,
-  routes: 0,
-  speed_sections: 0,
-  errors: 0,
-};
-
 /**
  * This component handles displaying warped data. The data must be warped before being given to this component.
  * Check `SimulationWarpedMap` to see an example use case.
@@ -88,7 +73,7 @@ const WarpedMap: FC<{
     () =>
       Array.from(osrdLayers).map((layer) => ({
         source: layer,
-        order: OSRD_LAYER_ORDERS[layer],
+        order: LAYER_ENTITIES_ORDERS[layer],
         id: `${prefix}geo/${layer}`,
         layers: SourcesDefinitionsIndex[layer](layerContext, prefix).map(
           (props) => omit(props, 'source-layer') as typeof props

diff --git a/front/src/config/layerOrder.ts b/front/src/config/layerOrder.ts
@@ -1,3 +1,5 @@
+import { LayerType } from 'applications/editor/tools/types';
+
 export const LAYER_GROUPS = Object.freeze({
   MAP_BACKGROUND: Symbol('MAP_BACKGROUND'),
   TOPOGRAPHY: Symbol('TOPOGRAPHY'),
@@ -6,6 +8,7 @@ export const LAYER_GROUPS = Object.freeze({
   SIGNALS: Symbol('SIGNALS'),
   DYN_SIGNALS: Symbol('DYN_SIGNALS'),
   TRAIN: Symbol('TRAIN'),
+  ERRORS: Symbol('ERRORS'),
 });
 
 export const LAYER_GROUPS_ORDER = Object.freeze({
@@ -16,6 +19,7 @@ export const LAYER_GROUPS_ORDER = Object.freeze({
   [LAYER_GROUPS.SIGNALS]: 4,
   [LAYER_GROUPS.DYN_SIGNALS]: 5,
   [LAYER_GROUPS.TRAIN]: 6,
+  [LAYER_GROUPS.ERRORS]: 7,
 });
 
 /**
@@ -49,4 +53,20 @@ export const LAYERS = Object.freeze({
   SIGNALS: { GROUP: LAYER_GROUPS.DYN_SIGNALS },
   // 6
   TRAIN: { GROUP: LAYER_GROUPS.TRAIN },
+  // 7
+  ERRORS: { GROUP: LAYER_GROUPS.ERRORS },
+});
+
+export const LAYER_ENTITIES_ORDERS: Record<LayerType, number> = Object.freeze({
+  buffer_stops: LAYER_GROUPS_ORDER[LAYERS.BUFFER_STOPS.GROUP],
+  detectors: LAYER_GROUPS_ORDER[LAYERS.DETECTORS.GROUP],
+  signals: LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP],
+  switches: LAYER_GROUPS_ORDER[LAYERS.SWITCHES.GROUP],
+  track_sections: LAYER_GROUPS_ORDER[LAYERS.TRACKS_GEOGRAPHIC.GROUP],
+  catenaries: LAYER_GROUPS_ORDER[LAYERS.CATENARIES.GROUP],
+  speed_sections: LAYER_GROUPS_ORDER[LAYERS.SPEED_LIMITS.GROUP],
+  routes: LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP],
+  psl: LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP],
+  psl_signs: LAYER_GROUPS_ORDER[LAYERS.SIGNALS.GROUP],
+  errors: LAYER_GROUPS_ORDER[LAYERS.ERRORS.GROUP],
 });