From 8658d0461a7e812a1102d122e70e5adb9b0f3be7 Mon Sep 17 00:00:00 2001
From: Vesa Meskanen <vesa.meskanen@cgi.com>
Date: Thu, 13 Jun 2024 10:52:17 +0300
Subject: [PATCH] fix: move expensive pattern geometry filtering and decoding
 away from render code

Stops near you map rendering executes 4 times more often than the code which
creates route lines. Move time consuming computations to effect which updates
the rendered geometry. Also, apply duplicate pattern filtering by pattern id as it
is obviously much simpler than  comparing multi-thousand-point polylines.
---
 app/component/StopsNearYouMapContainer.js |  2 +
 app/component/map/StopsNearYouMap.js      | 50 ++++++++++-------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/app/component/StopsNearYouMapContainer.js b/app/component/StopsNearYouMapContainer.js
index 705f855f9e..9e9f8050f6 100644
--- a/app/component/StopsNearYouMapContainer.js
+++ b/app/component/StopsNearYouMapContainer.js
@@ -77,6 +77,7 @@ const containerComponent = createPaginationContainer(
                   lon
                   name
                   patterns {
+                    id
                     route {
                       gtfsId
                       shortName
@@ -91,6 +92,7 @@ const containerComponent = createPaginationContainer(
                   }
                   stops {
                     patterns {
+                      id
                       route {
                         gtfsId
                         shortName
diff --git a/app/component/map/StopsNearYouMap.js b/app/component/map/StopsNearYouMap.js
index 95647499ce..0d2cc21f53 100644
--- a/app/component/map/StopsNearYouMap.js
+++ b/app/component/map/StopsNearYouMap.js
@@ -166,7 +166,7 @@ function StopsNearYouMap(
 ) {
   const [sortedStopEdges, setSortedStopEdges] = useState([]);
   const [uniqueRealtimeTopics, setUniqueRealtimeTopics] = useState([]);
-  const [routes, setRouteLines] = useState([]);
+  const [routeLines, setRouteLines] = useState([]);
   const [bounds, setBounds] = useState([]);
   const [clientOn, setClientOn] = useState(false);
   const [firstPlan, setFirstPlan] = useState({
@@ -282,8 +282,8 @@ function StopsNearYouMap(
     }
   }, [position, sortedStopEdges]);
 
-  const setRoutes = sortedRoutes => {
-    const routeLines = [];
+  const updateRoutes = sortedRoutes => {
+    let patterns = [];
     const realtimeTopics = [];
     sortedRoutes.forEach(item => {
       const { place } = item.node;
@@ -297,7 +297,7 @@ function StopsNearYouMap(
             shortName: pattern.route.shortName,
             type: pattern.route.type,
           });
-          routeLines.push(pattern);
+          patterns.push(pattern);
         });
       // eslint-disable-next-line no-unused-expressions
       place.stops &&
@@ -310,12 +310,23 @@ function StopsNearYouMap(
               shortName: pattern.route.shortName,
               type: pattern.route.type,
             });
-            routeLines.push(pattern);
+            patterns.push(pattern);
           });
         });
     });
-
-    setRouteLines(routeLines);
+    patterns = uniqBy(patterns, p => p.id);
+    patterns = uniqBy(patterns, p => p.patternGeometry?.points || '');
+    const lines = patterns
+      .filter(p => p.patternGeometry)
+      .map(p => (
+        <Line
+          key={`${p.code}`}
+          opaque
+          geometry={polyline.decode(p.patternGeometry.points)}
+          mode={getRouteMode(p.route)}
+        />
+      ));
+    setRouteLines(lines);
     setUniqueRealtimeTopics(uniqBy(realtimeTopics, route => route.route));
   };
 
@@ -382,12 +393,12 @@ function StopsNearYouMap(
       const stopsAndStations = handleStopsAndStations(sortedEdges);
       handleWalkRoutes(stopsAndStations);
       setSortedStopEdges(sortedEdges);
-      setRoutes(sortedEdges);
+      updateRoutes(sortedEdges);
     }
     if (mode === 'FAVORITE') {
       handleWalkRoutes(handleStopsAndStations(stopsNearYou));
       setSortedStopEdges(stopsNearYou);
-      setRoutes(stopsNearYou);
+      updateRoutes(stopsNearYou);
     }
   }, [stopsNearYou, favouriteIds]);
 
@@ -395,25 +406,8 @@ function StopsNearYouMap(
     return <Loading />;
   }
 
-  let leafletObjs = [];
-  // create route lines
-  if (isTransitMode && Array.isArray(routes)) {
-    const getPattern = pattern =>
-      pattern.patternGeometry ? pattern.patternGeometry.points : '';
-    leafletObjs = uniqBy(routes, getPattern).map(pattern => {
-      if (pattern.patternGeometry) {
-        return (
-          <Line
-            key={`${pattern.code}`}
-            opaque
-            geometry={polyline.decode(pattern.patternGeometry.points)}
-            mode={getRouteMode(pattern.route)}
-          />
-        );
-      }
-      return null;
-    });
-  }
+  const leafletObjs =
+    isTransitMode && Array.isArray(routeLines) ? [...routeLines] : [];
   if (uniqueRealtimeTopics.length > 0) {
     leafletObjs.push(
       <VehicleMarkerContainer