feat: Orbit banner warning for stale data

js/components/app.tsx

@@ -1,4 +1,5 @@
 import { reload } from "../browser";
+import { DataWarningsProvider } from "../contexts/dataWarningsContext";
 import { SocketProvider } from "../contexts/socketContext";
 import {
   ORBIT_BL_FFD,
@@ -9,6 +10,7 @@ import {
 } from "../groups";
 import { paths } from "../paths";
 import { AppcuesTrackPage } from "./appcues";
+import { Banner } from "./banner";
 import { Header } from "./header";
 import { LadderPage } from "./ladderPage/ladderPage";
 import { LandingPage } from "./landingPage";
@@ -78,11 +80,16 @@ const router = createBrowserRouter([
   {
     errorElement: <ErrorBoundary />,
     element: (
-      <>
+      <DataWarningsProvider>
         <AppcuesTrackPage />
-        <Header />
-        <Outlet />
-      </>
+        <div className="flex flex-col h-screen">
+          <div className="sticky top-0 z-header">
+            <Banner />
+            <Header />
+          </div>
+          <Outlet />
+        </div>
+      </DataWarningsProvider>
     ),
     children: [
       {

js/components/banner.tsx

@@ -0,0 +1,27 @@
+import { useDataWarnings } from "../contexts/dataWarningsContext";
+import { className } from "../util/dom";
+import { ReactElement } from "react";
+
+export const Banner = (): ReactElement => {
+  const [warnings] = useDataWarnings();
+
+  return warnings.size > 0 ?
+      <div className={className(["px-3 py-4 text-xs bg-yellow/25"])}>
+        <div className="flex flex-row items-center gap-2">
+          <svg className={className(["h-4 w-4 inline fill-yellow"])}>
+            <use xlinkHref={"/images/warning-circle.svg"} />
+          </svg>
+          <p className="font-semibold uppercase tracking-wide-4 text-slate-800">
+            Data Issue
+          </p>
+        </div>
+        <div className="ml-5 flex flex-1 flex-col text-slate-600">
+          <ul className="list-inside list-disc">
+            {[...warnings].map((warning) => {
+              return <li key={warning}>Train positions out of date</li>;
+            })}
+          </ul>
+        </div>
+      </div>
+    : <></>;
+};

js/components/header.tsx

@@ -9,7 +9,7 @@ export const Header = () => {
     currentLocation.pathname === paths.help;
 
   return (
-    <div className="w-full bg-gray-200 p-2 flex justify-between fixed h-header z-header">
+    <div className="w-full bg-gray-200 p-2 flex justify-between h-header">
       <Link to={paths.root}>
         <img src="/images/logo.svg" alt="MBTA" className="w-44 h-[32px]" />
       </Link>

js/components/ladderPage/ladderPage.tsx

@@ -44,11 +44,14 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
   }, [onEscape]);
 
   return (
-    <main className="flex h-screen justify-center">
+    <main className="flex overflow-y-auto overflow-x-hidden justify-center">
+      {sideBarSelection !== null ?
+        <SideBar selection={sideBarSelection} close={close} />
+      : null}
       <div
         className={className([
-          "flex overflow-auto transition-all duration-300 ease-in-out w-full",
-          sideBarSelection && "ml-80 min-[1485px]:ml-0",
+          "flex transition-all duration-300 ease-in-out overflow-x-auto w-full",
+          sideBarSelection && "min-[1485px]:ml-30",
         ])}
         // Close sidebar when clicking anywhere in the background
         onClick={close}
@@ -59,9 +62,6 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
           sideBarSelection={sideBarSelection}
         />
       </div>
-      {sideBarSelection !== null ?
-        <SideBar selection={sideBarSelection} close={close} />
-      : null}
     </main>
   );
 };

js/components/ladderPage/sidebar.tsx

@@ -27,14 +27,14 @@ export const SideBar = ({
   close: () => void;
 }): ReactElement => {
   return (
-    <aside className="fixed flex flex-col left-0 top-[theme(height.header)] w-full sm:w-80 h-[calc(100vh-theme(height.header))] bg-gray-100 transition-transform duration-300 ease-in-out animate-slide-in-from-left">
+    <aside className="sm:min-w-[350px] sticky flex flex-col left-0 sm:w-80 bg-gray-100 transition-transform duration-300 ease-in-out animate-slide-in-from-left">
       <button
         className="absolute m-3 top-0 right-0 h-4 w-4 hover:fill-slate-700"
         onClick={close}
       >
         <img src="/images/close.svg" alt="Close" />
       </button>
-      <div className="h-full">
+      <div className="h-full w-screen sm:w-auto">
         <Consist vehicle={selection.vehicle} />
         <CurrentTrip vehicle={selection.vehicle} />
         <NextTrip vehicle={selection.vehicle} />

js/contexts/dataWarningsContext.tsx

@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+export type DataWarning = "vehicle_positions_stale";
+export type DataWarnings = Set<DataWarning>;
+
+const DataWarningsContext = createContext<
+  [DataWarnings, (warning: DataWarning) => void, (warning: DataWarning) => void]
+>([
+  new Set(),
+  () => {
+    throw Error("Not implemented");
+  },
+  () => {
+    throw Error("Not implemented");
+  },
+]);
+export const DataWarningsProvider = ({ children }: { children: ReactNode }) => {
+  const [warnings, setWarnings] = useState<DataWarnings>(new Set());
+  const addWarning: (warning: DataWarning) => void = (warning: DataWarning) => {
+    setWarnings((warnings) => {
+      const newSet = new Set(warnings);
+      newSet.add(warning);
+      return newSet;
+    });
+  };
+  const removeWarning: (warning: DataWarning) => void = (
+    warning: DataWarning,
+  ) => {
+    setWarnings((warnings) => {
+      const newSet = new Set(warnings);
+      newSet.delete(warning);
+      return newSet;
+    });
+  };
+
+  return (
+    <DataWarningsContext.Provider value={[warnings, addWarning, removeWarning]}>
+      {children}
+    </DataWarningsContext.Provider>
+  );
+};
+
+export const useDataWarnings = () => useContext(DataWarningsContext);

js/hooks/useChannel.ts

@@ -74,6 +74,6 @@ export const useChannel = <RawData, Data>({
         event,
       );
     }
-  }, [topic, event, channel, parser, RawData]);
+  }, [topic, event, parser, channel, RawData]);
   return data;
 };

js/hooks/useVehicles.ts

@@ -1,17 +1,25 @@
 import { useSocket } from "../contexts/socketContext";
 import "../models/vehiclePosition";
+import { useDataWarnings } from "../contexts/dataWarningsContext";
+import { dateTimeFromUnix, useNow } from "../dateTime";
 import {
   Vehicle,
   VehicleDataMessage,
   vehicleFromVehicleData,
 } from "../models/vehicle";
 import { useChannel } from "./useChannel";
-
-const parser = (message: VehicleDataMessage): Vehicle[] => {
-  return message.data.entities.map((data) => vehicleFromVehicleData(data));
-};
+import { useCallback, useEffect, useEffectEvent, useState } from "react";
 
 export const useVehicles = (): Vehicle[] | null => {
+  const now = useNow("minute");
+  const [, addWarning, removeWarning] = useDataWarnings();
+  const [mostRecentTimestamp, setMostRecentTimestamp] = useState(
+    now.toUnixInteger(),
+  );
+  const parser = useCallback((message: VehicleDataMessage): Vehicle[] => {
+    setMostRecentTimestamp(message.data.timestamp);
+    return message.data.entities.map((data) => vehicleFromVehicleData(data));
+  }, []);
   const socket = useSocket();
   const result = useChannel({
     socket,
@@ -21,6 +29,23 @@ export const useVehicles = (): Vehicle[] | null => {
     RawData: VehicleDataMessage,
     defaultResult: null,
   });
+  const checkForStaleData = useEffectEvent(() => {
+    if (now.diff(dateTimeFromUnix(mostRecentTimestamp), "minute").minutes > 3) {
+      addWarning("vehicle_positions_stale");
+    } else {
+      removeWarning("vehicle_positions_stale");
+    }
+  });
+
+  useEffect(
+    () => {
+      checkForStaleData();
+    },
+    // Disabling this because it's due to outdated react-hooks lint rules
+    // Remove when that library is updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [now],
+  );
 
   return result;
 };

js/icons.ts

@@ -10,4 +10,5 @@ export type IconName =
   | "menu"
   | "red-line"
   | "shield"
-  | "sign-out";
+  | "sign-out"
+  | "warning-circle";

js/test/components/app.test.tsx

@@ -22,6 +22,11 @@ const mockGetMetaContent = getMetaContent as jest.MockedFunction<
   typeof getMetaContent
 >;
 
+jest.mock("../../contexts/dataWarningsContext", () => ({
+  __esModule: true,
+  useDataWarnings: jest.fn(() => [new Set([]), () => {}, () => {}]),
+}));
+
 describe("App", () => {
   //NOTE: skipping this test while root path temporarily reroutes to /operators.
   //TODO: do not skip this once root path is no longer just rerouting.

js/test/components/banner.test.tsx

@@ -0,0 +1,45 @@
+import { Banner } from "../../components/banner";
+import { useDataWarnings } from "../../contexts/dataWarningsContext";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+
+jest.mock("../../contexts/dataWarningsContext", () => ({
+  __esModule: true,
+  useDataWarnings: jest.fn(),
+}));
+
+describe("Landing Page", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders when warning is present", () => {
+    (useDataWarnings as jest.Mock).mockImplementation(
+      jest.fn(() => [new Set(["vehicle_positions_stale"]), () => {}, () => {}]),
+    );
+
+    const view = render(
+      <MemoryRouter>
+        <Banner />
+      </MemoryRouter>,
+    );
+    expect(view.getByText("Data Issue")).toBeInTheDocument();
+    expect(view.getByText("Train positions out of date")).toBeInTheDocument();
+  });
+
+  test("is hidden when no warning is present", () => {
+    (useDataWarnings as jest.Mock).mockImplementation(
+      jest.fn(() => [new Set(), () => {}, () => {}]),
+    );
+
+    const view = render(
+      <MemoryRouter>
+        <Banner />
+      </MemoryRouter>,
+    );
+    expect(view.queryByText("Data Issue")).not.toBeInTheDocument();
+    expect(
+      view.queryByText("Train positions out of date"),
+    ).not.toBeInTheDocument();
+  });
+});

js/test/hooks/useVehicles.test.ts

@@ -1,3 +1,4 @@
+import { DataWarningsProvider } from "../../contexts/dataWarningsContext";
 import { useChannel } from "../../hooks/useChannel";
 import { useVehicles } from "../../hooks/useVehicles";
 import { renderHook } from "@testing-library/react";
@@ -15,7 +16,7 @@ describe("useVehicles", () => {
     });
   });
   test("subscribes to the proper topic", () => {
-    renderHook(useVehicles);
+    renderHook(useVehicles, { wrapper: DataWarningsProvider });
     expect(mockUseChannel).toHaveBeenCalledWith(
       expect.objectContaining({
         topic: "vehicles",