sankey: add modebar button to compare on hover

Author: antoinerg

src/components/modebar/manage.js

@@ -86,6 +86,7 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
     var hasTernary = fullLayout._has('ternary');
     var hasMapbox = fullLayout._has('mapbox');
     var hasPolar = fullLayout._has('polar');
+    var hasSankey = fullLayout._has('sankey');
     var allAxesFixed = areAllAxesFixed(fullLayout);
 
     var groups = [];
@@ -139,6 +140,9 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd, showSendToCloud) {
     else if(hasPie) {
         hoverGroup = ['hoverClosestPie'];
     }
+    else if(hasSankey) {
+        hoverGroup = ['hoverClosestCartesian', 'hoverCompareCartesian'];
+    }
     else { // hasPolar, hasTernary
         // always show at least one hover icon.
         hoverGroup = ['toggleHover'];

src/traces/sankey/plot.js

@@ -162,6 +162,7 @@ module.exports = function plot(gd, calcData) {
         // For each related links, create a hoverItem
         for(var i = 0; i < d.flow.links.length; i++) {
             var link = d.flow.links[i];
+            if(gd._fullLayout.hovermode === 'closest' && d.link.pointNumber !== link.pointNumber) continue;
             link.fullData = link.trace;
             obj = d.link.trace.link;
             var hoverCenterX;

test/image/mocks/sankey_link_concentration.json

@@ -70,6 +70,7 @@
     "layout": {
         "title": "Sankey diagram with links colored based on their concentration within a flow",
         "width": 800,
-        "height": 800
+        "height": 800,
+        "hovermode": "x"
     }
 }