Merge branch 'fix/ridden-roads-client-cache'

Author: chadbeaudin

app/page.tsx

@@ -27,6 +27,7 @@ import { ElevationProfile } from '@/components/ElevationProfile';
 import pkg from '@/package.json';
 import { haversineM, toSemicircles } from '@/lib/geometry';
 import { shareOrDownloadGpx } from '@/lib/gpxShare';
+import { missingTiles as missingRoadTiles, bboxForTiles as roadBboxForTiles, tileKey as roadTileKey } from '@/lib/roadTiles';
 
 export default function Home() {
     const [bbox, setBbox] = useState<{ south: number; west: number; north: number; east: number } | null>(null);
@@ -106,6 +107,8 @@ export default function Home() {
     const clickChainRef = useRef<Promise<void>>(Promise.resolve());
     const generateAbortControllerRef = useRef<AbortController | null>(null);
     const roadsAbortControllerRef = useRef<AbortController | null>(null);
+    const fetchedRoadTilesRef = useRef<Set<string>>(new Set());
+    const roadTileCacheRef = useRef<[number, number][][]>([]);
     const pointsRef = useRef<{ lat: number; lon: number; id: string; status?: 'pending' | 'snapped' }[]>([]);
     const manualRouteRef = useRef<[number, number][][]>([]);
     const historyRef = useRef<{ points: { lat: number; lon: number; id: string; status?: 'pending' | 'snapped' }[], route: [number, number][][], selectionBoxes: { north: number; south: number; east: number; west: number }[], preAreaPointCount: number | null }[]>([]);
@@ -363,25 +366,46 @@ export default function Home() {
     useEffect(() => {
         if (!bbox) return;
 
+        // Tile the viewport (plus a small buffer) at a coarse grid so panning only
+        // fetches the newly-revealed tiles instead of re-downloading the whole
+        // viewport's road geometry every time — this is the single biggest source
+        // of Vercel "Fast Origin Transfer" usage, since /api/roads fires on every
+        // pan/zoom (moveend).
+        const missing = missingRoadTiles(bbox, fetchedRoadTilesRef.current);
+
+        if (missing.length === 0) {
+            // Every tile in view has already been fetched — reuse the accumulated
+            // cache, no network request needed.
+            if (roadTileCacheRef.current.length > 0) setAllRoads(roadTileCacheRef.current);
+            return;
+        }
+
         roadsAbortControllerRef.current?.abort();
         roadsAbortControllerRef.current = new AbortController();
         const signal = roadsAbortControllerRef.current.signal;
 
+        // Fetch only the bounding box covering the missing tiles, not the full viewport.
+        const fetchBbox = roadBboxForTiles(missing);
+
         const timer = setTimeout(() => {
             fetch('/api/roads', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ bbox }),
+                body: JSON.stringify({ bbox: fetchBbox }),
                 signal
             })
                 .then(res => res.json())
                 .then(data => {
                     if (data.roads) {
-                        console.log(`[StreetSweep] Received ${data.roads.length} roadmap segments.`);
+                        console.log(`[StreetSweep] Received ${data.roads.length} roadmap segments for ${missing.length} new tiles.`);
                         // Keep the previous road set if this fetch came back empty
                         // (transient Overpass hiccup) so ridden-road snapping doesn't
                         // fall back to raw GPS traces.
-                        if (data.roads.length > 0) setAllRoads(data.roads);
+                        if (data.roads.length > 0) {
+                            for (const t of missing) fetchedRoadTilesRef.current.add(roadTileKey(t));
+                            roadTileCacheRef.current = roadTileCacheRef.current.concat(data.roads);
+                            setAllRoads(roadTileCacheRef.current);
+                        }
                         setServiceWarning(!!data.degraded);
                     }
                 })

lib/roadTiles.test.ts

@@ -0,0 +1,50 @@
+import { tilesForBBox, tileKey, missingTiles, bboxForTiles, ROAD_TILE } from './roadTiles';
+
+describe('roadTiles', () => {
+    const bbox = { south: 40.0, west: -74.0, north: 40.02, east: -73.98 };
+
+    it('tilesForBBox covers the requested area', () => {
+        const tiles = tilesForBBox(bbox);
+        expect(tiles.length).toBeGreaterThan(0);
+        const box = bboxForTiles(tiles);
+        expect(box.south).toBeLessThanOrEqual(bbox.south);
+        expect(box.north).toBeGreaterThanOrEqual(bbox.north);
+        expect(box.west).toBeLessThanOrEqual(bbox.west);
+        expect(box.east).toBeGreaterThanOrEqual(bbox.east);
+    });
+
+    it('missingTiles excludes already-fetched tiles', () => {
+        const all = tilesForBBox(bbox);
+        const fetched = new Set(all.slice(0, Math.floor(all.length / 2)).map(tileKey));
+        const missing = missingTiles(bbox, fetched);
+        expect(missing.length).toBe(all.length - fetched.size);
+        for (const t of missing) expect(fetched.has(tileKey(t))).toBe(false);
+    });
+
+    it('missingTiles returns empty once every tile is fetched', () => {
+        const all = tilesForBBox(bbox);
+        const fetched = new Set(all.map(tileKey));
+        expect(missingTiles(bbox, fetched)).toEqual([]);
+    });
+
+    it('a pan into an adjacent area only requests the new tiles', () => {
+        const original = tilesForBBox(bbox);
+        const fetched = new Set(original.map(tileKey));
+
+        const panned = { south: 40.0, west: -74.0 + ROAD_TILE, north: 40.02, east: -73.98 + ROAD_TILE };
+        const missing = missingTiles(panned, fetched);
+
+        expect(missing.length).toBeGreaterThan(0);
+        expect(missing.length).toBeLessThan(tilesForBBox(panned).length);
+    });
+
+    it('bboxForTiles returns the bounding box of the given tiles', () => {
+        const tiles = [{ ty: 1, tx: 2 }, { ty: 3, tx: 4 }];
+        expect(bboxForTiles(tiles)).toEqual({
+            south: 1 * ROAD_TILE,
+            north: 4 * ROAD_TILE,
+            west: 2 * ROAD_TILE,
+            east: 5 * ROAD_TILE,
+        });
+    });
+});

lib/roadTiles.ts

@@ -0,0 +1,37 @@
+export const ROAD_TILE = 0.01; // ~1.1km cells
+export const ROAD_TILE_BUFFER = 0.002;
+
+export interface BBox { south: number; west: number; north: number; east: number }
+export interface TileCoord { ty: number; tx: number }
+
+// Tiles covering a bbox (plus a small buffer), at the ROAD_TILE grid.
+export function tilesForBBox(bbox: BBox): TileCoord[] {
+    const minTy = Math.floor((bbox.south - ROAD_TILE_BUFFER) / ROAD_TILE);
+    const maxTy = Math.ceil((bbox.north + ROAD_TILE_BUFFER) / ROAD_TILE);
+    const minTx = Math.floor((bbox.west - ROAD_TILE_BUFFER) / ROAD_TILE);
+    const maxTx = Math.ceil((bbox.east + ROAD_TILE_BUFFER) / ROAD_TILE);
+
+    const tiles: TileCoord[] = [];
+    for (let ty = minTy; ty < maxTy; ty++) {
+        for (let tx = minTx; tx < maxTx; tx++) tiles.push({ ty, tx });
+    }
+    return tiles;
+}
+
+export const tileKey = (t: TileCoord) => `${t.ty},${t.tx}`;
+
+// Given a set of already-fetched tile keys, return the tiles in bbox that
+// still need fetching.
+export function missingTiles(bbox: BBox, fetched: Set<string>): TileCoord[] {
+    return tilesForBBox(bbox).filter(t => !fetched.has(tileKey(t)));
+}
+
+// Smallest bbox (on the tile grid) covering a set of tiles.
+export function bboxForTiles(tiles: TileCoord[]): BBox {
+    return {
+        south: Math.min(...tiles.map(t => t.ty)) * ROAD_TILE,
+        north: Math.max(...tiles.map(t => t.ty + 1)) * ROAD_TILE,
+        west: Math.min(...tiles.map(t => t.tx)) * ROAD_TILE,
+        east: Math.max(...tiles.map(t => t.tx + 1)) * ROAD_TILE,
+    };
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "street-sweep",
-  "version": "0.6.44",
+  "version": "0.6.45",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3888",