From 96c33a2434cf7fbfec4f5924adb83617381ad1eb Mon Sep 17 00:00:00 2001
From: Zaid Abdulameer <zabdulam@uwaterloo.ca>
Date: Tue, 16 Jun 2026 22:09:31 -0400
Subject: [PATCH] feat: add transport type filter toggle (All/Buses/LRT) on the
 map

Add a segmented button group at the top-left of the map that filters
vehicles by transport type. The filter affects vehicle markers on the
map, the sidebar vehicle count, and the route list vehicle counts.
When the LRT filter is active but no LRT vehicles exist, a specific
message is shown instead of the generic no-vehicles message.

Closes #90
---
 frontend/src/App.tsx                       | 39 ++++++++++++++++++----
 frontend/src/components/RouteListPanel.tsx |  5 +++
 frontend/src/components/Sidebar.tsx        | 11 ++++++
 3 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 30092d2..1b276c0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { apiPost } from "./api/client";
 import MapView from "./components/MapView";
@@ -30,6 +30,7 @@ export default function App() {
   const positionsQuery = useVehiclePositions();
 
   const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [transportFilter, setTransportFilter] = useState<"all" | "bus" | "lrt">("all");
   const [selectedRouteId, setSelectedRouteId] = useState<string | null>(null);
   const [mapCenter, setMapCenter] = useState<[number, number] | null>(null);
   const [selectedStopId, setSelectedStopId] = useState<string | null>(null);
@@ -73,22 +74,31 @@ export default function App() {
   }, [queryClient]);
 
   const routes = routesQuery.data ?? [];
-  const positions = positionsQuery.data?.positions ?? [];
   const cacheStatus: CacheStatus | undefined = positionsQuery.data?.cacheStatus;
 
+  const filteredPositions = useMemo(() => {
+    const allPositions = positionsQuery.data?.positions ?? [];
+    if (transportFilter === "all") return allPositions;
+    return allPositions.filter((p) => p.transportType === transportFilter);
+  }, [positionsQuery.data, transportFilter]);
+
   const loading = routesQuery.isLoading || positionsQuery.isLoading;
   const error = routesQuery.error ?? positionsQuery.error;
   const stale = !loading && cacheStatus?.stale;
-  const hasVehicles = positions.length > 0;
+  const hasVehicles = filteredPositions.length > 0;
   const hasRoutes = routes.length > 0;
   const showNoVehiclesMessage = !loading && !error && hasRoutes && !hasVehicles && !stale;
+  const noVehiclesMessage =
+    transportFilter === "lrt"
+      ? "No LRT vehicles currently active."
+      : "No buses currently running on the tracked routes.";
 
   return (
     <div className="flex h-screen">
       {/* Sidebar */}
       <Sidebar
         routes={routes}
-        positions={positions}
+        positions={filteredPositions}
         loading={loading}
         onSelectRoute={setSelectedRouteId}
         selectedRouteId={selectedRouteId}
@@ -110,6 +120,23 @@ export default function App() {
 
       {/* Main Content */}
       <div className="flex-1 relative min-w-0 lg:ml-72">
+        {/* Transport filter toggle */}
+        <div className="absolute top-3 left-3 z-20 flex rounded-full bg-white/80 shadow">
+          {(["all", "bus", "lrt"] as const).map((mode) => (
+            <button
+              key={mode}
+              onClick={() => setTransportFilter(mode)}
+              className={`px-3 py-1.5 text-xs font-medium rounded-full transition-colors ${
+                transportFilter === mode
+                  ? "bg-blue-600 text-white shadow-sm"
+                  : "text-gray-600 hover:text-gray-900"
+              }`}
+            >
+              {mode === "all" ? "All" : mode === "bus" ? "Buses" : "LRT"}
+            </button>
+          ))}
+        </div>
+
         {/* Refresh button */}
         <button
           onClick={handleRefresh}
@@ -183,13 +210,13 @@ export default function App() {
                         d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                       />
                     </svg>
-                    <span>No buses currently running on the tracked routes.</span>
+                    <span>{noVehiclesMessage}</span>
                   </p>
                 </div>
               </div>
             )}
             <MapView
-              positions={positions}
+              positions={filteredPositions}
               routes={routes}
               selectedRouteId={selectedRouteId}
               onSelectRoute={setSelectedRouteId}
diff --git a/frontend/src/components/RouteListPanel.tsx b/frontend/src/components/RouteListPanel.tsx
index 661eae4..a41febf 100644
--- a/frontend/src/components/RouteListPanel.tsx
+++ b/frontend/src/components/RouteListPanel.tsx
@@ -5,12 +5,14 @@ interface RouteListPanelProps {
   routes: Route[];
   selectedRouteId: string | null;
   onSelectRoute: (routeId: string | null) => void;
+  vehicleCountsByRoute: Record<string, number>;
 }
 
 export default function RouteListPanel({
   routes,
   selectedRouteId,
   onSelectRoute,
+  vehicleCountsByRoute,
 }: RouteListPanelProps) {
   const [search, setSearch] = useState("");
 
@@ -65,6 +67,9 @@ export default function RouteListPanel({
                   {route.longName && (
                     <span className="text-gray-500 truncate">{route.longName}</span>
                   )}
+                  <span className="ml-auto text-xs text-gray-400 tabular-nums">
+                    {vehicleCountsByRoute[route.id] ?? 0}
+                  </span>
                 </button>
               );
             })}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 7b6504d..2cf5363 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -39,6 +39,16 @@ export default function Sidebar({
 
   const [activeTab, setActiveTab] = useState<Tab>("stops");
 
+  const vehicleCountsByRoute = useMemo(() => {
+    const counts: Record<string, number> = {};
+    positions.forEach((p) => {
+      if (p.routeId) {
+        counts[p.routeId] = (counts[p.routeId] ?? 0) + 1;
+      }
+    });
+    return counts;
+  }, [positions]);
+
   const selectedVehicleRoute = useMemo(() => {
     if (!selectedVehicleId) return undefined;
     const vehicle = positions.find((p) => p.id === selectedVehicleId);
@@ -158,6 +168,7 @@ export default function Sidebar({
               routes={routes}
               selectedRouteId={selectedRouteId}
               onSelectRoute={onSelectRoute}
+              vehicleCountsByRoute={vehicleCountsByRoute}
             />
           ) : (
             <AlertsPanel alerts={activeAlerts} isLoading={alertsLoading} />