Merge pull request #6799 from DominicWuest/fix-sankey-trace-highlight

Fix hovering over Sankey node only fully highlights first trace

Author: archmoj

draftlogs/6799_fix.md

@@ -0,0 +1 @@
+ -  Fix hovering over Sankey node only fully highlights first trace [[#6799](https://github.com/plotly/plotly.js/pull/6799)], with thanks to @DominicWuest for the contribution!

src/traces/sankey/plot.js

@@ -62,24 +62,25 @@ function nodeNonHoveredStyle(sankeyNode, d, sankey) {
 }
 
 function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
-    var label = sankeyLink.datum().link.label;
-
     sankeyLink.style('fill-opacity', function(l) {
         if(!l.link.concentrationscale) {
             return 0.4;
         }
     });
 
-    if(label) {
-        ownTrace(sankey, d)
-            .selectAll('.' + cn.sankeyLink)
-            .filter(function(l) {return l.link.label === label;})
-            .style('fill-opacity', function(l) {
-                if(!l.link.concentrationscale) {
-                    return 0.4;
-                }
-            });
-    }
+    sankeyLink.each(function(curLink) {
+        var label = curLink.link.label;
+        if(label !== '') {
+            ownTrace(sankey, d)
+                .selectAll('.' + cn.sankeyLink)
+                .filter(function(l) {return l.link.label === label;})
+                .style('fill-opacity', function(l) {
+                    if(!l.link.concentrationscale) {
+                        return 0.4;
+                    }
+                });
+        }
+    });
 
     if(visitNodes) {
         ownTrace(sankey, d)
@@ -90,15 +91,17 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
 }
 
 function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) {
-    var label = sankeyLink.datum().link.label;
-
     sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
-    if(label) {
-        ownTrace(sankey, d)
-            .selectAll('.' + cn.sankeyLink)
-            .filter(function(l) {return l.link.label === label;})
-            .style('fill-opacity', function(d) {return d.tinyColorAlpha;});
-    }
+
+    sankeyLink.each(function(curLink) {
+        var label = curLink.link.label;
+        if(label !== '') {
+            ownTrace(sankey, d)
+                .selectAll('.' + cn.sankeyLink)
+                .filter(function(l) {return l.link.label === label;})
+                .style('fill-opacity', function(d) {return d.tinyColorAlpha;});
+        }
+    });
 
     if(visitNodes) {
         ownTrace(sankey, d)

test/jasmine/tests/sankey_test.js

@@ -1073,6 +1073,34 @@ describe('sankey tests', function() {
             })
             .then(done, done.fail);
         });
+
+        it('should (un-)highlight all traces ending in a (un-)hovered node', function(done) {
+            var gd = createGraphDiv();
+            var mockCopy = Lib.extendDeep({}, mock);
+
+            Plotly.newPlot(gd, mockCopy)
+                .then(function() {
+                    _hover(200, 250);
+                })
+                .then(function() {
+                    d3SelectAll('.sankey-link')
+                        .filter(function(obj) {
+                            return obj.link.label === 'stream 1';
+                        })[0].forEach(function(l) {
+                            expect(l.style.fillOpacity).toEqual('0.4');
+                        });
+                }).then(function() {
+                    mouseEvent('mouseout', 200, 250);
+                }).then(function() {
+                    d3SelectAll('.sankey-link')
+                        .filter(function(obj) {
+                            return obj.link.label === 'stream 1';
+                        })[0].forEach(function(l) {
+                            expect(l.style.fillOpacity).toEqual('0.2');
+                        });
+                })
+                .then(done, done.fail);
+        });
     });
 
     describe('Test hover/click event data:', function() {