[Maps] Custom color ramps should show correctly on the map for mvt la…

…yers (#74169) (#74286)
elastic · Aug 4, 2020 · 68028ea · 68028ea
1 parent a893502
commit 68028ea
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 26 deletions.
diff --git a/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts b/x-pack/plugins/maps/public/classes/fields/es_agg_field.ts
@@ -134,6 +134,10 @@ export class ESAggField implements IESAggField {
   supportsAutoDomain(): boolean {
     return true;
   }
+
+  canReadFromGeoJson(): boolean {
+    return true;
+  }
 }
 
 export function esAggFieldsFactory(

diff --git a/x-pack/plugins/maps/public/classes/fields/field.ts b/x-pack/plugins/maps/public/classes/fields/field.ts
@@ -26,7 +26,12 @@ export interface IField {
   // then styling properties that require the domain to be known cannot use this property.
   supportsAutoDomain(): boolean;
 
+  // Determinse wheter Maps-app can automatically deterime the domain of the field-values
+  // _without_ having to retrieve the data as GeoJson
+  // e.g. for ES-sources, this would use the extended_stats API
   supportsFieldMeta(): boolean;
+
+  canReadFromGeoJson(): boolean;
 }
 
 export class AbstractField implements IField {
@@ -90,4 +95,8 @@ export class AbstractField implements IField {
   supportsAutoDomain(): boolean {
     return true;
   }
+
+  canReadFromGeoJson(): boolean {
+    return true;
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/fields/mvt_field.ts b/x-pack/plugins/maps/public/classes/fields/mvt_field.ts
@@ -56,4 +56,8 @@ export class MVTField extends AbstractField implements IField {
   supportsAutoDomain() {
     return false;
   }
+
+  canReadFromGeoJson(): boolean {
+    return false;
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts b/x-pack/plugins/maps/public/classes/fields/top_term_percentage_field.ts
@@ -79,4 +79,8 @@ export class TopTermPercentageField implements IESAggField {
   canValueBeFormatted(): boolean {
     return false;
   }
+
+  canReadFromGeoJson(): boolean {
+    return true;
+  }
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.js
@@ -8,7 +8,7 @@ import { DynamicStyleProperty } from './dynamic_style_property';
 import { makeMbClampedNumberExpression, dynamicRound } from '../style_util';
 import { getOrdinalMbColorRampStops, getColorPalette } from '../../color_palettes';
 import React from 'react';
-import { COLOR_MAP_TYPE, MB_LOOKUP_FUNCTION } from '../../../../../common/constants';
+import { COLOR_MAP_TYPE } from '../../../../../common/constants';
 import {
   isCategoricalStopsInvalid,
   getOtherCategoryLabel,
@@ -91,10 +91,6 @@ export class DynamicColorProperty extends DynamicStyleProperty {
     return colors ? colors.length : 0;
   }
 
-  supportsMbFeatureState() {
-    return true;
-  }
-
   _getMbColor() {
     if (!this._field || !this._field.getName()) {
       return null;
@@ -120,7 +116,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
       const lessThanFirstStopValue = firstStopValue - 1;
       return [
         'step',
-        ['coalesce', ['feature-state', targetName], lessThanFirstStopValue],
+        ['coalesce', [this.getMbLookupFunction(), targetName], lessThanFirstStopValue],
         RGBA_0000, // MB will assign the base value to any features that is below the first stop value
         ...colorStops,
       ];
@@ -146,7 +142,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
         makeMbClampedNumberExpression({
           minValue: rangeFieldMeta.min,
           maxValue: rangeFieldMeta.max,
-          lookupFunction: MB_LOOKUP_FUNCTION.FEATURE_STATE,
+          lookupFunction: this.getMbLookupFunction(),
           fallback: lessThanFirstStopValue,
           fieldName: targetName,
         }),

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.test.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_color_property.test.js
@@ -343,6 +343,15 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
     });
 
     describe('custom color ramp', () => {
+      const dynamicStyleOptions = {
+        type: COLOR_MAP_TYPE.ORDINAL,
+        useCustomColorRamp: true,
+        customColorRamp: [
+          { stop: 10, color: '#f7faff' },
+          { stop: 100, color: '#072f6b' },
+        ],
+      };
+
       test('should return null when customColorRamp is not provided', async () => {
         const dynamicStyleOptions = {
           type: COLOR_MAP_TYPE.ORDINAL,
@@ -362,15 +371,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
         expect(colorProperty._getMbColor()).toBeNull();
       });
 
-      test('should return mapbox expression for custom color ramp', async () => {
-        const dynamicStyleOptions = {
-          type: COLOR_MAP_TYPE.ORDINAL,
-          useCustomColorRamp: true,
-          customColorRamp: [
-            { stop: 10, color: '#f7faff' },
-            { stop: 100, color: '#072f6b' },
-          ],
-        };
+      test('should use `feature-state` by default', async () => {
         const colorProperty = makeProperty(dynamicStyleOptions);
         expect(colorProperty._getMbColor()).toEqual([
           'step',
@@ -382,6 +383,23 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
           '#072f6b',
         ]);
       });
+
+      test('should use `get` when source cannot return raw geojson', async () => {
+        const field = Object.create(mockField);
+        field.canReadFromGeoJson = function () {
+          return false;
+        };
+        const colorProperty = makeProperty(dynamicStyleOptions, undefined, field);
+        expect(colorProperty._getMbColor()).toEqual([
+          'step',
+          ['coalesce', ['get', 'foobar'], 9],
+          'rgba(0,0,0,0)',
+          10,
+          '#f7faff',
+          100,
+          '#072f6b',
+        ]);
+      });
     });
   });
 

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js
@@ -33,7 +33,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
       return false;
     }
 
-    return true;
+    return super.supportsMbFeatureState();
   }
 
   syncHaloWidthWithMb(mbLayerId, mbMap) {
@@ -109,17 +109,13 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
   }
 
   _getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) {
-    const lookup = this.supportsMbFeatureState()
-      ? MB_LOOKUP_FUNCTION.FEATURE_STATE
-      : MB_LOOKUP_FUNCTION.GET;
-
     const stops =
       minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize];
     return [
       'interpolate',
       ['linear'],
       makeMbClampedNumberExpression({
-        lookupFunction: lookup,
+        lookupFunction: this.getMbLookupFunction(),
         maxValue,
         minValue,
         fieldName: targetName,

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.tsx
@@ -11,18 +11,19 @@ import { Feature } from 'geojson';
 import { AbstractStyleProperty, IStyleProperty } from './style_property';
 import { DEFAULT_SIGMA } from '../vector_style_defaults';
 import {
-  STYLE_TYPE,
-  SOURCE_META_DATA_REQUEST_ID,
   FIELD_ORIGIN,
+  MB_LOOKUP_FUNCTION,
+  SOURCE_META_DATA_REQUEST_ID,
+  STYLE_TYPE,
   VECTOR_STYLES,
 } from '../../../../../common/constants';
 import { OrdinalFieldMetaPopover } from '../components/field_meta/ordinal_field_meta_popover';
 import { CategoricalFieldMetaPopover } from '../components/field_meta/categorical_field_meta_popover';
 import {
   CategoryFieldMeta,
   FieldMetaOptions,
-  StyleMetaData,
   RangeFieldMeta,
+  StyleMetaData,
 } from '../../../../../common/descriptor_types';
 import { IField } from '../../../fields/field';
 import { IVectorLayer } from '../../../layers/vector_layer/vector_layer';
@@ -41,6 +42,7 @@ export interface IDynamicStyleProperty<T> extends IStyleProperty<T> {
   supportsFieldMeta(): boolean;
   getFieldMetaRequest(): Promise<unknown>;
   supportsMbFeatureState(): boolean;
+  getMbLookupFunction(): MB_LOOKUP_FUNCTION;
   pluckOrdinalStyleMetaFromFeatures(features: Feature[]): RangeFieldMeta | null;
   pluckCategoricalStyleMetaFromFeatures(features: Feature[]): CategoryFieldMeta | null;
   getValueSuggestions(query: string): Promise<string[]>;
@@ -193,7 +195,13 @@ export class DynamicStyleProperty<T> extends AbstractStyleProperty<T>
   }
 
   supportsMbFeatureState() {
-    return true;
+    return !!this._field && this._field.canReadFromGeoJson();
+  }
+
+  getMbLookupFunction(): MB_LOOKUP_FUNCTION {
+    return this.supportsMbFeatureState()
+      ? MB_LOOKUP_FUNCTION.FEATURE_STATE
+      : MB_LOOKUP_FUNCTION.GET;
   }
 
   getFieldMetaOptions() {