Annotations that show & hide on clicking data

[alexcjohnson]

We want to be able to click a data point and show one or more annotations. There are two distinct use cases for this:

1. Annotations contain extra information that's not in the data itself. There might be multiple annotations that appear on clicking one data point.
2. Annotations are generated programmatically from any data point, using the data from that point. There is only one annotation generated per point.

For now I'll only focus on (1), but at some point (2) would be really cool to add, it's actually something I built ad-hoc into the very first plotly.js application we built for a client.

I'm thinking of it this way:

• The annotations are all created ahead of time, within the layout.annotations array, but they start out hidden.
• On click, we look at the data in the click event and look for an annotation with matching x and y attributes (on the same axes). Potentially add extra attributes, something like xclick and yclick if you want to be able to trigger an annotation that's not pointing exactly at the data point. For the most part I would like to discourage that (standoff covers the common use case of wanting to point to the edge of a marker, and has the advantage of insensitivity to zoom) but I can see times it would be necessary, like if you want to point to bars in a stack, or to the middle of a bar... or even just to the edge of a bar, which is defined by a data value rather than a pixel offset from the central value. You could also do things like send the viewer on a wild goose chase around the plot ("click here"... "now click over here"... "isn't this point interesting?"...) - probably silly but maybe someone would find a good use for it.
• When you're hovering over a point that has click annotations, the cursor should change to indicate that something is there, but to what? pointer 👆 ? help ❓ ?
• These annotations would also need an attribute to tell us a) that they should respond to click events, and b) when they should hide again: click the same point again to hide them (so you could "open" multiple data points simultaneously) or click anywhere else on the plot to hide them (so at most one point is "open" at a time). We could do this entirely with the visible attribute, kind of like how we add an extra 'legendonly' value to trace.visible but this seems awkward... it would need 4 extra values (two noes and two yeses, each describing both whether it's open and how it will close once it's open). Seems better to add an extra attribute. I'm thinking of: clicktoshow: (false | 'onoff' | 'onout').
• This violates the principle "make impossible states impossible": in 'onout' mode you could set all these annotations visible beforehand, which is not a situation you could ever get back to... or in 'onoff' mode if you had two annotations on one point, one on and one off, you would be toggling between them but can never open/close both. We could just close all of them on the initial draw, but I could imagine it being nice to let people start out with one of the points opened.

Any thoughts before I implement this?

cc @etpinard @bpostlethwaite

[etpinard]

This violates the principle "make impossible states impossible": in 'onout' mode you could set all these annotations visible beforehand, which is not a situation you could ever get back to... or in 'onoff' mode if you had two annotations on one point, one on and one off, you would be toggling between them but can never open/close both. We could just close all of them on the initial draw, but I could imagine it being nice to let people start out with one of the points opened.

I guess what's missing is a way to link annotations together. Maybe something like a string attribute named group or more verbosely annotationgroup where all annotations of the same group would be toggled on click simultaneously.

[etpinard]

@alexcjohnson I just came across this. Was this ticket all ✅ via #1265 ?

[etpinard]

Done in #1265