feat: Select preset for minimal page

assets/css/_minimal_ladder_page.scss

@@ -0,0 +1,7 @@
+.c-minimal-ladder-page {
+  margin: 30px;
+}
+
+.c-minimal-ladder-page__button {
+  margin-right: 1rem;
+}

assets/css/app.scss

@@ -70,6 +70,7 @@ $vpp-location-padding: 1rem;
 @import "map/markers/missed_stop_icon";
 @import "map/markers/stop_icon";
 @import "map/markers/user_location_marker";
+@import "minimal_ladder_page";
 @import "minischedule";
 @import "modal";
 @import "nav";

assets/src/components/app.tsx

@@ -31,6 +31,7 @@ import { TabMode } from "./propertiesPanel/tabPanels"
 import { DummyDetourPage } from "./dummyDetourPage"
 import inTestGroup, { TestGroups } from "../userInTestGroup"
 import { MinimalLadderPage } from "./minimalLadderPage"
+import { MinimalLadder } from "./minimalLadder"
 
 export const AppRoutes = () => {
   useAppcues()
@@ -54,7 +55,7 @@ export const AppRoutes = () => {
   const vehiclesByRouteIdNeeded =
     openView === OpenView.Late ||
     location.pathname === "/" ||
-    location.pathname === "/minimal"
+    location.pathname.includes("/minimal")
 
   const { socket } = useContext(SocketContext)
   const vehiclesByRouteId: ByRouteId<(VehicleInScheduledService | Ghost)[]> =
@@ -72,7 +73,13 @@ export const AppRoutes = () => {
         <div className="l-app__main">
           <Routes>
             {inTestGroup(TestGroups.MinimalLadderPage) && (
-              <BrowserRoute path="/minimal" element={<MinimalLadderPage />} />
+              <>
+                <BrowserRoute path="/minimal" element={<MinimalLadderPage />} />
+                <BrowserRoute
+                  path="/minimal/:id"
+                  element={<MinimalLadder.FromRouterParam />}
+                />
+              </>
             )}
             <Route
               element={

assets/src/components/minimalLadder.tsx

@@ -0,0 +1,52 @@
+import React, { useContext, useEffect } from "react"
+import RouteLadders from "./routeLadders"
+import { routeTabById } from "../models/routeTab"
+import { StateDispatchContext } from "../contexts/stateDispatchContext"
+import {
+  deselectRouteInTab,
+  flipLadderInTab,
+  toggleLadderCrowdingInTab,
+} from "../state"
+import { useNavigate, useParams } from "react-router-dom"
+
+export const MinimalLadder = ({ id }: { id: string }) => {
+  const [{ routeTabs }, dispatch] = useContext(StateDispatchContext)
+  const navigate = useNavigate()
+
+  const routeTab = routeTabById(routeTabs, id)
+
+  useEffect(() => {
+    if (!routeTab) {
+      navigate("/minimal")
+    }
+  }, [navigate, routeTab])
+
+  const {
+    selectedRouteIds = [],
+    ladderDirections = {},
+    ladderCrowdingToggles = {},
+  } = routeTab || {}
+
+  return (
+    <div className="c-ladder-page__tab-bar-and-ladders">
+      <RouteLadders
+        selectedRouteIds={selectedRouteIds}
+        selectedVehicleId={undefined}
+        deselectRoute={(routeId) => dispatch(deselectRouteInTab(routeId))}
+        reverseLadder={(routeId) => dispatch(flipLadderInTab(routeId))}
+        toggleCrowding={(routeId) =>
+          dispatch(toggleLadderCrowdingInTab(routeId))
+        }
+        ladderDirections={ladderDirections}
+        ladderCrowdingToggles={ladderCrowdingToggles}
+      />
+    </div>
+  )
+}
+
+const MinimalLadderFromRouterParam = () => {
+  const { id } = useParams()
+  return <>{id && <MinimalLadder id={id} />}</>
+}
+
+MinimalLadder.FromRouterParam = MinimalLadderFromRouterParam

assets/src/components/minimalLadderPage.tsx

@@ -1,36 +1,25 @@
 import React, { useContext } from "react"
-import RouteLadders from "./routeLadders"
-import { currentRouteTab } from "../models/routeTab"
+import { isPreset } from "../models/routeTab"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
-import {
-  deselectRouteInTab,
-  flipLadderInTab,
-  toggleLadderCrowdingInTab,
-} from "../state"
+import { Button } from "react-bootstrap"
+import { NavLink } from "react-router-dom"
 
 export const MinimalLadderPage = () => {
-  const [{ routeTabs }, dispatch] = useContext(StateDispatchContext)
-
-  const { selectedRouteIds, ladderDirections, ladderCrowdingToggles } =
-    currentRouteTab(routeTabs) || {
-      selectedRouteIds: [] as string[],
-      ladderDirections: {},
-      ladderCrowdingToggles: {},
-    }
+  const [{ routeTabs }] = useContext(StateDispatchContext)
+  const presets = routeTabs
+    .filter(isPreset)
+    .sort((a, b) => (a.presetName || "").localeCompare(b.presetName || ""))
 
   return (
-    <div className="c-ladder-page__tab-bar-and-ladders">
-      <RouteLadders
-        selectedRouteIds={selectedRouteIds}
-        selectedVehicleId={undefined}
-        deselectRoute={(routeId) => dispatch(deselectRouteInTab(routeId))}
-        reverseLadder={(routeId) => dispatch(flipLadderInTab(routeId))}
-        toggleCrowding={(routeId) =>
-          dispatch(toggleLadderCrowdingInTab(routeId))
-        }
-        ladderDirections={ladderDirections}
-        ladderCrowdingToggles={ladderCrowdingToggles}
-      />
+    <div className="c-minimal-ladder-page">
+      <h3>Select a preset to display</h3>
+      {presets.map((preset) => (
+        <NavLink key={preset.uuid} to={"/minimal/" + preset.uuid}>
+          <Button className="c-minimal-ladder-page__button">
+            {preset.presetName}
+          </Button>
+        </NavLink>
+      ))}
     </div>
   )
 }

assets/src/models/routeTab.ts

@@ -62,6 +62,11 @@ export const highestExistingOrdering = (routeTabs: RouteTab[]): number =>
 export const currentRouteTab = (routeTabs: RouteTab[]): RouteTab | undefined =>
   routeTabs.find((routeTab) => routeTab.isCurrentTab)
 
+export const routeTabById = (
+  routeTabs: RouteTab[],
+  uuid: string
+): RouteTab | undefined => routeTabs.find((routeTab) => routeTab.uuid == uuid)
+
 export const parseRouteTabData = (
   routeTabsData: RouteTabData[]
 ): RouteTab[] => {