Merge master with draw filter POC

x-pack/package.json

@@ -159,6 +159,7 @@
     "@kbn/i18n": "1.0.0",
     "@kbn/interpreter": "1.0.0",
     "@kbn/ui-framework": "1.0.0",
+    "@mapbox/mapbox-gl-draw": "^1.1.1",
     "@samverschueren/stream-to-observable": "^0.3.0",
     "@scant/router": "^0.1.0",
     "@slack/client": "^4.8.0",
@@ -229,6 +230,7 @@
     "lodash.uniqby": "^4.7.0",
     "lz-string": "^1.4.4",
     "mapbox-gl": "0.52.0",
+    "mapbox-gl-draw-rectangle-mode": "^1.0.4",
     "markdown-it": "^8.4.1",
     "mime": "^2.2.2",
     "mkdirp": "0.5.1",

x-pack/plugins/maps/public/actions/store_actions.js

@@ -51,6 +51,17 @@ export const TRACK_CURRENT_LAYER_STATE = 'TRACK_CURRENT_LAYER_STATE';
 export const ROLLBACK_TO_TRACKED_LAYER_STATE = 'ROLLBACK_TO_TRACKED_LAYER_STATE';
 export const REMOVE_TRACKED_LAYER_STATE = 'REMOVE_TRACKED_LAYER_STATE';
 export const SET_TOOLTIP_STATE = 'SET_TOOLTIP_STATE';
+export const UPDATE_DRAW_STATE = 'UPDATE_DRAWMODE';
+
+export const DRAW_STATE_TYPE = {
+  NONE: 'NONE',
+  ACTIVE: 'ACTIVE'
+};
+
+export const DRAW_STATE_DRAW_TYPE = {
+  BOUNDS: 'BOUNDS',
+  POLYGON: 'POLYGON'
+};
 
 function getLayerLoadingCallbacks(dispatch, layerId) {
   return {
@@ -628,3 +639,18 @@ export function setJoinsForLayer(layer, joins) {
     dispatch(syncDataForLayer(layer.getId()));
   };
 }
+
+export function updateDrawStateWithOptions(type, options) {
+  return async (dispatch) => {
+    if (type === DRAW_STATE_TYPE.ACTIVE) {
+      await dispatch(setTooltipState(null));//tooltips just get in the way
+    }
+    dispatch({
+      type: UPDATE_DRAW_STATE,
+      drawState: {
+        type: type,
+        ...options
+      }
+    });
+  };
+}

x-pack/plugins/maps/public/components/_index.scss

@@ -2,3 +2,4 @@
 @import './layer_addpanel/layer_addpanel';
 @import './layer_panel/index';
 @import './widget_overlay/index';
+@import './draw_control/index';

x-pack/plugins/maps/public/components/draw_control/_index.scss

@@ -0,0 +1,7 @@
+.drawControl {
+  position: absolute;
+  top: 10px;
+  width: 200px;
+  padding: 0;
+  left: 46px;
+}

x-pack/plugins/maps/public/components/draw_control/index.js

@@ -0,0 +1,31 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { DrawControl } from './view';
+import { getDrawState, getUniqueIndexPatternIds } from '../../selectors/map_selectors';
+import { DRAW_STATE_TYPE, updateDrawStateWithOptions } from '../../actions/store_actions';
+import { getIsReadOnly } from '../../store/ui';
+
+function mapStateToProps(state = {}) {
+  return {
+    isReadOnly: getIsReadOnly(state),
+    drawState: getDrawState(state),
+    uniqueIndexPatternIds: getUniqueIndexPatternIds(state)
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    initiateDraw: (options) => {
+      dispatch(updateDrawStateWithOptions(DRAW_STATE_TYPE.ACTIVE, options));
+    },
+
+  };
+}
+
+const connectedViewControl = connect(mapStateToProps, mapDispatchToProps)(DrawControl);
+export { connectedViewControl as DrawControl };

x-pack/plugins/maps/public/components/draw_control/initiate_draw_button.js

@@ -0,0 +1,107 @@
+/*
+ * 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 {
+  EuiButton,
+  EuiPopover
+} from '@elastic/eui';
+import { IpSelectionList } from './ip_selection_list';
+import { DRAW_STATE_TYPE } from '../../actions/store_actions';
+import _ from 'lodash';
+import { getIndexPatternsFromIds } from '../../index_pattern_util';
+
+export class InitiateDrawButton extends React.Component {
+
+  state = {
+    openPopover: false,
+    uniqueIndexPatternsAndGeoFields: []
+  };
+
+  _openIndexPatternSelection = () => {
+    if (this._isMounted) {
+      this.setState({ openPopover: true });
+    }
+  };
+
+  _closePopover = () => {
+    if (this._isMounted) {
+      this.setState({ openPopover: false });
+    }
+  };
+
+  _onSelect = (e) => {
+    this._closePopover();
+    this.props.initiateDraw(e);
+  };
+
+  async _getuniqueIndexPatternAndFieldCombos() {
+
+    const indexPatterns = await getIndexPatternsFromIds(this.props.uniqueIndexPatternIds);
+    try {
+
+      const uniqueIndexPatternsAndGeofields = [];
+      indexPatterns.forEach((indexPattern) => {
+        indexPattern.fields.forEach(field => {
+          if (field.type === 'geo_point') {
+            uniqueIndexPatternsAndGeofields.push({
+              geoField: field.name,
+              indexPatternTitle: indexPattern.title,
+              indexPatternId: indexPattern.id
+            });
+          }
+        });
+      });
+
+
+      if (this._isMounted && !_.isEqual(this.state.uniqueIndexPatternsAndGeoFields, uniqueIndexPatternsAndGeofields)) {
+        this.setState({
+          uniqueIndexPatternsAndGeoFields: uniqueIndexPatternsAndGeofields,
+          openPopover: false
+        });
+      }
+    } catch(e) {
+      console.error(e);
+      throw e;
+    }
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  componentDidUpdate() {
+    this._getuniqueIndexPatternAndFieldCombos();
+  }
+
+  render() {
+    return (
+      <EuiPopover
+        button={
+          <EuiButton
+            disabled={this.props.drawState.type === DRAW_STATE_TYPE.ACTIVE && this.state.uniqueIndexPatternsAndGeoFields.length !== 0}
+            fill
+            size="s"
+            onClick={this._openIndexPatternSelection}
+          >
+            {this.props.buttonText}
+          </EuiButton>
+        }
+        isOpen={this.state.openPopover}
+        closePopover={this._closePopover}
+        anchorPosition="downLeft"
+      >
+        <IpSelectionList indexPatternsAndGeoFields={this.state.uniqueIndexPatternsAndGeoFields} onSelect={this._onSelect}/>
+      </EuiPopover>
+    );
+  }
+
+}

x-pack/plugins/maps/public/components/draw_control/ip_selection_list.js

@@ -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 {
+  EuiFlexGroup,
+  EuiButton,
+  EuiFlexItem
+} from '@elastic/eui';
+
+
+export class IpSelectionList extends React.Component {
+
+
+  _renderList() {
+    return this.props.indexPatternsAndGeoFields.map((indexPatternAndGeoField, index) => {
+
+      const onClick = () => {
+        this.props.onSelect(indexPatternAndGeoField);
+      };
+
+      return (
+        <EuiFlexItem key={index}>
+          <EuiButton
+            onClick={onClick}
+          >
+            {`${indexPatternAndGeoField.indexPatternTitle}.${indexPatternAndGeoField.geoField}`}
+          </EuiButton>
+        </EuiFlexItem>
+      );
+    });
+
+  }
+
+  render() {
+
+    return (
+      <EuiFlexGroup direction="column">
+        {this._renderList()}
+      </EuiFlexGroup>
+    );
+  }
+}

x-pack/plugins/maps/public/components/draw_control/view.js

@@ -0,0 +1,55 @@
+/*
+ * 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 { InitiateDrawButton } from './initiate_draw_button';
+import {
+  EuiFlexGroup,
+  EuiFlexItem
+} from '@elastic/eui';
+
+
+
+import { DRAW_STATE_DRAW_TYPE } from '../../actions/store_actions';
+
+export class DrawControl extends React.Component {
+
+  _initiateDraw = (drawType, e) => {
+    this.props.initiateDraw({ drawType, ...e });
+  };
+
+  render() {
+
+    if (!this.props.isReadOnly) {
+      return null;
+    }
+
+    return (
+      <div className="drawControl">
+        <EuiFlexGroup direction="row">
+          <EuiFlexItem>
+            <InitiateDrawButton
+              initiateDraw={(e) => this._initiateDraw(DRAW_STATE_DRAW_TYPE.POLYGON, e)}
+              uniqueIndexPatternIds={this.props.uniqueIndexPatternIds}
+              drawState={this.props.drawState}
+              buttonText="Draw polygon"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <InitiateDrawButton
+              initiateDraw={(e) => this._initiateDraw(DRAW_STATE_DRAW_TYPE.BOUNDS, e)}
+              uniqueIndexPatternIds={this.props.uniqueIndexPatternIds}
+              drawState={this.props.drawState}
+              buttonText="Draw bounds"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    );
+  }
+}
+
+

x-pack/plugins/maps/public/components/gis_map/view.js

@@ -7,6 +7,7 @@
 import React, { Component } from 'react';
 import { MBMapContainer } from '../map/mb';
 import { WidgetOverlay } from '../widget_overlay/index';
+import { DrawControl } from '../draw_control/index';
 import { LayerPanel } from '../layer_panel/index';
 import { AddLayerPanel } from '../layer_addpanel/index';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
@@ -91,6 +92,7 @@ export class GisMap extends Component {
       <EuiFlexGroup gutterSize="none" responsive={false}>
         <EuiFlexItem className="mapMapWrapper">
           <MBMapContainer/>
+          <DrawControl />
           <WidgetOverlay/>
         </EuiFlexItem>
 

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

@@ -13,9 +13,16 @@ import {
   setMouseCoordinates,
   clearMouseCoordinates,
   clearGoto,
-  setTooltipState
+  setTooltipState,
+  DRAW_STATE_TYPE, updateDrawStateWithOptions
 } from '../../../actions/store_actions';
-import { getTooltipState, getLayerList, getMapReady, getGoto } from '../../../selectors/map_selectors';
+import {
+  getTooltipState,
+  getLayerList,
+  getMapReady,
+  getGoto,
+  getDrawState
+} from '../../../selectors/map_selectors';
 import { getIsFilterable } from '../../../store/ui';
 import { getInspectorAdapters } from '../../../store/non_serializable_instances';
 
@@ -26,7 +33,8 @@ function mapStateToProps(state = {}) {
     layerList: getLayerList(state),
     goto: getGoto(state),
     inspectorAdapters: getInspectorAdapters(state),
-    tooltipState: getTooltipState(state)
+    tooltipState: getTooltipState(state),
+    drawState: getDrawState(state)
   };
 }
 
@@ -54,6 +62,9 @@ function mapDispatchToProps(dispatch) {
     },
     setTooltipState(tooltipState) {
       dispatch(setTooltipState(tooltipState));
+    },
+    disableDrawState() {
+      dispatch(updateDrawStateWithOptions(DRAW_STATE_TYPE.NONE, null));
     }
   };
 }