add map settings for to configure spatial filters layer

elastic · Apr 22, 2020 · 84af9dc · 84af9dc
1 parent d3a90b5
commit 84af9dc
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 44 deletions.
diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
@@ -214,3 +214,5 @@ export enum SCALING_TYPES {
 }
 
 export const RGBA_0000 = 'rgba(0,0,0,0)';
+
+export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID';
diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/mb.utils.test.js b/x-pack/plugins/maps/public/connected_components/map/mb/mb.utils.test.js
@@ -123,7 +123,7 @@ function makeMultiSourceMockLayer(layerId) {
 }
 
 describe('removeOrphanedSourcesAndLayers', () => {
-  const spatialFilterLayer = makeSingleSourceMockLayer(SPATIAL_FILTERS_LAYER_ID);
+  const spatialFilterLayer = makeMultiSourceMockLayer(SPATIAL_FILTERS_LAYER_ID);
   test('should remove foo and bar layer', async () => {
     const bazLayer = makeSingleSourceMockLayer('baz');
     const fooLayer = makeSingleSourceMockLayer('foo');
@@ -177,6 +177,25 @@ describe('removeOrphanedSourcesAndLayers', () => {
     const nextStyle = getMockStyle(nextLayerList);
     expect(removedStyle).toEqual(nextStyle);
   });
+
+  test('should not remove spatial filter layer and sources when spatialFilterLayer is provided', async () => {
+    const styleWithSpatialFilters = getMockStyle([spatialFilterLayer]);
+    const mockMbMap = new MockMbMap(styleWithSpatialFilters);
+
+    removeOrphanedSourcesAndLayers(mockMbMap, [], spatialFilterLayer);
+    expect(mockMbMap.getStyle()).toEqual(styleWithSpatialFilters);
+  });
+
+  test('should remove spatial filter layer and sources when spatialFilterLayer is not provided', async () => {
+    const styleWithSpatialFilters = getMockStyle([spatialFilterLayer]);
+    const mockMbMap = new MockMbMap(styleWithSpatialFilters);
+
+    removeOrphanedSourcesAndLayers(mockMbMap, []);
+    expect(mockMbMap.getStyle()).toEqual({
+      layers: [],
+      sources: {},
+    });
+  });
 });
 
 describe('syncLayerOrderForSingleLayer', () => {

diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/utils.js b/x-pack/plugins/maps/public/connected_components/map/mb/utils.js
@@ -13,7 +13,7 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList, spatialFilterLa
   const mbLayerIdsToRemove = [];
   mbStyle.layers.forEach(mbLayer => {
     // ignore mapbox layers from spatial filter layer
-    if (spatialFilterLayer.ownsMbLayerId(mbLayer.id)) {
+    if (spatialFilterLayer && spatialFilterLayer.ownsMbLayerId(mbLayer.id)) {
       return;
     }
 
@@ -30,7 +30,7 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList, spatialFilterLa
   for (const mbSourceId in mbStyle.sources) {
     if (mbStyle.sources.hasOwnProperty(mbSourceId)) {
       // ignore mapbox sources from spatial filter layer
-      if (spatialFilterLayer.ownsMbSourceId(mbSourceId)) {
+      if (spatialFilterLayer && spatialFilterLayer.ownsMbSourceId(mbSourceId)) {
         return;
       }
 

diff --git a/x-pack/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/plugins/maps/public/connected_components/map/mb/view.js
@@ -87,7 +87,9 @@ export class MBMapContainer extends React.Component {
           }
         );
       }
-      this.props.spatialFiltersLayer.syncLayerWithMB(this.state.mbMap);
+      if (this.props.spatialFiltersLayer) {
+        this.props.spatialFiltersLayer.syncLayerWithMB(this.state.mbMap);
+      }
       this._syncSettings();
     }
   }, 256);

diff --git a/x-pack/plugins/maps/public/reducers/default_map_settings.ts b/x-pack/plugins/maps/public/reducers/default_map_settings.ts
@@ -11,5 +11,9 @@ export function getDefaultMapSettings(): MapSettings {
   return {
     maxZoom: MAX_ZOOM,
     minZoom: MIN_ZOOM,
+    showSpatialFilters: true,
+    spatialFiltersAlpa: 0.3,
+    spatialFiltersFillColor: '#696969',
+    spatialFiltersLineColor: '#000',
   };
 }
diff --git a/x-pack/plugins/maps/public/reducers/map.d.ts b/x-pack/plugins/maps/public/reducers/map.d.ts
@@ -42,6 +42,10 @@ export type MapContext = {
 export type MapSettings = {
   maxZoom: number;
   minZoom: number;
+  showSpatialFilters: boolean;
+  spatialFiltersAlpa: string;
+  spatialFiltersFillColor: string;
+  spatialFiltersLineColor: string;
 };
 
 export type MapState = {

diff --git a/x-pack/plugins/maps/public/selectors/map_selectors.js b/x-pack/plugins/maps/public/selectors/map_selectors.js
@@ -11,7 +11,7 @@ import { VectorTileLayer } from '../layers/vector_tile_layer';
 import { VectorLayer } from '../layers/vector_layer';
 import { HeatmapLayer } from '../layers/heatmap_layer';
 import { BlendedVectorLayer } from '../layers/blended_vector_layer';
-import { getTimeFilter, getUiSettings } from '../kibana_services';
+import { getTimeFilter } from '../kibana_services';
 import { getInspectorAdapters } from '../reducers/non_serializable_instances';
 import { TiledVectorLayer } from '../layers/tiled_vector_layer';
 import { copyPersistentState, TRACKED_LAYER_DESCRIPTOR } from '../reducers/util';
@@ -194,50 +194,56 @@ export const getDataFilters = createSelector(
   }
 );
 
-export const getSpatialFiltersLayer = createSelector(getFilters, filters => {
-  const featureCollection = {
-    type: 'FeatureCollection',
-    features: extractFeaturesFromFilters(filters),
-  };
-  const geoJsonSourceDescriptor = GeojsonFileSource.createDescriptor(
-    featureCollection,
-    'spatialFilters'
-  );
-
-  // TODO make alpha, fillColor, and lineColor configurable as map properties
-  const isDarkMode = getUiSettings().get('theme:darkMode', false);
-  return new VectorLayer({
-    layerDescriptor: {
-      id: SPATIAL_FILTERS_LAYER_ID,
-      visible: true,
-      alpha: 0.3,
-      type: LAYER_TYPE.VECTOR,
-      __dataRequests: [
-        {
-          dataId: SOURCE_DATA_ID_ORIGIN,
-          data: featureCollection,
-        },
-      ],
-      style: {
-        properties: {
-          [VECTOR_STYLES.FILL_COLOR]: {
-            type: STYLE_TYPE.STATIC,
-            options: {
-              color: isDarkMode ? '#DCDCDC' : '#696969',
-            },
+export const getSpatialFiltersLayer = createSelector(
+  getFilters,
+  getMapSettings,
+  (filters, settings) => {
+    if (!settings.showSpatialFilters) {
+      return null;
+    }
+
+    const featureCollection = {
+      type: 'FeatureCollection',
+      features: extractFeaturesFromFilters(filters),
+    };
+    const geoJsonSourceDescriptor = GeojsonFileSource.createDescriptor(
+      featureCollection,
+      'spatialFilters'
+    );
+
+    return new VectorLayer({
+      layerDescriptor: {
+        id: SPATIAL_FILTERS_LAYER_ID,
+        visible: true,
+        alpha: settings.spatialFiltersAlpa,
+        type: LAYER_TYPE.VECTOR,
+        __dataRequests: [
+          {
+            dataId: SOURCE_DATA_ID_ORIGIN,
+            data: featureCollection,
           },
-          [VECTOR_STYLES.LINE_COLOR]: {
-            type: STYLE_TYPE.STATIC,
-            options: {
-              color: isDarkMode ? '#FFF' : '#000',
+        ],
+        style: {
+          properties: {
+            [VECTOR_STYLES.FILL_COLOR]: {
+              type: STYLE_TYPE.STATIC,
+              options: {
+                color: settings.spatialFiltersFillColor,
+              },
+            },
+            [VECTOR_STYLES.LINE_COLOR]: {
+              type: STYLE_TYPE.STATIC,
+              options: {
+                color: settings.spatialFiltersLineColor,
+              },
             },
           },
         },
       },
-    },
-    source: new GeojsonFileSource(geoJsonSourceDescriptor),
-  });
-});
+      source: new GeojsonFileSource(geoJsonSourceDescriptor),
+    });
+  }
+);
 
 export const getLayerList = createSelector(
   getLayerListRaw,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -214,3 +214,5 @@ export enum SCALING_TYPES {
		}

		export const RGBA_0000 = 'rgba(0,0,0,0)';

		export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID';