[Maps] Move legend rendering to style property (#53173)

Author: thomasneirynck

x-pack/legacy/plugins/maps/public/layers/styles/components/style_legend_row.js renamed to x-pack/legacy/plugins/maps/public/layers/styles/components/ranged_style_legend_row.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSpacer, EuiToolTip } from '@elastic/eui';
 
-export function StyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) {
+export function RangedStyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) {
   return (
     <div>
       <EuiSpacer size="xs" />
@@ -39,7 +39,7 @@ export function StyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fiel
   );
 }
 
-StyleLegendRow.propTypes = {
+RangedStyleLegendRow.propTypes = {
   header: PropTypes.node.isRequired,
   minLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   maxLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).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/style_property_legend_row.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,26 @@ export class VectorStyleLegend extends Component {
   }
 
   _loadRows = _.debounce(async () => {
-    const rows = await this.props.loadRows();
-    const rowDescriptors = rows.map(row => {
+    const styles = await this.props.getLegendDetailStyleProperties();
+    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()}</Fragment>;
     });
   }
 }
-
-VectorStyleLegend.propTypes = {
-  loadRows: PropTypes.func.isRequired,
-};

x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js

@@ -0,0 +1,81 @@
+/*
+ * 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 = '';
+
+export class DynamicLegendRow extends React.Component {
+  constructor() {
+    super();
+    this._isMounted = false;
+    this.state = {
+      label: EMPTY_VALUE,
+    };
+  }
+
+  async _loadParams() {
+    const label = await this.props.style.getField().getLabel();
+    const newState = { label };
+    if (this._isMounted && !_.isEqual(this.state, newState)) {
+      this.setState(newState);
+    }
+  }
+
+  componentDidUpdate() {
+    this._loadParams();
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
+  componentDidMount() {
+    this._isMounted = true;
+    this._loadParams();
+  }
+
+  _formatValue(value) {
+    if (value === EMPTY_VALUE) {
+      return value;
+    }
+    return this.props.style.formatField(value);
+  }
+
+  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 min = this._formatValue(_.get(range, 'min', EMPTY_VALUE));
+      minLabel =
+        this.props.style.isFieldMetaEnabled() && range && range.isMinOutsideStdRange
+          ? `< ${min}`
+          : min;
+
+      const max = this._formatValue(_.get(range, 'max', EMPTY_VALUE));
+      maxLabel =
+        this.props.style.isFieldMetaEnabled() && range && range.isMaxOutsideStdRange
+          ? `> ${max}`
+          : max;
+    }
+
+    return (
+      <RangedStyleLegendRow
+        header={this.props.style.renderLegendHeader()}
+        minLabel={minLabel}
+        maxLabel={maxLabel}
+        propertyLabel={getVectorStyleLabel(this.props.style.getStyleName())}
+        fieldLabel={this.state.label}
+      />
+    );
+  }
+}

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/components/dynamic_legend_row.js

@@ -111,7 +111,7 @@ export class DynamicColorProperty extends DynamicStyleProperty {
     return getColorRampStops(this._options.color);
   }
 
-  renderHeader() {
+  renderLegendHeader() {
     if (this._options.color) {
       return <ColorGradient colorRampName={this._options.color} />;
     } else {

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.js

@@ -121,7 +121,7 @@ export class DynamicSizeProperty extends DynamicStyleProperty {
     );
   }
 
-  renderHeader() {
+  renderLegendHeader() {
     let icons;
     if (this.getStyleName() === VECTOR_STYLES.LINE_WIDTH) {
       icons = getLineWidthIcons();

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_size_property.js

@@ -8,13 +8,21 @@ 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, getFieldFormatter) {
     super(options, styleName);
     this._field = field;
+    this._getFieldMeta = getFieldMeta;
+    this._getFieldFormatter = getFieldFormatter;
+  }
+
+  getFieldMeta() {
+    return this._getFieldMeta && this._field ? this._getFieldMeta(this._field.getName()) : null;
   }
 
   getField() {
@@ -105,4 +113,18 @@ export class DynamicStyleProperty extends AbstractStyleProperty {
       isMaxOutsideStdRange: stats.max > stdUpperBounds,
     };
   }
+
+  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 <DynamicLegendRow style={this} />;
+  }
 }

x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_style_property.js

@@ -24,6 +24,10 @@ export class AbstractStyleProperty {
     return true;
   }
 
+  formatField(value) {
+    return value;
+  }
+
   getStyleName() {
     return this._styleName;
   }
@@ -32,7 +36,11 @@ export class AbstractStyleProperty {
     return this._options || {};
   }
 
-  renderHeader() {
+  renderLegendHeader() {
+    return null;
+  }
+
+  renderLegendDetailRow() {
     return null;
   }
 }