Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Sankey Link Hover Styling (via link hovercolor attribute) #6864

Merged
merged 8 commits into from
Jan 31, 2024
Merged

Feature: Sankey Link Hover Styling (via link hovercolor attribute) #6864

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dd4765e
add a link hovercolor attribute so that end users can customize their…
Jan 10, 2024
ecfc8b9
update draftlogs
Jan 22, 2024
2b0f2ae
switch test to account for round-off
Jan 22, 2024
1055a02
update plot-schema to account for hovercolor entry
Jan 22, 2024
82315aa
Update src/traces/sankey/attributes.js
archmoj Jan 26, 2024
52583d2
spelling fix
Jan 26, 2024
58bb631
modify hover default to change opacity rather than set everything to …
Jan 30, 2024
2c7eda1
fix linter issues
Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions draftlogs/6864_change.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Update Sankey trace to allow user-defined link hover style override [[#6864](https://github.com/plotly/plotly.js/pull/6864)]
9 changes: 9 additions & 0 deletions src/traces/sankey/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,15 @@ var attrs = module.exports = overrideAll({
'If `link.color` is omitted, then by default, a translucent grey link will be used.'
].join(' ')
},
hovercolor: {
valType: 'color',
arrayOk: true,
description: [
'Sets the `link` hover color. It can be a single value, or an array for specifying hover colors for',
'each `link`. If `link.hovercolor` is omitted, then by default, links will become solid grey when',
'hovered over.'
].join(' ')
},
customdata: {
valType: 'data_array',
editType: 'calc',
Expand Down
2 changes: 2 additions & 0 deletions src/traces/sankey/calc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function convertToD3Sankey(trace) {

var links = [];
var hasLinkColorArray = isArrayOrTypedArray(linkSpec.color);
var hasLinkHoverColorArray = isArrayOrTypedArray(linkSpec.hovercolor);
var hasLinkCustomdataArray = isArrayOrTypedArray(linkSpec.customdata);
var linkedNodes = {};

Expand Down Expand Up @@ -96,6 +97,7 @@ function convertToD3Sankey(trace) {
pointNumber: i,
label: label,
color: hasLinkColorArray ? linkSpec.color[i] : linkSpec.color,
hovercolor: hasLinkHoverColorArray ? linkSpec.hovercolor[i] : linkSpec.hovercolor,
customdata: hasLinkCustomdataArray ? linkSpec.customdata[i] : linkSpec.customdata,
concentrationscale: concentrationscale,
source: source,
Expand Down
5 changes: 5 additions & 0 deletions src/traces/sankey/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
'rgba(255, 255, 255, 0.6)' :
'rgba(0, 0, 0, 0.2)';

var defaultHoverColor = tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?
'rgba(128, 128, 128, 1.0)' :
'rgba(128, 128, 128, 1.0)';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the difference between these two values?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, there isn't. I left that in case y'all wanted to have the default be different between dark mode and light mode, but if it's agreed that grey is ok regardless of bgcolor then it can be simplified

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@alexcjohnson What would you suggest here?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue with grey is it won’t be visible on a grey background. But semi opaque black on a light background and semi opaque white on a dark background makes it visible in all cases

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you have specific rgba values in mind for the two cases? I'm happy to swap in whatever defaults you think look good

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm I thought I had written this idea down somewhere but not seeing it now. What I'd propose is to choose the default hover color based on the actual link color (and sometimes the background), either more opaque or (if already opaque) farther from the background:

var darkBG = tinycolor(layout.paper_bgcolor).getLuminance() < 0.333;
var defaultLinkColor = darkBG ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.2)';
// Lib.repeat is unnecessary AFAICT - provide a single color and it works fine, right?
var linkColor = coerceLink('color', defaultLinkColor);

function makeDefaultHoverColor(_linkColor) {
    var tc = tinycolor(_linkColor);
    if (!tc.isValid()) {
        // does this happen? like can linkColor be an array of numbers or something?
        return _linkColor;
    }
    var alpha = tc.getAlpha();
    if (alpha <= 0.8) {
        tc.setAlpha(alpha + 0.2);
    }
    else {
        tc = darkBG ? tc.brighten() : tc.darken();
    }
    return tc.toRgbString();
}

coerceLink('hovercolor', Array.isArray(linkColor) ? 
    linkColor.map(makeDefaultHoverColor) :
    makeDefaultHoverColor(linkColor)
);

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, cool. I've swapped the PR to your proposed defaults


coerceLink('color', Lib.repeat(defaultLinkColor, linkOut.value.length));
coerceLink('hovercolor', Lib.repeat(defaultHoverColor, linkOut.value.length));
coerceLink('customdata');

handleArrayContainerDefaults(linkIn, linkOut, {
Expand Down
25 changes: 19 additions & 6 deletions src/traces/sankey/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,13 @@ function nodeNonHoveredStyle(sankeyNode, d, sankey) {
}

function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
sankeyLink.style('fill-opacity', function(l) {
sankeyLink.style('fill', function(l) {
if(!l.link.concentrationscale) {
return 0.4;
return l.tinyColorHoverHue;
}
}).style('fill-opacity', function(l) {
if(!l.link.concentrationscale) {
return l.tinyColorHoverAlpha;
}
});

Expand All @@ -74,9 +78,13 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
ownTrace(sankey, d)
.selectAll('.' + cn.sankeyLink)
.filter(function(l) {return l.link.label === label;})
.style('fill-opacity', function(l) {
.style('fill', function(l) {
if(!l.link.concentrationscale) {
return 0.4;
return l.tinyColorHoverHue;
}
}).style('fill-opacity', function(l) {
if(!l.link.concentrationscale) {
return l.tinyColorHoverAlpha;
}
});
}
Expand All @@ -91,15 +99,20 @@ function linkHoveredStyle(d, sankey, visitNodes, sankeyLink) {
}

function linkNonHoveredStyle(d, sankey, visitNodes, sankeyLink) {
sankeyLink.style('fill-opacity', function(d) {return d.tinyColorAlpha;});
sankeyLink.style('fill', function(l) {
return l.tinyColorHue;
}).style('fill-opacity', function(l) {
return l.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;});
.style('fill', function(l) {return l.tinyColorHue;})
.style('fill-opacity', function(l) {return l.tinyColorAlpha;});
}
});

Expand Down
3 changes: 3 additions & 0 deletions src/traces/sankey/render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,7 @@ function sankeyModel(layout, d, traceIndex) {

function linkModel(d, l, i) {
var tc = tinycolor(l.color);
var htc = tinycolor(l.hovercolor);
var basicKey = l.source.label + '|' + l.target.label;
var key = basicKey + '__' + i;

Expand All @@ -314,6 +315,8 @@ function linkModel(d, l, i) {
link: l,
tinyColorHue: Color.tinyRGB(tc),
tinyColorAlpha: tc.getAlpha(),
tinyColorHoverHue: Color.tinyRGB(htc),
tinyColorHoverAlpha: htc.getAlpha(),
linkPath: linkPath,
linkLineColor: d.linkLineColor,
linkLineWidth: d.linkLineWidth,
Expand Down
2 changes: 1 addition & 1 deletion test/jasmine/tests/sankey_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1087,7 +1087,7 @@ describe('sankey tests', function() {
.filter(function(obj) {
return obj.link.label === 'stream 1';
})[0].forEach(function(l) {
expect(l.style.fillOpacity).toEqual('0.4');
expect(l.style.fillOpacity).toEqual('1');
});
}).then(function() {
mouseEvent('mouseout', 200, 250);
Expand Down
11 changes: 11 additions & 0 deletions test/plot-schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44148,6 +44148,17 @@
},
"description": "The links of the Sankey plot.",
"editType": "calc",
"hovercolor": {
"arrayOk": true,
"description": "Sets the `link` hover color. It can be a single value, or an array for specifying hovor colors for each `link`. If `link.hovercolor` is omitted, then by default, links will become solid grey when hovered over.",
TortoiseHam marked this conversation as resolved.
Show resolved Hide resolved
"editType": "calc",
"valType": "color"
},
"hovercolorsrc": {
"description": "Sets the source reference on Chart Studio Cloud for `hovercolor`.",
"editType": "none",
"valType": "string"
},
"hoverinfo": {
"description": "Determines which trace information appear when hovering links. If `none` or `skip` are set, no information is displayed upon hovering. But, if `none` is set, click and hover events are still fired.",
"dflt": "all",
Expand Down