front: timetable performance

timetable with virtualized list to limit the number of elements in the DOM Signed-off-by: Valentin Chanas <[email protected]>
OpenRailAssociation · Jan 20, 2025 · 1fe0918 · 1fe0918
1 parent eb04d34
commit 1fe0918
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 26 deletions.
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -96,7 +96,8 @@
     "remark-gfm": "^4.0.0",
     "reselect": "^5.1.0",
     "uuid": "^11.0.5",
-    "viewport-mercator-project": "^7.0.4"
+    "viewport-mercator-project": "^7.0.4",
+    "virtua": "^0.39.3"
   },
   "devDependencies": {
     "@apidevtools/swagger-parser": "^10.1.1",

diff --git a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
+import { Virtualizer } from 'virtua';
 
 import { MANAGE_TRAIN_SCHEDULE_TYPES } from 'applications/operationalStudies/consts';
 import type { Conflict, InfraState, TrainScheduleResult } from 'common/api/osrdEditoastApi';
@@ -145,30 +146,32 @@ const Timetable = ({
           trainSchedules={trainSchedules}
           isInSelection={selectedTrainIds.length > 0}
         />
-        {displayedTrainSchedules.map((train: TrainScheduleWithDetails, index) => (
-          <div key={`timetable-train-card-${train.id}-${train.trainName}`}>
-            {showDepartureDates[index] && (
-              <div className="scenario-timetable-departure-date">
-                {currentDepartureDates[index]}
-              </div>
-            )}
-            <TimetableTrainCard
-              isInSelection={selectedTrainIds.includes(train.id)}
-              handleSelectTrain={handleSelectTrain}
-              train={train}
-              isSelected={infraState === 'CACHED' && selectedTrainId === train.id}
-              isModified={train.id === trainIdToEdit}
-              setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
-              upsertTrainSchedules={upsertTrainSchedules}
-              setTrainIdToEdit={setTrainIdToEdit}
-              removeTrains={removeAndUnselectTrains}
-              projectionPathIsUsed={
-                infraState === 'CACHED' && trainIdUsedForProjection === train.id
-              }
-              dtoImport={dtoImport}
-            />
-          </div>
-        ))}
+        <Virtualizer overscan={15}>
+          {displayedTrainSchedules.map((train: TrainScheduleWithDetails, index) => (
+            <div key={`timetable-train-card-${train.id}-${train.trainName}`}>
+              {showDepartureDates[index] && (
+                <div className="scenario-timetable-departure-date">
+                  {currentDepartureDates[index]}
+                </div>
+              )}
+              <TimetableTrainCard
+                isInSelection={selectedTrainIds.includes(train.id)}
+                handleSelectTrain={handleSelectTrain}
+                train={train}
+                isSelected={infraState === 'CACHED' && selectedTrainId === train.id}
+                isModified={train.id === trainIdToEdit}
+                setDisplayTrainScheduleManagement={setDisplayTrainScheduleManagement}
+                upsertTrainSchedules={upsertTrainSchedules}
+                setTrainIdToEdit={setTrainIdToEdit}
+                removeTrains={removeAndUnselectTrains}
+                projectionPathIsUsed={
+                  infraState === 'CACHED' && trainIdUsedForProjection === train.id
+                }
+                dtoImport={dtoImport}
+              />
+            </div>
+          ))}
+        </Virtualizer>
         <div
           className={cx('bottom-timetables-trains', {
             'empty-list': trainSchedulesWithDetails.length === 0,