[7.x] [Maps] Show spatial filters on map to provide context when for active filters (#63406)

x-pack/plugins/maps/common/constants.ts

@@ -215,3 +215,5 @@ export enum SCALING_TYPES {
 }
 
 export const RGBA_0000 = 'rgba(0,0,0,0)';
+
+export const SPATIAL_FILTERS_LAYER_ID = 'SPATIAL_FILTERS_LAYER_ID';

x-pack/plugins/maps/public/components/alpha_slider.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiFormRow } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+// @ts-ignore
+import { ValidatedRange } from './validated_range';
+
+interface Props {
+  alpha: number;
+  onChange: (alpha: number) => void;
+}
+
+export function AlphaSlider({ alpha, onChange }: Props) {
+  const onAlphaChange = (newAlpha: number) => {
+    onChange(newAlpha / 100);
+  };
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerTransparencyLabel', {
+        defaultMessage: 'Opacity',
+      })}
+      display="columnCompressed"
+    >
+      <ValidatedRange
+        min={0}
+        max={100}
+        step={1}
+        value={Math.round(alpha * 100)}
+        onChange={onAlphaChange}
+        showInput
+        showRange
+        compressed
+        append={i18n.translate('xpack.maps.layerPanel.settingsPanel.percentageLabel', {
+          defaultMessage: '%',
+          description: 'Percentage',
+        })}
+      />
+    </EuiFormRow>
+  );
+}

x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.js

@@ -8,7 +8,7 @@ import React, { Fragment } from 'react';
 
 import { EuiTitle, EuiPanel, EuiFormRow, EuiFieldText, EuiSpacer } from '@elastic/eui';
 
-import { ValidatedRange } from '../../../components/validated_range';
+import { AlphaSlider } from '../../../components/alpha_slider';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ValidatedDualRange } from '../../../../../../../src/plugins/kibana_react/public';
@@ -24,8 +24,7 @@ export function LayerSettings(props) {
   };
 
   const onAlphaChange = alpha => {
-    const alphaDecimal = alpha / 100;
-    props.updateAlpha(props.layerId, alphaDecimal);
+    props.updateAlpha(props.layerId, alpha);
   };
 
   const renderZoomSliders = () => {
@@ -64,34 +63,6 @@ export function LayerSettings(props) {
     );
   };
 
-  const renderAlphaSlider = () => {
-    const alphaPercent = Math.round(props.alpha * 100);
-
-    return (
-      <EuiFormRow
-        label={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerTransparencyLabel', {
-          defaultMessage: 'Opacity',
-        })}
-        display="columnCompressed"
-      >
-        <ValidatedRange
-          min={0}
-          max={100}
-          step={1}
-          value={alphaPercent}
-          onChange={onAlphaChange}
-          showInput
-          showRange
-          compressed
-          append={i18n.translate('xpack.maps.layerPanel.settingsPanel.percentageLabel', {
-            defaultMessage: '%',
-            description: 'Percentage',
-          })}
-        />
-      </EuiFormRow>
-    );
-  };
-
   return (
     <Fragment>
       <EuiPanel>
@@ -107,7 +78,7 @@ export function LayerSettings(props) {
         <EuiSpacer size="m" />
         {renderLabel()}
         {renderZoomSliders()}
-        {renderAlphaSlider()}
+        <AlphaSlider alpha={props.alpha} onChange={onAlphaChange} />
       </EuiPanel>
 
       <EuiSpacer size="s" />

x-pack/plugins/maps/public/connected_components/map/mb/draw_control/draw_control.js

@@ -64,13 +64,28 @@ export class DrawControl extends React.Component {
 
     if (this.props.drawState.drawType === DRAW_TYPE.DISTANCE) {
       const circle = e.features[0];
-      roundCoordinates(circle.properties.center);
+      const distanceKm = _.round(
+        circle.properties.radiusKm,
+        circle.properties.radiusKm > 10 ? 0 : 2
+      );
+      // Only include as much precision as needed for distance
+      let precision = 2;
+      if (distanceKm <= 1) {
+        precision = 5;
+      } else if (distanceKm <= 10) {
+        precision = 4;
+      } else if (distanceKm <= 100) {
+        precision = 3;
+      }
       const filter = createDistanceFilterWithMeta({
         alias: this.props.drawState.filterLabel,
-        distanceKm: _.round(circle.properties.radiusKm, circle.properties.radiusKm > 10 ? 0 : 2),
+        distanceKm,
         geoFieldName: this.props.drawState.geoFieldName,
         indexPatternId: this.props.drawState.indexPatternId,
-        point: circle.properties.center,
+        point: [
+          _.round(circle.properties.center[0], precision),
+          _.round(circle.properties.center[1], precision),
+        ],
       });
       this.props.addFilters([filter]);
       this.props.disableDrawState();

x-pack/plugins/maps/public/connected_components/map/mb/index.js

@@ -23,6 +23,7 @@ import {
   isInteractiveDisabled,
   isTooltipControlDisabled,
   isViewControlHidden,
+  getSpatialFiltersLayer,
   getMapSettings,
 } from '../../../selectors/map_selectors';
 
@@ -33,6 +34,7 @@ function mapStateToProps(state = {}) {
     isMapReady: getMapReady(state),
     settings: getMapSettings(state),
     layerList: getLayerList(state),
+    spatialFiltersLayer: getSpatialFiltersLayer(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),
     scrollZoom: getScrollZoom(state),

x-pack/plugins/maps/public/connected_components/map/mb/mb.utils.test.js

@@ -5,6 +5,7 @@
  */
 
 import { removeOrphanedSourcesAndLayers, syncLayerOrderForSingleLayer } from './utils';
+import { SPATIAL_FILTERS_LAYER_ID } from '../../../../common/constants';
 import _ from 'lodash';
 
 class MockMbMap {
@@ -121,7 +122,8 @@ function makeMultiSourceMockLayer(layerId) {
   );
 }
 
-describe('mb/utils', () => {
+describe('removeOrphanedSourcesAndLayers', () => {
+  const spatialFilterLayer = makeMultiSourceMockLayer(SPATIAL_FILTERS_LAYER_ID);
   test('should remove foo and bar layer', async () => {
     const bazLayer = makeSingleSourceMockLayer('baz');
     const fooLayer = makeSingleSourceMockLayer('foo');
@@ -133,7 +135,7 @@ describe('mb/utils', () => {
     const currentStyle = getMockStyle(currentLayerList);
     const mockMbMap = new MockMbMap(currentStyle);
 
-    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList);
+    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList, spatialFilterLayer);
     const removedStyle = mockMbMap.getStyle();
 
     const nextStyle = getMockStyle(nextLayerList);
@@ -151,7 +153,7 @@ describe('mb/utils', () => {
     const currentStyle = getMockStyle(currentLayerList);
     const mockMbMap = new MockMbMap(currentStyle);
 
-    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList);
+    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList, spatialFilterLayer);
     const removedStyle = mockMbMap.getStyle();
 
     const nextStyle = getMockStyle(nextLayerList);
@@ -169,13 +171,23 @@ describe('mb/utils', () => {
     const currentStyle = getMockStyle(currentLayerList);
     const mockMbMap = new MockMbMap(currentStyle);
 
-    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList);
+    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerList, spatialFilterLayer);
     const removedStyle = mockMbMap.getStyle();
 
     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);
+  });
+});
+
+describe('syncLayerOrderForSingleLayer', () => {
   test('should move bar layer in front of foo layer', async () => {
     const fooLayer = makeSingleSourceMockLayer('foo');
     const barLayer = makeSingleSourceMockLayer('bar');
@@ -250,40 +262,4 @@ describe('mb/utils', () => {
     const nextStyle = getMockStyle(nextLayerListOrder);
     expect(orderedStyle).toEqual(nextStyle);
   });
-
-  test('should reorder foo and bar and remove baz', async () => {
-    const bazLayer = makeSingleSourceMockLayer('baz');
-    const fooLayer = makeSingleSourceMockLayer('foo');
-    const barLayer = makeSingleSourceMockLayer('bar');
-
-    const currentLayerOrder = [bazLayer, fooLayer, barLayer];
-    const nextLayerListOrder = [barLayer, fooLayer];
-
-    const currentStyle = getMockStyle(currentLayerOrder);
-    const mockMbMap = new MockMbMap(currentStyle);
-    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerListOrder);
-    syncLayerOrderForSingleLayer(mockMbMap, nextLayerListOrder);
-    const orderedStyle = mockMbMap.getStyle();
-
-    const nextStyle = getMockStyle(nextLayerListOrder);
-    expect(orderedStyle).toEqual(nextStyle);
-  });
-
-  test('should reorder foo and bar and remove baz, when having multi-source multi-layer data', async () => {
-    const bazLayer = makeMultiSourceMockLayer('baz');
-    const fooLayer = makeSingleSourceMockLayer('foo');
-    const barLayer = makeMultiSourceMockLayer('bar');
-
-    const currentLayerOrder = [bazLayer, fooLayer, barLayer];
-    const nextLayerListOrder = [barLayer, fooLayer];
-
-    const currentStyle = getMockStyle(currentLayerOrder);
-    const mockMbMap = new MockMbMap(currentStyle);
-    removeOrphanedSourcesAndLayers(mockMbMap, nextLayerListOrder);
-    syncLayerOrderForSingleLayer(mockMbMap, nextLayerListOrder);
-    const orderedStyle = mockMbMap.getStyle();
-
-    const nextStyle = getMockStyle(nextLayerListOrder);
-    expect(orderedStyle).toEqual(nextStyle);
-  });
 });

x-pack/plugins/maps/public/connected_components/map/mb/utils.js

@@ -7,11 +7,16 @@
 import _ from 'lodash';
 import { RGBAImage } from './image_utils';
 
-export function removeOrphanedSourcesAndLayers(mbMap, layerList) {
+export function removeOrphanedSourcesAndLayers(mbMap, layerList, spatialFilterLayer) {
   const mbStyle = mbMap.getStyle();
 
   const mbLayerIdsToRemove = [];
   mbStyle.layers.forEach(mbLayer => {
+    // ignore mapbox layers from spatial filter layer
+    if (spatialFilterLayer.ownsMbLayerId(mbLayer.id)) {
+      return;
+    }
+
     const layer = layerList.find(layer => {
       return layer.ownsMbLayerId(mbLayer.id);
     });
@@ -24,6 +29,11 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList) {
   const mbSourcesToRemove = [];
   for (const mbSourceId in mbStyle.sources) {
     if (mbStyle.sources.hasOwnProperty(mbSourceId)) {
+      // ignore mapbox sources from spatial filter layer
+      if (spatialFilterLayer.ownsMbSourceId(mbSourceId)) {
+        return;
+      }
+
       const layer = layerList.find(layer => {
         return layer.ownsMbSourceId(mbSourceId);
       });
@@ -35,6 +45,21 @@ export function removeOrphanedSourcesAndLayers(mbMap, layerList) {
   mbSourcesToRemove.forEach(mbSourceId => mbMap.removeSource(mbSourceId));
 }
 
+export function moveLayerToTop(mbMap, layer) {
+  const mbStyle = mbMap.getStyle();
+
+  if (!mbStyle.layers || mbStyle.layers.length === 0) {
+    return;
+  }
+
+  layer.getMbLayerIds().forEach(mbLayerId => {
+    const mbLayer = mbMap.getLayer(mbLayerId);
+    if (mbLayer) {
+      mbMap.moveLayer(mbLayerId);
+    }
+  });
+}
+
 /**
  * This is function assumes only a single layer moved in the layerList, compared to mbMap
  * It is optimized to minimize the amount of mbMap.moveLayer calls.
@@ -47,9 +72,12 @@ export function syncLayerOrderForSingleLayer(mbMap, layerList) {
   }
 
   const mbLayers = mbMap.getStyle().layers.slice();
-  const layerIds = mbLayers.map(mbLayer => {
+  const layerIds = [];
+  mbLayers.forEach(mbLayer => {
     const layer = layerList.find(layer => layer.ownsMbLayerId(mbLayer.id));
-    return layer.getId();
+    if (layer) {
+      layerIds.push(layer.getId());
+    }
   });
 
   const currentLayerOrderLayerIds = _.uniq(layerIds);

x-pack/plugins/maps/public/connected_components/map/mb/view.js

@@ -11,6 +11,7 @@ import {
   syncLayerOrderForSingleLayer,
   removeOrphanedSourcesAndLayers,
   addSpritesheetToMap,
+  moveLayerToTop,
 } from './utils';
 import { getGlyphUrl, isRetina } from '../../../meta';
 import { DECIMAL_DEGREES_PRECISION, ZOOM_PRECISION } from '../../../../common/constants';
@@ -74,7 +75,7 @@ export class MBMapContainer extends React.Component {
   }
 
   _debouncedSync = _.debounce(() => {
-    if (this._isMounted || !this.props.isMapReady) {
+    if (this._isMounted && this.props.isMapReady) {
       if (!this.state.hasSyncedLayerList) {
         this.setState(
           {
@@ -86,6 +87,7 @@ export class MBMapContainer extends React.Component {
           }
         );
       }
+      this.props.spatialFiltersLayer.syncLayerWithMB(this.state.mbMap);
       this._syncSettings();
     }
   }, 256);
@@ -260,9 +262,14 @@ export class MBMapContainer extends React.Component {
   };
 
   _syncMbMapWithLayerList = () => {
-    removeOrphanedSourcesAndLayers(this.state.mbMap, this.props.layerList);
+    removeOrphanedSourcesAndLayers(
+      this.state.mbMap,
+      this.props.layerList,
+      this.props.spatialFiltersLayer
+    );
     this.props.layerList.forEach(layer => layer.syncLayerWithMB(this.state.mbMap));
     syncLayerOrderForSingleLayer(this.state.mbMap, this.props.layerList);
+    moveLayerToTop(this.state.mbMap, this.props.spatialFiltersLayer);
   };
 
   _syncMbMapWithInspector = () => {

x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx

@@ -19,6 +19,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { MapSettings } from '../../reducers/map';
 import { NavigationPanel } from './navigation_panel';
+import { SpatialFiltersPanel } from './spatial_filters_panel';
 
 interface Props {
   cancelChanges: () => void;
@@ -60,6 +61,8 @@ export function MapSettingsPanel({
       <div className="mapLayerPanel__body">
         <div className="mapLayerPanel__bodyOverflow">
           <NavigationPanel settings={settings} updateMapSetting={updateMapSetting} />
+          <EuiSpacer size="s" />
+          <SpatialFiltersPanel settings={settings} updateMapSetting={updateMapSetting} />
         </div>
       </div>