Merge pull request #72 from tsdataclinic/api-route-filter

re-enable route filtering client side, add requisite API endpoint

app/backend/main.py

@@ -1,7 +1,8 @@
 from enum import Enum
-from fastapi import FastAPI, HTTPException, Response
+from fastapi import FastAPI, HTTPException, Response, Query
 from fastapi.middleware.cors import CORSMiddleware
 from psycopg2 import pool
+from typing import Union, List
 from dotenv import load_dotenv
 import os
 
@@ -108,6 +109,36 @@ async def get_route_summary(city: str, route: str):
   output["count"] = sum(output["flood_risk_category"])
   return output
 
+@app.get("/stops-on-route")
+async def stops_on_route(cities: Union[List[str], None] = Query(default=None), routes: Union[List[str], None] = Query(default=None)):
+  connection = app.state.db_pool.getconn()
+  cursor = connection.cursor()
+
+  stops_query = f"""
+    SELECT
+      stop_id,
+      routes_serviced
+    FROM public.stop_features 
+    WHERE
+      '{routes[0]}'::text = ANY(string_to_array(routes_serviced, ','))
+      AND 
+      '{cities[0]}' = city
+  """
+
+  for i in range(1, len(cities)):
+    stops_query += f"""
+      OR ('{routes[i]}'::text = ANY(string_to_array(routes_serviced, ',')) AND '{cities[i]}' = city)
+    """
+
+  cursor.execute(stops_query)
+  routes_result = cursor.fetchall()
+  stops_result = [row[0] for row in routes_result]
+
+
+  cursor.close()
+  app.state.db_pool.putconn(connection)
+  return stops_result
+
 @app.get("/available-routes")
 async def get_all_available_routes():
   connection = app.state.db_pool.getconn()
@@ -168,6 +199,8 @@ async def get_all_cities():
     GROUP BY city
   """
 
+        SELECT
+            city,
   cursor.execute(city_query)
   cities = [{
     'city': r[0],

app/src/components/ContextPane.tsx

@@ -143,8 +143,8 @@ function ContextPane({
         </div>
         <hr />
         <div className="text-lg flex justify-between">
-          <b>Transit Lines</b>
-          {/* <button onClick={() => setSelectedRoutes([])}>Reset</button> */}
+          <b>Filter Transit Lines</b>
+          <button onClick={() => setSelectedRoutes([])}>Reset</button>
         </div>
         {selectedRoutes.length > 0 ? (
           <div className="grid grid-cols-4 px-3 gap-1">
@@ -199,7 +199,9 @@ function ContextPane({
                                       }
                                       setSelectedRoutes(newRoutes);
                                     }}
-                                    disabled={true}
+                                    disabled={selectedRoutes.length > 1 && !selectedRoutes
+                                      .map(r => r.routeServiced)
+                                      .includes(route_serviced)}
                                     checked={selectedRoutes
                                       .map(r => r.routeServiced)
                                       .includes(route_serviced)}

app/src/components/MainPage.tsx

@@ -12,6 +12,7 @@ import * as Fathom from "fathom-client";
 import { Cities } from '../libs/cities';
 import { useAvailableCities } from '../hooks/useAvailableCities';
 import { useAvailableRoutes } from '../hooks/useAvailableRoutes';
+import { useRemoteRouteFilter } from '../hooks/useRemoteRouteFilter';
 import usePrevious from '../hooks/usePrevious';
 import { useRemoteRouteSummary } from '../hooks/useRemoteRouteSummary';
 import Modal from './ui/Modal';
@@ -169,6 +170,7 @@ export default function MainPage(): JSX.Element {
 
   const [layers, setLayers] = useState(AVAILABLE_LAYERS);
   let remoteLayers = useRemoteLayers(layers, selectedCity);
+  let {data: remoteSelectedRoutes, status: remoteRouteFilterStatus } = useRemoteRouteFilter(selectedRoutes);
   let {data: routeSummaryNew, status} = useRemoteRouteSummary(detailedRoutes.city, detailedRoutes.routeServiced);
 
   let sourceLayerConfigs = useSourceLayerConfigs(
@@ -196,23 +198,13 @@ export default function MainPage(): JSX.Element {
             ]
           ]),
 
-        ...(selectedRoutes.length > 0
+        ...(selectedRoutes.length > 0 && remoteRouteFilterStatus === 'success'
           ? [
               [
-                'any',
-                ...selectedRoutes.map(selectedRoute => [
-                  'all',
-                  ['==', ['get', 'city'], selectedRoute.city],
-                  ['==', ['get', 'route_type'], selectedRoute.routeType],
-                  // ['in'] expression doesn't work properly in a comma-separated list, so used 'index-of' instead
-                  [
-                    'in',
-                    selectedRoute.routeServiced,
-                    ['get', 'routes_serviced'],
-                  ],
-                  // ['>=', ['index-of', selectedRoute.routeServiced, ['get', 'routes_serviced']], 0],
-                ]),
-              ],
+                "in",
+                ["get", "stop_id"],
+                ["literal", remoteSelectedRoutes]
+              ]
             ]
           : []),
       ],

app/src/hooks/useRemoteRouteFilter.ts

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { SelectedRoute } from "../components/MainPage";
+
+const BACKEND_URI = process.env.REACT_APP_PROD_BACKEND_URI ?? process.env.REACT_APP_DEV_BACKEND_URI;
+
+export const useRemoteRouteFilter = (selectedRoutes: Array<SelectedRoute>) : { data: string[] , status: string}  => {
+    const shouldEnableQuery = selectedRoutes.length > 0;
+    const result = useQuery({
+        queryKey: [`routeFilter-${JSON.stringify(selectedRoutes)}`],
+        queryFn: async () => {
+            let stopsOnRouteURL = new URL(`${BACKEND_URI}/stops-on-route`);
+
+            const params = new URLSearchParams();
+            selectedRoutes.forEach((route) => {
+                params.append('cities', route.city); 
+                params.append('routes', route.routeServiced);
+            });
+
+            stopsOnRouteURL.search = params.toString();
+
+            const response = await fetch(stopsOnRouteURL);
+            const data = await response.json();
+            return data;
+        },
+        staleTime: 1000 * 60 * 60, // one hour,
+        enabled: shouldEnableQuery,
+    });
+    return { data: result.data , status: result.status};
+};
+