[Maps] Fix mb-style interpolate style rule (#68413)

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

@@ -25,6 +25,21 @@ class MockField extends AbstractField {
   }
 }
 
+export class MockMbMap {
+  _paintPropertyCalls: unknown[];
+
+  constructor() {
+    this._paintPropertyCalls = [];
+  }
+  setPaintProperty(...args: unknown[]) {
+    this._paintPropertyCalls.push([...args]);
+  }
+
+  getPaintPropertyCalls(): unknown[] {
+    return this._paintPropertyCalls;
+  }
+}
+
 export const mockField: IField = new MockField({
   fieldName: 'foobar',
   origin: FIELD_ORIGIN.SOURCE,

x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_size_property.js

@@ -110,6 +110,9 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
 
   _getMbDataDrivenSize({ targetName, minSize, maxSize, minValue, maxValue }) {
     const lookup = this.supportsMbFeatureState() ? 'feature-state' : 'get';
+
+    const stops =
+      minValue === maxValue ? [maxValue, maxSize] : [minValue, minSize, maxValue, maxSize];
     return [
       'interpolate',
       ['linear'],
@@ -120,10 +123,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
         fieldName: targetName,
         fallback: 0,
       }),
-      minValue,
-      minSize,
-      maxValue,
-      maxSize,
+      ...stops,
     ];
   }
 

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

@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { IVectorStyle } from '../vector_style';
-
 jest.mock('ui/new_platform');
 jest.mock('../components/vector_style_editor', () => ({
   VectorStyleEditor: () => {
@@ -18,68 +16,22 @@ import { shallow } from 'enzyme';
 
 // @ts-ignore
 import { DynamicSizeProperty } from './dynamic_size_property';
-import { StyleMeta } from '../style_meta';
-import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
-import { DataRequest } from '../../../util/data_request';
-import { IVectorLayer } from '../../../layers/vector_layer/vector_layer';
+import { VECTOR_STYLES } from '../../../../../common/constants';
 import { IField } from '../../../fields/field';
+import { MockMbMap } from './__tests__/test_util';
 
-// @ts-ignore
-const mockField: IField = {
-  async getLabel() {
-    return 'foobar_label';
-  },
-  getName() {
-    return 'foobar';
-  },
-  getRootName() {
-    return 'foobar';
-  },
-  getOrigin() {
-    return FIELD_ORIGIN.SOURCE;
-  },
-  supportsFieldMeta() {
-    return true;
-  },
-  canValueBeFormatted() {
-    return true;
-  },
-  async getDataType() {
-    return 'number';
-  },
-};
+import { mockField, MockLayer, MockStyle } from './__tests__/test_util';
 
-// @ts-ignore
-const mockLayer: IVectorLayer = {
-  getDataRequest(): DataRequest | undefined {
-    return undefined;
-  },
-  getStyle(): IVectorStyle {
-    // @ts-ignore
-    return {
-      getStyleMeta(): StyleMeta {
-        return new StyleMeta({
-          geometryTypes: {
-            isPointsOnly: true,
-            isLinesOnly: false,
-            isPolygonsOnly: false,
-          },
-          fieldMeta: {
-            foobar: {
-              range: { min: 0, max: 100, delta: 100 },
-              categories: { categories: [] },
-            },
-          },
-        });
-      },
-    };
-  },
-};
-
-const makeProperty: DynamicSizeProperty = (options: object) => {
-  return new DynamicSizeProperty(options, VECTOR_STYLES.ICON_SIZE, mockField, mockLayer, () => {
-    return (x: string) => x + '_format';
-  });
+const makeProperty = (options: object, mockStyle: MockStyle, field: IField = mockField) => {
+  return new DynamicSizeProperty(
+    options,
+    VECTOR_STYLES.ICON_SIZE,
+    field,
+    new MockLayer(mockStyle),
+    () => {
+      return (x: string) => x + '_format';
+    }
+  );
 };
 
 const defaultLegendParams = {
@@ -89,7 +41,7 @@ const defaultLegendParams = {
 
 describe('renderLegendDetailRow', () => {
   test('Should render as range', async () => {
-    const sizeProp = makeProperty();
+    const sizeProp = makeProperty({}, new MockStyle({ min: 0, max: 100 }));
     const legendRow = sizeProp.renderLegendDetailRow(defaultLegendParams);
     const component = shallow(legendRow);
 
@@ -100,3 +52,70 @@ describe('renderLegendDetailRow', () => {
     expect(component).toMatchSnapshot();
   });
 });
+
+describe('syncSize', () => {
+  test('Should sync with circle-radius prop', async () => {
+    const sizeProp = makeProperty({ minSize: 8, maxSize: 32 }, new MockStyle({ min: 0, max: 100 }));
+    const mockMbMap = new MockMbMap();
+
+    sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap);
+
+    expect(mockMbMap.getPaintPropertyCalls()).toEqual([
+      [
+        'foobar',
+        'circle-radius',
+        [
+          'interpolate',
+          ['linear'],
+          [
+            'coalesce',
+            [
+              'case',
+              ['==', ['feature-state', 'foobar'], null],
+              -1,
+              ['max', ['min', ['to-number', ['feature-state', 'foobar']], 100], 0],
+            ],
+            0,
+          ],
+          0,
+          8,
+          100,
+          32,
+        ],
+      ],
+    ]);
+  });
+
+  test('Should truncate interpolate expression to max when no delta', async () => {
+    const sizeProp = makeProperty(
+      { minSize: 8, maxSize: 32 },
+      new MockStyle({ min: 100, max: 100 })
+    );
+    const mockMbMap = new MockMbMap();
+
+    sizeProp.syncCircleRadiusWithMb('foobar', mockMbMap);
+
+    expect(mockMbMap.getPaintPropertyCalls()).toEqual([
+      [
+        'foobar',
+        'circle-radius',
+        [
+          'interpolate',
+          ['linear'],
+          [
+            'coalesce',
+            [
+              'case',
+              ['==', ['feature-state', 'foobar'], null],
+              99,
+              ['max', ['min', ['to-number', ['feature-state', 'foobar']], 100], 100],
+            ],
+            0,
+          ],
+          100,
+          32,
+        ],
+      ],
+    ]);
+  });
+});