Merge remote-tracking branch 'origin' into feat/green-line-map

common/api/slowzones.ts

@@ -1,22 +1,18 @@
 import type {
-  DayDelayTotals,
   SlowZoneAllSlowResponse,
   SlowZoneDayTotalsResponse,
-  SlowZoneResponse,
   SpeedRestriction,
 } from '../types/dataPoints';
 import type { FetchSpeedRestrictionsOptions, FetchSpeedRestrictionsResponse } from '../types/api';
 import { getGtfsRailLineId } from '../utils/lines';
 import { apiFetch } from './utils/fetch';
 
-// TODO: Remove the Array option once the slowzone change is mature
-export const fetchDelayTotals = (): Promise<SlowZoneDayTotalsResponse | DayDelayTotals[]> => {
+export const fetchDelayTotals = (): Promise<SlowZoneDayTotalsResponse> => {
   const url = new URL(`/static/slowzones/delay_totals.json`, window.location.origin);
   return fetch(url.toString()).then((resp) => resp.json());
 };
 
-// TODO: Remove the Array option once the slowzone change is mature
-export const fetchAllSlow = (): Promise<SlowZoneAllSlowResponse | SlowZoneResponse[]> => {
+export const fetchAllSlow = (): Promise<SlowZoneAllSlowResponse> => {
   const all_slow_url = new URL(`/static/slowzones/all_slow.json`, window.location.origin);
   return fetch(all_slow_url.toString()).then((resp) => resp.json());
 };

common/components/inputs/DateSelection/DatePickers.tsx

@@ -110,9 +110,11 @@ export const DatePickers: React.FC<DatePickerProps> = ({ range, setRange, type,
           placeholder={'mm/dd/yyyy'}
           options={FLAT_PICKER_OPTIONS[tab]}
           onChange={(dates, currentDateString) => {
-            isSingleDate
-              ? handleDateChange(currentDateString)
-              : handleStartDateChange(currentDateString);
+            if (isSingleDate) {
+              handleDateChange(currentDateString);
+            } else {
+              handleStartDateChange(currentDateString);
+            }
           }}
           onMonthChange={() => updateColor(line)}
           onOpen={() => updateColor(line)}

common/components/widgets/MiniWidgetCreator.tsx

@@ -9,7 +9,6 @@ export interface MiniWidgetObject {
   widgetValue: WidgetValueInterface;
   text: string;
 }
-[];
 
 interface MiniWidgetCreatorProps {
   widgetObjects: MiniWidgetObject[];

common/types/delays.ts

@@ -12,6 +12,8 @@ export interface LineDelays {
   police_activity: number;
   power_problem: number;
   signal_problem: number;
+  track_work: number;
+  car_traffic: number;
   mechanical_problem: number;
   brake_problem: number;
   switch_problem: number;

modules/delays/charts/DelayBreakdownGraph.tsx

@@ -19,6 +19,7 @@ import { getFormattedTimeString } from '../../../common/utils/time';
 import { hexWithAlpha } from '../../../common/utils/general';
 import { getRemainingBlockAnnotation } from '../../service/utils/graphUtils';
 import { DATE_FORMAT, TODAY } from '../../../common/constants/dates';
+import { filterOutZeroValueDatasets } from './utils';
 
 interface DelayBreakdownGraphProps {
   data: LineDelays[];
@@ -59,7 +60,7 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
           redraw={true}
           data={{
             labels,
-            datasets: [
+            datasets: filterOutZeroValueDatasets([
               {
                 label: `🚉 Disabled Train`,
                 borderColor: '#dc2626',
@@ -104,6 +105,28 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
                 pointHoverBackgroundColor: lineColor,
                 data: data.map((datapoint) => datapoint.signal_problem),
               },
+              {
+                label: `🚙 Cars/Traffic`,
+                borderColor: '#f59e0b',
+                backgroundColor: hexWithAlpha('#f59e0b', 0.8),
+                pointRadius: 0,
+                pointBorderWidth: 0,
+                fill: true,
+                pointHoverRadius: 6,
+                pointHoverBackgroundColor: lineColor,
+                data: data.map((datapoint) => datapoint.car_traffic),
+              },
+              {
+                label: `🚧 Track Work`,
+                borderColor: '#f87171',
+                backgroundColor: hexWithAlpha('#f87171', 0.8),
+                pointRadius: 0,
+                pointBorderWidth: 0,
+                fill: true,
+                pointHoverRadius: 6,
+                pointHoverBackgroundColor: lineColor,
+                data: data.map((datapoint) => datapoint.track_work),
+              },
               {
                 label: `🎚️ Switch Problem`,
                 borderColor: '#10b981',
@@ -203,7 +226,7 @@ export const DelayBreakdownGraph: React.FC<DelayBreakdownGraphProps> = ({
                 pointHoverBackgroundColor: lineColor,
                 data: data.map((datapoint) => datapoint.other),
               },
-            ],
+            ]),
           }}
           options={{
             responsive: true,

modules/delays/charts/DelayByCategoryGraph.tsx

@@ -13,6 +13,7 @@ import { watermarkLayout } from '../../../common/constants/charts';
 import { ChartBorder } from '../../../common/components/charts/ChartBorder';
 import type { LineDelays } from '../../../common/types/delays';
 import { getFormattedTimeString } from '../../../common/utils/time';
+import { filterOutZeroValues } from './utils';
 
 interface DelayByCategoryGraphProps {
   data: LineDelays[];
@@ -40,54 +41,29 @@ export const DelayByCategoryGraph: React.FC<DelayByCategoryGraphProps> = ({
   const { linePath } = useDelimitatedRoute();
   const ref = useRef();
   const isMobile = !useBreakpoint('md');
-  const labels = [
-    '🚉 Disabled Train',
-    '🚪 Door Problem',
-    '🔌 Power/Wire Issue',
-    '🚦 Signal Problem',
-    '🎚️ Switch Problem',
-    '🛑 Brake Issue',
-    '🛤️ Track Issue',
-    '🔧 Mechanical Problem',
-    '🌊 Flooding',
-    '🚓 Police Activity',
-    '🚑 Medical Emergency',
-    '🚒 Fire Department Activity',
-    'Other',
-  ];
-  const backgroundColors = [
-    '#dc2626',
-    '#3f6212',
-    '#eab308',
-    '#84cc16',
-    '#10b981',
-    '#4c1d95',
-    '#8b5cf6',
-    '#451a03',
-    '#0ea5e9',
-    '#1d4ed8',
-    '#be123c',
-    '#ea580c',
-    '#6b7280',
-  ];
-  const delayTotals: number[] = sumArray(
-    data.map((datapoint) => {
-      return [
-        datapoint.disabled_vehicle,
-        datapoint.door_problem,
-        datapoint.power_problem,
-        datapoint.signal_problem,
-        datapoint.switch_problem,
-        datapoint.brake_problem,
-        datapoint.track_issue,
-        datapoint.mechanical_problem,
-        datapoint.flooding,
-        datapoint.police_activity,
-        datapoint.medical_emergency,
-        datapoint.fire,
-        datapoint.other,
-      ];
-    })
+
+  const { labels, backgroundColors, delayTotals } = filterOutZeroValues(
+    sumArray(
+      data.map((datapoint) => {
+        return [
+          datapoint.disabled_vehicle,
+          datapoint.door_problem,
+          datapoint.power_problem,
+          datapoint.signal_problem,
+          datapoint.switch_problem,
+          datapoint.brake_problem,
+          datapoint.track_issue,
+          datapoint.track_work,
+          datapoint.car_traffic,
+          datapoint.mechanical_problem,
+          datapoint.flooding,
+          datapoint.police_activity,
+          datapoint.medical_emergency,
+          datapoint.fire,
+          datapoint.other,
+        ];
+      })
+    )
   );
 
   return (

modules/delays/charts/utils.ts

@@ -0,0 +1,55 @@
+import type { ChartDataset } from 'chart.js';
+
+const labels = [
+  '🚉 Disabled Train',
+  '🚪 Door Problem',
+  '🔌 Power/Wire Issue',
+  '🚦 Signal Problem',
+  '🎚️ Switch Problem',
+  '🛑 Brake Issue',
+  '🛤️ Track Issue',
+  `🚧 Track Work`,
+  `🚙 Cars/Traffic`,
+  '🔧 Mechanical Problem',
+  '🌊 Flooding',
+  '🚓 Police Activity',
+  '🚑 Medical Emergency',
+  '🚒 Fire Department Activity',
+  'Other',
+];
+
+const backgroundColors = [
+  '#dc2626',
+  '#3f6212',
+  '#eab308',
+  '#84cc16',
+  '#10b981',
+  '#4c1d95',
+  '#8b5cf6',
+  '#f87171',
+  '#f59e0b',
+  '#451a03',
+  '#0ea5e9',
+  '#1d4ed8',
+  '#be123c',
+  '#ea580c',
+  '#6b7280',
+];
+
+export const filterOutZeroValues = (delayTotals: number[]) => {
+  const populatedDelayTotalIdxs = delayTotals.map((delayTotal, idx) => {
+    return delayTotal > 0 ? idx : -1;
+  });
+
+  return {
+    labels: labels.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+    backgroundColors: backgroundColors.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+    delayTotals: delayTotals.filter((_, idx) => populatedDelayTotalIdxs[idx] !== -1),
+  };
+};
+
+export const filterOutZeroValueDatasets = (datasets: ChartDataset<'line', number[]>[]) => {
+  return datasets.filter((dataset) => {
+    return dataset.data.some((data) => data > 0);
+  });
+};

modules/navigation/SidebarTabs.tsx

@@ -22,7 +22,9 @@ export const SidebarTabs: React.FC<SidebarTabs> = ({ tabs, close }) => {
   const handleChange = (enabled: boolean, tab: PageMetadata) => {
     if (!enabled) return null;
     handlePageConfig(tab);
-    close && close();
+    if (close) {
+      close();
+    }
   };
 
   return (

modules/slowzones/SlowZonesDetails.tsx

@@ -76,7 +76,7 @@ export function SlowZonesDetails() {
           <div className="relative flex flex-col">
             {totalSlowTimeReady ? (
               <TotalSlowTimeWrapper
-                data={isArray(delayTotals.data) ? delayTotals.data : delayTotals.data.data}
+                data={delayTotals.data.data}
                 startDateUTC={startDateUTC}
                 endDateUTC={endDateUTC}
                 line={line}
@@ -95,7 +95,7 @@ export function SlowZonesDetails() {
             {allSlow.data && speedRestrictions.data && canShowSlowZonesMap ? (
               <SlowZonesMap
                 key={lineShort}
-                slowZones={isArray(allSlow.data) ? allSlow.data : allSlow.data.data}
+                slowZones={allSlow.data}
                 speedRestrictions={speedRestrictions.data}
                 lineName={lineShort}
                 direction={isDesktop ? 'horizontal' : 'vertical'}

modules/slowzones/SlowZonesWidget.tsx

@@ -2,7 +2,6 @@
 import React from 'react';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import { isArray } from 'lodash';
 import { useDelimitatedRoute } from '../../common/utils/router';
 import { HomescreenWidgetTitle } from '../dashboard/HomescreenWidgetTitle';
 import { ChartPlaceHolder } from '../../common/components/graphics/ChartPlaceHolder';
@@ -33,7 +32,7 @@ export const SlowZonesWidget: React.FC = () => {
         <HomescreenWidgetTitle title="Slow zones" tab="slowzones" />
         {totalSlowTimeReady ? (
           <TotalSlowTimeWrapper
-            data={isArray(delayTotals.data) ? delayTotals.data : delayTotals.data.data}
+            data={delayTotals.data.data}
             startDateUTC={startDateUTC}
             endDateUTC={endDateUTC}
             line={line}

modules/slowzones/SystemSlowZonesDetails.tsx

@@ -99,7 +99,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
             {allData.data && speedRestrictions.data && canShowSlowZonesMap ? (
               <SlowZonesMap
                 key={lineShort}
-                slowZones={isArray(allData.data) ? allData.data : allData.data.data}
+                slowZones={allData.data}
                 speedRestrictions={speedRestrictions.data}
                 lineName={lineShort}
                 direction={isDesktop ? 'horizontal' : 'vertical'}

modules/slowzones/map/SlowSegmentLabel.module.css

@@ -1,16 +1,16 @@
 .slowSegmentLabel {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    /* This is in weird SVG values btw */
-    font-size: 2.5pt;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  /* This is in weird SVG values btw */
+  font-size: 2.5pt;
 }
 
 .slowZoneLabel {
-    display: flex;
-    align-items: baseline;
-    gap: 1.5px;
-}
+  display: flex;
+  align-items: baseline;
+  gap: 1.5px;
+}