feat: Implement Advanced Log Filtering and UI/UX Improvements (#259)

* feat(map): Enhance traffic polyline visibility with casing

Adds a wider, semi-transparent black "casing" polyline that is rendered
underneath the primary colored traffic line on the map.

This creates a border effect that significantly improves the visibility
and contrast of the planned route, especially on complex map backgrounds
or when zoomed out.

* feat(filters): Implement advanced log filtering by type and trip ID

Introduces a new filtering system to allow users to narrow down large
log datasets.

- Adds a filter bar to the UI with a dropdown for log types (for On Demand Trips)
  and a text input for filtering by a partial or full Trip ID.
- The core filtering logic is centralized in `TripLogs.getLogs_`.
- All data-driven components (LogTable, Map, TimeSlider) and navigation
  controls now respect the active filters.

* feat(map): Better trip colors that are more distinct from traffic colors

* fix: Remove spammy debug log

* fix: linter 46fe54f

Author: googlemaps-bot

src/App.js

@@ -36,6 +36,78 @@ const MARKER_COLORS = [
   "#26A69A", // Darker Teal
 ];
 
+const ODRD_FILTERS = ["createVehicle", "getVehicle", "updateVehicle", "createTrip", "getTrip", "updateTrip"];
+
+function FilterBar({ availableFilters, filterState, clickHandler }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const filterBarRef = React.useRef(null);
+
+  React.useEffect(() => {
+    function handleClickOutside(event) {
+      if (filterBarRef.current && !filterBarRef.current.contains(event.target)) {
+        log("Clicked outside FilterBar, closing menu.");
+        setIsOpen(false);
+      }
+    }
+    if (isOpen) {
+      log("Filter menu is open, adding click outside listener.");
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  if (!availableFilters || availableFilters.length === 0) {
+    return null;
+  }
+
+  const handleButtonClick = () => {
+    log(`Filter button clicked. Menu will be ${!isOpen ? "opened" : "closed"}.`);
+    setIsOpen(!isOpen);
+  };
+
+  const activeFilterCount = availableFilters.filter((type) => filterState[type]).length;
+  const totalFilterCount = availableFilters.length;
+  const buttonText = `Filter Log Types (${activeFilterCount}/${totalFilterCount})`;
+  const isFiltered = activeFilterCount !== totalFilterCount;
+
+  return (
+    <div style={{ position: "relative", display: "inline-block" }} ref={filterBarRef}>
+      <button
+        className={`toggle-button ${isOpen || isFiltered ? "toggle-button-active" : ""}`}
+        onClick={handleButtonClick}
+      >
+        {buttonText}
+      </button>
+      {isOpen && (
+        <div className="filter-menu">
+          {availableFilters.map((filterType) => (
+            <label key={filterType} className="filter-menu-item">
+              <input type="checkbox" checked={!!filterState[filterType]} onChange={() => clickHandler(filterType)} />
+              {filterType}
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function TripIdFilter({ value, onChange }) {
+  return (
+    <div style={{ marginLeft: "10px" }}>
+      <input
+        type="text"
+        placeholder="Filter by Trip ID"
+        value={value}
+        onChange={onChange}
+        className="trip-id-filter-input"
+      />
+    </div>
+  );
+}
+
 class App extends React.Component {
   constructor(props) {
     super(props);
@@ -55,6 +127,21 @@ class App extends React.Component {
       featuredObject: { msg: "Click a table row to select object" },
       extraColumns: [],
       toggleOptions: Object.fromEntries(ALL_TOGGLES.map((t) => [t.id, false])),
+      logTypeFilters: {
+        createVehicle: true,
+        getVehicle: true,
+        updateVehicle: true,
+        createTrip: true,
+        getTrip: true,
+        updateTrip: true,
+        createDeliveryVehicle: true,
+        getDeliveryVehicle: true,
+        updateDeliveryVehicle: true,
+        createTask: true,
+        getTask: true,
+        updateTask: true,
+      },
+      tripIdFilter: "",
       uploadedDatasets: [null, null, null, null, null],
       activeDatasetIndex: null,
       activeMenuIndex: null,
@@ -176,7 +263,9 @@ class App extends React.Component {
       this.setState((prevState) => {
         const minDate = new Date(prevState.timeRange.minTime);
         const maxDate = new Date(prevState.timeRange.maxTime);
-        const logs = this.state.currentLogData.tripLogs.getLogs_(minDate, maxDate).value();
+        const logs = this.state.currentLogData.tripLogs
+          .getLogs_(minDate, maxDate, prevState.logTypeFilters, prevState.tripIdFilter)
+          .value();
         if (logs.length > 0) {
           const firstRow = logs[0];
           setTimeout(() => this.focusOnSelectedRow(), 0);
@@ -194,7 +283,12 @@ class App extends React.Component {
   selectLastRow = () => {
     const minDate = new Date(this.state.timeRange.minTime);
     const maxDate = new Date(this.state.timeRange.maxTime);
-    const logsWrapper = this.state.currentLogData.tripLogs.getLogs_(minDate, maxDate);
+    const logsWrapper = this.state.currentLogData.tripLogs.getLogs_(
+      minDate,
+      maxDate,
+      this.state.logTypeFilters,
+      this.state.tripIdFilter
+    );
     const logs = logsWrapper.value();
     if (logs.length > 0) {
       const lastRow = logs[logs.length - 1];
@@ -206,17 +300,25 @@ class App extends React.Component {
   };
 
   handleRowChange = async (direction) => {
-    const { featuredObject } = this.state;
+    const { featuredObject, logTypeFilters, tripIdFilter } = this.state;
     const minDate = new Date(this.state.timeRange.minTime);
     const maxDate = new Date(this.state.timeRange.maxTime);
-    const logs = this.state.currentLogData.tripLogs.getLogs_(minDate, maxDate).value();
+    const logs = this.state.currentLogData.tripLogs.getLogs_(minDate, maxDate, logTypeFilters, tripIdFilter).value();
     let newFeaturedObject = featuredObject;
     const currentIndex = logs.findIndex((log) => log.timestamp === featuredObject.timestamp);
-    if (direction === "next" && currentIndex < logs.length - 1) {
+
+    if (currentIndex === -1) {
+      if (logs.length > 0) {
+        newFeaturedObject = logs[0];
+      } else {
+        return;
+      }
+    } else if (direction === "next" && currentIndex < logs.length - 1) {
       newFeaturedObject = logs[currentIndex + 1];
     } else if (direction === "previous" && currentIndex > 0) {
       newFeaturedObject = logs[currentIndex - 1];
     }
+
     if (newFeaturedObject !== featuredObject) {
       this.setState({ featuredObject: newFeaturedObject }, () => {
         this.focusOnSelectedRow();
@@ -789,6 +891,22 @@ class App extends React.Component {
     this.updateToggleState(newValue, id, toggle.columns);
   }
 
+  handleLogTypeFilterChange = (filterType) => {
+    log(`Filter toggled for: ${filterType}`);
+    this.setState((prevState) => ({
+      logTypeFilters: {
+        ...prevState.logTypeFilters,
+        [filterType]: !prevState.logTypeFilters[filterType],
+      },
+    }));
+  };
+
+  handleTripIdFilterChange = (event) => {
+    const value = event.target.value;
+    log(`Trip ID filter changed to: "${value}"`);
+    this.setState({ tripIdFilter: value });
+  };
+
   render() {
     const {
       featuredObject,
@@ -798,8 +916,11 @@ class App extends React.Component {
       extraColumns,
       dynamicMarkerLocations,
       visibleToggles,
+      logTypeFilters,
+      tripIdFilter,
     } = this.state;
     const selectedEventTime = featuredObject?.timestamp ? new Date(featuredObject.timestamp).getTime() : null;
+    const availableFilters = currentLogData.solutionType === "ODRD" ? ODRD_FILTERS : [];
 
     return (
       <div className="app-container">
@@ -821,6 +942,8 @@ class App extends React.Component {
                 setRenderMarkerOnMap={this.setRenderMarkerOnMap}
                 focusSelectedRow={this.focusOnSelectedRow}
                 initialMapBounds={this.state.initialMapBounds}
+                logTypeFilters={logTypeFilters}
+                tripIdFilter={tripIdFilter}
               />
             </div>
             <TimeSlider
@@ -832,12 +955,22 @@ class App extends React.Component {
               onRowSelect={(row, rowIndex) => this.onSelectionChange(row, rowIndex)}
               centerOnLocation={this.centerOnLocation}
               focusSelectedRow={this.focusOnSelectedRow}
+              logTypeFilters={logTypeFilters}
+              tripIdFilter={tripIdFilter}
             />
-            <ToggleBar
-              toggles={visibleToggles}
-              toggleState={toggleOptions}
-              clickHandler={(id) => this.toggleClickHandler(id)}
-            />
+            <div className="togglebar-button-group">
+              <ToggleBar
+                toggles={visibleToggles}
+                toggleState={toggleOptions}
+                clickHandler={(id) => this.toggleClickHandler(id)}
+              />
+              <FilterBar
+                availableFilters={availableFilters}
+                filterState={logTypeFilters}
+                clickHandler={this.handleLogTypeFilterChange}
+              />
+              <TripIdFilter value={tripIdFilter} onChange={this.handleTripIdFilterChange} />
+            </div>
             <div className="nav-controls">
               <div className="button-row">
                 <div className="playback-controls">
@@ -883,6 +1016,8 @@ class App extends React.Component {
               onSelectionChange={(rowData, rowIndex) => this.onSelectionChange(rowData, rowIndex)}
               setFocusOnRowFunction={this.setFocusOnRowFunction}
               centerOnLocation={this.centerOnLocation}
+              logTypeFilters={logTypeFilters}
+              tripIdFilter={tripIdFilter}
             />
           </div>
         </div>

src/Dataframe.js

@@ -153,7 +153,6 @@ function Dataframe({ featuredObject, extraColumns, onColumnToggle, onToggleMarke
   const CustomLocationOperation = useCallback(
     ({ node }) => {
       if (isLocationObject(node)) {
-        log("Dataframe: Rendering location button for node.");
         const locationKey = `${node.latitude}_${node.longitude}`;
         const markerState = dynamicMarkerLocations[locationKey];
         const color = markerState ? markerState.color : "lightgrey";

src/LogTable.js

@@ -165,7 +165,7 @@ function LogTable(props) {
   const [selectedRowIndex, setSelectedRowIndex] = useState(-1);
   const minTime = props.timeRange.minTime;
   const maxTime = props.timeRange.maxTime;
-  const data = props.logData.tripLogs.getLogs_(new Date(minTime), new Date(maxTime)).value();
+  const data = props.logData.tripLogs.getLogs_(new Date(minTime), new Date(maxTime), props.filters).value();
   const columnShortWidth = 50;
   const columnRegularWidth = 120;
   const columnLargeWidth = 150;
@@ -221,17 +221,17 @@ function LogTable(props) {
           solutionTypes: ["ODRD", "LMFS"],
         },
         {
-          Header: "TripId 7",
+          Header: "CurrentTrip12",
           accessor: (entry) => {
             const currentTrips = _.get(entry, "response.currenttrips");
             if (currentTrips && currentTrips[0]) {
               const tripId = currentTrips[0];
-              return tripId.substring(Math.max(0, tripId.length - 7));
+              return tripId.substring(Math.max(0, tripId.length - 12));
             }
             return null;
           },
-          width: columnShortWidth,
-          maxWidth: columnShortWidth,
+          width: 90,
+          maxWidth: 90,
           className: "logtable-cell",
           solutionTypes: ["ODRD"],
         },

src/Map.js

@@ -23,6 +23,7 @@ function MapComponent({
   initialMapBounds,
   setCenterOnLocation,
   setRenderMarkerOnMap,
+  filters,
 }) {
   const { tripLogs, taskLogs, jwt, projectId, mapId } = logData;
 
@@ -172,21 +173,48 @@ function MapComponent({
     };
     map.controls[window.google.maps.ControlPosition.LEFT_BOTTOM].push(followButton);
 
+    const centerListener = map.addListener(
+      "center_changed",
+      _.debounce(() => {
+        if (mapRef.current) setQueryStringValue("center", JSON.stringify(mapRef.current.getCenter().toJSON()));
+      }, 100)
+    );
+    const headingListener = map.addListener("heading_changed", () => {
+      if (mapRef.current) setQueryStringValue("heading", mapRef.current.getHeading());
+    });
+
+    return () => {
+      dynamicMarkersRef.current.forEach((m) => m.setMap(null));
+      dynamicMarkersRef.current = [];
+      Object.values(vehicleMarkersRef.current).forEach((marker) => marker && marker.setMap(null));
+      vehicleMarkersRef.current = {};
+      window.google.maps.event.removeListener(centerListener);
+      window.google.maps.event.removeListener(headingListener);
+      mapRef.current = null;
+    };
+  }, []);
+
+  // Effect to manage the map click listener
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    log("Map.js: Attaching map click listener.");
+
     const clickListener = map.addListener("click", (event) => {
       log("Map click listener triggered.");
       const clickLocation = event.latLng;
-      const logs = tripLogs.getLogs_(new Date(rangeStart), new Date(rangeEnd)).value();
+      const logs = tripLogs.getLogs_(new Date(rangeStart), new Date(rangeEnd), filters).value();
       let closestEvent = null;
-      let closestDistance = 250;
+      let searchDistanceMeters = 250;
 
       logs.forEach((logEntry) => {
-        const rawLocation = _.get(logEntry, "lastlocation.rawlocation");
+        const rawLocation = _.get(logEntry, "lastlocation.location");
         if (rawLocation?.latitude && rawLocation?.longitude) {
           const eventLocation = new window.google.maps.LatLng(rawLocation.latitude, rawLocation.longitude);
           const distance = window.google.maps.geometry.spherical.computeDistanceBetween(clickLocation, eventLocation);
-          if (distance < closestDistance) {
+          if (distance < searchDistanceMeters) {
             closestEvent = logEntry;
-            closestDistance = distance;
+            searchDistanceMeters = distance;
           }
         }
       });
@@ -196,28 +224,10 @@ function MapComponent({
       }
     });
 
-    const centerListener = map.addListener(
-      "center_changed",
-      _.debounce(() => {
-        if (mapRef.current) setQueryStringValue("center", JSON.stringify(mapRef.current.getCenter().toJSON()));
-      }, 100)
-    );
-    const headingListener = map.addListener("heading_changed", () => {
-      if (mapRef.current) setQueryStringValue("heading", mapRef.current.getHeading());
-    });
-
     return () => {
-      log("Map.js: Cleanup from initialization useEffect.");
-      dynamicMarkersRef.current.forEach((m) => m.setMap(null));
-      dynamicMarkersRef.current = [];
-      Object.values(vehicleMarkersRef.current).forEach((marker) => marker && marker.setMap(null));
-      vehicleMarkersRef.current = {};
       window.google.maps.event.removeListener(clickListener);
-      window.google.maps.event.removeListener(centerListener);
-      window.google.maps.event.removeListener(headingListener);
-      mapRef.current = null;
     };
-  }, []);
+  }, [mapRef, tripLogs, rangeStart, rangeEnd, filters, setFeaturedObject, focusSelectedRow]);
 
   const handlePolylineSubmit = useCallback((waypoints, properties) => {
     const map = mapRef.current;

src/TimeSlider.js

@@ -77,7 +77,7 @@ function TimeSlider(props) {
     log(`TimeSlider - Finding closest event to: ${new Date(clickTime).toISOString()}`);
 
     // Find the closest event to this time
-    const logs = tripLogs.getLogs_(new Date(minVal), new Date(maxVal)).value();
+    const logs = tripLogs.getLogs_(new Date(minVal), new Date(maxVal), props.filters).value();
 
     if (logs.length > 0) {
       // Find closest log entry to the clicked time
@@ -182,7 +182,7 @@ function TimeSlider(props) {
       document.removeEventListener("mouseup", handleMouseUp);
       document.removeEventListener("touchend", handleMouseUp, { passive: true });
     };
-  }, [minVal, maxVal, tripLogs, isDragging, props.onRowSelect, props.centerOnLocation]);
+  }, [minVal, maxVal, tripLogs, isDragging, props.onRowSelect, props.centerOnLocation, props.filters]);
 
   return (
     <div style={style} ref={sliderContainerRef}>