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

Add per-POI travel time filtering and fix heatmap color stops

Browse source 
Replace the single global max travel time filter with per-POI filters.
Each POI gets its own travel mode selector and max minutes input in the
filter panel. Listings must satisfy ALL active filters (AND logic).

Fix Mapbox "Input is not a number" error by ensuring color stops are
always strictly monotonic (guard min === max) and always set (even when
no valid metric values exist). Also filter Infinity values from the
color scale computation. Widen the filter panel from w-64 to w-80.
This commit is contained in:
Viktor Barzin 2026-02-08 16:02:46 +00:00
parent 81d31eaecf
commit 07d4fa5f84
No known key found for this signature in database
GPG key ID: 0EB088298288D958
5 changed files with 193 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/App.tsx
View file

@ -15,7 +15,7 @@ import { StreamingProgressBar } from './components/StreamingProgressBar';
import { Sheet, SheetContent, SheetTrigger } from './components/ui/sheet';
import { Button } from './components/ui/button';
import { Filter } from 'lucide-react';
import type { GeoJSONFeatureCollection, PropertyProperties, PropertyFeature, POI } from '@/types';
import type { GeoJSONFeatureCollection, PropertyProperties, PropertyFeature, POI, POITravelFilter } from '@/types';
import { refreshListings, fetchTasksForUser, streamListingGeoJSON, fetchUserPOIs, type StreamingProgress } from '@/services';
import { poiMetricPropertyName, injectPoiMetricProperty } from '@/utils/poiUtils';
@ -39,7 +39,7 @@ function App() {
poiName: string;
travelMode: 'WALK' | 'BICYCLE' | 'TRANSIT';
} | null>(null);
const [maxTravelMinutes, setMaxTravelMinutes] = useState<number | undefined>(undefined);
const [poiTravelFilters, setPoiTravelFilters] = useState<Record<number, POITravelFilter>>({});
// Ref to track accumulated features during streaming
const accumulatedFeaturesRef = useRef<PropertyFeature[]>([]);
@ -151,18 +151,26 @@ function App() {
);
}
// Filter by max travel time
if (maxTravelMinutes !== undefined && poiMetricSelection) {
const maxSeconds = maxTravelMinutes * 60;
const propName = poiMetricPropertyName(poiMetricSelection.poiId, poiMetricSelection.travelMode);
// Filter by per-POI max travel time (AND logic: listing must satisfy all active filters)
const activeFilters = Object.entries(poiTravelFilters)
.filter(([, f]) => f.maxMinutes !== undefined)
.map(([id, f]) => ({ poiId: Number(id), travelMode: f.travelMode, maxMinutes: f.maxMinutes! }));
if (activeFilters.length > 0) {
features = features.filter((f) => {
const value = (f.properties as Record<string, unknown>)[propName] as number | undefined;
return value !== undefined && value <= maxSeconds;
const distances = f.properties.poi_distances;
if (!distances) return false;
return activeFilters.every((filter) => {
const dist = distances.find(
(d) => d.poi_id === filter.poiId && d.travel_mode === filter.travelMode,
);
return dist !== undefined && dist.duration_seconds <= filter.maxMinutes * 60;
});
});
}
return { ...listingData, features };
}, [listingData, poiMetricSelection, maxTravelMinutes]);
}, [listingData, poiMetricSelection, poiTravelFilters]);
// Compute the effective metric string for the heatmap
const effectiveMetric = useMemo(() => {
@ -342,7 +350,7 @@ function App() {
{/* Main content area */}
<div className="flex-1 flex overflow-hidden min-h-0">
{/* Filter Panel - Desktop (fixed sidebar) */}
<div className="hidden md:block w-64 shrink-0 h-full overflow-hidden">
<div className="hidden md:block w-80 shrink-0 h-full overflow-hidden">
<FilterPanel
onSubmit={onSubmit}
onMetricChange={handleMetricChange}
@ -354,8 +362,8 @@ function App() {
pickedPoiLocation={pickedPoiLocation}
userPOIs={userPOIs}
onPoiMetricChange={setPoiMetricSelection}
maxTravelMinutes={maxTravelMinutes}
onMaxTravelMinutesChange={setMaxTravelMinutes}
poiTravelFilters={poiTravelFilters}
onPoiTravelFiltersChange={setPoiTravelFilters}
/>
</div>
@ -379,8 +387,8 @@ function App() {
pickedPoiLocation={pickedPoiLocation}
userPOIs={userPOIs}
onPoiMetricChange={setPoiMetricSelection}
maxTravelMinutes={maxTravelMinutes}
onMaxTravelMinutesChange={setMaxTravelMinutes}
poiTravelFilters={poiTravelFilters}
onPoiTravelFiltersChange={setPoiTravelFilters}
/>
</SheetContent>
</Sheet>

118
frontend/src/components/FilterPanel.tsx
View file

@ -12,12 +12,14 @@ import { Loader2, Filter, RefreshCw, MapPin } from "lucide-react";
import { ScrollArea } from "./ui/scroll-area";
import { POIManager } from "./POIManager";
import type { AuthUser } from "@/auth/types";
import type { POI, POITravelFilter } from "@/types";
export enum Metric {
qmprice = 'qmprice',
rooms = 'rooms',
qm = 'qm',
price = 'total_price',
poi_travel = 'poi_travel',
}
export enum ListingType {
@ -73,6 +75,12 @@ interface FilterPanelProps {
listingCount?: number;
user?: AuthUser;
onTaskCreated?: (taskId: string) => void;
onStartPoiPicking?: () => void;
pickedPoiLocation?: { lat: number; lng: number } | null;
userPOIs?: POI[];
onPoiMetricChange?: (selection: { poiId: number; poiName: string; travelMode: 'WALK' | 'BICYCLE' | 'TRANSIT' } | null) => void;
poiTravelFilters?: Record<number, POITravelFilter>;
onPoiTravelFiltersChange?: (filters: Record<number, POITravelFilter>) => void;
}
const formSchema = z.object({
@ -94,9 +102,11 @@ const formSchema = z.object({
type FormValues = z.infer<typeof formSchema>;
export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount, user, onTaskCreated }: FilterPanelProps) {
export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount, user, onTaskCreated, onStartPoiPicking, pickedPoiLocation, userPOIs, onPoiMetricChange, poiTravelFilters, onPoiTravelFiltersChange }: FilterPanelProps) {
const [availableFromRawInput, setAvailableFromRawInput] = useState("now");
const [selectedFurnishTypes, setSelectedFurnishTypes] = useState<FurnishType[]>([]);
const [selectedPoiId, setSelectedPoiId] = useState<string>('');
const [selectedTravelMode, setSelectedTravelMode] = useState<string>('');
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
@ -210,6 +220,9 @@ export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount,
<Select onValueChange={(value) => {
field.onChange(value);
onMetricChange?.(value as Metric);
if (value !== Metric.poi_travel) {
onPoiMetricChange?.(null);
}
}} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="h-8 text-sm">
@ -221,12 +234,61 @@ export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount,
<SelectItem value={Metric.rooms}>Bedrooms</SelectItem>
<SelectItem value={Metric.qm}>Size (m²)</SelectItem>
<SelectItem value={Metric.price}>Total Price</SelectItem>
{userPOIs && userPOIs.length > 0 && (
<SelectItem value={Metric.poi_travel}>Travel Time</SelectItem>
)}
</SelectContent>
</Select>
<FormMessage />
</FormItem>
)}
/>
{form.watch('metric') === Metric.poi_travel && userPOIs && userPOIs.length > 0 && (
<>
<div>
<FormLabel className="text-xs">POI</FormLabel>
<Select value={selectedPoiId} onValueChange={(value) => {
setSelectedPoiId(value);
if (value && selectedTravelMode) {
const poi = userPOIs.find(p => String(p.id) === value);
if (poi) {
onPoiMetricChange?.({ poiId: poi.id, poiName: poi.name, travelMode: selectedTravelMode as 'WALK' | 'BICYCLE' | 'TRANSIT' });
}
}
}}>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="Select POI" />
</SelectTrigger>
<SelectContent>
{userPOIs.map(poi => (
<SelectItem key={poi.id} value={String(poi.id)}>{poi.name}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div>
<FormLabel className="text-xs">Travel Mode</FormLabel>
<Select value={selectedTravelMode} onValueChange={(value) => {
setSelectedTravelMode(value);
if (selectedPoiId && value) {
const poi = userPOIs.find(p => String(p.id) === selectedPoiId);
if (poi) {
onPoiMetricChange?.({ poiId: poi.id, poiName: poi.name, travelMode: value as 'WALK' | 'BICYCLE' | 'TRANSIT' });
}
}
}}>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="Select mode" />
</SelectTrigger>
<SelectContent>
<SelectItem value="WALK">Walk</SelectItem>
<SelectItem value="BICYCLE">Bicycle</SelectItem>
<SelectItem value="TRANSIT">Transit</SelectItem>
</SelectContent>
</Select>
</div>
</>
)}
<FormField
control={form.control}
name="listing_type"
@ -549,7 +611,61 @@ export function FilterPanel({ onSubmit, onMetricChange, isLoading, listingCount,
user={user}
listingType={watchedListingType as 'RENT' | 'BUY'}
onTaskCreated={onTaskCreated}
onStartPicking={onStartPoiPicking}
pickedLocation={pickedPoiLocation}
/>
{userPOIs && userPOIs.length > 0 && (
<div className="mt-4 pt-3 border-t">
<FormLabel className="text-xs">Max Travel Time</FormLabel>
<div className="space-y-2 mt-2">
{userPOIs.map((poi) => {
const filter = poiTravelFilters?.[poi.id];
const travelMode = filter?.travelMode ?? 'WALK';
const maxMinutes = filter?.maxMinutes;
return (
<div key={poi.id} className="flex items-center gap-1.5">
<span className="text-xs truncate w-16 shrink-0" title={poi.name}>{poi.name}</span>
<Select
value={travelMode}
onValueChange={(value) => {
onPoiTravelFiltersChange?.({
...poiTravelFilters,
[poi.id]: { travelMode: value as 'WALK' | 'BICYCLE' | 'TRANSIT', maxMinutes },
});
}}
>
<SelectTrigger className="h-7 text-xs w-[88px] shrink-0">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="WALK">Walk</SelectItem>
<SelectItem value="BICYCLE">Bicycle</SelectItem>
<SelectItem value="TRANSIT">Transit</SelectItem>
</SelectContent>
</Select>
<Input
type="number"
placeholder="—"
className="h-7 text-xs w-14 shrink-0"
min={1}
value={maxMinutes ?? ''}
onChange={(e) => {
onPoiTravelFiltersChange?.({
...poiTravelFilters,
[poi.id]: {
travelMode,
maxMinutes: e.target.value ? Number(e.target.value) : undefined,
},
});
}}
/>
<span className="text-xs text-muted-foreground shrink-0">min</span>
</div>
);
})}
</div>
</div>
)}
</AccordionContent>
</AccordionItem>
)}

10
frontend/src/components/Map.tsx
View file

@ -99,18 +99,24 @@ export function Map(props: MapProps) {
.map(function (d: PropertyFeature) {
return (d.properties as Record<string, unknown>)[metricMode] as number;
})
.filter(function (v: number) { return typeof v === 'number' && v > 0; })
.filter(function (v: number) { return typeof v === 'number' && isFinite(v) && v > 0; })
.sort(function (a: number, b: number) { return a - b; });
if (values.length > 0) {
const minIndex = Math.round(values.length * PERCENTILE_CONFIG.MIN_BOUND);
const maxIndex = Math.round(values.length * PERCENTILE_CONFIG.MAX_BOUND);
const min = values[minIndex];
const max = values[maxIndex];
// Ensure max > min so color stops are strictly monotonic
const max = Math.max(values[maxIndex], min + 1);
makeLegend(colorScheme, min, max);
const colorStopsValue = calculateColorStops(colorScheme, min, max);
heatmap.setColorStops(colorStopsValue);
} else {
// Set safe default stops so stale stops from a previous metric don't cause
// Mapbox expression errors when the hexgrid produces cells with different value ranges
const colorStopsValue = calculateColorStops(colorScheme, 0, 1);
heatmap.setColorStops(colorStopsValue);
}
heatmap.update();

5
frontend/src/types/index.ts
View file

@ -115,3 +115,8 @@ export interface POIDistanceInfo {
duration_seconds: number;
distance_meters: number;
}
export interface POITravelFilter {
travelMode: 'WALK' | 'BICYCLE' | 'TRANSIT';
maxMinutes: number | undefined;
}

41
frontend/src/utils/poiUtils.ts Normal file
View file

@ -0,0 +1,41 @@
import type { PropertyFeature, POIDistanceInfo } from '@/types';
/**
* Build the flat property name used by the hexgrid heatmap to read
* travel-time values directly from feature.properties.
*/
export function poiMetricPropertyName(poiId: number, travelMode: string): string {
return `poi_travel_${poiId}_${travelMode}`;
}
/**
* Shallow-copy every feature and inject a flat numeric property
* (e.g. `poi_travel_7_TRANSIT = 1800`) so the heatmap can color by it.
*
* Features without matching POI distance data get `undefined` for that property,
* which the heatmap will skip (same as a listing with no sqm value).
*/
export function injectPoiMetricProperty(
features: PropertyFeature[],
poiId: number,
travelMode: string,
): PropertyFeature[] {
const propName = poiMetricPropertyName(poiId, travelMode);
return features.map((feature) => {
const distances: POIDistanceInfo[] | undefined = feature.properties.poi_distances;
const match = distances?.find(
(d) => d.poi_id === poiId && d.travel_mode === travelMode,
);
if (match === undefined) return feature;
return {
...feature,
properties: {
...feature.properties,
[propName]: match.duration_seconds,
},
};
});
}