change from select to custom button for advanced trace selector

Author: aulneau

src/components/fields/TraceSelector.js

@@ -8,7 +8,10 @@ import {
   plotlyTraceToCustomTrace,
   computeTraceOptionsFromSchema,
 } from 'lib';
-import TraceTypeSelector from 'components/widgets/TraceTypeSelector';
+import TraceTypeSelector, {
+  TraceTypeSelectorButton,
+} from 'components/widgets/TraceTypeSelector';
+import Field from './Field';
 
 class TraceSelector extends Component {
   constructor(props, context) {
@@ -96,12 +99,12 @@ class TraceSelector extends Component {
     const {advancedTraceTypeSelector} = this.context;
     if (advancedTraceTypeSelector) {
       return (
-        <div
-          className="trace-type-select-dropdown__wrapper"
-          onClick={() => this.context.openModal(TraceTypeSelector, props)}
-        >
-          <UnconnectedDropdown {...props} />
-        </div>
+        <Field {...props}>
+          <TraceTypeSelectorButton
+            {...props}
+            handleClick={() => this.context.openModal(TraceTypeSelector, props)}
+          />
+        </Field>
       );
     }
 

src/components/widgets/TraceTypeSelector.js

@@ -1,8 +1,26 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
-import Modal, {ModalContent} from 'components/containers/Modal';
-import {traceTypeToPlotlyInitFigure, localize} from 'lib';
+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>
+  );
+};
 
 const actions = ({value}) => [
   {
@@ -44,7 +62,7 @@ const renderActionItems = (actionItems, item) =>
  * Trace Type Item
  */
 const Item = ({item, active, handleClick}) => {
-  const {label, value} = item;
+  const {label, value, icon} = item;
   return (
     <div
       className={`trace-item${active ? ' trace-item--active' : ''}`}
@@ -54,7 +72,7 @@ const Item = ({item, active, handleClick}) => {
         {actions ? renderActionItems(actions, item) : null}
       </div>
       <div className="trace-item__image">
-        <img src={`/_temp/ic-${value}.svg`} />
+        <img src={`/_temp/ic-${icon ? icon : value}.svg`} />
       </div>
       <div className="trace-item__label">{label}</div>
     </div>
@@ -109,7 +127,7 @@ class TraceTypeSelector extends Component {
   render() {
     return (
       <Modal title="Select Chart Type">
-          <div className="trace-grid">{this.renderCategories()}</div>
+        <div className="trace-grid">{this.renderCategories()}</div>
       </Modal>
     );
   }

src/lib/traceTypes.js

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

src/styles/components/widgets/trace-type-selector.scss renamed to src/styles/components/widgets/_trace-type-selector.scss

@@ -175,3 +175,28 @@ $item-size: 90px;
     }
   }
 }
+
+.trace-type-select-button {
+  display: flex;
+  align-items: center;
+  border: var(--border-default);
+  width: 100%;
+  height: 36px;
+  border-radius: var(--border-radius);
+  padding: 0 var(--spacing-quarter-unit);
+  &:hover{
+    cursor: pointer;
+    border-color: var(--color-border-dark);
+  }
+  &__icon {
+    max-width: 20px;
+    margin-right: var(--spacing-quarter-unit);
+    svg {
+      max-width: 100%;
+      display: block;
+      *{
+        fill: currentColor;
+      }
+    }
+  }
+}