Gl switch

dev/App.js

@@ -44,10 +44,18 @@ const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 const traceTypesConfig = {
   traces: _ => [
     {
-      value: 'scattergl',
+      value: 'scatter',
       icon: 'scatter',
       label: _('Scatter'),
     },
+    {
+      value: 'line',
+      label: _('Line'),
+    },
+    {
+      value: 'area',
+      label: _('Area'),
+    },
     {
       value: 'bar',
       label: _('Bar'),
@@ -155,6 +163,7 @@ class App extends Component {
           debug
           advancedTraceTypeSelector
           showFieldTooltips
+          // glByDefault
           // traceTypesConfig={traceTypesConfig}
           // makeDefaultTrace={() => ({type: 'scattergl', mode: 'markers'})}
         >

src/EditorControls.js

@@ -49,6 +49,8 @@ class EditorControls extends Component {
       plotly: this.props.plotly,
       traceTypesConfig: this.props.traceTypesConfig,
       showFieldTooltips: this.props.showFieldTooltips,
+      glByDefault: this.props.glByDefault,
+      mapBoxAccess: this.props.mapBoxAccess,
     };
   }
 
@@ -121,7 +123,14 @@ class EditorControls extends Component {
 
         // can't use default prop because plotly.js mutates it:
         // https://github.com/plotly/react-chart-editor/issues/509
-        graphDiv.data.push(this.props.makeDefaultTrace());
+        graphDiv.data.push(
+          this.props.makeDefaultTrace
+            ? this.props.makeDefaultTrace()
+            : {
+                type: `scatter${this.props.glByDefault ? 'gl' : ''}`,
+                mode: 'markers',
+              }
+        );
 
         if (this.props.afterAddTrace) {
           this.props.afterAddTrace(payload);
@@ -308,12 +317,13 @@ EditorControls.propTypes = {
   showFieldTooltips: PropTypes.bool,
   traceTypesConfig: PropTypes.object,
   makeDefaultTrace: PropTypes.func,
+  glByDefault: PropTypes.bool,
+  mapBoxAccess: PropTypes.bool,
 };
 
 EditorControls.defaultProps = {
   showFieldTooltips: false,
   locale: 'en',
-  makeDefaultTrace: () => ({type: 'scatter', mode: 'markers'}),
   traceTypesConfig: {
     categories: _ => categoryLayout(_),
     traces: _ => traceTypes(_),
@@ -346,6 +356,8 @@ EditorControls.childContextTypes = {
   plotSchema: PropTypes.object,
   traceTypesConfig: PropTypes.object,
   showFieldTooltips: PropTypes.bool,
+  glByDefault: PropTypes.bool,
+  mapBoxAccess: PropTypes.bool,
 };
 
 export default EditorControls;

src/PlotlyEditor.js

@@ -27,6 +27,10 @@ class PlotlyEditor extends Component {
             showFieldTooltips={this.props.showFieldTooltips}
             srcConverters={this.props.srcConverters}
             makeDefaultTrace={this.props.makeDefaultTrace}
+            glByDefault={this.props.glByDefault}
+            mapBoxAccess={Boolean(
+              this.props.config && this.props.config.mapboxAccessToken
+            )}
           >
             {this.props.children}
           </EditorControls>
@@ -77,6 +81,7 @@ PlotlyEditor.propTypes = {
     fromSrc: PropTypes.func.isRequired,
   }),
   makeDefaultTrace: PropTypes.func,
+  glByDefault: PropTypes.bool,
 };
 
 PlotlyEditor.defaultProps = {

src/components/containers/Modal.js

@@ -21,6 +21,26 @@ const ModalContent = ({children}) => (
 );
 
 class Modal extends Component {
+  constructor(props) {
+    super(props);
+    this.escFunction = this.escFunction.bind(this);
+  }
+
+  escFunction(event) {
+    const escKeyCode = 27;
+    if (event.keyCode === escKeyCode) {
+      this.context.handleClose();
+    }
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.escFunction, false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.escFunction, false);
+  }
+
   render() {
     const {children, title} = this.props;
     let classes = 'modal';

src/components/fields/TraceSelector.js

@@ -10,13 +10,24 @@ import {
 import TraceTypeSelector, {
   TraceTypeSelectorButton,
 } from 'components/widgets/TraceTypeSelector';
+import RadioBlocks from 'components/widgets/RadioBlocks';
+
 import Field from './Field';
 
+export const glAvailable = type => {
+  return ['scatter', 'scatterpolar', 'scattergl', 'scatterpolargl'].includes(
+    type
+  );
+};
+
 class TraceSelector extends Component {
   constructor(props, context) {
     super(props, context);
 
     this.updatePlot = this.updatePlot.bind(this);
+    this.setGl = this.setGl.bind(this);
+    this.glEnabled = this.glEnabled.bind(this);
+    this.setTraceDefaults = this.setTraceDefaults.bind(this);
 
     this.setTraceDefaults(
       props.container,
@@ -26,6 +37,10 @@ class TraceSelector extends Component {
     this.setLocals(props, context);
   }
 
+  glEnabled() {
+    return this.props.container.type.endsWith('gl') ? 'gl' : '';
+  }
+
   setLocals(props, context) {
     const _ = context.localize;
     if (props.traceOptions) {
@@ -46,10 +61,11 @@ class TraceSelector extends Component {
     }
   }
 
-  setTraceDefaults(container, fullContainer, updateContainer) {
+  setTraceDefaults(container, fullContainer, updateContainer, gl) {
     if (container && !container.mode && fullContainer.type === 'scatter') {
       updateContainer({
-        type: 'scatter',
+        type:
+          'scatter' + (gl || this.context.glByDefault ? gl : this.glEnabled()),
         mode: fullContainer.mode || 'markers',
       });
     }
@@ -63,29 +79,70 @@ class TraceSelector extends Component {
 
   updatePlot(value) {
     const {updateContainer} = this.props;
+    const {glByDefault} = this.context;
     if (updateContainer) {
-      updateContainer(traceTypeToPlotlyInitFigure(value));
+      updateContainer(
+        traceTypeToPlotlyInitFigure(value, this.glEnabled() || glByDefault)
+      );
     }
   }
 
+  setGl(value) {
+    const {container, fullContainer, updateContainer} = this.props;
+    const gl = 'gl';
+
+    this.setTraceDefaults(container, fullContainer, updateContainer, value);
+
+    const traceType =
+      this.fullValue.endsWith(gl) && value === ''
+        ? this.fullValue.slice(0, -gl.length)
+        : this.fullValue;
+
+    updateContainer(traceTypeToPlotlyInitFigure(traceType, value));
+  }
+
   render() {
     const props = Object.assign({}, this.props, {
       fullValue: this.fullValue,
       updatePlot: this.updatePlot,
       options: this.traceOptions,
       clearable: false,
     });
+    const {localize: _, advancedTraceTypeSelector} = this.context;
+
+    const options = [
+      {label: _('SVG'), value: ''},
+      {label: _('WebGl'), value: 'gl'},
+    ];
+
     // Check and see if the advanced selector prop is true
-    const {advancedTraceTypeSelector} = this.context;
     if (advancedTraceTypeSelector) {
       return (
-        <Field {...props}>
-          <TraceTypeSelectorButton
-            {...props}
-            traceTypesConfig={this.context.traceTypesConfig}
-            handleClick={() => this.context.openModal(TraceTypeSelector, props)}
-          />
-        </Field>
+        <div>
+          <Field {...props}>
+            <TraceTypeSelectorButton
+              {...props}
+              traceTypesConfig={this.context.traceTypesConfig}
+              handleClick={() =>
+                this.context.openModal(TraceTypeSelector, {
+                  ...props,
+                  glByDefault: this.context.glByDefault,
+                })
+              }
+            />
+          </Field>
+          {!glAvailable(this.props.container.type) ? (
+            ''
+          ) : (
+            <Field label={_('Rendering')}>
+              <RadioBlocks
+                options={options}
+                activeOption={this.glEnabled()}
+                onOptionChange={this.setGl}
+              />
+            </Field>
+          )}
+        </div>
       );
     }
 
@@ -100,6 +157,7 @@ TraceSelector.contextTypes = {
   plotSchema: PropTypes.object,
   config: PropTypes.object,
   localize: PropTypes.func,
+  glByDefault: PropTypes.bool,
 };
 
 TraceSelector.propTypes = {

src/components/widgets/TraceTypeSelector.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 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,
@@ -75,22 +76,39 @@ const Item = ({item, active, handleClick, actions, showActions, complex}) => {
 
 class TraceTypeSelector extends Component {
   selectAndClose(value) {
+    const {
+      updateContainer,
+      glByDefault,
+      fullContainer: {type},
+    } = this.props;
     const computedValue = traceTypeToPlotlyInitFigure(value);
-    this.props.updateContainer(computedValue);
+    if (
+      (type.endsWith('gl') || (!glAvailable(type) && glByDefault)) &&
+      glAvailable(computedValue.type) &&
+      !computedValue.type.endsWith('gl')
+    ) {
+      computedValue.type = computedValue.type + 'gl';
+    }
+    updateContainer(computedValue);
     this.context.handleClose();
   }
 
   renderCategories() {
     const {fullValue} = this.props;
     const {
       traceTypesConfig: {traces, categories, complex},
+      mapBoxAccess,
       localize: _,
     } = this.context;
 
     return categories(_).map((category, i) => {
-      const items = traces(_).filter(
-        ({category: {value}}) => value === category.value
-      );
+      let items = traces(_)
+        .filter(({category: {value}}) => value === category.value)
+        .filter(i => i.value !== 'scattergl' && i.value !== 'scatterpolargl');
+
+      if (!mapBoxAccess) {
+        items = items.filter(i => i.value !== 'scattermapbox');
+      }
 
       const MAX_ITEMS = 4;
 
@@ -207,11 +225,14 @@ export class TraceTypeSelectorButton extends Component {
 TraceTypeSelector.propTypes = {
   updateContainer: PropTypes.func,
   fullValue: PropTypes.string,
+  fullContainer: PropTypes.object,
+  glByDefault: PropTypes.bool,
 };
 TraceTypeSelector.contextTypes = {
   traceTypesConfig: PropTypes.object,
   handleClose: PropTypes.func,
   localize: PropTypes.func,
+  mapBoxAccess: PropTypes.bool,
 };
 TraceTypeSelectorButton.propTypes = {
   handleClick: PropTypes.func.isRequired,

src/lib/customTraceType.js

@@ -1,31 +1,37 @@
 export function plotlyTraceToCustomTrace(trace) {
-  const type = trace.type || 'scatter';
+  const gl = 'gl';
+  const type = trace.type.endsWith(gl)
+    ? trace.type.slice(0, -gl.length)
+    : trace.type || 'scatter';
+
   if (
-    type === 'scatter' &&
+    (type === 'scatter' || type === 'scattergl') &&
     ['tozeroy', 'tozerox', 'tonexty', 'tonextx', 'toself', 'tonext'].includes(
       trace.fill
     )
   ) {
     return 'area';
   } else if (
-    type === 'scatter' &&
+    (type === 'scatter' || type === 'scattergl') &&
     (trace.mode === 'lines' || trace.mode === 'lines+markers')
   ) {
     return 'line';
   } else if (type === 'scatter3d' && trace.mode === 'lines') {
     return 'line3d';
   }
-  return trace.type;
+  return type;
 }
 
-export function traceTypeToPlotlyInitFigure(traceType) {
+export function traceTypeToPlotlyInitFigure(traceType, gl = '') {
   switch (traceType) {
     case 'line':
-      return {type: 'scatter', mode: 'lines', fill: 'none'};
+      return {type: 'scatter' + gl, mode: 'lines', fill: 'none'};
     case 'scatter':
-      return {type: 'scatter', mode: 'markers', fill: 'none'};
+      return {type: 'scatter' + gl, mode: 'markers', fill: 'none'};
     case 'area':
-      return {type: 'scatter', fill: 'tozeroy'};
+      return {type: 'scatter' + gl, fill: 'tozeroy'};
+    case 'scatterpolar':
+      return {type: 'scatterpolar' + gl};
     case 'ohlc':
       return {
         type: 'ohlc',

src/lib/index.js

@@ -58,7 +58,10 @@ function renderTraceIcon(trace, prefix = 'Plot') {
   if (!trace) {
     return null;
   }
-  const componentName = `${prefix}${pascalCase(trace)}Icon`;
+  const gl = 'gl';
+  const componentName = `${prefix}${pascalCase(
+    trace.endsWith(gl) ? trace.slice(0, -gl.length) : trace
+  )}Icon`;
   return PlotlyIcons[componentName]
     ? PlotlyIcons[componentName]
     : PlotlyIcons.PlotLineIcon;