Improve error message on timeout requests

common/components/graphics/ChartPlaceHolder.tsx

@@ -17,7 +17,7 @@ export const ChartPlaceHolder: React.FC<ChartPlaceHolder> = ({
   const isError = query?.isError || readyState === 'error';
   return (
     <div className="relative flex h-60 w-full items-center justify-center">
-      {isError ? <ErrorNotice inverse={inverse} /> : <LoadingSpinner />}
+      {isError ? <ErrorNotice query={query} inverse={inverse} /> : <LoadingSpinner />}
     </div>
   );
 };

common/components/notices/ErrorNotice.tsx

@@ -2,17 +2,22 @@ import { faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import React from 'react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import { useDelimitatedRoute } from '../../utils/router';
 import { mbtaTextConfig } from '../../styles/general';
 
 interface ErrorNoticeProps {
+  query?: UseQueryResult<unknown>;
   isWidget?: boolean;
   inverse?: boolean;
 }
 
-export const ErrorNotice: React.FC<ErrorNoticeProps> = ({ isWidget, inverse }) => {
+export const ErrorNotice: React.FC<ErrorNoticeProps> = ({ isWidget, inverse, query }) => {
   const { line } = useDelimitatedRoute();
 
+  const errorMessage = query?.error?.['message'];
+  const timeout = errorMessage === 'network request failed';
+
   const color = !inverse && line ? mbtaTextConfig[line] : undefined;
   return (
     <div
@@ -22,7 +27,14 @@ export const ErrorNotice: React.FC<ErrorNoticeProps> = ({ isWidget, inverse }) =
       )}
     >
       <FontAwesomeIcon size={'3x'} icon={faTriangleExclamation} className={color} />
-      <>An error has occurred</>
+      {timeout ? (
+        <>
+          <p>The response took too long</p>
+          <p>Try shrinking the date range and try again</p>
+        </>
+      ) : (
+        <p>An error has occurred</p>
+      )}
     </div>
   );
 };

server/chalicelib/s3_historical.py

@@ -88,7 +88,7 @@ def headways(stop_ids, sdate, edate):
             {
                 "route_id": this["route_id"],
                 "direction": this["direction_id"],
-                "current_dep_dt": this["event_time"],
+                "current_dep_dt": date_utils.return_formatted_date(this_dt),
                 "headway_time_sec": headway_time_sec,
                 "benchmark_headway_time_sec": benchmark_headway,
             }