From 01347b4c47b97ad8aff43d362fec978bbbe5e596 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Wed, 13 May 2020 15:06:17 -0400
Subject: [PATCH] get icon number

---
 .../dynamic_icon_property.test.tsx.snap       |  78 ++++++++++++
 .../properties/dynamic_icon_property.js       |   5 +
 .../properties/dynamic_icon_property.test.tsx | 112 ++++++++++++++++++
 .../properties/dynamic_style_property.js      |   4 +-
 4 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
 create mode 100644 x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
new file mode 100644
index 0000000000000..057907353d68a
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__snapshots__/dynamic_icon_property.test.tsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render categorical legend with breaks 1`] = `
+<div>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiFlexGroup
+    direction="column"
+    gutterSize="none"
+  >
+    <Category
+      color="grey"
+      isLinesOnly={false}
+      isPointsOnly={true}
+      key="US"
+      label="US_format"
+      styleName="icon"
+      symbolId="circle"
+    />
+    <Category
+      color="grey"
+      isLinesOnly={false}
+      isPointsOnly={true}
+      key="CN"
+      label="CN_format"
+      styleName="icon"
+      symbolId="marker"
+    />
+    <Category
+      color="grey"
+      isLinesOnly={false}
+      isPointsOnly={true}
+      key="fallbackCategory"
+      label={
+        <EuiTextColor
+          color="secondary"
+        >
+          Other
+        </EuiTextColor>
+      }
+      styleName="icon"
+      symbolId="square"
+    />
+  </EuiFlexGroup>
+  <EuiFlexGroup
+    gutterSize="xs"
+    justifyContent="spaceAround"
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiToolTip
+        content="foobar_label"
+        delay="regular"
+        position="top"
+        title="Icon"
+      >
+        <EuiText
+          className="eui-textTruncate"
+          size="xs"
+          style={
+            Object {
+              "maxWidth": "180px",
+            }
+          }
+        >
+          <small>
+            <strong>
+              foobar_label
+            </strong>
+          </small>
+        </EuiText>
+      </EuiToolTip>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+`;
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js
index 05e2ad06842ce..27c4fca7d701d 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.js
@@ -29,6 +29,11 @@ export class DynamicIconProperty extends DynamicStyleProperty {
     return true;
   }
 
+  getNumberOfCategories() {
+    const palette = getIconPalette(this._options.iconPaletteId);
+    return palette ? palette.length : 0;
+  }
+
   syncIconWithMb(symbolLayerId, mbMap, iconPixelSize) {
     if (this._isIconDynamicConfigComplete()) {
       mbMap.setLayoutProperty(
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
new file mode 100644
index 0000000000000..0bbade1f1a9fd
--- /dev/null
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_icon_property.test.tsx
@@ -0,0 +1,112 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line max-classes-per-file
+import { shallow } from 'enzyme';
+
+jest.mock('ui/new_platform');
+jest.mock('../components/vector_style_editor', () => ({
+  VectorStyleEditor: () => {
+    return <div>mockVectorStyleEditor</div>;
+  },
+}));
+
+import { COLOR_MAP_TYPE, FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
+
+// @ts-ignore
+import { DynamicIconProperty } from './dynamic_icon_property';
+
+import React from 'react';
+import { StyleMeta } from '../style_meta';
+
+const mockField = {
+  async getLabel() {
+    return 'foobar_label';
+  },
+  getName() {
+    return 'foobar';
+  },
+  getRootName() {
+    return 'foobar';
+  },
+  getOrigin() {
+    return FIELD_ORIGIN.SOURCE;
+  },
+  supportsFieldMeta() {
+    return true;
+  },
+};
+
+class MockStyle {
+  getStyleMeta() {
+    return new StyleMeta({
+      geometryTypes: {
+        isPointsOnly: false,
+        isLinesOnly: false,
+        isPolygonsOnly: false,
+      },
+      fieldMeta: {
+        foobar: {
+          range: { min: 0, max: 100 },
+          categories: {
+            categories: [
+              {
+                key: 'US',
+                count: 10,
+              },
+              {
+                key: 'CN',
+                count: 8,
+              },
+            ],
+          },
+        },
+      },
+    });
+  }
+}
+
+class MockLayer {
+  getStyle() {
+    return new MockStyle();
+  }
+
+  getDataRequest() {
+    return null;
+  }
+}
+
+const makeProperty = (options, field = mockField) => {
+  return new DynamicIconProperty(options, VECTOR_STYLES.ICON, field, new MockLayer(), () => {
+    return x => x + '_format';
+  });
+};
+
+describe('DynamicIconProperty', () => {
+  it('should derive category number from palettes', async () => {
+    const filled = makeProperty({
+      iconPaletteId: 'filledShapes',
+    });
+    expect(filled.getNumberOfCategories()).toEqual(6);
+    const hollow = makeProperty({
+      iconPaletteId: 'hollowShapes',
+    });
+    expect(hollow.getNumberOfCategories()).toEqual(5);
+  });
+});
+
+test('Should render categorical legend with breaks', async () => {
+  const iconStyle = makeProperty({
+    iconPaletteId: 'filledShapes',
+  });
+
+  const legendRow = iconStyle.renderLegendDetailRow({ isPointsOnly: true, isLinesOnly: false });
+  const component = shallow(legendRow);
+  await new Promise(resolve => process.nextTick(resolve));
+  component.update();
+
+  expect(component).toMatchSnapshot();
+});
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.js
index 451a79dd3864a..413e93ae64571 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_style_property.js
@@ -73,6 +73,7 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
     const categoryFieldMetaFromLocalFeatures = styleMeta.getCategoryFieldMetaDescriptor(fieldName);
 
     if (!this.isFieldMetaEnabled()) {
+      console.log('not enabled');
       return categoryFieldMetaFromLocalFeatures;
     }
 
@@ -148,7 +149,8 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
     if (this.isOrdinal()) {
       return this._field.getOrdinalFieldMetaRequest();
     } else if (this.isCategorical()) {
-      return this._field.getCategoricalFieldMetaRequest(this.getNumberOfCategories());
+      const numberOfCategories = this.getNumberOfCategories();
+      return this._field.getCategoricalFieldMetaRequest(numberOfCategories);
     } else {
       return null;
     }