From 7911d0d7e68fe65b9f78dcbedd85d06af4e77848 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Tue, 6 Feb 2018 16:57:24 -0500
Subject: [PATCH 1/8] stubbing in tabs

---
 package.json                                |  1 +
 src/components/containers/TraceAccordion.js | 24 ++++++++++++++++++++-
 src/default_panels/StyleTracesPanel.js      |  2 +-
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 66b0dcc8e..76f2193ef 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "react-colorscales": "^0.4.2",
     "react-dom": "^16.2.0",
     "react-select": "^1.0.0-rc.10",
+    "react-tabs": "^2.2.1",
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 9dfbbeaa9..80b357992 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -5,13 +5,20 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import {connectTraceToPlot, localize} from 'lib';
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
 const TraceFold = connectTraceToPlot(Fold);
 
 class TraceAccordion extends Component {
   render() {
     const {data = []} = this.context;
-    const {canAdd, children, messageIfEmptyFold, localize: _} = this.props;
+    const {
+      canAdd,
+      canGroup,
+      children,
+      messageIfEmptyFold,
+      localize: _,
+    } = this.props;
 
     const content =
       data.length &&
@@ -41,6 +48,20 @@ class TraceAccordion extends Component {
       };
       return <Panel addAction={addAction}>{content ? content : null}</Panel>;
     }
+    if (canGroup) {
+      return (
+        <TraceRequiredPanel>
+          <Tabs>
+            <TabList>
+              <Tab>Grouped</Tab>
+              <Tab>Individual</Tab>
+            </TabList>
+            <TabPanel>a{content ? content : null}</TabPanel>
+            <TabPanel>b{content ? content : null}</TabPanel>
+          </Tabs>
+        </TraceRequiredPanel>
+      );
+    }
     return <TraceRequiredPanel>{content ? content : null}</TraceRequiredPanel>;
   }
 }
@@ -53,6 +74,7 @@ TraceAccordion.propTypes = {
   localize: PropTypes.func,
   children: PropTypes.node,
   canAdd: PropTypes.bool,
+  canGroup: PropTypes.bool,
   messageIfEmptyFold: PropTypes.string,
 };
 
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 1f16a97e3..89425a00a 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -26,7 +26,7 @@ import {
 import {localize} from '../lib';
 
 const StyleTracesPanel = ({localize: _}) => (
-  <TraceAccordion>
+  <TraceAccordion canGroup>
     <Section name={_('Trace')} attr="name">
       <TextEditor label={_('Name')} attr="name" richTextOnly />
       <TraceOrientation

From 6cb36ff41651abe1b33e9c08efb02e14fcd987db Mon Sep 17 00:00:00 2001
From: Thomas Osmonson <thomas.osmonson@gmail.com>
Date: Tue, 6 Feb 2018 16:32:55 -0600
Subject: [PATCH 2/8] style tabs

---
 src/components/containers/Panel.js           |  5 +-
 src/components/containers/TraceAccordion.js  |  4 +-
 src/styles/components/containers/_main.scss  |  1 +
 src/styles/components/containers/_panel.scss | 10 +++
 src/styles/components/containers/_tabs.scss  | 82 ++++++++++++++++++++
 5 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/components/containers/_tabs.scss

diff --git a/src/components/containers/Panel.js b/src/components/containers/Panel.js
index e0458802f..8bf5c47a0 100644
--- a/src/components/containers/Panel.js
+++ b/src/components/containers/Panel.js
@@ -87,6 +87,8 @@ class Panel extends Component {
   render() {
     const {individualFoldStates, hasError} = this.state;
 
+    const {tabs} = this.props;
+
     if (hasError) {
       return <PanelError />;
     }
@@ -106,7 +108,7 @@ class Panel extends Component {
     );
 
     return (
-      <div className={bem('panel')}>
+      <div className={`panel${tabs ? ' panel--with-tabs' : ''}`}>
         <PanelHeader
           addAction={this.props.addAction}
           allowCollapse={
@@ -125,6 +127,7 @@ Panel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
+  tabs: PropTypes.bool,
 };
 
 Panel.defaultProps = {
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 80b357992..c880ccef0 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -50,14 +50,16 @@ class TraceAccordion extends Component {
     }
     if (canGroup) {
       return (
-        <TraceRequiredPanel>
+        <TraceRequiredPanel tabs>
           <Tabs>
             <TabList>
               <Tab>Grouped</Tab>
               <Tab>Individual</Tab>
+              <Tab>A third longer one</Tab>
             </TabList>
             <TabPanel>a{content ? content : null}</TabPanel>
             <TabPanel>b{content ? content : null}</TabPanel>
+            <TabPanel>c{content ? content : null}</TabPanel>
           </Tabs>
         </TraceRequiredPanel>
       );
diff --git a/src/styles/components/containers/_main.scss b/src/styles/components/containers/_main.scss
index 93140140e..fde545d50 100644
--- a/src/styles/components/containers/_main.scss
+++ b/src/styles/components/containers/_main.scss
@@ -4,3 +4,4 @@
 @import "menupanel";
 @import "info";
 @import "modalbox";
+@import "tabs";
diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index 0bc1880e4..5734afbfd 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -8,7 +8,14 @@
   box-sizing: border-box;
   position: relative;
   width: calc(var(--panel-width));
+  display: flex;
+  flex-direction: column;
   @include scrollbar();
+  &__content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
   &__header {
     margin-bottom: var(--spacing-half-unit);
     display: flex;
@@ -75,4 +82,7 @@
       }
     }
   }
+  &--with-tabs {
+    padding: 0;
+  }
 }
diff --git a/src/styles/components/containers/_tabs.scss b/src/styles/components/containers/_tabs.scss
new file mode 100644
index 000000000..97beb8e04
--- /dev/null
+++ b/src/styles/components/containers/_tabs.scss
@@ -0,0 +1,82 @@
+.panel {
+  .react-tabs {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    &__tab {
+      &-list {
+        background: var(--color-background-medium);
+        margin: 0;
+        list-style: none;
+        display: flex;
+        padding-top: var(--spacing-half-unit);
+        padding-left: var(--spacing-half-unit);
+        padding-right: var(--spacing-half-unit);
+        padding-bottom: 0;
+      }
+      // Tab Styles
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-quarter-unit);
+      color: var(--color-text-base);
+      font-size: var(--font-size-base);
+      background: var(--color-background-medium);
+      border: var(--border-default);
+      border-bottom: 0;
+      position: relative;
+      background: var(--color-background-light);
+      transition: border-color 0.15s ease-in-out;
+
+      &:first-of-type {
+        border-top-left-radius: var(--border-radius);
+      }
+      &:last-of-type {
+        border-top-right-radius: var(--border-radius);
+      }
+
+
+      &:hover {
+        background-color: var(--color-background-base);
+        cursor: pointer;
+      }
+
+      &--selected {
+        background-color: var(--color-background-base);
+        pointer-events: none;
+        margin-top: 0;
+        color: var(--color-text-active);
+        border-top-color: var(--color-accent);
+        border-top-width: 2px;
+
+        &::before {
+          position: absolute;
+          top: 100%;
+          width: 100%;
+          height: 1px;
+          content: '';
+          background-color: var(--color-background-base);
+          left: 0;
+          z-index: 4;
+        }
+      }
+      &:not(:first-of-type):not(:last-of-type) {
+        border-left: 0;
+      }
+      &:last-of-type {
+        border-left: none;
+      }
+      &-panel {
+        padding: var(--spacing-half-unit);
+        border-top: var(--border-default);
+        display: none;
+        &--selected {
+          flex-grow: 1;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+  }
+}

From 9daa2a1a16510994961badff36396fbd481576b3 Mon Sep 17 00:00:00 2001
From: Thomas Osmonson <thomas.osmonson@gmail.com>
Date: Tue, 6 Feb 2018 16:39:40 -0600
Subject: [PATCH 3/8] prevent tabs from scaling, added overflow to tab panel

---
 src/styles/components/containers/_tabs.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/styles/components/containers/_tabs.scss b/src/styles/components/containers/_tabs.scss
index 97beb8e04..9455c21ed 100644
--- a/src/styles/components/containers/_tabs.scss
+++ b/src/styles/components/containers/_tabs.scss
@@ -1,5 +1,6 @@
 .panel {
   .react-tabs {
+    $tab-bar-height: 32px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
@@ -7,15 +8,19 @@
       &-list {
         background: var(--color-background-medium);
         margin: 0;
+        flex-shrink:0;
         list-style: none;
         display: flex;
+        align-items: flex-end;
         padding-top: var(--spacing-half-unit);
         padding-left: var(--spacing-half-unit);
         padding-right: var(--spacing-half-unit);
         padding-bottom: 0;
+        height: $tab-bar-height;
       }
       // Tab Styles
       flex-grow: 1;
+      flex-shrink:0;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -71,6 +76,8 @@
         padding: var(--spacing-half-unit);
         border-top: var(--border-default);
         display: none;
+        overflow-y: scroll;
+        @include scrollbar;
         &--selected {
           flex-grow: 1;
           display: flex;

From a8a0eae025808bb63daf6f91d26bc57c7dae55c3 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Wed, 7 Feb 2018 14:51:49 -0500
Subject: [PATCH 4/8] nested panels

---
 src/components/containers/TraceAccordion.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index c880ccef0..737711011 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -55,11 +55,13 @@ class TraceAccordion extends Component {
             <TabList>
               <Tab>Grouped</Tab>
               <Tab>Individual</Tab>
-              <Tab>A third longer one</Tab>
             </TabList>
-            <TabPanel>a{content ? content : null}</TabPanel>
-            <TabPanel>b{content ? content : null}</TabPanel>
-            <TabPanel>c{content ? content : null}</TabPanel>
+            <TabPanel>
+              <Panel>{content ? content : null}</Panel>
+            </TabPanel>
+            <TabPanel>
+              <Panel>{content ? content : null}</Panel>
+            </TabPanel>
           </Tabs>
         </TraceRequiredPanel>
       );

From 9b528c705d4f023a2f3658af383dfd9b4c8e0ac4 Mon Sep 17 00:00:00 2001
From: Thomas Osmonson <thomas.osmonson@gmail.com>
Date: Wed, 7 Feb 2018 14:12:11 -0600
Subject: [PATCH 5/8] minor css updates to help with panel tabs situation

---
 src/styles/components/containers/_panel.scss    | 3 ++-
 src/styles/components/containers/_tabs.scss     | 3 ---
 src/styles/components/widgets/_radio-block.scss | 2 ++
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index 5734afbfd..7573b5da3 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -1,6 +1,7 @@
 .panel {
   flex-grow: 1;
-  flex-shrink: 0;
+  //flex-shrink: 0;
+  overflow-x: hidden;
   background-color: var(--panel-background);
   overflow-y: auto;
   padding: var(--spacing-half-unit);
diff --git a/src/styles/components/containers/_tabs.scss b/src/styles/components/containers/_tabs.scss
index 9455c21ed..aafecdc1e 100644
--- a/src/styles/components/containers/_tabs.scss
+++ b/src/styles/components/containers/_tabs.scss
@@ -73,11 +73,8 @@
         border-left: none;
       }
       &-panel {
-        padding: var(--spacing-half-unit);
         border-top: var(--border-default);
         display: none;
-        overflow-y: scroll;
-        @include scrollbar;
         &--selected {
           flex-grow: 1;
           display: flex;
diff --git a/src/styles/components/widgets/_radio-block.scss b/src/styles/components/widgets/_radio-block.scss
index 9c4825ef7..762ee0af8 100644
--- a/src/styles/components/widgets/_radio-block.scss
+++ b/src/styles/components/widgets/_radio-block.scss
@@ -1,7 +1,9 @@
 .radio-block {
   width: 100%;
   line-height: var(--font-leading-head);
+  display: flex;
   &__option {
+    flex-grow: 1;
     padding: var(--spacing-quarter-unit) var(--spacing-half-unit);
     background-color: var(--color-background-top);
     border: var(--border-default);

From 9c3e5b900c46585dd276f9c0a5d74313e5ab3105 Mon Sep 17 00:00:00 2001
From: Thomas Osmonson <thomas.osmonson@gmail.com>
Date: Wed, 7 Feb 2018 14:22:08 -0600
Subject: [PATCH 6/8] update panel css, fix jump, remove panel css in
 _fold.scss

---
 src/styles/components/containers/_fold.scss  |  7 -------
 src/styles/components/containers/_panel.scss | 13 +++++++++----
 src/styles/variables/_layout.scss            |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss
index 6745c9e92..602eaacba 100644
--- a/src/styles/components/containers/_fold.scss
+++ b/src/styles/components/containers/_fold.scss
@@ -150,7 +150,6 @@
         font-family: var(--font-family-body);
         font-size: var(--font-size-small);
         text-align: center;
-        font-size: 13px;
         color: var(--color-text-base);
       }
     }
@@ -159,12 +158,6 @@
       border-width: 1px 1px 1px 1px;
     }
   }
-
-  .panel {
-    background-color: var(--fold-background);
-    border-right: none;
-    width: 100%;
-  }
 }
 
 .fold + .fold {
diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index 7573b5da3..77e6e8161 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -1,17 +1,21 @@
 .panel {
   flex-grow: 1;
-  //flex-shrink: 0;
   overflow-x: hidden;
-  background-color: var(--panel-background);
   overflow-y: auto;
   padding: var(--spacing-half-unit);
-  border-right: var(--border-default);
   box-sizing: border-box;
   position: relative;
-  width: calc(var(--panel-width));
   display: flex;
   flex-direction: column;
+  width: 100%;
   @include scrollbar();
+
+  @at-root .plotly-editor__wrapper > .panel {
+    // These are for the first panel
+    background-color: var(--panel-background);
+    border-right: var(--border-default);
+    width: calc(var(--panel-width));
+  }
   &__content {
     flex-grow: 1;
     display: flex;
@@ -20,6 +24,7 @@
   &__header {
     margin-bottom: var(--spacing-half-unit);
     display: flex;
+    flex-shrink: 0;
     &__content {
       flex-grow: 1;
     }
diff --git a/src/styles/variables/_layout.scss b/src/styles/variables/_layout.scss
index 811645680..8d03afacf 100644
--- a/src/styles/variables/_layout.scss
+++ b/src/styles/variables/_layout.scss
@@ -2,4 +2,4 @@
  * Layout
  */
 $layout-panel-width: 345px;
-$layout-sidebar-width: 100px;
+$layout-sidebar-width: 120px;

From 320aa6a6128a747dd89bb5c5965144708d6c93f1 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Wed, 7 Feb 2018 21:56:11 -0500
Subject: [PATCH 7/8] Group traces tab

---
 src/components/containers/TraceAccordion.js   | 55 +++++++++++++++----
 .../containers/__tests__/Fold-test.js         |  6 +-
 .../containers/__tests__/Layout-test.js       |  4 +-
 .../containers/__tests__/Section-test.js      | 24 ++++----
 src/components/fields/TraceSelector.js        |  5 +-
 .../fields/__tests__/CanvasSize-test.js       |  4 +-
 .../fields/__tests__/DataSelector-test.js     |  3 +-
 src/components/fields/__tests__/Radio-test.js |  4 +-
 .../fields/__tests__/TraceSelector-test.js    | 16 +++---
 src/default_panels/StyleColorbarsPanel.js     |  2 +-
 src/lib/__tests__/connectLayoutToPlot-test.js |  6 +-
 src/lib/__tests__/connectToContainer-test.js  |  2 +-
 src/lib/__tests__/connectTraceToPlot-test.js  |  8 +--
 .../nestedContainerConnections-test.js        | 20 +++++--
 src/lib/connectTraceToPlot.js                 | 30 ++++++----
 15 files changed, 120 insertions(+), 69 deletions(-)

diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 737711011..f49b60f74 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -4,14 +4,14 @@ import Panel from './Panel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
-import {connectTraceToPlot, localize} from 'lib';
+import {connectTraceToPlot, localize, plotlyTraceToCustomTrace} from 'lib';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
 const TraceFold = connectTraceToPlot(Fold);
 
 class TraceAccordion extends Component {
   render() {
-    const {data = []} = this.context;
+    const {data = [], fullData = []} = this.context;
     const {
       canAdd,
       canGroup,
@@ -20,13 +20,13 @@ class TraceAccordion extends Component {
       localize: _,
     } = this.props;
 
-    const content =
+    const individualTraces =
       data.length &&
       data.map((d, i) => {
         return (
           <TraceFold
             key={i}
-            traceIndex={i}
+            traceIndexes={[i]}
             canDelete={canAdd}
             messageIfEmpty={messageIfEmptyFold}
           >
@@ -46,31 +46,64 @@ class TraceAccordion extends Component {
           }
         },
       };
-      return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+      return (
+        <Panel addAction={addAction}>
+          {individualTraces ? individualTraces : null}
+        </Panel>
+      );
     }
-    if (canGroup) {
+    if (canGroup && data.length > 1) {
+      const tracesByGroup = data.reduce((allTraces, next, index) => {
+        const traceType = plotlyTraceToCustomTrace(
+          fullData.filter(trace => trace.index === index)[0]
+        );
+        if (!allTraces[traceType]) {
+          allTraces[traceType] = [];
+        }
+        allTraces[traceType].push(index);
+        return allTraces;
+      }, {});
+
+      const groupedTraces = Object.keys(tracesByGroup).map(
+        (traceType, index) => {
+          return (
+            <TraceFold
+              key={index}
+              traceIndexes={tracesByGroup[traceType]}
+              name={traceType}
+            >
+              {this.props.children}
+            </TraceFold>
+          );
+        }
+      );
       return (
         <TraceRequiredPanel tabs>
           <Tabs>
             <TabList>
-              <Tab>Grouped</Tab>
-              <Tab>Individual</Tab>
+              <Tab>{_('All Traces')}</Tab>
+              <Tab>{_('Individual')}</Tab>
             </TabList>
             <TabPanel>
-              <Panel>{content ? content : null}</Panel>
+              <Panel>{groupedTraces ? groupedTraces : null}</Panel>
             </TabPanel>
             <TabPanel>
-              <Panel>{content ? content : null}</Panel>
+              <Panel>{individualTraces ? individualTraces : null}</Panel>
             </TabPanel>
           </Tabs>
         </TraceRequiredPanel>
       );
     }
-    return <TraceRequiredPanel>{content ? content : null}</TraceRequiredPanel>;
+    return (
+      <TraceRequiredPanel>
+        {individualTraces ? individualTraces : null}
+      </TraceRequiredPanel>
+    );
   }
 }
 
 TraceAccordion.contextTypes = {
+  fullData: PropTypes.array,
   data: PropTypes.array,
 };
 
diff --git a/src/components/containers/__tests__/Fold-test.js b/src/components/containers/__tests__/Fold-test.js
index 2fcfe062c..753c9b4eb 100644
--- a/src/components/containers/__tests__/Fold-test.js
+++ b/src/components/containers/__tests__/Fold-test.js
@@ -11,7 +11,7 @@ describe('<Fold>', () => {
     const withoutDelete = mount(
       <TestEditor {...fixtures.scatter()}>
         <Panel>
-          <Fold foldIndex={0}>
+          <Fold>
             <Numeric attr="opacity" />
           </Fold>
         </Panel>
@@ -22,7 +22,7 @@ describe('<Fold>', () => {
     const withDelete = mount(
       <TestEditor {...fixtures.scatter()}>
         <Panel>
-          <TraceFold traceIndex={0} canDelete={true} foldIndex={0}>
+          <TraceFold traceIndexes={[0]} canDelete={true}>
             <Numeric attr="opacity" />
           </TraceFold>
         </Panel>
@@ -36,7 +36,7 @@ describe('<Fold>', () => {
     mount(
       <TestEditor {...fixtures.scatter()} beforeDeleteTrace={beforeDeleteTrace}>
         <Panel>
-          <TraceFold traceIndex={0} canDelete={true} foldIndex={0}>
+          <TraceFold traceIndexes={[0]} canDelete={true}>
             <Numeric attr="opacity" />
           </TraceFold>
         </Panel>
diff --git a/src/components/containers/__tests__/Layout-test.js b/src/components/containers/__tests__/Layout-test.js
index a71b87682..e1b6512be 100644
--- a/src/components/containers/__tests__/Layout-test.js
+++ b/src/components/containers/__tests__/Layout-test.js
@@ -15,7 +15,7 @@ Layouts.forEach(Layout => {
       const wrapper = mount(
         <Editor {...fixtures.scatter({layout: {width: 100}})}>
           <Panel>
-            <Layout foldIndex={0}>
+            <Layout>
               <Numeric label="Width" min={100} step={10} attr="width" />
             </Layout>
           </Panel>
@@ -35,7 +35,7 @@ Layouts.forEach(Layout => {
           {...fixtures.scatter({layout: {width: 100}})}
         >
           <Panel>
-            <Layout foldIndex={0}>
+            <Layout>
               <Numeric label="Width" min={100} step={10} attr="width" />
             </Layout>
           </Panel>
diff --git a/src/components/containers/__tests__/Section-test.js b/src/components/containers/__tests__/Section-test.js
index bb05d54ef..d95300503 100644
--- a/src/components/containers/__tests__/Section-test.js
+++ b/src/components/containers/__tests__/Section-test.js
@@ -14,7 +14,7 @@ describe('Section', () => {
     // mode is visible with scatter. Hole is not visible. Section should show.
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection traceIndex={0} name="test-section">
+        <TraceSection traceIndexes={[0]} name="test-section">
           <Flaglist
             attr="mode"
             options={[
@@ -64,9 +64,9 @@ describe('Section', () => {
     // pull and hole are not scatter attrs. Section should not show.
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection traceIndex={0} name="test-section">
-          <Numeric attr="pull" min={0} max={1} step={0.1} traceIndex={0} />
-          <Numeric attr="hole" min={0} max={1} step={0.1} traceIndex={0} />
+        <TraceSection traceIndexes={[0]} name="test-section">
+          <Numeric attr="pull" min={0} max={1} step={0.1} traceIndexes={[0]} />
+          <Numeric attr="hole" min={0} max={1} step={0.1} traceIndexes={[0]} />
         </TraceSection>
       </TestEditor>
     )
@@ -85,8 +85,8 @@ describe('Section', () => {
     const TraceSection = connectTraceToPlot(Section);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection name="test-section" traceIndex={0}>
-          <Numeric attr="opacity" traceIndex={0} />
+        <TraceSection name="test-section" traceIndexes={[0]}>
+          <Numeric attr="opacity" traceIndexes={[0]} />
           <MenuPanel show>
             <Info>INFO</Info>
           </MenuPanel>
@@ -106,8 +106,8 @@ describe('Section', () => {
     const TraceSection = connectTraceToPlot(Section);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection name="test-section" traceIndex={0}>
-          <Numeric attr="badattr" traceIndex={0} />
+        <TraceSection name="test-section" traceIndexes={[0]}>
+          <Numeric attr="badattr" traceIndexes={[0]} />
           <MenuPanel show>
             <Info>INFO</Info>
           </MenuPanel>
@@ -123,8 +123,8 @@ describe('Section', () => {
     const TraceSection = connectTraceToPlot(Section);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection name="test-section" traceIndex={0}>
-          <Numeric attr="badattr" traceIndex={0} />
+        <TraceSection name="test-section" traceIndexes={[0]}>
+          <Numeric attr="badattr" traceIndexes={[0]} />
           <Info>INFO</Info>
         </TraceSection>
       </TestEditor>
@@ -141,7 +141,7 @@ describe('TraceTypeSection', () => {
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection
           name="test-section"
-          traceIndex={0}
+          traceIndexes={[0]}
           traceTypes={['scatter']}
         >
           <Flaglist
@@ -164,7 +164,7 @@ describe('TraceTypeSection', () => {
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection
           name="test-section"
-          traceIndex={0}
+          traceIndexes={[0]}
           traceTypes={['heatmap']}
         >
           <Flaglist
diff --git a/src/components/fields/TraceSelector.js b/src/components/fields/TraceSelector.js
index e2fe7d69a..145b0fdcf 100644
--- a/src/components/fields/TraceSelector.js
+++ b/src/components/fields/TraceSelector.js
@@ -113,11 +113,14 @@ class TraceSelector extends Component {
     } else {
       this.traceOptions = [{label: _('Scatter'), value: 'scatter'}];
     }
-    this.fullValue = plotlyTraceToCustomTrace(props.container);
+    if (props.container) {
+      this.fullValue = plotlyTraceToCustomTrace(props.container);
+    }
   }
 
   setTraceDefaults(container, fullContainer, updateContainer) {
     if (
+      container &&
       container.uid &&
       !container.mode &&
       fullContainer._fullInput.type === 'scatter'
diff --git a/src/components/fields/__tests__/CanvasSize-test.js b/src/components/fields/__tests__/CanvasSize-test.js
index d915e3120..119b6a69e 100644
--- a/src/components/fields/__tests__/CanvasSize-test.js
+++ b/src/components/fields/__tests__/CanvasSize-test.js
@@ -13,7 +13,7 @@ describe('CanvasSize', () => {
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <LayoutPanel name="Layout">
-          <Fold name="Canvas" foldIndex={0}>
+          <Fold name="Canvas">
             <CanvasSize attr="width" />
           </Fold>
         </LayoutPanel>
@@ -28,7 +28,7 @@ describe('CanvasSize', () => {
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <LayoutPanel name="Layout">
-          <Fold name="Canvas" foldIndex={0}>
+          <Fold name="Canvas">
             <CanvasSize attr="width" />
           </Fold>
         </LayoutPanel>
diff --git a/src/components/fields/__tests__/DataSelector-test.js b/src/components/fields/__tests__/DataSelector-test.js
index 6be9e79f5..805a293d6 100644
--- a/src/components/fields/__tests__/DataSelector-test.js
+++ b/src/components/fields/__tests__/DataSelector-test.js
@@ -16,7 +16,6 @@ function render(overrides = {}, children) {
       {children}
     </TestEditor>
   )
-    .find(`[traceIndex=1]`)
     .find(`[attr="${attr}"]`)
     .last();
 }
@@ -64,7 +63,7 @@ describe('DataSelector', () => {
     const wrapper = render(
       {},
       <TraceDataSelector
-        traceIndex={1}
+        traceIndexes={[0]}
         label={{pie: 'hodor', '*': 'rodoh'}}
         attr="x"
       />
diff --git a/src/components/fields/__tests__/Radio-test.js b/src/components/fields/__tests__/Radio-test.js
index bb4018bde..e87b6b660 100644
--- a/src/components/fields/__tests__/Radio-test.js
+++ b/src/components/fields/__tests__/Radio-test.js
@@ -12,7 +12,7 @@ describe('<Radio>', () => {
   it('enables <Field> centering by default', () => {
     const wrapper = mount(
       <TestEditor plotly={plotly} {...fixtures.area()}>
-        <Trace traceIndex={0}>
+        <Trace traceIndexes={[0]}>
           <Radio
             label="Connect Gaps"
             attr="connectgaps"
@@ -31,7 +31,7 @@ describe('<Radio>', () => {
   it('permits <Field> centering to be disabled', () => {
     const wrapper = mount(
       <TestEditor plotly={plotly} {...fixtures.area()}>
-        <Trace traceIndex={0}>
+        <Trace traceIndexes={[0]}>
           <Radio
             center={false}
             label="Connect Gaps"
diff --git a/src/components/fields/__tests__/TraceSelector-test.js b/src/components/fields/__tests__/TraceSelector-test.js
index 97053083c..357f06c7f 100644
--- a/src/components/fields/__tests__/TraceSelector-test.js
+++ b/src/components/fields/__tests__/TraceSelector-test.js
@@ -16,7 +16,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -37,7 +37,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -59,7 +59,7 @@ describe('TraceSelector', () => {
 
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -77,7 +77,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -95,7 +95,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -113,7 +113,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps} plotly={plotly}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -133,7 +133,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
@@ -159,7 +159,7 @@ describe('TraceSelector', () => {
     };
     const wrapper = mount(
       <TestEditor {...editorProps}>
-        <TraceSection traceIndex={0}>
+        <TraceSection traceIndexes={[0]}>
           <TraceSelector attr="type" />
         </TraceSection>
       </TestEditor>
diff --git a/src/default_panels/StyleColorbarsPanel.js b/src/default_panels/StyleColorbarsPanel.js
index 5f3736315..311e97b92 100644
--- a/src/default_panels/StyleColorbarsPanel.js
+++ b/src/default_panels/StyleColorbarsPanel.js
@@ -18,7 +18,7 @@ import {
 import {localize} from '../lib';
 
 const StyleColorBarsPanel = ({localize: _}) => (
-  <TraceAccordion messageIfEmptyFold="Need a color for a colorbar!">
+  <TraceAccordion messageIfEmptyFold="Need a color scale for a colorbar!">
     <Radio
       attr="showscale"
       options={[
diff --git a/src/lib/__tests__/connectLayoutToPlot-test.js b/src/lib/__tests__/connectLayoutToPlot-test.js
index c0d560d82..7748f35c6 100644
--- a/src/lib/__tests__/connectLayoutToPlot-test.js
+++ b/src/lib/__tests__/connectLayoutToPlot-test.js
@@ -17,7 +17,7 @@ Layouts.forEach(Layout => {
       const wrapper = mount(
         <Editor {...fixtures.scatter({layout: {width: 100}})}>
           <Panel>
-            <Layout foldIndex={0}>
+            <Layout>
               <Numeric label="Width" step={10} attr="width" />
             </Layout>
           </Panel>
@@ -37,7 +37,7 @@ Layouts.forEach(Layout => {
           {...fixtures.scatter({layout: {width: 100}})}
         >
           <Panel>
-            <Layout foldIndex={0}>
+            <Layout>
               <Numeric label="Width" step={10} attr="width" />
             </Layout>
           </Panel>
@@ -60,7 +60,7 @@ Layouts.forEach(Layout => {
           {...fixtures.scatter({layout: {showlegend: true}})}
         >
           <Panel>
-            <Layout foldIndex={0}>
+            <Layout>
               <Numeric label="Position x" step={0.01} attr="legend.x" />
             </Layout>
           </Panel>
diff --git a/src/lib/__tests__/connectToContainer-test.js b/src/lib/__tests__/connectToContainer-test.js
index c56743294..30a54b110 100644
--- a/src/lib/__tests__/connectToContainer-test.js
+++ b/src/lib/__tests__/connectToContainer-test.js
@@ -20,7 +20,7 @@ describe('connectToContainer', () => {
 
     const numeric = mount(
       <TestEditor {...{...fixtureProps, onUpdate}}>
-        <ConnectedNumeric traceIndex={0} label="Opacity" attr="opacity" />
+        <ConnectedNumeric traceIndexes={[0]} label="Opacity" attr="opacity" />
       </TestEditor>
     ).find(Numeric);
 
diff --git a/src/lib/__tests__/connectTraceToPlot-test.js b/src/lib/__tests__/connectTraceToPlot-test.js
index 79236de8a..b38cf6719 100644
--- a/src/lib/__tests__/connectTraceToPlot-test.js
+++ b/src/lib/__tests__/connectTraceToPlot-test.js
@@ -19,7 +19,7 @@ Traces.forEach(Trace => {
       const wrapper = mount(
         <Editor {...fixtures.scatter()}>
           <Panel>
-            <Trace traceIndex={0} foldIndex={0}>
+            <Trace traceIndexes={[0]}>
               <Numeric label="Marker Size" attr="marker.size" />
             </Trace>
           </Panel>
@@ -36,7 +36,7 @@ Traces.forEach(Trace => {
       const wrapper = mount(
         <Editor beforeUpdateTraces={beforeUpdateTraces} {...fixtures.scatter()}>
           <Panel>
-            <Trace traceIndex={0} foldIndex={0}>
+            <Trace traceIndexes={[0]}>
               <Numeric label="Marker Size" attr="marker.size" />
             </Trace>
           </Panel>
@@ -58,7 +58,7 @@ Traces.forEach(Trace => {
       const wrapper = mount(
         <Editor {...fixtures.scatter()}>
           <Panel>
-            <Trace traceIndex={0} foldIndex={0}>
+            <Trace traceIndexes={[0]}>
               <Numeric label="marker size" attr="marker.size" />
             </Trace>
           </Panel>
@@ -76,7 +76,7 @@ Traces.forEach(Trace => {
       const wrapper = mount(
         <Editor {...fixtures.scatter({data: [{name}]})}>
           <Panel>
-            <Trace traceIndex={0} foldIndex={0} />
+            <Trace traceIndexes={[0]} />
           </Panel>
         </Editor>
       )
diff --git a/src/lib/__tests__/nestedContainerConnections-test.js b/src/lib/__tests__/nestedContainerConnections-test.js
index 24d6425b0..221956fd0 100644
--- a/src/lib/__tests__/nestedContainerConnections-test.js
+++ b/src/lib/__tests__/nestedContainerConnections-test.js
@@ -41,7 +41,7 @@ describe('Plot Connection', () => {
     );
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout}}>
-        <TraceLayoutNumeric traceIndex={0} label="Width" attr="width" />
+        <TraceLayoutNumeric traceIndexes={[0]} label="Width" attr="width" />
       </TestEditor>
     )
       .find('[attr="width"]')
@@ -70,7 +70,11 @@ describe('Plot Connection', () => {
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <Section name="Canvas">
-          <DeeplyConnectedNumeric traceIndex={0} label="Width" attr="width" />
+          <DeeplyConnectedNumeric
+            traceIndexes={[0]}
+            label="Width"
+            attr="width"
+          />
         </Section>
       </TestEditor>
     )
@@ -100,9 +104,13 @@ describe('Plot Connection', () => {
 
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout}}>
-        <TracePanel traceIndex={0}>
+        <TracePanel traceIndexes={[0]}>
           <Section name="Canvas">
-            <LayoutConnectedNumeric traceIndex={0} label="Width" attr="width" />
+            <LayoutConnectedNumeric
+              traceIndexes={[0]}
+              label="Width"
+              attr="width"
+            />
           </Section>
         </TracePanel>
       </TestEditor>
@@ -139,9 +147,9 @@ describe('Plot Connection', () => {
 
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
-        <TracePanel traceIndex={0}>
+        <TracePanel traceIndexes={[0]}>
           <Section name="Canvas">
-            <LayoutWidth traceIndex={0} label="Width" attr="width" />
+            <LayoutWidth traceIndexes={[0]} label="Width" attr="width" />
           </Section>
         </TracePanel>
       </TestEditor>
diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js
index 423c7f6e0..43050c3c2 100644
--- a/src/lib/connectTraceToPlot.js
+++ b/src/lib/connectTraceToPlot.js
@@ -24,11 +24,14 @@ export default function connectTraceToPlot(WrappedComponent) {
     }
 
     setLocals(props, context) {
-      const {traceIndex} = props;
+      const {traceIndexes} = props;
       const {data, fullData, plotly} = context;
 
-      const trace = data[traceIndex] || {};
-      const fullTraceIndex = findFullTraceIndex(fullData, traceIndex);
+      const trace = traceIndexes.length > 0 ? data[traceIndexes[0]] : {};
+      const fullTraceIndex =
+        traceIndexes.length > 0
+          ? findFullTraceIndex(fullData, traceIndexes[0])
+          : findFullTraceIndex(fullData, 0);
       const fullTrace = fullData[fullTraceIndex] || {};
 
       let getValObject;
@@ -53,12 +56,17 @@ export default function connectTraceToPlot(WrappedComponent) {
         container: trace,
         fullContainer: fullTrace,
       };
-      this.icon = renderTraceIcon(plotlyTraceToCustomTrace(trace));
-      this.name = fullTrace.name;
 
-      const DEFAULT_FIN_CHART_TRACE_NAME = ' - increasing';
-      if (fullTrace.name.indexOf(DEFAULT_FIN_CHART_TRACE_NAME) && !trace.name) {
-        this.name = fullTrace.name.replace(DEFAULT_FIN_CHART_TRACE_NAME, '');
+      if (trace && fullTrace) {
+        this.icon = renderTraceIcon(plotlyTraceToCustomTrace(trace));
+        this.name = fullTrace.name;
+        const DEFAULT_FIN_CHART_TRACE_NAME = ' - increasing';
+        if (
+          fullTrace.name.indexOf(DEFAULT_FIN_CHART_TRACE_NAME) &&
+          !trace.name
+        ) {
+          this.name = fullTrace.name.replace(DEFAULT_FIN_CHART_TRACE_NAME, '');
+        }
       }
     }
 
@@ -72,7 +80,7 @@ export default function connectTraceToPlot(WrappedComponent) {
           type: EDITOR_ACTIONS.UPDATE_TRACES,
           payload: {
             update,
-            traceIndexes: [this.props.traceIndex],
+            traceIndexes: this.props.traceIndexes,
           },
         });
       }
@@ -82,7 +90,7 @@ export default function connectTraceToPlot(WrappedComponent) {
       if (this.context.onUpdate) {
         this.context.onUpdate({
           type: EDITOR_ACTIONS.DELETE_TRACE,
-          payload: {traceIndexes: [this.props.traceIndex]},
+          payload: {traceIndexes: this.props.traceIndexes},
         });
       }
     }
@@ -99,7 +107,7 @@ export default function connectTraceToPlot(WrappedComponent) {
   )}`;
 
   TraceConnectedComponent.propTypes = {
-    traceIndex: PropTypes.number.isRequired,
+    traceIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
   };
 
   TraceConnectedComponent.contextTypes = {

From 1b212c108bb1b5cfbbd4559e5d5d59ffe82fb311 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Wed, 7 Feb 2018 22:20:14 -0500
Subject: [PATCH 8/8] CSS refactor

---
 src/components/containers/Panel.js           | 8 ++++----
 src/components/containers/TraceAccordion.js  | 2 +-
 src/styles/components/containers/_panel.scss | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/containers/Panel.js b/src/components/containers/Panel.js
index 8bf5c47a0..ab586b392 100644
--- a/src/components/containers/Panel.js
+++ b/src/components/containers/Panel.js
@@ -87,8 +87,6 @@ class Panel extends Component {
   render() {
     const {individualFoldStates, hasError} = this.state;
 
-    const {tabs} = this.props;
-
     if (hasError) {
       return <PanelError />;
     }
@@ -108,7 +106,9 @@ class Panel extends Component {
     );
 
     return (
-      <div className={`panel${tabs ? ' panel--with-tabs' : ''}`}>
+      <div
+        className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}
+      >
         <PanelHeader
           addAction={this.props.addAction}
           allowCollapse={
@@ -127,7 +127,7 @@ Panel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
-  tabs: PropTypes.bool,
+  noPadding: PropTypes.bool,
 };
 
 Panel.defaultProps = {
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index f49b60f74..5e4d1f521 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -78,7 +78,7 @@ class TraceAccordion extends Component {
         }
       );
       return (
-        <TraceRequiredPanel tabs>
+        <TraceRequiredPanel noPadding>
           <Tabs>
             <TabList>
               <Tab>{_('All Traces')}</Tab>
diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss
index 77e6e8161..14b8221fb 100644
--- a/src/styles/components/containers/_panel.scss
+++ b/src/styles/components/containers/_panel.scss
@@ -88,7 +88,7 @@
       }
     }
   }
-  &--with-tabs {
+  &--no-padding {
     padding: 0;
   }
 }