Modified Graph.react.js to include restyle event #483
Conversation
|
Nice, thanks for the PR @mako-npm! A few things we'll need to finish this:
|
|
Hey folks, huge thanks @mako-npm for this PR, I could really use this feature. And huge thanks @alexcjohnson for looking into the issues. Looking forward to this getting merged. |
| 'layout': { | ||
| 'width': 700, | ||
| 'height': 450 | ||
| } |
There was a problem hiding this comment.
I'm not sure what to say about this one... I'm tempted to consider it a bug, but I don't know what we'd do to fix it. The issue - and I still don't understand why it's triggered intermittently here, but it's a real issue users will face - is that if you have an autosized graph that's initially drawn in a display: none container, it gets the default size. It keeps that default size when the container is displayed, because no redraw is triggered. But if the window is resized at all, THEN the graph gets sized correctly.
This seems to sometimes happen on CI - see eg https://percy.io/plotly/dash-core-components/builds/1576352?utm_campaign=plotly&utm_content=dash-core-components&utm_source=github_status - so I'm just locking down the size here.
| button = self.wait_for_element_by_css_selector('#button') | ||
| self.snapshot(test_name + ' -> initial') |
There was a problem hiding this comment.
take the snapshot after we know the button exists
src/components/Graph.react.js
Outdated
| gd.on('plotly_restyle', eventData => { | ||
| const restyleData = filterEventData(gd, eventData, 'restyle'); | ||
| if (!isNil(restyleData)) { | ||
| if (setProps) { |
There was a problem hiding this comment.
🔪 Think we can remove these checks now ?
There was a problem hiding this comment.
good call. In case @Marc-Andre-Rivet is already working on removing the others I'll just do this one for now.
There was a problem hiding this comment.
🔪 in 8e7806b - but as commented I only changed the new prop for now.
src/components/Graph.react.js
Outdated
| * Data from latest restyle event which occurs | ||
| * when the user toggles a legend item | ||
| */ | ||
| restyleData: PropTypes.object, |
There was a problem hiding this comment.
Can we have a shape instead?
There was a problem hiding this comment.
Oh right, it’s actually a length-2 array of the args to Plotly.restyle - the first one an object of <attribute.string>: <value>, the second an integer or array of integers for the trace indices. So I’ll change it to array and describe this (yes, it’s also read-only) but it doesn’t look to me as though PropTypes allows us to do better other than via custom function, which wouldn’t do the user any good. Is that right or am I missing how to do that?
There was a problem hiding this comment.
Changed to array and improved docs (including read-only on all the event data props) in 688a66f
src/components/Graph.react.js
Outdated
| @@ -271,6 +279,12 @@ const graphPropTypes = { | |||
| */ | |||
| relayoutData: PropTypes.object, | |||
|
|
|||
| /** | |||
| * Data from latest restyle event which occurs | |||
| * when the user toggles a legend item | |||
There was a problem hiding this comment.
It's not obvious to me if this prop is read-only or not. From reading the code I'd say changing it has no effect, so it's a read only and should be stated.
|
Thanks @mako-npm for kicking this off! This will be part of our next release, which should come out in the next couple of days. |
|
@alexcjohnson Thanks for all the work on this, looking forward to seeing it! |
#197
https://community.plot.ly/t/interactive-callback-on-legend-click/9236/6
Made changes to Graph.react.js to add support for restyle events, restyleData is now an available component_property for graph components in Dash. Toggling on/off legend items now triggers callbacks with the associated restyleData component property.