fixed the issue

Signed-off-by: antedotee <[email protected]>

Author: antedotee

frontend/src/components/Layout.tsx

@@ -1,27 +1,11 @@
-import { Suspense, lazy, useEffect, useState, useCallback, createContext, useContext } from 'react';
+import { Suspense, lazy, useEffect, useState } from 'react';
 import { Outlet, ScrollRestoration, useLocation } from 'react-router-dom';
 import { Tooltip } from '@mui/material';
 import Header from './Header';
 import useTheme from '../stores/themeStore';
 import { motion, AnimatePresence } from 'framer-motion';
 import getThemeStyles from '../lib/theme-utils';
 
-// Context for tree view sidebar state
-interface TreeViewSidebarContextType {
-  isTreeViewSidebarCollapsed: boolean;
-  toggleTreeViewSidebar: () => void;
-}
-
-const TreeViewSidebarContext = createContext<TreeViewSidebarContextType | undefined>(undefined);
-
-export const useTreeViewSidebar = () => {
-  const context = useContext(TreeViewSidebarContext);
-  if (!context) {
-    throw new Error('useTreeViewSidebar must be used within a TreeViewSidebarProvider');
-  }
-  return context;
-};
-
 // Lazy load less critical components
 const Menu = lazy(() => import('./menu/Menu'));
 const Footer = lazy(() => import('./Footer'));
@@ -78,7 +62,6 @@ export function Layout() {
   const [isLoading, setIsLoading] = useState(true);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [isTreeViewSidebarCollapsed, setIsTreeViewSidebarCollapsed] = useState(true);
   const location = useLocation();
   const { theme } = useTheme();
   const isDark = theme === 'dark';
@@ -107,11 +90,6 @@ export function Layout() {
     setIsSidebarCollapsed(!isSidebarCollapsed);
   };
 
-  // Toggle tree view sidebar collapsed state
-  const toggleTreeViewSidebar = useCallback(() => {
-    setIsTreeViewSidebarCollapsed(prev => !prev);
-  }, []);
-
   // Toggle mobile menu state
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
@@ -288,16 +266,9 @@ export function Layout() {
           >
             <Suspense fallback={<LoadingPlaceholder />}>
               <PageTransition>
-                <TreeViewSidebarContext.Provider
-                  value={{
-                    isTreeViewSidebarCollapsed,
-                    toggleTreeViewSidebar,
-                  }}
-                >
-                  <div className="mx-auto max-w-full">
-                    <Outlet />
-                  </div>
-                </TreeViewSidebarContext.Provider>
+                <div className="mx-auto max-w-full">
+                  <Outlet />
+                </div>
               </PageTransition>
             </Suspense>
           </motion.main>

frontend/src/components/TreeViewComponent.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useRef, useEffect, memo } from 'react';
 import { Box, Alert, Snackbar } from '@mui/material';
 import useTheme from '../stores/themeStore';
-import { useTreeViewSidebar } from './Layout';
 import ContextDropdown from './ContextDropdown';
 import CreateOptions from './CreateOptions';
 import TreeViewHeader from './treeView/TreeViewHeader';
@@ -25,7 +24,6 @@ interface TreeViewComponentProps {
 
 const TreeViewComponent = memo<TreeViewComponentProps>(props => {
   const theme = useTheme(state => state.theme);
-  const { isTreeViewSidebarCollapsed, toggleTreeViewSidebar } = useTreeViewSidebar();
 
   // State management
   const [showCreateOptions, setShowCreateOptions] = useState(false);
@@ -39,6 +37,7 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     groupItems?: TreeResourceItem[];
     initialTab?: number;
   } | null>(null);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
   const [filteredContext, setFilteredContext] = useState<string>('all');
@@ -83,7 +82,7 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     getDescendantEdges,
   } = useTreeViewData({
     filteredContext,
-    isCollapsed: isTreeViewSidebarCollapsed,
+    isCollapsed,
     isExpanded,
     onNodeSelect: handleNodeSelect,
     onMenuOpen: handleMenuOpen || (() => {}),
@@ -143,6 +142,11 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
     setActiveOption('option1');
   }, []);
 
+  // Collapse/Expand handlers
+  const handleToggleCollapse = useCallback(() => {
+    setIsCollapsed(prev => !prev);
+  }, []);
+
   const handleExpandAll = useCallback(() => {
     setIsExpanded(true);
   }, []);
@@ -241,10 +245,10 @@ const TreeViewComponent = memo<TreeViewComponentProps>(props => {
             filteredContext={filteredContext}
             onCreateWorkload={handleCreateWorkloadClick}
             onResourceDataChange={handleResourceDataChange}
-            onToggleCollapse={toggleTreeViewSidebar}
+            onToggleCollapse={handleToggleCollapse}
             onExpandAll={handleExpandAll}
             onCollapseAll={handleCollapseAll}
-            isCollapsed={isTreeViewSidebarCollapsed}
+            isCollapsed={isCollapsed}
             containerRef={containerRef}
             resourceFilters={resourceFilters}
             onResourceFiltersChange={handleResourceFiltersChange}

frontend/src/components/wds_topology/ZoomControls.tsx

@@ -73,10 +73,17 @@ export const ZoomControls = memo<ZoomControlsProps>(
     const [zoomLevel, setZoomLevel] = useState<number>(120);
     const [presetMenuAnchor, setPresetMenuAnchor] = useState<null | HTMLElement>(null);
     const [hoveredButton, setHoveredButton] = useState<string | null>(null);
-    const [showControls, setShowControls] = useState<boolean>(true);
+    const [showControls, setShowControls] = useState<boolean>(() => {
+      const saved = localStorage.getItem('wds-show-controls');
+      return saved ? JSON.parse(saved) : false; // Default to false (controls hidden)
+    });
 
     const toggleControls = () => {
-      setShowControls(prev => !prev);
+      setShowControls(prev => {
+        const newValue = !prev;
+        localStorage.setItem('wds-show-controls', JSON.stringify(newValue));
+        return newValue;
+      });
     };
     const { setZoom } = useZoomStore();
     const { edgeType, setEdgeType } = useEdgeTypeStore();