feat: Refine Trip Visualization and Marker Appearance (#257)

* feat: Allow zoom up to 22

* fix: Only use current trip for trip colors for multi trip vehicles

* feat: Use trip colors for pickup and drop off

* fix: save current parameters to query parameters on fetch

* fix: linter

Author: regeter

src/DatasetLoading.js

@@ -53,6 +53,10 @@ const CloudLoggingFormComponent = ({ onLogsReceived, onFileUpload }) => {
     setLocalError(null);
     setFetching(true);
     try {
+      Object.entries(queryParams).forEach(([key, value]) => {
+        localStorage.setItem(`datasetLoading_${key}`, value);
+      });
+
       buildQueryFilter(queryParams); // Quick validation
       if (isTokenValid()) {
         handleCloudLoggingFetch(sessionStorage.getItem("cloudLogging_token"));

src/Map.js

@@ -105,7 +105,7 @@ function MapComponent({
     const jsMapView = new window.google.maps.journeySharing.JourneySharingMapView({
       element: mapDivRef.current,
       locationProviders: [locationProviderRef.current],
-      mapOptions: { mapId, mapTypeControl: true, streetViewControl: true },
+      mapOptions: { mapId, mapTypeControl: true, streetViewControl: true, maxZoom: 22 },
     });
     const map = jsMapView.map;
     mapRef.current = map;

src/TripLogs.js

@@ -1,4 +1,3 @@
-// src/TripLogs.js
 /*
  * src/TripLogs.js
  *
@@ -463,7 +462,7 @@ class TripLogs {
     } else {
       const currentTrips = _.get(logEntry, "response.currenttrips");
       if (currentTrips && Array.isArray(currentTrips) && currentTrips.length > 0) {
-        return currentTrips.join();
+        return currentTrips[0];
       }
     }
   }

src/TripObjects.js

@@ -21,27 +21,27 @@ export class TripObjects {
       let points;
       if (direction === "up") {
         points = [
-          { x: 12, y: 20 + shift }, // Top point of chevron
-          { x: 8, y: 24 + shift }, // Bottom left
-          { x: 16, y: 24 + shift }, // Bottom right
-          { x: 12, y: 20 + shift },
+          { x: 12, y: 16 + shift }, // Top point of chevron
+          { x: 5, y: 24 + shift }, // Bottom left
+          { x: 19, y: 24 + shift }, // Bottom right
+          { x: 12, y: 16 + shift },
         ];
       } else {
         // "down"
         points = [
           { x: 12, y: 24 + shift }, // Bottom point of chevron
-          { x: 8, y: 20 + shift }, // Top left
-          { x: 16, y: 20 + shift }, // Top right
+          { x: 5, y: 16 + shift }, // Top left
+          { x: 19, y: 16 + shift }, // Top right
           { x: 12, y: 24 + shift },
         ];
       }
 
-      return `<path d="M${points[0].x} ${points[0].y}L${points[1].x} ${points[1].y}L${points[2].x} ${points[2].y}L${points[3].x} ${points[3].y}Z" fill="${color}" stroke="${color}" stroke-width="1"/>`;
+      return `<path d="M${points[0].x} ${points[0].y}L${points[1].x} ${points[1].y}L${points[2].x} ${points[2].y}L${points[3].x} ${points[3].y}Z" fill="${color}" stroke="black" stroke-width="1" stroke-linejoin="round"/>`;
     };
 
     const svgBase = `
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-      ${isActual ? (isPickup ? createChevronPath("up", -4) : createChevronPath("down", -4)) : ""}
+      ${isActual ? (isPickup ? createChevronPath("up", -5) : createChevronPath("down", -5)) : ""}
       ${isPickup ? createChevronPath("up") : createChevronPath("down")}
     </svg>`;
 
@@ -169,6 +169,7 @@ export class TripObjects {
     }
 
     const markers = [];
+    const tripColor = getColor(trip.tripIdx);
 
     // Get points
     const pickupPoint = trip.getPickupPoint();
@@ -177,26 +178,26 @@ export class TripObjects {
     const actualDropoffPoint = trip.getActualDropoffPoint();
 
     // Create pickup markers
-    const pickupMarker = this.createMarkerWithEvents(pickupPoint, "pickup", "#3d633d", actualPickupPoint, tripId);
+    const pickupMarker = this.createMarkerWithEvents(pickupPoint, "pickup", tripColor, actualPickupPoint, tripId);
     if (pickupMarker) markers.push(pickupMarker);
 
     const actualPickupMarker = this.createMarkerWithEvents(
       actualPickupPoint,
       "actualPickup",
-      "#3d633d",
+      tripColor,
       pickupPoint,
       tripId
     );
     if (actualPickupMarker) markers.push(actualPickupMarker);
 
     // Create dropoff markers
-    const dropoffMarker = this.createMarkerWithEvents(dropoffPoint, "dropoff", "#0000FF", actualDropoffPoint, tripId);
+    const dropoffMarker = this.createMarkerWithEvents(dropoffPoint, "dropoff", tripColor, actualDropoffPoint, tripId);
     if (dropoffMarker) markers.push(dropoffMarker);
 
     const actualDropoffMarker = this.createMarkerWithEvents(
       actualDropoffPoint,
       "actualDropoff",
-      "#0000FF",
+      tripColor,
       dropoffPoint,
       tripId
     );

src/localStorage.test.js

@@ -86,7 +86,7 @@ describe("parseJsonContent", () => {
   });
 
   it("should throw an error for invalid JSON", () => {
-  // Temporarily spy on console.error and replace it with a function that does nothing.
+    // Temporarily spy on console.error and replace it with a function that does nothing.
     const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {});
     const invalidJson = "{invalid}";
     expect(() => parseJsonContent(invalidJson)).toThrow("Invalid JSON content");