feat: make control panel vertical and fix unnecessary button focus behaviors

[khushiiagrawal]

Description

This PR refactors the zoom controls panel in the WDS topology view to improve UX and accessibility. The main changes include:

• Vertical Layout: Changed the control panel from horizontal to vertical orientation for better space utilization and visual hierarchy
• Position Update: Moved the control panel from the left side to the right side of the viewport
• Focus Behavior Fix: Removed unnecessary button focus outlines that were causing visual distractions after button clicks
• Responsive Scaling: Added viewport-based proportional scaling to ensure controls adapt smoothly to different screen sizes

Related Issue

Fixes #2248

Changes Made

• Updated ZoomControls.tsx to use vertical layout (flexDirection: 'column')
• Refactored panel positioning from left to right side
• Fixed button focus behaviors by removing focus outlines (outline: 'none' for :focus and :focus-visible)
• Added responsive scaling system based on viewport height with min/max constraints

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-11-20.at.11.38.16.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 onkar717 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.

[Copilot]

Pull Request Overview

This PR refactors the zoom controls panel in the WDS topology view, changing it from a horizontal layout positioned on the left to a vertical layout positioned on the right side. The changes improve visual hierarchy and add responsive scaling based on viewport height, while also removing focus outlines from buttons.

Key changes:

• Vertical layout with right-side positioning for better space utilization
• Responsive scaling system that adapts control sizes based on viewport height
• Removal of focus outlines on buttons (:focus and :focus-visible)

---

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

[khushiiagrawal]

/cc @clubanderson PTAL
thanks!

[kubestellar-prow]

@khushiiagrawal: GitHub didn't allow me to request PR reviews from the following users: PTAL.

Note that only kubestellar members and repo collaborators can review this PR, and authors cannot review their own PRs.

Details

In response to this:

/cc @clubanderson PTAL
thanks!

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 @kunal-511 @btwshivam
thanks!

[Per0x1de-1337]

/ok-to-test

[Per0x1de-1337]

the CI's are failing
@khushiiagrawal Could you check them again ?

[khushiiagrawal]

the CI's are failing @khushiiagrawal Could you check them again ?

@Per0x1de-1337 I think this problem is not because of the PR, it's the issue with Helm Chart.
I have mentioned this on Slack last week

[btwshivam]

@khushiiagrawal Too much lag and rendering. make it smooth. also test same with WECS

[khushiiagrawal]

@khushiiagrawal Too much lag and rendering. make it smooth. also test same with WECS

@btwshivam i've made the rendering smoother and it works for WECS also.
Thanks!

Screen.Recording.2025-11-29.at.7.07.14.PM.mov

[clubanderson]

@btwshivam can you advise on this?

[btwshivam]

The whole screen is being zoomed in and out fix it. set refernce for treeview screen only not whole window.

[btwshivam]

The useEffect that subscribes to rf.on('move', ...) and the RAF fallback uses many external values (rf, getViewport, getZoom, snapToStep, setZoom). dont left it empty

[btwshivam]

i mean set minimum dependency.. also use usememo whereever the calculation is being done

[btwshivam]

In the RAF fallback branch you set rafId and then requestAnimationFrame repeatedly. eensure the cleanup properly cancels rafId when the component unmounts or when branch conditions change. i mean this can memory leak

[khushiiagrawal]

@btwshivam PTAL.
I’ve updated updated ZoomControls so scaling is based on the treeview container height (panel parent) instead of window.innerHeight, with a minimal non-empty useEffect dependency array and memoized calculations. In the RAF fallback I added an isCancelled guard plus cancelAnimationFrame(rafId) on cleanup, and clamped the panel with viewport-based maxHeight.
Thanks!

[Arpit529Srivastava]

/ok-to-test

[khushiiagrawal]

@khushiiagrawal Test this with kunals PRs and upload a video

Screen.Recording.2025-12-09.at.2.29.37.AM.mov

[clubanderson]

@btwshivam is this ready?

[btwshivam]

@khushiiagrawal Again whole window getting zoomed in out

[btwshivam]

told you to set reference

[khushiiagrawal]

told you to set reference

@btwshivam i have set the reference for the for treeview screen as you asked

[khushiiagrawal]

@khushiiagrawal Again whole window getting zoomed in out

@btwshivam isn't it because i am increasing and decreasing the screen size ?

[btwshivam]

@khushiiagrawal Again whole window getting zoomed in out

@btwshivam isn't it because i am increasing and decreasing the screen size ?

hmm .. show me how it is behaving on zoom in out and why you are resizing the screen to show zoom in out
you should use zoom buttons

[khushiiagrawal]

@khushiiagrawal Again whole window getting zoomed in out

@btwshivam isn't it because i am increasing and decreasing the screen size ?

hmm .. show me how it is behaving on zoom in out and why you are resizing the screen to show zoom in out you should use zoom buttons

i was showing the control panel behavior as it is responsive, i'll attach with the treeview zoom also

[khushiiagrawal]

@khushiiagrawal Again whole window getting zoomed in out

@btwshivam isn't it because i am increasing and decreasing the screen size ?

hmm .. show me how it is behaving on zoom in out and why you are resizing the screen to show zoom in out you should use zoom buttons

Screen.Recording.2025-12-09.at.10.35.37.PM.mov

[btwshivam]

looks good but have to figureout something for less then 60 zoom. it look consaliated

[btwshivam]

can you try one thing for me.. try passing a statement if zoom out is less then 60 then double the horizontal sepration and vertical sepration also.. use memo for recalculation

[khushiiagrawal]

can you try one thing for me.. try passing a statement if zoom out is less then 60 then double the horizontal sepration and vertical sepration also.. use memo for recalculation

its done. PTAL /cc @btwshivam

Before

Screen.Recording.2025-12-09.at.11.46.23.PM.mov

---

After

Screen.Recording.2025-12-09.at.11.55.50.PM.mov

[btwshivam]

Much better right..

[khushiiagrawal]

Much better right..

yeah, right!

[btwshivam]

no you are redifining node and rank sep again use existing... it will create problem for wecs and if someone change from canvas flow then also

[btwshivam]

ok then do one thing revet last commit -- 1 thing is wecs and wds node and ranksep should be same
2 thing incease vertical more and horizontal by little in original (should be same for wecs and wds)
then use the exising heights then use this 2x formula okay or u can use 3 for less then 60%(make 3x for hozizontal and 2x for vertical when less then 60 percent)
unstanding what i am tring to say??
do this in seprate PR and make a issue. we will merge this for now.. revert the last commit

[khushiiagrawal]

ok then do one thing revet last commit

Okay @btwshivam , got your point. Will do it.
thanks!

[khushiiagrawal]

@btwshivam , I have checked everything and now the branch is at the commit with you were expecting.
thanks!

[clubanderson]

@btwshivam is this ready to go?

[btwshivam]

yes merge it next will fix in next pR

[kubestellar-prow]

LGTM label has been added.

Details

Git tree hash: 817ce3e05cfb4c5835814bcfa5c2c4ef680776a6