Refactor get/has layer

Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>

public/model/OSMLayerFunctions.ts

@@ -1,6 +1,7 @@
 import { Map as Maplibre, LayerSpecification } from 'maplibre-gl';
 import { OSMLayerSpecification } from './mapLayerType';
-import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
+import { getMaplibreBeforeLayerId } from './layersFunctions';
+import { hasLayer } from './map/layer_operations';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -98,7 +99,7 @@ export const OSMLayerFunctions = {
   ) => {
     // If layer already exist in maplibre source, update layer config
     // else add new layer.
-    if (layerExistInMbSource(layerConfig.id, maplibreRef)) {
+    if (hasLayer(maplibreRef.current!, layerConfig.id)) {
       updateLayerConfig(layerConfig, maplibreRef);
     } else {
       addNewLayer(layerConfig, maplibreRef, beforeLayerId);

public/model/customLayerFunctions.ts

@@ -1,6 +1,7 @@
 import { Map as Maplibre, AttributionControl, RasterSourceSpecification } from 'maplibre-gl';
 import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType';
-import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
+import { getMaplibreBeforeLayerId } from './layersFunctions';
+import { hasLayer } from './map/layer_operations';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -97,7 +98,7 @@ export const CustomLayerFunctions = {
     layerConfig: CustomLayerSpecification,
     beforeLayerId: string | undefined
   ) => {
-    if (layerExistInMbSource(layerConfig.id, maplibreRef)) {
+    if (hasLayer(maplibreRef.current!, layerConfig.id)) {
       updateLayerConfig(layerConfig, maplibreRef);
     } else {
       addNewLayer(layerConfig, maplibreRef, beforeLayerId);

public/model/documentLayerFunctions.ts

@@ -7,11 +7,11 @@ import { Map as Maplibre } from 'maplibre-gl';
 import { parse } from 'wellknown';
 import { DocumentLayerSpecification } from './mapLayerType';
 import { convertGeoPointToGeoJSON, isGeoJSON } from '../utils/geo_formater';
-import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
+import { getMaplibreBeforeLayerId} from './layersFunctions';
 import {
   addCircleLayer,
   addLineLayer,
-  addPolygonLayer,
+  addPolygonLayer, hasLayer,
   updateCircleLayer,
   updateLineLayer,
   updatePolygonLayer,
@@ -230,7 +230,7 @@ export const DocumentLayerFunctions = {
     data: any,
     beforeLayerId: string | undefined
   ) => {
-    if (layerExistInMbSource(layerConfig.id, maplibreRef)) {
+    if (hasLayer(maplibreRef.current!, layerConfig.id)) {
       updateLayerConfig(layerConfig, maplibreRef, data);
     } else {
       addNewLayer(layerConfig, maplibreRef, data, beforeLayerId);

public/model/layersFunctions.ts

@@ -13,6 +13,7 @@ import { OSMLayerFunctions } from './OSMLayerFunctions';
 import { DocumentLayerFunctions } from './documentLayerFunctions';
 import { MapLayerSpecification } from './mapLayerType';
 import { CustomLayerFunctions } from './customLayerFunctions';
+import { getLayers } from './map/layer_operations';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -22,24 +23,13 @@ interface MaplibreRef {
   current: Maplibre | null;
 }
 
-const getAllMaplibreLayersIncludesId = (maplibreRef: MaplibreRef, layerId?: string) => {
-  if (!layerId && !maplibreRef) {
-    return [];
-  }
-  return (
-    maplibreRef.current
-      ?.getStyle()
-      .layers.filter((layer) => layer.id?.includes(String(layerId)) === true) || []
-  );
-};
-
 export const LayerActions = {
   move: (maplibreRef: MaplibreRef, sourceId: string, beforeId?: string) => {
-    const sourceMaplibreLayers = getAllMaplibreLayersIncludesId(maplibreRef, sourceId);
+    const sourceMaplibreLayers = getLayers(maplibreRef.current!, sourceId);
     if (!sourceMaplibreLayers) {
       return;
     }
-    const beforeMaplibreLayers = getAllMaplibreLayersIncludesId(maplibreRef, beforeId);
+    const beforeMaplibreLayers = getLayers(maplibreRef.current!, beforeId);
     if (!beforeMaplibreLayers || beforeMaplibreLayers.length < 1) {
       // move to top
       sourceMaplibreLayers.forEach((layer) => maplibreRef.current?.moveLayer(layer.id));
@@ -65,16 +55,12 @@ export const layersTypeNameMap: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: DASHBOARDS_MAPS_LAYER_NAME.CUSTOM_MAP,
 };
 
-const getCurrentStyleLayers = (maplibreRef: MaplibreRef) => {
-  return maplibreRef.current?.getStyle().layers || [];
-};
-
 export const getMaplibreBeforeLayerId = (
   selectedLayer: MapLayerSpecification,
   maplibreRef: MaplibreRef,
   beforeLayerId: string | undefined
 ): string | undefined => {
-  const currentLoadedMbLayers = getCurrentStyleLayers(maplibreRef);
+  const currentLoadedMbLayers = getLayers(maplibreRef.current!);
   if (beforeLayerId) {
     const beforeMbLayer = currentLoadedMbLayers.find((mbLayer) =>
       mbLayer.id.includes(beforeLayerId)
@@ -84,16 +70,6 @@ export const getMaplibreBeforeLayerId = (
   return undefined;
 };
 
-export const layerExistInMbSource = (layerConfigId: string, maplibreRef: MaplibreRef) => {
-  const layers = getCurrentStyleLayers(maplibreRef);
-  for (const layer in layers) {
-    if (layers[layer].id.includes(layerConfigId)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 export const layersTypeIconMap: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: DASHBOARDS_MAPS_LAYER_ICON.OPENSEARCH_MAP,
   [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DASHBOARDS_MAPS_LAYER_ICON.DOCUMENTS,

public/model/map/__mocks__/map.ts

@@ -21,9 +21,14 @@ export class MockMaplibreMap {
     return this._styles.layers.filter((layer) => (layer.getProperty('id') as string).includes(id));
   }
 
-  getStyle(): { layers: MockLayer[] } {
+  getStyle(): { layers: LayerSpecification[] } {
+    const layerSpecs: LayerSpecification[] = this._styles.layers.map((layer) => {
+      return {
+        id: String(layer.getProperty('id')),
+      } as LayerSpecification;
+    });
     return {
-      layers: [...this._styles.layers],
+      layers: layerSpecs,
     };
   }
 

public/model/map/layer_operations.test.ts

@@ -6,12 +6,14 @@ import {
   addCircleLayer,
   addLineLayer,
   addPolygonLayer,
+  getLayers, hasLayer,
   updateCircleLayer,
   updateLineLayer,
   updatePolygonLayer,
 } from './layer_operations';
 import { Map as Maplibre } from 'maplibre-gl';
 import { MockMaplibreMap } from './__mocks__/map';
+import { MockLayer } from './__mocks__/layer';
 
 describe('Circle layer', () => {
   it('add new circle layer', () => {
@@ -277,3 +279,25 @@ describe('Polygon layer', () => {
     expect(outlineLayer.getProperty('line-width')).toBe(7);
   });
 });
+
+describe('get layer', () => {
+  it('should get layer successfully', function () {
+    const mockLayer: MockLayer = new MockLayer('layer-1');
+    const mockMap: MockMaplibreMap = new MockMaplibreMap([mockLayer]);
+    const actualLayers = getLayers((mockMap as unknown) as Maplibre, 'layer-1');
+    expect(actualLayers.length).toBe(1);
+    expect(actualLayers[0].id).toBe(mockLayer.getProperty('id'));
+  });
+
+  it('should confirm no layer exists', function () {
+    const mockLayer: MockLayer = new MockLayer('layer-1');
+    const mockMap: MockMaplibreMap = new MockMaplibreMap([mockLayer]);
+    expect(hasLayer((mockMap as unknown) as Maplibre, 'layer-2')).toBe(false);
+  });
+
+  it('should confirm layer exists', function () {
+    const mockLayer: MockLayer = new MockLayer('layer-1');
+    const mockMap: MockMaplibreMap = new MockMaplibreMap([mockLayer]);
+    expect(hasLayer((mockMap as unknown) as Maplibre, 'layer-1')).toBe(true);
+  });
+});