Skip to content

[Maps] fix unable to edit cluster vector styles styled by count when switching to super fine grid resolution #81525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 27, 2020
Merged

[Maps] fix unable to edit cluster vector styles styled by count when switching to super fine grid resolution #81525

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
61877da
[Maps] fix unable to edit cluster vector styles styled by count when …
nreese Oct 22, 2020
8a467ec
fix typo
nreese Oct 22, 2020
de6e07c
tslint fixes
nreese Oct 22, 2020
edc2c9f
Merge branch 'master' into issue_81348
kibanamachine Oct 26, 2020
bfd4618
review feedback
nreese Oct 26, 2020
6ba0edc
more renames
nreese Oct 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/actions/layer_actions.ts
View file
Open in desktop
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
72 changes: 25 additions & 47 deletions x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.js
View file
Open in desktop
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 { styleFieldsCustodianFactory } from '../style_fields_custodian';

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 styleFieldsCustodian = await styleFieldsCustodianFactory(
await this.props.layer.getStyleEditorFields()
);
const styleFields = styleFieldsCustodian.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,
styleFieldsCustodian,
});
}

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.styleFieldsCustodian.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.styleFieldsCustodian.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.styleFieldsCustodian.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.styleFieldsCustodian.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.styleFieldsCustodian.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.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.LABEL_SIZE)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_SIZE].options
}
Expand All @@ -275,7 +249,9 @@ 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.styleFieldsCustodian.getFieldsForStyle(
VECTOR_STYLES.LABEL_BORDER_COLOR
)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.LABEL_BORDER_COLOR].options
}
Expand Down Expand Up @@ -309,7 +285,9 @@ 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.styleFieldsCustodian.getFieldsForStyle(
VECTOR_STYLES.ICON_ORIENTATION
)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_ORIENTATION].options
}
Expand All @@ -328,7 +306,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.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.ICON)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON].options
}
Expand Down Expand Up @@ -368,7 +346,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.styleFieldsCustodian.getFieldsForStyle(VECTOR_STYLES.ICON_SIZE)}
defaultStaticStyleOptions={
this.state.defaultStaticProperties[VECTOR_STYLES.ICON_SIZE].options
}
Expand Down Expand Up @@ -409,9 +387,9 @@ export class VectorStyleEditor extends Component {
}

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

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

Expand Down
30 changes: 29 additions & 1 deletion x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts
View file
Open in desktop
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
96 changes: 96 additions & 0 deletions x-pack/plugins/maps/public/classes/styles/vector/style_fields_custodian.ts
View file
Open in desktop
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 styleFieldsCustodianFactory(fields: IField[]): Promise<StyleFieldsCustodian> {
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 StyleFieldsCustodian(styleFields);
}

class StyleFieldsCustodian {
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) {
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() {
return this._styleFields;
}
}
Loading