[Map] create Layer for SearchExtent

backend/src/main/kotlin/fr/gouv/cacem/monitorenv/infrastructure/api/endpoints/bff/v1/reportings/SSEReporting.kt

@@ -2,12 +2,12 @@ package fr.gouv.cacem.monitorenv.infrastructure.api.endpoints.bff.v1.reportings
 
 import fr.gouv.cacem.monitorenv.domain.use_cases.reportings.events.UpdateReportingEvent
 import fr.gouv.cacem.monitorenv.infrastructure.api.adapters.bff.outputs.reportings.ReportingDataOutput
-import java.time.ZonedDateTime
 import org.slf4j.LoggerFactory
 import org.springframework.context.event.EventListener
 import org.springframework.stereotype.Component
 import org.springframework.web.servlet.mvc.method.annotation.SseEmitter
 import org.springframework.web.servlet.mvc.method.annotation.SseEmitter.event
+import java.time.ZonedDateTime
 
 @Component
 class SSEReporting {
@@ -48,28 +48,28 @@ class SSEReporting {
         val reportingId = event.reporting.reporting.id
 
         logger.info(
-                "SSE: Sending update of reporting $reportingId to ${sseStore.size} listener(s)."
+            "SSE: Sending update of reporting $reportingId to ${sseStore.size} listener(s).",
         )
         val sseEmittersToRemove =
-                sseStore.map { sseEmitter ->
-                    try {
-                        val data = ReportingDataOutput.fromReportingDTO(event.reporting)
-                        val sseEvent =
-                                event().name(REPORTING_UPDATE_EVENT_NAME)
-                                        .data(data)
-                                        .reconnectTime(0)
-                                        .build()
-
-                        sseEmitter.send(sseEvent)
-                        sseEmitter.complete()
-
-                        return@map sseEmitter
-                    } catch (e: Exception) {
-                        sseEmitter.completeWithError(e)
-
-                        return@map sseEmitter
-                    }
+            sseStore.map { sseEmitter ->
+                try {
+                    val data = ReportingDataOutput.fromReportingDTO(event.reporting)
+                    val sseEvent =
+                        event().name(REPORTING_UPDATE_EVENT_NAME)
+                            .data(data)
+                            .reconnectTime(0)
+                            .build()
+
+                    sseEmitter.send(sseEvent)
+                    sseEmitter.complete()
+
+                    return@map sseEmitter
+                } catch (e: Exception) {
+                    sseEmitter.completeWithError(e)
+
+                    return@map sseEmitter
                 }
+            }
 
         synchronized(mutexLock) { sseStore.removeAll(sseEmittersToRemove) }
         logger.info("Removed ${sseEmittersToRemove.size} SSE listeners of reporting updates.")

frontend/src/features/VigilanceArea/components/VigilanceAreaLayer/PreviewVigilanceAreasLayer.tsx

@@ -1,13 +1,10 @@
 import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
-import { dottedLayerStyle } from '@features/map/layers/styles/dottedLayer.style'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Layers } from 'domain/entities/layers/constants'
 import { Feature } from 'ol'
-import { fromExtent } from 'ol/geom/Polygon'
-import { Vector } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
-import { useEffect, useRef, type MutableRefObject } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 
 import { getVigilanceAreaLayerStyle } from './style'
 import { getVigilanceAreaZoneFeature } from './vigilanceAreaGeometryHelper'
@@ -24,10 +21,6 @@ export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
   const isVigilanceAreaSearchResultsVisible = useAppSelector(
     state => state.layerSearch.isVigilanceAreaSearchResultsVisible
   )
-  const searchExtent = useAppSelector(state => state.layerSearch.searchExtent)
-  const myVigilanceAreaIdsDisplayed = useAppSelector(state => state.vigilanceArea.myVigilanceAreaIdsDisplayed)
-
-  const isThrottled = useRef(false)
 
   const isLayerVisible = displayVigilanceAreaLayer && isVigilanceAreaSearchResultsVisible
 
@@ -47,76 +40,50 @@ export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
   ) as React.MutableRefObject<VectorLayerWithName>
   ;(vectorLayerRef.current as VectorLayerWithName).name = Layers.VIGILANCE_AREA_PREVIEW.code
 
-  const seachExtentVectorSourceRef = useRef(new VectorSource())
-  const searchExtentLayerRef = useRef(
-    new Vector({
-      source: seachExtentVectorSourceRef.current,
-      style: dottedLayerStyle,
-      updateWhileAnimating: true,
-      updateWhileInteracting: true
-    })
-  ) as MutableRefObject<Vector<VectorSource>>
-
-  useEffect(() => {
-    function refreshPreviewLayer() {
-      vectorSourceRef.current.clear(true)
-      if (vigilanceAreaSearchResult && vigilanceAreas) {
-        const features = vigilanceAreaSearchResult.reduce((amplayers, id) => {
-          const layer = vigilanceAreas.entities[id]
-
-          if (layer && layer?.geom && layer?.geom?.coordinates.length > 0) {
-            const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA_PREVIEW.code)
+  const vigilanceAreasFeatures = useMemo(() => {
+    let features: Feature[] = []
+    if (vigilanceAreaSearchResult && vigilanceAreas) {
+      features = vigilanceAreaSearchResult.reduce((amplayers, id) => {
+        const layer = vigilanceAreas.entities[id]
 
-            amplayers.push(feature)
-          }
+        if (layer && layer?.geom && layer?.geom?.coordinates.length > 0) {
+          const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA_PREVIEW.code)
 
-          return amplayers
-        }, [] as Feature[])
+          amplayers.push(feature)
+        }
 
-        vectorSourceRef.current.addFeatures(features)
-      }
+        return amplayers
+      }, [] as Feature[])
     }
 
-    if (map) {
-      if (isThrottled.current) {
-        return
-      }
-
-      isThrottled.current = true
+    return features
+  }, [vigilanceAreaSearchResult, vigilanceAreas])
 
-      window.setTimeout(() => {
-        isThrottled.current = false
-        refreshPreviewLayer()
-      }, 300)
+  useEffect(() => {
+    vectorSourceRef.current?.clear(true)
+    if (vigilanceAreasFeatures) {
+      vectorSourceRef.current?.addFeatures(vigilanceAreasFeatures)
     }
-  }, [map, vigilanceAreaSearchResult, vigilanceAreas, myVigilanceAreaIdsDisplayed])
+  }, [vigilanceAreasFeatures])
 
   useEffect(() => {
-    map.getLayers().push(vectorLayerRef.current)
-    map.getLayers().push(searchExtentLayerRef.current)
-
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      map.removeLayer(vectorLayerRef.current)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      map.removeLayer(searchExtentLayerRef.current)
+    if (map) {
+      vectorLayerRef.current?.setVisible(isLayerVisible)
     }
-  }, [map])
+  }, [map, isLayerVisible])
 
   useEffect(() => {
     if (map) {
-      seachExtentVectorSourceRef.current.clear()
-      if (searchExtent) {
-        const feature = new Feature(fromExtent(searchExtent))
-        seachExtentVectorSourceRef.current.addFeature(feature)
+      map.getLayers().push(vectorLayerRef.current)
+
+      return () => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        map.removeLayer(vectorLayerRef.current)
       }
     }
-  }, [map, searchExtent])
 
-  useEffect(() => {
-    vectorLayerRef.current?.setVisible(isLayerVisible)
-    searchExtentLayerRef.current?.setVisible(isLayerVisible)
-  }, [isLayerVisible])
+    return () => {}
+  }, [map])
 
   return null
 }

frontend/src/features/map/index.tsx

@@ -25,6 +25,7 @@ import { HoveredMissionLayer } from './layers/Missions/HoveredMissionLayer'
 import { SelectedMissionLayer } from './layers/Missions/SelectedMissionLayer'
 import { RegulatoryLayers } from './layers/Regulatory'
 import { RegulatoryPreviewLayer } from './layers/Regulatory/RegulatoryPreviewLayer'
+import { SearchExtentLayer } from './layers/SearchExtentLayer'
 import { MapExtentController } from './MapExtentController'
 import { MapHistory } from './MapHistory'
 import { ActionOverlay } from './overlays/actions'
@@ -83,6 +84,8 @@ export function Map({ isSuperUser }) {
         {/* @ts-ignore */}
         <AdministrativeLayers />
         {/* @ts-ignore */}
+        <SearchExtentLayer />
+        {/* @ts-ignore */}
         <LayerEvents />
         {/* @ts-ignore */}
         <LayersOverlay />
@@ -131,6 +134,8 @@ export function Map({ isSuperUser }) {
       {/* @ts-ignore */}
       <AdministrativeLayers />
       {/* @ts-ignore */}
+      <SearchExtentLayer />
+      {/* @ts-ignore */}
       <LayerEvents />
       {/* @ts-ignore */}
       <LayersOverlay />

frontend/src/features/map/layers/AMP/AMPPreviewLayer.ts

@@ -1,8 +1,6 @@
 import { getDisplayedMetadataAMPLayerId } from '@features/layersSelector/metadataPanel/slice'
 import { getIsLinkingRegulatoryToVigilanceArea } from '@features/VigilanceArea/slice'
 import { Feature } from 'ol'
-import { fromExtent } from 'ol/geom/Polygon'
-import { Vector } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { type MutableRefObject, useEffect, useMemo, useRef } from 'react'
@@ -12,7 +10,6 @@ import { getAMPLayerStyle } from './AMPLayers.style'
 import { useGetAMPsQuery } from '../../../../api/ampsAPI'
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
-import { dottedLayerStyle } from '../styles/dottedLayer.style'
 
 import type { BaseMapChildrenProps } from '../../BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
@@ -24,7 +21,6 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
   const ampMetadataLayerId = useAppSelector(state => getDisplayedMetadataAMPLayerId(state))
   const ampsSearchResult = useAppSelector(state => state.layerSearch.ampsSearchResult)
   const isAmpSearchResultsVisible = useAppSelector(state => state.layerSearch.isAmpSearchResultsVisible)
-  const searchExtent = useAppSelector(state => state.layerSearch.searchExtent)
   const showedAmpLayerIds = useAppSelector(state => state.amp.showedAmpLayerIds)
   const isLinkingRegulatoryToVigilanceArea = useAppSelector(state => getIsLinkingRegulatoryToVigilanceArea(state))
 
@@ -81,43 +77,19 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
     }
   }, [ampLayersFeatures])
 
-  const seachExtentVectorSourceRef = useRef(new VectorSource()) as MutableRefObject<VectorSource<Feature<Geometry>>>
-  const searchExtentLayerRef = useRef(
-    new Vector({
-      source: seachExtentVectorSourceRef.current,
-      style: dottedLayerStyle,
-      updateWhileAnimating: true,
-      updateWhileInteracting: true
-    })
-  ) as MutableRefObject<Vector<VectorSource>>
-
-  useEffect(() => {
-    if (map) {
-      seachExtentVectorSourceRef.current.clear(true)
-      if (searchExtent) {
-        const feature = new Feature(fromExtent(searchExtent))
-        seachExtentVectorSourceRef.current.addFeature(feature)
-      }
-    }
-  }, [map, searchExtent])
-
   useEffect(() => {
-    searchExtentLayerRef.current?.setVisible(isLayerVisible)
     ampPreviewVectorLayerRef.current?.setVisible(isLayerVisible)
   }, [isLayerVisible])
 
   useEffect(() => {
     if (map) {
       map.getLayers().push(ampPreviewVectorLayerRef.current)
-      map.getLayers().push(searchExtentLayerRef.current)
     }
 
     return () => {
       if (map) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         map.removeLayer(ampPreviewVectorLayerRef.current)
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        map.removeLayer(searchExtentLayerRef.current)
       }
     }
   }, [map])

frontend/src/features/map/layers/Regulatory/RegulatoryPreviewLayer.ts

@@ -1,8 +1,6 @@
 import { getDisplayedMetadataRegulatoryLayerId } from '@features/layersSelector/metadataPanel/slice'
 import { getIsLinkingAMPToVigilanceArea } from '@features/VigilanceArea/slice'
 import { Feature } from 'ol'
-import { fromExtent } from 'ol/geom/Polygon'
-import { Vector } from 'ol/layer'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
 import { type MutableRefObject, useEffect, useMemo, useRef } from 'react'
@@ -12,7 +10,6 @@ import { useGetRegulatoryLayersQuery } from '../../../../api/regulatoryLayersAPI
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { getRegulatoryLayerStyle } from '../styles/administrativeAndRegulatoryLayers.style'
-import { dottedLayerStyle } from '../styles/dottedLayer.style'
 
 import type { BaseMapChildrenProps } from '../../BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
@@ -24,7 +21,6 @@ export function RegulatoryPreviewLayer({ map }: BaseMapChildrenProps) {
   const regulatoryMetadataLayerId = useAppSelector(state => getDisplayedMetadataRegulatoryLayerId(state))
   const isRegulatorySearchResultsVisible = useAppSelector(state => state.layerSearch.isRegulatorySearchResultsVisible)
   const regulatoryLayersSearchResult = useAppSelector(state => state.layerSearch.regulatoryLayersSearchResult)
-  const searchExtent = useAppSelector(state => state.layerSearch.searchExtent)
   const { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
 
   const isLinkingAMPToVigilanceArea = useAppSelector(state => getIsLinkingAMPToVigilanceArea(state))
@@ -77,41 +73,17 @@ export function RegulatoryPreviewLayer({ map }: BaseMapChildrenProps) {
     }
   }, [regulatoryLayersFeatures])
 
-  const seachExtentVectorSourceRef = useRef(new VectorSource()) as MutableRefObject<VectorSource<Feature<Geometry>>>
-  const searchExtentLayerRef = useRef(
-    new Vector({
-      source: seachExtentVectorSourceRef.current,
-      style: dottedLayerStyle,
-      updateWhileAnimating: true,
-      updateWhileInteracting: true
-    })
-  ) as MutableRefObject<Vector<VectorSource>>
-
-  useEffect(() => {
-    if (map) {
-      seachExtentVectorSourceRef.current.clear(true)
-      if (searchExtent) {
-        const feature = new Feature(fromExtent(searchExtent))
-        seachExtentVectorSourceRef.current.addFeature(feature)
-      }
-    }
-  }, [map, searchExtent])
-
   useEffect(() => {
     if (map) {
-      searchExtentLayerRef.current?.setVisible(isLayerVisible)
       regulatoryPreviewVectorLayerRef.current?.setVisible(isLayerVisible)
     }
   }, [map, isLayerVisible])
 
   useEffect(() => {
     if (map) {
-      map.getLayers().push(searchExtentLayerRef.current)
       map.getLayers().push(regulatoryPreviewVectorLayerRef.current)
 
       return () => {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        map.removeLayer(searchExtentLayerRef.current)
         // eslint-disable-next-line react-hooks/exhaustive-deps
         map.removeLayer(regulatoryPreviewVectorLayerRef.current)
       }