[Maps] refactor createShapeFilterWithMeta to support more than just polygons

x-pack/legacy/plugins/maps/common/constants.js

@@ -46,6 +46,13 @@ export const ES_GEO_FIELD_TYPE = {
   GEO_SHAPE: 'geo_shape'
 };
 
+export const ES_SPATIAL_RELATIONS = {
+  INTERSECTS: 'INTERSECTS',
+  DISJOINT: 'DISJOINT',
+  WITHIN: 'WITHIN',
+  CONTAINS: 'CONTAINS'
+};
+
 export const GEO_JSON_TYPE = {
   POINT: 'Point',
   MULTI_POINT: 'MultiPoint',
@@ -56,6 +63,10 @@ export const GEO_JSON_TYPE = {
   GEOMETRY_COLLECTION: 'GeometryCollection',
 };
 
+export const POLYGON_COORDINATES_EXTERIOR_INDEX = 0;
+export const LON_INDEX = 0;
+export const LAT_INDEX = 1;
+
 export const EMPTY_FEATURE_COLLECTION = {
   type: 'FeatureCollection',
   features: []

x-pack/legacy/plugins/maps/common/i18n_getters.js

@@ -6,6 +6,8 @@
 
 import { i18n } from '@kbn/i18n';
 
+import { ES_SPATIAL_RELATIONS } from './constants';
+
 export function getAppTitle() {
   return i18n.translate('xpack.maps.appTitle', {
     defaultMessage: 'Maps'
@@ -24,3 +26,26 @@ export function getUrlLabel() {
     defaultMessage: 'Url'
   });
 }
+
+export function getEsSpatialRelationLabel(spatialRelation) {
+  switch (spatialRelation) {
+    case ES_SPATIAL_RELATIONS.INTERSECTS:
+      return i18n.translate('xpack.maps.common.esSpatialRelation.intersectsLabel', {
+        defaultMessage: 'intersects'
+      });
+    case ES_SPATIAL_RELATIONS.DISJOINT:
+      return i18n.translate('xpack.maps.common.esSpatialRelation.disjointLabel', {
+        defaultMessage: 'disjoint'
+      });
+    case ES_SPATIAL_RELATIONS.WITHIN:
+      return i18n.translate('xpack.maps.common.esSpatialRelation.withinLabel', {
+        defaultMessage: 'WITHIN'
+      });
+    case ES_SPATIAL_RELATIONS.CONTAINS:
+      return i18n.translate('xpack.maps.common.esSpatialRelation.containsLabel', {
+        defaultMessage: 'contains'
+      });
+    default:
+      return spatialRelation;
+  }
+}

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

@@ -16,18 +16,25 @@ import {
 import {
   DECIMAL_DEGREES_PRECISION,
   FEATURE_ID_PROPERTY_NAME,
-  ZOOM_PRECISION
+  ZOOM_PRECISION,
+  LON_INDEX
 } from '../../../../common/constants';
 import mapboxgl from 'mapbox-gl';
 import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw-unminified';
 import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
 import { FeatureTooltip } from '../feature_tooltip';
 import { DRAW_TYPE } from '../../../actions/map_actions';
-import { createShapeFilterWithMeta, createExtentFilterWithMeta } from '../../../elasticsearch_geo_utils';
+import {
+  createSpatialFilterWithBoundingBox,
+  createSpatialFilterWithGeometry,
+  getBoundingBoxGeometry,
+  roundCoordinates
+} from '../../../elasticsearch_geo_utils';
 import chrome from 'ui/chrome';
 import { spritesheet } from '@elastic/maki';
 import sprites1 from '@elastic/maki/dist/[email protected]';
 import sprites2 from '@elastic/maki/dist/[email protected]';
+import { i18n } from '@kbn/i18n';
 
 const isRetina = window.devicePixelRatio === 2;
 const mbDrawModes = MapboxDraw.modes;
@@ -84,40 +91,44 @@ export class MBMapContainer extends React.Component {
     this.props.setTooltipState(null);
   };
 
-  _onDraw = async (e) => {
-
+  _onDraw = (e) => {
     if (!e.features.length) {
       return;
     }
-    const { geoField, geoFieldType, indexPatternId, drawType } = this.props.drawState;
-    this.props.disableDrawState();
-
-
-    let filter;
-    if (drawType === DRAW_TYPE.POLYGON) {
-      filter = createShapeFilterWithMeta(e.features[0].geometry, indexPatternId, geoField, geoFieldType);
-    } else if (drawType === DRAW_TYPE.BOUNDS) {
-      const coordinates = e.features[0].geometry.coordinates[0];
-      const extent = {
-        minLon: coordinates[0][0],
-        minLat: coordinates[0][1],
-        maxLon: coordinates[0][0],
-        maxLat: coordinates[0][1]
-      };
-      for (let i  = 1; i < coordinates.length; i++) {
-        extent.minLon = Math.min(coordinates[i][0], extent.minLon);
-        extent.minLat = Math.min(coordinates[i][1], extent.minLat);
-        extent.maxLon = Math.max(coordinates[i][0], extent.maxLon);
-        extent.maxLat = Math.max(coordinates[i][1], extent.maxLat);
-      }
-      filter = createExtentFilterWithMeta(extent, indexPatternId, geoField, geoFieldType);
-    }
 
-    if (!filter) {
-      return;
-    }
+    const isBoundingBox = this.props.drawState.drawType === DRAW_TYPE.BOUNDS;
+    const geometry = e.features[0].geometry;
+    // MapboxDraw returns coordinates with 12 decimals. Round to a more reasonable number
+    roundCoordinates(geometry.coordinates);
 
-    this.props.addFilters([filter]);
+    try {
+      const options = {
+        indexPatternId: this.props.drawState.indexPatternId,
+        geoFieldName: this.props.drawState.geoField,
+        geoFieldType: this.props.drawState.geoFieldType,
+      };
+      const filter = isBoundingBox
+        ? createSpatialFilterWithBoundingBox({
+          ...options,
+          geometryLabel: i18n.translate('xpack.maps.drawControl.defaultEnvelopeLabel', {
+            defaultMessage: 'extent'
+          }),
+          geometry: getBoundingBoxGeometry(geometry)
+        })
+        : createSpatialFilterWithGeometry({
+          ...options,
+          geometryLabel: i18n.translate('xpack.maps.drawControl.defaultShapeLabel', {
+            defaultMessage: 'shape'
+          }),
+          geometry
+        });
+      this.props.addFilters([filter]);
+    } catch (error) {
+      // TODO notify user why filter was not created
+      console.log(error);
+    } finally {
+      this.props.disableDrawState();
+    }
   };
 
   _debouncedSync = _.debounce(() => {
@@ -233,8 +244,8 @@ export class MBMapContainer extends React.Component {
       // Ensure that if the map is zoomed out such that multiple
       // copies of the feature are visible, the popup appears
       // over the copy being pointed to.
-      while (Math.abs(mbLngLat.lng - coordinates[0]) > 180) {
-        coordinates[0] += mbLngLat.lng > coordinates[0] ? 360 : -360;
+      while (Math.abs(mbLngLat.lng - coordinates[LON_INDEX]) > 180) {
+        coordinates[0] += mbLngLat.lng > coordinates[LON_INDEX] ? 360 : -360;
       }
 
       popupAnchorLocation = coordinates;