Revert "fix : On 50% zoom the nodes are overlapping" #2094
Conversation
This reverts commit ecbe520.
kubestellar-prow
bot
added
the
size/L
github-actions
bot
added
frontend
and removed
size/L
There was a problem hiding this comment.
Pull Request Overview
This PR reverts a previous fix (#1994) that addressed node overlapping issues at 50% zoom level in the FlowCanvas component.
- Removes complex zoom-responsive node positioning and edge spacing logic
- Eliminates dynamic node scaling and anti-overlap algorithms
- Simplifies edge processing by removing multi-edge grouping and zoom-based styling
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| * Renders a beautiful flow diagram canvas with custom nodes and edges in a ReactFlow container. | ||
| * Features stunning gradients, patterns, and animations for an adorable user experience. | ||
| * Provides smooth zooming, panning, and auto-centering functionality for the Kubernetes resource visualization. |
There was a problem hiding this comment.
The comment uses subjective language like 'beautiful', 'stunning', and 'adorable' which is unprofessional for technical documentation. Consider using more objective language that describes the component's functionality.
| * Renders a beautiful flow diagram canvas with custom nodes and edges in a ReactFlow container. | |
| * Features stunning gradients, patterns, and animations for an adorable user experience. | |
| * Provides smooth zooming, panning, and auto-centering functionality for the Kubernetes resource visualization. | |
| * Renders a flow diagram canvas with custom nodes and edges in a ReactFlow container. | |
| * Includes gradients, patterns, and animations to enhance visualization. | |
| * Provides smooth zooming, panning, and auto-centering functionality for Kubernetes resource visualization. |
| const { setViewport, getViewport } = useReactFlow(); | ||
| const highlightedLabels = useLabelHighlightStore(state => state.highlightedLabels); | ||
| const { currentZoom, getScaledNodeStyle, setZoom } = useZoomStore(); | ||
| const { currentZoom } = useZoomStore(); |
There was a problem hiding this comment.
The destructured object only extracts currentZoom but the original code also used getScaledNodeStyle and setZoom methods. This incomplete revert may cause runtime errors if these methods are used elsewhere in the component.
| const { currentZoom } = useZoomStore(); | |
| const { currentZoom, setZoom, getScaledNodeStyle } = useZoomStore(); |
| const { edgeType } = useEdgeTypeStore(); | ||
|
|
||
| // Get edge gradients | ||
| // Get enhanced edge gradients |
There was a problem hiding this comment.
The comment describes 'enhanced edge gradients' but the enhancement logic was removed in this revert. The comment should be updated to reflect the current functionality.
| // Get enhanced edge gradients | |
| // Get edge gradients |
| useEffect(() => {}, [highlightedLabels]); | ||
|
|
||
| // Set background styles based on theme | ||
| // Beautiful background styles based on theme |
There was a problem hiding this comment.
Using 'Beautiful' in technical comments is subjective and unprofessional. Consider using 'Theme-based background styles' instead.
| // Beautiful background styles based on theme | |
| // Theme-based background styles |
|
/ok-to-test |
kubestellar-prow
bot
added
the
ok-to-test
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: btwshivam The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
kubestellar-prow
bot
added
the
approved
github-project-automation
bot
moved this from In Progress
to Done
in KubeStellar UI Project
Reverts #1994