diff --git a/.prettierrc b/.prettierrc
index 9361deac8..4d40e22c7 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
     "singleQuote": true,
     "bracketSpacing": false,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "printWidth": 100
 }
diff --git a/src/DefaultEditor.js b/src/DefaultEditor.js
index 2786f432c..365bc6bcb 100644
--- a/src/DefaultEditor.js
+++ b/src/DefaultEditor.js
@@ -31,9 +31,7 @@ class DefaultEditor extends Component {
   }
 
   hasTransforms() {
-    return this.context.fullData.some(d =>
-      TRANSFORMABLE_TRACES.includes(d.type)
-    );
+    return this.context.fullData.some(d => TRANSFORMABLE_TRACES.includes(d.type));
   }
 
   hasAxes() {
@@ -75,27 +73,17 @@ class DefaultEditor extends Component {
         {logo ? logo : null}
         <GraphCreatePanel group={_('Graph')} name={_('Create')} />
         <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        {this.hasTransforms() && (
-          <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />
-        )}
+        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transforms')} />}
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
-        {this.hasAxes() && (
-          <StyleAxesPanel group={_('Style')} name={_('Axes')} />
-        )}
+        {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
         <StyleLegendPanel group={_('Style')} name={_('Legend')} />
-        {this.hasColorbars() && (
-          <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />
-        )}
+        {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
         <StyleNotesPanel group={_('Style')} name={_('Annotations')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
-        {this.hasSliders() && (
-          <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
-        )}
-        {this.hasMenus() && (
-          <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />
-        )}
+        {this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}
+        {this.hasMenus() && <StyleUpdateMenusPanel group={_('Style')} name={_('Menus')} />}
         {this.props.children ? this.props.children : null}
       </PanelMenuWrapper>
     );
diff --git a/src/EditorControls.js b/src/EditorControls.js
index fd21bc918..2e32b3284 100644
--- a/src/EditorControls.js
+++ b/src/EditorControls.js
@@ -21,8 +21,7 @@ class EditorControls extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.localize = key =>
-      localizeString(this.props.dictionaries || {}, this.props.locale, key);
+    this.localize = key => localizeString(this.props.dictionaries || {}, this.props.locale, key);
 
     // we only need to compute this once.
     if (this.props.plotly) {
@@ -85,12 +84,7 @@ class EditorControls extends Component {
             const value = payload.update[attr];
 
             if (splitTraceGroup) {
-              props = shamefullyCreateSplitStyleProps(
-                graphDiv,
-                attr,
-                traceIndex,
-                splitTraceGroup
-              );
+              props = shamefullyCreateSplitStyleProps(graphDiv, attr, traceIndex, splitTraceGroup);
             }
 
             props.forEach(p => {
@@ -262,17 +256,11 @@ class EditorControls extends Component {
         break;
 
       case EDITOR_ACTIONS.DELETE_TRANSFORM:
-        if (
-          isNumeric(payload.transformIndex) &&
-          payload.traceIndex < graphDiv.data.length
-        ) {
+        if (isNumeric(payload.transformIndex) && payload.traceIndex < graphDiv.data.length) {
           if (graphDiv.data[payload.traceIndex].transforms.length === 1) {
             delete graphDiv.data[payload.traceIndex].transforms;
           } else {
-            graphDiv.data[payload.traceIndex].transforms.splice(
-              payload.transformIndex,
-              1
-            );
+            graphDiv.data[payload.traceIndex].transforms.splice(payload.transformIndex, 1);
           }
           if (this.props.onUpdate) {
             this.props.onUpdate(
@@ -285,9 +273,7 @@ class EditorControls extends Component {
         break;
 
       default:
-        throw new Error(
-          this.localize('must specify an action type to handleEditorUpdate')
-        );
+        throw new Error(this.localize('must specify an action type to handleEditorUpdate'));
     }
   }
 
diff --git a/src/PlotlyEditor.js b/src/PlotlyEditor.js
index e23a280c3..5be6f6524 100644
--- a/src/PlotlyEditor.js
+++ b/src/PlotlyEditor.js
@@ -29,18 +29,13 @@ class PlotlyEditor extends Component {
             srcConverters={this.props.srcConverters}
             makeDefaultTrace={this.props.makeDefaultTrace}
             glByDefault={this.props.glByDefault}
-            mapBoxAccess={Boolean(
-              this.props.config && this.props.config.mapboxAccessToken
-            )}
+            mapBoxAccess={Boolean(this.props.config && this.props.config.mapboxAccessToken)}
             fontOptions={this.props.fontOptions}
           >
             {this.props.children}
           </EditorControls>
         )}
-        <div
-          className="plotly_editor_plot"
-          style={{width: '100%', height: '100%'}}
-        >
+        <div className="plotly_editor_plot" style={{width: '100%', height: '100%'}}>
           <this.PlotComponent
             data={this.props.data}
             layout={this.props.layout}
diff --git a/src/__percy__/panels.percy.js b/src/__percy__/panels.percy.js
index ccc16fceb..87c941e47 100644
--- a/src/__percy__/panels.percy.js
+++ b/src/__percy__/panels.percy.js
@@ -52,9 +52,7 @@ const panelFixture = (Panel, group, name, figure) => {
 const snapshotWidth = 500;
 
 Object.keys(mocks).forEach(m => {
-  const selectedPanels = panelsToTest[m]
-    ? panelsToTest[m]
-    : Object.keys(panels);
+  const selectedPanels = panelsToTest[m] ? panelsToTest[m] : Object.keys(panels);
 
   selectedPanels.forEach(p => {
     const words = p.split(/(?=[A-Z])/);
diff --git a/src/__tests__/syntax-test.js b/src/__tests__/syntax-test.js
index e361387af..daf88b1f6 100644
--- a/src/__tests__/syntax-test.js
+++ b/src/__tests__/syntax-test.js
@@ -2,14 +2,7 @@
 import fs from 'fs';
 import glob from 'glob';
 
-const BLACK_LIST = [
-  'fdescribe',
-  'fit',
-  'xdescribe',
-  'xit',
-  'it\\.only',
-  'describe\\.only',
-];
+const BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit', 'it\\.only', 'describe\\.only'];
 const REGEXS = BLACK_LIST.map(token => new RegExp(`^\\s*${token}\\(.*`));
 
 describe('Syntax and test validation', () => {
diff --git a/src/components/PanelMenuWrapper.js b/src/components/PanelMenuWrapper.js
index b0d79590b..a9996ff95 100644
--- a/src/components/PanelMenuWrapper.js
+++ b/src/components/PanelMenuWrapper.js
@@ -30,10 +30,7 @@ class PanelsWithSidebar extends Component {
   }
 
   renderSection(section, i) {
-    if (
-      section.type &&
-      (section.type.plotly_editor_traits || {}).sidebar_element
-    ) {
+    if (section.type && (section.type.plotly_editor_traits || {}).sidebar_element) {
       return cloneElement(section, {key: i});
     }
     return (
diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js
index aeaaf0acf..98795f9f4 100644
--- a/src/components/containers/AnnotationAccordion.js
+++ b/src/components/containers/AnnotationAccordion.js
@@ -17,12 +17,7 @@ class AnnotationAccordion extends Component {
     const content =
       annotations.length &&
       annotations.map((ann, i) => (
-        <AnnotationFold
-          key={i}
-          annotationIndex={i}
-          name={ann.text}
-          canDelete={canAdd}
-        >
+        <AnnotationFold key={i} annotationIndex={i} name={ann.text} canDelete={canAdd}>
           {children}
         </AnnotationFold>
       ));
diff --git a/src/components/containers/FoldEmpty.js b/src/components/containers/FoldEmpty.js
index 8cd10e009..7a78fbaaa 100644
--- a/src/components/containers/FoldEmpty.js
+++ b/src/components/containers/FoldEmpty.js
@@ -13,14 +13,10 @@ export default class FoldEmpty extends Component {
           </div>
         ) : null}
         {messagePrimary ? (
-          <div className="fold__content__empty__message__primary">
-            {messagePrimary}
-          </div>
+          <div className="fold__content__empty__message__primary">{messagePrimary}</div>
         ) : null}
         {messageSecondary ? (
-          <div className="fold__content__empty__message__secondary">
-            {messageSecondary}
-          </div>
+          <div className="fold__content__empty__message__secondary">{messageSecondary}</div>
         ) : null}
         {children ? children : null}
       </div>
diff --git a/src/components/containers/Modal.js b/src/components/containers/Modal.js
index 9b0e0b862..356842dc4 100644
--- a/src/components/containers/Modal.js
+++ b/src/components/containers/Modal.js
@@ -6,19 +6,14 @@ const ModalHeader = ({title, handleClose}) => (
   <div className="modal__header">
     {title ? <div className="modal__header__title">{title}</div> : null}
     {handleClose ? (
-      <div
-        className="modal__header__close"
-        onClick={handleClose ? () => handleClose() : null}
-      >
+      <div className="modal__header__close" onClick={handleClose ? () => handleClose() : null}>
         <CloseIcon />
       </div>
     ) : null}
   </div>
 );
 
-const ModalContent = ({children}) => (
-  <div className="modal__content">{children}</div>
-);
+const ModalContent = ({children}) => <div className="modal__content">{children}</div>;
 
 class Modal extends Component {
   constructor(props) {
@@ -50,16 +45,10 @@ class Modal extends Component {
     return (
       <div className={classes}>
         <div className="modal__card">
-          <ModalHeader
-            title={title}
-            handleClose={() => this.context.handleClose()}
-          />
+          <ModalHeader title={title} handleClose={() => this.context.handleClose()} />
           <ModalContent>{children}</ModalContent>
         </div>
-        <div
-          className="modal__backdrop"
-          onClick={() => this.context.handleClose()}
-        />
+        <div className="modal__backdrop" onClick={() => this.context.handleClose()} />
       </div>
     );
   }
diff --git a/src/components/containers/ModalProvider.js b/src/components/containers/ModalProvider.js
index bc46ccd0f..6cbb13958 100644
--- a/src/components/containers/ModalProvider.js
+++ b/src/components/containers/ModalProvider.js
@@ -75,9 +75,7 @@ class ModalProvider extends React.Component {
     return (
       <Fragment>
         {this.props.children}
-        {this.state.open ? (
-          <Component isAnimatingOut={isAnimatingOut} {...componentProps} />
-        ) : null}
+        {this.state.open ? <Component isAnimatingOut={isAnimatingOut} {...componentProps} /> : null}
       </Fragment>
     );
   }
diff --git a/src/components/containers/PanelEmpty.js b/src/components/containers/PanelEmpty.js
index ae30c3870..cd72bbb9c 100644
--- a/src/components/containers/PanelEmpty.js
+++ b/src/components/containers/PanelEmpty.js
@@ -11,9 +11,7 @@ class PanelEmpty extends Component {
     return (
       <div className={bem('panel', 'empty')}>
         <div className="panel__empty__message">
-          <div className="panel__empty__message__icon">
-            {Icon ? <Icon /> : <ChartLineIcon />}
-          </div>
+          <div className="panel__empty__message__icon">{Icon ? <Icon /> : <ChartLineIcon />}</div>
           <div className="panel__empty__message__heading">{heading}</div>
           <div className="panel__empty__message__content">{children}</div>
         </div>
diff --git a/src/components/containers/PanelHeader.js b/src/components/containers/PanelHeader.js
index f7463c81c..e08c60244 100644
--- a/src/components/containers/PanelHeader.js
+++ b/src/components/containers/PanelHeader.js
@@ -17,13 +17,7 @@ class PanelHeader extends Component {
 
   render() {
     const {localize: _} = this.context;
-    const {
-      children,
-      addAction,
-      allowCollapse,
-      toggleFolds,
-      hasOpen,
-    } = this.props;
+    const {children, addAction, allowCollapse, toggleFolds, hasOpen} = this.props;
 
     // dropdown is styled with same styles as react-select component - see _dropdown.scss
     const icon = <PlusIcon />;
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index 87d6253f5..2281dd718 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -11,10 +11,7 @@ class PanelErrorImpl extends Component {
     const {localize: _} = this.context;
 
     return (
-      <PanelEmpty
-        icon={EmbedIconIcon}
-        heading={_('Well this is embarrassing.')}
-      >
+      <PanelEmpty icon={EmbedIconIcon} heading={_('Well this is embarrassing.')}>
         <p>{_('This panel could not be displayed due to an error.')}</p>
       </PanelEmpty>
     );
@@ -50,18 +47,14 @@ export class Panel extends Component {
 
   toggleFolds() {
     const {individualFoldStates} = this.state;
-    const hasOpen =
-      individualFoldStates.length > 0 &&
-      individualFoldStates.some(s => s !== true);
+    const hasOpen = individualFoldStates.length > 0 && individualFoldStates.some(s => s !== true);
     this.setState({
       individualFoldStates: individualFoldStates.map(() => hasOpen),
     });
   }
 
   toggleFold(index) {
-    this.setState(
-      update(this.state, {individualFoldStates: {$toggle: [index]}})
-    );
+    this.setState(update(this.state, {individualFoldStates: {$toggle: [index]}}));
   }
 
   calculateFolds() {
@@ -69,10 +62,7 @@ export class Panel extends Component {
     let numFolds = 0;
 
     React.Children.forEach(this.props.children, child => {
-      if (
-        ((child && child.type && child.type.plotly_editor_traits) || {})
-          .foldable
-      ) {
+      if (((child && child.type && child.type.plotly_editor_traits) || {}).foldable) {
         numFolds++;
       }
     });
@@ -101,32 +91,22 @@ export class Panel extends Component {
       return <PanelError />;
     }
 
-    const newChildren = React.Children.map(
-      this.props.children,
-      (child, index) => {
-        if (
-          ((child && child.type && child.type.plotly_editor_traits) || {})
-            .foldable
-        ) {
-          return cloneElement(child, {
-            key: index,
-            folded: individualFoldStates[index] || false,
-            toggleFold: () => this.toggleFold(index),
-          });
-        }
-        return child;
+    const newChildren = React.Children.map(this.props.children, (child, index) => {
+      if (((child && child.type && child.type.plotly_editor_traits) || {}).foldable) {
+        return cloneElement(child, {
+          key: index,
+          folded: individualFoldStates[index] || false,
+          toggleFold: () => this.toggleFold(index),
+        });
       }
-    );
+      return child;
+    });
 
     return (
-      <div
-        className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}
-      >
+      <div className={`panel${this.props.noPadding ? ' panel--no-padding' : ''}`}>
         <PanelHeader
           addAction={this.props.addAction}
-          allowCollapse={
-            this.props.showExpandCollapse && individualFoldStates.length > 1
-          }
+          allowCollapse={this.props.showExpandCollapse && individualFoldStates.length > 1}
           toggleFolds={this.toggleFolds}
           hasOpen={individualFoldStates.some(s => s === false)}
         />
diff --git a/src/components/containers/RangeSelectorAccordion.js b/src/components/containers/RangeSelectorAccordion.js
index 5747c06f8..940799ec1 100644
--- a/src/components/containers/RangeSelectorAccordion.js
+++ b/src/components/containers/RangeSelectorAccordion.js
@@ -29,12 +29,7 @@ class RangeSelectorAccordion extends Component {
     const content =
       buttons.length &&
       buttons.map((btn, i) => (
-        <RangeSelectorFold
-          key={i}
-          rangeselectorIndex={i}
-          name={btn.label}
-          canDelete={true}
-        >
+        <RangeSelectorFold key={i} rangeselectorIndex={i} name={btn.label} canDelete={true}>
           {children}
         </RangeSelectorFold>
       ));
@@ -44,9 +39,7 @@ class RangeSelectorAccordion extends Component {
       handler: context => {
         const {fullContainer, updateContainer} = context;
         if (updateContainer) {
-          const rangeselectorIndex = Array.isArray(
-            fullContainer.rangeselector.buttons
-          )
+          const rangeselectorIndex = Array.isArray(fullContainer.rangeselector.buttons)
             ? fullContainer.rangeselector.buttons.length
             : 0;
 
@@ -57,11 +50,7 @@ class RangeSelectorAccordion extends Component {
       },
     };
 
-    return (
-      <PlotlyPanel addAction={addAction}>
-        {content ? content : null}
-      </PlotlyPanel>
-    );
+    return <PlotlyPanel addAction={addAction}>{content ? content : null}</PlotlyPanel>;
   }
 }
 
diff --git a/src/components/containers/SubplotAccordion.js b/src/components/containers/SubplotAccordion.js
index c93e26359..e7f3924fd 100644
--- a/src/components/containers/SubplotAccordion.js
+++ b/src/components/containers/SubplotAccordion.js
@@ -25,19 +25,13 @@ class SubplotAccordion extends Component {
         const xaxis = 'xaxis' + (curVal.xaxis ? curVal.xaxis.substring(1) : '');
         const yaxis = 'yaxis' + (curVal.yaxis ? curVal.yaxis.substring(1) : '');
 
-        const existingComboIndex = acc.findIndex(
-          t => t.xaxis === xaxis && t.yaxis === yaxis
-        );
+        const existingComboIndex = acc.findIndex(t => t.xaxis === xaxis && t.yaxis === yaxis);
         if (existingComboIndex === -1) {
           acc.push({
             xaxis: xaxis,
             yaxis: yaxis,
-            xaxisName: curVal.xaxis
-              ? getSubplotTitle(curVal.xaxis, 'x', _)
-              : 'X 1',
-            yaxisName: curVal.yaxis
-              ? getSubplotTitle(curVal.yaxis, 'y', _)
-              : 'Y 1',
+            xaxisName: curVal.xaxis ? getSubplotTitle(curVal.xaxis, 'x', _) : 'X 1',
+            yaxisName: curVal.yaxis ? getSubplotTitle(curVal.yaxis, 'y', _) : 'Y 1',
             index: [inx],
           });
         } else {
@@ -97,13 +91,8 @@ class SubplotAccordion extends Component {
           subplotName = getSubplotTitle(layoutKey, subplotType, _);
           const trIndex =
             SUBPLOT_TO_ATTR[subplotType].layout === layoutKey
-              ? data.findIndex(trace =>
-                  TRACE_TO_AXIS[subplotType].some(tt => tt === trace.type)
-                )
-              : data.findIndex(
-                  trace =>
-                    trace[SUBPLOT_TO_ATTR[subplotType].data] === layoutKey
-                );
+              ? data.findIndex(trace => TRACE_TO_AXIS[subplotType].some(tt => tt === trace.type))
+              : data.findIndex(trace => trace[SUBPLOT_TO_ATTR[subplotType].data] === layoutKey);
           if (trIndex !== -1) {
             traceIndexes.push(trIndex);
           }
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 216f1a863..0db578da2 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -23,8 +23,7 @@ class TraceAccordion extends Component {
   setLocals(props, context) {
     // we don't want to include analysis transforms when we're in the create panel
     const base = props.canGroup ? context.fullData : context.data;
-    const traceFilterCondition =
-      this.props.traceFilterCondition || (() => true);
+    const traceFilterCondition = this.props.traceFilterCondition || (() => true);
 
     this.filteredTracesIndexes = [];
     this.filteredTraces = base.filter((t, i) => {
@@ -56,9 +55,7 @@ class TraceAccordion extends Component {
       }
 
       dataArrayPositionsByTraceType[traceType].push(trace.index);
-      fullDataArrayPositionsByTraceType[traceType].push(
-        this.filteredTracesIndexes[index]
-      );
+      fullDataArrayPositionsByTraceType[traceType].push(this.filteredTracesIndexes[index]);
     });
 
     return Object.keys(fullDataArrayPositionsByTraceType).map((type, index) => (
@@ -114,20 +111,12 @@ class TraceAccordion extends Component {
         },
       };
 
-      return (
-        <PlotlyPanel addAction={addAction}>
-          {this.renderTraceFolds()}
-        </PlotlyPanel>
-      );
+      return <PlotlyPanel addAction={addAction}>{this.renderTraceFolds()}</PlotlyPanel>;
     }
 
     if (canGroup) {
       if (this.filteredTraces.length === 1) {
-        return (
-          <TraceRequiredPanel>
-            {this.renderUngroupedTraceFolds()}
-          </TraceRequiredPanel>
-        );
+        return <TraceRequiredPanel>{this.renderUngroupedTraceFolds()}</TraceRequiredPanel>;
       }
 
       if (this.filteredTraces.length > 1) {
diff --git a/src/components/containers/TraceMarkerSection.js b/src/components/containers/TraceMarkerSection.js
index f227a3de0..88d5de2cf 100644
--- a/src/components/containers/TraceMarkerSection.js
+++ b/src/components/containers/TraceMarkerSection.js
@@ -25,9 +25,7 @@ class TraceMarkerSection extends Component {
   }
 
   render() {
-    return (
-      <PlotlySection name={this.name}>{this.props.children}</PlotlySection>
-    );
+    return <PlotlySection name={this.name}>{this.props.children}</PlotlySection>;
   }
 }
 
diff --git a/src/components/containers/TraceRequiredPanel.js b/src/components/containers/TraceRequiredPanel.js
index 5d95583f7..ad03bcf41 100644
--- a/src/components/containers/TraceRequiredPanel.js
+++ b/src/components/containers/TraceRequiredPanel.js
@@ -19,14 +19,10 @@ class TraceRequiredPanel extends Component {
     return this.hasTrace() ? (
       <LayoutPanel {...rest}>{children}</LayoutPanel>
     ) : (
-      <PanelEmpty
-        heading={_("Looks like there aren't any traces defined yet.")}
-      >
+      <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
         <p>
           {_('Go to the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Create')}>
-            {_('Create')}
-          </a>
+          <a onClick={() => this.context.setPanel('Graph', 'Create')}>{_('Create')}</a>
           {_(' panel to define traces.')}
         </p>
       </PanelEmpty>
diff --git a/src/components/containers/TransformAccordion.js b/src/components/containers/TransformAccordion.js
index d64eb8122..9b6f528b4 100644
--- a/src/components/containers/TransformAccordion.js
+++ b/src/components/containers/TransformAccordion.js
@@ -29,18 +29,12 @@ class TransformAccordion extends Component {
         let foldNameSuffix = '';
         if (tr.groupssrc) {
           const groupssrc =
-            dataSourceOptions &&
-            dataSourceOptions.find(d => d.value === tr.groupssrc);
-          foldNameSuffix = `: ${
-            groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc
-          }`;
+            dataSourceOptions && dataSourceOptions.find(d => d.value === tr.groupssrc);
+          foldNameSuffix = `: ${groupssrc && groupssrc.label ? groupssrc.label : tr.groupssrc}`;
         } else if (tr.targetsrc) {
           const targetsrc =
-            dataSourceOptions &&
-            dataSourceOptions.find(d => d.value === tr.targetsrc);
-          foldNameSuffix = `: ${
-            targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc
-          }`;
+            dataSourceOptions && dataSourceOptions.find(d => d.value === tr.targetsrc);
+          foldNameSuffix = `: ${targetsrc && targetsrc.label ? targetsrc.label : tr.targetsrc}`;
         }
         return foldNameSuffix;
       });
@@ -52,9 +46,8 @@ class TransformAccordion extends Component {
         <TransformFold
           key={i}
           transformIndex={i}
-          name={`${
-            transformTypes.filter(({type}) => type === tr.type)[0].label
-          }${transformBy && transformBy[i]}`}
+          name={`${transformTypes.filter(({type}) => type === tr.type)[0].label}${transformBy &&
+            transformBy[i]}`}
           canDelete={true}
         >
           {children}
@@ -64,8 +57,7 @@ class TransformAccordion extends Component {
     // cannot have 2 Split transforms on one trace:
     // https://github.com/plotly/plotly.js/issues/1742
     const addActionOptions =
-      container.transforms &&
-      container.transforms.some(t => t.type === 'groupby')
+      container.transforms && container.transforms.some(t => t.type === 'groupby')
         ? transformTypes.filter(t => t.type !== 'groupby')
         : transformTypes;
 
@@ -102,11 +94,7 @@ class TransformAccordion extends Component {
       }),
     };
 
-    return (
-      <PlotlyPanel addAction={addAction}>
-        {content ? content : null}
-      </PlotlyPanel>
-    );
+    return <PlotlyPanel addAction={addAction}>{content ? content : null}</PlotlyPanel>;
   }
 }
 
diff --git a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
index 18006e997..d306aefb9 100644
--- a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
+++ b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
@@ -70,8 +70,7 @@ describe('Basic PlotlySection rules', () => {
         </TestEditor>
       );
 
-      it('HIDES PlotlySection', () =>
-        expect(wrapper.find('div.section').length).toEqual(0));
+      it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
     });
 
@@ -86,8 +85,7 @@ describe('Basic PlotlySection rules', () => {
         </TestEditor>
       );
 
-      it('HIDES PlotlySection', () =>
-        expect(wrapper.find('div.section').length).toEqual(0));
+      it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
     });
   });
@@ -104,8 +102,7 @@ describe('Basic PlotlySection rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS PlotlySection', () =>
-        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
       it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
     });
 
@@ -121,8 +118,7 @@ describe('Basic PlotlySection rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS PlotlySection', () =>
-        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
       it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
     });
@@ -141,8 +137,7 @@ describe('Basic PlotlyFold rules', () => {
           </LayoutPanel>
         </TestEditor>
       );
-      it('SHOWS PlotlyFold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
     });
 
@@ -157,8 +152,7 @@ describe('Basic PlotlyFold rules', () => {
         </TestEditor>
       );
 
-      it('HIDES PlotlyFold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(0));
+      it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
     });
   });
@@ -175,8 +169,7 @@ describe('Basic PlotlyFold rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS PlotlyFold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
     });
 
@@ -194,12 +187,9 @@ describe('Basic PlotlyFold rules', () => {
               </LayoutPanel>
             </TestEditor>
           );
-          it('HIDES PlotlyFold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(0));
-          it('HIDES PlotlySection', () =>
-            expect(wrapper.find('div.section').length).toEqual(0));
-          it('HIDES div', () =>
-            expect(wrapper.find('#thediv').length).toEqual(0));
+          it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
         });
 
         describe('Field-with-visible-attr', () => {
@@ -214,12 +204,9 @@ describe('Basic PlotlyFold rules', () => {
               </LayoutPanel>
             </TestEditor>
           );
-          it('HIDES PlotlyFold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(0));
-          it('HIDES PlotlySection', () =>
-            expect(wrapper.find('div.section').length).toEqual(0));
-          it('HIDES Field', () =>
-            expect(wrapper.find('input').length).toEqual(0));
+          it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
         });
 
         describe('Field-with-invisible-attr', () => {
@@ -235,12 +222,9 @@ describe('Basic PlotlyFold rules', () => {
             </TestEditor>
           );
 
-          it('HIDES PlotlyFold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(0));
-          it('HIDES PlotlySection', () =>
-            expect(wrapper.find('div.section').length).toEqual(0));
-          it('HIDES Field', () =>
-            expect(wrapper.find('input').length).toEqual(0));
+          it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
         });
       });
     });
@@ -259,12 +243,9 @@ describe('Basic PlotlyFold rules', () => {
           </TestEditor>
         );
 
-        it('HIDES PlotlyFold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(0));
-        it('HIDES inner PlotlyPanel', () =>
-          expect(wrapper.find('div.panel').length).toEqual(1));
-        it('HIDES Field', () =>
-          expect(wrapper.find('input').length).toEqual(0));
+        it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES inner PlotlyPanel', () => expect(wrapper.find('div.panel').length).toEqual(1));
+        it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
       });
     });
 
@@ -282,12 +263,9 @@ describe('Basic PlotlyFold rules', () => {
           </TestEditor>
         );
 
-        it('HIDES PlotlyFold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(0));
-        it('HIDES Info', () =>
-          expect(wrapper.find('.js-test-info').length).toEqual(0));
-        it('HIDES Field', () =>
-          expect(wrapper.find('input').length).toEqual(0));
+        it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES Info', () => expect(wrapper.find('.js-test-info').length).toEqual(0));
+        it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
       });
     });
 
@@ -305,12 +283,9 @@ describe('Basic PlotlyFold rules', () => {
           </TestEditor>
         );
 
-        it('SHOWS PlotlyFold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(1));
-        it('SHOWS PlotlySection', () =>
-          expect(wrapper.find('div.section').length).toEqual(1));
-        it('HIDES Field', () =>
-          expect(wrapper.find('input').length).toEqual(0));
+        it('SHOWS PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
+        it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
       });
 
       describe('PlotlySection-with-invisible-attr', () => {
@@ -326,12 +301,9 @@ describe('Basic PlotlyFold rules', () => {
           </TestEditor>
         );
 
-        it('HIDES PlotlyFold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(0));
-        it('HIDES PlotlySection', () =>
-          expect(wrapper.find('div.section').length).toEqual(0));
-        it('HIDES Field', () =>
-          expect(wrapper.find('input').length).toEqual(0));
+        it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
+        it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
       });
     });
   });
@@ -351,10 +323,8 @@ describe('Other ways to force PlotlyFold visibility', () => {
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
 
@@ -373,13 +343,10 @@ describe('Other ways to force PlotlyFold visibility', () => {
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-    it('shows Field in PlotlySection', () =>
-      expect(wrapper.find('input').length).toEqual(2));
+    it('shows Field in PlotlySection', () => expect(wrapper.find('input').length).toEqual(2));
   });
 
   describe('adding a Field with invisible attr will hide PlotlyFold', () => {
@@ -396,12 +363,9 @@ describe('Other ways to force PlotlyFold visibility', () => {
       </TestEditor>
     );
 
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field in PlotlySection', () =>
-      expect(wrapper.find('input').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES Field in PlotlySection', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
@@ -423,8 +387,7 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
       </TestEditor>
     );
 
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
 
@@ -442,8 +405,7 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 
@@ -462,8 +424,7 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
       </TestEditor>
     );
 
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
@@ -486,10 +447,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection',
       </TestEditor>
     );
 
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
 
@@ -509,10 +468,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection',
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 
@@ -533,10 +490,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection',
       </TestEditor>
     );
 
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES PlotlyFold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
@@ -562,10 +517,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold
       </TestEditor>
     );
 
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows 2 PlotlyFolds', () => expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
 
@@ -585,10 +538,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows 2 PlotlyFolds', () => expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
 
@@ -609,10 +560,8 @@ describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold
       </TestEditor>
     );
 
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows 2 PlotlyFolds', () => expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
diff --git a/src/components/containers/__tests__/Layout-test.js b/src/components/containers/__tests__/Layout-test.js
index 611154cf9..6620b3a91 100644
--- a/src/components/containers/__tests__/Layout-test.js
+++ b/src/components/containers/__tests__/Layout-test.js
@@ -6,9 +6,7 @@ import {TestEditor, fixtures} from 'lib/test-utils';
 import {connectLayoutToPlot} from 'lib';
 import {mount} from 'enzyme';
 
-const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(
-  connectLayoutToPlot
-);
+const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectLayoutToPlot);
 const Editor = props => <TestEditor {...{onUpdate: jest.fn(), ...props}} />;
 
 Layouts.forEach(Layout => {
diff --git a/src/components/containers/__tests__/PlotlySection-test.js b/src/components/containers/__tests__/PlotlySection-test.js
index 75f8dbf7a..f14e4b617 100644
--- a/src/components/containers/__tests__/PlotlySection-test.js
+++ b/src/components/containers/__tests__/PlotlySection-test.js
@@ -16,10 +16,7 @@ describe('PlotlySection', () => {
         <TraceSection name="test-section" traceIndexes={[0]}>
           <Flaglist
             attr="mode"
-            options={[
-              {label: 'Lines', value: 'lines'},
-              {label: 'Points', value: 'markers'},
-            ]}
+            options={[{label: 'Lines', value: 'lines'}, {label: 'Points', value: 'markers'}]}
           />
           <Numeric attr="hole" min={0} max={1} step={0.1} />
         </TraceSection>
@@ -76,17 +73,10 @@ describe('TraceTypeSection', () => {
     const TraceSection = connectTraceToPlot(TraceTypeSection);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection
-          name="test-section"
-          traceIndexes={[0]}
-          traceTypes={['scatter']}
-        >
+        <TraceSection name="test-section" traceIndexes={[0]} traceTypes={['scatter']}>
           <Flaglist
             attr="mode"
-            options={[
-              {label: 'Lines', value: 'lines'},
-              {label: 'Points', value: 'markers'},
-            ]}
+            options={[{label: 'Lines', value: 'lines'}, {label: 'Points', value: 'markers'}]}
           />
         </TraceSection>
       </TestEditor>
@@ -99,17 +89,10 @@ describe('TraceTypeSection', () => {
     const TraceSection = connectTraceToPlot(TraceTypeSection);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <TraceSection
-          name="test-section"
-          traceIndexes={[0]}
-          traceTypes={['heatmap']}
-        >
+        <TraceSection name="test-section" traceIndexes={[0]} traceTypes={['heatmap']}>
           <Flaglist
             attr="mode"
-            options={[
-              {label: 'Lines', value: 'lines'},
-              {label: 'Points', value: 'markers'},
-            ]}
+            options={[{label: 'Lines', value: 'lines'}, {label: 'Points', value: 'markers'}]}
           />
         </TraceSection>
       </TestEditor>
diff --git a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
index 186191eb1..fc172067d 100644
--- a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
+++ b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
@@ -132,8 +132,7 @@ describe('Basic Section rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS PlotlySection', () =>
-        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
       it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
     });
   });
@@ -151,8 +150,7 @@ describe('Basic Fold rules', () => {
           </Panel>
         </TestEditor>
       );
-      it('SHOWS Fold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('HIDES Field because it has no context', () =>
         expect(wrapper.find('input').length).toEqual(0));
     });
@@ -168,8 +166,7 @@ describe('Basic Fold rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS Fold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
     });
 
@@ -184,8 +181,7 @@ describe('Basic Fold rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS Fold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
     });
 
@@ -200,8 +196,7 @@ describe('Basic Fold rules', () => {
         </TestEditor>
       );
 
-      it('SHOWS Fold', () =>
-        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
       it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
     });
 
@@ -219,12 +214,9 @@ describe('Basic Fold rules', () => {
               </Panel>
             </TestEditor>
           );
-          it('SHOWS Fold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(1));
-          it('SHOWS PlotlySection', () =>
-            expect(wrapper.find('div.section').length).toEqual(1));
-          it('SHOWS div', () =>
-            expect(wrapper.find('#thediv').length).toEqual(1));
+          it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+          it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
+          it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
         });
 
         describe('Field-with-visible-attr', () => {
@@ -239,12 +231,9 @@ describe('Basic Fold rules', () => {
               </LayoutPanel>
             </TestEditor>
           );
-          it('SHOWS Fold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(1));
-          it('SHOWS PlotlySection', () =>
-            expect(wrapper.find('div.section').length).toEqual(1));
-          it('SHOWS Field', () =>
-            expect(wrapper.find('input').length).toEqual(1));
+          it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+          it('SHOWS PlotlySection', () => expect(wrapper.find('div.section').length).toEqual(1));
+          it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
         });
 
         describe('Field-with-invisible-attr', () => {
@@ -260,12 +249,10 @@ describe('Basic Fold rules', () => {
             </TestEditor>
           );
 
-          it('SHOWS Fold', () =>
-            expect(wrapper.find('div.fold').length).toEqual(1));
+          it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
           it('HIDES PlotlySection because Plotly Section visibility rules apply', () =>
             expect(wrapper.find('div.section').length).toEqual(0));
-          it('HIDES Field', () =>
-            expect(wrapper.find('input').length).toEqual(0));
+          it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
         });
       });
     });
@@ -284,12 +271,9 @@ describe('Basic Fold rules', () => {
           </TestEditor>
         );
 
-        it('SHOWS Fold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(1));
-        it('SHOWS PlotlyPanel', () =>
-          expect(wrapper.find('div.panel').length).toEqual(2));
-        it('SHOWS Field', () =>
-          expect(wrapper.find('input').length).toEqual(1));
+        it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS PlotlyPanel', () => expect(wrapper.find('div.panel').length).toEqual(2));
+        it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
       });
     });
 
@@ -305,10 +289,8 @@ describe('Basic Fold rules', () => {
           </TestEditor>
         );
 
-        it('SHOWS Fold', () =>
-          expect(wrapper.find('div.fold').length).toEqual(1));
-        it('SHOWS Info', () =>
-          expect(wrapper.find('.js-test-info').length).toEqual(1));
+        it('SHOWS Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS Info', () => expect(wrapper.find('.js-test-info').length).toEqual(1));
       });
     });
   });
diff --git a/src/components/containers/derived.js b/src/components/containers/derived.js
index 14ced08d5..2a2608f28 100644
--- a/src/components/containers/derived.js
+++ b/src/components/containers/derived.js
@@ -13,14 +13,10 @@ const TraceTypeSection = (props, context) => {
   const {mode, traceTypes} = props;
 
   const ifConnectedToTrace =
-    mode === 'trace' &&
-    fullContainer &&
-    traceTypes.includes(fullContainer.type);
+    mode === 'trace' && fullContainer && traceTypes.includes(fullContainer.type);
 
   const ifConnectedToLayout =
-    mode === 'layout' &&
-    fullData &&
-    fullData.some(t => traceTypes.includes(t.type));
+    mode === 'layout' && fullData && fullData.some(t => traceTypes.includes(t.type));
 
   if (ifConnectedToTrace || ifConnectedToLayout) {
     return <PlotlySection {...props} />;
diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index 76b0eb37a..10958ed9a 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -5,12 +5,7 @@ import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
-import {
-  connectToContainer,
-  traceTypeToAxisType,
-  getAxisTitle,
-  axisIdToAxisName,
-} from 'lib';
+import {connectToContainer, traceTypeToAxisType, getAxisTitle, axisIdToAxisName} from 'lib';
 import {PlotlySection} from 'components';
 
 class UnconnectedAxisCreator extends Component {
@@ -28,8 +23,7 @@ class UnconnectedAxisCreator extends Component {
       onUpdate,
       fullLayout: {_subplots: subplots},
     } = this.context;
-    const lastAxisNumber =
-      Number(subplots[attr][subplots[attr].length - 1].charAt(1)) || 1;
+    const lastAxisNumber = Number(subplots[attr][subplots[attr].length - 1].charAt(1)) || 1;
 
     updateContainer({
       [attr]: attr.charAt(0) + (lastAxisNumber + 1),
@@ -47,9 +41,7 @@ class UnconnectedAxisCreator extends Component {
       payload: {
         update: {
           [`${attr + (lastAxisNumber + 1)}.side`]: side,
-          [`${attr + (lastAxisNumber + 1)}.overlaying`]: !(
-            attr === 'yaxis' || attr === 'xaxis'
-          )
+          [`${attr + (lastAxisNumber + 1)}.overlaying`]: !(attr === 'yaxis' || attr === 'xaxis')
             ? null
             : subplots[attr][subplots[attr].length - 1],
         },
@@ -66,8 +58,7 @@ class UnconnectedAxisCreator extends Component {
       currentAxisId !== update &&
       !this.context.fullData.some(
         trace =>
-          trace[this.props.attr] === currentAxisId &&
-          trace.index !== this.props.fullContainer.index
+          trace[this.props.attr] === currentAxisId && trace.index !== this.props.fullContainer.index
       )
     ) {
       axesToBeGarbageCollected.push(currentAxisId);
@@ -86,11 +77,7 @@ class UnconnectedAxisCreator extends Component {
   render() {
     const icon = <PlusIcon />;
     const extraComponent = this.canAddAxis() ? (
-      <Button
-        variant="no-text"
-        icon={icon}
-        onClick={() => this.addAndUpdateAxis()}
-      />
+      <Button variant="no-text" icon={icon} onClick={() => this.addAndUpdateAxis()} />
     ) : (
       <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
     );
@@ -131,8 +118,7 @@ class UnconnectedAxesCreator extends Component {
   render() {
     const axisType = traceTypeToAxisType(this.props.container.type);
     const isFirstTraceOfAxisType =
-      this.context.data.filter(d => traceTypeToAxisType(d.type) === axisType)
-        .length === 1;
+      this.context.data.filter(d => traceTypeToAxisType(d.type) === axisType).length === 1;
 
     if (isFirstTraceOfAxisType) {
       return null;
@@ -166,9 +152,7 @@ class UnconnectedAxesCreator extends Component {
         {controls}
         <Info>
           {_('You can style and position your axes in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>
-            {_('Subplots')}
-          </a>
+          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>
diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js
index 8f208c634..4f06a7895 100644
--- a/src/components/fields/AxesSelector.js
+++ b/src/components/fields/AxesSelector.js
@@ -10,19 +10,12 @@ class AxesSelector extends Component {
     const {localize: _} = context;
 
     if (!context.axesTargetHandler) {
-      throw new Error(
-        _('AxesSelector must be nested within a connectAxesToPlot component')
-      );
+      throw new Error(_('AxesSelector must be nested within a connectAxesToPlot component'));
     }
   }
 
   render() {
-    const {
-      axesTargetHandler,
-      axesTarget,
-      fullLayout,
-      localize: _,
-    } = this.context;
+    const {axesTargetHandler, axesTarget, fullLayout, localize: _} = this.context;
     const {axesOptions} = this.props;
     const maxCharsThatFitInRadio = 27;
     const maxOptions = axesOptions.length > 4; // eslint-disable-line
@@ -45,9 +38,7 @@ class AxesSelector extends Component {
       : axesOptions;
 
     const totalCharsInOptions =
-      (options &&
-        options.map(o => o.label).reduce((acc, o) => acc + o.length, 0)) ||
-      0;
+      (options && options.map(o => o.label).reduce((acc, o) => acc + o.length, 0)) || 0;
 
     return maxOptions || totalCharsInOptions >= maxCharsThatFitInRadio ? (
       <Field {...this.props} label={_('Axis to Style')}>
diff --git a/src/components/fields/ColorscalePicker.js b/src/components/fields/ColorscalePicker.js
index e0080b6eb..cd0ce32e0 100644
--- a/src/components/fields/ColorscalePicker.js
+++ b/src/components/fields/ColorscalePicker.js
@@ -27,9 +27,7 @@ export class UnconnectedColorscalePicker extends Component {
 
   render() {
     const {fullValue} = this.props;
-    const colorscale = Array.isArray(fullValue)
-      ? fullValue.map(v => v[1])
-      : null;
+    const colorscale = Array.isArray(fullValue) ? fullValue.map(v => v[1]) : null;
 
     return (
       <Field {...this.props}>
diff --git a/src/components/fields/DataSelector.js b/src/components/fields/DataSelector.js
index 29e928477..fa3a1cfdd 100644
--- a/src/components/fields/DataSelector.js
+++ b/src/components/fields/DataSelector.js
@@ -61,28 +61,15 @@ export class UnconnectedDataSelector extends Component {
     let data;
 
     if (Array.isArray(value)) {
-      data = value
-        .filter(v => Array.isArray(this.dataSources[v]))
-        .map(v => this.dataSources[v]);
+      data = value.filter(v => Array.isArray(this.dataSources[v])).map(v => this.dataSources[v]);
     } else {
       data = this.dataSources[value] || null;
     }
 
-    update[this.props.attr] = maybeTransposeData(
-      data,
-      this.srcAttr,
-      this.props.container.type
-    );
-    update[this.srcAttr] = maybeAdjustSrc(
-      value,
-      this.srcAttr,
-      this.props.container.type,
-      {
-        fromSrc: this.context.srcConverters
-          ? this.context.srcConverters.fromSrc
-          : null,
-      }
-    );
+    update[this.props.attr] = maybeTransposeData(data, this.srcAttr, this.props.container.type);
+    update[this.srcAttr] = maybeAdjustSrc(value, this.srcAttr, this.props.container.type, {
+      fromSrc: this.context.srcConverters ? this.context.srcConverters.fromSrc : null,
+    });
 
     this.props.updateContainer(update);
   }
@@ -111,9 +98,7 @@ export class UnconnectedDataSelector extends Component {
           optionRenderer={this.context.dataSourceOptionRenderer}
           valueRenderer={this.context.dataSourceValueRenderer}
           clearable={true}
-          placeholder={
-            this.hasData ? 'Data inlined in figure' : 'Choose data...'
-          }
+          placeholder={this.hasData ? 'Data inlined in figure' : 'Choose data...'}
           disabled={this.dataSourceOptions.length === 0}
         />
       </Field>
@@ -143,8 +128,7 @@ UnconnectedDataSelector.contextTypes = {
 function modifyPlotProps(props, context, plotProps) {
   if (
     attributeIsData(plotProps.attrMeta) &&
-    (context.container &&
-      TRANSFORMS_LIST.indexOf(context.container.type) === -1)
+    (context.container && TRANSFORMS_LIST.indexOf(context.container.type) === -1)
   ) {
     plotProps.isVisible = true;
   }
diff --git a/src/components/fields/DropdownCustom.js b/src/components/fields/DropdownCustom.js
index 73ab194f8..96df0b023 100644
--- a/src/components/fields/DropdownCustom.js
+++ b/src/components/fields/DropdownCustom.js
@@ -28,8 +28,7 @@ class UnconnectedDropdownCustom extends Component {
 
   setLocals(props) {
     this.value =
-      props.fullValue === undefined || // eslint-disable-line no-undefined
-      props.fullValue === MULTI_VALUED_PLACEHOLDER
+      props.fullValue === undefined || props.fullValue === MULTI_VALUED_PLACEHOLDER // eslint-disable-line no-undefined
         ? this.props.defaultOpt
         : props.fullValue;
   }
@@ -40,16 +39,14 @@ class UnconnectedDropdownCustom extends Component {
       custom: (custom || value === this.props.customOpt) && value !== '',
     });
     this.props.updateContainer({
-      [this.props.attr]:
-        value === this.props.customOpt && !custom ? 'custom' : value,
+      [this.props.attr]: value === this.props.customOpt && !custom ? 'custom' : value,
     });
   }
 
   render() {
     const {options, attr} = this.props;
     const value =
-      (this.value === '' || !options.map(o => o.value).includes(this.value)) &&
-      this.state.custom
+      (this.value === '' || !options.map(o => o.value).includes(this.value)) && this.state.custom
         ? 'custom'
         : this.value;
 
@@ -86,16 +83,8 @@ UnconnectedDropdownCustom.propTypes = {
   fullValue: PropTypes.any,
   updatePlot: PropTypes.func,
   clearable: PropTypes.bool,
-  defaultOpt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.string,
-  ]),
-  customOpt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.string,
-  ]),
+  defaultOpt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string]),
+  customOpt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string]),
   label: PropTypes.string,
   attr: PropTypes.string,
   ...Field.propTypes,
diff --git a/src/components/fields/DualNumeric.js b/src/components/fields/DualNumeric.js
index 7c02bd21c..ce406ddc7 100644
--- a/src/components/fields/DualNumeric.js
+++ b/src/components/fields/DualNumeric.js
@@ -24,9 +24,7 @@ export class UnconnectedDualNumericFraction extends Component {
 
   render() {
     const {percentage, multiValued, attr2, step, min, max} = this.props;
-    let fullValue = percentage
-      ? Math.round(100 * this.props.fullValue)
-      : this.props.fullValue;
+    let fullValue = percentage ? Math.round(100 * this.props.fullValue) : this.props.fullValue;
     let fullValue2 = nestedProperty(this.context.fullContainer, attr2).get();
     if (percentage) {
       fullValue2 = Math.round(100 * fullValue2);
diff --git a/src/components/fields/ErrorBars.js b/src/components/fields/ErrorBars.js
index e2d5fe165..9095851c2 100644
--- a/src/components/fields/ErrorBars.js
+++ b/src/components/fields/ErrorBars.js
@@ -45,8 +45,7 @@ class ErrorBars extends Component {
 
     if (
       this.props.fullValue.visible &&
-      (this.props.fullValue.symmetric ||
-        typeof this.props.fullValue.symmetric === 'undefined')
+      (this.props.fullValue.symmetric || typeof this.props.fullValue.symmetric === 'undefined')
     ) {
       // when this.props.fullValue.type === 'sqrt',
       // then this.props.fullValue.symmetric is undefined, but 'sqrt' is only
@@ -55,10 +54,7 @@ class ErrorBars extends Component {
       mode = 'symmetric';
     }
 
-    if (
-      this.props.fullValue.visible &&
-      this.props.fullValue.symmetric === false
-    ) {
+    if (this.props.fullValue.visible && this.props.fullValue.symmetric === false) {
       // it has to be explicitly set to false, because we don't want it to catch
       // cases when it's undefined
       mode = 'asymmetric';
@@ -96,28 +92,16 @@ class ErrorBars extends Component {
         <Radio
           label={_('Copy Y Style')}
           attr={`${this.props.attr}.copy_ystyle`}
-          options={[
-            {label: _('Yes'), value: true},
-            {label: _('No'), value: false},
-          ]}
+          options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
         />
         <Radio
           label={_('Copy Z Style')}
           attr={`${this.props.attr}.copy_zstyle`}
-          options={[
-            {label: _('Yes'), value: true},
-            {label: _('No'), value: false},
-          ]}
-        />
-        <MultiColorPicker
-          label={_('Color')}
-          attr={`${this.props.attr}.color`}
+          options={[{label: _('Yes'), value: true}, {label: _('No'), value: false}]}
         />
+        <MultiColorPicker label={_('Color')} attr={`${this.props.attr}.color`} />
         <Numeric label={_('Thickness')} attr={`${this.props.attr}.thickness`} />
-        <Numeric
-          label={_('Crossbar Width')}
-          attr={`${this.props.attr}.width`}
-        />
+        <Numeric label={_('Crossbar Width')} attr={`${this.props.attr}.width`} />
       </Fragment>
     );
 
@@ -136,10 +120,7 @@ class ErrorBars extends Component {
           />
           <Numeric label={_('Value')} attr={`${this.props.attr}.value`} />
           {showCustomDataControl ? (
-            <DataSelector
-              label={_('Custom Data')}
-              attr={`${this.props.attr}.array`}
-            />
+            <DataSelector label={_('Custom Data')} attr={`${this.props.attr}.array`} />
           ) : null}
           {styleAttrs}
         </Fragment>
@@ -159,20 +140,11 @@ class ErrorBars extends Component {
             ]}
           />
           <Numeric label={_('Value')} attr={`${this.props.attr}.value`} />
-          <Numeric
-            label={_('Value (-)')}
-            attr={`${this.props.attr}.valueminus`}
-          />
+          <Numeric label={_('Value (-)')} attr={`${this.props.attr}.valueminus`} />
           {showCustomDataControl ? (
             <Fragment>
-              <DataSelector
-                label={_('Error (+)')}
-                attr={`${this.props.attr}.array`}
-              />
-              <DataSelector
-                label={_('Error (-)')}
-                attr={`${this.props.attr}.arrayminus`}
-              />
+              <DataSelector label={_('Error (+)')} attr={`${this.props.attr}.array`} />
+              <DataSelector label={_('Error (-)')} attr={`${this.props.attr}.arrayminus`} />
             </Fragment>
           ) : null}
           {styleAttrs}
diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js
index 749ec2895..a91bec8bb 100644
--- a/src/components/fields/Field.js
+++ b/src/components/fields/Field.js
@@ -45,8 +45,7 @@ class Field extends Component {
 
     let tooltip = this.context.attr;
     if (this.context.description) {
-      tooltip +=
-        ' – ' + this.context.description.replace(/`/g, '"').replace(/\*/g, '"');
+      tooltip += ' – ' + this.context.description.replace(/`/g, '"').replace(/\*/g, '"');
     }
 
     const containerClassName = classnames(bem('field'), {
@@ -78,9 +77,7 @@ class Field extends Component {
             <MenuPanel label={getMultiValueText('title', _)} ownline question>
               <div className="info__title">{getMultiValueText('title', _)}</div>
               <div className="info__text">{getMultiValueText('text', _)}</div>
-              <div className="info__sub-text">
-                {getMultiValueText('subText', _)}
-              </div>
+              <div className="info__sub-text">{getMultiValueText('subText', _)}</div>
             </MenuPanel>
           ) : null}
           {extraComponent ? extraComponent : null}
diff --git a/src/components/fields/FilterOperation.js b/src/components/fields/FilterOperation.js
index 8389a7a91..a154de697 100644
--- a/src/components/fields/FilterOperation.js
+++ b/src/components/fields/FilterOperation.js
@@ -34,10 +34,7 @@ const findOperation = (operator, _) => {
   let op = 'inequality';
   const ops = operations(_);
   for (const key in ops) {
-    if (
-      ops.hasOwnProperty(key) &&
-      ops[key].map(o => o.value).indexOf(operator) !== -1
-    ) {
+    if (ops.hasOwnProperty(key) && ops[key].map(o => o.value).indexOf(operator) !== -1) {
       op = key;
       break;
     }
@@ -66,14 +63,7 @@ class UnconnectedFilterOperation extends Component {
   }
 
   render() {
-    const {
-      fullValue,
-      updatePlot,
-      optionRenderer,
-      valueRenderer,
-      backgroundDark,
-      attr,
-    } = this.props;
+    const {fullValue, updatePlot, optionRenderer, valueRenderer, backgroundDark, attr} = this.props;
     const {localize: _} = this.context;
 
     const operators = [
@@ -99,8 +89,7 @@ class UnconnectedFilterOperation extends Component {
       },
     ];
 
-    const opValue =
-      fullValue && fullValue.length > 0 ? fullValue : this.state.operator;
+    const opValue = fullValue && fullValue.length > 0 ? fullValue : this.state.operator;
     return (
       <div>
         <Field {...this.props} attr={attr}>
@@ -113,8 +102,7 @@ class UnconnectedFilterOperation extends Component {
             optionRenderer={optionRenderer}
             valueRenderer={valueRenderer}
           />
-          {this.state.operation === 'inset' ||
-          this.state.operation === 'exset' ? null : (
+          {this.state.operation === 'inset' || this.state.operation === 'exset' ? null : (
             <DropdownWidget
               backgroundDark={backgroundDark}
               options={operations(_)[this.state.operation]}
@@ -171,8 +159,7 @@ class UnconnectedFilterValue extends Component {
   render() {
     const {localize: _, container} = this.context;
 
-    const operation =
-      container && container.operation ? container.operation : '=';
+    const operation = container && container.operation ? container.operation : '=';
 
     const {fullValue, attr, defaultValue} = this.props;
     const op = findOperation(operation, _);
@@ -194,11 +181,7 @@ class UnconnectedFilterValue extends Component {
     return (
       <div>
         <Field {...this.props} label={label1}>
-          <TextInput
-            value={val1}
-            defaultValue={val1}
-            onUpdate={this.setValue}
-          />
+          <TextInput value={val1} defaultValue={val1} onUpdate={this.setValue} />
         </Field>
         {!(op === 'inrange' || op === 'exrange') ? null : (
           <Field {...this.props} label={_('Upper Bound')} attr={attr}>
diff --git a/src/components/fields/FontSelector.js b/src/components/fields/FontSelector.js
index b5488345f..94237dc53 100644
--- a/src/components/fields/FontSelector.js
+++ b/src/components/fields/FontSelector.js
@@ -3,9 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 /* eslint-disable react/prop-types */
-const styledRenderer = ({value, label}) => (
-  <span style={{fontFamily: value}}>{label}</span>
-);
+const styledRenderer = ({value, label}) => <span style={{fontFamily: value}}>{label}</span>;
 /* eslint-enable react/prop-types */
 
 const FontSelector = (props, context) => {
diff --git a/src/components/fields/LineSelectors.js b/src/components/fields/LineSelectors.js
index b833f2897..62e6b53aa 100644
--- a/src/components/fields/LineSelectors.js
+++ b/src/components/fields/LineSelectors.js
@@ -44,8 +44,7 @@ const computeOptions = (strokeData, stroke) =>
         d={d}
         style={{
           ...strokeStyle,
-          stroke:
-            !stroke || stroke === MULTI_VALUED ? COLORS.mutedBlue : stroke,
+          stroke: !stroke || stroke === MULTI_VALUED ? COLORS.mutedBlue : stroke,
           strokeDasharray,
         }}
       />
@@ -54,12 +53,7 @@ const computeOptions = (strokeData, stroke) =>
   }));
 
 export const LineShapeSelector = props => {
-  return (
-    <LineSelector
-      {...props}
-      computeOptions={computeOptions.bind(null, strokeShapes)}
-    />
-  );
+  return <LineSelector {...props} computeOptions={computeOptions.bind(null, strokeShapes)} />;
 };
 
 export const LineDashSelector = props => {
diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js
index ee3fe9a2e..e054ce2ad 100644
--- a/src/components/fields/MarkerColor.js
+++ b/src/components/fields/MarkerColor.js
@@ -17,10 +17,7 @@ class UnconnectedMarkerColor extends Component {
     super(props, context);
 
     let type = null;
-    if (
-      !props.container.marker ||
-      (props.container.marker && !props.container.marker.colorsrc)
-    ) {
+    if (!props.container.marker || (props.container.marker && !props.container.marker.colorsrc)) {
       type = 'constant';
     } else if (
       props.container.marker &&
@@ -37,16 +34,13 @@ class UnconnectedMarkerColor extends Component {
         constant: type === 'constant' ? props.fullValue : COLORS.mutedBlue,
         variable: type === 'variable' ? props.fullValue : null,
       },
-      selectedConstantColorOption:
-        type === 'constant' && props.multiValued ? 'multiple' : 'single',
+      selectedConstantColorOption: type === 'constant' && props.multiValued ? 'multiple' : 'single',
     };
 
     this.setType = this.setType.bind(this);
     this.setColor = this.setColor.bind(this);
     this.setColorScale = this.setColorScale.bind(this);
-    this.onConstantColorOptionChange = this.onConstantColorOptionChange.bind(
-      this
-    );
+    this.onConstantColorOptionChange = this.onConstantColorOptionChange.bind(this);
   }
 
   setType(type) {
@@ -74,9 +68,7 @@ class UnconnectedMarkerColor extends Component {
     const {type} = this.state;
 
     this.setState(
-      type === 'constant'
-        ? {value: {constant: inputValue}}
-        : {value: {variable: inputValue}}
+      type === 'constant' ? {value: {constant: inputValue}} : {value: {variable: inputValue}}
     );
     this.props.updatePlot(inputValue);
   }
@@ -89,8 +81,7 @@ class UnconnectedMarkerColor extends Component {
   isMultiValued() {
     return (
       this.props.multiValued ||
-      (Array.isArray(this.props.fullValue) &&
-        this.props.fullValue.includes(MULTI_VALUED)) ||
+      (Array.isArray(this.props.fullValue) && this.props.fullValue.includes(MULTI_VALUED)) ||
       (this.props.container.marker &&
         this.props.container.marker.colorscale &&
         this.props.container.marker.colorscale === MULTI_VALUED) ||
@@ -115,18 +106,12 @@ class UnconnectedMarkerColor extends Component {
     return (
       <MultiColorPicker
         attr="marker.color"
-        multiColorMessage={_(
-          'Each trace will be colored according to the selected colorscale.'
-        )}
-        singleColorMessage={_(
-          'All traces will be colored in the the same color.'
-        )}
+        multiColorMessage={_('Each trace will be colored according to the selected colorscale.')}
+        singleColorMessage={_('All traces will be colored in the the same color.')}
         setColor={this.setColor}
         setColorScale={this.setColorScale}
         onConstantColorOptionChange={this.onConstantColorOptionChange}
-        parentSelectedConstantColorOption={
-          this.state.selectedConstantColorOption
-        }
+        parentSelectedConstantColorOption={this.state.selectedConstantColorOption}
       />
     );
   }
@@ -162,8 +147,7 @@ class UnconnectedMarkerColor extends Component {
     // TO DO: https://github.com/plotly/react-chart-editor/issues/654
     const noSplitsPresent =
       container &&
-      (!container.transforms ||
-        !container.transforms.filter(t => t.type === 'groupby').length);
+      (!container.transforms || !container.transforms.filter(t => t.type === 'groupby').length);
 
     if (noSplitsPresent) {
       const {type} = this.state;
@@ -176,11 +160,7 @@ class UnconnectedMarkerColor extends Component {
         <Fragment>
           <Field {...this.props} attr={attr}>
             <Field multiValued={this.isMultiValued() && !this.state.type}>
-              <RadioBlocks
-                options={options}
-                activeOption={type}
-                onOptionChange={this.setType}
-              />
+              <RadioBlocks options={options} activeOption={type} onOptionChange={this.setType} />
 
               {!type ? null : (
                 <Info>
@@ -202,26 +182,17 @@ class UnconnectedMarkerColor extends Component {
               <Radio
                 label={_('Colorscale Direction')}
                 attr="marker.reversescale"
-                options={[
-                  {label: _('Normal'), value: false},
-                  {label: _('Reversed'), value: true},
-                ]}
+                options={[{label: _('Normal'), value: false}, {label: _('Reversed'), value: true}]}
               />
               <Radio
                 label={_('Color Bar')}
                 attr="marker.showscale"
-                options={[
-                  {label: _('Show'), value: true},
-                  {label: _('Hide'), value: false},
-                ]}
+                options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
               />
               <VisibilitySelect
                 label={_('Colorscale Range')}
                 attr="marker.cauto"
-                options={[
-                  {label: _('Auto'), value: true},
-                  {label: _('Custom'), value: false},
-                ]}
+                options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
                 showOn={false}
                 defaultOpt={true}
               >
diff --git a/src/components/fields/MarkerSize.js b/src/components/fields/MarkerSize.js
index 1a1663907..def878e00 100644
--- a/src/components/fields/MarkerSize.js
+++ b/src/components/fields/MarkerSize.js
@@ -12,10 +12,7 @@ class UnconnectedMarkerSize extends Component {
     super(props, context);
 
     let type = null;
-    if (
-      !props.container.marker ||
-      (props.container.marker && !props.container.marker.sizesrc)
-    ) {
+    if (!props.container.marker || (props.container.marker && !props.container.marker.sizesrc)) {
       type = 'constant';
     } else if (
       props.container.marker &&
@@ -55,9 +52,7 @@ class UnconnectedMarkerSize extends Component {
     const {type} = this.state;
 
     this.setState(
-      type === 'constant'
-        ? {value: {constant: inputValue}}
-        : {value: {variable: inputValue}}
+      type === 'constant' ? {value: {constant: inputValue}} : {value: {variable: inputValue}}
     );
     this.props.updatePlot(inputValue);
   }
@@ -71,16 +66,11 @@ class UnconnectedMarkerSize extends Component {
       {label: _('Variable'), value: 'variable'},
     ];
     const multiValued =
-      this.props.multiValued ||
-      (Array.isArray(fullValue) && fullValue.includes(MULTI_VALUED));
+      this.props.multiValued || (Array.isArray(fullValue) && fullValue.includes(MULTI_VALUED));
 
     return (
       <Field {...this.props} multiValued={multiValued} attr={attr}>
-        <RadioBlocks
-          options={options}
-          activeOption={type}
-          onOptionChange={this.setType}
-        />
+        <RadioBlocks options={options} activeOption={type} onOptionChange={this.setType} />
         {type === 'constant' ? (
           <Numeric
             suppressMultiValuedMessage
@@ -89,11 +79,7 @@ class UnconnectedMarkerSize extends Component {
             fullValue={value.constant}
           />
         ) : multiValued ? null : (
-          <DataSelector
-            suppressMultiValuedMessage
-            attr="marker.size"
-            updatePlot={this.setValue}
-          />
+          <DataSelector suppressMultiValuedMessage attr="marker.size" updatePlot={this.setValue} />
         )}
       </Field>
     );
diff --git a/src/components/fields/MultiColorPicker.js b/src/components/fields/MultiColorPicker.js
index cacc3e279..c0329b807 100644
--- a/src/components/fields/MultiColorPicker.js
+++ b/src/components/fields/MultiColorPicker.js
@@ -54,16 +54,8 @@ class UnconnectedMultiColorPicker extends Component {
       adjustedColors = adjustColorscale(colors, numberOfTraces, colorscaleType);
     }
 
-    if (
-      adjustedColors.every(c => c === adjustedColors[0]) ||
-      colorscaleType === 'categorical'
-    ) {
-      adjustedColors = adjustColorscale(
-        colors,
-        numberOfTraces,
-        colorscaleType,
-        {repeat: true}
-      );
+    if (adjustedColors.every(c => c === adjustedColors[0]) || colorscaleType === 'categorical') {
+      adjustedColors = adjustColorscale(colors, numberOfTraces, colorscaleType, {repeat: true});
     }
 
     const updates = adjustedColors.map(color => ({
@@ -79,8 +71,7 @@ class UnconnectedMultiColorPicker extends Component {
       {label: _('Single'), value: 'single'},
       {label: _('Multiple'), value: 'multiple'},
     ];
-    const selectedConstantColorOption = this.props
-      .parentSelectedConstantColorOption
+    const selectedConstantColorOption = this.props.parentSelectedConstantColorOption
       ? this.props.parentSelectedConstantColorOption
       : this.state.selectedConstantColorOption;
 
@@ -108,17 +99,11 @@ class UnconnectedMultiColorPicker extends Component {
                 : value => this.setState({selectedConstantColorOption: value})
             }
           />
-          <Info>
-            {selectedConstantColorOption === 'single'
-              ? singleMessage
-              : multiMessage}
-          </Info>
+          <Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
           {selectedConstantColorOption === 'single' ? (
             <ColorPicker
               attr={this.props.attr}
-              updatePlot={
-                this.props.setColor ? this.props.setColor : this.setColor
-              }
+              updatePlot={this.props.setColor ? this.props.setColor : this.setColor}
             />
           ) : (
             <CustomColorscalePicker
@@ -177,9 +162,7 @@ export default connectToContainer(UnconnectedMultiColorPicker, {
       });
 
       dedupedTraceIndexes.forEach(traceIndex => {
-        const traces = context.fullData.filter(
-          trace => trace.index === traceIndex
-        );
+        const traces = context.fullData.filter(trace => trace.index === traceIndex);
         tracesToColor = tracesToColor.concat(traces);
 
         traces.forEach(t => {
diff --git a/src/components/fields/PieColorscalePicker.js b/src/components/fields/PieColorscalePicker.js
index 59c44b7c7..15fdb4e27 100644
--- a/src/components/fields/PieColorscalePicker.js
+++ b/src/components/fields/PieColorscalePicker.js
@@ -13,12 +13,9 @@ class UnconnectedPieColorscalePicker extends Component {
   onUpdate(colorscale, colorscaleType) {
     if (Array.isArray(colorscale)) {
       const numPieSlices = this.context.graphDiv.calcdata[0].length + 1;
-      const adjustedColorscale = adjustColorscale(
-        colorscale,
-        numPieSlices,
-        colorscaleType,
-        {repeat: true}
-      );
+      const adjustedColorscale = adjustColorscale(colorscale, numPieSlices, colorscaleType, {
+        repeat: true,
+      });
       this.props.updatePlot(adjustedColorscale);
     }
   }
diff --git a/src/components/fields/RectanglePositioner.js b/src/components/fields/RectanglePositioner.js
index d473e22e7..f092c2c63 100644
--- a/src/components/fields/RectanglePositioner.js
+++ b/src/components/fields/RectanglePositioner.js
@@ -28,9 +28,7 @@ class UnconnectedRectanglePositioner extends Component {
     const y0 = (fieldHeightPx - (height + y)) / fieldHeightPx;
     const y1 = (fieldHeightPx - y) / fieldHeightPx;
 
-    const snap = this.state.snap
-      ? v => Math.round(v * gridRes) / gridRes
-      : v => v;
+    const snap = this.state.snap ? v => Math.round(v * gridRes) / gridRes : v => v;
 
     const payload = {};
 
@@ -85,10 +83,7 @@ class UnconnectedRectanglePositioner extends Component {
             alignment="center"
             onOptionChange={snap => this.setState({snap: snap})}
             activeOption={this.state.snap}
-            options={[
-              {label: _('On'), value: true},
-              {label: _('Off'), value: false},
-            ]}
+            options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
           />
         </Field>
         <div
@@ -107,8 +102,7 @@ class UnconnectedRectanglePositioner extends Component {
                 style={{
                   width: fieldWidthPx / gridRes - 1,
                   height: fieldHeightPx / gridRes - 1,
-                  borderBottom:
-                    i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
+                  borderBottom: i < gridRes * (gridRes - 1) ? '0' : '1px solid ',
                   borderRight: (i + 1) % gridRes ? '0' : '1px solid',
                 }}
               />
diff --git a/src/components/fields/SubplotCreator.js b/src/components/fields/SubplotCreator.js
index c016d4bbb..007c1f1ab 100644
--- a/src/components/fields/SubplotCreator.js
+++ b/src/components/fields/SubplotCreator.js
@@ -35,9 +35,7 @@ class UnconnectedSingleSubplotCreator extends Component {
   }
 
   updateSubplot(update) {
-    const currentSubplotId = this.props.fullContainer[
-      SUBPLOT_TO_ATTR[this.props.attr].data
-    ];
+    const currentSubplotId = this.props.fullContainer[SUBPLOT_TO_ATTR[this.props.attr].data];
     let subplotToBeGarbageCollected = null;
 
     // When we select another subplot, make sure no unused axes are left
@@ -65,11 +63,7 @@ class UnconnectedSingleSubplotCreator extends Component {
   render() {
     const icon = <PlusIcon />;
     const extraComponent = this.canAddAxis() ? (
-      <Button
-        variant="no-text"
-        icon={icon}
-        onClick={() => this.addAndUpdateSubplot()}
-      />
+      <Button variant="no-text" icon={icon} onClick={() => this.addAndUpdateSubplot()} />
     ) : (
       <Button variant="no-text--disabled" icon={icon} onClick={() => {}} />
     );
@@ -105,24 +99,17 @@ UnconnectedSingleSubplotCreator.contextTypes = {
   onUpdate: PropTypes.func,
 };
 
-const SingleSubplotCreator = connectToContainer(
-  UnconnectedSingleSubplotCreator
-);
+const SingleSubplotCreator = connectToContainer(UnconnectedSingleSubplotCreator);
 
 class UnconnectedSubplotCreator extends Component {
   render() {
     const subplotType = traceTypeToAxisType(this.props.container.type);
-    if (
-      !['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(
-        t => t === subplotType
-      )
-    ) {
+    if (!['geo', 'mapbox', 'polar', 'gl3d', 'ternary'].some(t => t === subplotType)) {
       return null;
     }
 
     const isFirstTraceOfAxisType =
-      this.context.data.filter(d => traceTypeToAxisType(d.type) === subplotType)
-        .length === 1;
+      this.context.data.filter(d => traceTypeToAxisType(d.type) === subplotType).length === 1;
     if (isFirstTraceOfAxisType) {
       return null;
     }
@@ -146,9 +133,7 @@ class UnconnectedSubplotCreator extends Component {
         />
         <Info>
           {_('You can style and position your subplots in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>
-            {_('Subplots')}
-          </a>
+          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>
diff --git a/src/components/fields/SymbolSelector.js b/src/components/fields/SymbolSelector.js
index 731bc9731..d2b59f6bb 100644
--- a/src/components/fields/SymbolSelector.js
+++ b/src/components/fields/SymbolSelector.js
@@ -190,13 +190,11 @@ const SYMBOLS = [
 
   {
     value: 'octagon',
-    label:
-      'M-1.92,-4.62H1.92L4.62,-1.92V1.92L1.92,4.62H-1.92L-4.62,1.92V-1.92Z',
+    label: 'M-1.92,-4.62H1.92L4.62,-1.92V1.92L1.92,4.62H-1.92L-4.62,1.92V-1.92Z',
   },
   {
     value: 'octagon-open',
-    label:
-      'M-1.92,-4.62H1.92L4.62,-1.92V1.92L1.92,4.62H-1.92L-4.62,1.92V-1.92Z',
+    label: 'M-1.92,-4.62H1.92L4.62,-1.92V1.92L1.92,4.62H-1.92L-4.62,1.92V-1.92Z',
     fill: 'none',
   },
 
@@ -229,25 +227,21 @@ const SYMBOLS = [
 
   {
     value: 'star-triangle-up',
-    label:
-      'M-6.93,4A 20,20 0 0 1 6.93,4A 20,20 0 0 1 0,-8A 20,20 0 0 1 -6.93,4Z',
+    label: 'M-6.93,4A 20,20 0 0 1 6.93,4A 20,20 0 0 1 0,-8A 20,20 0 0 1 -6.93,4Z',
   },
   {
     value: 'star-triangle-up-open',
-    label:
-      'M-6.93,4A 20,20 0 0 1 6.93,4A 20,20 0 0 1 0,-8A 20,20 0 0 1 -6.93,4Z',
+    label: 'M-6.93,4A 20,20 0 0 1 6.93,4A 20,20 0 0 1 0,-8A 20,20 0 0 1 -6.93,4Z',
     fill: 'none',
   },
 
   {
     value: 'star-triangle-down',
-    label:
-      'M6.93,-4A 20,20 0 0 1 -6.93,-4A 20,20 0 0 1 0,8A 20,20 0 0 1 6.93,-4Z',
+    label: 'M6.93,-4A 20,20 0 0 1 -6.93,-4A 20,20 0 0 1 0,8A 20,20 0 0 1 6.93,-4Z',
   },
   {
     value: 'star-triangle-down-open',
-    label:
-      'M6.93,-4A 20,20 0 0 1 -6.93,-4A 20,20 0 0 1 0,8A 20,20 0 0 1 6.93,-4Z',
+    label: 'M6.93,-4A 20,20 0 0 1 -6.93,-4A 20,20 0 0 1 0,8A 20,20 0 0 1 6.93,-4Z',
     fill: 'none',
   },
 
@@ -265,13 +259,11 @@ const SYMBOLS = [
 
   {
     value: 'star-diamond',
-    label:
-      'M-7,0A 9.5,9.5 0 0 1 0,7A 9.5,9.5 0 0 1 7,0A 9.5,9.5 0 0 1 0,-7A 9.5,9.5 0 0 1 -7,0Z',
+    label: 'M-7,0A 9.5,9.5 0 0 1 0,7A 9.5,9.5 0 0 1 7,0A 9.5,9.5 0 0 1 0,-7A 9.5,9.5 0 0 1 -7,0Z',
   },
   {
     value: 'star-diamond-open',
-    label:
-      'M-7,0A 9.5,9.5 0 0 1 0,7A 9.5,9.5 0 0 1 7,0A 9.5,9.5 0 0 1 0,-7A 9.5,9.5 0 0 1 -7,0Z',
+    label: 'M-7,0A 9.5,9.5 0 0 1 0,7A 9.5,9.5 0 0 1 7,0A 9.5,9.5 0 0 1 0,-7A 9.5,9.5 0 0 1 -7,0Z',
     fill: 'none',
   },
 
@@ -373,27 +365,17 @@ class SymbolSelector extends Component {
     if (this.markerColor === MULTI_VALUED) {
       this.markerColor = nestedProperty(defaultContainer, 'marker.color').get();
     }
-    this.markerColor = Array.isArray(this.markerColor)
-      ? COLORS.mutedBlue
-      : this.markerColor;
+    this.markerColor = Array.isArray(this.markerColor) ? COLORS.mutedBlue : this.markerColor;
 
     this.borderColor = this.markerColor;
     if (this.borderWidth) {
-      this.borderColor = nestedProperty(
-        fullContainer,
-        'marker.line.color'
-      ).get();
+      this.borderColor = nestedProperty(fullContainer, 'marker.line.color').get();
       if (this.borderColor === MULTI_VALUED) {
-        this.borderColor = nestedProperty(
-          defaultContainer,
-          'marker.line.color'
-        ).get();
+        this.borderColor = nestedProperty(defaultContainer, 'marker.line.color').get();
       }
     }
 
-    this.borderColor = Array.isArray(this.borderColor)
-      ? COLORS.charcoal
-      : this.borderColor;
+    this.borderColor = Array.isArray(this.borderColor) ? COLORS.charcoal : this.borderColor;
 
     if (this.props.is3D) {
       this.symbolOptions = SYMBOLS.filter(option => {
diff --git a/src/components/fields/TextEditor.js b/src/components/fields/TextEditor.js
index 13831cc5f..a85008401 100644
--- a/src/components/fields/TextEditor.js
+++ b/src/components/fields/TextEditor.js
@@ -33,38 +33,14 @@ class UnconnectedTextEditor extends Component {
 
     if (latexOnly) {
       placeholder = _('Enter LaTeX formatted text');
-      editor = (
-        <LaTeX
-          value={fullValue}
-          placeholder={placeholder}
-          onChange={updatePlot}
-        />
-      );
+      editor = <LaTeX value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
     } else if (richTextOnly) {
-      editor = (
-        <RichText
-          value={fullValue}
-          placeholder={placeholder}
-          onChange={updatePlot}
-        />
-      );
+      editor = <RichText value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
     } else if (htmlOnly) {
       placeholder = _('Enter html formatted text');
-      editor = (
-        <HTML
-          value={fullValue}
-          placeholder={placeholder}
-          onChange={updatePlot}
-        />
-      );
+      editor = <HTML value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
     } else {
-      editor = (
-        <MultiFormat
-          value={fullValue}
-          placeholder={placeholder}
-          onChange={updatePlot}
-        />
-      );
+      editor = <MultiFormat value={fullValue} placeholder={placeholder} onChange={updatePlot} />;
     }
 
     return (
diff --git a/src/components/fields/TraceSelector.js b/src/components/fields/TraceSelector.js
index ec11a5e3d..b920e64a7 100644
--- a/src/components/fields/TraceSelector.js
+++ b/src/components/fields/TraceSelector.js
@@ -7,18 +7,12 @@ import {
   plotlyTraceToCustomTrace,
   computeTraceOptionsFromSchema,
 } from 'lib';
-import {
-  TraceTypeSelector,
-  TraceTypeSelectorButton,
-  RadioBlocks,
-} from 'components/widgets';
+import {TraceTypeSelector, TraceTypeSelectorButton, RadioBlocks} from 'components/widgets';
 import Field from './Field';
 import {CogIcon} from 'plotly-icons';
 
 export const glAvailable = type => {
-  return ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'].includes(
-    type
-  );
+  return ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'].includes(type);
 };
 
 class TraceSelector extends Component {
@@ -31,20 +25,14 @@ class TraceSelector extends Component {
     this.setTraceDefaults = this.setTraceDefaults.bind(this);
     this.toggleGlControls = this.toggleGlControls.bind(this);
 
-    this.setTraceDefaults(
-      props.container,
-      props.fullContainer,
-      props.updateContainer
-    );
+    this.setTraceDefaults(props.container, props.fullContainer, props.updateContainer);
     this.setLocals(props, context);
 
     this.state = {showGlControls: false};
   }
 
   glEnabled() {
-    return this.props.container.type && this.props.container.type.endsWith('gl')
-      ? 'gl'
-      : '';
+    return this.props.container.type && this.props.container.type.endsWith('gl') ? 'gl' : '';
   }
 
   toggleGlControls() {
@@ -58,11 +46,7 @@ class TraceSelector extends Component {
     } else if (context.traceTypesConfig) {
       this.traceOptions = context.traceTypesConfig.traces(_);
     } else if (context.plotSchema) {
-      this.traceOptions = computeTraceOptionsFromSchema(
-        context.plotSchema,
-        _,
-        this.context
-      );
+      this.traceOptions = computeTraceOptionsFromSchema(context.plotSchema, _, this.context);
     } else {
       this.traceOptions = [{label: _('Scatter'), value: 'scatter'}];
     }
@@ -74,8 +58,7 @@ class TraceSelector extends Component {
   setTraceDefaults(container, fullContainer, updateContainer, gl) {
     if (container && !container.mode && fullContainer.type === 'scatter') {
       updateContainer({
-        type:
-          'scatter' + (gl || this.context.glByDefault ? gl : this.glEnabled()),
+        type: 'scatter' + (gl || this.context.glByDefault ? gl : this.glEnabled()),
         mode: fullContainer.mode || 'markers',
       });
     }
@@ -91,9 +74,7 @@ class TraceSelector extends Component {
     const {updateContainer} = this.props;
     const {glByDefault} = this.context;
     if (updateContainer) {
-      updateContainer(
-        traceTypeToPlotlyInitFigure(value, this.glEnabled() || glByDefault)
-      );
+      updateContainer(traceTypeToPlotlyInitFigure(value, this.glEnabled() || glByDefault));
     }
   }
 
@@ -120,10 +101,7 @@ class TraceSelector extends Component {
     });
     const {localize: _, advancedTraceTypeSelector} = this.context;
 
-    const options = [
-      {label: _('SVG'), value: ''},
-      {label: _('WebGL'), value: 'gl'},
-    ];
+    const options = [{label: _('SVG'), value: ''}, {label: _('WebGL'), value: 'gl'}];
 
     // Check and see if the advanced selector prop is true
     if (advancedTraceTypeSelector) {
@@ -150,16 +128,11 @@ class TraceSelector extends Component {
               {!glAvailable(this.props.container.type) ? (
                 ''
               ) : (
-                <CogIcon
-                  className="menupanel__icon"
-                  onClick={this.toggleGlControls}
-                />
+                <CogIcon className="menupanel__icon" onClick={this.toggleGlControls} />
               )}
             </div>
           </Field>
-          {!(
-            glAvailable(this.props.container.type) && this.state.showGlControls
-          ) ? (
+          {!(glAvailable(this.props.container.type) && this.state.showGlControls) ? (
             ''
           ) : (
             <Field label={_('Rendering')}>
diff --git a/src/components/fields/UpdateMenuButtons.js b/src/components/fields/UpdateMenuButtons.js
index b08447edd..3edf503b5 100644
--- a/src/components/fields/UpdateMenuButtons.js
+++ b/src/components/fields/UpdateMenuButtons.js
@@ -33,10 +33,7 @@ class UpdateMenuButtons extends Component {
     return (
       <Field>
         {this.renderDropdown()}
-        <TextEditor
-          attr={`buttons[${this.state.currentButtonIndex}].label`}
-          richTextOnly
-        />
+        <TextEditor attr={`buttons[${this.state.currentButtonIndex}].label`} richTextOnly />
       </Field>
     );
   }
diff --git a/src/components/fields/VisibilitySelect.js b/src/components/fields/VisibilitySelect.js
index dac047d64..12513928a 100644
--- a/src/components/fields/VisibilitySelect.js
+++ b/src/components/fields/VisibilitySelect.js
@@ -22,8 +22,7 @@ class UnconnectedVisibilitySelect extends Component {
 
   setLocals(props) {
     this.mode =
-      props.fullValue === undefined || // eslint-disable-line no-undefined
-      props.fullValue === MULTI_VALUED_PLACEHOLDER
+      props.fullValue === undefined || props.fullValue === MULTI_VALUED_PLACEHOLDER // eslint-disable-line no-undefined
         ? this.props.defaultOpt
         : props.fullValue;
   }
@@ -55,8 +54,7 @@ class UnconnectedVisibilitySelect extends Component {
             updatePlot={this.setMode}
           />
         )}
-        {(Array.isArray(showOn) && showOn.includes(this.mode)) ||
-        this.mode === showOn
+        {(Array.isArray(showOn) && showOn.includes(this.mode)) || this.mode === showOn
           ? this.props.children
           : null}
       </Fragment>
@@ -75,11 +73,7 @@ UnconnectedVisibilitySelect.propTypes = {
     PropTypes.string,
     PropTypes.array,
   ]),
-  defaultOpt: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.bool,
-    PropTypes.string,
-  ]),
+  defaultOpt: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string]),
   label: PropTypes.string,
   attr: PropTypes.string,
   ...Field.propTypes,
diff --git a/src/components/fields/__tests__/AnnotationRef-test.js b/src/components/fields/__tests__/AnnotationRef-test.js
index 2308dadf1..40f016858 100644
--- a/src/components/fields/__tests__/AnnotationRef-test.js
+++ b/src/components/fields/__tests__/AnnotationRef-test.js
@@ -5,9 +5,7 @@ import {PlotlyPanel} from '../../';
 import {TestEditor, fixtures, plotly, mount} from 'lib/test-utils';
 import {connectAnnotationToLayout, connectLayoutToPlot} from 'lib';
 
-const LayoutAnnoPanel = connectLayoutToPlot(
-  connectAnnotationToLayout(PlotlyPanel)
-);
+const LayoutAnnoPanel = connectLayoutToPlot(connectAnnotationToLayout(PlotlyPanel));
 
 describe('<AnnotationRef>', () => {
   function render(props) {
@@ -38,9 +36,7 @@ describe('<AnnotationRef>', () => {
     const fixtureProps = fixtures.scatter({
       layout: {annotations: [{text: 'thor', ayref: 'y'}]},
     });
-    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(
-      DropdownWidget
-    );
+    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(DropdownWidget);
 
     drop.prop('onChange')('y2');
 
@@ -56,9 +52,7 @@ describe('<AnnotationRef>', () => {
     const fixtureProps = fixtures.scatter({
       layout: {annotations: [{text: 'thor', ayref: 'y'}]},
     });
-    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(
-      DropdownWidget
-    );
+    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(DropdownWidget);
 
     drop.prop('onChange')('paper');
     const {update} = beforeUpdateLayout.mock.calls[0][0];
@@ -72,9 +66,7 @@ describe('<AnnotationRef>', () => {
     const fixtureProps = fixtures.scatter({
       layout: {annotations: [{text: 'thor', yref: 'y', ayref: 'pixel'}]},
     });
-    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(
-      DropdownWidget
-    );
+    const drop = render({beforeUpdateLayout, ...fixtureProps}).find(DropdownWidget);
 
     drop.prop('onChange')('y2');
     const {update} = beforeUpdateLayout.mock.calls[0][0];
diff --git a/src/components/fields/__tests__/DataSelector-test.js b/src/components/fields/__tests__/DataSelector-test.js
index 805a293d6..1c0c2fc3e 100644
--- a/src/components/fields/__tests__/DataSelector-test.js
+++ b/src/components/fields/__tests__/DataSelector-test.js
@@ -62,11 +62,7 @@ describe('DataSelector', () => {
     const TraceDataSelector = connectTraceToPlot(DataSelector);
     const wrapper = render(
       {},
-      <TraceDataSelector
-        traceIndexes={[0]}
-        label={{pie: 'hodor', '*': 'rodoh'}}
-        attr="x"
-      />
+      <TraceDataSelector traceIndexes={[0]} label={{pie: 'hodor', '*': 'rodoh'}} attr="x" />
     );
     expect(wrapper.find('.field__title-text').text()).toContain('rodoh');
   });
diff --git a/src/components/fields/__tests__/Radio-test.js b/src/components/fields/__tests__/Radio-test.js
index 005d01c54..16bff8544 100644
--- a/src/components/fields/__tests__/Radio-test.js
+++ b/src/components/fields/__tests__/Radio-test.js
@@ -16,10 +16,7 @@ describe('<Radio>', () => {
           <Radio
             label="Connect Gaps"
             attr="connectgaps"
-            options={[
-              {label: 'Connect', value: true},
-              {label: 'Blank', value: false},
-            ]}
+            options={[{label: 'Connect', value: true}, {label: 'Blank', value: false}]}
           />
         </Trace>
       </TestEditor>
@@ -36,10 +33,7 @@ describe('<Radio>', () => {
             center={false}
             label="Connect Gaps"
             attr="connectgaps"
-            options={[
-              {label: 'Connect', value: true},
-              {label: 'Blank', value: false},
-            ]}
+            options={[{label: 'Connect', value: true}, {label: 'Blank', value: false}]}
           />
         </Trace>
       </TestEditor>
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index e02f39cd9..332062afe 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -5,12 +5,7 @@ import {UnconnectedNumeric} from './Numeric';
 import {UnconnectedAxisRangeValue} from './AxisRangeValue';
 import {UnconnectedRadio} from './Radio';
 import Info from './Info';
-import {
-  connectToContainer,
-  getAllAxes,
-  getAxisTitle,
-  axisIdToAxisName,
-} from 'lib';
+import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -90,25 +85,16 @@ export const AxisSide = connectToContainer(UnconnectedRadio, {
     const _ = context.localize;
 
     if (plotProps.fullValue === 'left' || plotProps.fullValue === 'right') {
-      plotProps.options = [
-        {label: _('Left'), value: 'left'},
-        {label: _('Right'), value: 'right'},
-      ];
+      plotProps.options = [{label: _('Left'), value: 'left'}, {label: _('Right'), value: 'right'}];
       return;
     }
 
     if (plotProps.fullValue === 'top' || plotProps.fullValue === 'bottom') {
-      plotProps.options = [
-        {label: _('Top'), value: 'top'},
-        {label: _('Bottom'), value: 'bottom'},
-      ];
+      plotProps.options = [{label: _('Top'), value: 'top'}, {label: _('Bottom'), value: 'bottom'}];
       return;
     }
 
-    if (
-      plotProps.fullValue === 'clockwise' ||
-      plotProps.fullValue === 'counterclockwise'
-    ) {
+    if (plotProps.fullValue === 'clockwise' || plotProps.fullValue === 'counterclockwise') {
       plotProps.options = [
         {label: _('Clockwise'), value: 'clockwise'},
         {label: _('Counterclockwise'), value: 'counterclockwise'},
@@ -132,11 +118,7 @@ export const ContourNumeric = connectToContainer(UnconnectedNumeric, {
 export const BinningNumeric = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer} = plotProps;
-    if (
-      plotProps.isVisible &&
-      fullContainer &&
-      fullContainer[`autobin${props.axis}`]
-    ) {
+    if (plotProps.isVisible && fullContainer && fullContainer[`autobin${props.axis}`]) {
       plotProps.isVisible = false;
     }
   },
@@ -174,8 +156,7 @@ export const ShowInLegend = connectToContainer(UnconnectedRadio, {
 export const HistogramInfoVertical = connectToContainer(Info, {
   modifyPlotProps: (props, context, plotProps) => {
     plotProps.isVisible =
-      context.fullContainer.type === 'histogram' &&
-      context.fullContainer.orientation === 'v';
+      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'v';
     return plotProps;
   },
 });
@@ -183,8 +164,7 @@ export const HistogramInfoVertical = connectToContainer(Info, {
 export const HistogramInfoHorizontal = connectToContainer(Info, {
   modifyPlotProps: (props, context, plotProps) => {
     plotProps.isVisible =
-      context.fullContainer.type === 'histogram' &&
-      context.fullContainer.orientation === 'h';
+      context.fullContainer.type === 'histogram' && context.fullContainer.orientation === 'h';
     return plotProps;
   },
 });
@@ -202,11 +182,7 @@ export const AxesRange = connectToContainer(UnconnectedAxisRangeValue, {
 export const NTicks = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
     const {fullContainer} = plotProps;
-    if (
-      plotProps.isVisible &&
-      fullContainer &&
-      fullContainer.tickmode !== 'auto'
-    ) {
+    if (plotProps.isVisible && fullContainer && fullContainer.tickmode !== 'auto') {
       plotProps.isVisible = false;
     }
     return plotProps;
@@ -219,17 +195,12 @@ export const DTicks = connectToContainer(UnconnectedAxisRangeValue, {
     if (
       fullContainer &&
       fullContainer._name &&
-      (fullContainer._name.startsWith('lat') ||
-        fullContainer._name.startsWith('lon'))
+      (fullContainer._name.startsWith('lat') || fullContainer._name.startsWith('lon'))
     ) {
       // don't mess with visibility on geo axes
       return plotProps;
     }
-    if (
-      plotProps.isVisible &&
-      fullContainer &&
-      fullContainer.tickmode !== 'linear'
-    ) {
+    if (plotProps.isVisible && fullContainer && fullContainer.tickmode !== 'linear') {
       plotProps.isVisible = false;
     }
     return plotProps;
@@ -266,48 +237,42 @@ export const NumericFraction = connectToContainer(UnconnectedNumericFraction, {
   modifyPlotProps: numericFractionModifyPlotProps,
 });
 
-export const NumericFractionDomain = connectToContainer(
-  UnconnectedNumericFraction,
-  {
-    modifyPlotProps: (props, context, plotProps) => {
-      numericFractionModifyPlotProps(props, context, plotProps);
-      if (context.container && context.container.overlaying) {
-        plotProps.isVisible = null;
-      }
-    },
-  }
-);
+export const NumericFractionDomain = connectToContainer(UnconnectedNumericFraction, {
+  modifyPlotProps: (props, context, plotProps) => {
+    numericFractionModifyPlotProps(props, context, plotProps);
+    if (context.container && context.container.overlaying) {
+      plotProps.isVisible = null;
+    }
+  },
+});
 
-export const NumericFractionInverse = connectToContainer(
-  UnconnectedNumericFraction,
-  {
-    modifyPlotProps: (props, context, plotProps) => {
-      const {attrMeta, fullValue, updatePlot} = plotProps;
-      if (isNumeric(fullValue)) {
-        plotProps.fullValue = Math.round((1 - fullValue) * 100);
-      }
+export const NumericFractionInverse = connectToContainer(UnconnectedNumericFraction, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {attrMeta, fullValue, updatePlot} = plotProps;
+    if (isNumeric(fullValue)) {
+      plotProps.fullValue = Math.round((1 - fullValue) * 100);
+    }
 
-      plotProps.updatePlot = v => {
-        if (isNumeric(v)) {
-          updatePlot(1 - v / 100);
-        } else {
-          updatePlot(v);
-        }
-      };
+    plotProps.updatePlot = v => {
+      if (isNumeric(v)) {
+        updatePlot(1 - v / 100);
+      } else {
+        updatePlot(v);
+      }
+    };
 
-      // Also take the inverse of max and min.
-      if (attrMeta) {
-        if (isNumeric(attrMeta.min)) {
-          plotProps.max = (1 - attrMeta.min) * 100;
-        }
+    // Also take the inverse of max and min.
+    if (attrMeta) {
+      if (isNumeric(attrMeta.min)) {
+        plotProps.max = (1 - attrMeta.min) * 100;
+      }
 
-        if (isNumeric(attrMeta.max)) {
-          plotProps.min = (1 - attrMeta.max) * 100;
-        }
+      if (isNumeric(attrMeta.max)) {
+        plotProps.min = (1 - attrMeta.max) * 100;
       }
-    },
-  }
-);
+    }
+  },
+});
 
 export const NumericReciprocal = connectToContainer(UnconnectedNumeric, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -394,9 +359,7 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
       currentOffsetRef = ayref;
     } else {
       throw new Error(
-        _(
-          'AnnotationRef must be given either "xref" or "yref" as attrs. Instead was given'
-        ) +
+        _('AnnotationRef must be given either "xref" or "yref" as attrs. Instead was given') +
           props.attr +
           '.'
       );
@@ -484,10 +447,7 @@ function computeAxesRefOptions(axes, propsAttr) {
   const options = [];
   for (let i = 0; i < axes.length; i++) {
     const ax = axes[i];
-    if (
-      ax._id.charAt(0) === propsAttr.charAt(0) ||
-      ax._id.charAt(0) === propsAttr.charAt(1)
-    ) {
+    if (ax._id.charAt(0) === propsAttr.charAt(0) || ax._id.charAt(0) === propsAttr.charAt(1)) {
       const label = getAxisTitle(ax);
       options.push({label, value: ax._id});
     }
@@ -560,24 +520,15 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
     ) {
       options.push({label: _('Z'), value: 'z'});
     } else if (container.type === 'choropleth') {
-      options = [
-        {label: _('Location'), value: 'location'},
-        {label: _('Values'), value: 'z'},
-      ];
+      options = [{label: _('Location'), value: 'location'}, {label: _('Values'), value: 'z'}];
     } else if (container.type === 'scattergeo') {
       if (container.locations) {
         options = [{label: _('Location'), value: 'location'}];
       } else if (container.lat || container.lon) {
-        options = [
-          {label: _('Longitude'), value: 'lon'},
-          {label: _('Latitude'), value: 'lat'},
-        ];
+        options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
       }
     } else if (container.type === 'scattermapbox') {
-      options = [
-        {label: _('Longitude'), value: 'loc'},
-        {label: _('Latitude'), value: 'lat'},
-      ];
+      options = [{label: _('Longitude'), value: 'loc'}, {label: _('Latitude'), value: 'lat'}];
     } else if (container.type === 'scatterternary') {
       options = [
         {label: _('A'), value: 'a'},
@@ -585,10 +536,7 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         {label: _('C'), value: 'c'},
       ];
     } else if (['scatterpolar', 'scatterpolargl'].includes(container.type)) {
-      options = [
-        {label: _('R'), value: 'r'},
-        {label: _('Theta'), value: 'theta'},
-      ];
+      options = [{label: _('R'), value: 'r'}, {label: _('Theta'), value: 'theta'}];
     } else if (container.type === 'pie') {
       options = [
         {label: _('Label'), value: 'label'},
@@ -646,10 +594,7 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
       context.container.type === 'scattergeo' ||
       context.container.type === 'scattermapbox'
     ) {
-      options = [
-        {label: _('None'), value: 'none'},
-        {label: _('To Self'), value: 'toself'},
-      ];
+      options = [{label: _('None'), value: 'none'}, {label: _('To Self'), value: 'toself'}];
     }
 
     plotProps.options = options;
@@ -701,10 +646,7 @@ export const HovermodeDropdown = connectToContainer(UnconnectedDropdown, {
             {label: _('Y Axis'), value: 'y'},
             {label: _('Disable'), value: false},
           ]
-        : [
-            {label: _('Closest'), value: 'closest'},
-            {label: _('Disable'), value: false},
-          ];
+        : [{label: _('Closest'), value: 'closest'}, {label: _('Disable'), value: false}];
     plotProps.clearable = false;
   },
 });
diff --git a/src/components/sidebar/SidebarGroup.js b/src/components/sidebar/SidebarGroup.js
index 93897cddd..86ebac99a 100644
--- a/src/components/sidebar/SidebarGroup.js
+++ b/src/components/sidebar/SidebarGroup.js
@@ -27,8 +27,7 @@ export default class SidebarGroup extends Component {
 
   renderSubItem(panel, i) {
     const isActive =
-      this.props.selectedPanel === panel &&
-      this.props.group === this.props.selectedGroup;
+      this.props.selectedPanel === panel && this.props.group === this.props.selectedGroup;
 
     return (
       <SidebarItem
@@ -50,10 +49,7 @@ export default class SidebarGroup extends Component {
           selectedGroup === group ? 'is-active' : '',
         ])}
       >
-        <div
-          onClick={this.toggleExpanded}
-          className={bem('sidebar__group', 'title')}
-        >
+        <div onClick={this.toggleExpanded} className={bem('sidebar__group', 'title')}>
           <div className={bem('sidebar__group', 'title__icon')}>
             <AngleRightIcon />
           </div>
diff --git a/src/components/sidebar/SidebarItem.js b/src/components/sidebar/SidebarItem.js
index fa31d97a1..847e19aa4 100644
--- a/src/components/sidebar/SidebarItem.js
+++ b/src/components/sidebar/SidebarItem.js
@@ -6,10 +6,7 @@ export default class SidebarItem extends Component {
   render() {
     const {onClick, label, active} = this.props;
     return (
-      <div
-        onClick={onClick}
-        className={bem('sidebar__item', [active ? 'is-active' : ''])}
-      >
+      <div onClick={onClick} className={bem('sidebar__item', [active ? 'is-active' : ''])}>
         <div className={bem('sidebar__item', 'wrapper')}>
           <div className={bem('sidebar__item', 'label')}>{label}</div>
         </div>
diff --git a/src/components/widgets/Button.js b/src/components/widgets/Button.js
index cebe64a63..d4d882708 100644
--- a/src/components/widgets/Button.js
+++ b/src/components/widgets/Button.js
@@ -22,9 +22,7 @@ class Button extends Component {
       classes += ` ${className}`;
     }
 
-    const Icon = icon ? (
-      <div className={bem('button', 'icon')}>{icon}</div>
-    ) : null;
+    const Icon = icon ? <div className={bem('button', 'icon')}>{icon}</div> : null;
 
     return (
       <button className={classes} {...rest}>
diff --git a/src/components/widgets/CheckboxGroup.js b/src/components/widgets/CheckboxGroup.js
index b4bfe6482..9aa2a07c6 100644
--- a/src/components/widgets/CheckboxGroup.js
+++ b/src/components/widgets/CheckboxGroup.js
@@ -36,9 +36,7 @@ class CheckboxGroup extends Component {
       return (
         <div key={i} className={itemClass}>
           <div
-            className={`checkbox__box${
-              option.checked ? ' checkbox__box--checked' : ''
-            }`}
+            className={`checkbox__box${option.checked ? ' checkbox__box--checked' : ''}`}
             onClick={() => this.handleChange(i)}
           >
             {option.checked && (
diff --git a/src/components/widgets/ColorPicker.js b/src/components/widgets/ColorPicker.js
index 84b41d40e..c2ca80580 100644
--- a/src/components/widgets/ColorPicker.js
+++ b/src/components/widgets/ColorPicker.js
@@ -96,19 +96,13 @@ class ColorPicker extends Component {
             />
           </div>
 
-          <div
-            className="colorpicker__selected-color +hover-grey"
-            onClick={this.toggleVisible}
-          >
+          <div className="colorpicker__selected-color +hover-grey" onClick={this.toggleVisible}>
             {colorText}
           </div>
         </div>
 
         {this.state.isVisible && (
-          <CustomColorPicker
-            color={rgbString}
-            onChangeComplete={this.onSelectedColorChange}
-          />
+          <CustomColorPicker color={rgbString} onChangeComplete={this.onSelectedColorChange} />
         )}
       </Fragment>
     );
diff --git a/src/components/widgets/ColorscalePicker.js b/src/components/widgets/ColorscalePicker.js
index f95256e15..515a3cf61 100644
--- a/src/components/widgets/ColorscalePicker.js
+++ b/src/components/widgets/ColorscalePicker.js
@@ -1,7 +1,4 @@
-import ColorscalePicker, {
-  Colorscale,
-  COLOR_PICKER_CONSTANTS,
-} from 'react-colorscales';
+import ColorscalePicker, {Colorscale, COLOR_PICKER_CONSTANTS} from 'react-colorscales';
 import Dropdown from './Dropdown';
 import Info from '../fields/Info';
 import PropTypes from 'prop-types';
@@ -33,14 +30,11 @@ class Scale extends Component {
   render() {
     const {onColorscaleChange, selected} = this.props;
     const {selectedColorscaleType, showColorscalePicker} = this.state;
-    const description =
-      COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType];
-    const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.map(
-      type => ({
-        label: type + ' scales',
-        value: type,
-      })
-    );
+    const description = COLOR_PICKER_CONSTANTS.COLORSCALE_DESCRIPTIONS[selectedColorscaleType];
+    const colorscaleOptions = COLOR_PICKER_CONSTANTS.COLORSCALE_TYPES.map(type => ({
+      label: type + ' scales',
+      value: type,
+    }));
     const _ = this.context.localize;
 
     return (
diff --git a/src/components/widgets/Dropzone.js b/src/components/widgets/Dropzone.js
index 28aa6eb2e..4fa9da2ae 100644
--- a/src/components/widgets/Dropzone.js
+++ b/src/components/widgets/Dropzone.js
@@ -12,9 +12,7 @@ class Dropzone extends Component {
     };
 
     this.validFiletypes = {
-      image: _(
-        'image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp'
-      ),
+      image: _('image/jpeg, image/jpg, image/svg, image/png, image/gif, image/bmp, image/webp'),
     };
 
     this.onDrop = this.onDrop.bind(this);
@@ -26,16 +24,11 @@ class Dropzone extends Component {
 
     if (this.props.fileType === 'image') {
       return (
-        <div
-          className="dropzone-container__image"
-          style={{backgroundImage: `url(${value})`}}
-        />
+        <div className="dropzone-container__image" style={{backgroundImage: `url(${value})`}} />
       );
     }
 
-    return (
-      <div className="dropzone-container__message">{_('File loaded!')}</div>
-    );
+    return <div className="dropzone-container__message">{_('File loaded!')}</div>;
   }
 
   componentWillMount() {
@@ -52,17 +45,13 @@ class Dropzone extends Component {
           <p>
             {_('Drop the ') +
               this.props.fileType +
-              _(
-                ' to upload here or click to choose a file from your computer.'
-              )}
+              _(' to upload here or click to choose a file from your computer.')}
           </p>
 
           {this.props.fileType === 'image' ? (
             <p>
               {_('Supported formats are: ') +
-                this.validFiletypes[this.props.fileType]
-                  .split('image/')
-                  .join('') +
+                this.validFiletypes[this.props.fileType].split('image/').join('') +
                 '.'}
             </p>
           ) : null}
@@ -81,11 +70,7 @@ class Dropzone extends Component {
     const parsingError = (
       <div className="dropzone-container__message">
         <p>{_('Yikes! An error occurred while parsing this file.')}</p>
-        <p>
-          {_('Try again with a supported file format: ') +
-            supportedFileTypes +
-            '.'}
-        </p>
+        <p>{_('Try again with a supported file format: ') + supportedFileTypes + '.'}</p>
       </div>
     );
 
@@ -115,9 +100,7 @@ class Dropzone extends Component {
             <div className="dropzone-container__message">
               <p>{_('Yikes! You can only upload one file at a time.')}</p>
               <p>
-                {_(
-                  'To upload multiple files, create multiple files and upload them individually.'
-                )}
+                {_('To upload multiple files, create multiple files and upload them individually.')}
               </p>
             </div>
           ),
@@ -141,9 +124,7 @@ class Dropzone extends Component {
         content: (
           <div className="dropzone-container__message">
             <p>
-              {_("Yikes! This doesn't look like a valid ") +
-                this.props.fileType +
-                _(' to us. ')}
+              {_("Yikes! This doesn't look like a valid ") + this.props.fileType + _(' to us. ')}
             </p>
             <p>{_('Try again with a ') + supportedFileTypes + ' file.'}</p>
           </div>
diff --git a/src/components/widgets/RadioBlocks.js b/src/components/widgets/RadioBlocks.js
index f90407304..05b1f5e76 100644
--- a/src/components/widgets/RadioBlocks.js
+++ b/src/components/widgets/RadioBlocks.js
@@ -59,22 +59,14 @@ class RadioBlocks extends Component {
 RadioBlocks.propTypes = {
   options: PropTypes.arrayOf(
     PropTypes.shape({
-      value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.bool,
-        PropTypes.number,
-      ]).isRequired,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]).isRequired,
       label: PropTypes.string,
       icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
       disabled: PropTypes.bool,
     })
   ),
   onOptionChange: PropTypes.func.isRequired,
-  activeOption: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.bool,
-    PropTypes.number,
-  ]),
+  activeOption: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
   radioClassName: PropTypes.string,
 
   // One of right, left, center
diff --git a/src/components/widgets/SymbolSelector.js b/src/components/widgets/SymbolSelector.js
index af4128a86..687e170bf 100644
--- a/src/components/widgets/SymbolSelector.js
+++ b/src/components/widgets/SymbolSelector.js
@@ -15,10 +15,7 @@ export default class SymbolSelector extends Component {
 
   shouldComponentUpdate(nextProps, nextState) {
     const {markerColor, borderColor} = this.props;
-    const {
-      markerColor: nextMarkerColor,
-      borderColor: nextBorderColor,
-    } = nextProps;
+    const {markerColor: nextMarkerColor, borderColor: nextBorderColor} = nextProps;
 
     return (
       this.props.value !== nextProps.value ||
@@ -86,12 +83,7 @@ export default class SymbolSelector extends Component {
             this.togglePanel();
           }}
         >
-          <svg
-            width="28"
-            height="28"
-            className="symbol-selector__symbol"
-            data-value={value}
-          >
+          <svg width="28" height="28" className="symbol-selector__symbol" data-value={value}>
             <g transform="translate(14,14)">
               <path d={label} style={symbolStyle} />
             </g>
@@ -110,18 +102,13 @@ export default class SymbolSelector extends Component {
     return (
       <div>
         <div className={toggleClass} onClick={this.togglePanel}>
-          <span className="symbol-selector__toggle_option">
-            {this.renderActiveOption()}
-          </span>
+          <span className="symbol-selector__toggle_option">{this.renderActiveOption()}</span>
           <span>
             <CarretDownIcon className="symbol-selector__toggle__caret" />
           </span>
         </div>
         {isOpen ? (
-          <ModalBox
-            onClose={this.togglePanel}
-            backgroundDark={this.props.backgroundDark}
-          >
+          <ModalBox onClose={this.togglePanel} backgroundDark={this.props.backgroundDark}>
             {this.renderOptions()}
           </ModalBox>
         ) : null}
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index 3501a536e..6f13a3e01 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -3,11 +3,7 @@ import PropTypes from 'prop-types';
 import {SearchIcon, ThumnailViewIcon, GraphIcon} from 'plotly-icons';
 import Modal from 'components/containers/Modal';
 import {glAvailable} from 'components/fields/TraceSelector';
-import {
-  traceTypeToPlotlyInitFigure,
-  renderTraceIcon,
-  plotlyTraceToCustomTrace,
-} from 'lib';
+import {traceTypeToPlotlyInitFigure, renderTraceIcon, plotlyTraceToCustomTrace} from 'lib';
 
 const renderActionItems = (actionItems, item) =>
   actionItems
@@ -208,17 +204,12 @@ export class TraceTypeSelectorButton extends Component {
     const {localize: _} = this.context;
 
     const inferredType = plotlyTraceToCustomTrace(container);
-    const {label, icon, value} = traces(_).find(
-      type => type.value === inferredType
-    );
+    const {label, icon, value} = traces(_).find(type => type.value === inferredType);
 
     const Icon = renderTraceIcon(icon ? icon : value);
 
     return (
-      <div
-        className="trace-type-select-button"
-        onClick={handleClick ? () => handleClick() : null}
-      >
+      <div className="trace-type-select-button" onClick={handleClick ? () => handleClick() : null}>
         <div className="trace-type-select-button__icon">
           <Icon />
         </div>
diff --git a/src/components/widgets/text_editors/MultiFormat.js b/src/components/widgets/text_editors/MultiFormat.js
index b0edf50e3..9b02f354e 100644
--- a/src/components/widgets/text_editors/MultiFormat.js
+++ b/src/components/widgets/text_editors/MultiFormat.js
@@ -3,12 +3,7 @@ import LaTeXEditor from './LaTeX';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import RichTextEditor from './RichText';
-import {
-  isLaTeXExpr,
-  htmlToLaTeX,
-  laTeXToHTML,
-  hasTextExpression,
-} from './convertFormats';
+import {isLaTeXExpr, htmlToLaTeX, laTeXToHTML, hasTextExpression} from './convertFormats';
 import classnames from 'classnames';
 import Button from 'components/widgets/Button';
 
@@ -101,19 +96,13 @@ class MultiFormatTextEditor extends Component {
       (currentTab === 'RICH_TEXT' && nextTab === 'HTML') ||
       (currentTab === 'HTML' && nextTab === 'RICH_TEXT');
 
-    if (
-      !isDefaultValue &&
-      trimmedValueLength > 0 &&
-      !switchingBetweenRichAndHtml
-    ) {
+    if (!isDefaultValue && trimmedValueLength > 0 && !switchingBetweenRichAndHtml) {
       // Show confirmation dialogue and defer tab change.
       let messages;
 
       if (!isLaTeXExpr(value)) {
         messages = [
-          _(
-            "LaTeX is a math typesetting language that doesn't work with rich text."
-          ),
+          _("LaTeX is a math typesetting language that doesn't work with rich text."),
           _('Continuing will convert your note to LaTeX-style text.'),
         ];
       } else if (hasTextExpression(value)) {
@@ -177,9 +166,7 @@ class MultiFormatTextEditor extends Component {
     return (
       <div className="multi-format-editor__confirmation-panel">
         <div className="multi-format-editor__confirmation-panel__content">
-          <h3 className="multi-format-editor__confirmation-panel__header">
-            {_('Heads up!')}
-          </h3>
+          <h3 className="multi-format-editor__confirmation-panel__header">{_('Heads up!')}</h3>
           <div className="multi-format-editor__confirmation-panel__message">
             <p className="multi-format-editor__confirmation-panel__message-primary">
               {messages[0]}
@@ -218,42 +205,26 @@ class MultiFormatTextEditor extends Component {
 
     const {currentTab} = this.state;
 
-    const richTextClassNames = classnames(
-      'multi-format-editor__tab',
-      'top-tab',
-      'left',
-      {selected: currentTab === 'RICH_TEXT'}
-    );
-    const latexClassNames = classnames(
-      'multi-format-editor__tab',
-      'top-tab',
-      'right',
-      {selected: currentTab === 'LATEX'}
-    );
-    const bottomTabClassNames = classnames(
-      'multi-format-editor__tab',
-      'bottom-tab'
-    );
+    const richTextClassNames = classnames('multi-format-editor__tab', 'top-tab', 'left', {
+      selected: currentTab === 'RICH_TEXT',
+    });
+    const latexClassNames = classnames('multi-format-editor__tab', 'top-tab', 'right', {
+      selected: currentTab === 'LATEX',
+    });
+    const bottomTabClassNames = classnames('multi-format-editor__tab', 'bottom-tab');
 
-    const Editor = this.editors.filter(editor => editor.key === currentTab)[0]
-      .component;
+    const Editor = this.editors.filter(editor => editor.key === currentTab)[0].component;
 
     const ModeTabsText = this.editors.map(editor => editor.label);
 
     const showBottomTab = currentTab === 'HTML' || currentTab === 'RICH_TEXT';
     const BottomTab =
       currentTab === 'HTML' ? (
-        <div
-          className={bottomTabClassNames}
-          onClick={() => this.onModeChange('RICH_TEXT')}
-        >
+        <div className={bottomTabClassNames} onClick={() => this.onModeChange('RICH_TEXT')}>
           {_('Edit in Rich Text')}
         </div>
       ) : (
-        <div
-          className={bottomTabClassNames}
-          onClick={() => this.onModeChange('HTML')}
-        >
+        <div className={bottomTabClassNames} onClick={() => this.onModeChange('HTML')}>
           {_('Edit in HTML')}
         </div>
       );
@@ -261,22 +232,14 @@ class MultiFormatTextEditor extends Component {
     return (
       <div className="multi-format-editor__root__wrapper">
         <div className="multi-format-editor__tabs">
-          <div
-            className={richTextClassNames}
-            onClick={() => this.onModeChange('RICH_TEXT')}
-          >
+          <div className={richTextClassNames} onClick={() => this.onModeChange('RICH_TEXT')}>
             {ModeTabsText[0]}
           </div>
-          <div
-            className={latexClassNames}
-            onClick={() => this.onModeChange('LATEX')}
-          >
+          <div className={latexClassNames} onClick={() => this.onModeChange('LATEX')}>
             {ModeTabsText[1]}
           </div>
         </div>
-        <div
-          className={`multi-format-editor__content__wrapper__${currentTab.toLowerCase()}`}
-        >
+        <div className={`multi-format-editor__content__wrapper__${currentTab.toLowerCase()}`}>
           <Editor
             className={`multi-format-editor__${currentTab.toLowerCase()}`}
             onChange={onChange}
@@ -296,8 +259,7 @@ class MultiFormatTextEditor extends Component {
      */
     const {nextTab} = this.state;
     const content =
-      this.renderConfirmationPanel(nextTab !== null) ||
-      this.renderEditor(nextTab === null);
+      this.renderConfirmationPanel(nextTab !== null) || this.renderEditor(nextTab === null);
 
     return <div className="multi-format-editor__root">{content}</div>;
   }
diff --git a/src/components/widgets/text_editors/RichText/DraftCommands.js b/src/components/widgets/text_editors/RichText/DraftCommands.js
index 1e44aad7c..9cc997daf 100644
--- a/src/components/widgets/text_editors/RichText/DraftCommands.js
+++ b/src/components/widgets/text_editors/RichText/DraftCommands.js
@@ -117,8 +117,7 @@ export function insertSoftNewline(editorState) {
   // Terminate all current inline styles
   const currentStyleSet = newEditorState.getCurrentInlineStyle();
   newEditorState = currentStyleSet.reduce(
-    (reducedEditorState, style) =>
-      RichUtils.toggleInlineStyle(reducedEditorState, style),
+    (reducedEditorState, style) => RichUtils.toggleInlineStyle(reducedEditorState, style),
     newEditorState
   );
 
@@ -128,17 +127,9 @@ export function insertSoftNewline(editorState) {
   const selectionEnd = selectionState.getEndOffset();
 
   if (selectionEnd - selectionStart !== 0) {
-    const contentState = removeRange(
-      newEditorState.getCurrentContent(),
-      selectionState,
-      'back'
-    );
-
-    newEditorState = EditorState.push(
-      newEditorState,
-      contentState,
-      'backspace-character'
-    );
+    const contentState = removeRange(newEditorState.getCurrentContent(), selectionState, 'back');
+
+    newEditorState = EditorState.push(newEditorState, contentState, 'backspace-character');
   }
 
   // Insert a newline
@@ -163,10 +154,7 @@ export function toggleInlineStyle(editorState, inlineStyle) {
   }
 
   // <sub> and <sup> should be mutually exclusive.
-  const updatedEditorState = toggleMutuallyExclusiveStyles(
-    editorState,
-    inlineStyle
-  );
+  const updatedEditorState = toggleMutuallyExclusiveStyles(editorState, inlineStyle);
 
   // Add the new style.
   return RichUtils.toggleInlineStyle(updatedEditorState, inlineStyle);
diff --git a/src/components/widgets/text_editors/RichText/LinkDecorator.js b/src/components/widgets/text_editors/RichText/LinkDecorator.js
index 175f71ddb..b1cd1ddfe 100644
--- a/src/components/widgets/text_editors/RichText/LinkDecorator.js
+++ b/src/components/widgets/text_editors/RichText/LinkDecorator.js
@@ -19,8 +19,7 @@ const LinkDecorator = props => {
 
 LinkDecorator.propTypes = {
   style: PropTypes.object.isRequired,
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])
-    .isRequired,
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.element]).isRequired,
 };
 
 export default LinkDecorator;
diff --git a/src/components/widgets/text_editors/RichText/LinkEditor.js b/src/components/widgets/text_editors/RichText/LinkEditor.js
index 839bd92f6..6b0b2cebd 100644
--- a/src/components/widgets/text_editors/RichText/LinkEditor.js
+++ b/src/components/widgets/text_editors/RichText/LinkEditor.js
@@ -41,10 +41,7 @@ class LinkEditor extends Component {
     // Cursor dissappears when component rerenders, to make sure it's present
     // we're using setSelection range to make it appear at the end of text:
     // https://github.com/plotly/streambed/issues/9964
-    findDOMNode(this.input).setSelectionRange(
-      this.props.linkURL.length,
-      this.props.linkURL.length
-    );
+    findDOMNode(this.input).setSelectionRange(this.props.linkURL.length, this.props.linkURL.length);
   }
 
   getUpdatedPosition(props) {
@@ -93,10 +90,7 @@ class LinkEditor extends Component {
     const urlText = _('URL');
     // TODO: add close button
     return (
-      <div
-        className="rich-text-editor__link-editor"
-        style={{left: position.x, top: position.y}}
-      >
+      <div className="rich-text-editor__link-editor" style={{left: position.x, top: position.y}}>
         <span className="rich-text-editor__link-editor__label">{urlText}</span>
         <input
           className="rich-text-editor__link-editor__input"
diff --git a/src/components/widgets/text_editors/RichText/getSelectionCoordinates.js b/src/components/widgets/text_editors/RichText/getSelectionCoordinates.js
index 7bb7cf984..a7625b27f 100644
--- a/src/components/widgets/text_editors/RichText/getSelectionCoordinates.js
+++ b/src/components/widgets/text_editors/RichText/getSelectionCoordinates.js
@@ -1,9 +1,7 @@
 const getCoordinates = () => {
   const coordinates = {x: 0, y: 0};
 
-  const rect = document
-    .getElementsByClassName('text-editor')[0]
-    .getBoundingClientRect();
+  const rect = document.getElementsByClassName('text-editor')[0].getBoundingClientRect();
 
   const LINK_POP_UP_WIDTH = 158.5;
 
diff --git a/src/components/widgets/text_editors/RichText/index.js b/src/components/widgets/text_editors/RichText/index.js
index ebef1942b..3db86b479 100644
--- a/src/components/widgets/text_editors/RichText/index.js
+++ b/src/components/widgets/text_editors/RichText/index.js
@@ -1,12 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {
-  CompositeDecorator,
-  Editor,
-  EditorState,
-  Entity,
-  RichUtils,
-} from 'draft-js';
+import {CompositeDecorator, Editor, EditorState, Entity, RichUtils} from 'draft-js';
 import {stateToHTML} from '@plotly/draft-js-export-html';
 import {stateFromHTML} from 'draft-js-import-html';
 
@@ -59,9 +53,7 @@ class RichText extends Component {
     this.createEditorStateFromHTML = this.createEditorStateFromHTML.bind(this);
     this.getEditorStateAsHTML = this.getEditorStateAsHTML.bind(this);
     this.focus = this.focus.bind(this);
-    this.getParentContainerVerticalOffset = this.getParentContainerVerticalOffset.bind(
-      this
-    );
+    this.getParentContainerVerticalOffset = this.getParentContainerVerticalOffset.bind(this);
     this.onChange = this.onChange.bind(this);
     this.onBlur = this.onBlur.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -234,11 +226,7 @@ class RichText extends Component {
     Entity.replaceData(linkID, {url: urlValue});
 
     // Trigger an editor state update
-    const updatedEditorState = RichUtils.toggleLink(
-      editorState,
-      selectionState,
-      linkID
-    );
+    const updatedEditorState = RichUtils.toggleLink(editorState, selectionState, linkID);
 
     this.onChange(updatedEditorState);
   }
@@ -292,10 +280,7 @@ class RichText extends Component {
   }
 
   onStyleButtonToggle(inlineStyle) {
-    const newEditorState = toggleInlineStyle(
-      this.state.editorState,
-      inlineStyle
-    );
+    const newEditorState = toggleInlineStyle(this.state.editorState, inlineStyle);
 
     if (newEditorState) {
       this.onChange(newEditorState);
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index 6b5e86c30..b51945308 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -12,10 +12,7 @@ import {
   TraceTypeSection,
   LocationSelector,
 } from '../components';
-import {
-  HistogramInfoVertical,
-  HistogramInfoHorizontal,
-} from '../components/fields/derived';
+import {HistogramInfoVertical, HistogramInfoHorizontal} from '../components/fields/derived';
 
 const GraphCreatePanel = (props, {localize: _}) => {
   return (
@@ -60,20 +57,13 @@ const GraphCreatePanel = (props, {localize: _}) => {
       <Radio
         label={_('Orientation')}
         attr="orientation"
-        options={[
-          {label: _('Vertical'), value: 'v'},
-          {label: _('Horizontal'), value: 'h'},
-        ]}
+        options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
       />
       <HistogramInfoVertical>
-        {_(
-          'Note: in vertical orientation, X values are used for bins and Y values for weights.'
-        )}
+        {_('Note: in vertical orientation, X values are used for bins and Y values for weights.')}
       </HistogramInfoVertical>
       <HistogramInfoHorizontal>
-        {_(
-          'Note: in horizontal orientation, Y Values are used for bins and X values for weights.'
-        )}
+        {_('Note: in horizontal orientation, Y Values are used for bins and X values for weights.')}
       </HistogramInfoHorizontal>
       <DataSelector label={_('I (Optional)')} attr="i" />
       <DataSelector label={_('J (Optional)')} attr="j" />
@@ -91,10 +81,7 @@ const GraphCreatePanel = (props, {localize: _}) => {
       <DataSelector label={_('Headers')} attr="header.values" />
       <DataSelector label={_('Columns')} attr="cells.values" />
 
-      <TraceTypeSection
-        traceTypes={['scatterpolar', 'scatterpolargl']}
-        mode="trace"
-      >
+      <TraceTypeSection traceTypes={['scatterpolar', 'scatterpolargl']} mode="trace">
         <DataSelector label={_('Radius')} attr="r" />
         <DataSelector label={_('Theta')} attr="theta" />
         <Dropdown
@@ -136,10 +123,7 @@ const GraphCreatePanel = (props, {localize: _}) => {
         <Radio
           label={_('Transpose')}
           attr="transpose"
-          options={[
-            {label: _('No'), value: false},
-            {label: _('Yes'), value: true},
-          ]}
+          options={[{label: _('No'), value: false}, {label: _('Yes'), value: true}]}
         />
       </PlotlySection>
     </TraceAccordion>
diff --git a/src/default_panels/GraphSubplotsPanel.js b/src/default_panels/GraphSubplotsPanel.js
index 08ddae577..75263f951 100644
--- a/src/default_panels/GraphSubplotsPanel.js
+++ b/src/default_panels/GraphSubplotsPanel.js
@@ -27,19 +27,11 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <RectanglePositioner attr="xaxis.domain[0]" cartesian />
 
     <TraceTypeSection name={_('X Anchor')} traceTypes={TRACE_TO_AXIS.cartesian}>
-      <AxisAnchorDropdown
-        label={_('Anchor to')}
-        attr="xaxis.anchor"
-        clearable={false}
-      />
+      <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}
-      />
+      <AxisAnchorDropdown label={_('Anchor to')} attr="yaxis.anchor" clearable={false} />
       <AxisSide label={_('Side')} attr="yaxis.side" />
     </TraceTypeSection>
 
@@ -119,10 +111,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Country Borders')} attr="showcountries">
       <Radio
         attr="showcountries"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Border Width')} attr="countrywidth" units="px" />
       <ColorPicker label={_('Border Color')} attr="countrycolor" />
@@ -130,10 +119,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Sub-Country Unit Borders')} attr="showsubunits">
       <Radio
         attr="showsubunits"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Border Width')} attr="subunitwidth" units="px" />
       <ColorPicker label={_('Border Color')} attr="subunitcolor" />
@@ -141,10 +127,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Coastlines')} attr="showcoastlines">
       <Radio
         attr="showcoastlines"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Width')} attr="coastlinewidth" units="px" />
       <ColorPicker label={_('Color')} attr="coastlinecolor" />
@@ -152,40 +135,28 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Oceans')} attr="showocean">
       <Radio
         attr="showocean"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        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},
-        ]}
+        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},
-        ]}
+        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},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Width')} attr="riverwidth" units="px" />
       <ColorPicker label={_('Color')} attr="rivercolor" />
@@ -194,10 +165,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Map Frame')} attr="showframe">
       <Radio
         attr="showframe"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Width')} attr="framewidth" units="px" />
       <ColorPicker label={_('Color')} attr="framecolor" />
@@ -207,10 +175,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <Radio
         label={_('Resolution')}
         attr="resolution"
-        options={[
-          {label: _('1:110,000,000'), value: 110},
-          {label: _('1:50,000,000'), value: 50},
-        ]}
+        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} />
@@ -223,20 +188,8 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
     </PlotlySection>
 
     <PlotlySection name={_('Polar Sector')}>
-      <Numeric
-        label={_('Min')}
-        attr="sector[0]"
-        max={360}
-        min={-360}
-        showSlider
-      />
-      <Numeric
-        label={_('Max')}
-        attr="sector[1]"
-        max={360}
-        min={-360}
-        showSlider
-      />
+      <Numeric label={_('Min')} attr="sector[0]" max={360} min={-360} showSlider />
+      <Numeric label={_('Max')} attr="sector[1]" max={360} min={-360} showSlider />
     </PlotlySection>
   </SubplotAccordion>
 );
diff --git a/src/default_panels/GraphTransformsPanel.js b/src/default_panels/GraphTransformsPanel.js
index ad77348c4..38592174e 100644
--- a/src/default_panels/GraphTransformsPanel.js
+++ b/src/default_panels/GraphTransformsPanel.js
@@ -28,10 +28,7 @@ export class Aggregations extends Component {
     return (
       <PlotlySection name={_('Aggregations')} attr="aggregations">
         {aggregations
-          .filter(
-            aggr =>
-              aggr.target && aggr.target.match(/transforms\[\d*\]\./gi) === null
-          )
+          .filter(aggr => aggr.target && aggr.target.match(/transforms\[\d*\]\./gi) === null)
           .map(({target}, i) => (
             <AggregationSection show key={i} aggregationIndex={i}>
               <Dropdown
@@ -69,16 +66,11 @@ Aggregations.contextTypes = {
 
 const GraphTransformsPanel = (props, {localize: _}) => {
   return (
-    <TraceAccordion
-      traceFilterCondition={t => TRANSFORMABLE_TRACES.includes(t.type)}
-    >
+    <TraceAccordion traceFilterCondition={t => TRANSFORMABLE_TRACES.includes(t.type)}>
       <TransformAccordion>
         <Radio
           attr="enabled"
-          options={[
-            {label: _('Enabled'), value: true},
-            {label: _('Disabled'), value: false},
-          ]}
+          options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
         />
 
         <DataSelector label={_('By')} attr="groups" />
diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index 7ea641b4d..191efa0fb 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -28,9 +28,7 @@ class StyleAxesPanel extends Component {
       <TraceRequiredPanel>
         <AxesFold
           name={_('Titles')}
-          axisFilter={axis =>
-            !(axis._name.includes('angular') || axis._subplot.includes('geo'))
-          }
+          axisFilter={axis => !(axis._name.includes('angular') || axis._subplot.includes('geo'))}
         >
           <TextEditor attr="title" />
           <FontSelector label={_('Typeface')} attr="titlefont.family" />
@@ -54,10 +52,7 @@ class StyleAxesPanel extends Component {
             <Radio
               attr="autorange"
               label={_('Range')}
-              options={[
-                {label: _('Auto'), value: true},
-                {label: _('Custom'), value: false},
-              ]}
+              options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
             />
             <AxesRange label={_('Min')} attr="range[0]" />
             <AxesRange label={_('Max')} attr="range[1]" />
@@ -66,10 +61,7 @@ class StyleAxesPanel extends Component {
           <PlotlySection name={_('Zoom Interactivity')} attr="fixedrange">
             <Radio
               attr="fixedrange"
-              options={[
-                {label: _('Enable'), value: false},
-                {label: _('Disable'), value: true},
-              ]}
+              options={[{label: _('Enable'), value: false}, {label: _('Disable'), value: true}]}
             />
           </PlotlySection>
           <Dropdown
@@ -87,10 +79,7 @@ class StyleAxesPanel extends Component {
           <PlotlySection name={_('Axis Line')} attr="showline">
             <VisibilitySelect
               attr="showline"
-              options={[
-                {label: _('Show'), value: true},
-                {label: _('Hide'), value: false},
-              ]}
+              options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
               showOn={true}
               defaultOpt={true}
             >
@@ -101,20 +90,14 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Mirror Axis')}
                 attr="mirror"
-                options={[
-                  {label: _('On'), value: 'ticks'},
-                  {label: _('Off'), value: false},
-                ]}
+                options={[{label: _('On'), value: 'ticks'}, {label: _('Off'), value: false}]}
               />
             </VisibilitySelect>
           </PlotlySection>
           <PlotlySection name={_('Grid Lines')} attr="showgrid">
             <VisibilitySelect
               attr="showgrid"
-              options={[
-                {label: _('Show'), value: true},
-                {label: _('Hide'), value: false},
-              ]}
+              options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
               showOn={true}
               defaultOpt={true}
             >
@@ -124,10 +107,7 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Grid Spacing')}
                 attr="tickmode"
-                options={[
-                  {label: _('Auto'), value: 'auto'},
-                  {label: _('Custom'), value: 'linear'},
-                ]}
+                options={[{label: _('Auto'), value: 'auto'}, {label: _('Custom'), value: 'linear'}]}
               />
 
               <DTicks label={_('Step Offset')} attr="tick0" />
@@ -138,10 +118,7 @@ class StyleAxesPanel extends Component {
           <PlotlySection name={_('Zero Line')} attr="zeroline">
             <Radio
               attr="zeroline"
-              options={[
-                {label: _('Show'), value: true},
-                {label: _('Hide'), value: false},
-              ]}
+              options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
             />
             <Numeric label={_('Thickness')} attr="zerolinewidth" units="px" />
             <ColorPicker label={_('Color')} attr="zerolinecolor" />
@@ -150,26 +127,17 @@ class StyleAxesPanel extends Component {
           <PlotlySection name={_('Axis Background')} attr="showbackground">
             <Radio
               attr="showbackground"
-              options={[
-                {label: _('Show'), value: true},
-                {label: _('Hide'), value: false},
-              ]}
+              options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
             />
             <ColorPicker label={_('Color')} attr="backgroundcolor" />
           </PlotlySection>
         </AxesFold>
 
-        <AxesFold
-          name={_('Tick Labels')}
-          axisFilter={axis => !axis._subplot.includes('geo')}
-        >
+        <AxesFold name={_('Tick Labels')} axisFilter={axis => !axis._subplot.includes('geo')}>
           <PlotlySection name={_('Tick Labels')} attr="showticklabels">
             <VisibilitySelect
               attr="showticklabels"
-              options={[
-                {label: _('Show'), value: true},
-                {label: _('Hide'), value: false},
-              ]}
+              options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
               showOn={true}
               defaultOpt={true}
             >
@@ -177,10 +145,7 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Auto margins')}
                 attr="automargin"
-                options={[
-                  {label: _('True'), value: true},
-                  {label: _('False'), value: false},
-                ]}
+                options={[{label: _('True'), value: true}, {label: _('False'), value: false}]}
               />
               <FontSelector label={_('Typeface')} attr="tickfont.family" />
               <Numeric label={_('Font Size')} attr="tickfont.size" units="px" />
@@ -201,10 +166,7 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Separate Thousands')}
                 attr="separatethousands"
-                options={[
-                  {label: _('True'), value: true},
-                  {label: _('False'), value: false},
-                ]}
+                options={[{label: _('True'), value: true}, {label: _('False'), value: false}]}
               />
               <Dropdown
                 label={_('Exponents')}
@@ -273,10 +235,7 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Tick Spacing')}
                 attr="tickmode"
-                options={[
-                  {label: _('Auto'), value: 'auto'},
-                  {label: _('Custom'), value: 'linear'},
-                ]}
+                options={[{label: _('Auto'), value: 'auto'}, {label: _('Custom'), value: 'linear'}]}
               />
 
               <DTicks label={_('Step Offset')} attr="tick0" />
@@ -285,10 +244,7 @@ class StyleAxesPanel extends Component {
             </VisibilitySelect>
           </PlotlySection>
         </AxesFold>
-        <AxesFold
-          name={_('Tick Markers')}
-          axisFilter={axis => !axis._subplot.includes('geo')}
-        >
+        <AxesFold name={_('Tick Markers')} axisFilter={axis => !axis._subplot.includes('geo')}>
           <PlotlySection name={_('Tick Markers')} attr="ticks">
             <VisibilitySelect
               attr="ticks"
@@ -307,10 +263,7 @@ class StyleAxesPanel extends Component {
               <Radio
                 label={_('Tick Spacing')}
                 attr="tickmode"
-                options={[
-                  {label: _('Auto'), value: 'auto'},
-                  {label: _('Custom'), value: 'linear'},
-                ]}
+                options={[{label: _('Auto'), value: 'auto'}, {label: _('Custom'), value: 'linear'}]}
               />
 
               <DTicks label={_('Step Offset')} attr="tick0" />
@@ -320,45 +273,24 @@ class StyleAxesPanel extends Component {
           </PlotlySection>
         </AxesFold>
 
-        <AxesFold
-          name={_('Range Slider')}
-          axisFilter={axis => axis._subplot.includes('xaxis')}
-        >
+        <AxesFold name={_('Range Slider')} axisFilter={axis => axis._subplot.includes('xaxis')}>
           <RangesliderVisible
             attr="rangeslider.visible"
-            options={[
-              {label: _('Show'), value: true},
-              {label: _('Hide'), value: false},
-            ]}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
           />
           <NumericFraction label={_('Height')} attr="rangeslider.thickness" />
-          <ColorPicker
-            label={_('Background Color')}
-            attr="rangeslider.bgcolor"
-          />
-          <Numeric
-            label={_('Border Width')}
-            attr="rangeslider.borderwidth"
-            units="px"
-          />
-          <ColorPicker
-            label={_('Border Color')}
-            attr="rangeslider.bordercolor"
-          />
+          <ColorPicker label={_('Background Color')} attr="rangeslider.bgcolor" />
+          <Numeric label={_('Border Width')} attr="rangeslider.borderwidth" units="px" />
+          <ColorPicker label={_('Border Color')} attr="rangeslider.bordercolor" />
         </AxesFold>
 
         <AxesFold
           name={_('Timescale Buttons')}
-          axisFilter={axis =>
-            axis._subplot.includes('xaxis') && axis.type === 'date'
-          }
+          axisFilter={axis => axis._subplot.includes('xaxis') && axis.type === 'date'}
         >
           <Radio
             attr="rangeselector.visible"
-            options={[
-              {label: _('Show'), value: true},
-              {label: _('Hide'), value: false},
-            ]}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
           />
 
           <RangeSelectorAccordion>
@@ -389,38 +321,15 @@ class StyleAxesPanel extends Component {
             />
           </RangeSelectorAccordion>
           <PlotlySection name={_('Text')}>
-            <FontSelector
-              label={_('Typeface')}
-              attr="rangeselector.font.family"
-            />
-            <Numeric
-              label={_('Font Size')}
-              attr="rangeselector.font.size"
-              units="px"
-            />
-            <ColorPicker
-              label={_('Font Color')}
-              attr="rangeselector.font.color"
-            />
+            <FontSelector label={_('Typeface')} attr="rangeselector.font.family" />
+            <Numeric label={_('Font Size')} attr="rangeselector.font.size" units="px" />
+            <ColorPicker label={_('Font Color')} attr="rangeselector.font.color" />
           </PlotlySection>
           <PlotlySection name={_('Style')}>
-            <ColorPicker
-              label={_('Background Color')}
-              attr="rangeselector.bgcolor"
-            />
-            <ColorPicker
-              label={_('Active Color')}
-              attr="rangeselector.activecolor"
-            />
-            <Numeric
-              label={_('Border Width')}
-              attr="rangeselector.borderwidth"
-              units="px"
-            />
-            <ColorPicker
-              label={_('Border Color')}
-              attr="rangeselector.bordercolor"
-            />
+            <ColorPicker label={_('Background Color')} attr="rangeselector.bgcolor" />
+            <ColorPicker label={_('Active Color')} attr="rangeselector.activecolor" />
+            <Numeric label={_('Border Width')} attr="rangeselector.borderwidth" units="px" />
+            <ColorPicker label={_('Border Color')} attr="rangeselector.bordercolor" />
           </PlotlySection>
           <PlotlySection name={_('Horizontal Positioning')}>
             <Dropdown
@@ -464,18 +373,12 @@ class StyleAxesPanel extends Component {
         >
           <Radio
             attr="showspikes"
-            options={[
-              {label: _('Show'), value: true},
-              {label: _('Hide'), value: false},
-            ]}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
           />
           <Radio
             attr="spikesides"
             label={_('Show Sides')}
-            options={[
-              {label: _('Show'), value: true},
-              {label: _('Hide'), value: false},
-            ]}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
           />
 
           <Numeric label={_('Thickness')} attr="spikethickness" units="px" />
diff --git a/src/default_panels/StyleColorbarsPanel.js b/src/default_panels/StyleColorbarsPanel.js
index 63b39a340..ae3527834 100644
--- a/src/default_panels/StyleColorbarsPanel.js
+++ b/src/default_panels/StyleColorbarsPanel.js
@@ -28,10 +28,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
           <VisibilitySelect
             attr={prefix + 'showscale'}
             key={'x' + prefix}
-            options={[
-              {label: _('Show'), value: true},
-              {label: _('Hide'), value: false},
-            ]}
+            options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
             showOn={true}
           >
             <PlotlyPanel key={prefix + ' panel'}>
@@ -47,19 +44,13 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     {label: _('Bottom'), value: 'bottom'},
                   ]}
                 />
-                <FontSelector
-                  label={_('Typeface')}
-                  attr={prefix + 'colorbar.titlefont.family'}
-                />
+                <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'}
-                />
+                <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.titlefont.color'} />
               </PlotlyFold>
               <PlotlyFold name={_('Size and Positioning')}>
                 <PlotlySection name={_('Size')} attr={prefix + 'colorbar.len'}>
@@ -73,10 +64,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     ]}
                   />
 
-                  <Numeric
-                    label={_('Width')}
-                    attr={prefix + 'colorbar.thickness'}
-                  />
+                  <Numeric label={_('Width')} attr={prefix + 'colorbar.thickness'} />
 
                   <Radio
                     attr={prefix + 'colorbar.thicknessmode'}
@@ -86,10 +74,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     ]}
                   />
                 </PlotlySection>
-                <PlotlySection
-                  name={_('Horizontal Positioning')}
-                  attr={prefix + 'colorbar.x'}
-                >
+                <PlotlySection name={_('Horizontal Positioning')} attr={prefix + 'colorbar.x'}>
                   <Numeric
                     label={_('Position')}
                     attr={prefix + 'colorbar.x'}
@@ -106,10 +91,7 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     ]}
                   />
                 </PlotlySection>
-                <PlotlySection
-                  name={_('Vertical Positioning')}
-                  attr={prefix + 'colorbar.y'}
-                >
+                <PlotlySection name={_('Vertical Positioning')} attr={prefix + 'colorbar.y'}>
                   <Numeric
                     label={_('Position')}
                     attr={prefix + 'colorbar.y'}
@@ -126,45 +108,25 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     ]}
                   />
                 </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 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},
-                  ]}
+                  options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
                   showOn={true}
                   defaultOpt={true}
                 >
-                  <FontSelector
-                    label={_('Typeface')}
-                    attr={prefix + 'colorbar.tickfont.family'}
-                  />
+                  <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'}
-                  />
+                  <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.tickfont.color'} />
                   <Dropdown
                     label={_('Angle')}
                     attr={prefix + 'colorbar.tickangle'}
@@ -249,18 +211,9 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     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'}
-                  />
+                  <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')}>
@@ -274,20 +227,9 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                   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'}
-                  />
+                  <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={[
@@ -297,50 +239,20 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
                     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'}
-                  />
+                  <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 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 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>
diff --git a/src/default_panels/StyleImagesPanel.js b/src/default_panels/StyleImagesPanel.js
index e37bb0586..e7feae8be 100644
--- a/src/default_panels/StyleImagesPanel.js
+++ b/src/default_panels/StyleImagesPanel.js
@@ -14,10 +14,7 @@ const StyleImagesPanel = (props, {localize: _}) => (
   <ImageAccordion canAdd>
     <Radio
       attr="visible"
-      options={[
-        {label: _('Show'), value: true},
-        {label: _('Hide'), value: false},
-      ]}
+      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
     />
 
     <Dropzone attr="source" fileType={_('image')} show />
@@ -35,10 +32,7 @@ const StyleImagesPanel = (props, {localize: _}) => (
     <Radio
       label={_('Relative to Grid')}
       attr="layer"
-      options={[
-        {label: _('Below'), value: 'below'},
-        {label: _('Above'), value: 'above'},
-      ]}
+      options={[{label: _('Below'), value: 'below'}, {label: _('Above'), value: 'above'}]}
     />
     <PositioningNumeric attr="sizex" label={_('Width')} />
     <PositioningNumeric attr="sizey" label={_('Height')} />
diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js
index 60a35ff5a..07299cead 100644
--- a/src/default_panels/StyleLayoutPanel.js
+++ b/src/default_panels/StyleLayoutPanel.js
@@ -20,10 +20,7 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       <VisibilitySelect
         attr="autosize"
         label={_('Size')}
-        options={[
-          {label: _('Auto'), value: true},
-          {label: _('Custom'), value: false},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
         showOn={false}
         defaultOpt={true}
       >
@@ -49,20 +46,12 @@ const StyleLayoutPanel = (props, {localize: _}) => (
     <PlotlyFold name={_('Title and Fonts')}>
       <PlotlySection name={_('Title')} attr="title">
         <TextEditor attr="title" />
-        <FontSelector
-          label={_('Typeface')}
-          attr="titlefont.family"
-          clearable={false}
-        />
+        <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>
       <PlotlySection name={_('Global Font')}>
-        <FontSelector
-          label={_('Typeface')}
-          attr="font.family"
-          clearable={false}
-        />
+        <FontSelector label={_('Typeface')} attr="font.family" clearable={false} />
         <Numeric label={_('Font Size')} attr="font.size" units="px" />
         <ColorPicker label={_('Font Color')} attr="font.color" />
       </PlotlySection>
diff --git a/src/default_panels/StyleLegendPanel.js b/src/default_panels/StyleLegendPanel.js
index 4245e55a9..2952a3f46 100644
--- a/src/default_panels/StyleLegendPanel.js
+++ b/src/default_panels/StyleLegendPanel.js
@@ -16,10 +16,7 @@ const StyleLegendPanel = (props, {localize: _}) => (
     <PlotlyFold name={_('Legend')}>
       <Radio
         attr="showlegend"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <PlotlySection name={_('Text')}>
         <FontSelector label={_('Typeface')} attr="legend.font.family" />
@@ -27,11 +24,7 @@ const StyleLegendPanel = (props, {localize: _}) => (
         <ColorPicker label={_('Color')} attr="legend.font.color" />
       </PlotlySection>
       <PlotlySection name={_('Legend Box')}>
-        <Numeric
-          label={_('Border Width')}
-          attr="legend.borderwidth"
-          units="px"
-        />
+        <Numeric label={_('Border Width')} attr="legend.borderwidth" units="px" />
         <ColorPicker label={_('Border Color')} attr="legend.bordercolor" />
         <ColorPicker label={_('Background Color')} attr="legend.bgcolor" />
       </PlotlySection>
@@ -66,10 +59,7 @@ const StyleLegendPanel = (props, {localize: _}) => (
       <PlotlySection name={_('Orientation')}>
         <Radio
           attr="legend.orientation"
-          options={[
-            {label: _('Vertical'), value: 'v'},
-            {label: _('Horizontal'), value: 'h'},
-          ]}
+          options={[{label: _('Vertical'), value: 'v'}, {label: _('Horizontal'), value: 'h'}]}
         />
       </PlotlySection>
       <PlotlySection name={_('Trace Order')}>
diff --git a/src/default_panels/StyleNotesPanel.js b/src/default_panels/StyleNotesPanel.js
index 575bddeaf..1eef7af10 100644
--- a/src/default_panels/StyleNotesPanel.js
+++ b/src/default_panels/StyleNotesPanel.js
@@ -27,10 +27,7 @@ const StyleNotesPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Arrow')}>
       <Radio
         attr="showarrow"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Numeric label={_('Line Width')} attr="arrowwidth" units="px" />
       <ColorPicker label={_('Color')} attr="arrowcolor" />
diff --git a/src/default_panels/StyleShapesPanel.js b/src/default_panels/StyleShapesPanel.js
index 54254c69a..ff6ca1335 100644
--- a/src/default_panels/StyleShapesPanel.js
+++ b/src/default_panels/StyleShapesPanel.js
@@ -16,10 +16,7 @@ const StyleShapesPanel = (props, {localize: _}) => (
   <ShapeAccordion canAdd>
     <Radio
       attr="visible"
-      options={[
-        {label: _('Show'), value: true},
-        {label: _('Hide'), value: false},
-      ]}
+      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
     />
     <Radio
       attr="type"
diff --git a/src/default_panels/StyleSlidersPanel.js b/src/default_panels/StyleSlidersPanel.js
index fad8e7983..1791acb02 100644
--- a/src/default_panels/StyleSlidersPanel.js
+++ b/src/default_panels/StyleSlidersPanel.js
@@ -14,10 +14,7 @@ const StyleSlidersPanel = (props, {localize: _}) => (
   <SliderAccordion>
     <Radio
       attr="visible"
-      options={[
-        {label: _('Show'), value: true},
-        {label: _('Hide'), value: false},
-      ]}
+      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
     />
     <PlotlySection name={_('Background')}>
       <ColorPicker label={_('Color')} attr="bgcolor" />
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 4f6e0bcfd..9984fb717 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -46,10 +46,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <ShowInLegend
       label={_('Show in Legend')}
       attr="showlegend"
-      options={[
-        {label: _('Show'), value: true},
-        {label: _('Hide'), value: false},
-      ]}
+      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
     />
     <NumericFraction label={_('Trace Opacity')} attr="opacity" />
     <MultiColorPicker label={_('Color')} attr="color" />
@@ -69,10 +66,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Cumulative')}
         attr="cumulative.enabled"
-        options={[
-          {label: _('Enabled'), value: true},
-          {label: _('Disabled'), value: false},
-        ]}
+        options={[{label: _('Enabled'), value: true}, {label: _('Disabled'), value: false}]}
       />
       <Radio
         label={_('Direction')}
@@ -141,10 +135,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         attr="flatshading"
         label={_('Flatshading')}
-        options={[
-          {label: _('Enable'), value: true},
-          {label: _('Disable'), value: false},
-        ]}
+        options={[{label: _('Enable'), value: true}, {label: _('Disable'), value: false}]}
       />
     </PlotlySection>
     <PlotlySection name={_('Binning')}>
@@ -152,10 +143,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('X Binning')}
         attr="autobinx"
-        options={[
-          {label: _('Auto'), value: true},
-          {label: _('Custom'), value: false},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
       />
       <BinningNumeric label={_('X Bin Start')} attr="xbins.start" axis="x" />
       <BinningNumeric label={_('X Bin End')} attr="xbins.end" axis="x" />
@@ -164,10 +152,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Y Binning')}
         attr="autobiny"
-        options={[
-          {label: _('Auto'), value: true},
-          {label: _('Custom'), value: false},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
       />
       <BinningNumeric label={_('Y Bin Start')} attr="ybins.start" axis="y" />
       <BinningNumeric label={_('Y Bin End')} attr="ybins.end" axis="y" />
@@ -182,10 +167,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Order')}
         attr="sort"
-        options={[
-          {label: _('Sorted'), value: true},
-          {label: _('Unsorted'), value: false},
-        ]}
+        options={[{label: _('Sorted'), value: true}, {label: _('Unsorted'), value: false}]}
       />
       <Radio
         label={_('Direction')}
@@ -220,20 +202,13 @@ const StyleTracesPanel = (props, {localize: _}) => (
       />
       <NumericFraction label={_('Jitter')} attr="jitter" />
       <Numeric label={_('Position')} attr="pointpos" step={0.1} showSlider />
-      <MarkerColor
-        suppressMultiValuedMessage
-        label={_('Color')}
-        attr="marker.color"
-      />
+      <MarkerColor suppressMultiValuedMessage label={_('Color')} attr="marker.color" />
       <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
       <MarkerSize label={_('Size')} attr="marker.size" />
       <Radio
         label={_('Size Mode')}
         attr="marker.sizemode"
-        options={[
-          {label: _('Diameter'), value: 'diameter'},
-          {label: _('Area'), value: 'area'},
-        ]}
+        options={[{label: _('Diameter'), value: 'diameter'}, {label: _('Area'), value: 'area'}]}
       />
       <Numeric label={_('Minimum Size')} attr="marker.sizemin" />
       <NumericReciprocal label={_('Size Scale')} attr="marker.sizeref" />
@@ -245,10 +220,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Box Mode')}
         attr="boxmode"
-        options={[
-          {label: _('Overlay'), value: 'overlay'},
-          {label: _('Group'), value: 'group'},
-        ]}
+        options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
       />
       <NumericFractionInverse label={_('Box Width')} attr="boxgap" />
       <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
@@ -278,10 +250,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Violin Mode')}
         attr="violinmode"
-        options={[
-          {label: _('Overlay'), value: 'overlay'},
-          {label: _('Group'), value: 'group'},
-        ]}
+        options={[{label: _('Overlay'), value: 'overlay'}, {label: _('Group'), value: 'group'}]}
       />
       <NumericFractionInverse label={_('Violin Width')} attr="violingap" />
       <NumericFraction label={_('Violin Padding')} attr="violingroupgap" />
@@ -308,27 +277,16 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Color Bar')}
         attr="line.showscale"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        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}
-      />
+      <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},
-        ]}
+        options={[{label: _('Connect'), value: true}, {label: _('Blank'), value: false}]}
       />
     </TraceTypeSection>
     <PlotlySection name={_('Filled Area')}>
@@ -363,26 +321,17 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Color Bar')}
         attr="showscale"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <Radio
         label={_('Orientation')}
         attr="reversescale"
-        options={[
-          {label: _('Normal'), value: false},
-          {label: _('Reversed'), value: true},
-        ]}
+        options={[{label: _('Normal'), value: false}, {label: _('Reversed'), value: true}]}
       />
       <VisibilitySelect
         label={_('Range')}
         attr="zauto"
-        options={[
-          {label: _('Auto'), value: true},
-          {label: _('Custom'), value: false},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
         showOn={false}
         defaultOpt={true}
       >
@@ -392,10 +341,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <VisibilitySelect
         label={_('Range')}
         attr="cauto"
-        options={[
-          {label: _('Auto'), value: true},
-          {label: _('Custom'), value: false},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
         showOn={false}
         defaultOpt={true}
       >
@@ -407,17 +353,11 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Numeric label={_('Horizontal Gaps')} attr="xgap" />
       <Numeric label={_('Vertical Gaps')} attr="ygap" />
     </PlotlySection>
-    <TraceTypeSection
-      name={_('Gaps in Data')}
-      traceTypes={['heatmap', 'contour', 'heatmapgl']}
-    >
+    <TraceTypeSection name={_('Gaps in Data')} traceTypes={['heatmap', 'contour', 'heatmapgl']}>
       <Radio
         label={_('Interpolate Gaps')}
         attr="connectgaps"
-        options={[
-          {label: _('On'), value: true},
-          {label: _('Off'), value: false},
-        ]}
+        options={[{label: _('On'), value: true}, {label: _('Off'), value: false}]}
       />
     </TraceTypeSection>
     <PlotlySection name={_('Contours')}>
@@ -433,18 +373,12 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Contour Lines')}
         attr="contours.showlines"
-        options={[
-          {label: _('On'), value: true},
-          {label: _('Off'), value: false},
-        ]}
+        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},
-        ]}
+        options={[{label: _('Auto'), value: true}, {label: _('Custom'), value: false}]}
       />
       <Numeric label={_('Max Contours')} attr="ncontours" />
 
@@ -458,14 +392,8 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <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"
-      />
+      <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" />
@@ -481,10 +409,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Show in Legend')}
         attr="increasing.showlegend"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
     </PlotlySection>
     <PlotlySection name={_('Decreasing Trace Styles')}>
@@ -496,10 +421,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Show in Legend')}
         attr="decreasing.showlegend"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
     </PlotlySection>
     <PlotlySection name={_('Scaling')}>
@@ -507,10 +429,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Radio
         label={_('Scale Mode')}
         attr="scalemode"
-        options={[
-          {label: _('Width'), value: 'width'},
-          {label: _('Count'), value: 'count'},
-        ]}
+        options={[{label: _('Width'), value: 'width'}, {label: _('Count'), value: 'count'}]}
       />
       <Radio
         label={_('Span Mode')}
@@ -545,10 +464,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Box')}>
       <Radio
         attr="box.visible"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <NumericFraction label={_('Box Width')} attr="box.width" />
       <MultiColorPicker label={_('Box Fill Color')} attr="box.color" />
@@ -558,10 +474,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Meanline')}>
       <Radio
         attr="meanline.visible"
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       />
       <NumericFraction label={_('Meanline Width')} attr="meanline.width" />
       <MultiColorPicker label={_('Meanline Color')} attr="meanline.color" />
@@ -571,10 +484,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <VisibilitySelect
         attr="contour.show"
         label={_('Show Contour')}
-        options={[
-          {label: _('Show'), value: true},
-          {label: _('Hide'), value: false},
-        ]}
+        options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
         showOn={true}
         defaultOpt={false}
       >
diff --git a/src/default_panels/StyleUpdateMenusPanel.js b/src/default_panels/StyleUpdateMenusPanel.js
index a9154e0de..f8d1bb00d 100644
--- a/src/default_panels/StyleUpdateMenusPanel.js
+++ b/src/default_panels/StyleUpdateMenusPanel.js
@@ -15,10 +15,7 @@ const StyleUpdateMenusPanel = (props, {localize: _}) => (
   <UpdateMenuAccordion>
     <VisibilitySelect
       attr="visible"
-      options={[
-        {label: _('Show'), value: true},
-        {label: _('Hide'), value: false},
-      ]}
+      options={[{label: _('Show'), value: true}, {label: _('Hide'), value: false}]}
       showOn={true}
     >
       <PlotlySection name={_('Button Labels')}>
diff --git a/src/lib/__tests__/connectAnnotationToLayout-test.js b/src/lib/__tests__/connectAnnotationToLayout-test.js
index cf9a6185b..90fdc768c 100644
--- a/src/lib/__tests__/connectAnnotationToLayout-test.js
+++ b/src/lib/__tests__/connectAnnotationToLayout-test.js
@@ -10,9 +10,7 @@ describe('connectAnnotationToLayout', () => {
     const fixture = fixtures.scatter({
       layout: {annotations: [{text: 'hodor'}]},
     });
-    const ConnectedNumeric = connectLayoutToPlot(
-      connectAnnotationToLayout(Numeric)
-    );
+    const ConnectedNumeric = connectLayoutToPlot(connectAnnotationToLayout(Numeric));
 
     mount(
       <TestEditor {...{...fixture, beforeUpdateLayout}}>
diff --git a/src/lib/__tests__/connectLayoutToPlot-test.js b/src/lib/__tests__/connectLayoutToPlot-test.js
index 54ee5f211..6b8903d92 100644
--- a/src/lib/__tests__/connectLayoutToPlot-test.js
+++ b/src/lib/__tests__/connectLayoutToPlot-test.js
@@ -1,21 +1,13 @@
 import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
 import connectLayoutToPlot from '../connectLayoutToPlot';
-import {
-  PlotlyFold,
-  PlotlyPanel,
-  PlotlySection,
-} from '../../components/containers';
+import {PlotlyFold, PlotlyPanel, PlotlySection} from '../../components/containers';
 import {Numeric} from '../../components/fields';
 import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
-const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(
-  connectLayoutToPlot
-);
-const Editor = props => (
-  <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
-);
+const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectLayoutToPlot);
+const Editor = props => <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />;
 
 Layouts.forEach(Layout => {
   describe(`<${Layout.displayName}>`, () => {
@@ -61,10 +53,7 @@ Layouts.forEach(Layout => {
     it(`automatically computes min and max defaults`, () => {
       const onUpdate = jest.fn();
       const wrapper = mount(
-        <Editor
-          onUpdate={onUpdate}
-          {...fixtures.scatter({layout: {showlegend: true}})}
-        >
+        <Editor onUpdate={onUpdate} {...fixtures.scatter({layout: {showlegend: true}})}>
           <PlotlyPanel>
             <Layout>
               <Numeric label="Position x" step={0.01} attr="legend.x" />
diff --git a/src/lib/__tests__/connectTraceToPlot-test.js b/src/lib/__tests__/connectTraceToPlot-test.js
index 1d60a89c7..df8296791 100644
--- a/src/lib/__tests__/connectTraceToPlot-test.js
+++ b/src/lib/__tests__/connectTraceToPlot-test.js
@@ -1,19 +1,13 @@
 import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
 import connectTraceToPlot from '../connectTraceToPlot';
-import {
-  PlotlyFold,
-  PlotlyPanel,
-  PlotlySection,
-} from '../../components/containers';
+import {PlotlyFold, PlotlyPanel, PlotlySection} from '../../components/containers';
 import {Numeric} from '../../components/fields';
 import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
 const Traces = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectTraceToPlot);
-const Editor = props => (
-  <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
-);
+const Editor = props => <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />;
 
 const defaultMarkerSize = 6;
 
diff --git a/src/lib/__tests__/dereference-test.js b/src/lib/__tests__/dereference-test.js
index b011978b1..f52317c68 100644
--- a/src/lib/__tests__/dereference-test.js
+++ b/src/lib/__tests__/dereference-test.js
@@ -51,11 +51,7 @@ describe('dereference', () => {
   it('uses custom function if provided in config', () => {
     const customParsing = src => src.split(',');
     const container = [{zsrc: 'z1,z2', type: 'heatmap'}];
-    dereference(
-      container,
-      {z1: [1, 2, 3], z2: [2, 2, 2]},
-      {toSrc: customParsing}
-    );
+    dereference(container, {z1: [1, 2, 3], z2: [2, 2, 2]}, {toSrc: customParsing});
 
     // contents should have been transposed
     expect(Array.isArray(container[0].z[0])).toBe(true);
diff --git a/src/lib/__tests__/maybeTransposeData-test.js b/src/lib/__tests__/maybeTransposeData-test.js
index 34694082e..32edd9513 100644
--- a/src/lib/__tests__/maybeTransposeData-test.js
+++ b/src/lib/__tests__/maybeTransposeData-test.js
@@ -2,11 +2,7 @@ import {maybeTransposeData} from '../index';
 /* eslint-disable no-magic-numbers */
 describe('maybeTransposeData', () => {
   it('transposes 2d data for row based traceTypes', () => {
-    const transposed = maybeTransposeData(
-      [[1, 2, 3], [4, 5, 6]],
-      'zsrc',
-      'heatmap'
-    );
+    const transposed = maybeTransposeData([[1, 2, 3], [4, 5, 6]], 'zsrc', 'heatmap');
 
     // [[1, 4], [2, 5], [3, 6]]
     expect(transposed.length).toBe(3);
@@ -20,22 +16,14 @@ describe('maybeTransposeData', () => {
   });
 
   it('does not transpose data for column based traceTypes', () => {
-    const transposed = maybeTransposeData(
-      [[1, 2, 3], [4, 5, 6]],
-      'header.valuessrc',
-      'table'
-    );
+    const transposed = maybeTransposeData([[1, 2, 3], [4, 5, 6]], 'header.valuessrc', 'table');
 
     // [[1, 2, 3], [4, 5, 6]]
     expect(transposed.length).toBe(2);
   });
 
   it('removes extra array wrapping for special cases in tables', () => {
-    const transposed = maybeTransposeData(
-      [[1, 2, 3]],
-      'header.valuessrc',
-      'table'
-    );
+    const transposed = maybeTransposeData([[1, 2, 3]], 'header.valuessrc', 'table');
 
     // [1, 2, 3]
     expect(Array.isArray(transposed[0])).toBe(false);
diff --git a/src/lib/__tests__/nestedContainerConnections-test.js b/src/lib/__tests__/nestedContainerConnections-test.js
index c0fe3e023..626ac9c26 100644
--- a/src/lib/__tests__/nestedContainerConnections-test.js
+++ b/src/lib/__tests__/nestedContainerConnections-test.js
@@ -2,20 +2,13 @@ import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
 import {Numeric, PlotlySection, PlotlyPanel} from '../../components';
 import {TestEditor, fixtures, mount} from '../test-utils';
-import {
-  connectAxesToLayout,
-  connectLayoutToPlot,
-  connectToContainer,
-  connectTraceToPlot,
-} from '..';
+import {connectAxesToLayout, connectLayoutToPlot, connectToContainer, connectTraceToPlot} from '..';
 
 describe('Plot Connection', () => {
   it('can connect Field directly with full connection pipeline', () => {
     const beforeUpdateLayout = jest.fn();
     const fixtureProps = fixtures.scatter({layout: {xaxis: {range: [0, 10]}}});
-    const LayoutAxesNumeric = connectLayoutToPlot(
-      connectAxesToLayout(connectToContainer(Numeric))
-    );
+    const LayoutAxesNumeric = connectLayoutToPlot(connectAxesToLayout(connectToContainer(Numeric)));
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout}}>
         <LayoutAxesNumeric label="Min" attr="range[0]" />
@@ -36,9 +29,7 @@ describe('Plot Connection', () => {
   it('can connect to layout when connected within trace context', () => {
     const beforeUpdateLayout = jest.fn();
     const fixtureProps = fixtures.scatter({layout: {width: 10}});
-    const TraceLayoutNumeric = connectTraceToPlot(
-      connectLayoutToPlot(connectToContainer(Numeric))
-    );
+    const TraceLayoutNumeric = connectTraceToPlot(connectLayoutToPlot(connectToContainer(Numeric)));
     mount(
       <TestEditor {...{...fixtureProps, beforeUpdateLayout}}>
         <TraceLayoutNumeric traceIndexes={[0]} label="Width" attr="width" />
@@ -70,11 +61,7 @@ describe('Plot Connection', () => {
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <PlotlySection name="Canvas">
-          <DeeplyConnectedNumeric
-            traceIndexes={[0]}
-            label="Width"
-            attr="width"
-          />
+          <DeeplyConnectedNumeric traceIndexes={[0]} label="Width" attr="width" />
         </PlotlySection>
       </TestEditor>
     )
diff --git a/src/lib/__tests__/walkObject-test.js b/src/lib/__tests__/walkObject-test.js
index 2fd4d0d4e..6ceebe553 100644
--- a/src/lib/__tests__/walkObject-test.js
+++ b/src/lib/__tests__/walkObject-test.js
@@ -266,14 +266,10 @@ describe('objectUtils', () => {
 
       callback.mockClear();
 
-      walkObject(
-        {[UNDEF]: 1, b: [{c: [{a: 1, d: [{a: 1}]}]}, 2, 3]},
-        callback,
-        {
-          walkArraysMatchingKeys: ['b', 'c'],
-          pathType: 'nestedProperty',
-        }
-      );
+      walkObject({[UNDEF]: 1, b: [{c: [{a: 1, d: [{a: 1}]}]}, 2, 3]}, callback, {
+        walkArraysMatchingKeys: ['b', 'c'],
+        pathType: 'nestedProperty',
+      });
 
       actualPaths = callback.mock.calls.map(args => args[2]);
       expectedPaths = [
diff --git a/src/lib/computeTraceOptionsFromSchema.js b/src/lib/computeTraceOptionsFromSchema.js
index 93d3d0623..af7dd89f1 100644
--- a/src/lib/computeTraceOptionsFromSchema.js
+++ b/src/lib/computeTraceOptionsFromSchema.js
@@ -1,9 +1,7 @@
 function computeTraceOptionsFromSchema(schema, _, context) {
   // Filter out Polar "area" type as it is fairly broken and we want to present
   // scatter with fill as an "area" chart type for convenience.
-  const traceTypes = Object.keys(schema.traces).filter(
-    t => !['area', 'scattermapbox'].includes(t)
-  );
+  const traceTypes = Object.keys(schema.traces).filter(t => !['area', 'scattermapbox'].includes(t));
 
   const traceOptions = [
     {
@@ -132,8 +130,7 @@ function computeTraceOptionsFromSchema(schema, _, context) {
     },
   ].filter(obj => traceTypes.indexOf(obj.value) !== -1);
 
-  const traceIndex = traceType =>
-    traceOptions.findIndex(opt => opt.value === traceType);
+  const traceIndex = traceType => traceOptions.findIndex(opt => opt.value === traceType);
 
   traceOptions.splice(
     traceIndex('scatter') + 1,
diff --git a/src/lib/connectAggregationToTransform.js b/src/lib/connectAggregationToTransform.js
index 8d118976b..9a1df3de8 100644
--- a/src/lib/connectAggregationToTransform.js
+++ b/src/lib/connectAggregationToTransform.js
@@ -28,9 +28,7 @@ export default function connectAggregationToTransform(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`aggregations[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`aggregations[].${attr}`),
         updateContainer: this.updateAggregation,
         container: this.container,
         fullContainer: this.fullContainer,
diff --git a/src/lib/connectAnnotationToLayout.js b/src/lib/connectAnnotationToLayout.js
index 09fc4aa8a..ea3f282be 100644
--- a/src/lib/connectAnnotationToLayout.js
+++ b/src/lib/connectAnnotationToLayout.js
@@ -30,9 +30,7 @@ export default function connectAnnotationToLayout(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`annotations[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`annotations[].${attr}`),
         updateContainer: this.updateAnnotation,
         deleteContainer: this.deleteAnnotation,
         container: this.container,
diff --git a/src/lib/connectAxesToLayout.js b/src/lib/connectAxesToLayout.js
index c60619fd8..f4c9842b5 100644
--- a/src/lib/connectAxesToLayout.js
+++ b/src/lib/connectAxesToLayout.js
@@ -15,9 +15,7 @@ function computeAxesOptions(axes, props, context) {
   for (let i = 0; i < filteredAxes.length; i++) {
     const ax = filteredAxes[i];
     const label = capitalize(ax._name.split('axis')[0]);
-    const value = (ax._subplot &&
-    !ax._subplot.includes('xaxis') &&
-    !ax._subplot.includes('yaxis')
+    const value = (ax._subplot && !ax._subplot.includes('xaxis') && !ax._subplot.includes('yaxis')
       ? ax._subplot + '.' + ax._name
       : ax._subplot
     ).trim();
@@ -30,9 +28,7 @@ function computeAxesOptions(axes, props, context) {
     };
   }
 
-  return options.length > 1
-    ? [{label: _('All'), value: 'allaxes'}].concat(options)
-    : options;
+  return options.length > 1 ? [{label: _('All'), value: 'allaxes'}].concat(options) : options;
 }
 
 export default function connectAxesToLayout(WrappedComponent) {
@@ -88,8 +84,7 @@ export default function connectAxesToLayout(WrappedComponent) {
         this.container = {};
       } else if (axesTarget) {
         this.fullContainer = nestedProperty(fullContainer, axesTarget).get();
-        this.container = this.container =
-          nestedProperty(container, axesTarget).get() || {};
+        this.container = this.container = nestedProperty(container, axesTarget).get() || {};
       }
     }
 
@@ -129,11 +124,7 @@ export default function connectAxesToLayout(WrappedComponent) {
           const subplot = axes[j]._subplot;
           let axesKey = axes[j]._name;
 
-          if (
-            subplot &&
-            !subplot.includes('xaxis') &&
-            !subplot.includes('yaxis')
-          ) {
+          if (subplot && !subplot.includes('xaxis') && !subplot.includes('yaxis')) {
             axesKey = `${subplot}.${axesKey}`;
           }
 
@@ -150,9 +141,7 @@ export default function connectAxesToLayout(WrappedComponent) {
     }
   }
 
-  AxesConnectedComponent.displayName = `AxesConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  AxesConnectedComponent.displayName = `AxesConnected${getDisplayName(WrappedComponent)}`;
 
   AxesConnectedComponent.contextTypes = {
     container: PropTypes.object.isRequired,
diff --git a/src/lib/connectCartesianSubplotToLayout.js b/src/lib/connectCartesianSubplotToLayout.js
index fd2b4b6f1..5eed422ef 100644
--- a/src/lib/connectCartesianSubplotToLayout.js
+++ b/src/lib/connectCartesianSubplotToLayout.js
@@ -1,10 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {
-  getDisplayName,
-  plotlyTraceToCustomTrace,
-  renderTraceIcon,
-} from '../lib';
+import {getDisplayName, plotlyTraceToCustomTrace, renderTraceIcon} from '../lib';
 
 export default function connectCartesianSubplotToLayout(WrappedComponent) {
   class SubplotConnectedComponent extends Component {
@@ -51,10 +47,7 @@ export default function connectCartesianSubplotToLayout(WrappedComponent) {
            * _fullData as that is where the rest of our code expects to find its
            * values.
           */
-          if (
-            trace.transforms &&
-            trace.transforms.every(t => t.type === 'fit')
-          ) {
+          if (trace.transforms && trace.transforms.every(t => t.type === 'fit')) {
             fullData[i]._fullInput = fullData[i];
           }
 
@@ -76,9 +69,7 @@ export default function connectCartesianSubplotToLayout(WrappedComponent) {
           !this.context.getValObject
             ? null
             : this.context.getValObject(
-                attr
-                  .replace('xaxis', this.props.xaxis)
-                  .replace('yaxis', this.props.yaxis)
+                attr.replace('xaxis', this.props.xaxis).replace('yaxis', this.props.yaxis)
               ),
         updateContainer: this.updateSubplot,
         deleteContainer: this.deleteSubplot,
@@ -90,24 +81,18 @@ export default function connectCartesianSubplotToLayout(WrappedComponent) {
     updateSubplot(update) {
       const newUpdate = {};
       for (const key in update) {
-        const newKey = key
-          .replace('xaxis', this.props.xaxis)
-          .replace('yaxis', this.props.yaxis);
+        const newKey = key.replace('xaxis', this.props.xaxis).replace('yaxis', this.props.yaxis);
         newUpdate[newKey] = update[key];
       }
       this.context.updateContainer(newUpdate);
     }
 
     render() {
-      return (
-        <WrappedComponent name={this.name} icon={this.icon} {...this.props} />
-      );
+      return <WrappedComponent name={this.name} icon={this.icon} {...this.props} />;
     }
   }
 
-  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(WrappedComponent)}`;
 
   SubplotConnectedComponent.propTypes = {
     xaxis: PropTypes.string.isRequired,
diff --git a/src/lib/connectImageToLayout.js b/src/lib/connectImageToLayout.js
index cd8d04e17..f2517a15f 100644
--- a/src/lib/connectImageToLayout.js
+++ b/src/lib/connectImageToLayout.js
@@ -30,9 +30,7 @@ export default function connectImageToLayout(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`images[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`images[].${attr}`),
         updateContainer: this.updateImage,
         deleteContainer: this.deleteImage,
         container: this.container,
@@ -64,9 +62,7 @@ export default function connectImageToLayout(WrappedComponent) {
     }
   }
 
-  ImageConnectedComponent.displayName = `ImageConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  ImageConnectedComponent.displayName = `ImageConnected${getDisplayName(WrappedComponent)}`;
 
   ImageConnectedComponent.propTypes = {
     imageIndex: PropTypes.number.isRequired,
diff --git a/src/lib/connectLayoutToPlot.js b/src/lib/connectLayoutToPlot.js
index 67e7d60f2..276f2ddde 100644
--- a/src/lib/connectLayoutToPlot.js
+++ b/src/lib/connectLayoutToPlot.js
@@ -25,10 +25,7 @@ export default function connectLayoutToPlot(WrappedComponent) {
         getValObject: attr =>
           !plotly
             ? null
-            : plotly.PlotSchema.getLayoutValObject(
-                fullLayout,
-                nestedProperty({}, attr).parts
-              ),
+            : plotly.PlotSchema.getLayoutValObject(fullLayout, nestedProperty({}, attr).parts),
         updateContainer,
         container: layout,
         fullContainer: fullLayout,
@@ -40,9 +37,7 @@ export default function connectLayoutToPlot(WrappedComponent) {
     }
   }
 
-  LayoutConnectedComponent.displayName = `LayoutConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  LayoutConnectedComponent.displayName = `LayoutConnected${getDisplayName(WrappedComponent)}`;
 
   LayoutConnectedComponent.contextTypes = {
     layout: PropTypes.object,
diff --git a/src/lib/connectNonCartesianSubplotToLayout.js b/src/lib/connectNonCartesianSubplotToLayout.js
index 738b60b6c..121fb349c 100644
--- a/src/lib/connectNonCartesianSubplotToLayout.js
+++ b/src/lib/connectNonCartesianSubplotToLayout.js
@@ -1,10 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {
-  getDisplayName,
-  plotlyTraceToCustomTrace,
-  renderTraceIcon,
-} from '../lib';
+import {getDisplayName, plotlyTraceToCustomTrace, renderTraceIcon} from '../lib';
 
 export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
   class SubplotConnectedComponent extends Component {
@@ -45,10 +41,7 @@ export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
            * _fullData as that is where the rest of our code expects to find its
            * values.
           */
-          if (
-            trace.transforms &&
-            trace.transforms.every(t => t.type === 'fit')
-          ) {
+          if (trace.transforms && trace.transforms.every(t => t.type === 'fit')) {
             fullData[i]._fullInput = fullData[i];
           }
 
@@ -85,15 +78,11 @@ export default function connectNonCartesianSubplotToLayout(WrappedComponent) {
     }
 
     render() {
-      return (
-        <WrappedComponent name={this.name} icon={this.icon} {...this.props} />
-      );
+      return <WrappedComponent name={this.name} icon={this.icon} {...this.props} />;
     }
   }
 
-  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  SubplotConnectedComponent.displayName = `SubplotConnected${getDisplayName(WrappedComponent)}`;
 
   SubplotConnectedComponent.propTypes = {
     subplot: PropTypes.string.isRequired,
diff --git a/src/lib/connectRangeSelectorToAxis.js b/src/lib/connectRangeSelectorToAxis.js
index 49442df0b..977a84de9 100644
--- a/src/lib/connectRangeSelectorToAxis.js
+++ b/src/lib/connectRangeSelectorToAxis.js
@@ -21,9 +21,7 @@ export default function connectRangeSelectorToAxis(WrappedComponent) {
       const {rangeselectorIndex} = props;
       const {container, fullContainer} = context;
 
-      const rangeselectors = container.rangeselector
-        ? container.rangeselector.buttons || []
-        : [];
+      const rangeselectors = container.rangeselector ? container.rangeselector.buttons || [] : [];
       const fullRangeselectors = fullContainer.rangeselector
         ? fullContainer.rangeselector.buttons || []
         : [];
diff --git a/src/lib/connectShapeToLayout.js b/src/lib/connectShapeToLayout.js
index 87c9cce67..d093686a9 100644
--- a/src/lib/connectShapeToLayout.js
+++ b/src/lib/connectShapeToLayout.js
@@ -30,9 +30,7 @@ export default function connectShapeToLayout(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`shapes[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`shapes[].${attr}`),
         updateContainer: this.updateShape,
         deleteContainer: this.deleteShape,
         container: this.container,
@@ -64,9 +62,7 @@ export default function connectShapeToLayout(WrappedComponent) {
     }
   }
 
-  ShapeConnectedComponent.displayName = `ShapeConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  ShapeConnectedComponent.displayName = `ShapeConnected${getDisplayName(WrappedComponent)}`;
 
   ShapeConnectedComponent.propTypes = {
     shapeIndex: PropTypes.number.isRequired,
diff --git a/src/lib/connectSliderToLayout.js b/src/lib/connectSliderToLayout.js
index cef5acf17..d42a7bde3 100644
--- a/src/lib/connectSliderToLayout.js
+++ b/src/lib/connectSliderToLayout.js
@@ -27,9 +27,7 @@ export default function connectSliderToLayout(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`sliders[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`sliders[].${attr}`),
         updateContainer: this.updateSlider,
         container: this.container,
         fullContainer: this.fullContainer,
@@ -51,9 +49,7 @@ export default function connectSliderToLayout(WrappedComponent) {
     }
   }
 
-  SliderConnectedComponent.displayName = `SliderConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  SliderConnectedComponent.displayName = `SliderConnected${getDisplayName(WrappedComponent)}`;
 
   SliderConnectedComponent.propTypes = {
     sliderIndex: PropTypes.number.isRequired,
diff --git a/src/lib/connectToContainer.js b/src/lib/connectToContainer.js
index 40a249754..0a5fedee5 100644
--- a/src/lib/connectToContainer.js
+++ b/src/lib/connectToContainer.js
@@ -46,11 +46,7 @@ export default function connectToContainer(WrappedComponent, config = {}) {
     setLocals(props, context) {
       this.plotProps = unpackPlotProps(props, context);
       this.attr = props.attr;
-      ContainerConnectedComponent.modifyPlotProps(
-        props,
-        context,
-        this.plotProps
-      );
+      ContainerConnectedComponent.modifyPlotProps(props, context, this.plotProps);
     }
 
     getChildContext() {
@@ -65,11 +61,7 @@ export default function connectToContainer(WrappedComponent, config = {}) {
       // props. However pass plotProps as a specific prop in case inner component
       // is also wrapped by a component that `unpackPlotProps`. That way inner
       // component can skip computation as it can see plotProps is already defined.
-      const {plotProps = this.plotProps, ...props} = Object.assign(
-        {},
-        this.plotProps,
-        this.props
-      );
+      const {plotProps = this.plotProps, ...props} = Object.assign({}, this.plotProps, this.props);
       if (props.isVisible) {
         return <WrappedComponent {...props} plotProps={plotProps} />;
       }
@@ -78,9 +70,7 @@ export default function connectToContainer(WrappedComponent, config = {}) {
     }
   }
 
-  ContainerConnectedComponent.displayName = `ContainerConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  ContainerConnectedComponent.displayName = `ContainerConnected${getDisplayName(WrappedComponent)}`;
 
   ContainerConnectedComponent.contextTypes = containerConnectedContextTypes;
   ContainerConnectedComponent.childContextTypes = {
diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js
index e315ecbad..96be589c2 100644
--- a/src/lib/connectTraceToPlot.js
+++ b/src/lib/connectTraceToPlot.js
@@ -28,9 +28,7 @@ export default function connectTraceToPlot(WrappedComponent) {
       let fullTrace = {};
 
       for (let i = 0; i < context.fullData.length; i++) {
-        if (
-          this.props.traceIndexes[0] === context.fullData[i]._fullInput.index
-        ) {
+        if (this.props.traceIndexes[0] === context.fullData[i]._fullInput.index) {
           /*
            * Fit transforms are custom transforms in our custom plotly.js bundle,
            * they are different from others as they create an extra trace in the
@@ -46,10 +44,7 @@ export default function connectTraceToPlot(WrappedComponent) {
            * _fullData as that is where the rest of our code expects to find its
            * values.
           */
-          if (
-            trace.transforms &&
-            trace.transforms.every(t => t.type === 'fit')
-          ) {
+          if (trace.transforms && trace.transforms.every(t => t.type === 'fit')) {
             context.fullData[i]._fullInput = context.fullData[i];
           }
 
@@ -74,10 +69,7 @@ export default function connectTraceToPlot(WrappedComponent) {
         getValObject: attr =>
           !plotly
             ? null
-            : plotly.PlotSchema.getTraceValObject(
-                fullTrace,
-                nestedProperty({}, attr).parts
-              ),
+            : plotly.PlotSchema.getTraceValObject(fullTrace, nestedProperty({}, attr).parts),
         updateContainer: this.updateTrace,
         deleteContainer: this.deleteTrace,
         container: trace,
@@ -120,13 +112,10 @@ export default function connectTraceToPlot(WrappedComponent) {
     updateTrace(update) {
       if (this.context.onUpdate) {
         const splitTraceGroup = this.props.fullDataArrayPosition
-          ? this.props.fullDataArrayPosition.map(
-              p => this.context.fullData[p]._group
-            )
+          ? this.props.fullDataArrayPosition.map(p => this.context.fullData[p]._group)
           : null;
 
-        const containsAnSrc =
-          Object.keys(update).filter(a => a.endsWith('src')).length > 0;
+        const containsAnSrc = Object.keys(update).filter(a => a.endsWith('src')).length > 0;
 
         if (Array.isArray(update)) {
           update.forEach((u, i) => {
@@ -181,15 +170,14 @@ export default function connectTraceToPlot(WrappedComponent) {
         const subplotNames =
           subplotType === 'cartesian'
             ? [currentTrace.xaxis || 'xaxis', currentTrace.yaxis || 'yaxis']
-            : currentTrace[SUBPLOT_TO_ATTR[subplotType].data] ||
-              SUBPLOT_TO_ATTR[subplotType].data;
+            : currentTrace[SUBPLOT_TO_ATTR[subplotType].data] || SUBPLOT_TO_ATTR[subplotType].data;
 
         const isSubplotUsedAnywhereElse = (subplotType, subplotName) =>
           this.context.fullData.some(
             trace =>
               (trace[SUBPLOT_TO_ATTR[subplotType].data] === subplotName ||
-                (((subplotType === 'xaxis' || subplotType === 'yaxis') &&
-                  subplotName.charAt(1)) === '' ||
+                (((subplotType === 'xaxis' || subplotType === 'yaxis') && subplotName.charAt(1)) ===
+                  '' ||
                   (subplotName.split(subplotType)[1] === '' &&
                     trace[SUBPLOT_TO_ATTR[subplotType].data] === null))) &&
               trace.index !== this.props.traceIndexes[0]
@@ -223,15 +211,11 @@ export default function connectTraceToPlot(WrappedComponent) {
     }
 
     render() {
-      return (
-        <WrappedComponent name={this.name} icon={this.icon} {...this.props} />
-      );
+      return <WrappedComponent name={this.name} icon={this.icon} {...this.props} />;
     }
   }
 
-  TraceConnectedComponent.displayName = `TraceConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  TraceConnectedComponent.displayName = `TraceConnected${getDisplayName(WrappedComponent)}`;
 
   TraceConnectedComponent.propTypes = {
     traceIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
diff --git a/src/lib/connectTransformToTrace.js b/src/lib/connectTransformToTrace.js
index e4dd8b3af..a24b16b41 100644
--- a/src/lib/connectTransformToTrace.js
+++ b/src/lib/connectTransformToTrace.js
@@ -30,9 +30,7 @@ export default function connectTransformToTrace(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`transforms[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`transforms[].${attr}`),
         updateContainer: this.updateTransform,
         deleteContainer: this.deleteTransform,
         container: this.container,
@@ -67,9 +65,7 @@ export default function connectTransformToTrace(WrappedComponent) {
     }
   }
 
-  TransformConnectedComponent.displayName = `TransformConnected${getDisplayName(
-    WrappedComponent
-  )}`;
+  TransformConnectedComponent.displayName = `TransformConnected${getDisplayName(WrappedComponent)}`;
 
   TransformConnectedComponent.propTypes = {
     transformIndex: PropTypes.number.isRequired,
diff --git a/src/lib/connectUpdateMenuToLayout.js b/src/lib/connectUpdateMenuToLayout.js
index d1d38ae5a..9b1229dd7 100644
--- a/src/lib/connectUpdateMenuToLayout.js
+++ b/src/lib/connectUpdateMenuToLayout.js
@@ -27,9 +27,7 @@ export default function connectUpdateMenuToLayout(WrappedComponent) {
     getChildContext() {
       return {
         getValObject: attr =>
-          !this.context.getValObject
-            ? null
-            : this.context.getValObject(`updatemenus[].${attr}`),
+          !this.context.getValObject ? null : this.context.getValObject(`updatemenus[].${attr}`),
         updateContainer: this.updateUpdateMenu,
         container: this.container,
         fullContainer: this.fullContainer,
diff --git a/src/lib/customTraceType.js b/src/lib/customTraceType.js
index 5b1e3017d..9b2a8b684 100644
--- a/src/lib/customTraceType.js
+++ b/src/lib/customTraceType.js
@@ -16,9 +16,7 @@ export function plotlyTraceToCustomTrace(trace) {
 
   if (
     (type === 'scatter' || type === 'scattergl') &&
-    ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(
-      trace.fill
-    )
+    ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(trace.fill)
   ) {
     return 'area';
   } else if (
diff --git a/src/lib/dereference.js b/src/lib/dereference.js
index 555cf2e42..90618eeef 100644
--- a/src/lib/dereference.js
+++ b/src/lib/dereference.js
@@ -3,11 +3,7 @@ import {maybeTransposeData} from './index';
 
 const SRC_ATTR_PATTERN = /src$/;
 
-export default function dereference(
-  container,
-  dataSources,
-  config = {deleteKeys: false}
-) {
+export default function dereference(container, dataSources, config = {deleteKeys: false}) {
   const replacer = (key, parent, srcPath) => {
     if (!SRC_ATTR_PATTERN.test(key)) {
       return;
diff --git a/src/lib/getAllAxes.js b/src/lib/getAllAxes.js
index 7cacbf07b..f3afa92bd 100644
--- a/src/lib/getAllAxes.js
+++ b/src/lib/getAllAxes.js
@@ -79,12 +79,8 @@ export function axisIdToAxisName(id) {
 }
 
 function getAxisNumber(axis) {
-  const splitSubplot = axis._subplot
-    ? axis._subplot.split(axis._axisGroup)
-    : [];
-  return splitSubplot[1]
-    ? Number(splitSubplot[1])
-    : axis._name.split('axis')[1];
+  const splitSubplot = axis._subplot ? axis._subplot.split(axis._axisGroup) : [];
+  return splitSubplot[1] ? Number(splitSubplot[1]) : axis._name.split('axis')[1];
 }
 
 export function getAxisTitle(axis) {
@@ -102,8 +98,7 @@ function getSubplotNumber(subplot, type) {
 
 export function getSubplotTitle(subplot, type, _) {
   const axisName = subplotName(type, _);
-  const subplotNumber =
-    getSubplotNumber(subplot, SUBPLOT_TO_ATTR[type].layout) || '';
+  const subplotNumber = getSubplotNumber(subplot, SUBPLOT_TO_ATTR[type].layout) || '';
 
   return `${axisName} ${subplotNumber}`;
 }
diff --git a/src/lib/index.js b/src/lib/index.js
index 87a776c16..4209e66b3 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -11,9 +11,7 @@ import connectTransformToTrace from './connectTransformToTrace';
 import connectAggregationToTransform from './connectAggregationToTransform';
 import connectAxesToLayout from './connectAxesToLayout';
 import connectLayoutToPlot from './connectLayoutToPlot';
-import connectToContainer, {
-  containerConnectedContextTypes,
-} from './connectToContainer';
+import connectToContainer, {containerConnectedContextTypes} from './connectToContainer';
 import {computeTraceOptionsFromSchema} from './computeTraceOptionsFromSchema';
 import connectTraceToPlot from './connectTraceToPlot';
 import dereference from './dereference';
@@ -27,20 +25,10 @@ import localize, {localizeString} from './localize';
 import tinyColor from 'tinycolor2';
 import unpackPlotProps from './unpackPlotProps';
 import walkObject, {isPlainObject} from './walkObject';
-import {
-  traceTypeToPlotlyInitFigure,
-  plotlyTraceToCustomTrace,
-} from './customTraceType';
+import {traceTypeToPlotlyInitFigure, plotlyTraceToCustomTrace} from './customTraceType';
 import * as PlotlyIcons from 'plotly-icons';
 import striptags from './striptags';
-import {
-  capitalize,
-  lowerCase,
-  upperCase,
-  removeNonWord,
-  camelCase,
-  pascalCase,
-} from './strings';
+import {capitalize, lowerCase, upperCase, removeNonWord, camelCase, pascalCase} from './strings';
 import {getColorscale} from 'react-colorscales';
 
 const TOO_LIGHT_FACTOR = 0.8;
@@ -75,9 +63,7 @@ function renderTraceIcon(trace, prefix = 'Plot') {
     tempTrace.endsWith(gl) ? tempTrace.slice(0, -gl.length) : tempTrace
   )}Icon`;
 
-  return PlotlyIcons[componentName]
-    ? PlotlyIcons[componentName]
-    : PlotlyIcons.PlotLineIcon;
+  return PlotlyIcons[componentName] ? PlotlyIcons[componentName] : PlotlyIcons.PlotLineIcon;
 }
 
 function transpose(originalArray) {
@@ -86,9 +72,7 @@ function transpose(originalArray) {
     return originalArray.map(a => [a]);
   }
 
-  let longestArrayItem = Array.isArray(originalArray[0])
-    ? originalArray[0].length
-    : 1;
+  let longestArrayItem = Array.isArray(originalArray[0]) ? originalArray[0].length : 1;
 
   originalArray.forEach(a => {
     // if it's not an array, it's a string
@@ -151,15 +135,9 @@ function maybeTransposeData(data, srcAttributePath, traceType) {
 
   const isTransposable2DArray =
     srcAttributePath.endsWith('zsrc') &&
-    [
-      'contour',
-      'contourgl',
-      'heatmap',
-      'heatmapgl',
-      'surface',
-      'carpet',
-      'contourcarpet',
-    ].includes(traceType);
+    ['contour', 'contourgl', 'heatmap', 'heatmapgl', 'surface', 'carpet', 'contourcarpet'].includes(
+      traceType
+    );
 
   if (isTransposable2DArray) {
     return transpose(data);
@@ -188,12 +166,7 @@ function maybeAdjustSrc(src, srcAttributePath, traceType, config) {
   return config && config.fromSrc ? config.fromSrc(src, traceType) : src;
 }
 
-function adjustColorscale(
-  colorscale,
-  numberOfNeededColors,
-  colorscaleType,
-  config
-) {
+function adjustColorscale(colorscale, numberOfNeededColors, colorscaleType, config) {
   if (config && config.repeat) {
     if (numberOfNeededColors < colorscale.length) {
       return colorscale.slice(0, numberOfNeededColors);
@@ -208,13 +181,7 @@ function adjustColorscale(
       .slice(0, numberOfNeededColors);
   }
 
-  return getColorscale(
-    colorscale,
-    numberOfNeededColors,
-    null,
-    null,
-    colorscaleType
-  );
+  return getColorscale(colorscale, numberOfNeededColors, null, null, colorscaleType);
 }
 
 export {
diff --git a/src/lib/striptags.js b/src/lib/striptags.js
index b73913319..d6d288ef5 100644
--- a/src/lib/striptags.js
+++ b/src/lib/striptags.js
@@ -215,10 +215,7 @@
       while ((match = ALLOWED_TAGS_REGEX.exec(allowable_tags))) {
         tag_set.add(match[1]);
       }
-    } else if (
-      !Symbol.nonNative &&
-      typeof allowable_tags[Symbol.iterator] === 'function'
-    ) {
+    } else if (!Symbol.nonNative && typeof allowable_tags[Symbol.iterator] === 'function') {
       tag_set = new Set(allowable_tags);
     } else if (typeof allowable_tags.forEach === 'function') {
       // IE11 compatible
diff --git a/src/lib/test-utils.js b/src/lib/test-utils.js
index 66a1c80f2..d235cd7d3 100644
--- a/src/lib/test-utils.js
+++ b/src/lib/test-utils.js
@@ -59,10 +59,7 @@ const fixtures = {
         x1: [1, 2, 3],
         y1: [2, 3, 4],
       },
-      dataSourceOptions: [
-        {label: 'xCol', value: 'x1'},
-        {label: 'yCol', value: 'y1'},
-      ],
+      dataSourceOptions: [{label: 'xCol', value: 'x1'}, {label: 'yCol', value: 'y1'}],
       graphDiv: {
         data: [
           {
@@ -84,24 +81,16 @@ const fixtures = {
         x1: [1, 2, 3],
         y1: [2, 3, 4],
       },
-      dataSourceOptions: [
-        {label: 'xCol', value: 'x1'},
-        {label: 'yCol', value: 'y1'},
-      ],
+      dataSourceOptions: [{label: 'xCol', value: 'x1'}, {label: 'yCol', value: 'y1'}],
       graphDiv: {
-        data: [
-          {type: 'pie', mode: 'markers', labelssrc: 'x1', valuessrc: 'y1'},
-        ],
+        data: [{type: 'pie', mode: 'markers', labelssrc: 'x1', valuessrc: 'y1'}],
         layout: {},
       },
     });
   },
 };
 
-function applyConfig(
-  config = {},
-  {graphDiv: {data, layout}, dataSourceOptions, dataSources}
-) {
+function applyConfig(config = {}, {graphDiv: {data, layout}, dataSourceOptions, dataSources}) {
   if (config.layout) {
     extendDeep(layout, config.layout);
   }
@@ -151,11 +140,4 @@ function setupGraphDiv(figure) {
   return gd;
 }
 
-export {
-  fixtures,
-  plotly,
-  EditorControls as TestEditor,
-  mount,
-  shallow,
-  setupGraphDiv,
-};
+export {fixtures, plotly, EditorControls as TestEditor, mount, shallow, setupGraphDiv};
diff --git a/src/lib/walkObject.js b/src/lib/walkObject.js
index 64edfea16..907a453fa 100644
--- a/src/lib/walkObject.js
+++ b/src/lib/walkObject.js
@@ -10,10 +10,7 @@ function doArrayWalk(key, value, walkArrays, walkArraysMatchingKeys) {
     return false;
   }
 
-  if (
-    walkArrays ||
-    (walkArraysMatchingKeys && walkArraysMatchingKeys.includes(key))
-  ) {
+  if (walkArrays || (walkArraysMatchingKeys && walkArraysMatchingKeys.includes(key))) {
     return true;
   }
 
@@ -138,10 +135,7 @@ function _walkObject(object, callback, path, config) {
     }
 
     const value = object[key];
-    if (
-      isPlainObject(value) ||
-      doArrayWalk(key, value, walkArrays, walkArraysMatchingKeys)
-    ) {
+    if (isPlainObject(value) || doArrayWalk(key, value, walkArrays, walkArraysMatchingKeys)) {
       _walkObject(value, callback, path.set(object, key), config);
     }
   });
diff --git a/src/locales/xx.js b/src/locales/xx.js
index 09746fa29..078abae1f 100644
--- a/src/locales/xx.js
+++ b/src/locales/xx.js
@@ -33,14 +33,10 @@ export default {
   'Carpet Scatter': '⇚⇚Carpet Scatter⇚⇚',
   Center: '⇚Center⇚',
   Choropleth: '⇚⇚Choropleth⇚⇚',
-  'Click to enter Colorscale title':
-    '⇚⇚⇚⇚⇚Click to enter Colorscale title⇚⇚⇚⇚⇚',
-  'Click to enter Component A title':
-    '⇚⇚⇚⇚⇚⇚Click to enter Component A title⇚⇚⇚⇚⇚⇚',
-  'Click to enter Component B title':
-    '⇚⇚⇚⇚⇚⇚Click to enter Component B title⇚⇚⇚⇚⇚⇚',
-  'Click to enter Component C title':
-    '⇚⇚⇚⇚⇚⇚Click to enter Component C title⇚⇚⇚⇚⇚⇚',
+  'Click to enter Colorscale title': '⇚⇚⇚⇚⇚Click to enter Colorscale title⇚⇚⇚⇚⇚',
+  'Click to enter Component A title': '⇚⇚⇚⇚⇚⇚Click to enter Component A title⇚⇚⇚⇚⇚⇚',
+  'Click to enter Component B title': '⇚⇚⇚⇚⇚⇚Click to enter Component B title⇚⇚⇚⇚⇚⇚',
+  'Click to enter Component C title': '⇚⇚⇚⇚⇚⇚Click to enter Component C title⇚⇚⇚⇚⇚⇚',
   'Click to enter Plot title': '⇚⇚⇚⇚Click to enter Plot title⇚⇚⇚⇚',
   'Click to enter X axis title': '⇚⇚⇚⇚⇚Click to enter X axis title⇚⇚⇚⇚⇚',
   'Click to enter Y axis title': '⇚⇚⇚⇚⇚Click to enter Y axis title⇚⇚⇚⇚⇚',
@@ -143,8 +139,7 @@ export default {
     '⇚⇚⇚⇚⇚⇚⇚⇚⇚Return to the Graph > Create menu above to add data.⇚⇚⇚⇚⇚⇚⇚⇚⇚',
   Reversed: '⇚Reversed⇚',
   'Rich Text': '⇚⇚Rich Text⇚⇚',
-  'Rich text is incompatible with LaTeX.':
-    '⇚⇚⇚⇚⇚⇚Rich text is incompatible with LaTeX.⇚⇚⇚⇚⇚⇚',
+  'Rich text is incompatible with LaTeX.': '⇚⇚⇚⇚⇚⇚Rich text is incompatible with LaTeX.⇚⇚⇚⇚⇚⇚',
   Right: '⇚Right⇚',
   Sankey: '⇚Sankey⇚',
   'Satellite Map': '⇚⇚Satellite Map⇚⇚',
@@ -175,16 +170,14 @@ export default {
     '⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚The positioning inputs are relative to the anchor points on the text box.⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚',
   'This input has multiple values associated with it. Changing this setting will override these custom inputs.':
     '⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚This input has multiple values associated with it. Changing this setting will override these custom inputs.⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚⇚',
-  'This trace does not yet have any data.':
-    '⇚⇚⇚⇚⇚⇚⇚This trace does not yet have any data.⇚⇚⇚⇚⇚⇚⇚',
+  'This trace does not yet have any data.': '⇚⇚⇚⇚⇚⇚⇚This trace does not yet have any data.⇚⇚⇚⇚⇚⇚⇚',
   'Tick Labels': '⇚⇚Tick Labels⇚⇚',
   'Tick Markers': '⇚⇚Tick Markers⇚⇚',
   Title: '⇚Title⇚',
   'Title and Fonts': '⇚⇚⇚Title and Fonts⇚⇚⇚',
   Titles: '⇚Titles⇚',
   'Toggle Spike Lines': '⇚⇚⇚Toggle Spike Lines⇚⇚⇚',
-  'Toggle show closest data on hover':
-    '⇚⇚⇚⇚⇚⇚Toggle show closest data on hover⇚⇚⇚⇚⇚⇚',
+  'Toggle show closest data on hover': '⇚⇚⇚⇚⇚⇚Toggle show closest data on hover⇚⇚⇚⇚⇚⇚',
   Top: '⇚Top⇚',
   Trace: '⇚Trace⇚',
   'Trace Order': '⇚⇚Trace Order⇚⇚',
diff --git a/src/shame.js b/src/shame.js
index 1608d0db8..e5ce29582 100644
--- a/src/shame.js
+++ b/src/shame.js
@@ -50,24 +50,18 @@ export const shamefullyAdjustAxisRef = (graphDiv, payload) => {
       const axis = a.charAt(0);
       const axisIdNumber = Number(a.slice(1));
 
-      nestedProperty(graphDiv.layout, `${axis}axis${axisIdNumber || ''}`).set(
-        null
-      );
+      nestedProperty(graphDiv.layout, `${axis}axis${axisIdNumber || ''}`).set(null);
       Object.keys(graphDiv.layout)
         .filter(key => key.startsWith(axis + 'axis'))
         .forEach(key => {
-          if (
-            nestedProperty(graphDiv.layout, `${key}.overlaying`).get() === a
-          ) {
+          if (nestedProperty(graphDiv.layout, `${key}.overlaying`).get() === a) {
             nestedProperty(graphDiv.layout, `${key}.overlaying`).set(null);
           }
         });
     });
   }
   if (payload.subplotToBeGarbageCollected) {
-    nestedProperty(graphDiv.layout, payload.subplotToBeGarbageCollected).set(
-      null
-    );
+    nestedProperty(graphDiv.layout, payload.subplotToBeGarbageCollected).set(null);
   }
 };
 
@@ -98,30 +92,21 @@ export const shamefullyAdjustGeo = ({layout}, {update}) => {
 export const shamefullyAddTableColumns = (graphDiv, {traceIndexes, update}) => {
   if (
     update['cells.values'] &&
-    (!graphDiv.data[traceIndexes[0]].header ||
-      !graphDiv.data[traceIndexes[0]].header.valuessrc)
+    (!graphDiv.data[traceIndexes[0]].header || !graphDiv.data[traceIndexes[0]].header.valuessrc)
   ) {
     update['header.values'] = update['cells.valuessrc'];
   } else if (update['header.values'] === null) {
-    update['header.values'] =
-      graphDiv.data[traceIndexes[0]].cells.valuessrc || null;
-  } else if (
-    update['cells.values'] === null &&
-    !graphDiv.data[traceIndexes[0]].header.valuessrc
-  ) {
+    update['header.values'] = graphDiv.data[traceIndexes[0]].cells.valuessrc || null;
+  } else if (update['cells.values'] === null && !graphDiv.data[traceIndexes[0]].header.valuessrc) {
     update['header.values'] = null;
   }
 };
 
-export const shamefullyAdjustSplitStyleTargetContainers = (
-  graphDiv,
-  {traceIndexes, update}
-) => {
+export const shamefullyAdjustSplitStyleTargetContainers = (graphDiv, {traceIndexes, update}) => {
   for (const attr in update) {
     if (attr && attr.startsWith('transforms') && attr.endsWith('groups')) {
       const transformIndex = parseInt(attr.split('[')[1], 10);
-      const transform =
-        graphDiv.data[traceIndexes[0]].transforms[transformIndex];
+      const transform = graphDiv.data[traceIndexes[0]].transforms[transformIndex];
 
       if (transform && transform.type === 'groupby' && transform.styles) {
         // Create style containers for all groups
@@ -151,12 +136,7 @@ export const shamefullyAdjustSplitStyleTargetContainers = (
   }
 };
 
-export const shamefullyCreateSplitStyleProps = (
-  graphDiv,
-  attr,
-  traceIndex,
-  splitTraceGroup
-) => {
+export const shamefullyCreateSplitStyleProps = (graphDiv, attr, traceIndex, splitTraceGroup) => {
   if (!Array.isArray(splitTraceGroup)) {
     splitTraceGroup = [splitTraceGroup]; // eslint-disable-line
   }
@@ -172,18 +152,14 @@ export const shamefullyCreateSplitStyleProps = (
   function getProp(group) {
     let indexOfStyleObject = null;
 
-    graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles.forEach(
-      (s, i) => {
-        if (s.target.toString() === group) {
-          indexOfStyleObject = i;
-        }
+    graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles.forEach((s, i) => {
+      if (s.target.toString() === group) {
+        indexOfStyleObject = i;
       }
-    );
+    });
 
     let path =
-      graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles[
-        indexOfStyleObject
-      ].value;
+      graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles[indexOfStyleObject].value;
 
     attr.split('.').forEach(p => {
       if (!path[p]) {
@@ -193,9 +169,7 @@ export const shamefullyCreateSplitStyleProps = (
     });
 
     return nestedProperty(
-      graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles[
-        indexOfStyleObject
-      ].value,
+      graphDiv.data[traceIndex].transforms[indexOfSplitTransform].styles[indexOfStyleObject].value,
       attr
     );
   }