front: refacto signals settings on maps, removing signal's list concept

front/src/applications/editor/tools/pointEdition/components.tsx

@@ -20,7 +20,6 @@ import {
   TrackSectionEntity,
   RouteEntity,
 } from 'types';
-import { SIGNALS_TO_SYMBOLS } from 'common/Map/Consts/SignalsNames';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { PointEditionState } from './types';
 import EditorForm from '../../components/EditorForm';
@@ -354,8 +353,6 @@ export const BasePointEditionLayers: FC<{
         {
           prefix: '',
           colors: colors[mapStyle],
-          signalsList: [type],
-          symbolsList: SIGNALS_TO_SYMBOLS[type] || [],
           isEmphasized: true,
           showIGNBDORTHO: false,
           layersSettings,

front/src/common/Map/Layers/BufferStops.tsx

@@ -2,10 +2,10 @@ import React, { FC } from 'react';
 import { useSelector } from 'react-redux';
 import { Source, SymbolLayer } from 'react-map-gl/maplibre';
 import { getInfraID } from 'reducers/osrdconf/selectors';
-import { RootState } from 'reducers';
 import { Theme, OmitLayer } from 'types';
 import { MAP_URL } from 'common/Map/const';
 import OrderedLayer from 'common/Map/Layers/OrderedLayer';
+import { getLayersSettings } from 'reducers/map/selectors';
 
 export function getBufferStopsLayerProps(params: { sourceTable?: string }): OmitLayer<SymbolLayer> {
   const res: OmitLayer<SymbolLayer> = {
@@ -40,7 +40,7 @@ interface BufferStopsProps {
 
 const BufferStops: FC<BufferStopsProps> = ({ layerOrder }) => {
   const infraID = useSelector(getInfraID);
-  const { layersSettings } = useSelector((state: RootState) => state.map);
+  const layersSettings = useSelector(getLayersSettings);
 
   return layersSettings.bufferstops ? (
     <Source

front/src/common/Map/Layers/Detectors.tsx

@@ -2,12 +2,12 @@ import React, { FC } from 'react';
 import { useSelector } from 'react-redux';
 import { Source, CircleLayer, SymbolLayer } from 'react-map-gl/maplibre';
 
-import { RootState } from 'reducers';
 import { Theme, OmitLayer } from 'types';
 import { MAP_URL } from 'common/Map/const';
 
 import OrderedLayer from 'common/Map/Layers/OrderedLayer';
 import { getInfraID } from 'reducers/osrdconf/selectors';
+import { getLayersSettings } from 'reducers/map/selectors';
 
 export function getDetectorsLayerProps(params: {
   colors: Theme;
@@ -61,7 +61,7 @@ interface DetectorsProps {
 
 const Detectors: FC<DetectorsProps> = ({ colors, layerOrder }) => {
   const infraID = useSelector(getInfraID);
-  const { layersSettings } = useSelector((state: RootState) => state.map);
+  const layersSettings = useSelector(getLayersSettings);
 
   const layerPoint = getDetectorsLayerProps({ colors, sourceTable: 'detectors' });
   const layerName = getDetectorsNameLayerProps({ colors, sourceTable: 'detectors' });

front/src/common/Map/Layers/GeoJSONs.tsx

@@ -26,7 +26,6 @@ import {
   getPointTextErrorsLayerProps,
 } from './Errors';
 import { LayerType } from '../../../applications/editor/tools/types';
-import { ALL_SIGNAL_LAYERS, SYMBOLS_TO_LAYERS } from '../Consts/SignalsNames';
 import { MAP_TRACK_SOURCE, MAP_URL } from '../const';
 import {
   getSpeedSectionsFilter,
@@ -47,8 +46,6 @@ import { getCatenariesProps, getCatenariesTextParams } from './Catenaries';
 import configKPLabelLayer from './configKPLabelLayer';
 import OrderedLayer from './OrderedLayer';
 
-const SIGNAL_TYPE_KEY = 'extensions_sncf_installation_type';
-
 const POINT_ENTITIES_MIN_ZOOM = 12;
 
 /**
@@ -144,6 +141,9 @@ function getTrackSectionLayers(context: LayerContext, prefix: string): LayerProp
 }
 
 function getSignalLayers(context: LayerContext, prefix: string): LayerProps[] {
+  const signalProps = getSignalLayerProps(context);
+  const { paint } = signalProps;
+  const opacity = paint && typeof paint['icon-opacity'] === 'number' ? paint['icon-opacity'] : 1;
   return [
     { ...getSignalMatLayerProps(context), id: `${prefix}geo/signal-mat` },
     { ...getPointLayerProps(context), id: `${prefix}geo/signal-point` },
@@ -157,23 +157,13 @@ function getSignalLayers(context: LayerContext, prefix: string): LayerProps[] {
         sourceLayer: context.sourceTable || '',
       }),
       id: `${prefix}geo/signal-kp`,
-      filter: ['in', 'extensions_sncf_installation_type', ...context.symbolsList],
-    } as LayerProps,
-  ].concat(
-    context.symbolsList.map((symbol) => {
-      const props = getSignalLayerProps(context, symbol);
-      const { paint } = props;
-      const opacity =
-        paint && typeof paint['icon-opacity'] === 'number' ? paint['icon-opacity'] : 1;
-
-      return {
-        ...props,
-        paint: { ...props.paint, 'icon-opacity': opacity * (context.isEmphasized ? 1 : 0.2) },
-        filter: ['==', SIGNAL_TYPE_KEY, SYMBOLS_TO_LAYERS[symbol]],
-        id: `${prefix}geo/signal-${symbol}`,
-      };
-    })
-  );
+    },
+    {
+      ...signalProps,
+      paint: { ...signalProps.paint, 'icon-opacity': opacity * (context.isEmphasized ? 1 : 0.2) },
+      id: `${prefix}geo/signal`,
+    },
+  ];
 }
 function getBufferStopsLayers(context: LayerContext, prefix: string): LayerProps[] {
   return [
@@ -402,8 +392,6 @@ const GeoJSONs: FC<{
   const layerContext: LayerContext = useMemo(
     () => ({
       colors,
-      signalsList: ALL_SIGNAL_LAYERS,
-      symbolsList: ALL_SIGNAL_LAYERS,
       prefix: mapStyle === 'blueprint' ? 'SCHB ' : '',
       isEmphasized,
       showIGNBDORTHO,

front/src/common/Map/Layers/Signals.tsx

@@ -1,21 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { Source, MapRef } from 'react-map-gl/maplibre';
-import { get } from 'lodash';
 
-import { RootState } from 'reducers';
 import { Theme } from 'types';
 
 import { MAP_URL } from 'common/Map/const';
-import {
-  ALL_SIGNAL_LAYERS,
-  LIGHT_SIGNALS,
-  SIGNS_STOPS,
-  SIGNS_TIVS,
-} from 'common/Map/Consts/SignalsNames';
 
 import OrderedLayer from 'common/Map/Layers/OrderedLayer';
 import { getInfraID } from 'reducers/osrdconf/selectors';
+import { getLayersSettings, getMapStyle } from 'reducers/map/selectors';
 import {
   getPointLayerProps,
   getSignalLayerProps,
@@ -33,47 +26,28 @@ interface PlatformProps {
 }
 
 function Signals(props: PlatformProps) {
-  const { mapStyle, signalsSettings } = useSelector((state: RootState) => state.map);
+  const mapStyle = useSelector(getMapStyle);
+  const layersSettings = useSelector(getLayersSettings);
   const infraID = useSelector(getInfraID);
-  const { colors, sourceTable, hovered, layerOrder } = props;
+  const { colors, sourceTable, layerOrder } = props;
 
   const prefix = mapStyle === 'blueprint' ? 'SCHB ' : '';
 
-  const getSignalsList = () => {
-    let signalsList: Array<string> = [];
-    if (signalsSettings.all) {
-      return ALL_SIGNAL_LAYERS;
-    }
-    if (signalsSettings.stops) {
-      signalsList = signalsList.concat(SIGNS_STOPS);
-    }
-    if (signalsSettings.tivs) {
-      signalsList = signalsList.concat(SIGNS_TIVS);
-    }
-    if (signalsSettings.lights) {
-      signalsList = signalsList.concat(LIGHT_SIGNALS);
-    }
-    return signalsList;
-  };
-
-  const signalsList = getSignalsList();
-
   const context: SignalContext = {
     prefix,
     colors,
-    signalsList,
     sourceTable,
   };
 
-  return (
+  return layersSettings.signals ? (
     <Source
       promoteId="id"
       type="vector"
       url={`${MAP_URL}/layer/${sourceTable}/mvt/geo/?infra=${infraID}`}
     >
       <OrderedLayer
         {...getSignalMatLayerProps(context)}
-        id="chartis/signal/mat"
+        id="chartis/signal/mast"
         layerOrder={layerOrder}
       />
       <OrderedLayer
@@ -91,33 +65,15 @@ function Signals(props: PlatformProps) {
           sourceLayer: sourceTable,
         })}
         id="chartis/signal/kp"
-        filter={['in', 'extensions_sncf_installation_type', ...signalsList]}
         layerOrder={layerOrder}
       />
-
-      {signalsList.map((sig) => {
-        const layerId = `chartis/signal/geo/${sig}`;
-        const isHovered = hovered && hovered.layer === layerId;
-        const signalDef = getSignalLayerProps(context, sig);
-        const opacity = get(signalDef.paint, 'icon-opacity', 1) as number;
-
-        return (
-          <OrderedLayer
-            key={sig}
-            {...signalDef}
-            id={layerId}
-            paint={{
-              ...signalDef.paint,
-              'icon-opacity': isHovered
-                ? ['case', ['==', ['get', 'OP_id'], hovered.id], opacity * 0.6, opacity]
-                : opacity,
-            }}
-            layerOrder={layerOrder}
-          />
-        );
-      })}
+      <OrderedLayer
+        {...getSignalLayerProps(context)}
+        id="chartis/signal/signals"
+        layerOrder={layerOrder}
+      />
     </Source>
-  );
+  ) : null;
 }
 
 export default Signals;

front/src/common/Map/Layers/geoSignalsLayers.ts

@@ -1,34 +1,20 @@
 import { CircleLayer, SymbolLayer } from 'react-map-gl/maplibre';
-import { SIGNALS_SIGNS } from 'common/Map/const';
 import { Theme, OmitLayer } from '../../../types';
 
 const signalTextOffsetX = 5;
 const signalTextOffsetY = -1;
 const signalCenteredTextOffset = [0, 6];
 
-export interface SignalsSettings {
-  all?: boolean;
-  stops?: boolean;
-  tivs?: boolean;
-  lights?: boolean;
-}
-
 export interface SignalContext {
   prefix: string;
   sourceTable?: string;
   colors: Theme;
-  signalsList: string[];
 }
 
-export function getPointLayerProps({
-  signalsList,
-  sourceTable,
-  colors,
-}: SignalContext): OmitLayer<CircleLayer> {
+export function getPointLayerProps({ sourceTable, colors }: SignalContext): OmitLayer<CircleLayer> {
   const props: OmitLayer<CircleLayer> = {
     type: 'circle',
     minzoom: 9,
-    filter: ['in', 'extensions_sncf_installation_type', ...signalsList],
     paint: {
       'circle-color': colors.signal.point,
       'circle-radius': 3,
@@ -40,14 +26,10 @@ export function getPointLayerProps({
   return props;
 }
 
-export function getSignalMatLayerProps({
-  signalsList,
-  sourceTable,
-}: SignalContext): OmitLayer<SymbolLayer> {
+export function getSignalMatLayerProps({ sourceTable }: SignalContext): OmitLayer<SymbolLayer> {
   const props: OmitLayer<SymbolLayer> = {
     type: 'symbol',
     minzoom: 12,
-    filter: ['in', 'extensions_sncf_installation_type', ...signalsList],
     paint: {},
     layout: {
       'text-field': '', // '{extensions_sncf_installation_type} / {extensions_sncf_value} / {extensions_sncf_label}',
@@ -77,17 +59,10 @@ export function getSignalMatLayerProps({
   return props;
 }
 
-export function getSignalLayerProps(context: SignalContext, type: string): OmitLayer<SymbolLayer> {
-  const { sourceTable, prefix, colors } = context;
-  let offsetY = -105;
-  let iconOffsetX = 45;
-  if (SIGNALS_SIGNS.indexOf(type) !== -1 && SIGNALS_SIGNS.indexOf(type) === -1) {
-    iconOffsetX = 55;
-    offsetY = -60;
-  } else if (prefix !== '') {
-    iconOffsetX = 30;
-    offsetY = -80;
-  }
+export function getSignalLayerProps(context: SignalContext): OmitLayer<SymbolLayer> {
+  const { sourceTable, colors } = context;
+  const offsetY = -105;
+  const iconOffsetX = 45;
 
   const iconOffset: Required<SymbolLayer>['layout']['icon-offset'] = [
     'case',

front/src/common/Map/Layers/types.ts

@@ -3,7 +3,6 @@ import { SignalContext } from './geoSignalsLayers';
 
 export interface LayerContext extends SignalContext {
   sourceTable?: string;
-  symbolsList: string[];
   isEmphasized: boolean;
   showIGNBDORTHO: boolean;
   layersSettings: MapState['layersSettings'];