Show "No real-time data" when no predictions (#2084)

* show message when no predictions * fix issue with orange line schedule * change var names * add css to align visuals
mbta · May 31, 2024 · abda48d · abda48d
1 parent 7789656
commit abda48d
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 11 deletions.
diff --git a/assets/css/_stop-card.scss b/assets/css/_stop-card.scss
@@ -84,9 +84,9 @@ $radius: 4px;
     // on mobile, adopt a full-screen "app" view,
     // this is the scrollable section
     @include media-breakpoint-down(sm) {
+      -webkit-overflow-scrolling: touch;
       overflow-y: scroll;
       overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
     }
   }
 
@@ -102,9 +102,9 @@ $radius: 4px;
     @include media-breakpoint-down(sm) {
       bottom: 0;
       display: grid;
-      left: 0;
       gap: 0;
       grid-template-rows: auto 1fr;
+      left: 0;
       padding-bottom: 0;
       padding-top: 0;
       position: fixed;
@@ -425,3 +425,22 @@ $radius: 4px;
     margin: 0;
   }
 }
+
+.departure-card__times {
+  .no-real-time-data {
+    @extend .font-helvetica-neue;
+    @extend .fs-14;
+  }
+}
+
+.stop-departures--realtime {
+  .no-real-time-data {
+    @extend .align-items-center;
+    @extend .c-alert-item--low;
+    @extend .d-flex;
+    @extend .justify-content-center;
+    @extend .m-8;
+    @extend .pb-40;
+    @extend .pt-40;
+  }
+}
diff --git a/assets/ts/helpers/__tests__/departureInfoTest.tsx b/assets/ts/helpers/__tests__/departureInfoTest.tsx
@@ -98,7 +98,7 @@ describe("departureInfo", () => {
 
   describe("departuresListFromInfos", () => {
     it("can handle no departures", () => {
-      render(<ul>{departuresListFromInfos([], false)}</ul>);
+      render(<ul>{departuresListFromInfos([], false, false)}</ul>);
 
       // no <li> created
       expect(screen.queryByRole("listitem")).toBeNull();
@@ -121,6 +121,7 @@ describe("departureInfo", () => {
           {departuresListFromInfos(
             departures,
             false,
+            false,
             undefined,
             undefined,
             false,
@@ -147,7 +148,13 @@ describe("departureInfo", () => {
       const customLength = 4;
       render(
         <ul>
-          {departuresListFromInfos(departures, false, undefined, customLength)}
+          {departuresListFromInfos(
+            departures,
+            false,
+            false,
+            undefined,
+            customLength
+          )}
         </ul>
       );
 
@@ -186,7 +193,7 @@ describe("departureInfo", () => {
         } as DepartureInfo;
       });
 
-      render(<ul>{departuresListFromInfos(departures, false)}</ul>);
+      render(<ul>{departuresListFromInfos(departures, false, false)}</ul>);
 
       // the schedule-only departures at index positions 2, 4, 7 should have been removed
       expect(screen.queryAllByRole("listitem")).toHaveLength(

diff --git a/assets/ts/helpers/departureInfo.tsx b/assets/ts/helpers/departureInfo.tsx
@@ -152,6 +152,7 @@ const DefaultWrapper: React.FunctionComponent<unknown> = ({ children }) => (
 const departuresListFromInfos = (
   departureInfos: DepartureInfo[],
   isCR: boolean,
+  isSubway: boolean,
   targetDate?: Date,
   listLength?: number,
   omitCancelledAndSkipped = false,
@@ -164,6 +165,17 @@ const departuresListFromInfos = (
     .maxBy("prediction.time")
     .value()?.prediction!.time;
 
+  const routeId = departureInfos[0]?.route?.id;
+  const tripId = departureInfos[0]?.trip?.id;
+
+  if (isSubway && !predictionTimeCutoff) {
+    return [
+      <div className="no-real-time-data" key={`${routeId}-${tripId}`}>
+        No real-time data
+      </div>
+    ];
+  }
+
   return chain(departureInfos)
     .reject(
       departure =>

diff --git a/assets/ts/stop/__tests__/components/DepartureTimesTest.tsx b/assets/ts/stop/__tests__/components/DepartureTimesTest.tsx
@@ -18,6 +18,7 @@ describe("DepartureTimes", () => {
         departures={[]}
         alertsForDirection={[]}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -80,6 +81,7 @@ describe("DepartureTimes", () => {
         overrideDate={dateToCompare}
         alertsForDirection={[]}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -117,6 +119,7 @@ describe("DepartureTimes", () => {
           departures={[]}
           alertsForDirection={alerts}
           isCR={false}
+          isSubway={false}
           onClick={jest.fn()}
           hasService={true}
         />
@@ -156,6 +159,7 @@ describe("DepartureTimes", () => {
         departures={mergeIntoDepartureInfo(schedules, [])}
         alertsForDirection={alerts}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -208,6 +212,7 @@ describe("DepartureTimes", () => {
         alertsForDirection={[detourAlert] as Alert[]}
         overrideDate={dateToCompare}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -361,6 +366,7 @@ describe("DepartureTimes", () => {
         alertsForDirection={[]}
         overrideDate={compareTime}
         isCR={false}
+        isSubway={false}
         onClick={setRowSpy}
         hasService={true}
       />
@@ -447,6 +453,7 @@ describe("DepartureTimes", () => {
         overrideDate={dateToCompare}
         alertsForDirection={[]}
         isCR={true}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -466,6 +473,7 @@ describe("DepartureTimes", () => {
         departures={[]}
         alertsForDirection={[]}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -489,6 +497,7 @@ describe("DepartureTimes", () => {
         departures={[]}
         alertsForDirection={[closureAlert]}
         isCR={true}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -512,6 +521,7 @@ describe("DepartureTimes", () => {
         departures={[]}
         alertsForDirection={[closureAlert]}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={true}
       />
@@ -531,6 +541,7 @@ describe("DepartureTimes", () => {
         departures={[]}
         alertsForDirection={[]}
         isCR={false}
+        isSubway={false}
         onClick={jest.fn()}
         hasService={false}
       />

diff --git a/assets/ts/stop/components/DepartureCard.tsx b/assets/ts/stop/components/DepartureCard.tsx
@@ -101,6 +101,7 @@ const DepartureCard = ({
               )}
               onClick={onClick}
               isCR={isACommuterRailRoute(route)}
+              isSubway={isSubwayRoute(route)}
               hasService={routePatterns.length !== 0}
             />
           );

diff --git a/assets/ts/stop/components/DepartureList.tsx b/assets/ts/stop/components/DepartureList.tsx
@@ -8,7 +8,7 @@ import { routeName, routeToModeIcon } from "../../helpers/route-headers";
 import renderSvg from "../../helpers/render-svg";
 import { isSuppressiveAlert } from "../../models/alert";
 import Alerts from "../../components/Alerts";
-import { isACommuterRailRoute } from "../../models/route";
+import { isACommuterRailRoute, isSubwayRoute } from "../../models/route";
 
 interface DepartureListProps {
   route: Route;
@@ -42,6 +42,7 @@ const DepartureList = ({
   targetDate
 }: DepartureListProps): ReactElement<HTMLElement> => {
   const isCR = isACommuterRailRoute(route);
+  const isSubway = isSubwayRoute(route);
 
   // don's show cancelled departures for subway
   const modeSpecificDepartures: DepartureInfo[] = filter(
@@ -87,7 +88,12 @@ const DepartureList = ({
       {noServiceOrNoTrips ||
         (!alertsShouldSuppressDepartures && (
           <ul className="stop-routes__departures list-unstyled">
-            {departuresListFromInfos(modeSpecificDepartures, isCR, targetDate)}
+            {departuresListFromInfos(
+              modeSpecificDepartures,
+              isCR,
+              isSubway,
+              targetDate
+            )}
           </ul>
         ))}
     </>

diff --git a/assets/ts/stop/components/DepartureTimes.tsx b/assets/ts/stop/components/DepartureTimes.tsx
@@ -13,6 +13,7 @@ interface DepartureTimesProps {
   headsign: string;
   onClick: () => void;
   isCR: boolean;
+  isSubway: boolean;
   hasService: boolean;
   // override date primarily used for testing
   overrideDate?: Date;
@@ -51,12 +52,14 @@ const DepartureTimes = ({
   headsign,
   onClick,
   isCR,
+  isSubway,
   hasService,
   overrideDate
 }: DepartureTimesProps): ReactElement<HTMLElement> | null => {
   const timeList = departuresListFromInfos(
     departures,
     isCR,
+    isSubway,
     overrideDate,
     isCR ? 1 : 2,
     true,

diff --git a/integration/scenarios/view-subway-schedule.js b/integration/scenarios/view-subway-schedule.js
@@ -21,21 +21,21 @@ exports.scenario = async ({ page, baseURL }) => {
 
   // Get the first and last stop names
   const first = await page
-    .locator("h4.m-schedule-diagram__stop-link a span")
+    .locator("h4.m-schedule-diagram__stop-link a span:last-child")
     .first()
     .textContent();
   const last = await page
-    .locator("h4.m-schedule-diagram__stop-link a span")
+    .locator("h4.m-schedule-diagram__stop-link a span:last-child")
     .last()
     .textContent();
 
   await page.locator("button.m-schedule-direction__button").click();
 
   // Expect them to be reversed after clicking the direction filter
   await expect(
-    page.locator("h4.m-schedule-diagram__stop-link a span").first(),
+    page.locator("h4.m-schedule-diagram__stop-link a span:last-child").first(),
   ).toHaveText(last);
   await expect(
-    page.locator("h4.m-schedule-diagram__stop-link a span").last(),
+    page.locator("h4.m-schedule-diagram__stop-link a span:last-child").last(),
   ).toHaveText(first);
 };