feat: add slow zone map for green line

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/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

@@ -48,7 +48,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) {

modules/slowzones/SlowZonesWidget.tsx

@@ -23,7 +23,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 {

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

@@ -53,6 +53,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];