Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Output bounding box to hover event data #5512

Merged
merged 19 commits into from
Aug 26, 2021
Merged

Output bounding box to hover event data #5512

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
4573f34
Output bounding box to hover event data
rreusser Feb 18, 2021
e817828
Merge remote-tracking branch 'origin/master' into external-hover-2
archmoj Aug 25, 2021
86a4fbe
draft log for PR 5512
archmoj Aug 25, 2021
4b04337
fix syntax
archmoj Aug 25, 2021
034779d
rename top and left variables
archmoj Aug 25, 2021
9a57ec3
adjust jasmine tests
archmoj Aug 25, 2021
6078118
drop extra sort
archmoj Aug 25, 2021
03b22ec
revise bbox positions
archmoj Aug 25, 2021
17dbadd
ensure x0 <= x1 and y0 <= y1
archmoj Aug 26, 2021
bd6688e
interactive test
archmoj Aug 26, 2021
ccd2c88
handle gl3d, pie, sunburst, treemap, etc.
archmoj Aug 26, 2021
c41b31d
drop hover bbox display
archmoj Aug 26, 2021
888a6ba
add jasmine tests for cartesian
archmoj Aug 26, 2021
8100f8a
provide bbox in gl3d event data
archmoj Aug 26, 2021
262505d
bbox for pie and funnelarea
archmoj Aug 26, 2021
53e1b61
provide bbox for sunburst treemap and icicle
archmoj Aug 26, 2021
aa00c18
improve bbox for sunburst, treemap and icicle slices
archmoj Aug 26, 2021
9716d7e
improve bbox for pie slices
archmoj Aug 26, 2021
6ba88db
improve bbox for funnelarea slices
archmoj Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions draftlogs/5512_add.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Provide bounding box positions in hover event data [[#5512](https://github.com/plotly/plotly.js/pull/5512)]
15 changes: 15 additions & 0 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -732,6 +732,12 @@ function _hover(gd, evt, subplot, noHoverEvent) {
var oldhoverdata = gd._hoverdata;
var newhoverdata = [];

// Top/left hover offsets relative to graph div. As long as hover content is
// a sibling of the graph div, it will be positioned correctly relative to
// the offset parent, whatever that may be.
var gTop = gd.offsetTop + gd.clientTop;
var gLeft = gd.offsetLeft + gd.clientLeft;

// pull out just the data that's useful to
// other people and send it to the event
for(itemnum = 0; itemnum < hoverData.length; itemnum++) {
Expand All @@ -746,6 +752,15 @@ function _hover(gd, evt, subplot, noHoverEvent) {
pt.hovertemplate = ht || pt.trace.hovertemplate || false;
}

if(pt.xa && pt.ya) {
eventData.bbox = {
x0: pt.x0 + pt.xa._offset + gLeft,
x1: pt.x1 + pt.xa._offset + gLeft,
y0: pt.y0 + pt.ya._offset + gTop,
y1: pt.y1 + pt.ya._offset + gTop
};
}

pt.eventData = [eventData];
newhoverdata.push(eventData);
}
Expand Down
30 changes: 18 additions & 12 deletions test/jasmine/tests/click_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,11 @@ describe('Test click interactions:', function() {
expect(contextPassthroughs).toBe(0);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down Expand Up @@ -148,10 +149,11 @@ describe('Test click interactions:', function() {
expect(contextPassthroughs).toBe(0);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down Expand Up @@ -219,10 +221,11 @@ describe('Test click interactions:', function() {
expect(contextPassthroughs).toBe(0, i);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down Expand Up @@ -308,10 +311,11 @@ describe('Test click interactions:', function() {
expect(futureData.points.length).toEqual(1);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down Expand Up @@ -341,10 +345,11 @@ describe('Test click interactions:', function() {
expect(futureData.points.length).toEqual(1);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down Expand Up @@ -378,10 +383,11 @@ describe('Test click interactions:', function() {
expect(futureData.points.length).toEqual(1);

var pt = futureData.points[0];
expect(Object.keys(pt)).toEqual([
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'bbox',
'x', 'y', 'xaxis', 'yaxis'
]);
].sort());
expect(pt.curveNumber).toEqual(0);
expect(pt.pointNumber).toEqual(11);
expect(pt.x).toEqual(0.125);
Expand Down
60 changes: 30 additions & 30 deletions test/jasmine/tests/geo_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -882,10 +882,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat', 'location', 'marker.size'
]);
].sort());
expect(cnt).toEqual(1);
});

Expand Down Expand Up @@ -947,10 +947,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat', 'location', 'marker.size'
]);
].sort());
});

it('should show the correct point data', function() {
Expand Down Expand Up @@ -979,10 +979,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat', 'location', 'marker.size'
]);
].sort());
});

it('should show the correct point data', function() {
Expand All @@ -1008,10 +1008,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'location', 'z', 'ct'
]);
].sort());
});

it('should show the correct point data', function() {
Expand All @@ -1036,10 +1036,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'location', 'z', 'ct'
]);
].sort());
});

it('should show the correct point data', function() {
Expand Down Expand Up @@ -1068,10 +1068,10 @@ describe('Test geo interactions', function() {
});

it('should contain the correct fields', function() {
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(ptData).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'location', 'z', 'ct'
]);
].sort());
});

it('should show the correct point data', function() {
Expand Down Expand Up @@ -1789,11 +1789,11 @@ describe('Test event property of interactions on a geo plot:', function() {
var pt = futureData.points[0];
var evt = futureData.event;

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat',
'location', 'text', 'marker.size'
]);
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1847,11 +1847,11 @@ describe('Test event property of interactions on a geo plot:', function() {
// var pt = futureData.points[0],
// evt = futureData.event;

// expect(Object.keys(pt)).toEqual([
// 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
// expect(Object.keys(pt).sort()).toEqual([
// 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
// 'lon', 'lat',
// 'location', 'text', 'marker.size'
// ]);
// ].sort());

// expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
// expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1893,11 +1893,11 @@ describe('Test event property of interactions on a geo plot:', function() {
var pt = futureData.points[0];
var evt = futureData.event;

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat',
'location', 'text', 'marker.size'
]);
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1934,11 +1934,11 @@ describe('Test event property of interactions on a geo plot:', function() {
var pt = futureData.points[0];
var evt = futureData.event;

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'bbox',
'lon', 'lat',
'location', 'text', 'marker.size'
]);
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down
18 changes: 9 additions & 9 deletions test/jasmine/tests/mapbox_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ var customAssertions = require('../assets/custom_assertions');
var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;

var SORTED_EVENT_KEYS = [
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex',
'lon', 'lat',
'bbox'
].sort();

var MAPBOX_ACCESS_TOKEN = require('@build/credentials.json').MAPBOX_ACCESS_TOKEN;
var TRANSITION_DELAY = 500;
var MOUSE_DELAY = 100;
Expand Down Expand Up @@ -1243,19 +1249,15 @@ describe('mapbox plots', function() {
.then(function() {
return _mouseEvent('mousemove', pointPos, function() {
expect(hoverData).not.toBe(undefined, 'firing on data points');
expect(Object.keys(hoverData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
], 'returning the correct event data keys');
expect(Object.keys(hoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys');
expect(hoverData.curveNumber).toEqual(0, 'returning the correct curve number');
expect(hoverData.pointNumber).toEqual(0, 'returning the correct point number');
});
})
.then(function() {
return _mouseEvent('mousemove', blankPos, function() {
expect(unhoverData).not.toBe(undefined, 'firing on data points');
expect(Object.keys(unhoverData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
], 'returning the correct event data keys');
expect(Object.keys(unhoverData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys');
expect(unhoverData.curveNumber).toEqual(0, 'returning the correct curve number');
expect(unhoverData.pointNumber).toEqual(0, 'returning the correct point number');
});
Expand Down Expand Up @@ -1400,9 +1402,7 @@ describe('mapbox plots', function() {
.then(function() { return click(pointPos[0], pointPos[1]); })
.then(function() {
expect(ptData).not.toBe(undefined, 'firing on data points');
expect(Object.keys(ptData)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
], 'returning the correct event data keys');
expect(Object.keys(ptData).sort()).toEqual(SORTED_EVENT_KEYS, 'returning the correct event data keys');
expect(ptData.curveNumber).toEqual(0, 'returning the correct curve number');
expect(ptData.pointNumber).toEqual(0, 'returning the correct point number');
})
Expand Down
42 changes: 21 additions & 21 deletions test/jasmine/tests/scattermapbox_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,9 +952,9 @@ describe('Test plotly events on a scattermapbox plot:', function() {

var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -999,9 +999,9 @@ describe('Test plotly events on a scattermapbox plot:', function() {
// var pt = futureData.points[0],
// evt = futureData.event;

// expect(Object.keys(pt)).toEqual([
// 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
// ]);
// expect(Object.keys(pt).sort()).toEqual([
// 'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
// ].sort());

// expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
// expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1033,9 +1033,9 @@ describe('Test plotly events on a scattermapbox plot:', function() {

var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand All @@ -1061,9 +1061,9 @@ describe('Test plotly events on a scattermapbox plot:', function() {
move(pointPos[0], pointPos[1], nearPos[0], nearPos[1], HOVERMINTIME + 10).then(function() {
var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1133,9 +1133,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese

var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down Expand Up @@ -1163,9 +1163,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese

var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand All @@ -1191,9 +1191,9 @@ describe('Test plotly events on a scattermapbox plot when css transform is prese
move(pointPos[0], pointPos[1], nearPos[0], nearPos[1], HOVERMINTIME + 10).then(function() {
var pt = futureData.points[0];

expect(Object.keys(pt)).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat'
]);
expect(Object.keys(pt).sort()).toEqual([
'data', 'fullData', 'curveNumber', 'pointNumber', 'pointIndex', 'lon', 'lat', 'bbox'
].sort());

expect(pt.curveNumber).toEqual(0, 'points[0].curveNumber');
expect(typeof pt.data).toEqual(typeof {}, 'points[0].data');
Expand Down
Loading