Set mode according to plotly.js defaults for mode

Author: VeraZab

src/components/fields/TraceSelector.js

@@ -52,7 +52,6 @@ class TraceSelector extends Component {
         'tonext',
       ];
     }
-
     this.setLocals(props, context);
   }
 
@@ -64,30 +63,49 @@ class TraceSelector extends Component {
     } else {
       this.traceOptions = [{label: 'Scatter', value: 'scatter'}];
     }
-
     this.fullValue = plotlyTraceToCustomTrace(props.container);
   }
 
+  setTraceDefaults(container, fullContainer, updateContainer) {
+    /*
+     * Default plotly.js mode is variable:
+     * https://github.com/plotly/plotly.js/blob/master/src/traces/scatter/defaults.js#L32
+     * take it from fullContainer, or if it's not present (i.e. when there's no data
+     * in the plot yet, temporarily set it to lines + markers, it will get overriden
+     * in componentWillReceiveProps)
+     */
+
+    // set plotly.js defaults explicitly into gd.data | non empty x & y cases
+    // we don't want to set a mode in the case of x: [], y: [], because plotly.js
+    // default mode changes depending on # of data points, so we wait until we
+    // have data to set the mode.
+    if (
+      (container.type === 'scatter' && !container.mode && fullContainer.mode) ||
+      (!container.type && !container.mode && fullContainer.mode)
+    ) {
+      updateContainer({
+        type: 'scatter',
+        mode: fullContainer.mode,
+        fill: 'none',
+      });
+    }
+    this.fullValue = plotlyTraceToCustomTrace(container);
+  }
+
   componentWillMount() {
-    const {container} = this.props;
-    const value = plotlyTraceToCustomTrace(container);
-    this.updatePlot(value);
+    const {container, fullContainer, updateContainer} = this.props;
+    this.setTraceDefaults(container, fullContainer, updateContainer);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    if (
-      !nextProps.container.type ||
-      (nextProps.container.type === 'scatter' && !nextProps.container.mode)
-    ) {
-      this.updatePlot({type: 'scatter', mode: 'lines+markers'});
-    }
+    const {container, fullContainer, updateContainer} = nextProps;
+    this.setTraceDefaults(container, fullContainer, updateContainer);
     this.setLocals(nextProps, nextContext);
   }
 
   updatePlot(value) {
     const {container} = this.props;
     const update = customTraceToPlotlyTrace(value, container);
-
     if (this.props.updateContainer) {
       this.props.updateContainer(update);
     }
@@ -111,6 +129,7 @@ TraceSelector.contextTypes = {
 TraceSelector.propTypes = {
   getValObject: PropTypes.func,
   container: PropTypes.object.isRequired,
+  fullContainer: PropTypes.object.isRequired,
   fullValue: PropTypes.any.isRequired,
   updateContainer: PropTypes.func,
 };

src/lib/customTraceType.js

@@ -12,26 +12,29 @@ export function plotlyTraceToCustomTrace(trace) {
     (!trace.mode || trace.mode === 'lines' || trace.mode === 'lines+markers')
   ) {
     return 'line';
-  } else if (!trace.type) {
-    return 'line';
   }
   return trace.type;
 }
 
 export function customTraceToPlotlyTrace(customTraceType, container) {
-  if (customTraceType === 'line' && container.mode) {
+  // we don't want to set a mode until there is data in the plot,
+  // in this case TraceSelector's componentWillReceiveProps will set the mode to
+  // the plotly.js default mode, we don't want to override this here, this is why
+  // we always check for container.mode in our conditionals
+
+  if (customTraceType === 'line' && container.mode === 'markers') {
     return {type: 'scatter', mode: 'lines', fill: 'none'};
   }
 
-  if (customTraceType === 'line' && !container.mode) {
-    return {type: 'scatter', mode: 'lines+markers', fill: 'none'};
+  if (customTraceType === 'line' && container.mode) {
+    return {type: 'scatter', mode: container.mode, fill: 'none'};
   }
 
-  if (customTraceType === 'scatter') {
+  if (customTraceType === 'scatter' && container.mode) {
     return {type: 'scatter', mode: 'markers', fill: 'none'};
   }
 
-  if (customTraceType === 'area') {
+  if (customTraceType === 'area' && container.mode) {
     return {type: 'scatter', fill: 'tozeroy'};
   }