Merge branch 'main' into use-lamp-data

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node-version: ['20']
-        python-version: ['3.11']
+        python-version: ['3.12']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3

.github/workflows/deploy.yml

@@ -13,7 +13,7 @@ jobs:
     strategy:
       matrix:
         node-version: ['20']
-        python-version: ['3.11']
+        python-version: ['3.12']
     env:
       AWS_PROFILE: transitmatters
       AWS_DEFAULT_REGION: us-east-1

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       matrix:
         node-version: ['20']
-        python-version: ['3.11']
+        python-version: ['3.12']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
@@ -38,7 +38,7 @@ jobs:
     strategy:
       matrix:
         node-version: ['20']
-        python-version: ['3.11']
+        python-version: ['3.12']
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3

.python-version

@@ -1 +1 @@
-3.11.6
+3.12.2

README.md

@@ -12,7 +12,7 @@ This is the repository for the TransitMatters Data Dashboard. Client code is wri
 - node 20.x and npm 9.x+ required
   - With `nvm` installed, use `nvm install && nvm use`
   - verify with `node -v`
-- Python 3.11 with recent poetry (1.6.0 or later)
+- Python 3.12 with recent poetry (1.7.0 or later)
   - Verify with `python --version && poetry --version`
   - `poetry self update` to update poetry
 

common/api/hooks/alerts.ts

@@ -10,27 +10,29 @@ export const useHistoricalAlertsData = (
   line: LineShort,
   busRoute?: string
 ) => {
-  return useQuery(
-    ['alerts', date, line, busRoute],
-    () => fetchHistoricalAlerts(date, line, busRoute),
-    {
-      staleTime: FIVE_MINUTES,
-      enabled: date !== undefined,
-    }
-  );
+  return useQuery({
+    queryKey: ['alerts', date, line, busRoute],
+    queryFn: () => fetchHistoricalAlerts(date, line, busRoute),
+    staleTime: FIVE_MINUTES,
+    enabled: date !== undefined,
+  });
 };
 
 export const useAlertsData = (
   line: LineShort,
   busRoute?: string
 ): UseQueryResult<AlertsResponse[]> => {
-  return useQuery(['alerts', line, busRoute], () => fetchAlerts(line, busRoute), {
+  return useQuery({
+    queryKey: ['alerts', line, busRoute],
+    queryFn: () => fetchAlerts(line, busRoute),
     staleTime: ONE_MINUTE,
   });
 };
 
 export const useAccessibilityAlertsData = (line: LineShort) => {
-  return useQuery(['accessibilityAlerts', line], () => fetchAccessibilityAlertsForLine(line), {
+  return useQuery({
+    queryKey: ['accessibilityAlerts', line],
+    queryFn: () => fetchAccessibilityAlertsForLine(line),
     staleTime: ONE_MINUTE,
   });
 };

common/api/hooks/predictions.ts

@@ -4,7 +4,9 @@ import { fetchPredictions } from '../predictions';
 import type { FetchPredictionsParams } from '../../types/api';
 
 export const usePredictionData = (params: FetchPredictionsParams, enabled: boolean = true) => {
-  return useQuery(['predictions', params], () => fetchPredictions(params), {
+  return useQuery({
+    queryKey: ['predictions', params],
+    queryFn: () => fetchPredictions(params),
     enabled: enabled,
     staleTime: ONE_HOUR,
   });

common/api/hooks/ridership.ts

@@ -4,12 +4,14 @@ import { fetchLandingRidership, fetchRidership } from '../ridership';
 import { ONE_HOUR } from '../../constants/time';
 
 export const useRidershipData = (options: FetchRidershipOptions, enabled?: boolean) => {
-  return useQuery(['trips', options], () => fetchRidership(options), {
+  return useQuery({
+    queryKey: ['trips', options],
+    queryFn: () => fetchRidership(options),
     enabled: enabled,
     staleTime: ONE_HOUR,
   });
 };
 
 export const useRidershipDataLanding = () => {
-  return useQuery(['ridership-landing'], () => fetchLandingRidership());
+  return useQuery({ queryKey: ['ridership-landing'], queryFn: () => fetchLandingRidership() });
 };

common/api/hooks/service.ts

@@ -4,14 +4,18 @@ import { ONE_HOUR } from '../../constants/time';
 import { fetchScheduledService, fetchServiceHours } from '../service';
 
 export const useScheduledService = (options: FetchScheduledServiceOptions, enabled?: boolean) => {
-  return useQuery(['scheduledservice', options], () => fetchScheduledService(options), {
+  return useQuery({
+    queryKey: ['scheduledservice', options],
+    queryFn: () => fetchScheduledService(options),
     enabled: enabled,
     staleTime: ONE_HOUR,
   });
 };
 
 export const useServiceHours = (params: FetchServiceHoursOptions, enabled?: boolean) => {
-  return useQuery(['service_hours', params], () => fetchServiceHours(params), {
+  return useQuery({
+    queryKey: ['service_hours', params],
+    queryFn: () => fetchServiceHours(params),
     enabled: enabled,
     staleTime: 0,
   });

common/api/hooks/slowzones.ts

@@ -4,15 +4,17 @@ import { ONE_HOUR } from '../../constants/time';
 import type { FetchSpeedRestrictionsOptions } from '../../types/api';
 
 export const useSlowzoneAllData = () => {
-  return useQuery(['allSlow'], fetchAllSlow, { staleTime: ONE_HOUR });
+  return useQuery({ queryKey: ['allSlow'], queryFn: fetchAllSlow, staleTime: ONE_HOUR });
 };
 
 export const useSlowzoneDelayTotalData = () => {
-  return useQuery(['delayTotals'], fetchDelayTotals, { staleTime: ONE_HOUR });
+  return useQuery({ queryKey: ['delayTotals'], queryFn: fetchDelayTotals, staleTime: ONE_HOUR });
 };
 
 export const useSpeedRestrictionData = (options: FetchSpeedRestrictionsOptions) => {
-  return useQuery(['speedRestrictions', options], () => fetchSpeedRestrictions(options), {
+  return useQuery({
+    queryKey: ['speedRestrictions', options],
+    queryFn: () => fetchSpeedRestrictions(options),
     enabled: options.date !== undefined,
     staleTime: ONE_HOUR,
   });

common/api/hooks/speed.ts

@@ -4,7 +4,9 @@ import type { FetchSpeedsOptions } from '../../types/api';
 import { FIVE_MINUTES } from '../../constants/time';
 
 export const useSpeedData = (options: FetchSpeedsOptions, enabled?: boolean) => {
-  return useQuery(['speed', options], () => fetchSpeeds(options), {
+  return useQuery({
+    queryKey: ['speed', options],
+    queryFn: () => fetchSpeeds(options),
     enabled: enabled,
     staleTime: FIVE_MINUTES,
   });

common/api/hooks/tripmetrics.ts

@@ -7,12 +7,14 @@ export const useDeliveredTripMetrics = (
   options: FetchDeliveredTripMetricsOptions,
   enabled?: boolean
 ) => {
-  return useQuery(['actualTrips', options], () => fetchActualTripsByLine(options), {
+  return useQuery({
+    queryKey: ['actualTrips', options],
+    queryFn: () => fetchActualTripsByLine(options),
     enabled: enabled,
     staleTime: FIVE_MINUTES,
   });
 };
 
 export const useTripMetricsForLanding = () => {
-  return useQuery(['landingTrips'], () => fetchLandingTripMetrics());
+  return useQuery({ queryKey: ['landingTrips'], queryFn: () => fetchLandingTripMetrics() });
 };

common/components/widgets/WidgetDiv.tsx

@@ -8,7 +8,7 @@ interface WidgetDivProps {
 
 export const WidgetDiv: React.FC<WidgetDivProps> = ({ children, className }) => {
   return (
-    <div className={classNames(className, 'h-full rounded-lg bg-white p-4 shadow-dataBox')}>
+    <div className={classNames(className, 'h-full rounded-lg bg-white p-3 shadow-dataBox sm:p-4')}>
       {children}
     </div>
   );

common/layouts/DashboardLayout.tsx

@@ -23,8 +23,8 @@ export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) =>
     <div className="flex flex-1 flex-col pb-24 md:pb-0 md:pl-64">
       <main className="flex-1">
         {isMobile ? <MobileHeader /> : <DesktopHeader />}
-        <div className="py-2 md:py-6">
-          <div className="h-full px-4 sm:px-6 md:px-8">
+        <div className="py-2 md:py-4">
+          <div className="h-full px-2 sm:px-4 md:px-6">
             <WidgetPage>{children}</WidgetPage>
           </div>
         </div>

common/layouts/PrimaryLayout.tsx

@@ -19,7 +19,7 @@ const queryClient = new QueryClient({
 export const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <ReactQueryDevtools position="bottom-right" />
+      <ReactQueryDevtools buttonPosition="top-left" />
       <div className="flex h-screen flex-col">
         <main className="relative h-full">{children}</main>
       </div>

modules/commute/alerts/Alerts.tsx

@@ -21,7 +21,7 @@ export const Alerts: React.FC<AlertsProps> = ({ title, alerts }) => {
   } = useDelimitatedRoute();
 
   const divStyle = classNames(
-    'flex flex-col rounded-md py-4 text-white shadow-dataBox w-full gap-y-2 md:max-h-[309px] md:overflow-y-auto',
+    'flex flex-col rounded-md py-3 sm:py-4 text-white shadow-dataBox w-full gap-y-2 md:max-h-[309px] md:overflow-y-auto',
     lineColorBackground[line ?? 'DEFAULT']
   );
 
@@ -43,7 +43,7 @@ export const Alerts: React.FC<AlertsProps> = ({ title, alerts }) => {
           <Divider title="Today" line={line} />
 
           <AlertBox
-            alerts={alerts.data}
+            alerts={alerts.data || []}
             lineShort={lineShort}
             busRoute={busRoute}
             type={'current'}
@@ -53,7 +53,7 @@ export const Alerts: React.FC<AlertsProps> = ({ title, alerts }) => {
           <Divider title="Upcoming" line={line} />
 
           <AlertBox
-            alerts={alerts.data}
+            alerts={alerts.data || []}
             lineShort={lineShort}
             busRoute={busRoute}
             type={'upcoming'}

modules/landing/charts/OverallRidershipChartWrapper.tsx

@@ -5,7 +5,8 @@ import { OverallRidershipChart } from './OverallRidershipChart';
 
 export const OverallRidershipChartWrapper: React.FC = () => {
   const ridershipData = useRidershipDataLanding();
-  const ridershipDataReady = !ridershipData.isLoading && !ridershipData.isError;
+  const ridershipDataReady =
+    !ridershipData.isLoading && !ridershipData.isError && ridershipData.data;
   if (!ridershipDataReady) return <ChartPlaceHolder query={ridershipData} />;
   return <OverallRidershipChart ridershipData={ridershipData.data} />;
 };

modules/landing/charts/OverallServiceChartWrapper.tsx

@@ -5,7 +5,7 @@ import { OverallServiceChart } from './OverallServiceChart';
 
 export const OverallServiceChartWrapper: React.FC = () => {
   const serviceData = useTripMetricsForLanding();
-  const serviceDataReady = !serviceData.isLoading && !serviceData.isError;
+  const serviceDataReady = !serviceData.isLoading && !serviceData.isError && serviceData.data;
   if (!serviceDataReady) return <ChartPlaceHolder query={serviceData} />;
 
   return <OverallServiceChart serviceData={serviceData.data} />;

modules/landing/charts/OverallSpeedChartWrapper.tsx

@@ -5,7 +5,7 @@ import { OverallSpeedChart } from './OverallSpeedChart';
 
 export const OverallSpeedChartWrapper: React.FC = () => {
   const speedData = useTripMetricsForLanding();
-  const speedDataReady = !speedData.isLoading && !speedData.isError;
+  const speedDataReady = !speedData.isLoading && !speedData.isError && speedData.data;
   if (!speedDataReady) return <ChartPlaceHolder query={speedData} />;
 
   return <OverallSpeedChart speedData={speedData.data} />;

modules/slowzones/SystemSlowZonesDetails.tsx

@@ -118,7 +118,7 @@ export function SystemSlowZonesDetails({ showTitle = false }: SystemSlowZonesDet
             })}
           />
         </WidgetDiv>
-        <div className="h-full rounded-lg bg-white p-4 shadow-dataBox">
+        <div className="h-full rounded-lg bg-white p-3 shadow-dataBox sm:p-4">
           <div className="flex flex-col p-4 sm:p-0 lg:flex-row">
             <WidgetTitle title={`${DirectionObject[direction]} segments`} />
             <div className="lg:ml-2">

next.config.js

@@ -21,6 +21,7 @@ const nextConfig = {
   async rewrites() {
     return rewrites;
   },
+  output: 'export',
   trailingSlash: true,
   reactStrictMode: true,
   transpilePackages: ['next-goatcounter'],