feat: Enhancements to the Radius Search Tool

frontend/e2e/pages/map.ts

@@ -18,7 +18,9 @@ export const map_page = async (page: Page) => {
   await expect(
     page.getByRole('button', { name: 'Polygon Search' }),
   ).toBeVisible()
-  await expect(page.getByRole('button', { name: 'Point Search' })).toBeVisible()
+  await expect(
+    page.getByRole('button', { name: 'Radius Search' }),
+  ).toBeVisible()
 
   const searchBy = page.getByText('Status')
   await expect(searchBy).toBeVisible()

frontend/src/components/AuthorizationListItem.tsx

@@ -46,7 +46,7 @@ export function AuthorizationListItem({
       sx={sx}
     >
       <Typography component="div" fontSize={14} marginBottom="8px">
-        Authorization #: <b>{number}</b>
+        Authorization #: <span>{number}</span>
       </Typography>
       <Typography
         component="div"

frontend/src/constants/constants.ts

@@ -49,4 +49,4 @@ export enum ActiveToolEnum {
 /**
  * The smallest allowed radius in meters for the Point Search feature.
  */
-export const MIN_CIRCLE_RADIUS = 500
+export const MIN_CIRCLE_RADIUS = 1000

frontend/src/features/map/map-slice.ts

@@ -32,6 +32,7 @@ export interface MapSliceState {
   // data layers, search by and filter by (small screens only - shown in bottom drawer)
   activeTool?: ActiveToolEnum
   searchResults: OmrrData[]
+  isRadiusActive: boolean
 }
 
 export const initialState: MapSliceState = {
@@ -44,6 +45,7 @@ export const initialState: MapSliceState = {
   dataLayers: [],
   activeTool: undefined,
   searchResults: [],
+  isRadiusActive: false,
 }
 
 export const mapSlice = createSlice({
@@ -99,6 +101,14 @@ export const mapSlice = createSlice({
     clearSearchResults: (state) => {
       state.searchResults = []
     },
+    setRadiusActive: (state, action: PayloadAction<boolean>) => {
+      state.isRadiusActive = action.payload
+      if (action.payload) {
+        state.bottomDrawerHeight = 500 // 300 + 200
+      } else {
+        state.bottomDrawerHeight = 300
+      }
+    },
   },
 })
 
@@ -114,6 +124,7 @@ export const {
   toggleActiveTool,
   clearActiveTool,
   clearSearchResults,
+  setRadiusActive,
 } = mapSlice.actions
 
 // Create a thunk to clear both search results and search text
@@ -162,3 +173,6 @@ export const useHasDataLayersOn = () => useSelector(selectDataLayers).length > 0
 
 const selectActiveTool = (state: RootState) => state.map.activeTool
 export const useActiveTool = () => useSelector(selectActiveTool)
+
+export const useRadiusActive = () =>
+  useSelector((state: RootState) => state.map.isRadiusActive)

frontend/src/features/omrr/omrr-slice.ts

@@ -52,6 +52,7 @@ export interface OmrrSliceState {
   lastSearchTime?: number
   pointFilterCenter?: LatLngTuple
   pointFilterRadius: number
+  pointFilterFinished: boolean
   polygonFilterPositions: LatLngTuple[]
   polygonFilterFinished: boolean
 }
@@ -79,6 +80,7 @@ export const initialState: OmrrSliceState = {
   // The point filter is active when the center point is defined
   pointFilterCenter: undefined,
   pointFilterRadius: MIN_CIRCLE_RADIUS,
+  pointFilterFinished: false,
   // The polygon filter is active when finished is true
   polygonFilterPositions: [],
   polygonFilterFinished: false,
@@ -215,8 +217,8 @@ export const omrrSlice = createSlice({
       }
     },
     resetPointFilter: (state) => {
-      // Reset point filter and search if necessary
       state.pointFilterRadius = MIN_CIRCLE_RADIUS
+      state.pointFilterFinished = false
       if (state.pointFilterCenter) {
         state.pointFilterCenter = undefined
         performSearch(state, false)
@@ -232,6 +234,18 @@ export const omrrSlice = createSlice({
         performSearch(state, false)
       }
     },
+    setPointFilterFinished: (state) => {
+      if (!state.pointFilterFinished && state.pointFilterCenter) {
+        state.pointFilterFinished = true
+        performSearch(state)
+      }
+    },
+    setPointFilterUnfinished: (state) => {
+      if (!state.pointFilterFinished && state.pointFilterCenter) {
+        state.pointFilterFinished = false
+        performSearch(state)
+      }
+    },
   },
   extraReducers: (builder: ActionReducerMapBuilder<OmrrSliceState>) => {
     // Handle the pending action
@@ -284,6 +298,8 @@ export const {
   setPointFilterRadius,
   resetPointFilter,
   clearShapeFilters,
+  setPointFilterFinished,
+  setPointFilterUnfinished,
 } = omrrSlice.actions
 
 export default omrrSlice.reducer
@@ -356,3 +372,13 @@ const selectPointFilterRadius = (state: RootState) =>
   state.omrr.pointFilterRadius
 export const usePointFilterCenter = () => useSelector(selectPointFilterCenter)
 export const usePointFilterRadius = () => useSelector(selectPointFilterRadius)
+
+// Add a new selector to check if point filter is active
+export const usePointFilterActive = () => {
+  return useSelector(
+    (state: RootState) => state.omrr.pointFilterCenter !== undefined,
+  )
+}
+
+export const usePointFilterFinished = () =>
+  useSelector((state: RootState) => state.omrr.pointFilterFinished)

frontend/src/pages/map/MapView.test.tsx

@@ -128,7 +128,7 @@ describe('Test suite for MapView', () => {
   it('should render the MapView and test point search', async () => {
     const { user } = renderComponent(themeBreakpointValues.xxl, mockOmrrData)
 
-    const pointSearchBtn = screen.getByRole('button', { name: 'Point Search' })
+    const pointSearchBtn = screen.getByRole('button', { name: 'Radius Search' })
     await user.click(pointSearchBtn)
 
     const cancelBtn = screen.getByRole('button', { name: 'Cancel' })

frontend/src/pages/map/drawer/MapBottomDrawer.css

@@ -12,6 +12,7 @@
   border-radius: 6px 6px 0 0;
   border-bottom: 1px solid var(--surface-color-border-light);
   transition: height 0.5s ease-in-out;
+  max-height: calc(100% - var(--header-height));
 }
 
 .map-bottom-drawer.map-bottom-drawer--full-height {
@@ -85,3 +86,11 @@ button.map-bottom-drawer-button {
   overflow: hidden auto;
   padding-bottom: 40px;
 }
+
+.map-bottom-drawer--expanded {
+  min-height: 100px;
+}
+
+.map-bottom-drawer--expanded.radius-active {
+  min-height: 250px;
+}

frontend/src/pages/map/drawer/MapBottomDrawer.tsx

@@ -15,6 +15,7 @@ import { SearchResultsList } from './SearchResultsList'
 import { PolygonSearch } from '../search/PolygonSearch'
 import { PointSearch } from '../search/PointSearch'
 import { ClearSelectedItemButton } from './ClearSelectedItemButton'
+import { useRadiusActive } from '@/features/map/map-slice'
 
 import ChevronUpIcon from '@/assets/svgs/fa-chevron-up.svg?react'
 import CloseIcon from '@/assets/svgs/close.svg?react'
@@ -31,7 +32,7 @@ function getTitle(
     case ActiveToolEnum.polygonSearch:
       return 'Polygon Search'
     case ActiveToolEnum.pointSearch:
-      return 'Point Search'
+      return 'Radius Search'
     case ActiveToolEnum.searchBy:
       return 'Status'
     case ActiveToolEnum.filterBy:
@@ -64,6 +65,7 @@ export function MapBottomDrawer() {
   } = useBottomDrawerState()
   const [fullHeight, setFullHeight] = useState<boolean>(false)
   const ref = useRef<HTMLDivElement>(null)
+  const isRadiusActive = useRadiusActive()
 
   const onClose = () => {
     setExpanded(false)
@@ -96,11 +98,16 @@ export function MapBottomDrawer() {
   return (
     <div
       ref={ref}
-      style={!isExpanded || fullHeight ? undefined : { height: `${height}px` }}
+      style={
+        !isExpanded || fullHeight
+          ? undefined
+          : { height: `${height}px`, maxHeight: '80vh' }
+      }
       className={clsx(
         'map-bottom-drawer',
         isExpanded && 'map-bottom-drawer--expanded',
         fullHeight && 'map-bottom-drawer--full-height',
+        isExpanded && isRadiusActive && 'radius-active',
       )}
       data-testid="map-bottom-drawer"
     >

frontend/src/pages/map/drawer/MapDrawer.test.tsx

@@ -228,7 +228,7 @@ describe('Test suite for MapDrawer', () => {
     await waitFor(() => expect(div).toHaveClass('map-bottom-drawer--expanded'))
     expect(state.bottomDrawerHeight).toBe(MAP_BOTTOM_DRAWER_HEIGHT_SMALL)
     expect(state.activeTool).toBe(ActiveToolEnum.pointSearch)
-    screen.getByText('Point Search')
+    screen.getByText('Radius Search')
     screen.getByRole('slider', { name: 'Search radius' })
 
     // Swipe up to make full height

frontend/src/pages/map/layers/PointSearchLayer.tsx

@@ -8,6 +8,7 @@ import {
   setPointFilterCenter,
   usePointFilterCenter,
   usePointFilterRadius,
+  usePointFilterFinished,
 } from '@/features/omrr/omrr-slice'
 import { useMapCrosshairsCursor } from '../hooks/useMapCrosshairsCursor'
 import { CrosshairsTooltipMarker } from './CrosshairsTooltipMarker'
@@ -24,29 +25,35 @@ function CircleLayer() {
   const dispatch = useDispatch()
   const center = usePointFilterCenter()
   const radius = usePointFilterRadius()
+  const finished = usePointFilterFinished()
   const map = useMap()
   useMapCrosshairsCursor(map)
 
   useMapEvents({
     click: (ev: LeafletMouseEvent) => {
-      const newCenter: LatLngTuple = [ev.latlng.lat, ev.latlng.lng]
-      dispatch(setPointFilterCenter(newCenter))
+      if (!finished) {
+        const newCenter: LatLngTuple = [ev.latlng.lat, ev.latlng.lng]
+        dispatch(setPointFilterCenter(newCenter))
+      }
     },
   })
 
   const drawCircle = center && radius > 0
   return (
     <>
-      <CrosshairsTooltipMarker center={center}>
-        Click to place center point
-      </CrosshairsTooltipMarker>
+      {!finished && (
+        <CrosshairsTooltipMarker center={center}>
+          Click to place center point
+        </CrosshairsTooltipMarker>
+      )}
       {drawCircle && (
         <Circle
           center={center}
           radius={radius}
           stroke
           fill
           className="point-search-circle"
+          interactive={false}
         />
       )}
     </>

frontend/src/pages/map/search/AutocompleteItem.tsx

@@ -41,7 +41,7 @@ function getLabel(matchType: MatchType, item: OmrrData | undefined): ReactNode {
     const { 'Authorization Number': number = 0 } = item
     return (
       <span>
-        Authorization #: <b>{number}</b>
+        Authorization #: <span>{number}</span>
       </span>
     )
   }

frontend/src/pages/map/search/MapSearch.test.tsx

@@ -14,7 +14,7 @@ describe('Test suite for MapSearch', () => {
     screen.getByRole('button', { name: 'Find Me' })
     screen.getByRole('button', { name: 'Layers' })
     screen.getByRole('button', { name: 'Polygon Search' })
-    screen.getByRole('button', { name: 'Point Search' })
+    screen.getByRole('button', { name: 'Radius Search' })
     screen.getByText('Status')
     screen.getByRole('button', { name: 'Filter' })
 
@@ -37,7 +37,7 @@ describe('Test suite for MapSearch', () => {
       screen.queryByRole('button', { name: 'Layers' }),
     ).not.toBeInTheDocument()
     screen.getByRole('button', { name: 'Polygon Search' })
-    screen.getByRole('button', { name: 'Point Search' })
+    screen.getByRole('button', { name: 'Radius Search' })
     screen.getByText('Status')
     screen.getByRole('button', { name: 'Filter' })
   })

frontend/src/pages/map/search/PointSearch.test.tsx

@@ -55,7 +55,7 @@ describe('Test suite for PointSearch', () => {
 
     const setRadiusBtn = screen.getByRole('button', { name: 'Set Radius' })
     await user.click(setRadiusBtn)
-    screen.getByText(`${MIN_CIRCLE_RADIUS} m`)
+    screen.getByText(`${MIN_CIRCLE_RADIUS / 1000} km`)
     const slider = screen.getByRole('slider', { name: 'Search radius' })
     fireEvent.change(slider, { target: { value: 1000 } })
     expect(state.pointFilterCenter).toBeUndefined()
@@ -68,7 +68,7 @@ describe('Test suite for PointSearch', () => {
     expect(screen.queryByText('Cancel')).not.toBeInTheDocument()
     screen.getByText('Set Radius:')
     const slider = screen.getByRole('slider', { name: 'Search radius' })
-    screen.getByText(`${MIN_CIRCLE_RADIUS} m`)
+    screen.getByText(`${MIN_CIRCLE_RADIUS / 1000} km`)
     fireEvent.change(slider, { target: { value: 2000 } })
     expect(state.pointFilterCenter).toBeUndefined()
     expect(state.pointFilterRadius).toBe(2000)