Commuter rail in Data Dashboard

.vscode/settings.json

@@ -12,5 +12,6 @@
   "python.formatting.provider": "black",
   "[python]": {
     "editor.defaultFormatter": "ms-python.black-formatter"
-  }
+  },
+  "cSpell.words": ["MBTA"]
 }

common/components/charts/AggregateLineChart.tsx

@@ -106,6 +106,11 @@ export const AggregateLineChart: React.FC<AggregateLineProps> = ({
                 },
                 ticks: {
                   precision: 1,
+                  callback: (value) => {
+                    return yUnit === 'Minutes' && typeof value === 'number'
+                      ? getFormattedTimeString(value, 'minutes')
+                      : value.toLocaleString();
+                  },
                 },
                 suggestedMin: suggestedYMin,
                 suggestedMax: suggestedYMax,

common/components/charts/Legend.tsx

@@ -2,12 +2,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Disclosure } from '@headlessui/react';
 import React from 'react';
+import { useDelimitatedRoute } from '../../utils/router';
 
 interface LegendProps {
   showUnderRatio?: boolean;
 }
 
-export const LegendSingleDay: React.FC<LegendProps> = ({ showUnderRatio = false }) => {
+export const LegendSingleDay: React.FC<LegendProps> = ({ showUnderRatio }) => {
+  const { line } = useDelimitatedRoute();
   return (
     <Disclosure>
       {({ open }) => (
@@ -18,12 +20,28 @@
               <FontAwesomeIcon icon={open ? faChevronUp : faChevronDown} className="" />
             </div>
           </Disclosure.Button>
-          <Disclosure.Panel
-            className={
-              'grid w-full grid-cols-2 items-baseline p-1 px-4 text-left text-xs lg:flex lg:flex-row lg:gap-4'
-            }
-          >
-            <LegendSingle showUnderRatio={showUnderRatio} />
+          <Disclosure.Panel>
+            <div
+              className={
+                'grid w-full grid-cols-2 items-baseline p-1 px-4 text-left text-xs lg:flex lg:flex-row lg:gap-4'
+              }
+            >
+              <LegendSingle showUnderRatio={showUnderRatio} />
+            </div>
+
+            <div
+              className={
+                'mx-1 mb-1 grid w-full grid-cols-2 items-baseline p-1 px-4 text-left text-xs text-gray-500 lg:flex lg:flex-row lg:gap-4'
+              }
+            >
+              {line === 'line-commuter-rail' && (
+                <p>
+                  Due to how we collect data for Commuter Rail, we may occasionally miss trips or
+                  stops. This can lead to inaccuracies in headways numbers and gaps in travel time
+                  data. Confirm data you see here with official MBTA sources when possible.
+                </p>
+              )}
+            </div>
           </Disclosure.Panel>
         </div>
       )}
@@ -31,7 +49,7 @@
   );
 };
 
 const LegendSingle: React.FC<LegendProps> = ({ showUnderRatio = false }) => {
   return (
     <>
       <div className="col-span-2 flex flex-row items-baseline gap-2 pb-1 italic lg:pb-0">

common/components/charts/SingleDayLineChart.tsx

@@ -195,6 +195,11 @@ export const SingleDayLineChart: React.FC<SingleDayLineProps> = ({
                 display: true,
                 ticks: {
                   color: COLORS.design.subtitleGrey,
+                  callback: (value) => {
+                    return units === 'Minutes' && typeof value === 'number'
+                      ? getFormattedTimeString(value, 'minutes')
+                      : value.toLocaleString();
+                  },
                 },
                 title: {
                   display: true,

common/components/controls/ControlPanel.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import { lineColorBorder } from '../../styles/general';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import type { DateStoreSection } from '../../constants/pages';
 import { StationSelectorWidget } from '../widgets/StationSelectorWidget';
 import { DateControl } from './DateControl';
 
 interface ControlPanelProps {
   dateStoreSection: DateStoreSection;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
   line: Line | undefined;
 }
 
-export const ControlPanel: React.FC<ControlPanelProps> = ({ dateStoreSection, line, busRoute }) => {
+export const ControlPanel: React.FC<ControlPanelProps> = ({
+  dateStoreSection,
+  line,
+  busRoute,
+  crRoute,
+}) => {
   const getControls = () => {
     if ((dateStoreSection === 'singleTrips' || dateStoreSection === 'multiTrips') && line) {
       return (
@@ -21,7 +27,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({ dateStoreSection, li
             dateStoreSection={dateStoreSection}
             queryType={dateStoreSection === 'singleTrips' ? 'single' : 'range'}
           />
-          <StationSelectorWidget line={line} busRoute={busRoute} />
+          <StationSelectorWidget line={line} busRoute={busRoute} crRoute={crRoute} />
         </>
       );
     }

common/components/controls/MobileControlPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import type { DateStoreSection } from '../../constants/pages';
 import { lineColorBackground } from '../../styles/general';
 import { StationSelectorWidget } from '../widgets/StationSelectorWidget';
@@ -9,13 +9,15 @@ import { DateControl } from './DateControl';
 interface MobileControlPanelProps {
   dateStoreSection: DateStoreSection;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
   line: Line | undefined;
 }
 
 export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
   dateStoreSection,
   line,
   busRoute,
+  crRoute,
 }) => {
   const singleDate = dateStoreSection === 'singleTrips';
   const getControls = () => {
@@ -34,7 +36,7 @@ export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
               lineColorBackground[line ?? 'DEFAULT']
             )}
           >
-            <StationSelectorWidget line={line} busRoute={busRoute} />
+            <StationSelectorWidget line={line} busRoute={busRoute} crRoute={crRoute} />
           </div>
         </>
       );

common/components/inputs/DateSelection/DatePickers.tsx

@@ -7,7 +7,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Flatpickr from 'react-flatpickr';
 import 'flatpickr/dist/themes/light.css';
 import { useDelimitatedRoute, useUpdateQuery } from '../../../utils/router';
-import { FLAT_PICKER_OPTIONS, TODAY_STRING, RANGE_PRESETS } from '../../../constants/dates';
+import { TODAY_STRING, RANGE_PRESETS, getDatePickerOptions } from '../../../constants/dates';
 import { buttonHighlightFocus } from '../../../styles/general';
 import type { Line } from '../../../types/lines';
 import { ALL_PAGES } from '../../../constants/pages';
@@ -108,7 +108,7 @@ export const DatePickers: React.FC<DatePickerProps> = ({ range, setRange, type,
           value={startDate ?? date}
           key={'start'}
           placeholder={'mm/dd/yyyy'}
-          options={FLAT_PICKER_OPTIONS[tab]}
+          options={getDatePickerOptions(tab, page)}
           onChange={(dates, currentDateString) => {
             if (isSingleDate) {
               handleDateChange(currentDateString);
@@ -135,7 +135,7 @@ export const DatePickers: React.FC<DatePickerProps> = ({ range, setRange, type,
               value={endDate}
               key={'end'}
               placeholder={'mm/dd/yyyy'}
-              options={FLAT_PICKER_OPTIONS[tab]}
+              options={getDatePickerOptions(tab, page)}
               onChange={(dates, currentDateString) => {
                 handleEndDateChange(currentDateString);
               }}

common/components/inputs/StationSelector.tsx

@@ -5,7 +5,7 @@ import { faBicycle, faChevronDown, faWheelchair } from '@fortawesome/free-solid-
 import classNames from 'classnames';
 import type { Station } from '../../types/stations';
 import { useDelimitatedRoute } from '../../utils/router';
-import { optionsForField } from '../../utils/stations';
+import { optionsForField, stopIdsForStations } from '../../utils/stations';
 import {
   buttonHighlightFocus,
   lineColorBackground,
@@ -30,16 +30,17 @@ export const StationSelector: React.FC<StationSelector> = ({
   const {
     line,
     lineShort,
-    query: { busRoute },
+    query: { busRoute, crRoute },
   } = useDelimitatedRoute();
   const mdBreakpoint = useBreakpoint('md');
   const station = type === 'from' ? fromStation : toStation;
-  const stationOptions = optionsForField(type, lineShort, fromStation, busRoute);
+  const stationOptions = optionsForField(type, lineShort, fromStation, busRoute, crRoute);
   const branchLabelWidth = {
     'line-red': 'w-8',
     'line-green': 'w-12',
     DEFAULT: 'w-0',
   };
+
   return (
     <Listbox value={station} onChange={setStation}>
       {({ open }) => (
@@ -76,8 +77,10 @@ export const StationSelector: React.FC<StationSelector> = ({
                     key={stationIndex}
                     disabled={
                       type === 'from'
-                        ? station.station === toStation.station
-                        : station.station === fromStation.station
+                        ? station.station === toStation.station ||
+                          stopIdsForStations(station, toStation).fromStopIds?.length === 0
+                        : station.station === fromStation.station ||
+                          stopIdsForStations(fromStation, station).toStopIds?.length === 0
                     }
                     className={({ active, selected, disabled }) =>
                       classNames(

common/components/nav/CommuterRailDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SidebarTabs } from '../../../modules/navigation/SidebarTabs';
-import { COMMUTER_RAIL_OVERVIEW } from '../../constants/pages';
+import { COMMUTER_RAIL_OVERVIEW, TRIP_PAGES } from '../../constants/pages';
 import { CommuterRailRouteSelection } from './CommuterRailRouteSelection';
 
 interface CommuterRailDropdownProps {
@@ -18,10 +18,8 @@ export const CommuterRailDropdown: React.FC<CommuterRailDropdownProps> = ({ clos
         role={'navigation'}
       >
         <SidebarTabs tabs={COMMUTER_RAIL_OVERVIEW} close={close} />
-
-        {/* TODO: Once we have reliable travel data for CR */}
-        {/* <hr className="h-[1px] w-3/4 self-center border-neutral-500" /> */}
-        {/* <SidebarTabs tabs={TRIP_PAGES} close={close} /> */}
+        <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
+        <SidebarTabs tabs={TRIP_PAGES} close={close} />
       </div>
     </div>
   );

common/components/nav/MenuDropdown.tsx

@@ -44,7 +44,7 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
       case 'line-bus':
         return `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`;
       case 'line-commuter-rail':
-        return `/commuter-rail/ridership?crRoute=CR-Lowell&startDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.startDate}&endDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.endDate}`;
+        return `/commuter-rail/trips/single?crRoute=CR-Fairmount&date=${COMMUTER_RAIL_DEFAULTS.singleTripConfig.date}`;
       default:
         return getLineSelectionItemHref(line, route);
     }

common/components/notices/BetaDataNotice.tsx

@@ -1,28 +1,14 @@
 import React from 'react';
-import dayjs from 'dayjs';
 import Link from 'next/link';
 import classNames from 'classnames';
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
 import { useDelimitatedRoute } from '../../utils/router';
-import { BUS_MAX_DAY } from '../../constants/dates';
 import { lineColorTextHover } from '../../styles/general';
 
 export const BetaDataNotice: React.FC = () => {
-  const {
-    line,
-    linePath,
-    query: { date, startDate, endDate },
-  } = useDelimitatedRoute();
+  const { line, linePath } = useDelimitatedRoute();
 
-  const isStartDateAfterBusMaxDay =
-    (startDate !== undefined && dayjs(startDate).isAfter(BUS_MAX_DAY)) ||
-    (date !== undefined && dayjs(date).isAfter(BUS_MAX_DAY));
-  const isEndDateAfterBusMaxDay = endDate !== undefined && dayjs(endDate).isAfter(BUS_MAX_DAY);
-
-  if (
-    (line === 'line-commuter-rail' || linePath === 'commuter-rail') &&
-    (isStartDateAfterBusMaxDay || isEndDateAfterBusMaxDay)
-  ) {
+  if (line === 'line-commuter-rail' || linePath === 'commuter-rail') {
     return (
       <div className="rounded-md bg-yellow-50 p-4">
         <div className="flex">

common/components/notices/CommuterRailDataNotice.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLocationCrosshairs } from '@fortawesome/free-solid-svg-icons';
+import { useDelimitatedRoute } from '../../utils/router';
+
+export const CommuterRailDataNotice: React.FC = () => {
+  const { line, linePath } = useDelimitatedRoute();
+
+  if (line === 'line-commuter-rail' || linePath === 'commuter-rail') {
+    return (
+      <div className={'flex items-center'}>
+        <FontAwesomeIcon icon={faLocationCrosshairs} size={'lg'} />
+        <div className={'mx-3 my-2 text-sm italic'}>
+          <p>
+            Due to how we collect data for Commuter Rail, we may occasionally miss trips or stops.
+            This can lead to inaccuracies in headways numbers and gaps in travel time data. Confirm
+            data you see here with official MBTA sources when possible.
+          </p>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};

common/components/widgets/StationSelectorWidget.tsx

@@ -11,24 +11,31 @@ import {
   optionsStation,
   stopIdsForStations,
 } from '../../utils/stations';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import { LINE_OBJECTS } from '../../constants/lines';
 import type { Station } from '../../types/stations';
 
 interface StationSelectorWidgetProps {
   line: Line;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
 }
 
-export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ line, busRoute }) => {
+export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({
+  line,
+  busRoute,
+  crRoute,
+}) => {
   const updateQueryParams = useUpdateQuery();
   const lineShort = LINE_OBJECTS[line].short;
   const {
     query: { from, to },
   } = useDelimitatedRoute();
-  const stations = optionsStation(lineShort, busRoute);
+
+  const stations = optionsStation(lineShort, busRoute, crRoute);
   const toStation = to ? getParentStationForStopId(to, lineShort) : stations?.[stations.length - 2];
   const fromStation = from ? getParentStationForStopId(from, lineShort) : stations?.[1];
+
   React.useEffect(() => {
     const { fromStopIds, toStopIds } = stopIdsForStations(fromStation, toStation);
     updateQueryParams({ from: fromStopIds?.[0], to: toStopIds?.[0] });