[Layers] handle isolateMode for pinned layers

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

@@ -1,4 +1,5 @@
 import { useGetVigilanceAreasQuery } from '@api/vigilanceAreasAPI'
+import { getIsolatedLayerIsVigilanceArea } from '@features/map/layers/utils'
 import { useAppSelector } from '@hooks/useAppSelector'
 import { Layers } from 'domain/entities/layers/constants'
 import { Feature } from 'ol'
@@ -19,6 +20,10 @@ export function VigilanceAreasLayer({ map }: BaseMapChildrenProps) {
 
   const myVigilanceAreaIdsDisplayed = useAppSelector(state => state.vigilanceArea.myVigilanceAreaIdsDisplayed)
 
+  const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
+  const isolatedLayerIsVigilanceArea = getIsolatedLayerIsVigilanceArea(isolatedLayer)
+  const areLayersFilled = isolatedLayer === undefined
+
   const isLayerVisible = displayVigilanceAreaLayer
 
   const { data: vigilanceAreas } = useGetVigilanceAreasQuery(undefined, { pollingInterval: TWO_MINUTES })
@@ -43,8 +48,10 @@ export function VigilanceAreasLayer({ map }: BaseMapChildrenProps) {
         const features = myVigilanceAreaIdsDisplayed.reduce((feats: Feature[], layerId) => {
           const layer = vigilanceAreas.entities[layerId]
           if (layer && layer?.geom && layer?.geom?.coordinates.length > 0) {
-            const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA.code)
-
+            const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA.code, false, areLayersFilled)
+            if (isolatedLayerIsVigilanceArea && isolatedLayer?.id === layerId) {
+              feature.set('isFilled', isolatedLayer.isFilled)
+            }
             feats.push(feature)
           }
 
@@ -54,7 +61,15 @@ export function VigilanceAreasLayer({ map }: BaseMapChildrenProps) {
         vectorSourceRef.current.addFeatures(features)
       }
     }
-  }, [map, myVigilanceAreaIdsDisplayed, vigilanceAreas?.entities])
+  }, [
+    areLayersFilled,
+    isolatedLayer?.id,
+    isolatedLayer?.isFilled,
+    isolatedLayerIsVigilanceArea,
+    map,
+    myVigilanceAreaIdsDisplayed,
+    vigilanceAreas?.entities
+  ])
 
   useEffect(() => {
     map.getLayers().push(vectorLayerRef.current)

frontend/src/features/VigilanceArea/components/VigilanceAreaLayer/style.ts

@@ -10,7 +10,7 @@ const getStyle = (color: string, isSelected: boolean | undefined, isFilled: bool
       color: isFilled ? getColorWithAlpha(color, 0.5) : 'transparent'
     }),
     stroke: new Stroke({
-      color: getColorWithAlpha(THEME.color.rufous, 1),
+      color: isSelected ? getColorWithAlpha('#FF4433', 1) : getColorWithAlpha(THEME.color.rufous, 1),
       width: isSelected ? 3 : 1
     })
   })

frontend/src/features/map/layers/AMP/AMPLayers.style.ts

@@ -10,7 +10,7 @@ const getStyle = (color: string, metadataIsShowed: boolean | undefined, isFilled
       color: isFilled ? getColorWithAlpha(color, 0.7) : 'transparent'
     }),
     stroke: new Stroke({
-      color: getColorWithAlpha(THEME.color.darkGoldenrod, 1),
+      color: metadataIsShowed ? getColorWithAlpha('#F3CB00', 1) : getColorWithAlpha(THEME.color.darkGoldenrod, 1),
       width: metadataIsShowed ? 3 : 1
     })
   })

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

@@ -28,13 +28,13 @@ export function AMPPreviewLayer({ currentFeatureOver, map }: BaseMapChildrenProp
 
   const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
   const isolatedLayerTypeIsAmp = getIsolatedLayerIsAmp(isolatedLayer)
+  const areLayersFilled = isolatedLayer === undefined
 
   const { data: ampLayers } = useGetAMPsQuery()
   const { isLayersSidebarVisible } = useAppSelector(state => state.global)
 
   const isLayerVisible = isLayersSidebarVisible && isAmpSearchResultsVisible && !isLinkingRegulatoryToVigilanceArea
 
-  const areLayersFilled = isolatedLayer === undefined
   const ampPreviewVectorSourceRef = useRef(new VectorSource()) as MutableRefObject<VectorSource<Feature<Geometry>>>
   const ampPreviewVectorLayerRef = useRef(
     new VectorLayer({

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

@@ -9,6 +9,7 @@ import { getAMPLayerStyle } from './AMPLayers.style'
 import { useGetAMPsQuery } from '../../../../api/ampsAPI'
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
+import { getIsolatedLayerIsAmp } from '../utils'
 
 import type { BaseMapChildrenProps } from '../../BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
@@ -21,6 +22,10 @@ export function AMPLayers({ map }: BaseMapChildrenProps) {
   const showedAmpLayerIds = useAppSelector(state => state.amp.showedAmpLayerIds)
   const showedAmpMetadataLayerId = useAppSelector(state => getDisplayedMetadataAMPLayerId(state))
 
+  const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
+  const isolatedLayerTypeIsAmp = getIsolatedLayerIsAmp(isolatedLayer)
+  const areLayersFilled = isolatedLayer === undefined
+
   const isLinkingRegulatoryToVigilanceArea = useAppSelector(state => getIsLinkingRegulatoryToVigilanceArea(state))
   const isLayerVisible = !isLinkingRegulatoryToVigilanceArea
 
@@ -44,10 +49,13 @@ export function AMPLayers({ map }: BaseMapChildrenProps) {
       ampFeatures = showedAmpLayerIds.reduce((feats: Feature[], ampLayerId) => {
         const ampLayer = ampLayers.entities[ampLayerId]
         if (ampLayer) {
-          const feature = getAMPFeature({ code: Layers.AMP.code, layer: ampLayer })
+          const feature = getAMPFeature({ code: Layers.AMP.code, isFilled: areLayersFilled, layer: ampLayer })
           if (feature) {
             const metadataIsShowed = ampLayer.id === showedAmpMetadataLayerId
             feature.set(metadataIsShowedPropertyName, metadataIsShowed)
+            if (isolatedLayerTypeIsAmp && isolatedLayer?.id === ampLayerId) {
+              feature.set('isFilled', isolatedLayer.isFilled)
+            }
             feats.push(feature)
           }
         }
@@ -57,7 +65,15 @@ export function AMPLayers({ map }: BaseMapChildrenProps) {
     }
 
     return ampFeatures
-  }, [ampLayers?.entities, showedAmpLayerIds, showedAmpMetadataLayerId])
+  }, [
+    ampLayers?.entities,
+    areLayersFilled,
+    isolatedLayer?.id,
+    isolatedLayer?.isFilled,
+    isolatedLayerTypeIsAmp,
+    showedAmpLayerIds,
+    showedAmpMetadataLayerId
+  ])
 
   useEffect(() => {
     ampVectorSourceRef.current?.clear(true)

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

@@ -1,6 +1,5 @@
 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'
@@ -19,21 +18,21 @@ import type { Geometry } from 'ol/geom'
 
 export const metadataIsShowedPropertyName = 'metadataIsShowed'
 
-export function RegulatoryPreviewLayer({ currentFeatureOver, map }: BaseMapChildrenProps) {
+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 { data: regulatoryLayers } = useGetRegulatoryLayersQuery()
 
   const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
   const isolatedLayerTypeIsRegulatory = getIsolatedLayerIsRegulatoryArea(isolatedLayer)
+  const areLayersFilled = isolatedLayer === undefined
 
   const isLinkingAMPToVigilanceArea = useAppSelector(state => getIsLinkingAMPToVigilanceArea(state))
 
   const isLayersSidebarVisible = useAppSelector(state => state.global.isLayersSidebarVisible)
   const isLayerVisible = isLayersSidebarVisible && isRegulatorySearchResultsVisible && !isLinkingAMPToVigilanceArea
 
-  const areLayersFilled = isolatedLayer === undefined
   const regulatoryPreviewVectorSourceRef = useRef(new VectorSource()) as MutableRefObject<
     VectorSource<Feature<Geometry>>
   >
@@ -89,33 +88,11 @@ export function RegulatoryPreviewLayer({ currentFeatureOver, map }: BaseMapChild
   ])
 
   useEffect(() => {
-    const vectorSource = regulatoryPreviewVectorSourceRef.current
-    vectorSource.clear(true)
-
-    const feature = convertToFeature(currentFeatureOver)
-
+    regulatoryPreviewVectorSourceRef.current?.clear(true)
     if (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)
+      regulatoryPreviewVectorSourceRef.current?.addFeatures(regulatoryLayersFeatures)
     }
-  }, [regulatoryLayersFeatures, areLayersFilled, currentFeatureOver])
+  }, [regulatoryLayersFeatures])
 
   useEffect(() => {
     if (map) {

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

@@ -9,6 +9,7 @@ import { useGetRegulatoryLayersQuery } from '../../../../api/regulatoryLayersAPI
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
 import { getRegulatoryLayerStyle } from '../styles/administrativeAndRegulatoryLayers.style'
+import { getIsolatedLayerIsRegulatoryArea } from '../utils'
 
 import type { BaseMapChildrenProps } from '../../BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
@@ -25,6 +26,10 @@ export function RegulatoryLayers({ map }: BaseMapChildrenProps) {
   const isLinkingAMPToVigilanceArea = useAppSelector(state => getIsLinkingAMPToVigilanceArea(state))
   const isLayerVisible = !isLinkingAMPToVigilanceArea
 
+  const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
+  const isolatedLayerTypeIsRegulatory = getIsolatedLayerIsRegulatoryArea(isolatedLayer)
+  const areLayersFilled = isolatedLayer === undefined
+
   const regulatoryVectorSourceRef = useRef(new VectorSource()) as MutableRefObject<VectorSource<Feature<Geometry>>>
   const regulatoryVectorLayerRef = useRef(
     new VectorLayer({
@@ -43,10 +48,17 @@ export function RegulatoryLayers({ map }: BaseMapChildrenProps) {
       regulatoryFeatures = showedRegulatoryLayerIds.reduce((feats: Feature[], regulatorylayerId) => {
         const regulatorylayer = regulatoryLayers.entities[regulatorylayerId]
         if (regulatorylayer) {
-          const feature = getRegulatoryFeature({ code: Layers.REGULATORY_ENV.code, layer: regulatorylayer })
+          const feature = getRegulatoryFeature({
+            code: Layers.REGULATORY_ENV.code,
+            isFilled: areLayersFilled,
+            layer: regulatorylayer
+          })
           if (feature) {
             const metadataIsShowed = regulatorylayer.id === regulatoryMetadataLayerId
             feature.set(metadataIsShowedPropertyName, metadataIsShowed)
+            if (isolatedLayerTypeIsRegulatory && isolatedLayer?.id === regulatorylayerId) {
+              feature.set('isFilled', isolatedLayer?.isFilled)
+            }
             feats.push(feature)
           }
         }
@@ -56,7 +68,15 @@ export function RegulatoryLayers({ map }: BaseMapChildrenProps) {
     }
 
     return regulatoryFeatures
-  }, [regulatoryLayers, showedRegulatoryLayerIds, regulatoryMetadataLayerId])
+  }, [
+    regulatoryLayers?.entities,
+    showedRegulatoryLayerIds,
+    areLayersFilled,
+    regulatoryMetadataLayerId,
+    isolatedLayerTypeIsRegulatory,
+    isolatedLayer?.id,
+    isolatedLayer?.isFilled
+  ])
 
   useEffect(() => {
     regulatoryVectorSourceRef.current?.clear(true)

frontend/src/features/map/layers/styles/administrativeAndRegulatoryLayers.style.ts

@@ -185,7 +185,7 @@ const getStyle = (color, metadataIsShowed, isLayerFilled) =>
       color: isLayerFilled ? color : 'transparent'
     }),
     stroke: new Stroke({
-      color: getColorWithAlpha(THEME.color.charcoal, 0.7),
+      color: metadataIsShowed ? getColorWithAlpha('#85FBFD', 0.7) : getColorWithAlpha(THEME.color.charcoal, 0.7),
       width: metadataIsShowed ? 3 : 1
     })
   })