sankey: create a single dragger per trace that gets restyle, improve test

Author: antoinerg

src/traces/sankey/render.js

@@ -838,19 +838,20 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
 
     sankey.each(function(d, i) {
         gd._fullData[i]._sankey = d;
-        // Draw dragbox
-        Lib.ensureSingle(gd._fullLayout._draggers, 'rect', 'bgsankey-' + d.guid, function(el) {
-            el
-              .style('pointer-events', 'all')
-              .attr('width', d.width)
-              .attr('height', d.height)
-              .attr('x', d.translateX)
-              .attr('y', d.translateY)
-              .classed('bgsankey', true)
-              .style({fill: 'transparent', 'stroke-width': 0});
-
+        // Create dragbox if missing
+        Lib.ensureSingle(gd._fullLayout._draggers, 'rect', 'bgsankey-' + d.trace.uid, function(el) {
             gd._fullData[i]._bgRect = el;
         });
+
+        // Style dragbox
+        gd._fullData[i]._bgRect
+          .style('pointer-events', 'all')
+          .attr('width', d.width)
+          .attr('height', d.height)
+          .attr('x', d.translateX)
+          .attr('y', d.translateY)
+          .classed('bgsankey', true)
+          .style({fill: 'transparent', 'stroke-width': 0});
     });
 
     sankey.transition()
@@ -942,7 +943,8 @@ module.exports = function(gd, svg, calcData, layout, callbacks) {
         .call(attachPointerEvents, sankey, callbacks.nodeEvents)
         .call(attachDragHandler, sankeyLink, callbacks, gd); // has to be here as it binds sankeyLink
 
-    sankeyNode.transition()
+    sankeyNode
+        .transition()
         .ease(c.ease).duration(c.duration)
         .call(updateNodePositions)
         .style('opacity', function(n) { return n.partOfGroup ? 0 : 1;});

test/jasmine/tests/select_test.js

@@ -13,6 +13,8 @@ var mouseEvent = require('../assets/mouse_event');
 var touchEvent = require('../assets/touch_event');
 
 var LONG_TIMEOUT_INTERVAL = 5 * jasmine.DEFAULT_TIMEOUT_INTERVAL;
+var delay = require('../assets/delay');
+var sankeyConstants = require('@src/traces/sankey/constants');
 
 function drag(path, options) {
     var len = path.length;
@@ -2667,45 +2669,62 @@ describe('Test select box and lasso per trace:', function() {
         .then(done);
     });
 
-    it('@flaky should work on sankey traces', function(done) {
-        var fig = Lib.extendDeep({}, require('@mocks/sankey_circular.json'));
-        fig.layout.dragmode = 'select';
-        var dblClickPos = [250, 400];
-        var opts = {};
+    describe('should work on sankey traces', function() {
+        var waitingTime = sankeyConstants.duration * 2;
 
-        Plotly.plot(gd, fig)
-        .then(function() {
-            // No groups initially
-            expect(gd._fullData[0].node.groups).toEqual([]);
+        it('@flaky select', function(done) {
+            var fig = Lib.extendDeep({}, require('@mocks/sankey_circular.json'));
+            fig.layout.dragmode = 'select';
+            var dblClickPos = [250, 400];
 
-            opts.element = document.elementFromPoint(400, 400);
-        })
-        .then(function() {
-            // Grouping the two nodes on the top right
-            return _run(
-                [[640, 130], [400, 450]],
-                function() {
-                    expect(gd._fullData[0].node.groups).toEqual([[2, 3]]);
-                },
-                dblClickPos, BOXEVENTS, 'for top right nodes #2 and #3'
-            );
-        })
-        .then(function() {
-            // Grouping node #4 and the previous group
-            drag([[715, 400], [300, 110]], opts);
-        })
-        .then(function() {
-            expect(gd._fullData[0].node.groups).toEqual([[4, 3, 2]]);
-        })
-        .then(function() {
-            // Grouping node #0 and #1 on the left side
-            drag([[160, 110], [200, 590]], opts);
-        })
-        .then(function() {
-            expect(gd._fullData[0].node.groups).toEqual([[4, 3, 2], [0, 1]]);
-        })
-        .catch(failTest)
-        .then(done);
+            Plotly.plot(gd, fig)
+            .then(function() {
+                // No groups initially
+                expect(gd._fullData[0].node.groups).toEqual([]);
+            })
+            .then(function() {
+                // Grouping the two nodes on the top right
+                return _run(
+                    [[640, 130], [400, 450]],
+                    function() {
+                        expect(gd._fullData[0].node.groups).toEqual([[2, 3]], 'failed to group #2 + #3');
+                    },
+                    dblClickPos, BOXEVENTS, 'for top right nodes #2 and #3'
+                );
+            })
+            .then(delay(waitingTime))
+            .then(function() {
+                // Grouping node #4 and the previous group
+                drag([[715, 400], [300, 110]]);
+            })
+            .then(delay(waitingTime))
+            .then(function() {
+                expect(gd._fullData[0].node.groups).toEqual([[4, 3, 2]], 'failed to group #4 + existing group of #2 and #3');
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('@flaky should not work when dragmode is undefined', function(done) {
+            var fig = Lib.extendDeep({}, require('@mocks/sankey_circular.json'));
+            fig.layout.dragmode = undefined;
+
+            Plotly.plot(gd, fig)
+            .then(function() {
+                // No groups initially
+                expect(gd._fullData[0].node.groups).toEqual([]);
+            })
+            .then(function() {
+                // Grouping the two nodes on the top right
+                drag([[640, 130], [400, 450]]);
+            })
+            .then(delay(waitingTime))
+            .then(function() {
+                expect(gd._fullData[0].node.groups).toEqual([]);
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 });