urlsearch pars for #209

src/app/compare/page.tsx

@@ -1,4 +1,5 @@
 
+import { Suspense } from 'react';
 import type { Metadata, Viewport } from 'next';
 
 import ButtonAppBar from '@/components/appBar';
@@ -28,7 +29,9 @@ export default function Home(): JSX.Element {
     return (
         <>
         <ButtonAppBar text={buttonTxt} />
-        <ComparePage />
+        <Suspense fallback={null}>
+            <ComparePage />
+        </Suspense>
         </>
     )
 }

src/components/compare/comparePage.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useState, lazy, Suspense, useMemo, useCallback } from "react";
+import { useState, lazy, Suspense, useMemo, useCallback, useEffect } from "react";
+import { useSearchParams } from 'next/navigation';
 import { ChartSkeleton, ControlSkeleton } from '@/components/utils/loadingSkeletons';
 import { ErrorBoundary, ErrorSkeleton } from '@/components/utils/errorBoundary';
 
@@ -12,7 +13,7 @@ import styles from '@/styles/Home.module.css';
 
 import { CITY_DATA } from '@/data/citydata';
 import { DataRangeKeys } from '@/data/interfaces';
-import { useCompareState } from '@/components/utils/localStorageUtils';
+import { useCompareState, type CompareState } from '@/components/utils/localStorageUtils';
 import { useTourLogic } from '@/components/utils/tourUtils';
 import { NUM_LAYERS_OPTIONS } from '@/components/utils/pageConstants';
 import type { NumLayersMode } from '@/components/utils/pageConstants';
@@ -94,17 +95,46 @@ function ComparePagePresentation({
     );
 }
 
+const COMPARE_QUERY_KEYS = ['layer', 'layer2', 'numLayers', 'sortOpt', 'meanVals'] as const;
+
 export default function ComparePage(): JSX.Element {
 
     const [_cityData] = useState(CITY_DATA.citiesArray[0]);
 
     const numLayersOptions: NumLayersMode[] = useMemo(() => [...NUM_LAYERS_OPTIONS], []);
 
-    const { state, actions } = useCompareState();
+    const searchParams = useSearchParams();
+    // Capture URL params on the initial render only via lazy useState. Next.js patches
+    // replaceState, so useSearchParams() would otherwise update after the first URL write
+    // and flip hasFullQuery to true, breaking subsequent URL updates from state changes.
+    const [urlOverrides] = useState<Partial<CompareState> | undefined>(() =>
+        searchParams && COMPARE_QUERY_KEYS.every(k => searchParams.has(k)) ? {
+            layer: searchParams.get('layer') as DataRangeKeys,
+            layer2: searchParams.get('layer2') as DataRangeKeys,
+            numLayers: searchParams.get('numLayers') as "Single" | "Paired",
+            sortOpt: searchParams.get('sortOpt') ?? '',
+            meanVals: searchParams.get('meanVals') === 'true'
+        } : undefined
+    );
+    const hasFullQuery = urlOverrides !== undefined;
+
+    const { state, actions } = useCompareState(urlOverrides);
     const { layer, layer2, numLayers, sortOpt, meanVals } = state;
 
     const { tourProps, handleTourOpen } = useTourLogic();
 
+    useEffect(() => {
+        if (hasFullQuery) return;
+        const params = new URLSearchParams({
+            layer,
+            layer2,
+            numLayers,
+            sortOpt,
+            meanVals: String(meanVals)
+        });
+        window.history.replaceState(null, '', `?${params.toString()}`);
+    }, [hasFullQuery, layer, layer2, numLayers, sortOpt, meanVals]);
+
     const processedCitiesData = useMemo(() => {
         return {
             citiesArray: CITY_DATA.citiesArray,

src/components/map/map.tsx

@@ -4,7 +4,7 @@ import { Map } from "react-map-gl";
 
 import mapLayer from '@/components/map/mapLayer'
 
-import { MapProps } from "@/components/map/mapPage";
+import { MapProps } from "@/components/map/mapPageContent";
 
 const MapboxAccessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN
 

src/components/map/mapLayer.tsx

@@ -2,7 +2,7 @@ import { GeoJsonLayer } from "@deck.gl/layers/typed";
 import * as d3 from 'd3';
 import 'd3-scale-chromatic';
 
-import { MapProps } from "@/components/map/mapPage";
+import { MapProps } from "@/components/map/mapPageContent";
 import { calculateLayerRanges } from "@/components/utils/layerUtils";
 
 export default function MapLayer(props: MapProps): any[] {