diff --git a/package.json b/package.json
index 100e58f56..95ff2be4f 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "fs": "^0.0.1-security",
     "gl": "^4.0.4",
     "glob": "^7.1.2",
-    "jest": "^23.5.0",
+    "jest": "^23.6.0",
     "jest-cli": "^23.5.0",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.7.2",
@@ -63,12 +63,13 @@
     "postcss-combine-duplicated-selectors": "^6.0.2",
     "postcss-custom-properties": "^6.3.1",
     "postcss-remove-root": "^0.0.2",
-    "prettier": "1.14.2",
-    "react": "^16.0.0",
+    "prettier": "^1.14.2",
+    "react": "^16.6.0",
     "react-ace": "^6.1.4",
-    "react-dom": "^16.0.0",
-    "react-hot-loader": "^4.0.0-beta.21",
+    "react-dom": "^16.6.0",
+    "react-hot-loader": "^4.3.12",
     "react-inspector": "^2.2.2",
+    "react-percy": "^0.3.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "2.6.2",
     "sass-loader": "^7.1.0",
@@ -77,8 +78,8 @@
     "webpack-dev-server": "^2.11.1"
   },
   "peerDependencies": {
-    "react": ">15",
-    "react-dom": ">15"
+    "react": ">16.6.0",
+    "react-dom": ">16.6.0"
   },
   "homepage": "https://plotly.github.io/react-chart-editor/",
   "jest": {
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 9ef3fb2bb..7434d8159 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -19,6 +19,7 @@ import {
 import {traceHasColorbar} from './default_panels/StyleColorbarsPanel';
 import Logo from './components/widgets/Logo';
 import {TRANSFORMABLE_TRACES} from './lib/constants';
+import {EditorControlsContext} from './context';
 
 class DefaultEditor extends Component {
   constructor(props, context) {
@@ -98,11 +99,6 @@ DefaultEditor.propTypes = {
   menuPanelOrder: PropTypes.array,
 };
 
-DefaultEditor.contextTypes = {
-  localize: PropTypes.func,
-  fullData: PropTypes.array,
-  fullLayout: PropTypes.object,
-  layout: PropTypes.object,
-};
+DefaultEditor.contextType = EditorControlsContext;
 
 export default DefaultEditor;
diff --git a/src/EditorControls.js b/src/EditorControls.js
index b8de22231..3cb2d064f 100644
--- a/src/EditorControls.js
+++ b/src/EditorControls.js
@@ -18,6 +18,7 @@ import nestedProperty from 'plotly.js/src/lib/nested_property';
 import {categoryLayout, traceTypes} from 'lib/traceTypes';
 import {ModalProvider} from 'components/containers';
 import {DEFAULT_FONTS} from 'lib/constants';
+import {EditorControlsContext} from './context';
 
 class EditorControls extends Component {
   constructor(props, context) {
@@ -62,6 +63,37 @@ class EditorControls extends Component {
     };
   }
 
+  provideValue() {
+    const gd = this.props.graphDiv || {};
+    return {
+      advancedTraceTypeSelector: this.props.advancedTraceTypeSelector,
+      config: gd._context,
+      srcConverters: this.props.srcConverters,
+      data: gd.data,
+      dataSources: this.props.dataSources,
+      dataSourceOptions: this.props.dataSourceOptions,
+      dataSourceValueRenderer: this.props.dataSourceValueRenderer,
+      dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
+      dictionaries: this.props.dictionaries || {},
+      localize: this.localize,
+      frames: gd._transitionData ? gd._transitionData._frames : [],
+      fullData: gd._fullData,
+      fullLayout: gd._fullLayout,
+      graphDiv: gd,
+      layout: gd.layout,
+      locale: this.props.locale,
+      onUpdate: this.handleUpdate.bind(this),
+      plotSchema: this.plotSchema,
+      plotly: this.props.plotly,
+      traceTypesConfig: this.props.traceTypesConfig,
+      showFieldTooltips: this.props.showFieldTooltips,
+      glByDefault: this.props.glByDefault,
+      mapBoxAccess: this.props.mapBoxAccess,
+      fontOptions: this.props.fontOptions,
+      chartHelp: this.props.chartHelp,
+    };
+  }
+
   handleUpdate({type, payload}) {
     const {graphDiv} = this.props;
 
@@ -295,19 +327,21 @@ class EditorControls extends Component {
 
   render() {
     return (
-      <div
-        className={
-          bem('editor_controls') +
-          ' plotly-editor--theme-provider' +
-          `${this.props.className ? ` ${this.props.className}` : ''}`
-        }
-      >
-        <ModalProvider>
-          {this.props.graphDiv &&
-            this.props.graphDiv._fullLayout &&
-            (this.props.children ? this.props.children : <DefaultEditor />)}
-        </ModalProvider>
-      </div>
+      <EditorControlsContext.Provider value={this.provideValue()}>
+        <div
+          className={
+            bem('editor_controls') +
+            ' plotly-editor--theme-provider' +
+            `${this.props.className ? ` ${this.props.className}` : ''}`
+          }
+        >
+          <ModalProvider>
+            {this.props.graphDiv &&
+              this.props.graphDiv._fullLayout &&
+              (this.props.children ? this.props.children : <DefaultEditor />)}
+          </ModalProvider>
+        </div>
+      </EditorControlsContext.Provider>
     );
   }
 }
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index c23f50695..3f704acfe 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -3,6 +3,7 @@ import React, {cloneElement, Component} from 'react';
 import SidebarGroup from './sidebar/SidebarGroup';
 import {bem} from 'lib';
 import sortMenu from 'lib/sortMenu';
+import {PanelMenuWrapperContext} from '../context';
 
 class PanelsWithSidebar extends Component {
   constructor(props) {
@@ -30,6 +31,12 @@ class PanelsWithSidebar extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      setPanel: this.setPanel,
+    };
+  }
+
   renderSection(section, i) {
     if (section.type && (section.type.plotly_editor_traits || {}).sidebar_element) {
       return cloneElement(section, {key: i});
@@ -89,18 +96,20 @@ class PanelsWithSidebar extends Component {
     const menuOpts = this.computeMenuOptions(this.props);
 
     return (
-      <div className={bem('editor_controls', 'wrapper')}>
-        <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
-        {React.Children.map(
-          this.props.children,
-          (child, i) =>
-            child === null ||
-            this.state.group !== child.props.group ||
-            this.state.panel !== child.props.name
-              ? null
-              : cloneElement(child, {key: i})
-        )}
-      </div>
+      <PanelMenuWrapperContext.Provider value={this.provideValue()}>
+        <div className={bem('editor_controls', 'wrapper')}>
+          <div className={bem('sidebar')}>{menuOpts.map(this.renderSection)}</div>
+          {React.Children.map(
+            this.props.children,
+            (child, i) =>
+              child === null ||
+              this.state.group !== child.props.group ||
+              this.state.panel !== child.props.name
+                ? null
+                : cloneElement(child, {key: i})
+          )}
+        </div>
+      </PanelMenuWrapperContext.Provider>
     );
   }
 }
diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js
index 0db622967..bba399ce1 100644
--- a/src/components/containers/AnnotationAccordion.js
+++ b/src/components/containers/AnnotationAccordion.js
@@ -4,6 +4,7 @@ import {PanelMessage} from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
@@ -61,10 +62,7 @@ class AnnotationAccordion extends Component {
   }
 }
 
-AnnotationAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+AnnotationAccordion.contextType = EditorControlsContext;
 
 AnnotationAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/ImageAccordion.js b/src/components/containers/ImageAccordion.js
index e9a9c488c..5b8a33c0f 100644
--- a/src/components/containers/ImageAccordion.js
+++ b/src/components/containers/ImageAccordion.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectImageToLayout} from 'lib';
 import {PanelMessage} from './PanelEmpty';
+import {EditorControlsContext} from '../../context';
 
 const ImageFold = connectImageToLayout(PlotlyFold);
 
@@ -66,10 +67,7 @@ class ImageAccordion extends Component {
   }
 }
 
-ImageAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+ImageAccordion.contextType = EditorControlsContext;
 
 ImageAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/Modal.js b/src/components/containers/Modal.js
index 356842dc4..268304cc9 100644
--- a/src/components/containers/Modal.js
+++ b/src/components/containers/Modal.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {CloseIcon} from 'plotly-icons';
+import {ModalProviderContext} from '../../context';
 
 const ModalHeader = ({title, handleClose}) => (
   <div className="modal__header">
@@ -68,10 +69,7 @@ Modal.propTypes = {
   title: PropTypes.node,
 };
 
-Modal.contextTypes = {
-  handleClose: PropTypes.func,
-  isAnimatingOut: PropTypes.bool,
-};
+Modal.contextType = ModalProviderContext;
 
 export default Modal;
 
diff --git a/src/components/containers/ModalProvider.js b/src/components/containers/ModalProvider.js
index 6cbb13958..a2fabc5bb 100644
--- a/src/components/containers/ModalProvider.js
+++ b/src/components/containers/ModalProvider.js
@@ -1,5 +1,6 @@
 import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
+import {ModalProviderContext} from '../../context';
 
 class ModalProvider extends React.Component {
   constructor(props) {
@@ -70,13 +71,26 @@ class ModalProvider extends React.Component {
     };
   }
 
+  provideValue() {
+    return {
+      openModal: (c, p) => this.openModal(c, p),
+      closeModal: () => this.closeModal(),
+      handleClose: () => this.handleClose(),
+      isAnimatingOut: this.state.isAnimatingOut,
+    };
+  }
+
   render() {
     const {component: Component, componentProps, isAnimatingOut} = this.state;
     return (
-      <Fragment>
-        {this.props.children}
-        {this.state.open ? <Component isAnimatingOut={isAnimatingOut} {...componentProps} /> : null}
-      </Fragment>
+      <ModalProviderContext.Provider value={this.provideValue()}>
+        <Fragment>
+          {this.props.children}
+          {this.state.open ? (
+            <Component isAnimatingOut={isAnimatingOut} {...componentProps} />
+          ) : null}
+        </Fragment>
+      </ModalProviderContext.Provider>
     );
   }
 }
diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
index 87a500778..0c167d48f 100644
--- a/src/components/containers/PlotlyFold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -4,6 +4,7 @@ import React, {Component} from 'react';
 import classnames from 'classnames';
 import {CloseIcon, AngleDownIcon} from 'plotly-icons';
 import {unpackPlotProps, containerConnectedContextTypes, striptags} from 'lib';
+import {PlotlyFoldContext} from '../../context';
 
 export class Fold extends Component {
   constructor() {
@@ -17,9 +18,15 @@ export class Fold extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      foldInfo: this.props.foldInfo ? this.props.foldInfo : null,
+    };
+  }
+
   render() {
     if (!this.foldVisible && !this.props.messageIfEmpty) {
-      return null;
+      return <PlotlyFoldContext.Provider value={this.getChildContext()} />;
     }
     const {deleteContainer} = this.context;
     const {
@@ -97,10 +104,12 @@ export class Fold extends Component {
     const classes = className ? ' ' + className : '';
 
     return (
-      <div className={`fold${classes}`}>
-        {foldHeader}
-        {foldContent}
-      </div>
+      <PlotlyFoldContext.Provider value={this.provideValue()}>
+        <div className={`fold${classes}`}>
+          {foldHeader}
+          {foldContent}
+        </div>
+      </PlotlyFoldContext.Provider>
     );
   }
 }
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index 2281dd718..7a22588db 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -5,6 +5,7 @@ import React, {Component, cloneElement} from 'react';
 import update from 'immutability-helper';
 import {bem} from 'lib';
 import {EmbedIconIcon} from 'plotly-icons';
+import {PlotlyPanelContext} from '../../context';
 
 class PanelErrorImpl extends Component {
   render() {
@@ -41,6 +42,12 @@ export class Panel extends Component {
     };
   }
 
+  provideValue() {
+    return {
+      deleteContainer: this.props.deleteAction ? this.props.deleteAction : null,
+    };
+  }
+
   componentDidCatch() {
     this.setState({hasError: true});
   }
@@ -88,7 +95,11 @@ export class Panel extends Component {
     const {individualFoldStates, hasError} = this.state;
 
     if (hasError) {
-      return <PanelError />;
+      return (
+        <PlotlyPanelContext.Provider value={this.provideValue()}>
+          <PanelError />
+        </PlotlyPanelContext.Provider>
+      );
     }
 
     const newChildren = React.Children.map(this.props.children, (child, index) => {
@@ -103,15 +114,17 @@ export class Panel extends Component {
     });
 
     return (
-      <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
-        <PanelHeader
-          addAction={this.props.addAction}
-          allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
-          toggleFolds={this.toggleFolds}
-          hasOpen={individualFoldStates.some(s => s === false)}
-        />
-        <div className={bem('panel', 'content')}>{newChildren}</div>
-      </div>
+      <PlotlyPanelContext.Provider value={this.provideValue()}>
+        <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
+          <PanelHeader
+            addAction={this.props.addAction}
+            allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
+            toggleFolds={this.toggleFolds}
+            hasOpen={individualFoldStates.some(s => s === false)}
+          />
+          <div className={bem('panel', 'content')}>{newChildren}</div>
+        </div>
+      </PlotlyPanelContext.Provider>
     );
   }
 }
diff --git a/src/components/containers/RangeSelectorAccordion.js b/src/components/containers/RangeSelectorAccordion.js
index 940799ec1..2f188550c 100644
--- a/src/components/containers/RangeSelectorAccordion.js
+++ b/src/components/containers/RangeSelectorAccordion.js
@@ -3,6 +3,7 @@ import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectRangeSelectorToAxis} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
 
@@ -54,10 +55,7 @@ class RangeSelectorAccordion extends Component {
   }
 }
 
-RangeSelectorAccordion.contextTypes = {
-  fullContainer: PropTypes.object,
-  localize: PropTypes.func,
-};
+RangeSelectorAccordion.contextType = EditorControlsContext;
 
 RangeSelectorAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/ShapeAccordion.js b/src/components/containers/ShapeAccordion.js
index a321eb643..fa22a3ffb 100644
--- a/src/components/containers/ShapeAccordion.js
+++ b/src/components/containers/ShapeAccordion.js
@@ -5,6 +5,7 @@ import React, {Component} from 'react';
 import {connectShapeToLayout} from 'lib';
 import {COLORS} from 'lib/constants';
 import {PanelMessage} from './PanelEmpty';
+import {EditorControlsContext} from '../../context';
 
 const ShapeFold = connectShapeToLayout(PlotlyFold);
 
@@ -66,10 +67,7 @@ class ShapeAccordion extends Component {
   }
 }
 
-ShapeAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+ShapeAccordion.contextType = EditorControlsContext;
 
 ShapeAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/SliderAccordion.js b/src/components/containers/SliderAccordion.js
index ef87cbb1f..e87b47e34 100644
--- a/src/components/containers/SliderAccordion.js
+++ b/src/components/containers/SliderAccordion.js
@@ -3,6 +3,7 @@ import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectSliderToLayout} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 const SliderFold = connectSliderToLayout(PlotlyFold);
 
@@ -26,10 +27,7 @@ class SliderAccordion extends Component {
   }
 }
 
-SliderAccordion.contextTypes = {
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+SliderAccordion.contextType = EditorControlsContext;
 
 SliderAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/SubplotAccordion.js b/src/components/containers/SubplotAccordion.js
index e7f3924fd..f2e5326ab 100644
--- a/src/components/containers/SubplotAccordion.js
+++ b/src/components/containers/SubplotAccordion.js
@@ -9,6 +9,7 @@ import {
   getSubplotTitle,
 } from 'lib';
 import {TRACE_TO_AXIS, SUBPLOT_TO_ATTR} from 'lib/constants';
+import {EditorControlsContext} from '../../context';
 
 const TraceFold = connectTraceToPlot(PlotlyFold);
 const NonCartesianSubplotFold = connectNonCartesianSubplotToLayout(PlotlyFold);
@@ -143,12 +144,7 @@ class SubplotAccordion extends Component {
   }
 }
 
-SubplotAccordion.contextTypes = {
-  fullData: PropTypes.array,
-  data: PropTypes.array,
-  layout: PropTypes.object,
-  localize: PropTypes.func,
-};
+SubplotAccordion.contextType = EditorControlsContext;
 
 SubplotAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 062523521..ca52b8bf4 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -8,6 +8,7 @@ import {connectTraceToPlot, plotlyTraceToCustomTrace} from 'lib';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import {traceTypes} from 'lib/traceTypes';
 import {PanelMessage} from './PanelEmpty';
+import {EditorControlsContext} from '../../context';
 
 const TraceFold = connectTraceToPlot(PlotlyFold);
 
@@ -181,11 +182,7 @@ class TraceAccordion extends Component {
   }
 }
 
-TraceAccordion.contextTypes = {
-  fullData: PropTypes.array,
-  data: PropTypes.array,
-  localize: PropTypes.func,
-};
+TraceAccordion.contextType = EditorControlsContext;
 
 TraceAccordion.propTypes = {
   canAdd: PropTypes.bool,
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index e5f538e3b..745062e0e 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -2,6 +2,7 @@ import PanelEmpty from './PanelEmpty';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {LayoutPanel} from './derived';
+import {EditorControlsContext, ModalProviderContext} from '../../context';
 
 class TraceRequiredPanel extends Component {
   hasTrace() {
@@ -19,13 +20,17 @@ class TraceRequiredPanel extends Component {
     return this.hasTrace() ? (
       <LayoutPanel {...rest}>{children}</LayoutPanel>
     ) : (
-      <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
-        <p>
-          {_('Go to the ')}
-          <a onClick={() => this.context.setPanel('Structure', 'Traces')}>{_('Traces')}</a>
-          {_(' panel under Structure to define traces.')}
-        </p>
-      </PanelEmpty>
+      <ModalProviderContext.Consumer>
+        {({setPanel}) => (
+          <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
+            <p>
+              {_('Go to the ')}
+              <a onClick={() => setPanel('Structure', 'Traces')}>{_('Traces')}</a>
+              {_(' panel under Structure to define traces.')}
+            </p>
+          </PanelEmpty>
+        )}
+      </ModalProviderContext.Consumer>
     );
   }
 }
@@ -39,10 +44,6 @@ TraceRequiredPanel.defaultProps = {
   visible: true,
 };
 
-TraceRequiredPanel.contextTypes = {
-  fullData: PropTypes.array,
-  localize: PropTypes.func,
-  setPanel: PropTypes.func,
-};
+TraceRequiredPanel.contextType = EditorControlsContext;
 
 export default TraceRequiredPanel;
diff --git a/src/components/containers/UpdateMenuAccordion.js b/src/components/containers/UpdateMenuAccordion.js
index 735c1e9fb..84e7c7339 100644
--- a/src/components/containers/UpdateMenuAccordion.js
+++ b/src/components/containers/UpdateMenuAccordion.js
@@ -3,6 +3,7 @@ import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectUpdateMenuToLayout} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 const UpdateMenuFold = connectUpdateMenuToLayout(PlotlyFold);
 
@@ -36,10 +37,7 @@ class UpdateMenuAccordion extends Component {
   }
 }
 
-UpdateMenuAccordion.contextTypes = {
-  fullLayout: PropTypes.object,
-  localize: PropTypes.func,
-};
+UpdateMenuAccordion.contextType = EditorControlsContext;
 
 UpdateMenuAccordion.propTypes = {
   children: PropTypes.node,
diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index 13e19d816..a1d8b09ee 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -7,6 +7,7 @@ import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
 import {connectToContainer, traceTypeToAxisType, getAxisTitle, axisIdToAxisName} from 'lib';
 import {PlotlySection} from 'components';
+import {EditorControlsContext, ModalProviderContext} from '../../context';
 
 class UnconnectedAxisCreator extends Component {
   canAddAxis() {
@@ -104,12 +105,7 @@ UnconnectedAxisCreator.propTypes = {
   updateContainer: PropTypes.func,
 };
 
-UnconnectedAxisCreator.contextTypes = {
-  fullLayout: PropTypes.object,
-  data: PropTypes.array,
-  fullData: PropTypes.array,
-  onUpdate: PropTypes.func,
-};
+UnconnectedAxisCreator.contextType = EditorControlsContext;
 
 const AxisCreator = connectToContainer(UnconnectedAxisCreator);
 
@@ -149,11 +145,15 @@ class UnconnectedAxesCreator extends Component {
     return (
       <PlotlySection name={_('Axes to Use')}>
         {controls}
-        <Info>
-          {_('You can style and position your axes in the ')}
-          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
-          {_(' panel.')}
-        </Info>
+        <ModalProviderContext.Consumer>
+          {({setPanel}) => (
+            <Info>
+              {_('You can style and position your axes in the ')}
+              <a onClick={() => setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
+              {_(' panel.')}
+            </Info>
+          )}
+        </ModalProviderContext.Consumer>
       </PlotlySection>
     );
   }
@@ -164,13 +164,7 @@ UnconnectedAxesCreator.propTypes = {
   fullContainer: PropTypes.object,
 };
 
-UnconnectedAxesCreator.contextTypes = {
-  data: PropTypes.array,
-  fullData: PropTypes.array,
-  fullLayout: PropTypes.object,
-  localize: PropTypes.func,
-  setPanel: PropTypes.func,
-};
+UnconnectedAxesCreator.contextType = EditorControlsContext;
 
 export default connectToContainer(UnconnectedAxesCreator, {
   modifyPlotProps: (props, context, plotProps) => {
diff --git a/src/components/fields/ErrorBars.js b/src/components/fields/ErrorBars.js
index 9095851c2..b630cd871 100644
--- a/src/components/fields/ErrorBars.js
+++ b/src/components/fields/ErrorBars.js
@@ -4,6 +4,7 @@ import {DataSelector, Radio, Numeric, MultiColorPicker} from '../index';
 import RadioBlocks from '../widgets/RadioBlocks';
 import Field from './Field';
 import {connectToContainer} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 class ErrorBars extends Component {
   constructor(props, context) {
@@ -158,6 +159,7 @@ class ErrorBars extends Component {
   render() {
     return (
       <Fragment>
+        Field
         {this.renderModeSelector()}
         {this.renderErrorBarControls()}
       </Fragment>
@@ -171,8 +173,6 @@ ErrorBars.propTypes = {
   updatePlot: PropTypes.func,
 };
 
-ErrorBars.contextTypes = {
-  localize: PropTypes.func,
-};
+ErrorBars.contextType = EditorControlsContext;
 
 export default connectToContainer(ErrorBars);
diff --git a/src/components/fields/GroupCreator.js b/src/components/fields/GroupCreator.js
index e7fb7ff25..c4a279679 100644
--- a/src/components/fields/GroupCreator.js
+++ b/src/components/fields/GroupCreator.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
 import {MULTI_VALUED} from 'lib/constants';
+import {EditorControlsContext} from '../../context';
 
 class UnconnectedGroupCreator extends Component {
   getAllGroups() {
@@ -75,10 +76,6 @@ UnconnectedGroupCreator.propTypes = {
   ...Field.propTypes,
 };
 
-UnconnectedGroupCreator.contextTypes = {
-  localize: PropTypes.func,
-  data: PropTypes.array,
-  fullData: PropTypes.array,
-};
+UnconnectedGroupCreator.contextType = EditorControlsContext;
 
 export default connectToContainer(UnconnectedGroupCreator);
diff --git a/src/components/fields/SubplotCreator.js b/src/components/fields/SubplotCreator.js
index 45e4bd186..09e87b1cb 100644
--- a/src/components/fields/SubplotCreator.js
+++ b/src/components/fields/SubplotCreator.js
@@ -7,6 +7,7 @@ import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
 import {connectToContainer, traceTypeToAxisType, getSubplotTitle} from 'lib';
 import {PlotlySection} from 'components';
+import {EditorControlsContext, ModalProviderContext} from '../../context';
 
 class UnconnectedSingleSubplotCreator extends Component {
   canAddSubplot() {
@@ -91,12 +92,7 @@ UnconnectedSingleSubplotCreator.propTypes = {
   updateContainer: PropTypes.func,
 };
 
-UnconnectedSingleSubplotCreator.contextTypes = {
-  fullLayout: PropTypes.object,
-  data: PropTypes.array,
-  fullData: PropTypes.array,
-  onUpdate: PropTypes.func,
-};
+UnconnectedSingleSubplotCreator.contextType = EditorControlsContext;
 
 const SingleSubplotCreator = connectToContainer(UnconnectedSingleSubplotCreator);
 
@@ -130,11 +126,15 @@ class UnconnectedSubplotCreator extends Component {
           label={SUBPLOT_TO_ATTR[subplotType].layout}
           options={getOptions(subplotType)}
         />
-        <Info>
-          {_('You can style and position your subplots in the ')}
-          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
-          {_(' panel.')}
-        </Info>
+        <ModalProviderContext>
+          {({setPanel}) => (
+            <Info>
+              {_('You can style and position your subplots in the ')}
+              <a onClick={() => setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
+              {_(' panel.')}
+            </Info>
+          )}
+        </ModalProviderContext>
       </PlotlySection>
     );
   }
@@ -145,13 +145,7 @@ UnconnectedSubplotCreator.propTypes = {
   fullContainer: PropTypes.object,
 };
 
-UnconnectedSubplotCreator.contextTypes = {
-  data: PropTypes.array,
-  fullData: PropTypes.array,
-  fullLayout: PropTypes.object,
-  localize: PropTypes.func,
-  setPanel: PropTypes.func,
-};
+UnconnectedSubplotCreator.contextType = EditorControlsContext;
 
 export default connectToContainer(UnconnectedSubplotCreator, {
   modifyPlotProps: (props, context, plotProps) => {
diff --git a/src/components/fields/TextEditor.js b/src/components/fields/TextEditor.js
index a85008401..4231c245b 100644
--- a/src/components/fields/TextEditor.js
+++ b/src/components/fields/TextEditor.js
@@ -6,6 +6,7 @@ import LaTeX from '../widgets/text_editors/LaTeX';
 import RichText from '../widgets/text_editors/RichText';
 import MultiFormat from '../widgets/text_editors/MultiFormat';
 import HTML from '../widgets/text_editors/HTML';
+import {EditorControlsContext} from '../../context';
 
 class UnconnectedTextEditor extends Component {
   render() {
@@ -60,9 +61,7 @@ UnconnectedTextEditor.propTypes = {
   updatePlot: PropTypes.func,
 };
 
-UnconnectedTextEditor.contextTypes = {
-  localize: PropTypes.func,
-};
+UnconnectedTextEditor.contextType = EditorControlsContext;
 
 export default connectToContainer(UnconnectedTextEditor, {
   modifyPlotProps: (props, context, plotProps) => {
diff --git a/src/components/fields/TraceSelector.js b/src/components/fields/TraceSelector.js
index 00270429c..e40298842 100644
--- a/src/components/fields/TraceSelector.js
+++ b/src/components/fields/TraceSelector.js
@@ -11,11 +11,11 @@ import {TRACES_WITH_GL} from 'lib/constants';
 import {TraceTypeSelector, TraceTypeSelectorButton, RadioBlocks} from 'components/widgets';
 import Field from './Field';
 import {CogIcon} from 'plotly-icons';
+import {EditorControlsContext, ModalProviderContext} from '../../context';
 
 class TraceSelector extends Component {
   constructor(props, context) {
     super(props, context);
-
     this.updatePlot = this.updatePlot.bind(this);
     this.setGl = this.setGl.bind(this);
     this.glEnabled = this.glEnabled.bind(this);
@@ -112,17 +112,21 @@ class TraceSelector extends Component {
                 alignItems: 'center',
               }}
             >
-              <TraceTypeSelectorButton
-                {...props}
-                traceTypesConfig={this.context.traceTypesConfig}
-                handleClick={() =>
-                  this.context.openModal(TraceTypeSelector, {
-                    ...props,
-                    traceTypesConfig: this.context.traceTypesConfig,
-                    glByDefault: this.context.glByDefault,
-                  })
-                }
-              />
+              <ModalProviderContext.Consumer>
+                {({openModal}) => (
+                  <TraceTypeSelectorButton
+                    {...props}
+                    traceTypesConfig={this.context.traceTypesConfig}
+                    handleClick={() =>
+                      openModal(TraceTypeSelector, {
+                        ...props,
+                        traceTypesConfig: this.context.traceTypesConfig,
+                        glByDefault: this.context.glByDefault,
+                      })
+                    }
+                  />
+                )}
+              </ModalProviderContext.Consumer>
               {!TRACES_WITH_GL.includes(this.props.container.type) ? (
                 ''
               ) : (
@@ -149,15 +153,7 @@ class TraceSelector extends Component {
   }
 }
 
-TraceSelector.contextTypes = {
-  openModal: PropTypes.func,
-  advancedTraceTypeSelector: PropTypes.bool,
-  traceTypesConfig: PropTypes.object,
-  plotSchema: PropTypes.object,
-  config: PropTypes.object,
-  localize: PropTypes.func,
-  glByDefault: PropTypes.bool,
-};
+TraceSelector.contextType = EditorControlsContext;
 
 TraceSelector.propTypes = {
   container: PropTypes.object.isRequired,
diff --git a/src/components/fields/UpdateMenuButtons.js b/src/components/fields/UpdateMenuButtons.js
index 3edf503b5..1682242f7 100644
--- a/src/components/fields/UpdateMenuButtons.js
+++ b/src/components/fields/UpdateMenuButtons.js
@@ -3,6 +3,7 @@ import React, {Component} from 'react';
 import {Dropdown, TextEditor} from '../index';
 import Field from './Field';
 import {connectToContainer} from 'lib';
+import {EditorControlsContext} from '../../context';
 
 class UpdateMenuButtons extends Component {
   constructor(props, context) {
@@ -45,8 +46,6 @@ UpdateMenuButtons.propTypes = {
   updatePlot: PropTypes.func,
 };
 
-UpdateMenuButtons.contextTypes = {
-  localize: PropTypes.func,
-};
+UpdateMenuButtons.contextType = EditorControlsContext;
 
 export default connectToContainer(UpdateMenuButtons);
diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js
index 5d40b917b..5255aac96 100644
--- a/src/components/widgets/ColorscalePicker.js
+++ b/src/components/widgets/ColorscalePicker.js
@@ -3,6 +3,7 @@ import Dropdown from './Dropdown';
 import Info from '../fields/Info';
 import PropTypes from 'prop-types';
 import React, {Component, Fragment} from 'react';
+import {EditorControlsContext} from '../../context';
 
 class Scale extends Component {
   constructor(props) {
@@ -81,8 +82,6 @@ Scale.propTypes = {
   initialCategory: PropTypes.string,
 };
 
-Scale.contextTypes = {
-  localize: PropTypes.func,
-};
+Scale.contextType = EditorControlsContext;
 
 export default Scale;
diff --git a/src/components/widgets/Dropdown.js b/src/components/widgets/Dropdown.js
index 3de20f193..2b1a49eec 100644
--- a/src/components/widgets/Dropdown.js
+++ b/src/components/widgets/Dropdown.js
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import Select from 'react-select';
 import classnames from 'classnames';
+import {EditorControlsContext} from '../../context';
 
 class Dropdown extends Component {
   constructor(props) {
@@ -111,8 +112,6 @@ Dropdown.propTypes = {
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
-Dropdown.contextTypes = {
-  localize: PropTypes.func,
-};
+Dropdown.contextType = EditorControlsContext;
 
 export default Dropdown;
diff --git a/src/components/widgets/Dropzone.js b/src/components/widgets/Dropzone.js
index 4fa9da2ae..9fac8d18f 100644
--- a/src/components/widgets/Dropzone.js
+++ b/src/components/widgets/Dropzone.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import Drop from 'react-dropzone';
+import {EditorControlsContext} from '../../context';
 
 class Dropzone extends Component {
   constructor(props, context) {
@@ -154,8 +155,6 @@ Dropzone.propTypes = {
   value: PropTypes.any,
 };
 
-Dropzone.contextTypes = {
-  localize: PropTypes.func,
-};
+Dropzone.contextType = EditorControlsContext;
 
 export default Dropzone;
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index d249d19b2..e69a99e77 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -4,6 +4,7 @@ import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
 import Modal from 'components/containers/Modal';
 import {traceTypeToPlotlyInitFigure, renderTraceIcon, plotlyTraceToCustomTrace} from 'lib';
 import {TRACES_WITH_GL} from 'lib/constants';
+import {EditorControlsContext} from '../../context';
 
 const renderActionItems = (actionItems, item) =>
   actionItems
@@ -60,9 +61,7 @@ Item.propTypes = {
   actions: PropTypes.func,
   showActions: PropTypes.bool,
 };
-Item.contextTypes = {
-  localize: PropTypes.func,
-};
+Item.contextType = EditorControlsContext;
 
 class TraceTypeSelector extends Component {
   constructor(props) {
@@ -269,8 +268,6 @@ TraceTypeSelectorButton.propTypes = {
   container: PropTypes.object,
   traceTypesConfig: PropTypes.object.isRequired,
 };
-TraceTypeSelectorButton.contextTypes = {
-  localize: PropTypes.func,
-};
+TraceTypeSelectorButton.contextType = EditorControlsContext;
 
 export default TraceTypeSelector;
diff --git a/src/components/widgets/text_editors/MultiFormat.js b/src/components/widgets/text_editors/MultiFormat.js
index 9b02f354e..ac265dd76 100644
--- a/src/components/widgets/text_editors/MultiFormat.js
+++ b/src/components/widgets/text_editors/MultiFormat.js
@@ -6,6 +6,7 @@ import RichTextEditor from './RichText';
 import {isLaTeXExpr, htmlToLaTeX, laTeXToHTML, hasTextExpression} from './convertFormats';
 import classnames from 'classnames';
 import Button from 'components/widgets/Button';
+import {EditorControlsContext} from '../../../context';
 
 class MultiFormatTextEditor extends Component {
   constructor(props, context) {
@@ -278,8 +279,6 @@ MultiFormatTextEditor.defaultProps = {
   value: '',
 };
 
-MultiFormatTextEditor.contextTypes = {
-  localize: PropTypes.func,
-};
+MultiFormatTextEditor.contextType = EditorControlsContext;
 
 export default MultiFormatTextEditor;
diff --git a/src/components/widgets/text_editors/RichText/LinkEditor.js b/src/components/widgets/text_editors/RichText/LinkEditor.js
index 6b0b2cebd..bf1956a9b 100644
--- a/src/components/widgets/text_editors/RichText/LinkEditor.js
+++ b/src/components/widgets/text_editors/RichText/LinkEditor.js
@@ -7,6 +7,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {RETURN_KEY, ESCAPE_KEY} from 'lib/constants';
 import {findDOMNode} from 'react-dom';
+import {EditorControlsContext} from '../../../../context';
 
 class LinkEditor extends Component {
   constructor(props) {
@@ -128,8 +129,6 @@ LinkEditor.defaultProps = {
   },
 };
 
-LinkEditor.contextTypes = {
-  localize: PropTypes.func.isRequired,
-};
+LinkEditor.contextType = EditorControlsContext;
 
 export default LinkEditor;
diff --git a/src/context/index.js b/src/context/index.js
new file mode 100644
index 000000000..312d60220
--- /dev/null
+++ b/src/context/index.js
@@ -0,0 +1,42 @@
+import {createContext} from 'react';
+const EditorControlsContext = createContext({});
+const PanelMenuWrapperContext = createContext({});
+const ModalProviderContext = createContext({});
+const PlotlyFoldContext = createContext({});
+const PlotlyPanelContext = createContext({});
+// const ConnectAggregationToTransformContext = createContext({});
+// const ConnectAnnotationToLayoutContext = createContext({});
+// const ConnectAxesToLayoutContext = createContext({});
+// const ConnectCartesianSubplotToLayoutContext = createContext({});
+// const ConnectImageToLayoutContext = createContext({});
+// const ConnectLayoutToPlotContext = createContext({});
+// const ConnectNonCartesianSubplotToLayoutContext = createContext({});
+// const ConnectRangeSelectorToAxisContext = createContext({});
+// const ConnectShapeToLayoutContext = createContext({});
+// const ConnectSliderToLayoutContext = createContext({});
+// const ConnectToContainerContext = createContext({});
+const ConnectTraceToPlotContext = createContext({});
+// const ConnectTransformToTraceContext = createContext({});
+// const ConnectUpdateMenuToLayoutContext = createContext({});
+
+export {
+  EditorControlsContext,
+  PanelMenuWrapperContext,
+  ModalProviderContext,
+  PlotlyFoldContext,
+  PlotlyPanelContext,
+  // ConnectAggregationToTransformContext,
+  // ConnectAnnotationToLayoutContext,
+  // ConnectAxesToLayoutContext,
+  // ConnectCartesianSubplotToLayoutContext,
+  // ConnectImageToLayoutContext,
+  // ConnectLayoutToPlotContext,
+  // ConnectNonCartesianSubplotToLayoutContext,
+  // ConnectRangeSelectorToAxisContext,
+  // ConnectShapeToLayoutContext,
+  // ConnectSliderToLayoutContext,
+  // ConnectToContainerContext,
+  ConnectTraceToPlotContext,
+  // ConnectTransformToTraceContext,
+  // ConnectUpdateMenuToLayoutContext,
+};
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index 6cfd2df5a..320bebea8 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   DataSelector,
   Dropdown,
@@ -17,148 +17,163 @@ import {
   HistogramInfoHorizontal,
   Histogram2d,
 } from '../components/fields/derived';
+import {EditorControlsContext, ModalProviderContext} from '../context';
 
-const GraphCreatePanel = (props, {localize: _, setPanel}) => {
+const GraphCreatePanel = () => {
   return (
-    <TraceAccordion
-      canAdd
-      traceFilterCondition={t =>
-        !(t.transforms && t.transforms.some(tr => ['fit', 'moving-average'].includes(tr.type)))
-      }
-    >
-      <TraceSelector label={_('Type')} attr="type" show />
+    <EditorControlsContext.Consumer>
+      {({localize: _}) => (
+        <ModalProviderContext.Consumer>
+          {({setPanel}) => (
+            <TraceAccordion
+              canAdd
+              traceFilterCondition={t =>
+                !(
+                  t.transforms &&
+                  t.transforms.some(tr => ['fit', 'moving-average'].includes(tr.type))
+                )
+              }
+            >
+              <TraceSelector label={_('Type')} attr="type" show />
 
-      <LocationSelector attr="type" />
+              <LocationSelector attr="type" />
 
-      <DataSelector label={_('Values')} attr="values" />
-      <DataSelector label={_('Labels')} attr="labels" />
+              <DataSelector label={_('Values')} attr="values" />
+              <DataSelector label={_('Labels')} attr="labels" />
 
-      <DataSelector
-        label={{
-          histogram2d: _('X Values'),
-          histogram: _('X Values'),
-          '*': _('X'),
-        }}
-        attr="x"
-      />
-      <DataSelector
-        label={{
-          histogram2d: _('Y Values'),
-          histogram: _('Y Values'),
-          '*': _('Y'),
-        }}
-        attr="y"
-      />
-      <DataSelector
-        label={{
-          choropleth: _('Values'),
-          histogram2d: _('Z Values'),
-          '*': _('Z'),
-        }}
-        attr="z"
-      />
-      <Radio
-        label={_('Orientation')}
-        attr="orientation"
-        options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
-      />
-      <HistogramInfoVertical>
-        {_(
-          'Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the '
-        )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(
-          ' panel under Style. If Y values are omitted, the histogram function defaults to Count.'
-        )}
-      </HistogramInfoVertical>
-      <HistogramInfoHorizontal>
-        {_(
-          'Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the '
-        )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(
-          ' under Style panel. If X values are omitted, the histogram function defaults to Count.'
-        )}
-      </HistogramInfoHorizontal>
-      <Histogram2d>
-        {_(
-          'Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the '
-        )}
-        <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(
-          ' under Style panel. If Z values are omitted, the histogram function defaults to Count.'
-        )}
-      </Histogram2d>
-      <DataSelector label={_('I (Optional)')} attr="i" />
-      <DataSelector label={_('J (Optional)')} attr="j" />
-      <DataSelector label={_('K (Optional)')} attr="k" />
-      <DataSelector label={_('Open')} attr="open" />
-      <DataSelector label={_('High')} attr="high" />
-      <DataSelector label={_('Low')} attr="low" />
-      <DataSelector label={_('Close')} attr="close" />
-      <DataSelector label={_('A')} attr="a" />
-      <DataSelector label={_('B')} attr="b" />
-      <DataSelector label={_('C')} attr="c" />
-      <DataSelector label={_('U')} attr="u" />
-      <DataSelector label={_('V')} attr="v" />
-      <DataSelector label={_('W')} attr="w" />
-      <DataSelector label={_('X start')} attr="starts.x" />
-      <DataSelector label={_('Y start')} attr="starts.y" />
-      <DataSelector label={_('Z start')} attr="starts.z" />
-      <DataSelector label={_('Headers')} attr="header.values" />
-      <DataSelector label={_('Columns')} attr="cells.values" />
+              <DataSelector
+                label={{
+                  histogram2d: _('X Values'),
+                  histogram: _('X Values'),
+                  '*': _('X'),
+                }}
+                attr="x"
+              />
+              <DataSelector
+                label={{
+                  histogram2d: _('Y Values'),
+                  histogram: _('Y Values'),
+                  '*': _('Y'),
+                }}
+                attr="y"
+              />
+              <DataSelector
+                label={{
+                  choropleth: _('Values'),
+                  histogram2d: _('Z Values'),
+                  '*': _('Z'),
+                }}
+                attr="z"
+              />
+              <Radio
+                label={_('Orientation')}
+                attr="orientation"
+                options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
+              />
+              <HistogramInfoVertical>
+                {_(
+                  'Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the '
+                )}
+                <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+                {_(
+                  ' panel under Style. If Y values are omitted, the histogram function defaults to Count.'
+                )}
+              </HistogramInfoVertical>
+              <HistogramInfoHorizontal>
+                {_(
+                  'Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the '
+                )}
+                <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+                {_(
+                  ' under Style panel. If X values are omitted, the histogram function defaults to Count.'
+                )}
+              </HistogramInfoHorizontal>
+              <Histogram2d>
+                {_(
+                  'Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the '
+                )}
+                <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
+                {_(
+                  ' under Style panel. If Z values are omitted, the histogram function defaults to Count.'
+                )}
+              </Histogram2d>
+              <DataSelector label={_('I (Optional)')} attr="i" />
+              <DataSelector label={_('J (Optional)')} attr="j" />
+              <DataSelector label={_('K (Optional)')} attr="k" />
+              <DataSelector label={_('Open')} attr="open" />
+              <DataSelector label={_('High')} attr="high" />
+              <DataSelector label={_('Low')} attr="low" />
+              <DataSelector label={_('Close')} attr="close" />
+              <DataSelector label={_('A')} attr="a" />
+              <DataSelector label={_('B')} attr="b" />
+              <DataSelector label={_('C')} attr="c" />
+              <DataSelector label={_('U')} attr="u" />
+              <DataSelector label={_('V')} attr="v" />
+              <DataSelector label={_('W')} attr="w" />
+              <DataSelector label={_('X start')} attr="starts.x" />
+              <DataSelector label={_('Y start')} attr="starts.y" />
+              <DataSelector label={_('Z start')} attr="starts.z" />
+              <DataSelector label={_('Headers')} attr="header.values" />
+              <DataSelector label={_('Columns')} attr="cells.values" />
 
-      <TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl', 'barpolar']} mode="trace">
-        <DataSelector label={_('Radius')} attr="r" />
-        <DataSelector label={_('Theta')} attr="theta" />
-        <Dropdown
-          label={_('Theta Unit')}
-          options={[
-            {label: _('Radians'), value: 'radians'},
-            {label: _('Degrees'), value: 'degrees'},
-            {label: _('Gradians'), value: 'gradians'},
-          ]}
-          attr="thetaunit"
-          clearable={false}
-        />
-      </TraceTypeSection>
+              <TraceTypeSection
+                traceTypes={['scatterpolar', 'scatterpolargl', 'barpolar']}
+                mode="trace"
+              >
+                <DataSelector label={_('Radius')} attr="r" />
+                <DataSelector label={_('Theta')} attr="theta" />
+                <Dropdown
+                  label={_('Theta Unit')}
+                  options={[
+                    {label: _('Radians'), value: 'radians'},
+                    {label: _('Degrees'), value: 'degrees'},
+                    {label: _('Gradians'), value: 'gradians'},
+                  ]}
+                  attr="thetaunit"
+                  clearable={false}
+                />
+              </TraceTypeSection>
 
-      <AxesCreator attr="fake_attr" />
-      <SubplotCreator attr="fake_attr" />
+              <AxesCreator attr="fake_attr" />
+              <SubplotCreator attr="fake_attr" />
 
-      <PlotlySection name={_('Header Options')}>
-        <DataSelector label={_('Fill Color')} attr="header.fill.color" />
-        <DataSelector label={_('Font Color')} attr="header.font.color" />
-        <DataSelector label={_('Font Size')} attr="header.font.size" />
-      </PlotlySection>
+              <PlotlySection name={_('Header Options')}>
+                <DataSelector label={_('Fill Color')} attr="header.fill.color" />
+                <DataSelector label={_('Font Color')} attr="header.font.color" />
+                <DataSelector label={_('Font Size')} attr="header.font.size" />
+              </PlotlySection>
 
-      <PlotlySection name={_('Cell Options')}>
-        <DataSelector label={_('Fill Color')} attr="cells.fill.color" />
-        <DataSelector label={_('Font Color')} attr="cells.font.color" />
-        <DataSelector label={_('Font Size')} attr="cells.font.size" />
-      </PlotlySection>
+              <PlotlySection name={_('Cell Options')}>
+                <DataSelector label={_('Fill Color')} attr="cells.fill.color" />
+                <DataSelector label={_('Font Color')} attr="cells.font.color" />
+                <DataSelector label={_('Font Size')} attr="cells.font.size" />
+              </PlotlySection>
 
-      <PlotlySection name={_('Column Options')}>
-        <DataSelector label={_('Width')} attr="columnwidth" />
-        <DataSelector label={_('Order')} attr="columnorder" />
-      </PlotlySection>
+              <PlotlySection name={_('Column Options')}>
+                <DataSelector label={_('Width')} attr="columnwidth" />
+                <DataSelector label={_('Order')} attr="columnorder" />
+              </PlotlySection>
 
-      <PlotlySection name={_('Options')}>
-        <DataSelector label={_('Intensity')} attr="intensity" />
-        <DataSelector label={_('Facecolor')} attr="facecolor" />
-        <DataSelector label={_('Vertexcolor')} attr="vertexcolor" />
-        <Radio
-          label={_('Transpose')}
-          attr="transpose"
-          options={[{label: _('No'), value: false}, {label: _('Yes'), value: true}]}
-        />
-      </PlotlySection>
-    </TraceAccordion>
+              <PlotlySection name={_('Options')}>
+                <DataSelector label={_('Intensity')} attr="intensity" />
+                <DataSelector label={_('Facecolor')} attr="facecolor" />
+                <DataSelector label={_('Vertexcolor')} attr="vertexcolor" />
+                <Radio
+                  label={_('Transpose')}
+                  attr="transpose"
+                  options={[{label: _('No'), value: false}, {label: _('Yes'), value: true}]}
+                />
+              </PlotlySection>
+            </TraceAccordion>
+          )}
+        </ModalProviderContext.Consumer>
+      )}
+    </EditorControlsContext.Consumer>
   );
 };
 
 export default GraphCreatePanel;
-GraphCreatePanel.contextTypes = {
-  localize: PropTypes.func,
-  setPanel: PropTypes.func,
-};
+// GraphCreatePanel.contextTypes = {
+//   localize: PropTypes.func,
+//   setPanel: PropTypes.func,
+// };
diff --git a/src/default_panels/GraphSubplotsPanel.js b/src/default_panels/GraphSubplotsPanel.js
index 473ac788d..09a7f471c 100644
--- a/src/default_panels/GraphSubplotsPanel.js
+++ b/src/default_panels/GraphSubplotsPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   SubplotAccordion,
   RectanglePositioner,
@@ -16,220 +16,228 @@ import {
   NumericFraction,
 } from '../components';
 import {TRACE_TO_AXIS} from '../lib/constants';
+import {EditorControlsContext} from '../context';
 
-const GraphSubplotsPanel = (props, {localize: _}) => (
-  <SubplotAccordion>
-    <PlotlySection name={_('Boundaries')} attr="xaxis.domain[0]">
-      <AxisOverlayDropdown label={_('X Overlay')} attr="xaxis.overlaying" />
-      <AxisOverlayDropdown label={_('Y Overlay')} attr="yaxis.overlaying" />
-    </PlotlySection>
+const GraphSubplotsPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <SubplotAccordion>
+        <PlotlySection name={_('Boundaries')} attr="xaxis.domain[0]">
+          <AxisOverlayDropdown label={_('X Overlay')} attr="xaxis.overlaying" />
+          <AxisOverlayDropdown label={_('Y Overlay')} attr="yaxis.overlaying" />
+        </PlotlySection>
 
-    <RectanglePositioner attr="domain.x[0]" />
-    <RectanglePositioner attr="xaxis.domain[0]" cartesian />
+        <RectanglePositioner attr="domain.x[0]" />
+        <RectanglePositioner attr="xaxis.domain[0]" cartesian />
 
-    <TraceTypeSection name={_('X Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
-      <AxisAnchorDropdown label={_('Anchor to')} attr="xaxis.anchor" clearable={false} />
-      <AxisSide label={_('Side')} attr="xaxis.side" />
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Y Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
-      <AxisAnchorDropdown label={_('Anchor to')} attr="yaxis.anchor" clearable={false} />
-      <AxisSide label={_('Side')} attr="yaxis.side" />
-    </TraceTypeSection>
+        <TraceTypeSection name={_('X Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
+          <AxisAnchorDropdown label={_('Anchor to')} attr="xaxis.anchor" clearable={false} />
+          <AxisSide label={_('Side')} attr="xaxis.side" />
+        </TraceTypeSection>
+        <TraceTypeSection name={_('Y Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
+          <AxisAnchorDropdown label={_('Anchor to')} attr="yaxis.anchor" clearable={false} />
+          <AxisSide label={_('Side')} attr="yaxis.side" />
+        </TraceTypeSection>
 
-    <PlotlySection name={_('Aspect Ratio')}>
-      <VisibilitySelect
-        attr="aspectmode"
-        options={[
-          {label: _('Auto'), value: 'mode'},
-          {label: _('Cube'), value: 'cube'},
-          {label: _('Data'), value: 'data'},
-          {label: _('Manual'), value: 'manual'},
-        ]}
-        dropdown={true}
-        clearable={false}
-        showOn="manual"
-        defaultOpt="mode"
-      >
-        <Numeric label={_('X')} attr="aspectratio.x" step={0.1} />
-        <Numeric label={_('Y')} attr="aspectratio.y" step={0.1} />
-        <Numeric label={_('Z')} attr="aspectratio.z" step={0.1} />
-      </VisibilitySelect>
-    </PlotlySection>
+        <PlotlySection name={_('Aspect Ratio')}>
+          <VisibilitySelect
+            attr="aspectmode"
+            options={[
+              {label: _('Auto'), value: 'mode'},
+              {label: _('Cube'), value: 'cube'},
+              {label: _('Data'), value: 'data'},
+              {label: _('Manual'), value: 'manual'},
+            ]}
+            dropdown={true}
+            clearable={false}
+            showOn="manual"
+            defaultOpt="mode"
+          >
+            <Numeric label={_('X')} attr="aspectratio.x" step={0.1} />
+            <Numeric label={_('Y')} attr="aspectratio.y" step={0.1} />
+            <Numeric label={_('Z')} attr="aspectratio.z" step={0.1} />
+          </VisibilitySelect>
+        </PlotlySection>
 
-    <PlotlySection name={_('Canvas')}>
-      <ColorPicker label={_('Plot Background')} attr="bgcolor" />
-    </PlotlySection>
+        <PlotlySection name={_('Canvas')}>
+          <ColorPicker label={_('Plot Background')} attr="bgcolor" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Bar Options')}>
-      <Radio
-        label={_('Bar Mode')}
-        attr="barmode"
-        options={[{label: _('Stack'), value: 'stack'}, {label: _('Overlay'), value: 'overlay'}]}
-      />
-      <NumericFraction label={_('Bar Padding')} attr="bargap" showSlider />
-    </PlotlySection>
+        <PlotlySection name={_('Bar Options')}>
+          <Radio
+            label={_('Bar Mode')}
+            attr="barmode"
+            options={[{label: _('Stack'), value: 'stack'}, {label: _('Overlay'), value: 'overlay'}]}
+          />
+          <NumericFraction label={_('Bar Padding')} attr="bargap" showSlider />
+        </PlotlySection>
 
-    <PlotlySection name={_('Map Style')}>
-      <Dropdown
-        label={_('Mapbox Style')}
-        attr="style"
-        options={[
-          {label: _('Basic'), value: 'basic'},
-          {label: _('Outdoors'), value: 'outdoors'},
-          {label: _('Light'), value: 'light'},
-          {label: _('Dark'), value: 'dark'},
-          {label: _('Satellite'), value: 'satellite'},
-          {label: _('Satellite with Streets'), value: 'satellite-streets'},
-        ]}
-        clearable={false}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Map Positioning')}>
-      <Numeric label={_('Center Latitude')} attr="center.lat" />
-      <Numeric label={_('Center Longitude')} attr="center.lon" />
-      <Numeric label={_('Zoom Level')} attr="zoom" min={0} />
-      <Numeric label={_('Bearing')} attr="bearing" />
-      <Numeric label={_('Pitch')} attr="pitch" min={0} />
-    </PlotlySection>
+        <PlotlySection name={_('Map Style')}>
+          <Dropdown
+            label={_('Mapbox Style')}
+            attr="style"
+            options={[
+              {label: _('Basic'), value: 'basic'},
+              {label: _('Outdoors'), value: 'outdoors'},
+              {label: _('Light'), value: 'light'},
+              {label: _('Dark'), value: 'dark'},
+              {label: _('Satellite'), value: 'satellite'},
+              {label: _('Satellite with Streets'), value: 'satellite-streets'},
+            ]}
+            clearable={false}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Map Positioning')}>
+          <Numeric label={_('Center Latitude')} attr="center.lat" />
+          <Numeric label={_('Center Longitude')} attr="center.lon" />
+          <Numeric label={_('Zoom Level')} attr="zoom" min={0} />
+          <Numeric label={_('Bearing')} attr="bearing" />
+          <Numeric label={_('Pitch')} attr="pitch" min={0} />
+        </PlotlySection>
 
-    <PlotlySection name={_('Map Projection')}>
-      <Dropdown
-        label={_('Region')}
-        attr="scope"
-        options={[
-          {label: _('World'), value: 'world'},
-          {label: _('USA'), value: 'usa'},
-          {label: _('Europe'), value: 'europe'},
-          {label: _('Asia'), value: 'asia'},
-          {label: _('Africa'), value: 'africa'},
-          {label: _('North America'), value: 'north america'},
-          {label: _('South America'), value: 'south america'},
-        ]}
-        clearable={false}
-      />
-      <Dropdown
-        label={_('Projection')}
-        attr="projection.type"
-        clearable={false}
-        options={[
-          {label: _('Equirectangular'), value: 'equirectangular'},
-          {label: _('Mercator'), value: 'mercator'},
-          {label: _('Orthographic'), value: 'orthographic'},
-          {label: _('Natural Earth'), value: 'natural earth'},
-          {label: _('Albers USA'), value: 'albers usa'},
-          {label: _('Winkel Tripel'), value: 'winkel tripel'},
-          {label: _('Robinson'), value: 'robinson'},
-          {label: _('Miller'), value: 'miller'},
-          {label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
-          {label: _('Eckert 4'), value: 'eckert4'},
-          {label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
-          {
-            label: _('Azimuthal Equidistant'),
-            value: 'azimuthal equidistant',
-          },
-          {label: _('Conic Equal Area'), value: 'conic equal area'},
-          {label: _('Conic Conformal'), value: 'conic conformal'},
-          {label: _('Conic Equidistant'), value: 'conic equidistant'},
-          {label: _('Gnomonic'), value: 'gnomonic'},
-          {label: _('Stereographic'), value: 'stereographic'},
-          {label: _('Mollweide'), value: 'mollweide'},
-          {label: _('Hammer'), value: 'hammer'},
-          {label: _('Transverse Mercator'), value: 'transverse mercator'},
-          {label: _('Aitoff'), value: 'aitoff'},
-          {label: _('Sinusoidal'), value: 'sinusoidal'},
-        ]}
-      />
-    </PlotlySection>
+        <PlotlySection name={_('Map Projection')}>
+          <Dropdown
+            label={_('Region')}
+            attr="scope"
+            options={[
+              {label: _('World'), value: 'world'},
+              {label: _('USA'), value: 'usa'},
+              {label: _('Europe'), value: 'europe'},
+              {label: _('Asia'), value: 'asia'},
+              {label: _('Africa'), value: 'africa'},
+              {label: _('North America'), value: 'north america'},
+              {label: _('South America'), value: 'south america'},
+            ]}
+            clearable={false}
+          />
+          <Dropdown
+            label={_('Projection')}
+            attr="projection.type"
+            clearable={false}
+            options={[
+              {label: _('Equirectangular'), value: 'equirectangular'},
+              {label: _('Mercator'), value: 'mercator'},
+              {label: _('Orthographic'), value: 'orthographic'},
+              {label: _('Natural Earth'), value: 'natural earth'},
+              {label: _('Albers USA'), value: 'albers usa'},
+              {label: _('Winkel Tripel'), value: 'winkel tripel'},
+              {label: _('Robinson'), value: 'robinson'},
+              {label: _('Miller'), value: 'miller'},
+              {label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
+              {label: _('Eckert 4'), value: 'eckert4'},
+              {label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
+              {
+                label: _('Azimuthal Equidistant'),
+                value: 'azimuthal equidistant',
+              },
+              {label: _('Conic Equal Area'), value: 'conic equal area'},
+              {label: _('Conic Conformal'), value: 'conic conformal'},
+              {label: _('Conic Equidistant'), value: 'conic equidistant'},
+              {label: _('Gnomonic'), value: 'gnomonic'},
+              {label: _('Stereographic'), value: 'stereographic'},
+              {label: _('Mollweide'), value: 'mollweide'},
+              {label: _('Hammer'), value: 'hammer'},
+              {label: _('Transverse Mercator'), value: 'transverse mercator'},
+              {label: _('Aitoff'), value: 'aitoff'},
+              {label: _('Sinusoidal'), value: 'sinusoidal'},
+            ]}
+          />
+        </PlotlySection>
 
-    <PlotlySection name={_('Country Borders')} attr="showcountries">
-      <Radio
-        attr="showcountries"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Border Width')} attr="countrywidth" units="px" />
-      <ColorPicker label={_('Border Color')} attr="countrycolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
-      <Radio
-        attr="showsubunits"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
-      <ColorPicker label={_('Border Color')} attr="subunitcolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Coastlines')} attr="showcoastlines">
-      <Radio
-        attr="showcoastlines"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Width')} attr="coastlinewidth" units="px" />
-      <ColorPicker label={_('Color')} attr="coastlinecolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Oceans')} attr="showocean">
-      <Radio
-        attr="showocean"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <ColorPicker label={_('Color')} attr="oceancolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Land')} attr="showland">
-      <Radio
-        attr="showland"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <ColorPicker label={_('Color')} attr="landcolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Lakes')} attr="showlakes">
-      <Radio
-        attr="showlakes"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <ColorPicker label={_('Color')} attr="lakecolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Rivers')} attr="showrivers">
-      <Radio
-        attr="showrivers"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Width')} attr="riverwidth" units="px" />
-      <ColorPicker label={_('Color')} attr="rivercolor" />
-    </PlotlySection>
+        <PlotlySection name={_('Country Borders')} attr="showcountries">
+          <Radio
+            attr="showcountries"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Border Width')} attr="countrywidth" units="px" />
+          <ColorPicker label={_('Border Color')} attr="countrycolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
+          <Radio
+            attr="showsubunits"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
+          <ColorPicker label={_('Border Color')} attr="subunitcolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Coastlines')} attr="showcoastlines">
+          <Radio
+            attr="showcoastlines"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Width')} attr="coastlinewidth" units="px" />
+          <ColorPicker label={_('Color')} attr="coastlinecolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Oceans')} attr="showocean">
+          <Radio
+            attr="showocean"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <ColorPicker label={_('Color')} attr="oceancolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Land')} attr="showland">
+          <Radio
+            attr="showland"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <ColorPicker label={_('Color')} attr="landcolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Lakes')} attr="showlakes">
+          <Radio
+            attr="showlakes"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <ColorPicker label={_('Color')} attr="lakecolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Rivers')} attr="showrivers">
+          <Radio
+            attr="showrivers"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Width')} attr="riverwidth" units="px" />
+          <ColorPicker label={_('Color')} attr="rivercolor" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Map Frame')} attr="showframe">
-      <Radio
-        attr="showframe"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Width')} attr="framewidth" units="px" />
-      <ColorPicker label={_('Color')} attr="framecolor" />
-    </PlotlySection>
+        <PlotlySection name={_('Map Frame')} attr="showframe">
+          <Radio
+            attr="showframe"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Width')} attr="framewidth" units="px" />
+          <ColorPicker label={_('Color')} attr="framecolor" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Map Options')}>
-      <Radio
-        label={_('Resolution')}
-        attr="resolution"
-        options={[{label: _('1:110,000,000'), value: 110}, {label: _('1:50,000,000'), value: 50}]}
-      />
-      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
-      <Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
-      <Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
-      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
-    </PlotlySection>
+        <PlotlySection name={_('Map Options')}>
+          <Radio
+            label={_('Resolution')}
+            attr="resolution"
+            options={[
+              {label: _('1:110,000,000'), value: 110},
+              {label: _('1:50,000,000'), value: 50},
+            ]}
+          />
+          <Numeric label={_('Scale')} attr="projection.scale" min={0} />
+          <Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
+          <Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
+          <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
+        </PlotlySection>
 
-    <PlotlySection name={_('Ternary')}>
-      <Numeric label={_('Sum')} attr="sum" />
-    </PlotlySection>
+        <PlotlySection name={_('Ternary')}>
+          <Numeric label={_('Sum')} attr="sum" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Polar Sector')}>
-      <Numeric label={_('Min')} attr="sector[0]" min={-360} max={360} showSlider />
-      <Numeric label={_('Max')} attr="sector[1]" min={-360} max={360} showSlider />
-      <NumericFraction label={_('Hole')} attr="hole" min={0} max={100} showSlider />
-    </PlotlySection>
-  </SubplotAccordion>
+        <PlotlySection name={_('Polar Sector')}>
+          <Numeric label={_('Min')} attr="sector[0]" min={-360} max={360} showSlider />
+          <Numeric label={_('Max')} attr="sector[1]" min={-360} max={360} showSlider />
+          <NumericFraction label={_('Hole')} attr="hole" min={0} max={100} showSlider />
+        </PlotlySection>
+      </SubplotAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-GraphSubplotsPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// GraphSubplotsPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default GraphSubplotsPanel;
diff --git a/src/default_panels/GraphTransformsPanel.js b/src/default_panels/GraphTransformsPanel.js
index 38592174e..717dceed5 100644
--- a/src/default_panels/GraphTransformsPanel.js
+++ b/src/default_panels/GraphTransformsPanel.js
@@ -14,6 +14,7 @@ import {connectAggregationToTransform} from '../lib';
 import {TRANSFORMABLE_TRACES} from 'lib/constants';
 
 const AggregationSection = connectAggregationToTransform(PlotlySection);
+import {EditorControlsContext} from '../context';
 
 export class Aggregations extends Component {
   render() {
@@ -64,37 +65,41 @@ Aggregations.contextTypes = {
   localize: PropTypes.func,
 };
 
-const GraphTransformsPanel = (props, {localize: _}) => {
+const GraphTransformsPanel = () => {
   return (
-    <TraceAccordion traceFilterCondition={t => TRANSFORMABLE_TRACES.includes(t.type)}>
-      <TransformAccordion>
-        <Radio
-          attr="enabled"
-          options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
-        />
+    <EditorControlsContext.Consumer>
+      {({localize: _}) => (
+        <TraceAccordion traceFilterCondition={t => TRANSFORMABLE_TRACES.includes(t.type)}>
+          <TransformAccordion>
+            <Radio
+              attr="enabled"
+              options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
+            />
 
-        <DataSelector label={_('By')} attr="groups" />
+            <DataSelector label={_('By')} attr="groups" />
 
-        <DataSelector label={_('Target')} attr="target" />
-        <FilterOperation label={_('Operator')} attr="operation" />
-        <FilterValue label={_('Value')} attr="value" />
+            <DataSelector label={_('Target')} attr="target" />
+            <FilterOperation label={_('Operator')} attr="operation" />
+            <FilterValue label={_('Value')} attr="value" />
 
-        <Radio
-          attr="order"
-          options={[
-            {label: _('Ascending'), value: 'ascending'},
-            {label: _('Descending'), value: 'descending'},
-          ]}
-        />
+            <Radio
+              attr="order"
+              options={[
+                {label: _('Ascending'), value: 'ascending'},
+                {label: _('Descending'), value: 'descending'},
+              ]}
+            />
 
-        <Aggregations />
-      </TransformAccordion>
-    </TraceAccordion>
+            <Aggregations />
+          </TransformAccordion>
+        </TraceAccordion>
+      )}
+    </EditorControlsContext.Consumer>
   );
 };
 
-GraphTransformsPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// GraphTransformsPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default GraphTransformsPanel;
diff --git a/src/default_panels/StyleColorbarsPanel.js b/src/default_panels/StyleColorbarsPanel.js
index ae3527834..b0196f168 100644
--- a/src/default_panels/StyleColorbarsPanel.js
+++ b/src/default_panels/StyleColorbarsPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 
 import {
   Radio,
@@ -15,256 +15,291 @@ import {
   ColorPicker,
   VisibilitySelect,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
 export const traceHasColorbar = (trace, fullTrace) =>
   (fullTrace.marker && fullTrace.marker.showscale !== undefined) || // eslint-disable-line no-undefined
   fullTrace.showscale !== undefined; // eslint-disable-line no-undefined
 
-const StyleColorBarsPanel = (props, {localize: _}) => {
+const StyleColorBarsPanel = () => {
   return (
-    <TraceAccordion traceFilterCondition={traceHasColorbar}>
-      {['', 'marker.'].map(prefix => {
-        return (
-          <VisibilitySelect
-            attr={prefix + 'showscale'}
-            key={'x' + prefix}
-            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-            showOn={true}
-          >
-            <PlotlyPanel key={prefix + ' panel'}>
-              <PlotlyFold name={_('Title')}>
-                <TextEditor attr={prefix + 'colorbar.title'} />
+    <EditorControlsContext.Consumer>
+      {({localize: _}) => (
+        <TraceAccordion traceFilterCondition={traceHasColorbar}>
+          {['', 'marker.'].map(prefix => {
+            return (
+              <VisibilitySelect
+                attr={prefix + 'showscale'}
+                key={'x' + prefix}
+                options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+                showOn={true}
+              >
+                <PlotlyPanel key={prefix + ' panel'}>
+                  <PlotlyFold name={_('Title')}>
+                    <TextEditor attr={prefix + 'colorbar.title'} />
 
-                <Dropdown
-                  label={_('Location')}
-                  attr={prefix + 'colorbar.titleside'}
-                  options={[
-                    {label: _('Top'), value: 'top'},
-                    {label: _('Right'), value: 'right'},
-                    {label: _('Bottom'), value: 'bottom'},
-                  ]}
-                />
-                <FontSelector label={_('Typeface')} attr={prefix + 'colorbar.titlefont.family'} />
-                <Numeric
-                  label={_('Font Size')}
-                  attr={prefix + 'colorbar.titlefont.size'}
-                  units="px"
-                />
-                <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.titlefont.color'} />
-              </PlotlyFold>
-              <PlotlyFold name={_('Size and Positioning')}>
-                <PlotlySection name={_('Size')} attr={prefix + 'colorbar.len'}>
-                  <Numeric label={_('Height')} attr={prefix + 'colorbar.len'} />
+                    <Dropdown
+                      label={_('Location')}
+                      attr={prefix + 'colorbar.titleside'}
+                      options={[
+                        {label: _('Top'), value: 'top'},
+                        {label: _('Right'), value: 'right'},
+                        {label: _('Bottom'), value: 'bottom'},
+                      ]}
+                    />
+                    <FontSelector
+                      label={_('Typeface')}
+                      attr={prefix + 'colorbar.titlefont.family'}
+                    />
+                    <Numeric
+                      label={_('Font Size')}
+                      attr={prefix + 'colorbar.titlefont.size'}
+                      units="px"
+                    />
+                    <ColorPicker
+                      label={_('Font Color')}
+                      attr={prefix + 'colorbar.titlefont.color'}
+                    />
+                  </PlotlyFold>
+                  <PlotlyFold name={_('Size and Positioning')}>
+                    <PlotlySection name={_('Size')} attr={prefix + 'colorbar.len'}>
+                      <Numeric label={_('Height')} attr={prefix + 'colorbar.len'} />
 
-                  <Radio
-                    attr={prefix + 'colorbar.lenmode'}
-                    options={[
-                      {label: _('Fraction of Plot'), value: 'fraction'},
-                      {label: _('Pixels'), value: 'pixels'},
-                    ]}
-                  />
+                      <Radio
+                        attr={prefix + 'colorbar.lenmode'}
+                        options={[
+                          {label: _('Fraction of Plot'), value: 'fraction'},
+                          {label: _('Pixels'), value: 'pixels'},
+                        ]}
+                      />
 
-                  <Numeric label={_('Width')} attr={prefix + 'colorbar.thickness'} />
+                      <Numeric label={_('Width')} attr={prefix + 'colorbar.thickness'} />
 
-                  <Radio
-                    attr={prefix + 'colorbar.thicknessmode'}
-                    options={[
-                      {label: _('Fraction of Plot'), value: 'fraction'},
-                      {label: _('Pixels'), value: 'pixels'},
-                    ]}
-                  />
-                </PlotlySection>
-                <PlotlySection name={_('Horizontal Positioning')} attr={prefix + 'colorbar.x'}>
-                  <Numeric
-                    label={_('Position')}
-                    attr={prefix + 'colorbar.x'}
-                    showSlider
-                    step={0.02}
-                  />
-                  <Dropdown
-                    label={_('Anchor')}
-                    attr={prefix + 'colorbar.xanchor'}
-                    options={[
-                      {label: _('Left'), value: 'left'},
-                      {label: _('Center'), value: 'center'},
-                      {label: _('Right'), value: 'right'},
-                    ]}
-                  />
-                </PlotlySection>
-                <PlotlySection name={_('Vertical Positioning')} attr={prefix + 'colorbar.y'}>
-                  <Numeric
-                    label={_('Position')}
-                    attr={prefix + 'colorbar.y'}
-                    showSlider
-                    step={0.02}
-                  />
-                  <Dropdown
-                    label={_('Anchor')}
-                    attr={prefix + 'colorbar.yanchor'}
-                    options={[
-                      {label: _('Top'), value: 'top'},
-                      {label: _('Middle'), value: 'middle'},
-                      {label: _('Bottom'), value: 'bottom'},
-                    ]}
-                  />
-                </PlotlySection>
-                <PlotlySection name={_('Padding')} attr={prefix + 'colorbar.xpad'}>
-                  <Numeric label={_('Vertical')} attr={prefix + 'colorbar.ypad'} units="px" />
-                  <Numeric label={_('Horizontal')} attr={prefix + 'colorbar.xpad'} units="px" />
-                </PlotlySection>
-              </PlotlyFold>
-              <PlotlyFold name={_('Labels')}>
-                <VisibilitySelect
-                  attr={prefix + 'colorbar.showticklabels'}
-                  options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-                  showOn={true}
-                  defaultOpt={true}
-                >
-                  <FontSelector label={_('Typeface')} attr={prefix + 'colorbar.tickfont.family'} />
-                  <Numeric
-                    label={_('Font Size')}
-                    attr={prefix + 'colorbar.tickfont.size'}
-                    units="px"
-                  />
-                  <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.tickfont.color'} />
-                  <Dropdown
-                    label={_('Angle')}
-                    attr={prefix + 'colorbar.tickangle'}
-                    clearable={false}
-                    options={[
-                      {label: _('Auto'), value: 'auto'},
-                      {label: _('45'), value: 45},
-                      {label: _('90'), value: 90},
-                      {label: _('135'), value: 135},
-                      {label: _('180'), value: 180},
-                    ]}
-                  />
-                  <Dropdown
-                    label={_('Exponents')}
-                    attr={prefix + 'colorbar.exponentformat'}
-                    clearable={false}
-                    options={[
-                      {label: _('None'), value: '000'},
-                      {label: _('e+6'), value: 'e'},
-                      {label: _('E+6'), value: 'E'},
-                      {label: _('x10^6'), value: 'power'},
-                      {label: _('k/M/G'), value: 'SI'},
-                      {label: _('k/M/B'), value: 'B'},
-                    ]}
-                  />
-                  <DropdownCustom
-                    label={_('Label Prefix')}
-                    attr={prefix + 'colorbar.tickprefix'}
-                    options={[
-                      {label: _('None'), value: ''},
-                      {label: _('x'), value: 'x'},
-                      {label: _('$'), value: '$'},
-                      {label: _('#'), value: '#'},
-                      {label: _('@'), value: '@'},
-                      {label: _('Custom'), value: 'custom'},
-                    ]}
-                    customOpt="custom"
-                    dafaultOpt=""
-                    clearable={false}
-                  />
-                  <Dropdown
-                    label={_('Show Prefix')}
-                    attr={prefix + 'colorbar.showtickprefix'}
-                    options={[
-                      {label: _('Every label'), value: 'all'},
-                      {label: _('First label'), value: 'first'},
-                      {label: _('Last label'), value: 'last'},
-                      {label: _('None label'), value: 'none'},
-                    ]}
-                  />
+                      <Radio
+                        attr={prefix + 'colorbar.thicknessmode'}
+                        options={[
+                          {label: _('Fraction of Plot'), value: 'fraction'},
+                          {label: _('Pixels'), value: 'pixels'},
+                        ]}
+                      />
+                    </PlotlySection>
+                    <PlotlySection name={_('Horizontal Positioning')} attr={prefix + 'colorbar.x'}>
+                      <Numeric
+                        label={_('Position')}
+                        attr={prefix + 'colorbar.x'}
+                        showSlider
+                        step={0.02}
+                      />
+                      <Dropdown
+                        label={_('Anchor')}
+                        attr={prefix + 'colorbar.xanchor'}
+                        options={[
+                          {label: _('Left'), value: 'left'},
+                          {label: _('Center'), value: 'center'},
+                          {label: _('Right'), value: 'right'},
+                        ]}
+                      />
+                    </PlotlySection>
+                    <PlotlySection name={_('Vertical Positioning')} attr={prefix + 'colorbar.y'}>
+                      <Numeric
+                        label={_('Position')}
+                        attr={prefix + 'colorbar.y'}
+                        showSlider
+                        step={0.02}
+                      />
+                      <Dropdown
+                        label={_('Anchor')}
+                        attr={prefix + 'colorbar.yanchor'}
+                        options={[
+                          {label: _('Top'), value: 'top'},
+                          {label: _('Middle'), value: 'middle'},
+                          {label: _('Bottom'), value: 'bottom'},
+                        ]}
+                      />
+                    </PlotlySection>
+                    <PlotlySection name={_('Padding')} attr={prefix + 'colorbar.xpad'}>
+                      <Numeric label={_('Vertical')} attr={prefix + 'colorbar.ypad'} units="px" />
+                      <Numeric label={_('Horizontal')} attr={prefix + 'colorbar.xpad'} units="px" />
+                    </PlotlySection>
+                  </PlotlyFold>
+                  <PlotlyFold name={_('Labels')}>
+                    <VisibilitySelect
+                      attr={prefix + 'colorbar.showticklabels'}
+                      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+                      showOn={true}
+                      defaultOpt={true}
+                    >
+                      <FontSelector
+                        label={_('Typeface')}
+                        attr={prefix + 'colorbar.tickfont.family'}
+                      />
+                      <Numeric
+                        label={_('Font Size')}
+                        attr={prefix + 'colorbar.tickfont.size'}
+                        units="px"
+                      />
+                      <ColorPicker
+                        label={_('Font Color')}
+                        attr={prefix + 'colorbar.tickfont.color'}
+                      />
+                      <Dropdown
+                        label={_('Angle')}
+                        attr={prefix + 'colorbar.tickangle'}
+                        clearable={false}
+                        options={[
+                          {label: _('Auto'), value: 'auto'},
+                          {label: _('45'), value: 45},
+                          {label: _('90'), value: 90},
+                          {label: _('135'), value: 135},
+                          {label: _('180'), value: 180},
+                        ]}
+                      />
+                      <Dropdown
+                        label={_('Exponents')}
+                        attr={prefix + 'colorbar.exponentformat'}
+                        clearable={false}
+                        options={[
+                          {label: _('None'), value: '000'},
+                          {label: _('e+6'), value: 'e'},
+                          {label: _('E+6'), value: 'E'},
+                          {label: _('x10^6'), value: 'power'},
+                          {label: _('k/M/G'), value: 'SI'},
+                          {label: _('k/M/B'), value: 'B'},
+                        ]}
+                      />
+                      <DropdownCustom
+                        label={_('Label Prefix')}
+                        attr={prefix + 'colorbar.tickprefix'}
+                        options={[
+                          {label: _('None'), value: ''},
+                          {label: _('x'), value: 'x'},
+                          {label: _('$'), value: '$'},
+                          {label: _('#'), value: '#'},
+                          {label: _('@'), value: '@'},
+                          {label: _('Custom'), value: 'custom'},
+                        ]}
+                        customOpt="custom"
+                        dafaultOpt=""
+                        clearable={false}
+                      />
+                      <Dropdown
+                        label={_('Show Prefix')}
+                        attr={prefix + 'colorbar.showtickprefix'}
+                        options={[
+                          {label: _('Every label'), value: 'all'},
+                          {label: _('First label'), value: 'first'},
+                          {label: _('Last label'), value: 'last'},
+                          {label: _('None label'), value: 'none'},
+                        ]}
+                      />
 
-                  <DropdownCustom
-                    label={_('Label Suffix')}
-                    attr={prefix + 'colorbar.ticksuffix'}
-                    options={[
-                      {label: _('None'), value: ''},
-                      {label: _('C'), value: 'C'},
-                      {label: _('%'), value: '%'},
-                      {label: _('^'), value: '^'},
-                      {label: _('Custom'), value: 'custom'},
-                    ]}
-                    customOpt="custom"
-                    dafaultOpt=""
-                    clearable={false}
-                  />
-                  <Dropdown
-                    label={_('Show Suffix')}
-                    attr={prefix + 'colorbar.showticksuffix'}
-                    options={[
-                      {label: _('Every label'), value: 'all'},
-                      {label: _('First label'), value: 'first'},
-                      {label: _('Last label'), value: 'last'},
-                      {label: _('None label'), value: 'none'},
-                    ]}
-                  />
-                  <Radio
-                    attr={prefix + 'colorbar.tickmode'}
-                    options={[
-                      {label: _('Auto'), value: 'auto'},
-                      {label: _('Custom'), value: 'linear'},
-                    ]}
-                    label={_('Tick spacing')}
-                  />
+                      <DropdownCustom
+                        label={_('Label Suffix')}
+                        attr={prefix + 'colorbar.ticksuffix'}
+                        options={[
+                          {label: _('None'), value: ''},
+                          {label: _('C'), value: 'C'},
+                          {label: _('%'), value: '%'},
+                          {label: _('^'), value: '^'},
+                          {label: _('Custom'), value: 'custom'},
+                        ]}
+                        customOpt="custom"
+                        dafaultOpt=""
+                        clearable={false}
+                      />
+                      <Dropdown
+                        label={_('Show Suffix')}
+                        attr={prefix + 'colorbar.showticksuffix'}
+                        options={[
+                          {label: _('Every label'), value: 'all'},
+                          {label: _('First label'), value: 'first'},
+                          {label: _('Last label'), value: 'last'},
+                          {label: _('None label'), value: 'none'},
+                        ]}
+                      />
+                      <Radio
+                        attr={prefix + 'colorbar.tickmode'}
+                        options={[
+                          {label: _('Auto'), value: 'auto'},
+                          {label: _('Custom'), value: 'linear'},
+                        ]}
+                        label={_('Tick spacing')}
+                      />
 
-                  <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
-                  <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
-                  <Numeric label={_('Max Number of Labels')} attr={prefix + 'colorbar.nticks'} />
-                </VisibilitySelect>
-              </PlotlyFold>
-              <PlotlyFold name={_('Ticks')}>
-                <VisibilitySelect
-                  attr={prefix + 'colorbar.ticks'}
-                  options={[
-                    {label: _('Inside'), value: 'inside'},
-                    {label: _('Outside'), value: 'outside'},
-                    {label: _('Hide'), value: ''},
-                  ]}
-                  showOn={['inside', 'outside']}
-                  defaultOpt={''}
-                >
-                  <Numeric label={_('Length')} attr={prefix + 'colorbar.ticklen'} units="px" />
-                  <Numeric label={_('Width')} attr={prefix + 'colorbar.tickwidth'} units="px" />
-                  <ColorPicker label={_('Color')} attr={prefix + 'colorbar.tickcolor'} />
-                  <Radio
-                    attr={prefix + 'colorbar.tickmode'}
-                    options={[
-                      {label: _('Auto'), value: 'auto'},
-                      {label: _('Custom'), value: 'linear'},
-                    ]}
-                    label={_('Tick spacing')}
-                  />
+                      <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
+                      <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
+                      <Numeric
+                        label={_('Max Number of Labels')}
+                        attr={prefix + 'colorbar.nticks'}
+                      />
+                    </VisibilitySelect>
+                  </PlotlyFold>
+                  <PlotlyFold name={_('Ticks')}>
+                    <VisibilitySelect
+                      attr={prefix + 'colorbar.ticks'}
+                      options={[
+                        {label: _('Inside'), value: 'inside'},
+                        {label: _('Outside'), value: 'outside'},
+                        {label: _('Hide'), value: ''},
+                      ]}
+                      showOn={['inside', 'outside']}
+                      defaultOpt={''}
+                    >
+                      <Numeric label={_('Length')} attr={prefix + 'colorbar.ticklen'} units="px" />
+                      <Numeric label={_('Width')} attr={prefix + 'colorbar.tickwidth'} units="px" />
+                      <ColorPicker label={_('Color')} attr={prefix + 'colorbar.tickcolor'} />
+                      <Radio
+                        attr={prefix + 'colorbar.tickmode'}
+                        options={[
+                          {label: _('Auto'), value: 'auto'},
+                          {label: _('Custom'), value: 'linear'},
+                        ]}
+                        label={_('Tick spacing')}
+                      />
 
-                  <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
-                  <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
-                  <Numeric label={_('Max Number of Labels')} attr={prefix + 'colorbar.nticks'} />
-                </VisibilitySelect>
-              </PlotlyFold>
-              <PlotlyFold name={_('Borders and Background')}>
-                <PlotlySection name={_('Color Bar')} attr={prefix + 'colorbar.outlinewidth'}>
-                  <Numeric label={_('Border Width')} attr={prefix + 'colorbar.outlinewidth'} />
-                  <ColorPicker label={_('Border Color')} attr={prefix + 'colorbar.outlinecolor'} />
-                </PlotlySection>
-                <PlotlySection name={_('Color Bar Container')} attr={prefix + 'colorbar.bgcolor'}>
-                  <ColorPicker label={_('Background Color')} attr={prefix + 'colorbar.bgcolor'} />
-                  <Numeric label={_('Border Width')} attr={prefix + 'colorbar.borderwidth'} />
-                  <ColorPicker label={_('Border Color')} attr={prefix + 'colorbar.bordercolor'} />
-                </PlotlySection>
-              </PlotlyFold>
-            </PlotlyPanel>
-          </VisibilitySelect>
-        );
-      })}
-    </TraceAccordion>
+                      <Numeric label={_('Step Offset')} attr={prefix + 'colorbar.tick0'} />
+                      <Numeric label={_('Step Size')} attr={prefix + 'colorbar.dtick'} />
+                      <Numeric
+                        label={_('Max Number of Labels')}
+                        attr={prefix + 'colorbar.nticks'}
+                      />
+                    </VisibilitySelect>
+                  </PlotlyFold>
+                  <PlotlyFold name={_('Borders and Background')}>
+                    <PlotlySection name={_('Color Bar')} attr={prefix + 'colorbar.outlinewidth'}>
+                      <Numeric label={_('Border Width')} attr={prefix + 'colorbar.outlinewidth'} />
+                      <ColorPicker
+                        label={_('Border Color')}
+                        attr={prefix + 'colorbar.outlinecolor'}
+                      />
+                    </PlotlySection>
+                    <PlotlySection
+                      name={_('Color Bar Container')}
+                      attr={prefix + 'colorbar.bgcolor'}
+                    >
+                      <ColorPicker
+                        label={_('Background Color')}
+                        attr={prefix + 'colorbar.bgcolor'}
+                      />
+                      <Numeric label={_('Border Width')} attr={prefix + 'colorbar.borderwidth'} />
+                      <ColorPicker
+                        label={_('Border Color')}
+                        attr={prefix + 'colorbar.bordercolor'}
+                      />
+                    </PlotlySection>
+                  </PlotlyFold>
+                </PlotlyPanel>
+              </VisibilitySelect>
+            );
+          })}
+        </TraceAccordion>
+      )}
+    </EditorControlsContext.Consumer>
   );
 };
 
-StyleColorBarsPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleColorBarsPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleColorBarsPanel;
diff --git a/src/default_panels/StyleImagesPanel.js b/src/default_panels/StyleImagesPanel.js
index e7feae8be..915cf164f 100644
--- a/src/default_panels/StyleImagesPanel.js
+++ b/src/default_panels/StyleImagesPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ImageAccordion,
   Radio,
@@ -9,67 +9,72 @@ import {
   PositioningRef,
   Dropdown,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleImagesPanel = (props, {localize: _}) => (
-  <ImageAccordion canAdd>
-    <Radio
-      attr="visible"
-      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-    />
+const StyleImagesPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <ImageAccordion canAdd>
+        <Radio
+          attr="visible"
+          options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+        />
 
-    <Dropzone attr="source" fileType={_('image')} show />
+        <Dropzone attr="source" fileType={_('image')} show />
 
-    <Dropdown
-      label={_('Aspect Ratio')}
-      attr="sizing"
-      options={[
-        {label: _('Contain'), value: 'contain'},
-        {label: _('Fill'), value: 'fill'},
-        {label: _('Stretch'), value: 'stretch'},
-      ]}
-      clearable={false}
-    />
-    <Radio
-      label={_('Relative to Grid')}
-      attr="layer"
-      options={[{label: _('Below'), value: 'below'}, {label: _('Above'), value: 'above'}]}
-    />
-    <PositioningNumeric attr="sizex" label={_('Width')} />
-    <PositioningNumeric attr="sizey" label={_('Height')} />
-    <PlotlySection name={_('Horizontal Positioning')}>
-      <Dropdown
-        label={_('Anchor Point')}
-        clearable={false}
-        attr="xanchor"
-        options={[
-          {label: _('Left'), value: 'left'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Right'), value: 'right'},
-        ]}
-      />
-      <PositioningNumeric label={_('Position')} attr="x" />
-      <PositioningRef label={_('Relative To')} attr="xref" />
-    </PlotlySection>
+        <Dropdown
+          label={_('Aspect Ratio')}
+          attr="sizing"
+          options={[
+            {label: _('Contain'), value: 'contain'},
+            {label: _('Fill'), value: 'fill'},
+            {label: _('Stretch'), value: 'stretch'},
+          ]}
+          clearable={false}
+        />
+        <Radio
+          label={_('Relative to Grid')}
+          attr="layer"
+          options={[{label: _('Below'), value: 'below'}, {label: _('Above'), value: 'above'}]}
+        />
+        <PositioningNumeric attr="sizex" label={_('Width')} />
+        <PositioningNumeric attr="sizey" label={_('Height')} />
+        <PlotlySection name={_('Horizontal Positioning')}>
+          <Dropdown
+            label={_('Anchor Point')}
+            clearable={false}
+            attr="xanchor"
+            options={[
+              {label: _('Left'), value: 'left'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Right'), value: 'right'},
+            ]}
+          />
+          <PositioningNumeric label={_('Position')} attr="x" />
+          <PositioningRef label={_('Relative To')} attr="xref" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Vertical Positioning')}>
-      <Dropdown
-        label={_('Anchor Point')}
-        clearable={false}
-        attr="yanchor"
-        options={[
-          {label: _('Top'), value: 'top'},
-          {label: _('Middle'), value: 'middle'},
-          {label: _('Bottom'), value: 'bottom'},
-        ]}
-      />
-      <PositioningNumeric label={_('Position')} attr="y" />
-      <PositioningRef label={_('Relative To')} attr="yref" />
-    </PlotlySection>
-  </ImageAccordion>
+        <PlotlySection name={_('Vertical Positioning')}>
+          <Dropdown
+            label={_('Anchor Point')}
+            clearable={false}
+            attr="yanchor"
+            options={[
+              {label: _('Top'), value: 'top'},
+              {label: _('Middle'), value: 'middle'},
+              {label: _('Bottom'), value: 'bottom'},
+            ]}
+          />
+          <PositioningNumeric label={_('Position')} attr="y" />
+          <PositioningRef label={_('Relative To')} attr="yref" />
+        </PlotlySection>
+      </ImageAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleImagesPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleImagesPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleImagesPanel;
diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js
index 403abe56d..0ed7207d5 100644
--- a/src/default_panels/StyleLayoutPanel.js
+++ b/src/default_panels/StyleLayoutPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ColorPicker,
   ColorwayPicker,
@@ -16,132 +16,137 @@ import {
   Radio,
 } from '../components';
 import {HoverColor} from '../components/fields/derived';
+import {EditorControlsContext} from '../context';
 
-const StyleLayoutPanel = (props, {localize: _}) => (
-  <LayoutPanel>
-    <PlotlyFold name={_('Defaults')}>
-      <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
-      <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
-      <ColorwayPicker label={_('Base Colors')} attr="colorway" />
-      <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
-      <Numeric label={_('Font Size')} attr="font.size" units="px" />
-      <ColorPicker label={_('Font Color')} attr="font.color" />
-      <Dropdown
-        label={_('Number format')}
-        attr="separators"
-        options={[
-          {label: _('1,234.56'), value: '.,'},
-          {label: _('1 234.56'), value: ', '},
-          {label: _('1 234,56'), value: ', '},
-          {label: _('1.234,56'), value: ',.'},
-        ]}
-        clearable={false}
-      />
-    </PlotlyFold>
+const StyleLayoutPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <LayoutPanel>
+        <PlotlyFold name={_('Defaults')}>
+          <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
+          <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
+          <ColorwayPicker label={_('Base Colors')} attr="colorway" />
+          <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
+          <Numeric label={_('Font Size')} attr="font.size" units="px" />
+          <ColorPicker label={_('Font Color')} attr="font.color" />
+          <Dropdown
+            label={_('Number format')}
+            attr="separators"
+            options={[
+              {label: _('1,234.56'), value: '.,'},
+              {label: _('1 234.56'), value: ', '},
+              {label: _('1 234,56'), value: ', '},
+              {label: _('1.234,56'), value: ',.'},
+            ]}
+            clearable={false}
+          />
+        </PlotlyFold>
 
-    <PlotlyFold name={_('Title')}>
-      <PlotlySection name={_('Title')} attr="title">
-        <TextEditor attr="title" />
-        <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
-        <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
-        <ColorPicker label={_('Font Color')} attr="titlefont.color" />
-      </PlotlySection>
-    </PlotlyFold>
+        <PlotlyFold name={_('Title')}>
+          <PlotlySection name={_('Title')} attr="title">
+            <TextEditor attr="title" />
+            <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
+            <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
+            <ColorPicker label={_('Font Color')} attr="titlefont.color" />
+          </PlotlySection>
+        </PlotlyFold>
 
-    <PlotlyFold name={_('Modebar')}>
-      <Radio
-        label={_('Orientation')}
-        attr="modebar.orientation"
-        options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
-      />
-      <ColorPicker label={_('Icon Color')} attr="modebar.color" />
-      <ColorPicker label={_('Active Icon Color')} attr="modebar.activecolor" />
-      <ColorPicker label={_('Background Color')} attr="modebar.bgcolor" />
-    </PlotlyFold>
-    <PlotlyFold name={_('Layout')}>
-      <VisibilitySelect
-        attr="autosize"
-        label={_('Size')}
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-        showOn={false}
-        defaultOpt={true}
-      >
-        <Numeric label={_('Fixed Width')} attr="width" units="px" />
-        <Numeric label={_('Fixed height')} attr="height" units="px" />
-      </VisibilitySelect>
-      <Numeric label={_('Top')} attr="margin.t" units="px" />
-      <Numeric label={_('Bottom')} attr="margin.b" units="px" />
-      <Numeric label={_('Left')} attr="margin.l" units="px" />
-      <Numeric label={_('Right')} attr="margin.r" units="px" />
-      <Numeric label={_('Padding')} attr="margin.pad" units="px" />
-    </PlotlyFold>
-    <PlotlyFold name={_('Interactions')}>
-      <PlotlySection name={_('Drag')} attr="dragmode">
-        <Dropdown
-          label={_('Mode')}
-          attr="dragmode"
-          options={[
-            {label: _('Zoom'), value: 'zoom'},
-            {label: _('Select'), value: 'select'},
-            {label: _('Pan'), value: 'pan'},
-            {label: _('Lasso'), value: 'lasso'},
-            {label: _('Orbit'), value: 'orbit'},
-            {label: _('Turntable'), value: 'turntable'},
-          ]}
-          clearable={false}
-        />
-        <Dropdown
-          label={_('Select Direction')}
-          attr="selectdirection"
-          options={[
-            {label: _('Any'), value: 'any'},
-            {label: _('Horizontal'), value: 'h'},
-            {label: _('Vertical'), value: 'v'},
-            {label: _('Diagonal'), value: 'd'},
-          ]}
-          clearable={false}
-        />
-      </PlotlySection>
-      <PlotlySection name={_('Click')} attr="clickmode">
-        <Flaglist
-          label={_('Mode')}
-          attr="clickmode"
-          options={[
-            {label: _('Click Event'), value: 'event'},
-            {label: _('Select Data Point'), value: 'select'},
-          ]}
-        />
-      </PlotlySection>
-      <PlotlySection name={_('Hover')}>
-        <HovermodeDropdown label={_('Mode')} attr="hovermode">
-          <HoverColor
-            label={_('Background Color')}
-            attr="hoverlabel.bgcolor"
-            defaultColor="#FFF"
-            handleEmpty
-          />
-          <HoverColor
-            label={_('Border Color')}
-            attr="hoverlabel.bordercolor"
-            defaultColor="#000"
-            handleEmpty
-          />
-          <FontSelector label={_('Typeface')} attr="hoverlabel.font.family" clearable />
-          <Numeric label={_('Font Size')} attr="hoverlabel.font.size" />
-          <HoverColor
-            label={_('Font Color')}
-            attr="hoverlabel.font.color"
-            defaultColor="#000"
-            handleEmpty
+        <PlotlyFold name={_('Modebar')}>
+          <Radio
+            label={_('Orientation')}
+            attr="modebar.orientation"
+            options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
           />
-        </HovermodeDropdown>
-      </PlotlySection>
-    </PlotlyFold>
-  </LayoutPanel>
+          <ColorPicker label={_('Icon Color')} attr="modebar.color" />
+          <ColorPicker label={_('Active Icon Color')} attr="modebar.activecolor" />
+          <ColorPicker label={_('Background Color')} attr="modebar.bgcolor" />
+        </PlotlyFold>
+        <PlotlyFold name={_('Layout')}>
+          <VisibilitySelect
+            attr="autosize"
+            label={_('Size')}
+            options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
+            showOn={false}
+            defaultOpt={true}
+          >
+            <Numeric label={_('Fixed Width')} attr="width" units="px" />
+            <Numeric label={_('Fixed height')} attr="height" units="px" />
+          </VisibilitySelect>
+          <Numeric label={_('Top')} attr="margin.t" units="px" />
+          <Numeric label={_('Bottom')} attr="margin.b" units="px" />
+          <Numeric label={_('Left')} attr="margin.l" units="px" />
+          <Numeric label={_('Right')} attr="margin.r" units="px" />
+          <Numeric label={_('Padding')} attr="margin.pad" units="px" />
+        </PlotlyFold>
+        <PlotlyFold name={_('Interactions')}>
+          <PlotlySection name={_('Drag')} attr="dragmode">
+            <Dropdown
+              label={_('Mode')}
+              attr="dragmode"
+              options={[
+                {label: _('Zoom'), value: 'zoom'},
+                {label: _('Select'), value: 'select'},
+                {label: _('Pan'), value: 'pan'},
+                {label: _('Lasso'), value: 'lasso'},
+                {label: _('Orbit'), value: 'orbit'},
+                {label: _('Turntable'), value: 'turntable'},
+              ]}
+              clearable={false}
+            />
+            <Dropdown
+              label={_('Select Direction')}
+              attr="selectdirection"
+              options={[
+                {label: _('Any'), value: 'any'},
+                {label: _('Horizontal'), value: 'h'},
+                {label: _('Vertical'), value: 'v'},
+                {label: _('Diagonal'), value: 'd'},
+              ]}
+              clearable={false}
+            />
+          </PlotlySection>
+          <PlotlySection name={_('Click')} attr="clickmode">
+            <Flaglist
+              label={_('Mode')}
+              attr="clickmode"
+              options={[
+                {label: _('Click Event'), value: 'event'},
+                {label: _('Select Data Point'), value: 'select'},
+              ]}
+            />
+          </PlotlySection>
+          <PlotlySection name={_('Hover')}>
+            <HovermodeDropdown label={_('Mode')} attr="hovermode">
+              <HoverColor
+                label={_('Background Color')}
+                attr="hoverlabel.bgcolor"
+                defaultColor="#FFF"
+                handleEmpty
+              />
+              <HoverColor
+                label={_('Border Color')}
+                attr="hoverlabel.bordercolor"
+                defaultColor="#000"
+                handleEmpty
+              />
+              <FontSelector label={_('Typeface')} attr="hoverlabel.font.family" clearable />
+              <Numeric label={_('Font Size')} attr="hoverlabel.font.size" />
+              <HoverColor
+                label={_('Font Color')}
+                attr="hoverlabel.font.color"
+                defaultColor="#000"
+                handleEmpty
+              />
+            </HovermodeDropdown>
+          </PlotlySection>
+        </PlotlyFold>
+      </LayoutPanel>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleLayoutPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleLayoutPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleLayoutPanel;
diff --git a/src/default_panels/StyleLegendPanel.js b/src/default_panels/StyleLegendPanel.js
index b650789f0..2780084b3 100644
--- a/src/default_panels/StyleLegendPanel.js
+++ b/src/default_panels/StyleLegendPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ColorPicker,
   FontSelector,
@@ -10,76 +10,81 @@ import {
   Dropdown,
   TraceRequiredPanel,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleLegendPanel = (props, {localize: _}) => (
-  <TraceRequiredPanel>
-    <PlotlyFold name={_('Legend')}>
-      <Radio
-        attr="showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <PlotlySection name={_('Text')}>
-        <FontSelector label={_('Typeface')} attr="legend.font.family" />
-        <Numeric label={_('Size')} attr="legend.font.size" units="px" />
-        <ColorPicker label={_('Color')} attr="legend.font.color" />
-      </PlotlySection>
-      <PlotlySection name={_('Legend Box')}>
-        <Numeric label={_('Border Width')} attr="legend.borderwidth" units="px" />
-        <ColorPicker label={_('Border Color')} attr="legend.bordercolor" />
-        <ColorPicker label={_('Background Color')} attr="legend.bgcolor" />
-      </PlotlySection>
-      <PlotlySection name={_('Horizontal Positioning')}>
-        <Dropdown
-          label={_('Anchor Point')}
-          clearable={false}
-          attr="legend.xanchor"
-          options={[
-            {label: _('Auto'), value: 'auto'},
-            {label: _('Left'), value: 'left'},
-            {label: _('Center'), value: 'center'},
-            {label: _('Right'), value: 'right'},
-          ]}
-        />
-        <Numeric label={_('Position')} showSlider step={0.02} attr="legend.x" />
-      </PlotlySection>
-      <PlotlySection name={_('Vertical Positioning')}>
-        <Dropdown
-          label={_('Anchor Point')}
-          clearable={false}
-          attr="legend.yanchor"
-          options={[
-            {label: _('Auto'), value: 'auto'},
-            {label: _('Top'), value: 'top'},
-            {label: _('Middle'), value: 'middle'},
-            {label: _('Bottom'), value: 'bottom'},
-          ]}
-        />
-        <Numeric label={_('Position')} showSlider step={0.02} attr="legend.y" />
-      </PlotlySection>
-      <PlotlySection name={_('Orientation')}>
-        <Radio
-          attr="legend.orientation"
-          options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
-        />
-      </PlotlySection>
-      <PlotlySection name={_('Trace Order')}>
-        <Dropdown
-          attr="legend.traceorder"
-          options={[
-            {label: _('Normal'), value: 'normal'},
-            {label: _('Reversed'), value: 'reversed'},
-            {label: _('Grouped'), value: 'grouped'},
-            {label: _('Reversed and Grouped'), value: 'reversed+grouped'},
-          ]}
-        />
-        <Numeric label={_('Gap Between Groups')} attr="legend.tracegroupgap" units="px" />
-      </PlotlySection>
-    </PlotlyFold>
-  </TraceRequiredPanel>
+const StyleLegendPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <TraceRequiredPanel>
+        <PlotlyFold name={_('Legend')}>
+          <Radio
+            attr="showlegend"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <PlotlySection name={_('Text')}>
+            <FontSelector label={_('Typeface')} attr="legend.font.family" />
+            <Numeric label={_('Size')} attr="legend.font.size" units="px" />
+            <ColorPicker label={_('Color')} attr="legend.font.color" />
+          </PlotlySection>
+          <PlotlySection name={_('Legend Box')}>
+            <Numeric label={_('Border Width')} attr="legend.borderwidth" units="px" />
+            <ColorPicker label={_('Border Color')} attr="legend.bordercolor" />
+            <ColorPicker label={_('Background Color')} attr="legend.bgcolor" />
+          </PlotlySection>
+          <PlotlySection name={_('Horizontal Positioning')}>
+            <Dropdown
+              label={_('Anchor Point')}
+              clearable={false}
+              attr="legend.xanchor"
+              options={[
+                {label: _('Auto'), value: 'auto'},
+                {label: _('Left'), value: 'left'},
+                {label: _('Center'), value: 'center'},
+                {label: _('Right'), value: 'right'},
+              ]}
+            />
+            <Numeric label={_('Position')} showSlider step={0.02} attr="legend.x" />
+          </PlotlySection>
+          <PlotlySection name={_('Vertical Positioning')}>
+            <Dropdown
+              label={_('Anchor Point')}
+              clearable={false}
+              attr="legend.yanchor"
+              options={[
+                {label: _('Auto'), value: 'auto'},
+                {label: _('Top'), value: 'top'},
+                {label: _('Middle'), value: 'middle'},
+                {label: _('Bottom'), value: 'bottom'},
+              ]}
+            />
+            <Numeric label={_('Position')} showSlider step={0.02} attr="legend.y" />
+          </PlotlySection>
+          <PlotlySection name={_('Orientation')}>
+            <Radio
+              attr="legend.orientation"
+              options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
+            />
+          </PlotlySection>
+          <PlotlySection name={_('Trace Order')}>
+            <Dropdown
+              attr="legend.traceorder"
+              options={[
+                {label: _('Normal'), value: 'normal'},
+                {label: _('Reversed'), value: 'reversed'},
+                {label: _('Grouped'), value: 'grouped'},
+                {label: _('Reversed and Grouped'), value: 'reversed+grouped'},
+              ]}
+            />
+            <Numeric label={_('Gap Between Groups')} attr="legend.tracegroupgap" units="px" />
+          </PlotlySection>
+        </PlotlyFold>
+      </TraceRequiredPanel>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleLegendPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleLegendPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleLegendPanel;
diff --git a/src/default_panels/StyleNotesPanel.js b/src/default_panels/StyleNotesPanel.js
index 1eef7af10..83eb24c50 100644
--- a/src/default_panels/StyleNotesPanel.js
+++ b/src/default_panels/StyleNotesPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   AnnotationArrowRef,
   AnnotationRef,
@@ -14,65 +14,70 @@ import {
   TextEditor,
   PlotlySection,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleNotesPanel = (props, {localize: _}) => (
-  <AnnotationAccordion canAdd>
-    <PlotlySection name={_('Note Text')} attr="text">
-      <TextEditor attr="text" />
-      <FontSelector label={_('Typeface')} attr="font.family" />
-      <Numeric label={_('Font Size')} attr="font.size" units="px" />
-      <ColorPicker label={_('Font Color')} attr="font.color" />
-      <Numeric label={_('Angle')} attr="textangle" units="°" />
-    </PlotlySection>
-    <PlotlySection name={_('Arrow')}>
-      <Radio
-        attr="showarrow"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Numeric label={_('Line Width')} attr="arrowwidth" units="px" />
-      <ColorPicker label={_('Color')} attr="arrowcolor" />
-      <ArrowSelector label={_('Arrowhead')} attr="arrowhead" />
-      <Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
-      <AnnotationArrowRef label={_('X Offset')} attr="axref" />
-      <AnnotationArrowRef label={_('Y Offset')} attr="ayref" />
-      <Numeric label={_('X Vector')} attr="ax" />
-      <Numeric label={_('Y Vector')} attr="ay" />
-    </PlotlySection>
-    <PlotlySection name={_('Horizontal Positioning')}>
-      <Dropdown
-        label={_('Anchor Point')}
-        clearable={false}
-        attr="xanchor"
-        options={[
-          {label: _('Auto'), value: 'auto'},
-          {label: _('Left'), value: 'left'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Right'), value: 'right'},
-        ]}
-      />
-      <PositioningNumeric label={_('Position')} attr="x" />
-      <AnnotationRef label={_('Relative To')} attr="xref" />
-    </PlotlySection>
-    <PlotlySection name={_('Vertical Positioning')}>
-      <Dropdown
-        label={_('Anchor Point')}
-        clearable={false}
-        attr="yanchor"
-        options={[
-          {label: _('Auto'), value: 'auto'},
-          {label: _('Top'), value: 'top'},
-          {label: _('Middle'), value: 'middle'},
-          {label: _('Bottom'), value: 'bottom'},
-        ]}
-      />
-      <PositioningNumeric label={_('Position')} attr="y" />
-      <AnnotationRef label={_('Relative To')} attr="yref" />
-    </PlotlySection>
-  </AnnotationAccordion>
+const StyleNotesPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <AnnotationAccordion canAdd>
+        <PlotlySection name={_('Note Text')} attr="text">
+          <TextEditor attr="text" />
+          <FontSelector label={_('Typeface')} attr="font.family" />
+          <Numeric label={_('Font Size')} attr="font.size" units="px" />
+          <ColorPicker label={_('Font Color')} attr="font.color" />
+          <Numeric label={_('Angle')} attr="textangle" units="°" />
+        </PlotlySection>
+        <PlotlySection name={_('Arrow')}>
+          <Radio
+            attr="showarrow"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Numeric label={_('Line Width')} attr="arrowwidth" units="px" />
+          <ColorPicker label={_('Color')} attr="arrowcolor" />
+          <ArrowSelector label={_('Arrowhead')} attr="arrowhead" />
+          <Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
+          <AnnotationArrowRef label={_('X Offset')} attr="axref" />
+          <AnnotationArrowRef label={_('Y Offset')} attr="ayref" />
+          <Numeric label={_('X Vector')} attr="ax" />
+          <Numeric label={_('Y Vector')} attr="ay" />
+        </PlotlySection>
+        <PlotlySection name={_('Horizontal Positioning')}>
+          <Dropdown
+            label={_('Anchor Point')}
+            clearable={false}
+            attr="xanchor"
+            options={[
+              {label: _('Auto'), value: 'auto'},
+              {label: _('Left'), value: 'left'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Right'), value: 'right'},
+            ]}
+          />
+          <PositioningNumeric label={_('Position')} attr="x" />
+          <AnnotationRef label={_('Relative To')} attr="xref" />
+        </PlotlySection>
+        <PlotlySection name={_('Vertical Positioning')}>
+          <Dropdown
+            label={_('Anchor Point')}
+            clearable={false}
+            attr="yanchor"
+            options={[
+              {label: _('Auto'), value: 'auto'},
+              {label: _('Top'), value: 'top'},
+              {label: _('Middle'), value: 'middle'},
+              {label: _('Bottom'), value: 'bottom'},
+            ]}
+          />
+          <PositioningNumeric label={_('Position')} attr="y" />
+          <AnnotationRef label={_('Relative To')} attr="yref" />
+        </PlotlySection>
+      </AnnotationAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleNotesPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleNotesPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleNotesPanel;
diff --git a/src/default_panels/StyleShapesPanel.js b/src/default_panels/StyleShapesPanel.js
index ff6ca1335..b8b74c23c 100644
--- a/src/default_panels/StyleShapesPanel.js
+++ b/src/default_panels/StyleShapesPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ShapeAccordion,
   Radio,
@@ -11,47 +11,52 @@ import {
   ColorPicker,
   LineDashSelector,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleShapesPanel = (props, {localize: _}) => (
-  <ShapeAccordion canAdd>
-    <Radio
-      attr="visible"
-      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-    />
-    <Radio
-      attr="type"
-      options={[
-        {label: _('Line'), value: 'line'},
-        {label: _('Rectangle'), value: 'rect'},
-        {label: _('Ellipse'), value: 'circle'},
-      ]}
-    />
+const StyleShapesPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <ShapeAccordion canAdd>
+        <Radio
+          attr="visible"
+          options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+        />
+        <Radio
+          attr="type"
+          options={[
+            {label: _('Line'), value: 'line'},
+            {label: _('Rectangle'), value: 'rect'},
+            {label: _('Ellipse'), value: 'circle'},
+          ]}
+        />
 
-    <PlotlySection name={_('Horizontal Boundaries')}>
-      <PositioningRef label={_('Relative to')} attr="xref" />
-      <PositioningNumeric label={_('Start Point')} attr="x0" />
-      <PositioningNumeric label={_('End Point')} attr="x1" />
-    </PlotlySection>
+        <PlotlySection name={_('Horizontal Boundaries')}>
+          <PositioningRef label={_('Relative to')} attr="xref" />
+          <PositioningNumeric label={_('Start Point')} attr="x0" />
+          <PositioningNumeric label={_('End Point')} attr="x1" />
+        </PlotlySection>
 
-    <PlotlySection name={_('Vertical Boundaries')}>
-      <PositioningRef label={_('Relative to')} attr="yref" />
-      <PositioningNumeric label={_('Start Point')} attr="y0" />
-      <PositioningNumeric label={_('End Point')} attr="y1" />
-    </PlotlySection>
-    <PlotlySection name={_('Lines')}>
-      <Numeric label={_('Width')} attr="line.width" />
-      <ColorPicker label={_('Color')} attr="line.color" />
-      <LineDashSelector label={_('Type')} attr="line.dash" />
-    </PlotlySection>
-    <PlotlySection name={_('Fill')}>
-      <ColorPicker label={_('Color')} attr="fillcolor" />
-      <NumericFraction label={_('Opacity')} attr="opacity" />
-    </PlotlySection>
-  </ShapeAccordion>
+        <PlotlySection name={_('Vertical Boundaries')}>
+          <PositioningRef label={_('Relative to')} attr="yref" />
+          <PositioningNumeric label={_('Start Point')} attr="y0" />
+          <PositioningNumeric label={_('End Point')} attr="y1" />
+        </PlotlySection>
+        <PlotlySection name={_('Lines')}>
+          <Numeric label={_('Width')} attr="line.width" />
+          <ColorPicker label={_('Color')} attr="line.color" />
+          <LineDashSelector label={_('Type')} attr="line.dash" />
+        </PlotlySection>
+        <PlotlySection name={_('Fill')}>
+          <ColorPicker label={_('Color')} attr="fillcolor" />
+          <NumericFraction label={_('Opacity')} attr="opacity" />
+        </PlotlySection>
+      </ShapeAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleShapesPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleShapesPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleShapesPanel;
diff --git a/src/default_panels/StyleSlidersPanel.js b/src/default_panels/StyleSlidersPanel.js
index 1791acb02..19a5490d3 100644
--- a/src/default_panels/StyleSlidersPanel.js
+++ b/src/default_panels/StyleSlidersPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ColorPicker,
   FontSelector,
@@ -9,77 +9,82 @@ import {
   Dropdown,
   SliderAccordion,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleSlidersPanel = (props, {localize: _}) => (
-  <SliderAccordion>
-    <Radio
-      attr="visible"
-      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-    />
-    <PlotlySection name={_('Background')}>
-      <ColorPicker label={_('Color')} attr="bgcolor" />
-      <ColorPicker label={_('Active Color')} attr="activebgcolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Border')}>
-      <Numeric label={_('Width')} attr="borderwidth" />
-      <ColorPicker label={_('Color')} attr="bordercolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Font')}>
-      <FontSelector label={_('Typeface')} attr="font.family" />
-      <Numeric label={_('Size')} attr="font.size" />
-      <ColorPicker label={_('Color')} attr="font.color" />
-    </PlotlySection>
-    <PlotlySection name={_('Length')} attr={'len'}>
-      <Numeric label={_('Length')} attr={'len'} step={0.02} />
-      <Dropdown
-        label={_('Length Mode')}
-        attr={'lenmode'}
-        options={[
-          {label: _('Fraction of canvas'), value: 'fraction'},
-          {label: _('Pixels'), value: 'pixels'},
-        ]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
-      <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
-      <Radio
-        label={_('Anchor')}
-        attr={'xanchor'}
-        options={[
-          {label: _('Left'), value: 'left'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Right'), value: 'right'},
-        ]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
-      <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
-      <Radio
-        label={_('Anchor')}
-        attr={'yanchor'}
-        options={[
-          {label: _('Top'), value: 'top'},
-          {label: _('Middle'), value: 'middle'},
-          {label: _('Bottom'), value: 'bottom'},
-        ]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Padding')}>
-      <Numeric label={_('Top')} attr="pad.t" units="px" />
-      <Numeric label={_('Bottom')} attr="pad.b" units="px" />
-      <Numeric label={_('Left')} attr="pad.l" units="px" />
-      <Numeric label={_('Right')} attr="pad.r" units="px" />
-    </PlotlySection>
-    <PlotlySection name={_('Ticks')}>
-      <ColorPicker label={_('Color')} attr="tickcolor" />
-      <Numeric label={_('Length')} attr="ticklen" />
-      <Numeric label={_('Width')} attr="tickwidth" />
-    </PlotlySection>
-  </SliderAccordion>
+const StyleSlidersPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <SliderAccordion>
+        <Radio
+          attr="visible"
+          options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+        />
+        <PlotlySection name={_('Background')}>
+          <ColorPicker label={_('Color')} attr="bgcolor" />
+          <ColorPicker label={_('Active Color')} attr="activebgcolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Border')}>
+          <Numeric label={_('Width')} attr="borderwidth" />
+          <ColorPicker label={_('Color')} attr="bordercolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Font')}>
+          <FontSelector label={_('Typeface')} attr="font.family" />
+          <Numeric label={_('Size')} attr="font.size" />
+          <ColorPicker label={_('Color')} attr="font.color" />
+        </PlotlySection>
+        <PlotlySection name={_('Length')} attr={'len'}>
+          <Numeric label={_('Length')} attr={'len'} step={0.02} />
+          <Dropdown
+            label={_('Length Mode')}
+            attr={'lenmode'}
+            options={[
+              {label: _('Fraction of canvas'), value: 'fraction'},
+              {label: _('Pixels'), value: 'pixels'},
+            ]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
+          <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
+          <Radio
+            label={_('Anchor')}
+            attr={'xanchor'}
+            options={[
+              {label: _('Left'), value: 'left'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Right'), value: 'right'},
+            ]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
+          <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
+          <Radio
+            label={_('Anchor')}
+            attr={'yanchor'}
+            options={[
+              {label: _('Top'), value: 'top'},
+              {label: _('Middle'), value: 'middle'},
+              {label: _('Bottom'), value: 'bottom'},
+            ]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Padding')}>
+          <Numeric label={_('Top')} attr="pad.t" units="px" />
+          <Numeric label={_('Bottom')} attr="pad.b" units="px" />
+          <Numeric label={_('Left')} attr="pad.l" units="px" />
+          <Numeric label={_('Right')} attr="pad.r" units="px" />
+        </PlotlySection>
+        <PlotlySection name={_('Ticks')}>
+          <ColorPicker label={_('Color')} attr="tickcolor" />
+          <Numeric label={_('Length')} attr="ticklen" />
+          <Numeric label={_('Width')} attr="tickwidth" />
+        </PlotlySection>
+      </SliderAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleSlidersPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleSlidersPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleSlidersPanel;
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index c42329f05..ece23680f 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 
 import {
   Flaglist,
@@ -39,622 +39,636 @@ import {
   TextInfo,
   HoveronDropdown,
 } from '../components/fields/derived';
+import {EditorControlsContext} from '../context';
 
-const StyleTracesPanel = (props, {localize: _}) => (
-  <TraceAccordion canGroup>
-    <TextEditor label={_('Name')} attr="name" richTextOnly />
-    <NumericFraction label={_('Trace Opacity')} attr="opacity" />
-    <PlotlySection name={_('Legend')}>
-      <ShowInLegend
-        label={_('Show in Legend')}
-        attr="showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-        showOn={true}
-      >
-        <GroupCreator label={_('Legend Group')} prefix={_('Group')} attr="legendgroup" />
-      </ShowInLegend>
-    </PlotlySection>
-    <PlotlySection name={_('Cones & Streamtubes')}>
-      <Numeric label={_('Size')} attr="sizeref" stepmode="relative" />
-      <Dropdown
-        label={_('Size Mode')}
-        options={[{label: _('scaled'), value: 'scaled'}, {label: _('absolute'), value: 'absolute'}]}
-        attr="sizemode"
-      />
-      <Dropdown
-        label={_('Cone Anchor')}
-        options={[
-          {label: _('Tip'), value: 'tip'},
-          {label: _('Tail'), value: 'tail'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Center of Mass'), value: 'cm'},
-        ]}
-        attr="anchor"
-      />
-      <Numeric label={_('Max Tube segments')} attr="maxdisplayed" />
-    </PlotlySection>
-    <MultiColorPicker label={_('Color')} attr="color" />
-    <TraceTypeSection name={_('Pie Colors')} traceTypes={['pie']} mode="trace">
-      <LayoutSection attr="name">
-        <ColorwayPicker label={_('Colors')} attr="piecolorway" />
-        <Radio
-          label={_('Extended Colors')}
-          attr="extendpiecolors"
-          options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
-        />
-      </LayoutSection>
-    </TraceTypeSection>
-    <PlotlySection name={_('Pie Title')} attr="title">
-      <TextEditor label={_('Name')} attr="title" />
-      <Dropdown
-        label={'Title Position'}
-        attr="titleposition"
-        options={[
-          {label: _('Top Left'), value: 'top left'},
-          {label: _('Top Center'), value: 'top center'},
-          {label: _('Top Right'), value: 'top right'},
-          {label: _('Middle Center'), value: 'middle center'},
-          {label: _('Bottom Left'), value: 'bottom left'},
-          {label: _('Bottom Center'), value: 'bottom center'},
-          {label: _('Bottom Right'), value: 'bottom right'},
-        ]}
-      />
-      <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
-      <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
-    </PlotlySection>
-    <PlotlySection name={_('Values')}>
-      <BinningDropdown label={_('Histogram Function')} attr="histfunc" />
-      <Dropdown
-        label={_('Histogram Normalization')}
-        options={[
-          {label: _('Number of Occurences'), value: ''},
-          {label: _('Percent'), value: 'percent'},
-          {label: _('Probability'), value: 'probability'},
-          {label: _('Density'), value: 'density'},
-          {label: _('Probability Density'), value: 'probability density'},
-        ]}
-        attr="histnorm"
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Cumulative')}>
-      <Radio
-        label={_('Cumulative')}
-        attr="cumulative.enabled"
-        options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
-      />
-      <Radio
-        label={_('Direction')}
-        attr="cumulative.direction"
-        options={[
-          {label: _('Increasing'), value: 'increasing'},
-          {label: _('Decreasing'), value: 'decreasing'},
-        ]}
-      />
-      <Radio
-        label={_('Current Bin')}
-        attr="cumulative.currentbin"
-        options={[
-          {label: _('Include'), value: 'include'},
-          {label: _('Exclude'), value: 'exclude'},
-          {label: _('Half'), value: 'half'},
-        ]}
-      />
-    </PlotlySection>
+const StyleTracesPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <TraceAccordion canGroup>
+        <TextEditor label={_('Name')} attr="name" richTextOnly />
+        <NumericFraction label={_('Trace Opacity')} attr="opacity" />
+        <PlotlySection name={_('Legend')}>
+          <ShowInLegend
+            label={_('Show in Legend')}
+            attr="showlegend"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+            showOn={true}
+          >
+            <GroupCreator label={_('Legend Group')} prefix={_('Group')} attr="legendgroup" />
+          </ShowInLegend>
+        </PlotlySection>
+        <PlotlySection name={_('Cones & Streamtubes')}>
+          <Numeric label={_('Size')} attr="sizeref" stepmode="relative" />
+          <Dropdown
+            label={_('Size Mode')}
+            options={[
+              {label: _('scaled'), value: 'scaled'},
+              {label: _('absolute'), value: 'absolute'},
+            ]}
+            attr="sizemode"
+          />
+          <Dropdown
+            label={_('Cone Anchor')}
+            options={[
+              {label: _('Tip'), value: 'tip'},
+              {label: _('Tail'), value: 'tail'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Center of Mass'), value: 'cm'},
+            ]}
+            attr="anchor"
+          />
+          <Numeric label={_('Max Tube segments')} attr="maxdisplayed" />
+        </PlotlySection>
+        <MultiColorPicker label={_('Color')} attr="color" />
+        <TraceTypeSection name={_('Pie Colors')} traceTypes={['pie']} mode="trace">
+          <LayoutSection attr="name">
+            <ColorwayPicker label={_('Colors')} attr="piecolorway" />
+            <Radio
+              label={_('Extended Colors')}
+              attr="extendpiecolors"
+              options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+            />
+          </LayoutSection>
+        </TraceTypeSection>
+        <PlotlySection name={_('Pie Title')} attr="title">
+          <TextEditor label={_('Name')} attr="title" />
+          <Dropdown
+            label={'Title Position'}
+            attr="titleposition"
+            options={[
+              {label: _('Top Left'), value: 'top left'},
+              {label: _('Top Center'), value: 'top center'},
+              {label: _('Top Right'), value: 'top right'},
+              {label: _('Middle Center'), value: 'middle center'},
+              {label: _('Bottom Left'), value: 'bottom left'},
+              {label: _('Bottom Center'), value: 'bottom center'},
+              {label: _('Bottom Right'), value: 'bottom right'},
+            ]}
+          />
+          <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
+          <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
+        </PlotlySection>
+        <PlotlySection name={_('Values')}>
+          <BinningDropdown label={_('Histogram Function')} attr="histfunc" />
+          <Dropdown
+            label={_('Histogram Normalization')}
+            options={[
+              {label: _('Number of Occurences'), value: ''},
+              {label: _('Percent'), value: 'percent'},
+              {label: _('Probability'), value: 'probability'},
+              {label: _('Density'), value: 'density'},
+              {label: _('Probability Density'), value: 'probability density'},
+            ]}
+            attr="histnorm"
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Cumulative')}>
+          <Radio
+            label={_('Cumulative')}
+            attr="cumulative.enabled"
+            options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
+          />
+          <Radio
+            label={_('Direction')}
+            attr="cumulative.direction"
+            options={[
+              {label: _('Increasing'), value: 'increasing'},
+              {label: _('Decreasing'), value: 'decreasing'},
+            ]}
+          />
+          <Radio
+            label={_('Current Bin')}
+            attr="cumulative.currentbin"
+            options={[
+              {label: _('Include'), value: 'include'},
+              {label: _('Exclude'), value: 'exclude'},
+              {label: _('Half'), value: 'half'},
+            ]}
+          />
+        </PlotlySection>
 
-    <PlotlySection name={_('Header')}>
-      <Numeric label={_('Height')} attr="header.height" />
-      <MultiColorPicker label={_('Fill Color')} attr="header.fill.color" />
-      <FontSelector label={_('Typeface')} attr="header.font.family" />
-      <Numeric label={_('Font Size')} attr="header.font.size" />
-      <Dropdown
-        label={_('Text Alignment')}
-        options={[
-          {label: _('Left'), value: 'left'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Right'), value: 'right'},
-        ]}
-        attr="header.align"
-      />
-      <MultiColorPicker label={_('Font Color')} attr="header.font.color" />
-      <Numeric label={_('Border Width')} attr="header.line.width" />
-      <MultiColorPicker label={_('Border Color')} attr="header.line.color" />
-    </PlotlySection>
-    <PlotlySection name={_('Cells')}>
-      <Numeric label={_('Height')} attr="cells.height" />
-      <MultiColorPicker label={_('Fill Color')} attr="cells.fill.color" />
-      <FontSelector label={_('Typeface')} attr="cells.font.family" />
-      <Numeric label={_('Font Size')} attr="cells.font.size" />
-      <Dropdown
-        label={_('Text Alignment')}
-        options={[
-          {label: _('Left'), value: 'left'},
-          {label: _('Center'), value: 'center'},
-          {label: _('Right'), value: 'right'},
-        ]}
-        attr="cells.align"
-      />
-      <MultiColorPicker label={_('Font Color')} attr="cells.font.color" />
-      <Numeric label={_('Border Width')} attr="cells.line.width" />
-      <MultiColorPicker label={_('Border Color')} attr="cells.line.color" />
-    </PlotlySection>
-    <PlotlySection name={_('Display')}>
-      <Flaglist
-        attr="mode"
-        options={[
-          {label: _('Points'), value: 'markers'},
-          {label: _('Lines'), value: 'lines'},
-          {label: _('Text'), value: 'text'},
-        ]}
-      />
-      <Radio
-        attr="flatshading"
-        label={_('Flatshading')}
-        options={[{label: _('Enable'), value: true}, {label: _('Disable'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Binning')}>
-      <Numeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
-      <Numeric label={_('X Bin End')} attr="xbins.end" axis="x" />
-      <Numeric label={_('X Bin Size')} attr="xbins.size" axis="x" />
-      <Numeric label={_('Max X Bins')} attr="nbinsx" />
+        <PlotlySection name={_('Header')}>
+          <Numeric label={_('Height')} attr="header.height" />
+          <MultiColorPicker label={_('Fill Color')} attr="header.fill.color" />
+          <FontSelector label={_('Typeface')} attr="header.font.family" />
+          <Numeric label={_('Font Size')} attr="header.font.size" />
+          <Dropdown
+            label={_('Text Alignment')}
+            options={[
+              {label: _('Left'), value: 'left'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Right'), value: 'right'},
+            ]}
+            attr="header.align"
+          />
+          <MultiColorPicker label={_('Font Color')} attr="header.font.color" />
+          <Numeric label={_('Border Width')} attr="header.line.width" />
+          <MultiColorPicker label={_('Border Color')} attr="header.line.color" />
+        </PlotlySection>
+        <PlotlySection name={_('Cells')}>
+          <Numeric label={_('Height')} attr="cells.height" />
+          <MultiColorPicker label={_('Fill Color')} attr="cells.fill.color" />
+          <FontSelector label={_('Typeface')} attr="cells.font.family" />
+          <Numeric label={_('Font Size')} attr="cells.font.size" />
+          <Dropdown
+            label={_('Text Alignment')}
+            options={[
+              {label: _('Left'), value: 'left'},
+              {label: _('Center'), value: 'center'},
+              {label: _('Right'), value: 'right'},
+            ]}
+            attr="cells.align"
+          />
+          <MultiColorPicker label={_('Font Color')} attr="cells.font.color" />
+          <Numeric label={_('Border Width')} attr="cells.line.width" />
+          <MultiColorPicker label={_('Border Color')} attr="cells.line.color" />
+        </PlotlySection>
+        <PlotlySection name={_('Display')}>
+          <Flaglist
+            attr="mode"
+            options={[
+              {label: _('Points'), value: 'markers'},
+              {label: _('Lines'), value: 'lines'},
+              {label: _('Text'), value: 'text'},
+            ]}
+          />
+          <Radio
+            attr="flatshading"
+            label={_('Flatshading')}
+            options={[{label: _('Enable'), value: true}, {label: _('Disable'), value: false}]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Binning')}>
+          <Numeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
+          <Numeric label={_('X Bin End')} attr="xbins.end" axis="x" />
+          <Numeric label={_('X Bin Size')} attr="xbins.size" axis="x" />
+          <Numeric label={_('Max X Bins')} attr="nbinsx" />
 
-      <Numeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
-      <Numeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
-      <Numeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
-      <Numeric label={_('Max Y Bins')} attr="nbinsy" />
-    </PlotlySection>
-    <PlotlySection label={_('Bar Position')}>
-      <Numeric label={_('Base')} attr="base" />
-      <Numeric label={_('Offset')} attr="offset" />
-      <Numeric label={_('Width')} attr="width" />
-    </PlotlySection>
+          <Numeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
+          <Numeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
+          <Numeric label={_('Y Bin Size')} attr="ybins.size" axis="y" />
+          <Numeric label={_('Max Y Bins')} attr="nbinsy" />
+        </PlotlySection>
+        <PlotlySection label={_('Bar Position')}>
+          <Numeric label={_('Base')} attr="base" />
+          <Numeric label={_('Offset')} attr="offset" />
+          <Numeric label={_('Width')} attr="width" />
+        </PlotlySection>
 
-    <TraceMarkerSection>
-      <Radio
-        label={_('Order')}
-        attr="sort"
-        options={[{label: _('Sorted'), value: true}, {label: _('Unsorted'), value: false}]}
-      />
-      <Radio
-        label={_('Direction')}
-        attr="direction"
-        options={[
-          {label: _('Clockwise'), value: 'clockwise'},
-          {label: _('Counterclockwise'), value: 'counterclockwise'},
-        ]}
-      />
-      <Numeric label={_('Rotation')} attr="rotation" />
-      <NumericFraction label={_('Hole Size')} attr="hole" />
-      <NumericFraction label={_('Pull')} attr="pull" />
-      <Dropdown
-        options={[
-          {label: _('Show All'), value: 'all'},
-          {label: _('Outliers'), value: 'outliers'},
-          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
-          {label: _('Hide'), value: false},
-        ]}
-        attr="boxpoints"
-        clearable={false}
-      />
-      <Dropdown
-        options={[
-          {label: _('Show All'), value: 'all'},
-          {label: _('Outliers'), value: 'outliers'},
-          {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
-          {label: _('Hide'), value: false},
-        ]}
-        attr="points"
-        clearable={false}
-      />
-      <NumericFraction label={_('Jitter')} attr="jitter" />
-      <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
-      <MarkerColor suppressMultiValuedMessage label={_('Color')} attr="marker.color" />
-      <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
-      <MarkerSize label={_('Size')} attr="marker.size" />
-      <NumericReciprocal
-        label={_('Size Scale')}
-        attr="marker.sizeref"
-        step={0.2}
-        stepmode="relative"
-      />
-      <Radio
-        label={_('Size Mode')}
-        attr="marker.sizemode"
-        options={[{label: _('Area'), value: 'area'}, {label: _('Diameter'), value: 'diameter'}]}
-      />
-      <Numeric label={_('Minimum Size')} attr="marker.sizemin" />
-      <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
-      <Numeric label={_('Border Width')} attr="marker.line.width" />
-      <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
-      <Numeric label={_('Max Number of Points')} attr="marker.maxdisplayed" />
-    </TraceMarkerSection>
+        <TraceMarkerSection>
+          <Radio
+            label={_('Order')}
+            attr="sort"
+            options={[{label: _('Sorted'), value: true}, {label: _('Unsorted'), value: false}]}
+          />
+          <Radio
+            label={_('Direction')}
+            attr="direction"
+            options={[
+              {label: _('Clockwise'), value: 'clockwise'},
+              {label: _('Counterclockwise'), value: 'counterclockwise'},
+            ]}
+          />
+          <Numeric label={_('Rotation')} attr="rotation" />
+          <NumericFraction label={_('Hole Size')} attr="hole" />
+          <NumericFraction label={_('Pull')} attr="pull" />
+          <Dropdown
+            options={[
+              {label: _('Show All'), value: 'all'},
+              {label: _('Outliers'), value: 'outliers'},
+              {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
+              {label: _('Hide'), value: false},
+            ]}
+            attr="boxpoints"
+            clearable={false}
+          />
+          <Dropdown
+            options={[
+              {label: _('Show All'), value: 'all'},
+              {label: _('Outliers'), value: 'outliers'},
+              {label: _('Suspected Outliers'), value: 'suspectedoutliers'},
+              {label: _('Hide'), value: false},
+            ]}
+            attr="points"
+            clearable={false}
+          />
+          <NumericFraction label={_('Jitter')} attr="jitter" />
+          <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
+          <MarkerColor suppressMultiValuedMessage label={_('Color')} attr="marker.color" />
+          <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
+          <MarkerSize label={_('Size')} attr="marker.size" />
+          <NumericReciprocal
+            label={_('Size Scale')}
+            attr="marker.sizeref"
+            step={0.2}
+            stepmode="relative"
+          />
+          <Radio
+            label={_('Size Mode')}
+            attr="marker.sizemode"
+            options={[{label: _('Area'), value: 'area'}, {label: _('Diameter'), value: 'diameter'}]}
+          />
+          <Numeric label={_('Minimum Size')} attr="marker.sizemin" />
+          <SymbolSelector label={_('Symbol')} attr="marker.symbol" />
+          <Numeric label={_('Border Width')} attr="marker.line.width" />
+          <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
+          <Numeric label={_('Max Number of Points')} attr="marker.maxdisplayed" />
+        </TraceMarkerSection>
 
-    <TraceTypeSection
-      name={_('Bar Size and Spacing')}
-      traceTypes={['bar', 'histogram']}
-      mode="trace"
-    >
-      <LayoutSection attr="name">
-        <Dropdown
-          label={_('Bar Mode')}
-          attr="barmode"
-          options={[
-            {label: _('Overlay'), value: 'overlay'},
-            {label: _('Group'), value: 'group'},
-            {label: _('Stack'), value: 'stack'},
-            {label: _('Relative'), value: 'relative'},
-          ]}
-          clearable={false}
-        />
-        <Dropdown
-          label={_('Normalization')}
-          attr="barnorm"
-          options={[
-            {label: _('None'), value: ''},
-            {label: _('Fraction'), value: 'fraction'},
-            {label: _('Percent'), value: 'percent'},
-          ]}
-          clearable={false}
-        />
-        <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
-        <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Box Size and Spacing')} traceTypes={['box']} mode="trace">
-      <LayoutSection attr="name">
-        <Radio
-          label={_('Box Mode')}
-          attr="boxmode"
-          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
-        />
-        <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
-        <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
-    <TraceTypeSection name={_('Violin Size and Spacing')} traceTypes={['violin']} mode="trace">
-      <LayoutSection attr="name">
-        <Radio
-          label={_('Violin Mode')}
-          attr="violinmode"
-          options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
-        />
-        <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
-        <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
-      </LayoutSection>
-    </TraceTypeSection>
+        <TraceTypeSection
+          name={_('Bar Size and Spacing')}
+          traceTypes={['bar', 'histogram']}
+          mode="trace"
+        >
+          <LayoutSection attr="name">
+            <Dropdown
+              label={_('Bar Mode')}
+              attr="barmode"
+              options={[
+                {label: _('Overlay'), value: 'overlay'},
+                {label: _('Group'), value: 'group'},
+                {label: _('Stack'), value: 'stack'},
+                {label: _('Relative'), value: 'relative'},
+              ]}
+              clearable={false}
+            />
+            <Dropdown
+              label={_('Normalization')}
+              attr="barnorm"
+              options={[
+                {label: _('None'), value: ''},
+                {label: _('Fraction'), value: 'fraction'},
+                {label: _('Percent'), value: 'percent'},
+              ]}
+              clearable={false}
+            />
+            <NumericFractionInverse label={_('Bar Width')} attr="bargap" />
+            <NumericFraction label={_('Bar Padding')} attr="bargroupgap" />
+          </LayoutSection>
+        </TraceTypeSection>
+        <TraceTypeSection name={_('Box Size and Spacing')} traceTypes={['box']} mode="trace">
+          <LayoutSection attr="name">
+            <Radio
+              label={_('Box Mode')}
+              attr="boxmode"
+              options={[
+                {label: _('Overlay'), value: 'overlay'},
+                {label: _('Group'), value: 'group'},
+              ]}
+            />
+            <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
+            <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
+          </LayoutSection>
+        </TraceTypeSection>
+        <TraceTypeSection name={_('Violin Size and Spacing')} traceTypes={['violin']} mode="trace">
+          <LayoutSection attr="name">
+            <Radio
+              label={_('Violin Mode')}
+              attr="violinmode"
+              options={[
+                {label: _('Overlay'), value: 'overlay'},
+                {label: _('Group'), value: 'group'},
+              ]}
+            />
+            <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
+            <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
+          </LayoutSection>
+        </TraceTypeSection>
 
-    <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
-    <PlotlySection name={_('Ticks')}>
-      <Numeric label={_('Width')} attr="tickwidth" />
-    </PlotlySection>
-    <PlotlySection name={_('Contours')}>
-      <Radio
-        label={_('Type')}
-        attr="contours.type"
-        options={[
-          {label: _('Levels'), value: 'levels'},
-          {label: _('Constraint'), value: 'constraint'},
-        ]}
-      />
-      <Dropdown
-        label={_('Coloring')}
-        attr="contours.coloring"
-        options={[
-          {label: _('Fill'), value: 'fill'},
-          {label: _('Heatmap'), value: 'heatmap'},
-          {label: _('Lines'), value: 'lines'},
-          {label: _('None'), value: 'none'},
-        ]}
-        clearable={false}
-      />
-      <Radio
-        label={_('Contour Lines')}
-        attr="contours.showlines"
-        options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
-      />
-      <Radio
-        label={_('Contour Labels')}
-        attr="contours.showlabels"
-        options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
-      />
-      <Radio
-        label={_('Number of Contours')}
-        attr="autocontour"
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-      />
-      <Numeric label={_('Max Contours')} attr="ncontours" />
+        <NumericFraction label={_('Whisker Width')} attr="whiskerwidth" />
+        <PlotlySection name={_('Ticks')}>
+          <Numeric label={_('Width')} attr="tickwidth" />
+        </PlotlySection>
+        <PlotlySection name={_('Contours')}>
+          <Radio
+            label={_('Type')}
+            attr="contours.type"
+            options={[
+              {label: _('Levels'), value: 'levels'},
+              {label: _('Constraint'), value: 'constraint'},
+            ]}
+          />
+          <Dropdown
+            label={_('Coloring')}
+            attr="contours.coloring"
+            options={[
+              {label: _('Fill'), value: 'fill'},
+              {label: _('Heatmap'), value: 'heatmap'},
+              {label: _('Lines'), value: 'lines'},
+              {label: _('None'), value: 'none'},
+            ]}
+            clearable={false}
+          />
+          <Radio
+            label={_('Contour Lines')}
+            attr="contours.showlines"
+            options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+          />
+          <Radio
+            label={_('Contour Labels')}
+            attr="contours.showlabels"
+            options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+          />
+          <Radio
+            label={_('Number of Contours')}
+            attr="autocontour"
+            options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
+          />
+          <Numeric label={_('Max Contours')} attr="ncontours" />
 
-      <ContourNumeric label={_('Step Size')} attr="contours.size" />
-      <ContourNumeric label={_('Min Contour')} attr="contours.start" />
-      <ContourNumeric label={_('Max Contour')} attr="contours.end" />
-    </PlotlySection>
-    <TraceTypeSection name={_('Stacking')} traceTypes={['scatter']} mode="trace">
-      <GroupCreator label={_('Group')} prefix={_('Stack')} attr="stackgroup" />
-      <Radio
-        label={_('Gaps')}
-        attr="stackgaps"
-        options={[
-          {label: _('Infer Zero'), value: 'infer zero'},
-          {label: _('Interpolate'), value: 'interpolate'},
-        ]}
-      />
-      <Radio
-        label={_('Orientation')}
-        attr="orientation"
-        options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
-      />
-      <Radio
-        label={_('Normalization')}
-        attr="groupnorm"
-        options={[
-          {label: _('None'), value: ''},
-          {label: _('Fraction'), value: 'fraction'},
-          {label: _('Percent'), value: 'percent'},
-        ]}
-      />
-    </TraceTypeSection>
-    <TraceTypeSection
-      name={_('Lines')}
-      traceTypes={[
-        'scatter',
-        'contour',
-        'scatterternary',
-        'scatterpolar',
-        'scatterpolargl',
-        'scatter3d',
-        'scattergl',
-        'scattergeo',
-        'scattermapbox',
-        'box',
-        'violin',
-      ]}
-      mode="trace"
-    >
-      <Numeric label={_('Width')} attr="line.width" />
-      <MultiColorPicker label={_('Color')} attr="line.color" />
-      <Radio
-        label={_('Color Bar')}
-        attr="line.showscale"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <ColorscalePicker label={_('Colorscale')} attr="line.colorscale" />
-      <LineDashSelector label={_('Type')} attr="line.dash" />
-      <LineShapeSelector label={_('Shape')} attr="line.shape" />
-      <Numeric label={_('Smoothing')} attr="line.smoothing" showSlider step={0.1} />
-      <Radio
-        label={_('Connect Gaps')}
-        attr="connectgaps"
-        options={[{label: _('Connect'), value: true}, {label: _('Blank'), value: false}]}
-      />
-    </TraceTypeSection>
-    <PlotlySection name={_('Filled Area')}>
-      <FillDropdown attr="fill" label={_('Fill to')} />
-      <MultiColorPicker label={_('Color')} attr="fillcolor" />
-    </PlotlySection>
-    <PlotlySection name={_('Text Attributes')}>
-      <TextInfo attr="textinfo" />
-    </PlotlySection>
-    <TraceTypeSection
-      name={_('Text')}
-      traceTypes={[
-        'scatter',
-        'scattergl',
-        'scatterpolar',
-        'scatterpolargl',
-        'barpolar',
-        'pie',
-        'scatter3d',
-        'scatterternary',
-        'bar',
-        'scattergeo',
-        'scattermapbox',
-      ]}
-      mode="trace"
-    >
-      <DataSelector label={_('Text')} attr="text" />
-      <TextPosition label={_('Text Position')} attr="textposition" />
-      <FontSelector label={_('Typeface')} attr="textfont.family" />
-      <Numeric label={_('Font Size')} attr="textfont.size" units="px" />
-      <MultiColorPicker label={_('Font Color')} attr="textfont.color" />
-    </TraceTypeSection>
-    <PlotlySection name={_('Colorscale')}>
-      <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
-      <Radio
-        label={_('Color Bar')}
-        attr="showscale"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <Radio
-        label={_('Orientation')}
-        attr="reversescale"
-        options={[{label: _('Normal'), value: false}, {label: _('Reversed'), value: true}]}
-      />
-      <VisibilitySelect
-        label={_('Range')}
-        attr="zauto"
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-        showOn={false}
-        defaultOpt={true}
-      >
-        <Numeric label={_('Min')} attr="zmin" />
-        <Numeric label={_('Max')} attr="zmax" />
-      </VisibilitySelect>
-      <VisibilitySelect
-        label={_('Range')}
-        attr="cauto"
-        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
-        showOn={false}
-        defaultOpt={true}
-      >
-        <Numeric label={_('Min')} attr="cmin" />
-        <Numeric label={_('Max')} attr="cmax" />
-      </VisibilitySelect>
-      <Radio
-        label={_('Smoothing')}
-        attr="zsmooth"
-        options={[{label: _('On'), value: 'best'}, {label: _('Off'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Gaps Between Cells')}>
-      <Numeric label={_('Horizontal Gap')} attr="xgap" />
-      <Numeric label={_('Vertical Gap')} attr="ygap" />
-    </PlotlySection>
-    <PlotlySection name={_('Heatmap')}>
-      <Numeric label={_('Horizontal Gaps')} attr="xgap" />
-      <Numeric label={_('Vertical Gaps')} attr="ygap" />
-    </PlotlySection>
-    <TraceTypeSection
-      name={_('Gaps in Data')}
-      traceTypes={['heatmap', 'contour', 'heatmapgl']}
-      mode="trace"
-    >
-      <Radio
-        label={_('Interpolate Gaps')}
-        attr="connectgaps"
-        options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
-      />
-    </TraceTypeSection>
-    <PlotlySection name={_('Lighting')}>
-      <NumericFraction label={_('Ambient')} attr="lighting.ambient" />
-      <NumericFraction label={_('Diffuse')} attr="lighting.diffuse" />
-      <NumericFraction label={_('Specular')} attr="lighting.specular" />
-      <NumericFraction label={_('Roughness')} attr="lighting.roughness" />
-      <NumericFraction label={_('Fresnel')} attr="lighting.fresnel" />
-      <NumericFraction label={_('Vertex Normal')} attr="lighting.vertexnormalsepsilon" />
-      <NumericFraction label={_('Face Normal')} attr="lighting.facenormalsepsilon" />
-    </PlotlySection>
-    <PlotlySection name={_('Light Position')}>
-      <NumericFraction label={_('X')} attr="lightposition.x" />
-      <NumericFraction label={_('Y')} attr="lightposition.y" />
-      <NumericFraction label={_('Z')} attr="lightposition.z" />
-    </PlotlySection>
-    <PlotlySection name={_('Increasing Trace Styles')}>
-      <TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
-      <Numeric label={_('Width')} attr="increasing.line.width" />
-      <MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
-      <MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
-      <LineDashSelector label={_('Type')} attr="increasing.line.dash" />
-      <Radio
-        label={_('Show in Legend')}
-        attr="increasing.showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Decreasing Trace Styles')}>
-      <TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
-      <Numeric label={_('Width')} attr="decreasing.line.width" />
-      <MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
-      <MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
-      <LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
-      <Radio
-        label={_('Show in Legend')}
-        attr="decreasing.showlegend"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Scaling')}>
-      <GroupCreator label={_('Scale Group')} prefix={_('Group')} attr="scalegroup" />
-      <Radio
-        label={_('Scale Mode')}
-        attr="scalemode"
-        options={[{label: _('Width'), value: 'width'}, {label: _('Count'), value: 'count'}]}
-      />
-      <Radio
-        label={_('Span Mode')}
-        attr="spanmode"
-        options={[
-          {label: _('Soft'), value: 'soft'},
-          {label: _('Hard'), value: 'hard'},
-          {label: _('Manual'), value: 'manual'},
-        ]}
-      />
-      <Numeric label={_('Bandwidth')} attr="bandwidth" />
-      <Numeric label={_('Span')} attr="span" />
-      <Radio
-        attr="side"
-        label={_('Visible Sides')}
-        options={[
-          {label: _('Both'), value: 'both'},
-          {label: _('Positive'), value: 'positive'},
-          {label: _('Negative'), value: 'negative'},
-        ]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Box Mean')}>
-      <Radio
-        attr="boxmean"
-        options={[
-          {label: _('Mean'), value: true},
-          {label: _('Mean & SD'), value: 'sd'},
-          {label: _('None'), value: false},
-        ]}
-      />
-    </PlotlySection>
-    <PlotlySection name={_('Box')}>
-      <Radio
-        attr="box.visible"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <NumericFraction label={_('Box Width')} attr="box.width" />
-      <MultiColorPicker label={_('Box Fill Color')} attr="box.color" />
-      <NumericFraction label={_('Box Line Width')} attr="box.line.width" />
-      <MultiColorPicker label={_('Box Line Color')} attr="box.line.color" />
-    </PlotlySection>
-    <PlotlySection name={_('Meanline')}>
-      <Radio
-        attr="meanline.visible"
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      />
-      <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
-      <MultiColorPicker label={_('Meanline Color')} attr="meanline.color" />
-    </PlotlySection>
-    <PlotlySection name={_('On Hover')}>
-      <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
-      <Radio
-        label={_('Split labels')}
-        attr="hoverlabel.split"
-        options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
-      />
-      <VisibilitySelect
-        attr="contour.show"
-        label={_('Show Contour')}
-        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-        showOn={true}
-        defaultOpt={false}
-      >
-        <MultiColorPicker label={_('Contour Color')} attr="contour.color" />
-        <Numeric label={_('Contour Width')} attr="contour.width" />
-      </VisibilitySelect>
-    </PlotlySection>
+          <ContourNumeric label={_('Step Size')} attr="contours.size" />
+          <ContourNumeric label={_('Min Contour')} attr="contours.start" />
+          <ContourNumeric label={_('Max Contour')} attr="contours.end" />
+        </PlotlySection>
+        <TraceTypeSection name={_('Stacking')} traceTypes={['scatter']} mode="trace">
+          <GroupCreator label={_('Group')} prefix={_('Stack')} attr="stackgroup" />
+          <Radio
+            label={_('Gaps')}
+            attr="stackgaps"
+            options={[
+              {label: _('Infer Zero'), value: 'infer zero'},
+              {label: _('Interpolate'), value: 'interpolate'},
+            ]}
+          />
+          <Radio
+            label={_('Orientation')}
+            attr="orientation"
+            options={[{label: _('Horizontal'), value: 'h'}, {label: _('Vertical'), value: 'v'}]}
+          />
+          <Radio
+            label={_('Normalization')}
+            attr="groupnorm"
+            options={[
+              {label: _('None'), value: ''},
+              {label: _('Fraction'), value: 'fraction'},
+              {label: _('Percent'), value: 'percent'},
+            ]}
+          />
+        </TraceTypeSection>
+        <TraceTypeSection
+          name={_('Lines')}
+          traceTypes={[
+            'scatter',
+            'contour',
+            'scatterternary',
+            'scatterpolar',
+            'scatterpolargl',
+            'scatter3d',
+            'scattergl',
+            'scattergeo',
+            'scattermapbox',
+            'box',
+            'violin',
+          ]}
+          mode="trace"
+        >
+          <Numeric label={_('Width')} attr="line.width" />
+          <MultiColorPicker label={_('Color')} attr="line.color" />
+          <Radio
+            label={_('Color Bar')}
+            attr="line.showscale"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <ColorscalePicker label={_('Colorscale')} attr="line.colorscale" />
+          <LineDashSelector label={_('Type')} attr="line.dash" />
+          <LineShapeSelector label={_('Shape')} attr="line.shape" />
+          <Numeric label={_('Smoothing')} attr="line.smoothing" showSlider step={0.1} />
+          <Radio
+            label={_('Connect Gaps')}
+            attr="connectgaps"
+            options={[{label: _('Connect'), value: true}, {label: _('Blank'), value: false}]}
+          />
+        </TraceTypeSection>
+        <PlotlySection name={_('Filled Area')}>
+          <FillDropdown attr="fill" label={_('Fill to')} />
+          <MultiColorPicker label={_('Color')} attr="fillcolor" />
+        </PlotlySection>
+        <PlotlySection name={_('Text Attributes')}>
+          <TextInfo attr="textinfo" />
+        </PlotlySection>
+        <TraceTypeSection
+          name={_('Text')}
+          traceTypes={[
+            'scatter',
+            'scattergl',
+            'scatterpolar',
+            'scatterpolargl',
+            'barpolar',
+            'pie',
+            'scatter3d',
+            'scatterternary',
+            'bar',
+            'scattergeo',
+            'scattermapbox',
+          ]}
+          mode="trace"
+        >
+          <DataSelector label={_('Text')} attr="text" />
+          <TextPosition label={_('Text Position')} attr="textposition" />
+          <FontSelector label={_('Typeface')} attr="textfont.family" />
+          <Numeric label={_('Font Size')} attr="textfont.size" units="px" />
+          <MultiColorPicker label={_('Font Color')} attr="textfont.color" />
+        </TraceTypeSection>
+        <PlotlySection name={_('Colorscale')}>
+          <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
+          <Radio
+            label={_('Color Bar')}
+            attr="showscale"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <Radio
+            label={_('Orientation')}
+            attr="reversescale"
+            options={[{label: _('Normal'), value: false}, {label: _('Reversed'), value: true}]}
+          />
+          <VisibilitySelect
+            label={_('Range')}
+            attr="zauto"
+            options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
+            showOn={false}
+            defaultOpt={true}
+          >
+            <Numeric label={_('Min')} attr="zmin" />
+            <Numeric label={_('Max')} attr="zmax" />
+          </VisibilitySelect>
+          <VisibilitySelect
+            label={_('Range')}
+            attr="cauto"
+            options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
+            showOn={false}
+            defaultOpt={true}
+          >
+            <Numeric label={_('Min')} attr="cmin" />
+            <Numeric label={_('Max')} attr="cmax" />
+          </VisibilitySelect>
+          <Radio
+            label={_('Smoothing')}
+            attr="zsmooth"
+            options={[{label: _('On'), value: 'best'}, {label: _('Off'), value: false}]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Gaps Between Cells')}>
+          <Numeric label={_('Horizontal Gap')} attr="xgap" />
+          <Numeric label={_('Vertical Gap')} attr="ygap" />
+        </PlotlySection>
+        <PlotlySection name={_('Heatmap')}>
+          <Numeric label={_('Horizontal Gaps')} attr="xgap" />
+          <Numeric label={_('Vertical Gaps')} attr="ygap" />
+        </PlotlySection>
+        <TraceTypeSection
+          name={_('Gaps in Data')}
+          traceTypes={['heatmap', 'contour', 'heatmapgl']}
+          mode="trace"
+        >
+          <Radio
+            label={_('Interpolate Gaps')}
+            attr="connectgaps"
+            options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
+          />
+        </TraceTypeSection>
+        <PlotlySection name={_('Lighting')}>
+          <NumericFraction label={_('Ambient')} attr="lighting.ambient" />
+          <NumericFraction label={_('Diffuse')} attr="lighting.diffuse" />
+          <NumericFraction label={_('Specular')} attr="lighting.specular" />
+          <NumericFraction label={_('Roughness')} attr="lighting.roughness" />
+          <NumericFraction label={_('Fresnel')} attr="lighting.fresnel" />
+          <NumericFraction label={_('Vertex Normal')} attr="lighting.vertexnormalsepsilon" />
+          <NumericFraction label={_('Face Normal')} attr="lighting.facenormalsepsilon" />
+        </PlotlySection>
+        <PlotlySection name={_('Light Position')}>
+          <NumericFraction label={_('X')} attr="lightposition.x" />
+          <NumericFraction label={_('Y')} attr="lightposition.y" />
+          <NumericFraction label={_('Z')} attr="lightposition.z" />
+        </PlotlySection>
+        <PlotlySection name={_('Increasing Trace Styles')}>
+          <TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
+          <Numeric label={_('Width')} attr="increasing.line.width" />
+          <MultiColorPicker label={_('Line Color')} attr="increasing.line.color" />
+          <MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
+          <LineDashSelector label={_('Type')} attr="increasing.line.dash" />
+          <Radio
+            label={_('Show in Legend')}
+            attr="increasing.showlegend"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Decreasing Trace Styles')}>
+          <TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
+          <Numeric label={_('Width')} attr="decreasing.line.width" />
+          <MultiColorPicker label={_('Line Color')} attr="decreasing.line.color" />
+          <MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
+          <LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
+          <Radio
+            label={_('Show in Legend')}
+            attr="decreasing.showlegend"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Scaling')}>
+          <GroupCreator label={_('Scale Group')} prefix={_('Group')} attr="scalegroup" />
+          <Radio
+            label={_('Scale Mode')}
+            attr="scalemode"
+            options={[{label: _('Width'), value: 'width'}, {label: _('Count'), value: 'count'}]}
+          />
+          <Radio
+            label={_('Span Mode')}
+            attr="spanmode"
+            options={[
+              {label: _('Soft'), value: 'soft'},
+              {label: _('Hard'), value: 'hard'},
+              {label: _('Manual'), value: 'manual'},
+            ]}
+          />
+          <Numeric label={_('Bandwidth')} attr="bandwidth" />
+          <Numeric label={_('Span')} attr="span" />
+          <Radio
+            attr="side"
+            label={_('Visible Sides')}
+            options={[
+              {label: _('Both'), value: 'both'},
+              {label: _('Positive'), value: 'positive'},
+              {label: _('Negative'), value: 'negative'},
+            ]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Box Mean')}>
+          <Radio
+            attr="boxmean"
+            options={[
+              {label: _('Mean'), value: true},
+              {label: _('Mean & SD'), value: 'sd'},
+              {label: _('None'), value: false},
+            ]}
+          />
+        </PlotlySection>
+        <PlotlySection name={_('Box')}>
+          <Radio
+            attr="box.visible"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <NumericFraction label={_('Box Width')} attr="box.width" />
+          <MultiColorPicker label={_('Box Fill Color')} attr="box.color" />
+          <NumericFraction label={_('Box Line Width')} attr="box.line.width" />
+          <MultiColorPicker label={_('Box Line Color')} attr="box.line.color" />
+        </PlotlySection>
+        <PlotlySection name={_('Meanline')}>
+          <Radio
+            attr="meanline.visible"
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          />
+          <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
+          <MultiColorPicker label={_('Meanline Color')} attr="meanline.color" />
+        </PlotlySection>
+        <PlotlySection name={_('On Hover')}>
+          <HoverInfo attr="hoverinfo" label={_('Values Shown On Hover')} />
+          <Radio
+            label={_('Split labels')}
+            attr="hoverlabel.split"
+            options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
+          />
+          <VisibilitySelect
+            attr="contour.show"
+            label={_('Show Contour')}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+            showOn={true}
+            defaultOpt={false}
+          >
+            <MultiColorPicker label={_('Contour Color')} attr="contour.color" />
+            <Numeric label={_('Contour Width')} attr="contour.width" />
+          </VisibilitySelect>
+        </PlotlySection>
 
-    <PlotlySection name={_('Hover Action')}>
-      <HoveronDropdown attr="hoveron" label={_('Hover on')} />
-    </PlotlySection>
+        <PlotlySection name={_('Hover Action')}>
+          <HoveronDropdown attr="hoveron" label={_('Hover on')} />
+        </PlotlySection>
 
-    <TraceTypeSection
-      name={_('Error Bars X')}
-      traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
-      mode="trace"
-    >
-      <ErrorBars attr="error_x" />
-    </TraceTypeSection>
+        <TraceTypeSection
+          name={_('Error Bars X')}
+          traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
+          mode="trace"
+        >
+          <ErrorBars attr="error_x" />
+        </TraceTypeSection>
 
-    <TraceTypeSection
-      name={_('Error Bars Y')}
-      traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
-      mode="trace"
-    >
-      <ErrorBars attr="error_y" />
-    </TraceTypeSection>
+        <TraceTypeSection
+          name={_('Error Bars Y')}
+          traceTypes={['scatter', 'scattergl', 'scatter3d', 'bar']}
+          mode="trace"
+        >
+          <ErrorBars attr="error_y" />
+        </TraceTypeSection>
 
-    <TraceTypeSection name={_('Error Bars Z')} traceTypes={['scatter3d']} mode="trace">
-      <ErrorBars attr="error_z" />
-    </TraceTypeSection>
-  </TraceAccordion>
+        <TraceTypeSection name={_('Error Bars Z')} traceTypes={['scatter3d']} mode="trace">
+          <ErrorBars attr="error_z" />
+        </TraceTypeSection>
+      </TraceAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleTracesPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleTracesPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleTracesPanel;
diff --git a/src/default_panels/StyleUpdateMenusPanel.js b/src/default_panels/StyleUpdateMenusPanel.js
index f8d1bb00d..311f3cfd1 100644
--- a/src/default_panels/StyleUpdateMenusPanel.js
+++ b/src/default_panels/StyleUpdateMenusPanel.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+// import PropTypes from 'prop-types';
 import {
   ColorPicker,
   FontSelector,
@@ -10,67 +10,72 @@ import {
   VisibilitySelect,
   Radio,
 } from '../components';
+import {EditorControlsContext} from '../context';
 
-const StyleUpdateMenusPanel = (props, {localize: _}) => (
-  <UpdateMenuAccordion>
-    <VisibilitySelect
-      attr="visible"
-      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
-      showOn={true}
-    >
-      <PlotlySection name={_('Button Labels')}>
-        <UpdateMenuButtons attr="buttons" />
-      </PlotlySection>
-      <PlotlySection name={_('Background')}>
-        <ColorPicker label={_('Color')} attr="bgcolor" />
-      </PlotlySection>
-      <PlotlySection name={_('Font')}>
-        <FontSelector label={_('Typeface')} attr="font.family" />
-        <Numeric label={_('Size')} attr="font.size" />
-        <ColorPicker label={_('Color')} attr="font.color" />
-      </PlotlySection>
-      <PlotlySection name={_('Border')}>
-        <Numeric label={_('Width')} attr="borderwidth" />
-        <ColorPicker label={_('Color')} attr="bordercolor" />
-      </PlotlySection>
+const StyleUpdateMenusPanel = () => (
+  <EditorControlsContext.Consumer>
+    {({localize: _}) => (
+      <UpdateMenuAccordion>
+        <VisibilitySelect
+          attr="visible"
+          options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
+          showOn={true}
+        >
+          <PlotlySection name={_('Button Labels')}>
+            <UpdateMenuButtons attr="buttons" />
+          </PlotlySection>
+          <PlotlySection name={_('Background')}>
+            <ColorPicker label={_('Color')} attr="bgcolor" />
+          </PlotlySection>
+          <PlotlySection name={_('Font')}>
+            <FontSelector label={_('Typeface')} attr="font.family" />
+            <Numeric label={_('Size')} attr="font.size" />
+            <ColorPicker label={_('Color')} attr="font.color" />
+          </PlotlySection>
+          <PlotlySection name={_('Border')}>
+            <Numeric label={_('Width')} attr="borderwidth" />
+            <ColorPicker label={_('Color')} attr="bordercolor" />
+          </PlotlySection>
 
-      <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
-        <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
-        <Radio
-          label={_('Anchor')}
-          attr={'xanchor'}
-          options={[
-            {label: _('Left'), value: 'left'},
-            {label: _('Center'), value: 'center'},
-            {label: _('Right'), value: 'right'},
-          ]}
-        />
-      </PlotlySection>
-      <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
-        <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
-        <Radio
-          label={_('Anchor')}
-          attr={'yanchor'}
-          options={[
-            {label: _('Top'), value: 'top'},
-            {label: _('Middle'), value: 'middle'},
-            {label: _('Bottom'), value: 'bottom'},
-          ]}
-        />
-      </PlotlySection>
+          <PlotlySection name={_('Horizontal Positioning')} attr={'x'}>
+            <Numeric label={_('Position')} attr={'x'} showSlider step={0.02} />
+            <Radio
+              label={_('Anchor')}
+              attr={'xanchor'}
+              options={[
+                {label: _('Left'), value: 'left'},
+                {label: _('Center'), value: 'center'},
+                {label: _('Right'), value: 'right'},
+              ]}
+            />
+          </PlotlySection>
+          <PlotlySection name={_('Vertical Positioning')} attr={'y'}>
+            <Numeric label={_('Position')} attr={'y'} showSlider step={0.02} />
+            <Radio
+              label={_('Anchor')}
+              attr={'yanchor'}
+              options={[
+                {label: _('Top'), value: 'top'},
+                {label: _('Middle'), value: 'middle'},
+                {label: _('Bottom'), value: 'bottom'},
+              ]}
+            />
+          </PlotlySection>
 
-      <PlotlySection name={_('Padding')}>
-        <Numeric label={_('Top')} attr="pad.t" units="px" />
-        <Numeric label={_('Bottom')} attr="pad.b" units="px" />
-        <Numeric label={_('Left')} attr="pad.l" units="px" />
-        <Numeric label={_('Right')} attr="pad.r" units="px" />
-      </PlotlySection>
-    </VisibilitySelect>
-  </UpdateMenuAccordion>
+          <PlotlySection name={_('Padding')}>
+            <Numeric label={_('Top')} attr="pad.t" units="px" />
+            <Numeric label={_('Bottom')} attr="pad.b" units="px" />
+            <Numeric label={_('Left')} attr="pad.l" units="px" />
+            <Numeric label={_('Right')} attr="pad.r" units="px" />
+          </PlotlySection>
+        </VisibilitySelect>
+      </UpdateMenuAccordion>
+    )}
+  </EditorControlsContext.Consumer>
 );
 
-StyleUpdateMenusPanel.contextTypes = {
-  localize: PropTypes.func,
-};
+// StyleUpdateMenusPanel.contextTypes = {
+//   localize: PropTypes.func,
+// };
 
 export default StyleUpdateMenusPanel;
diff --git a/src/index.js b/src/index.js
index f53cee550..a29cbca25 100644
--- a/src/index.js
+++ b/src/index.js
@@ -20,6 +20,13 @@ import {
   walkObject,
 } from './lib';
 import {EDITOR_ACTIONS} from './lib/constants';
+import {
+  EditorControlsContext,
+  PanelMenuWrapperContext,
+  ModalProviderContext,
+  PlotlyFoldContext,
+  PlotlyPanelContext,
+} from './context';
 
 import {
   AnnotationAccordion,
@@ -179,6 +186,11 @@ export {
   EditorControls,
   DefaultEditor,
   RectanglePositioner,
+  EditorControlsContext,
+  PanelMenuWrapperContext,
+  ModalProviderContext,
+  PlotlyFoldContext,
+  PlotlyPanelContext,
 };
 
 export default PlotlyEditor;
diff --git a/src/lib/connectAggregationToTransform.js b/src/lib/connectAggregationToTransform.js
index 9a1df3de8..3aab86b0e 100644
--- a/src/lib/connectAggregationToTransform.js
+++ b/src/lib/connectAggregationToTransform.js
@@ -35,6 +35,16 @@ export default function connectAggregationToTransform(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`aggregations[].${attr}`),
+        updateContainer: this.updateAggregation,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateAggregation(update) {
       const newUpdate = {};
       const path = `aggregations[${this.props.aggregationIndex}]`;
diff --git a/src/lib/connectAnnotationToLayout.js b/src/lib/connectAnnotationToLayout.js
index ea3f282be..b87a0889d 100644
--- a/src/lib/connectAnnotationToLayout.js
+++ b/src/lib/connectAnnotationToLayout.js
@@ -38,6 +38,17 @@ export default function connectAnnotationToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`annotations[].${attr}`),
+        updateContainer: this.updateAnnotation,
+        deleteContainer: this.deleteAnnotation,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateAnnotation(update) {
       const newUpdate = {};
       const {annotationIndex} = this.props;
diff --git a/src/lib/connectAxesToLayout.js b/src/lib/connectAxesToLayout.js
index f60e52d1f..c1dd4c1f4 100644
--- a/src/lib/connectAxesToLayout.js
+++ b/src/lib/connectAxesToLayout.js
@@ -104,6 +104,22 @@ export default function connectAxesToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(`${this.state.axesTarget}.${attr}`),
+        axesOptions: this.axesOptions,
+        axesTarget: this.state.axesTarget,
+        axesTargetHandler: this.axesTargetHandler,
+        container: this.container,
+        defaultContainer: this.defaultContainer,
+        fullContainer: this.fullContainer,
+        updateContainer: this.updateContainer,
+      };
+    }
+
     axesTargetHandler(axesTarget) {
       this.setState({axesTarget});
     }
diff --git a/src/lib/connectCartesianSubplotToLayout.js b/src/lib/connectCartesianSubplotToLayout.js
index eab68ddb1..0fb56e022 100644
--- a/src/lib/connectCartesianSubplotToLayout.js
+++ b/src/lib/connectCartesianSubplotToLayout.js
@@ -52,6 +52,21 @@ export default function connectCartesianSubplotToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(
+                attr.replace('xaxis', this.props.xaxis).replace('yaxis', this.props.yaxis)
+              ),
+        updateContainer: this.updateSubplot,
+        deleteContainer: this.deleteSubplot,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateSubplot(update) {
       const newUpdate = {};
       for (const key in update) {
diff --git a/src/lib/connectImageToLayout.js b/src/lib/connectImageToLayout.js
index f2517a15f..a68b00ea8 100644
--- a/src/lib/connectImageToLayout.js
+++ b/src/lib/connectImageToLayout.js
@@ -38,6 +38,17 @@ export default function connectImageToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`images[].${attr}`),
+        updateContainer: this.updateImage,
+        deleteContainer: this.deleteImage,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateImage(update) {
       const newUpdate = {};
       const {imageIndex} = this.props;
diff --git a/src/lib/connectLayoutToPlot.js b/src/lib/connectLayoutToPlot.js
index 276f2ddde..0296c2015 100644
--- a/src/lib/connectLayoutToPlot.js
+++ b/src/lib/connectLayoutToPlot.js
@@ -32,6 +32,32 @@ export default function connectLayoutToPlot(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      const {layout, fullLayout, plotly, onUpdate} = this.context;
+
+      const updateContainer = update => {
+        if (!onUpdate) {
+          return;
+        }
+        onUpdate({
+          type: EDITOR_ACTIONS.UPDATE_LAYOUT,
+          payload: {
+            update,
+          },
+        });
+      };
+
+      return {
+        getValObject: attr =>
+          !plotly
+            ? null
+            : plotly.PlotSchema.getLayoutValObject(fullLayout, nestedProperty({}, attr).parts),
+        updateContainer,
+        container: layout,
+        fullContainer: fullLayout,
+      };
+    }
+
     render() {
       return <WrappedComponent {...this.props} />;
     }
diff --git a/src/lib/connectNonCartesianSubplotToLayout.js b/src/lib/connectNonCartesianSubplotToLayout.js
index db29cb198..f1c91630d 100644
--- a/src/lib/connectNonCartesianSubplotToLayout.js
+++ b/src/lib/connectNonCartesianSubplotToLayout.js
@@ -43,6 +43,18 @@ export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(`${this.props.subplot}.${attr}`),
+        updateContainer: this.updateSubplot,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateSubplot(update) {
       const newUpdate = {};
       for (const key in update) {
diff --git a/src/lib/connectRangeSelectorToAxis.js b/src/lib/connectRangeSelectorToAxis.js
index 977a84de9..8e891c9f3 100644
--- a/src/lib/connectRangeSelectorToAxis.js
+++ b/src/lib/connectRangeSelectorToAxis.js
@@ -42,6 +42,19 @@ export default function connectRangeSelectorToAxis(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject
+            ? null
+            : this.context.getValObject(`rangeselector.buttons[].${attr}`),
+        updateContainer: this.updateRangeselector,
+        deleteContainer: this.deleteRangeselector,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateRangeselector(update) {
       const newUpdate = {};
       const {rangeselectorIndex} = this.props;
diff --git a/src/lib/connectShapeToLayout.js b/src/lib/connectShapeToLayout.js
index d093686a9..441ffe7a8 100644
--- a/src/lib/connectShapeToLayout.js
+++ b/src/lib/connectShapeToLayout.js
@@ -38,6 +38,17 @@ export default function connectShapeToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`shapes[].${attr}`),
+        updateContainer: this.updateShape,
+        deleteContainer: this.deleteShape,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateShape(update) {
       const newUpdate = {};
       const {shapeIndex} = this.props;
diff --git a/src/lib/connectSliderToLayout.js b/src/lib/connectSliderToLayout.js
index d42a7bde3..4c1d582b2 100644
--- a/src/lib/connectSliderToLayout.js
+++ b/src/lib/connectSliderToLayout.js
@@ -34,6 +34,16 @@ export default function connectSliderToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`sliders[].${attr}`),
+        updateContainer: this.updateSlider,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateSlider(update) {
       const newUpdate = {};
       const {sliderIndex} = this.props;
diff --git a/src/lib/connectToContainer.js b/src/lib/connectToContainer.js
index 0a5fedee5..51ee0322b 100644
--- a/src/lib/connectToContainer.js
+++ b/src/lib/connectToContainer.js
@@ -56,6 +56,13 @@ export default function connectToContainer(WrappedComponent, config = {}) {
       };
     }
 
+    provideValue() {
+      return {
+        description: this.plotProps.description,
+        attr: this.attr,
+      };
+    }
+
     render() {
       // Merge plotprops onto props so leaf components only need worry about
       // props. However pass plotProps as a specific prop in case inner component
diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js
index af621122c..4d58ef80e 100644
--- a/src/lib/connectTraceToPlot.js
+++ b/src/lib/connectTraceToPlot.js
@@ -76,6 +76,10 @@ export default function connectTraceToPlot(WrappedComponent) {
       return this.childContext;
     }
 
+    provideValue() {
+      return this.childContext;
+    }
+
     updateTrace(update) {
       if (this.context.onUpdate) {
         const splitTraceGroup = this.props.fullDataArrayPosition
diff --git a/src/lib/connectTransformToTrace.js b/src/lib/connectTransformToTrace.js
index a24b16b41..10a7d9372 100644
--- a/src/lib/connectTransformToTrace.js
+++ b/src/lib/connectTransformToTrace.js
@@ -38,6 +38,17 @@ export default function connectTransformToTrace(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`transforms[].${attr}`),
+        updateContainer: this.updateTransform,
+        deleteContainer: this.deleteTransform,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateTransform(update) {
       const newUpdate = {};
       const {transformIndex} = this.props;
diff --git a/src/lib/connectUpdateMenuToLayout.js b/src/lib/connectUpdateMenuToLayout.js
index 9b1229dd7..05adffe73 100644
--- a/src/lib/connectUpdateMenuToLayout.js
+++ b/src/lib/connectUpdateMenuToLayout.js
@@ -34,6 +34,16 @@ export default function connectUpdateMenuToLayout(WrappedComponent) {
       };
     }
 
+    provideValue() {
+      return {
+        getValObject: attr =>
+          !this.context.getValObject ? null : this.context.getValObject(`updatemenus[].${attr}`),
+        updateContainer: this.updateUpdateMenu,
+        container: this.container,
+        fullContainer: this.fullContainer,
+      };
+    }
+
     updateUpdateMenu(update) {
       const newUpdate = {};
       const {updateMenuIndex} = this.props;