Add support for multiple subplots to fx.hover()

[john-soklaski]

No description provided.

[etpinard]

@john-soklaski thanks for this very impressive PR. 🍻

I think you've got every detail right.

I did found some unexpected behavior when layout.hovermode is set to 'y', but it may just be the result of an existing bug not introduced by your patch. I'll investigate a little more next week.

To see what I'm referring to, paste the following in the test dashboard:

var gd = Tabs.fresh();

Plotly.plot(gd, [{
    x: [1,2,3]
}, {
    x: [2.1,2],
    xaxis: 'x2'
}, {
    x: [3,2,1],
    xaxis: 'x3'
}], {
    xaxis: {
        domain: [0,0.3],
    },
    xaxis2: {
        domain: [0.35, 0.65]
    },
    xaxis3: {
        domain: [0.7, 1]
    },
    hovermode: 'y'
});

gd.on('plotly_hover', function(d) {
    Plotly.Fx.hover(gd, { yvals: d.yvals[0] }, ['xy', 'x2y', 'x3y']);
});

Berfore merging this we'll need to add some tests in test/jasmine/tests/hover_label_test.js. Let us know if you need help with our testing framework.

[john-soklaski]

Thanks for reviewing!

I think the issue in your example may be due to a typo. I ran your example, and it only hovered on the middle points of the graph no matter where I placed my mouse. But, after debugging a bit, I found fx.hover selects the center of the x / y axis if no other points / values are specified:

plotly.js/src/plots/cartesian/graph_interact.js

Lines 404 to 416 in dd15479

	else {
	if('xpx' in evt) xpx = evt.xpx;
	else xpx = xaArray[0]._length/2;
	if('ypx' in evt) ypx = evt.ypx;
	else ypx = yaArray[0]._length/2;
	}
	if('xval' in evt) xvalArray = flat(subplots, evt.xval);
	else xvalArray = p2c(xaArray, xpx);
	if('yval' in evt) yvalArray = flat(subplots, evt.yval);
	else yvalArray = p2c(yaArray, ypx);

It wasn't using the provided yvals property. Once I changed yvals to yval, the 'y' hovermode seemed to work:
{ yvals: d.yvals[0] } -> { yval: d.yvals[0] }

|
|
|

|
|

I added some unit tests for both stacked subplots with a shared x-axis and a shared y-axis.
Do they seem sufficient?

I'd also like to test that the hover labels appear in each of their corresponding subplots. The positioning of these was an issue earlier on and it's something I could see regressing. What do you think is the most stable way to test this?

I took your example from above and added it as a mock so I could use it in a unit test.
The integration is failing due to a missing baseline image, because of the new mock. Is there a way to grab the generated image from the CI server?

[etpinard]

Is there a way to grab the generated image from the CI server?

Yes. Find the artefact tab on your latest commit's CircleCI page:

Download the new baseline and commit it in test/image/baselines.

[john-soklaski]

Thanks! Didn't realize I had to login in order to access the artifacts. I added the baseline and it all seems to be working now.

[etpinard]

An early candidate for PR of year. Thank you very much.

[deechiw]

Does this hover work for plotly.py on subplots of different types as in the issue 2114

[drypatrick]

Thanks for reviewing!

I think the issue in your example may be due to a typo. I ran your example, and it only hovered on the middle points of the graph no matter where I placed my mouse. But, after debugging a bit, I found fx.hover selects the center of the x / y axis if no other points / values are specified:

plotly.js/src/plots/cartesian/graph_interact.js

Lines 404 to 416 in dd15479

	else {
	if('xpx' in evt) xpx = evt.xpx;
	else xpx = xaArray[0]._length/2;
	if('ypx' in evt) ypx = evt.ypx;
	else ypx = yaArray[0]._length/2;
	}
	if('xval' in evt) xvalArray = flat(subplots, evt.xval);
	else xvalArray = p2c(xaArray, xpx);
	if('yval' in evt) yvalArray = flat(subplots, evt.yval);
	else yvalArray = p2c(yaArray, ypx);

It wasn't using the provided yvals property. Once I changed yvals to yval, the 'y' hovermode seemed to work: { yvals: d.yvals[0] } -> { yval: d.yvals[0] }

| | |

| |

I added some unit tests for both stacked subplots with a shared x-axis and a shared y-axis. Do they seem sufficient?

I'd also like to test that the hover labels appear in each of their corresponding subplots. The positioning of these was an issue earlier on and it's something I could see regressing. What do you think is the most stable way to test this?

I took your example from above and added it as a mock so I could use it in a unit test. The integration is failing due to a missing baseline image, because of the new mock. Is there a way to grab the generated image from the CI server?

Thanks both @etpinard @john-soklaski, I had been looking for this feature for months