[Maps] Update style when metrics change

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

@@ -45,6 +45,8 @@ import { IVectorLayer } from '../classes/layers/vector_layer/vector_layer';
 import { LAYER_STYLE_TYPE, LAYER_TYPE } from '../../common/constants';
 import { IVectorStyle } from '../classes/styles/vector/vector_style';
 import { notifyLicensedFeatureUsage } from '../licensed_features';
+import { IESAggField } from '../classes/fields/agg';
+import { IField } from '../classes/fields/field';
 
 export function trackCurrentLayerState(layerId: string) {
   return {
@@ -280,18 +282,37 @@ export function updateSourceProp(
   value: unknown,
   newLayerType?: LAYER_TYPE
 ) {
-  return async (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
-    dispatch({
-      type: UPDATE_SOURCE_PROP,
-      layerId,
-      propName,
-      value,
-    });
-    if (newLayerType) {
-      dispatch(updateLayerType(layerId, newLayerType));
+  return async (
+    dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
+    getState: () => MapStoreState
+  ) => {
+    if (propName === 'metrics') {
+      const layer = getLayerById(layerId, getState());
+      const oldFields = await (layer as IVectorLayer).getFields();
+      dispatch({
+        type: UPDATE_SOURCE_PROP,
+        layerId,
+        propName,
+        value,
+      });
+      if (newLayerType) {
+        dispatch(updateLayerType(layerId, newLayerType));
+      }
+      await dispatch(updateStyleProperties(layerId, oldFields as IESAggField[]));
+      dispatch(syncDataForLayerId(layerId));
+    } else {
+      dispatch({
+        type: UPDATE_SOURCE_PROP,
+        layerId,
+        propName,
+        value,
+      });
+      if (newLayerType) {
+        dispatch(updateLayerType(layerId, newLayerType));
+      }
+      // await dispatch(updateStyleProperties(layerId));
+      dispatch(syncDataForLayerId(layerId));
     }
-    await dispatch(clearMissingStyleProperties(layerId));
-    dispatch(syncDataForLayerId(layerId));
   };
 }
 
@@ -422,7 +443,7 @@ function removeLayerFromLayerList(layerId: string) {
   };
 }
 
-export function clearMissingStyleProperties(layerId: string) {
+export function updateStyleProperties(layerId: string, previousFields: IField[]) {
   return async (
     dispatch: ThunkDispatch<MapStoreState, void, AnyAction>,
     getState: () => MapStoreState
@@ -441,8 +462,9 @@ export function clearMissingStyleProperties(layerId: string) {
     const {
       hasChanges,
       nextStyleDescriptor,
-    } = await (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
+    } = await (style as IVectorStyle).getDescriptorWithUpdatedStyleProps(
       nextFields,
+      previousFields,
       getMapColors(getState())
     );
     if (hasChanges && nextStyleDescriptor) {
@@ -491,7 +513,8 @@ export function setJoinsForLayer(layer: ILayer, joins: JoinDescriptor[]) {
       joins,
     });
 
-    await dispatch(clearMissingStyleProperties(layer.getId()));
+    const previousFields = await (layer as IVectorLayer).getFields();
+    await dispatch(updateStyleProperties(layer.getId(), previousFields));
     dispatch(syncDataForLayerId(layer.getId()));
   };
 }

x-pack/plugins/maps/public/classes/fields/agg/count_agg_field.ts

@@ -97,4 +97,8 @@ export class CountAggField implements IESAggField {
   canReadFromGeoJson(): boolean {
     return this._canReadFromGeoJson;
   }
+
+  isEqual(field: IESAggField) {
+    return field.getName() === this.getName();
+  }
 }

x-pack/plugins/maps/public/classes/fields/agg/top_term_percentage_field.ts

@@ -83,4 +83,8 @@ export class TopTermPercentageField implements IESAggField {
   canReadFromGeoJson(): boolean {
     return this._canReadFromGeoJson;
   }
+
+  isEqual(field: IESAggField) {
+    return field.getName() === this.getName();
+  }
 }

x-pack/plugins/maps/public/classes/fields/field.ts

@@ -32,6 +32,7 @@ export interface IField {
   supportsFieldMeta(): boolean;
 
   canReadFromGeoJson(): boolean;
+  isEqual(field: IField): boolean;
 }
 
 export class AbstractField implements IField {
@@ -99,4 +100,8 @@ export class AbstractField implements IField {
   canReadFromGeoJson(): boolean {
     return true;
   }
+
+  isEqual(field: IField) {
+    return this._origin === field.getOrigin() && this._fieldName === field.getName();
+  }
 }

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx

@@ -18,6 +18,7 @@ import {
   VECTOR_STYLES,
   RawValue,
   FieldFormatter,
+  TOP_TERM_PERCENTAGE_SUFFIX,
 } from '../../../../../common/constants';
 import { OrdinalFieldMetaPopover } from '../components/field_meta/ordinal_field_meta_popover';
 import { CategoricalFieldMetaPopover } from '../components/field_meta/categorical_field_meta_popover';
@@ -26,12 +27,14 @@ import {
   FieldMetaOptions,
   RangeFieldMeta,
   StyleMetaData,
+  StylePropertyField,
 } from '../../../../../common/descriptor_types';
 import { IField } from '../../../fields/field';
 import { IVectorLayer } from '../../../layers/vector_layer/vector_layer';
 import { InnerJoin } from '../../../joins/inner_join';
 import { IVectorStyle } from '../vector_style';
 import { getComputedFieldName } from '../style_util';
+import { IESAggField } from '../../../fields/agg';
 
 export interface IDynamicStyleProperty<T> extends IStyleProperty<T> {
   getFieldMetaOptions(): FieldMetaOptions;
@@ -48,6 +51,10 @@ export interface IDynamicStyleProperty<T> extends IStyleProperty<T> {
   pluckOrdinalStyleMetaFromFeatures(features: Feature[]): RangeFieldMeta | null;
   pluckCategoricalStyleMetaFromFeatures(features: Feature[]): CategoryFieldMeta | null;
   getValueSuggestions(query: string): Promise<string[]>;
+  rectifyFieldDescriptor(
+    currentField: IESAggField,
+    previousFieldDescriptor: StylePropertyField
+  ): Promise<StylePropertyField | undefined>;
   enrichGeoJsonAndMbFeatureState(
     featureCollection: FeatureCollection,
     mbMap: MbMap,
@@ -240,6 +247,21 @@ export class DynamicStyleProperty<T>
         } as RangeFieldMeta);
   }
 
+  async rectifyFieldDescriptor(
+    currentField: IESAggField,
+    previousFieldDescriptor: StylePropertyField
+  ): Promise<StylePropertyField | undefined> {
+    if (previousFieldDescriptor.name.endsWith(TOP_TERM_PERCENTAGE_SUFFIX)) {
+      // Don't support auto-switching for top-term-percentages
+      return;
+    }
+
+    return {
+      origin: previousFieldDescriptor.origin,
+      name: currentField.getName(),
+    };
+  }
+
   pluckCategoricalStyleMetaFromFeatures(features: Feature[]) {
     const size = this.getNumberOfCategories();
     if (!this.isCategorical() || size <= 0) {

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

@@ -0,0 +1,147 @@
+/*
+ * 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 { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../common/constants';
+import { createStyleFieldsHelper, StyleFieldsHelper } from './style_fields_helper';
+import { AbstractField, IField } from '../../fields/field';
+
+class MockField extends AbstractField {
+  private readonly _dataType: string;
+  private readonly _supportsAutoDomain: boolean;
+  constructor({ dataType, supportsAutoDomain }: { dataType: string; supportsAutoDomain: boolean }) {
+    super({ fieldName: 'foobar_' + dataType, origin: FIELD_ORIGIN.SOURCE });
+    this._dataType = dataType;
+    this._supportsAutoDomain = supportsAutoDomain;
+  }
+  async getDataType() {
+    return this._dataType;
+  }
+
+  supportsAutoDomain(): boolean {
+    return this._supportsAutoDomain;
+  }
+}
+
+describe('StyleFieldHelper', () => {
+  describe('isFieldDataTypeCompatibleWithStyleType', () => {
+    async function createHelper(
+      supportsAutoDomain: boolean
+    ): Promise<{
+      styleFieldHelper: StyleFieldsHelper;
+      stringField: IField;
+      numberField: IField;
+      dateField: IField;
+    }> {
+      const stringField = new MockField({
+        dataType: 'string',
+        supportsAutoDomain,
+      });
+      const numberField = new MockField({
+        dataType: 'number',
+        supportsAutoDomain,
+      });
+      const dateField = new MockField({
+        dataType: 'date',
+        supportsAutoDomain,
+      });
+      return {
+        styleFieldHelper: await createStyleFieldsHelper([stringField, numberField, dateField]),
+        stringField,
+        numberField,
+        dateField,
+      };
+    }
+
+    test('Should validate colors for all data types', async () => {
+      const { styleFieldHelper, stringField, numberField, dateField } = await createHelper(true);
+
+      [
+        VECTOR_STYLES.FILL_COLOR,
+        VECTOR_STYLES.LINE_COLOR,
+        VECTOR_STYLES.LABEL_COLOR,
+        VECTOR_STYLES.LABEL_BORDER_COLOR,
+      ].forEach((styleType) => {
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(stringField, styleType)
+        ).toEqual(true);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(numberField, styleType)
+        ).toEqual(true);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(dateField, styleType)
+        ).toEqual(true);
+      });
+    });
+
+    test('Should validate sizes for all number types', async () => {
+      const { styleFieldHelper, stringField, numberField, dateField } = await createHelper(true);
+
+      [VECTOR_STYLES.LINE_WIDTH, VECTOR_STYLES.LABEL_SIZE, VECTOR_STYLES.ICON_SIZE].forEach(
+        (styleType) => {
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(stringField, styleType)
+          ).toEqual(false);
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(numberField, styleType)
+          ).toEqual(true);
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(dateField, styleType)
+          ).toEqual(true);
+        }
+      );
+    });
+
+    test('Should not validate sizes if autodomain is not enabled', async () => {
+      const { styleFieldHelper, stringField, numberField, dateField } = await createHelper(false);
+
+      [VECTOR_STYLES.LINE_WIDTH, VECTOR_STYLES.LABEL_SIZE, VECTOR_STYLES.ICON_SIZE].forEach(
+        (styleType) => {
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(stringField, styleType)
+          ).toEqual(false);
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(numberField, styleType)
+          ).toEqual(false);
+          expect(
+            styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(dateField, styleType)
+          ).toEqual(false);
+        }
+      );
+    });
+
+    test('Should validate orientation only number types', async () => {
+      const { styleFieldHelper, stringField, numberField, dateField } = await createHelper(true);
+
+      [VECTOR_STYLES.ICON_ORIENTATION].forEach((styleType) => {
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(stringField, styleType)
+        ).toEqual(false);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(numberField, styleType)
+        ).toEqual(true);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(dateField, styleType)
+        ).toEqual(false);
+      });
+    });
+
+    test('Should not validate label_border_size', async () => {
+      const { styleFieldHelper, stringField, numberField, dateField } = await createHelper(true);
+
+      [VECTOR_STYLES.LABEL_BORDER_SIZE].forEach((styleType) => {
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(stringField, styleType)
+        ).toEqual(false);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(numberField, styleType)
+        ).toEqual(false);
+        expect(
+          styleFieldHelper.isFieldDataTypeCompatibleWithStyleType(dateField, styleType)
+        ).toEqual(false);
+      });
+    });
+  });
+});

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

@@ -69,6 +69,11 @@ export class StyleFieldsHelper {
     this._ordinalFields = ordinalFields;
   }
 
+  isFieldDataTypeCompatibleWithStyleType(field: IField, styleName: VECTOR_STYLES): boolean {
+    const fieldList = this.getFieldsForStyle(styleName);
+    return !!fieldList.find((styleField) => field.getName() === styleField.name);
+  }
+
   getFieldsForStyle(styleName: VECTOR_STYLES): StyleField[] {
     switch (styleName) {
       case VECTOR_STYLES.ICON_ORIENTATION: