From 9aaaf96d50c1a527d7a8727e5e34c49632fb5995 Mon Sep 17 00:00:00 2001
From: Vera Zabeida <vera.zabeida@gmail.com>
Date: Fri, 2 Nov 2018 14:36:26 -0400
Subject: [PATCH 1/4] allow custom ordering of default panels

---
 dev/App.js                         | 21 +++++++++++++-
 src/DefaultEditor.js               |  3 +-
 src/components/PanelMenuWrapper.js | 44 ++++++++++++++++++++++++++++--
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/dev/App.js b/dev/App.js
index 9267ac632..3a3a45966 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -185,7 +185,26 @@ class App extends Component {
           // fontOptions={[{label:'Arial', value: 'arial'}]}
           // chartHelp={chartHelp}
         >
-          <DefaultEditor>
+          <DefaultEditor
+          // order={[
+          //   {group: 'Dev', name: 'JSON'},
+          //   {group: 'Dev', name: 'Inspector'},
+          //   {group: 'Structure', name: 'Create'},
+          //   {group: 'Structure', name: 'Subplots'},
+          //   {group: 'Structure', name: 'Transforms'},
+          //   {group: 'Test', name: 'Testing'},
+          //   {group: 'Style', name: 'General'},
+          //   {group: 'Style', name: 'Traces'},
+          //   {group: 'Style', name: 'Axes'},
+          //   {group: 'Style', name: 'Legend'},
+          //   {group: 'Style', name: 'Color Bars'},
+          //   {group: 'Style', name: 'Annotation'},
+          //   {group: 'Style', name: 'Shapes'},
+          //   {group: 'Style', name: 'Images'},
+          //   {group: 'Style', name: 'Sliders'},
+          //   {group: 'Style', name: 'Menus'},
+          // ]}
+          >
             <Panel group="Dev" name="JSON">
               <div className="mocks">
                 <Select
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 35ab1241c..67b391c99 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -69,7 +69,7 @@ class DefaultEditor extends Component {
     const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
 
     return (
-      <PanelMenuWrapper>
+      <PanelMenuWrapper order={this.props.order}>
         {logo ? logo : null}
         <GraphCreatePanel group={_('Structure')} name={_('Traces')} />
         <GraphSubplotsPanel group={_('Structure')} name={_('Subplots')} />
@@ -95,6 +95,7 @@ class DefaultEditor extends Component {
 DefaultEditor.propTypes = {
   children: PropTypes.node,
   logoSrc: PropTypes.string,
+  order: PropTypes.array,
 };
 
 DefaultEditor.contextTypes = {
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index a9996ff95..af845d388 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -45,13 +45,52 @@ class PanelsWithSidebar extends Component {
     );
   }
 
+  getUniqueValues(value, index, self) {
+    return self.indexOf(value) === index;
+  }
+
   computeMenuOptions(props) {
-    const {children} = props;
+    const {children, order} = props;
     const sections = [];
     const groupLookup = {};
     let groupIndex;
+    const orderedChildren = React.Children.toArray(children);
+
+    if (order) {
+      const groupOrder = order.map(panel => panel.group).filter(this.getUniqueValues);
+      const nameOrder = order.map(panel => panel.name).filter(this.getUniqueValues);
+
+      orderedChildren.sort((a, b) => {
+        // if one of the elements is not in the groupOrder array, then it goes to the end of the list
+        if (groupOrder.includes(a.props.group) && !groupOrder.includes(b.props.group)) {
+          return -1;
+        }
+        if (!groupOrder.includes(a.props.group) && groupOrder.includes(b.props.group)) {
+          return 1;
+        }
+
+        // if both elements are not in the groupOrder array, they get sorted alphabetically,
+        // by group, then by name
+        if (!groupOrder.includes(a.props.group) && !groupOrder.includes(b.props.group)) {
+          const sortByGroup =
+            a.props.group === b.props.group ? 0 : a.props.group < b.props.group ? -1 : 1;
+          const sortByName =
+            a.props.name === b.props.name ? 0 : a.props.name < b.props.name ? -1 : 1;
+          return sortByGroup || sortByName;
+        }
+
+        // if both elements are in the groupOrder array, they get sorted according to their order in
+        // the groupOrder, then nameOrder arrays.
+        if (groupOrder.includes(a.props.group) && groupOrder.includes(b.props.group)) {
+          const sortByGroup = groupOrder.indexOf(a.props.group) - groupOrder.indexOf(b.props.group);
+          const sortByName = nameOrder.indexOf(a.props.name) - nameOrder.indexOf(b.props.name);
+          return sortByGroup || sortByName;
+        }
+        return 0;
+      });
+    }
 
-    React.Children.forEach(children, child => {
+    orderedChildren.forEach(child => {
       if (!child) {
         return;
       }
@@ -101,6 +140,7 @@ class PanelsWithSidebar extends Component {
 
 PanelsWithSidebar.propTypes = {
   children: PropTypes.node,
+  order: PropTypes.array,
 };
 
 PanelsWithSidebar.childContextTypes = {

From f8bded6fcc73cf36a6ca0af415db6a1ea743da49 Mon Sep 17 00:00:00 2001
From: Vera Zabeida <vera.zabeida@gmail.com>
Date: Fri, 2 Nov 2018 15:27:34 -0400
Subject: [PATCH 2/4] add constant for readability

---
 src/components/PanelMenuWrapper.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index af845d388..47f78ca7b 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -61,17 +61,20 @@ class PanelsWithSidebar extends Component {
       const nameOrder = order.map(panel => panel.name).filter(this.getUniqueValues);
 
       orderedChildren.sort((a, b) => {
+        const panelAHasCustomOrder = groupOrder.includes(a.props.group);
+        const panelBHasCustomOrder = groupOrder.includes(b.props.group);
+
         // if one of the elements is not in the groupOrder array, then it goes to the end of the list
-        if (groupOrder.includes(a.props.group) && !groupOrder.includes(b.props.group)) {
+        if (panelAHasCustomOrder && !panelBHasCustomOrder) {
           return -1;
         }
-        if (!groupOrder.includes(a.props.group) && groupOrder.includes(b.props.group)) {
+        if (!panelAHasCustomOrder && panelBHasCustomOrder) {
           return 1;
         }
 
         // if both elements are not in the groupOrder array, they get sorted alphabetically,
         // by group, then by name
-        if (!groupOrder.includes(a.props.group) && !groupOrder.includes(b.props.group)) {
+        if (!panelAHasCustomOrder && !panelBHasCustomOrder) {
           const sortByGroup =
             a.props.group === b.props.group ? 0 : a.props.group < b.props.group ? -1 : 1;
           const sortByName =
@@ -81,7 +84,7 @@ class PanelsWithSidebar extends Component {
 
         // if both elements are in the groupOrder array, they get sorted according to their order in
         // the groupOrder, then nameOrder arrays.
-        if (groupOrder.includes(a.props.group) && groupOrder.includes(b.props.group)) {
+        if (panelAHasCustomOrder && panelBHasCustomOrder) {
           const sortByGroup = groupOrder.indexOf(a.props.group) - groupOrder.indexOf(b.props.group);
           const sortByName = nameOrder.indexOf(a.props.name) - nameOrder.indexOf(b.props.name);
           return sortByGroup || sortByName;

From e812c1eb422218e94e50c3b0a2fd23769cb2c5d5 Mon Sep 17 00:00:00 2001
From: Vera Zabeida <vera.zabeida@gmail.com>
Date: Mon, 5 Nov 2018 14:54:48 -0500
Subject: [PATCH 3/4] tests

---
 src/components/PanelMenuWrapper.js |  44 +-------
 src/lib/__tests__/sortMenu-test.js | 176 +++++++++++++++++++++++++++++
 src/lib/sortMenu.js                |  82 ++++++++++++++
 3 files changed, 262 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/__tests__/sortMenu-test.js
 create mode 100644 src/lib/sortMenu.js

diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index 47f78ca7b..1e7584b26 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {cloneElement, Component} from 'react';
 import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from 'lib';
+import sortMenu from 'lib/sortMenu';
 
 class PanelsWithSidebar extends Component {
   constructor(props) {
@@ -45,55 +46,18 @@ class PanelsWithSidebar extends Component {
     );
   }
 
-  getUniqueValues(value, index, self) {
-    return self.indexOf(value) === index;
-  }
-
   computeMenuOptions(props) {
     const {children, order} = props;
     const sections = [];
     const groupLookup = {};
     let groupIndex;
-    const orderedChildren = React.Children.toArray(children);
+    const panels = React.Children.toArray(children);
 
     if (order) {
-      const groupOrder = order.map(panel => panel.group).filter(this.getUniqueValues);
-      const nameOrder = order.map(panel => panel.name).filter(this.getUniqueValues);
-
-      orderedChildren.sort((a, b) => {
-        const panelAHasCustomOrder = groupOrder.includes(a.props.group);
-        const panelBHasCustomOrder = groupOrder.includes(b.props.group);
-
-        // if one of the elements is not in the groupOrder array, then it goes to the end of the list
-        if (panelAHasCustomOrder && !panelBHasCustomOrder) {
-          return -1;
-        }
-        if (!panelAHasCustomOrder && panelBHasCustomOrder) {
-          return 1;
-        }
-
-        // if both elements are not in the groupOrder array, they get sorted alphabetically,
-        // by group, then by name
-        if (!panelAHasCustomOrder && !panelBHasCustomOrder) {
-          const sortByGroup =
-            a.props.group === b.props.group ? 0 : a.props.group < b.props.group ? -1 : 1;
-          const sortByName =
-            a.props.name === b.props.name ? 0 : a.props.name < b.props.name ? -1 : 1;
-          return sortByGroup || sortByName;
-        }
-
-        // if both elements are in the groupOrder array, they get sorted according to their order in
-        // the groupOrder, then nameOrder arrays.
-        if (panelAHasCustomOrder && panelBHasCustomOrder) {
-          const sortByGroup = groupOrder.indexOf(a.props.group) - groupOrder.indexOf(b.props.group);
-          const sortByName = nameOrder.indexOf(a.props.name) - nameOrder.indexOf(b.props.name);
-          return sortByGroup || sortByName;
-        }
-        return 0;
-      });
+      sortMenu(panels, order);
     }
 
-    orderedChildren.forEach(child => {
+    panels.forEach(child => {
       if (!child) {
         return;
       }
diff --git a/src/lib/__tests__/sortMenu-test.js b/src/lib/__tests__/sortMenu-test.js
new file mode 100644
index 000000000..aeeb8c969
--- /dev/null
+++ b/src/lib/__tests__/sortMenu-test.js
@@ -0,0 +1,176 @@
+import sortMenu from '../sortMenu';
+
+describe('sortMenu', () => {
+  it('modifies original array to follow the group, then name order provided', () => {
+    const initialArray = [
+      {props: {group: 'DEV', name: 'Inspector'}},
+      {props: {group: 'DEV', name: 'JSON'}},
+    ];
+    const orderProp = [{group: 'DEV', name: 'JSON'}, {group: 'DEV', name: 'Inspector'}];
+    sortMenu(initialArray, orderProp);
+
+    expect(initialArray[0].props.name).toBe('JSON');
+    expect(initialArray[1].props.name).toBe('Inspector');
+  });
+
+  it('sorts the array by group, then by name', () => {
+    const initialArray = [
+      {props: {group: 'Structure', name: 'Create'}},
+      {props: {group: 'Structure', name: 'Subplots'}},
+      {props: {group: 'Style', name: 'Color Bars'}},
+      {props: {group: 'Style', name: 'Annotation'}},
+      {props: {group: 'DEV', name: 'Inspector'}},
+      {props: {group: 'DEV', name: 'JSON'}},
+    ];
+
+    const orderProp = [
+      {group: 'DEV', name: 'JSON'},
+      {group: 'DEV', name: 'Inspector'},
+      {group: 'Structure', name: 'Subplots'},
+      {group: 'Structure', name: 'Create'},
+      {group: 'Style', name: 'Color Bars'},
+      {group: 'Style', name: 'Annotation'},
+    ];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('DEV');
+    expect(initialArray[0].props.name).toBe('JSON');
+    expect(initialArray[1].props.group).toBe('DEV');
+    expect(initialArray[1].props.name).toBe('Inspector');
+    expect(initialArray[2].props.group).toBe('Structure');
+    expect(initialArray[2].props.name).toBe('Subplots');
+    expect(initialArray[3].props.group).toBe('Structure');
+    expect(initialArray[3].props.name).toBe('Create');
+    expect(initialArray[4].props.group).toBe('Style');
+    expect(initialArray[4].props.name).toBe('Color Bars');
+    expect(initialArray[5].props.group).toBe('Style');
+    expect(initialArray[5].props.name).toBe('Annotation');
+  });
+
+  it('puts not mentionned panels to the bottom of list and sorts alphabetically', () => {
+    const initialArray = [
+      {props: {group: 'DEV', name: 'JSON'}},
+      {props: {group: 'DEV', name: 'Inspector'}},
+      {props: {group: 'Structure', name: 'Create'}},
+      {props: {group: 'Structure', name: 'Subplots'}},
+      {props: {group: 'Style', name: 'Color Bars'}},
+      {props: {group: 'Style', name: 'Annotation'}},
+    ];
+    const orderProp = [
+      {group: 'Structure', name: 'Subplots'},
+      {group: 'Structure', name: 'Create'},
+      {group: 'Style', name: 'Color Bars'},
+      {group: 'Style', name: 'Annotation'},
+    ];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('Structure');
+    expect(initialArray[0].props.name).toBe('Subplots');
+    expect(initialArray[1].props.group).toBe('Structure');
+    expect(initialArray[1].props.name).toBe('Create');
+    expect(initialArray[2].props.group).toBe('Style');
+    expect(initialArray[2].props.name).toBe('Color Bars');
+    expect(initialArray[3].props.group).toBe('Style');
+    expect(initialArray[3].props.name).toBe('Annotation');
+    expect(initialArray[4].props.group).toBe('DEV');
+    expect(initialArray[4].props.name).toBe('Inspector');
+    expect(initialArray[5].props.group).toBe('DEV');
+    expect(initialArray[5].props.name).toBe('JSON');
+  });
+
+  it('orders not mentionned subpanels at the end, alphabetically', () => {
+    const initialArray = [
+      {props: {group: 'Style', name: 'General'}},
+      {props: {group: 'Style', name: 'Traces'}},
+      {props: {group: 'Style', name: 'Axes'}},
+      {props: {group: 'Structure', name: 'Create'}},
+    ];
+    const orderProp = [{group: 'Style', name: 'Traces'}, {group: 'Structure', name: 'Create'}];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('Style');
+    expect(initialArray[0].props.name).toBe('Traces');
+    expect(initialArray[1].props.group).toBe('Style');
+    expect(initialArray[1].props.name).toBe('Axes');
+    expect(initialArray[2].props.group).toBe('Style');
+    expect(initialArray[2].props.name).toBe('General');
+    expect(initialArray[3].props.group).toBe('Structure');
+    expect(initialArray[3].props.name).toBe('Create');
+  });
+
+  it('ignores non existent panel groups', () => {
+    const initialArray = [
+      {props: {group: 'Structure', name: 'Create'}},
+      {props: {group: 'Structure', name: 'Subplots'}},
+      {props: {group: 'Style', name: 'Color Bars'}},
+      {props: {group: 'Style', name: 'Annotation'}},
+    ];
+
+    const orderProp = [
+      {group: 'Non Existent', name: 'Subplots'},
+      {group: 'Structure', name: 'Create'},
+      {group: 'Style', name: 'Color Bars'},
+      {group: 'Style', name: 'Annotation'},
+    ];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('Structure');
+    expect(initialArray[0].props.name).toBe('Create');
+    expect(initialArray[1].props.group).toBe('Structure');
+    expect(initialArray[1].props.name).toBe('Subplots');
+    expect(initialArray[2].props.group).toBe('Style');
+    expect(initialArray[2].props.name).toBe('Color Bars');
+    expect(initialArray[3].props.group).toBe('Style');
+    expect(initialArray[3].props.name).toBe('Annotation');
+  });
+
+  it('ignores non existent panel names', () => {
+    const initialArray = [
+      {props: {group: 'Structure', name: 'Subplots'}},
+      {props: {group: 'Structure', name: 'Create'}},
+      {props: {group: 'Style', name: 'Color Bars'}},
+      {props: {group: 'Style', name: 'Annotation'}},
+    ];
+
+    const orderProp = [
+      {group: 'Structure', name: 'Non Existent'},
+      {group: 'Style', name: 'Color Bars'},
+      {group: 'Style', name: 'Annotation'},
+    ];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('Style');
+    expect(initialArray[0].props.name).toBe('Color Bars');
+    expect(initialArray[1].props.group).toBe('Style');
+    expect(initialArray[1].props.name).toBe('Annotation');
+    expect(initialArray[2].props.group).toBe('Structure');
+    expect(initialArray[2].props.name).toBe('Create');
+    expect(initialArray[3].props.group).toBe('Structure');
+    expect(initialArray[3].props.name).toBe('Subplots');
+  });
+
+  it('ignores invalid combinations', () => {
+    const initialArray = [
+      {props: {group: 'Structure', name: 'Subplots'}},
+      {props: {group: 'Structure', name: 'Create'}},
+      {props: {group: 'Style', name: 'Color Bars'}},
+      {props: {group: 'Style', name: 'Annotation'}},
+    ];
+
+    const orderProp = [
+      {group: 'Structure', name: 'Annotation'},
+      {group: 'Style', name: 'Color Bars'},
+      {group: 'Style', name: 'Annotation'},
+    ];
+
+    sortMenu(initialArray, orderProp);
+    expect(initialArray[0].props.group).toBe('Style');
+    expect(initialArray[0].props.name).toBe('Color Bars');
+    expect(initialArray[1].props.group).toBe('Style');
+    expect(initialArray[1].props.name).toBe('Annotation');
+    expect(initialArray[2].props.group).toBe('Structure');
+    expect(initialArray[2].props.name).toBe('Create');
+    expect(initialArray[3].props.group).toBe('Structure');
+    expect(initialArray[3].props.name).toBe('Subplots');
+  });
+});
diff --git a/src/lib/sortMenu.js b/src/lib/sortMenu.js
new file mode 100644
index 000000000..3fa97bb09
--- /dev/null
+++ b/src/lib/sortMenu.js
@@ -0,0 +1,82 @@
+function getUniqueValues(value, index, self) {
+  return self.indexOf(value) === index;
+}
+
+function sortAlphabetically(a, b) {
+  const sortByGroup = a.props.group === b.props.group ? 0 : a.props.group < b.props.group ? -1 : 1;
+  const sortByName = a.props.name === b.props.name ? 0 : a.props.name < b.props.name ? -1 : 1;
+  return sortByGroup || sortByName;
+}
+
+export default function sortMenu(panels, order) {
+  // validates order, if a desired panel matches no panel in the panels array,
+  // it is excluded from ordering considerations
+
+  // eslint-disable-next-line
+  order = order.filter(desiredPanel =>
+    panels.some(
+      actualPanel =>
+        actualPanel.props.name === desiredPanel.name &&
+        actualPanel.props.group === desiredPanel.group
+    )
+  );
+
+  const desiredGroupOrder = order.map(panel => panel.group).filter(getUniqueValues);
+  const desiredNameOrder = order.map(panel => panel.name).filter(getUniqueValues);
+
+  panels.sort((a, b) => {
+    const panelAHasGroupCustomOrder = desiredGroupOrder.includes(a.props.group);
+    const panelBHasGroupCustomOrder = desiredGroupOrder.includes(b.props.group);
+
+    // if one of the elements is not in the desiredGroupOrder array, then it goes to the end of the list
+    if (panelAHasGroupCustomOrder && !panelBHasGroupCustomOrder) {
+      return -1;
+    }
+    if (!panelAHasGroupCustomOrder && panelBHasGroupCustomOrder) {
+      return 1;
+    }
+
+    // if both elements are not in the desiredGroupOrder array, they get sorted alphabetically,
+    // by group, then by name
+    if (!panelAHasGroupCustomOrder && !panelBHasGroupCustomOrder) {
+      return sortAlphabetically(a, b);
+    }
+
+    // if both elements are in the desiredGroupOrder array, they get sorted according to their order in
+    // the desiredGroupOrder, then desiredNameOrder arrays.
+    if (panelAHasGroupCustomOrder && panelBHasGroupCustomOrder) {
+      const indexOfGroupA = desiredGroupOrder.indexOf(a.props.group);
+      const indexOfGroupB = desiredGroupOrder.indexOf(b.props.group);
+
+      if (indexOfGroupA < indexOfGroupB) {
+        return -1;
+      }
+
+      if (indexOfGroupA > indexOfGroupB) {
+        return 1;
+      }
+
+      if (indexOfGroupA === indexOfGroupB) {
+        const panelAHasNameCustomOrder = desiredNameOrder.includes(a.props.name);
+        const panelBHasNameCustomOrder = desiredNameOrder.includes(b.props.name);
+
+        if (!panelAHasNameCustomOrder || !panelBHasNameCustomOrder) {
+          if (panelAHasNameCustomOrder && !panelBHasNameCustomOrder) {
+            return -1;
+          }
+          if (!panelAHasNameCustomOrder && panelBHasNameCustomOrder) {
+            return 1;
+          }
+          if (!panelAHasNameCustomOrder && !panelBHasNameCustomOrder) {
+            return sortAlphabetically(a, b);
+          }
+        }
+
+        if (panelAHasNameCustomOrder && panelBHasNameCustomOrder) {
+          return desiredNameOrder.indexOf(a.props.name) - desiredNameOrder.indexOf(b.props.name);
+        }
+      }
+    }
+    return 0;
+  });
+}

From bf7420ce601843b212816e423585707543a111fa Mon Sep 17 00:00:00 2001
From: Vera Zabeida <vera.zabeida@gmail.com>
Date: Mon, 5 Nov 2018 16:14:38 -0500
Subject: [PATCH 4/4] review adjustments

---
 dev/App.js                         |   2 +-
 src/DefaultEditor.js               |   4 +-
 src/components/PanelMenuWrapper.js |   8 +-
 src/lib/__tests__/sortMenu-test.js | 126 +++++++++++++++--------------
 4 files changed, 72 insertions(+), 68 deletions(-)

diff --git a/dev/App.js b/dev/App.js
index 3a3a45966..1cce7eb11 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -186,7 +186,7 @@ class App extends Component {
           // chartHelp={chartHelp}
         >
           <DefaultEditor
-          // order={[
+          // menuPanelOrder={[
           //   {group: 'Dev', name: 'JSON'},
           //   {group: 'Dev', name: 'Inspector'},
           //   {group: 'Structure', name: 'Create'},
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 67b391c99..9ef3fb2bb 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -69,7 +69,7 @@ class DefaultEditor extends Component {
     const logo = this.props.logoSrc && <Logo src={this.props.logoSrc} />;
 
     return (
-      <PanelMenuWrapper order={this.props.order}>
+      <PanelMenuWrapper menuPanelOrder={this.props.menuPanelOrder}>
         {logo ? logo : null}
         <GraphCreatePanel group={_('Structure')} name={_('Traces')} />
         <GraphSubplotsPanel group={_('Structure')} name={_('Subplots')} />
@@ -95,7 +95,7 @@ class DefaultEditor extends Component {
 DefaultEditor.propTypes = {
   children: PropTypes.node,
   logoSrc: PropTypes.string,
-  order: PropTypes.array,
+  menuPanelOrder: PropTypes.array,
 };
 
 DefaultEditor.contextTypes = {
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index 1e7584b26..c23f50695 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -47,14 +47,14 @@ class PanelsWithSidebar extends Component {
   }
 
   computeMenuOptions(props) {
-    const {children, order} = props;
+    const {children, menuPanelOrder} = props;
     const sections = [];
     const groupLookup = {};
     let groupIndex;
     const panels = React.Children.toArray(children);
 
-    if (order) {
-      sortMenu(panels, order);
+    if (menuPanelOrder) {
+      sortMenu(panels, menuPanelOrder);
     }
 
     panels.forEach(child => {
@@ -107,7 +107,7 @@ class PanelsWithSidebar extends Component {
 
 PanelsWithSidebar.propTypes = {
   children: PropTypes.node,
-  order: PropTypes.array,
+  menuPanelOrder: PropTypes.array,
 };
 
 PanelsWithSidebar.childContextTypes = {
diff --git a/src/lib/__tests__/sortMenu-test.js b/src/lib/__tests__/sortMenu-test.js
index aeeb8c969..04c3e045c 100644
--- a/src/lib/__tests__/sortMenu-test.js
+++ b/src/lib/__tests__/sortMenu-test.js
@@ -1,5 +1,13 @@
 import sortMenu from '../sortMenu';
 
+function stringify(array) {
+  let string = '';
+  array.forEach(obj => {
+    string += JSON.stringify(obj);
+  });
+  return string;
+}
+
 describe('sortMenu', () => {
   it('modifies original array to follow the group, then name order provided', () => {
     const initialArray = [
@@ -7,10 +15,11 @@ describe('sortMenu', () => {
       {props: {group: 'DEV', name: 'JSON'}},
     ];
     const orderProp = [{group: 'DEV', name: 'JSON'}, {group: 'DEV', name: 'Inspector'}];
-    sortMenu(initialArray, orderProp);
 
-    expect(initialArray[0].props.name).toBe('JSON');
-    expect(initialArray[1].props.name).toBe('Inspector');
+    sortMenu(initialArray, orderProp);
+    expect(stringify(initialArray)).toBe(
+      stringify([{props: {group: 'DEV', name: 'JSON'}}, {props: {group: 'DEV', name: 'Inspector'}}])
+    );
   });
 
   it('sorts the array by group, then by name', () => {
@@ -22,7 +31,6 @@ describe('sortMenu', () => {
       {props: {group: 'DEV', name: 'Inspector'}},
       {props: {group: 'DEV', name: 'JSON'}},
     ];
-
     const orderProp = [
       {group: 'DEV', name: 'JSON'},
       {group: 'DEV', name: 'Inspector'},
@@ -33,18 +41,16 @@ describe('sortMenu', () => {
     ];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('DEV');
-    expect(initialArray[0].props.name).toBe('JSON');
-    expect(initialArray[1].props.group).toBe('DEV');
-    expect(initialArray[1].props.name).toBe('Inspector');
-    expect(initialArray[2].props.group).toBe('Structure');
-    expect(initialArray[2].props.name).toBe('Subplots');
-    expect(initialArray[3].props.group).toBe('Structure');
-    expect(initialArray[3].props.name).toBe('Create');
-    expect(initialArray[4].props.group).toBe('Style');
-    expect(initialArray[4].props.name).toBe('Color Bars');
-    expect(initialArray[5].props.group).toBe('Style');
-    expect(initialArray[5].props.name).toBe('Annotation');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'DEV', name: 'JSON'}},
+        {props: {group: 'DEV', name: 'Inspector'}},
+        {props: {group: 'Structure', name: 'Subplots'}},
+        {props: {group: 'Structure', name: 'Create'}},
+        {props: {group: 'Style', name: 'Color Bars'}},
+        {props: {group: 'Style', name: 'Annotation'}},
+      ])
+    );
   });
 
   it('puts not mentionned panels to the bottom of list and sorts alphabetically', () => {
@@ -64,18 +70,16 @@ describe('sortMenu', () => {
     ];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('Structure');
-    expect(initialArray[0].props.name).toBe('Subplots');
-    expect(initialArray[1].props.group).toBe('Structure');
-    expect(initialArray[1].props.name).toBe('Create');
-    expect(initialArray[2].props.group).toBe('Style');
-    expect(initialArray[2].props.name).toBe('Color Bars');
-    expect(initialArray[3].props.group).toBe('Style');
-    expect(initialArray[3].props.name).toBe('Annotation');
-    expect(initialArray[4].props.group).toBe('DEV');
-    expect(initialArray[4].props.name).toBe('Inspector');
-    expect(initialArray[5].props.group).toBe('DEV');
-    expect(initialArray[5].props.name).toBe('JSON');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'Structure', name: 'Subplots'}},
+        {props: {group: 'Structure', name: 'Create'}},
+        {props: {group: 'Style', name: 'Color Bars'}},
+        {props: {group: 'Style', name: 'Annotation'}},
+        {props: {group: 'DEV', name: 'Inspector'}},
+        {props: {group: 'DEV', name: 'JSON'}},
+      ])
+    );
   });
 
   it('orders not mentionned subpanels at the end, alphabetically', () => {
@@ -85,17 +89,17 @@ describe('sortMenu', () => {
       {props: {group: 'Style', name: 'Axes'}},
       {props: {group: 'Structure', name: 'Create'}},
     ];
-    const orderProp = [{group: 'Style', name: 'Traces'}, {group: 'Structure', name: 'Create'}];
+    const orderProp = [{group: 'Style', name: 'Traces'}];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('Style');
-    expect(initialArray[0].props.name).toBe('Traces');
-    expect(initialArray[1].props.group).toBe('Style');
-    expect(initialArray[1].props.name).toBe('Axes');
-    expect(initialArray[2].props.group).toBe('Style');
-    expect(initialArray[2].props.name).toBe('General');
-    expect(initialArray[3].props.group).toBe('Structure');
-    expect(initialArray[3].props.name).toBe('Create');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'Style', name: 'Traces'}},
+        {props: {group: 'Style', name: 'Axes'}},
+        {props: {group: 'Style', name: 'General'}},
+        {props: {group: 'Structure', name: 'Create'}},
+      ])
+    );
   });
 
   it('ignores non existent panel groups', () => {
@@ -114,14 +118,14 @@ describe('sortMenu', () => {
     ];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('Structure');
-    expect(initialArray[0].props.name).toBe('Create');
-    expect(initialArray[1].props.group).toBe('Structure');
-    expect(initialArray[1].props.name).toBe('Subplots');
-    expect(initialArray[2].props.group).toBe('Style');
-    expect(initialArray[2].props.name).toBe('Color Bars');
-    expect(initialArray[3].props.group).toBe('Style');
-    expect(initialArray[3].props.name).toBe('Annotation');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'Structure', name: 'Create'}},
+        {props: {group: 'Structure', name: 'Subplots'}},
+        {props: {group: 'Style', name: 'Color Bars'}},
+        {props: {group: 'Style', name: 'Annotation'}},
+      ])
+    );
   });
 
   it('ignores non existent panel names', () => {
@@ -139,14 +143,14 @@ describe('sortMenu', () => {
     ];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('Style');
-    expect(initialArray[0].props.name).toBe('Color Bars');
-    expect(initialArray[1].props.group).toBe('Style');
-    expect(initialArray[1].props.name).toBe('Annotation');
-    expect(initialArray[2].props.group).toBe('Structure');
-    expect(initialArray[2].props.name).toBe('Create');
-    expect(initialArray[3].props.group).toBe('Structure');
-    expect(initialArray[3].props.name).toBe('Subplots');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'Style', name: 'Color Bars'}},
+        {props: {group: 'Style', name: 'Annotation'}},
+        {props: {group: 'Structure', name: 'Create'}},
+        {props: {group: 'Structure', name: 'Subplots'}},
+      ])
+    );
   });
 
   it('ignores invalid combinations', () => {
@@ -164,13 +168,13 @@ describe('sortMenu', () => {
     ];
 
     sortMenu(initialArray, orderProp);
-    expect(initialArray[0].props.group).toBe('Style');
-    expect(initialArray[0].props.name).toBe('Color Bars');
-    expect(initialArray[1].props.group).toBe('Style');
-    expect(initialArray[1].props.name).toBe('Annotation');
-    expect(initialArray[2].props.group).toBe('Structure');
-    expect(initialArray[2].props.name).toBe('Create');
-    expect(initialArray[3].props.group).toBe('Structure');
-    expect(initialArray[3].props.name).toBe('Subplots');
+    expect(stringify(initialArray)).toBe(
+      stringify([
+        {props: {group: 'Style', name: 'Color Bars'}},
+        {props: {group: 'Style', name: 'Annotation'}},
+        {props: {group: 'Structure', name: 'Create'}},
+        {props: {group: 'Structure', name: 'Subplots'}},
+      ])
+    );
   });
 });