From 0f041745166e837b1d3c4457096cb19492b79e10 Mon Sep 17 00:00:00 2001
From: nocnico <nicolas@syntaxdev.de>
Date: Thu, 22 May 2025 01:48:18 +0200
Subject: [PATCH] fix error in cluster

---
 .../map/_components/MarkerCluster.tsx         | 128 ++++++++++--------
 1 file changed, 68 insertions(+), 60 deletions(-)

diff --git a/apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx b/apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx
index e00dd209..89ff6cd7 100644
--- a/apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx
+++ b/apps/dispatch/app/dispatch/_components/map/_components/MarkerCluster.tsx
@@ -192,56 +192,27 @@ export const MarkerCluster = () => {
 		}[]
 	>([]);
 
-	useEffect(() => {
-		const handleZoom = () => {
-			const zoom = map.getZoom();
-			let newCluster: typeof cluster = [];
-			aircrafts
-				?.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
-				.forEach((aircraft) => {
-					const lat = aircraft.posLat!;
-					const lng = aircraft.posLng!;
+	// Compute clusters based on zoom and data using useMemo
+	const clusters = useMemo(() => {
+		const zoom = map.getZoom();
+		if (zoom >= 8) return [];
+		let newCluster: typeof cluster = [];
+		aircrafts
+			?.filter((a) => checkSimulatorConnected(a.lastHeartbeat))
+			.forEach((aircraft) => {
+				const lat = aircraft.posLat!;
+				const lng = aircraft.posLng!;
 
-					const existingClusterIndex = newCluster.findIndex(
-						(c) => Math.abs(c.lat - lat) < 1 && Math.abs(c.lng - lng) < 1,
-					);
-					const existingCluster = newCluster[existingClusterIndex];
-					if (existingCluster) {
-						newCluster = [...newCluster].map((c, i) => {
-							if (i === existingClusterIndex) {
-								return {
-									...c,
-									aircrafts: [...c.aircrafts, aircraft],
-								};
-							}
-							return c;
-						});
-					} else {
-						newCluster = [
-							...newCluster,
-							{
-								aircrafts: [aircraft],
-								missions: [],
-								lat,
-								lng,
-							},
-						];
-					}
-				});
-			filteredMissions?.forEach((mission) => {
-				const lat = mission.addressLat;
-				const lng = mission.addressLng;
 				const existingClusterIndex = newCluster.findIndex(
 					(c) => Math.abs(c.lat - lat) < 1 && Math.abs(c.lng - lng) < 1,
 				);
 				const existingCluster = newCluster[existingClusterIndex];
-
 				if (existingCluster) {
 					newCluster = [...newCluster].map((c, i) => {
 						if (i === existingClusterIndex) {
 							return {
 								...c,
-								missions: [...c.missions, mission],
+								aircrafts: [...c.aircrafts, aircraft],
 							};
 						}
 						return c;
@@ -250,46 +221,83 @@ export const MarkerCluster = () => {
 					newCluster = [
 						...newCluster,
 						{
-							aircrafts: [],
-							missions: [mission],
+							aircrafts: [aircraft],
+							missions: [],
 							lat,
 							lng,
 						},
 					];
 				}
 			});
+		filteredMissions?.forEach((mission) => {
+			const lat = mission.addressLat;
+			const lng = mission.addressLng;
+			const existingClusterIndex = newCluster.findIndex(
+				(c) => Math.abs(c.lat - lat) < 1 && Math.abs(c.lng - lng) < 1,
+			);
+			const existingCluster = newCluster[existingClusterIndex];
 
-			const clusterWithAvgPos = newCluster.map((c) => {
-				const aircraftPos = c.aircrafts.map((a) => [a.posLat, a.posLng]);
-				const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
-				const allPos = [...aircraftPos, ...missionPos];
+			if (existingCluster) {
+				newCluster = [...newCluster].map((c, i) => {
+					if (i === existingClusterIndex) {
+						return {
+							...c,
+							missions: [...c.missions, mission],
+						};
+					}
+					return c;
+				});
+			} else {
+				newCluster = [
+					...newCluster,
+					{
+						aircrafts: [],
+						missions: [mission],
+						lat,
+						lng,
+					},
+				];
+			}
+		});
 
-				// Calculate the average position of all markers in the cluster
+		const clusterWithAvgPos = newCluster.map((c) => {
+			const aircraftPos = c.aircrafts.map((a) => [a.posLat, a.posLng]);
+			const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
+			const allPos = [...aircraftPos, ...missionPos];
 
-				const avgLat =
-					allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
-				const avgLng =
-					allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
+			const avgLat =
+				allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
+			const avgLng =
+				allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
 
-				return {
-					...c,
-					lat: avgLat,
-					lng: avgLng,
-				};
-			});
+			return {
+				...c,
+				lat: avgLat,
+				lng: avgLng,
+			};
+		});
 
+		return clusterWithAvgPos;
+	}, [aircrafts, filteredMissions, map]);
+
+	// Update clusters on zoom change
+	useEffect(() => {
+		const handleZoom = () => {
+			const zoom = map.getZoom();
 			if (zoom >= 8) {
 				setCluster([]);
 			} else {
-				setCluster(clusterWithAvgPos);
+				setCluster(clusters);
 			}
 		};
-		handleZoom();
 		map.on("zoomend", handleZoom);
+		// Set initial clusters
+		handleZoom();
 		return () => {
 			map.off("zoomend", handleZoom);
 		};
-	}, [map, aircrafts, missions, filteredMissions]);
+	}, [map, clusters]);
+
 	return (
 		<>
 			{cluster.map((c, i) => (