Plotly.js: Some folks are using right-click on data points in their apps

[etpinard]

... and PR https://github.com/plotly/plotly.js/pull/2087 broke that :bomb:

See https://community.plot.ly/t/plotly-click-event-stopped-firing-after-update-on-right-click/6353 and https://community.plot.ly/t/annotation-right-click/6352.

What should we do?

• Revert #2087 ?
• add a config option that allows plotly_click on right-clicks?
• anything else?

[Melmoth-the-Wanderer]

It's already on the production (right-click detection using plotly_click) and would be nice if we aren't stuck with Plotly 1.30 forever :)

Config option looks fine for us, however I don't fully understand the purpose of #2087 .
The need for custom contextmenu is obvious, but you can still disable browser's context menu on plotl's placeholder and build custom one on right click, as we do. That's even more powerful if you can use Plotly event with points passed to the handler (necessary for us). Same applies to plotly_onannotationclick etc. This gives us a possibility to create a different contextmenu based on what's clicked.

Am I missing something important here?

[alexcjohnson]

@Melmoth-the-Wanderer we'll make sure you don't get stuck! Can you show a code snippet of how your custom contextmenu works? Then we can see if that works for @AlexVvx's use case and/or figure out if we can't make something cleaner and easier for everyone.

[AlexVvx]

The problem was, that right click worked well on legend zone, but not on chart zone. Drag layer placed on top level, in order to catch context menu event we have to listen on the top, e.g. document level, and guess target of the click.
Looks like problem is that onDone not fired and initialTarget.dispatchEvent(e2) not fired too.

[AlexVvx]

Please take a look at pr https://github.com/plotly/plotly.js/pull/2105

[Melmoth-the-Wanderer]

I cannot share the exact code with you but I'll prepare some demo of simplified use case in couple of days.
Thanks for the PR @AlexVvx.

[alexcjohnson]

@AlexVvx thanks for the PR and apologies for the delay in discussing it. Your solution looks promising, but I think what we need at this point is a clear set of tests covering all the situations people can encounter with right clicks, and how they are expected to behave. Otherwise whatever we do is going to bother somebody and we'll be back here again.

Seems to me the most flexible (though not necessarily the easiest to use) is maybe:

• right-click on any data point/element - we should emit a plotly_click event and you can look at e.event.button(s) to determine if it was a right click
• right-click over a subplot but away from data points (@etpinard help me out, I swear we already had an issue for regular left clicks this way?) - ideally we still emit an event, but maybe it can't be plotly_click or maybe it can be, just with empty e.points? Either way you look at e.event.button(s) to determine if it's a right click.
• right-click on annotations - plotly_clickannotation, e.event.button(s)
• right-click on legend (see #65)
• right-click off of subplots (axes, margins...) - passes through to graphDiv.oncontextmenu?
• anything else?

[etpinard]

(@etpinard help me out, I swear we already had an issue for regular left clicks this way?)

I found https://github.com/plotly/plotly.js/issues/145#issuecomment-235989531

[AlexVvx]

@alexcjohnson, sounds good, thank you. I wonder what will happen if we'll trigger plotly_click on right click, if handlers ready for it, they might not check whether it is right or left click. This event may cause left click action on right click. On previous version there were no event on right click.
May be it will be better to trigger plotly_contextmenu?
Browser context menu might be cancelled too.

[Melmoth-the-Wanderer]

Currently we're capturing plotly_click and manually checking if it's left or right click (event.which). We're also disabling browser's contextmenu on plotly placeholder so we can build our own contextmenu when right click is detected. In this case firing different event called plotly_contextmenu seems just fine, as @AlexVvx proposed.
The question is - is it ok not to fire onclick when user clicks an element with right mouse button? I cannot make up my mind on which is better/preferred/more semantic from user's perspective.

Despite of that, @alexcjohnson's propositions are great and I really like the idea of

• > right-click over a subplot but away from data points (...) emit an event (...) with empty e.points.

We're also capturing click event (standard one) when user clicks away from data points (we than calculate when the click occurs on the graph related to traces), but it would be great to have plotly event data (with empty points list) available.

• > right-click on annotations - plotly_clickannotation, e.event.button(s)

There is already an event called plotly_annotationclick, I believe (or it used to exists). It just doesn't (didn't) fire on rightclick / contextmenu, unless I'm wrong.

• > right-click off of subplots (axes, margins...) - passes through to graphDiv.oncontextmenu?

Would be nice to have a possibility to determine which element has been clicked (was it x or y axis?) - is it even possible? I can imagine that e.axis could be passed alongside with mouse event (same as in case of points) when we click the axis. Use case: with multiple y axes we can build a contextmenu with actions for specific axis. (eg. to move axis right or left, create subplot for this axis etc).

[etpinard]

On previous version there were no event on right click.

That's not true: https://codepen.io/etpinard/pen/EbxxLo?editors=0010

[etpinard]

right-click over a subplot but away from data points (@etpinard help me out, I swear we already had an issue for regular left clicks this way?) - ideally we still emit an event, but maybe it can't be plotly_click or maybe it can be, just with empty e.points? Either way you look at e.event.button(s) to determine if it's a right click.

This would make a lot of users happy, but I would hold back on this until we can bring support for off-point plotly_click to all subplot types.

[etpinard]

right-click on any data point/element - we should emit a plotly_click event and you can look at e.event.button(s) to determine if it was a right click
right-click on annotations - plotly_clickannotation, e.event.button(s)
right-click on legend (see #65)
right-click off of subplots (axes, margins...) - passes through to graphDiv.oncontextmenu?
anything else?

I agree with all of these :+1:

[etpinard]

Thinking about this some more, I'd say @AlexVvx 's https://github.com/plotly/plotly.js/pull/2105 is probably _just_ what we need for the v1 series. We should for sure revisit some of our assumptions during to our v2 push (cc https://github.com/plotly/plotly.js/issues/145), but at this stage #2015 seems like the more robust solution that preserves backward compatibility and makes everyone here happy.

Any objections?

[alexcjohnson]

Any objections?

If it works for @AlexVvx that's a great start. I'd love a 👍 /👎 from @Melmoth-the-Wanderer

Are there any other specific conditions folks depend on that we could add a test for, so we're not back here again next release? How many of the propositions in https://github.com/plotly/plotly.js/issues/2101#issuecomment-339528108 have we tested, and do they all behave as proposed?

[Melmoth-the-Wanderer]

👍

[etpinard]

PR https://github.com/plotly/plotly.js/pull/2241 should fix this issue.