Apply Color By metric change instantly without data re-fetch
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.
This commit is contained in:
parent
5e2c5923f6
commit
e2247be700
2 changed files with 13 additions and 3 deletions
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue