add transition.ordering attr

- with values 'layout first' and 'traces first' which determines
  whether the figure's layout OR traces are smoothly transitions
  during Plotly.react calls that generate a data AND layout diff.

Author: etpinard

src/plots/animation_attributes.js

@@ -120,5 +120,16 @@ module.exports = {
             editType: 'none',
             description: 'The easing function used for the transition'
         },
+        ordering: {
+            valType: 'enumerated',
+            values: ['layout first', 'traces first'],
+            dflt: 'layout first',
+            role: 'info',
+            editType: 'none',
+            description: [
+                'Determines whether the figure\'s layout or traces smoothly transitions',
+                'during updates that make both traces and layout change.'
+            ].join(' ')
+        }
     }
 };

src/plots/plots.js

@@ -1462,6 +1462,7 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     if(Lib.isPlainObject(layoutIn.transition)) {
         coerce('transition.duration');
         coerce('transition.easing');
+        coerce('transition.ordering');
     }
 
     Registry.getComponentMethod(
@@ -2509,39 +2510,50 @@ plots.transitionFromReact = function(gd, restyleFlags, relayoutFlags, oldFullLay
         var basePlotModules = fullLayout._basePlotModules;
         var i;
 
-        // Here handle the exception that we refuse to animate traces and axes at the same
-        // time. In other words, if there's an axis transition, then set the data transition
-        // to instantaneous.
+        var axisTransitionOpts;
         var traceTransitionOpts;
         var transitionedTraces;
 
-        if(axEdits.length) {
-            for(i = 0; i < basePlotModules.length; i++) {
-                if(basePlotModules[i].transitionAxes2) {
-                    basePlotModules[i].transitionAxes2(gd, axEdits, transitionOpts, makeCallback);
+        var allTraceIndices = [];
+        for(i = 0; i < fullData.length; i++) {
+            allTraceIndices.push(i);
+        }
+
+        function transitionAxes() {
+            for(var i = 0; i < basePlotModules.length; i++) {
+                if(basePlotModules[i].transitionAxes) {
+                    basePlotModules[i].transitionAxes(gd, axEdits, axisTransitionOpts, makeCallback);
                 }
             }
+        }
 
-            // This means do not transition traces,
-            // this happens on layout-only (e.g. axis range) animations
-            traceTransitionOpts = Lib.extendFlat({}, transitionOpts, {duration: 0});
-            transitionedTraces = null;
-        } else {
-            traceTransitionOpts = transitionOpts;
-            transitionedTraces = [];
-            for(i = 0; i < fullData.length; i++) {
-                transitionedTraces.push(i);
+        function transitionTraces() {
+            for(var i = 0; i < basePlotModules.length; i++) {
+                basePlotModules[i].plot(gd, transitionedTraces, traceTransitionOpts, makeCallback);
             }
         }
 
-        // Note that we pass a callback to *create* the callback that must be invoked on completion.
-        // This is since not all traces know about transitions, so it greatly simplifies matters if
-        // the trace is responsible for creating a callback, if needed, and then executing it when
-        // the time is right.
-        if(restyleFlags.anim) {
-            for(i = 0; i < basePlotModules.length; i++) {
-                basePlotModules[i].plot(gd, transitionedTraces, traceTransitionOpts, makeCallback);
+        if(axEdits.length && restyleFlags.anim) {
+            if(transitionOpts.ordering === 'traces first') {
+                axisTransitionOpts = Lib.extendFlat({}, transitionOpts, {duration: 0});
+                transitionedTraces = allTraceIndices;
+                traceTransitionOpts = transitionOpts;
+                transitionTraces();
+                setTimeout(transitionAxes, transitionOpts.duration);
+            } else {
+                axisTransitionOpts = transitionOpts;
+                transitionedTraces = null;
+                traceTransitionOpts = Lib.extendFlat({}, transitionOpts, {duration: 0});
+                transitionAxes();
+                transitionTraces();
             }
+        } else if(axEdits.length) {
+            axisTransitionOpts = transitionOpts;
+            transitionAxes();
+        } else if(restyleFlags.anim) {
+            transitionedTraces = allTraceIndices;
+            traceTransitionOpts = transitionOpts;
+            transitionTraces();
         }
     };
 

test/jasmine/tests/transition_test.js

@@ -515,7 +515,7 @@ describe('Plotly.react transitions:', function() {
         .then(done);
     });
 
-    it('should only transition the layout when both traces and layout have animatable changes', function(done) {
+    it('should only transition the layout when both traces and layout have animatable changes by default', function(done) {
         var data = [{y: [1, 2, 1]}];
         var layout = {
             transition: {duration: 10},
@@ -566,12 +566,32 @@ describe('Plotly.react transitions:', function() {
                 [gd._fullLayout._basePlotModules[0], 'plot', [
                     // one instantaneous transition options to halt
                     // other trace transitions (if any)
-                    [gd, null, {duration: 0, easing: 'cubic-in-out'}, 'function'],
+                    [gd, null, {duration: 0, easing: 'cubic-in-out', ordering: 'layout first'}, 'function'],
                     // one _module.plot call from the relayout at end of axis transition
                     [gd]
                 ]],
             ]);
         })
+        .then(function() {
+            data[0].marker.color = 'red';
+            layout.xaxis.range = [-2, 2];
+            layout.transition.ordering = 'traces first';
+            return Plotly.react(gd, data, layout);
+        })
+        .then(delay(20))
+        .then(function() {
+            assertSpies('both trace and layout transitions under *ordering:traces first*', [
+                [Plots, 'transitionFromReact', 1],
+                [gd._fullLayout._basePlotModules[0], 'plot', [
+                    // one smooth transition
+                    [gd, [0], {duration: 10, easing: 'cubic-in-out', ordering: 'traces first'}, 'function'],
+                    // one by relayout call  at the end of instantaneous axis transition
+                    [gd]
+                ]],
+                [gd._fullLayout._basePlotModules[0], 'transitionAxes', 1],
+                [Registry, 'call', [['relayout', gd, {'xaxis.range': [-2, 2]}]]]
+            ]);
+        })
         .catch(failTest)
         .then(done);
     });
@@ -674,7 +694,7 @@ describe('Plotly.react transitions:', function() {
                 [gd._fullLayout._basePlotModules[0], 'plot', [
                     // one instantaneous transition options to halt
                     // other trace transitions (if any)
-                    [gd, null, {duration: 0, easing: 'cubic-in-out'}, 'function'],
+                    [gd, null, {duration: 0, easing: 'cubic-in-out', ordering: 'layout first'}, 'function'],
                     // one _module.plot call from the relayout at end of axis transition
                     [gd]
                 ]],
@@ -690,8 +710,8 @@ describe('Plotly.react transitions:', function() {
                 [Plots, 'transitionFromReact', 1],
                 [gd._fullLayout._basePlotModules[0], 'transitionAxes', 0],
                 [gd._fullLayout._basePlotModules[0], 'plot', [
-                    [gd, [0], {duration: 10, easing: 'cubic-in-out'}, 'function'],
                     // called from Plots.transitionFromReact
+                    [gd, [0], {duration: 10, easing: 'cubic-in-out', ordering: 'layout first'}, 'function'],
                 ]],
             ]);
             assertAxAutorange('axes are still autorange:false', false);
@@ -762,7 +782,7 @@ describe('Plotly.react transitions:', function() {
                 [gd._fullLayout._basePlotModules[0], 'plot', [
                     // one instantaneous transition options to halt
                     // other trace transitions (if any)
-                    [gd, null, {duration: 0, easing: 'cubic-in-out'}, 'function'],
+                    [gd, null, {duration: 0, easing: 'cubic-in-out', ordering: 'layout first'}, 'function'],
                     // one _module.plot call from the relayout at end of axis transition
                     [gd]
                 ]]