fix(apollo-react): disable status glow during node drag#820
Draft
SreedharAvvari wants to merge 1 commit into
Draft
fix(apollo-react): disable status glow during node drag#820SreedharAvvari wants to merge 1 commit into
SreedharAvvari wants to merge 1 commit into
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency License Review
License distribution
Excluded packages
|
There was a problem hiding this comment.
Pull request overview
This PR reduces canvas rendering overhead during design-mode node drags by introducing a canvas-level “node dragging” flag and using it to temporarily disable the animated status glow (box-shadow based) while dragging. It also adds a large LoopNode stress story to help profile this scenario and a focused BaseCanvas test to validate the drag-flag lifecycle.
Changes:
- Track design-mode node drag lifecycle in
BaseCanvasand expose it viadata-canvas-node-dragging. - Pause
animate-glowstatus chrome (animation/box-shadow) inside the active canvas while a node is being dragged. - Add an “Animated Status Stress” LoopNode story plus a BaseCanvas test for the new flag.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/apollo-react/src/canvas/styles/reactflow-reset.css | Disables .animate-glow animation/box-shadow while the canvas drag flag is set. |
| packages/apollo-react/src/canvas/components/LoopNode/LoopNode.stories.tsx | Adds an animated-status stress story and optional status-context overrides for the story wrapper. |
| packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx | Introduces drag state tracking and attaches data-canvas-node-dragging to the ReactFlow root. |
| packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.test.tsx | Adds a unit test to ensure the drag flag is set/unset during drag start/stop. |
| onSelectionChange={onSelectionChange} | ||
| style={reactFlowStyle} | ||
| elevateEdgesOnSelect={isDesignMode} | ||
| data-canvas-node-dragging={isNodeDragging || undefined} |
Comment on lines
+331
to
+350
| if (executionState || validationState) { | ||
| return ( | ||
| <ExecutionStatusContext.Provider | ||
| value={ | ||
| executionState ?? { | ||
| getNodeExecutionState: () => undefined, | ||
| getEdgeExecutionState: () => undefined, | ||
| } | ||
| } | ||
| > | ||
| <ValidationStatusContext.Provider | ||
| value={validationState ?? { getElementValidationState: () => undefined }} | ||
| > | ||
| {canvas} | ||
| </ValidationStatusContext.Provider> | ||
| </ExecutionStatusContext.Provider> | ||
| ); | ||
| } | ||
|
|
||
| return canvas; |
SreedharAvvari
changed the title
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
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.
Summary
BaseCanvaswhile any design-mode node drag is active.animate-glowstatus chrome inside that canvas during node drag while keeping static status borders visibleWhy
Animated status glow is driven by
box-shadow, which is paint-heavy when many nodes are visible. During node drag, React Flow is already doing transforms, edge updates, and hit testing, so pausing all status glow in the active canvas reduces unnecessary paint/style work without changing node status semantics.Validation
pnpm --dir packages/apollo-react exec biome check src/canvas/components/BaseCanvas/BaseCanvas.tsx src/canvas/components/BaseCanvas/BaseCanvas.test.tsx src/canvas/components/LoopNode/LoopNode.stories.tsx src/canvas/styles/reactflow-reset.csspnpm --dir packages/apollo-react exec vitest run src/canvas/components/BaseCanvas/BaseCanvas.test.tsxpnpm --dir packages/apollo-react exec tsc --noEmit --pretty false