From 1864da4f456349829e062642d586b607bfda96cf Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Thu, 13 Mar 2025 22:03:54 +0800
Subject: [PATCH] fix: improve tab switching behavior to preserve WebGL context
 in graph viewer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Force mount inactive tabs
• Maintain WebGL context across tab switches
• Add visibility styles to TabsContent
• Update conditional rendering logic
---
 lightrag_webui/src/components/ui/Tabs.tsx   | 8 +++++---
 lightrag_webui/src/features/GraphViewer.tsx | 9 +++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/lightrag_webui/src/components/ui/Tabs.tsx b/lightrag_webui/src/components/ui/Tabs.tsx
index 5a6c3904..ae155b60 100644
--- a/lightrag_webui/src/components/ui/Tabs.tsx
+++ b/lightrag_webui/src/components/ui/Tabs.tsx
@@ -42,11 +42,13 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+      'ring-offset-background focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+      'data-[state=inactive]:invisible data-[state=active]:visible',
+      'h-full w-full',
       className
     )}
-    // We no longer force mounting of inactive tabs
-    // This prevents the Graph component from being mounted when it's not the active tab
+    // Force mounting of inactive tabs to preserve WebGL contexts
+    forceMount
     {...props}
   />
 ))
diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx
index 16801a0f..641e3c1d 100644
--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -140,8 +140,8 @@ const GraphViewer = () => {
     
     // Cleanup function when component unmounts
     return () => {
-      // If we're navigating away from the graph tab completely (not just switching tabs)
-      // we would clean up here, but for now we want to preserve the WebGL context
+      // Only log cleanup, don't actually clean up the WebGL context
+      // This allows the WebGL context to persist across tab switches
       console.log('Graph viewer cleanup')
     }
   }, [isGraphTabVisible, shouldRender, isFetching])
@@ -174,11 +174,12 @@ const GraphViewer = () => {
     [selectedNode]
   )
 
-  // Only render the SigmaContainer when the tab is visible
+  // Since TabsContent now forces mounting of all tabs, we need to conditionally render
+  // the SigmaContainer based on visibility to avoid unnecessary rendering
   return (
     <div className="relative h-full w-full">
+      {/* Only render the SigmaContainer when the tab is visible */}
       {isGraphTabVisible ? (
-        // Only render SigmaContainer when tab is visible
         <SigmaContainer
           settings={sigmaSettings}
           className="!bg-background !size-full overflow-hidden"