[Layers] don't fill all layers in isolation mode

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

@@ -1,4 +1,4 @@
-import { getIsolatedLayerIsVigilanceArea, getVigilanceAreaExcludedLayers } from '@features/map/layers/utils'
+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'
@@ -25,9 +25,10 @@ export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
   const isLayerVisible = displayVigilanceAreaLayer && isVigilanceAreaSearchResultsVisible && isLayersSidebarVisible
 
   const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
-  const excludedLayers = useAppSelector(state => state.map.excludedLayers)
+  const isolatedLayerIsVigilanceArea = getIsolatedLayerIsVigilanceArea(isolatedLayer)
 
   const { vigilanceAreas } = useGetFilteredVigilanceAreasQuery()
+  const areLayersFilled = isolatedLayer === undefined
 
   const vectorSourceRef = useRef(new VectorSource()) as React.MutableRefObject<VectorSource<Feature<Geometry>>>
   const vectorLayerRef = useRef(
@@ -46,32 +47,23 @@ export function PreviewVigilanceAreasLayer({ map }: BaseMapChildrenProps) {
     if (vigilanceAreaSearchResult ?? vigilanceAreas) {
       const vigilanceAreasToDisplay = vigilanceAreaSearchResult ?? vigilanceAreas?.ids ?? []
 
-      const isolatedLayerIsVigilanceArea = getIsolatedLayerIsVigilanceArea(isolatedLayer)
-      const vigilanceAreasExcludedLayers = getVigilanceAreaExcludedLayers(excludedLayers)
-
-      const featuresToDisplay = vigilanceAreasToDisplay.filter(id => {
-        if (isolatedLayerIsVigilanceArea && id === isolatedLayer?.id) {
-          return false
-        }
-
-        return !vigilanceAreasExcludedLayers?.map(excludeLayerId => excludeLayerId).includes(id)
-      })
-
-      features = featuresToDisplay.reduce((amplayers, id) => {
+      features = vigilanceAreasToDisplay.reduce((layers, id) => {
         const layer = vigilanceAreas?.entities[id]
 
         if (layer && layer?.geom && layer?.geom?.coordinates.length > 0) {
-          const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA_PREVIEW.code)
-
-          amplayers.push(feature)
+          const feature = getVigilanceAreaZoneFeature(layer, Layers.VIGILANCE_AREA_PREVIEW.code, false, areLayersFilled)
+          if (isolatedLayerIsVigilanceArea && isolatedLayer?.id === id) {
+            feature.set('isFilled', true)
+          }
+          layers.push(feature)
         }
 
-        return amplayers
+        return layers
       }, [] as Feature[])
     }
 
     return features
-  }, [excludedLayers, isolatedLayer, vigilanceAreaSearchResult, vigilanceAreas])
+  }, [areLayersFilled, isolatedLayer?.id, isolatedLayerIsVigilanceArea, vigilanceAreaSearchResult, vigilanceAreas])
 
   useEffect(() => {
     vectorSourceRef.current?.clear(true)

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

@@ -4,10 +4,10 @@ import { Fill, Stroke, Style } from 'ol/style'
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { getColorWithAlpha, stringToColorInGroup } from '../../../../utils/utils'
 
-const getStyle = (color: string, isSelected: boolean | undefined, isLayerFilled: boolean = true) =>
+const getStyle = (color: string, isSelected: boolean | undefined, isFilled: boolean = true) =>
   new Style({
     fill: new Fill({
-      color: isLayerFilled ? getColorWithAlpha(color, 0.5) : 'transparent'
+      color: isFilled ? getColorWithAlpha(color, 0.5) : 'transparent'
     }),
     stroke: new Stroke({
       color: getColorWithAlpha(THEME.color.rufous, 1),
@@ -32,14 +32,5 @@ export const getVigilanceAreaLayerStyle = feature => {
 
   const colorWithAlpha = getVigilanceAreaColorWithAlpha(feature.get('name'), feature.get('comments'), isArchived)
 
-  return getStyle(colorWithAlpha, feature.get('isSelected'))
-}
-
-export const getIsolatedVigilanceAreaLayerStyle = (feature, excludeLayerIds, isFilled) => {
-  const isArchived = feature.get('isArchived')
-
-  const colorWithAlpha = getVigilanceAreaColorWithAlpha(feature.get('name'), feature.get('comments'), isArchived)
-  const isLayerFilled = !excludeLayerIds.includes(feature.get('id'))
-
-  return getStyle(colorWithAlpha, feature.get('isSelected'), isLayerFilled && isFilled)
+  return getStyle(colorWithAlpha, feature.get('isSelected'), feature.get('isFilled'))
 }

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

@@ -9,7 +9,8 @@ import type { VigilanceArea } from '@features/VigilanceArea/types'
 export const getVigilanceAreaZoneFeature = (
   vigilanceArea: VigilanceArea.VigilanceArea,
   layername: string,
-  isSelected?: boolean
+  isSelected?: boolean,
+  isFilled?: boolean
 ) => {
   const geoJSON = new GeoJSON()
   const geometry = geoJSON.readGeometry(vigilanceArea.geom, {
@@ -25,6 +26,7 @@ export const getVigilanceAreaZoneFeature = (
   feature.setProperties({
     area,
     ...vigilanceArea,
+    isFilled,
     isSelected
   })
 
@@ -47,6 +49,7 @@ export const getFormattedGeomForFeature = (geom, vigilanceArea) => {
   feature.setProperties({
     area,
     ...vigilanceArea,
+    isFilled: true,
     ...(vigilanceArea && { isSelected: true })
   })
 

frontend/src/features/map/index.tsx

@@ -22,7 +22,6 @@ import { AdministrativeLayers } from './layers/AdministrativeLayers'
 import { AMPLayers } from './layers/AMP'
 import { AMPPreviewLayer } from './layers/AMP/AMPPreviewLayer'
 import { DrawLayer } from './layers/DrawLayer'
-import { IsolationLayer } from './layers/IsolationLayer'
 import { MapLayer } from './layers/MapLayer'
 import { MeasurementLayer } from './layers/MeasurementLayer'
 import { ActionOverlay } from './overlays/actions'
@@ -86,8 +85,6 @@ export function Map({ isSuperUser }) {
         {/* @ts-ignore */}
         <RegulatoryPreviewLayer />
         {/* @ts-ignore */}
-        <IsolationLayer />
-        {/* @ts-ignore */}
         <AdministrativeLayers />
         {/* @ts-ignore */}
         <SearchExtentLayer />
@@ -137,8 +134,6 @@ export function Map({ isSuperUser }) {
       {/* @ts-ignore */}
       <RegulatoryPreviewLayer />
       {/* @ts-ignore */}
-      <IsolationLayer />
-      {/* @ts-ignore */}
       <AdministrativeLayers />
       {/* @ts-ignore */}
       <SearchExtentLayer />

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

@@ -1,7 +1,7 @@
 import { getFeature } from '@utils/getFeature'
 import { getArea } from 'ol/sphere'
 
-export function getAMPFeature({ code, layer }) {
+export function getAMPFeature({ code, isFilled = true, layer }) {
   const feature = getFeature(layer.geom)
   if (!feature) {
     return undefined
@@ -13,6 +13,7 @@ export function getAMPFeature({ code, layer }) {
 
   feature.setProperties({
     area,
+    isFilled,
     layerId: layer.id,
     ...layer
   })

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

@@ -4,10 +4,10 @@ import { Fill, Stroke, Style } from 'ol/style'
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { getColorWithAlpha, stringToColorInGroup } from '../../../../utils/utils'
 
-const getStyle = (color: string, metadataIsShowed: boolean | undefined, isLayerFilled: boolean = true) =>
+const getStyle = (color: string, metadataIsShowed: boolean | undefined, isFilled: boolean = true) =>
   new Style({
     fill: new Fill({
-      color: isLayerFilled ? getColorWithAlpha(color, 0.7) : 'transparent'
+      color: isFilled ? getColorWithAlpha(color, 0.7) : 'transparent'
     }),
     stroke: new Stroke({
       color: getColorWithAlpha(THEME.color.darkGoldenrod, 1),
@@ -26,14 +26,5 @@ export const getAMPColorWithAlpha = (type: string | null = '', name: string | nu
 export const getAMPLayerStyle = feature => {
   const colorWithAlpha = getAMPColorWithAlpha(feature.get('designation'), feature.get('name'))
 
-  const style = getStyle(colorWithAlpha, feature.get('metadataIsShowed'))
-
-  return style
-}
-
-export const getIsolateAMPLayerStyle = (feature, excludeLayerIds: number[], isFilled: boolean) => {
-  const colorWithAlpha = getAMPColorWithAlpha(feature.get('designation'), feature.get('name'))
-  const isLayerFilled = !excludeLayerIds.includes(feature.get('id'))
-
-  return getStyle(colorWithAlpha, feature.get('metadataIsShowed'), isLayerFilled && isFilled)
+  return getStyle(colorWithAlpha, feature.get('metadataIsShowed'), feature.get('isFilled'))
 }

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

@@ -10,7 +10,7 @@ import { getAMPLayerStyle } from './AMPLayers.style'
 import { useGetAMPsQuery } from '../../../../api/ampsAPI'
 import { Layers } from '../../../../domain/entities/layers/constants'
 import { useAppSelector } from '../../../../hooks/useAppSelector'
-import { getAmpExcludedLayers, getIsolatedLayerIsAmp } from '../utils'
+import { getIsolatedLayerIsAmp } from '../utils'
 
 import type { BaseMapChildrenProps } from '../../BaseMap'
 import type { VectorLayerWithName } from 'domain/types/layer'
@@ -26,13 +26,14 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
   const isLinkingRegulatoryToVigilanceArea = useAppSelector(state => getIsLinkingRegulatoryToVigilanceArea(state))
 
   const isolatedLayer = useAppSelector(state => state.map.isolatedLayer)
-  const excludedLayers = useAppSelector(state => state.map.excludedLayers)
+  const isolatedLayerTypeIsAmp = getIsolatedLayerIsAmp(isolatedLayer)
 
   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({
@@ -42,37 +43,30 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
       style: getAMPLayerStyle
     })
   ) as MutableRefObject<VectorLayerWithName>
-  ;(ampPreviewVectorLayerRef.current as VectorLayerWithName).name = Layers.AMP_PREVIEW.code
+  ampPreviewVectorLayerRef.current.name = Layers.AMP_PREVIEW.code
 
   const ampLayersFeatures = useMemo(() => {
     let ampFeatures: Feature[] = []
 
     if (ampsSearchResult || ampLayers?.entities) {
       const ampsToDisplay = ampsSearchResult ?? ampLayers?.ids ?? []
 
-      const isolatedLayerTypeIsAmp = getIsolatedLayerIsAmp(isolatedLayer)
-      const ampExcludedLayers = getAmpExcludedLayers(excludedLayers)
-
-      const featuresToDisplay = ampsToDisplay.filter(id => {
-        if (isolatedLayerTypeIsAmp && id === isolatedLayer?.id) {
-          return false
-        }
-
-        return !ampExcludedLayers?.map(excludeLayerId => excludeLayerId).includes(id)
-      })
-
-      ampFeatures = featuresToDisplay.reduce((amplayers, id) => {
+      ampFeatures = ampsToDisplay.reduce((amplayers, id) => {
         if (showedAmpLayerIds.includes(id)) {
           return amplayers
         }
         const layer = ampLayers?.entities[id]
 
         if (layer && layer.geom) {
-          const feature = getAMPFeature({ code: Layers.AMP_PREVIEW.code, layer })
+          const feature = getAMPFeature({ code: Layers.AMP_PREVIEW.code, isFilled: areLayersFilled, layer })
 
           if (feature) {
             const metadataIsShowed = layer.id === ampMetadataLayerId
             feature.set(metadataIsShowedPropertyName, metadataIsShowed)
+            if (isolatedLayerTypeIsAmp && isolatedLayer?.id === id) {
+              feature.set('isFilled', true)
+            }
+
             amplayers.push(feature)
           }
         }
@@ -87,8 +81,9 @@ export function AMPPreviewLayer({ map }: BaseMapChildrenProps) {
     ampLayers?.ids,
     ampMetadataLayerId,
     ampsSearchResult,
-    excludedLayers,
-    isolatedLayer,
+    areLayersFilled,
+    isolatedLayer?.id,
+    isolatedLayerTypeIsAmp,
     showedAmpLayerIds
   ])