From 12309b3754a1a4e9edbde30b83c7495fe26e09c3 Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Wed, 14 Mar 2018 16:21:00 -0400
Subject: [PATCH 1/2] dev tools for JSON

---
 dev/App.js                         | 25 +++++++++++++++++++++++--
 dev/Nav.js                         | 14 ++++++++++++++
 package.json                       |  1 +
 src/DefaultEditor.js               |  4 +++-
 src/components/PanelMenuWrapper.js |  4 ++++
 src/index.js                       |  2 ++
 6 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/dev/App.js b/dev/App.js
index 21a9102ab..9613e80b0 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -2,8 +2,9 @@ import React, {Component} from 'react';
 import {hot} from 'react-hot-loader';
 import plotly from 'plotly.js/dist/plotly';
 import '../src/styles/main.scss';
+import ReactJson from 'react-json-view';
 import Nav from './Nav';
-import PlotlyEditor from '../src';
+import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
@@ -82,7 +83,27 @@ class App extends Component {
           useResizeHandler
           debug
           advancedTraceTypeSelector
-        />
+        >
+          {' '}
+          <DefaultEditor>
+            <Panel group="Dev" name="JSON">
+              <ReactJson
+                enableClipboard={false}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                indentWidth={2}
+                onAdd={({updated_src}) => this.setState(updated_src)}
+                onEdit={({updated_src}) => this.setState(updated_src)}
+                onDelete={({updated_src}) => this.setState(updated_src)}
+                src={{
+                  data: this.state.data,
+                  layout: this.state.layout,
+                }}
+              />
+            </Panel>
+          </DefaultEditor>
+        </PlotlyEditor>
         <Nav
           currentMockIndex={this.state.currentMockIndex}
           loadMock={this.loadMock}
diff --git a/dev/Nav.js b/dev/Nav.js
index d95f15213..ca705325a 100644
--- a/dev/Nav.js
+++ b/dev/Nav.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Select from 'react-select';
 
+const prefix =
+  'https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/';
+
 const Nav = props => (
   <div className="mock-nav">
     <span className="mock-nav__label">Select mock:</span>
@@ -23,6 +26,17 @@ const Nav = props => (
         placeholder={'plotly.js/contents/test/image/mocks'}
       />
     </div>
+    {props.currentMockIndex === -1 ? null : (
+      <span className="mock-nav__label">
+        <a
+          href={prefix + props.mocks[props.currentMockIndex]}
+          target="_blank"
+          style={{color: 'white'}}
+        >
+          open {props.mocks[props.currentMockIndex]} &raquo;
+        </a>
+      </span>
+    )}
   </div>
 );
 
diff --git a/package.json b/package.json
index 573fe52d1..b49c765c4 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^4.0.0-beta.21",
+    "react-json-view": "^1.16.1",
     "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 61311b5ae..012bc3466 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -16,7 +16,7 @@ import {
   StyleUpdateMenusPanel,
 } from './default_panels';
 
-const DefaultEditor = ({localize: _}) => (
+const DefaultEditor = ({children, localize: _}) => (
   <Fragment>
     <PanelMenuWrapper>
       <GraphCreatePanel group={_('Graph')} name={_('Create')} />
@@ -30,12 +30,14 @@ const DefaultEditor = ({localize: _}) => (
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
       <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
       <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
+      {children ? children : null}
     </PanelMenuWrapper>
   </Fragment>
 );
 
 DefaultEditor.propTypes = {
   localize: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default localize(DefaultEditor);
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index 631a91d15..f7518331b 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -48,6 +48,9 @@ class PanelsWithSidebar extends Component {
     let groupIndex;
 
     React.Children.forEach(children, child => {
+      if (!child) {
+        return;
+      }
       const group = child.props.group;
       const name = child.props.name;
 
@@ -81,6 +84,7 @@ class PanelsWithSidebar extends Component {
         {React.Children.map(
           this.props.children,
           (child, i) =>
+            child === null ||
             this.state.group !== child.props.group ||
             this.state.panel !== child.props.name
               ? null
diff --git a/src/index.js b/src/index.js
index 6cb93e6f5..38c4478e7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,5 @@
 import PlotlyEditor from './PlotlyEditor';
+import DefaultEditor from './DefaultEditor';
 import EditorControls from './EditorControls';
 import {
   connectAnnotationToLayout,
@@ -143,6 +144,7 @@ export {
   localizeString,
   walkObject,
   EditorControls,
+  DefaultEditor,
 };
 
 export default PlotlyEditor;

From 31be00518db58fd4303efdaf94ebbad96547ad0d Mon Sep 17 00:00:00 2001
From: Nicolas Kruchten <nicolas@datacratic.com>
Date: Wed, 14 Mar 2018 22:05:38 -0400
Subject: [PATCH 2/2] move mock selector into dev panel

---
 dev/App.js        | 24 +++++++++++++++++------
 dev/Nav.js        | 49 -----------------------------------------------
 dev/styles.css    | 46 ++------------------------------------------
 webpack.config.js |  2 ++
 4 files changed, 22 insertions(+), 99 deletions(-)
 delete mode 100644 dev/Nav.js

diff --git a/dev/App.js b/dev/App.js
index 9613e80b0..6017f3484 100644
--- a/dev/App.js
+++ b/dev/App.js
@@ -2,8 +2,9 @@ import React, {Component} from 'react';
 import {hot} from 'react-hot-loader';
 import plotly from 'plotly.js/dist/plotly';
 import '../src/styles/main.scss';
+import 'react-select/dist/react-select.css';
 import ReactJson from 'react-json-view';
-import Nav from './Nav';
+import Select from 'react-select';
 import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
@@ -87,6 +88,21 @@ class App extends Component {
           {' '}
           <DefaultEditor>
             <Panel group="Dev" name="JSON">
+              <Select
+                clearable={true}
+                value={this.state.currentMockIndex}
+                name="mock-dropdown"
+                options={this.state.mocks.map((item, i) => ({
+                  label: item,
+                  value: i,
+                }))}
+                searchable={true}
+                searchPromptText="Search for a mock"
+                onChange={option => this.loadMock(option.value)}
+                noResultsText={'No Results'}
+                placeholder={'Search for a mock'}
+              />
+              <br />
               <ReactJson
                 enableClipboard={false}
                 name={false}
@@ -99,16 +115,12 @@ class App extends Component {
                 src={{
                   data: this.state.data,
                   layout: this.state.layout,
+                  frames: this.state.frames,
                 }}
               />
             </Panel>
           </DefaultEditor>
         </PlotlyEditor>
-        <Nav
-          currentMockIndex={this.state.currentMockIndex}
-          loadMock={this.loadMock}
-          mocks={this.state.mocks}
-        />
       </div>
     );
   }
diff --git a/dev/Nav.js b/dev/Nav.js
deleted file mode 100644
index ca705325a..000000000
--- a/dev/Nav.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import 'react-select/dist/react-select.css';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Select from 'react-select';
-
-const prefix =
-  'https://raw.githubusercontent.com/plotly/plotly.js/master/test/image/mocks/';
-
-const Nav = props => (
-  <div className="mock-nav">
-    <span className="mock-nav__label">Select mock:</span>
-    <div className="mock-nav__select">
-      <Select
-        clearable={true}
-        value={props.currentMockIndex}
-        name="mock-dropdown"
-        options={props.mocks.map((item, i) => ({
-          label: item,
-          value: i,
-        }))}
-        className="open-top"
-        searchable={true}
-        searchPromptText="Search for a mock"
-        onChange={option => props.loadMock(option.value)}
-        noResultsText={'No Results'}
-        placeholder={'plotly.js/contents/test/image/mocks'}
-      />
-    </div>
-    {props.currentMockIndex === -1 ? null : (
-      <span className="mock-nav__label">
-        <a
-          href={prefix + props.mocks[props.currentMockIndex]}
-          target="_blank"
-          style={{color: 'white'}}
-        >
-          open {props.mocks[props.currentMockIndex]} &raquo;
-        </a>
-      </span>
-    )}
-  </div>
-);
-
-Nav.propTypes = {
-  currentMockIndex: PropTypes.number,
-  loadMock: PropTypes.func,
-  mocks: PropTypes.array,
-};
-
-export default Nav;
diff --git a/dev/styles.css b/dev/styles.css
index 7bfda856e..e9aecc414 100644
--- a/dev/styles.css
+++ b/dev/styles.css
@@ -5,49 +5,7 @@ body {
 }
 
 .app {
-  height: calc(100vh - 50px);
-  max-height: calc(100vh - 50px);
+  height: 100vh;
+  max-height: 100vh;
 }
 
-.mock-nav {
-  height: 50px;
-  width: 100%;
-  background-color: #506784;
-  display: inline-flex;
-  color: white;
-}
-
-.mock-nav__label {
-  line-height: 50px;
-  padding-left: 10px;
-}
-
-.mock-nav__select {
-  width: 300px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 7px;
-}
-
-.Select.open-top .Select-menu-outer {
-  top: auto;
-  bottom: 100%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select-option:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.Select.open-top .Select-option:last-child {
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select.is-open > .Select-control {
-  border-top-right-radius: unset;
-  border-top-left-radius: unset;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
diff --git a/webpack.config.js b/webpack.config.js
index e3f91f174..f540c3f3f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -38,6 +38,8 @@ module.exports = {
       },
     ],
   },
+
+  plugins: [new webpack.IgnorePlugin(/vertx/)],
   devServer: {
     open: true,
     contentBase: './dev',