🐛 Old stops still displayed on map once the stop search narrowed

frontend/src/stopsSearchMenu.tsx

@@ -407,6 +407,52 @@ const StopsPanels: ParentComponent<{ maxStopsPerPanel: number }> = (props) => {
 	);
 }
 
+
+const StopPopup: ParentComponent<{ stop: Stop, show: boolean }> = (props) => {
+	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
+	if (businessDataStore === undefined)
+		return <div />;
+
+	const { getLine, getStopDestinations } = businessDataStore;
+
+	let popupDiv: HTMLDivElement | undefined = undefined;
+
+	const getDestinations = async (stop: Stop): Promise<{ lineId: string, destinations: string[] }[]> => {
+		let ret = [];
+
+		if (stop !== undefined) {
+			const result = await getStopDestinations(stop.id);
+			for (const [lineId, destinations] of Object.entries(result)) {
+				const line = await getLine(lineId);
+				const linePicto = renderLinePicto(line);
+				ret.push({ lineId: linePicto, destinations: destinations });
+			}
+		}
+
+		return ret;
+	}
+	const [destinations] = createResource(() => props.stop, getDestinations);
+
+	return (
+		<div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
+			<div class="header">{props.stop?.name}</div>
+			<div class="body">
+				<For each={destinations()}>
+					{(dst) => {
+						return <div class='line'>
+							{dst.lineId}
+							<div class="name">
+								<ScrollingText height={10} width={130} content={dst.destinations.join('/')} />
+							</div>
+						</div>;
+					}}
+				</For>
+			</div>
+		</div >
+	);
+}
+
+
 // TODO: Use boolean to set MapStop selected
 const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (props) => {
 	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
@@ -482,52 +528,7 @@ const MapStop: VoidComponent<{ stop: Stop, selected: Stop | undefined }> = (prop
 		setMapFeature(props.stop.id, feature);
 	});
 
-	<For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>
+	return <For each={props.stop.stops}>{stop => <MapStop stop={stop} selected={props.selected} />}</For>;
-}
-
-
-const StopPopup: ParentComponent<{ stop: Stop, show: boolean }> = (props) => {
-	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
-	if (businessDataStore === undefined)
-		return <div />;
-
-	const { getLine, getStopDestinations } = businessDataStore;
-
-	let popupDiv: HTMLDivElement | undefined = undefined;
-
-	const getDestinations = async (stop: Stop): Promise<{ lineId: string, destinations: string[] }[]> => {
-		let ret = [];
-
-		if (stop !== undefined) {
-			const result = await getStopDestinations(stop.id);
-			for (const [lineId, destinations] of Object.entries(result)) {
-				const line = await getLine(lineId);
-				const linePicto = renderLinePicto(line);
-				ret.push({ lineId: linePicto, destinations: destinations });
-			}
-		}
-
-		return ret;
-	}
-	const [destinations] = createResource(() => props.stop, getDestinations);
-
-	return (
-		<div ref={popupDiv} classList={{ "popup": true, "displayed": props.show }}>
-			<div class="header">{props.stop?.name}</div>
-			<div class="body">
-				<For each={destinations()}>
-					{(dst) => {
-						return <div class='line'>
-							{dst.lineId}
-							<div class="name">
-								<ScrollingText height={10} width={130} content={dst.destinations.join('/')} />
-							</div>
-						</div>;
-					}}
-				</For>
-			</div>
-		</div >
-	);
 }
 
 
@@ -601,9 +602,7 @@ const Map: ParentComponent<{}> = () => {
 
 	const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
 		const stopId: number = feature.getId();
-
 		const stop = getStop(stopId);
-
 		// TODO: Handle StopArea (use center given by the backend)
 		if (stop?.lat !== undefined && stop?.lon !== undefined) {
 			setSelectedMapStop(stop);
@@ -613,7 +612,8 @@ const Map: ParentComponent<{}> = () => {
 					duration: 1000
 				},
 				// Display the popup once the animation finished
-				() => setPopupDisplayed(true));
+				() => setPopupDisplayed(true)
+			);
 		}
 	}
 
@@ -621,23 +621,32 @@ const Map: ParentComponent<{}> = () => {
 
 	// Filling the map with stops shape
 	createEffect(() => {
-		const features = getAllMapFeatures();
+		const stops = getFoundStops();
-
+		const foundStopIds = new Set();
-		for (const [stopId, feature] of Object.entries(features)) {
+		for (const foundStop of stops) {
-			if (!(stopId in displayedFeatures)) {
+			foundStopIds.add(foundStop.id);
-				const stop = getStop(parseInt(stopId));
+			foundStop.stops.forEach(s => foundStopIds.add(s.id));
-				stopVectorSource.addFeature(feature);
-				displayedFeatures[stopId] = feature;
-			}
 		}
 
-		for (const [stopId, feature] of Object.entries(displayedFeatures)) {
+		for (const [stopIdStr, feature] of Object.entries(displayedFeatures)) {
-			if (!(stopId in features)) {
+			const stopId = parseInt(stopIdStr);
+			if (!foundStopIds.has(stopId)) {
+				console.log(`Remove feature for ${stopId}`);
 				stopVectorSource.removeFeature(feature);
 				delete displayedFeatures[stopId];
 			}
 		}
 
+		const features = getAllMapFeatures();
+		for (const [stopIdStr, feature] of Object.entries(features)) {
+			const stopId = parseInt(stopIdStr);
+			if (foundStopIds.has(stopId) && !(stopId in displayedFeatures)) {
+				console.log(`Add feature for ${stopId}`);
+				stopVectorSource.addFeature(feature);
+				displayedFeatures[stopId] = feature;
+			}
+		}
+
 		const extend = stopVectorSource.getExtent();
 		if (map !== undefined && !isEmptyExtend(extend)) {
 			map.getView().fit(extend, { duration: fitDurationMs, padding: fitPointsPadding });