refactor: enhance tree view layout zoom

[khushiiagrawal]

Description

This PR fixes the TreeView UI consolidation issue that occurs when the browser zoom level is set to 60% or lower. The fix implements dynamic spacing calculations that scale appropriately with zoom levels, ensuring proper node spacing and readability across all zoom ranges.

Additionally, this PR improves the ZoomControls component's responsiveness by fixing viewport-based constraints to prevent overflow issues on zoomed browser windows.

Related Issue

Fixes #2276

Changes Made

• Enhanced TreeView layout calculations (useTreeViewData.ts):

  • Introduced base constants for node dimensions and spacing (BASE_NODE_WIDTH, BASE_NODE_HEIGHT, BASE_NODE_SEP, BASE_RANK_SEP)

• Improved ZoomControls responsiveness (ZoomControls.tsx):

  • Fixed maxWidth and maxHeight constraints to respect both viewport and container boundaries
  • Changed from calc(100vw - ...) to min(calc(100vw - ...), calc(100% - 16px)) to prevent overflow on browser zoom
  • Ensures controls remain accessible and properly sized regardless of browser zoom level

Checklist

Please ensure the following before submitting your PR:

• I have reviewed the project's contribution guidelines.
• I have written unit tests for the changes (if applicable).
• I have updated the documentation (if applicable).
• I have tested the changes locally and ensured they work as expected.
• My code follows the project's coding standards.

Screenshots or Logs (if applicable)

Screen.Recording.2025-12-10.at.12.48.34.PM.mov

Additional Notes

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign mavrick-1 for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[kubestellar-prow]

Hi @khushiiagrawal. Thanks for your PR.

I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[khushiiagrawal]

PTAL @btwshivam
Thanks!

[Copilot]

Pull request overview

This PR addresses TreeView UI consolidation issues at low browser zoom levels (60% or lower) by implementing dynamic spacing calculations that scale with zoom. It also improves the ZoomControls component's responsiveness to prevent overflow on zoomed browser windows.

Key Changes:

• Enhanced TreeView layout with zoom-aware spacing that applies higher multipliers at compressed zoom levels (≤60%)
• Improved ZoomControls constraints using min() CSS function to respect both viewport and container boundaries
• Replaced hardcoded spacing values with calculated constants based on zoom level

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

File	Description
frontend/src/components/treeView/hooks/useTreeViewData.ts	Introduces base dimension constants and dynamic spacing calculations that scale with zoom, applying 3x horizontal and 2x vertical spacing at compressed zoom levels
frontend/src/components/wds_topology/ZoomControls.tsx	Updates maxWidth and maxHeight constraints to use min() function preventing overflow by respecting both viewport and container boundaries

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[btwshivam]

@khushiiagrawal no not like this.. you can see it is rerendering and recalculating

[btwshivam]

first.. MAke wds and wecs rank and node sepration same.. then export the existing rank, nod sepration then apply formlua. 2x or 3x on 60%.. now u got?

[btwshivam]

zoom control is same for wds and wecs so you cant use constant height.. make both same and export the variable then apply formula. use memo u can use.. just ensure no rerendering.. no recalculation and smooth zooming out

[khushiiagrawal]

@btwshivam PTAL, i have removed the recalculation part as it shouldn't be there at first and yea it is very smooth now

Screen.Recording.2025-12-12.at.12.01.59.AM.mov

[Arpit529Srivastava]

/ok-to-test

[btwshivam]

Good Job.. this is exactly i was talking..

[btwshivam]

Just test ones with wecs tree.. upload a video then we can merge

[btwshivam]

Layout recalculation is on every zoom change.. fix it.. it is causing performance issue

[btwshivam]

dont recalulate implement Debounce zoom-based recalculation

[khushiiagrawal]

Just test ones with wecs tree.. upload a video then we can merge

actually im unable to deploy any workload on wecs, even if i am deploy it doesn't show. happens every time.

[btwshivam]

Just test ones with wecs tree.. upload a video then we can merge

actually im unable to deploy any workload on wecs, even if i am deploy it doesn't show. happens every time.

Create a binding policy

[khushiiagrawal]

@btwshivam PTAL.
thankss!

Screen.Recording.2025-12-13.at.6.15.19.PM.mov

[btwshivam]

Looks good.. but same concern.. it is recalutating on evry zoom change, can u optimze performance.. removing caching can hurt performance with large graphs.

[khushiiagrawal]

Looks good.. but same concern.. it is recalutating on evry zoom change, can u optimze performance.. removing caching can hurt performance with large graphs.

@btwshivam should i keep a constant spacing or like same gaps between each node so that it doesn't have to recalculate ? zoom in and out will work as it is just it gaps will be constant throughout.

[btwshivam]

Looks good.. but same concern.. it is recalutating on evry zoom change, can u optimze performance.. removing caching can hurt performance with large graphs.

@btwshivam should i keep a constant spacing or like same gaps between each node so that it doesn't have to recalculate ? zoom in and out will work as it is just it gaps will be constant throughout.

Can you please check argocd treeview. how they are maintating and showing larger trees?

[btwshivam]

Looks good.. but same concern.. it is recalutating on evry zoom change, can u optimze performance.. removing caching can hurt performance with large graphs.

@btwshivam should i keep a constant spacing or like same gaps between each node so that it doesn't have to recalculate ? zoom in and out will work as it is just it gaps will be constant throughout.

Yess, try it.. i will recommend you to once check ArgoCD treeviw

[khushiiagrawal]

@btwshivam i checked argocd's implementation
How it manages:

1. No debouncing, zoom updates immediately via CSS transform
2. Recalculates layout on every render (no memoization)
3. No caching, full Dagre.js recalculation each time
4. Renders all nodes (no virtual scrolling/viewport culling)

What they do well:

1. CSS transforms for GPU-accelerated zoom
2. Node grouping (pods grouped together)
3. Fixed node sizes (container scales, not nodes)

[btwshivam]

okay try that..

[btwshivam]

container scale is fine but thiing is tree should be smartly structured into container. then only we can scale in or out
give a try with fixed node size let see how it works

[btwshivam]

Keep this work in this branch .. raise Another PR for that

[khushiiagrawal]

Keep this work in this branch .. raise Another PR for that

okay i'll do that

[onkar717]

/ok-to-test

[onkar717]

@khushiiagrawal please update with the latest changes !

[khushiiagrawal]

@khushiiagrawal please update with the latest changes !

Done!

[btwshivam]

we are going with fixed node zoom.. thank you for this..

[btwshivam]

/close

[kubestellar-prow]

@btwshivam: Closed this PR.

Details

In response to this:

/close

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.