add a link hovercolor attribute so that end users can customize their hover styling easily (+6 squashed commits)

Squashed commits:
[9555c0c] catch exceptions when trying to read access-restricted css files, and update test case to look for css styling
[635e5ee] adhere to style guide CI/CD feedback
[afcbcc2] remove 'const' in favor of 'var' per CI/CD rules
[5e2444b] use 'var' instead of 'let' per ci/cd guide
[ba96e96] add a draftlogs entry
[b8238e0] Allow end users to override the sankey link hover style by providing their own css styling

Author: Michael Potter

draftlogs/6839_change.md

@@ -0,0 +1 @@
+- Update Sankey trace to allow user-defined link hover style override [[#6839](https://github.com/plotly/plotly.js/pull/6839)]

src/traces/sankey/attributes.js

@@ -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 hovor 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',

src/traces/sankey/calc.js

@@ -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 = {};
 
@@ -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,

src/traces/sankey/defaults.js

@@ -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)';
+
     coerceLink('color', Lib.repeat(defaultLinkColor, linkOut.value.length));
+    coerceLink('hovercolor', Lib.repeat(defaultHoverColor, linkOut.value.length));
     coerceLink('customdata');
 
     handleArrayContainerDefaults(linkIn, linkOut, {

src/traces/sankey/plot.js

@@ -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;
         }
     });
 
@@ -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;
                     }
                 });
         }
@@ -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;});
         }
     });
 

src/traces/sankey/render.js

@@ -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;
 
@@ -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,

test/jasmine/tests/sankey_test.js

@@ -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.0');
                         });
                 }).then(function() {
                     mouseEvent('mouseout', 200, 250);