feat: 5 Datasets and Polyline highlight on mouseover (#235)

* feat: Five Datasets

* Fix: Ensure currentTrips is an array

* fix: fix mouse hover on trip polylines

Author: regeter

src/App.js

@@ -66,10 +66,10 @@ class App extends React.Component {
         showLiveJS: getToggleDefault("showLiveJS", false),
         showClientServerTimeDeltas: getToggleDefault("showClientServerTimeDeltas", false),
       },
-      uploadedDatasets: [null, null, null],
+      uploadedDatasets: [null, null, null, null, null],
       activeDatasetIndex: null,
       activeMenuIndex: null,
-      selectedRowIndexPerDataset: [-1, -1, -1],
+      selectedRowIndexPerDataset: [-1, -1, -1, -1, -1],
     };
     // Realtime updates are too heavy. There must be a better/ react way
     this.onSliderChangeDebounced = _.debounce((timeRange) => this.onSliderChange(timeRange), 25);
@@ -446,7 +446,7 @@ class App extends React.Component {
 
   checkUploadedDatasets = async () => {
     const newUploadedDatasets = await Promise.all(
-      [0, 1, 2].map(async (index) => {
+      [0, 1, 2, 3, 4].map(async (index) => {
         const data = await getUploadedData(index);
         log(`Dataset ${index}:`, data);
         if (data && data.rawLogs && Array.isArray(data.rawLogs) && data.rawLogs.length > 0) {
@@ -921,7 +921,7 @@ class App extends React.Component {
                     </select>
                   </div>
                 </div>
-                <div className="dataset-controls">{[0, 1, 2].map((index) => this.renderUploadButton(index))}</div>
+                <div className="dataset-controls">{[0, 1, 2, 3, 4].map((index) => this.renderUploadButton(index))}</div>
                 <div className="help-text">
                   <div>All Data remains client side</div>
                   <div>

src/Map.js

@@ -62,10 +62,10 @@ function addTripPolys(map) {
 
   _.forEach(trips, (trip) => {
     tripObjects.addTripVisuals(trip, minDate, maxDate);
-
     // Update bounds
     const tripCoords = trip.getPathCoords(minDate, maxDate);
     if (tripCoords.length > 0) {
+      tripObjects.addTripVisuals(trip, minDate, maxDate);
       tripCoords.forEach((coord) => vehicleBounds.extend(coord));
     }
   });

src/TripLogs.js

@@ -451,7 +451,7 @@ class TripLogs {
       return stopsLeft && "Stops Left " + stopsLeft.length;
     } else {
       const currentTrips = _.get(logEntry, "response.currenttrips");
-      if (currentTrips) {
+      if (currentTrips && Array.isArray(currentTrips) && currentTrips.length > 0) {
         return currentTrips.join();
       }
     }

src/TripObjects.js

@@ -140,17 +140,24 @@ export class TripObjects {
         strokeColor: strokeColor,
         strokeOpacity: 0.3,
         strokeWeight: 6,
-        clickable: false,
+        clickable: true,
+        zIndex: 1,
         map: this.map,
       });
 
-      // Add path events
       google.maps.event.addListener(path, "mouseover", () => {
-        path.setOptions({ strokeOpacity: 1, strokeWeight: 8 });
+        path.setOptions({ strokeOpacity: 0.7, strokeWeight: 8, zIndex: 100 });
       });
 
       google.maps.event.addListener(path, "mouseout", () => {
-        path.setOptions({ strokeOpacity: 0.5, strokeWeight: 6 });
+        path.setOptions({ strokeOpacity: 0.3, strokeWeight: 6, zIndex: 1 });
+      });
+
+      // Handle click on polyline but pass the event through to the map
+      google.maps.event.addListener(path, "click", (event) => {
+        // Trigger a map click at the same position to maintain selection functionality
+        google.maps.event.trigger(this.map, "click", event);
+        return false; // Prevent default action to avoid double handling
       });
 
       this.paths.set(tripId, path);