sankey node and link each have their own hover attributes

Author: antoinerg

src/traces/sankey/attributes.js

@@ -18,11 +18,6 @@ var extendFlat = require('../../lib/extend').extendFlat;
 var overrideAll = require('../../plot_api/edit_types').overrideAll;
 
 module.exports = overrideAll({
-    hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
-        flags: ['label', 'text', 'value', 'percent', 'name'],
-    }),
-    hoverlabel: fxAttrs.hoverlabel, // needs editType override
-
     domain: domainAttrs({name: 'sankey', trace: true}),
 
     orientation: {
@@ -127,6 +122,8 @@ module.exports = overrideAll({
             role: 'style',
             description: 'Sets the thickness (in px) of the `nodes`.'
         },
+        hoverinfo: Object.assign(plotAttrs.hoverinfo, {flags: []}),
+        hoverlabel: fxAttrs.hoverlabel, // needs editType override,
         description: 'The nodes of the Sankey plot.'
     },
 
@@ -185,6 +182,8 @@ module.exports = overrideAll({
             role: 'info',
             description: 'A numeric value representing the flow volume value.'
         },
+        hoverinfo: Object.assign(plotAttrs.hoverinfo, {flags: []}),
+        hoverlabel: fxAttrs.hoverlabel, // needs editType override,
         description: 'The links of the Sankey plot.'
     }
 }, 'calc', 'nested');

src/traces/sankey/defaults.js

@@ -13,6 +13,7 @@ var attributes = require('./attributes');
 var Color = require('../../components/color');
 var tinycolor = require('tinycolor2');
 var handleDomainDefaults = require('../../plots/domain').defaults;
+var Registry = require('../../registry');
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -24,6 +25,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('node.thickness');
     coerce('node.line.color');
     coerce('node.line.width');
+    coerce('node.hoverinfo');
+    Registry.getComponentMethod(
+        'fx',
+        'supplyDefaults'
+    )(traceIn.node, traceOut.node, defaultColor, layout);
 
     var colors = layout.colorway;
 
@@ -39,6 +45,11 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('link.value');
     coerce('link.line.color');
     coerce('link.line.width');
+    coerce('link.hoverinfo');
+    Registry.getComponentMethod(
+        'fx',
+        'supplyDefaults'
+    )(traceIn.link, traceOut.link, defaultColor, layout);
 
     coerce('link.color', traceOut.link.value.map(function() {
         return tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?

src/traces/sankey/plot.js

@@ -132,7 +132,7 @@ module.exports = function plot(gd, calcData) {
     var linkHover = function(element, d, sankey) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(linkHoveredStyle.bind(0, d, sankey, true));
-        if(d.link.trace.hoverinfo !== 'skip') {
+        if(d.link.trace.link.hoverinfo !== 'skip') {
             gd.emit('plotly_hover', {
                 event: d3.event,
                 points: [d.link]
@@ -148,8 +148,8 @@ module.exports = function plot(gd, calcData) {
 
     var linkHoverFollow = function(element, d) {
         if(gd._fullLayout.hovermode === false) return;
-        var trace = d.link.trace;
-        if(trace.hoverinfo === 'none' || trace.hoverinfo === 'skip') return;
+        var obj = d.link.trace.link;
+        if(obj.hoverinfo === 'none' || obj.hoverinfo === 'skip') return;
         var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect();
         var boundingBox = element.getBoundingClientRect();
         var hoverCenterX = boundingBox.left + boundingBox.width / 2;
@@ -164,11 +164,11 @@ module.exports = function plot(gd, calcData) {
                 sourceLabel + d.link.source.label,
                 targetLabel + d.link.target.label
             ].filter(renderableValuePresent).join('<br>'),
-            color: castHoverOption(trace, 'bgcolor') || Color.addOpacity(d.tinyColorHue, 1),
-            borderColor: castHoverOption(trace, 'bordercolor'),
-            fontFamily: castHoverOption(trace, 'font.family'),
-            fontSize: castHoverOption(trace, 'font.size'),
-            fontColor: castHoverOption(trace, 'font.color'),
+            color: castHoverOption(obj, 'bgcolor') || Color.addOpacity(d.tinyColorHue, 1),
+            borderColor: castHoverOption(obj, 'bordercolor'),
+            fontFamily: castHoverOption(obj, 'font.family'),
+            fontSize: castHoverOption(obj, 'font.size'),
+            fontColor: castHoverOption(obj, 'font.color'),
             idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left'
         }, {
             container: fullLayout._hoverlayer.node(),
@@ -183,7 +183,7 @@ module.exports = function plot(gd, calcData) {
     var linkUnhover = function(element, d, sankey) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(linkNonHoveredStyle.bind(0, d, sankey, true));
-        if(d.link.trace.hoverinfo !== 'skip') {
+        if(d.link.trace.link.hoverinfo !== 'skip') {
             gd.emit('plotly_unhover', {
                 event: d3.event,
                 points: [d.link]
@@ -204,7 +204,7 @@ module.exports = function plot(gd, calcData) {
     var nodeHover = function(element, d, sankey) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(nodeHoveredStyle, d, sankey);
-        if(d.node.trace.hoverinfo !== 'skip') {
+        if(d.node.trace.node.hoverinfo !== 'skip') {
             gd.emit('plotly_hover', {
                 event: d3.event,
                 points: [d.node]
@@ -215,8 +215,8 @@ module.exports = function plot(gd, calcData) {
     var nodeHoverFollow = function(element, d) {
         if(gd._fullLayout.hovermode === false) return;
 
-        var trace = d.node.trace;
-        if(trace.hoverinfo === 'none' || trace.hoverinfo === 'skip') return;
+        var obj = d.node.trace.node;
+        if(obj.hoverinfo === 'none' || obj.hoverinfo === 'skip') return;
         var nodeRect = d3.select(element).select('.' + cn.nodeRect);
         var rootBBox = gd._fullLayout._paperdiv.node().getBoundingClientRect();
         var boundingBox = nodeRect.node().getBoundingClientRect();
@@ -234,11 +234,11 @@ module.exports = function plot(gd, calcData) {
                 incomingLabel + d.node.targetLinks.length,
                 outgoingLabel + d.node.sourceLinks.length
             ].filter(renderableValuePresent).join('<br>'),
-            color: castHoverOption(trace, 'bgcolor') || d.tinyColorHue,
-            borderColor: castHoverOption(trace, 'bordercolor'),
-            fontFamily: castHoverOption(trace, 'font.family'),
-            fontSize: castHoverOption(trace, 'font.size'),
-            fontColor: castHoverOption(trace, 'font.color'),
+            color: castHoverOption(obj, 'bgcolor') || d.tinyColorHue,
+            borderColor: castHoverOption(obj, 'bordercolor'),
+            fontFamily: castHoverOption(obj, 'font.family'),
+            fontSize: castHoverOption(obj, 'font.size'),
+            fontColor: castHoverOption(obj, 'font.color'),
             idealAlign: 'left'
         }, {
             container: fullLayout._hoverlayer.node(),
@@ -253,7 +253,7 @@ module.exports = function plot(gd, calcData) {
     var nodeUnhover = function(element, d, sankey) {
         if(gd._fullLayout.hovermode === false) return;
         d3.select(element).call(nodeNonHoveredStyle, d, sankey);
-        if(d.node.trace.hoverinfo !== 'skip') {
+        if(d.node.trace.node.hoverinfo !== 'skip') {
             gd.emit('plotly_unhover', {
                 event: d3.event,
                 points: [d.node]

test/jasmine/tests/sankey_test.js

@@ -394,6 +394,9 @@ describe('sankey tests', function() {
             Lib.clearThrottle();
         }
 
+        var node = [404, 302],
+            link = [450, 300];
+
         it('should show the correct hover labels', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
@@ -433,10 +436,14 @@ describe('sankey tests', function() {
                 );
 
                 return Plotly.restyle(gd, {
-                    'hoverlabel.bgcolor': 'red',
-                    'hoverlabel.bordercolor': 'blue',
-                    'hoverlabel.font.size': 20,
-                    'hoverlabel.font.color': 'black'
+                    'node.hoverlabel.bgcolor': 'red',
+                    'node.hoverlabel.bordercolor': 'blue',
+                    'node.hoverlabel.font.size': 20,
+                    'node.hoverlabel.font.color': 'black',
+                    'link.hoverlabel.bgcolor': 'red',
+                    'link.hoverlabel.bordercolor': 'blue',
+                    'link.hoverlabel.font.size': 20,
+                    'link.hoverlabel.font.color': 'black'
                 });
             })
             .then(function() {
@@ -459,7 +466,7 @@ describe('sankey tests', function() {
             .then(done);
         });
 
-        it('should show correct hover labels even if there is no link.label supplied', function(done) {
+        it('should show the correct hover labels even if there is no link.label supplied', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
             delete mockCopy.data[0].link.label;
@@ -477,48 +484,64 @@ describe('sankey tests', function() {
                 .then(done);
         });
 
-        it('should not show labels if hovermode is false', function(done) {
+        it('should not show any labels if hovermode is false', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
 
             Plotly.plot(gd, mockCopy).then(function() {
                 return Plotly.relayout(gd, 'hovermode', false);
             })
             .then(function() {
-                _hover(404, 302);
-
+                _hover(node[0], node[1]);
+                assertNoLabel();
+            })
+            .then(function() {
+                _hover(link[0], link[1]);
                 assertNoLabel();
             })
             .catch(failTest)
             .then(done);
         });
 
-        it('should not show labels if hoverinfo is none', function(done) {
+        it('should not show node labels if node.hoverinfo is none', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
 
             Plotly.plot(gd, mockCopy).then(function() {
-                return Plotly.restyle(gd, 'hoverinfo', 'none');
+                return Plotly.restyle(gd, 'node.hoverinfo', 'none');
             })
             .then(function() {
-                _hover(404, 302);
-
+                _hover(node[0], node[1]);
                 assertNoLabel();
             })
             .catch(failTest)
             .then(done);
         });
 
-        it('should not show labels if hoverinfo is skip', function(done) {
+        it('should not show link labels if link.hoverinfo is none', function(done) {
             var gd = createGraphDiv();
             var mockCopy = Lib.extendDeep({}, mock);
 
             Plotly.plot(gd, mockCopy).then(function() {
-                return Plotly.restyle(gd, 'hoverinfo', 'skip');
+                return Plotly.restyle(gd, 'link.hoverinfo', 'none');
             })
             .then(function() {
-                _hover(404, 302);
+                _hover(link[0], link[1]);
+                assertNoLabel();
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('should not show node labels if node.hoverinfo is skip', function(done) {
+            var gd = createGraphDiv();
+            var mockCopy = Lib.extendDeep({}, mock);
 
+            Plotly.plot(gd, mockCopy).then(function() {
+                return Plotly.restyle(gd, 'node.hoverinfo', 'skip');
+            })
+            .then(function() {
+                _hover(node[0], node[1]);
                 assertNoLabel();
             })
             .catch(failTest)
@@ -643,21 +666,13 @@ describe('sankey tests', function() {
             .then(done);
         });
 
-        function assertNoHoverEvents() {
+        function assertNoHoverEvents(type) {
             return Promise.resolve()
-            .then(function() { return _hover('node'); })
+            .then(function() { return _hover(type); })
             .then(failTest).catch(function(err) {
                 expect(err).toBe('plotly_hover did not get called!');
             })
-            .then(function() { return _unhover('node'); })
-            .then(failTest).catch(function(err) {
-                expect(err).toBe('plotly_unhover did not get called!');
-            })
-            .then(function() { return _hover('link'); })
-            .then(failTest).catch(function(err) {
-                expect(err).toBe('plotly_hover did not get called!');
-            })
-            .then(function() { return _unhover('link'); })
+            .then(function() { return _unhover(type); })
             .then(failTest).catch(function(err) {
                 expect(err).toBe('plotly_unhover did not get called!');
             });
@@ -668,7 +683,8 @@ describe('sankey tests', function() {
 
             Plotly.plot(gd, fig)
             .then(function() { return Plotly.relayout(gd, 'hovermode', false); })
-            .then(assertNoHoverEvents)
+            .then(function() { return assertNoHoverEvents('node');})
+            .then(function() { return assertNoHoverEvents('link');})
             .catch(failTest)
             .then(done);
         });
@@ -677,8 +693,8 @@ describe('sankey tests', function() {
             var fig = Lib.extendDeep({}, mock);
 
             Plotly.plot(gd, fig)
-            .then(function() { return Plotly.restyle(gd, 'hoverinfo', 'skip'); })
-            .then(assertNoHoverEvents)
+            .then(function() { return Plotly.restyle(gd, 'link.hoverinfo', 'skip'); })
+            .then(function() { return assertNoHoverEvents('link');})
             .catch(failTest)
             .then(done);
         });