feat(frontend): enhance MapView with trip details drawer and trip update handling

cosmith · cosmith · commit 9465d7a1387d · 2025-09-03T17:11:31.000+02:00
- Integrated TripDetailsDrawer into MapView for displaying trip details.
- Added functionality to refresh trip data upon updates.
- Improved map interaction by allowing selection of trips with visual feedback.
- Updated useMapLayers to support trip selection and fitting map bounds to selected trips.
- Enhanced drawer animation with slide-in effect for better user experience.
diff --git a/frontend/src/components/maps/MapView.tsx b/frontend/src/components/maps/MapView.tsx
@@ -1,19 +1,30 @@
 import React, { useEffect, useState, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
-import { Box, Text } from '@chakra-ui/react'
+import { Box, Text, useDisclosure } from '@chakra-ui/react'
 import { useMapData } from '../../hooks/useMapData'
 import { useMapLayers } from '../../hooks/useMapLayers'
-import { MapControls } from '../../types/map'
+import type { MapControls, Trip } from '../../types/map'
 import { getMapCustomCSS } from '../../utils/mapStyles'
 import MapControlsComponent from './MapControls'
+import { TripDetailsDrawer } from '../trips/TripDetailsDrawer'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 const MapView: React.FC = () => {
   const mapContainer = useRef<HTMLDivElement>(null)
   const map = useRef<mapboxgl.Map | null>(null)
+  const [selectedTrip, setSelectedTrip] = useState<Trip | null>(null)
 
   // Custom hooks for data and layer management
-  const { stops, trips, vehiclePositions, loading, error } = useMapData()
+  const { stops, trips, vehiclePositions, loading, error, refetchTrips } =
+    useMapData()
+
+  const [shouldRefreshTrips, setShouldRefreshTrips] = useState(false)
+
+  const handleTripUpdated = async () => {
+    setShouldRefreshTrips(true)
+    await refetchTrips()
+  }
+
   const {
     addMarkersToMap,
     addTripsToMap,
@@ -22,7 +33,24 @@ const MapView: React.FC = () => {
     toggleTripVisibility,
     toggleVehicleVisibility,
     setupMapClickHandler,
-  } = useMapLayers(map)
+    fitMapToTrip,
+    resetSelectedTrip,
+    forceRefreshTrips,
+  } = useMapLayers(map, (trip: Trip) => {
+    setSelectedTrip(trip)
+    onDrawerOpen()
+    // Fit map to trip with space for drawer after a short delay
+    setTimeout(() => {
+      fitMapToTrip(trip, true)
+    }, 100)
+  })
+
+  // Drawer state
+  const {
+    isOpen: isDrawerOpen,
+    onOpen: onDrawerOpen,
+    onClose: onDrawerClose,
+  } = useDisclosure()
 
   // Control states for map layers
   const [controls, setControls] = useState<MapControls>({
@@ -36,6 +64,20 @@ const MapView: React.FC = () => {
 
   const mapboxToken = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
 
+  // Effect to force refresh trips when data changes after an update
+  useEffect(() => {
+    if (shouldRefreshTrips && mapReady && map.current && trips.length > 0) {
+      forceRefreshTrips(trips, controls.showTrips)
+      setShouldRefreshTrips(false)
+    }
+  }, [
+    trips,
+    shouldRefreshTrips,
+    mapReady,
+    forceRefreshTrips,
+    controls.showTrips,
+  ])
+
   // Handle control changes
   const handleControlChange = (control: keyof MapControls, value: boolean) => {
     setControls((prev) => ({ ...prev, [control]: value }))
@@ -180,6 +222,17 @@ const MapView: React.FC = () => {
         controls={controls}
         onControlChange={handleControlChange}
       />
+
+      <TripDetailsDrawer
+        isOpen={isDrawerOpen}
+        onClose={() => {
+          setSelectedTrip(null)
+          resetSelectedTrip()
+          onDrawerClose()
+        }}
+        trip={selectedTrip}
+        onTripUpdated={handleTripUpdated}
+      />
     </Box>
   )
 }
diff --git a/frontend/src/components/trips/TripDetailsDrawer.tsx b/frontend/src/components/trips/TripDetailsDrawer.tsx
@@ -187,7 +187,13 @@ export const TripDetailsDrawer: React.FC<TripDetailsDrawerProps> = ({
   )
 
   return (
-    <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="xl">
+    <Drawer
+      isOpen={isOpen}
+      placement="right"
+      onClose={onClose}
+      size="xl"
+      motionPreset="slideInRight"
+    >
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
diff --git a/frontend/src/hooks/useMapLayers.ts b/frontend/src/hooks/useMapLayers.ts
@@ -13,7 +13,8 @@ import {
 } from '../utils/mapStyles'
 
 export const useMapLayers = (
-  map: React.MutableRefObject<mapboxgl.Map | null>
+  map: React.MutableRefObject<mapboxgl.Map | null>,
+  onTripClick?: (trip: Trip) => void
 ) => {
   const stopMarkers = useRef<mapboxgl.Marker[]>([])
   const vehicleMarkers = useRef<mapboxgl.Marker[]>([])
@@ -124,33 +125,7 @@ export const useMapLayers = (
     (trips: Trip[], showTrips: boolean) => {
       if (!map.current) return
 
-      // Check if we already have the right number of trip sources
-      const expectedSources = trips.filter(
-        (trip) => trip.trip_stops && trip.trip_stops.length >= 2
-      ).length
-
-      if (tripSources.current.length === expectedSources) {
-        // Just toggle visibility if sources already exist
-        tripSources.current.forEach((sourceId) => {
-          const layerId = `${sourceId}-layer`
-          if (map.current?.getLayer(layerId)) {
-            map.current.setLayoutProperty(
-              layerId,
-              'visibility',
-              showTrips ? 'visible' : 'none'
-            )
-          }
-        })
-
-        // Toggle arrow markers visibility
-        const arrowElements = document.querySelectorAll('.trip-arrow')
-        arrowElements.forEach((element) => {
-          ;(element as HTMLElement).style.opacity = showTrips ? '0.8' : '0'
-        })
-        return
-      }
-
-      // Clear existing trip sources if count doesn't match
+      // Always clear existing trip sources to ensure fresh data
       tripSources.current.forEach((sourceId) => {
         if (map.current?.getSource(sourceId)) {
           if (map.current?.getLayer(`${sourceId}-layer`)) {
@@ -204,7 +179,11 @@ export const useMapLayers = (
         })
 
         const statusColor = getStatusColor(trip.status)
-        const patternId = 'trip-chevron'
+        // Use selected pattern if this trip is currently selected
+        const patternId =
+          selectedTripId.current === trip.id
+            ? 'trip-chevron-selected'
+            : 'trip-chevron'
 
         // Load chevron pattern images if they don't exist
         if (!map.current!.hasImage('trip-chevron')) {
@@ -240,6 +219,7 @@ export const useMapLayers = (
           layout: {
             'line-join': 'none',
             'line-cap': 'round',
+            visibility: showTrips ? 'visible' : 'none',
           },
           paint: {
             'line-color': statusColor,
@@ -251,53 +231,71 @@ export const useMapLayers = (
 
         // Add click handler for trip lines
         map.current!.on('click', `${sourceId}-layer`, (e) => {
-          const coordinates = e.lngLat
-
-          // Create popup content using the same styling as stops
-          const popupContent = createTripPopupContent(trip, validStops)
-
-          const popup = new mapboxgl.Popup({
-            offset: 25,
-            closeButton: true,
-            closeOnClick: false,
-            className: 'custom-popup',
-          }).setHTML(popupContent)
-
-          // Close all other popups when this one opens
-          closeAllPopups()
-          activePopups.current.push(popup)
-
-          // Update selected trip pattern
-          selectedTripId.current = trip.id
-          const layerId = `${sourceId}-layer`
-          if (map.current?.getLayer(layerId)) {
-            map.current.setPaintProperty(
-              layerId,
-              'line-pattern',
-              'trip-chevron-selected'
-            )
-          }
+          if (onTripClick) {
+            // Close all popups and update selected trip pattern
+            closeAllPopups()
+            selectedTripId.current = trip.id
+            const layerId = `${sourceId}-layer`
+            if (map.current?.getLayer(layerId)) {
+              map.current.setPaintProperty(
+                layerId,
+                'line-pattern',
+                'trip-chevron-selected'
+              )
+            }
 
-          // Remove from active popups when closed and reset pattern
-          popup.on('close', () => {
-            activePopups.current = activePopups.current.filter(
-              (p) => p !== popup
-            )
+            // Call the trip click callback (for drawer)
+            onTripClick(trip)
+          } else {
+            // Fallback to popup behavior
+            const coordinates = e.lngLat
+
+            // Create popup content using the same styling as stops
+            const popupContent = createTripPopupContent(trip, validStops)
+
+            const popup = new mapboxgl.Popup({
+              offset: 25,
+              closeButton: true,
+              closeOnClick: false,
+              className: 'custom-popup',
+            }).setHTML(popupContent)
+
+            // Close all other popups when this one opens
+            closeAllPopups()
+            activePopups.current.push(popup)
+
+            // Update selected trip pattern
+            selectedTripId.current = trip.id
+            const layerId = `${sourceId}-layer`
+            if (map.current?.getLayer(layerId)) {
+              map.current.setPaintProperty(
+                layerId,
+                'line-pattern',
+                'trip-chevron-selected'
+              )
+            }
 
-            // Reset pattern back to normal when popup closes
-            if (selectedTripId.current === trip.id) {
-              selectedTripId.current = null
-              if (map.current?.getLayer(layerId)) {
-                map.current.setPaintProperty(
-                  layerId,
-                  'line-pattern',
-                  'trip-chevron'
-                )
+            // Remove from active popups when closed and reset pattern
+            popup.on('close', () => {
+              activePopups.current = activePopups.current.filter(
+                (p) => p !== popup
+              )
+
+              // Reset pattern back to normal when popup closes
+              if (selectedTripId.current === trip.id) {
+                selectedTripId.current = null
+                if (map.current?.getLayer(layerId)) {
+                  map.current.setPaintProperty(
+                    layerId,
+                    'line-pattern',
+                    'trip-chevron'
+                  )
+                }
               }
-            }
-          })
+            })
 
-          popup.setLngLat(coordinates).addTo(map.current!)
+            popup.setLngLat(coordinates).addTo(map.current!)
+          }
         })
 
         // Change cursor on hover
@@ -310,7 +308,7 @@ export const useMapLayers = (
         })
       })
     },
-    [map, closeAllPopups]
+    [map, closeAllPopups, onTripClick]
   )
 
   const toggleStopVisibility = useCallback((showStops: boolean) => {
@@ -440,6 +438,68 @@ export const useMapLayers = (
     [map]
   )
 
+  const fitMapToTrip = useCallback(
+    (trip: Trip, withDrawerSpace = false) => {
+      if (!map.current || !trip.trip_stops || trip.trip_stops.length === 0)
+        return
+
+      const bounds = new mapboxgl.LngLatBounds()
+
+      // Add all trip stops to bounds
+      trip.trip_stops.forEach((tripStop) => {
+        if (tripStop.stop.latitude && tripStop.stop.longitude) {
+          const lat = parseFloat(tripStop.stop.latitude)
+          const lng = parseFloat(tripStop.stop.longitude)
+          bounds.extend([lng, lat])
+        }
+      })
+
+      // Adjust padding to account for drawer space
+      const padding = withDrawerSpace
+        ? { top: 100, bottom: 100, left: 100, right: 1000 } // Extra space on right for drawer
+        : 50
+
+      map.current.fitBounds(bounds, {
+        padding,
+        maxZoom: 12,
+      })
+    },
+    [map]
+  )
+
+  const resetSelectedTrip = useCallback(() => {
+    if (selectedTripId.current) {
+      const tripId = selectedTripId.current
+      selectedTripId.current = null
+
+      const layerId = `trip-${tripId}-layer`
+      if (map.current?.getLayer(layerId)) {
+        map.current.setPaintProperty(layerId, 'line-pattern', 'trip-chevron')
+      }
+    }
+  }, [map])
+
+  const forceRefreshTrips = useCallback(
+    (trips: Trip[], showTrips: boolean) => {
+      if (!map.current) return
+
+      // Clear existing trip sources
+      tripSources.current.forEach((sourceId) => {
+        if (map.current?.getSource(sourceId)) {
+          if (map.current?.getLayer(`${sourceId}-layer`)) {
+            map.current.removeLayer(`${sourceId}-layer`)
+          }
+          map.current.removeSource(sourceId)
+        }
+      })
+      tripSources.current = []
+
+      // Re-add all trips
+      addTripsToMap(trips, showTrips)
+    },
+    [map, addTripsToMap]
+  )
+
   return {
     addMarkersToMap,
     addTripsToMap,
@@ -449,5 +509,8 @@ export const useMapLayers = (
     toggleVehicleVisibility,
     setupMapClickHandler,
     fitMapToStops,
+    fitMapToTrip,
+    resetSelectedTrip,
+    forceRefreshTrips,
   }
 }
