From caa6ceac5aee8495dcea11850cd4717f327ff78d Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Mon, 16 Dec 2019 16:08:07 -0500 Subject: [PATCH 01/10] Move legend --- .../components/ranged_style_legend_row.js | 54 +++++++++++ .../styles/components/style_legend_row.js | 48 ---------- .../components/legend/heatmap_legend.js | 4 +- .../legend/style_property_legend_row.js | 57 ----------- .../components/legend/vector_style_legend.js | 40 ++++---- .../components/dynamic_legend_row.js | 95 +++++++++++++++++++ .../properties/dynamic_color_property.js | 2 +- .../properties/dynamic_size_property.js | 2 +- .../properties/dynamic_style_property.js | 13 ++- .../vector/properties/style_property.js | 6 +- .../layers/styles/vector/vector_style.js | 22 ++--- 11 files changed, 197 insertions(+), 146 deletions(-) create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js delete mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js delete mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/style_property_legend_row.js create mode 100644 x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js new file mode 100644 index 0000000000000..45d4e64bc5e02 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js @@ -0,0 +1,54 @@ +/* + * 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 React from 'react'; +import PropTypes from 'prop-types'; + +import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer, EuiToolTip } from '@elastic/eui'; + +export class RangedStyleLegendRow extends React.Component { + render() { + return ( +
+ + {this.props.header} + + + + {this.props.minLabel} + + + + + + + {this.props.fieldLabel} + + + + + + + {this.props.maxLabel} + + + +
+ ); + } +} + +RangedStyleLegendRow.propTypes = { + header: PropTypes.node.isRequired, + minLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + maxLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, + propertyLabel: PropTypes.string.isRequired, + fieldLabel: PropTypes.string.isRequired, +}; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js deleted file mode 100644 index 38ffed308a0d1..0000000000000 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - * 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 React from 'react'; -import PropTypes from 'prop-types'; - -import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer, EuiToolTip } from '@elastic/eui'; - -export function StyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) { - return ( -
- - {header} - - - - {minLabel} - - - - - - - {fieldLabel} - - - - - - - {maxLabel} - - - -
- ); -} - -StyleLegendRow.propTypes = { - header: PropTypes.node.isRequired, - minLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - maxLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, - propertyLabel: PropTypes.string.isRequired, - fieldLabel: PropTypes.string.isRequired, -}; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js index ce514734b6606..1d8dfe9c7bdbf 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/heatmap/components/legend/heatmap_legend.js @@ -8,7 +8,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { ColorGradient } from '../../../components/color_gradient'; -import { StyleLegendRow } from '../../../components/style_legend_row'; +import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row'; import { DEFAULT_RGB_HEATMAP_COLOR_RAMP, DEFAULT_HEATMAP_COLOR_RAMP_NAME, @@ -50,7 +50,7 @@ export class HeatmapLegend extends React.Component { ); return ( - { - if (!this.props.fieldFormatter || value === EMPTY_VALUE) { - return value; - } - - return this.props.fieldFormatter(value); - }; - - render() { - const { meta: range, style } = this.props; - - const min = this._formatValue(_.get(range, 'min', EMPTY_VALUE)); - const minLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange - ? `< ${min}` - : min; - - const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE)); - const maxLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange - ? `> ${max}` - : max; - - return ( - - ); - } -} - -StylePropertyLegendRow.propTypes = { - label: PropTypes.string, - fieldFormatter: PropTypes.func, - meta: PropTypes.object, - style: PropTypes.object, -}; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js index 7ea9b2b04bcfe..5ee71f50a4c39 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js @@ -5,19 +5,16 @@ */ import _ from 'lodash'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -import { StylePropertyLegendRow } from './style_property_legend_row'; +import React, { Component, Fragment } from 'react'; export class VectorStyleLegend extends Component { state = { - rows: [], + styles: [], }; componentDidMount() { this._isMounted = true; - this._prevRowDescriptors = undefined; + this._prevStyleDescriptors = undefined; this._loadRows(); } @@ -30,27 +27,30 @@ export class VectorStyleLegend extends Component { } _loadRows = _.debounce(async () => { - const rows = await this.props.loadRows(); - const rowDescriptors = rows.map(row => { + const styles = await this.props.stylesPromise; + const styleDescriptorPromises = styles.map(async style => { return { - label: row.label, - range: row.meta, - styleOptions: row.style.getOptions(), + type: style.getStyleName(), + options: style.getOptions(), + fieldMeta: style.getFieldMeta(), + label: await style.getField().getLabel(), }; }); - if (this._isMounted && !_.isEqual(rowDescriptors, this._prevRowDescriptors)) { - this._prevRowDescriptors = rowDescriptors; - this.setState({ rows }); + + const styleDescriptors = await Promise.all(styleDescriptorPromises); + if (this._isMounted && !_.isEqual(styleDescriptors, this._prevStyleDescriptors)) { + this._prevStyleDescriptors = styleDescriptors; + this.setState({ styles: styles }); } }, 100); render() { - return this.state.rows.map(rowProps => { - return ; + return this.state.styles.map(style => { + return ( + + {style.renderLegendDetailRow(this.props.formatField)} + + ); }); } } - -VectorStyleLegend.propTypes = { - loadRows: PropTypes.func.isRequired, -}; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js new file mode 100644 index 0000000000000..432ff2fe51451 --- /dev/null +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js @@ -0,0 +1,95 @@ +/* + * 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 React from 'react'; +import _ from 'lodash'; +import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row'; +import { getVectorStyleLabel } from '../../components/get_vector_style_label'; + +const EMPTY_VALUE = ''; +async function formatValue(fieldFormatter, fieldName, value) { + if (!fieldFormatter || value === EMPTY_VALUE) { + return value; + } + return await fieldFormatter(fieldName, value); +} + +export class DynamicLegendRow extends React.Component { + constructor() { + super(); + this._isMounted = false; + this.state = { + label: EMPTY_VALUE, + minLabel: EMPTY_VALUE, + maxLabel: EMPTY_VALUE, + }; + } + + async _loadParams() { + const label = await this.props.style.getField().getLabel(); + const fieldMeta = this.props.style.getFieldMeta(); + const newState = { label }; + + if (fieldMeta) { + const range = { min: fieldMeta.min, max: fieldMeta.max }; + const fieldName = this.props.style.getField().getName(); + const min = await formatValue( + this.props.formatField, + fieldName, + _.get(range, 'min', EMPTY_VALUE) + ); + const minLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange + ? `< ${min}` + : min; + + const max = await formatValue( + this.props.formatField, + fieldName, + _.get(range, 'max', EMPTY_VALUE) + ); + const maxLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange + ? `> ${max}` + : max; + + newState.minLabel = minLabel; + newState.maxLabel = maxLabel; + } else { + newState.minLabel = EMPTY_VALUE; + newState.maxLabel = EMPTY_VALUE; + } + + if (this._isMounted && !_.isEqual(this.state, newState)) { + this.setState(newState); + } + } + + componentDidUpdate() { + this._loadParams(); + } + + componentWillUnmount() { + this._isMounted = false; + } + + componentDidMount() { + this._isMounted = true; + this._loadParams(); + } + + render() { + return ( + + ); + } +} diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js index fdbb19a60d2e6..d47b94f044ee4 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js @@ -111,7 +111,7 @@ export class DynamicColorProperty extends DynamicStyleProperty { return getColorRampStops(this._options.color); } - renderHeader() { + renderStylePropertyLegendHeader() { if (this._options.color) { return ; } else { diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index 78409ef0d488f..37ca1d184454f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -121,7 +121,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { ); } - renderHeader() { + renderStylePropertyLegendHeader() { let icons; if (this.getStyleName() === VECTOR_STYLES.LINE_WIDTH) { icons = getLineWidthIcons(); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js index 3b25746717088..9bd46967889b0 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js @@ -8,13 +8,20 @@ import _ from 'lodash'; import { AbstractStyleProperty } from './style_property'; import { DEFAULT_SIGMA } from '../vector_style_defaults'; import { STYLE_TYPE } from '../../../../../common/constants'; +import { DynamicLegendRow } from './components/dynamic_legend_row'; +import React from 'react'; export class DynamicStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.DYNAMIC; - constructor(options, styleName, field) { + constructor(options, styleName, field, getFieldMeta) { super(options, styleName); this._field = field; + this._getFieldMeta = getFieldMeta; + } + + getFieldMeta() { + return this._getFieldMeta && this._field ? this._getFieldMeta(this._field.getName()) : null; } getField() { @@ -105,4 +112,8 @@ export class DynamicStyleProperty extends AbstractStyleProperty { isMaxOutsideStdRange: stats.max > stdUpperBounds, }; } + + renderLegendDetailRow(formatField) { + return ; + } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js index b0b4bcefd7d2f..e2b20478eb7ae 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js @@ -32,7 +32,11 @@ export class AbstractStyleProperty { return this._options || {}; } - renderHeader() { + renderStylePropertyLegendHeader() { + return null; + } + + renderLegendDetailRow() { return null; } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index d386c0ad4a5e0..9a39787bdde97 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -330,7 +330,6 @@ export class VectorStyle extends AbstractStyle { const data = styleMetaDataRequest.getData(); const fieldMeta = dynamicProp.pluckStyleMetaFromFieldMetaData(data); - return fieldMeta ? fieldMeta : fieldMetaFromLocalFeatures; }; @@ -377,20 +376,13 @@ export class VectorStyle extends AbstractStyle { } renderLegendDetails() { - const loadRows = async () => { - const styles = await this._getLegendDetailStyleProperties(); - const promises = styles.map(async style => { - return { - label: await style.getField().getLabel(), - fieldFormatter: await this._source.getFieldFormatter(style.getField().getName()), - meta: this._getFieldMeta(style.getField().getName()), - style, - }; - }); - return await Promise.all(promises); + const formatField = async (fieldName, value) => { + const ff = await this._source.getFieldFormatter(fieldName); + return ff ? ff(value) : value; }; - return ; + const stylesPromise = this._getLegendDetailStyleProperties(); + return ; } _getFeatureStyleParams() { @@ -559,7 +551,7 @@ export class VectorStyle extends AbstractStyle { return new StaticSizeProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicSizeProperty(descriptor.options, styleName, field); + return new DynamicSizeProperty(descriptor.options, styleName, field, this._getFieldMeta); } else { throw new Error(`${descriptor} not implemented`); } @@ -572,7 +564,7 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicColorProperty(descriptor.options, styleName, field); + return new DynamicColorProperty(descriptor.options, styleName, field, this._getFieldMeta); } else { throw new Error(`${descriptor} not implemented`); } From 1adadcd18b6029a61404ccd4126d4367bec44067 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 17 Dec 2019 10:43:19 -0700 Subject: [PATCH 02/10] [Maps] gather field formatters in data request so they can be used sync in vector_style --- .../legacy/plugins/maps/common/constants.js | 2 + .../maps/public/layers/joins/inner_join.js | 6 +- .../layers/styles/vector/vector_style.js | 39 ++++++++- .../maps/public/layers/util/can_skip_fetch.js | 12 +++ .../maps/public/layers/vector_layer.js | 84 ++++++++++++++++++- 5 files changed, 138 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/maps/common/constants.js b/x-pack/legacy/plugins/maps/common/constants.js index afe30f3492147..a6bdee3d2ed12 100644 --- a/x-pack/legacy/plugins/maps/common/constants.js +++ b/x-pack/legacy/plugins/maps/common/constants.js @@ -59,6 +59,8 @@ export const FIELD_ORIGIN = { export const SOURCE_DATA_ID_ORIGIN = 'source'; export const META_ID_ORIGIN_SUFFIX = 'meta'; export const SOURCE_META_ID_ORIGIN = `${SOURCE_DATA_ID_ORIGIN}_${META_ID_ORIGIN_SUFFIX}`; +export const FORMATTERS_ID_ORIGIN_SUFFIX = 'formatters'; +export const SOURCE_FORMATTERS_ID_ORIGIN = `${SOURCE_DATA_ID_ORIGIN}_${FORMATTERS_ID_ORIGIN_SUFFIX}`; export const GEOJSON_FILE = 'GEOJSON_FILE'; diff --git a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js index 6671914bce74f..13a2e05ab8eeb 100644 --- a/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js +++ b/x-pack/legacy/plugins/maps/public/layers/joins/inner_join.js @@ -6,7 +6,7 @@ import { ESTermSource } from '../sources/es_term_source'; import { getComputedFieldNamePrefix } from '../styles/vector/style_util'; -import { META_ID_ORIGIN_SUFFIX } from '../../../common/constants'; +import { META_ID_ORIGIN_SUFFIX, FORMATTERS_ID_ORIGIN_SUFFIX } from '../../../common/constants'; export class InnerJoin { constructor(joinDescriptor, leftSource) { @@ -45,6 +45,10 @@ export class InnerJoin { return `${this.getSourceDataRequestId()}_${META_ID_ORIGIN_SUFFIX}`; } + getSourceFormattersDataRequestId() { + return `${this.getSourceDataRequestId()}_${FORMATTERS_ID_ORIGIN_SUFFIX}`; + } + getLeftField() { return this._leftField; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index d386c0ad4a5e0..9e4f1e16c3f44 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -19,6 +19,7 @@ import { FIELD_ORIGIN, STYLE_TYPE, SOURCE_META_ID_ORIGIN, + SOURCE_FORMATTERS_ID_ORIGIN, LAYER_STYLE_TYPE, } from '../../../../common/constants'; import { VectorIcon } from './components/legend/vector_icon'; @@ -334,6 +335,42 @@ export class VectorStyle extends AbstractStyle { return fieldMeta ? fieldMeta : fieldMetaFromLocalFeatures; }; + _getFieldFormatter = fieldName => { + const dynamicProps = this.getDynamicPropertiesArray(); + const dynamicProp = dynamicProps.find(dynamicProp => { + return fieldName === dynamicProp.getField().getName(); + }); + + if (!dynamicProp) { + return null; + } + + let dataRequestId; + if (dynamicProp.getFieldOrigin() === FIELD_ORIGIN.SOURCE) { + dataRequestId = SOURCE_FORMATTERS_ID_ORIGIN; + } else { + const join = this._layer.getValidJoins().find(join => { + const matchingField = join.getRightJoinSource().getMetricFieldForName(fieldName); + return !!matchingField; + }); + if (join) { + dataRequestId = join.getSourceFormattersDataRequestId(); + } + } + + if (!dataRequestId) { + return null; + } + + const formattersDataRequest = this._layer._findDataRequestForSource(dataRequestId); + if (!formattersDataRequest || !formattersDataRequest.hasData()) { + return null; + } + + const formatters = formattersDataRequest.getData(); + return formatters[fieldName]; + }; + _getStyleMeta = () => { return _.get(this._descriptor, '__styleMeta', {}); }; @@ -382,7 +419,7 @@ export class VectorStyle extends AbstractStyle { const promises = styles.map(async style => { return { label: await style.getField().getLabel(), - fieldFormatter: await this._source.getFieldFormatter(style.getField().getName()), + fieldFormatter: this._getFieldFormatter(style.getField().getName()), meta: this._getFieldMeta(style.getField().getName()), style, }; diff --git a/x-pack/legacy/plugins/maps/public/layers/util/can_skip_fetch.js b/x-pack/legacy/plugins/maps/public/layers/util/can_skip_fetch.js index 41f6de65e4032..d9182be56a75f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/util/can_skip_fetch.js +++ b/x-pack/legacy/plugins/maps/public/layers/util/can_skip_fetch.js @@ -158,3 +158,15 @@ export function canSkipStyleMetaUpdate({ prevDataRequest, nextMeta }) { !updateDueToFields && !updateDueToSourceQuery && !updateDueToIsTimeAware && !updateDueToTime ); } + +export function canSkipFormattersUpdate({ prevDataRequest, nextMeta }) { + if (!prevDataRequest) { + return false; + } + const prevMeta = prevDataRequest.getMeta(); + if (!prevMeta) { + return false; + } + + return !_.isEqual(prevMeta.fieldNames, nextMeta.fieldNames); +} diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js index 16129087de1f8..982de2067ebed 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js @@ -13,6 +13,7 @@ import { FEATURE_ID_PROPERTY_NAME, SOURCE_DATA_ID_ORIGIN, SOURCE_META_ID_ORIGIN, + SOURCE_FORMATTERS_ID_ORIGIN, FEATURE_VISIBLE_PROPERTY_NAME, EMPTY_FEATURE_COLLECTION, LAYER_TYPE, @@ -24,7 +25,11 @@ import { JoinTooltipProperty } from './tooltips/join_tooltip_property'; import { EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { DataRequestAbortError } from './util/data_request'; -import { canSkipSourceUpdate, canSkipStyleMetaUpdate } from './util/can_skip_fetch'; +import { + canSkipSourceUpdate, + canSkipStyleMetaUpdate, + canSkipFormattersUpdate, +} from './util/can_skip_fetch'; import { assignFeatureIds } from './util/assign_feature_ids'; import { getFillFilterExpression, @@ -286,6 +291,7 @@ export class VectorLayer extends AbstractLayer { async _syncJoins(syncContext) { const joinSyncs = this.getValidJoins().map(async join => { await this._syncJoinStyleMeta(syncContext, join); + await this._syncJoinFormatters(syncContext, join); return this._syncJoin({ join, ...syncContext }); }); @@ -355,7 +361,7 @@ export class VectorLayer extends AbstractLayer { registerCancelCallback, dataFilters, }) { - const requestToken = Symbol(`layer-source-data:${this.getId()}`); + const requestToken = Symbol(`layer-${this.getId()}-${SOURCE_DATA_ID_ORIGIN}`); const searchFilters = this._getSearchFilters(dataFilters); const prevDataRequest = this.getSourceDataRequest(); @@ -465,7 +471,7 @@ export class VectorLayer extends AbstractLayer { return; } - const requestToken = Symbol(`layer-${this.getId()}-style-meta`); + const requestToken = Symbol(`layer-${this.getId()}-${dataRequestId}`); try { startLoading(dataRequestId, requestToken, nextMeta); const layerName = await this.getDisplayName(); @@ -484,12 +490,84 @@ export class VectorLayer extends AbstractLayer { } } + async _syncSourceFormatters(syncContext) { + if (this._style.constructor.type !== LAYER_STYLE_TYPE.VECTOR) { + return; + } + + return this._syncFormatters({ + source: this._source, + dataRequestId: SOURCE_FORMATTERS_ID_ORIGIN, + dynamicStyleProps: this._style.getDynamicPropertiesArray().filter(dynamicStyleProp => { + return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.SOURCE; + }), + ...syncContext, + }); + } + + async _syncJoinFormatters(syncContext, join) { + const joinSource = join.getRightJoinSource(); + return this._syncFormatters({ + source: joinSource, + dataRequestId: join.getSourceFormattersDataRequestId(), + dynamicStyleProps: this._style.getDynamicPropertiesArray().filter(dynamicStyleProp => { + const matchingField = joinSource.getMetricFieldForName( + dynamicStyleProp.getField().getName() + ); + return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.JOIN && !!matchingField; + }), + ...syncContext, + }); + } + + async _syncFormatters({ + source, + dataRequestId, + dynamicStyleProps, + startLoading, + stopLoading, + onLoadError, + }) { + if (dynamicStyleProps.length === 0) { + return; + } + + const fieldNames = dynamicStyleProps.map(dynamicStyleProp => { + return dynamicStyleProp.getField().getName(); + }); + const nextMeta = { + fieldNames: _.uniq(fieldNames).sort(), + }; + const prevDataRequest = this._findDataRequestForSource(dataRequestId); + const canSkipUpdate = canSkipFormattersUpdate({ prevDataRequest, nextMeta }); + if (canSkipUpdate) { + return; + } + + const requestToken = Symbol(`layer-${this.getId()}-${dataRequestId}`); + try { + startLoading(dataRequestId, requestToken, nextMeta); + + const formatters = {}; + const promises = dynamicStyleProps.map(async dynamicStyleProp => { + const fieldName = dynamicStyleProp.getField().getName(); + formatters[fieldName] = await source.getFieldFormatter(fieldName); + }); + await Promise.all(promises); + + stopLoading(dataRequestId, requestToken, formatters, nextMeta); + } catch (error) { + onLoadError(dataRequestId, requestToken, error.message); + } + } + async syncData(syncContext) { if (!this.isVisible() || !this.showAtZoomLevel(syncContext.dataFilters.zoom)) { return; } await this._syncSourceStyleMeta(syncContext); + await this._syncSourceFormatters(syncContext); const sourceResult = await this._syncSource(syncContext); if ( !sourceResult.featureCollection || From 08dbd14922c82966d83ef433f38905d39ebf2552 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 17 Dec 2019 13:11:09 -0700 Subject: [PATCH 03/10] review feedback --- .../layers/styles/vector/vector_style.js | 21 ++++--- .../maps/public/layers/vector_layer.js | 55 ++++++++++--------- 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 9e4f1e16c3f44..5657343d030c8 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -295,14 +295,17 @@ export class VectorStyle extends AbstractStyle { return this._isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.POLYGON); }; - _getFieldMeta = fieldName => { - const fieldMetaFromLocalFeatures = _.get(this._descriptor, ['__styleMeta', fieldName]); - + _getDynamicPropertyByFieldName = fieldName => { const dynamicProps = this.getDynamicPropertiesArray(); - const dynamicProp = dynamicProps.find(dynamicProp => { + return dynamicProps.find(dynamicProp => { return fieldName === dynamicProp.getField().getName(); }); + }; + _getFieldMeta = fieldName => { + const fieldMetaFromLocalFeatures = _.get(this._descriptor, ['__styleMeta', fieldName]); + + const dynamicProp = this._getDynamicPropertyByFieldName(fieldName); if (!dynamicProp || !dynamicProp.isFieldMetaEnabled()) { return fieldMetaFromLocalFeatures; } @@ -324,7 +327,7 @@ export class VectorStyle extends AbstractStyle { return fieldMetaFromLocalFeatures; } - const styleMetaDataRequest = this._layer._findDataRequestForSource(dataRequestId); + const styleMetaDataRequest = this._layer._findDataRequestById(dataRequestId); if (!styleMetaDataRequest || !styleMetaDataRequest.hasData()) { return fieldMetaFromLocalFeatures; } @@ -336,11 +339,7 @@ export class VectorStyle extends AbstractStyle { }; _getFieldFormatter = fieldName => { - const dynamicProps = this.getDynamicPropertiesArray(); - const dynamicProp = dynamicProps.find(dynamicProp => { - return fieldName === dynamicProp.getField().getName(); - }); - + const dynamicProp = this._getDynamicPropertyByFieldName(fieldName); if (!dynamicProp) { return null; } @@ -362,7 +361,7 @@ export class VectorStyle extends AbstractStyle { return null; } - const formattersDataRequest = this._layer._findDataRequestForSource(dataRequestId); + const formattersDataRequest = this._layer._findDataRequestById(dataRequestId); if (!formattersDataRequest || !formattersDataRequest.hasData()) { return null; } diff --git a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js index 982de2067ebed..30c47658bb327 100644 --- a/x-pack/legacy/plugins/maps/public/layers/vector_layer.js +++ b/x-pack/legacy/plugins/maps/public/layers/vector_layer.js @@ -225,7 +225,7 @@ export class VectorLayer extends AbstractLayer { return indexPatternIds; } - _findDataRequestForSource(sourceDataId) { + _findDataRequestById(sourceDataId) { return this._dataRequests.find(dataRequest => dataRequest.getDataId() === sourceDataId); } @@ -246,7 +246,7 @@ export class VectorLayer extends AbstractLayer { sourceQuery: joinSource.getWhereQuery(), applyGlobalQuery: joinSource.getApplyGlobalQuery(), }; - const prevDataRequest = this._findDataRequestForSource(sourceDataId); + const prevDataRequest = this._findDataRequestById(sourceDataId); const canSkipFetch = await canSkipSourceUpdate({ source: joinSource, @@ -465,7 +465,7 @@ export class VectorLayer extends AbstractLayer { isTimeAware: this._style.isTimeAware() && (await source.isTimeAware()), timeFilters: dataFilters.timeFilters, }; - const prevDataRequest = this._findDataRequestForSource(dataRequestId); + const prevDataRequest = this._findDataRequestById(dataRequestId); const canSkipFetch = canSkipStyleMetaUpdate({ prevDataRequest, nextMeta }); if (canSkipFetch) { return; @@ -498,9 +498,14 @@ export class VectorLayer extends AbstractLayer { return this._syncFormatters({ source: this._source, dataRequestId: SOURCE_FORMATTERS_ID_ORIGIN, - dynamicStyleProps: this._style.getDynamicPropertiesArray().filter(dynamicStyleProp => { - return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.SOURCE; - }), + fields: this._style + .getDynamicPropertiesArray() + .filter(dynamicStyleProp => { + return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.SOURCE; + }) + .map(dynamicStyleProp => { + return dynamicStyleProp.getField(); + }), ...syncContext, }); } @@ -510,35 +515,33 @@ export class VectorLayer extends AbstractLayer { return this._syncFormatters({ source: joinSource, dataRequestId: join.getSourceFormattersDataRequestId(), - dynamicStyleProps: this._style.getDynamicPropertiesArray().filter(dynamicStyleProp => { - const matchingField = joinSource.getMetricFieldForName( - dynamicStyleProp.getField().getName() - ); - return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.JOIN && !!matchingField; - }), + fields: this._style + .getDynamicPropertiesArray() + .filter(dynamicStyleProp => { + const matchingField = joinSource.getMetricFieldForName( + dynamicStyleProp.getField().getName() + ); + return dynamicStyleProp.getFieldOrigin() === FIELD_ORIGIN.JOIN && !!matchingField; + }) + .map(dynamicStyleProp => { + return dynamicStyleProp.getField(); + }), ...syncContext, }); } - async _syncFormatters({ - source, - dataRequestId, - dynamicStyleProps, - startLoading, - stopLoading, - onLoadError, - }) { - if (dynamicStyleProps.length === 0) { + async _syncFormatters({ source, dataRequestId, fields, startLoading, stopLoading, onLoadError }) { + if (fields.length === 0) { return; } - const fieldNames = dynamicStyleProps.map(dynamicStyleProp => { - return dynamicStyleProp.getField().getName(); + const fieldNames = fields.map(field => { + return field.getName(); }); const nextMeta = { fieldNames: _.uniq(fieldNames).sort(), }; - const prevDataRequest = this._findDataRequestForSource(dataRequestId); + const prevDataRequest = this._findDataRequestById(dataRequestId); const canSkipUpdate = canSkipFormattersUpdate({ prevDataRequest, nextMeta }); if (canSkipUpdate) { return; @@ -549,8 +552,8 @@ export class VectorLayer extends AbstractLayer { startLoading(dataRequestId, requestToken, nextMeta); const formatters = {}; - const promises = dynamicStyleProps.map(async dynamicStyleProp => { - const fieldName = dynamicStyleProp.getField().getName(); + const promises = fields.map(async field => { + const fieldName = field.getName(); formatters[fieldName] = await source.getFieldFormatter(fieldName); }); await Promise.all(promises); From 48982f85b817aca3dd9a67840b6262b350392436 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 17 Dec 2019 13:42:40 -0700 Subject: [PATCH 04/10] hasMatchingMetricField --- .../maps/public/layers/sources/es_agg_source.js | 5 +++++ .../public/layers/styles/vector/vector_style.js | 16 +++++----------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/sources/es_agg_source.js b/x-pack/legacy/plugins/maps/public/layers/sources/es_agg_source.js index c07b51c20ab85..fd3ae8f0ab7e3 100644 --- a/x-pack/legacy/plugins/maps/public/layers/sources/es_agg_source.js +++ b/x-pack/legacy/plugins/maps/public/layers/sources/es_agg_source.js @@ -82,6 +82,11 @@ export class AbstractESAggSource extends AbstractESSource { }); } + hasMatchingMetricField(fieldName) { + const matchingField = this.getMetricFieldForName(fieldName); + return !!matchingField; + } + getMetricFieldForName(fieldName) { return this.getMetricFields().find(metricField => { return metricField.getName() === fieldName; diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 5657343d030c8..7635a541b2437 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -315,8 +315,7 @@ export class VectorStyle extends AbstractStyle { dataRequestId = SOURCE_META_ID_ORIGIN; } else { const join = this._layer.getValidJoins().find(join => { - const matchingField = join.getRightJoinSource().getMetricFieldForName(fieldName); - return !!matchingField; + return join.getRightJoinSource().hasMatchingMetricField(fieldName); }); if (join) { dataRequestId = join.getSourceMetaDataRequestId(); @@ -349,8 +348,7 @@ export class VectorStyle extends AbstractStyle { dataRequestId = SOURCE_FORMATTERS_ID_ORIGIN; } else { const join = this._layer.getValidJoins().find(join => { - const matchingField = join.getRightJoinSource().getMetricFieldForName(fieldName); - return !!matchingField; + return join.getRightJoinSource().hasMatchingMetricField(fieldName); }); if (join) { dataRequestId = join.getSourceFormattersDataRequestId(); @@ -575,14 +573,10 @@ export class VectorStyle extends AbstractStyle { fieldName: fieldDescriptor.name, }); } else if (fieldDescriptor.origin === FIELD_ORIGIN.JOIN) { - let matchingField = null; - const joins = this._layer.getValidJoins(); - joins.find(join => { - const aggSource = join.getRightJoinSource(); - matchingField = aggSource.getMetricFieldForName(fieldDescriptor.name); - return !!matchingField; + const join = this._layer.getValidJoins().find(join => { + return join.getRightJoinSource().hasMatchingMetricField(fieldDescriptor.name); }); - return matchingField; + return join ? join.getMetricFieldForFieldName(fieldDescriptor.name) : null; } else { throw new Error(`Unknown origin-type ${fieldDescriptor.origin}`); } From b3e82656e13760089d02c0def6ea9b56eea0963a Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Tue, 17 Dec 2019 15:01:02 -0700 Subject: [PATCH 05/10] review feedback --- .../maps/public/layers/styles/vector/vector_style.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 7635a541b2437..b150deae2fb21 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -295,12 +295,12 @@ export class VectorStyle extends AbstractStyle { return this._isOnlySingleFeatureType(VECTOR_SHAPE_TYPES.POLYGON); }; - _getDynamicPropertyByFieldName = fieldName => { + _getDynamicPropertyByFieldName(fieldName) { const dynamicProps = this.getDynamicPropertiesArray(); return dynamicProps.find(dynamicProp => { return fieldName === dynamicProp.getField().getName(); }); - }; + } _getFieldMeta = fieldName => { const fieldMetaFromLocalFeatures = _.get(this._descriptor, ['__styleMeta', fieldName]); @@ -337,7 +337,7 @@ export class VectorStyle extends AbstractStyle { return fieldMeta ? fieldMeta : fieldMetaFromLocalFeatures; }; - _getFieldFormatter = fieldName => { + _getFieldFormatter(fieldName) { const dynamicProp = this._getDynamicPropertyByFieldName(fieldName); if (!dynamicProp) { return null; @@ -366,7 +366,7 @@ export class VectorStyle extends AbstractStyle { const formatters = formattersDataRequest.getData(); return formatters[fieldName]; - }; + } _getStyleMeta = () => { return _.get(this._descriptor, '__styleMeta', {}); From 168170b01b3e2e614d14401ed361e37ec2f42a90 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 17 Dec 2019 17:30:50 -0500 Subject: [PATCH 06/10] load ff sync --- .../components/dynamic_legend_row.js | 62 +++++++------------ .../layers/styles/vector/vector_style.js | 6 +- 2 files changed, 27 insertions(+), 41 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js index 432ff2fe51451..925dcc9f3b813 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js @@ -10,11 +10,11 @@ import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_ro import { getVectorStyleLabel } from '../../components/get_vector_style_label'; const EMPTY_VALUE = ''; -async function formatValue(fieldFormatter, fieldName, value) { +function formatValue(fieldFormatter, fieldName, value) { if (!fieldFormatter || value === EMPTY_VALUE) { return value; } - return await fieldFormatter(fieldName, value); + return fieldFormatter(fieldName, value); } export class DynamicLegendRow extends React.Component { @@ -23,46 +23,12 @@ export class DynamicLegendRow extends React.Component { this._isMounted = false; this.state = { label: EMPTY_VALUE, - minLabel: EMPTY_VALUE, - maxLabel: EMPTY_VALUE, }; } async _loadParams() { const label = await this.props.style.getField().getLabel(); - const fieldMeta = this.props.style.getFieldMeta(); const newState = { label }; - - if (fieldMeta) { - const range = { min: fieldMeta.min, max: fieldMeta.max }; - const fieldName = this.props.style.getField().getName(); - const min = await formatValue( - this.props.formatField, - fieldName, - _.get(range, 'min', EMPTY_VALUE) - ); - const minLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange - ? `< ${min}` - : min; - - const max = await formatValue( - this.props.formatField, - fieldName, - _.get(range, 'max', EMPTY_VALUE) - ); - const maxLabel = - this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange - ? `> ${max}` - : max; - - newState.minLabel = minLabel; - newState.maxLabel = maxLabel; - } else { - newState.minLabel = EMPTY_VALUE; - newState.maxLabel = EMPTY_VALUE; - } - if (this._isMounted && !_.isEqual(this.state, newState)) { this.setState(newState); } @@ -82,11 +48,31 @@ export class DynamicLegendRow extends React.Component { } render() { + const fieldMeta = this.props.style.getFieldMeta(); + + let minLabel = EMPTY_VALUE; + let maxLabel = EMPTY_VALUE; + if (fieldMeta) { + const range = { min: fieldMeta.min, max: fieldMeta.max }; + const fieldName = this.props.style.getField().getName(); + const min = formatValue(this.props.formatField, fieldName, _.get(range, 'min', EMPTY_VALUE)); + minLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange + ? `< ${min}` + : min; + + const max = formatValue(this.props.formatField, fieldName, _.get(range, 'max', EMPTY_VALUE)); + maxLabel = + this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange + ? `> ${max}` + : max; + } + return ( diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index e1de34fe11b26..b966617f016ad 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -410,9 +410,9 @@ export class VectorStyle extends AbstractStyle { } renderLegendDetails() { - const formatField = async (fieldName, value) => { - const ff = this._getFieldFormatter(fieldName); - return ff ? ff(value) : value; + const formatField = (fieldName, value) => { + const fieldFormatter = this._getFieldFormatter(fieldName); + return fieldFormatter ? fieldFormatter(value) : value; }; const stylesPromise = this._getLegendDetailStyleProperties(); From 565eec2934c6227fefa0157f9d6629c8e752d939 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 17 Dec 2019 17:36:41 -0500 Subject: [PATCH 07/10] feedback --- .../components/ranged_style_legend_row.js | 60 +++++++++---------- .../components/dynamic_legend_row.js | 2 +- .../properties/dynamic_color_property.js | 2 +- .../properties/dynamic_size_property.js | 2 +- .../vector/properties/style_property.js | 2 +- 5 files changed, 31 insertions(+), 37 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js index 45d4e64bc5e02..3eb34ec1406d2 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js @@ -9,40 +9,34 @@ import PropTypes from 'prop-types'; import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer, EuiToolTip } from '@elastic/eui'; -export class RangedStyleLegendRow extends React.Component { - render() { - return ( -
- - {this.props.header} - - - - {this.props.minLabel} +export function RangedStyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) { + return ( +
+ + {header} + + + + {minLabel} + + + + + + + {fieldLabel} + - - - - - - {this.props.fieldLabel} - - - - - - - {this.props.maxLabel} - - - -
- ); - } + + + + + {maxLabel} + + + +
+ ); } RangedStyleLegendRow.propTypes = { diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js index 925dcc9f3b813..ce0528d3c4e2f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js @@ -70,7 +70,7 @@ export class DynamicLegendRow extends React.Component { return ( ; } else { diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js index 37ca1d184454f..df8d11fb455a8 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js @@ -121,7 +121,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty { ); } - renderStylePropertyLegendHeader() { + renderLegendHeader() { let icons; if (this.getStyleName() === VECTOR_STYLES.LINE_WIDTH) { icons = getLineWidthIcons(); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js index e2b20478eb7ae..deece9d974a87 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js @@ -32,7 +32,7 @@ export class AbstractStyleProperty { return this._options || {}; } - renderStylePropertyLegendHeader() { + renderLegendHeader() { return null; } From e9e0d37a8a435943025c79bc6865d733978f938f Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Tue, 17 Dec 2019 18:11:47 -0500 Subject: [PATCH 08/10] make field-formatting accessible in the style --- .../components/legend/vector_style_legend.js | 2 +- .../components/dynamic_legend_row.js | 18 +++++++++--------- .../properties/dynamic_style_property.js | 17 ++++++++++++++--- .../styles/vector/properties/style_property.js | 4 ++++ .../layers/styles/vector/vector_style.js | 13 ++++--------- 5 files changed, 32 insertions(+), 22 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js index 5ee71f50a4c39..84b31ece479b3 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js @@ -48,7 +48,7 @@ export class VectorStyleLegend extends Component { return this.state.styles.map(style => { return ( - {style.renderLegendDetailRow(this.props.formatField)} + {style.renderLegendDetailRow()} ); }); diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js index ce0528d3c4e2f..5933bd1575b2a 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js @@ -10,12 +10,6 @@ import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_ro import { getVectorStyleLabel } from '../../components/get_vector_style_label'; const EMPTY_VALUE = ''; -function formatValue(fieldFormatter, fieldName, value) { - if (!fieldFormatter || value === EMPTY_VALUE) { - return value; - } - return fieldFormatter(fieldName, value); -} export class DynamicLegendRow extends React.Component { constructor() { @@ -47,6 +41,13 @@ export class DynamicLegendRow extends React.Component { this._loadParams(); } + _formatValue(value) { + if (value === EMPTY_VALUE) { + return value; + } + return this.props.style.formatField(value); + } + render() { const fieldMeta = this.props.style.getFieldMeta(); @@ -54,14 +55,13 @@ export class DynamicLegendRow extends React.Component { let maxLabel = EMPTY_VALUE; if (fieldMeta) { const range = { min: fieldMeta.min, max: fieldMeta.max }; - const fieldName = this.props.style.getField().getName(); - const min = formatValue(this.props.formatField, fieldName, _.get(range, 'min', EMPTY_VALUE)); + const min = this._formatValue(_.get(range, 'min', EMPTY_VALUE)); minLabel = this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange ? `< ${min}` : min; - const max = formatValue(this.props.formatField, fieldName, _.get(range, 'max', EMPTY_VALUE)); + const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE)); maxLabel = this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange ? `> ${max}` diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js index 9bd46967889b0..4b7cac51d4fa7 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js @@ -14,10 +14,11 @@ import React from 'react'; export class DynamicStyleProperty extends AbstractStyleProperty { static type = STYLE_TYPE.DYNAMIC; - constructor(options, styleName, field, getFieldMeta) { + constructor(options, styleName, field, getFieldMeta, getFieldFormatter) { super(options, styleName); this._field = field; this._getFieldMeta = getFieldMeta; + this._getFieldFormatter = getFieldFormatter; } getFieldMeta() { @@ -113,7 +114,17 @@ export class DynamicStyleProperty extends AbstractStyleProperty { }; } - renderLegendDetailRow(formatField) { - return ; + formatField(value) { + if (this.getField()) { + const fieldName = this.getField().getName(); + const fieldFormatter = this._getFieldFormatter(fieldName); + return fieldFormatter ? fieldFormatter(value) : value; + } else { + return value; + } + } + + renderLegendDetailRow() { + return ; } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js index deece9d974a87..8da76a775229e 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/style_property.js @@ -24,6 +24,10 @@ export class AbstractStyleProperty { return true; } + formatField(value) { + return value; + } + getStyleName() { return this._styleName; } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index b966617f016ad..dfca5f56ff59d 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -336,7 +336,7 @@ export class VectorStyle extends AbstractStyle { return fieldMeta ? fieldMeta : fieldMetaFromLocalFeatures; }; - _getFieldFormatter(fieldName) { + _getFieldFormatter = fieldName => { const dynamicProp = this._getDynamicPropertyByFieldName(fieldName); if (!dynamicProp) { return null; @@ -410,13 +410,8 @@ export class VectorStyle extends AbstractStyle { } renderLegendDetails() { - const formatField = (fieldName, value) => { - const fieldFormatter = this._getFieldFormatter(fieldName); - return fieldFormatter ? fieldFormatter(value) : value; - }; - const stylesPromise = this._getLegendDetailStyleProperties(); - return ; + return ; } _getFeatureStyleParams() { @@ -581,7 +576,7 @@ export class VectorStyle extends AbstractStyle { return new StaticSizeProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicSizeProperty(descriptor.options, styleName, field, this._getFieldMeta); + return new DynamicSizeProperty(descriptor.options, styleName, field, this._getFieldMeta, this._getFieldFormatter); } else { throw new Error(`${descriptor} not implemented`); } @@ -594,7 +589,7 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicColorProperty(descriptor.options, styleName, field, this._getFieldMeta); + return new DynamicColorProperty(descriptor.options, styleName, field, this._getFieldMeta, this._getFieldFormatter); } else { throw new Error(`${descriptor} not implemented`); } From c6887bc1cc1a355df2cc12d6a4aa6c08d6d9e802 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 18 Dec 2019 08:54:22 -0500 Subject: [PATCH 09/10] linting --- .../components/legend/vector_style_legend.js | 6 +----- .../layers/styles/vector/vector_style.js | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js index 84b31ece479b3..b1e3d5b279f1f 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js @@ -46,11 +46,7 @@ export class VectorStyleLegend extends Component { render() { return this.state.styles.map(style => { - return ( - - {style.renderLegendDetailRow()} - - ); + return {style.renderLegendDetailRow()}; }); } } diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index dfca5f56ff59d..21867972c59a7 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -365,7 +365,7 @@ export class VectorStyle extends AbstractStyle { const formatters = formattersDataRequest.getData(); return formatters[fieldName]; - } + }; _getStyleMeta = () => { return _.get(this._descriptor, '__styleMeta', {}); @@ -576,7 +576,13 @@ export class VectorStyle extends AbstractStyle { return new StaticSizeProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicSizeProperty(descriptor.options, styleName, field, this._getFieldMeta, this._getFieldFormatter); + return new DynamicSizeProperty( + descriptor.options, + styleName, + field, + this._getFieldMeta, + this._getFieldFormatter + ); } else { throw new Error(`${descriptor} not implemented`); } @@ -589,7 +595,13 @@ export class VectorStyle extends AbstractStyle { return new StaticColorProperty(descriptor.options, styleName); } else if (descriptor.type === DynamicStyleProperty.type) { const field = this._makeField(descriptor.options.field); - return new DynamicColorProperty(descriptor.options, styleName, field, this._getFieldMeta, this._getFieldFormatter); + return new DynamicColorProperty( + descriptor.options, + styleName, + field, + this._getFieldMeta, + this._getFieldFormatter + ); } else { throw new Error(`${descriptor} not implemented`); } From 0af75da92fb1264e273affae441a4b7f3e2dd1ff Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Wed, 18 Dec 2019 14:56:48 -0500 Subject: [PATCH 10/10] review feedback --- .../vector/components/legend/vector_style_legend.js | 2 +- .../maps/public/layers/styles/vector/vector_style.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js index b1e3d5b279f1f..9e7afb0aa8873 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js @@ -27,7 +27,7 @@ export class VectorStyleLegend extends Component { } _loadRows = _.debounce(async () => { - const styles = await this.props.stylesPromise; + const styles = await this.props.getLegendDetailStyleProperties(); const styleDescriptorPromises = styles.map(async style => { return { type: style.getStyleName(), diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js index 4e59977f65df4..1a547e04da8ab 100644 --- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js +++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/vector_style.js @@ -387,7 +387,7 @@ export class VectorStyle extends AbstractStyle { ); }; - async _getLegendDetailStyleProperties() { + _getLegendDetailStyleProperties = async () => { const isLinesOnly = await this._getIsLinesOnly(); const isPolygonsOnly = await this._getIsPolygonsOnly(); @@ -402,7 +402,7 @@ export class VectorStyle extends AbstractStyle { return true; }); - } + }; async hasLegendDetails() { const styles = await this._getLegendDetailStyleProperties(); @@ -410,8 +410,9 @@ export class VectorStyle extends AbstractStyle { } renderLegendDetails() { - const stylesPromise = this._getLegendDetailStyleProperties(); - return ; + return ( + + ); } _getFeatureStyleParams() {