From b12ac2f7e8b522c22c92cb08e23be3a76b4a08ab Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Tue, 30 Oct 2018 21:30:52 -0400
Subject: [PATCH 1/2] traceTypesConfig as prop

---
 src/components/fields/TraceSelector.js      |  1 +
 src/components/widgets/TraceTypeSelector.js | 16 +++++++---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/fields/TraceSelector.js b/src/components/fields/TraceSelector.js
index 48c02e958..00270429c 100644
--- a/src/components/fields/TraceSelector.js
+++ b/src/components/fields/TraceSelector.js
@@ -118,6 +118,7 @@ class TraceSelector extends Component {
                 handleClick={() =>
                   this.context.openModal(TraceTypeSelector, {
                     ...props,
+                    traceTypesConfig: this.context.traceTypesConfig,
                     glByDefault: this.context.glByDefault,
                   })
                 }
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index 7a5883065..951f0454c 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -138,12 +138,10 @@ class TraceTypeSelector extends Component {
 
   renderCategories() {
     const {fullValue} = this.props;
+    const {mapBoxAccess, localize: _, chartHelp} = this.context;
     const {
       traceTypesConfig: {traces, categories, complex},
-      mapBoxAccess,
-      localize: _,
-      chartHelp,
-    } = this.context;
+    } = this.props;
 
     return categories(_).map((category, i) => {
       let items = traces(_)
@@ -192,10 +190,10 @@ class TraceTypeSelector extends Component {
 
   renderSingleBlock() {
     const {fullValue} = this.props;
+    const {localize: _} = this.context;
     const {
       traceTypesConfig: {traces, complex},
-      localize: _,
-    } = this.context;
+    } = this.props;
 
     const items = traces(_).map(item => (
       <Item
@@ -225,10 +223,10 @@ class TraceTypeSelector extends Component {
   }
 
   render() {
+    const {localize: _} = this.context;
     const {
       traceTypesConfig: {categories},
-      localize: _,
-    } = this.context;
+    } = this.props;
 
     return (
       <Modal title={_('Select Trace Type')}>
@@ -243,9 +241,9 @@ TraceTypeSelector.propTypes = {
   fullValue: PropTypes.string,
   fullContainer: PropTypes.object,
   glByDefault: PropTypes.bool,
+  traceTypesConfig: PropTypes.object,
 };
 TraceTypeSelector.contextTypes = {
-  traceTypesConfig: PropTypes.object,
   handleClose: PropTypes.func,
   localize: PropTypes.func,
   mapBoxAccess: PropTypes.bool,

From f20bd8666ede9e3299c9bc6c5eb7d3831e3afc24 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Tue, 30 Oct 2018 21:53:39 -0400
Subject: [PATCH 2/2] misc

---
 src/components/widgets/TraceTypeSelector.js   | 44 +++++++------------
 .../widgets/_trace-type-selector.scss         |  7 +++
 2 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index 951f0454c..d249d19b2 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -154,14 +154,11 @@ class TraceTypeSelector extends Component {
 
       const MAX_ITEMS = 4;
 
-      let columnClasses = 'trace-grid__column';
-
-      if (
+      const columnClasses =
         (items.length > MAX_ITEMS && !category.maxColumns) ||
         (category.maxColumns && category.maxColumns > 1)
-      ) {
-        columnClasses += ' trace-grid__column--double';
-      }
+          ? 'trace-grid__column trace-grid__column--double'
+          : 'trace-grid__column';
 
       return (
         <div className={columnClasses} key={i}>
@@ -195,29 +192,20 @@ class TraceTypeSelector extends Component {
       traceTypesConfig: {traces, complex},
     } = this.props;
 
-    const items = traces(_).map(item => (
-      <Item
-        key={item.value}
-        complex={complex}
-        active={fullValue === item.value}
-        item={item}
-        actions={this.actions}
-        showActions={false}
-        handleClick={() => this.selectAndClose(item.value)}
-        style={{display: 'inline-block'}}
-      />
-    ));
-
     return (
-      <div
-        style={{
-          maxWidth: '460px',
-          display: 'flex',
-          flexFlow: 'wrap',
-          padding: '5px',
-        }}
-      >
-        {items}
+      <div className="trace-grid-single-block">
+        {traces(_).map(item => (
+          <Item
+            key={item.value}
+            complex={complex}
+            active={fullValue === item.value}
+            item={item}
+            actions={this.actions}
+            showActions={false}
+            handleClick={() => this.selectAndClose(item.value)}
+            style={{display: 'inline-block'}}
+          />
+        ))}
       </div>
     );
   }
diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss
index ab2de3427..6a77f6288 100644
--- a/src/styles/components/widgets/_trace-type-selector.scss
+++ b/src/styles/components/widgets/_trace-type-selector.scss
@@ -4,6 +4,13 @@ $label-height: 34px;
 $row-height: $image-size + $label-height + $default-half-spacing-unit +
   $default-quarter-spacing-unit;
 
+.trace-grid-single-block {
+  max-width: 460px;
+  display: flex;
+  flex-flow: wrap;
+  padding: var(--spacing-quarter-unit);
+}
+
 .trace-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);