GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing github.com — Clickable Legend Titles by alexshoe · Pull Request #7698 · plotly/plotly.js Conversation
|
|
@alexshoe Can you document the full API for the new properties in this PR description? Basically just the info that's in the plot schema. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@alexshoe Can you remove the image test? You can make a Codepen and link it in the PR description for testing purposes, but this feature doesn't require adding an image test to the test suite. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| if(numClicks === 1 && legendObj.titleclick) { | ||
| const clickVal = Events.triggerHandler(gd, 'plotly_legendtitleclick', evtData); | ||
| if(clickVal === false) return; | ||
|
|
||
| legendObj._titleClickTimeout = setTimeout(function() { | ||
| if(gd._fullLayout) handleTitleClick(gd, legendObj, legendObj.titleclick); | ||
| }, doubleClickDelay); | ||
| } else if(numClicks === 2) { | ||
| if(legendObj._titleClickTimeout) clearTimeout(legendObj._titleClickTimeout); | ||
| gd._legendMouseDownTime = 0; | ||
|
|
||
| const dblClickVal = Events.triggerHandler(gd, 'plotly_legendtitledoubleclick', evtData); | ||
| if(dblClickVal !== false && legendObj.titledoubleclick) handleTitleClick(gd, legendObj, legendObj.titledoubleclick); | ||
| } | ||
| }); |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
@alexshoe Could some of the logic in the clickOrDoubleClick() function possibly be reused here? Seems like a fair amount of code duplication, although I'm sure there are some subtle differences.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| function positionTitleToggle(scrollBox, legendObj, legendId) { | ||
| const titleToggle = scrollBox.select('.' + legendId + 'titletoggle'); | ||
| if(!titleToggle.size()) return; | ||
|
|
||
| const side = legendObj.title.side || 'top'; | ||
| const bw = legendObj.borderwidth; | ||
| var x = bw; | ||
| const width = legendObj._titleWidth + 2 * constants.titlePad; | ||
| const height = legendObj._titleHeight + 2 * constants.titlePad; | ||
|
|
||
|
|
||
| if(side === 'top center') { | ||
| x = bw + 0.5 * (legendObj._width - 2 * bw - width); | ||
| } else if(side === 'top right') { | ||
| x = legendObj._width - bw - width; | ||
| } | ||
|
|
||
| titleToggle.attr({ x: x, y: bw, width: width, height: height }); | ||
| } |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Hmm, likewise this function seems like it's duplicating a lot of the title placement logic. I don't think we should be referencing parameters like legendObj.title.side here at all. My feeling is that the titleToggle logic should be more parallel to the traceToggle placement logic.
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Ok I refactored a few things so that the titleToggle positioning now lives at the end of computeLegendDimensions, right next to the traceToggle block. This required that I also move the horizontalAlignTitle call there too. Couldn't make it fully identical to the traceToggle pattern since the title text and toggle are siblings in the scrollBox rather than children of a shared <g>
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| } | ||
| }; | ||
|
|
||
| exports.handleTitleClick = function handleTitleClick(gd, legendObj, mode) { |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Also similar comment here to above -- check whether you can share some of this logic with the handleClick function to avoid TOO much code duplication
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
@alexshoe Thanks for the updates, I'll take another pass tomorrow |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
@emilykl thanks for the comments! I addressed most of the things you flagged but re: the comments on reducing duplication: I think the seperate functions are different enough that merging them into a new helper function and adding new branching logic could make more difficult to read. Maybe you can help me outline your vision for how to clean these funcitons up? |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
Yeah, agreed that pie charts should be supported for this feature eventually. The reason I left it out for now is that pie visibility is different from other trace types in that it uses |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
As long as it's clear in the docs / attribute descriptions where these features don't currently work for pies, I think it's fine to omit that. Not just the mechanics but also the purpose of hiding pie slices is pretty different from hiding traces, so we should think clearly about it and not necessarily feel bound by decisions we made here. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
I see a subtle bug - might be preexisting behavior but to register it: In your original codepen, clicking on the group title |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
@alexcjohnson thanks for discovering that. The object for group titles was missing the legend property, so the click handler fell back to the first legend and picked up the wrong groupclick settings. Added the missing property and now it works correctly. I'll update the codepen with the latest build too |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Co-authored-by: Emily KL <[email protected]>
Co-authored-by: Emily KL <[email protected]>
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
…ndObj instead of d3 selection to clickOrDoubleClick
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
Awesome work @alexshoe ! 🚀
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
Woohoo!!! Congrats on the merge — excited to see it go live :) |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
[FEATURE]: Clickable Legend Titles incorrect item toggle behavior when using multiple legends
There was an error while loading. Please reload this page.