hover: in compare modes, select all points sharing axis position

Author: antoinerg

src/components/fx/hover.js

@@ -365,7 +365,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
     // find the closest point in each trace
     // this is minimum dx and/or dy, depending on mode
     // and the pixel position for the label (labelXpx, labelYpx)
-    function findHoverPoints(vals) {
+    function findHoverPoints(customXVal, customYVal) {
         for(curvenum = 0; curvenum < searchData.length; curvenum++) {
             cd = searchData[curvenum];
 
@@ -467,6 +467,9 @@ function _hover(gd, evt, subplot, noHoverEvent) {
                         mode = mode ? 'closest' : 'y';
                     }
                 }
+            } else if(customXVal !== undefined && customYVal !== undefined) {
+                xval = customXVal;
+                yval = customYVal;
             } else {
                 xval = xvalArray[subploti];
                 yval = yvalArray[subploti];
@@ -625,6 +628,46 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
     hoverData.sort(function(d1, d2) { return d1.distance - d2.distance; });
 
+    // If in compare mode, select every point at position
+    if(hoverData[0].length !== 0 &&
+      ['x', 'y'].indexOf(mode) !== -1 &&
+      hoverData[0].trace.type !== 'splom' // TODO: add support for splom
+    ) {
+        var hd = hoverData[0];
+        var cd0 = hd.cd[hd.index];
+        var isGrouped = (fullLayout.boxmode === 'group' || fullLayout.violinmode === 'group');
+
+        var xVal = hd.xVal;
+        var ax = hd.xa;
+        if(ax.type === 'category') xVal = ax._categoriesMap[xVal];
+        if(ax.type === 'date') xVal = ax.d2c(xVal);
+        if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) {
+            xVal += cd0.t.dPos;
+        }
+
+        var yVal = hd.yVal;
+        ax = hd.ya;
+        if(ax.type === 'category') yVal = ax._categoriesMap[yVal];
+        if(ax.type === 'date') yVal = ax.d2c(yVal);
+        if(cd0 && cd0.t && cd0.t.posLetter === ax._id && isGrouped) {
+            yVal += cd0.t.dPos;
+        }
+
+        findHoverPoints(xVal, yVal);
+
+        // Remove duplicated hoverData points
+        // note that d3 also filters identical points in the rendering steps
+        // TODO: use ES6 map
+        var repeated = {};
+        hoverData = hoverData.filter(function(hd) {
+            var key = hoverDataKey(hd);
+            if(!repeated[key]) {
+                repeated[key] = true;
+                return repeated[key];
+            }
+        });
+    }
+
     // lastly, emit custom hover/unhover events
     var oldhoverdata = gd._hoverdata;
     var newhoverdata = [];
@@ -703,6 +746,10 @@ function _hover(gd, evt, subplot, noHoverEvent) {
     });
 }
 
+function hoverDataKey(d) {
+    return [d.trace.index, d.index, d.x0, d.y0, d.name, d.attr, d.xa, d.ya || ''].join(',');
+}
+
 var EXTRA_STRING_REGEX = /<extra>([\s\S]*)<\/extra>/;
 
 function createHoverText(hoverData, opts, gd) {
@@ -1032,7 +1079,7 @@ function createHoverText(hoverData, opts, gd) {
         .data(hoverData, function(d) {
             // N.B. when multiple items have the same result key-function value,
             // only the first of those items in hoverData gets rendered
-            return [d.trace.index, d.index, d.x0, d.y0, d.name, d.attr, d.xa, d.ya || ''].join(',');
+            return hoverDataKey(d);
         });
     hoverLabels.enter().append('g')
         .classed('hovertext', true)

test/jasmine/tests/hover_label_test.js

@@ -996,8 +996,14 @@ describe('hover info', function() {
 
                 _hover(gd, 250, 270);
                 assertHoverLabelContent({
-                    nums: 'x: 1\ny: 1\nz: 5.56',
-                    name: 'one'
+                    nums: [
+                        'x: 1\ny: 1\nz: 5.56',
+                        'x: 1\ny: 1\nz: 0'
+                    ],
+                    name: [
+                        'one',
+                        'two'
+                    ]
                 });
             })
             .then(function() {
@@ -1012,8 +1018,8 @@ describe('hover info', function() {
 
                 _hover(gd, 250, 270);
                 assertHoverLabelContent({
-                    nums: 'f(1.0, 1.0)=5.56',
-                    name: ''
+                    nums: ['f(1.0, 1.0)=5.56', 'f(1.0, 1.0)=0'],
+                    name: ['', '']
                 });
             })
             .catch(failTest)
@@ -3629,6 +3635,84 @@ describe('hover distance', function() {
             });
         });
     });
+
+    describe('compare', function() {
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('selects all points at the same position on a linear axis', function(done) {
+            var x = [0, 1, 2];
+            var mock = {
+                data: [{type: 'bar', x: x, y: [4, 5, 6]}, {x: x, y: [5, 6, 7]}],
+                layout: {width: 400, height: 400, xaxis: {type: 'linear'}}
+            };
+
+            Plotly.newPlot(gd, mock)
+                .then(function(gd) {
+                    Fx.hover(gd, {xpx: 65});
+
+                    expect(gd._hoverdata.length).toEqual(2);
+                })
+                .catch(failTest)
+                .then(done);
+        });
+
+        it('selects all points at the same position on a log axis', function(done) {
+            var x = [0, 1, 2];
+            var mock = {
+                data: [{type: 'bar', x: x, y: [4, 5, 6]}, {x: x, y: [5, 6, 7]}],
+                layout: {width: 400, height: 400, xaxis: {type: 'log'}}
+            };
+
+            Plotly.newPlot(gd, mock)
+                .then(function(gd) {
+                    Fx.hover(gd, {xpx: 65});
+
+                    expect(gd._hoverdata.length).toEqual(2);
+                })
+                .catch(failTest)
+                .then(done);
+        });
+
+        it('selects all points at the same position on a category axis', function(done) {
+            var x = ['a', 'b', 'c'];
+            var mock = {
+                data: [{type: 'bar', x: x, y: [4, 5, 6]}, {x: x, y: [5, 6, 7]}],
+                layout: {width: 400, height: 400, xaxis: {type: 'category'}}
+            };
+
+            Plotly.newPlot(gd, mock)
+                .then(function(gd) {
+                    Fx.hover(gd, {xpx: 65});
+
+                    expect(gd._hoverdata.length).toEqual(2);
+                })
+                .catch(failTest)
+                .then(done);
+        });
+
+        it('selects all points at the same position on a date axis', function(done) {
+            var x = ['2018', '2019', '2020'];
+            var mock = {
+                data: [{type: 'bar', x: x, y: [4, 5, 6]}, {x: x, y: [5, 6, 7]}],
+                layout: {width: 400, height: 400, xaxis: {type: 'date'}}
+            };
+
+            Plotly.newPlot(gd, mock)
+                .then(function(gd) {
+                    Fx.hover(gd, {xpx: 65});
+
+                    expect(gd._hoverdata.length).toEqual(2);
+                })
+                .catch(failTest)
+                .then(done);
+        });
+    });
 });
 
 describe('hover label rotation:', function() {