Merge pull request #4867 from plotly/gl-hover-color

propagate WebGL traces with marker & line color arrays to hover labels

Author: archmoj

src/components/fx/hover.js

@@ -1103,16 +1103,21 @@ function createHoverText(hoverData, opts, gd) {
     hoverLabels.each(function(d) {
         var g = d3.select(this).attr('transform', '');
 
+        var dColor = d.color;
+        if(Array.isArray(dColor)) {
+            dColor = dColor[d.eventData[0].pointNumber];
+        }
+
         // combine possible non-opaque trace color with bgColor
-        var color0 = d.bgcolor || d.color;
+        var color0 = d.bgcolor || dColor;
         // color for 'nums' part of the label
         var numsColor = Color.combine(
             Color.opacity(color0) ? color0 : Color.defaultLine,
             bgColor
         );
         // color for 'name' part of the label
         var nameColor = Color.combine(
-            Color.opacity(d.color) ? d.color : Color.defaultLine,
+            Color.opacity(dColor) ? dColor : Color.defaultLine,
             bgColor
         );
         // find a contrasting color for border and text

src/traces/scatter3d/convert.js

@@ -331,11 +331,11 @@ function convertPlotlyOptions(scene, data) {
     return params;
 }
 
-function arrayToColor(color) {
-    if(Array.isArray(color)) {
+function _arrayToColor(color) {
+    if(Lib.isArrayOrTypedArray(color)) {
         var c = color[0];
 
-        if(Array.isArray(c)) color = c;
+        if(Lib.isArrayOrTypedArray(c)) color = c;
 
         return 'rgb(' + color.slice(0, 3).map(function(x) {
             return Math.round(x * 255);
@@ -345,6 +345,18 @@ function arrayToColor(color) {
     return null;
 }
 
+function arrayToColor(colors) {
+    if(!Lib.isArrayOrTypedArray(colors)) {
+        return null;
+    }
+
+    if((colors.length === 4) && (typeof colors[0] === 'number')) {
+        return _arrayToColor(colors);
+    }
+
+    return colors.map(_arrayToColor);
+}
+
 proto.update = function(data) {
     var gl = this.scene.glplot.gl;
     var lineOptions;

test/jasmine/tests/gl2d_click_test.js

@@ -23,6 +23,7 @@ Plotly.register([
     require('@lib/contourgl')
 ]);
 
+var mock0 = require('@mocks/gl2d_scatter-continuous-clustering.json');
 var mock1 = require('@mocks/gl2d_14.json');
 var mock2 = require('@mocks/gl2d_pointcloud-basic.json');
 
@@ -445,6 +446,31 @@ describe('Test hover and click interactions', function() {
         .then(done);
     });
 
+    it('@gl scatter3d should propagate marker colors to hover labels', function(done) {
+        var _mock = Lib.extendDeep({}, mock0);
+        _mock.layout.width = 800;
+        _mock.layout.height = 600;
+
+        var run = makeRunner([700, 300], {
+            x: 15075859,
+            y: 79183,
+            curveNumber: 0,
+            pointNumber: 0,
+            bgcolor: 'rgb(202, 178, 214)',
+            bordercolor: 'rgb(68, 68, 68)',
+            fontSize: 13,
+            fontFamily: 'Arial',
+            fontColor: 'rgb(68, 68, 68)'
+        }, {
+            msg: 'pointcloud'
+        });
+
+        Plotly.newPlot(gd, _mock)
+        .then(run)
+        .catch(failTest)
+        .then(done);
+    });
+
     it('@gl should output correct event data for heatmapgl', function(done) {
         var _mock = Lib.extendDeep({}, mock3);
         _mock.data[0].type = 'heatmapgl';