unified hover label by antoinerg · Pull Request #4620 · plotly/plotly.js

antoinerg · 2020-03-09T22:49:35Z

Closes#4477 by introducing hover modes x unified and y unified!

Codepen:

TODO:

test traces with MathJax in their names (not working but see unified hover label #4620 (comment))
style symbol based on on (marker | line).color (ec8c373)
investigate problem with mock legend_horizontal_autowrap (fixed in ae5b9cc)
fix waterfall symbols

otherwise console logs errors for mock "box-alignment-offset"

archmoj · 2020-03-10T12:52:49Z

Great PR!
@antoinerg could we possibly use color of each point instead of the legend?
Here is a demo, where icons for traces with (marker | line).color arrays and colorscale currently paint in black.

etpinard · 2020-03-10T13:47:00Z

Very cool!

@antoinerg have you tested x unified and y unified on graphs that have traces with MathJax symbols in their name attributes? I suspect this won't work smoothly as Fx.hover does not handle MathJax promises.

We may not need to handle unified hover labels + MathJax for the first iteration, but it would be nice to confirm

archmoj · 2020-03-10T13:36:33Z

+ var layer;

- if(!fullLayout._infolayer || !gd.calcdata) return;
+ // Check whether this is the main legend (ie. called without any opts)


This is little hacky.
What if we pass proper options to draw legend.
In that case one may look into opts._main to figure out the mocked legend (for unified hover) from the actual legend.

archmoj · 2020-03-10T14:27:07Z

Hover is not showing up on this mock | possibly related to not having enough space?

antoinerg · 2020-03-10T18:09:04Z

@antoinerg have you tested x unified and y unified on graphs that have traces with MathJax symbols in their name attributes? I suspect this won't work smoothly as Fx.hover does not handle MathJax promises.
We may not need to handle unified hover labels + MathJax for the first iteration, but it would be nice to confirm

@etpinard I just tested it and you were right that Fx.hover does not handle MathJax properly. At the moment, if the trace name has MathJax in it, it will appear as a raw string in the hover label. However, this is on par with the other hover modes so I consider it out of scope for this PR. However, I'd be curious to know how much work you think it would be to add this feature.

etpinard · 2020-03-10T18:15:27Z

At the moment, if the trace name has MathJax in it, it will appear as a raw string in the hover label.

That's good.

However, this is on par with the other hover modes so I consider it out of scope for this PR

I agree 100% cc #3841

…pported without this fix, in mock "ohlc_first", the library tries to render MathJax and the result is broken

antoinerg · 2020-03-10T21:17:51Z

@antoinerg could we possibly use color of each point instead of the legend?
Here is a demo, where icons for traces with (marker | line).color arrays and colorscale currently paint in black.

This is addressed in ec8c373 which is a big improvement. The second, third and fourth mocks in https://codepen.io/antoinerg/pen/MWwpPpa are now much better.

archmoj · 2020-03-10T21:26:31Z

@antoinerg could we possibly use color of each point instead of the legend?
Here is a demo, where icons for traces with (marker | line).color arrays and colorscale currently paint in black.
This is addressed in ec8c373

Wow! Hover on those mocks look very nice. Here is the updated demo.

alexcjohnson · 2020-03-13T15:16:38Z

Just watching @nicolaskruchten demo this and saying "I have to reload because there’s no button for unified hover" - makes me think perhaps unified vs separate hover should be a new layout attribute (unifiedhover: true?) rather than part of hovermode. That way the modebar buttons would still function to toggle compare vs closest without losing your preference of what compare mode looks like.

archmoj · 2020-03-13T17:21:32Z

 editType: 'modebar',
 description: [
 'Determines the mode of hover interactions.',
+ 'If `closest`, a single hoverlabel will appear',


Please put flags between two * and attributes between ` chars.
E.g. this line should be
'If *closest*, a single `hoverlabel` will appear',

antoinerg · 2020-03-13T17:30:19Z

Just watching @nicolaskruchten demo this and saying "I have to reload because there’s no button for unified hover" - makes me think perhaps unified vs separate hover should be a new layout attribute (unifiedhover: true?) rather than part of hovermode. That way the modebar buttons would still function to toggle compare vs closest without losing your preference of what compare mode looks like.

That's an interesting idea. Either this or we add a third button? cc @nicolaskruchten

nicolaskruchten · 2020-03-13T17:51:08Z

We don't want to add a new attribute because there's no real meaning to unified + closest. I also don't really want to add a new button today because the mode bar is already pretty big IMO.

Maybe in unified hover mode the two existing buttons disappear by default?

alexcjohnson · 2020-03-13T18:51:58Z

We don't want to add a new attribute because there's no real meaning to unified + closest.

By itself that's true, but it serves the purpose of saving the fact that you when you enable compare mode you want it to have unified hover.

antoinerg · 2020-03-13T19:21:07Z

Maybe in unified hover mode the two existing buttons disappear by default?

This could be achieved in 2 lines of code.

antoinerg · 2020-03-13T19:31:04Z

I kinda like having (x|y) unified be a hovermode as it currently is. What do you think of the idea of adding a third button down the road (for the next release for example)?

cc @archmoj @nicolaskruchten @alexcjohnson

alexcjohnson · 2020-03-13T19:49:26Z

I'd be OK with, as a short-term measure, removing the hover mode buttons in one of the unified modes. Perhaps down the line this is just one more reason to put some menus into the mode bar - one for hovermode, another for drag mode...

antoinerg · 2020-03-13T20:02:48Z

I'd be OK with, as a short-term measure, removing the hover mode buttons in one of the unified modes.

I remove the modebar buttons when hovermode is (x|y) unified in af4a07c

Perhaps down the line this is just one more reason to put some menus into the mode bar - one for hovermode, another for drag mode...

I can open an issue for this one if you'd like!

alexcjohnson

💃 Beautiful!

eddy-geek · 2020-04-08T17:30:19Z

great work. two remarks from using it (through the python api)

The first line containing "X" value seems to be oblivious to hovertemplate
Is it worth an issue or just documentation update or am I missing something?
With plotly express color= you get a ton of repetition by default. Example based on the first Line example from the plotly.py doc:

importplotly.expressaspxdf=px.data.gapminder().query("continent=='Oceania'")
fig=px.line(df, x="year", y="lifeExp", color='country').update_layout(hovermode='x unified')
fig.show()

I don't see an easy fix, but better documentation on the correct hover* arguments to use would help.

nicolaskruchten · 2020-04-08T19:26:39Z

Indeed, the x value here is not subject to hovertemplate ... we may add a layout.xaxis.hovertemplate for this purpose (TBD).

Regarding Plotly Express, yes, in the docs here https://plotly.com/python/hover-text-and-formatting/ we recommend forcing hovertemplate=None when using compare or unified hover with PX.

nicolaskruchten · 2020-04-08T19:27:21Z

Here is the result:

jcunhafonte · 2020-04-21T09:28:40Z

@antoinerg This looks awesome. Thank you.

When there are many traces the information gets hidden. Any hint or suggestion to have the legend with scroll or above the graph?

alexcjohnson · 2020-04-23T17:52:42Z

Thanks @jcunhafonte - moved to a new issue #4786

antoinerg added 8 commits March 9, 2020 10:16

hover: move text logic into function getHoverLabelText()
18ddd5d

introduce hovermode 'x unified' and 'y unified'
1c92511

unified hoverlabel: add smart defaults for spikelines
e43b197

unified hoverlabel: test label's background color
2bc9c77

unified hoverlabel: do not display trace name if it's empty
3fe5951

unified hoverlabel: fix positioning for edge cases
88bb33a

unified hoverlabel: test finance trace
07fb8af

unified hoverlabel: fix for cases when hoverData is empty
a704769
otherwise console logs errors for mock "box-alignment-offset"

antoinerg requested a review from alexcjohnson March 9, 2020 22:49

antoinerg changed the title ~~Pr unified hoverlabel~~unified hover labelMar 9, 2020

archmoj added status: reviewable feature something new labels Mar 10, 2020

archmoj added this to the v1.53.0 milestone Mar 10, 2020

etpinard reviewed Mar 10, 2020
View reviewed changes

Comment threadsrc/components/fx/hover.js Outdated

etpinard reviewed Mar 10, 2020
View reviewed changes

Comment threadsrc/components/fx/hover.js Outdated

archmoj reviewed Mar 10, 2020
View reviewed changes

antoinerg added 4 commits March 10, 2020 13:32

unified hoverlabel: revert changes to legend/defaults.js
9ea8bfd

unified hoverlabel: use stricter comparison operators
36bc6b5

unified hoverlabel: 🔪 unused mock/baseline
e82e010

hover: revert unnecessary modification
818223d

antoinerg added 3 commits March 10, 2020 15:31

unified hoverlabel: title font should be the same as fullLayout.font
4bf9052

unified hoverlabel: do not process MathJax in hover since it's not su…
609d5ca
…pported without this fix, in mock "ohlc_first", the library tries to render MathJax and the result is broken

unified hoverlabel: style legend item using marker's style
ec8c373

antoinerg added 2 commits March 11, 2020 17:12

unified hoverlabel: rank points based on trace's index
53c5714

unified hoverlabel: fix test
dd86a60

antoinerg self-assigned this Mar 12, 2020

archmoj mentioned this pull request Mar 12, 2020
support legend for image trace and to display an icon in (x|y) unified hovermode #4632
Closed

unified hoverlabel: update description
a857d71

archmoj reviewed Mar 13, 2020
View reviewed changes

unified hoverlabel: fix description
05188d6

unified hoverlabel: remove modebar hover buttons when activated
af4a07c

alexcjohnson approved these changes Mar 13, 2020
View reviewed changes

antoinerg merged commit b8b7efc into masterMar 13, 2020

antoinerg deleted the pr-unified-hoverlabel branch March 13, 2020 20:19

antoinerg commented Mar 20, 2020
View reviewed changes

Comment threadsrc/plots/cartesian/layout_defaults.js

antoinerg commented Mar 20, 2020
View reviewed changes

Comment threadsrc/plots/cartesian/layout_defaults.js

snyk-bot mentioned this pull request Apr 23, 2020
[Snyk] Upgrade plotly.js from 1.52.1 to 1.53.0 mc-ireiser/vue-plotly#1
Open

alexcjohnson mentioned this pull request Apr 23, 2020
Unified hover labels overflow with too many traces #4786
Closed

snyk-bot mentioned this pull request May 1, 2020
[Snyk] Upgrade plotly.js-basic-dist from 1.52.3 to 1.53.0 libamtrack/web#583
Merged

archmoj mentioned this pull request Apr 5, 2021
Refactor legend draw to make input/output and optional arguments clear #5579
Merged

Uh oh!

Uh oh!

Conversation

antoinerg commented Mar 9, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

archmoj commented Mar 10, 2020

Uh oh!

Uh oh!

Uh oh!

etpinard commented Mar 10, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmojMar 10, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

archmoj commented Mar 10, 2020

Uh oh!

antoinerg commented Mar 10, 2020

Uh oh!

etpinard commented Mar 10, 2020

Uh oh!

antoinerg commented Mar 10, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

archmoj commented Mar 10, 2020

Uh oh!

alexcjohnson commented Mar 13, 2020

Uh oh!

archmojMar 13, 2020

Choose a reason for hiding this comment

Uh oh!

antoinerg commented Mar 13, 2020

Uh oh!

nicolaskruchten commented Mar 13, 2020

Uh oh!

alexcjohnson commented Mar 13, 2020

Uh oh!

antoinerg commented Mar 13, 2020

Uh oh!

antoinerg commented Mar 13, 2020

Uh oh!

alexcjohnson commented Mar 13, 2020

Uh oh!

antoinerg commented Mar 13, 2020• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexcjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

eddy-geek commented Apr 8, 2020

Uh oh!

nicolaskruchten commented Apr 8, 2020

Uh oh!

nicolaskruchten commented Apr 8, 2020

Uh oh!

jcunhafonte commented Apr 21, 2020

Uh oh!

alexcjohnson commented Apr 23, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

antoinerg commented Mar 9, 2020•
edited
Loading

etpinard commented Mar 10, 2020•
edited
Loading

antoinerg commented Mar 10, 2020•
edited
Loading

antoinerg commented Mar 13, 2020•
edited
Loading