hotfix(ScheduleDirection): fix line diagram for routes with repeated …

…stops (#1760) * feat(Line.Helpers): get either tree or list * feat(LineController): return both tree and list * refactor(ScheduleDirection): permit null stopTree * fixup: add index attribute to stops in list
mbta · Sep 28, 2023 · 83b02a5 · 83b02a5
1 parent 7001f18
commit 83b02a5
Show file tree

Hide file tree

Showing 30 changed files with 1,019 additions and 142 deletions.
diff --git a/apps/site/assets/ts/app/helpers/testUtils.ts b/apps/site/assets/ts/app/helpers/testUtils.ts
@@ -1,6 +1,18 @@
 /* eslint-disable */
 import toJson, { Json } from "enzyme-to-json";
 import { ReactWrapper } from "enzyme";
+import {
+  IndexedRouteStop,
+  StopTree
+} from "../../schedule/components/__schedule";
+
+export const testRouteStopListFromStopTree = (
+  tree: StopTree
+): IndexedRouteStop[] =>
+  Object.values(tree.byId).map((node, index) => ({
+    ...node.value,
+    routeIndex: index
+  }));
 
 export const createReactRoot = (): void => {
   document.body.innerHTML =

diff --git a/apps/site/assets/ts/schedule/components/ScheduleDirection.tsx b/apps/site/assets/ts/schedule/components/ScheduleDirection.tsx
@@ -3,7 +3,9 @@ import { Alert, DirectionId, EnhancedRoute } from "../../__v3api";
 import {
   RoutePatternsByDirection,
   EnhancedRoutePattern,
-  StopTree
+  StopTree,
+  RouteStop,
+  IndexedRouteStop
 } from "./__schedule";
 import ScheduleDirectionMenu from "./direction/ScheduleDirectionMenu";
 import ScheduleDirectionButton from "./direction/ScheduleDirectionButton";
@@ -18,15 +20,15 @@ import {
 } from "../../models/route";
 import LineDiagram from "./line-diagram/LineDiagram";
 import { fromStopTreeData } from "./ScheduleLoader";
-import { isEmptyTree } from "../../helpers/stop-tree";
 
 export interface Props {
   route: EnhancedRoute;
   directionId: DirectionId;
   routePatternsByDirection: RoutePatternsByDirection;
   mapData?: MapData;
   staticMapData?: StaticMapData;
-  stopTree: StopTree;
+  stopTree: StopTree | null;
+  routeStopLists: RouteStop[][] | null;
   alerts: Alert[];
   busVariantId: string | null;
 }
@@ -78,11 +80,14 @@ export const fetchLineData = (
         if (response.ok) return response.json();
         throw new Error(response.statusText);
       })
-      .then(({ stop_tree }) => {
-        const stopTree: StopTree = fromStopTreeData(stop_tree);
+      .then(({ stop_tree, route_stop_lists }) => {
+        const stopTree = stop_tree ? fromStopTreeData(stop_tree) : null;
+        const routeStopListsWithIndices: IndexedRouteStop[][] = (route_stop_lists as RouteStop[][]).map(
+          rs_list => rs_list.map((rs, index) => ({ ...rs, routeIndex: index }))
+        );
         dispatch({
           type: "FETCH_COMPLETE",
-          payload: { stopTree }
+          payload: { stopTree, routeStopLists: routeStopListsWithIndices }
         });
       })
       // @ts-ignore
@@ -97,6 +102,7 @@ const ScheduleDirection = ({
   mapData,
   staticMapData,
   stopTree: initialStopTree,
+  routeStopLists: initialRouteStopLists,
   alerts,
   busVariantId
 }: Props): ReactElement<HTMLElement> => {
@@ -186,7 +192,8 @@ const ScheduleDirection = ({
 
   const [lineState, dispatchLineData] = useReducer(fetchReducer, {
     data: {
-      stopTree: initialStopTree
+      stopTree: initialStopTree,
+      routeStopLists: initialRouteStopLists
     },
     isLoading: false,
     error: false
@@ -200,7 +207,12 @@ const ScheduleDirection = ({
     );
   }, [route, state.directionId, busVariantId, currentRoutePatternIdForData]);
 
-  const hasValidTree = lineState.data && !isEmptyTree(lineState.data.stopTree);
+  const routeStopList =
+    lineState.data && lineState.data.routeStopLists
+      ? (lineState.data.routeStopLists as IndexedRouteStop[][]).find(
+          rsList => !!rsList.find(rs => rs.branch === state.routePattern.name)
+        ) || []
+      : [];
   return (
     <>
       <div className="m-schedule-direction">
@@ -221,9 +233,10 @@ const ScheduleDirection = ({
           <ScheduleDirectionButton dispatch={dispatch} />
         ) : null}
       </div>
-      {isSubwayRoute(route) && hasValidTree && (
+      {isSubwayRoute(route) && (
         <LineDiagram
-          stopTree={lineState.data.stopTree}
+          stopTree={lineState.data && lineState.data.stopTree}
+          routeStopList={routeStopList}
           route={route}
           directionId={state.directionId}
           alerts={alerts}
@@ -255,9 +268,10 @@ const ScheduleDirection = ({
           </a>
         </>
       )}
-      {!isSubwayRoute(route) && hasValidTree && (
+      {!isSubwayRoute(route) && (
         <LineDiagram
-          stopTree={lineState.data.stopTree}
+          stopTree={lineState.data && lineState.data.stopTree}
+          routeStopList={routeStopList}
           route={route}
           directionId={state.directionId}
           alerts={alerts}

diff --git a/apps/site/assets/ts/schedule/components/ScheduleLoader.tsx b/apps/site/assets/ts/schedule/components/ScheduleLoader.tsx
@@ -137,11 +137,13 @@ export const ScheduleLoader = ({
     schedule_note: scheduleNote,
     today,
     stop_tree,
+    route_stop_lists: routeStopLists,
     alerts,
     variant: busVariantId
   } = schedulePageData;
-  const stopTree: StopTree = fromStopTreeData(stop_tree);
-
+  const stopTree: StopTree | null = stop_tree
+    ? fromStopTreeData(stop_tree)
+    : null;
   const routeIsSuspended = Object.keys(routePatternsByDirection).length === 0;
 
   const currentState = getCurrentState();
@@ -319,6 +321,7 @@ export const ScheduleLoader = ({
           directionId={readjustedDirectionId}
           route={route}
           routePatternsByDirection={routePatternsByDirection}
+          routeStopLists={routeStopLists}
           mapData={mapData}
           staticMapData={staticMapData}
           stopTree={stopTree}

diff --git a/apps/site/assets/ts/schedule/components/__schedule.d.ts b/apps/site/assets/ts/schedule/components/__schedule.d.ts
@@ -44,7 +44,8 @@ export interface SchedulePageData {
   stops: SimpleStopMap;
   direction_id: DirectionId;
   route_patterns: RoutePatternsByDirection;
-  stop_tree: StopTreeData;
+  stop_tree: StopTreeData | null;
+  route_stop_lists: RouteStop[][];
   alerts: Alert[];
   today: string;
   variant: string | null;
@@ -114,6 +115,10 @@ export interface RouteStop {
   closed_stop_info: ClosedStopInfo | null;
 }
 
+export interface IndexedRouteStop extends RouteStop {
+  routeIndex: number;
+}
+
 export interface SimpleStopMap {
   [key: string]: SimpleStop[];
 }

diff --git a/apps/site/assets/ts/schedule/components/__tests__/ScheduleDirectionTest.tsx b/apps/site/assets/ts/schedule/components/__tests__/ScheduleDirectionTest.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import {
   createReactRoot,
-  enzymeToJsonWithoutProps
+  enzymeToJsonWithoutProps,
+  testRouteStopListFromStopTree
 } from "../../../app/helpers/testUtils";
 import { mount } from "enzyme";
 import {
@@ -33,6 +34,7 @@ const { stop_tree } = (lineDiagramData as unknown) as {
   stop_tree: StopTreeData;
 };
 const stopTree: StopTree = fromStopTreeData(stop_tree);
+const testRouteStopList = testRouteStopListFromStopTree(stopTree);
 
 const route = {
   type: 3,
@@ -170,6 +172,7 @@ const getComponent = () => (
     routePatternsByDirection={routePatternsByDirection}
     mapData={mapData}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId={null}
   />
@@ -182,6 +185,7 @@ const getSingleDirectionComponent = () => (
     routePatternsByDirection={routePatternsByDirection}
     mapData={mapData}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId={null}
   />
@@ -194,6 +198,7 @@ const getSubwayComponent = () => (
     directionId={directionId}
     routePatternsByDirection={routePatternsByDirection}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId={null}
   />
@@ -206,6 +211,7 @@ const getCRComponent = () => (
     routePatternsByDirection={routePatternsByDirection}
     mapData={mapData}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId={null}
   />
@@ -218,6 +224,7 @@ const getStaticMapComponent = () => (
     directionId={directionId}
     routePatternsByDirection={routePatternsByDirection}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId={null}
   />
@@ -246,6 +253,7 @@ const getGreenLineComponent = () => {
       directionId={directionId}
       routePatternsByDirection={routePatternsByDirection}
       stopTree={stopTree}
+      routeStopLists={[testRouteStopList]}
       alerts={[]}
       busVariantId={null}
     />
@@ -259,6 +267,7 @@ const getVariantComponent = () => (
     routePatternsByDirection={routePatternsByDirection}
     mapData={mapData}
     stopTree={stopTree}
+    routeStopLists={[testRouteStopList]}
     alerts={[]}
     busVariantId="pattern-3"
   />
@@ -538,7 +547,7 @@ describe("fetchLineData", () => {
       () =>
         new Promise((resolve: Function) =>
           resolve({
-            json: () => lineDiagramData,
+            json: () => ({ stop_tree, route_stop_lists: [] }),
             ok: true,
             status: 200,
             statusText: "OK"
@@ -555,7 +564,7 @@ describe("fetchLineData", () => {
       });
       expect(spy).toHaveBeenCalledWith({
         type: "FETCH_COMPLETE",
-        payload: { stopTree }
+        payload: { stopTree, routeStopLists: [] }
       });
     });
   });