perf(calm-hub-ui): memoize visualiser node/edge components and cut hover re-allocations - #3125
Open
aamanrebello wants to merge 1 commit into
Open
aamanrebello wants to merge 1 commit into
aamanrebello wants to merge 1 commit into
Conversation
…ver re-allocations Wraps CustomNode, SystemGroupNode, and FloatingEdge in React.memo, and changes the node hover handlers to only allocate a new node object when its zIndex actually changes, instead of remapping every node on every mouseenter/mouseleave. No behavior change, fewer re-renders on large diagrams. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description
Human Comment: Just asked Claude to look at Calm Hub UI and identify opportunities to optimize latency. Also asked it to investigate risks - this optimization seemed very low risk (although you will probably only see any real latency difference on large complicated graphs). In essence, this PR prevents unnecessary re-renders when hovering over nodes or edges in the ReactFlow graph.
Coding Assistant Comment: Wraps the visualiser's
CustomNode,SystemGroupNode, andFloatingEdgecomponents inReact.memo, and changes the node hover handlers (useGraphInteractions.ts) to only allocate a new node object when itszIndexvalue actually changes.Before this change, hovering any node caused every node component in the diagram to re-render, because the hover handlers rebuilt the whole node array on every
mouseenter/mouseleave— giving every node a new object reference regardless of whether its z-index actually changed.React.memoalone cannot fix this; it needs stable prop references to skip a re-render. This change fixes both together: the hover handlers now only reallocate the node(s) whose z-index truly changed, so the memoized components correctly skip re-rendering everything else.No behavior change — only render frequency. Hover, click, and drag interactions render identically; diagram output is unchanged.
Type of Change
Affected Components
cli/)calm/)calm-ai/)calm-hub/)calm-hub-ui/)calm-server/)calm-widgets/)docs/)shared/)calm-plugins/vscode/)Commit Message Format ✅
Testing
Verifying the benefit
Measured actual component re-renders per hover event with a temporary instrumented counter (not part of this diff), comparing
mainagainst this branch on the same diagram (finos.fluxnova/fluxnova-microservices: 11 regular nodes + 1 group node):main(before)CustomNodes + the group nodeChecking for regressions
datacallbacks survive memoization)Two pre-existing, unrelated issues turned up during manual testing and are being filed as separate tickets rather than fixed here, to keep this PR scoped to the performance change:
maintoo.mouseleaverather than closing deterministically on click. The race itself exists onmaintoo; this change only alters its visible symptom, because faster re-rendering changes the timing (main visibly flashes on every tap; this branch only on the first).Checklist