From 2dabcf3d83d323cb90b4c74c677aa33a209195fe Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Wed, 8 Aug 2018 15:59:26 -0400
Subject: [PATCH 1/8] add geo layout to subplot panel

---
 src/default_panels/GraphSubplotsPanel.js | 114 +++++++++++++----------
 1 file changed, 65 insertions(+), 49 deletions(-)

diff --git a/src/default_panels/GraphSubplotsPanel.js b/src/default_panels/GraphSubplotsPanel.js
index 3aa101da5..b90997482 100644
--- a/src/default_panels/GraphSubplotsPanel.js
+++ b/src/default_panels/GraphSubplotsPanel.js
@@ -67,55 +67,6 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Plot Background')} attr="bgcolor" />
     </PlotlySection>
 
-    <PlotlySection name={_('Map Options')}>
-      <Dropdown
-        label={_('Map Region')}
-        attr="scope"
-        options={[
-          {label: _('World'), value: 'world'},
-          {label: _('USA'), value: 'usa'},
-          {label: _('Europe'), value: 'europe'},
-          {label: _('Asia'), value: 'asia'},
-          {label: _('Africa'), value: 'africa'},
-          {label: _('North America'), value: 'north america'},
-          {label: _('South America'), value: 'south america'},
-        ]}
-        clearable={false}
-      />
-      <Dropdown
-        label={_('Projection')}
-        attr="projection.type"
-        clearable={false}
-        options={[
-          {label: _('Equirectangular'), value: 'equirectangular'},
-          {label: _('Mercator'), value: 'mercator'},
-          {label: _('Orthographic'), value: 'orthographic'},
-          {label: _('Natural Earth'), value: 'natural earth'},
-          {label: _('Albers USA'), value: 'albers usa'},
-          {label: _('Winkel Tripel'), value: 'winkel tripel'},
-          {label: _('Robinson'), value: 'robinson'},
-          {label: _('Miller'), value: 'miller'},
-          {label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
-          {label: _('Eckert 4'), value: 'eckert4'},
-          {label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
-          {
-            label: _('Azimuthal Equidistant'),
-            value: 'azimuthal equidistant',
-          },
-          {label: _('Conic Equal Area'), value: 'conic equal area'},
-          {label: _('Conic Conformal'), value: 'conic conformal'},
-          {label: _('Conic Equidistant'), value: 'conic equidistant'},
-          {label: _('Gnomonic'), value: 'gnomonic'},
-          {label: _('Stereographic'), value: 'stereographic'},
-          {label: _('Mollweide'), value: 'mollweide'},
-          {label: _('Hammer'), value: 'hammer'},
-          {label: _('Transverse Mercator'), value: 'transverse mercator'},
-          {label: _('Aitoff'), value: 'aitoff'},
-          {label: _('Sinusoidal'), value: 'sinusoidal'},
-        ]}
-      />
-    </PlotlySection>
-
     <PlotlySection name={_('Country Borders')} attr="showcountries">
       <Radio
         attr="showcountries"
@@ -190,6 +141,7 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <Numeric label={_('Width')} attr="riverwidth" units="px" />
       <ColorPicker label={_('Color')} attr="rivercolor" />
     </PlotlySection>
+
     <PlotlySection name={_('Map Frame')} attr="showframe">
       <Radio
         attr="showframe"
@@ -201,6 +153,70 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <Numeric label={_('Width')} attr="framewidth" units="px" />
       <ColorPicker label={_('Color')} attr="framecolor" />
     </PlotlySection>
+
+    <PlotlySection name={_('Map Options')}>
+      <Dropdown
+        label={_('Region')}
+        attr="scope"
+        options={[
+          {label: _('World'), value: 'world'},
+          {label: _('USA'), value: 'usa'},
+          {label: _('Europe'), value: 'europe'},
+          {label: _('Asia'), value: 'asia'},
+          {label: _('Africa'), value: 'africa'},
+          {label: _('North America'), value: 'north america'},
+          {label: _('South America'), value: 'south america'},
+        ]}
+        clearable={false}
+      />
+      <Dropdown
+        label={_('Projection')}
+        attr="projection.type"
+        clearable={false}
+        options={[
+          {label: _('Equirectangular'), value: 'equirectangular'},
+          {label: _('Mercator'), value: 'mercator'},
+          {label: _('Orthographic'), value: 'orthographic'},
+          {label: _('Natural Earth'), value: 'natural earth'},
+          {label: _('Albers USA'), value: 'albers usa'},
+          {label: _('Winkel Tripel'), value: 'winkel tripel'},
+          {label: _('Robinson'), value: 'robinson'},
+          {label: _('Miller'), value: 'miller'},
+          {label: _('Kavrayskiy 7'), value: 'kavrayskiy7'},
+          {label: _('Eckert 4'), value: 'eckert4'},
+          {label: _('Azimuthal Equal Area'), value: 'azimuthal equal area'},
+          {
+            label: _('Azimuthal Equidistant'),
+            value: 'azimuthal equidistant',
+          },
+          {label: _('Conic Equal Area'), value: 'conic equal area'},
+          {label: _('Conic Conformal'), value: 'conic conformal'},
+          {label: _('Conic Equidistant'), value: 'conic equidistant'},
+          {label: _('Gnomonic'), value: 'gnomonic'},
+          {label: _('Stereographic'), value: 'stereographic'},
+          {label: _('Mollweide'), value: 'mollweide'},
+          {label: _('Hammer'), value: 'hammer'},
+          {label: _('Transverse Mercator'), value: 'transverse mercator'},
+          {label: _('Aitoff'), value: 'aitoff'},
+          {label: _('Sinusoidal'), value: 'sinusoidal'},
+        ]}
+      />
+      <Radio
+        label={_('Resolution')}
+        attr="resolution"
+        options={[
+          {label: _('1:110,000,000'), value: 110},
+          {label: _('1:50,000,000'), value: 50},
+        ]}
+      />
+      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
+    </PlotlySection>
+
+    <PlotlySection name={_('Map Rotation')}>
+      <Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
+      <Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
+      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
+    </PlotlySection>
   </SubplotAccordion>
 );
 

From d201d734fc4a1cef6c968bac0172db3bf0724601 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Wed, 8 Aug 2018 18:11:58 -0400
Subject: [PATCH 2/8] fix: could not create notes/shapes/images on many
 non-cartesian traces

---
 src/components/fields/derived.js | 41 ++++++++++++++++++++++----------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 9fda4242c..225e4ce40 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -333,10 +333,15 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
     if (currentAxisRef === 'paper') {
       // If currentAxesRef is paper provide all axes options to user.
 
-      plotProps.options = [
-        {label: 'in pixels', value: 'pixel'},
-        ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
-      ];
+      const axes = getAllAxes(context.fullLayout).filter(a => a._id);
+      if (axes.length > 0) {
+        plotProps.options = [
+          {label: 'in pixels', value: 'pixel'},
+          ...computeAxesRefOptions(axes, props.attr),
+        ];
+      } else {
+        plotProps.isVisible = false;
+      }
     } else {
       // If currentAxesRef is an actual axes then offer that value as the only
       // axes option.
@@ -371,10 +376,15 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
       );
     }
 
-    plotProps.options = [
-      {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
-    ];
+    const axes = getAllAxes(context.fullLayout).filter(a => a._id);
+    if (axes.length > 0) {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(axes, props.attr),
+      ];
+    } else {
+      plotProps.isVisible = false;
+    }
 
     if (currentOffsetRef !== 'pixel') {
       plotProps.updatePlot = v => {
@@ -402,12 +412,17 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
 
 export const PositioningRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
-    plotProps.options = [
-      {label: 'Canvas', value: 'paper'},
-      ...computeAxesRefOptions(getAllAxes(context.fullLayout), props.attr),
-    ];
+    const axes = getAllAxes(context.fullLayout).filter(a => a._id);
+    if (axes.length > 0) {
+      plotProps.options = [
+        {label: 'Canvas', value: 'paper'},
+        ...computeAxesRefOptions(axes, props.attr),
+      ];
 
-    plotProps.clearable = false;
+      plotProps.clearable = false;
+    } else {
+      plotProps.isVisible = false;
+    }
   },
 });
 

From 7d755f30c21ecb36229765723c414776f912ad3f Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Wed, 8 Aug 2018 20:14:35 -0400
Subject: [PATCH 3/8] add localization to ALL labels

---
 src/EditorControls.js                       |  10 +-
 src/components/containers/ModalProvider.js  |  10 +-
 src/components/fields/AxesCreator.js        |   2 +-
 src/components/fields/AxesSelector.js       |   3 +-
 src/components/fields/FilterOperation.js    | 112 +++++++++++---------
 src/components/fields/derived.js            |  22 ++--
 src/components/widgets/TraceTypeSelector.js |  54 ++++++----
 src/default_panels/StyleLayoutPanel.js      |   4 +-
 src/default_panels/StyleNotesPanel.js       |   4 +-
 src/default_panels/StyleTracesPanel.js      |  12 +--
 10 files changed, 133 insertions(+), 100 deletions(-)

diff --git a/src/EditorControls.js b/src/EditorControls.js
index e21ae8f33..071c60f29 100644
--- a/src/EditorControls.js
+++ b/src/EditorControls.js
@@ -20,6 +20,9 @@ class EditorControls extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this.localize = key =>
+      localizeString(this.props.dictionaries || {}, this.props.locale, key);
+
     // we only need to compute this once.
     if (this.props.plotly) {
       this.plotSchema = this.props.plotly.PlotSchema.get();
@@ -38,8 +41,7 @@ class EditorControls extends Component {
       dataSourceValueRenderer: this.props.dataSourceValueRenderer,
       dataSourceOptionRenderer: this.props.dataSourceOptionRenderer,
       dictionaries: this.props.dictionaries || {},
-      localize: key =>
-        localizeString(this.props.dictionaries || {}, this.props.locale, key),
+      localize: this.localize,
       frames: gd._transitionData ? gd._transitionData._frames : [],
       fullData: gd._fullData,
       fullLayout: gd._fullLayout,
@@ -281,7 +283,9 @@ class EditorControls extends Component {
         break;
 
       default:
-        throw new Error('must specify an action type to handleEditorUpdate');
+        throw new Error(
+          this.localize('must specify an action type to handleEditorUpdate')
+        );
     }
   }
 
diff --git a/src/components/containers/ModalProvider.js b/src/components/containers/ModalProvider.js
index 919e3bdbd..bc46ccd0f 100644
--- a/src/components/containers/ModalProvider.js
+++ b/src/components/containers/ModalProvider.js
@@ -27,16 +27,17 @@ class ModalProvider extends React.Component {
     }
   }
 
-  openModal(component, props) {
+  openModal(component, componentProps) {
+    const {localize: _} = this.context;
     if (!component) {
-      throw Error('You need to provide a component for the modal to open!');
+      throw Error(_('You need to provide a component for the modal to open!'));
     }
     const {open} = this.state;
 
     if (!open) {
       this.setState({
         component: component,
-        componentProps: props,
+        componentProps: componentProps,
         open: true,
       });
     }
@@ -85,6 +86,9 @@ class ModalProvider extends React.Component {
 ModalProvider.propTypes = {
   children: PropTypes.node,
 };
+ModalProvider.contextTypes = {
+  localize: PropTypes.func,
+};
 ModalProvider.childContextTypes = {
   openModal: PropTypes.func,
   closeModal: PropTypes.func,
diff --git a/src/components/fields/AxesCreator.js b/src/components/fields/AxesCreator.js
index cb4e294bc..3c6f9047b 100644
--- a/src/components/fields/AxesCreator.js
+++ b/src/components/fields/AxesCreator.js
@@ -154,7 +154,7 @@ class UnconnectedAxesCreator extends Component {
           <AxisCreator
             key={index}
             attr={type}
-            label={type.charAt(0).toUpperCase() + ' Axis'}
+            label={type.charAt(0).toUpperCase() + _(' Axis')}
             options={getOptions(type)}
           />
         );
diff --git a/src/components/fields/AxesSelector.js b/src/components/fields/AxesSelector.js
index fa3134d99..8f208c634 100644
--- a/src/components/fields/AxesSelector.js
+++ b/src/components/fields/AxesSelector.js
@@ -7,10 +7,11 @@ import React, {Component} from 'react';
 class AxesSelector extends Component {
   constructor(props, context) {
     super(props, context);
+    const {localize: _} = context;
 
     if (!context.axesTargetHandler) {
       throw new Error(
-        'AxesSelector must be nested within a connectAxesToPlot component'
+        _('AxesSelector must be nested within a connectAxesToPlot component')
       );
     }
   }
diff --git a/src/components/fields/FilterOperation.js b/src/components/fields/FilterOperation.js
index 5f1fa80d9..8389a7a91 100644
--- a/src/components/fields/FilterOperation.js
+++ b/src/components/fields/FilterOperation.js
@@ -5,60 +5,38 @@ import DropdownWidget from '../widgets/Dropdown';
 import TextInput from '../widgets/TextInput';
 import {connectToContainer} from 'lib';
 
-const operators = [
-  {
-    label: 'Inequality',
-    value: 'inequality',
-  },
-  {
-    label: 'Include Range',
-    value: 'inrange',
-  },
-  {
-    label: 'Exclude Range',
-    value: 'exrange',
-  },
-  {
-    label: 'Include Values',
-    value: 'inset',
-  },
-  {
-    label: 'Exclude Values',
-    value: 'exset',
-  },
-];
-
-const operations = {
+const operations = _ => ({
   inequality: [
-    {value: '!=', label: 'Target ≠ Reference'},
-    {value: '<', label: 'Target < Reference'},
-    {value: '<=', label: 'Target ≤ Reference'},
-    {value: '=', label: 'Target = Reference'},
-    {value: '>', label: 'Target > Reference'},
-    {value: '>=', label: 'Target ≥ Reference'},
+    {value: '!=', label: _('Target ≠ Reference')},
+    {value: '<', label: _('Target < Reference')},
+    {value: '<=', label: _('Target ≤ Reference')},
+    {value: '=', label: _('Target = Reference')},
+    {value: '>', label: _('Target > Reference')},
+    {value: '>=', label: _('Target ≥ Reference')},
   ],
   inrange: [
-    {value: '[]', label: 'Lower ≤ Target ≤ Upper'},
-    {value: '()', label: 'Lower < Target < Upper'},
-    {value: '[)', label: 'Lower ≤ Target < Upper'},
-    {value: '(]', label: 'Lower < Target ≤ Upper'},
+    {value: '[]', label: _('Lower ≤ Target ≤ Upper')},
+    {value: '()', label: _('Lower < Target < Upper')},
+    {value: '[)', label: _('Lower ≤ Target < Upper')},
+    {value: '(]', label: _('Lower < Target ≤ Upper')},
   ],
   exrange: [
-    {value: ')(', label: 'Lower ≤ Target ≤ Upper'},
-    {value: '][', label: 'Lower < Target < Upper'},
-    {value: ')[', label: 'Lower ≤ Target < Upper'},
-    {value: '](', label: 'Lower < Target ≤ Upper'},
+    {value: ')(', label: _('Lower ≤ Target ≤ Upper')},
+    {value: '][', label: _('Lower < Target < Upper')},
+    {value: ')[', label: _('Lower ≤ Target < Upper')},
+    {value: '](', label: _('Lower < Target ≤ Upper')},
   ],
-  inset: [{value: '{}', label: 'Include'}],
-  exset: [{value: '}{', label: 'Exclude'}],
-};
+  inset: [{value: '{}', label: _('Include')}],
+  exset: [{value: '}{', label: _('Exclude')}],
+});
 
-const findOperation = operator => {
+const findOperation = (operator, _) => {
   let op = 'inequality';
-  for (const key in operations) {
+  const ops = operations(_);
+  for (const key in ops) {
     if (
-      operations.hasOwnProperty(key) &&
-      operations[key].map(o => o.value).indexOf(operator) !== -1
+      ops.hasOwnProperty(key) &&
+      ops[key].map(o => o.value).indexOf(operator) !== -1
     ) {
       op = key;
       break;
@@ -70,17 +48,19 @@ const findOperation = operator => {
 class UnconnectedFilterOperation extends Component {
   constructor(props, context) {
     super(props, context);
+    const {localize: _} = context;
 
     this.state = {
-      operation: findOperation(this.props.fullValue),
-      operator: operations.inequality[0].value,
+      operation: findOperation(this.props.fullValue, _),
+      operator: operations(_).inequality[0].value,
     };
 
     this.setOperation = this.setOperation.bind(this);
   }
 
   setOperation(value) {
-    const operator = operations[value][0].value;
+    const {localize: _} = this.context;
+    const operator = operations(_)[value][0].value;
     this.setState({operation: value, operator: operator});
     this.props.updatePlot(operator);
   }
@@ -94,6 +74,30 @@ class UnconnectedFilterOperation extends Component {
       backgroundDark,
       attr,
     } = this.props;
+    const {localize: _} = this.context;
+
+    const operators = [
+      {
+        label: _('Inequality'),
+        value: 'inequality',
+      },
+      {
+        label: _('Include Range'),
+        value: 'inrange',
+      },
+      {
+        label: _('Exclude Range'),
+        value: 'exrange',
+      },
+      {
+        label: _('Include Values'),
+        value: 'inset',
+      },
+      {
+        label: _('Exclude Values'),
+        value: 'exset',
+      },
+    ];
 
     const opValue =
       fullValue && fullValue.length > 0 ? fullValue : this.state.operator;
@@ -103,7 +107,7 @@ class UnconnectedFilterOperation extends Component {
           <DropdownWidget
             backgroundDark={backgroundDark}
             options={operators}
-            value={findOperation(opValue)}
+            value={findOperation(opValue, _)}
             onChange={this.setOperation}
             clearable={false}
             optionRenderer={optionRenderer}
@@ -113,7 +117,7 @@ class UnconnectedFilterOperation extends Component {
           this.state.operation === 'exset' ? null : (
             <DropdownWidget
               backgroundDark={backgroundDark}
-              options={operations[this.state.operation]}
+              options={operations(_)[this.state.operation]}
               value={opValue}
               onChange={updatePlot}
               clearable={false}
@@ -132,6 +136,9 @@ UnconnectedFilterOperation.propTypes = {
   updatePlot: PropTypes.func,
   ...Field.propTypes,
 };
+UnconnectedFilterOperation.contextTypes = {
+  localize: PropTypes.func,
+};
 
 class UnconnectedFilterValue extends Component {
   constructor(props, context) {
@@ -144,7 +151,8 @@ class UnconnectedFilterValue extends Component {
   }
 
   setValue(v) {
-    const op = findOperation(this.context.container.operation);
+    const {localize: _, container} = this.context;
+    const op = findOperation(container.operation, _);
     this.setState({value: v});
     let val;
     val = op === 'inrange' || op === 'exrange' ? [v, this.state.valueMax] : v;
@@ -167,7 +175,7 @@ class UnconnectedFilterValue extends Component {
       container && container.operation ? container.operation : '=';
 
     const {fullValue, attr, defaultValue} = this.props;
-    const op = findOperation(operation);
+    const op = findOperation(operation, _);
 
     let label1 = _('Reference');
     if (op === 'inrange' || op === 'exrange') {
diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 225e4ce40..95634b820 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -311,6 +311,7 @@ export const NumericReciprocal = connectToContainer(UnconnectedNumeric, {
 
 export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
+    const {localize: _} = context;
     if (!context.fullContainer) {
       return;
     }
@@ -325,8 +326,9 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
       currentAxisRef = yref;
     } else {
       throw new Error(
-        'AnnotationArrowRef must be given either "axref" or "ayref" as attrs. ' +
-          `Instead was given "${props.attr}".`
+        _(
+          'AnnotationArrowRef must be given either "axref" or "ayref" as attrs. Instead was given'
+        ) + props.attr
       );
     }
 
@@ -336,7 +338,7 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
       const axes = getAllAxes(context.fullLayout).filter(a => a._id);
       if (axes.length > 0) {
         plotProps.options = [
-          {label: 'in pixels', value: 'pixel'},
+          {label: _('in pixels'), value: 'pixel'},
           ...computeAxesRefOptions(axes, props.attr),
         ];
       } else {
@@ -346,8 +348,8 @@ export const AnnotationArrowRef = connectToContainer(UnconnectedDropdown, {
       // If currentAxesRef is an actual axes then offer that value as the only
       // axes option.
       plotProps.options = [
-        {label: 'in pixels', value: 'pixel'},
-        {label: 'according to axis', value: currentAxisRef},
+        {label: _('in pixels'), value: 'pixel'},
+        {label: _('according to axis'), value: currentAxisRef},
       ];
     }
 
@@ -362,6 +364,7 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
     }
     const {
       fullContainer: {axref, ayref},
+      localize: _,
     } = context;
 
     let currentOffsetRef;
@@ -371,15 +374,18 @@ export const AnnotationRef = connectToContainer(UnconnectedDropdown, {
       currentOffsetRef = ayref;
     } else {
       throw new Error(
-        'AnnotationRef must be given either "xref" or "yref" as attrs. ' +
-          `Instead was given "${props.attr}".`
+        _(
+          'AnnotationRef must be given either "xref" or "yref" as attrs. Instead was given'
+        ) +
+          props.attr +
+          '.'
       );
     }
 
     const axes = getAllAxes(context.fullLayout).filter(a => a._id);
     if (axes.length > 0) {
       plotProps.options = [
-        {label: 'Canvas', value: 'paper'},
+        {label: _('Canvas'), value: 'paper'},
         ...computeAxesRefOptions(axes, props.attr),
       ];
     } else {
diff --git a/src/components/widgets/TraceTypeSelector.js b/src/components/widgets/TraceTypeSelector.js
index 244947406..802ffe743 100644
--- a/src/components/widgets/TraceTypeSelector.js
+++ b/src/components/widgets/TraceTypeSelector.js
@@ -9,24 +9,6 @@ import {
   plotlyTraceToCustomTrace,
 } from 'lib';
 
-const actions = ({value}) => [
-  {
-    label: `Charts like this by Plotly users.`,
-    href: `https://plot.ly/feed/?q=plottype:${value}`,
-    icon: <SearchIcon />,
-  },
-  {
-    label: `View tutorials on this chart type.`,
-    href: `#`,
-    icon: <ThumnailViewIcon />,
-  },
-  {
-    label: `See a basic example.`,
-    href: `#`,
-    icon: <GraphIcon />,
-  },
-];
-
 const renderActionItems = (actionItems, item) =>
   actionItems
     ? actionItems(item).map((action, i) => (
@@ -44,7 +26,11 @@ const renderActionItems = (actionItems, item) =>
       ))
     : null;
 
-const Item = ({item, active, handleClick, actions, showActions, complex}) => {
+const Item = (
+  {item, active, handleClick, actions, showActions, complex},
+  context
+) => {
+  const {localize: _} = context;
   const {label, value, icon} = item;
   const SimpleIcon = renderTraceIcon(icon ? icon : value);
   const ComplexIcon = renderTraceIcon(icon ? icon : value, 'TraceType');
@@ -69,7 +55,7 @@ const Item = ({item, active, handleClick, actions, showActions, complex}) => {
           </div>
         )}
       </div>
-      <div className="trace-item__label">{label}</div>
+      <div className="trace-item__label">{_(label)}</div>
     </div>
   );
 };
@@ -93,6 +79,27 @@ class TraceTypeSelector extends Component {
     this.context.handleClose();
   }
 
+  actions({value}) {
+    const {localize: _} = this.context;
+    return [
+      {
+        label: _('Charts like this by Plotly users.'),
+        href: `https://plot.ly/feed/?q=plottype:${value}`,
+        icon: <SearchIcon />,
+      },
+      {
+        label: _('View tutorials on this chart type.'),
+        href: '#',
+        icon: <ThumnailViewIcon />,
+      },
+      {
+        label: _('See a basic example.'),
+        href: '#',
+        icon: <GraphIcon />,
+      },
+    ];
+  }
+
   renderCategories() {
     const {fullValue} = this.props;
     const {
@@ -128,7 +135,7 @@ class TraceTypeSelector extends Component {
                 key={item.value}
                 active={fullValue === item.value}
                 item={item}
-                actions={actions}
+                actions={this.actions}
                 showActions={false}
                 handleClick={() => this.selectAndClose(item.value)}
               />
@@ -156,7 +163,7 @@ class TraceTypeSelector extends Component {
         complex={complex}
         active={fullValue === item.value}
         item={item}
-        actions={actions}
+        actions={this.actions}
         showActions={false}
         handleClick={() => this.selectAndClose(item.value)}
         style={{display: 'inline-block'}}
@@ -250,5 +257,8 @@ Item.propTypes = {
   actions: PropTypes.func,
   showActions: PropTypes.bool,
 };
+Item.contextTypes = {
+  localize: PropTypes.func,
+};
 
 export default TraceTypeSelector;
diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js
index 3e54bfbf7..1c6c763c1 100644
--- a/src/default_panels/StyleLayoutPanel.js
+++ b/src/default_panels/StyleLayoutPanel.js
@@ -32,7 +32,7 @@ const StyleLayoutPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Plot Background')} attr="polar.bgcolor" />
       <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />
       <Dropdown
-        label="Hover Interaction"
+        label={_('Hover Interaction')}
         attr="hovermode"
         options={[
           {label: _('Closest'), value: 'closest'},
@@ -43,7 +43,7 @@ const StyleLayoutPanel = (props, {localize: _}) => (
         clearable={false}
       />
       <Dropdown
-        label="Drag Interaction"
+        label={_('Drag Interaction')}
         attr="dragmode"
         options={[
           {label: _('Orbit'), value: 'orbit'},
diff --git a/src/default_panels/StyleNotesPanel.js b/src/default_panels/StyleNotesPanel.js
index 288c8995e..575bddeaf 100644
--- a/src/default_panels/StyleNotesPanel.js
+++ b/src/default_panels/StyleNotesPanel.js
@@ -36,8 +36,8 @@ const StyleNotesPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Color')} attr="arrowcolor" />
       <ArrowSelector label={_('Arrowhead')} attr="arrowhead" />
       <Numeric label={_('Scale')} step={0.1} attr="arrowsize" units="px" />
-      <AnnotationArrowRef label="X Offset" attr="axref" />
-      <AnnotationArrowRef label="Y Offset" attr="ayref" />
+      <AnnotationArrowRef label={_('X Offset')} attr="axref" />
+      <AnnotationArrowRef label={_('Y Offset')} attr="ayref" />
       <Numeric label={_('X Vector')} attr="ax" />
       <Numeric label={_('Y Vector')} attr="ay" />
     </PlotlySection>
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index f91fc5497..15313c164 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -42,7 +42,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
   <TraceAccordion canGroup>
     <TextEditor label={_('Name')} attr="name" richTextOnly />
     <ShowInLegend
-      label="Show in Legend"
+      label={_('Show in Legend')}
       attr="showlegend"
       options={[
         {label: _('Show'), value: true},
@@ -230,7 +230,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <NumericFraction label={_('Point Opacity')} attr="marker.opacity" />
       <MarkerSize label={_('Size')} attr="marker.size" />
       <Radio
-        label="Size Mode"
+        label={_('Size Mode')}
         attr="marker.sizemode"
         options={[
           {label: _('Diameter'), value: 'diameter'},
@@ -479,7 +479,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Fill Color')} attr="increasing.fillcolor" />
       <LineDashSelector label={_('Type')} attr="increasing.line.dash" />
       <Radio
-        label="Show in Legend"
+        label={_('Show in Legend')}
         attr="increasing.showlegend"
         options={[
           {label: _('Show'), value: true},
@@ -494,7 +494,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <MultiColorPicker label={_('Fill Color')} attr="decreasing.fillcolor" />
       <LineDashSelector label={_('Type')} attr="decreasing.line.dash" />
       <Radio
-        label="Show in Legend"
+        label={_('Show in Legend')}
         attr="decreasing.showlegend"
         options={[
           {label: _('Show'), value: true},
@@ -505,7 +505,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
     <PlotlySection name={_('Scaling')}>
       <Numeric label={_('Bandwidth')} attr="bandwidth" />
       <Radio
-        label="Scale Mode"
+        label={_('Scale Mode')}
         attr="scalemode"
         options={[
           {label: _('Width'), value: 'width'},
@@ -513,7 +513,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         ]}
       />
       <Radio
-        label="Span Mode"
+        label={_('Span Mode')}
         attr="spanmode"
         options={[
           {label: _('Soft'), value: 'soft'},

From ec0ea81031beb74b667ccf59507a5d2530e7cf98 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 9 Aug 2018 12:28:04 -0400
Subject: [PATCH 4/8] axes panel for geo - visibility issues and missing
 widgets

---
 src/default_panels/StyleAxesPanel.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index 71a65ae4d..786a64c15 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -49,7 +49,9 @@ class StyleAxesPanel extends Component {
       >
         <AxesFold
           name={_('Titles')}
-          axisFilter={axis => !axis._name.includes('angular')}
+          axisFilter={axis =>
+            !(axis._name.includes('angular') || axis._subplot.includes('geo'))
+          }
         >
           <TextEditor attr="title" />
           <FontSelector label={_('Typeface')} attr="titlefont.family" />
@@ -150,6 +152,8 @@ class StyleAxesPanel extends Component {
             />
             <Numeric label={_('Thickness')} attr="gridwidth" units="px" />
             <ColorPicker label={_('Color')} attr="gridcolor" />
+            <Numeric label={_('Reference')} attr="tick0" units="deg" />
+            <Numeric label={_('Spacing')} attr="dtick" units="deg" />
           </PlotlySection>
           <PlotlySection name={_('Zero Line')} attr="zeroline">
             <Radio
@@ -175,7 +179,10 @@ class StyleAxesPanel extends Component {
           </PlotlySection>
         </AxesFold>
 
-        <AxesFold name={_('Tick Labels')}>
+        <AxesFold
+          name={_('Tick Labels')}
+          axisFilter={axis => !axis._subplot.includes('geo')}
+        >
           <PlotlySection name={_('Tick Labels')} attr="showticklabels">
             <Radio
               attr="showticklabels"
@@ -298,7 +305,10 @@ class StyleAxesPanel extends Component {
             <NTicks label={_('Max Number of Labels')} attr="nticks" />
           </PlotlySection>
         </AxesFold>
-        <AxesFold name={_('Tick Markers')}>
+        <AxesFold
+          name={_('Tick Markers')}
+          axisFilter={axis => !axis._subplot.includes('geo')}
+        >
           <PlotlySection name={_('Tick Markers')} attr="ticks">
             <Radio
               attr="ticks"
@@ -464,7 +474,8 @@ class StyleAxesPanel extends Component {
           axisFilter={axis =>
             !(
               axis._subplot.includes('ternary') ||
-              axis._subplot.includes('polar')
+              axis._subplot.includes('polar') ||
+              axis._subplot.includes('geo')
             )
           }
         >

From 1d9842453362448474e1ce48bb50523313cb1629 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 9 Aug 2018 12:39:02 -0400
Subject: [PATCH 5/8] correct options for fill dropdown

---
 src/components/fields/derived.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/derived.js b/src/components/fields/derived.js
index 95634b820..bff1a1217 100644
--- a/src/components/fields/derived.js
+++ b/src/components/fields/derived.js
@@ -615,7 +615,11 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
       {label: _('Previous X'), value: 'tonextx'},
     ];
 
-    if (context.container.type === 'scatterternary') {
+    if (
+      context.container.type === 'scatterternary' ||
+      context.container.type === 'scattercarpet' ||
+      context.container.type === 'scatterpolar'
+    ) {
       options = [
         {label: _('None'), value: 'none'},
         {label: _('To Self'), value: 'toself'},
@@ -623,6 +627,16 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
       ];
     }
 
+    if (
+      context.container.type === 'scattergeo' ||
+      context.container.type === 'scattermapbox'
+    ) {
+      options = [
+        {label: _('None'), value: 'none'},
+        {label: _('To Self'), value: 'toself'},
+      ];
+    }
+
     plotProps.options = options;
     plotProps.clearable = false;
   },

From 04db3925648f800bbfaf216eca7c558f0532e93b Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 9 Aug 2018 12:48:56 -0400
Subject: [PATCH 6/8] StyleTracePanel sections missing for atlas maps

---
 src/default_panels/StyleAxesPanel.js   | 9 +++++++--
 src/default_panels/StyleTracesPanel.js | 2 ++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index 786a64c15..7f045f6ee 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -152,8 +152,13 @@ class StyleAxesPanel extends Component {
             />
             <Numeric label={_('Thickness')} attr="gridwidth" units="px" />
             <ColorPicker label={_('Color')} attr="gridcolor" />
-            <Numeric label={_('Reference')} attr="tick0" units="deg" />
-            <Numeric label={_('Spacing')} attr="dtick" units="deg" />
+            <TraceTypeSection
+              traceTypes={['choropleth', 'scattergeo']}
+              attr="range"
+            >
+              <Numeric label={_('Reference')} attr="tick0" units="deg" />
+              <Numeric label={_('Spacing')} attr="dtick" units="deg" />
+            </TraceTypeSection>
           </PlotlySection>
           <PlotlySection name={_('Zero Line')} attr="zeroline">
             <Radio
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 15313c164..460786f1a 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -302,6 +302,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scatterpolargl',
         'scatter3d',
         'scattergl',
+        'scattergeo',
       ]}
     >
       <Numeric label={_('Width')} attr="line.width" />
@@ -350,6 +351,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scatter3d',
         'scatterternary',
         'bar',
+        'scattergeo',
       ]}
     >
       <DataSelector label={_('Text')} attr="text" />

From e21307787f98423049d34b0da07ee54c74729414 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 9 Aug 2018 14:08:26 -0400
Subject: [PATCH 7/8] marker colors: clear showscale when user switches to
 constant

---
 src/components/fields/MarkerColor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js
index 30fd0a5b2..b294ffb92 100644
--- a/src/components/fields/MarkerColor.js
+++ b/src/components/fields/MarkerColor.js
@@ -57,6 +57,7 @@ class UnconnectedMarkerColor extends Component {
         this.context.updateContainer({
           ['marker.colorsrc']: null,
           ['marker.colorscale']: null,
+          ['marker.showscale']: null,
         });
         this.setState({colorscale: null});
       } else {

From f2fe6dee18d46e2904831e6063c3500857b01c0d Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 9 Aug 2018 14:34:50 -0400
Subject: [PATCH 8/8] proper trace names in TraceAccordion

---
 src/components/containers/TraceAccordion.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index faad5d797..91a280166 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -6,6 +6,7 @@ import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import {connectTraceToPlot, plotlyTraceToCustomTrace} from 'lib';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
+import {traceTypes} from 'lib/traceTypes';
 
 const TraceFold = connectTraceToPlot(PlotlyFold);
 
@@ -38,6 +39,7 @@ class TraceAccordion extends Component {
       return null;
     }
 
+    const {localize: _} = this.context;
     const dataArrayPositionsByTraceType = {};
     const fullDataArrayPositionsByTraceType = {};
 
@@ -62,7 +64,7 @@ class TraceAccordion extends Component {
         <TraceFold
           key={index}
           traceIndexes={dataArrayPositionsByTraceType[type]}
-          name={type}
+          name={traceTypes(_).find(t => t.value === type).label}
           fullDataArrayPosition={fullDataArrayPositionsByTraceType[type]}
         >
           {this.props.children}