[explore] improve metric(s) and groupby(s) controls (#2921)

* [explore] improve metric(s) and groupby(s) controls

- surface verbose_name, description & expression in controls
- [table viz] surface verbose name in table header

* Fixing tests

* Addressing comments

* Fixing tests (once more)

superset/assets/javascripts/explore/components/ChartContainer.jsx

@@ -69,14 +69,15 @@ class ChartContainer extends React.PureComponent {
   getMockedSliceObject() {
     const props = this.props;
     const getHeight = () => {
-      const headerHeight = this.props.standalone ? 0 : 100;
+      const headerHeight = props.standalone ? 0 : 100;
       return parseInt(props.height, 10) - headerHeight;
     };
     return {
-      viewSqlQuery: this.props.queryResponse.query,
+      viewSqlQuery: props.queryResponse.query,
       containerId: props.containerId,
+      datasource: props.datasource,
       selector: this.state.selector,
-      formData: this.props.formData,
+      formData: props.formData,
       container: {
         html: (data) => {
           // this should be a callback to clear the contents of the slice container
@@ -128,10 +129,9 @@ class ChartContainer extends React.PureComponent {
       },
 
       data: {
-        csv_endpoint: getExploreUrl(this.props.formData, 'csv'),
-        json_endpoint: getExploreUrl(this.props.formData, 'json'),
-        standalone_endpoint: getExploreUrl(
-          this.props.formData, 'standalone'),
+        csv_endpoint: getExploreUrl(props.formData, 'csv'),
+        json_endpoint: getExploreUrl(props.formData, 'json'),
+        standalone_endpoint: getExploreUrl(props.formData, 'standalone'),
       },
 
     };
@@ -308,6 +308,7 @@ function mapStateToProps(state) {
     chartStatus: state.chartStatus,
     chartUpdateEndTime: state.chartUpdateEndTime,
     chartUpdateStartTime: state.chartUpdateStartTime,
+    datasource: state.datasource,
     column_formats: state.datasource ? state.datasource.column_formats : null,
     containerId: state.slice ? `slice-container-${state.slice.slice_id}` : 'slice-container',
     formData,

superset/assets/javascripts/explore/components/controls/SelectControl.jsx

@@ -15,6 +15,10 @@ const propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   showHeader: PropTypes.bool,
+  optionRenderer: PropTypes.func,
+  valueRenderer: PropTypes.func,
+  valueKey: PropTypes.string,
+  options: PropTypes.array,
 };
 
 const defaultProps = {
@@ -27,6 +31,9 @@ const defaultProps = {
   multi: false,
   onChange: () => {},
   showHeader: true,
+  optionRenderer: opt => opt.label,
+  valueRenderer: opt => opt.label,
+  valueKey: 'value',
 };
 
 export default class SelectControl extends React.PureComponent {
@@ -42,14 +49,17 @@ export default class SelectControl extends React.PureComponent {
     }
   }
   onChange(opt) {
-    let optionValue = opt ? opt.value : null;
+    let optionValue = opt ? opt[this.props.valueKey] : null;
     // if multi, return options values as an array
     if (this.props.multi) {
-      optionValue = opt ? opt.map(o => o.value) : null;
+      optionValue = opt ? opt.map(o => o[this.props.valueKey]) : null;
     }
     this.props.onChange(optionValue);
   }
   getOptions(props) {
+    if (props.options) {
+      return props.options;
+    }
     // Accepts different formats of input
     const options = props.choices.map((c) => {
       let option;
@@ -94,11 +104,13 @@ export default class SelectControl extends React.PureComponent {
       placeholder: `Select (${this.state.options.length})`,
       options: this.state.options,
       value: this.props.value,
+      valueKey: this.props.valueKey,
       autosize: false,
       clearable: this.props.clearable,
       isLoading: this.props.isLoading,
       onChange: this.onChange,
-      optionRenderer: opt => opt.label,
+      optionRenderer: this.props.optionRenderer,
+      valueRenderer: this.props.valueRenderer,
     };
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
     const selectWrap = this.props.freeForm ?

superset/assets/javascripts/explore/stores/controls.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { formatSelectOptionsForRange, formatSelectOptions } from '../../modules/utils';
 import * as v from '../validators';
+import MetricOption from '../../components/MetricOption';
+import ColumnOption from '../../components/ColumnOption';
 
 const D3_FORMAT_DOCS = 'D3 format syntax: https://github.com/d3/d3-format';
 
@@ -18,6 +20,7 @@ const ROW_LIMIT_OPTIONS = [10, 50, 100, 250, 500, 1000, 5000, 10000, 50000];
 
 const SERIES_LIMITS = [0, 5, 10, 25, 50, 100, 500];
 
+
 export const TIME_STAMP_OPTIONS = [
   ['smart_date', 'Adaptative formating'],
   ['%m/%d/%Y', '%m/%d/%Y | 01/14/2019'],
@@ -58,10 +61,13 @@ export const controls = {
     multi: true,
     label: 'Metrics',
     validators: [v.nonEmpty],
+    valueKey: 'metric_name',
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
     default: control =>
       control.choices && control.choices.length > 0 ? [control.choices[0][0]] : null,
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : [],
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
     description: 'One or many metrics to display',
   },
@@ -92,21 +98,29 @@ export const controls = {
     label: 'Metric',
     clearable: false,
     description: 'Choose the metric',
+    validators: [v.nonEmpty],
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
+    valueKey: 'metric_name',
     default: control =>
       control.choices && control.choices.length > 0 ? control.choices[0][0] : null,
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : null,
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
   },
 
   metric_2: {
     type: 'SelectControl',
     label: 'Right Axis Metric',
-    choices: [],
-    default: [],
+    default: null,
+    validators: [v.nonEmpty],
+    clearable: true,
     description: 'Choose a metric for right axis',
+    valueKey: 'metric_name',
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : [],
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
   },
 
@@ -311,8 +325,11 @@ export const controls = {
     label: 'Group by',
     default: [],
     description: 'One or many controls to group by',
+    optionRenderer: c => <ColumnOption column={c} />,
+    valueRenderer: c => <ColumnOption column={c} />,
+    valueKey: 'column_name',
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.gb_cols : [],
+      options: (state.datasource) ? state.datasource.columns : [],
     }),
   },
 
@@ -650,10 +667,14 @@ export const controls = {
   x: {
     type: 'SelectControl',
     label: 'X Axis',
-    default: null,
     description: 'Metric assigned to the [X] axis',
+    default: null,
+    validators: [v.nonEmpty],
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
+    valueKey: 'metric_name',
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : [],
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
   },
 
@@ -662,8 +683,12 @@ export const controls = {
     label: 'Y Axis',
     default: null,
     description: 'Metric assigned to the [Y] axis',
+    validators: [v.nonEmpty],
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
+    valueKey: 'metric_name',
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : [],
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
   },
 
@@ -671,8 +696,12 @@ export const controls = {
     type: 'SelectControl',
     label: 'Bubble Size',
     default: null,
+    validators: [v.nonEmpty],
+    optionRenderer: m => <MetricOption metric={m} />,
+    valueRenderer: m => <MetricOption metric={m} />,
+    valueKey: 'metric_name',
     mapStateToProps: state => ({
-      choices: (state.datasource) ? state.datasource.metrics_combo : [],
+      options: (state.datasource) ? state.datasource.metrics : [],
     }),
   },