feat: Add Green Line Slow Zones

common/components/nav/SubwayDropdown.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { SidebarTabs } from '../../../modules/navigation/SidebarTabs';
-import { OVERVIEW_PAGE, LINE_PAGES, TRIP_PAGES, ALL_PAGES } from '../../constants/pages';
+import { OVERVIEW_PAGE, LINE_PAGES, TRIP_PAGES } from '../../constants/pages';
 import { lineColorBorder } from '../../styles/general';
 import type { Line } from '../../types/lines';
 
@@ -21,14 +21,7 @@ export const SubwayDropdown: React.FC<SubwayDropdownProps> = ({ line, close }) =
     >
       <SidebarTabs tabs={OVERVIEW_PAGE} close={close} />
       <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
-      <SidebarTabs
-        tabs={
-          line === 'line-green'
-            ? LINE_PAGES.filter((cur) => cur !== ALL_PAGES.slowzones)
-            : LINE_PAGES
-        }
-        close={close}
-      />
+      <SidebarTabs tabs={LINE_PAGES} close={close} />
       <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
       <SidebarTabs tabs={TRIP_PAGES} close={close} />
     </div>

common/components/notices/BetaSlowZoneDataNotice.tsx

@@ -0,0 +1,29 @@
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import React from 'react';
+
+export const BetaSlowZoneDataNotice: React.FC = () => {
+  return (
+    <div className="rounded-md bg-yellow-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <ExclamationTriangleIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+        </div>
+        <div className="ml-3">
+          <h3 className="text-sm font-medium text-yellow-800">Green Line Slow Zones are in Beta</h3>
+          <div className="mt-2 text-sm text-yellow-700">
+            <p>
+              Due to the variable nature of service on the Green Line, we aren't able to detect slow
+              zones as easily as on the heavy rail lines. Additionaly, we are only monitoring slow
+              zones for stops serviced by the D line since that is the only line which is entirely
+              grade-separated.
+            </p>
+            <p>
+              We're working on improving the data and we plan to add slow-zone tracking for other
+              branches, but that will require additional information on traffic patterns.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

common/constants/pages.ts

@@ -127,7 +127,7 @@ export const ALL_PAGES: PageMap = {
     key: 'slowzones',
     path: '/slowzones',
     name: 'Slow zones',
-    lines: ['line-red', 'line-blue', 'line-orange'],
+    lines: ['line-red', 'line-blue', 'line-orange', 'line-green'],
     icon: faWarning,
     dateStoreSection: 'line',
   },

modules/dashboard/Overview.tsx

@@ -6,7 +6,6 @@ import { ServiceWidget } from '../service/ServiceWidget';
 import { PageWrapper } from '../../common/layouts/PageWrapper';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { RidershipWidget } from '../ridership/RidershipWidget';
-import { HEAVY_RAIL_LINES } from '../../common/types/lines';
 import { useRewriteV3Route } from '../../common/utils/middleware';
 import { LINE_OBJECTS } from '../../common/constants/lines';
 import { AlertsWidget } from '../alerts/AlertsWidget';
@@ -16,8 +15,6 @@ export function Overview() {
 
   useRewriteV3Route();
 
-  const isHeavyRailLine = line ? HEAVY_RAIL_LINES.includes(line) : false;
-
   const lineShort = line && line !== 'line-bus' ? LINE_OBJECTS[line].short : null;
 
   return (
@@ -26,7 +23,7 @@ export function Overview() {
         {tab === 'Subway' && <SpeedWidget />}
         {tab === 'Subway' && <ServiceWidget />}
         <RidershipWidget />
-        {tab === 'Subway' && isHeavyRailLine && <SlowZonesWidget />}
+        {tab === 'Subway' && <SlowZonesWidget />}
         <div className="grid w-full grid-cols-1 gap-4 md:gap-8 xl:col-span-2 xl:grid-cols-2">
           {tab === 'Subway' && lineShort && <AlertsWidget lineShort={lineShort} />}
         </div>

modules/slowzones/SlowZonesDetails.tsx

@@ -21,6 +21,7 @@ import { PageWrapper } from '../../common/layouts/PageWrapper';
 import { ChartPageDiv } from '../../common/components/charts/ChartPageDiv';
 import { Layout } from '../../common/layouts/layoutTypes';
 import { useBreakpoint } from '../../common/hooks/useBreakpoint';
+import { BetaSlowZoneDataNotice } from '../../common/components/notices/BetaSlowZoneDataNotice';
 import { SlowZonesSegmentsWrapper } from './SlowZonesSegmentsWrapper';
 import { TotalSlowTimeWrapper } from './TotalSlowTimeWrapper';
 import { SlowZonesMap } from './map';
@@ -48,7 +49,8 @@ export function SlowZonesDetails() {
   const totalSlowTimeReady =
     !delayTotals.isError && delayTotals.data && startDateUTC && endDateUTC && lineShort && line;
   const segmentsReady = !allSlow.isError && allSlow.data && startDateUTC && lineShort;
-  const canShowSlowZonesMap = lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange';
+  const canShowSlowZonesMap =
+    lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange' || lineShort === 'Green';
   const isDesktop = useBreakpoint('lg');
 
   if (!endDateUTC || !startDateUTC) {
@@ -62,6 +64,7 @@ export function SlowZonesDetails() {
   return (
     <PageWrapper pageTitle={'Slow zones'}>
       <ChartPageDiv>
+        <BetaSlowZoneDataNotice />
         <WidgetDiv>
           <WidgetTitle title="Total slow time" />
           <Link

modules/slowzones/SlowZonesWidget.tsx

@@ -22,7 +22,7 @@ export const SlowZonesWidget: React.FC = () => {
   const totalSlowTimeReady =
     !delayTotals.isError && delayTotals.data && startDateUTC && endDateUTC && lineShort && line;
 
-  if (line === 'line-bus' || line === 'line-green' || line === 'line-commuter-rail') {
+  if (line === 'line-bus' || line === 'line-commuter-rail') {
     return null;
   }
 

modules/slowzones/SystemSlowZonesDetails.tsx

@@ -38,7 +38,8 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
 
   const [lineShort, setLineShort] = useState<LineShort>('Red');
   const line = `line-${lineShort.toLowerCase()}` as Line;
-  const canShowSlowZonesMap = lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange';
+  const canShowSlowZonesMap =
+    lineShort === 'Red' || lineShort === 'Blue' || lineShort === 'Orange' || lineShort === 'Green';
   const isDesktop = useBreakpoint('lg');
 
   const {
@@ -116,6 +117,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
               Red: 'Red',
               Orange: 'Orange',
               Blue: 'Blue',
+              Green: 'Green',
             })}
           />
         </WidgetDiv>

modules/slowzones/charts/TotalSlowTime.tsx

@@ -81,6 +81,14 @@ export const TotalSlowTime: React.FC<TotalSlowTimeProps> = ({
           pointRadius: 0,
           tension: 0.1,
         },
+        {
+          label: `Green Line`,
+          data: data?.map((d) => (d['Green'] / 60).toFixed(2)),
+          borderColor: LINE_COLORS['line-green'],
+          backgroundColor: LINE_COLORS['line-green'],
+          pointRadius: 0,
+          tension: 0.1,
+        },
       ];
   return (
     <ChartBorder>

modules/slowzones/map/SlowZonesMap.stories.tsx

@@ -55,6 +55,19 @@ export const Primary = () => {
         direction="vertical"
         speedRestrictions={[]}
       />
+
+      <SlowZonesMap
+        lineName="Green"
+        slowZones={slowZonesResponses}
+        direction="vertical"
+        speedRestrictions={[]}
+      />
+      <SlowZonesMap
+        lineName="Green"
+        slowZones={slowZonesResponses}
+        direction="horizontal"
+        speedRestrictions={[]}
+      />
     </>
   );
 };

modules/slowzones/types.ts

@@ -1,3 +1,3 @@
-const SLOW_ZONES_LINES = ['Red', 'Blue', 'Orange'] as const;
+const SLOW_ZONES_LINES = ['Red', 'Blue', 'Orange', 'Green'] as const;
 
 export type SlowZonesLineName = (typeof SLOW_ZONES_LINES)[number];