Fetch segment speed data from API

common/api/hooks/tripmetrics.ts

@@ -1,7 +1,14 @@
 import { useQuery } from '@tanstack/react-query';
-import type { FetchDeliveredTripMetricsOptions } from '../../types/api';
-import { FIVE_MINUTES } from '../../constants/time';
-import { fetchActualTripsByLine, fetchLandingTripMetrics } from '../tripmetrics';
+import type {
+  FetchDeliveredTripMetricsOptions,
+  FetchSegmentTripMetricsOptions,
+} from '../../types/api';
+import { FIVE_MINUTES, THIRTY_MINUTES } from '../../constants/time';
+import {
+  fetchActualTripsByLine,
+  fetchLandingTripMetrics,
+  fetchSegmentTripMetrics,
+} from '../tripmetrics';
 
 export const useDeliveredTripMetrics = (
   options: FetchDeliveredTripMetricsOptions,
@@ -18,3 +25,15 @@ export const useDeliveredTripMetrics = (
 export const useTripMetricsForLanding = () => {
   return useQuery({ queryKey: ['landingTrips'], queryFn: () => fetchLandingTripMetrics() });
 };
+
+export const useSegmentTripMetricsData = (
+  options: FetchSegmentTripMetricsOptions,
+  enabled: boolean = true
+) => {
+  return useQuery({
+    queryKey: ['segmentTripMetrics', options],
+    queryFn: () => fetchSegmentTripMetrics(options),
+    enabled: enabled && !!options.date,
+    staleTime: THIRTY_MINUTES,
+  });
+};

common/api/tripmetrics.ts

@@ -1,4 +1,8 @@
-import type { FetchDeliveredTripMetricsOptions } from '../types/api';
+import type { SpeedPairData } from '../../modules/speed/map/segment';
+import type {
+  FetchDeliveredTripMetricsOptions,
+  FetchSegmentTripMetricsOptions,
+} from '../types/api';
 import { FetchDeliveredTripMetricsParams } from '../types/api';
 import type { DeliveredTripMetrics } from '../types/dataPoints';
 import type { Line } from '../types/lines';
@@ -20,3 +24,15 @@ export const fetchLandingTripMetrics = (): Promise<{ [key in Line]: DeliveredTri
   const tripMetricsURL = new URL(`/static/landing/trip_metrics.json`, window.location.origin);
   return fetch(tripMetricsURL.toString()).then((resp) => resp.json());
 };
+
+export const fetchSegmentTripMetrics = async (
+  options: FetchSegmentTripMetricsOptions
+): Promise<SpeedPairData[]> => {
+  if (!options.line) return [];
+
+  return await apiFetch({
+    path: '/api/tripmetrics/segment',
+    options,
+    errorMessage: 'Failed to fetch segment trip metrics',
+  });
+};

common/types/api.ts

@@ -1,6 +1,6 @@
 import type { AggType } from '../../modules/speed/constants/speeds';
 import type { ServiceHours, SpeedRestriction } from './dataPoints';
-import type { Line, LineRouteId } from './lines';
+import type { Line, LineRouteId, LineShort } from './lines';
 
 export enum QueryNameKeys {
   traveltimes = 'traveltimes',
@@ -44,6 +44,11 @@ export type FetchSpeedsOptions = {
   line?: Line;
 };
 
+export type FetchSegmentTripMetricsOptions = {
+  date?: string;
+  line: LineShort;
+};
+
 export type FetchDeliveredTripMetricsOptions = {
   agg: AggType;
   start_date?: string;

modules/speed/map/SegmentSpeedMap.tsx

@@ -12,8 +12,8 @@ import { getSegmentLabelOverrides } from '../../slowzones/map/segment';
 import type { SlowZonesLineName } from '../../slowzones/types';
 import { getStationDistance } from '../../../common/utils/stations';
 import { convertSecondsToMph } from '../../landing/utils';
+import { useSegmentTripMetricsData } from '../../../common/api/hooks/tripmetrics';
 import { segmentStationPairs } from './segment';
-import { TEST_DATA } from './constants';
 import { SpeedSegmentLabel } from './SegmentSpeedLabel';
 import { SegmentSpeedTooltip } from './SegmentSpeedTooltip';
 
@@ -49,16 +49,24 @@ export const SegmentSpeedMap: React.FC<SegmentSpeedMapProps> = ({ lineName, dire
   const { query } = useDelimitatedRoute();
   const { endDate } = query;
 
-  // TODO: Pull from dynamo calculated hourly in data-ingestion
-  const speedData = TEST_DATA.map((data) => {
-    const intervalDistance = getStationDistance(data.from_id, data.to_id);
-
-    return {
-      ...data,
-      speed: convertSecondsToMph(data.travel_time, intervalDistance),
-    };
+  const { data: segmentData } = useSegmentTripMetricsData({
+    date: endDate,
+    line: lineName,
   });
 
+  const speedData = useMemo(
+    () =>
+      segmentData?.map((data) => {
+        const intervalDistance = getStationDistance(data.from_id, data.to_id);
+
+        return {
+          ...data,
+          speed: convertSecondsToMph(data.travel_time, intervalDistance),
+        };
+      }) ?? [],
+    [segmentData]
+  );
+
   const { segments } = useMemo(
     () =>
       segmentStationPairs({