-
Notifications
You must be signed in to change notification settings - Fork 712
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Layout rendering dynamic optimizations #2221
Conversation
c4cd37f
to
20118b3
Compare
} else { | ||
this.setState({ matched: false }); | ||
} | ||
} |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
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.
Excellent use of selectors. If anything I'd look into extracting adjacency for nodes into its own selector. Currently the graphLayout()
selector is called on every received delta. Also, might be worth revisiting the deepEqual selectors that have been removed with this PR.
Otherwise LGTM
[ | ||
allNodesSelector, | ||
], | ||
allNodes => allNodes.filter(node => !node.get('filtered')) |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
); | ||
|
||
|
||
export const nodeAdjacenciesSelector = createSelector( |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
} | ||
|
||
export default connect(mapStateToProps)(NodesChartElements); | ||
export default connect()(NodesChartElements); |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
@@ -64,7 +64,7 @@ describe('RootReducer', () => { | |||
} | |||
], | |||
stats: { | |||
edge_count: 319, | |||
edge_count: 379, |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
20118b3
to
19854d5
Compare
@davkal PTAL, maybe just at the last commit, just to check if I've identified all the points you raised in the comments. |
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.
I did some quick pseudo-science around wasted renders and found a significant improvement. I executed the same actions on both branches; here is the result:
Master:
The code looks fine. I was not able to do a functional test, because we don't have a great way to roll out an experiment to dev, then roll it back with flux.
One comment around isEmpty
in node.js, otherwise LGTM!
|
||
const color = getNodeColor(rank, label, pseudo); | ||
const truncate = !focused && !hovered; | ||
const labelOffsetY = (showingNetworks && networks) ? 40 : 28; | ||
|
||
const nodeClassName = classnames('node', { | ||
// NOTE: Having a CSS animation here might not be the best idea. | ||
// See https://github.com/weaveworks/scope/issues/2255 | ||
matched: !matches.isEmpty(), |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, something went wrong.
19854d5
to
e5c655a
Compare
Thanks for the review and the benchmarks @jpellizzari! I didn't expect the numbers to be so much better with my PR, but I think some of it is compensated with the slowness of deep comparison of the props (which now happens more often I think). |
In response to #1188:
Most relevant optimizations
NodeContainer
component level, so nodes are only rerendered when they change internally and not when they are repositioned in the layout.Layout changes
Other changes
subLabel
tolabelMinor
everywhere for consistency with the grid mode and the backend naming.Some ideas for the future
zoomCache
fromNodesChart
to a global state (would also solve Graph view zoom states get reset when switching to table view #2254).