[Maps] fix unable to edit cluster vector styles styled by count when switching to super fine grid resolution

x-pack/plugins/maps/public/actions/layer_actions.ts

@@ -441,7 +441,7 @@ export function clearMissingStyleProperties(layerId: string) {
     const {
       hasChanges,
       nextStyleDescriptor,
-    } = (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
+    } = await (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
       nextFields,
       getMapColors(getState())
     );

x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js

@@ -20,20 +20,16 @@ import { i18n } from '@kbn/i18n';
 
 import { EuiSpacer, EuiButtonGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
 import {
-  CATEGORICAL_DATA_TYPES,
-  ORDINAL_DATA_TYPES,
   LABEL_BORDER_SIZES,
   VECTOR_STYLES,
   STYLE_TYPE,
   VECTOR_SHAPE_TYPE,
 } from '../../../../../common/constants';
+import { styleFieldsCustodianFactory } from '../style_fields_custodian';
 
 export class VectorStyleEditor extends Component {
   state = {
-    dateFields: [],
-    numberFields: [],
-    fields: [],
-    ordinalAndCategoricalFields: [],
+    styleFields: [],
     defaultDynamicProperties: getDefaultDynamicProperties(),
     defaultStaticProperties: getDefaultStaticProperties(),
     supportedFeatures: undefined,
@@ -56,33 +52,17 @@ export class VectorStyleEditor extends Component {
   }
 
   async _loadFields() {
-    const getFieldMeta = async (field) => {
-      return {
-        label: await field.getLabel(),
-        name: field.getName(),
-        origin: field.getOrigin(),
-        type: await field.getDataType(),
-        supportsAutoDomain: field.supportsAutoDomain(),
-      };
-    };
-
-    //These are all fields (only used for text labeling)
-    const fields = await this.props.layer.getStyleEditorFields();
-    const fieldPromises = fields.map(getFieldMeta);
-    const fieldsArrayAll = await Promise.all(fieldPromises);
-    if (!this._isMounted || _.isEqual(fieldsArrayAll, this.state.fields)) {
+    const styleFieldsCustodian = await styleFieldsCustodianFactory(
+      await this.props.layer.getStyleEditorFields()
+    );
+    const styleFields = styleFieldsCustodian.getStyleFields();
+    if (!this._isMounted || _.isEqual(styleFields, this.state.styleFields)) {
       return;
     }
 
     this.setState({
-      fields: fieldsArrayAll,
-      ordinalAndCategoricalFields: fieldsArrayAll.filter((field) => {
-        return (
-          CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type)
-        );
-      }),
-      dateFields: fieldsArrayAll.filter((field) => field.type === 'date'),
-      numberFields: fieldsArrayAll.filter((field) => field.type === 'number'),
+      styleFields,
+      styleFieldsCustodian,
     });
   }
 
@@ -109,12 +89,6 @@ export class VectorStyleEditor extends Component {
     }
   }
 
-  _getOrdinalFields() {
-    return [...this.state.dateFields, ...this.state.numberFields].filter((field) => {
-      return field.supportsAutoDomain;
-    });
-  }
-
   _handleSelectedFeatureChange = (selectedFeature) => {
     this.setState({ selectedFeature });
   };
@@ -165,7 +139,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.FILL_COLOR]}
-        fields={this.state.ordinalAndCategoricalFields}
+        fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.FILL_COLOR)}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.FILL_COLOR].options
         }
@@ -186,7 +160,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_COLOR]}
-        fields={this.state.ordinalAndCategoricalFields}
+        fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LINE_COLOR)}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.LINE_COLOR].options
         }
@@ -205,7 +179,7 @@ export class VectorStyleEditor extends Component {
         onStaticStyleChange={this._onStaticStyleChange}
         onDynamicStyleChange={this._onDynamicStyleChange}
         styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_WIDTH]}
-        fields={this._getOrdinalFields()}
+        fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LINE_WIDTH)}
         defaultStaticStyleOptions={
           this.state.defaultStaticProperties[VECTOR_STYLES.LINE_WIDTH].options
         }
@@ -225,7 +199,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT]}
-          fields={this.state.fields}
+          fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LABEL_TEXT)}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_TEXT].options
           }
@@ -242,7 +216,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_COLOR]}
-          fields={this.state.ordinalAndCategoricalFields}
+          fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LABEL_COLOR)}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_COLOR].options
           }
@@ -258,7 +232,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_SIZE]}
-          fields={this._getOrdinalFields()}
+          fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LABEL_SIZE)}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_SIZE].options
           }
@@ -275,7 +249,9 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
-          fields={this.state.ordinalAndCategoricalFields}
+          fields={this.state.styleFieldsCustodian.getFieldsForStyle(
+            VECTOR_STYLES.LABEL_BORDER_COLOR
+          )}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
           }
@@ -309,7 +285,9 @@ export class VectorStyleEditor extends Component {
             onStaticStyleChange={this._onStaticStyleChange}
             onDynamicStyleChange={this._onDynamicStyleChange}
             styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_ORIENTATION]}
-            fields={this.state.numberFields}
+            fields={this.state.styleFieldsCustodian.getFieldsForStyle(
+              VECTOR_STYLES.ICON_ORIENTATION
+            )}
             defaultStaticStyleOptions={
               this.state.defaultStaticProperties[VECTOR_STYLES.ICON_ORIENTATION].options
             }
@@ -328,7 +306,7 @@ export class VectorStyleEditor extends Component {
             onStaticStyleChange={this._onStaticStyleChange}
             onDynamicStyleChange={this._onDynamicStyleChange}
             styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
-            fields={this.state.ordinalAndCategoricalFields}
+            fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.ICON)}
             defaultStaticStyleOptions={
               this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
             }
@@ -368,7 +346,7 @@ export class VectorStyleEditor extends Component {
           onStaticStyleChange={this._onStaticStyleChange}
           onDynamicStyleChange={this._onDynamicStyleChange}
           styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_SIZE]}
-          fields={this._getOrdinalFields()}
+          fields={this.state.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.ICON_SIZE)}
           defaultStaticStyleOptions={
             this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
           }
@@ -409,9 +387,9 @@ export class VectorStyleEditor extends Component {
   }
 
   _renderProperties() {
-    const { supportedFeatures, selectedFeature } = this.state;
+    const { supportedFeatures, selectedFeature, styleFieldsCustodian } = this.state;
 
-    if (!supportedFeatures) {
+    if (!supportedFeatures || !styleFieldsCustodian) {
       return null;
     }
 

x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts

@@ -16,10 +16,38 @@ import {
 import { AbstractField, IField } from '../../../../fields/field';
 import { IStyle } from '../../../style';
 
-class MockField extends AbstractField {
+export class MockField extends AbstractField {
+  private readonly _dataType: string;
+  private readonly _supportsAutoDomain: boolean;
+
+  constructor({
+    fieldName,
+    origin = FIELD_ORIGIN.SOURCE,
+    dataType = 'string',
+    supportsAutoDomain = true,
+  }: {
+    fieldName: string;
+    origin?: FIELD_ORIGIN;
+    dataType?: string;
+    supportsAutoDomain?: boolean;
+  }) {
+    super({ fieldName, origin });
+    this._dataType = dataType;
+    this._supportsAutoDomain = supportsAutoDomain;
+  }
+
   async getLabel(): Promise<string> {
     return this.getName() + '_label';
   }
+
+  async getDataType(): Promise<string> {
+    return this._dataType;
+  }
+
+  supportsAutoDomain(): boolean {
+    return this._supportsAutoDomain;
+  }
+
   supportsFieldMeta(): boolean {
     return true;
   }

x-pack/plugins/maps/public/classes/styles/vector/style_fields_custodian.ts

@@ -0,0 +1,96 @@
+/*
+ * 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 {
+  CATEGORICAL_DATA_TYPES,
+  FIELD_ORIGIN,
+  ORDINAL_DATA_TYPES,
+  VECTOR_STYLES,
+} from '../../../../common/constants';
+import { IField } from '../../fields/field';
+
+export interface StyleField {
+  label: string;
+  name: string;
+  origin: FIELD_ORIGIN;
+  type: string;
+  supportsAutoDomain: boolean;
+}
+
+export async function styleFieldsCustodianFactory(fields: IField[]): Promise<StyleFieldsCustodian> {
+  const promises: Array<Promise<StyleField>> = fields.map(async (field: IField) => {
+    return {
+      label: await field.getLabel(),
+      name: field.getName(),
+      origin: field.getOrigin(),
+      type: await field.getDataType(),
+      supportsAutoDomain: field.supportsAutoDomain(),
+    };
+  });
+  const styleFields = await Promise.all(promises);
+  return new StyleFieldsCustodian(styleFields);
+}
+
+class StyleFieldsCustodian {
+  private readonly _styleFields: StyleField[];
+  private readonly _ordinalAndCategoricalFields: StyleField[];
+  private readonly _numberFields: StyleField[];
+  private readonly _ordinalFields: StyleField[];
+
+  constructor(styleFields: StyleField[]) {
+    const ordinalAndCategoricalFields: StyleField[] = [];
+    const numberFields: StyleField[] = [];
+    const ordinalFields: StyleField[] = [];
+
+    styleFields.forEach((styleField: StyleField) => {
+      if (
+        CATEGORICAL_DATA_TYPES.includes(styleField.type) ||
+        ORDINAL_DATA_TYPES.includes(styleField.type)
+      ) {
+        ordinalAndCategoricalFields.push(styleField);
+      }
+
+      if (styleField.type === 'date' || styleField.type === 'number') {
+        if (styleField.type === 'number') {
+          numberFields.push(styleField);
+        }
+        if (styleField.supportsAutoDomain) {
+          ordinalFields.push(styleField);
+        }
+      }
+    });
+
+    this._styleFields = styleFields;
+    this._ordinalAndCategoricalFields = ordinalAndCategoricalFields;
+    this._numberFields = numberFields;
+    this._ordinalFields = ordinalFields;
+  }
+
+  getFieldsForStyle(styleName: VECTOR_STYLES) {
+    switch (styleName) {
+      case VECTOR_STYLES.ICON_ORIENTATION:
+        return this._numberFields;
+      case VECTOR_STYLES.FILL_COLOR:
+      case VECTOR_STYLES.LINE_COLOR:
+      case VECTOR_STYLES.LABEL_COLOR:
+      case VECTOR_STYLES.LABEL_BORDER_COLOR:
+      case VECTOR_STYLES.ICON:
+        return this._ordinalAndCategoricalFields;
+      case VECTOR_STYLES.LINE_WIDTH:
+      case VECTOR_STYLES.LABEL_SIZE:
+      case VECTOR_STYLES.ICON_SIZE:
+        return this._ordinalFields;
+      case VECTOR_STYLES.LABEL_TEXT:
+        return this._styleFields;
+      default:
+        return [];
+    }
+  }
+
+  getStyleFields() {
+    return this._styleFields;
+  }
+}