show hover tooltip when cursor is anywhere near arrow, not just base point

Author: emilykl

src/traces/quiver/hover.js

@@ -4,6 +4,25 @@ var Lib = require('../../lib');
 var Fx = require('../../components/fx');
 var getTraceColor = require('../scatter/get_trace_color');
 
+// Returns the shortest pixel distance from point (px,py)
+// to segment (ax,ay)-(bx,by)
+function distToSegment(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const len2 = dx * dx + dy * dy; // Length of segment (ax,ay)-(bx,by), squared
+    if(!len2) {
+        // Zero-length segment, so fall back to point-to-point distance
+        return Math.sqrt((px - ax) * (px - ax) + (py - ay) * (py - ay));
+    }
+    // Compute position of point on segment which is closest to (px,py) -> call it (cx, cy)
+    var t = ((px - ax) * dx + (py - ay) * dy) / len2;
+    t = Math.max(0, Math.min(1, t));
+    const cx = ax + t * dx;
+    const cy = ay + t * dy;
+    // Compute distance from (px,py) to (cx,cy)
+    return Math.sqrt((px - cx) * (px - cx) + (py - cy) * (py - cy));
+}
+
 module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
@@ -12,10 +31,15 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var xpx = xa.c2p(xval);
     var ypx = ya.c2p(yval);
 
+    // Check distance from the whole arrow body (base -> tip)
+    // rather than only the (x,y) data position of the arrow
     var distfn = function(di) {
-        var x = xa.c2p(di.x) - xpx;
-        var y = ya.c2p(di.y) - ypx;
-        return Math.sqrt(x * x + y * y);
+        if(di._x0 === undefined) return Infinity;
+        var ax0 = xa.c2p(di._x0);
+        var ay0 = ya.c2p(di._y0);
+        var ax1 = xa.c2p(di._x1);
+        var ay1 = ya.c2p(di._y1);
+        return distToSegment(xpx, ypx, ax0, ay0, ax1, ay1);
     };
 
     Fx.getClosest(cd, distfn, pointData);
@@ -28,6 +52,9 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
     var xc = xa.c2p(di.x, true);
     var yc = ya.c2p(di.y, true);
 
+    // Compute distance from cursor to the base point (x,y) of the arrow
+    var distToPoint = Math.sqrt((xpx - xc) * (xpx - xc) + (ypx - yc) * (ypx - yc));
+
     // now we're done using the whole `calcdata` array, replace the
     // index with the original index
     pointData.index = di.i;
@@ -54,7 +81,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
 
         extraText: extraText,
 
-        spikeDistance: Math.sqrt((xpx - xc) * (xpx - xc) + (ypx - yc) * (ypx - yc)),
+        spikeDistance: distToPoint,
         hovertemplate: trace.hovertemplate
     });
 

src/traces/quiver/plot.js

@@ -156,6 +156,14 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
             y1 = y0 + dy;
         }
 
+        // Store the arrow body endpoints in calcData so that
+        // hovertext can be shown based on distance to the whole arrow segment,
+        // not just the base point (x,y)
+        cdi._x0 = x0;
+        cdi._y0 = y0;
+        cdi._x1 = x1;
+        cdi._y1 = y1;
+
         // Arrow body endpoints (px)
         const p0x = xa.c2p(x0);
         const p0y = ya.c2p(y0);