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>

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/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/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/map/SlowZonesMap.tsx

@@ -149,7 +149,7 @@ export const SlowZonesMap: React.FC<SlowZonesMapProps> = ({
       diagram={diagram}
       strokeOptions={{ stroke: line.color }}
       direction={direction}
-      getSegments={getSegmentsForSlowZones}
+      getSegments={(isHorizontal) => []}
       getStationLabel={abbreviateStationName}
       tooltip={{ snapToSegment: true, maxDistance: 20, render: renderSlowZonesTooltip }}
     />

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];