OpenRailAssociation · alexandredamiron · Sep 29, 2022 · Sep 22, 2022 · Sep 23, 2022 · Sep 23, 2022
@@ -1,7 +1,8 @@
 import * as d3 from 'd3';
 
 import React, { useEffect, useRef, useState } from 'react';
-import { select, selectAll } from 'd3-selection';
+import PropTypes from 'prop-types';
+import { select } from 'd3-selection';
 
 import { brushX } from 'd3-brush';
 
@@ -192,21 +193,6 @@ export default function MarecoMultiRange({
     setBrushes((brushes) => [...brushes, ...extensionMapped]);
   }, [extensions]);
 
-  const newBrush = (qu) => {
-    console.log('new Brush', brushesRef.current);
-
-    const brush = brushX()
-      .extent([
-        [margin.left, margin.top],
-        [viewBoxWidth - margin.right, viewBoxHeight - margin.bottom - 6],
-      ])
-      .on('start', brushstart) // Make sure don't pass surrounding brushes
-      .on('brush', brushed) // Make sure don't pass surrounding brushes
-      .on('end', brushend); // Keep track of what brushes is surrounding
-
-    setBrushes((brushes) => [...brushes, { id: brushes.length, brush }]);
-  };
-
   function brushstart({ sourceEvent }) {
     // empty for now
   }
@@ -269,6 +255,21 @@ export default function MarecoMultiRange({
     // newBrush(); /// Only on drag mode
   }
 
+  const newBrush = () => {
+    console.log('new Brush', brushesRef.current);
+
+    const brush = brushX()
+      .extent([
+        [margin.left, margin.top],
+        [viewBoxWidth - margin.right, viewBoxHeight - margin.bottom - 6],
+      ])
+      .on('start', brushstart) // Make sure don't pass surrounding brushes
+      .on('brush', brushed) // Make sure don't pass surrounding brushes
+      .on('end', brushend); // Keep track of what brushes is surrounding
+
+    setBrushes((brushes) => [...brushes, { id: brushes.length, brush }]);
+  };
+
   return (
     <svg
       ref={ref}
@@ -286,3 +287,9 @@ export default function MarecoMultiRange({
     </svg>
   );
 }
+
+MarecoMultiRange.propTypes = {
+  stops: PropTypes.array.isRequired,
+  extensions: PropTypes.array.isRequired,
+  setExtensions: PropTypes.func.isRequired,
+};
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { LIST_VALUES_SIGNAL_BASE } from 'applications/osrd/components/Simulation/consts';
@@ -10,7 +11,7 @@ import SignalSwitch from './SignalSwitch';
  * @returns RFC with OSRD Data. SignalSwitch
  */
 const withOSRDData = (Component) =>
-  function (props) {
+  function wrapperComponent(props) {
     const { signalBase } = useSelector((state) => state.osrdsimulation);
     const dispatch = useDispatch();
 

@@ -3,11 +3,10 @@ import {
   formatSignalAspects,
   formatStepsWithTime,
   formatStepsWithTimeMulti,
-  makeStairCase,
   mergeDatasArea,
 } from 'applications/osrd/components/Helpers/ChartHelpers';
 
-import { setFailure } from 'reducers/main.ts';
+import { setFailure } from 'reducers/main';
 
 /**
  * Will do some formating & computation to get a trains to be displayed. Stored then with currentSimulation splitted reducer

@@ -1,14 +1,8 @@
 import * as d3 from 'd3';
 
-import { getDirection, timeShiftTrain } from 'applications/osrd/components/Helpers/ChartHelpers';
-import {
-  updateContextMenu,
-  updateMustRedraw,
-  updateSelectedTrain,
-  updateSimulation,
-} from 'reducers/osrdsimulation';
+import { getDirection } from 'applications/osrd/components/Helpers/ChartHelpers';
+import { updateContextMenu, updateMustRedraw, updateSelectedTrain } from 'reducers/osrdsimulation';
 
-import React from 'react';
 import drawArea from 'applications/osrd/components/Simulation/drawArea';
 import drawCurve from 'applications/osrd/components/Simulation/drawCurve';
 import drawRect from 'applications/osrd/components/Simulation/drawRect';

@@ -1,5 +1,4 @@
-import * as d3 from 'd3';
-
+/* eslint-disable no-unused-vars */
 const drawRect = (
   chart,
   classes,

@@ -10,14 +10,12 @@ import {
   updateChartXGEV,
   updateContextMenu,
   updateMustRedraw,
-  updateTimePosition,
   updateTimePositionValues,
 } from 'reducers/osrdsimulation';
 
 import { LIST_VALUES_NAME_SPACE_TIME } from 'applications/osrd/components/Simulation/consts';
 import drawGuideLines from 'applications/osrd/components/Simulation/drawGuideLines';
 import { store } from 'Store';
-import createTrain from './SpaceTimeChart/createTrain';
 
 export const displayGuide = (chart, opacity) => {
   chart.svg.selectAll('#vertical-line').style('opacity', opacity);
@@ -305,13 +303,6 @@ const enableInteractivity = (
           : chart.x.invert(d3.mouse(d3.event.currentTarget)[0]);
         const timePositionLocal = interpolateOnPosition(dataSimulation, keyValues, positionLocal);
         if (timePositionLocal) {
-          const immediatePositionsValues = interpolateOnTime(
-            dataSimulation,
-            ['time'],
-            LIST_VALUES_NAME_SPACE_TIME,
-            timePositionLocal
-          );
-
           debounceUpdateTimePositionValues(timePositionLocal, null, 15);
         }
       }

@@ -48,6 +48,7 @@ function TrainHoverPosition(props) {
             className="map-search-marker"
             longitude={intermediateMarkerPoint.geometry.coordinates[0]}
             latitude={intermediateMarkerPoint.geometry.coordinates[1]}
+            // eslint-disable-next-line react/no-array-index-key
             key={`intermediateMarker-${i}`}
           >
             <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">

@@ -5,7 +5,7 @@ import nextId from 'react-id-generator';
 
 const TrainHoverPositionOthers = (props) => {
   const { trainHoverPositionOthers } = props;
-  return trainHoverPositionOthers.map((point, headIndex) => (
+  return trainHoverPositionOthers.map((point) => (
     <>
       <Marker
         className="map-search-marker"
@@ -23,28 +23,26 @@ const TrainHoverPositionOthers = (props) => {
         </span>
       </Marker>
       {point.properties.intermediaterMarkersPoints &&
-        point.properties.intermediaterMarkersPoints.map(
-          (intermediateMarkerPoint, followingIndex) => (
-            <Marker
-              className="map-search-marker"
-              longitude={intermediateMarkerPoint.geometry.coordinates[0]}
-              latitude={intermediateMarkerPoint.geometry.coordinates[1]}
-              key={nextId()}
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-                <circle
-                  style={{
-                    fill: '#333',
-                    fillOpacity: '0.60',
-                  }}
-                  cx="16"
-                  cy="16"
-                  r="8"
-                />
-              </svg>
-            </Marker>
-          )
-        )}
+        point.properties.intermediaterMarkersPoints.map((intermediateMarkerPoint) => (
+          <Marker
+            className="map-search-marker"
+            longitude={intermediateMarkerPoint.geometry.coordinates[0]}
+            latitude={intermediateMarkerPoint.geometry.coordinates[1]}
+            key={nextId()}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+              <circle
+                style={{
+                  fill: '#333',
+                  fillOpacity: '0.60',
+                }}
+                cx="16"
+                cy="16"
+                r="8"
+              />
+            </svg>
+          </Marker>
+        ))}
     </>
   ));
 };

@@ -8,7 +8,7 @@ import ModalSNCF from 'common/BootstrapSNCF/ModalSNCF/ModalSNCF';
 import ModalHeaderSNCF from 'common/BootstrapSNCF/ModalSNCF/ModalHeaderSNCF';
 import ModalBodySNCF from 'common/BootstrapSNCF/ModalSNCF/ModalBodySNCF';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
-import { setSuccess, setFailure } from 'reducers/main.ts';
+import { setSuccess, setFailure } from 'reducers/main';
 import icon from 'assets/pictures/timetable.svg';
 
 const timetableURL = '/timetable/';

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 import ModalBodySNCF from 'common/BootstrapSNCF/ModalSNCF/ModalBodySNCF';

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { post } from 'common/requests';
 import { updateName } from 'reducers/osrdconf';
-import { setFailure, setSuccess } from 'reducers/main.ts';
+import { setFailure, setSuccess } from 'reducers/main';
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 import DotsLoader from 'common/DotsLoader/DotsLoader';
 import { time2sec, sec2time } from 'utils/timeManipulation';

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { updateInfraID } from 'reducers/osrdconf';
-import { setFailure } from 'reducers/main.ts';
+import { setFailure } from 'reducers/main';
 import { get } from 'common/requests';
 import icon from 'assets/pictures/tracks.svg';
 import InfraSelectorModal from 'applications/osrd/components/InfraSelector/InfraSelectorModal';

@@ -16,7 +16,7 @@ import PropTypes from 'prop-types';
 import { WebMercatorViewport } from 'react-map-gl';
 import bbox from '@turf/bbox';
 import { post } from 'common/requests';
-import { setFailure } from 'reducers/main.ts';
+import { setFailure } from 'reducers/main';
 import { updateFeatureInfoClick } from 'reducers/map';
 import { useTranslation } from 'react-i18next';
 
@@ -25,7 +25,7 @@ const itineraryURI = '/pathfinding/';
 function Itinerary(props) {
   const [launchPathfinding, setLaunchPathfinding] = useState(false);
   const [pathfindingInProgress, setPathfindingInProgress] = useState(false);
-  const { updateExtViewport, mode } = props;
+  const { updateExtViewport } = props;
   const dispatch = useDispatch();
   const map = useSelector((state) => state.map);
   const osrdconf = useSelector((state) => state.osrdconf);

@@ -24,15 +24,15 @@ import SignalingType from 'common/Map/Layers/SignalingType';
 import Signals from 'common/Map/Layers/Signals';
 import SnappedMarker from 'common/Map/Layers/SnappedMarker';
 import SpeedLimits from 'common/Map/Layers/SpeedLimits';
-import BufferStops from 'common/Map/Layers/BufferStops.tsx';
-import Detectors from 'common/Map/Layers/Detectors.tsx';
+import BufferStops from 'common/Map/Layers/BufferStops';
+import Detectors from 'common/Map/Layers/Detectors';
 import Switches from 'common/Map/Layers/Switches';
 import TracksOSM from 'common/Map/Layers/TracksOSM';
 /* Objects & various */
 import TVDs from 'common/Map/Layers/TVDs';
 import TracksGeographic from 'common/Map/Layers/TracksGeographic';
 import TracksSchematic from 'common/Map/Layers/TracksSchematic';
-import colors from 'common/Map/Consts/colors.ts';
+import colors from 'common/Map/Consts/colors';
 import osmBlankStyle from 'common/Map/Layers/osmBlankStyle';
 import turfNearestPointOnLine from '@turf/nearest-point-on-line';
 import { updateFeatureInfoClickOSRD } from 'reducers/osrdconf';

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { updateSpeedLimitByTag } from 'reducers/osrdconf';
-import { setFailure } from 'reducers/main.ts';
-import { get } from 'common/requests.ts';
+import { setFailure } from 'reducers/main';
+import { get } from 'common/requests';
 import icon from 'assets/pictures/speedometer.svg';
 import DotsLoader from 'common/DotsLoader/DotsLoader';
 import SelectImprovedSNCF from 'common/BootstrapSNCF/SelectImprovedSNCF';

@@ -71,6 +71,24 @@ export default function TimetableSelector(props) {
     }
   }, [timetableID, mustUpdateTimetable]);
 
+  let timeTable = <span className="ml-1">{t('osrdconf:noTimetable')}</span>;
+  if (timetableID !== undefined && selectedTimetable === undefined) {
+    timeTable = (
+      <span className="ml-3">
+        <DotsLoader />
+      </span>
+    );
+  } else if (selectedTimetable !== undefined) {
+    timeTable = (
+      <>
+        <span className="ml-1">{selectedTimetable.name}</span>
+        <small className="ml-1 text-primary flex-grow-1">{selectedTimetable.id}</small>
+        <span className="ml-2 badge badge-secondary">
+          {`${selectedTimetable.train_schedules.length} ${t('translation:common.train(s)')}`}
+        </span>
+      </>
+    );
+  }
   return (
     <>
       <div className="osrd-config-item mb-2">
@@ -84,27 +102,7 @@ export default function TimetableSelector(props) {
           <div className="h2 mb-0 d-flex align-items-center">
             <img width="32px" className="mr-2" src={icon} alt="timetableIcon" />
             <span className="text-muted">{t('osrdconf:timetable')}</span>
-            {timetableID !== undefined && selectedTimetable === undefined ? (
-              <span className="ml-3">
-                <DotsLoader />
-              </span>
-            ) : (
-              <>
-                {selectedTimetable !== undefined ? (
-                  <>
-                    <span className="ml-1">{selectedTimetable.name}</span>
-                    <small className="ml-1 text-primary flex-grow-1">{selectedTimetable.id}</small>
-                    <span className="ml-2 badge badge-secondary">
-                      {`${selectedTimetable.train_schedules.length} ${t(
-                        'translation:common.train(s)'
-                      )}`}
-                    </span>
-                  </>
-                ) : (
-                  <span className="ml-1">{t('osrdconf:noTimetable')}</span>
-                )}
-              </>
-            )}
+            {timeTable}
           </div>
         </div>
         {timetableID !== undefined && trainList !== undefined && trainList.length > 0 ? (

@@ -70,7 +70,6 @@ function OSRDSimulation() {
     departureArrivalTimes,
     selectedTrain,
     stickyBar,
-    signalBase,
   } = useSelector((state) => state.osrdsimulation);
   const simulation = useSelector((state) => state.osrdsimulation.simulation.present);
   const dispatch = useDispatch();
@@ -79,13 +78,6 @@ function OSRDSimulation() {
     import('./OSRDSimulationDarkMode.scss');
   }
 
-  function WaitingLoader() {
-    if (isEmpty) {
-      return <h1 className="text-center">{t('simulation:noData')}</h1>;
-    }
-    return <CenterLoader message={t('simulation:waiting')} />;
-  }
-
   /**
    * Recover the time table for all the trains
    */
@@ -200,12 +192,16 @@ function OSRDSimulation() {
     dispatch(updateConsolidatedSimulation(consolidatedSimulation));
   }, [simulation]);
 
+  const waitingLoader = isEmpty ? (
+    <h1 className="text-center">{t('simulation:noData')}</h1>
+  ) : (
+    <CenterLoader message={t('simulation:waiting')} />
+  );
+
   return (
     <main className={`mastcontainer ${fullscreen ? ' fullscreen' : ''}`}>
       {!simulation || simulation.trains.length === 0 ? (
-        <div className="pt-5 mt-5">
-          <WaitingLoader />
-        </div>
+        <div className="pt-5 mt-5">{waitingLoader}</div>
       ) : (
         <div className="m-0 p-3">
           <div className="mb-2">

@@ -50,6 +50,7 @@ export default function SpaceCurvesSlopes(props) {
     (state) => state.osrdsimulation
   );
   const simulation = useSelector((state) => state.osrdsimulation.simulation.present);
+  // eslint-disable-next-line no-unused-vars
   const [rotate, setRotate] = useState(false);
   const [chart, setChart] = useState(undefined);
   const [zoomLevel, setZoomLevel] = useState(1);