github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Maps] name space dynamic property style names to avoid collisions (#44676)

Browse source 
* [Maps] name space dynamic property style names to avoid collisions

* update expect for functional test

* another update to expected map styles
This commit is contained in:
Nathan Reese 2019-09-04 14:01:23 -06:00 • committed by GitHub
parent f99d59b109
commit a0272cad27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 82 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

17
x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js
View file

@ -49,12 +49,21 @@ export class InnerJoin {
}
joinPropertiesToFeature(feature, propertiesMap, rightMetricFields) {
// delete feature properties added by previous join
for (let j = 0; j < rightMetricFields.length; j++) {
const { propertyKey } = rightMetricFields[j];
delete feature.properties[propertyKey];
const stylePropertyName = VectorStyle.getComputedFieldName(propertyKey);
delete feature.properties[stylePropertyName];
const { propertyKey: metricPropertyKey } = rightMetricFields[j];
delete feature.properties[metricPropertyKey];
// delete all dynamic properties for metric field
const stylePropertyPrefix = VectorStyle.getComputedFieldNamePrefix(metricPropertyKey);
Object.keys(feature.properties).forEach(featurePropertyKey => {
if (featurePropertyKey.length >= stylePropertyPrefix.length &&
featurePropertyKey.substring(0, stylePropertyPrefix.length) === stylePropertyPrefix) {
delete feature.properties[featurePropertyKey];
}
});
}
const joinKey = feature.properties[this._descriptor.leftField];
const coercedKey = typeof joinKey === 'undefined' || joinKey === null ? null : joinKey.toString();
if (propertiesMap && coercedKey !== null && propertiesMap.has(coercedKey)) {

2
x-pack/legacy/plugins/maps/public/layers/joins/inner_join.test.js
View file

@ -58,7 +58,7 @@ describe('joinPropertiesToFeature', () => {
properties: {
iso2: 'CN',
[COUNT_PROPERTY_NAME]: 61,
[`__kbn__scaled(${COUNT_PROPERTY_NAME})`]: 1,
[`__kbn__dynamic__${COUNT_PROPERTY_NAME}__fillColor`]: 1,
}
};
const propertiesMap = new Map();

5
x-pack/legacy/plugins/maps/public/layers/sources/es_geo_grid_source/es_geo_grid_source.js
View file

@ -16,6 +16,7 @@ import { AggConfigs } from 'ui/vis/agg_configs';
import { tabifyAggResponse } from 'ui/agg_response/tabify';
import { convertToGeoJson } from './convert_to_geojson';
import { VectorStyle } from '../../styles/vector_style';
import { vectorStyles } from '../../styles/vector_style_defaults';
import { RENDER_AS } from './render_as';
import { CreateSourceEditor } from './create_source_editor';
import { UpdateSourceEditor } from './update_source_editor';
@ -261,7 +262,7 @@ export class ESGeoGridSource extends AbstractESSource {
...options
});
descriptor.style = VectorStyle.createDescriptor({
fillColor: {
[vectorStyles.FILL_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {
@ -272,7 +273,7 @@ export class ESGeoGridSource extends AbstractESSource {
color: 'Blues'
}
},
iconSize: {
[vectorStyles.ICON_SIZE]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {

5
x-pack/legacy/plugins/maps/public/layers/sources/es_pew_pew_source/es_pew_pew_source.js
View file

@ -13,6 +13,7 @@ import { VectorLayer } from '../../vector_layer';
import { CreateSourceEditor } from './create_source_editor';
import { UpdateSourceEditor } from './update_source_editor';
import { VectorStyle } from '../../styles/vector_style';
import { vectorStyles } from '../../styles/vector_style_defaults';
import { i18n } from '@kbn/i18n';
import { SOURCE_DATA_ID_ORIGIN, ES_PEW_PEW } from '../../../../common/constants';
import { getDataSourceLabel } from '../../../../common/i18n_getters';
@ -141,7 +142,7 @@ export class ESPewPewSource extends AbstractESSource {
createDefaultLayer(options) {
const styleDescriptor = VectorStyle.createDescriptor({
lineColor: {
[vectorStyles.LINE_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {
@ -152,7 +153,7 @@ export class ESPewPewSource extends AbstractESSource {
color: 'Blues'
}
},
lineWidth: {
[vectorStyles.LINE_WIDTH]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
field: {

10
x-pack/legacy/plugins/maps/public/layers/styles/components/vector/get_vector_style_label.js
View file

@ -6,21 +6,23 @@
import { i18n } from '@kbn/i18n';
import { vectorStyles } from '../../vector_style_defaults';
export function getVectorStyleLabel(styleName) {
switch (styleName) {
case 'fillColor':
case vectorStyles.FILL_COLOR:
return i18n.translate('xpack.maps.styles.vector.fillColorLabel', {
defaultMessage: 'Fill color'
});
case 'lineColor':
case vectorStyles.LINE_COLOR:
return i18n.translate('xpack.maps.styles.vector.borderColorLabel', {
defaultMessage: 'Border color'
});
case 'lineWidth':
case vectorStyles.LINE_WIDTH:
return i18n.translate('xpack.maps.styles.vector.borderWidthLabel', {
defaultMessage: 'Border width'
});
case 'iconSize':
case vectorStyles.ICON_SIZE:
return i18n.translate('xpack.maps.styles.vector.symbolSizeLabel', {
defaultMessage: 'Symbol size'
});

13
x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
View file

@ -14,7 +14,8 @@ import { VectorStyleSymbolEditor } from './vector_style_symbol_editor';
import { OrientationEditor } from './orientation/orientation_editor';
import {
getDefaultDynamicProperties,
getDefaultStaticProperties
getDefaultStaticProperties,
vectorStyles
} from '../../vector_style_defaults';
import {
DEFAULT_FILL_COLORS,
@ -97,7 +98,7 @@ export class VectorStyleEditor extends Component {
_renderFillColor() {
return (
<VectorStyleColorEditor
styleProperty="fillColor"
styleProperty={vectorStyles.FILL_COLOR}
swatches={DEFAULT_FILL_COLORS}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.fillColor}
@ -111,7 +112,7 @@ export class VectorStyleEditor extends Component {
_renderLineColor() {
return (
<VectorStyleColorEditor
styleProperty="lineColor"
styleProperty={vectorStyles.LINE_COLOR}
swatches={DEFAULT_LINE_COLORS}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.lineColor}
@ -125,7 +126,7 @@ export class VectorStyleEditor extends Component {
_renderLineWidth() {
return (
<VectorStyleSizeEditor
styleProperty="lineWidth"
styleProperty={vectorStyles.LINE_WIDTH}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.lineWidth}
ordinalFields={this.state.ordinalFields}
@ -138,7 +139,7 @@ export class VectorStyleEditor extends Component {
_renderSymbolSize() {
return (
<VectorStyleSizeEditor
styleProperty="iconSize"
styleProperty={vectorStyles.ICON_SIZE}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.iconSize}
ordinalFields={this.state.ordinalFields}
@ -154,7 +155,7 @@ export class VectorStyleEditor extends Component {
iconOrientation = (
<Fragment>
<OrientationEditor
styleProperty="iconOrientation"
styleProperty={vectorStyles.ICON_ORIENTATION}
handlePropertyChange={this.props.handlePropertyChange}
styleDescriptor={this.props.styleProperties.iconOrientation}
ordinalFields={this.state.ordinalFields}

53
x-pack/legacy/plugins/maps/public/layers/styles/vector_style.js
View file

@ -9,7 +9,7 @@ import React from 'react';
import { i18n } from '@kbn/i18n';
import { getColorRampStops } from './color_utils';
import { VectorStyleEditor } from './components/vector/vector_style_editor';
import { getDefaultProperties } from './vector_style_defaults';
import { getDefaultProperties, vectorStyles } from './vector_style_defaults';
import { AbstractStyle } from './abstract_style';
import { SOURCE_DATA_ID_ORIGIN, GEO_JSON_TYPE } from '../../../common/constants';
import { VectorIcon } from './components/vector/legend/vector_icon';
@ -28,8 +28,12 @@ export class VectorStyle extends AbstractStyle {
static type = 'VECTOR';
static STYLE_TYPE = { 'DYNAMIC': 'DYNAMIC', 'STATIC': 'STATIC' };
static getComputedFieldName(fieldName) {
return `__kbn__scaled(${fieldName})`;
static getComputedFieldName(styleName, fieldName) {
return `${VectorStyle.getComputedFieldNamePrefix(fieldName)}__${styleName}`;
}
static getComputedFieldNamePrefix(fieldName) {
return `__kbn__dynamic__${fieldName}`;
}
constructor(descriptor = {}, source) {
@ -335,7 +339,7 @@ export class VectorStyle extends AbstractStyle {
} else if (styleName === 'iconOrientation') {
supportsFeatureState = false;
isScaled = false;
} else if ((styleName === 'fillColor' || styleName === 'lineColor')
} else if ((styleName === vectorStyles.FILL_COLOR || styleName === vectorStyles.LINE_COLOR)
&& options.useCustomColorRamp) {
supportsFeatureState = true;
isScaled = false;
@ -349,7 +353,7 @@ export class VectorStyle extends AbstractStyle {
isScaled,
name,
range: this._getFieldRange(name),
computedName: VectorStyle.getComputedFieldName(name),
computedName: VectorStyle.getComputedFieldName(styleName, name),
};
});
}
@ -425,9 +429,7 @@ export class VectorStyle extends AbstractStyle {
return hasGeoJsonProperties;
}
_getMBDataDrivenColor({ fieldName, colorStops, isSteps }) {
const targetName = VectorStyle.getComputedFieldName(fieldName);
_getMBDataDrivenColor({ targetName, colorStops, isSteps }) {
if (isSteps) {
const firstStopValue = colorStops[0];
const lessThenFirstStopValue = firstStopValue - 1;
@ -448,8 +450,7 @@ export class VectorStyle extends AbstractStyle {
];
}
_getMbDataDrivenSize({ fieldName, minSize, maxSize }) {
const targetName = VectorStyle.getComputedFieldName(fieldName);
_getMbDataDrivenSize({ targetName, minSize, maxSize }) {
return [
'interpolate',
['linear'],
@ -459,7 +460,7 @@ export class VectorStyle extends AbstractStyle {
];
}
_getMBColor(styleDescriptor) {
_getMBColor(styleName, styleDescriptor) {
const isStatic = styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC;
if (isStatic) {
return _.get(styleDescriptor, 'options.color', null);
@ -478,7 +479,7 @@ export class VectorStyle extends AbstractStyle {
}
return this._getMBDataDrivenColor({
fieldName: styleDescriptor.options.field.name,
targetName: VectorStyle.getComputedFieldName(styleName, styleDescriptor.options.field.name),
colorStops: this._getMBColorStops(styleDescriptor),
isSteps: styleDescriptor.options.useCustomColorRamp,
});
@ -500,14 +501,14 @@ export class VectorStyle extends AbstractStyle {
&& _.has(styleDescriptor, 'options.maxSize');
}
_getMbSize(styleDescriptor) {
_getMbSize(styleName, styleDescriptor) {
if (styleDescriptor.type === VectorStyle.STYLE_TYPE.STATIC) {
return styleDescriptor.options.size;
}
if (this._isSizeDynamicConfigComplete(styleDescriptor)) {
return this._getMbDataDrivenSize({
fieldName: styleDescriptor.options.field.name,
targetName: VectorStyle.getComputedFieldName(styleName, styleDescriptor.options.field.name),
minSize: styleDescriptor.options.minSize,
maxSize: styleDescriptor.options.maxSize,
});
@ -518,7 +519,7 @@ export class VectorStyle extends AbstractStyle {
setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
if (this._descriptor.properties.fillColor) {
const color = this._getMBColor(this._descriptor.properties.fillColor);
const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
mbMap.setPaintProperty(fillLayerId, 'fill-color', color);
mbMap.setPaintProperty(fillLayerId, 'fill-opacity', alpha);
} else {
@ -527,7 +528,7 @@ export class VectorStyle extends AbstractStyle {
}
if (this._descriptor.properties.lineColor) {
const color = this._getMBColor(this._descriptor.properties.lineColor);
const color = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
mbMap.setPaintProperty(lineLayerId, 'line-color', color);
mbMap.setPaintProperty(lineLayerId, 'line-opacity', alpha);
@ -537,7 +538,7 @@ export class VectorStyle extends AbstractStyle {
}
if (this._descriptor.properties.lineWidth) {
const lineWidth = this._getMbSize(this._descriptor.properties.lineWidth);
const lineWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
mbMap.setPaintProperty(lineLayerId, 'line-width', lineWidth);
} else {
mbMap.setPaintProperty(lineLayerId, 'line-width', 0);
@ -546,7 +547,7 @@ export class VectorStyle extends AbstractStyle {
setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
if (this._descriptor.properties.fillColor) {
const color = this._getMBColor(this._descriptor.properties.fillColor);
const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
mbMap.setPaintProperty(pointLayerId, 'circle-color', color);
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', alpha);
} else {
@ -554,7 +555,7 @@ export class VectorStyle extends AbstractStyle {
mbMap.setPaintProperty(pointLayerId, 'circle-opacity', 0);
}
if (this._descriptor.properties.lineColor) {
const color = this._getMBColor(this._descriptor.properties.lineColor);
const color = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-color', color);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', alpha);
@ -563,13 +564,13 @@ export class VectorStyle extends AbstractStyle {
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-opacity', 0);
}
if (this._descriptor.properties.lineWidth) {
const lineWidth = this._getMbSize(this._descriptor.properties.lineWidth);
const lineWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-width', lineWidth);
} else {
mbMap.setPaintProperty(pointLayerId, 'circle-stroke-width', 0);
}
if (this._descriptor.properties.iconSize) {
const iconSize = this._getMbSize(this._descriptor.properties.iconSize);
const iconSize = this._getMbSize(vectorStyles.ICON_SIZE, this._descriptor.properties.iconSize);
mbMap.setPaintProperty(pointLayerId, 'circle-radius', iconSize);
} else {
mbMap.setPaintProperty(pointLayerId, 'circle-radius', 0);
@ -581,9 +582,9 @@ export class VectorStyle extends AbstractStyle {
const symbolId = this._descriptor.properties.symbol.options.symbolId;
mbMap.setLayoutProperty(symbolLayerId, 'icon-anchor', getMakiSymbolAnchor(symbolId));
const color = this._getMBColor(this._descriptor.properties.fillColor);
const haloColor = this._getMBColor(this._descriptor.properties.lineColor);
const haloWidth = this._getMbSize(this._descriptor.properties.lineWidth);
const color = this._getMBColor(vectorStyles.FILL_COLOR, this._descriptor.properties.fillColor);
const haloColor = this._getMBColor(vectorStyles.LINE_COLOR, this._descriptor.properties.lineColor);
const haloWidth = this._getMbSize(vectorStyles.LINE_WIDTH, this._descriptor.properties.lineWidth);
// icon-color is only supported on SDF icons.
mbMap.setPaintProperty(symbolLayerId, 'icon-color', color);
mbMap.setPaintProperty(symbolLayerId, 'icon-halo-color', haloColor);
@ -608,7 +609,7 @@ export class VectorStyle extends AbstractStyle {
mbMap.setLayoutProperty(symbolLayerId, 'icon-image', `${symbolId}-${iconPixels}`);
const halfIconPixels = iconPixels / 2;
const targetName = VectorStyle.getComputedFieldName(iconSize.options.field.name);
const targetName = VectorStyle.getComputedFieldName(vectorStyles.ICON_SIZE, iconSize.options.field.name);
// Using property state instead of feature-state because layout properties do not support feature-state
mbMap.setLayoutProperty(symbolLayerId, 'icon-size', [
'interpolate',
@ -623,7 +624,7 @@ export class VectorStyle extends AbstractStyle {
if (iconOrientation.type === VectorStyle.STYLE_TYPE.STATIC) {
mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', iconOrientation.options.orientation);
} else if (_.has(iconOrientation, 'options.field.name')) {
const targetName = VectorStyle.getComputedFieldName(iconOrientation.options.field.name);
const targetName = VectorStyle.getComputedFieldName(vectorStyles.ICON_ORIENTATION, iconOrientation.options.field.name);
// Using property state instead of feature-state because layout properties do not support feature-state
mbMap.setLayoutProperty(symbolLayerId, 'icon-rotate', [
'coalesce', ['get', targetName], 0

31
x-pack/legacy/plugins/maps/public/layers/styles/vector_style_defaults.js
View file

@ -17,10 +17,19 @@ const DEFAULT_ICON = 'airfield';
export const DEFAULT_MIN_SIZE = 1;
export const DEFAULT_MAX_SIZE = 64;
export const vectorStyles = {
SYMBOL: 'symbol',
FILL_COLOR: 'fillColor',
LINE_COLOR: 'lineColor',
LINE_WIDTH: 'lineWidth',
ICON_SIZE: 'iconSize',
ICON_ORIENTATION: 'iconOrientation'
};
export function getDefaultProperties(mapColors = []) {
return {
...getDefaultStaticProperties(mapColors),
symbol: {
[vectorStyles.SYMBOL]: {
options: {
symbolizeAs: SYMBOLIZE_AS_CIRCLE,
symbolId: DEFAULT_ICON,
@ -39,31 +48,31 @@ export function getDefaultStaticProperties(mapColors = []) {
return {
fillColor: {
[vectorStyles.FILL_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
color: nextFillColor,
}
},
lineColor: {
[vectorStyles.LINE_COLOR]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
color: nextLineColor
}
},
lineWidth: {
[vectorStyles.LINE_WIDTH]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
size: 1
}
},
iconSize: {
[vectorStyles.ICON_SIZE]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
size: DEFAULT_ICON_SIZE
}
},
iconOrientation: {
[vectorStyles.ICON_ORIENTATION]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
orientation: 0
@ -74,21 +83,21 @@ export function getDefaultStaticProperties(mapColors = []) {
export function getDefaultDynamicProperties() {
return {
fillColor: {
[vectorStyles.FILL_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
color: COLOR_GRADIENTS[0].value,
field: undefined,
}
},
lineColor: {
[vectorStyles.LINE_COLOR]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
color: COLOR_GRADIENTS[0].value,
field: undefined,
}
},
lineWidth: {
[vectorStyles.LINE_WIDTH]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
minSize: DEFAULT_MIN_SIZE,
@ -96,7 +105,7 @@ export function getDefaultDynamicProperties() {
field: undefined,
}
},
iconSize: {
[vectorStyles.ICON_SIZE]: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
minSize: DEFAULT_MIN_SIZE,
@ -104,7 +113,7 @@ export function getDefaultDynamicProperties() {
field: undefined,
}
},
iconOrientation: {
[vectorStyles.ICON_ORIENTATION]: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
field: undefined,

4
x-pack/test/functional/apps/maps/mapbox_styles.js
View file

@ -49,7 +49,7 @@ export const MAPBOX_STYLES = {
'coalesce',
[
'feature-state',
'__kbn__scaled(__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name)'
'__kbn__dynamic____kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name__fillColor'
],
-1
],
@ -123,7 +123,7 @@ export const MAPBOX_STYLES = {
'coalesce',
[
'feature-state',
'__kbn__scaled(__kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name)'
'__kbn__dynamic____kbnjoin__max_of_prop1_groupby_meta_for_geo_shapes*.shape_name__fillColor'
],
-1
],