viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply Color By metric change instantly without data re-fetch

Browse source 
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:
Viktor Barzin 2026-02-07 22:47:13 +00:00
parent 5e2c5923f6
commit e2247be700
No known key found for this signature in database
GPG key ID: 0EB088298288D958
2 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
crawler/frontend/src/App.tsx
View file

@ -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}
/>

8
crawler/frontend/src/components/FilterPanel.tsx
View file

@ -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" />