front: add KP to signals

Author: nicolaswurtz

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

@@ -60,9 +60,9 @@ const BufferStops: FC<BufferStopsProps> = ({ colors, layerOrder }) => {
       <OrderedLayer
         {...configKPLabelLayer({
           colors,
+          fieldName: 'extensions_sncf_kp',
           minzoom: 12,
           sourceLayer: 'buffer_stops',
-          fieldName: 'extensions_sncf_kp',
         })}
         id="chartis/osrd_bufferstop_kp/geo"
         layerOrder={layerOrder}

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

@@ -38,9 +38,9 @@ export function getDetectorsNameLayerProps(params: {
       'text-font': ['Roboto Condensed'],
       'text-size': 10,
       'text-anchor': 'left',
-      'text-allow-overlap': false,
+      'text-allow-overlap': true,
       'text-ignore-placement': false,
-      'text-offset': [0.75, 0.1],
+      'text-offset': [1, 0.2],
       visibility: 'visible',
     },
     paint: {
@@ -78,9 +78,9 @@ const Detectors: FC<DetectorsProps> = ({ colors, layerOrder }) => {
       <OrderedLayer
         {...configKPLabelLayer({
           colors,
+          fieldName: 'extensions_sncf_kp',
           minzoom: 10,
           sourceLayer: 'detectors',
-          fieldName: 'extensions_sncf_kp',
         })}
         id="chartis/osrd_detectors_kp/geo"
         layerOrder={layerOrder}

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

@@ -146,9 +146,9 @@ export default function OperationalPoints(props: Props) {
         <OrderedLayer
           {...configKPLabelLayer({
             colors,
+            fieldName: 'extensions_sncf_kp',
             minzoom: 9.5,
             sourceLayer: 'operational_points',
-            fieldName: 'extensions_sncf_kp',
           })}
           id="chartis/osrd_operational_point_kp/geo"
           layerOrder={layerOrder}

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

@@ -22,6 +22,7 @@ import {
   getSignalMatLayerProps,
   SignalContext,
 } from './geoSignalsLayers';
+import configKPLabelLayer from './configKPLabelLayer';
 
 interface PlatformProps {
   colors: Theme;
@@ -158,6 +159,17 @@ function Signals(props: PlatformProps) {
         id="chartis/signal/point"
         layerOrder={layerOrder}
       />
+      <OrderedLayer
+        {...configKPLabelLayer({
+          colors,
+          fieldName: 'extensions_sncf_kp',
+          minzoom: 12,
+          isSignalisation: true,
+          sourceLayer: sourceTable,
+        })}
+        id="chartis/signal/kp"
+        layerOrder={layerOrder}
+      />
 
       {signalsList.map((sig) => {
         const layerId = `chartis/signal/geo/${sig}`;

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

@@ -1,14 +1,14 @@
+import { ExpressionFilterSpecification } from 'maplibre-gl';
 import { LayerProps } from 'react-map-gl/maplibre';
 
 import { Theme } from 'types';
 
 interface PlatformProps {
   colors: Theme;
   fieldName?: string;
-  leftOffset?: number;
   maxzoom?: number;
   minzoom?: number;
-  rotation?: 'map' | 'viewport' | 'auto';
+  isSignalisation?: boolean;
   sourceLayer: string;
 }
 
@@ -24,12 +24,45 @@ export default function configKPLabelLayer(props: PlatformProps) {
   const {
     colors,
     fieldName = 'kp',
-    leftOffset = -1,
     maxzoom = 24,
     minzoom = 7,
-    rotation = 'viewport',
+    isSignalisation,
     sourceLayer,
   } = props;
+
+  // Will have to be removed when backend will be updated with consistent fieldname
+  const testSideExpression = (side: 'LEFT' | 'RIGHT' | 'CENTER') => [
+    'any',
+    ['==', ['get', 'extensions_sncf_side'], side],
+    ['==', ['get', 'side'], side],
+  ];
+
+  const signallingLabeling: LayerProps['layout'] = isSignalisation
+    ? {
+        'text-rotation-alignment': 'map',
+        'text-pitch-alignment': 'map',
+        'text-rotate': ['get', 'angle'],
+        'text-anchor': [
+          'case',
+          testSideExpression('LEFT') as ExpressionFilterSpecification,
+          'right',
+          testSideExpression('RIGHT') as ExpressionFilterSpecification,
+          'left',
+          'center',
+        ],
+        'text-offset': [
+          'case',
+          testSideExpression('LEFT') as ExpressionFilterSpecification,
+          ['literal', [-2.75, 0.2]],
+          testSideExpression('RIGHT') as ExpressionFilterSpecification,
+          ['literal', [2.75, 0.2]],
+          ['literal', [0, 2.5]],
+        ],
+      }
+    : {
+        'text-offset': ['literal', [-1, 0.1]],
+      };
+
   const rkValue: LayerProps = {
     type: 'symbol',
     'source-layer': sourceLayer,
@@ -42,11 +75,9 @@ export default function configKPLabelLayer(props: PlatformProps) {
       'text-size': 9,
       'text-anchor': 'right',
       'text-allow-overlap': true,
-      'text-ignore-placement': true,
-      'text-offset': [leftOffset, 0.1],
-      'text-rotation-alignment': rotation,
-      'text-pitch-alignment': rotation,
-      'text-rotate': rotation === 'map' ? ['get', 'angle_geo'] : 0,
+      'text-ignore-placement': false,
+
+      ...signallingLabeling,
     },
     paint: {
       'text-color': colors.kp.text,

front/src/common/Map/Layers/extensions/SNCF/SNCF_PSL_SIGNS.tsx

@@ -122,8 +122,8 @@ export default function SNCF_PSL_Signs(props: SNCF_PSL_SignsProps) {
         {...configKPLabelLayer({
           colors,
           minzoom: 9.5,
+          isSignalisation: true,
           sourceLayer: 'psl_signs',
-          rotation: 'map',
         })}
         id="chartis/osrd_psl_signs_kp/geo"
         layerOrder={layerOrder}