annotation hover text #1573

alexcjohnson · 2017-04-10T14:38:00Z

Provides hover text for annotations, using the existing hover label framework so you get stuff like automatic left/right flipping built in. Because this is a bit of a custom scenario anyway, and it's not always clear what style these hover labels should get, I included explicit styling. @etpinard and I iterated on this separately to come up with a structure that should work for styling trace hover items as well:

{
  annotations: [
    {
      ...,
      hovertext: "hello!",
      hoverlabel: {
        font: {
          family: "courier",
          size: 20,
          color: "#f00"
        },
        bgcolor: "#0ff",
        bordercolor: "#080"
      }
    }
  ]
}

alexcjohnson · 2017-04-10T14:55:21Z

src/components/annotations/draw.js

+
+    var annTextGroupInner = annTextGroup.append('g')
+        .style('pointer-events', 'all')
+        .call(setCursor, 'default')
        .on('click', function() {


plotly_clickannotation was present, but didn't actually work before this, as far as I can tell, because it didn't have pointer-events turned back on. Anyway I had to do this to make hover work. A potential downside to this is that annotations grab mouse interactions even if you don't use them, so if you have a data point that's entirely under an annotation you won't see it in hover. You could imagine only grabbing mouse events if you are using them for hover, but then you won't get click events, and at draw time it's generally not known yet whether click events are going to be captured... so I don't see any way around this.

Anyway, I only attached click and hover to the text box, not to the arrows, and both are included in the new test.

I only attached click and hover to the text box, not to the arrows

That's sounds like the desired behavior to me.

alexcjohnson · 2017-04-10T15:02:54Z

src/components/color/index.js

+
+    var newColor = tc.isDark() ?
+        (lightAmount ? tc.lighten(lightAmount) : '#fff') :
+        (darkAmount ? tc.darken(darkAmount) : '#000');


I switched from tc.isLight to tc.isDark just because isLight calls isDark anyway 🐎 .

Thoughts about my TODO?

TODO: black is what we've always done for hover, but should it be #444 instead?

(ie Color.defaultLine)

Thoughts about my TODO?

Sounds good!

done in 919580e

etpinard · 2017-04-10T16:09:30Z

src/components/annotations/draw.js

+            var bBox = this.getBoundingClientRect();
+            var bBoxRef = gd.getBoundingClientRect();
+
+            Fx.loneHover({


so this means the annotation hover takes precedence over trace hover. I don't think this a big deal. But perhaps we could make annotation hover pass by Fx.hover so that they don't conflict sort of speak.

added a new attribute captureevents in da1e9d7

This one defaults to false (so data point hover comes through) unless hovertext is provided. But as noted in the description, if you use plotly_clickannotation events you must explicitly turn this on.

@cldougl once this is merged we should update the (currently broken) example in https://plot.ly/javascript/text-and-annotations/#styling-and-formatting-annotations, and add a section about plotly_clickannotation in https://plot.ly/javascript/plotlyjs-events/ that specifically mentions captureevents.

got it-- just made an issue to keep track.
@alexcjohnson was there something specifically broken in https://plot.ly/javascript/text-and-annotations/#styling-and-formatting-annotations (just took a quick look and it seemed to work as expected) or should it just be updated to use plotly_clickannotation?

Thanks @cldougl - I moved further discussion of this into the docs issue you made.

etpinard · 2017-04-11T00:26:24Z

src/components/annotations/annotation_defaults.js

@@ -120,6 +120,7 @@ module.exports = function handleAnnotationDefaults(annIn, annOut, fullLayout, op
            color: hoverBorder
        });
    }
+    coerce('captureevents', !!hoverText);


maybe hoverText.length > 0, as !![] \\ => true?

For annotations, hovertext is a string, I think this is OK. But you're absolutely right when this moves into traces and can be an array.

Oh right. My bad.

etpinard · 2017-04-11T00:38:43Z

Nicely done 💃 1.26.0 will be a good one.

- to that there (as opposed to in trace module hoverPoints) to have to repeat this logic across all trace modules - note that PR #1573 already added the relevant `createHoverText` logic

rpaskowitz · 2017-04-12T19:35:57Z

CI tests of master seem to be failing since this merge (local tests are ok for me):

Chrome 54.0.2840 (Linux 0.0.0) annotation effects should register clicks and show hover effects on the text box only FAILED
	Expected 0 to equal 1, '0 only (0)'.
	    at /tmp/tests/annotations_test.js:1084:0 <- /tmp/ba4b1756258f0bb2a60f96899bbad74d.browserify:196097:46

Merge build: https://circleci.com/gh/plotly/plotly.js/4087#tests/containers/1

Currently affecting #1588 and #1589

alexcjohnson · 2017-04-12T20:12:46Z

CI tests of master seem to be failing since this merge

Huh, thanks for the heads up @rpaskowitz. Not sure if this is an intermittent issue or a merge issue but I'll sort it out tonight.

etpinard · 2017-04-12T20:20:10Z

Not sure if this is an intermittent issue

It's intermittent. I've encountered this since Monday too.

annotation hover text

58966ed

alexcjohnson added status: reviewable feature something new labels Apr 10, 2017

lint annotations_test

384353a

alexcjohnson commented Apr 10, 2017

View reviewed changes

fix loneHover comment

4ab7986

etpinard reviewed Apr 10, 2017

View reviewed changes

etpinard mentioned this pull request Apr 10, 2017

Add attributes to customize hover text font #102

Closed

alexcjohnson added 2 commits April 10, 2017 16:41

hover box default dark line -> #444 not black.

919580e

annotations[i].captureevents

da1e9d7

alexcjohnson mentioned this pull request Apr 10, 2017

annotation plotly/documentation#742

Open

2 tasks

etpinard reviewed Apr 11, 2017

View reviewed changes

etpinard added this to the v1.26.0 milestone Apr 11, 2017

alexcjohnson merged commit 00355fb into master Apr 11, 2017

alexcjohnson deleted the note-hover branch April 11, 2017 00:43

etpinard mentioned this pull request Apr 11, 2017

Custom trace hover labels #1582

Merged

3 tasks

alexcjohnson mentioned this pull request Apr 12, 2017

Note test fix #1593

Merged

etpinard mentioned this pull request May 31, 2017

plotly_clickannotation event not firing on editable: true #1750

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

annotation hover text #1573

annotation hover text #1573

alexcjohnson commented Apr 10, 2017

alexcjohnson Apr 10, 2017

etpinard Apr 10, 2017

alexcjohnson Apr 10, 2017

etpinard Apr 10, 2017

alexcjohnson Apr 10, 2017

etpinard Apr 10, 2017 •

edited

Loading

alexcjohnson Apr 10, 2017

cldougl Apr 10, 2017

alexcjohnson Apr 11, 2017

etpinard Apr 11, 2017

alexcjohnson Apr 11, 2017

etpinard Apr 11, 2017

etpinard commented Apr 11, 2017

rpaskowitz commented Apr 12, 2017

alexcjohnson commented Apr 12, 2017

etpinard commented Apr 12, 2017

annotation hover text #1573

annotation hover text #1573

Conversation

alexcjohnson commented Apr 10, 2017

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 Apr 10, 2017 • edited Loading

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 Apr 11, 2017

rpaskowitz commented Apr 12, 2017

alexcjohnson commented Apr 12, 2017

etpinard commented Apr 12, 2017

etpinard Apr 10, 2017 •

edited

Loading