Failed to load image
;
+ return Failed to load image;
}
return (
-
+
{(data.sources || []).map((source, index) => (
= React.memo(({
/>
{!imgLoaded && (
-
+
);
}, (prev, next) => {
// Only compare props that affect visual output — ignore callbacks
diff --git a/packages/ui/src/components/TopNavigation.tsx b/packages/ui/src/components/TopNavigation.tsx
index 716faab0..4f2e134b 100644
--- a/packages/ui/src/components/TopNavigation.tsx
+++ b/packages/ui/src/components/TopNavigation.tsx
@@ -296,6 +296,12 @@ const TopNavigation = () => {
-
-
+
+
+
)}
- = ({ compet
return String(params.id) === highlightedRowId ? 'row-custom-highlighted' : '';
}}
onRowClick={(params) => {
- setHighlightedRowId(String(params.id));
- setAnchorRowId(String(params.id));
+ const id = String(params.id);
+ setHighlightedRowId(id);
+ setAnchorRowId(id);
+ onSelectPlace?.(id, 'toggle');
}}
onRowSelectionModelChange={(newSelection) => {
// Handle Array, Object with ids, Set, or generic Iterable
@@ -529,25 +548,6 @@ export const CompetitorsGridView: React.FC = ({ compet
- {showLocationDetail && activeDetailCompetitor && (
- <>
- {/* Drag Handle */}
-
-
-
- {/* Property Pane */}
-
- setShowLocationDetail(false)}
- />
-
-
- )}
);
};
diff --git a/packages/ui/src/modules/places/CompetitorsMapView.tsx b/packages/ui/src/modules/places/CompetitorsMapView.tsx
index 3c1a5af4..8bc21fcc 100644
--- a/packages/ui/src/modules/places/CompetitorsMapView.tsx
+++ b/packages/ui/src/modules/places/CompetitorsMapView.tsx
@@ -110,6 +110,8 @@ interface CompetitorsMapViewProps {
onClosePosterMode?: () => void;
posterTheme?: string;
setPosterTheme?: (theme: string) => void;
+ selectedPlaceId?: string | null;
+ onSelectPlace?: (id: string | null, behavior?: 'select' | 'open' | 'toggle') => void;
}
@@ -181,7 +183,7 @@ const renderPopupHtml = (competitor: CompetitorFull) => {
`;
};
-export const CompetitorsMapView: React.FC = ({ competit
{/* Property Pane */}
= ({ isOpen, onClose, lat, lng, locationName }) => {
+export const InfoPanel = React.memo(({ isOpen, onClose, lat, lng, locationName }: InfoPanelProps) => {
const [articles, setArticles] = useState([]);
const [llmInfo, setLlmInfo] = useState(null);
const [loadingWiki, setLoadingWiki] = useState(false);
const [loadingLlm, setLoadingLlm] = useState(false);
const [errorWiki, setErrorWiki] = useState(null);
+ // Stability check for coordinates to avoid fetching on microscopic jitter
+ const stableLat = lat ? Math.round(lat * 1000) / 1000 : null;
+ const stableLng = lng ? Math.round(lng * 1000) / 1000 : null;
+
// Fetch Wiki Data
useEffect(() => {
- if (!isOpen || !lat || !lng) return;
+ if (!isOpen || !stableLat || !stableLng) return;
const fetchArticles = async () => {
+ console.log("InfoPanel [Fetch Triggered]", stableLat, stableLng);
setLoadingWiki(true);
setErrorWiki(null);
try {
const apiUrl = import.meta.env.VITE_SERVER_IMAGE_API_URL || '';
- const res = await fetch(`${apiUrl}/api/locations/wiki?lat=${lat}&lon=${lng}&limit=20`);
+ const res = await fetch(`${apiUrl}/api/locations/wiki?lat=${stableLat}&lon=${stableLng}&limit=20`);
if (res.ok) {
const json = await res.json();
setArticles(json.data || []);
@@ -57,14 +62,13 @@ export const InfoPanel: React.FC = ({ isOpen, onClose, lat, lng,
const timer = setTimeout(fetchArticles, 500);
return () => clearTimeout(timer);
- }, [isOpen, lat, lng]);
+ }, [isOpen, stableLat, stableLng]);
// Fetch LLM Info
useEffect(() => {
if (!isOpen || !locationName) return;
const fetchLlmInfo = async () => {
- return
setLoadingLlm(true);
setLlmInfo(null);
try {
@@ -82,7 +86,7 @@ export const InfoPanel: React.FC = ({ isOpen, onClose, lat, lng,
};
// Debounce slightly to avoid rapid updates if panning quickly changes the name
- const timer = setTimeout(fetchLlmInfo, 500);
+ const timer = setTimeout(fetchLlmInfo, 1000); // 1s debounce for LLM
return () => clearTimeout(timer);
}, [isOpen, locationName]);
@@ -222,4 +226,4 @@ export const InfoPanel: React.FC = ({ isOpen, onClose, lat, lng,
);
-};
+});
diff --git a/packages/ui/src/modules/places/LocationDetail.tsx b/packages/ui/src/modules/places/LocationDetail.tsx
index 8cf46390..1a6e36fd 100644
--- a/packages/ui/src/modules/places/LocationDetail.tsx
+++ b/packages/ui/src/modules/places/LocationDetail.tsx
@@ -10,7 +10,7 @@ import MarkdownRenderer from '../../components/MarkdownRenderer';
import { T, translate } from '../../i18n';
// Extracted Presentation Component
-export const LocationDetailView: React.FC<{ competitor: CompetitorFull; onClose?: () => void; livePhotos?: any }> = ({ competitor, onClose, livePhotos }) => {
+export const LocationDetailView = React.memo(({ competitor, onClose, livePhotos }: { competitor: CompetitorFull; onClose?: () => void; livePhotos?: any }) => {
const [lightboxOpen, setLightboxOpen] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState(0);
const [activeTab, setActiveTab] = useState<'overview' | 'homepage' | 'debug'>('overview');
@@ -445,7 +445,7 @@ export const LocationDetailView: React.FC<{ competitor: CompetitorFull; onClose?
/>
);
-};
+});
const LocationDetail: React.FC = () => {
const { place_id } = useParams<{ place_id: string }>();
diff --git a/packages/ui/src/modules/places/components/MapFooter.tsx b/packages/ui/src/modules/places/components/MapFooter.tsx
index 4a3f0af6..eb9e7d0c 100644
--- a/packages/ui/src/modules/places/components/MapFooter.tsx
+++ b/packages/ui/src/modules/places/components/MapFooter.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import maplibregl from 'maplibre-gl';
import { Map as MapIcon, Loader2, Locate, Maximize, Minimize, Focus, Sun, Moon } from 'lucide-react';
import type { MapStyleKey } from './map-styles';
export interface MapFooterProps {
+ map?: maplibregl.Map | null;
currentCenterLabel?: string | null;
mapInternals?: { lat: number; lng: number; zoom: number } | null;
isLocating?: boolean;
@@ -16,6 +18,7 @@ export interface MapFooterProps {
}
export function MapFooter({
+ map,
currentCenterLabel,
mapInternals,
isLocating = false,
@@ -27,6 +30,34 @@ export function MapFooter({
onStyleChange,
children
}: MapFooterProps) {
+ const [liveCoords, setLiveCoords] = useState<{ lat: number; lng: number; zoom: number } | null>(null);
+
+ // Attach localized move listener for live coordinate display
+ // This avoids triggering parent re-renders while still providing live info
+ useEffect(() => {
+ if (!map) return;
+
+ const handleMove = () => {
+ const center = map.getCenter();
+ setLiveCoords({
+ lat: center.lat,
+ lng: center.lng,
+ zoom: map.getZoom()
+ });
+ };
+
+ map.on('move', handleMove);
+ // Initial sync
+ handleMove();
+
+ return () => {
+ map.off('move', handleMove);
+ };
+ }, [map]);
+
+ // Use liveCoords for high-frequency display, fallback to mapInternals prop for static initialization
+ const displayCoords = liveCoords || mapInternals;
+
return (
- {features.enableLocationDetails && selectedLocation ? (
- setSelectedLocation(null)}
- />
- ) : features.enableInfoPanel && infoPanelOpen ? (
- setInfoPanelOpen(false)}
- lat={mapInternals?.lat}
- lng={mapInternals?.lng}
- locationName={currentCenterLabel}
- />
- ) : null}
+
)}
diff --git a/packages/ui/src/modules/places/InfoPanel.tsx b/packages/ui/src/modules/places/InfoPanel.tsx
index 99d12a47..5056309c 100644
--- a/packages/ui/src/modules/places/InfoPanel.tsx
+++ b/packages/ui/src/modules/places/InfoPanel.tsx
@@ -24,23 +24,28 @@ interface InfoPanelProps {
locationName?: string | null;
}
-export const InfoPanel: React.FC
@@ -39,11 +70,11 @@ export function MapFooter({
Pan map to view details
)}
- {mapInternals && (
+ {displayCoords && (
diff --git a/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx b/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
index b3936dd7..1f9984a7 100644
--- a/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/LiveSearchLayers.tsx
@@ -58,12 +58,14 @@ export function LiveSearchLayers({ map, liveAreas, liveRadii, liveNodes, isDarkS
}
return () => {
- map.off('style.load', initSources);
+ if (map && map.getStyle()) {
+ map.off('style.load', initSources);
+ }
};
}, [map]);
useEffect(() => {
- if (!map || !map.getSource('live-areas')) return;
+ if (!map || !map.getStyle() || !map.getSource('live-areas')) return;
const features = liveAreas.map(a => {
// Assuming the boundary comes as geojson
@@ -78,14 +80,16 @@ export function LiveSearchLayers({ map, liveAreas, liveRadii, liveNodes, isDarkS
return null;
}).filter(Boolean);
- (map.getSource('live-areas') as maplibregl.GeoJSONSource).setData({
- type: 'FeatureCollection',
- features: features as any
- });
+ try {
+ (map.getSource('live-areas') as maplibregl.GeoJSONSource).setData({
+ type: 'FeatureCollection',
+ features: features as any
+ });
+ } catch (e) {}
}, [map, liveAreas]);
useEffect(() => {
- if (!map || !map.getSource('live-nodes')) return;
+ if (!map || !map.getStyle() || !map.getSource('live-nodes')) return;
const features = liveNodes.map(n => {
// Resolve coordinates from multiple possible formats
@@ -116,10 +120,12 @@ export function LiveSearchLayers({ map, liveAreas, liveRadii, liveNodes, isDarkS
return null;
}).filter(Boolean);
- (map.getSource('live-nodes') as maplibregl.GeoJSONSource).setData({
- type: 'FeatureCollection',
- features: features as any
- });
+ try {
+ (map.getSource('live-nodes') as maplibregl.GeoJSONSource).setData({
+ type: 'FeatureCollection',
+ features: features as any
+ });
+ } catch (e) {}
}, [map, liveNodes]);
return null;
diff --git a/packages/ui/src/modules/places/components/map-layers/LocationLayers.tsx b/packages/ui/src/modules/places/components/map-layers/LocationLayers.tsx
index 252b91d1..54bdef75 100644
--- a/packages/ui/src/modules/places/components/map-layers/LocationLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/LocationLayers.tsx
@@ -41,7 +41,7 @@ export function LocationLayers({
const isDarkStyleRef = useRef(isDarkStyle);
isDarkStyleRef.current = isDarkStyle;
-
+
const onSelectRef = useRef(onSelect);
onSelectRef.current = onSelect;
@@ -157,13 +157,13 @@ export function LocationLayers({
const clusterId = features[0].properties.cluster_id;
const source = map.getSource('locations-source') as maplibregl.GeoJSONSource;
-
+
try {
// MapLibre v5+ getClusterExpansionZoom returns a Promise and doesn't take a callback
const zoom = await (source as any).getClusterExpansionZoom(clusterId);
map.easeTo({
center: (features[0].geometry as any).coordinates,
- zoom: zoom
+ //zoom: zoom
});
} catch (err) {
console.error('Error expanding cluster', err);
@@ -200,21 +200,23 @@ export function LocationLayers({
map.on('style.load', setupLayers);
return () => {
- map.off('styledata', setupLayers);
- map.off('style.load', setupLayers);
- if (map.getSource('locations-source')) {
- if (map.getLayer('clusters')) map.removeLayer('clusters');
- if (map.getLayer('cluster-count')) map.removeLayer('cluster-count');
- if (map.getLayer('unclustered-point-circle')) map.removeLayer('unclustered-point-circle');
- if (map.getLayer('unclustered-point-label')) map.removeLayer('unclustered-point-label');
- map.removeSource('locations-source');
+ if (map && map.getStyle()) {
+ map.off('styledata', setupLayers);
+ map.off('style.load', setupLayers);
+ if (map.getSource('locations-source')) {
+ if (map.getLayer('clusters')) map.removeLayer('clusters');
+ if (map.getLayer('cluster-count')) map.removeLayer('cluster-count');
+ if (map.getLayer('unclustered-point-circle')) map.removeLayer('unclustered-point-circle');
+ if (map.getLayer('unclustered-point-label')) map.removeLayer('unclustered-point-label');
+ map.removeSource('locations-source');
+ }
}
};
}, [map, competitors]);
// Update data when it changes
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
const source = map.getSource('locations-source') as maplibregl.GeoJSONSource;
if (source) {
source.setData(data);
@@ -223,7 +225,7 @@ export function LocationLayers({
// Update style-dependent properties
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
if (map.getLayer('unclustered-point-circle')) {
map.setPaintProperty('unclustered-point-circle', 'circle-color', [
'case',
diff --git a/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx b/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
index 80415df3..5a0d666f 100644
--- a/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/RegionLayers.tsx
@@ -131,9 +131,9 @@ export function RegionLayers({
map.on('style.load', setupMapLayers);
return () => {
- map.off('styledata', setupMapLayers);
- map.off('style.load', setupMapLayers);
- if (map.getStyle()) {
+ if (map && map.getStyle()) {
+ map.off('styledata', setupMapLayers);
+ map.off('style.load', setupMapLayers);
if (map.getLayer('polygons-fill')) map.removeLayer('polygons-fill');
if (map.getLayer('polygons-line')) map.removeLayer('polygons-line');
if (map.getLayer('bboxes-fill')) map.removeLayer('bboxes-fill');
@@ -170,7 +170,7 @@ export function RegionLayers({
// Update GHS Centers Source
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
try {
if (showCenters && pickerPolygons && pickerPolygons.length > 0) {
const features: any[] = [];
@@ -226,7 +226,7 @@ export function RegionLayers({
// Update Bboxes and Polygons Features
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
if ((window as any).__MAP_PERF_DEBUG__) {
const fc = polygonsFeatureCollection as any;
console.log(`[MapPerf] RegionLayers setData() called — polygons features: ${fc?.features?.length ?? 0}`);
diff --git a/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx b/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
index 71c338a5..b38e3b9a 100644
--- a/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
+++ b/packages/ui/src/modules/places/components/map-layers/SimulatorLayers.tsx
@@ -204,13 +204,13 @@ export function SimulatorLayers({ map, isDarkStyle, simulatorData, simulatorPath
map.on('style.load', setupMapLayers);
return () => {
- map.off('styledata', setupMapLayers);
- map.off('style.load', setupMapLayers);
- if (scannerMarkerRef.current) {
- scannerMarkerRef.current.remove();
- scannerMarkerRef.current = null;
- }
- if (map.getStyle()) {
+ if (map && map.getStyle()) {
+ map.off('styledata', setupMapLayers);
+ map.off('style.load', setupMapLayers);
+ if (scannerMarkerRef.current) {
+ scannerMarkerRef.current.remove();
+ scannerMarkerRef.current = null;
+ }
if (map.getLayer('simulator-grid-fill')) map.removeLayer('simulator-grid-fill');
if (map.getLayer('simulator-path-line')) map.removeLayer('simulator-path-line');
if (map.getSource('simulator-grid')) map.removeSource('simulator-grid');
@@ -236,7 +236,7 @@ export function SimulatorLayers({ map, isDarkStyle, simulatorData, simulatorPath
// Update grid + path data
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
try {
if (map.getSource('simulator-grid')) (map.getSource('simulator-grid') as maplibregl.GeoJSONSource).setData(simulatorData || emptyFc as any);
if (map.getSource('simulator-path')) (map.getSource('simulator-path') as maplibregl.GeoJSONSource).setData(simulatorPath || emptyFc as any);
@@ -247,7 +247,7 @@ export function SimulatorLayers({ map, isDarkStyle, simulatorData, simulatorPath
// Update pacman DOM marker position + rotation
useEffect(() => {
- if (!map) return;
+ if (!map || !map.getStyle()) return;
const fc = simulatorScanner as any;
const feature = fc?.features?.[0];
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx b/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
index ff32d5a1..5545f024 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmPicker.tsx
@@ -392,10 +392,18 @@ export function GadmPicker({ map, active, onClose, onSelectionChange, className
async function handleSelectRegion(region: any, forceLevel?: number, isMulti: boolean = false) {
const { levelOption, resolutionOption, enrich } = stateRef.current;
const gadmLevel = region.raw?.level ?? (region.level !== undefined ? region.level : levelOption);
- const gid = region.gid || region[`GID_${gadmLevel}`] || region.GID_0;
+
+ // Robust GID resolution: prioritization
+ // 1. region.gid (if explicitly passed)
+ // 2. region.GID_{gadmLevel} (specific level match)
+ // 3. Fallback to GID_0 ONLY if gadmLevel is 0, otherwise it's a failure (don't snap to country)
+ const gid = region.gid || region[`GID_${gadmLevel}`] || (gadmLevel === 0 ? region.GID_0 : undefined);
const name = region.gadmName || region.name || region[`NAME_${gadmLevel}`] || region.NAME_0;
- if (!gid) return;
+ if (!gid) {
+ console.warn('GadmPicker: Could not resolve gid for region', region, 'at level', gadmLevel);
+ return;
+ }
if (!isMulti) {
if (isFetchingSelectionRef.current) return;
@@ -589,9 +597,25 @@ export function GadmPicker({ map, active, onClose, onSelectionChange, className
// Import initialRegions prop (same logic as handleImportJson)
useEffect(() => {
- if (!initialRegions || initialRegions.length === 0) return;
+ if (!initialRegions || initialRegions.length === 0) {
+ if (active && importedInitialRef.current !== null) {
+ // If it became empty, we SHOULD clear
+ handleClearAll();
+ importedInitialRef.current = null;
+ }
+ return;
+ }
+
const key = initialRegions.map(r => r.gid).sort().join(',');
if (importedInitialRef.current === key) return;
+
+ // Check if current selectedRegions already contains exactly these gids
+ const currentGids = selectedRegions.map(r => r.gid).sort().join(',');
+ if (currentGids === key && importedInitialRef.current !== null) {
+ importedInitialRef.current = key;
+ return;
+ }
+
importedInitialRef.current = key;
// Full reset, same as import handler
@@ -603,7 +627,9 @@ export function GadmPicker({ map, active, onClose, onSelectionChange, className
setGeojsons({});
for (const item of initialRegions) {
- const raw = (item as any).raw ? { ...((item as any).raw), level: item.level } : { gid: item.gid, gadmName: item.name, level: item.level };
+ const raw = (item as any).raw
+ ? { ...((item as any).raw), gid: item.gid, level: item.level }
+ : { gid: item.gid, gadmName: item.name, level: item.level };
handleSelectRegion(raw, item.level, true);
}
}, [initialRegions]);
diff --git a/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx b/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
index 98ccbeda..ee0e48b4 100644
--- a/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
+++ b/packages/ui/src/modules/places/gadm-picker/GadmRegionCollector.tsx
@@ -12,7 +12,7 @@ export interface GadmRegionCollectorProps {
}
export function GadmRegionCollector({
resolutions = {},
- onChangeResolution = () => {}
+ onChangeResolution = () => { }
}: GadmRegionCollectorProps) {
const {
roots, setRoots,
@@ -26,7 +26,7 @@ export function GadmRegionCollector({
const [suggestions, setSuggestions] = useState
- Lat: {mapInternals.lat.toFixed(4)}
- Lng: {mapInternals.lng.toFixed(4)}
- Zoom: {mapInternals.zoom.toFixed(1)}
+ Lat: {displayCoords.lat.toFixed(4)}
+ Lng: {displayCoords.lng.toFixed(4)}
+ Zoom: {displayCoords.zoom.toFixed(1)}
)}
{roots.length === 0 && selectedNodes.length === 0 ? (
@@ -259,48 +261,57 @@ export function GadmRegionCollector({
(null);
const setupMapListeners = useCallback((map: maplibregl.Map, onMapMove?: (state: { lat: number; lng: number; zoom: number, pitch?: number, bearing?: number }) => void) => {
- let _moveFrames = 0;
- let _moveTimer: ReturnType | null = null;
-
- const updateInternals = () => {
- const c = map.getCenter();
- const z = map.getZoom();
- const p = map.getPitch();
- const b = map.getBearing();
- _moveFrames++;
- setMapInternals({
- zoom: Math.round(z * 100) / 100,
- lat: Math.round(c.lat * 10000) / 10000,
- lng: Math.round(c.lng * 10000) / 10000,
- pitch: Math.round(p),
- bearing: Math.round(b)
- });
- };
-
- // Log move events/sec when debug enabled: window.__MAP_PERF_DEBUG__ = true
- _moveTimer = setInterval(() => {
- if ((window as any).__MAP_PERF_DEBUG__ && _moveFrames > 0) {
- console.log(`[MapPerf] move events/sec: ${_moveFrames} (setMapInternals calls)`);
- }
- _moveFrames = 0;
- }, 1000);
-
const handleMoveEnd = async () => {
+ const z = Math.round(map.getZoom() * 100) / 100;
const c = map.getCenter();
- const z = map.getZoom();
- const p = map.getPitch();
- const b = map.getBearing();
+ const lat = Math.round(c.lat * 10000) / 10000;
+ const lng = Math.round(c.lng * 10000) / 10000;
+ const p = Math.round(map.getPitch());
+ const b = Math.round(map.getBearing());
if ((window as any).__MAP_PERF_DEBUG__) {
- console.log(`[MapPerf] moveend fired — lat=${c.lat.toFixed(4)} lng=${c.lng.toFixed(4)} z=${z.toFixed(1)}`);
+ console.log(`[MapPerf] moveend fired — lat=${lat} lng=${lng} z=${z}`);
}
+ // ONLY set state at the end of movement to avoid high-frequency re-renders
+ setMapInternals({ zoom: z, lat, lng, pitch: p, bearing: b });
+
if (onMapMove) {
onMapMove({ lat: c.lat, lng: c.lng, zoom: z, pitch: p, bearing: b });
}
@@ -71,16 +50,13 @@ export function useMapControls(onMapCenterUpdate?: (loc: string, zoom?: number)
}
};
- map.on('move', updateInternals);
map.on('moveend', handleMoveEnd);
// Initial set
- updateInternals();
+ handleMoveEnd();
return () => {
- map.off('move', updateInternals);
map.off('moveend', handleMoveEnd);
- if (_moveTimer) clearInterval(_moveTimer);
};
}, [onMapCenterUpdate]);
diff --git a/packages/ui/src/modules/places/useGridColumns.tsx b/packages/ui/src/modules/places/useGridColumns.tsx
index 042a5017..0cca5467 100644
--- a/packages/ui/src/modules/places/useGridColumns.tsx
+++ b/packages/ui/src/modules/places/useGridColumns.tsx
@@ -7,21 +7,47 @@ import { TypeCell } from './TypeCell';
import type { CompetitorSettings } from './useCompetitorSettings';
import { T, translate } from '../../i18n';
+export type GridPreset = 'full' | 'min';
+
interface UseGridColumnsProps {
settings: CompetitorSettings;
updateExcludedTypes: (types: string[]) => Promise;
}
+export const getPresetVisibilityModel = (preset: GridPreset) => {
+ const allFields = [
+ 'thumbnail', 'title', 'email', 'phone', 'address',
+ 'city', 'country', 'website', 'rating', 'types', 'social'
+ ];
+
+ const minFields = ['thumbnail', 'title', 'types', 'social', 'rating'];
+
+ const model: Record = {};
+
+ if (preset === 'min') {
+ allFields.forEach(f => {
+ model[f] = minFields.includes(f);
+ });
+ } else {
+ // 'full'
+ allFields.forEach(f => {
+ model[f] = f !== 'city'; // default full has no city
+ });
+ }
+
+ return model;
+};
+
// Helper: find a social URL from any of the known data shapes
const findSocialUrl = (row: any, platform: string): string => {
const match = (p: any) => p.source === platform || p.platform === platform;
const rd = row.raw_data as any;
return rd?.[platform] || // raw_data.instagram etc
- rd?.meta?.social?.find(match)?.url || // raw_data.meta.social[]
- row.meta?.social?.find(match)?.url || // meta.social[] (nested)
- row.social?.find(match)?.url || // social[] (DB singular)
- row.socials?.find(match)?.url || // socials[] (SSE plural)
- '';
+ rd?.meta?.social?.find(match)?.url || // raw_data.meta.social[]
+ row.meta?.social?.find(match)?.url || // meta.social[] (nested)
+ row.social?.find(match)?.url || // social[] (DB singular)
+ row.socials?.find(match)?.url || // socials[] (SSE plural)
+ '';
};
export const useGridColumns = ({
@@ -29,17 +55,6 @@ export const useGridColumns = ({
updateExcludedTypes
}: UseGridColumnsProps): GridColDef[] => {
- // Helper for rendering social cells
- const renderSocialCell = (params: GridRenderCellParams, icon: React.ReactNode, colorClass: string) => {
- const url = params.value;
-
- return url ? (
-
- {icon}
-
- ) : null;
- };
-
return React.useMemo(() => [
{
field: 'thumbnail',
@@ -157,9 +172,9 @@ export const useGridColumns = ({
renderCell: (params: GridRenderCellParams) => {
const rating = params.value;
if (rating == null) return null;
-
+
const reviews = params.row.raw_data?.reviews || params.row.meta?.reviews || params.row.reviews;
-
+
return (
{roots.length > 0 && (
(null);
const [competitors, setCompetitors] = useState([]);
@@ -94,16 +172,16 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
return () => { active = false; };
}, [jobId, reloadKey]);
- const handleUpdateExcluded = async (types: string[]) => {
+ const handleUpdateExcluded = useCallback(async (types: string[]) => {
setExcludedTypes(types);
try {
await saveGridSearchExcludeTypes(types);
} catch (e) {
console.error('Failed to save excluded types:', e);
}
- };
+ }, []);
- const handleRetry = async () => {
+ const handleRetry = useCallback(async () => {
try {
setRetrying(true);
await retryPlacesGridSearchJob(jobId);
@@ -115,9 +193,9 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
} finally {
setRetrying(false);
}
- };
+ }, [jobId]);
- const handleTogglePublic = async () => {
+ const handleTogglePublic = useCallback(async () => {
const newValue = !isSharingTarget;
setIsSharingTarget(newValue);
try {
@@ -134,7 +212,7 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
setIsSharingTarget(!newValue); // revert on failure
toast.error('Failed to update sharing settings');
}
- };
+ }, [isSharingTarget, jobId]);
if (!jobId) return null;
@@ -202,7 +280,6 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
const allResults = jobData?.result?.searchResult?.results || competitors;
const foundTypes = Array.from(new Set(allResults.flatMap((r: any) => r.types || []).filter(Boolean))).sort() as string[];
- console.log(JSON.stringify(foundTypes, null, 2));
return (
);
-}
+});
diff --git a/packages/ui/src/modules/places/hooks/useMapControls.ts b/packages/ui/src/modules/places/hooks/useMapControls.ts
index 632738e4..fe56b913 100644
--- a/packages/ui/src/modules/places/hooks/useMapControls.ts
+++ b/packages/ui/src/modules/places/hooks/useMapControls.ts
@@ -11,42 +11,21 @@ export function useMapControls(onMapCenterUpdate?: (loc: string, zoom?: number)
const userLocationMarkerRef = useRef
- n.gid)}
- fetchChildren={async (node) => {
- const children = await fetchRegionChildren(node.gid, node.level + 1);
- const seen = new Set();
- return children.map((c: any) => {
- const actualName = c.name || c.gadmName || c[`NAME_${node.level + 1}`] || c.gid || 'Unknown';
- return {
- name: actualName,
- gid: c.gid || c[`GID_${node.level + 1}`] || c.id || Math.random().toString(),
- level: node.level + 1,
- hasChildren: node.level + 1 < 5,
- label: c.LABEL || undefined,
- data: c
- };
- }).filter((c: any) => {
- if (seen.has(c.gid)) return false;
- seen.add(c.gid);
- const display = c.label || c.name;
- if (display.toLowerCase() === 'unknown') return false;
- return true;
- });
- }}
- onActivate={(node) => {
+ fetchChildren={async (node) => {
+ const children = await fetchRegionChildren(node.gid, node.level + 1);
+ const seen = new Set();
+ return children.map((c: any) => {
+ const actualName = c.name || c.gadmName || c[`NAME_${node.level + 1}`] || c.gid || 'Unknown';
+ return {
+ name: actualName,
+ gid: c.gid || c[`GID_${node.level + 1}`] || c.id || Math.random().toString(),
+ level: node.level + 1,
+ hasChildren: node.level + 1 < 5,
+ label: c.LABEL || undefined,
+ data: c
+ };
+ }).filter((c: any) => {
+ if (seen.has(c.gid)) return false;
+ seen.add(c.gid);
+ const display = c.label || c.name;
+ if (display.toLowerCase() === 'unknown') return false;
+ return true;
+ });
+ }}
+ onActivate={(node) => {
// Optional: trigger onSelect when activated, or just keep it distinct
}}
onSelectionChange={(treeNodes, treeSelectedIds) => {
- const missingIds = Array.from(treeSelectedIds).filter(id => !treeNodes.find(n => n.gid === id));
- const missingNodes = selectedNodes.filter(n => missingIds.includes(n.gid));
- setSelectedNodes([...missingNodes, ...treeNodes]);
+ setSelectedNodes(prev => {
+ const missingIds = Array.from(treeSelectedIds).filter(id => !treeNodes.find(n => n.gid === id));
+ const missingNodes = prev.filter(n => missingIds.includes(n.gid));
+
+ const nextNodes = [...missingNodes, ...treeNodes];
+ // Simple equality check to prevent infinite re-renders
+ if (nextNodes.length === prev.length && nextNodes.every(n => prev.some(p => p.gid === n.gid))) {
+ return prev;
+ }
+
+ return nextNodes;
+ });
}}
- />
+ />
)}
{selectedNodes.length > 0 && (
- 0) {
- const syntheticData = { ...node.data };
+ const syntheticData = { ...node.data, gid: node.gid, level: node.level };
let curr: TreeRow | undefined = r;
while (curr) {
syntheticData[`GID_${curr.node.level}`] = curr.id;
@@ -200,9 +200,9 @@ export const GadmTreePicker = React.forwardRef {
if (!row.node.hasChildren || !fetchChildren) return;
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearch.tsx b/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
index c142397c..84506480 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearch.tsx
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useCallback } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation, useSearchParams } from 'react-router-dom';
import { PlusCircle, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
import { OngoingSearches } from './OngoingSearches';
import { GridSearchWizard } from './GridSearchWizard';
@@ -8,8 +8,22 @@ import { useRestoredSearch, RestoredSearchProvider } from './RestoredSearchConte
import { useAppStore } from '@/store/appStore';
function GridSearchLayout({ selectedJobId, setSelectedJobId }: { selectedJobId: string | null, setSelectedJobId: (id: string | null, forceView?: string) => void }) {
+ const [searchParams, setSearchParams] = useSearchParams();
const [sidebarWidth, setSidebarWidth] = useState(320);
- const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+ const isSidebarOpen = searchParams.get('hasSidebar') !== 'false';
+ const setIsSidebarOpen = useCallback((open: boolean) => {
+ setSearchParams(prev => {
+ const next = new URLSearchParams(prev);
+ if (open) {
+ next.delete('hasSidebar');
+ } else {
+ next.set('hasSidebar', 'false');
+ }
+ return next;
+ }, { replace: true });
+ }, [setSearchParams]);
+
const [isResizing, setIsResizing] = useState(false);
const [initialWizardSettings, setInitialWizardSettings] = useState(null);
const [wizardSessionKey, setWizardSessionKey] = useState(0);
@@ -80,6 +94,8 @@ function GridSearchLayout({ selectedJobId, setSelectedJobId }: { selectedJobId:
+ const handleToggleSidebar = useCallback(() => setIsSidebarOpen(!isSidebarOpen), [isSidebarOpen, setIsSidebarOpen]);
+
return (
-
@@ -137,7 +153,7 @@ function GridSearchLayout({ selectedJobId, setSelectedJobId }: { selectedJobId:
)}
{selectedJobId ? (
- setIsSidebarOpen(!isSidebarOpen)} />
+ setSelectedJobId(id, 'map')} setIsSidebarOpen={setIsSidebarOpen} />
)}
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx b/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
index b14a3e9c..a689dcd2 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearchResults.tsx
@@ -14,6 +14,8 @@ import { POSTER_THEMES } from '../utils/poster-themes';
import { type CompetitorFull } from '@polymech/shared';
import { type LogEntry } from '@/contexts/LogContext';
import ChatLogBrowser from '@/components/ChatLogBrowser';
+import { GripVertical } from 'lucide-react';
+import { LocationDetailView } from '../LocationDetail';
type ViewMode = 'grid' | 'thumb' | 'map' | 'meta' | 'report' | 'log' | 'poster';
@@ -45,7 +47,7 @@ const MOCK_SETTINGS = {
auto_enrich: false
};
-export function GridSearchResults({ jobId, competitors, excludedTypes, updateExcludedTypes, liveAreas, liveRadii, liveNodes, liveScanner, stats, streaming, statusMessage, sseLogs, onExpandSubmitted, isOwner = false, isPublic, onTogglePublic, isSidebarOpen, onToggleSidebar }: GridSearchResultsProps) {
+export const GridSearchResults = React.memo(({ jobId, competitors, excludedTypes, updateExcludedTypes, liveAreas, liveRadii, liveNodes, liveScanner, stats, streaming, statusMessage, sseLogs, onExpandSubmitted, isOwner = false, isPublic, onTogglePublic, isSidebarOpen, onToggleSidebar }: GridSearchResultsProps) => {
const filteredCompetitors = React.useMemo(() => {
if (!excludedTypes || excludedTypes.length === 0) return competitors;
const excludedSet = new Set(excludedTypes.map(t => t.toLowerCase()));
@@ -106,6 +108,49 @@ export function GridSearchResults({ jobId, competitors, excludedTypes, updateExc
const [posterTheme, setPosterTheme] = useState(() => searchParams.get('theme') || 'terracotta');
+ // Selection and Sidebar Panel state
+ const [selectedPlaceId, setSelectedPlaceId] = useState(null);
+ const [showDetails, setShowDetails] = useState(false);
+ const [sidebarWidth, setSidebarWidth] = useState(400);
+
+ const isResizingRef = useRef(false);
+ const startResizing = useCallback(() => {
+ isResizingRef.current = true;
+ const onMove = (e: MouseEvent) => {
+ if (!isResizingRef.current) return;
+ // Calculate width from the right edge of the screen
+ const newWidth = window.innerWidth - e.clientX;
+ if (newWidth > 300 && newWidth < 800) setSidebarWidth(newWidth);
+ };
+ const onUp = () => {
+ isResizingRef.current = false;
+ window.removeEventListener('mousemove', onMove);
+ window.removeEventListener('mouseup', onUp);
+ };
+ window.addEventListener('mousemove', onMove);
+ window.addEventListener('mouseup', onUp);
+ }, []);
+
+ const activeCompetitor = React.useMemo(() => {
+ if (!selectedPlaceId) return null;
+ return competitors.find(c => String(c.place_id || (c as any).placeId || (c as any).id) === selectedPlaceId);
+ }, [selectedPlaceId, competitors]);
+
+ const handleSelectPlace = useCallback((id: string | null, behavior: 'select' | 'open' | 'toggle' = 'select') => {
+ const isSame = id === selectedPlaceId;
+ setSelectedPlaceId(id);
+
+ if (behavior === 'open') {
+ setShowDetails(true);
+ } else if (behavior === 'toggle') {
+ if (isSame && showDetails) {
+ setShowDetails(false);
+ } else {
+ setShowDetails(true);
+ }
+ }
+ }, [selectedPlaceId, showDetails]);
+
const handleThemeChange = useCallback((e: React.ChangeEvent) => {
const theme = e.target.value;
setPosterTheme(theme);
@@ -137,22 +182,27 @@ export function GridSearchResults({ jobId, competitors, excludedTypes, updateExc
if ((window as any).__MAP_PERF_DEBUG__) console.log('[MapPerf] onMapMove debounce reset (prevented URL update)');
clearTimeout(mapMoveTimerRef.current);
}
+
mapMoveTimerRef.current = setTimeout(() => {
- if ((window as any).__MAP_PERF_DEBUG__) console.log('[MapPerf] onMapMove → setSearchParams committed (300ms debounce)');
- setSearchParams(prev => {
- const newParams = new URLSearchParams(prev);
- newParams.set('mapLat', state.lat.toFixed(6));
- newParams.set('mapLng', state.lng.toFixed(6));
- newParams.set('mapZoom', state.zoom.toFixed(2));
- if (state.pitch !== undefined) newParams.set('mapPitch', state.pitch.toFixed(0));
- if (state.bearing !== undefined) newParams.set('mapBearing', state.bearing.toFixed(0));
- if (prev.get('view') !== 'poster') {
- newParams.set('view', 'map');
- }
- return newParams;
- }, { replace: true });
+ if ((window as any).__MAP_PERF_DEBUG__) console.log('[MapPerf] onMapMove → window.history.replaceState committed (300ms debounce)');
+
+ // USE MANUAL HISTORY API: Updates the URL bar silently WITHOUT triggering React re-renders/useSearchParams
+ const url = new URL(window.location.href);
+ url.searchParams.set('mapLat', state.lat.toFixed(6));
+ url.searchParams.set('mapLng', state.lng.toFixed(6));
+ url.searchParams.set('mapZoom', state.zoom.toFixed(2));
+ if (state.pitch !== undefined) url.searchParams.set('mapPitch', state.pitch.toFixed(0));
+ if (state.bearing !== undefined) url.searchParams.set('mapBearing', state.bearing.toFixed(0));
+
+ // Maintain view state if it's not locked to 'poster'
+ if (url.searchParams.get('view') !== 'poster') {
+ url.searchParams.set('view', 'map');
+ }
+
+ // Silently update the browser history
+ window.history.replaceState(null, '', url.pathname + url.search);
}, 300);
- }, [setSearchParams]);
+ }, []);
const settings = { ...MOCK_SETTINGS, excluded_types: excludedTypes };
@@ -307,88 +357,121 @@ export function GridSearchResults({ jobId, competitors, excludedTypes, updateExc
- {viewMode === 'grid' && (
- { })}
- />
- )}
-
- {viewMode === 'thumb' && (
- { }}
- />
- )}
-
- {(viewMode === 'map' || viewMode === 'poster') && (
- {
- const lat = parseFloat(searchParams.get('mapLat') || '');
- const lng = parseFloat(searchParams.get('mapLng') || '');
- return (!isNaN(lat) && !isNaN(lng)) ? { lat, lng } : undefined;
- })()}
- initialZoom={(() => {
- const zoom = parseFloat(searchParams.get('mapZoom') || '');
- return !isNaN(zoom) ? zoom : undefined;
- })()}
- initialPitch={(() => {
- const p = parseFloat(searchParams.get('mapPitch') || '');
- return !isNaN(p) ? p : undefined;
- })()}
- initialBearing={(() => {
- const b = parseFloat(searchParams.get('mapBearing') || '');
- return !isNaN(b) ? b : undefined;
- })()}
- onMapMove={handleMapMove}
- onClosePosterMode={() => handleViewChange('map')}
- onRegionsChange={setPickedRegions}
- simulatorSettings={mapSimSettings}
- onSimulatorSettingsChange={setMapSimSettings}
- />
- )}
-
- {viewMode === 'meta' && (
- { })}
- />
- )}
-
- {viewMode === 'report' && (
- ({
gridMode: 'centers',
pathOrder: 'snake',
groupByRegion: true,
- cellSize: 5,
+ cellSize: 10,
cellOverlap: 0,
- centroidOverlap: 50,
+ centroidOverlap: 0,
ghsFilterMode: 'OR',
- maxCellsLimit: 50000,
+ maxCellsLimit: 10000,
maxElevation: 1000,
minDensity: 10,
- minGhsPop: 26,
- minGhsBuilt: 154,
+ minGhsPop: 1,
+ minGhsBuilt: 0,
allowMissingGhs: false,
bypassFilters: true,
...(initialSettings?.simulatorSettings || {})
@@ -57,6 +55,7 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
if (!initialSettings?.guidedAreas) return {};
const res: Record = {};
initialSettings.guidedAreas.forEach((a: any) => { res[a.gid] = a.level; });
+ console.log(`resolutions:`, res);
return res;
});
const [excludeTypesStr, setExcludeTypesStr] = useState(initialSettings?.excludeTypes?.join(', ') || '');
@@ -68,7 +67,9 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
const [pastSearches, setPastSearches] = useState(() => {
try {
- return JSON.parse(localStorage.getItem('gridSearchPastQueries') || '[]');
+ const past = JSON.parse(localStorage.getItem('gridSearchPastQueries') || '[]');
+ console.log(past);
+ return past;
} catch {
return [];
}
@@ -163,6 +164,14 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
};
+ const initialGadmRegions = useMemo(() => {
+ return collectedNodes.map(n => ({
+ gid: n.gid,
+ name: n.name,
+ level: resolutions[n.gid] ?? n.level,
+ raw: n.data
+ }));
+ }, [collectedNodes, resolutions]);
return (
setResolutions(prev => ({ ...prev, [gid]: lvl }))}
+ onChangeResolution={
+ (gid, lvl) => {
+ setResolutions(prev => ({ ...prev, [gid]: lvl }));
+ console.log(`resolutions collector:`, resolutions);
+ }
+ }
/>
)}
@@ -236,7 +250,7 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
onMapCenterUpdate={() => { }}
enrich={async () => { }}
isEnriching={false}
- initialGadmRegions={collectedNodes.map(n => ({ gid: n.gid, name: n.name, level: resolutions[n.gid] ?? n.level, raw: n.data }))}
+ initialGadmRegions={initialGadmRegions}
simulatorSettings={simulatorSettings}
onSimulatorSettingsChange={setSimulatorSettings}
onRegionsChange={(regions) => {
diff --git a/packages/ui/src/modules/places/gridsearch/JobViewer.tsx b/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
index ccef16e4..de60ab6c 100644
--- a/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
+++ b/packages/ui/src/modules/places/gridsearch/JobViewer.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
import { Loader2, AlertCircle, Lock, MapPin, Share2 } from 'lucide-react';
import { toast } from 'sonner';
import { fetchPlacesGridSearchById, retryPlacesGridSearchJob, getGridSearchExcludeTypes, saveGridSearchExcludeTypes, updatePlacesGridSearchSettings } from '../client-gridsearch';
@@ -9,7 +9,7 @@ import { GridSearchStreamProvider, useGridSearchStream } from './GridSearchStrea
import CollapsibleSection from '@/components/CollapsibleSection';
import { T } from '@/i18n';
-function LiveGridSearchResults({ jobId, excludedTypes, dummyUpdateExcluded, onExpandSubmitted, isOwner, isPublic, onTogglePublic, isSidebarOpen, onToggleSidebar }: any) {
+const LiveGridSearchResults = React.memo(({ jobId, excludedTypes, dummyUpdateExcluded, onExpandSubmitted, isOwner, isPublic, onTogglePublic, isSidebarOpen, onToggleSidebar }: any) => {
const { competitors, liveAreas, liveRadii, liveNodes, stats, streaming, statusMessage, liveScanner, sseLogs } = useGridSearchStream();
return (
@@ -34,9 +34,87 @@ function LiveGridSearchResults({ jobId, excludedTypes, dummyUpdateExcluded, onEx
onToggleSidebar={onToggleSidebar}
/>
);
-}
+});
-export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: string; isSidebarOpen?: boolean; onToggleSidebar?: () => void }) {
+const JobMetadataDisplay = React.memo(({ jobId, jobData, foundTypes }: any) => (
+
- { }}
- title="SSE Stream Events"
+
);
-}
+});
diff --git a/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx b/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
index 5cacc286..b4aba77e 100644
--- a/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
+++ b/packages/ui/src/modules/places/gridsearch/GridSearchWizard.tsx
@@ -1,12 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Loader2, Search, MapPin, CheckCircle, ChevronRight, ChevronLeft, Settings } from 'lucide-react';
import { submitPlacesGridSearchJob, getGridSearchExcludeTypes, saveGridSearchExcludeTypes, getPlacesTypes } from '../client-gridsearch';
import { CompetitorsMapView } from '../CompetitorsMapView';
import { GadmRegionCollector } from '../gadm-picker/GadmRegionCollector';
-import { GadmNode } from '../gadm-picker/GadmTreePicker';
import { GadmPickerProvider, useGadmPicker } from '../gadm-picker/GadmPickerContext';
import { Badge } from "@/components/ui/badge";
-import { T, translate } from '../../../i18n';
+import { T, translate } from '@/i18n';
export function GridSearchWizard({ onJobSubmitted, initialSettings, setIsSidebarOpen }: { onJobSubmitted: (jobId: string) => void, initialSettings?: any, setIsSidebarOpen?: (open: boolean) => void }) {
const initNodes = initialSettings?.guidedAreas?.map((a: any) => ({
@@ -34,20 +33,19 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
const [searchQuery, setSearchQuery] = useState(initialSettings?.searchQuery || '');
// Step 3: Preview
- const [showSettings, setShowSettings] = useState(false);
const [simulatorSettings, setSimulatorSettings] = useState
+
+ {viewMode === 'grid' && (
+ { })}
+ selectedPlaceId={selectedPlaceId}
+ onSelectPlace={handleSelectPlace}
+ isOwner={isOwner}
+ isPublic={isPublic}
+ preset={(isPublic && !isOwner) || showDetails ? 'min' : 'full'}
/>
+ )}
+
+ {viewMode === 'thumb' && (
+ { }}
+ />
+ )}
+
+ {(viewMode === 'map' || viewMode === 'poster') && (
+ {
+ const lat = parseFloat(searchParams.get('mapLat') || '');
+ const lng = parseFloat(searchParams.get('mapLng') || '');
+ return (!isNaN(lat) && !isNaN(lng)) ? { lat, lng } : undefined;
+ })()}
+ initialZoom={(() => {
+ const zoom = parseFloat(searchParams.get('mapZoom') || '');
+ return !isNaN(zoom) ? zoom : undefined;
+ })()}
+ initialPitch={(() => {
+ const p = parseFloat(searchParams.get('mapPitch') || '');
+ return !isNaN(p) ? p : undefined;
+ })()}
+ initialBearing={(() => {
+ const b = parseFloat(searchParams.get('mapBearing') || '');
+ return !isNaN(b) ? b : undefined;
+ })()}
+ onMapMove={handleMapMove}
+ onClosePosterMode={() => handleViewChange('map')}
+ onRegionsChange={setPickedRegions}
+ simulatorSettings={mapSimSettings}
+ onSimulatorSettingsChange={setMapSimSettings}
+ selectedPlaceId={selectedPlaceId}
+ onSelectPlace={handleSelectPlace}
+ />
+ )}
+
+ {viewMode === 'meta' && (
+ { })}
+ />
+ )}
+
+ {viewMode === 'report' && (
+
+
+ {/* Global Location Details Sidebar */}
+ {showDetails && activeCompetitor && (
+
+ { }}
+ title="SSE Stream Events"
+ />
+
+ )}
+
+ {/* Drag Handle */}
+
)}
+
+
+ {/* Property Pane */}
+
+ setShowDetails(false)}
+ />
+
@@ -193,7 +202,12 @@ function GridSearchWizardInner({ onJobSubmitted, initialSettings, setIsSidebarOp
+
+));
+
+const GadmAreasDisplay = React.memo(({ guidedAreas, isLocked, isComplete }: any) => (
+
+ Found Types:
+ {foundTypes.map((t: string) => (
+
+ {t}
+
+ ))}
+
+ )}
+
+ )}
+
+
+));
+
+const SearchSettingsDisplay = React.memo(({ searchSettings }: any) => (
+
+ GADM Areas ({guidedAreas.length})
+
+ {isLocked && (
+
+ Locked
+
+ )}
+ {isComplete && (
+
+ Complete
+
+ )}
+
+
+ {guidedAreas.map((area: any) => (
+
+
+ {area.name}
+ L{area.level}
+
+ ))}
+
+
+ {searchSettings.cellSize && Cell: {searchSettings.cellSize}km}
+ {searchSettings.minPopDensity > 0 && Min Pop: {searchSettings.minPopDensity}}
+ {searchSettings.pathOrder && Path: {searchSettings.pathOrder}}
+ {searchSettings.gridMode && Grid: {searchSettings.gridMode}}
+
+));
+
+export const JobViewer = React.memo(({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: string; isSidebarOpen?: boolean; onToggleSidebar?: () => void }) => {
const [loading, setLoading] = useState(true);
const [error, setError] = useState
@@ -215,82 +292,16 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
storageKey={`gridSearchViewMetaCollapse`}
className=""
>
-
@@ -313,4 +324,4 @@ export function JobViewer({ jobId, isSidebarOpen, onToggleSidebar }: { jobId: st
-
+
- Found Types:
- {foundTypes.map((t: string) => (
-
- {t}
-
- ))}
-
- )}
-
- )}
-
-
+
- GADM Areas ({guidedAreas.length})
-
- {isLocked && (
-
- Locked
-
- )}
- {isComplete && (
-
- Complete
-
- )}
-
-
- {guidedAreas.map((area: any) => (
-
-
- {area.name}
- L{area.level}
-
- ))}
-
-
- {searchSettings.cellSize && Cell: {searchSettings.cellSize}km}
- {searchSettings.minPopDensity > 0 && Min Pop: {searchSettings.minPopDensity}}
- {searchSettings.pathOrder && Path: {searchSettings.pathOrder}}
- {searchSettings.gridMode && Grid: {searchSettings.gridMode}}
-
+
@@ -211,7 +226,7 @@ export const useGridColumns = ({
{ key: 'youtube', icon: