Skip to content

Commit 0592938

Browse files
nreesekibanamachine
nreese
and
kibanamachine
authored
[Maps] fix unable to edit cluster vector styles styled by count when switching to super fine grid resolution (#81525)
* [Maps] fix unable to edit cluster vector styles styled by count when switching to super fine grid resolution * fix typo * tslint fixes * review feedback * more renames Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
1 parent ee7f16e commit 0592938

File tree

6 files changed

+182
-75
lines changed

6 files changed

+182
-75
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,7 @@ export function clearMissingStyleProperties(layerId: string) {
441441
const {
442442
hasChanges,
443443
nextStyleDescriptor,
444-
} = (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
444+
} = await (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
445445
nextFields,
446446
getMapColors(getState())
447447
);

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

Lines changed: 21 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,16 @@ import { i18n } from '@kbn/i18n';
2020

2121
import { EuiSpacer, EuiButtonGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
2222
import {
23-
CATEGORICAL_DATA_TYPES,
24-
ORDINAL_DATA_TYPES,
2523
LABEL_BORDER_SIZES,
2624
VECTOR_STYLES,
2725
STYLE_TYPE,
2826
VECTOR_SHAPE_TYPE,
2927
} from '../../../../../common/constants';
28+
import { createStyleFieldsHelper } from '../style_fields_helper';
3029

3130
export class VectorStyleEditor extends Component {
3231
state = {
33-
dateFields: [],
34-
numberFields: [],
35-
fields: [],
36-
ordinalAndCategoricalFields: [],
32+
styleFields: [],
3733
defaultDynamicProperties: getDefaultDynamicProperties(),
3834
defaultStaticProperties: getDefaultStaticProperties(),
3935
supportedFeatures: undefined,
@@ -56,33 +52,17 @@ export class VectorStyleEditor extends Component {
5652
}
5753

5854
async _loadFields() {
59-
const getFieldMeta = async (field) => {
60-
return {
61-
label: await field.getLabel(),
62-
name: field.getName(),
63-
origin: field.getOrigin(),
64-
type: await field.getDataType(),
65-
supportsAutoDomain: field.supportsAutoDomain(),
66-
};
67-
};
68-
69-
//These are all fields (only used for text labeling)
70-
const fields = await this.props.layer.getStyleEditorFields();
71-
const fieldPromises = fields.map(getFieldMeta);
72-
const fieldsArrayAll = await Promise.all(fieldPromises);
73-
if (!this._isMounted || _.isEqual(fieldsArrayAll, this.state.fields)) {
55+
const styleFieldsHelper = await createStyleFieldsHelper(
56+
await this.props.layer.getStyleEditorFields()
57+
);
58+
const styleFields = styleFieldsHelper.getStyleFields();
59+
if (!this._isMounted || _.isEqual(styleFields, this.state.styleFields)) {
7460
return;
7561
}
7662

7763
this.setState({
78-
fields: fieldsArrayAll,
79-
ordinalAndCategoricalFields: fieldsArrayAll.filter((field) => {
80-
return (
81-
CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type)
82-
);
83-
}),
84-
dateFields: fieldsArrayAll.filter((field) => field.type === 'date'),
85-
numberFields: fieldsArrayAll.filter((field) => field.type === 'number'),
64+
styleFields,
65+
styleFieldsHelper,
8666
});
8767
}
8868

@@ -109,12 +89,6 @@ export class VectorStyleEditor extends Component {
10989
}
11090
}
11191

112-
_getOrdinalFields() {
113-
return [...this.state.dateFields, ...this.state.numberFields].filter((field) => {
114-
return field.supportsAutoDomain;
115-
});
116-
}
117-
11892
_handleSelectedFeatureChange = (selectedFeature) => {
11993
this.setState({ selectedFeature });
12094
};
@@ -165,7 +139,7 @@ export class VectorStyleEditor extends Component {
165139
onStaticStyleChange={this._onStaticStyleChange}
166140
onDynamicStyleChange={this._onDynamicStyleChange}
167141
styleProperty={this.props.styleProperties[VECTOR_STYLES.FILL_COLOR]}
168-
fields={this.state.ordinalAndCategoricalFields}
142+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.FILL_COLOR)}
169143
defaultStaticStyleOptions={
170144
this.state.defaultStaticProperties[VECTOR_STYLES.FILL_COLOR].options
171145
}
@@ -186,7 +160,7 @@ export class VectorStyleEditor extends Component {
186160
onStaticStyleChange={this._onStaticStyleChange}
187161
onDynamicStyleChange={this._onDynamicStyleChange}
188162
styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_COLOR]}
189-
fields={this.state.ordinalAndCategoricalFields}
163+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LINE_COLOR)}
190164
defaultStaticStyleOptions={
191165
this.state.defaultStaticProperties[VECTOR_STYLES.LINE_COLOR].options
192166
}
@@ -205,7 +179,7 @@ export class VectorStyleEditor extends Component {
205179
onStaticStyleChange={this._onStaticStyleChange}
206180
onDynamicStyleChange={this._onDynamicStyleChange}
207181
styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_WIDTH]}
208-
fields={this._getOrdinalFields()}
182+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LINE_WIDTH)}
209183
defaultStaticStyleOptions={
210184
this.state.defaultStaticProperties[VECTOR_STYLES.LINE_WIDTH].options
211185
}
@@ -225,7 +199,7 @@ export class VectorStyleEditor extends Component {
225199
onStaticStyleChange={this._onStaticStyleChange}
226200
onDynamicStyleChange={this._onDynamicStyleChange}
227201
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT]}
228-
fields={this.state.fields}
202+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_TEXT)}
229203
defaultStaticStyleOptions={
230204
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_TEXT].options
231205
}
@@ -242,7 +216,7 @@ export class VectorStyleEditor extends Component {
242216
onStaticStyleChange={this._onStaticStyleChange}
243217
onDynamicStyleChange={this._onDynamicStyleChange}
244218
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_COLOR]}
245-
fields={this.state.ordinalAndCategoricalFields}
219+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_COLOR)}
246220
defaultStaticStyleOptions={
247221
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_COLOR].options
248222
}
@@ -258,7 +232,7 @@ export class VectorStyleEditor extends Component {
258232
onStaticStyleChange={this._onStaticStyleChange}
259233
onDynamicStyleChange={this._onDynamicStyleChange}
260234
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_SIZE]}
261-
fields={this._getOrdinalFields()}
235+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_SIZE)}
262236
defaultStaticStyleOptions={
263237
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_SIZE].options
264238
}
@@ -275,7 +249,7 @@ export class VectorStyleEditor extends Component {
275249
onStaticStyleChange={this._onStaticStyleChange}
276250
onDynamicStyleChange={this._onDynamicStyleChange}
277251
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
278-
fields={this.state.ordinalAndCategoricalFields}
252+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_BORDER_COLOR)}
279253
defaultStaticStyleOptions={
280254
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
281255
}
@@ -309,7 +283,7 @@ export class VectorStyleEditor extends Component {
309283
onStaticStyleChange={this._onStaticStyleChange}
310284
onDynamicStyleChange={this._onDynamicStyleChange}
311285
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_ORIENTATION]}
312-
fields={this.state.numberFields}
286+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON_ORIENTATION)}
313287
defaultStaticStyleOptions={
314288
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_ORIENTATION].options
315289
}
@@ -328,7 +302,7 @@ export class VectorStyleEditor extends Component {
328302
onStaticStyleChange={this._onStaticStyleChange}
329303
onDynamicStyleChange={this._onDynamicStyleChange}
330304
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
331-
fields={this.state.ordinalAndCategoricalFields}
305+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON)}
332306
defaultStaticStyleOptions={
333307
this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
334308
}
@@ -368,7 +342,7 @@ export class VectorStyleEditor extends Component {
368342
onStaticStyleChange={this._onStaticStyleChange}
369343
onDynamicStyleChange={this._onDynamicStyleChange}
370344
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_SIZE]}
371-
fields={this._getOrdinalFields()}
345+
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON_SIZE)}
372346
defaultStaticStyleOptions={
373347
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
374348
}
@@ -409,9 +383,9 @@ export class VectorStyleEditor extends Component {
409383
}
410384

411385
_renderProperties() {
412-
const { supportedFeatures, selectedFeature } = this.state;
386+
const { supportedFeatures, selectedFeature, styleFieldsHelper } = this.state;
413387

414-
if (!supportedFeatures) {
388+
if (!supportedFeatures || !styleFieldsHelper) {
415389
return null;
416390
}
417391

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

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,38 @@ import {
1616
import { AbstractField, IField } from '../../../../fields/field';
1717
import { IStyle } from '../../../style';
1818

19-
class MockField extends AbstractField {
19+
export class MockField extends AbstractField {
20+
private readonly _dataType: string;
21+
private readonly _supportsAutoDomain: boolean;
22+
23+
constructor({
24+
fieldName,
25+
origin = FIELD_ORIGIN.SOURCE,
26+
dataType = 'string',
27+
supportsAutoDomain = true,
28+
}: {
29+
fieldName: string;
30+
origin?: FIELD_ORIGIN;
31+
dataType?: string;
32+
supportsAutoDomain?: boolean;
33+
}) {
34+
super({ fieldName, origin });
35+
this._dataType = dataType;
36+
this._supportsAutoDomain = supportsAutoDomain;
37+
}
38+
2039
async getLabel(): Promise<string> {
2140
return this.getName() + '_label';
2241
}
42+
43+
async getDataType(): Promise<string> {
44+
return this._dataType;
45+
}
46+
47+
supportsAutoDomain(): boolean {
48+
return this._supportsAutoDomain;
49+
}
50+
2351
supportsFieldMeta(): boolean {
2452
return true;
2553
}

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License;
4+
* you may not use this file except in compliance with the Elastic License.
5+
*/
6+
7+
import {
8+
CATEGORICAL_DATA_TYPES,
9+
FIELD_ORIGIN,
10+
ORDINAL_DATA_TYPES,
11+
VECTOR_STYLES,
12+
} from '../../../../common/constants';
13+
import { IField } from '../../fields/field';
14+
15+
export interface StyleField {
16+
label: string;
17+
name: string;
18+
origin: FIELD_ORIGIN;
19+
type: string;
20+
supportsAutoDomain: boolean;
21+
}
22+
23+
export async function createStyleFieldsHelper(fields: IField[]): Promise<StyleFieldsHelper> {
24+
const promises: Array<Promise<StyleField>> = fields.map(async (field: IField) => {
25+
return {
26+
label: await field.getLabel(),
27+
name: field.getName(),
28+
origin: field.getOrigin(),
29+
type: await field.getDataType(),
30+
supportsAutoDomain: field.supportsAutoDomain(),
31+
};
32+
});
33+
const styleFields = await Promise.all(promises);
34+
return new StyleFieldsHelper(styleFields);
35+
}
36+
37+
class StyleFieldsHelper {
38+
private readonly _styleFields: StyleField[];
39+
private readonly _ordinalAndCategoricalFields: StyleField[];
40+
private readonly _numberFields: StyleField[];
41+
private readonly _ordinalFields: StyleField[];
42+
43+
constructor(styleFields: StyleField[]) {
44+
const ordinalAndCategoricalFields: StyleField[] = [];
45+
const numberFields: StyleField[] = [];
46+
const ordinalFields: StyleField[] = [];
47+
48+
styleFields.forEach((styleField: StyleField) => {
49+
if (
50+
CATEGORICAL_DATA_TYPES.includes(styleField.type) ||
51+
ORDINAL_DATA_TYPES.includes(styleField.type)
52+
) {
53+
ordinalAndCategoricalFields.push(styleField);
54+
}
55+
56+
if (styleField.type === 'date' || styleField.type === 'number') {
57+
if (styleField.type === 'number') {
58+
numberFields.push(styleField);
59+
}
60+
if (styleField.supportsAutoDomain) {
61+
ordinalFields.push(styleField);
62+
}
63+
}
64+
});
65+
66+
this._styleFields = styleFields;
67+
this._ordinalAndCategoricalFields = ordinalAndCategoricalFields;
68+
this._numberFields = numberFields;
69+
this._ordinalFields = ordinalFields;
70+
}
71+
72+
getFieldsForStyle(styleName: VECTOR_STYLES): StyleField[] {
73+
switch (styleName) {
74+
case VECTOR_STYLES.ICON_ORIENTATION:
75+
return this._numberFields;
76+
case VECTOR_STYLES.FILL_COLOR:
77+
case VECTOR_STYLES.LINE_COLOR:
78+
case VECTOR_STYLES.LABEL_COLOR:
79+
case VECTOR_STYLES.LABEL_BORDER_COLOR:
80+
case VECTOR_STYLES.ICON:
81+
return this._ordinalAndCategoricalFields;
82+
case VECTOR_STYLES.LINE_WIDTH:
83+
case VECTOR_STYLES.LABEL_SIZE:
84+
case VECTOR_STYLES.ICON_SIZE:
85+
return this._ordinalFields;
86+
case VECTOR_STYLES.LABEL_TEXT:
87+
return this._styleFields;
88+
default:
89+
return [];
90+
}
91+
}
92+
93+
getStyleFields(): StyleField[] {
94+
return this._styleFields;
95+
}
96+
}

0 commit comments

Comments
 (0)