feat!: find events on timeslider or on map. follow vehicle button. (#221)

* feat:timeslider clicks select events

* feat: Make map clickable and find closest event to the click.

* feat!:Re-Center: Follow Vehicle

Author: regeter

src/App.js

@@ -239,12 +239,9 @@ class App extends React.Component {
    * Callback to updated selected log row
    */
   onSelectionChange(selectedRow, rowIndex) {
-    log("App - onSelectionChange called with index:", rowIndex); // Debug
-
     // Save both the selected row and its index for the current dataset
     if (this.state.activeDatasetIndex !== null && rowIndex !== undefined) {
       this.setState((prevState) => {
-        log(`Saving index ${rowIndex} for dataset ${prevState.activeDatasetIndex}`); // Debug
         const newSelectedIndexes = [...prevState.selectedRowIndexPerDataset];
         newSelectedIndexes[prevState.activeDatasetIndex] = rowIndex;
         return {
@@ -253,7 +250,7 @@ class App extends React.Component {
         };
       });
     } else {
-      log("Unable to save index:", rowIndex, "for dataset:", this.state.activeDatasetIndex); // Debug
+      log("Unable to save index:", rowIndex, "for dataset:", this.state.activeDatasetIndex);
       this.setFeaturedObject(selectedRow);
     }
   }
@@ -816,6 +813,8 @@ class App extends React.Component {
               curMax={this.state.timeRange.maxTime}
               onSliderChange={this.onSliderChangeDebounced}
               selectedEventTime={selectedEventTime}
+              onRowSelect={(row, rowIndex) => this.onSelectionChange(row, rowIndex)}
+              centerOnLocation={this.centerOnLocation}
             />
             <ToggleBar
               toggles={this.toggles}

src/Map.js

@@ -44,6 +44,19 @@ function addTripPolys(map) {
   const trips = tripLogs.getTrips();
   const vehicleBounds = new window.google.maps.LatLngBounds();
 
+  // Add click handler to map for finding nearby events
+  map.addListener("click", (event) => {
+    const clickLocation = event.latLng;
+    log("Map click detected at location:", clickLocation.lat(), clickLocation.lng());
+
+    // Find the closest event within 250 meters
+    const closestEvent = findClosestEvent(clickLocation, 250);
+    if (closestEvent) {
+      log("Found closest event:", closestEvent.timestamp);
+      setFeaturedObject(closestEvent);
+    }
+  });
+
   _.forEach(trips, (trip) => {
     tripObjects.addTripVisuals(trip, minDate, maxDate);
 
@@ -99,6 +112,8 @@ function MyMapComponent(props) {
   const [showPolylineUI, setShowPolylineUI] = useState(false);
   const [polylines, setPolylines] = useState([]);
   const [buttonPosition, setButtonPosition] = useState({ top: 0, left: 0 });
+  const [isFollowingVehicle, setIsFollowingVehicle] = useState(false);
+  const lastValidPositionRef = useRef(null);
 
   useEffect(() => {
     const urlZoom = getQueryStringValue("zoom");
@@ -120,12 +135,19 @@ function MyMapComponent(props) {
     map.setOptions({ maxZoom: 100 });
     map.addListener("zoom_changed", () => {
       setQueryStringValue("zoom", map.getZoom());
+      setIsFollowingVehicle(false); // zoom disables following
+      log("Follow mode disabled due to zoom change");
     });
 
     map.addListener("heading_changed", () => {
       setQueryStringValue("heading", map.getHeading());
     });
 
+    map.addListener("dragstart", () => {
+      setIsFollowingVehicle(false);
+      log("Follow mode disabled due to map drag");
+    });
+
     map.addListener(
       "center_changed",
       _.debounce(() => {
@@ -145,59 +167,44 @@ function MyMapComponent(props) {
     };
 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(polylineButton);
-  }, []);
-
-  useEffect(() => {
-    if (!props.selectedRow) return;
-
-    // Clear ALL route segment polylines
-    polylines.forEach((polyline) => {
-      if (polyline.isRouteSegment) {
-        polyline.setMap(null);
-      }
-    });
-    // Update the polylines state to remove all route segments
-    setPolylines(polylines.filter((p) => !p.isRouteSegment));
 
-    // Get the current route segment from the selected row
-    const routeSegment =
-      _.get(props.selectedRow, "request.vehicle.currentroutesegment") ||
-      _.get(props.selectedRow, "lastlocation.currentroutesegment");
-
-    if (routeSegment) {
-      try {
-        const decodedPoints = decode(routeSegment);
+    // Create follow vehicle button with chevron icon
+    const followButton = document.createElement("div");
+    followButton.className = "follow-vehicle-button";
+    followButton.innerHTML = `
+      <div class="follow-vehicle-background"></div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20" width="24" height="24" class="follow-vehicle-chevron">
+        <path d="M -10,10 L 0,-10 L 10,10 L 0,5 z" fill="#4285F4" stroke="#4285F4" stroke-width="1"/>
+      </svg>
+    `;
+
+    followButton.onclick = () => {
+      log("Follow vehicle button clicked");
+      recenterOnVehicle();
+    };
 
-        if (decodedPoints && decodedPoints.length > 0) {
-          const validWaypoints = decodedPoints.map((point) => ({
-            lat: point.latDegrees(),
-            lng: point.lngDegrees(),
-          }));
+    // Add button to map
+    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(followButton);
 
-          const trafficRendering =
-            _.get(props.selectedRow, "request.vehicle.currentroutesegmenttraffic.trafficrendering") ||
-            _.get(props.selectedRow, "lastlocation.currentroutesegmenttraffic.trafficrendering");
-
-          const rawLocation = _.get(props.selectedRow.lastlocation, "rawlocation");
+    updateFollowButtonAppearance();
+  }, []);
 
-          const trafficPolyline = new TrafficPolyline({
-            path: validWaypoints,
-            zIndex: 2,
-            trafficRendering: structuredClone(trafficRendering),
-            currentLatLng: rawLocation,
-            map: map,
-          });
-          setPolylines((prev) => [...prev, ...trafficPolyline.polylines]);
-        }
-      } catch (error) {
-        console.error("Error processing route segment polyline:", {
-          error,
-          routeSegment,
-          rowData: props.selectedRow,
-        });
+  useEffect(() => {
+    updateFollowButtonAppearance();
+  }, [isFollowingVehicle]);
+
+  const updateFollowButtonAppearance = () => {
+    const followButton = document.querySelector(".follow-vehicle-button");
+    if (followButton) {
+      if (isFollowingVehicle) {
+        followButton.classList.add("active");
+        log("Follow vehicle button updated to active state");
+      } else {
+        followButton.classList.remove("active");
+        log("Follow vehicle button updated to inactive state");
       }
     }
-  }, [props.selectedRow, map]);
+  };
 
   const handlePolylineSubmit = (waypoints, properties) => {
     const path = waypoints.map((wp) => new google.maps.LatLng(wp.latitude, wp.longitude));
@@ -235,6 +242,40 @@ function MyMapComponent(props) {
     );
   };
 
+  const recenterOnVehicle = () => {
+    log("Executing recenterOnVehicle function");
+
+    let position = null;
+
+    // Try to get position from current row
+    if (props.selectedRow && props.selectedRow.lastlocation && props.selectedRow.lastlocation.rawlocation) {
+      position = props.selectedRow.lastlocation.rawlocation;
+      log(`Found position in selected row: ${position.latitude}, ${position.longitude}`);
+    }
+    // Try to use our last cached valid position
+    else if (lastValidPositionRef.current) {
+      position = lastValidPositionRef.current;
+      log(`Using last cached valid position: ${position.lat}, ${position.lng}`);
+    }
+    if (!position) {
+      log("No vehicle position found");
+    }
+
+    // Center the map
+    if (position && typeof position.latitude !== "undefined") {
+      map.setCenter({ lat: position.latitude, lng: position.longitude });
+      map.setZoom(17);
+    }
+
+    setIsFollowingVehicle((prev) => {
+      const newState = !prev;
+      log(`Map follow mode ${newState ? "enabled" : "disabled"}`);
+      return newState;
+    });
+
+    log(`Map centered on vehicle, follow mode ${!isFollowingVehicle ? "enabled" : "disabled"}`);
+  };
+
   /*
    * Handler for timewindow change.  Updates global min/max date globals
    * and recomputes the paths as well as all the bubble markers to respect the
@@ -266,7 +307,59 @@ function MyMapComponent(props) {
   }, [props.rangeStart, props.rangeEnd]);
 
   useEffect(() => {
-    // Car location maker
+    if (!props.selectedRow) return;
+
+    // Clear ALL route segment polylines
+    polylines.forEach((polyline) => {
+      if (polyline.isRouteSegment) {
+        polyline.setMap(null);
+      }
+    });
+    // Update the polylines state to remove all route segments
+    setPolylines(polylines.filter((p) => !p.isRouteSegment));
+
+    // Get the current route segment from the selected row
+    const routeSegment =
+      _.get(props.selectedRow, "request.vehicle.currentroutesegment") ||
+      _.get(props.selectedRow, "lastlocation.currentroutesegment");
+
+    if (routeSegment) {
+      try {
+        const decodedPoints = decode(routeSegment);
+
+        if (decodedPoints && decodedPoints.length > 0) {
+          const validWaypoints = decodedPoints.map((point) => ({
+            lat: point.latDegrees(),
+            lng: point.lngDegrees(),
+          }));
+
+          const trafficRendering =
+            _.get(props.selectedRow, "request.vehicle.currentroutesegmenttraffic.trafficrendering") ||
+            _.get(props.selectedRow, "lastlocation.currentroutesegmenttraffic.trafficrendering");
+
+          const rawLocation = _.get(props.selectedRow.lastlocation, "rawlocation");
+
+          const trafficPolyline = new TrafficPolyline({
+            path: validWaypoints,
+            zIndex: 2,
+            trafficRendering: structuredClone(trafficRendering),
+            currentLatLng: rawLocation,
+            map: map,
+          });
+          setPolylines((prev) => [...prev, ...trafficPolyline.polylines]);
+        }
+      } catch (error) {
+        console.error("Error processing route segment polyline:", {
+          error,
+          routeSegment,
+          rowData: props.selectedRow,
+        });
+      }
+    }
+  }, [props.selectedRow]);
+
+  useEffect(() => {
+    // Vehicle chevron location maker
     const data = props.selectedRow;
     if (!data) return;
     _.forEach(dataMakers, (m) => m.setMap(null));
@@ -295,6 +388,8 @@ function MyMapComponent(props) {
 
     const rawLocation = _.get(data.lastlocation, "rawlocation");
     if (rawLocation) {
+      lastValidPositionRef.current = { lat: rawLocation.latitude, lng: rawLocation.longitude };
+
       const heading = _.get(data.lastlocation, "heading") || 0;
       markerSymbols.chevron.rotation = heading;
 
@@ -314,8 +409,12 @@ function MyMapComponent(props) {
       });
 
       dataMakers.push(backgroundMarker, chevronMarker);
+
+      if (isFollowingVehicle) {
+        map.setCenter({ lat: rawLocation.latitude, lng: rawLocation.longitude });
+      }
     }
-  }, [props.selectedRow]);
+  }, [props.selectedRow, isFollowingVehicle]);
 
   for (const toggle of props.toggles) {
     const id = toggle.id;
@@ -378,6 +477,34 @@ function Map(props) {
   );
 }
 
+// Add a new function to find the closest event to a clicked location
+function findClosestEvent(clickLocation, maxDistance) {
+  const logs = tripLogs.getLogs_(minDate, maxDate).value();
+  let closestEvent = null;
+  let closestDistance = maxDistance;
+
+  logs.forEach((event) => {
+    const rawLocation = _.get(event, "lastlocation.rawlocation");
+    if (rawLocation && rawLocation.latitude && rawLocation.longitude) {
+      const eventLocation = new google.maps.LatLng(rawLocation.latitude, rawLocation.longitude);
+      const distance = google.maps.geometry.spherical.computeDistanceBetween(clickLocation, eventLocation);
+
+      if (distance < closestDistance) {
+        closestEvent = event;
+        closestDistance = distance;
+      }
+    }
+  });
+
+  if (closestEvent) {
+    log("Found closest event at distance:", closestDistance, "meters");
+  } else {
+    log("No events found within", maxDistance, "meters");
+  }
+
+  return closestEvent;
+}
+
 /*
  * GenerateBubbles() -- helper function for generating map features based
  * on per-log entry data.