[Layers] fill layers on hover

frontend/src/domain/entities/layers/constants.ts

@@ -40,7 +40,6 @@ export enum MonitorEnvLayers {
   FAO = 'FAO',
   HOVERED_MISSION = 'HOVERED_MISSION',
   INTEREST_POINT = 'INTEREST_POINT',
-  ISOLATED_LAYERS = 'ISOLATED_LAYERS',
   LOW_WATER_LINE = 'LOW_WATER_LINE',
   MARPOL = 'MARPOL',
   MEASUREMENT = 'MEASUREMENT',
@@ -199,10 +198,6 @@ export const Layers: Record<MonitorEnvLayers, Layer> = {
     name: '',
     zIndex: 950
   },
-  [MonitorEnvLayers.ISOLATED_LAYERS]: {
-    code: MonitorEnvLayers.ISOLATED_LAYERS,
-    zIndex: 950
-  },
   [MonitorEnvLayers.SELECTED_MISSION_TO_ATTACH_ON_REPORTING]: {
     code: MonitorEnvLayers.SELECTED_MISSION_TO_ATTACH_ON_REPORTING,
     zIndex: 2000

frontend/src/domain/shared_slices/Map.ts

@@ -82,13 +82,8 @@ const mapSlice = createSlice({
     setIsAreaSelected(state, action) {
       state.isAreaSelected = action.payload
     },
-    setIsolateMode(
-      state,
-      action: PayloadAction<{
-        isolatedLayer: IsolatedLayerType | undefined
-      }>
-    ) {
-      state.isolatedLayer = action.payload.isolatedLayer
+    setIsolateMode(state, action: PayloadAction<IsolatedLayerType | undefined>) {
+      state.isolatedLayer = action.payload
     },
     setZoomToCenter(state, action) {
       state.zoomToCenter = action.payload

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

@@ -2,6 +2,7 @@ import { getIsolatedLayerIsVigilanceArea } from '@features/map/layers/utils'
 import { useGetFilteredVigilanceAreasQuery } from '@features/VigilanceArea/hooks/useGetFilteredVigilanceAreasQuery'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Layers } from 'domain/entities/layers/constants'
+import { convertToFeature } from 'domain/types/map'
 import { Feature } from 'ol'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
@@ -14,7 +15,7 @@ import type { BaseMapChildrenProps } from '@features/map/BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
 import type { Geometry } from 'ol/geom'
 
-export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
+export function PreviewVigilanceAreasLayer({ currentFeatureOver, map }: BaseMapChildrenProps) {
   const displayVigilanceAreaLayer = useAppSelector(state => state.global.displayVigilanceAreaLayer)
 
   const vigilanceAreaSearchResult = useAppSelector(state => state.layerSearch.vigilanceAreaSearchResult)
@@ -66,11 +67,33 @@ export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
   }, [areLayersFilled, isolatedLayer, isolatedLayerIsVigilanceArea, vigilanceAreaSearchResult, vigilanceAreas])
 
   useEffect(() => {
-    vectorSourceRef.current?.clear(true)
+    const vectorSource = vectorSourceRef.current
+    vectorSource.clear(true)
+
+    const feature = convertToFeature(currentFeatureOver)
+
     if (vigilanceAreasFeatures) {
-      vectorSourceRef.current?.addFeatures(vigilanceAreasFeatures)
+      const isHoveredFeature = feature?.getId()?.toString()?.includes(Layers.VIGILANCE_AREA_PREVIEW.code)
+
+      if (feature && isHoveredFeature && !areLayersFilled) {
+        feature.set('isFilled', true)
+
+        // Exclude the current feature and re-add it with updated properties
+        const filteredFeatures = vigilanceAreasFeatures.filter(f => f.getId() !== feature?.getId()) ?? []
+        vectorSource.addFeatures([...filteredFeatures, feature])
+
+        return
+      }
+
+      vectorSource.addFeatures(vigilanceAreasFeatures)
+
+      return
+    }
+
+    if (feature) {
+      vectorSource.addFeature(feature)
     }
-  }, [vigilanceAreasFeatures])
+  }, [vigilanceAreasFeatures, areLayersFilled, currentFeatureOver])
 
   useEffect(() => {
     if (map) {

frontend/src/features/layersSelector/overlays/LayerEvents.tsx

@@ -112,7 +112,7 @@ export function LayerEvents({ map, mapClickEvent }: BaseMapChildrenProps) {
     }
 
     if (numberOfClickedFeatures === 1) {
-      dispatch(mapActions.setIsolateMode({ isolatedLayer: undefined }))
+      dispatch(mapActions.setIsolateMode(undefined))
       if (clickedAmpFeatures && clickedAmpFeatures.length === 1) {
         dispatch(closeAreaOverlay())
         const currentFeature = convertToFeature(clickedAmpFeatures[0])

frontend/src/features/layersSelector/overlays/OverlayContent.tsx

@@ -121,18 +121,16 @@ export function OverlayContent({ items }: OverlayContentProps) {
     e.stopPropagation()
 
     if (isolatedLayer?.id === id) {
-      dispatch(mapActions.setIsolateMode({ isolatedLayer: undefined }))
+      dispatch(mapActions.setIsolateMode(undefined))
 
       return
     }
 
     dispatch(
       mapActions.setIsolateMode({
-        isolatedLayer: {
-          id,
-          isFilled: true,
-          type
-        }
+        id,
+        isFilled: true,
+        type
       })
     )
   }
@@ -146,10 +144,8 @@ export function OverlayContent({ items }: OverlayContentProps) {
 
     dispatch(
       mapActions.setIsolateMode({
-        isolatedLayer: {
-          ...isolatedLayer,
-          isFilled: !isolatedLayer.isFilled
-        }
+        ...isolatedLayer,
+        isFilled: !isolatedLayer.isFilled
       })
     )
   }

frontend/src/features/layersSelector/overlays/PinnedOverlay.tsx

@@ -1,10 +1,11 @@
 import { getIsLinkingZonesToVigilanceArea } from '@features/VigilanceArea/slice'
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { useAppSelector } from '@hooks/useAppSelector'
-import { IconButton, Icon, Size, Accent } from '@mtes-mct/monitor-ui'
+import { IconButton, Icon, Size, Accent, useClickOutsideEffect } from '@mtes-mct/monitor-ui'
 import { type RegulatoryOrAMPOrViglanceAreaLayerType } from 'domain/entities/layers/constants'
 import { mapActions } from 'domain/shared_slices/Map'
 import { closeAreaOverlay } from 'domain/use_cases/map/closeAreaOverlay'
+import { useRef } from 'react'
 import styled from 'styled-components'
 
 import { OverlayContent } from './OverlayContent'
@@ -18,13 +19,19 @@ export function PinnedOverlay({
 }: {
   items: OverlayItem<RegulatoryOrAMPOrViglanceAreaLayerType, AMPProperties | RegulatoryLayerCompactProperties>[]
 }) {
+  const ref = useRef<HTMLDivElement>(null)
   const dispatch = useAppDispatch()
+  const exitIsolationMode = () => {
+    dispatch(mapActions.setIsolateMode(undefined))
+  }
+
+  useClickOutsideEffect(ref, exitIsolationMode, document)
 
   const isLinkingZonesToVigilanceArea = useAppSelector(state => getIsLinkingZonesToVigilanceArea(state))
 
   const close = () => {
     dispatch(closeAreaOverlay())
-    dispatch(mapActions.setIsolateMode({ isolatedLayer: undefined }))
+    dispatch(mapActions.setIsolateMode(undefined))
   }
 
   // component should not be called if items.length < 2
@@ -34,7 +41,7 @@ export function PinnedOverlay({
   }
 
   return (
-    <Card>
+    <Card ref={ref}>
       <Header>
         {items.length > 1 ? <>{items.length} zones superposées sur ce point </> : 'Zone sélectionnée'}
         <IconButton accent={Accent.TERTIARY} Icon={Icon.Close} onClick={close} size={Size.SMALL} />

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

@@ -1,5 +1,6 @@
 import { getDisplayedMetadataAMPLayerId } from '@features/layersSelector/metadataPanel/slice'
 import { getIsLinkingRegulatoryToVigilanceArea } from '@features/VigilanceArea/slice'
+import { convertToFeature } from 'domain/types/map'
 import { Feature } from 'ol'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
@@ -18,7 +19,7 @@ import type { Geometry } from 'ol/geom'
 
 export const metadataIsShowedPropertyName = 'metadataIsShowed'
 
-export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
+export function AMPPreviewLayer({ currentFeatureOver, map }: BaseMapChildrenProps) {
   const ampMetadataLayerId = useAppSelector(state => getDisplayedMetadataAMPLayerId(state))
   const ampsSearchResult = useAppSelector(state => state.layerSearch.ampsSearchResult)
   const isAmpSearchResultsVisible = useAppSelector(state => state.layerSearch.isAmpSearchResultsVisible)
@@ -87,11 +88,33 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
   ])
 
   useEffect(() => {
-    ampPreviewVectorSourceRef.current?.clear(true)
+    const vectorSource = ampPreviewVectorSourceRef.current
+    vectorSource.clear(true)
+
+    const feature = convertToFeature(currentFeatureOver)
+
     if (ampLayersFeatures) {
-      ampPreviewVectorSourceRef.current?.addFeatures(ampLayersFeatures)
+      const isHoveredFeature = feature?.getId()?.toString()?.includes(Layers.AMP_PREVIEW.code)
+
+      if (feature && isHoveredFeature && !areLayersFilled) {
+        feature.set('isFilled', true)
+
+        // Exclude the current feature and re-add it with updated properties
+        const filteredFeatures = ampLayersFeatures.filter(f => f.getId() !== feature?.getId()) ?? []
+        vectorSource.addFeatures([...filteredFeatures, feature])
+
+        return
+      }
+
+      vectorSource.addFeatures(ampLayersFeatures)
+
+      return
+    }
+
+    if (feature) {
+      vectorSource.addFeature(feature)
     }
-  }, [ampLayersFeatures])
+  }, [ampLayersFeatures, areLayersFilled, currentFeatureOver])
 
   useEffect(() => {
     ampPreviewVectorLayerRef.current?.setVisible(isLayerVisible)

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

@@ -1,5 +1,6 @@
 import { getDisplayedMetadataRegulatoryLayerId } from '@features/layersSelector/metadataPanel/slice'
 import { getIsLinkingAMPToVigilanceArea } from '@features/VigilanceArea/slice'
+import { convertToFeature } from 'domain/types/map'
 import { Feature } from 'ol'
 import VectorLayer from 'ol/layer/Vector'
 import VectorSource from 'ol/source/Vector'
@@ -18,7 +19,7 @@ import type { Geometry } from 'ol/geom'
 
 export const metadataIsShowedPropertyName = 'metadataIsShowed'
 
-export function RegulatoryPreviewLayer({ map }: BaseMapChildrenProps) {
+export function RegulatoryPreviewLayer({ currentFeatureOver, map }: BaseMapChildrenProps) {
   const regulatoryMetadataLayerId = useAppSelector(state => getDisplayedMetadataRegulatoryLayerId(state))
   const isRegulatorySearchResultsVisible = useAppSelector(state => state.layerSearch.isRegulatorySearchResultsVisible)
   const regulatoryLayersSearchResult = useAppSelector(state => state.layerSearch.regulatoryLayersSearchResult)
@@ -88,11 +89,33 @@ export function RegulatoryPreviewLayer({ map }: BaseMapChildrenProps) {
   ])
 
   useEffect(() => {
-    regulatoryPreviewVectorSourceRef.current?.clear(true)
+    const vectorSource = regulatoryPreviewVectorSourceRef.current
+    vectorSource.clear(true)
+
+    const feature = convertToFeature(currentFeatureOver)
+
     if (regulatoryLayersFeatures) {
-      regulatoryPreviewVectorSourceRef.current?.addFeatures(regulatoryLayersFeatures)
+      const isHoveredFeature = feature?.getId()?.toString()?.includes(Layers.REGULATORY_ENV_PREVIEW.code)
+
+      if (feature && isHoveredFeature && !areLayersFilled) {
+        feature.set('isFilled', true)
+
+        // Exclude the current feature and re-add it with updated properties
+        const filteredFeatures = regulatoryLayersFeatures.filter(f => f.getId() !== feature?.getId()) ?? []
+        vectorSource.addFeatures([...filteredFeatures, feature])
+
+        return
+      }
+
+      vectorSource.addFeatures(regulatoryLayersFeatures)
+
+      return
+    }
+
+    if (feature) {
+      vectorSource.addFeature(feature)
     }
-  }, [regulatoryLayersFeatures])
+  }, [regulatoryLayersFeatures, areLayersFilled, currentFeatureOver])
 
   useEffect(() => {
     if (map) {

frontend/src/features/map/layers/utils.ts

@@ -6,11 +6,11 @@ export const hasAlreadyFeature = (
   layersId: string[]
 ) => layersId.some(layerId => typeof currentFeatureOver?.id === 'string' && currentFeatureOver.id.includes(layerId))
 
-export const getIsolatedLayerIsRegulatoryArea = (isolatedLayer: IsolatedLayerType | undefined) =>
-  (isolatedLayer?.type.search('REGULATORY') ?? -1) > -1
+export const getIsolatedLayerIsRegulatoryArea = (isolatedLayer: IsolatedLayerType | undefined): boolean =>
+  isolatedLayer?.type.includes('REGULATORY') ?? false
 
-export const getIsolatedLayerIsAmp = (isolatedLayer: IsolatedLayerType | undefined) =>
-  (isolatedLayer?.type.search('AMP') ?? -1) > -1
+export const getIsolatedLayerIsAmp = (isolatedLayer: IsolatedLayerType | undefined): boolean =>
+  isolatedLayer?.type.includes('AMP') ?? false
 
-export const getIsolatedLayerIsVigilanceArea = (isolatedLayer: IsolatedLayerType | undefined) =>
-  (isolatedLayer?.type.search('VIGILANCE_AREA') ?? -1) > -1
+export const getIsolatedLayerIsVigilanceArea = (isolatedLayer: IsolatedLayerType | undefined): boolean =>
+  isolatedLayer?.type.includes('VIGILANCE_AREA') ?? false