Merge pull request #134 from utahudot/Avenue-Staging

Avenue staging

Atspm/Application/Business/GreenTimeUtilization/GreenTimeUtilizationService.cs

@@ -128,7 +128,7 @@ List<IndianaEvent> controllerEventLogs
                     {
                         TimeSpan timeSinceGreenStart = detection.Timestamp - timeStamp;
                         var yAxisBinNumber = (int)(timeSinceGreenStart.TotalSeconds / options.YAxisBinSize);
-                        if (BinValueList.Count < yAxisBinNumber)
+                        if (BinValueList.Count <= yAxisBinNumber)
                         {
                             int howMany = yAxisBinNumber - BinValueList.Count + 1;  //check the numbering on this, might need to add 1, etc)
                             for (int i = 1; i <= howMany; i++)

Atspm/Application/Business/PedDelay/PedPhaseService.cs

@@ -121,9 +121,9 @@ private void GetCycles(
             pedPhaseData.PedRequests = mainEvents.Count(e => e.EventCode == 90);
             pedPhaseData.PedCallsRegisteredCount = mainEvents.Count(e => e.EventCode == 45);
 
-            mainEvents = Remove45s(mainEvents);
-
-            mainEvents = CombineSequential90s(mainEvents);
+            //mainEvents = Remove45s(mainEvents);
+            var pedEventCodes = new List<int> { 21, 22, 90 };
+            mainEvents = mainEvents.Where(e => pedEventCodes.Contains(e.EventCode)).OrderBy(e => e.Timestamp).ToList();
 
             pedPhaseData.PedBeginWalkCount = mainEvents.Count(e => e.EventCode == pedPhaseData.BeginWalkEvent);
             pedPhaseData.ImputedPedCallsRegistered = CountImputedPedCalls(mainEvents, previousEvents, pedPhaseData);

Atspm/WebUI/src/components/LocationMap/LocationMap.tsx

@@ -14,51 +14,56 @@ import {
 } from '@mui/material'
 import L, { Map as LeafletMap } from 'leaflet'
 import 'leaflet/dist/leaflet.css'
-import { memo, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { MapContainer, Polyline, TileLayer } from 'react-leaflet'
 
-type MapProps = {
+interface Filters {
+  areaId?: number | null
+  regionId?: number | null
+  locationTypeId?: number | null
+  jurisdictionId?: number | null
+  measureTypeId?: number | null
+}
+
+interface LocationMapProps {
   location: Location | null
   setLocation: (location: Location) => void
   locations: Location[]
+  filteredLocations: Location[]
   route?: number[][]
   center?: [number, number]
   zoom?: number
   mapHeight?: number | string
+  filters: Filters
+  updateFilters: (filters: Partial<Filters>) => void
 }
 
 const LocationMap = ({
   location,
   setLocation,
   locations,
+  filteredLocations,
   route,
   center,
   zoom,
   mapHeight,
-}: MapProps) => {
+  filters,
+  updateFilters,
+}: LocationMapProps) => {
   const theme = useTheme()
   const [mapRef, setMapRef] = useState<LeafletMap | null>(null)
-  const [isPopperOpen, setIsPopperOpen] = useState(false)
+  const [isFiltersOpen, setIsFiltersOpen] = useState(false)
   const filtersButtonRef = useRef(null)
-  const [selectedAreaId, setSelectedAreaId] = useState<number | null>(null)
-  const [selectedRegionId, setSelectedRegionId] = useState<number | null>(null)
-  const [selectedLocationTypeId, setSelectedLocationTypeId] = useState<
-    number | null
-  >(null)
-  const [selectedJurisdictionId, setSelectedJurisdictionId] = useState<
-    number | null
-  >(null)
-  const [selectedMeasureTypeId, setSelectedMeasureTypeId] = useState<
-    number | null
-  >(null)
-  const [filteredLocations, setFilteredLocations] = useState(locations)
+
   const [mapInfo, setMapInfo] = useState<{
     tile_layer: string
     attribution: string
     initialLat: number
     initialLong: number
   } | null>(null)
 
+  const locationsEnabledLength = locations.filter((l) => l.chartEnabled).length
+
   useEffect(() => {
     const fetchEnv = async () => {
       const env = await getEnv()
@@ -75,16 +80,13 @@ const LocationMap = ({
   // Pan to the selected location
   useEffect(() => {
     if (location && mapRef) {
-      const markerToPanTo = filteredLocations?.find(
-        (marker) => marker.locationIdentifier === location.locationIdentifier
-      )
-
-      if (markerToPanTo) {
-        const { latitude, longitude } = markerToPanTo
-        mapRef?.setView([latitude, longitude], 16)
+      const markerLocation = locations.find((loc) => loc.id === location.id)
+      if (markerLocation) {
+        const { latitude, longitude } = markerLocation
+        mapRef.setView([latitude, longitude], 16)
       }
     }
-  }, [location, filteredLocations, mapRef])
+  }, [location, mapRef, locations])
 
   // Resize the map when the container resizes
   useEffect(() => {
@@ -104,34 +106,11 @@ const LocationMap = ({
     }
   }, [mapRef])
 
-  // Filter locations based on selected filters
-  useEffect(() => {
-    const filtered = locations.filter(
-      (location) =>
-        (!selectedAreaId || location.areas?.includes(selectedAreaId)) &&
-        (!selectedRegionId || location.regionId === selectedRegionId) &&
-        (!selectedLocationTypeId ||
-          location.locationTypeId === selectedLocationTypeId) &&
-        (!selectedMeasureTypeId ||
-          location.charts?.includes(selectedMeasureTypeId)) &&
-        (!selectedJurisdictionId ||
-          location.jurisdictionId === selectedJurisdictionId)
-    )
-    setFilteredLocations(filtered)
-  }, [
-    locations,
-    selectedAreaId,
-    selectedRegionId,
-    selectedLocationTypeId,
-    selectedJurisdictionId,
-    selectedMeasureTypeId,
-  ])
-
   useEffect(() => {
     if (
       mapRef &&
       filteredLocations.length > 0 &&
-      filteredLocations.length < locations.length
+      filteredLocations.length < locationsEnabledLength
     ) {
       const bounds = L.latLngBounds(
         filteredLocations
@@ -152,24 +131,28 @@ const LocationMap = ({
     }
   }, [mapRef, filteredLocations, locations])
 
-  const handleFiltersClick = () => {
-    setIsPopperOpen(!isPopperOpen)
-  }
+  // Handle filter changes using MapFilters
+  const handleFiltersClick = useCallback(() => {
+    setIsFiltersOpen((prev) => !prev)
+  }, [])
+
+  const handleFiltersClearClick = useCallback(() => {
+    updateFilters({
+      areaId: null,
+      regionId: null,
+      locationTypeId: null,
+      jurisdictionId: null,
+      measureTypeId: null,
+    })
 
-  const handleFiltersClearClick = () => {
-    setSelectedAreaId(null)
-    setSelectedRegionId(null)
-    setSelectedLocationTypeId(null)
-    setSelectedJurisdictionId(null)
-    setSelectedMeasureTypeId(null)
     if (mapInfo?.initialLat && mapInfo?.initialLong) {
       mapRef?.setView([mapInfo.initialLat, mapInfo.initialLong], 6)
     }
-  }
+  }, [updateFilters])
 
-  const handleClosePopper = () => {
-    setIsPopperOpen(false)
-  }
+  const handleClosePopper = useCallback(() => {
+    setIsFiltersOpen(false)
+  }, [])
 
   if (!mapInfo) {
     return <Skeleton variant="rectangular" height={mapHeight ?? 400} />
@@ -209,13 +192,7 @@ const LocationMap = ({
               size="small"
               aria-label="Clear filters"
               onClick={handleFiltersClearClick}
-              disabled={
-                !selectedAreaId &&
-                !selectedRegionId &&
-                !selectedLocationTypeId &&
-                !selectedJurisdictionId &&
-                !selectedMeasureTypeId
-              }
+              disabled={!Object.values(filters).some((value) => value != null)}
               sx={{
                 '&:disabled': { backgroundColor: theme.palette.grey[300] },
               }}
@@ -224,23 +201,15 @@ const LocationMap = ({
             </Button>
           </ButtonGroup>
           <Popper
-            open={isPopperOpen}
+            open={isFiltersOpen}
             anchorEl={filtersButtonRef.current}
             placement="bottom-end"
             style={{ zIndex: 1000 }}
           >
             <MapFilters
-              setSelectedAreaId={setSelectedAreaId}
-              setSelectedRegionId={setSelectedRegionId}
-              setSelectedLocationTypeId={setSelectedLocationTypeId}
-              setSelectedJurisdictionId={setSelectedJurisdictionId}
-              setSelectedMeasureTypeId={setSelectedMeasureTypeId}
-              selectedAreaId={selectedAreaId}
-              selectedRegionId={selectedRegionId}
-              selectedLocationTypeId={selectedLocationTypeId}
-              selectedJurisdictionId={selectedJurisdictionId}
-              selectedMeasureTypeId={selectedMeasureTypeId}
-              locationsTotal={locations.length}
+              filters={filters}
+              onFilterChange={updateFilters}
+              locationsTotal={locationsEnabledLength}
               locationsFiltered={filteredLocations.length}
             />
           </Popper>

Atspm/WebUI/src/components/LocationMap/Markers.tsx

@@ -1,7 +1,7 @@
 import { Location } from '@/features/locations/types'
 import { generatePin } from '@/features/locations/utils'
 import { Box } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { memo, useEffect, useState } from 'react'
 import { Marker, Popup } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 
@@ -70,4 +70,4 @@ const Markers = ({ locations, setLocation }: MarkersProps) => {
   )
 }
 
-export default Markers
+export default memo(Markers)