Improve map

frontend/src/App.jsx

@@ -1,48 +1,77 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import Map from './components/Map';
 import Filters from './components/Filters';
 import { DEFAULT_FILTERS } from './lib/constants';
 
+const DEBOUNCE_MS = 150;
+
 export default function App() {
   const [filters, setFilters] = useState(DEFAULT_FILTERS);
   const [data, setData] = useState([]);
   const [resolution, setResolution] = useState(8);
+  const [bounds, setBounds] = useState(null);
   const [loading, setLoading] = useState(false);
+  const debounceRef = useRef(null);
+  const abortControllerRef = useRef(null);
 
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    try {
-      const params = new URLSearchParams({
-        resolution: resolution.toString(),
-        min_year: filters.minYear.toString(),
-        max_year: filters.maxYear.toString(),
-        min_price: filters.minPrice.toString(),
-        max_price: filters.maxPrice.toString(),
-      });
-      const res = await fetch(`/api/hexagons?${params}`);
-      const json = await res.json();
-      setData(
-        json.features.map((f) => ({
-          h3: f.properties.h3,
-          ...f.properties,
-        }))
-      );
-    } catch (err) {
-      console.error('Failed to fetch data:', err);
-    } finally {
-      setLoading(false);
-    }
-  }, [filters, resolution]);
-
+  // Debounced fetch when dependencies change
   useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+    if (!bounds) return;
+
+    // Clear previous debounce timer
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    debounceRef.current = setTimeout(async () => {
+      // Cancel any in-flight request
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+      abortControllerRef.current = new AbortController();
+
+      setLoading(true);
+      try {
+        const boundsStr = `${bounds.south},${bounds.west},${bounds.north},${bounds.east}`;
+        const params = new URLSearchParams({
+          resolution: resolution.toString(),
+          min_year: filters.minYear.toString(),
+          max_year: filters.maxYear.toString(),
+          min_price: filters.minPrice.toString(),
+          max_price: filters.maxPrice.toString(),
+          bounds: boundsStr,
+        });
+        const res = await fetch(`/api/hexagons?${params}`, {
+          signal: abortControllerRef.current.signal,
+        });
+        const json = await res.json();
+        setData(json.features || []);
+      } catch (err) {
+        if (err.name !== 'AbortError') {
+          console.error('Failed to fetch data:', err);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }, DEBOUNCE_MS);
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [filters, resolution, bounds]);
+
+  const handleViewChange = useCallback(({ resolution: newRes, bounds: newBounds }) => {
+    setResolution(newRes);
+    setBounds(newBounds);
+  }, []);
 
   return (
     <div className="h-screen flex">
       <Filters filters={filters} onChange={setFilters} />
       <div className="flex-1 relative">
-        <Map data={data} onZoom={setResolution} />
+        <Map data={data} onViewChange={handleViewChange} />
         {loading && (
           <div className="absolute top-4 right-4 bg-white px-3 py-1 rounded shadow">
             Loading...