front: stdcm - show consist tooltip on focus out only

- Update ConsistError type to be able to display them or not depending on some conditions - Transform consistErrors useMemo into a state and move it in StdcmConsist component Signed-off-by: SharglutDev <[email protected]>
OpenRailAssociation · Feb 13, 2025 · b748403 · b748403
1 parent 397e4db
commit b748403
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 56 deletions.
diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -5,25 +5,15 @@ import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import useStdcmTowedRollingStock from 'applications/stdcm/hooks/useStdcmTowedRollingStock';
 import { extractMarkersInfo } from 'applications/stdcm/utils';
-import {
-  validateMaxSpeed,
-  validateTotalLength,
-  validateTotalMass,
-} from 'applications/stdcm/utils/consistValidation';
 import DefaultBaseMap from 'common/Map/DefaultBaseMap';
 import { useOsrdConfSelectors } from 'common/osrdContext';
 import useInfraStatus from 'modules/pathfinding/hooks/useInfraStatus';
-import { useStoreDataForRollingStockSelector } from 'modules/rollingStock/components/RollingStockSelector/useStoreDataForRollingStockSelector';
 import { resetMargins, restoreStdcmConfig, updateStdcmPathStep } from 'reducers/osrdconf/stdcmConf';
 import {
-  getMaxSpeed,
   getStdcmDestination,
   getStdcmOrigin,
   getStdcmPathSteps,
-  getTotalLength,
-  getTotalMass,
 } from 'reducers/osrdconf/stdcmConf/selectors';
 import type { OsrdStdcmConfState } from 'reducers/osrdconf/types';
 import { useAppDispatch } from 'store';
@@ -82,10 +72,6 @@ const StdcmConfig = ({
   const studyID = useSelector(getStudyID);
   const scenarioID = useSelector(getScenarioID);
 
-  const totalMass = useSelector(getTotalMass);
-  const totalLength = useSelector(getTotalLength);
-  const maxSpeed = useSelector(getMaxSpeed);
-
   const [showMessage, setShowMessage] = useState(false);
 
   const { pathfinding, isPathFindingLoading } = useStaticPathfinding(infra);
@@ -95,29 +81,6 @@ const StdcmConfig = ({
 
   const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
 
-  const { rollingStock } = useStoreDataForRollingStockSelector();
-  const towedRollingStock = useStdcmTowedRollingStock();
-
-  const consistErrors = useMemo(() => {
-    const totalMassError = validateTotalMass({
-      tractionEngineMass: rollingStock?.mass,
-      towedMass: towedRollingStock?.mass,
-      totalMass,
-    });
-
-    const totalLengthError = validateTotalLength({
-      tractionEngineLength: rollingStock?.length,
-      towedLength: towedRollingStock?.length,
-      totalLength,
-    });
-
-    return {
-      totalMass: totalMassError,
-      totalLength: totalLengthError,
-      maxSpeed: validateMaxSpeed(maxSpeed, rollingStock?.max_speed),
-    };
-  }, [rollingStock, towedRollingStock, totalMass, totalLength, maxSpeed]);
-
   const disabled = isPending || retainedSimulationIndex !== undefined;
 
   const markersInfo = useMemo(() => extractMarkersInfo(pathSteps), [pathSteps]);
@@ -218,11 +181,7 @@ const StdcmConfig = ({
           />
           <div className="stdcm-simulation-inputs">
             <div className="stdcm-consist-container">
-              <StdcmConsist
-                consistErrors={consistErrors}
-                disabled={disabled}
-                isDebugMode={isDebugMode}
-              />
+              <StdcmConsist disabled={disabled} isDebugMode={isDebugMode} />
             </div>
             <div className="stdcm__separator" />
             <div ref={formRef} className="stdcm-simulation-itinerary">

diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConsist.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConsist.tsx
@@ -1,12 +1,17 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Input, ComboBox, useDefaultComboBox } from '@osrd-project/ui-core';
 import { useTranslation } from 'react-i18next';
 
-import useStatusWithMessage from 'applications/stdcm/hooks/useConsistFieldStatus';
+import useConsistFieldStatus from 'applications/stdcm/hooks/useConsistFieldStatus';
 import useStdcmTowedRollingStock from 'applications/stdcm/hooks/useStdcmTowedRollingStock';
 import type { ConsistErrors } from 'applications/stdcm/types';
 import calculateConsistMaxSpeed from 'applications/stdcm/utils/calculateConsistMaxSpeed';
+import {
+  validateMaxSpeed,
+  validateTotalLength,
+  validateTotalMass,
+} from 'applications/stdcm/utils/consistValidation';
 import type { LightRollingStockWithLiveries, TowedRollingStock } from 'common/api/osrdEditoastApi';
 import { useOsrdConfActions } from 'common/osrdContext';
 import SpeedLimitByTagSelector from 'common/SpeedLimitByTagSelector/SpeedLimitByTagSelector';
@@ -38,11 +43,11 @@ const ConsistCardTitle = ({
 export type StdcmConsistProps = {
   isDebugMode: boolean;
   disabled?: boolean;
-  consistErrors?: ConsistErrors;
 };
 
-const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: StdcmConsistProps) => {
+const StdcmConsist = ({ isDebugMode, disabled = false }: StdcmConsistProps) => {
   const { t } = useTranslation('stdcm');
+
   const { speedLimitByTag, speedLimitsByTags, dispatchUpdateSpeedLimitByTag } =
     useStoreDataForSpeedLimitByTagSelector({ isStdcm: true });
 
@@ -58,6 +63,12 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
     speed: true,
   });
 
+  const [consistErrors, setConsistErrors] = useState<ConsistErrors>({
+    totalMass: { display: false },
+    totalLength: { display: false },
+    maxSpeed: { display: false },
+  });
+
   const {
     totalMass,
     onTotalMassChange,
@@ -71,7 +82,7 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
   } = useStdcmConsist();
 
   const createFieldStatus = (field: 'totalMass' | 'totalLength' | 'maxSpeed') =>
-    useStatusWithMessage(
+    useConsistFieldStatus(
       field,
       statusWithMessage,
       consistErrors,
@@ -123,6 +134,39 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
     setStatusMessagesVisible((prevState) => ({ ...prevState, [key]: false }));
   };
 
+  useEffect(() => {
+    const totalMassError = validateTotalMass({
+      tractionEngineMass: rollingStock?.mass,
+      towedMass: towedRollingStock?.mass,
+      totalMass,
+    });
+
+    const totalLengthError = validateTotalLength({
+      tractionEngineLength: rollingStock?.length,
+      towedLength: towedRollingStock?.length,
+      totalLength,
+    });
+
+    const maxSpeedError = validateMaxSpeed(maxSpeed, rollingStock?.max_speed);
+
+    // Hide the tooltip if the user just changed the value for an invalid one (should be displayed only on focus out)
+    // but we also want to hide it as soon as the user corrects it
+    setConsistErrors((prevErrors) => ({
+      totalMass: {
+        message: totalMassError,
+        display: prevErrors.totalMass.display && !!totalMassError,
+      },
+      totalLength: {
+        message: totalLengthError,
+        display: prevErrors.totalLength.display && !!totalLengthError,
+      },
+      maxSpeed: {
+        message: maxSpeedError,
+        display: prevErrors.maxSpeed.display && !!maxSpeedError,
+      },
+    }));
+  }, [rollingStock, towedRollingStock, totalMass, totalLength, maxSpeed]);
+
   return (
     <StdcmCard
       name={t('consist.consist')}
@@ -166,6 +210,12 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
           min={0}
           value={totalMass ?? ''}
           onChange={onTotalMassChange}
+          onBlur={() => {
+            setConsistErrors({
+              ...consistErrors,
+              totalMass: { ...consistErrors.totalMass, display: !!consistErrors.totalMass.message },
+            });
+          }}
           disabled={disabled}
           statusWithMessage={massFieldStatus}
           onCloseStatusMessage={() => handleCloseStatusMessage('mass')}
@@ -178,6 +228,15 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
           min={0}
           value={totalLength ?? ''}
           onChange={onTotalLengthChange}
+          onBlur={() => {
+            setConsistErrors({
+              ...consistErrors,
+              totalLength: {
+                ...consistErrors.totalLength,
+                display: !!consistErrors.totalLength.message,
+              },
+            });
+          }}
           disabled={disabled}
           statusWithMessage={lengthFieldStatus}
           onCloseStatusMessage={() => handleCloseStatusMessage('length')}
@@ -199,6 +258,12 @@ const StdcmConsist = ({ isDebugMode, consistErrors = {}, disabled = false }: Std
           min={0}
           value={maxSpeed ?? ''}
           onChange={onMaxSpeedChange}
+          onBlur={() => {
+            setConsistErrors({
+              ...consistErrors,
+              maxSpeed: { ...consistErrors.maxSpeed, display: !!consistErrors.maxSpeed.message },
+            });
+          }}
           disabled={disabled}
           statusWithMessage={speedFieldStatus}
           onCloseStatusMessage={() => handleCloseStatusMessage('speed')}

diff --git a/front/src/applications/stdcm/hooks/useConsistFieldStatus.ts b/front/src/applications/stdcm/hooks/useConsistFieldStatus.ts
@@ -28,11 +28,11 @@ const useConsistFieldStatus = (
 
   switch (type) {
     case 'totalMass': {
-      if (consistErrors?.totalMass) {
+      if (consistErrors.totalMass.message && consistErrors.totalMass.display) {
         return {
           status: 'error',
           tooltip: 'left',
-          message: t(consistErrors.totalMass, {
+          message: t(consistErrors.totalMass.message, {
             low: Math.ceil(kgToT((rollingStock?.mass ?? 0) + (towedRollingStock?.mass ?? 0))),
             high: CONSIST_TOTAL_MASS_MAX,
           }),
@@ -45,11 +45,11 @@ const useConsistFieldStatus = (
     }
 
     case 'totalLength': {
-      if (consistErrors?.totalLength) {
+      if (consistErrors.totalLength.message && consistErrors.totalLength.display) {
         return {
           status: 'error',
           tooltip: 'left',
-          message: t(consistErrors.totalLength, {
+          message: t(consistErrors.totalLength.message, {
             low: Math.ceil((rollingStock?.length ?? 0) + (towedRollingStock?.length ?? 0)),
             high: CONSIST_TOTAL_LENGTH_MAX,
           }),
@@ -62,11 +62,11 @@ const useConsistFieldStatus = (
     }
 
     case 'maxSpeed': {
-      if (consistErrors?.maxSpeed) {
+      if (consistErrors.maxSpeed.message && consistErrors.maxSpeed.display) {
         return {
           status: 'error',
           tooltip: 'left',
-          message: t(consistErrors.maxSpeed, {
+          message: t(consistErrors.maxSpeed.message, {
             low: CONSIST_MAX_SPEED_MIN,
             high: Math.floor(
               msToKmh(Math.min(rollingStock?.max_speed ?? kmhToMs(CONSIST_MAX_SPEED_MIN)))

diff --git a/front/src/applications/stdcm/types.ts b/front/src/applications/stdcm/types.ts
@@ -74,9 +74,18 @@ export type StdcmResultsOperationalPoint = {
 };
 
 export type ConsistErrors = {
-  totalMass?: string;
-  totalLength?: string;
-  maxSpeed?: string;
+  totalMass: {
+    message?: string;
+    display: boolean;
+  };
+  totalLength: {
+    message?: string;
+    display: boolean;
+  };
+  maxSpeed: {
+    message?: string;
+    display: boolean;
+  };
 };
 
 export type StdcmResults = {