Skip to content

Commit

Permalink
[Maps] fix unable to edit cluster vector styles styled by count when …
Browse files Browse the repository at this point in the history
…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 <[email protected]>
  • Loading branch information
nreese and kibanamachine authored Oct 27, 2020
1 parent ee7f16e commit 0592938
Show file tree
Hide file tree
Showing 6 changed files with 182 additions and 75 deletions.
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/actions/layer_actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ export function clearMissingStyleProperties(layerId: string) {
const {
hasChanges,
nextStyleDescriptor,
} = (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
} = await (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
nextFields,
getMapColors(getState())
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,16 @@ import { i18n } from '@kbn/i18n';

import { EuiSpacer, EuiButtonGroup, EuiFormRow, EuiSwitch } from '@elastic/eui';
import {
CATEGORICAL_DATA_TYPES,
ORDINAL_DATA_TYPES,
LABEL_BORDER_SIZES,
VECTOR_STYLES,
STYLE_TYPE,
VECTOR_SHAPE_TYPE,
} from '../../../../../common/constants';
import { createStyleFieldsHelper } from '../style_fields_helper';

export class VectorStyleEditor extends Component {
state = {
dateFields: [],
numberFields: [],
fields: [],
ordinalAndCategoricalFields: [],
styleFields: [],
defaultDynamicProperties: getDefaultDynamicProperties(),
defaultStaticProperties: getDefaultStaticProperties(),
supportedFeatures: undefined,
Expand All @@ -56,33 +52,17 @@ export class VectorStyleEditor extends Component {
}

async _loadFields() {
const getFieldMeta = async (field) => {
return {
label: await field.getLabel(),
name: field.getName(),
origin: field.getOrigin(),
type: await field.getDataType(),
supportsAutoDomain: field.supportsAutoDomain(),
};
};

//These are all fields (only used for text labeling)
const fields = await this.props.layer.getStyleEditorFields();
const fieldPromises = fields.map(getFieldMeta);
const fieldsArrayAll = await Promise.all(fieldPromises);
if (!this._isMounted || _.isEqual(fieldsArrayAll, this.state.fields)) {
const styleFieldsHelper = await createStyleFieldsHelper(
await this.props.layer.getStyleEditorFields()
);
const styleFields = styleFieldsHelper.getStyleFields();
if (!this._isMounted || _.isEqual(styleFields, this.state.styleFields)) {
return;
}

this.setState({
fields: fieldsArrayAll,
ordinalAndCategoricalFields: fieldsArrayAll.filter((field) => {
return (
CATEGORICAL_DATA_TYPES.includes(field.type) || ORDINAL_DATA_TYPES.includes(field.type)
);
}),
dateFields: fieldsArrayAll.filter((field) => field.type === 'date'),
numberFields: fieldsArrayAll.filter((field) => field.type === 'number'),
styleFields,
styleFieldsHelper,
});
}

Expand All @@ -109,12 +89,6 @@ export class VectorStyleEditor extends Component {
}
}

_getOrdinalFields() {
return [...this.state.dateFields, ...this.state.numberFields].filter((field) => {
return field.supportsAutoDomain;
});
}

_handleSelectedFeatureChange = (selectedFeature) => {
this.setState({ selectedFeature });
};
Expand Down Expand Up @@ -165,7 +139,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.FILL_COLOR]}
fields={this.state.ordinalAndCategoricalFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.FILL_COLOR)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.FILL_COLOR].options
}
Expand All @@ -186,7 +160,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_COLOR]}
fields={this.state.ordinalAndCategoricalFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LINE_COLOR)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LINE_COLOR].options
}
Expand All @@ -205,7 +179,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LINE_WIDTH]}
fields={this._getOrdinalFields()}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LINE_WIDTH)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LINE_WIDTH].options
}
Expand All @@ -225,7 +199,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_TEXT]}
fields={this.state.fields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_TEXT)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_TEXT].options
}
Expand All @@ -242,7 +216,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_COLOR]}
fields={this.state.ordinalAndCategoricalFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_COLOR)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_COLOR].options
}
Expand All @@ -258,7 +232,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_SIZE]}
fields={this._getOrdinalFields()}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_SIZE)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_SIZE].options
}
Expand All @@ -275,7 +249,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.LABEL_BORDER_COLOR]}
fields={this.state.ordinalAndCategoricalFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.LABEL_BORDER_COLOR)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
}
Expand Down Expand Up @@ -309,7 +283,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_ORIENTATION]}
fields={this.state.numberFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON_ORIENTATION)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_ORIENTATION].options
}
Expand All @@ -328,7 +302,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON]}
fields={this.state.ordinalAndCategoricalFields}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
}
Expand Down Expand Up @@ -368,7 +342,7 @@ export class VectorStyleEditor extends Component {
onStaticStyleChange={this._onStaticStyleChange}
onDynamicStyleChange={this._onDynamicStyleChange}
styleProperty={this.props.styleProperties[VECTOR_STYLES.ICON_SIZE]}
fields={this._getOrdinalFields()}
fields={this.state.styleFieldsHelper.getFieldsForStyle(VECTOR_STYLES.ICON_SIZE)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
}
Expand Down Expand Up @@ -409,9 +383,9 @@ export class VectorStyleEditor extends Component {
}

_renderProperties() {
const { supportedFeatures, selectedFeature } = this.state;
const { supportedFeatures, selectedFeature, styleFieldsHelper } = this.state;

if (!supportedFeatures) {
if (!supportedFeatures || !styleFieldsHelper) {
return null;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,38 @@ import {
import { AbstractField, IField } from '../../../../fields/field';
import { IStyle } from '../../../style';

class MockField extends AbstractField {
export class MockField extends AbstractField {
private readonly _dataType: string;
private readonly _supportsAutoDomain: boolean;

constructor({
fieldName,
origin = FIELD_ORIGIN.SOURCE,
dataType = 'string',
supportsAutoDomain = true,
}: {
fieldName: string;
origin?: FIELD_ORIGIN;
dataType?: string;
supportsAutoDomain?: boolean;
}) {
super({ fieldName, origin });
this._dataType = dataType;
this._supportsAutoDomain = supportsAutoDomain;
}

async getLabel(): Promise<string> {
return this.getName() + '_label';
}

async getDataType(): Promise<string> {
return this._dataType;
}

supportsAutoDomain(): boolean {
return this._supportsAutoDomain;
}

supportsFieldMeta(): boolean {
return true;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* 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 {
CATEGORICAL_DATA_TYPES,
FIELD_ORIGIN,
ORDINAL_DATA_TYPES,
VECTOR_STYLES,
} from '../../../../common/constants';
import { IField } from '../../fields/field';

export interface StyleField {
label: string;
name: string;
origin: FIELD_ORIGIN;
type: string;
supportsAutoDomain: boolean;
}

export async function createStyleFieldsHelper(fields: IField[]): Promise<StyleFieldsHelper> {
const promises: Array<Promise<StyleField>> = fields.map(async (field: IField) => {
return {
label: await field.getLabel(),
name: field.getName(),
origin: field.getOrigin(),
type: await field.getDataType(),
supportsAutoDomain: field.supportsAutoDomain(),
};
});
const styleFields = await Promise.all(promises);
return new StyleFieldsHelper(styleFields);
}

class StyleFieldsHelper {
private readonly _styleFields: StyleField[];
private readonly _ordinalAndCategoricalFields: StyleField[];
private readonly _numberFields: StyleField[];
private readonly _ordinalFields: StyleField[];

constructor(styleFields: StyleField[]) {
const ordinalAndCategoricalFields: StyleField[] = [];
const numberFields: StyleField[] = [];
const ordinalFields: StyleField[] = [];

styleFields.forEach((styleField: StyleField) => {
if (
CATEGORICAL_DATA_TYPES.includes(styleField.type) ||
ORDINAL_DATA_TYPES.includes(styleField.type)
) {
ordinalAndCategoricalFields.push(styleField);
}

if (styleField.type === 'date' || styleField.type === 'number') {
if (styleField.type === 'number') {
numberFields.push(styleField);
}
if (styleField.supportsAutoDomain) {
ordinalFields.push(styleField);
}
}
});

this._styleFields = styleFields;
this._ordinalAndCategoricalFields = ordinalAndCategoricalFields;
this._numberFields = numberFields;
this._ordinalFields = ordinalFields;
}

getFieldsForStyle(styleName: VECTOR_STYLES): StyleField[] {
switch (styleName) {
case VECTOR_STYLES.ICON_ORIENTATION:
return this._numberFields;
case VECTOR_STYLES.FILL_COLOR:
case VECTOR_STYLES.LINE_COLOR:
case VECTOR_STYLES.LABEL_COLOR:
case VECTOR_STYLES.LABEL_BORDER_COLOR:
case VECTOR_STYLES.ICON:
return this._ordinalAndCategoricalFields;
case VECTOR_STYLES.LINE_WIDTH:
case VECTOR_STYLES.LABEL_SIZE:
case VECTOR_STYLES.ICON_SIZE:
return this._ordinalFields;
case VECTOR_STYLES.LABEL_TEXT:
return this._styleFields;
default:
return [];
}
}

getStyleFields(): StyleField[] {
return this._styleFields;
}
}
Loading

0 comments on commit 0592938

Please sign in to comment.