Fix stop visibility issue in route view on map

Now the stops that are on the route will not be visible if the route is not visible.
Previously the stops would be visible on map even when user filtered out the route and stops.

Author: patricvincit

ui/src/components/map/Map.tsx

@@ -221,6 +221,7 @@ export const MapComponent: ForwardRefRenderFunction<
         stops={stops}
         terminals={terminals}
         displayedRouteIds={displayedRouteIds}
+        showRoute={showRoute}
         ref={editorRefs.stopsRef}
       />
       <StopAreas areas={areas} ref={editorRefs.stopAreasRef} />

ui/src/components/map/stops/Stops.tsx

@@ -84,12 +84,13 @@ function useFilteredStops(
 type StopsProps = {
   readonly areas: ReadonlyArray<MapStopArea>;
   readonly displayedRouteIds: ReadonlyArray<string>;
+  readonly showRoute: boolean;
   readonly stops: ReadonlyArray<MapStop>;
   readonly terminals: ReadonlyArray<MapTerminal>;
 };
 
 export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
-  { areas, displayedRouteIds, stops, terminals },
+  { areas, displayedRouteIds, showRoute, stops, terminals },
   ref,
 ) => {
   const [mapViewState, setMapViewState] = useMapViewState();
@@ -117,8 +118,10 @@ export const StopsImpl: ForwardRefRenderFunction<StopsRef, StopsProps> = (
 
   const { getStopVehicleMode, getStopHighlighted, getStopShouldBeGray } =
     useMapStops(displayedRouteIds);
-  const filterStopsByVehicleMode =
-    useFilterStopsByVehicleMode(getStopVehicleMode);
+  const filterStopsByVehicleMode = useFilterStopsByVehicleMode(
+    getStopVehicleMode,
+    showRoute,
+  );
 
   const { setLoadingState: setFetchStopsLoadingState } = useLoader(
     Operation.FetchStops,

ui/src/components/map/stops/hooks/useFilterStopsByVehicleMode.ts

@@ -10,6 +10,7 @@ export function useFilterStopsByVehicleMode(
   getStopVehicleMode: (
     stop: MapStop,
   ) => ReusableComponentsVehicleModeEnum | undefined,
+  showRoute: boolean,
 ) {
   const { stopFilters } = useAppSelector(selectMapFilter);
   const { visibleRouteStopLabels } = useVisibleRouteStops();
@@ -18,9 +19,8 @@ export function useFilterStopsByVehicleMode(
     (stops: ReadonlyArray<MapStop>): ReadonlyArray<MapStop> =>
       stops.filter((stop) => {
         const vehicleMode = parseVehicleMode(getStopVehicleMode(stop));
-        const isStopInVisibleRoutes = visibleRouteStopLabels.includes(
-          stop.label,
-        );
+        const isStopInVisibleRoutes =
+          showRoute && visibleRouteStopLabels.includes(stop.label);
 
         if (vehicleMode === ReusableComponentsVehicleModeEnum.Bus) {
           return (
@@ -40,6 +40,6 @@ export function useFilterStopsByVehicleMode(
           isStopInVisibleRoutes
         );
       }),
-    [getStopVehicleMode, stopFilters, visibleRouteStopLabels],
+    [getStopVehicleMode, showRoute, stopFilters, visibleRouteStopLabels],
   );
 }