Merge pull request #1633 from solita-sabinaf/TIS-805/map_performance

TIS-805/map performance

package.json

@@ -16,6 +16,8 @@
   },
   "dependencies": {
     "@apollo/client": "3.11.8",
+    "@azure/msal-browser": "3.26.1",
+    "@azure/msal-react": "2.1.1",
     "@entur/a11y": "0.2.92",
     "@entur/alert": "0.16.19",
     "@entur/button": "3.2.34",
@@ -33,6 +35,8 @@
     "@entur/tokens": "3.17.2",
     "@entur/tooltip": "5.1.1",
     "@entur/typography": "1.8.47",
+    "@fintraffic/fds-coreui-css": "0.1.3",
+    "@lit-labs/react": "2.1.3",
     "@reduxjs/toolkit": "1.9.7",
     "@sentry/react": "7.119.2",
     "axios": "1.7.7",
@@ -43,6 +47,7 @@
     "graphql": "16.9.0",
     "graphql-request": "6.1.0",
     "leaflet": "1.9.4",
+    "lit": "3.2.1",
     "lodash.clonedeep": "4.5.0",
     "lodash.isempty": "4.4.0",
     "lodash.isequal": "4.5.0",
@@ -57,13 +62,9 @@
     "react-redux": "8.1.3",
     "react-router-dom": "6.27.0",
     "redux-sentry-middleware": "0.2.2",
-    "uuid": "10.0.0",
-    "@fintraffic/fds-coreui-css": "0.1.3",
-    "react-leaflet-cluster": "2.1.0",
-    "@lit-labs/react": "2.1.3",
-    "lit": "3.2.1",
-    "@azure/msal-browser": "3.26.1",
-    "@azure/msal-react": "2.1.1"
+    "supercluster": "^8.0.1",
+    "use-supercluster": "^1.2.0",
+    "uuid": "10.0.0"
   },
   "devDependencies": {
     "@redux-devtools/extension": "3.3.0",
@@ -83,6 +84,7 @@
     "@types/react-leaflet": "3.0.0",
     "@types/react-modal": "3.16.3",
     "@types/redux-immutable-state-invariant": "2.1.4",
+    "@types/supercluster": "^7.1.3",
     "@types/uuid": "9.0.8",
     "@vitejs/plugin-react": "4.3.3",
     "@vitest/coverage-v8": "2.1.3",
@@ -92,6 +94,7 @@
     "identity-obj-proxy": "3.0.0",
     "jsdom": "24.1.3",
     "lint-staged": "15.2.10",
+    "lit-html": "3.2.1",
     "msw": "2.6.0",
     "prettier": "3.3.3",
     "prettier-plugin-organize-imports": "3.2.4",
@@ -103,8 +106,7 @@
     "vite-plugin-svgr": "4.2.0",
     "vite-tsconfig-paths": "5.0.1",
     "vitest": "2.1.3",
-    "vitest-sonar-reporter": "2.0.0",
-    "lit-html": "3.2.1"
+    "vitest-sonar-reporter": "2.0.0"
   },
   "prettier": {
     "singleQuote": true

src/actions/constants.ts

@@ -14,5 +14,3 @@ export const REQUEST_EXPORTS = 'REQUEST_EXPORTS';
 export const RECEIVE_EXPORTS = 'RECEIVE_EXPORTS';
 export const RECEIVE_EXPORT = 'RECEIVE_EXPORT';
 export const SET_SAVED_CHANGES = 'SET_SAVED_CHANGES';
-export const RECEIVE_STOP_PLACES = 'RECEIVE_STOP_PLACES';
-export const RECEIVE_SEARCHED_STOP_PLACES = 'RECEIVE_SEARCHED_STOP_PLACES';

src/components/JourneyPatternEditor/index.tsx

@@ -7,7 +7,7 @@ import { changeElementAtIndex, removeElementByIndex } from 'helpers/arrays';
 import { FlexibleLineType } from 'model/FlexibleLine';
 import JourneyPattern from 'model/JourneyPattern';
 import StopPoint from 'model/StopPoint';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import General from './General';
 import './styles.scss';
@@ -33,6 +33,16 @@ const JourneyPatternEditor = ({
   transportMode,
 }: Props) => {
   const { pointsInSequence, serviceJourneys } = journeyPattern;
+  const journeyPatternRef = useRef<any>({
+    pointsInSequence: [],
+    serviceJourneys: [],
+  });
+
+  useEffect(() => {
+    journeyPatternRef.current = {
+      journeyPattern,
+    };
+  }, [journeyPattern, journeyPatternRef.current]);
 
   const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
   const { formatMessage } = useIntl();
@@ -78,13 +88,37 @@ const JourneyPatternEditor = ({
         pointsInSequence: newPointsInSequence,
         serviceJourneys: newServiceJourneys,
       });
+    },
+    [journeyPattern, onSave, serviceJourneys],
+  );
+
+  const addStopPointForMap = useCallback(
+    (quayRef?: string) => {
+      const newServiceJourneys =
+        journeyPatternRef.current.journeyPattern.serviceJourneys.map(
+          (serviceJourney: ServiceJourney) => ({
+            ...serviceJourney,
+            passingTimes: [...serviceJourney.passingTimes, {}],
+          }),
+        );
+
+      let newPointsInSequence = [
+        ...journeyPatternRef.current.journeyPattern.pointsInSequence,
+        quayRef && quayRef ? { quayRef } : {},
+      ];
+
+      onSave({
+        ...journeyPatternRef.current.journeyPattern,
+        pointsInSequence: newPointsInSequence,
+        serviceJourneys: newServiceJourneys,
+      });
 
       if (sandboxFeatures?.JourneyPatternStopPointMap) {
         // To avoid grey area on the map once the container gets bigger in the height:
         window.dispatchEvent(new Event('resize'));
       }
     },
-    [journeyPattern, onSave, serviceJourneys],
+    [journeyPatternRef],
   );
 
   const initDefaultJourneyPattern = useCallback(() => {
@@ -142,7 +176,11 @@ const JourneyPatternEditor = ({
           spoilPristine={spoilPristine}
           updateStopPoint={updateStopPoint}
           deleteStopPoint={deleteStopPoint}
-          addStopPoint={addStopPoint}
+          addStopPoint={
+            sandboxFeatures?.JourneyPatternStopPointMap
+              ? addStopPointForMap
+              : addStopPoint
+          }
           onPointsInSequenceChange={onPointsInSequenceChange}
           transportMode={transportMode}
           initDefaultJourneyPattern={initDefaultJourneyPattern}

src/components/StopPointsEditor/Generic/GenericStopPointsEditor.tsx

@@ -5,7 +5,6 @@ import StopPoint from 'model/StopPoint';
 import { useIntl } from 'react-intl';
 import { StopPointsEditorProps } from '..';
 import { GenericStopPointEditor } from './GenericStopPointEditor';
-import { JourneyPatternStopPointMap } from '../../../ext/JourneyPatternStopPointMap/JourneyPatternStopPointMap';
 import SandboxFeature from '../../../ext/SandboxFeature';
 import { useConfig } from '../../../config/ConfigContext';
 import { SmallAlertBox } from '@entur/alert';