From e2247be7005ab589cd1ccb2b1687c4bf872c0b51 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sat, 7 Feb 2026 22:47:13 +0000
Subject: [PATCH] Apply Color By metric change instantly without data re-fetch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The metric dropdown only updated form state, requiring "Apply Filters"
to take effect — which re-fetched identical data and remounted the Map,
making the result look unchanged. Now the Select's onValueChange
immediately propagates the metric to queryParameters, so the Map
re-renders in-place with the new color scheme, legend, and hex values.
---
 crawler/frontend/src/App.tsx                    | 8 +++++++-
 crawler/frontend/src/components/FilterPanel.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/crawler/frontend/src/App.tsx b/crawler/frontend/src/App.tsx
index a401c55..c0a6b41 100644
--- a/crawler/frontend/src/App.tsx
+++ b/crawler/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import AlertError from './components/AlertError';
 import LoginModal from './components/LoginModal';
 import AuthCallback from './components/AuthCallback';
 import { Map } from './components/Map';
-import { FilterPanel, type ParameterValues, DEFAULT_FILTER_VALUES } from './components/FilterPanel';
+import { FilterPanel, type ParameterValues, DEFAULT_FILTER_VALUES, Metric } from './components/FilterPanel';
 import { Header } from './components/Header';
 import { StatsBar, type ViewMode } from './components/StatsBar';
 import { ListView } from './components/ListView';
@@ -162,6 +162,10 @@ function App() {
     }
   };
 
+  const handleMetricChange = (metric: Metric) => {
+    setQueryParameters(prev => prev ? { ...prev, metric } : null);
+  };
+
   const handlePropertyClick = (property: PropertyProperties, _coordinates: [number, number]) => {
     setHighlightedProperty(property.url);
     // Optionally: pan map to coordinates
@@ -254,6 +258,7 @@ function App() {
         <div className="hidden md:block w-64 shrink-0 h-full overflow-hidden">
           <FilterPanel
             onSubmit={onSubmit}
+            onMetricChange={handleMetricChange}
             isLoading={isLoading}
             listingCount={listingData?.features.length}
           />
@@ -270,6 +275,7 @@ function App() {
             <SheetContent side="left" className="w-80 p-0">
               <FilterPanel
                 onSubmit={onSubmit}
+                onMetricChange={handleMetricChange}
                 isLoading={isLoading}
                 listingCount={listingData?.features.length}
               />
diff --git a/crawler/frontend/src/components/FilterPanel.tsx b/crawler/frontend/src/components/FilterPanel.tsx
index dc9ab3a..3810079 100644
--- a/crawler/frontend/src/components/FilterPanel.tsx
+++ b/crawler/frontend/src/components/FilterPanel.tsx
@@ -66,6 +66,7 @@ export interface ParameterValues {
 
 interface FilterPanelProps {
     onSubmit: (action: 'fetch-data' | 'visualize', fromValues: ParameterValues) => void;
+    onMetricChange?: (metric: Metric) => void;
     isLoading?: boolean;
     listingCount?: number;
 }
@@ -89,7 +90,7 @@ const formSchema = z.object({
 
 type FormValues = z.infer<typeof formSchema>;
 
-export function FilterPanel({ onSubmit, isLoading, listingCount }: FilterPanelProps) {
+export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount }: FilterPanelProps) {
     const [availableFromRawInput, setAvailableFromRawInput] = useState("now");
     const [selectedFurnishTypes, setSelectedFurnishTypes] = useState<FurnishType[]>([]);
 
@@ -202,7 +203,10 @@ export function FilterPanel({ onSubmit, isLoading, listingCount }: FilterPanelPr
                                             render={({ field }) => (
                                                 <FormItem>
                                                     <FormLabel className="text-xs">Color by</FormLabel>
-                                                    <Select onValueChange={field.onChange} defaultValue={field.value}>
+                                                    <Select onValueChange={(value) => {
+                                                        field.onChange(value);
+                                                        onMetricChange?.(value as Metric);
+                                                    }} defaultValue={field.value}>
                                                         <FormControl>
                                                             <SelectTrigger className="h-8 text-sm">
                                                                 <SelectValue placeholder="Metric" />