🐛fix: update edge styles on theme toggle in WecsTopology #2394

AAdIprog · 2026-01-14T19:38:13Z

Description

This PR addresses a visual consistency issue in the WECS topology view where edge styles (colors, shadows, markers) would not update when the application theme was toggled between light and dark modes. Previously, edges retained the style of the theme that was active when they were first created.

Related Issue

Fixes #2270

Changes Made

Imported useTreeViewEdges custom hook in WecsTopology.tsx to access theme-aware edge styling logic.
Added a useEffect hook in WecsTopology.tsx that triggers on theme changes.
Implemented logic to update existing edge styles dynamically using updateEdgeStyles when the theme changes, ensuring immediate visual feedback without requiring a graph refresh.
Fixed a TypeScript type assertion for the theme prop to ensure compatibility.

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.

Video Demonstration:

[

Screen.Recording.2026-01-14.at.1.27.10.PM.mov

]

Additional Notes

This fix leverages the existing updateEdgeStyles function from TreeViewEdges to ensure consistent behavior across different topology views.

github-actions · 2026-01-14T19:38:23Z

Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request.

Before your PR can be merged, please ensure:

✅ DCO Sign-off - All commits must be signed off with git commit -s to certify the Developer Certificate of Origin

✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

Getting Started with KubeStellar:

📦 Quick Start
📖 Documentation
🎬 YouTube - Getting Started & Contributing

Contributor Resources:

🌟 Help KubeStellar Grow - We Need Adopters!

Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes:

📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction!

A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack!

kubestellar-prow · 2026-01-14T19:38:24Z

Hi @AAdIprog. 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 fixes an issue where edge styles in the WECS topology view would not update when toggling between light and dark themes. Previously, edges retained the style of the theme active when they were first created.

Changes:

Imported useTreeViewEdges hook to access theme-aware edge styling logic
Added a useEffect hook that triggers on theme changes to update existing edge styles
Applied minor indentation formatting fixes

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

Copilot · 2026-01-14T19:40:51Z

frontend/src/components/WecsTopology.tsx

+
+  // Update edge styles when theme changes
+  useEffect(() => {


The hook useTreeViewEdges is called unconditionally but creates memoized callbacks that depend on theme and edgeType. However, the updateEdgeStyles function is included in the dependency array of the useEffect at line 619, which could cause the effect to run more frequently than necessary. Since updateEdgeStyles is recreated when edgeType changes (due to being memoized with edgeType in TreeViewEdges.tsx line 157), this will trigger the useEffect even when only edgeType changes, not just theme. Consider either: (1) removing updateEdgeStyles from the dependency array and only depending on theme, or (2) wrapping the updateEdgeStyles call in a conditional check to ensure it only updates when theme changes.

Suggested change

// Update edge styles when theme changes

useEffect(() => {

const prevThemeRef = useRef(theme);

// Update edge styles when theme changes

useEffect(() => {

if (prevThemeRef.current === theme) {

return;

}

prevThemeRef.current = theme;

Copilot · 2026-01-14T19:40:52Z

frontend/src/components/WecsTopology.tsx

+  const { updateEdgeStyles } = useTreeViewEdges({ theme: theme as 'light' | 'dark' });
+


The type assertion theme as 'light' | 'dark' is used because useTheme returns theme: string (line 4 in themeStore.ts), but useTreeViewEdges expects theme: 'light' | 'dark'. This type assertion bypasses TypeScript's type safety. Consider updating the ThemeStateType interface in themeStore.ts to define theme: 'light' | 'dark' instead of theme: string to eliminate the need for type assertions and improve type safety throughout the codebase.

Suggested change

const { updateEdgeStyles } = useTreeViewEdges({ theme: theme as 'light' | 'dark' });

const normalizedTheme: 'light' | 'dark' = theme === 'dark' ? 'dark' : 'light';

const { updateEdgeStyles } = useTreeViewEdges({ theme: normalizedTheme });

AAdIprog · 2026-01-14T19:43:10Z

@Nupurshivani Can you check this once again as there were some issues with the previous pull request

kubestellar-prow · 2026-01-18T12:32:55Z

LGTM label has been added.

Details

Git tree hash: 53436a2745566e1ffbe081fa05802b62726e4cd3

btwshivam · 2026-01-18T12:33:31Z

/approve
/lgtm
/ok-to-test

…stellar#2398) (kubestellar#2399) Signed-off-by: hiirrxnn <hiren2004sharma@gmail.com>

…lusters" and "recent activity" (kubestellar#2391) * feat(ui): update cluster icons to 'Network' representation for better semantics Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com> * chore: format code with Prettier Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com> * fix(ui): add missing dependency to useCallback in Dashboard metrics Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com> * chore: update CI workflow to use Node 20 Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com> * chore(tests): fix formatting in ContextDropdown.test.tsx for CI check Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com> --------- Signed-off-by: Arnav Gogia <arnavgogia404@gmail.com>

Signed-off-by: AAdIprog <aadishah132@gmail.com>

kubestellar-prow · 2026-01-19T10:19:24Z

New changes are detected. LGTM label has been removed.

clubanderson · 2026-01-19T14:42:48Z

/approve

kubestellar-prow · 2026-01-19T14:42:53Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: btwshivam, clubanderson

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,clubanderson]

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

Copilot AI review requested due to automatic review settings January 14, 2026 19:38

github-project-automation bot added this to KubeStellar UI Project Jan 14, 2026

github-project-automation bot moved this to In Progress in KubeStellar UI Project Jan 14, 2026

kubestellar-prow bot added the dco-signoff: no Indicates the PR's author has not signed the DCO. label Jan 14, 2026

github-actions bot added the frontend label Jan 14, 2026

kubestellar-prow bot added needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Jan 14, 2026

Copilot started reviewing on behalf of AAdIprog January 14, 2026 19:38 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

AAdIprog force-pushed the fix/edge-styles-theme-toggle branch from ca7f95f to 1396c2e Compare January 14, 2026 19:41

kubestellar-prow bot added dco-signoff: yes Indicates the PR's author has signed the DCO. and removed dco-signoff: no Indicates the PR's author has not signed the DCO. labels Jan 14, 2026

btwshivam approved these changes Jan 18, 2026

View reviewed changes

kubestellar-prow bot assigned btwshivam Jan 18, 2026

kubestellar-prow bot added the lgtm Indicates that a PR is ready to be merged. label Jan 18, 2026

hiirrxnn and others added 3 commits January 19, 2026 15:23

fix(e2e): increase timeout for context dialog test to 30s (fixes kube…

81410bf

…stellar#2398) (kubestellar#2399) Signed-off-by: hiirrxnn <hiren2004sharma@gmail.com>

fix: update edge styles on theme toggle in WecsTopology

4ea8a61

Signed-off-by: AAdIprog <aadishah132@gmail.com>

AAdIprog force-pushed the fix/edge-styles-theme-toggle branch from 1396c2e to 4ea8a61 Compare January 19, 2026 10:19

kubestellar-prow bot removed the lgtm Indicates that a PR is ready to be merged. label Jan 19, 2026

kubestellar-prow bot requested a review from btwshivam January 19, 2026 10:19

kubestellar-prow bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Jan 19, 2026

github-actions bot added ci size/S Denotes a PR that changes 10-29 lines, ignoring generated files. tests and removed size/M Denotes a PR that changes 30-99 lines, ignoring generated files. labels Jan 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛fix: update edge styles on theme toggle in WecsTopology #2394

🐛fix: update edge styles on theme toggle in WecsTopology #2394

AAdIprog commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

AAdIprog commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 18, 2026

Uh oh!

btwshivam commented Jan 18, 2026

Uh oh!

kubestellar-prow bot commented Jan 19, 2026

Uh oh!

clubanderson commented Jan 19, 2026

Uh oh!

kubestellar-prow bot commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

		const { updateEdgeStyles } = useTreeViewEdges({ theme: theme as 'light' \| 'dark' });

-  const { updateEdgeStyles } = useTreeViewEdges({ theme: theme as 'light' | 'dark' });
+  const normalizedTheme: 'light' | 'dark' = theme === 'dark' ? 'dark' : 'light';
+  const { updateEdgeStyles } = useTreeViewEdges({ theme: normalizedTheme });

🐛fix: update edge styles on theme toggle in WecsTopology #2394

Are you sure you want to change the base?

🐛fix: update edge styles on theme toggle in WecsTopology #2394

Conversation

AAdIprog commented Jan 14, 2026

Description

Related Issue

Changes Made

Checklist

Additional Notes

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

AAdIprog commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 18, 2026

Uh oh!

btwshivam commented Jan 18, 2026

Uh oh!

kubestellar-prow bot commented Jan 19, 2026

Uh oh!

clubanderson commented Jan 19, 2026

Uh oh!

kubestellar-prow bot commented Jan 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants