From 81998ac729f47c87c9cf482be4cfa15c5bb7ad36 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Mon, 27 Nov 2023 19:59:03 +0100 Subject: [PATCH 1/8] Fix 6328 - Hovering over Sankey node highlights all full traces --- src/traces/sankey/plot.js | 43 +++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 715a47ff36c..48f6ea4321c 100644 --- a/src/traces/sankey/plot.js +++ b/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((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(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) From b3efac213e65cb7c5e5da9389d8549908fee2c93 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Mon, 27 Nov 2023 20:13:19 +0100 Subject: [PATCH 2/8] Add draft log for PR 6799 --- draftlogs/6799_fix.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/6799_fix.md diff --git a/draftlogs/6799_fix.md b/draftlogs/6799_fix.md new file mode 100644 index 00000000000..e15159a24b0 --- /dev/null +++ b/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)] From 2689419ce087d3100957ae3f37505487f6a188d2 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Mon, 27 Nov 2023 20:29:59 +0100 Subject: [PATCH 3/8] Fix linter errors --- src/traces/sankey/plot.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index 48f6ea4321c..ffd6b704664 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -68,7 +68,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { } }); - sankeyLink.each((curLink => { + sankeyLink.each(function(curLink) { var label = curLink.link.label; if(label) { ownTrace(sankey, d) @@ -80,7 +80,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { } }); } - })) + }); if(visitNodes) { ownTrace(sankey, d) @@ -93,7 +93,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;}); - sankeyLink.each(curLink => { + sankeyLink.each(function(curLink) { var label = curLink.link.label; if(label) { ownTrace(sankey, d) @@ -101,7 +101,7 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { .filter(function(l) {return l.link.label === label;}) .style('fill-opacity', function(d) {return d.tinyColorAlpha;}); } - }) + }); if(visitNodes) { ownTrace(sankey, d) From 0527052277857c3d55b68f24c147b96b66949f2a Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Sun, 10 Dec 2023 13:29:19 +0100 Subject: [PATCH 4/8] Improve if condition clarity --- src/traces/sankey/plot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index ffd6b704664..f69670ab2ff 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -70,7 +70,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { sankeyLink.each(function(curLink) { var label = curLink.link.label; - if(label) { + if(label !== undefined) { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) @@ -95,7 +95,7 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { sankeyLink.each(function(curLink) { var label = curLink.link.label; - if(label) { + if(label !== undefined) { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) From 54269a6e73a91b7f81edbafce213c353f5df9344 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Fri, 15 Dec 2023 16:06:28 +0100 Subject: [PATCH 5/8] Fix if condition --- src/traces/sankey/plot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js index f69670ab2ff..8907d1fc02f 100644 --- a/src/traces/sankey/plot.js +++ b/src/traces/sankey/plot.js @@ -70,7 +70,7 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) { sankeyLink.each(function(curLink) { var label = curLink.link.label; - if(label !== undefined) { + if(label !== '') { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) @@ -95,7 +95,7 @@ function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) { sankeyLink.each(function(curLink) { var label = curLink.link.label; - if(label !== undefined) { + if(label !== '') { ownTrace(sankey, d) .selectAll('.' + cn.sankeyLink) .filter(function(l) {return l.link.label === label;}) From 5962af9f5ea2709b0bfa5386f13937108c1731c7 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Fri, 15 Dec 2023 16:06:49 +0100 Subject: [PATCH 6/8] Added test --- test/jasmine/tests/sankey_test.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 3fb1d7188e5..854516d1002 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/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(1000, 400); + }) + .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', 1000, 400); + }).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() { From 3105987027e6002433fd56696dd41d23737df5e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominic=20W=C3=BCst?= <42354311+DominicWuest@users.noreply.github.com> Date: Fri, 15 Dec 2023 16:21:32 +0100 Subject: [PATCH 7/8] Add credit in draftlog Co-authored-by: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> --- draftlogs/6799_fix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/draftlogs/6799_fix.md b/draftlogs/6799_fix.md index e15159a24b0..a3b9dcc1ab7 100644 --- a/draftlogs/6799_fix.md +++ b/draftlogs/6799_fix.md @@ -1 +1 @@ - - Fix hovering over Sankey node only fully highlights first trace [[#6799](https://github.com/plotly/plotly.js/pull/6799)] + - 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! From 2d81fdfb136159c68954d32afc7bd3fe6b525b04 Mon Sep 17 00:00:00 2001 From: DominicWuest Date: Fri, 15 Dec 2023 16:27:18 +0100 Subject: [PATCH 8/8] Change target node in test --- test/jasmine/tests/sankey_test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 854516d1002..18506de1eee 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -1080,7 +1080,7 @@ describe('sankey tests', function() { Plotly.newPlot(gd, mockCopy) .then(function() { - _hover(1000, 400); + _hover(200, 250); }) .then(function() { d3SelectAll('.sankey-link') @@ -1090,7 +1090,7 @@ describe('sankey tests', function() { expect(l.style.fillOpacity).toEqual('0.4'); }); }).then(function() { - mouseEvent('mouseout', 1000, 400); + mouseEvent('mouseout', 200, 250); }).then(function() { d3SelectAll('.sankey-link') .filter(function(obj) {