diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx index 092c7fec..c005d859 100644 --- a/src/app/[locale]/layout.tsx +++ b/src/app/[locale]/layout.tsx @@ -100,7 +100,9 @@ export default async function LocaleLayout({ - + diff --git a/src/app/components/CoveredAreaMap.tsx b/src/app/components/CoveredAreaMap.tsx index 95ed4421..c597806e 100644 --- a/src/app/components/CoveredAreaMap.tsx +++ b/src/app/components/CoveredAreaMap.tsx @@ -33,7 +33,6 @@ import { computeBoundingBox } from '../screens/Feed/Feed.functions'; import { displayFormattedDate } from '../utils/date'; import { useSelector } from 'react-redux'; import ModeOfTravelIcon from '@mui/icons-material/ModeOfTravel'; -import { GtfsVisualizationMap } from './GtfsVisualizationMap'; import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'; import { useRemoteConfig } from '../context/RemoteConfigProvider'; import { sendGAEvent } from '@next/third-parties/google'; @@ -45,6 +44,13 @@ import { // Dynamically import Map and MapGeoJSON for code splitting and bundle size // Useful since these components are rendered conditionally to the tab and will only import when on page +const GtfsVisualizationMap = dynamic( + async () => + await import('./GtfsVisualizationMap').then( + (mod) => mod.GtfsVisualizationMap, + ), + { ssr: false }, +); const MapGeoJSON = dynamic( async () => await import('./MapGeoJSON').then((mod) => mod.MapGeoJSON), { ssr: false }, diff --git a/src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx b/src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx index 450df9fa..63b7f1fc 100644 --- a/src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx +++ b/src/app/screens/Analytics/GBFSFeedAnalytics/GBFSFeedAnalyticsTable.tsx @@ -89,20 +89,20 @@ export const useTableColumns = (): Array< }) => (
{cell.getValue()?.map((version, index) => ( -
{ router.push(`/metrics/gbfs/versions?version=${version}`); }} > {version} -
+ ))}
), diff --git a/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx b/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx index 814fe7e6..9aca6434 100644 --- a/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx +++ b/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx @@ -24,7 +24,6 @@ import { Typography, } from '@mui/material'; -import '../analytics.css'; import { useSearchParams } from 'next/navigation'; import { fetchAvailableFilesStart, diff --git a/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx b/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx index 018f9c30..dd5c813f 100644 --- a/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx +++ b/src/app/screens/Analytics/GTFSFeedAnalytics/GTFSFeedAnalyticsTable.tsx @@ -51,8 +51,11 @@ export const useTableColumns = ( title={`Open feed ${cell.getValue()} page in new tab`} placement='top-start' > -
{ const url = `/feeds/${cell.getValue()}`; window.open(url, '_blank'); @@ -60,7 +63,7 @@ export const useTableColumns = ( > {renderedCellValue}{' '} -
+ ), }, @@ -157,20 +160,20 @@ export const useTableColumns = ( Cell: ({ cell }: { cell: MRT_Cell }) => (
{cell.getValue()?.map((error, index) => ( -
{ router.push(`/metrics/gtfs/notices?noticeCode=${error}`); }} > {error} -
+ ))}
), @@ -180,9 +183,20 @@ export const useTableColumns = ( Header: ( Notice Severity : - + ERROR - + ), Footer: () => ( @@ -199,20 +213,20 @@ export const useTableColumns = ( Cell: ({ cell }: { cell: MRT_Cell }) => (
{cell.getValue()?.map((warning, index) => ( -
{ router.push(`/metrics/gtfs/notices?noticeCode=${warning}`); }} > {warning} -
+ ))}
), @@ -222,9 +236,20 @@ export const useTableColumns = ( Header: ( Notice Severity : - + WARNING - + ), Footer: () => ( @@ -241,28 +266,39 @@ export const useTableColumns = ( Header: ( Notice Severity : - + INFO - + ), Cell: ({ cell }: { cell: MRT_Cell }) => (
{cell.getValue()?.map((info, index) => ( -
{ router.push(`/metrics/gtfs/notices?noticeCode=${info}`); }} > {info} -
+ ))}
), @@ -313,10 +349,16 @@ export const useTableColumns = ( {group} {features.map((featureData, index) => ( -
{ router.push( `/metrics/gtfs/features?featureName=${featureData.feature}`, @@ -332,7 +374,7 @@ export const useTableColumns = ( {componentDecorator.icon} )} -
+ ))} ); diff --git a/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx b/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx index 37bc6702..00854b09 100644 --- a/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx +++ b/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx @@ -18,7 +18,6 @@ import { Typography, } from '@mui/material'; -import '../analytics.css'; import { useSearchParams } from 'next/navigation'; import { fetchAvailableFilesStart, @@ -36,10 +35,7 @@ import { type AnalyticsFile, type GTFSFeedMetrics } from '../types'; import { useRemoteConfig } from '../../../context/RemoteConfigProvider'; import DownloadIcon from '@mui/icons-material/Download'; import { download, generateCsv, mkConfig } from 'export-to-csv'; - -let globalAnalyticsBucketEndpoint: string | undefined; -export const getAnalyticsBucketEndpoint = (): string | undefined => - globalAnalyticsBucketEndpoint; +import { setAnalyticsBucketEndpoint } from '../utils'; export default function GTFSFeedAnalytics(): React.ReactElement { const searchParams = useSearchParams(); @@ -79,7 +75,7 @@ export default function GTFSFeedAnalytics(): React.ReactElement { }; React.useEffect(() => { - globalAnalyticsBucketEndpoint = config.gtfsMetricsBucketEndpoint; + setAnalyticsBucketEndpoint(config.gtfsMetricsBucketEndpoint); dispatch(fetchAvailableFilesStart()); }, [dispatch, config.gtfsMetricsBucketEndpoint]); diff --git a/src/app/screens/Analytics/analytics.css b/src/app/screens/Analytics/analytics.css deleted file mode 100644 index 9a32e6e6..00000000 --- a/src/app/screens/Analytics/analytics.css +++ /dev/null @@ -1,32 +0,0 @@ -.navigable-list-item:hover { - text-decoration: underline; - color: #000; -} - -.navigable-list-item{ - cursor: pointer; -} - -.notice-severity-label { - border-radius: 5px; - padding: 5px; - margin-left: 5px; - margin-bottom: 2px; - width: fit-content; - -} - -.notice-severity-label.notice-severity-error { - background-color: #d54402; - color: white; -} - -.notice-severity-label.notice-severity-warning { - background-color: #f3c280; - color: black; -} - -.notice-severity-label.notice-severity-info { - background-color: #badfb7; - color: black; -} diff --git a/src/app/screens/Feed/components/FeedSummary.tsx b/src/app/screens/Feed/components/FeedSummary.tsx index 93e66f1a..135af5b3 100644 --- a/src/app/screens/Feed/components/FeedSummary.tsx +++ b/src/app/screens/Feed/components/FeedSummary.tsx @@ -51,11 +51,16 @@ import { StyledListItem, } from '../Feed.styles'; import { getFeatureComponentDecorators } from '../../../utils/consts'; -import Locations from '../../../components/Locations'; +import dynamic from 'next/dynamic'; import CopyLinkElement from './CopyLinkElement'; import { formatDateShort } from '../../../utils/date'; import ExternalIds from './ExternalIds'; +const Locations = dynamic( + async () => await import('../../../components/Locations'), + { ssr: false }, +); + export interface FeedSummaryProps { feed: GTFSFeedType | GTFSRTFeedType | GBFSFeedType | undefined; sortedProviders: string[]; diff --git a/src/app/store/saga/gtfs-analytics-saga.ts b/src/app/store/saga/gtfs-analytics-saga.ts index 7c6803ad..3a91de0d 100644 --- a/src/app/store/saga/gtfs-analytics-saga.ts +++ b/src/app/store/saga/gtfs-analytics-saga.ts @@ -13,7 +13,7 @@ import { type GTFSMetrics, } from '../../screens/Analytics/types'; import { getLocationName } from '../../services/feeds/utils'; -import { getAnalyticsBucketEndpoint } from '../../screens/Analytics/GTFSFeedAnalytics'; +import { getAnalyticsBucketEndpoint } from '../../screens/Analytics/utils'; function* fetchFeedMetricsSaga( action: ReturnType, diff --git a/src/app/styles/Footer.css b/src/app/styles/Footer.css deleted file mode 100644 index 383f26f7..00000000 --- a/src/app/styles/Footer.css +++ /dev/null @@ -1,17 +0,0 @@ -.footer { - width: 100%; - text-align: center; - padding: 40px 8px; - font-size: 13px; - box-sizing: border-box; - min-height: 210px; -} - -.link-button:hover { - color: white !important; - background-color: #3959fa !important; -} - -.link-button:hover svg path { - fill: white; -} \ No newline at end of file