Start grouped style panels

Author: VeraZab

package.json

@@ -76,6 +76,7 @@
     "prop-types": "^15.5.10",
     "react-color": "^2.13.8",
     "react-select": "^1.0.0-rc.10",
+    "react-tabs": "^2.0.0",
     "tinycolor2": "^1.4.1"
   },
   "browserify-global-shim": {

src/DefaultEditor.js

@@ -74,7 +74,7 @@ class DefaultEditor extends Component {
         </Panel>
 
         <Panel group="Style" name="Traces">
-          <TraceAccordion>
+          <TraceAccordion canGroup>
             <Section name={_('Trace')}>
               <Numeric label={_('Opacity')} step={0.1} attr="opacity" />
             </Section>

src/components/containers/TraceAccordion.js

@@ -2,14 +2,14 @@ import Fold from './Fold';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from '../../lib/constants';
-import {connectTraceToPlot} from '../../lib';
+import {connectTraceToPlot, plotlyToCustom} from '../../lib';
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
 const TraceFold = connectTraceToPlot(Fold);
 
 export default class TraceAccordion extends Component {
   constructor(props) {
     super(props);
-
     this.addTrace = this.addTrace.bind(this);
   }
 
@@ -23,18 +23,60 @@ export default class TraceAccordion extends Component {
 
   render() {
     const data = this.context.data || [];
+    const {canGroup, canAdd} = this.props;
+    const individualPanel = data.map((d, i) => (
+      <TraceFold key={i} traceIndex={i}>
+        {this.props.children}
+      </TraceFold>
+    ));
+    let content = individualPanel;
+
+    if (canGroup && data.length > 1) {
+      const groupedTraces = {};
+
+      data.forEach(trace => {
+        const traceType = plotlyToCustom(trace);
+        if (groupedTraces[traceType]) {
+          groupedTraces[traceType].push(trace.index);
+        } else {
+          groupedTraces[traceType] = [trace.index];
+        }
+      });
+
+      const groupedPanel = Object.keys(groupedTraces).map(
+        (traceType, index) => {
+          return (
+            <TraceFold
+              key={index}
+              traceIndex={groupedTraces[traceType]}
+              name={traceType}
+            >
+              {this.props.children}
+            </TraceFold>
+          );
+        }
+      );
+
+      content = (
+        <Tabs>
+          <TabList>
+            <Tab>Grouped</Tab>
+            <Tab>Individual</Tab>
+          </TabList>
+          <TabPanel key={0}>{groupedPanel}</TabPanel>
+          <TabPanel key={1}>{individualPanel}</TabPanel>
+        </Tabs>
+      );
+    }
+
     return (
       <div>
-        {this.props.canAdd ? (
+        {canAdd ? (
           <button className="panel__add-button" onClick={this.addTrace}>
             + Trace
           </button>
         ) : null}
-        {data.map((d, i) => (
-          <TraceFold key={i} traceIndex={i}>
-            {this.props.children}
-          </TraceFold>
-        ))}
+        {content}
       </div>
     );
   }
@@ -48,4 +90,5 @@ TraceAccordion.contextTypes = {
 TraceAccordion.propTypes = {
   children: PropTypes.node,
   canAdd: PropTypes.bool,
+  canGroup: PropTypes.bool,
 };