[Maps] Move legend rendering to style property

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 (
+      <div>
+        <EuiSpacer size="xs" />
+        {this.props.header}
+        <EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
+          <EuiFlexItem grow={true}>
+            <EuiText size="xs">
+              <small>{this.props.minLabel}</small>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              position="top"
+              title={this.props.propertyLabel}
+              content={this.props.fieldLabel}
+            >
+              <EuiText className="eui-textTruncate" size="xs" style={{ maxWidth: '180px' }}>
+                <small>
+                  <strong>{this.props.fieldLabel}</strong>
+                </small>
+              </EuiText>
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem grow={true}>
+            <EuiText textAlign="right" size="xs">
+              <small>{this.props.maxLabel}</small>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </div>
+    );
+  }
+}
+
+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,
+};

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 (
-      <StyleLegendRow
+      <RangedStyleLegendRow
         header={header}
         minLabel={i18n.translate('xpack.maps.heatmapLegend.coldLabel', {
           defaultMessage: 'cold',

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 <StylePropertyLegendRow key={rowProps.style.getStyleName()} {...rowProps} />;
+    return this.state.styles.map(style => {
+      return (
+        <Fragment key={style.getStyleName()}>
+          {style.renderLegendDetailRow(this.props.formatField)}
+        </Fragment>
+      );
     });
   }
 }
-
-VectorStyleLegend.propTypes = {
-  loadRows: PropTypes.func.isRequired,
-};

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 (
+      <RangedStyleLegendRow
+        header={this.props.style.renderStylePropertyLegendHeader()}
+        minLabel={this.state.minLabel}
+        maxLabel={this.state.maxLabel}
+        propertyLabel={getVectorStyleLabel(this.props.style.getStyleName())}
+        fieldLabel={this.state.label}
+      />
+    );
+  }
+}

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 <ColorGradient colorRampName={this._options.color} />;
     } else {

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();

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 <DynamicLegendRow style={this} formatField={formatField} />;
+  }
 }