Annotation additions: standoff, anchor with arrow, clicktoshow #1265

alexcjohnson · 2016-12-22T04:09:12Z

A few more options for annotations:

xanchor and yanchor work along with showarrow=true so you can 1) attach the arrow to any edge or corner of the text box, and 2) be sure that regardless of the note size, it will stay away from the point being marked by exactly as many pixels as you specify for the arrow length. One thing to note: the positioning if you rotate the text is different from how it works with showarrow=false. Described in Support annotation lines connecting all annotation container faces #1208 (comment):
- without an arrow, we first rotate the text box, then calculate the new bounding box and find the appropriate anchor on that. So if you say "left bottom" for the anchor, your note is always above and to the right of the specified coordinates.
- with an arrow, we attach the specified anchor to the tail of the arrow, and THEN rotate the text box around that anchor point. So now if you say "left bottom" for the anchor, the point that was originally the bottom left corner of the text box stays attached to the arrow tail.
a new attribute was added, standoff, which is a number of pixels to move the arrowhead away from the point it's marking. That's particularly useful if you're marking a scatter point with finite size specified in pixels; then you can ensure the arrowhead is always at the edge of the marker regardless of how the plot is zoomed, and the coordinate it is positioned on is exactly the data point you are marking.

Also I redid all of the position calculations in a way that I hope will be much clearer for future expansions.

cc @etpinard

alexcjohnson · 2016-12-22T04:22:28Z

closes #1208

etpinard · 2016-12-22T16:01:51Z

Hmm. Something is off when panning the axes

alexcjohnson · 2016-12-22T17:08:50Z

Hmm. Something is off when panning the axes

Ah good catch - part of the incorrect behavior was already there (while panning, if you start from autoranged, annotations don't get deleted when they go off plot) but the console errors are new. I'll fix both pieces.

alexcjohnson · 2016-12-24T07:03:14Z

package.json

@@ -77,7 +77,7 @@
    "gl-spikes2d": "^1.0.1",
    "gl-surface3d": "^1.3.0",
    "mapbox-gl": "^0.22.0",
-    "mouse-change": "^1.1.1",
+    "mouse-change": "=1.3.0",


@etpinard @bpostlethwaite temporary change per https://github.com/plotly/streambed/pull/8893

alexcjohnson · 2016-12-24T07:05:11Z

src/plot_api/plot_api.js

@@ -2093,7 +2093,7 @@ Plotly.update = function update(gd, traceUpdate, layoutUpdate, traces) {
    // fill in redraw sequence
    var seq = [];

-    if(restyleFlags.fullReplot && relayoutFlags.layoutReplot) {
+    if(restyleFlags.fullReplot || relayoutFlags.layoutReplot) {


@etpinard am I missing something here? Seems like we would have noticed this before if it's a bug, but clicktoshow wouldn't work right without this change.

No. && looks correct here.

That if-else-block looks like:

if(restyleFlags.fullReplot && relayoutFlags.layoutReplot) { // full restyle and relayout update } else if(restyleFlags.fullReplot) { // full restyle update (but not relayout update) } else if(relayoutFlags.layoutReplot) { // full relayout update (but not restyle update) } else { // other more specific updates. }

Maybe the problem is in layoutReplot?

ah OK - thanks, I missed that. I'll look into layoutReplot.

alright, not sure what I was seeing earlier with layoutReplot / fullReplot, but putting back the && (b683903) doesn't seem to cause any issues now. Perhaps I fixed it in some other way in the meantime...

alexcjohnson · 2016-12-24T07:06:41Z

src/plots/cartesian/graph_interact.js

@@ -596,6 +598,13 @@ function hover(gd, evt, subplot) {

    gd._hoverdata = newhoverdata;

+    // TODO: tagName hack is needed to appease geo.js's hack of using evt.target=true
+    // we should improve the "fx" API so other plots can use it without these hack.


FYI @etpinard

alexcjohnson · 2016-12-24T07:13:33Z

src/components/annotations/calc_autorange.js

@@ -45,7 +45,7 @@ function annAutorange(gd) {
    // relative to their anchor points
    // use the arrow and the text bg rectangle,
    // as the whole anno may include hidden text in its bbox
-    fullLayout.annotations.forEach(function(ann) {
+    Lib.filterVisible(fullLayout.annotations).forEach(function(ann) {


Lib.filterVisible was unnecessary before because we didn't coerce any other attributes when visible was false, so these annotations wouldn't look like they're on axes. But now I need the position and reference attributes even when annotations aren't visible in order to determine what to show on clicks, hence this filter is needed too.

alexcjohnson · 2016-12-24T07:16:46Z

Added clicktoshow #1266 to this PR as it's all somewhat coupled.

@etpinard @bpostlethwaite ready for review.

etpinard · 2017-01-16T17:49:04Z

src/components/annotations/attributes.js

+            'though, `standoff` is preferred over `xclick` and `yclick`.'
+        ].join(' ')
+    },
+    xclick: {


xclick and yclick makes sense in the current state of annotations.

That said, I'm a little afraid about how these attribute will scale when we add data-referenced to other plot types. I'll elaborate on those concerns in more details in #751

etpinard · 2017-01-16T22:26:35Z

src/plots/cartesian/graph_interact.js

+    // we should improve the "fx" API so other plots can use it without these hack.
+    if(evt.target && evt.target.tagName) {
+        var hasClickToShow = Registry.getComponentMethod('annotations', 'hasClickToShow')(gd, newhoverdata);
+        overrideCursor(d3.select(evt.target), hasClickToShow ? 'pointer' : '');


👍 for pointer ('help' looks weird to me).

etpinard · 2017-01-16T22:28:00Z

src/components/annotations/attributes.js

+            'corresponds to the closest side.'
+        ].join(' ')
+    },
+    clicktoshow: {


👍 for clicktoshow

Thanks for that very clear description.

etpinard · 2017-01-18T14:31:43Z

src/lib/override_cursor.js

+ * by moving the name of the original cursor to the data-savedcursor attr.
+ * omit cursor to revert to the previously set value.
+ */
+module.exports = function overrideCursor(el3, csr) {


It would be nice to a few test cases for overrideCursor similar to the ones for setCursor here.

haha good call - overrideCursor was actually broken, though somehow it looked like it was working. Fixed & tested in ccbffd0

Thanks 🎉

etpinard · 2017-01-18T14:32:16Z

test/jasmine/tests/annotations_test.js

+        gd = createGraphDiv();
+
+        // first try to select without adding clicktoshow, both visible and invisible
+        Plotly.plot(gd, data, layout())


Very nicely done 🎉

etpinard · 2017-01-18T14:32:45Z

💃 after #1265 (comment) is addressed.

alexcjohnson added 2 commits December 21, 2016 22:42

refactor annotations.draw, add standoff and anchor with arrow

8518ee9

build (and tweak) annotations baseline image

45bc0e3

alexcjohnson added status: reviewable type: feature labels Dec 22, 2016

alexcjohnson mentioned this pull request Dec 22, 2016

Annotations that show & hide on clicking data #1266

Closed

alexcjohnson added 6 commits December 22, 2016 13:00

fix annotation drawing when dragging off plot

d69ed98

add some off-plot annotations to the test mock

8f0038d

only autorange on visible annotations

83482fb

tweak Plotly.update logic

9efa9b7

add clicktoshow for annotations

9cf04b6

lock mouse-change to 1.3.0

2533ec5

alexcjohnson changed the title ~~refactor annotations.draw, add standoff and anchor with arrow~~ Annotation additions: standoff, anchor with arrow, clicktoshow Dec 24, 2016

alexcjohnson commented Dec 24, 2016

View reviewed changes

alexcjohnson added 2 commits December 24, 2016 08:35

fix require caitalization setCursor -> setcursor

578ea87

Merge branch 'master' into note-align-standoff

d77ff15

etpinard added this to the v1.22.0 milestone Jan 4, 2017

update header on new annotations files

13947ef

etpinard reviewed Jan 16, 2017

View reviewed changes

alexcjohnson added 2 commits January 17, 2017 23:47

Merge branch 'master' into note-align-standoff

582adfd

put back original fullReplot/layoutReplot logic

b683903

etpinard reviewed Jan 18, 2017

View reviewed changes

fix and test overrideCursor

ccbffd0

alexcjohnson merged commit 4f00c99 into master Jan 18, 2017

alexcjohnson deleted the note-align-standoff branch January 18, 2017 15:51

alexcjohnson mentioned this pull request Jan 21, 2017

Support annotation lines connecting all annotation container faces #1208

Closed

alexcjohnson mentioned this pull request Feb 15, 2017

Add support for clickable hover text or a per pt onclick attribute #998

Open

alexcjohnson mentioned this pull request Mar 3, 2017

Annotations drag fix #1441

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Annotation additions: standoff, anchor with arrow, clicktoshow #1265

Annotation additions: standoff, anchor with arrow, clicktoshow #1265

alexcjohnson commented Dec 22, 2016

alexcjohnson commented Dec 22, 2016

etpinard commented Dec 22, 2016

alexcjohnson commented Dec 22, 2016

alexcjohnson Dec 24, 2016

alexcjohnson Dec 24, 2016

etpinard Jan 16, 2017

alexcjohnson Jan 17, 2017

alexcjohnson Jan 18, 2017

etpinard Jan 18, 2017

alexcjohnson Dec 24, 2016

alexcjohnson Dec 24, 2016

alexcjohnson commented Dec 24, 2016 •

edited

etpinard Jan 16, 2017

etpinard Jan 16, 2017

etpinard Jan 16, 2017

etpinard Jan 16, 2017

etpinard Jan 18, 2017

alexcjohnson Jan 18, 2017

etpinard Jan 18, 2017

etpinard Jan 18, 2017

etpinard commented Jan 18, 2017

Annotation additions: standoff, anchor with arrow, clicktoshow #1265

Annotation additions: standoff, anchor with arrow, clicktoshow #1265

Conversation

alexcjohnson commented Dec 22, 2016

alexcjohnson commented Dec 22, 2016

etpinard commented Dec 22, 2016

alexcjohnson commented Dec 22, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Dec 24, 2016 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etpinard commented Jan 18, 2017

alexcjohnson commented Dec 24, 2016 •

edited