allow react-transition to diff when old/new fullData lengths mismatch

- should still go through calc (and hence a redraw after the transition)
  but Scatter.plot can handle this case fine.

Author: etpinard

src/plot_api/plot_api.js

@@ -2819,7 +2819,7 @@ exports.react = function(gd, data, layout, config) {
 };
 
 function diffData(gd, oldFullData, newFullData, immutable, transition, newDataRevision) {
-    if(oldFullData.length !== newFullData.length) {
+    if(!transition && oldFullData.length !== newFullData.length) {
         return {
             fullReplot: true,
             calc: true
@@ -2849,12 +2849,14 @@ function diffData(gd, oldFullData, newFullData, immutable, transition, newDataRe
     var seenUIDs = {};
 
     for(i = 0; i < oldFullData.length; i++) {
-        trace = newFullData[i]._fullInput;
-        if(Plots.hasMakesDataTransform(trace)) trace = newFullData[i];
-        if(seenUIDs[trace.uid]) continue;
-        seenUIDs[trace.uid] = 1;
+        if(newFullData[i]) {
+            trace = newFullData[i]._fullInput;
+            if(Plots.hasMakesDataTransform(trace)) trace = newFullData[i];
+            if(seenUIDs[trace.uid]) continue;
+            seenUIDs[trace.uid] = 1;
 
-        getDiffFlags(oldFullData[i]._fullInput, trace, [], diffOpts);
+            getDiffFlags(oldFullData[i]._fullInput, trace, [], diffOpts);
+        }
     }
 
     if(flags.calc || flags.plot) {

src/plots/plots.js

@@ -513,7 +513,7 @@ plots.supplyDefaults = function(gd, opts) {
 plots.supplyDefaultsUpdateCalc = function(oldCalcdata, newFullData) {
     for(var i = 0; i < newFullData.length; i++) {
         var newTrace = newFullData[i];
-        var cd0 = oldCalcdata[i][0];
+        var cd0 = (oldCalcdata[i] || [])[0];
         if(cd0 && cd0.trace) {
             var oldTrace = cd0.trace;
             if(oldTrace._hasCalcTransform) {

test/jasmine/tests/transition_test.js

@@ -880,4 +880,90 @@ describe('Plotly.react transitions:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should preserve trace object-constancy (# of traces mismatch case)', function(done) {
+        var data1 = [{
+            uid: 1,
+            x: [5, 6, 7],
+            y: [5, 6, 7],
+            marker: {color: 'blue', size: 10}
+        }, {
+            uid: 2,
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {color: 'red', size: 10}
+        }];
+
+        var data2 = [{
+            uid: 1,
+            x: [1, 2, 3],
+            y: [1, 2, 3],
+            marker: {color: 'blue', size: 10}
+        }];
+
+        var layout = {
+            xaxis: {range: [-1, 8]},
+            yaxis: {range: [-1, 8]},
+            showlegend: false,
+            transition: {duration: 10}
+        };
+
+        var traceNodes;
+
+        function _assertTraceNodes(msg, traceNodesOrdered, ptsXY) {
+            var traceNodesNew = gd.querySelectorAll('.scatterlayer > .trace');
+            expect(traceNodesNew.length).toBe(traceNodesOrdered.length, 'same # of traces - ' + msg);
+
+            for(var i = 0; i < traceNodesNew.length; i++) {
+                var node = traceNodesOrdered[i];
+
+                expect(traceNodesNew[i]).toBe(node, 'same trace node ' + i + ' - ' + msg);
+
+                var pt0 = node.querySelector('.points > path');
+                var pt0XY = Drawing.getTranslate(pt0);
+                expect(pt0XY.x).toBeCloseTo(ptsXY[i][0], 1, 'pt' + i + ' x - ' + msg);
+                expect(pt0XY.y).toBeCloseTo(ptsXY[i][1], 1, 'pt' + i + ' y - ' + msg);
+            }
+        }
+
+        Plotly.react(gd, data1, layout)
+        .then(function() {
+            methods.push([gd._fullLayout._basePlotModules[0], 'plot']);
+            methods.push([gd._fullLayout._basePlotModules[0], 'transitionAxes2']);
+            addSpies();
+
+            traceNodes = gd.querySelectorAll('.scatterlayer > .trace');
+            _assertTraceNodes('base', traceNodes, [[360, 90], [120, 210]]);
+        })
+        .then(function() { return Plotly.react(gd, data2, layout); })
+        .then(function() {
+            var msg = 'transition into data2';
+            assertSpies(msg, [
+                [Plots, 'transition2', 1],
+                [Registry, 'call', 1],
+                [gd._fullLayout._basePlotModules[0], 'plot', 2],
+                [gd._fullLayout._basePlotModules[0], 'transitionAxes2', 0]
+            ]);
+
+            // N.B. traceNodes[1] is gone, but traceNodes[0] is the same
+            _assertTraceNodes(msg, [traceNodes[0]], [[120, 210]]);
+        })
+        .then(function() { return Plotly.react(gd, data1, layout); })
+        .then(function() {
+            var msg = 'transition back to data1';
+            assertSpies(msg, [
+                [Plots, 'transition2', 1],
+                [Registry, 'call', 1],
+                [gd._fullLayout._basePlotModules[0], 'plot', 2],
+                [gd._fullLayout._basePlotModules[0], 'transitionAxes2', 0]
+            ]);
+
+            // N.B. we have a "new" traceNodes[1] here,
+            // the old one get removed from the DOM when transitioning into data2
+            var traceNodesNew = gd.querySelectorAll('.scatterlayer > .trace');
+            _assertTraceNodes(msg, [traceNodes[0], traceNodesNew[1]], [[360, 90], [120, 210]]);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });