Skip to content

Commit 62fdc22

Browse files
alexcjohnsonalexcjohnson
committed
scatter & bar hover fixes for #780
scatter was too permissive and too flat in its distance function in compare mode bar was too restrictive, in compare mode it now allows hover while in the gap between bars/groups
1 parent 82f4c16 commit 62fdc22

File tree

4 files changed

+66
-36
lines changed

4 files changed

+66
-36
lines changed

‎src/traces/bar/hover.js

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,35 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
1818
var cd = pointData.cd;
1919
var trace = cd[0].trace;
2020
var t = cd[0].t;
21+
var isClosest = (hovermode === 'closest');
2122

2223
var posVal, sizeVal, posLetter, sizeLetter, dx, dy;
2324

2425
function thisBarMinPos(di) { return di[posLetter] - di.w / 2; }
2526
function thisBarMaxPos(di) { return di[posLetter] + di.w / 2; }
2627

27-
var minPos = (hovermode === 'closest') ?
28+
var minPos = isClosest ?
2829
thisBarMinPos :
2930
function(di) {
3031
/*
3132
* In compare mode, accept a bar if you're on it *or* its group.
3233
* Nearly always it's the group that matters, but in case the bar
3334
* was explicitly set wider than its group we'd better accept the
3435
* whole bar.
36+
*
37+
* use `bardelta` instead of `bargroupwidth` so we accept hover
38+
* in the gap. That way hover doesn't flash on and off as you
39+
* mouse over the plot in compare modes.
40+
* In 'closest' mode though the flashing seems inevitable,
41+
* without far more complex logic
3542
*/
36-
return Math.min(thisBarMinPos(di), di.p - t.bargroupwidth / 2);
43+
return Math.min(thisBarMinPos(di), di.p - t.bardelta / 2);
3744
};
3845

39-
var maxPos = (hovermode === 'closest') ?
46+
var maxPos = isClosest ?
4047
thisBarMaxPos :
4148
function(di) {
42-
return Math.max(thisBarMaxPos(di), di.p + t.bargroupwidth / 2);
49+
return Math.max(thisBarMaxPos(di), di.p + t.bardelta / 2);
4350
};
4451

4552
function positionFn(di) {
@@ -79,6 +86,18 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
7986
// skip the rest (for this trace) if we didn't find a close point
8087
if(pointData.index === false) return;
8188

89+
// if we get here and we're not in 'closest' mode, push min/max pos back
90+
// onto the group - even though that means occasionally the mouse will be
91+
// over the hover label.
92+
if(!isClosest) {
93+
minPos = function(di) {
94+
return Math.min(thisBarMinPos(di), di.p - t.bargroupwidth / 2);
95+
};
96+
maxPos = function(di) {
97+
return Math.max(thisBarMaxPos(di), di.p + t.bargroupwidth / 2);
98+
};
99+
}
100+
82101
// the closest data point
83102
var index = pointData.index;
84103
var di = cd[index];

‎src/traces/bar/set_positions.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ function setOffsetAndWidth(gd, pa, sieve) {
227227
t.barwidth = barWidth;
228228
t.poffset = offsetFromCenter;
229229
t.bargroupwidth = barGroupWidth;
230+
t.bardelta = minDiff;
230231
}
231232

232233
// stack bars that only differ by rounding
@@ -277,6 +278,7 @@ function setOffsetAndWidthInGroupMode(gd, pa, sieve) {
277278
t.barwidth = barWidth;
278279
t.poffset = offsetFromCenter;
279280
t.bargroupwidth = barGroupWidth;
281+
t.bardelta = minDiff;
280282
}
281283

282284
// stack bars that only differ by rounding

‎src/traces/scatter/hover.js

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,44 @@ var fillHoverText = require('./fill_hover_text');
1818
var MAXDIST = Fx.constants.MAXDIST;
1919

2020
module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
21-
var cd = pointData.cd,
22-
trace = cd[0].trace,
23-
xa = pointData.xa,
24-
ya = pointData.ya,
25-
xpx = xa.c2p(xval),
26-
ypx = ya.c2p(yval),
27-
pt = [xpx, ypx],
28-
hoveron = trace.hoveron || '';
21+
var cd = pointData.cd;
22+
var trace = cd[0].trace;
23+
var xa = pointData.xa;
24+
var ya = pointData.ya;
25+
var xpx = xa.c2p(xval);
26+
var ypx = ya.c2p(yval);
27+
var pt = [xpx, ypx];
28+
var hoveron = trace.hoveron || '';
29+
var minRad = (trace.mode.indexOf('markers') !== -1) ? 3 : 0.5;
2930

3031
// look for points to hover on first, then take fills only if we
3132
// didn't find a point
3233
if(hoveron.indexOf('points') !== -1) {
3334
var dx = function(di) {
34-
// scatter points: d.mrc is the calculated marker radius
35-
// adjust the distance so if you're inside the marker it
36-
// always will show up regardless of point size, but
37-
// prioritize smaller points
35+
// dx and dy are used in compare modes - here we want to always
36+
// prioritize the closest data point, at least as long as markers are
37+
// the same size or nonexistent, but still try to prioritize small markers too.
3838
var rad = Math.max(3, di.mrc || 0);
39-
return Math.max(Math.abs(xa.c2p(di.x) - xpx) - rad, 1 - 3 / rad);
39+
var kink = 1 - 1 / rad;
40+
var dxRaw = Math.abs(xa.c2p(di.x) - xpx);
41+
var d = (dxRaw < rad) ? (kink * dxRaw / rad) : (dxRaw - rad + kink);
42+
return d;
4043
},
4144
dy = function(di) {
4245
var rad = Math.max(3, di.mrc || 0);
43-
return Math.max(Math.abs(ya.c2p(di.y) - ypx) - rad, 1 - 3 / rad);
46+
var kink = 1 - 1 / rad;
47+
var dyRaw = Math.abs(ya.c2p(di.y) - ypx);
48+
return (dyRaw < rad) ? (kink * dyRaw / rad) : (dyRaw - rad + kink);
4449
},
4550
dxy = function(di) {
46-
var rad = Math.max(3, di.mrc || 0),
47-
dx = xa.c2p(di.x) - xpx,
48-
dy = ya.c2p(di.y) - ypx;
49-
return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - 3 / rad);
51+
// scatter points: d.mrc is the calculated marker radius
52+
// adjust the distance so if you're inside the marker it
53+
// always will show up regardless of point size, but
54+
// prioritize smaller points
55+
var rad = Math.max(minRad, di.mrc || 0);
56+
var dx = xa.c2p(di.x) - xpx;
57+
var dy = ya.c2p(di.y) - ypx;
58+
return Math.max(Math.sqrt(dx * dx + dy * dy) - rad, 1 - minRad / rad);
5059
},
5160
distfn = Fx.getDistanceFunction(hovermode, dx, dy, dxy);
5261

‎test/jasmine/tests/hover_label_test.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1274,7 +1274,7 @@ describe('hover updates', function() {
12741274

12751275
afterEach(destroyGraphDiv);
12761276

1277-
function assertLabelsCorrect(mousePos, labelPos, labelText) {
1277+
function assertLabelsCorrect(mousePos, labelPos, labelText, msg) {
12781278
return new Promise(function(resolve) {
12791279
if(mousePos) {
12801280
mouseEvent('mousemove', mousePos[0], mousePos[1]);
@@ -1283,14 +1283,14 @@ describe('hover updates', function() {
12831283
setTimeout(function() {
12841284
var hoverText = d3.selectAll('g.hovertext');
12851285
if(labelPos) {
1286-
expect(hoverText.size()).toEqual(1);
1287-
expect(hoverText.text()).toEqual(labelText);
1286+
expect(hoverText.size()).toBe(1, msg);
1287+
expect(hoverText.text()).toBe(labelText, msg);
12881288

12891289
var transformParts = hoverText.attr('transform').split('(');
1290-
expect(transformParts[0]).toEqual('translate');
1290+
expect(transformParts[0]).toBe('translate', msg);
12911291
var transformCoords = transformParts[1].split(')')[0].split(',');
1292-
expect(+transformCoords[0]).toBeCloseTo(labelPos[0], -1, labelText + ':x');
1293-
expect(+transformCoords[1]).toBeCloseTo(labelPos[1], -1, labelText + ':y');
1292+
expect(+transformCoords[0]).toBeCloseTo(labelPos[0], -1, labelText + ':x ' + msg);
1293+
expect(+transformCoords[1]).toBeCloseTo(labelPos[1], -1, labelText + ':y ' + msg);
12941294
} else {
12951295
expect(hoverText.size()).toEqual(0);
12961296
}
@@ -1318,7 +1318,7 @@ describe('hover updates', function() {
13181318
var gd = createGraphDiv();
13191319
Plotly.plot(gd, mock).then(function() {
13201320
// The label text gets concatenated together when queried. Such is life.
1321-
return assertLabelsCorrect([100, 100], [103, 100], 'trace 00.5');
1321+
return assertLabelsCorrect([100, 100], [103, 100], 'trace 00.5', 'animation/update 0');
13221322
}).then(function() {
13231323
return Plotly.animate(gd, [{
13241324
data: [{x: [0], y: [0]}, {x: [0.5], y: [0.5]}],
@@ -1327,25 +1327,25 @@ describe('hover updates', function() {
13271327
}).then(function() {
13281328
// No mouse event this time. Just change the data and check the label.
13291329
// Ditto on concatenation. This is "trace 1" + "0.5"
1330-
return assertLabelsCorrect(null, [103, 100], 'trace 10.5');
1330+
return assertLabelsCorrect(null, [103, 100], 'trace 10.5', 'animation/update 1');
13311331
}).then(function() {
13321332
// Restyle to move the point out of the window:
13331333
return Plotly.relayout(gd, {'xaxis.range': [2, 3]});
13341334
}).then(function() {
13351335
// Assert label removed:
1336-
return assertLabelsCorrect(null, null);
1336+
return assertLabelsCorrect(null, null, null, 'animation/update 2');
13371337
}).then(function() {
13381338
// Move back to the original xaxis range:
13391339
return Plotly.relayout(gd, {'xaxis.range': [0, 1]});
13401340
}).then(function() {
13411341
// Assert label restored:
1342-
return assertLabelsCorrect(null, [103, 100], 'trace 10.5');
1342+
return assertLabelsCorrect(null, [103, 100], 'trace 10.5', 'animation/update 3');
13431343
}).catch(fail).then(done);
13441344
});
13451345

13461346
it('should not trigger infinite loop of plotly_unhover events', function(done) {
13471347
var gd = createGraphDiv();
1348-
var colors0 = ['#00000', '#00000', '#00000', '#00000', '#00000', '#00000', '#00000'];
1348+
var colors0 = ['#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'];
13491349

13501350
function unhover() {
13511351
return new Promise(function(resolve) {
@@ -1365,7 +1365,7 @@ describe('hover updates', function() {
13651365
y: [1, 2, 3, 2, 3, 4, 3],
13661366
marker: {
13671367
size: 16,
1368-
colors: colors0.slice()
1368+
color: colors0.slice()
13691369
}
13701370
}])
13711371
.then(function() {
@@ -1383,14 +1383,14 @@ describe('hover updates', function() {
13831383
Plotly.restyle(gd, 'marker.color', [colors0.slice()]);
13841384
});
13851385

1386-
return assertLabelsCorrect([351, 251], [358, 272], '2');
1386+
return assertLabelsCorrect([351, 251], [358, 272], '2', 'events 0');
13871387
})
13881388
.then(unhover)
13891389
.then(function() {
13901390
expect(hoverCnt).toEqual(1);
13911391
expect(unHoverCnt).toEqual(1);
13921392

1393-
return assertLabelsCorrect([400, 200], [435, 198], '3');
1393+
return assertLabelsCorrect([420, 100], [435, 198], '3', 'events 1');
13941394
})
13951395
.then(unhover)
13961396
.then(function() {

0 commit comments

Comments
 (0)