sankey: in snap, separate overlapping nodes even if node.(x|y) is set

Author: antoinerg

src/traces/sankey/render.js

@@ -168,6 +168,70 @@ function sankeyModel(layout, d, traceIndex) {
     }
     computeLinkConcentrations();
 
+    // Push any overlapping nodes down.
+    function resolveCollisionsTopToBottom(columns) {
+        columns.forEach(function(nodes) {
+            var node;
+            var dy;
+            var y = 0;
+            var n = nodes.length;
+            var i;
+            nodes.sort(function(a, b) {
+                return a.y0 - b.y0;
+            });
+            for(i = 0; i < n; ++i) {
+                node = nodes[i];
+                if(node.y0 >= y) {
+                    // No overlap
+                } else {
+                    dy = (y - node.y0);
+                    if(dy > 1e-6) node.y0 += dy, node.y1 += dy;
+                }
+                y = node.y1 + nodePad;
+            }
+        });
+    }
+
+    // Group nodes into columns based on their x position
+    function snapToColumns(nodes) {
+        // Sort nodes by x position
+        var orderedNodes = nodes.map(function(n, i) {
+            return {
+                x0: n.x0,
+                index: i
+            };
+        })
+        .sort(function(a, b) {
+            return a.x0 - b.x0;
+        });
+
+        var columns = [];
+        var colNumber = -1;
+        var colX; // Position of column
+        var lastX = -nodeThickness; // Position of last node
+        var dx;
+        for(i = 0; i < orderedNodes.length; i++) {
+            var node = nodes[orderedNodes[i].index];
+            // If the node does not overlap with the last one
+            if(node.x0 > lastX + nodeThickness) {
+                // Start a new column
+                colNumber += 1;
+                colX = node.x0;
+            }
+            lastX = node.x0;
+
+            // Add node to its associated column
+            if(!columns[colNumber]) columns[colNumber] = [];
+            columns[colNumber].push(node);
+
+            // Change node's x position to align it with its column
+            dx = colX - node.x0;
+            node.x0 += dx, node.x1 += dx;
+
+        }
+        return columns;
+    }
+
     // Force node position
     if(trace.node.x.length !== 0 && trace.node.y.length !== 0) {
         for(i = 0; i < Math.min(trace.node.x.length, trace.node.y.length, graph.nodes.length); i++) {
@@ -181,6 +245,11 @@ function sankeyModel(layout, d, traceIndex) {
                 graph.nodes[i].y1 = pos[1] + nodeHeight / 2;
             }
         }
+        if(trace.arrangement === 'snap') {
+            nodes = graph.nodes;
+            var columns = snapToColumns(nodes);
+            resolveCollisionsTopToBottom(columns);
+        }
         // Update links
         sankey.update(graph);
     }
@@ -720,8 +789,8 @@ function sameLayer(d) {
 function switchToForceFormat(nodes) {
     // force uses x, y as centers
     for(var i = 0; i < nodes.length; i++) {
-        nodes[i].y = nodes[i].y0 + nodes[i].dy / 2;
-        nodes[i].x = nodes[i].x0 + nodes[i].dx / 2;
+        nodes[i].y = (nodes[i].y0 + nodes[i].y1) / 2;
+        nodes[i].x = (nodes[i].x0 + nodes[i].x1) / 2;
     }
 }
 

test/image/baselines/sankey_x_y.png

@@ -4,10 +4,9 @@
             "type": "sankey",
             "arrangement": "freeform",
             "node": {
-                "pad": 5,
                 "label": ["0", "1", "2", "3", "4", "5"],
-                "x": [0.128, 0.128, 0.559, 0.785, 0.352, 0.593],
-                "y": [0.738, 0.165, 0.205, 0.390, 0.165, 0.733]
+                "x": [0.128, 0.128, 0.559, 0.785, 0.352, 0.559],
+                "y": [0.738, 0.165, 0.205, 0.390, 0.165, 0.256]
             },
             "link": {
                 "source": [

test/image/mocks/sankey_x_y.json

@@ -0,0 +1,38 @@
+'use strict';
+
+function compare(baseRects, compareRects) {
+    return baseRects.left < compareRects.right &&
+            baseRects.right > compareRects.left &&
+            baseRects.top < compareRects.bottom &&
+            baseRects.bottom > compareRects.top;
+}
+
+module.exports = function checkOverlap(base, elements) {
+    var baseRects = base.getBoundingClientRect();
+
+    // handle array as second argument
+    if(Array.isArray(elements)) {
+        return elements.map(function(el) {
+            if(!el) return false;
+
+            var compareRects = el.getBoundingClientRect();
+            return compare(baseRects, compareRects);
+        });
+    }
+
+    // handle HTMLCollection or NodeList as second argument
+    if(elements instanceof NodeList || elements instanceof HTMLCollection) {
+        var collection = Array.prototype.slice.call(elements);
+
+        return collection.map(function(el) {
+            // check for holly or null values
+            if(!el) return false;
+
+            var compareRects = el.getBoundingClientRect();
+            return compare(baseRects, compareRects);
+        });
+    }
+
+    // assume element is node
+    return compare(baseRects, elements.getBoundingClientRect());
+};

test/jasmine/assets/check_overlap.js

@@ -8,6 +8,7 @@ var mock = require('@mocks/sankey_energy.json');
 var mockDark = require('@mocks/sankey_energy_dark.json');
 var mockCircular = require('@mocks/sankey_circular.json');
 var mockCircularLarge = require('@mocks/sankey_circular_large.json');
+var mockXY = require('@mocks/sankey_x_y.json');
 var Sankey = require('@src/traces/sankey');
 
 var createGraphDiv = require('../assets/create_graph_div');
@@ -20,6 +21,7 @@ var supplyAllDefaults = require('../assets/supply_defaults');
 var defaultColors = require('@src/components/color/attributes').defaults;
 
 var drag = require('../assets/drag');
+var checkOverlap = require('../assets/check_overlap');
 
 describe('sankey tests', function() {
 
@@ -510,6 +512,32 @@ describe('sankey tests', function() {
               });
         });
 
+        it('prevents nodes from overlapping in snap arrangement', function(done) {
+            function checkElementOverlap(i, j) {
+                var base = document.querySelector('.sankey-node:nth-of-type(' + i + ')');
+                base = base.querySelector('.node-rect');
+                var compare = document.querySelector('.sankey-node:nth-of-type(' + j + ')');
+                compare = compare.querySelector('.node-rect');
+                return checkOverlap(base, compare);
+            }
+
+            var mockCopy = Lib.extendDeep({}, mockXY);
+
+            Plotly.plot(gd, mockCopy)
+            .then(function() {
+                // Nodes overlap
+                expect(checkElementOverlap(3, 6)).toBeTruthy('nodes do not overlap');
+
+                mockCopy.data[0].arrangement = 'snap';
+                return Plotly.newPlot(gd, mockCopy);
+            })
+            .then(function() {
+                // Nodes do not overlap in snap
+                expect(checkElementOverlap(3, 6)).not.toBeTruthy('nodes overlap');
+            })
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('Test hover/click interactions:', function() {
@@ -1039,7 +1067,7 @@ describe('sankey tests', function() {
                             nodes = document.getElementsByClassName('sankey-node');
                             node = nodes.item(nodeId);
                             position = getNodeCoords(node);
-                            var timeDelay = (arrangement === 'snap') ? 1000 : 0; // Wait for force simulation to finish
+                            var timeDelay = (arrangement === 'snap') ? 2000 : 0; // Wait for force simulation to finish
                             return drag(node, move[0], move[1], false, false, false, 10, false, timeDelay);
                         })
                         .then(function() {
@@ -1075,11 +1103,12 @@ describe('sankey tests', function() {
 
                 it('should persist the position of every nodes after drag in attributes nodes.(x|y)', function(done) {
                     mockCopy.data[0].arrangement = arrangement;
-                    var move = [50, 50];
+                    var move = [50, -50];
                     var nodes;
                     var node;
                     var x, x1;
                     var y, y1;
+                    var precision = 3;
 
                     Plotly.newPlot(gd, mockCopy)
                       .then(function() {
@@ -1106,13 +1135,13 @@ describe('sankey tests', function() {
                           x1 = gd._fullData[0].node.x.slice();
                           y1 = gd._fullData[0].node.y.slice();
                           if(arrangement === 'freeform') expect(x1[nodeId]).not.toBeCloseTo(x[nodeId], 2, 'node ' + nodeId + ' has not changed x position');
-                          expect(y1[nodeId]).not.toBeCloseTo(y[nodeId], 2, 'node ' + nodeId + ' has not changed y position');
+                          expect(y1[nodeId]).not.toBeCloseTo(y[nodeId], precision, 'node ' + nodeId + ' has not changed y position');
 
                           // All nodes should have same x, y values after drag
                           for(var i = 0; i < x.length; i++) {
                               if(i === nodeId) continue; // except the one was just dragged
-                              if(arrangement === 'freeform') expect(x[i]).toBeCloseTo(x[i], 3, 'node ' + i + ' has changed x position');
-                              expect(y[i]).toBeCloseTo(y[i], 3, 'node ' + i + ' has changed y position');
+                              if(arrangement === 'freeform') expect(x1[i]).toBeCloseTo(x[i], 3, 'node ' + i + ' has changed x position');
+                              expect(y1[i]).toBeCloseTo(y[i], precision, 'node ' + i + ' has changed y position');
                           }
                           return true;
                       })
@@ -1121,8 +1150,8 @@ describe('sankey tests', function() {
                 });
             });
         });
-
     });
+
     it('emits a warning if node.pad is too large', function(done) {
         var gd = createGraphDiv();
         var mockCopy = Lib.extendDeep({}, mock);