feat: visualize getTrip and use location instead of rawLocation (#230)

* fix: Deepcopy of lastKnownState and cleanup

* feat: visualize getTrip and use location instead of rawLocation

Author: regeter

.eslintrc.json

@@ -21,7 +21,10 @@
   "plugins": ["react", "jest"],
   "rules": {
     "no-var": "error",
-    "no-unused-vars": "warn",
+    "no-unused-vars": ["warn", {
+      "argsIgnorePattern": "^_",
+      "varsIgnorePattern": "^_"
+    }],
     "prefer-arrow-callback": "error",
     "react/prop-types": "off",
     "react/jsx-key": "off",

src/App.js

@@ -805,6 +805,7 @@ class App extends React.Component {
                 setFeaturedObject={this.setFeaturedObject}
                 setTimeRange={this.setTimeRange}
                 setCenterOnLocation={this.setCenterOnLocation}
+                focusSelectedRow={this.focusOnSelectedRow}
               />
             </div>
             <TimeSlider
@@ -815,6 +816,7 @@ class App extends React.Component {
               selectedEventTime={selectedEventTime}
               onRowSelect={(row, rowIndex) => this.onSelectionChange(row, rowIndex)}
               centerOnLocation={this.centerOnLocation}
+              focusSelectedRow={this.focusOnSelectedRow}
             />
             <ToggleBar
               toggles={this.toggles}

src/Map.js

@@ -27,6 +27,7 @@ let locationProvider;
 let tripLogs;
 let taskLogs;
 let setFeaturedObject;
+let focusSelectedRow;
 let setTimeRange;
 
 const render = (status) => {
@@ -54,6 +55,8 @@ function addTripPolys(map) {
     if (closestEvent) {
       log("Found closest event:", closestEvent.timestamp);
       setFeaturedObject(closestEvent);
+
+      setTimeout(() => focusSelectedRow(), 0);
     }
   });
 
@@ -133,11 +136,6 @@ function MyMapComponent(props) {
       map.setHeading(parseInt(urlHeading));
     }
     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());
@@ -318,7 +316,35 @@ function MyMapComponent(props) {
     // 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 eventType = props.selectedRow["@type"];
+    const isTripEvent = ["getTrip", "updateTrip", "createTrip"].includes(eventType);
+
+    if (isTripEvent) {
+      // Create a thin red polyline with arrows for trip events
+      const routeSegment = _.get(props.selectedRow, "response.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 trafficPolyline = new TrafficPolyline({
+              path: validWaypoints,
+              zIndex: 3,
+              isTripEvent: true,
+              map: map,
+            });
+            setPolylines((prev) => [...prev, ...trafficPolyline.polylines]);
+          }
+        } catch (error) {
+          console.error("Error processing trip event polyline:", error);
+        }
+      }
+    }
+
     const routeSegment =
       _.get(props.selectedRow, "request.vehicle.currentroutesegment") ||
       _.get(props.selectedRow, "lastlocation.currentroutesegment");
@@ -337,23 +363,19 @@ function MyMapComponent(props) {
             _.get(props.selectedRow, "request.vehicle.currentroutesegmenttraffic.trafficrendering") ||
             _.get(props.selectedRow, "lastlocation.currentroutesegmenttraffic.trafficrendering");
 
-          const rawLocation = _.get(props.selectedRow.lastlocation, "rawlocation");
+          const location = _.get(props.selectedRow.lastlocation, "location");
 
           const trafficPolyline = new TrafficPolyline({
             path: validWaypoints,
             zIndex: 2,
             trafficRendering: structuredClone(trafficRendering),
-            currentLatLng: rawLocation,
+            currentLatLng: location,
             map: map,
           });
           setPolylines((prev) => [...prev, ...trafficPolyline.polylines]);
         }
       } catch (error) {
-        console.error("Error processing route segment polyline:", {
-          error,
-          routeSegment,
-          rowData: props.selectedRow,
-        });
+        console.error("Error processing route segment polyline:", error);
       }
     }
   }, [props.selectedRow]);
@@ -384,34 +406,55 @@ function MyMapComponent(props) {
         strokeWeight: 1,
         rotation: 0,
       },
+      rawLocation: {
+        path: google.maps.SymbolPath.CIRCLE,
+        fillColor: "#FF0000",
+        fillOpacity: 1,
+        scale: 2,
+        strokeColor: "#FF0000",
+        strokeWeight: 1,
+      },
     };
 
-    const rawLocation = _.get(data.lastlocation, "rawlocation");
-    if (rawLocation) {
-      lastValidPositionRef.current = { lat: rawLocation.latitude, lng: rawLocation.longitude };
+    const location = _.get(data.lastlocation, "location") || _.get(data.lastlocationResponse, "location");
+    if (location) {
+      lastValidPositionRef.current = { lat: location.latitude, lng: location.longitude };
 
-      const heading = _.get(data.lastlocation, "heading") || 0;
+      const heading = _.get(data.lastlocation, "heading") || _.get(data.lastlocationResponse, "heading") || 0;
       markerSymbols.chevron.rotation = heading;
 
       const backgroundMarker = new window.google.maps.Marker({
-        position: { lat: rawLocation.latitude, lng: rawLocation.longitude },
+        position: { lat: location.latitude, lng: location.longitude },
         map: map,
         icon: markerSymbols.background,
         clickable: false,
         zIndex: 9,
       });
 
       const chevronMarker = new window.google.maps.Marker({
-        position: { lat: rawLocation.latitude, lng: rawLocation.longitude },
+        position: { lat: location.latitude, lng: location.longitude },
         map: map,
         icon: markerSymbols.chevron,
         zIndex: 10,
       });
 
       dataMakers.push(backgroundMarker, chevronMarker);
 
+      const rawLocation = _.get(data.lastlocation, "rawlocation");
+      if (rawLocation) {
+        const rawLocationMarker = new window.google.maps.Marker({
+          position: { lat: rawLocation.latitude, lng: rawLocation.longitude },
+          map: map,
+          icon: markerSymbols.rawLocation,
+          zIndex: 8,
+          clickable: false,
+        });
+
+        dataMakers.push(rawLocationMarker);
+      }
+
       if (isFollowingVehicle) {
-        map.setCenter({ lat: rawLocation.latitude, lng: rawLocation.longitude });
+        map.setCenter({ lat: location.latitude, lng: location.longitude });
       }
     }
   }, [props.selectedRow, isFollowingVehicle]);
@@ -449,6 +492,7 @@ function Map(props) {
   jwt = props.logData.jwt;
   projectId = props.logData.projectId;
   setFeaturedObject = props.setFeaturedObject;
+  focusSelectedRow = props.focusSelectedRow;
   setTimeRange = props.setTimeRange;
 
   function centerOnLocation(lat, lng) {

src/TimeSlider.js

@@ -108,6 +108,8 @@ function TimeSlider(props) {
         if (props.centerOnLocation && lat && lng) {
           props.centerOnLocation(lat, lng);
         }
+
+        setTimeout(() => props.focusSelectedRow(), 0);
       }
     } else {
       log("TimeSlider - No logs found in current time range");

src/TrafficPolyline.js

@@ -15,10 +15,11 @@ export const TRAFFIC_COLORS = {
 };
 
 export class TrafficPolyline {
-  constructor({ path, zIndex, trafficRendering, currentLatLng, map }) {
+  constructor({ path, zIndex, isTripEvent, trafficRendering, currentLatLng, map }) {
     this.polylines = [];
     this.path = path;
     this.zIndex = zIndex;
+    this.isTripEvent = isTripEvent;
     this.currentLatLng = currentLatLng;
     this.map = map;
     this.segments = this.calculateSegments(trafficRendering);
@@ -142,6 +143,33 @@ export class TrafficPolyline {
   }
 
   createPolylines() {
+    if (this.isTripEvent) {
+      const polyline = new google.maps.Polyline({
+        path: this.path,
+        geodesic: true,
+        strokeColor: "#000000",
+        strokeOpacity: 1,
+        strokeWeight: 1.5,
+        zIndex: this.zIndex || 3,
+        isRouteSegment: true,
+        icons: [
+          {
+            icon: {
+              path: google.maps.SymbolPath.FORWARD_OPEN_ARROW,
+              scale: 1.5,
+              strokeWeight: 1,
+            },
+            offset: "50%",
+            repeat: "100px",
+          },
+        ],
+        map: this.map,
+        clickable: false,
+      });
+      this.polylines.push(polyline);
+      return;
+    }
+
     this.segments.forEach((segment) => {
       const polyline = new google.maps.Polyline({
         path: segment.path,

src/Trip.js

@@ -55,8 +55,8 @@ class Trip {
   // or synthesize pathCoords on the fly?
   appendCoords(lastLocation, timestamp) {
     this.pathCoords.push({
-      lat: lastLocation.rawlocation.latitude,
-      lng: lastLocation.rawlocation.longitude,
+      lat: lastLocation.location.latitude,
+      lng: lastLocation.location.longitude,
       trip_id: this.tripName,
       date: new Date(timestamp),
     });