Live Bus Data Beta Release (#963)

* Day of bus data beta release

* Improved beta banner language

common/components/charts/ChartPageDiv.tsx

@@ -5,5 +5,5 @@ interface ChartPageDivProps {
 }
 
 export const ChartPageDiv: React.FC<ChartPageDivProps> = ({ children }) => {
-  return <div className="flex w-full max-w-7xl flex-col gap-4 md:gap-8">{children}</div>;
+  return <div className="flex w-full max-w-7xl flex-col gap-4 md:gap-6">{children}</div>;
 };

common/components/notices/BetaDataNotice.tsx

@@ -0,0 +1,67 @@
+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 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-bus' || linePath === 'bus') &&
+    (isStartDateAfterBusMaxDay || isEndDateAfterBusMaxDay)
+  ) {
+    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">Real-time bus data is in beta</h3>
+            <div className="mt-2 text-sm text-yellow-700">
+              <p>
+                Data shown here is collected by TransitMatters using the{' '}
+                <Link
+                  href="https://www.mbta.com/developers/v3-api/streaming"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className={classNames(lineColorTextHover[line ?? 'DEFAULT'])}
+                >
+                  MBTA's V3 API
+                </Link>
+                . Unlike other data sources we show, this data is not cleaned or filtered in any way
+                before display. Please expect reduced accuracy.
+              </p>
+              <p>
+                We favor official performance data from the MBTA when it's available. Technical
+                details of our data collection can be found{' '}
+                <Link
+                  href="https://github.com/transitmatters/gobble"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className={classNames(lineColorTextHover[line ?? 'DEFAULT'])}
+                >
+                  here
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+  return null;
+};

common/components/notices/SameDayNotice.tsx

@@ -6,11 +6,12 @@ import { TODAY_STRING } from '../../constants/dates';
 
 export const SameDayNotice: React.FC = () => {
   const {
+    line,
     query: { date, endDate },
   } = useDelimitatedRoute();
   const isToday = date === TODAY_STRING || endDate === TODAY_STRING;
 
-  if (isToday) {
+  if (isToday && line !== 'line-bus') {
     return (
       <div className={'flex items-center'}>
         <FontAwesomeIcon icon={faCalendarDay} size={'lg'} />

common/constants/dates.ts

@@ -59,7 +59,7 @@ export const FLAT_PICKER_OPTIONS: {
   Bus: {
     enableTime: false,
     minDate: BUS_MIN_DATE,
-    maxDate: BUS_MAX_DATE,
+    maxDate: TODAY_STRING,
     altInput: true,
     altFormat: 'M j, Y',
     dateFormat: 'Y-m-d',
@@ -141,7 +141,7 @@ export const SINGLE_PRESETS: {
   [key in Tab]: { [key in DatePresetKey]?: DateSelectionDefaultOptions<SingleDateParams> };
 } = {
   Subway: SINGLE_RAPID_PRESETS,
-  Bus: SINGLE_BUS_PRESETS,
+  Bus: SINGLE_RAPID_PRESETS,
   System: SINGLE_RAPID_PRESETS,
 };
 
@@ -263,7 +263,7 @@ export const RANGE_PRESETS: {
   [key in Tab]: { [key in DatePresetKey]?: DateSelectionDefaultOptions<DateParams> };
 } = {
   Subway: RANGE_RAPID_PRESETS,
-  Bus: RANGE_BUS_PRESETS,
+  Bus: RANGE_RAPID_PRESETS,
   System: RANGE_RAPID_PRESETS,
 };
 

common/state/defaults/dateDefaults.ts

@@ -2,8 +2,6 @@ import type { Tab } from '../../constants/dashboardTabs';
 import type { DateStoreSection } from '../../constants/pages';
 import type { DateStoreConfiguration } from '../types/dateStoreTypes';
 import {
-  BUS_MAX_DATE,
-  BUS_MAX_DATE_MINUS_ONE_WEEK,
   ONE_WEEK_AGO_STRING,
   OVERVIEW_OPTIONS,
   TODAY_STRING,
@@ -28,11 +26,11 @@ export const BUS_DEFAULTS: WithOptional<DateStoreConfiguration, 'systemConfig' |
   {
     lineConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING },
     multiTripConfig: {
-      startDate: BUS_MAX_DATE_MINUS_ONE_WEEK,
-      endDate: BUS_MAX_DATE,
+      startDate: ONE_WEEK_AGO_STRING,
+      endDate: TODAY_STRING,
     },
     singleTripConfig: {
-      date: BUS_MAX_DATE,
+      date: TODAY_SERVICE_STARTED ? TODAY_STRING : YESTERDAY_STRING,
     },
   };
 

modules/landing/LineButton.tsx

@@ -29,7 +29,7 @@ export const LineButton: React.FC<LineButtonProps> = ({ children, line }) => {
       </div>
       <div className="flex flex-row items-baseline gap-2 md:flex-col md:items-center">
         <h3 className="text-center text-3xl md:text-xl">{LINE_OBJECTS[line].name}</h3>
-        {line === 'line-bus' && <p className="text-center font-bold">(WIP)</p>}
+        {line === 'line-bus' && <p className="text-center font-bold">(Beta)</p>}
       </div>
     </Link>
   );

modules/tripexplorer/TripExplorer.tsx

@@ -11,6 +11,7 @@ import { useDelimitatedRoute } from '../../common/utils/router';
 import { getParentStationForStopId } from '../../common/utils/stations';
 import { BusDataNotice } from '../../common/components/notices/BusDataNotice';
 import { GobbleDataNotice } from '../../common/components/notices/GobbleDataNotice';
+import { BetaDataNotice } from '../../common/components/notices/BetaDataNotice';
 import { useAlertStore } from './AlertStore';
 import { TripGraphs } from './TripGraphs';
 
@@ -37,6 +38,7 @@ export const TripExplorer = () => {
   return (
     <PageWrapper pageTitle={'Trips'}>
       <ChartPageDiv>
+        <BetaDataNotice />
         {alertsForModal?.length ? <AlertNotice /> : null}
         <TripGraphs fromStation={fromStation} toStation={toStation} />
         <div>

server/chalicelib/s3.py

@@ -78,6 +78,7 @@ def download_one_event_file(date, stop_id: str, use_live_data=False):
 @parallel.make_parallel
 def parallel_download_events(datestop):
     (date, stop) = datestop
+    # TODO: Force gobble when date is past the max monthly data date
     return download_one_event_file(date, stop)