diff --git a/client/src/pages/MapView.jsx b/client/src/pages/MapView.jsx index c4ad9b5..5bae316 100644 --- a/client/src/pages/MapView.jsx +++ b/client/src/pages/MapView.jsx @@ -132,16 +132,22 @@ const MapView = () => { useEffect(() => { if (recentDetections.length > 0) { const latestDetection = recentDetections[0]; + console.log('MapView: Processing new detection:', latestDetection); // Add to history with timestamp for fade-out - setDroneDetectionHistory(prev => [ - { - ...latestDetection, - timestamp: Date.now(), - id: `${latestDetection.device_id}-${latestDetection.drone_id}-${latestDetection.device_timestamp}` - }, - ...prev.slice(0, 19) // Keep last 20 detections - ]); + const newDetection = { + ...latestDetection, + timestamp: Date.now(), + id: `${latestDetection.device_id}-${latestDetection.drone_id}-${latestDetection.device_timestamp}` + }; + + console.log('MapView: Adding to history:', newDetection); + + setDroneDetectionHistory(prev => { + const newHistory = [newDetection, ...prev.slice(0, 19)]; + console.log('MapView: Detection history updated, length:', newHistory.length); + return newHistory; + }); } }, [recentDetections]); @@ -305,10 +311,16 @@ const MapView = () => { {/* RSSI-based Detection Rings around Detectors */} {showDroneDetections && droneDetectionHistory - .filter(detection => detection.geo_lat && detection.geo_lon) + .filter(detection => { + const hasCoords = detection.geo_lat && detection.geo_lon; + console.log('MapView: Filtering detection:', detection, 'hasCoords:', hasCoords); + return hasCoords; + }) .map(detection => { + console.log('MapView: Rendering ring for detection:', detection); const opacity = getDetectionOpacity(detection); const age = getDetectionAge(detection); + console.log('MapView: Detection age:', age, 'opacity:', opacity); // Calculate ring radius based on RSSI (rough distance estimation) const getRssiRadius = (rssi) => { @@ -321,6 +333,7 @@ const MapView = () => { }; const radius = getRssiRadius(detection.rssi); + console.log('MapView: Ring radius:', radius, 'for RSSI:', detection.rssi); // Color based on threat level and RSSI strength const getRingColor = (rssi, droneType) => {