feat: create branch picker element

css/app.css

@@ -7,3 +7,7 @@
 @import "tailwindcss/utilities";
 
 /* This file is for your main application CSS */
+.app-wrapper {
+  height: 100vh;
+  height: 100dvh;
+}

js/components/app.tsx

@@ -83,7 +83,7 @@ const router = createBrowserRouter([
     element: (
       <DataWarningsProvider>
         <AppcuesTrackPage />
-        <div className="flex flex-col h-screen">
+        <div className="flex flex-col app-wrapper">
           <div className="sticky top-0 z-header">
             <Banner />
             <Header />

js/components/ladderPageShared/branchPicker.tsx

@@ -0,0 +1,87 @@
+export type Route = "Red" | "Orange" | "Blue";
+
+const branches = ["Alewife", "Ashmont", "Braintree"] as const;
+export type BranchPickerSelection = (typeof branches)[number];
+
+const defaultBg =
+  "bg-ladder-branch-picker-inactive-bg-dark light:bg-ladder-branch-picker-inactive-bg-light";
+
+const activeText =
+  "text-ladder-branch-picker-active-dot-dark light:text-ladder-branch-picker-active-dot-light";
+
+const branchColors: Pick<
+  Record<Route, Record<BranchPickerSelection, { bg: string; dotText: string }>>,
+  "Red"
+> = {
+  Red: {
+    Alewife: {
+      bg: "bg-ladder-branch-picker-alewife-dot-dark light:bg-ladder-branch-picker-alewife-dot-light",
+      dotText:
+        "text-ladder-branch-picker-alewife-dot-dark light:text-ladder-branch-picker-alewife-dot-light",
+    },
+    Ashmont: {
+      bg: "bg-heavy-rail-ashmont",
+      dotText: "text-heavy-rail-ashmont",
+    },
+    Braintree: {
+      bg: "bg-heavy-rail-braintree",
+      dotText: "text-heavy-rail-braintree",
+    },
+  },
+};
+
+const BranchButton = ({
+  branch,
+  isActive,
+  onClick,
+}: {
+  branch: BranchPickerSelection;
+  isActive: boolean;
+  onClick: () => void;
+}) => {
+  const { bg, dotText } = branchColors.Red[branch];
+  const buttonBg = isActive ? bg : defaultBg;
+  const labelText = isActive ? activeText : "text-white";
+  const dotColor = isActive ? activeText : dotText;
+
+  return (
+    <button
+      className={`flex flex-col justify-center items-center grow ${buttonBg} rounded-t text-center font-semibold h-16 p-4 gap-1`}
+      onClick={onClick}
+    >
+      <div className={labelText} data-testid="branch-label">
+        {branch}
+      </div>
+      <div
+        className={`w-2 min-h-2 rounded-full bg-current ${dotColor}`}
+        data-testid="branch-dot"
+      />
+    </button>
+  );
+};
+
+export const BranchPicker = ({
+  selection,
+  setSelection,
+}: {
+  selection: BranchPickerSelection;
+  setSelection: (selection: BranchPickerSelection) => void;
+}) => {
+  return (
+    <div
+      className="flex justify-between h-14 self-center gap-1 w-full max-w-[371px]"
+      data-testid="branch-picker"
+    >
+      {branches.map((branch) => (
+        <BranchButton
+          key={branch}
+          branch={branch}
+          isActive={selection === branch}
+          onClick={() => {
+            setSelection(branch);
+          }}
+        />
+      ))}
+    </div>
+  );
+};

js/components/ladderPageShared/ladder.tsx

@@ -13,12 +13,13 @@ import { CarId, RouteId } from "../../models/common";
 import { Station } from "../../models/station";
 import { Vehicle } from "../../models/vehicle";
 import { consistsEqual, remapLabel } from "../../util/consist";
+import { BranchPickerSelection } from "./branchPicker";
 import { SideBarSelection } from "./sidebar";
 import { Ladder } from "rail-tech-ui";
 import type { VehicleSelection } from "rail-tech-ui/dist/src/components/ladderPage/types";
 import { RoutePatternId } from "rail-tech-ui/dist/src/models/route";
 import type { TrainLoc } from "rail-tech-ui/dist/src/models/trainLocation";
-import { ReactElement } from "react";
+import { ReactElement, Ref } from "react";
 
 const ROUTE_PATTERN_CONFIG: Readonly<
   Record<RouteId, Record<RoutePatternId, { color: string; letter: string }>>
@@ -64,6 +65,12 @@ export type VehicleWithHeight = {
   heights: TrainHeight;
 };
 
+const branchForLadder = (ladderConfig: LadderConfig): BranchPickerSelection => {
+  if (ladderConfig.some((s) => s.id === "place-asmnl")) return "Ashmont";
+  if (ladderConfig.some((s) => s.id === "place-brntn")) return "Braintree";
+  return "Alewife";
+};
+
 // Adapt Orbit's Station (uses `location`, no `shortName`) to rail-tech-ui's
 // LadderStation shape (`latLng`, requires `shortName`).
 // TODO: After we remove the old ladder, this can be simplified
@@ -98,12 +105,16 @@ export const Ladders = ({
   routeId,
   sideBarSelection,
   setSideBarSelection,
+  setBranchPickerSelection,
   vehicles,
+  ref,
 }: {
   routeId: RouteId;
   sideBarSelection: SideBarSelection | null;
   setSideBarSelection: (selection: SideBarSelection | null) => void;
+  setBranchPickerSelection: (selection: BranchPickerSelection) => void;
   vehicles: Vehicle[];
+  ref?: Ref<HTMLDivElement>;
 }): ReactElement => {
   const stationLists = Stations[routeId];
   const vehiclesByBranch = vehicles.reduce(
@@ -137,6 +148,18 @@ export const Ladders = ({
       ),
     );
     if (match) {
+      // update branch picker to reflect the branch the clicked train is on
+      const matchingStationList = stationLists.find((stations) =>
+        stations.some((station) =>
+          station.stop_ids.some(
+            (stopId) => stopId === match.vehiclePosition.stopId,
+          ),
+        ),
+      );
+      if (matchingStationList) {
+        setBranchPickerSelection(branchForLadder(matchingStationList));
+      }
+
       const sameVehicle =
         sideBarSelection !== null &&
         consistsEqual(
@@ -158,7 +181,11 @@ export const Ladders = ({
     : null;
 
   return (
-    <div className="relative flex w-full h-full justify-start min-[1485px]:justify-center overflow-x-auto snap-x snap-mandatory">
+    <div
+      ref={ref}
+      data-testid="ladders-scroll-container"
+      className="relative flex w-full h-full justify-start min-[1485px]:justify-center overflow-x-auto snap-x snap-mandatory"
+    >
       {Array.from(vehiclesByBranch.entries()).map(
         ([stationList, branchVehicles], index) => (
           <div

js/components/ladderPageShared/ladderPage.tsx

@@ -5,10 +5,11 @@ import { RouteId } from "../../models/common";
 import { Vehicle } from "../../models/vehicle";
 import { trackSideBarOpened } from "../../telemetry/trackingEvents";
 import { className } from "../../util/dom";
+import { BranchPicker, BranchPickerSelection } from "./branchPicker";
 import { Ladders } from "./ladder";
 import { SearchBar, VehicleSearchMatch } from "./search";
 import { SideBar, SideBarSelection } from "./sidebar";
-import { ReactElement, useCallback, useEffect, useState } from "react";
+import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
 
 // Without this: each render on L17 will create a new array, causing the useEffect on L49 to run every time
 const NO_VEHICLES: Vehicle[] = [];
@@ -17,7 +18,11 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
   const vehicles = useVehicles() ?? NO_VEHICLES;
   const [sideBarSelection, setSideBarSelection] =
     useState<SideBarSelection | null>(null);
+  const [branchPickerSelection, setBranchPickerSelection] =
+    useState<BranchPickerSelection>("Ashmont");
   const [searchQuery, setSearchQuery] = useState("");
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const laddersRef = useRef<HTMLDivElement>(null);
 
   const openSideBar = useCallback(
     (selection: SideBarSelection | null) => {
@@ -52,6 +57,19 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
     };
   }, [onEscape]);
 
+  useEffect(() => {
+    const el = laddersRef.current;
+    if (!el) return;
+    const check = () => {
+      setIsOverflowing(el.scrollWidth > el.clientWidth);
+    };
+    check();
+    window.addEventListener("resize", check);
+    return () => {
+      window.removeEventListener("resize", check);
+    };
+  }, []);
+
   const onSearchMatch = useCallback(
     (match: VehicleSearchMatch): boolean => {
       openSideBar({ vehicle: match.vehicle, searchedCar: match.matchedCar });
@@ -89,31 +107,44 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
   );
 
   return (
-    <main className="bg-glides-blue-700 flex overflow-y-auto overflow-x-hidden justify-center">
-      {sideBarSelection !== null ?
-        <SideBar selection={sideBarSelection} close={close} />
-      : null}
-      <div
-        className={className([
-          "relative flex transition-all duration-300 ease-in-out overflow-x-auto w-full",
-        ])}
-        // Close sidebar when clicking anywhere in the background
-        onClick={close}
-      >
-        <SearchBar
-          vehicles={vehicles}
-          query={searchQuery}
-          onSearchMatch={onSearchMatch}
-          onSearchCleared={onSearchCleared}
-          onQueryChange={onQueryChange}
-        />
-        <Ladders
-          routeId={routeId}
-          vehicles={vehicles}
-          setSideBarSelection={openSideBarFromLadder}
-          sideBarSelection={sideBarSelection}
-        />
-      </div>
-    </main>
+    <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+      <main className="bg-glides-blue-700 flex flex-1 min-h-0 overflow-y-auto overflow-x-hidden justify-center">
+        {sideBarSelection !== null ?
+          <SideBar selection={sideBarSelection} close={close} />
+        : null}
+        <div
+          data-testid="scroll-container"
+          className={className([
+            "relative flex transition-all duration-300 ease-in-out overflow-x-auto snap-x snap-mandatory w-full",
+          ])}
+          // Close sidebar when clicking anywhere in the background
+          onClick={close}
+        >
+          <SearchBar
+            vehicles={vehicles}
+            query={searchQuery}
+            onSearchMatch={onSearchMatch}
+            onSearchCleared={onSearchCleared}
+            onQueryChange={onQueryChange}
+          />
+          <Ladders
+            ref={laddersRef}
+            routeId={routeId}
+            vehicles={vehicles}
+            setSideBarSelection={openSideBarFromLadder}
+            setBranchPickerSelection={setBranchPickerSelection}
+            sideBarSelection={sideBarSelection}
+          />
+        </div>
+      </main>
+      {isOverflowing && (
+        <div className="flex justify-center w-full bg-glides-blue-700">
+          <BranchPicker
+            selection={branchPickerSelection}
+            setSelection={setBranchPickerSelection}
+          />
+        </div>
+      )}
+    </div>
   );
 };