front: add power restriction warning banner and incompatible cell styling

Show a warning banner above the table when power restrictions are
incompatible with the electrification, and highlight the affected cells
with warning colors.

Signed-off-by: nncluzu <ngamenichaka@yahoo.fr>

Author: kmer2016

front/public/locales/en/translation.json

@@ -842,6 +842,8 @@
     "timeFromPreviousOp": "time from above waypoint",
     "totalTravelTime": "total travel time",
     "trackName": "track",
-    "waypoint": "Waypoint {{id}}"
+    "waypoint": "Waypoint {{id}}",
+    "powerRestrictionIncompatibility_one": "{{count}} power restriction code isn't compatible with the electrification.",
+    "powerRestrictionIncompatibility_other": "{{count}} power restriction codes aren't compatible with the electrification."
   }
 }

front/public/locales/fr/translation.json

@@ -842,6 +842,8 @@
     "timeFromPreviousOp": "temps depuis le point précédent",
     "totalTravelTime": "temps total du trajet",
     "trackName": "voie",
-    "waypoint": "Via {{id}}"
+    "waypoint": "Via {{id}}",
+    "powerRestrictionIncompatibility_one": "{{count}} code de restriction de puissance n'est pas compatible avec l'électrification.",
+    "powerRestrictionIncompatibility_other": "{{count}} codes de restriction de puissance ne sont pas compatibles avec l'électrification."
   }
 }

front/src/applications/operationalStudies/views/Scenario/components/SimulationResults/SimulationResults.tsx

@@ -373,6 +373,7 @@ const SimulationResults = ({
                 upsertTimetableItems={upsertTimetableItems}
                 isSimulationDataLoading={isSimulationDataLoading}
                 operationalPointsOnPath={simulationResults.pathProperties?.operationalPoints}
+                voltages={simulationResults.pathProperties?.voltages}
                 rollingStock={simulationResults.rollingStock}
                 {...(simulationResults?.isValid &&
                   simulationSummary?.isValid && {

front/src/modules/timesStops/TimesStopsOutput.tsx

@@ -4,19 +4,25 @@ import cx from 'classnames';
 import { useSelector } from 'react-redux';
 
 import type { PathPropertiesFormatted } from 'applications/operationalStudies/types';
+import {
+  getPowerRestrictionsWarnings,
+  countWarnings,
+} from 'applications/operationalStudies/views/Scenario/components/ManageTimetableItem/PowerRestrictionsSelector/helpers/powerRestrictionWarnings';
 import type {
   CorePathfindingResultSuccess,
   ReceptionSignal,
   RollingStock,
   SimulationResponseSuccess,
 } from 'common/api/osrdEditoastApi';
+import { matchPathStepAndOp } from 'modules/pathfinding/utils';
 import type { SimulationSummary, TimetableItemWithDetails } from 'modules/timetableItem/types';
 import type { TimetableItem, Train } from 'reducers/osrdconf/types';
 import { getUseNewTimesStopsTable } from 'reducers/user/userSelectors';
 import { formatLocalTime } from 'utils/date';
 import { Duration } from 'utils/duration';
 
 import { computeOptimisticRow } from './helpers/cellUpdate';
+import { buildOpMatchParams } from './helpers/utils';
 import useOutputTableData from './hooks/useOutputTableData';
 import useTimesStopsTableData from './hooks/useTimesStopsTableData';
 import useUpdateTimesStopsTable from './hooks/useUpdateTimesStopsTable';
@@ -35,6 +41,7 @@ type TimesStopsOutputProps = {
   simulatedPathItemTimes?: Extract<SimulationSummary, { isValid: true }>['pathItemTimes'];
   simulatedPathItemRespect?: Extract<SimulationSummary, { isValid: true }>['pathItemRespect'];
   operationalPointsOnPath?: PathPropertiesFormatted['operationalPoints'];
+  voltages?: PathPropertiesFormatted['voltages'];
   isSimulationDataLoading?: boolean;
   rollingStock?: RollingStock;
 };
@@ -49,6 +56,7 @@ const TimesStopsOutput = ({
   simulatedPathItemTimes,
   simulatedPathItemRespect,
   operationalPointsOnPath,
+  voltages,
   isSimulationDataLoading = false,
   rollingStock,
 }: TimesStopsOutputProps) => {
@@ -115,6 +123,61 @@ const TimesStopsOutput = ({
     [rollingStock]
   );
 
+  const { powerRestrictionWarningCount, incompatiblePowerRestrictionIds } = useMemo(() => {
+    const empty = {
+      powerRestrictionWarningCount: 0,
+      incompatiblePowerRestrictionIds: new Set<string>(),
+    };
+    if (!voltages?.length || !rollingStock || !selectedTrain.power_restrictions?.length)
+      return empty;
+
+    const pathStepPositions = new Map<string, number>();
+    selectedTrain.path.forEach((pathStep) => {
+      const matchingOp = operationalPointsOnPath?.find((op) =>
+        matchPathStepAndOp(pathStep.location, buildOpMatchParams(op))
+      );
+      if (matchingOp) pathStepPositions.set(pathStep.id, matchingOp.position);
+    });
+
+    const rangesWithId = selectedTrain.power_restrictions.flatMap((pr) => {
+      const begin = pathStepPositions.get(pr.from);
+      const end = pathStepPositions.get(pr.to);
+      if (begin === undefined || end === undefined) return [];
+      return [{ begin, end, value: pr.value, fromId: pr.from }];
+    });
+
+    if (!rangesWithId.length) return empty;
+
+    const warnings = getPowerRestrictionsWarnings(
+      rangesWithId,
+      voltages,
+      rollingStock.effort_curves.modes
+    );
+
+    const warningRanges = [
+      ...warnings.invalidCombinationWarnings,
+      ...warnings.modeNotSupportedWarnings,
+      ...warnings.missingPowerRestrictionWarnings,
+    ];
+
+    const incompatibleIds = new Set<string>(
+      rangesWithId
+        .filter((pr) => warningRanges.some((w) => w.end > pr.begin && w.begin < pr.end))
+        .map((pr) => pr.fromId)
+    );
+
+    return {
+      powerRestrictionWarningCount: countWarnings(warnings),
+      incompatiblePowerRestrictionIds: incompatibleIds,
+    };
+  }, [
+    voltages,
+    selectedTrain.power_restrictions,
+    selectedTrain.path,
+    operationalPointsOnPath,
+    rollingStock,
+  ]);
+
   const {
     updateArrival,
     updateStopDuration,
@@ -202,6 +265,8 @@ const TimesStopsOutput = ({
         isValid={stableIsValid}
         isComputedDataPending={isAwaitingSimulation}
         availablePowerRestrictions={availablePowerRestrictions}
+        powerRestrictionWarningCount={powerRestrictionWarningCount}
+        incompatiblePowerRestrictionIds={incompatiblePowerRestrictionIds}
         onArrivalChange={handleArrivalChange}
         onStopDurationChange={handleStopDurationChange}
         onDepartureChange={handleDepartureChange}

front/src/modules/timesStops/TimesStopsTable.tsx

@@ -1,7 +1,7 @@
 import { useCallback, Fragment, useMemo, useRef } from 'react';
 
 import { Checkbox } from '@osrd-project/ui-core';
-import { Moon, TriangleDown } from '@osrd-project/ui-icons';
+import { Alert, Moon, TriangleDown } from '@osrd-project/ui-icons';
 import {
   createColumnHelper,
   flexRender,
@@ -35,6 +35,8 @@ declare module '@tanstack/react-table' {
     allRows: TimesStopsRowNew[];
     isComputedDataPending?: boolean;
     availablePowerRestrictions: string[];
+    powerRestrictionWarningCount: number;
+    incompatiblePowerRestrictionIds: Set<string>;
     onArrivalChange: (row: TimesStopsRowNew, arrival: Date | null) => void;
     onStopDurationChange: (row: TimesStopsRowNew, durationSeconds: number | null) => void;
     onDepartureChange: (row: TimesStopsRowNew, departure: Date | null) => void;
@@ -84,6 +86,8 @@ type TimesStopsTableProps = {
   isValid: boolean;
   isComputedDataPending?: boolean;
   availablePowerRestrictions: string[];
+  powerRestrictionWarningCount?: number;
+  incompatiblePowerRestrictionIds?: Set<string>;
   onArrivalChange: (row: TimesStopsRowNew, arrival: Date | null) => void;
   onStopDurationChange: (row: TimesStopsRowNew, durationSeconds: number | null) => void;
   onDepartureChange: (row: TimesStopsRowNew, departure: Date | null) => void;
@@ -106,6 +110,8 @@ const TimesStopsTable = ({
   isValid,
   isComputedDataPending,
   availablePowerRestrictions,
+  powerRestrictionWarningCount = 0,
+  incompatiblePowerRestrictionIds,
   onArrivalChange,
   onStopDurationChange,
   onDepartureChange,
@@ -463,6 +469,8 @@ const TimesStopsTable = ({
       allRows: rows,
       isComputedDataPending,
       availablePowerRestrictions,
+      powerRestrictionWarningCount,
+      incompatiblePowerRestrictionIds: incompatiblePowerRestrictionIds ?? new Set(),
       onArrivalChange,
       onStopDurationChange,
       onDepartureChange,
@@ -507,6 +515,14 @@ const TimesStopsTable = ({
     <div
       className={cx('times-stops-table-new', { 'computed-data-pending': isComputedDataPending })}
     >
+      {powerRestrictionWarningCount > 0 && (
+        <div className="power-restriction-warning">
+          <Alert variant="fill" />
+          <span>
+            {t('powerRestrictionIncompatibility', { count: powerRestrictionWarningCount })}
+          </span>
+        </div>
+      )}
       <table className="table-container">
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -560,7 +576,14 @@ const TimesStopsTable = ({
                   })}
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <td key={cell.id} className={cell.column.columnDef.meta?.className}>
+                    <td
+                      key={cell.id}
+                      className={cx(cell.column.columnDef.meta?.className, {
+                        'power-restriction-incompatible':
+                          cell.column.id === 'powerRestriction' &&
+                          table.options.meta!.incompatiblePowerRestrictionIds.has(row.original.id),
+                      })}
+                    >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </td>
                   ))}

front/src/modules/timesStops/styles/_timesStopsTable.scss

@@ -8,6 +8,23 @@
     pointer-events: none;
   }
 
+  .power-restriction-warning {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 47px;
+    padding-inline: 16px;
+    background: var(--warning5);
+    color: var(--warning60);
+    font-size: 0.875rem;
+    border-bottom: 1px solid var(--black25);
+
+    svg {
+      flex-shrink: 0;
+      color: var(--warning30);
+    }
+  }
+
   .table-container {
     position: relative;
     thead {
@@ -219,10 +236,6 @@
 
           option {
             color: initial;
-
-            &:checked {
-              color: var(--primary60);
-            }
           }
         }
 
@@ -237,8 +250,17 @@
 
       }
 
+      &.power-restriction-incompatible {
+        background: var(--warning5);
+        box-shadow: inset 0 0 0 1px var(--warning30);
+
+        select {
+          color: var(--warning60);
+        }
+      }
     }
 
+
     /* comfortable padding */
     @media (min-width: 784px) {
       th[class^='col-'] {