[explorev2] using label in 'Visualization Type' Select instead of key (…

…#1927) * [explorev2] using label in 'Visualization Type' Select * moved url related logic upstream in the caller * moved option creation logic from render method to the constructor as it only needs to be executed once * Refactoring out getOptions
apache · Jan 12, 2017 · ff4020e · ff4020e
1 parent 0ce7fc1
commit ff4020e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/superset/assets/javascripts/explorev2/components/SelectField.jsx b/superset/assets/javascripts/explorev2/components/SelectField.jsx
@@ -27,6 +27,12 @@ const defaultProps = {
 };
 
 export default class SelectField extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { options: this.getOptions() };
+    this.onChange = this.onChange.bind(this);
+    this.renderOption = this.renderOption.bind(this);
+  }
   onChange(opt) {
     let optionValue = opt ? opt.value : null;
     // if multi, return options values as an array
@@ -35,24 +41,21 @@ export default class SelectField extends React.Component {
     }
     this.props.onChange(optionValue);
   }
-  renderOption(opt) {
-    if (this.props.name === 'viz_type') {
-      const url = `/static/assets/images/viz_thumbnails/${opt.value}.png`;
-      return (
-        <div>
-          <img className="viz-thumb-option" src={url} alt={opt.value} />
-          <span>{opt.value}</span>
-        </div>
-      );
-    }
-    return opt.label;
-  }
-  render() {
-    const choices = this.props.choices;
-    const options = choices.map((c) => ({ value: c[0], label: c[1] }));
+  getOptions() {
+    const options = this.props.choices.map((c) => {
+      let label = c[0];
+      if (c.length > 1) {
+        label = c[1];
+      }
+      return {
+        value: c[0],
+        label,
+        imgSrc: c[2],
+      };
+    });
     if (this.props.freeForm) {
       // For FreeFormSelect, insert value into options if not exist
-      const values = choices.map((c) => c[0]);
+      const values = this.props.choices.map((c) => c[0]);
       if (this.props.value) {
         if (typeof this.props.value === 'object') {
           this.props.value.forEach((v) => {
@@ -67,22 +70,35 @@ export default class SelectField extends React.Component {
         }
       }
     }
-
+    return options;
+  }
+  renderOption(opt) {
+    if (opt.imgSrc) {
+      return (
+        <div>
+          <img className="viz-thumb-option" src={opt.imgSrc} alt={opt.value} />
+          <span>{opt.label}</span>
+        </div>
+      );
+    }
+    return opt.label;
+  }
+  render() {
+    //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
     const selectProps = {
       multi: this.props.multi,
       name: `select-${this.props.name}`,
-      placeholder: `Select (${choices.length})`,
-      options,
+      placeholder: `Select (${this.state.options.length})`,
+      options: this.state.options,
       value: this.props.value,
       autosize: false,
       clearable: this.props.clearable,
-      onChange: this.onChange.bind(this),
-      optionRenderer: this.renderOption.bind(this),
+      onChange: this.onChange,
+      optionRenderer: this.renderOption,
     };
     //  Tab, comma or Enter will trigger a new option created for FreeFormSelect
     const selectWrap = this.props.freeForm ?
       (<Creatable {...selectProps} />) : (<Select {...selectProps} />);
-
     return (
       <div>
         {selectWrap}

diff --git a/superset/assets/javascripts/explorev2/stores/fields.js b/superset/assets/javascripts/explorev2/stores/fields.js
@@ -44,7 +44,11 @@ export const fields = {
     label: 'Visualization Type',
     clearable: false,
     default: 'table',
-    choices: formatSelectOptions(Object.keys(visTypes)),
+    choices: Object.keys(visTypes).map(vt => [
+      vt,
+      visTypes[vt].label,
+      `/static/assets/images/viz_thumbnails/${vt}.png`,
+    ]),
     description: 'The type of visualization to display',
   },