update adv trace selector button, other misc cleanup

Author: aulneau

src/components/fields/TraceSelector.js

@@ -95,13 +95,14 @@ class TraceSelector extends Component {
       options: this.traceOptions,
       clearable: false,
     });
-    // Check and see if the advanced slector prop is true
+    // Check and see if the advanced selector prop is true
     const {advancedTraceTypeSelector} = this.context;
     if (advancedTraceTypeSelector) {
       return (
         <Field {...props}>
           <TraceTypeSelectorButton
             {...props}
+            traceSelectorConfig={this.context.traceSelectorConfig}
             handleClick={() => this.context.openModal(TraceTypeSelector, props)}
           />
         </Field>
@@ -115,6 +116,7 @@ class TraceSelector extends Component {
 TraceSelector.contextTypes = {
   openModal: PropTypes.func,
   advancedTraceTypeSelector: PropTypes.bool,
+  traceSelectorConfig: PropTypes.object,
   plotSchema: PropTypes.object,
   config: PropTypes.object,
 };

src/components/widgets/TraceTypeSelector.js

@@ -2,25 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
 import Modal from 'components/containers/Modal';
-import {
-  traceTypeToPlotlyInitFigure,
-  localize,
-  plotlyTraceToCustomTrace,
-  renderTraceIcon,
-} from 'lib';
-
-export const TraceTypeSelectorButton = ({handleClick, fullValue, options}) => {
-  const Icon = renderTraceIcon(fullValue);
-  const {label} = options.find(type => type.value ===  fullValue)
-  return (
-    <div className="trace-type-select-button" onClick={() => handleClick()}>
-      <div className="trace-type-select-button__icon">
-        <Icon />
-      </div>
-      {label}
-    </div>
-  );
-};
+import {traceTypeToPlotlyInitFigure, localize, renderTraceIcon} from 'lib';
 
 const actions = ({value}) => [
   {
@@ -133,11 +115,48 @@ class TraceTypeSelector extends Component {
   }
 }
 
+class TraceTypeButton extends React.Component {
+  render() {
+    const {
+      handleClick,
+      fullValue,
+      localize: _,
+      traceSelectorConfig: {traces},
+    } = this.props;
+
+    const {label, icon, value} = traces(_).find(
+      type => type.value === fullValue
+    );
+
+    const Icon = renderTraceIcon(icon ? icon : value);
+
+    return (
+      <div
+        className="trace-type-select-button"
+        onClick={handleClick ? () => handleClick() : null}
+      >
+        <div className="trace-type-select-button__icon">
+          <Icon />
+        </div>
+        {label}
+      </div>
+    );
+  }
+}
+
+export const TraceTypeSelectorButton = localize(TraceTypeButton);
+
 TraceTypeSelector.propTypes = {
   updateContainer: PropTypes.func,
   fullValue: PropTypes.string,
   localize: PropTypes.func,
 };
+TraceTypeButton.propTypes = {
+  handleClick: PropTypes.func.isRequired,
+  fullValue: PropTypes.string.isRequired,
+  localize: PropTypes.func.isRequired,
+  traceSelectorConfig: PropTypes.object.isRequired,
+};
 TraceTypeSelector.contextTypes = {
   traceSelectorConfig: PropTypes.object,
   handleClose: PropTypes.func,

src/lib/traceTypes.js

@@ -189,19 +189,19 @@ export const traceTypes = _ => [
   {
     value: 'scattergl',
     icon: 'scatter',
-    label: _('Scatter'),
+    label: _('Scatter GL'),
     category: chartCategory(_).WEB_GL,
   },
   {
     value: 'scatterpolarghl',
     icon: 'scatterpolar',
-    label: _('Scatter Polar'),
+    label: _('Scatter Polar GL'),
     category: chartCategory(_).WEB_GL,
   },
   {
     value: 'heatmapgl',
     icon: 'heatmap',
-    label: _('Heatmap'),
+    label: _('Heatmap GL'),
     category: chartCategory(_).WEB_GL,
   },
 ];