review feedback

elastic · Feb 9, 2020 · c03cb7c · c03cb7c
1 parent c1096bf
commit c03cb7c
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 23 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -72,8 +72,9 @@ export class ColorMapSelect extends Component {
         <EuiSpacer size="s" />
         <ColorStopsCategorical
           colorStops={this.state.customColorMap}
+          field={this.props.styleProperty.getField()}
+          getValueSuggestions={this.props.styleProperty.getValueSuggestions}
           onChange={this._onCustomColorMapChange}
-          getValueSuggestions={this.props.getValueSuggestions}
         />
       </Fragment>
     );

diff --git a/...gacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js b/...gacy/plugins/maps/public/layers/styles/vector/components/color/color_stops_categorical.js
@@ -24,6 +24,7 @@ export const ColorStopsCategorical = ({
     { stop: null, color: DEFAULT_CUSTOM_COLOR }, //first stop is the "other" color
     { stop: '', color: DEFAULT_NEXT_COLOR },
   ],
+  field,
   onChange,
   getValueSuggestions,
 }) => {
@@ -57,6 +58,7 @@ export const ColorStopsCategorical = ({
 
     return (
       <StopInput
+        field={field}
         getValueSuggestions={getValueSuggestions}
         value={stopValue}
         onChange={onStopChange}

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/...ck/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -67,7 +67,7 @@ export function DynamicColorForm({
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
           useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
-          getValueSuggestions={styleProperty.getValueSuggestions}
+          styleProperty={styleProperty}
         />
       );
     }
@@ -83,7 +83,7 @@ export function DynamicColorForm({
         color={styleOptions.colorCategory}
         customColorMap={styleOptions.customColorPalette}
         useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
-        getValueSuggestions={styleProperty.getValueSuggestions}
+        styleProperty={styleProperty}
       />
     );
   };

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/stop_input.js
@@ -7,24 +7,47 @@
 import _ from 'lodash';
 import React, { Component } from 'react';
 
-import { EuiComboBox } from '@elastic/eui';
+import { EuiComboBox, EuiFieldText } from '@elastic/eui';
 
 export class StopInput extends Component {
-  state = {
-    suggestions: [],
-    isLoadingSuggestions: false,
-    hasPrevFocus: false,
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      suggestions: [],
+      isLoadingSuggestions: false,
+      hasPrevFocus: false,
+      fieldDataType: undefined,
+      localFieldTextValue: props.value,
+    };
+  }
 
   componentDidMount() {
     this._isMounted = true;
+    this._prevFieldName = undefined;
+    this._loadFieldDataType();
+  }
+
+  componentDidUpdate() {
+    this._loadFieldDataType();
   }
 
   componentWillUnmount() {
     this._isMounted = false;
     this._loadSuggestions.cancel();
   }
 
+  async _loadFieldDataType() {
+    if (this.props.field.getName() === this._prevFieldName) {
+      return;
+    }
+
+    this._prevFieldName = this.props.field.getName();
+    const fieldDataType = await this.props.field.getDataType();
+    if (this._isMounted) {
+      this.setState({ fieldDataType });
+    }
+  }
+
   _onFocus = () => {
     if (!this.state.hasPrevFocus) {
       this.setState({ hasPrevFocus: true });
@@ -68,7 +91,17 @@ export class StopInput extends Component {
     }
   }, 300);
 
-  render() {
+  _onFieldTextChange = event => {
+    this.setState({ localFieldTextValue: event.target.value });
+    // onChange can cause UI lag, ensure smooth input typing by debouncing onChange
+    this._debouncedOnFieldTextChange();
+  };
+
+  _debouncedOnFieldTextChange = _.debounce(() => {
+    this.props.onChange(this.state.localFieldTextValue);
+  }, 500);
+
+  _renderSuggestionInput() {
     const suggestionOptions = this.state.suggestions.map(suggestion => {
       return { label: `${suggestion}` };
     });
@@ -100,4 +133,26 @@ export class StopInput extends Component {
       />
     );
   }
+
+  _renderTextInput() {
+    return (
+      <EuiFieldText
+        value={this.state.localFieldTextValue}
+        onChange={this._onFieldTextChange}
+        compressed
+      />
+    );
+  }
+
+  render() {
+    if (!this.state.fieldDataType) {
+      return null;
+    }
+
+    // autocomplete service can not provide suggestions for non string fields (and boolean) because it uses
+    // term aggregation include parameter. Include paramerter uses a regular expressions that only supports string type
+    return this.state.fieldDataType === 'string' || this.state.fieldDataType === 'boolean'
+      ? this._renderSuggestionInput()
+      : this._renderTextInput();
+  }
 }
diff --git a/...ck/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/...ck/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -43,7 +43,7 @@ export function DynamicIconForm({
     return (
       <IconMapSelect
         {...styleOptions}
-        getValueSuggestions={styleProperty.getValueSuggestions}
+        styleProperty={styleProperty}
         onChange={onIconMapChange}
         isDarkMode={isDarkMode}
         symbolOptions={symbolOptions}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_map_select.js
@@ -13,10 +13,10 @@ import { IconStops } from './icon_stops';
 
 export function IconMapSelect({
   customIconStops,
-  getValueSuggestions,
   iconPaletteId,
   isDarkMode,
   onChange,
+  styleProperty,
   symbolOptions,
   useCustomIconMap,
 }) {
@@ -31,7 +31,8 @@ export function IconMapSelect({
   function renderCustomIconStopsInput(onCustomMapChange) {
     return (
       <IconStops
-        getValueSuggestions={getValueSuggestions}
+        field={styleProperty.getField()}
+        getValueSuggestions={styleProperty.getValueSuggestions}
         iconStops={customIconStops}
         isDarkMode={isDarkMode}
         onChange={onCustomMapChange}

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_stops.js
@@ -25,6 +25,7 @@ const DEFAULT_ICON_STOPS = [
 ];
 
 export function IconStops({
+  field,
   getValueSuggestions,
   iconStops = DEFAULT_ICON_STOPS,
   isDarkMode,
@@ -98,7 +99,12 @@ export function IconStops({
           compressed
         />
       ) : (
-        <StopInput getValueSuggestions={getValueSuggestions} value={stop} onChange={onStopChange} />
+        <StopInput
+          field={field}
+          getValueSuggestions={getValueSuggestions}
+          value={stop}
+          onChange={onStopChange}
+        />
       );
 
     return (

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js
@@ -17,19 +17,17 @@ import { OrdinalFieldMetaOptionsPopover } from '../components/ordinal_field_meta
 export class DynamicStyleProperty extends AbstractStyleProperty {
   static type = STYLE_TYPE.DYNAMIC;
 
-  constructor(options, styleName, field, getFieldMeta, getFieldFormatter, getValueSuggestions) {
+  constructor(options, styleName, field, getFieldMeta, getFieldFormatter, source) {
     super(options, styleName);
     this._field = field;
     this._getFieldMeta = getFieldMeta;
     this._getFieldFormatter = getFieldFormatter;
-    this._getValueSuggestions = getValueSuggestions;
+    this._source = source;
   }
 
   getValueSuggestions = query => {
     const fieldName = this.getFieldName();
-    return this._getValueSuggestions && fieldName
-      ? this._getValueSuggestions(fieldName, query)
-      : [];
+    return this._source && fieldName ? this._source.getValueSuggestions(fieldName, query) : [];
   };
 
   getFieldMeta() {

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js
@@ -612,7 +612,7 @@ export class VectorStyle extends AbstractStyle {
         field,
         this._getFieldMeta,
         this._getFieldFormatter,
-        this._source.getValueSuggestions,
+        this._source,
         isSymbolizedAsIcon
       );
     } else {
@@ -633,7 +633,7 @@ export class VectorStyle extends AbstractStyle {
         field,
         this._getFieldMeta,
         this._getFieldFormatter,
-        this._source.getValueSuggestions
+        this._source
       );
     } else {
       throw new Error(`${descriptor} not implemented`);
@@ -666,7 +666,7 @@ export class VectorStyle extends AbstractStyle {
         field,
         this._getFieldMeta,
         this._getFieldFormatter,
-        this._source.getValueSuggestions
+        this._source
       );
     } else {
       throw new Error(`${descriptor} not implemented`);
@@ -686,7 +686,7 @@ export class VectorStyle extends AbstractStyle {
         field,
         this._getFieldMeta,
         this._getFieldFormatter,
-        this._source.getValueSuggestions
+        this._source
       );
     } else {
       throw new Error(`${descriptor} not implemented`);