[Maps] use original geometry for spatial filtering instead of geometry from mapbox feature (#46342)

* [Maps] use original for spatial filtering instead of geometry from mapbox feature

* fix FeatureTooltip unit test

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

@@ -18,7 +18,7 @@ export class FeatureGeometryFilterForm extends Component {
 
   _createFilter = ({ geometryLabel, indexPatternId, geoFieldName, geoFieldType, relation }) => {
     const filter = createSpatialFilterWithGeometry({
-      geometry: this.props.feature.geometry,
+      geometry: this.props.geometry,
       geometryLabel,
       indexPatternId,
       geoFieldName,
@@ -61,10 +61,10 @@ export class FeatureGeometryFilterForm extends Component {
           defaultMessage: 'Create filter'
         })}
         geoFields={this.props.geoFields}
-        intitialGeometryLabel={this.props.feature.geometry.type.toLowerCase()}
+        intitialGeometryLabel={this.props.geometry.type.toLowerCase()}
         onSubmit={this._createFilter}
-        isFilterGeometryClosed={this.props.feature.geometry.type !== GEO_JSON_TYPE.LINE_STRING
-          && this.props.feature.geometry.type !== GEO_JSON_TYPE.MULTI_LINE_STRING}
+        isFilterGeometryClosed={this.props.geometry.type !== GEO_JSON_TYPE.LINE_STRING
+          && this.props.geometry.type !== GEO_JSON_TYPE.MULTI_LINE_STRING}
       />
     );
   }

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

@@ -158,7 +158,7 @@ export class FeatureTooltip extends React.Component {
     );
   }
 
-  _renderActions(feature, geoFields) {
+  _renderActions(geoFields) {
     if (!this.props.isLocked || geoFields.length === 0) {
       return null;
     }
@@ -269,22 +269,22 @@ export class FeatureTooltip extends React.Component {
     });
   }
 
-  _filterGeoFields(feature) {
-    if (!feature) {
+  _filterGeoFields(featureGeometry) {
+    if (!featureGeometry) {
       return [];
     }
 
     // line geometry can only create filters for geo_shape fields.
-    if (feature.geometry.type === GEO_JSON_TYPE.LINE_STRING
-      || feature.geometry.type === GEO_JSON_TYPE.MULTI_LINE_STRING) {
+    if (featureGeometry.type === GEO_JSON_TYPE.LINE_STRING
+      || featureGeometry.type === GEO_JSON_TYPE.MULTI_LINE_STRING) {
       return this.props.geoFields.filter(({ geoFieldType }) => {
         return geoFieldType === ES_GEO_FIELD_TYPE.GEO_SHAPE;
       });
     }
 
     // TODO support geo distance filters for points
-    if (feature.geometry.type === GEO_JSON_TYPE.POINT
-      || feature.geometry.type === GEO_JSON_TYPE.MULTI_POINT) {
+    if (featureGeometry.type === GEO_JSON_TYPE.POINT
+      || featureGeometry.type === GEO_JSON_TYPE.MULTI_POINT) {
       return [];
     }
 
@@ -341,14 +341,18 @@ export class FeatureTooltip extends React.Component {
   render() {
     const filteredFeatures = this._filterFeatures();
     const currentFeature = filteredFeatures[this.state.pageNumber];
-    const filteredGeoFields = this._filterGeoFields(currentFeature);
+    const currentFeatureGeometry = this.props.loadFeatureGeometry({
+      layerId: currentFeature.layerId,
+      featureId: currentFeature.id
+    });
+    const filteredGeoFields = this._filterGeoFields(currentFeatureGeometry);
 
-    if (this.state.view === VIEWS.GEOMETRY_FILTER_VIEW) {
+    if (this.state.view === VIEWS.GEOMETRY_FILTER_VIEW && currentFeatureGeometry) {
       return (
         <FeatureGeometryFilterForm
           onClose={this._onCloseTooltip}
           showPropertiesView={this._showPropertiesView}
-          feature={currentFeature}
+          geometry={currentFeatureGeometry}
           geoFields={filteredGeoFields}
           addFilters={this.props.addFilters}
         />
@@ -359,7 +363,7 @@ export class FeatureTooltip extends React.Component {
       <Fragment>
         {this._renderHeader()}
         {this._renderProperties(currentFeature)}
-        {this._renderActions(currentFeature, filteredGeoFields)}
+        {this._renderActions(filteredGeoFields)}
         {this._renderFooter(filteredFeatures)}
       </Fragment>
     );

x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.test.js

@@ -21,26 +21,14 @@ const MULTI_FEATURE_MULTI_LAYER = [
   {
     id: 'feature1',
     layerId: 'layer1',
-    geometry: {
-      type: 'Point',
-      coordinates: [102.0, 0.5]
-    }
   },
   {
     id: 'feature2',
     layerId: 'layer1',
-    geometry: {
-      type: 'Point',
-      coordinates: [102.0, 0.5]
-    }
   },
   {
     id: 'feature1',
     layerId: 'layer2',
-    geometry: {
-      type: 'Point',
-      coordinates: [102.0, 0.5]
-    }
   }
 ];
 
@@ -48,15 +36,17 @@ const SINGLE_FEATURE = [
   {
     id: 'feature1',
     layerId: 'layer1',
-    geometry: {
-      type: 'Point',
-      coordinates: [102.0, 0.5]
-    }
   }
 ];
 
 const defaultProps = {
   loadFeatureProperties: () => { return []; },
+  loadFeatureGeometry: () => {
+    return {
+      type: 'Point',
+      coordinates: [102.0, 0.5]
+    };
+  },
   findLayerById: (id) => {
     return new MockLayer(id);
   },

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

@@ -143,7 +143,6 @@ export class TooltipControl extends React.Component {
         uniqueFeatures.push({
           id: featureId,
           layerId: layerId,
-          geometry: mbFeature.geometry,
         });
       }
     }
@@ -245,6 +244,21 @@ export class TooltipControl extends React.Component {
     return this.props.mbMap.queryRenderedFeatures(mbBbox, { layers: mbLayerIds });
   }
 
+  // Must load original geometry instead of using geometry from mapbox feature.
+  // Mapbox feature geometry is from vector tile and is not the same as the original geometry.
+  _loadFeatureGeometry = ({ layerId, featureId }) => {
+    const tooltipLayer = this._findLayerById(layerId);
+    if (!tooltipLayer) {
+      return null;
+    }
+    const targetFeature = tooltipLayer.getFeatureById(featureId);
+    if (!targetFeature) {
+      return null;
+    }
+
+    return targetFeature.geometry;
+  };
+
   _loadFeatureProperties = async ({ layerId, featureId }) => {
     const tooltipLayer = this._findLayerById(layerId);
     if (!tooltipLayer) {
@@ -295,6 +309,7 @@ export class TooltipControl extends React.Component {
             isLocked={isLocked}
             addFilters={this.props.addFilters}
             geoFields={this.props.geoFields}
+            loadFeatureGeometry={this._loadFeatureGeometry}
           />
         </EuiText>
       </EuiPopover>