From b07ccfb8608d3242455fa06115e769a8c3c3acab Mon Sep 17 00:00:00 2001
From: Benoit Simard <contact@bsimard.com>
Date: Thu, 23 Nov 2023 18:06:21 +0100
Subject: [PATCH] front: editor - Adding help on catenary tool

Close #5371

Refacto the code of range tool, to avoid namings that are not generic to
all tool
only one range tool.
---
 front/public/locales/en/translation.json      |   6 +
 front/public/locales/fr/translation.json      |   6 +
 .../catenary/CatenaryEditionLayers.tsx        |  36 ++-
 .../editor/tools/rangeEdition/components.tsx  | 259 +++++++++---------
 .../SpeedSectionEditionLayers.tsx             |  10 +-
 .../tools/rangeEdition/tool-factory.tsx       |  29 +-
 .../editor/tools/rangeEdition/types.ts        |  22 +-
 .../editor/tools/rangeEdition/utils.ts        |  30 +-
 8 files changed, 210 insertions(+), 188 deletions(-)

diff --git a/front/public/locales/en/translation.json b/front/public/locales/en/translation.json
index 61bbb211c80..1468c608ef5 100644
--- a/front/public/locales/en/translation.json
+++ b/front/public/locales/en/translation.json
@@ -220,6 +220,11 @@
           "reset-catenary": "Cancel the current modifications",
           "delete-catenary": "Delete the catenary"
         },
+        "help": {
+          "init": "Click on a track section to link it to the catenary",
+          "add-track": "Link the track section '{{track.id}}' to the catenary {{voltage}}",
+          "remove-range": "Remove the track section from  the catenary {{voltage}}"
+        },
         "add-new-catenary": "Add new catenary",
         "catenaries": "Electrification",
         "catenary-default": "Default catenary",
@@ -253,6 +258,7 @@
         "edit-track-range-start": "Edit departure point",
         "edit-track-range-end": "Edit arrival point",
         "linked-track-sections": "Associated track sections",
+        "empty-linked-track-section": "Click on a track section to link it to the catenary",
         "only-show-n": "Only show the first {{count}} track sections",
         "show-more-ranges_one": "See an additional track section",
         "show-more-ranges_other": "See {{count}} additional track sections"
diff --git a/front/public/locales/fr/translation.json b/front/public/locales/fr/translation.json
index 7f48b9cf159..f7149da1b82 100644
--- a/front/public/locales/fr/translation.json
+++ b/front/public/locales/fr/translation.json
@@ -220,6 +220,11 @@
           "reset-catenary": "Annuler les modifications en cours",
           "delete-catenary": "Supprimer l'électrification"
         },
+        "help": {
+          "init":"Cliquez sur un tronçon d'itinéraire pour l'associer à l'électrification",
+          "add-track": "Ajouter le tronçon '{{track.id}}' à l'électrification {{voltage}}",
+          "remove-range": "Supprimer le tronçon de l'électrification {{voltage}}"
+        },
         "add-new-catenary": "Ajouter une nouvelle électrification",
         "catenaries": "Électrification",
         "catenary-default": "Électrification par défaut",
@@ -253,6 +258,7 @@
         "edit-track-range-start": "Modifier le point de départ",
         "edit-track-range-end": "Modifier le point d'arrivée",
         "linked-track-sections": "Tronçons d'itinéraire de voie associés",
+        "empty-linked-track-section": "Cliquez sur un tronçon d'itinéraire pour l'associer",
         "only-show-n": "Ne montrer que les {{count}} premières sections de lignes",
         "show-more-ranges_one": "Voir une section de ligne de plus",
         "show-more-ranges_other": "Voir {{count}} sections de lignes de plus"
diff --git a/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx b/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx
index 13f1df1e356..de69e7cce99 100644
--- a/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx
+++ b/front/src/applications/editor/tools/rangeEdition/catenary/CatenaryEditionLayers.tsx
@@ -36,7 +36,7 @@ export const CatenaryEditionLayers: FC = () => {
       return [(entity.properties.track_ranges || [])[interactionState.rangeIndex].track];
 
     // Custom hovered element:
-    if (hoveredItem?.speedSectionItemType) return [hoveredItem.track.properties.id];
+    if (hoveredItem?.itemType) return [hoveredItem.track.properties.id];
 
     // EditorEntity hovered element:
     if (
@@ -137,7 +137,7 @@ export const CatenaryEditionLayers: FC = () => {
 
   const popUps = !isOnModeMove(interactionState.type) ? (
     <>
-      {hoveredItem?.speedSectionItemType === 'TrackRangeExtremity' && (
+      {hoveredItem?.itemType === 'TrackRangeExtremity' && (
         <Popup
           className="popup"
           anchor="bottom"
@@ -149,7 +149,7 @@ export const CatenaryEditionLayers: FC = () => {
           <EntitySumUp entity={hoveredItem.track} />
         </Popup>
       )}
-      {hoveredItem?.speedSectionItemType === 'TrackRange' && (
+      {hoveredItem?.itemType === 'TrackRange' && (
         <Popup
           className="popup"
           anchor="bottom"
@@ -210,14 +210,22 @@ export const CatenaryEditionLayers: FC = () => {
   );
 };
 
-export const CatenaryMessages: FC = () => null;
-
-// export const CatenaryMessages: FC = () => {
-//   const { t } = useTranslation();
-//   const {
-//     state: {
-//       /* TODO */
-//     },
-//   } = useContext(EditorContext) as ExtendedEditorContextType<SpeedSectionEditionState>;
-//   return null;
-// };
+export const CatenaryMessages: FC = () => {
+  const { t } = useTranslation();
+  const { state } = useContext(EditorContext) as ExtendedEditorContextType<
+    RangeEditionState<CatenaryEntity>
+  >;
+  if (state.hoveredItem && state.hoveredItem.type === 'TrackSection')
+    return t('Editor.tools.catenary-edition.help.add-track', {
+      track: state.hoveredItem,
+      voltage: state.initialEntity.properties.voltage,
+    });
+
+  if (state.hoveredItem && state.hoveredItem.itemType === 'TrackRange')
+    return t('Editor.tools.catenary-edition.help.remove-range', {
+      range: state.hoveredItem,
+      voltage: state.initialEntity.properties.voltage,
+    });
+
+  return t('Editor.tools.catenary-edition.help.init');
+};
diff --git a/front/src/applications/editor/tools/rangeEdition/components.tsx b/front/src/applications/editor/tools/rangeEdition/components.tsx
index eca714510cf..c6277e85215 100644
--- a/front/src/applications/editor/tools/rangeEdition/components.tsx
+++ b/front/src/applications/editor/tools/rangeEdition/components.tsx
@@ -54,138 +54,145 @@ export const TrackRangesList: FC = () => {
       <h4 className="pb-0">
         <MdShowChart className="me-1" /> {t('Editor.tools.range-edition.linked-track-sections')}
       </h4>
-      <ul className="list-unstyled">
-        {(showAll ? ranges : ranges.slice(0, DEFAULT_DISPLAYED_RANGES_COUNT)).map((range, i) => {
-          const trackState = trackSectionsCache[range.track];
+      {ranges.length === 0 ? (
+        <p className="text-muted mt-3 text-center">
+          {t('Editor.tools.range-edition.empty-linked-track-section')}
+        </p>
+      ) : (
+        <ul className="list-unstyled">
+          {(showAll ? ranges : ranges.slice(0, DEFAULT_DISPLAYED_RANGES_COUNT)).map((range, i) => {
+            const trackState = trackSectionsCache[range.track];
 
-          return (
-            <li key={i} className="mb-4 d-flex flex-row align-items-center">
-              {(!trackState || trackState.type === 'loading') && (
-                <div className="position-relative w-100" style={{ height: 50 }}>
-                  <LoaderFill className="bg-transparent" />
-                </div>
-              )}
-              {trackState?.type === 'success' && (
-                <>
-                  <div className="flex-shrink-0 mr-3 d-flex flex-column">
-                    <small>
-                      <button
-                        type="button"
-                        className="btn btn-primary btn-sm px-2 mb-1"
-                        title={t('Editor.tools.range-edition.edit-track-range-start')}
-                        onClick={() => {
-                          setState({
-                            hoveredItem: null,
-                            interactionState: {
-                              type: 'moveRangeExtremity',
-                              rangeIndex: i,
-                              extremity: 'BEGIN',
-                            },
-                          });
-                        }}
-                        onMouseLeave={() => setState({ hoveredItem: null })}
-                        onMouseEnter={() =>
-                          setState({
-                            hoveredItem: {
-                              speedSectionItemType: 'TrackRangeExtremity',
-                              track: trackState.track,
-                              position: getPointAt(trackState.track, range.begin),
-                              extremity: 'BEGIN',
-                            },
-                          })
-                        }
-                      >
-                        <BsArrowBarRight />
-                      </button>
-                    </small>
-                    <small>
-                      <button
-                        type="button"
-                        className="btn btn-primary btn-sm px-2 mb-1"
-                        title={t('Editor.tools.range-edition.edit-track-range-end')}
-                        onClick={() => {
-                          setState({
-                            hoveredItem: null,
-                            interactionState: {
-                              type: 'moveRangeExtremity',
-                              rangeIndex: i,
-                              extremity: 'END',
-                            },
-                          });
-                        }}
-                        onMouseLeave={() => setState({ hoveredItem: null })}
-                        onMouseEnter={() =>
-                          setState({
-                            hoveredItem: {
-                              speedSectionItemType: 'TrackRangeExtremity',
-                              track: trackState.track,
-                              position: getPointAt(trackState.track, range.end),
-                              extremity: 'END',
-                            },
-                          })
-                        }
-                      >
-                        <FaFlagCheckered />
-                      </button>
-                    </small>
-                    <small>
-                      <button
-                        type="button"
-                        className="btn btn-primary btn-sm px-2"
-                        title={t('common.delete')}
-                        onClick={() => {
-                          const newEntity = cloneDeep(entity);
-                          newEntity.properties.track_ranges?.splice(i, 1);
-                          setState({ entity: newEntity, hoveredItem: null });
-                        }}
-                        onMouseLeave={() => setState({ hoveredItem: null })}
-                        onMouseEnter={() =>
-                          setState({
-                            hoveredItem: {
-                              speedSectionItemType: 'TrackRange',
-                              track: trackState.track,
-                              position: getPointAt(
-                                trackState.track,
-                                trackState.track.properties.length / 2
-                              ),
-                            },
-                          })
-                        }
-                      >
-                        <FaTimes />
-                      </button>
-                    </small>
+            return (
+              <li key={i} className="mb-4 d-flex flex-row align-items-center">
+                {(!trackState || trackState.type === 'loading') && (
+                  <div className="position-relative w-100" style={{ height: 50 }}>
+                    <LoaderFill className="bg-transparent" />
                   </div>
-                  <div className="flex-grow-1 flex-shrink-1">
-                    <EntitySumUp entity={trackState.track} />
-                    {entity.objType !== 'Catenary' && (
-                      <div>
-                        <select
-                          id="filterLevel"
-                          className="form-control"
-                          value={range.applicable_directions}
-                          onChange={(e) => {
+                )}
+                {trackState?.type === 'success' && (
+                  <>
+                    <div className="flex-shrink-0 mr-3 d-flex flex-column">
+                      <small>
+                        <button
+                          type="button"
+                          className="btn btn-primary btn-sm px-2 mb-1"
+                          title={t('Editor.tools.range-edition.edit-track-range-start')}
+                          onClick={() => {
+                            setState({
+                              hoveredItem: null,
+                              interactionState: {
+                                type: 'moveRangeExtremity',
+                                rangeIndex: i,
+                                extremity: 'BEGIN',
+                              },
+                            });
+                          }}
+                          onMouseLeave={() => setState({ hoveredItem: null })}
+                          onMouseEnter={() =>
+                            setState({
+                              hoveredItem: {
+                                itemType: 'TrackRangeExtremity',
+                                track: trackState.track,
+                                position: getPointAt(trackState.track, range.begin),
+                                extremity: 'BEGIN',
+                              },
+                            })
+                          }
+                        >
+                          <BsArrowBarRight />
+                        </button>
+                      </small>
+                      <small>
+                        <button
+                          type="button"
+                          className="btn btn-primary btn-sm px-2 mb-1"
+                          title={t('Editor.tools.range-edition.edit-track-range-end')}
+                          onClick={() => {
+                            setState({
+                              hoveredItem: null,
+                              interactionState: {
+                                type: 'moveRangeExtremity',
+                                rangeIndex: i,
+                                extremity: 'END',
+                              },
+                            });
+                          }}
+                          onMouseLeave={() => setState({ hoveredItem: null })}
+                          onMouseEnter={() =>
+                            setState({
+                              hoveredItem: {
+                                itemType: 'TrackRangeExtremity',
+                                track: trackState.track,
+                                position: getPointAt(trackState.track, range.end),
+                                extremity: 'END',
+                              },
+                            })
+                          }
+                        >
+                          <FaFlagCheckered />
+                        </button>
+                      </small>
+                      <small>
+                        <button
+                          type="button"
+                          className="btn btn-primary btn-sm px-2"
+                          title={t('common.delete')}
+                          onClick={() => {
                             const newEntity = cloneDeep(entity);
-                            const newRange = (newEntity.properties.track_ranges || [])[i];
-                            newRange.applicable_directions = e.target.value as ApplicableDirection;
+                            newEntity.properties.track_ranges?.splice(i, 1);
                             setState({ entity: newEntity, hoveredItem: null });
                           }}
+                          onMouseLeave={() => setState({ hoveredItem: null })}
+                          onMouseEnter={() =>
+                            setState({
+                              hoveredItem: {
+                                itemType: 'TrackRange',
+                                track: trackState.track,
+                                position: getPointAt(
+                                  trackState.track,
+                                  trackState.track.properties.length / 2
+                                ),
+                              },
+                            })
+                          }
                         >
-                          {APPLICABLE_DIRECTIONS.map((direction) => (
-                            <option key={direction} value={direction}>
-                              {t(`Editor.directions.${direction}`)}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
-            </li>
-          );
-        })}
-      </ul>
+                          <FaTimes />
+                        </button>
+                      </small>
+                    </div>
+                    <div className="flex-grow-1 flex-shrink-1">
+                      <EntitySumUp entity={trackState.track} />
+                      {entity.objType !== 'Catenary' && (
+                        <div>
+                          <select
+                            id="filterLevel"
+                            className="form-control"
+                            value={range.applicable_directions}
+                            onChange={(e) => {
+                              const newEntity = cloneDeep(entity);
+                              const newRange = (newEntity.properties.track_ranges || [])[i];
+                              newRange.applicable_directions = e.target
+                                .value as ApplicableDirection;
+                              setState({ entity: newEntity, hoveredItem: null });
+                            }}
+                          >
+                            {APPLICABLE_DIRECTIONS.map((direction) => (
+                              <option key={direction} value={direction}>
+                                {t(`Editor.directions.${direction}`)}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
       {ranges.length > DEFAULT_DISPLAYED_RANGES_COUNT && (
         <div className="mt-4">
           <button
diff --git a/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx b/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx
index 7e9a6434249..6b30898b864 100644
--- a/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx
+++ b/front/src/applications/editor/tools/rangeEdition/speedSection/SpeedSectionEditionLayers.tsx
@@ -46,12 +46,10 @@ export const SpeedSectionEditionLayers: FC = () => {
     if (interactionState.type === 'moveRangeExtremity') {
       res.push((entity.properties.track_ranges || [])[interactionState.rangeIndex].track);
     }
-
     // Custom hovered element:
-    else if (hoveredItem?.speedSectionItemType) {
+    else if (hoveredItem?.itemType) {
       res.push(hoveredItem.track.properties.id);
     }
-
     // EditorEntity hovered element:
     else if (
       hoveredItem?.type === 'TrackSection' &&
@@ -168,7 +166,7 @@ export const SpeedSectionEditionLayers: FC = () => {
 
   const popUps = !isOnModeMove(interactionState.type) ? (
     <>
-      {hoveredItem?.speedSectionItemType === 'TrackRangeExtremity' && (
+      {hoveredItem?.itemType === 'TrackRangeExtremity' && (
         <Popup
           className="popup"
           anchor="bottom"
@@ -180,7 +178,7 @@ export const SpeedSectionEditionLayers: FC = () => {
           <EntitySumUp entity={hoveredItem.track} />
         </Popup>
       )}
-      {hoveredItem?.speedSectionItemType === 'TrackRange' && (
+      {hoveredItem?.itemType === 'TrackRange' && (
         <Popup
           className="popup"
           anchor="bottom"
@@ -192,7 +190,7 @@ export const SpeedSectionEditionLayers: FC = () => {
           <EntitySumUp entity={hoveredItem.track} />
         </Popup>
       )}
-      {hoveredItem?.speedSectionItemType === 'PSLSign' && (
+      {hoveredItem?.itemType === 'PSLSign' && (
         <Popup
           className="popup"
           anchor="bottom"
diff --git a/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx b/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx
index 4707fb7d208..df940d91ded 100644
--- a/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx
+++ b/front/src/applications/editor/tools/rangeEdition/tool-factory.tsx
@@ -156,33 +156,30 @@ function getRangeEditionTool<T extends EditorRange>({
       if (isOnModeMove(interactionState.type)) {
         setState({ interactionState: { type: 'idle' } });
       } else if (feature) {
-        if (feature.properties?.speedSectionItemType === 'TrackRangeExtremity') {
+        if (feature.properties?.itemType === 'TrackRangeExtremity') {
           const hoveredExtremity = feature as unknown as TrackRangeExtremityFeature;
           setState({
             hoveredItem: null,
             interactionState: {
               type: 'moveRangeExtremity',
-              rangeIndex: hoveredExtremity.properties.speedSectionRangeIndex,
+              rangeIndex: hoveredExtremity.properties.rangeIndex,
               extremity: hoveredExtremity.properties.extremity,
             },
           });
-        } else if (feature.properties?.speedSectionItemType === 'PSLSign') {
+        } else if (feature.properties?.itemType === 'PSLSign') {
           const {
-            properties: { speedSectionSignType, speedSectionSignIndex },
+            properties: { signType, signIndex },
           } = feature as unknown as PslSignFeature;
           selectPslSign(
-            { signType: speedSectionSignType, signIndex: speedSectionSignIndex },
+            { signType, signIndex },
             setState as (
               stateOrReducer: PartialOrReducer<RangeEditionState<SpeedSectionEntity>>
             ) => void
           );
-        } else if (feature.properties?.speedSectionItemType === 'TrackRange') {
+        } else if (feature.properties?.itemType === 'TrackRange') {
           const hoveredRange = feature as unknown as TrackRangeFeature;
           const newEntity = cloneDeep(entity);
-          newEntity.properties.track_ranges?.splice(
-            hoveredRange.properties.speedSectionRangeIndex,
-            1
-          );
+          newEntity.properties.track_ranges?.splice(hoveredRange.properties.rangeIndex, 1);
           setState({ entity: newEntity, hoveredItem: null });
         } else if (feature.sourceLayer === 'track_sections') {
           const clickedEntity = feature as unknown as TrackSectionEntity;
@@ -221,13 +218,13 @@ function getRangeEditionTool<T extends EditorRange>({
       }
 
       // Handle hovering custom elements:
-      if (feature.properties?.speedSectionItemType === 'TrackRangeExtremity') {
+      if (feature.properties?.itemType === 'TrackRangeExtremity') {
         const hoveredExtremity = feature as unknown as TrackRangeExtremityFeature;
         const trackState = trackSectionsCache[hoveredExtremity.properties.track];
         if (trackState?.type !== 'success') return;
 
         const newHoveredItem: HoveredExtremityState = {
-          speedSectionItemType: 'TrackRangeExtremity',
+          itemType: 'TrackRangeExtremity',
           extremity: hoveredExtremity.properties.extremity,
           position: hoveredExtremity.geometry.coordinates,
           track: trackState.track,
@@ -236,13 +233,13 @@ function getRangeEditionTool<T extends EditorRange>({
           setState({
             hoveredItem: newHoveredItem,
           });
-      } else if (feature.properties?.speedSectionItemType === 'TrackRange') {
+      } else if (feature.properties?.itemType === 'TrackRange') {
         const hoveredRange = feature as unknown as TrackRangeFeature;
         const trackState = trackSectionsCache[hoveredRange.properties.track];
         if (trackState?.type !== 'success') return;
 
         const newHoveredItem: HoveredRangeState = {
-          speedSectionItemType: 'TrackRange',
+          itemType: 'TrackRange',
           position: e.lngLat.toArray(),
           track: trackState.track,
         };
@@ -250,13 +247,13 @@ function getRangeEditionTool<T extends EditorRange>({
           setState({
             hoveredItem: newHoveredItem,
           });
-      } else if (feature.properties?.speedSectionItemType === 'PSLSign') {
+      } else if (feature.properties?.itemType === 'PSLSign') {
         const hoveredExtremity = feature as unknown as TrackRangeExtremityFeature;
         const trackState = trackSectionsCache[hoveredExtremity.properties.track];
         if (trackState?.type !== 'success') return;
 
         const newHoveredItem: HoveredSignState = {
-          speedSectionItemType: 'PSLSign',
+          itemType: 'PSLSign',
           position: hoveredExtremity.geometry.coordinates,
           track: trackState.track,
           signIndex: feature.properties?.speedSectionSignIndex as number,
diff --git a/front/src/applications/editor/tools/rangeEdition/types.ts b/front/src/applications/editor/tools/rangeEdition/types.ts
index 8851f4c03de..dba4a2daab5 100644
--- a/front/src/applications/editor/tools/rangeEdition/types.ts
+++ b/front/src/applications/editor/tools/rangeEdition/types.ts
@@ -7,8 +7,8 @@ export type TrackRangeFeature = Feature<
   LineString,
   Pick<TrackRange, 'begin' | 'end' | 'track'> & {
     id: string;
-    speedSectionItemType: 'TrackRange';
-    speedSectionRangeIndex: number;
+    itemType: 'TrackRange';
+    rangeIndex: number;
   }
 >;
 export type TrackRangeExtremityFeature = Feature<
@@ -17,8 +17,8 @@ export type TrackRangeExtremityFeature = Feature<
     id: string;
     track: string;
     extremity: 'BEGIN' | 'END';
-    speedSectionItemType: 'TrackRangeExtremity';
-    speedSectionRangeIndex: number;
+    itemType: 'TrackRangeExtremity';
+    rangeIndex: number;
   }
 >;
 export type PslSignFeature = Feature<
@@ -31,14 +31,14 @@ export type PslSignFeature = Feature<
     track: string;
     type: string;
     value: string | null;
-    speedSectionItemType: 'PSLSign';
-    speedSectionSignIndex: number;
-    speedSectionSignType: PSL_SIGN_TYPE;
+    itemType: 'PSLSign';
+    signIndex: number;
+    signType: PSL_SIGN_TYPE;
   }
 >;
 
 export type HoveredExtremityState = {
-  speedSectionItemType: 'TrackRangeExtremity';
+  itemType: 'TrackRangeExtremity';
   track: TrackSectionEntity;
   extremity: 'BEGIN' | 'END';
   position: Position;
@@ -47,7 +47,7 @@ export type HoveredExtremityState = {
   id?: undefined;
 };
 export type HoveredRangeState = {
-  speedSectionItemType: 'TrackRange';
+  itemType: 'TrackRange';
   track: TrackSectionEntity;
   position: Position;
   // (trick to help dealing with heterogeneous types)
@@ -55,7 +55,7 @@ export type HoveredRangeState = {
   id?: undefined;
 };
 export type HoveredSignState = {
-  speedSectionItemType: 'PSLSign';
+  itemType: 'PSLSign';
   track: TrackSectionEntity;
   position: Position;
   signIndex: number;
@@ -89,7 +89,7 @@ export type RangeEditionState<E extends EditorEntity> = CommonToolState & {
     | HoveredExtremityState
     | HoveredRangeState
     | HoveredSignState
-    | (NonNullable<CommonToolState['hovered']> & { speedSectionItemType?: undefined });
+    | (NonNullable<CommonToolState['hovered']> & { itemType?: undefined });
   interactionState:
     | { type: 'idle' }
     | { type: 'moveRangeExtremity'; rangeIndex: number; extremity: 'BEGIN' | 'END' }
diff --git a/front/src/applications/editor/tools/rangeEdition/utils.ts b/front/src/applications/editor/tools/rangeEdition/utils.ts
index da247801e3c..197998dcf9c 100644
--- a/front/src/applications/editor/tools/rangeEdition/utils.ts
+++ b/front/src/applications/editor/tools/rangeEdition/utils.ts
@@ -198,24 +198,24 @@ export function getTrackRangeFeatures(
         ...properties,
         ...range,
         id: `speedSectionRangeExtremity::${rangeIndex}::${begin}::${end}`,
-        speedSectionItemType: 'TrackRange',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRange',
+        rangeIndex,
       }),
       point(track.geometry.coordinates[0] as Position, {
         ...properties,
         id: `speedSectionRangeExtremity::${rangeIndex}::${begin}`,
         track: range.track,
         extremity: 'BEGIN',
-        speedSectionItemType: 'TrackRangeExtremity',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRangeExtremity',
+        rangeIndex,
       }),
       point(last(track.geometry.coordinates) as Position, {
         ...properties,
         id: `speedSectionRangeExtremity::${rangeIndex}::${end}`,
         track: range.track,
         extremity: 'END',
-        speedSectionItemType: 'TrackRangeExtremity',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRangeExtremity',
+        rangeIndex,
       }),
     ];
 
@@ -243,8 +243,8 @@ export function getTrackRangeFeatures(
         ...properties,
         ...range,
         id: `speedSectionRangeExtremity::${rangeIndex}::${adjustedBegin}::${adjustedEnd}`,
-        speedSectionItemType: 'TrackRange',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRange',
+        rangeIndex,
       },
     },
     {
@@ -254,8 +254,8 @@ export function getTrackRangeFeatures(
         id: `speedSectionRangeExtremity::${rangeIndex}::${adjustedBegin}`,
         track: range.track,
         extremity: 'BEGIN',
-        speedSectionItemType: 'TrackRangeExtremity',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRangeExtremity',
+        rangeIndex,
       },
     },
     {
@@ -265,8 +265,8 @@ export function getTrackRangeFeatures(
         id: `speedSectionRangeExtremity::${rangeIndex}::${adjustedEnd}`,
         track: range.track,
         extremity: 'END',
-        speedSectionItemType: 'TrackRangeExtremity',
-        speedSectionRangeIndex: rangeIndex,
+        itemType: 'TrackRangeExtremity',
+        rangeIndex,
       },
     },
   ];
@@ -297,9 +297,9 @@ function generatePointFromPSLSign(
   );
   signPoint.properties = {
     ...sign,
-    speedSectionItemType: 'PSLSign',
-    speedSectionSignIndex: signIndex,
-    speedSectionSignType: signType,
+    itemType: 'PSLSign',
+    signIndex,
+    signType,
   };
   return signPoint as PslSignFeature;
 }