refactor(treeView): implement fixed node styling

[khushiiagrawal]

Description

This PR refactors the TreeView component to implement fixed node styling, replacing the previous dynamic zoom-based scaling system. The changes simplify the codebase by removing zoom-dependent calculations and establishing consistent, fixed dimensions for tree view nodes across all zoom levels.

Related Issue

Fixes #2276

Changes Made

• Refactored TreeViewNodes component - Removed dependency on useZoomStore and replaced dynamic getScaledNodeStyle() calls with fixed node styling constants
• Updated useTreeViewData hook - Removed zoom-based scaling calculations from layout engine (dagre) and replaced with fixed node dimensions (146px × 30px)
• Simplified NodeLabel component - Replaced dynamic width/height calculations based on zoom with fixed values for consistent rendering
• Removed zoom store dependencies - Cleaned up dependency arrays in useCallback hooks to remove unused currentZoom and getScaledNodeStyle references
• Standardized node dimensions - Established consistent fixed dimensions

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)

Untitled.mov

Additional Notes

[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]

@btwshivam PTAL.

[Copilot]

Pull request overview

This PR refactors the TreeView component to use fixed node styling instead of dynamic zoom-based scaling. The changes remove dependencies on the zoom store and simplify the codebase by establishing consistent, hardcoded dimensions (146px × 30px) for tree view nodes.

Key changes:

• Removed zoom store dependencies from TreeView components and replaced dynamic scaling calculations with fixed dimensions
• Updated layout engine to use fixed node dimensions instead of zoom-based scaling factors
• Simplified NodeLabel component by replacing dynamic width/height calculations with fixed pixel values

Reviewed changes

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

File	Description
frontend/src/components/treeView/TreeViewNodes.tsx	Removed zoom store import and replaced getScaledNodeStyle() calls with a fixedNodeStyle object containing hardcoded dimensions; cleaned up dependency arrays
frontend/src/components/treeView/hooks/useTreeViewData.ts	Replaced zoom-based scaling calculations in layout engine with fixed NODE_WIDTH (146) and NODE_HEIGHT (30) constants; removed zoom store import
frontend/src/components/wds_topology/NodeLabel.tsx	Replaced dynamic min/max width/height calculations based on iconSize with fixed pixel values; removed iconSize from dependency array

---

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

[onkar717]

/ok-to-test

[btwshivam]

good Job that looks smooth @khushiiagrawal

[btwshivam]

Font size of 6px is extremely small This is barely readable on most screens. make it 10-12px.

[btwshivam]

just a suggestion before merge please check is there now a mismatch between React Flow's zoom and node sizes?

[khushiiagrawal]

just a suggestion before merge please check is there now a mismatch between React Flow's zoom and node sizes?

@btwshivam I checked the React Flow zoom and fixed node sizes.
React Flow's zoom applies a CSS transform to the entire viewport, so everything scales together. The fixed node dimensions are base sizes for layout calculations and React Flow's zoom is visual only, so there's no mismatch.

Thanks!

[btwshivam]

Okay.. Have to tested with 12px font? ensuure nothing breaks.. next we need to fix edegs

[btwshivam]

/ok-to-test
/lgtm
/approve

[kubestellar-prow]

LGTM label has been added.

Details

Git tree hash: 1c222ccf23f88809d596222a5026881fbf3b079d

[kubestellar-prow]

[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

Details

Needs approval from an approver in each of these files:

• OWNERS [btwshivam]

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