GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — feat: Make hover label triangle optional by emilykl · Pull Request #7451 · plotly/plotly.js

Conversation

@emilykl

@emilykl emilykl commented Jul 2, 2025 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

Closes #7278

Adds trace.hoverlabel.showarrow and layout.hoverlabel.showarrow attributes (default: true) to enable hiding the triangular carat on the hover text box.

Also adds a Jasmine test for the new attributes.

With showarrow: true (default; same as current behavior):
Screenshot 2025-07-22 at 1 32 27 PM

With showarrow: false:
Screenshot 2025-07-22 at 1 32 36 PM

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@emilykl
emilykl marked this pull request as draft July 2, 2025 16:19
@gvwilson gvwilson assigned emilykl Jul 3, 2025
@gvwilson gvwilson added feature something new P1 needed for current cycle labels Jul 3, 2025
@archmoj

archmoj commented Jul 21, 2025

Copy link
Copy Markdown
Contributor

@emilykl
Is this PR ready for review?
Would you please merge master into this branch?
Thank you 🙏

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@emilykl

emilykl commented Jul 22, 2025

Copy link
Copy Markdown
Contributor Author

@archmoj not quite ready for review but I'll merge master — will ping you later today when ready for review

archmoj reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl added 4 commits July 22, 2025 13:27
@emilykl
implement layout.showarrow attribute
e746867
@emilykl
add tests for layout.showarrow
60f5718
@emilykl
fix hoverlabel.showarrow behavior for individual traces
db04896
@emilykl
fix hover label showarrow test
63e44ab
@emilykl
emilykl force-pushed the 7278-make-triangle-optional branch from 1126715 to 63e44ab Compare July 22, 2025 17:27
@emilykl
emilykl requested review from archmoj, camdecoster and gvwilson July 22, 2025 17:39
gvwilson
gvwilson approved these changes Jul 22, 2025
View reviewed changes
Comment thread src/components/fx/hover.js
'V' + pY(offsetY - HOVERARROWSIZE) +
'Z'));
pathStr = 'M0,0L' + pX(horzSign * HOVERARROWSIZE + offsetX) + ',' + pY(HOVERARROWSIZE + offsetY) +
'v' + pY(d.by / 2 - HOVERARROWSIZE) +

@gvwilson gvwilson Jul 22, 2025

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OMG math

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@emilykl emilykl Jul 22, 2025 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gvwilson Coming up with the new SVG path string with no arrow was Claude Code's only helpful contribution to this PR (but it's a doozy, so, worth it)

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
emilykl added 3 commits July 22, 2025 13:57
@emilykl
update plot-schema
d065217
@emilykl
update fx_test for new showarrow attr
579992e
@emilykl
handle case where trace.hoverlabel is undefined
b3258fc
@emilykl
emilykl marked this pull request as ready for review July 22, 2025 20:57
@emilykl
remove arrayOk
23a8f8a
@emilykl

emilykl commented Jul 22, 2025 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor Author

@archmoj This is ready for review. A couple questions for you —

  • I had to remove arrayOk: true for showarrow in 23a8f8a due to a failing test . Looking at plot-schema.json it seems arrayOk is not supported for boolean attributes, does that make sense?

  • It would be nice to support showarrow for parcats traces but it looks like all hoverlabel attributes are not supported for parcats, do you know why? I looked into enabling hoverlabel for parcats but it was not straightforward.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl added 2 commits July 22, 2025 19:03
@emilykl
update plot-schema
61d949e
@emilykl
add draftlog
7c75cd2
@emilykl emilykl changed the title 7278 make triangle optional Make hover label triangle optional (#7278) Jul 24, 2025
@emilykl emilykl mentioned this pull request Jul 24, 2025
make hover box caret/triangle optional #7278
Closed
@emilykl emilykl changed the title Make hover label triangle optional (#7278) feat: Make hover label triangle optional Jul 25, 2025
@archmoj

archmoj commented Jul 25, 2025

Copy link
Copy Markdown
Contributor
  • I had to remove arrayOk: true for showarrow in 23a8f8a due to a failing test . Looking at plot-schema.json it seems arrayOk is not supported for boolean attributes, does that make sense?

One could possibly add arrayOk to the otherOpts here:

plotly.js/src/lib/coerce.js

Line 89 in 2cac1b1

otherOpts: ['dflt'],

For this PR I don't see a strong use case for that option.
So IMHO it's a good idea to set arrayOk to false as you did.

emilykl reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@archmoj

archmoj commented Jul 25, 2025

Copy link
Copy Markdown
Contributor
  • It would be nice to support showarrow for parcats traces but it looks like all hoverlabel attributes are not supported for parcats, do you know why? I looked into enabling hoverlabel for parcats but it was not straightforward.

We could handle this option for parcats as follow:
Add

hoverItems.trace._hoverlabel = {showarrow: false};

before calling Fx.loneHover in parcats.js.

Then make the following change

var showArrow = (d.trace._hoverlabel || d.trace.hoverlabel)?.showarrow;
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@archmoj

archmoj commented Jul 25, 2025

Copy link
Copy Markdown
Contributor

In addition to parcats trace, we should handle this option in sankey trace.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@emilykl

emilykl commented Jul 25, 2025

Copy link
Copy Markdown
Contributor Author
  • It would be nice to support showarrow for parcats traces but it looks like all hoverlabel attributes are not supported for parcats, do you know why? I looked into enabling hoverlabel for parcats but it was not straightforward.

We could handle this option for parcats as follow: Add

hoverItems.trace._hoverlabel = {showarrow: false};

before calling Fx.loneHover in parcats.js.

Then make the following change

var showArrow = (d.trace._hoverlabel || d.trace.hoverlabel)?.showarrow;

Oh that's clever, I like that. Maybe for another PR. It would be cool too if we could just support all the hoverlabel options in parcats but not sure if there's a blocker for that.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@archmoj

archmoj commented Jul 25, 2025

Copy link
Copy Markdown
Contributor

Instead of the solution proposed above,
you could directly look into gd._fullLayout.hoverlabel.showarrow inside loneHover and pass it through.

exports.loneHover = function loneHover(hoverItems, opts) {
...
var gd = opts.gd;
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

camdecoster
camdecoster approved these changes Jul 25, 2025
View reviewed changes

@camdecoster camdecoster left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me. I left some suggested feedback for you to consider.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Comment thread draftlogs/7451_add.md Resolved

Uh oh!

There was an error while loading. Please reload this page.

Comment thread src/components/fx/hover.js
Comment on lines +1930 to +1931
pathStr = 'M-' + pX(d.bx / 2 + d.tx2width / 2) + ',' + pY(offsetY - d.by / 2) +
'h' + pX(d.bx) + 'v' + pY(d.by) + 'h-' + pX(d.bx) + 'Z';

@camdecoster camdecoster Jul 25, 2025

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you be up for using a template literal here and elsewhere?

Suggested change
pathStr = 'M-' + pX(d.bx / 2 + d.tx2width / 2) + ',' + pY(offsetY - d.by / 2) +
'h' + pX(d.bx) + 'v' + pY(d.by) + 'h-' + pX(d.bx) + 'Z';
pathStr = `M-${pX(d.bx / 2 + d.tx2width / 2)},${pY(offsetY - d.by / 2)}h${pX(d.bx)}v${pY(d.by)}h-${pX(d.bx)}Z`;

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@archmoj archmoj Jul 25, 2025

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could leave refactoring for another PR.
Template literal may run slower: https://jsperf.app/es6-string-literals-vs-string-concatenation/43

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

emilykl and camdecoster reacted with thumbs up emoji
All reactions
  • 👍 2 reactions

@emilykl emilykl Jul 25, 2025

Copy link
Copy Markdown
Contributor Author

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. Slower in Chrome but not in Safari.
Screenshot 2025-07-25 at 4 50 20 PM
Screenshot 2025-07-25 at 4 48 45 PM

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions

@camdecoster camdecoster Jul 25, 2025

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you seen any issues with this kind of calculation? I imagine that most computers are powerful enough where this isn't an issue.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
Comment thread src/components/fx/hover.js Resolved

Uh oh!

There was an error while loading. Please reload this page.

emilykl and others added 2 commits July 25, 2025 16:47
@emilykl @camdecoster
typo
aac31fd
Co-authored-by: Cameron DeCoster <[email protected]>
@emilykl
clearer handling of showarrow attr when hoverlabel undefined
e382d2f
@archmoj

archmoj commented Jul 28, 2025

Copy link
Copy Markdown
Contributor

Instead of the solution proposed above, you could directly look into gd._fullLayout.hoverlabel.showarrow inside loneHover and pass it through.

exports.loneHover = function loneHover(hoverItems, opts) {
...
var gd = opts.gd;

@emilykl Wondering if you tried this solution to fix the parcats and sankey traces?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@emilykl

emilykl commented Jul 29, 2025

Copy link
Copy Markdown
Contributor Author

Instead of the solution proposed above, you could directly look into gd._fullLayout.hoverlabel.showarrow inside loneHover and pass it through.

exports.loneHover = function loneHover(hoverItems, opts) {
...
var gd = opts.gd;

@emilykl Wondering if you tried this solution to fix the parcats and sankey traces?

I did, but I didn't like the complexity of the if/else logic it required. It felt like building a parallel system for logic that is already handled for traces which support trace.hovertext.showarrow. It seems to me the correct approach is to allow the use of trace.hovertext.showarrow for these traces; then we get the logic for handling layout.showarrow for free, since that's how it's handled for the other traces.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@emilykl
emilykl merged commit 415a1fc into master Jul 29, 2025
@emilykl
emilykl deleted the 7278-make-triangle-optional branch July 29, 2025 17:43
@KoolADE85 KoolADE85 mentioned this pull request Oct 26, 2026
add style customization to hoverlabel #8115
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@camdecoster camdecoster camdecoster approved these changes
@archmoj archmoj Awaiting requested review from archmoj
+1 more reviewer
@gvwilson gvwilson gvwilson approved these changes
Reviewers whose approvals may not affect merge requirements

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@emilykl emilykl

Labels

feature something new P1 needed for current cycle

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

make hover box caret/triangle optional

Uh oh!

There was an error while loading. Please reload this page.

4 participants

@emilykl @archmoj @camdecoster @gvwilson
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.