front: fix curves slopes and loading gauges error

Author: Akctarus

front/src/applications/editor/components/LinearMetadata/FormComponent.tsx

@@ -30,11 +30,10 @@ import { LinearMetadataTooltip } from './tooltip';
 import { FormBeginEndWidget } from './FormBeginEndWidget';
 import 'common/IntervalsDataViz/style.scss';
 
-export const FormComponent: React.FC<FieldProps> = (props) => {
+const IntervalEditorComponent: React.FC<FieldProps> = (props) => {
   const { name, formContext, formData, schema, onChange, registry } = props;
   const { openModal, closeModal } = useModal();
   const { t } = useTranslation();
-  const Fields = utils.getDefaultRegistry().fields;
 
   // Wich segment area is visible
   const [viewBox, setViewBox] = useState<[number, number] | null>(null);
@@ -145,9 +144,6 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
     setSelectedData(selected !== null && data[selected] ? data[selected] : null);
   }, [selected, data]);
 
-  if (!LINEAR_METADATA_FIELDS.includes(name))
-    return <Fields.ArrayField {...props} schema={jsonSchema} />;
-
   return (
     <div className="linear-metadata">
       <div className="header">
@@ -427,4 +423,54 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
   );
 };
 
+export const FormComponent: React.FC<FieldProps> = (props) => {
+  const { name, formContext, schema, registry } = props;
+  const Fields = utils.getDefaultRegistry().fields;
+
+  // Get the distance of the geometry
+  const distance = useMemo(() => {
+    if (!isNil(formContext.length)) {
+      return formContext.length;
+    }
+    if (formContext.geometry?.type === 'LineString') {
+      return getLineStringDistance(formContext.geometry);
+    }
+    return 0;
+  }, [formContext]);
+
+  // Remove the 'valueField' required field because it is required by the backend. However,
+  // the segment with missing values is filtered in 'customOnChange' before being sent to the backend,
+  // and then re-added by 'fixLinearMetadataItems'.
+  const requiredFilter = (requireds: string[]) =>
+    requireds.filter((r) => ['end', 'begin'].includes(r));
+
+  // Compute the JSON schema of the linear metadata item
+  const jsonSchema = useMemo(
+    () =>
+      getFieldJsonSchema(
+        schema,
+        registry.rootSchema,
+        requiredFilter,
+        distance
+          ? {
+              begin: {
+                minimum: 0,
+                maximum: distance,
+              },
+              end: {
+                minimum: 0,
+                maximum: distance,
+              },
+            }
+          : {}
+      ),
+    [schema, registry.rootSchema, distance]
+  );
+
+  if (!LINEAR_METADATA_FIELDS.includes(name))
+    return <Fields.ArrayField {...props} schema={jsonSchema} />;
+
+  return <IntervalEditorComponent {...props} />;
+};
+
 export default FormComponent;

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

@@ -31,9 +31,10 @@ import {
   SpeedSectionEntity,
   TrackSectionEntity,
 } from 'types';
-
+import DebouncedNumberInputSNCF from 'common/BootstrapSNCF/FormSNCF/DebouncedNumberInputSNCF';
+import { WidgetProps } from '@rjsf/core';
 import { TrackEditionState } from './types';
-import { injectGeometry } from './utils';
+import { injectGeometry, removeInvalidRanges } from './utils';
 
 export const TRACK_LAYER_ID = 'trackEditionTool/new-track-path';
 export const POINTS_LAYER_ID = 'trackEditionTool/new-track-points';
@@ -351,6 +352,21 @@ export const TrackEditionLayers: FC = () => {
   );
 };
 
+export const CustomLengthInput: React.FC<WidgetProps> = (props) => {
+  const { onChange, value } = props;
+
+  return (
+    <DebouncedNumberInputSNCF
+      debouncedDelay={2000}
+      input={value}
+      setInput={onChange}
+      label=""
+      showFlex={false}
+      sm={false}
+    />
+  );
+};
+
 export const TrackEditionLeftPanel: FC = () => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -359,7 +375,7 @@ export const TrackEditionLeftPanel: FC = () => {
     EditorContext
   ) as ExtendedEditorContextType<TrackEditionState>;
   const submitBtnRef = useRef<HTMLButtonElement>(null);
-  const { track } = state;
+  const { track, initialTrack } = state;
   const isNew = track.properties.id === NEW_ENTITY_ID;
 
   // Hack to be able to launch the submit event from the rjsf form by using
@@ -376,6 +392,11 @@ export const TrackEditionLeftPanel: FC = () => {
     <>
       <EditorForm
         data={track}
+        overrideUiSchema={{
+          length: {
+            'ui:widget': CustomLengthInput,
+          },
+        }}
         onSubmit={async (savedEntity) => {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           const res: any = await dispatch(
@@ -408,7 +429,26 @@ export const TrackEditionLeftPanel: FC = () => {
           });
         }}
         onChange={(newTrack) => {
-          setState({ ...state, track: newTrack as TrackSectionEntity });
+          let checkedTrack = { ...newTrack };
+          if (initialTrack.properties.length !== newTrack.properties.length) {
+            const { loading_gauge_limits, slopes, curves, length: newLength } = newTrack.properties;
+            const validLoadingGaugeLimits = removeInvalidRanges(loading_gauge_limits, newLength);
+            const validCurves = removeInvalidRanges(curves, newLength);
+            const validSlopes = removeInvalidRanges(slopes, newLength);
+            checkedTrack = {
+              ...checkedTrack,
+              properties: {
+                ...checkedTrack.properties,
+                loading_gauge_limits: validLoadingGaugeLimits,
+                slopes: validSlopes,
+                curves: validCurves,
+              },
+            };
+          }
+          setState({
+            ...state,
+            track: { ...(checkedTrack as TrackSectionEntity) },
+          });
         }}
       >
         <div>

front/src/applications/editor/tools/trackEdition/tool.tsx

@@ -219,7 +219,6 @@ const TrackEditionTool: Tool<TrackEditionState> = {
         const position = nearestPoint.geometry.coordinates as [number, number];
         const index = nearestPoint.properties.sectionIndex;
         const newState = cloneDeep(state);
-
         newState.track.geometry.coordinates.splice(index + 1, 0, position);
         newState.track = entityDoUpdate(newState.track, state.track.geometry);
         newState.nearestPoint = null;

front/src/applications/editor/tools/trackEdition/utils.ts

@@ -1,7 +1,7 @@
 import { EditorEntity, TrackSectionEntity } from 'types';
+import { LinearMetadataItem } from 'common/IntervalsDataViz/types';
 import { NEW_ENTITY_ID } from '../../data/utils';
 
-// eslint-disable-next-line import/prefer-default-export
 export function getNewLine(points: [number, number][]): TrackSectionEntity {
   return {
     type: 'Feature',
@@ -15,6 +15,7 @@ export function getNewLine(points: [number, number][]): TrackSectionEntity {
       length: 0,
       slopes: [],
       curves: [],
+      loading_gauge_limits: [],
     },
   };
 }
@@ -29,3 +30,14 @@ export function injectGeometry(track: EditorEntity): EditorEntity {
     },
   };
 }
+
+/**
+ * Remove the invalid ranges when the length of the track section has been modified
+ * - remove ranges which start after the new end
+ * - cut the ranges which start before the new end but end after it
+ */
+export function removeInvalidRanges<T>(values: LinearMetadataItem<T>[], newLength: number) {
+  return values
+    .filter((item) => item.begin < newLength)
+    .map((item) => (item.end >= newLength ? { ...item, end: newLength } : item));
+}

front/src/common/BootstrapSNCF/FormSNCF/DebouncedNumberInputSNCF.tsx

@@ -10,6 +10,8 @@ type DebouncedNumberInputSNCFProps = {
   id?: string;
   max?: number;
   min?: number;
+  sm?: boolean;
+  showFlex?: boolean;
 };
 
 const DebouncedNumberInputSNCF = ({
@@ -18,8 +20,10 @@ const DebouncedNumberInputSNCF = ({
   setInput,
   debouncedDelay = 800,
   id = '',
-  max = 100,
+  max,
   min = 0,
+  sm = true,
+  showFlex = true,
 }: DebouncedNumberInputSNCFProps) => {
   const [value, setValue] = useState<number | null>(input);
 
@@ -28,19 +32,24 @@ const DebouncedNumberInputSNCF = ({
   }, [input]);
 
   const checkChangedInput = (newValue: number | null) => {
-    if (newValue !== null && newValue !== input && min <= newValue && newValue <= max)
+    if (
+      newValue !== null &&
+      newValue !== input &&
+      min <= newValue &&
+      (max === undefined || newValue <= max)
+    )
       setInput(newValue);
     else if (value === null && input !== 0) setInput(0);
   };
 
   useDebouncedFunc(value, debouncedDelay, checkChangedInput);
 
   return (
-    <div className="debounced-number-input">
+    <div className={`${showFlex ? 'debounced-number-input' : ''}`}>
       <InputSNCF
         type="number"
         id={id}
-        isInvalid={value !== null && (value < min || max < value)}
+        isInvalid={value !== null && (value < min || (max ? max < value : false))}
         label={label}
         max={max}
         min={min}
@@ -49,7 +58,7 @@ const DebouncedNumberInputSNCF = ({
           setValue(e.target.value !== '' ? parseFloat(e.target.value) : null);
         }}
         value={value !== null ? value : ''}
-        sm
+        sm={sm}
       />
     </div>
   );

front/src/common/IntervalsDataViz/data.ts

@@ -219,17 +219,17 @@ export function mergeIn<T>(
  * - if empty it generate one
  * - if there is a gap at begin/end or inside, it is created
  * - if there is an overlaps, remove it
- * @param value The linear metadata
+ * @param items The linear metadata
  * @param lineLength The full length of the linearmetadata (should be computed from the LineString or given by the user)
  * @param opts If defined, it allows the function to fill gaps with default field value
  */
 export function fixLinearMetadataItems<T>(
-  value: Array<LinearMetadataItem<T>> | undefined,
+  items: Array<LinearMetadataItem<T>> | undefined,
   lineLength: number,
   opts?: { fieldName: string; defaultValue: unknown }
 ): Array<LinearMetadataItem<T>> {
   // simple scenario
-  if (!value || value.length === 0) {
+  if (!items || items.length === 0) {
     return [
       {
         begin: 0,
@@ -238,6 +238,9 @@ export function fixLinearMetadataItems<T>(
       } as LinearMetadataItem<T>,
     ];
   }
+  const filteredItems = items
+    .filter((item) => item.begin < lineLength)
+    .map((item) => (item.end >= lineLength ? { ...item, end: lineLength } : item));
 
   function haveAdditionalKeys(item: LinearMetadataItem, itemToCompare: LinearMetadataItem) {
     const keys = Object.keys(item);
@@ -249,7 +252,7 @@ export function fixLinearMetadataItems<T>(
   }
 
   // merge empty adjacent items
-  let fixedLinearMetadata: Array<LinearMetadataItem<T>> = sortBy(value, ['begin']);
+  let fixedLinearMetadata: Array<LinearMetadataItem<T>> = sortBy(filteredItems, ['begin']);
 
   // Order the array and fix it by filling gaps if there are some
   fixedLinearMetadata = fixedLinearMetadata.flatMap((item, index, array) => {

front/src/types/editor.ts

@@ -1,6 +1,11 @@
 import { JSONSchema7 } from 'json-schema';
 import { Feature, GeoJsonProperties, Geometry, Point, LineString, MultiLineString } from 'geojson';
-import { Direction, DirectionalTrackRange, ObjectType } from 'common/api/osrdEditoastApi';
+import {
+  Direction,
+  DirectionalTrackRange,
+  LoadingGaugeType,
+  ObjectType,
+} from 'common/api/osrdEditoastApi';
 import { LinearMetadataItem } from 'common/IntervalsDataViz/types';
 import { NullGeometry } from './geospatial';
 
@@ -24,6 +29,7 @@ export interface TrackSectionEntity
     {
       length: number;
       slopes: LinearMetadataItem<{ gradient: number }>[];
+      loading_gauge_limits: LinearMetadataItem<{ category: LoadingGaugeType }>[];
       curves: LinearMetadataItem<{ radius: number }>[];
       extensions?: {
         sncf?: {