aj-proof box hover logic

- show only 'best' boxpoint
- consider opposite coordinates in compare modes to find that
  'best' boxpoint
- allow box AND boxpoint hover labels only in compare modes
- no need for x/y w/o jitter offset values in 'pts' calc items

Author: etpinard

src/components/fx/helpers.js

@@ -34,7 +34,7 @@ exports.p2c = function p2c(axArray, v) {
 };
 
 exports.getDistanceFunction = function getDistanceFunction(mode, dx, dy, dxy) {
-    if(mode === 'closest') return dxy || quadrature(dx, dy);
+    if(mode === 'closest') return dxy || exports.quadrature(dx, dy);
     return mode === 'x' ? dx : dy;
 };
 
@@ -77,13 +77,13 @@ exports.inbox = function inbox(v0, v1) {
     return Infinity;
 };
 
-function quadrature(dx, dy) {
+exports.quadrature = function quadrature(dx, dy) {
     return function(di) {
         var x = dx(di),
             y = dy(di);
         return Math.sqrt(x * x + y * y);
     };
-}
+};
 
 /** Appends values inside array attributes corresponding to given point number
  *

src/components/fx/index.js

@@ -35,6 +35,7 @@ module.exports = {
     getDistanceFunction: helpers.getDistanceFunction,
     getClosest: helpers.getClosest,
     inbox: helpers.inbox,
+    quadrature: helpers.quadrature,
     appendArrayPointValue: helpers.appendArrayPointValue,
 
     castHoverOption: castHoverOption,

src/traces/box/hover.js

@@ -23,16 +23,15 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var hoveron = trace.hoveron;
     var marker = trace.marker || {};
 
-    // output hover points array
-    var closeData = [];
+    // output hover points components
+    var closeBoxData = [];
+    var closePtData;
     // x/y/effective distance functions
     var dx, dy, distfn;
     // orientation-specific fields
     var posLetter, valLetter, posAxis, valAxis;
     // calcdata item
     var di;
-    // hover point item extended from pointData
-    var pointData2;
     // loop indices
     var i, j;
 
@@ -105,7 +104,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
 
                 // copy out to a new object for each value to label
                 var val = valAxis.c2p(di[attr], true);
-                pointData2 = Lib.extendFlat({}, pointData);
+                var pointData2 = Lib.extendFlat({}, pointData);
+
                 pointData2[valLetter + '0'] = pointData2[valLetter + '1'] = val;
                 pointData2[valLetter + 'LabelVal'] = di[attr];
                 pointData2.attr = attr;
@@ -116,7 +116,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
                 // only keep name on the first item (median)
                 pointData.name = '';
 
-                closeData.push(pointData2);
+                closeBoxData.push(pointData2);
             }
         }
     }
@@ -125,58 +125,71 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
         var xPx = xa.c2p(xval);
         var yPx = ya.c2p(yval);
 
-        // do not take jitter into consideration in compare hover modes
-        var kx, ky;
-        if(hovermode === 'closest') {
-            kx = 'x';
-            ky = 'y';
-        } else {
-            kx = 'xh';
-            ky = 'yh';
-        }
-
         dx = function(di) {
             var rad = Math.max(3, di.mrc || 0);
-            return Math.max(Math.abs(xa.c2p(di[kx]) - xPx) - rad, 1 - 3 / rad);
+            return Math.max(Math.abs(xa.c2p(di.x) - xPx) - rad, 1 - 3 / rad);
         };
         dy = function(di) {
             var rad = Math.max(3, di.mrc || 0);
-            return Math.max(Math.abs(ya.c2p(di[ky]) - yPx) - rad, 1 - 3 / rad);
+            return Math.max(Math.abs(ya.c2p(di.y) - yPx) - rad, 1 - 3 / rad);
         };
-        distfn = Fx.getDistanceFunction(hovermode, dx, dy);
+        distfn = Fx.quadrature(dx, dy);
+
+        // show one point per trace
+        var ijClosest = false;
+        var pt;
 
         for(i = 0; i < cd.length; i++) {
             di = cd[i];
 
             for(j = 0; j < (di.pts || []).length; j++) {
-                var pt = di.pts[j];
+                pt = di.pts[j];
 
                 var newDistance = distfn(pt);
                 if(newDistance <= pointData.distance) {
                     pointData.distance = newDistance;
-
-                    var xc = xa.c2p(pt.x, true);
-                    var yc = ya.c2p(pt.y, true);
-                    var rad = pt.mrc || 1;
-
-                    pointData2 = Lib.extendFlat({}, pointData, {
-                        // corresponds to index in x/y input data array
-                        index: pt.i,
-                        color: marker.color,
-                        x0: xc - rad,
-                        x1: xc + rad,
-                        xLabelVal: pt.x,
-                        y0: yc - rad,
-                        y1: yc + rad,
-                        yLabelVal: pt.y
-                    });
-
-                    fillHoverText(pt, trace, pointData2);
-                    closeData.push(pointData2);
+                    ijClosest = [i, j];
                 }
             }
         }
+
+        if(ijClosest) {
+            di = cd[ijClosest[0]];
+            pt = di.pts[ijClosest[1]];
+
+            var xc = xa.c2p(pt.x, true);
+            var yc = ya.c2p(pt.y, true);
+            var rad = pt.mrc || 1;
+
+            closePtData = Lib.extendFlat({}, pointData, {
+                // corresponds to index in x/y input data array
+                index: pt.i,
+                color: marker.color,
+                name: trace.name,
+                x0: xc - rad,
+                x1: xc + rad,
+                xLabelVal: pt.x,
+                y0: yc - rad,
+                y1: yc + rad,
+                yLabelVal: pt.y
+            });
+            fillHoverText(pt, trace, closePtData);
+        }
     }
 
-    return closeData;
+    // In closest mode, show only one point or stats for one box, and points have priority
+    // If there's a point in range and hoveron has points, show the best single point only.
+    // If hoveron has boxes and there's no point in range (or hoveron doesn't have points), show the box stats.
+    if(hovermode === 'closest') {
+        if(closePtData) return [closePtData];
+        return closeBoxData;
+    }
+
+    // Otherwise in compare mode, allow a point AND the box stats to be labeled
+    // If there are multiple boxes in range (ie boxmode = 'overlay') we'll see stats for all of them.
+    if(closePtData) {
+        closeBoxData.push(closePtData);
+        return closeBoxData;
+    }
+    return closeBoxData;
 };

src/traces/box/plot.js

@@ -179,26 +179,23 @@ module.exports = function plot(gd, plotinfo, cdbox) {
                         newJitter = trace.jitter * 2 / maxJitterFactor;
                     }
 
-                    // fills in 'x' and 'y' (with and w/o jitter offset) in calcdata 'pts' item
+                    // fills in 'x' and 'y' in calcdata 'pts' item
                     for(i = 0; i < pts.length; i++) {
                         var pt = pts[i];
                         var v = pt.v;
 
                         var jitterOffset = trace.jitter ?
-                            bdPos * (newJitter * jitterFactors[i] * (rand() - 0.5)) :
+                            (newJitter * jitterFactors[i] * (rand() - 0.5)) :
                             0;
 
-                        var posPxNoJitter = d.pos + bPos + bdPos * trace.pointpos;
-                        var posPx = posPxNoJitter + jitterOffset;
+                        var posPx = d.pos + bPos + bdPos * (trace.pointpos + jitterOffset);
 
                         if(trace.orientation === 'h') {
                             pt.y = posPx;
-                            pt.yh = posPxNoJitter;
-                            pt.x = pt.xh = v;
+                            pt.x = v;
                         } else {
                             pt.x = posPx;
-                            pt.xh = posPxNoJitter;
-                            pt.y = pt.yh = v;
+                            pt.y = v;
                         }
 
                         // tag suspected outliers

test/jasmine/tests/box_test.js

@@ -235,8 +235,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'closest';
             return fig;
         },
-        nums: ['(day 1, 0.7)', '(day 1, 0.6)', '(day 1, 0.6)'],
-        name: ['radishes', 'radishes', 'radishes']
+        nums: '(day 1, 0.7)',
+        name: 'radishes'
     }, {
         desc: 'hoveron points | hovermode x',
         patch: function(fig) {
@@ -247,11 +247,11 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'x';
             return fig;
         },
-        nums: ['0', '0.3', '0.5', '0.6', '0.6', '0.7'],
-        name: ['radishes', 'radishes', 'radishes', 'radishes', 'radishes', 'radishes'],
+        nums: '0.7',
+        name: 'radishes',
         axis: 'day 1'
     }, {
-        desc: 'hoveron boxes+points | hovermode x',
+        desc: 'hoveron boxes+points | hovermode x (hover on box only - same result as base)',
         patch: function(fig) {
             fig.data.forEach(function(trace) {
                 trace.boxpoints = 'all';
@@ -260,12 +260,22 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'x';
             return fig;
         },
-        nums: [
-            '0', '0.7', '0.6', '0.6', '0.5', '0.3', '0', '0.7', '0.6', '0.3', '0.55'
-        ],
-        name: [
-            '', '', '', '', '', '', '', '', '', '', 'radishes'
-        ],
+        nums: ['0.55', '0', '0.3', '0.6', '0.7'],
+        name: ['radishes', '', '', '', ''],
+        axis: 'day 1'
+    }, {
+        desc: 'hoveron boxes+points | hovermode x (box AND closest point)',
+        patch: function(fig) {
+            fig.data.forEach(function(trace) {
+                trace.boxpoints = 'all';
+                trace.hoveron = 'points+boxes';
+                trace.pointpos = 0;
+            });
+            fig.layout.hovermode = 'x';
+            return fig;
+        },
+        nums: ['0.6', '0.55', '0', '0.3', '0.6', '0.7'],
+        name: ['radishes', 'radishes', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'text items on hover',
@@ -278,8 +288,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'closest';
             return fig;
         },
-        nums: ['(day 1, 0.7)\nlook:0.7', '(day 1, 0.6)\nlook:0.6', '(day 1, 0.6)\nlook:0.6'],
-        name: ['radishes', 'radishes', 'radishes']
+        nums: '(day 1, 0.7)\nlook:0.7',
+        name: 'radishes'
     }, {
         desc: 'only text items on hover',
         patch: function(fig) {
@@ -292,8 +302,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'closest';
             return fig;
         },
-        nums: ['look:0.7', 'look:0.6', 'look:0.6'],
-        name: ['', '', '']
+        nums: 'look:0.7',
+        name: ''
     }].forEach(function(specs) {
         it('should generate correct hover labels ' + specs.desc, function(done) {
             run(specs).catch(fail).then(done);