Using full line route ids

common/components/inputs/BranchSelector.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ButtonGroup } from '../general/ButtonGroup';
+import type { LineRouteId } from '../../types/lines';
+
+interface BranchSelectorProps {
+  routeId: LineRouteId;
+  setRouteId: (routeId: LineRouteId) => void;
+}
+
+enum GreenLineBranchOptions {
+  'Green-B' = 'B Branch',
+  'Green-C' = 'C Branch',
+  'Green-D' = 'D Branch',
+  'Green-E' = 'E Branch',
+}
+
+export const BranchSelector: React.FunctionComponent<BranchSelectorProps> = ({
+  routeId,
+  setRouteId,
+}) => {
+  const selectedIndex = Object.keys(GreenLineBranchOptions).findIndex((route) => route === routeId);
+
+  return (
+    <div className={'flex w-full justify-center pt-2'}>
+      <ButtonGroup
+        selectedIndex={selectedIndex}
+        pressFunction={setRouteId}
+        options={Object.entries(GreenLineBranchOptions)}
+        additionalDivClass="md:w-auto"
+        additionalButtonClass="md:w-fit"
+      />
+    </div>
+  );
+};

common/types/api.ts

@@ -54,7 +54,7 @@ export type FetchDeliveredTripMetricsOptions = {
 export type FetchAlertDelaysByLineOptions = {
   start_date?: string;
   end_date?: string;
-  line?: Line;
+  line?: LineRouteId;
 };
 
 export enum FetchDeliveredTripMetricsParams {

modules/delays/DelaysDetails.tsx

@@ -13,6 +13,9 @@ import { Widget } from '../../common/components/widgets';
 import { TotalDelayGraph } from './charts/TotalDelayGraph';
 import { DelayBreakdownGraph } from './charts/DelayBreakdownGraph';
 import { DelayByCategoryGraph } from './charts/DelayByCategoryGraph';
+import { BranchSelector } from '../../common/components/inputs/BranchSelector';
+import { lineToDefaultRouteId } from '../predictions/utils/utils';
+import { LineRouteId } from '../../common/types/lines';
 
 dayjs.extend(utc);
 
@@ -22,12 +25,17 @@ export function DelaysDetails() {
     query: { startDate, endDate },
   } = useDelimitatedRoute();
 
+  const [routeId, setRouteId] = React.useState<LineRouteId>(lineToDefaultRouteId(line));
+  const greenBranchToggle = React.useMemo(() => {
+    return line === 'line-green' && <BranchSelector routeId={routeId} setRouteId={setRouteId} />;
+  }, [line, routeId]);
+
   const enabled = Boolean(startDate && endDate && line);
   const alertDelays = useAlertDelays(
     {
       start_date: startDate,
       end_date: endDate,
-      line,
+      line: routeId,
     },
     enabled
   );
@@ -47,6 +55,7 @@ export function DelaysDetails() {
               <ChartPlaceHolder query={alertDelays} />
             </div>
           )}
+          {greenBranchToggle}
         </Widget>
         <Widget title="Delay Time by Reason" ready={[alertDelays]}>
           {delaysReady ? (
@@ -56,6 +65,7 @@ export function DelaysDetails() {
               <ChartPlaceHolder query={alertDelays} />
             </div>
           )}
+          {greenBranchToggle}
         </Widget>
         <Widget title="Delay Time by Reason" ready={[alertDelays]}>
           {delaysReady ? (
@@ -65,6 +75,7 @@ export function DelaysDetails() {
               <ChartPlaceHolder query={alertDelays} />
             </div>
           )}
+          {greenBranchToggle}
         </Widget>
       </ChartPageDiv>
     </PageWrapper>

modules/predictions/PredictionsDetails.tsx

@@ -11,22 +11,15 @@ import { PageWrapper } from '../../common/layouts/PageWrapper';
 import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { usePredictionData } from '../../common/api/hooks/predictions';
 import type { LineRouteId } from '../../common/types/lines';
-import { ButtonGroup } from '../../common/components/general/ButtonGroup';
 import { WidgetDiv } from '../../common/components/widgets/WidgetDiv';
 import { Accordion } from '../../common/components/accordion/Accordion';
+import { BranchSelector } from '../../common/components/inputs/BranchSelector';
 import { lineToDefaultRouteId } from './utils/utils';
 import { PredictionsGraphWrapper } from './charts/PredictionsGraphWrapper';
 import { PredictionsBinsGraphWrapper } from './charts/PredictionsBinsGraphWrapper';
 
 dayjs.extend(utc);
 
-enum GreenLineBranchOptions {
-  'Green-B' = 'B Branch',
-  'Green-C' = 'C Branch',
-  'Green-D' = 'D Branch',
-  'Green-E' = 'E Branch',
-}
-
 export function PredictionsDetails() {
   const {
     line,
@@ -38,23 +31,10 @@ export function PredictionsDetails() {
   React.useEffect(() => {
     setRouteId(lineToDefaultRouteId(line));
   }, [line]);
-  const selectedIndex = Object.keys(GreenLineBranchOptions).findIndex((route) => route === routeId);
 
   const greenBranchToggle = React.useMemo(() => {
-    return (
-      line === 'line-green' && (
-        <div className={'flex w-full justify-center pt-2'}>
-          <ButtonGroup
-            selectedIndex={selectedIndex}
-            pressFunction={setRouteId}
-            options={Object.entries(GreenLineBranchOptions)}
-            additionalDivClass="md:w-auto"
-            additionalButtonClass="md:w-fit"
-          />
-        </div>
-      )
-    );
-  }, [line, selectedIndex]);
+    return line === 'line-green' && <BranchSelector routeId={routeId} setRouteId={setRouteId} />;
+  }, [line, routeId]);
 
   const predictions = usePredictionData(
     {

server/chalicelib/delays.py

@@ -27,7 +27,15 @@ def delay_time_by_line(params: AlertDelaysByLineParams):
         start_date = params["start_date"]
         end_date = params["end_date"]
         line = params["line"]
-        if line not in ["line-red", "line-blue", "line-green", "line-orange"]:
+        if line not in [
+            "Red",
+            "Blue",
+            "Orange",
+            "Green-B",
+            "Green-C",
+            "Green-D",
+            "Green-E",
+        ]:
             raise BadRequestError("Invalid Line key.")
     except KeyError:
         raise BadRequestError("Missing or invalid parameters.")