Optimise

frontend/src/App.tsx

@@ -600,6 +600,12 @@ export default function App() {
           bounds: boundsStr,
         });
         if (filtersStr) params.set('filters', filtersStr);
+        // Only request data for the actively viewed feature (reduces bandwidth)
+        if (viewFeature) {
+          params.set('fields', viewFeature);
+        } else {
+          params.set('fields', '');
+        }
         const res = await fetch(`${getApiBaseUrl()}/api/hexagons?${params}`, {
           signal: abortControllerRef.current.signal,
         });
@@ -619,7 +625,7 @@ export default function App() {
         clearTimeout(debounceRef.current);
       }
     };
-  }, [resolution, bounds, filters, buildFilterParam]);
+  }, [resolution, bounds, filters, buildFilterParam, viewFeature]);
 
   // During slider drag, use the expanded dataset (without active feature filter)
   // so both narrowing and expanding are visible. Otherwise use server-filtered data.
@@ -745,6 +751,8 @@ export default function App() {
       const boundsStr = `${bounds.south},${bounds.west},${bounds.north},${bounds.east}`;
       const params = new URLSearchParams({ resolution: resolution.toString(), bounds: boundsStr });
       if (filtersStr) params.set('filters', filtersStr);
+      // Only request the dragged feature's data
+      params.set('fields', name);
 
       fetch(`${getApiBaseUrl()}/api/hexagons?${params}`, {
         signal: dragAbortRef.current.signal,
@@ -786,7 +794,7 @@ export default function App() {
   }, []);
 
   const fetchHexagonStats = useCallback(
-    async (h3: string, res: number, signal?: AbortSignal) => {
+    async (h3: string, res: number, signal?: AbortSignal, fields?: string[]) => {
       const params = new URLSearchParams({
         h3,
         resolution: res.toString(),
@@ -805,6 +813,9 @@ export default function App() {
           .join(',');
         params.append('filters', filterStr);
       }
+      if (fields) {
+        params.set('fields', fields.join(','));
+      }
       const response = await fetch(`${getApiBaseUrl()}/api/hexagon-stats?${params}`, { signal });
       return (await response.json()) as HexagonStatsResponse;
     },
@@ -903,7 +914,9 @@ export default function App() {
         try {
           if (rightPaneTab === 'area') {
             setLoadingHoveredAreaStats(true);
-            const stats = await fetchHexagonStats(h3, resolution, signal);
+            // On hover, only fetch stats for features that have active filters
+            const hoverFields = Object.keys(filters);
+            const stats = await fetchHexagonStats(h3, resolution, signal, hoverFields.length > 0 ? hoverFields : undefined);
             if (!signal.aborted) setHoveredAreaStats(stats);
           } else if (rightPaneTab === 'properties') {
             const params = new URLSearchParams({

frontend/src/usePlausible.ts

@@ -1,5 +1,6 @@
 const DOMAIN = 'narrowit.schmelczer.dev';
 const ENDPOINT = '/status';
+const IS_DEV = process.env.NODE_ENV !== 'production';
 
 type EventOptions = {
   props?: Record<string, string | number | boolean>;
@@ -7,6 +8,8 @@ type EventOptions = {
 };
 
 function sendEvent(name: string, options?: EventOptions) {
+  if (IS_DEV) return;
+
   const payload: Record<string, unknown> = {
     n: name,
     u: window.location.href,

frontend/webpack.config.js

@@ -51,12 +51,6 @@ module.exports = (env, argv) => {
           context: ['/api'],
           target: 'http://localhost:8001',
         },
-        {
-          context: ['/status'],
-          target: 'https://stats.schmelczer.dev',
-          changeOrigin: true,
-          pathRewrite: { '^/status': '/api/event' },
-        },
       ],
     },
   };