feat: improve usability of Map filter tools

Fixes #99239.

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

@@ -16,15 +16,15 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
-import { MultiIndexGeoFieldSelect } from './multi_index_geo_field_select';
-import { GeoFieldWithIndex } from './geo_field_with_index';
+import { GeoFieldSelect } from './geo_field_select';
+import { IFieldType } from '../../../../../plugins/data/public';
 import { ActionSelect } from './action_select';
 import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';
 
 interface Props {
   className?: string;
   buttonLabel: string;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
   getFilterActions?: () => Promise<Action[]>;
   getActionContext?: () => ActionExecutionContext;
   onSubmit: ({
@@ -42,7 +42,7 @@ interface Props {
 
 interface State {
   actionId: string;
-  selectedField: GeoFieldWithIndex | undefined;
+  selectedField: IFieldType | undefined;
   filterLabel: string;
 }
 
@@ -53,7 +53,7 @@ export class DistanceFilterForm extends Component<Props, State> {
     filterLabel: '',
   };
 
-  _onGeoFieldChange = (selectedField: GeoFieldWithIndex | undefined) => {
+  _onGeoFieldChange = (selectedField: IFieldType | undefined) => {
     this.setState({ selectedField });
   };
 
@@ -74,8 +74,7 @@ export class DistanceFilterForm extends Component<Props, State> {
     this.props.onSubmit({
       actionId: this.state.actionId,
       filterLabel: this.state.filterLabel,
-      indexPatternId: this.state.selectedField.indexPatternId,
-      geoFieldName: this.state.selectedField.geoFieldName,
+      geoFieldName: this.state.selectedField,
     });
   };
 
@@ -95,9 +94,9 @@ export class DistanceFilterForm extends Component<Props, State> {
           />
         </EuiFormRow>
 
-        <MultiIndexGeoFieldSelect
-          selectedField={this.state.selectedField}
-          fields={this.props.geoFields}
+        <GeoFieldSelect
+          value={this.state.selectedField}
+          geoFields={this.props.geoFields}
           onChange={this._onGeoFieldChange}
         />
 

x-pack/plugins/maps/public/components/geometry_filter_form.js

@@ -20,7 +20,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants';
 import { getEsSpatialRelationLabel } from '../../common/i18n_getters';
-import { MultiIndexGeoFieldSelect } from './multi_index_geo_field_select';
+import { GeoFieldSelect } from './geo_field_select';
 import { ActionSelect } from './action_select';
 import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../src/plugins/data/public';
 
@@ -71,8 +71,7 @@ export class GeometryFilterForm extends Component {
     this.props.onSubmit({
       actionId: this.state.actionId,
       geometryLabel: this.state.geometryLabel,
-      indexPatternId: this.state.selectedField.indexPatternId,
-      geoFieldName: this.state.selectedField.geoFieldName,
+      geoFieldName: this.state.selectedField,
       relation: this.state.relation,
     });
   };
@@ -137,9 +136,9 @@ export class GeometryFilterForm extends Component {
           />
         </EuiFormRow>
 
-        <MultiIndexGeoFieldSelect
-          selectedField={this.state.selectedField}
-          fields={this.props.geoFields}
+        <GeoFieldSelect
+          value={this.state.selectedField}
+          geoFields={this.props.geoFields}
           onChange={this._onGeoFieldChange}
         />
 

x-pack/plugins/maps/public/connected_components/map_container/index.ts

@@ -16,7 +16,7 @@ import {
   getRefreshConfig,
   getMapInitError,
   getMapSettings,
-  getQueryableUniqueIndexPatternIds,
+  getQueryableUniqueIndexPatternIdsAndFieldNames,
 } from '../../selectors/map_selectors';
 import { MapStoreState } from '../../reducers/store';
 import { getCoreChrome } from '../../kibana_services';
@@ -28,7 +28,7 @@ function mapStateToProps(state: MapStoreState) {
     isFullScreen: getIsFullScreen(state),
     refreshConfig: getRefreshConfig(state),
     mapInitError: getMapInitError(state),
-    indexPatternIds: getQueryableUniqueIndexPatternIds(state),
+    indexPatternIdsAndFieldNames: getQueryableUniqueIndexPatternIdsAndFieldNames(state),
     settings: getMapSettings(state),
   };
 }

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

@@ -20,15 +20,15 @@ import { ToolbarOverlay } from '../toolbar_overlay';
 import { LayerPanel } from '../layer_panel';
 import { AddLayerPanel } from '../add_layer_panel';
 import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
-import { getIndexPatternsFromIds } from '../../index_pattern_util';
+import { getFieldsFromIds, getGeoFields } from '../../index_pattern_util';
 import { ES_GEO_FIELD_TYPE, RawValue } from '../../../common/constants';
 import { indexPatterns as indexPatternsUtils } from '../../../../../../src/plugins/data/public';
 import { FLYOUT_STATE } from '../../reducers/ui';
 import { MapSettings } from '../../reducers/map';
 import { MapSettingsPanel } from '../map_settings_panel';
 import { registerLayerWizards } from '../../classes/layers/load_layer_wizards';
 import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
-import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
+import { IFieldType } from '../../../../../../src/plugins/data/public';
 import { MapRefreshConfig } from '../../../common/descriptor_types';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
@@ -44,7 +44,7 @@ export interface Props {
   exitFullScreen: () => void;
   flyoutDisplay: FLYOUT_STATE;
   isFullScreen: boolean;
-  indexPatternIds: string[];
+  indexPatternIdsAndFieldNames: Array<{ indexPatternId: string; fieldName: string }>;
   mapInitError: string | null | undefined;
   refreshConfig: MapRefreshConfig;
   renderTooltipContent?: RenderToolTipContent;
@@ -57,13 +57,16 @@ export interface Props {
 interface State {
   isInitialLoadRenderTimeoutComplete: boolean;
   domId: string;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
 }
 
 export class MapContainer extends Component<Props, State> {
   private _isMounted: boolean = false;
   private _isInitalLoadRenderTimerStarted: boolean = false;
-  private _prevIndexPatternIds: string[] = [];
+  private _prevIndexPatternIdsAndFieldNames: Array<{
+    indexPatternId: string;
+    fieldName: string;
+  }> = [];
   private _refreshTimerId: number | null = null;
   private _prevIsPaused: boolean | null = null;
   private _prevInterval: number | null = null;
@@ -88,7 +91,7 @@ export class MapContainer extends Component<Props, State> {
     }
 
     if (!!this.props.addFilters) {
-      this._loadGeoFields(this.props.indexPatternIds);
+      this._loadGeoFields(this.props.indexPatternIdsAndFieldNames);
     }
   }
 
@@ -113,37 +116,22 @@ export class MapContainer extends Component<Props, State> {
     }
   };
 
-  _loadGeoFields = async (nextIndexPatternIds: string[]) => {
-    if (_.isEqual(nextIndexPatternIds, this._prevIndexPatternIds)) {
+  _loadGeoFields = async (
+    nextIndexPatternIdsAndFieldNames: Array<{ indexPatternId: string; fieldName: string }>
+  ) => {
+    if (_.isEqual(nextIndexPatternIdsAndFieldNames, this._prevIndexPatternIdsAndFieldNames)) {
       // all ready loaded index pattern ids
       return;
     }
 
-    this._prevIndexPatternIds = nextIndexPatternIds;
-
-    const geoFields: GeoFieldWithIndex[] = [];
-    const indexPatterns = await getIndexPatternsFromIds(nextIndexPatternIds);
-    indexPatterns.forEach((indexPattern) => {
-      indexPattern.fields.forEach((field) => {
-        if (
-          indexPattern.id &&
-          !indexPatternsUtils.isNestedField(field) &&
-          (field.type === ES_GEO_FIELD_TYPE.GEO_POINT || field.type === ES_GEO_FIELD_TYPE.GEO_SHAPE)
-        ) {
-          geoFields.push({
-            geoFieldName: field.name,
-            geoFieldType: field.type,
-            indexPatternTitle: indexPattern.title,
-            indexPatternId: indexPattern.id,
-          });
-        }
-      });
-    });
+    this._prevIndexPatternIdsAndFieldNames = nextIndexPatternIdsAndFieldNames;
 
+    const queryableFields = await getFieldsFromIds(nextIndexPatternIdsAndFieldNames);
+    let geoFields: IFieldType[] = getGeoFields(_.map(queryableFields, 'field'));
+    geoFields = _.uniqWith(geoFields, _.isEqual);
     if (!this._isMounted) {
       return;
     }
-
     this.setState({ geoFields });
   };
 

x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_filter_control/draw_filter_control.tsx

@@ -33,12 +33,7 @@ export interface Props {
 
 export class DrawFilterControl extends Component<Props, {}> {
   _onDraw = async (e: { features: Feature[] }) => {
-    if (
-      !e.features.length ||
-      !this.props.drawState ||
-      !this.props.drawState.geoFieldName ||
-      !this.props.drawState.indexPatternId
-    ) {
+    if (!e.features.length || !this.props.drawState || !this.props.drawState.geoFieldName) {
       return;
     }
 

x-pack/plugins/maps/public/connected_components/mb_map/features_tooltip/feature_geometry_filter_form.tsx

@@ -21,15 +21,15 @@ import {
 import { ES_SPATIAL_RELATIONS, GEO_JSON_TYPE } from '../../../../common/constants';
 // @ts-expect-error
 import { GeometryFilterForm } from '../../../components/geometry_filter_form';
-import { GeoFieldWithIndex } from '../../../components/geo_field_with_index';
+import { IFieldType } from '../../../../../../../src/plugins/data/public';
 
 // over estimated and imprecise value to ensure filter has additional room for any meta keys added when filter is mapped.
 const META_OVERHEAD = 100;
 
 interface Props {
   onClose: () => void;
   geometry: Geometry;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
   addFilters: (filters: Filter[], actionId: string) => Promise<void>;
   getFilterActions?: () => Promise<Action[]>;
   getActionContext?: () => ActionExecutionContext;

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

@@ -42,7 +42,7 @@ import {
   // @ts-expect-error
 } from './utils';
 import { ResizeChecker } from '../../../../../../src/plugins/kibana_utils/public';
-import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
+import { IFieldType } from '../../../../../../src/plugins/data/public';
 import { RenderToolTipContent } from '../../classes/tooltips/tooltip_property';
 import { MapExtentState } from '../../actions';
 import { TileStatusTracker } from './tile_status_tracker';
@@ -74,7 +74,7 @@ export interface Props {
   getFilterActions?: () => Promise<Action[]>;
   getActionContext?: () => ActionExecutionContext;
   onSingleValueTrigger?: (actionId: string, key: string, value: RawValue) => void;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
   renderTooltipContent?: RenderToolTipContent;
   setAreTilesLoaded: (layerId: string, areTilesLoaded: boolean) => void;
 }

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

@@ -7,16 +7,15 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Filter } from 'src/plugins/data/public';
+import { IFieldType, Filter } from 'src/plugins/data/public';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { SetViewControl } from './set_view_control';
 import { ToolsControl } from './tools_control';
 import { FitToData } from './fit_to_data';
-import { GeoFieldWithIndex } from '../../components/geo_field_with_index';
 
 export interface Props {
   addFilters?: ((filters: Filter[], actionId: string) => Promise<void>) | null;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
   getFilterActions?: () => Promise<Action[]>;
   getActionContext?: () => ActionExecutionContext;
 }

x-pack/plugins/maps/public/connected_components/toolbar_overlay/tools_control/tools_control.tsx

@@ -22,7 +22,7 @@ import { DRAW_TYPE, ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../../../
 // @ts-expect-error
 import { GeometryFilterForm } from '../../../components/geometry_filter_form';
 import { DistanceFilterForm } from '../../../components/distance_filter_form';
-import { GeoFieldWithIndex } from '../../../components/geo_field_with_index';
+import { IFieldType } from '../../../../../plugins/data/public';
 import { DrawState } from '../../../../common/descriptor_types';
 
 const DRAW_SHAPE_LABEL = i18n.translate('xpack.maps.toolbarOverlay.drawShapeLabel', {
@@ -54,7 +54,7 @@ const DRAW_DISTANCE_LABEL_SHORT = i18n.translate(
 
 export interface Props {
   cancelDraw: () => void;
-  geoFields: GeoFieldWithIndex[];
+  geoFields: IFieldType[];
   initiateDraw: (drawState: DrawState) => void;
   isDrawingFilter: boolean;
   getFilterActions?: () => Promise<Action[]>;

x-pack/plugins/maps/public/index_pattern_util.ts

@@ -29,6 +29,27 @@ export function getGeoTileAggNotSupportedReason(field: IFieldType): string | nul
   return null;
 }
 
+export async function getFieldFromIndexByName(indexPatternId: string, fieldName: string) {
+  const indexPattern = await getIndexPatternService().get(indexPatternId);
+  const field = indexPattern.fields.getByName(fieldName);
+  return { indexPattern, field };
+}
+
+export async function getFieldsFromIds(indexPatternIdsWithFields) {
+  const promises: IndexPattern[] = [];
+  indexPatternIdsWithFields.forEach(async ({ indexPatternId, fieldName }) => {
+    try {
+      // @ts-ignore
+      promises.push(getFieldFromIndexByName(indexPatternId, fieldName));
+    } catch (error) {
+      // Unable to load index pattern, better to not throw error so map can render
+      // Error will be surfaced by layer since it too will be unable to locate the index pattern
+      return null;
+    }
+  });
+  return await Promise.all(promises);
+}
+
 export async function getIndexPatternsFromIds(
   indexPatternIds: string[] = []
 ): Promise<IndexPattern[]> {

x-pack/plugins/maps/public/routes/map_page/map_app/index.ts

@@ -14,7 +14,7 @@ import { getFlyoutDisplay, getIsFullScreen } from '../../../selectors/ui_selecto
 import {
   getFilters,
   getQuery,
-  getQueryableUniqueIndexPatternIds,
+  getQueryableUniqueIndexPatternIdsAndFieldNames,
   getRefreshConfig,
   getTimeFilters,
   hasDirtyState,
@@ -31,7 +31,7 @@ function mapStateToProps(state: MapStoreState) {
     isOpenSettingsDisabled: getFlyoutDisplay(state) !== FLYOUT_STATE.NONE,
     isSaveDisabled: hasDirtyState(state),
     inspectorAdapters: getInspectorAdapters(state),
-    nextIndexPatternIds: getQueryableUniqueIndexPatternIds(state),
+    nextIndexPatternIdsAndFieldNames: getQueryableUniqueIndexPatternIdsAndFieldNames(state),
     flyoutDisplay: getFlyoutDisplay(state),
     refreshConfig: getRefreshConfig(state),
     filters: getFilters(state),