Prevent query graph flickering during relayout - #170
Open
vogelsgesang wants to merge 1 commit into
Open
Conversation
So far, there was some flickering of the edge labels. This was caused because we recreated the node objects we passed into reactflow and reset the `measured` dimensions. Therefore, reactflow re-measured the nodes and while doing so hid the labels. We now preserve React Flow's measured dimensions across layout updates so existing nodes remain initialized, We use React Flow's dimension changes as the sole measurement source and remove the parallel ResizeObserver. Furthermore, each QueryGraph now owns its rendering store, decoupling expansion, subtree, and measurement state between multiple graph instances on the same page.
vogelsgesang
commented
Sep 4, 2026
Comment on lines
+40
to
+41
| // Keep React Flow's measurements in the controlled node objects. Dropping them when | ||
| // recomputing the layout makes React Flow repeatedly hide and re-initialize the nodes. |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| // Keep React Flow's measurements in the controlled node objects. Dropping them when | |
| // recomputing the layout makes React Flow repeatedly hide and re-initialize the nodes. | |
| // Keep React Flow's measurements in the controlled node objects. Dropping them when | |
| // recomputing the layout would cause React Flow to re-initialize the nodes, leading to visible | |
| // flickering of the edge labels. |
| // Layout the tree, using the actual measured sizes of the DOM nodes | ||
| const nodeDimensions = useGraphRenderingStore((s) => s.nodeDimensions); | ||
| const expandedNodes = useGraphRenderingStore((s) => s.expandedNodes); | ||
| // Layout the tree using the dimensions measured by React Flow itself. |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| // Layout the tree using the dimensions measured by React Flow itself. | |
| // Layout the tree using the dimensions measured by React Flow |
|
|
||
| `tree-layout.ts` positions the tree with [`d3-flextree`](https://github.com/Klortho/d3-flextree) on top of `d3-hierarchy`, then translates the result into react-flow nodes and edges. | ||
| Layout is driven by the **measured** DOM size of each node, so it runs in two passes: the first render uses a placeholder size and, once the `ResizeObserver` reports real dimensions, the tree re-lays-out with the correct sizes. | ||
| Layout is driven by the **measured** DOM size of each node, so it runs in two passes: react-flow measures new nodes after their first render, then the tree re-lays-out with the correct sizes. Those measurements are retained in the controlled node objects so react-flow does not re-initialize them on every layout. |
Collaborator
Author
There was a problem hiding this comment.
Suggested change
| Layout is driven by the **measured** DOM size of each node, so it runs in two passes: react-flow measures new nodes after their first render, then the tree re-lays-out with the correct sizes. Those measurements are retained in the controlled node objects so react-flow does not re-initialize them on every layout. | |
| Layout is driven by the **measured** DOM size of each node, so it runs in two passes: react-flow measures new nodes after their first render, then the tree re-lays-out with the correct sizes. | |
| Those measurements are retained in the controlled node objects so react-flow does not re-initialize them on every layout. |
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.
So far, there was some flickering of the edge labels. This was caused because we recreated the node objects we passed into reactflow and reset the
measureddimensions. Therefore, reactflow re-measured the nodes and while doing so hid the labels.We now preserve React Flow's measured dimensions across layout updates so existing nodes remain initialized,
We use React Flow's dimension changes as the sole measurement source and remove the parallel ResizeObserver.
Drive-by fix: each QueryGraph now owns its rendering store, decoupling expansion, subtree, and measurement state between multiple graph instances on the same page.