unified hover label #4620

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.

src/components/fx/hover.js

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

src/components/fx/hover.js

src/components/legend/defaults.js

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

src/components/legend/draw.js


-    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.

test/image/mocks/hovermode_xunified.json

src/plots/cartesian/layout_defaults.js

src/components/fx/hover.js

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

src/components/fx/layout_attributes.js

@@ -61,6 +61,16 @@ module.exports = {
        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!

src/plots/cartesian/layout_defaults.js

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:

import plotly.express as px

df = 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 label Mar 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

src/components/fx/hover.js Outdated Show resolved Hide resolved

etpinard reviewed Mar 10, 2020

View reviewed changes

src/components/fx/hover.js Outdated Show resolved Hide resolved

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 master Mar 13, 2020

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

antoinerg commented Mar 20, 2020

View reviewed changes

src/plots/cartesian/layout_defaults.js Show resolved Hide resolved

antoinerg commented Mar 20, 2020

View reviewed changes

src/plots/cartesian/layout_defaults.js Show resolved Hide resolved

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

unified hover label #4620

unified hover label #4620

antoinerg commented Mar 9, 2020 •

edited

Loading

archmoj commented Mar 10, 2020

etpinard commented Mar 10, 2020 •

edited

Loading

archmoj Mar 10, 2020

archmoj commented Mar 10, 2020

antoinerg commented Mar 10, 2020

etpinard commented Mar 10, 2020

antoinerg commented Mar 10, 2020 •

edited

Loading

archmoj commented Mar 10, 2020

alexcjohnson commented Mar 13, 2020

archmoj Mar 13, 2020

antoinerg commented Mar 13, 2020

nicolaskruchten commented Mar 13, 2020

alexcjohnson commented Mar 13, 2020

antoinerg commented Mar 13, 2020

antoinerg commented Mar 13, 2020

alexcjohnson commented Mar 13, 2020

antoinerg commented Mar 13, 2020 •

edited

Loading

alexcjohnson left a comment

eddy-geek commented Apr 8, 2020

nicolaskruchten commented Apr 8, 2020

nicolaskruchten commented Apr 8, 2020

jcunhafonte commented Apr 21, 2020

alexcjohnson commented Apr 23, 2020


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

unified hover label #4620

unified hover label #4620

Conversation

antoinerg commented Mar 9, 2020 • edited Loading

archmoj commented Mar 10, 2020

etpinard commented Mar 10, 2020 • edited Loading

archmoj Mar 10, 2020

Choose a reason for hiding this comment

archmoj commented Mar 10, 2020

antoinerg commented Mar 10, 2020

etpinard commented Mar 10, 2020

antoinerg commented Mar 10, 2020 • edited Loading

archmoj commented Mar 10, 2020

alexcjohnson commented Mar 13, 2020

archmoj Mar 13, 2020

Choose a reason for hiding this comment

antoinerg commented Mar 13, 2020

nicolaskruchten commented Mar 13, 2020

alexcjohnson commented Mar 13, 2020

antoinerg commented Mar 13, 2020

antoinerg commented Mar 13, 2020

alexcjohnson commented Mar 13, 2020

antoinerg commented Mar 13, 2020 • edited Loading

alexcjohnson left a comment

Choose a reason for hiding this comment

eddy-geek commented Apr 8, 2020

nicolaskruchten commented Apr 8, 2020

nicolaskruchten commented Apr 8, 2020

jcunhafonte commented Apr 21, 2020

alexcjohnson commented Apr 23, 2020

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