fix: improve tab switching behavior to preserve WebGL context in graph viewer

• 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

@@ -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
+    // Force mounting of inactive tabs to preserve WebGL contexts
-    // This prevents the Graph component from being mounted when it's not the active tab
+    forceMount
     {...props}
   />
 ))

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)
+      // Only log cleanup, don't actually clean up the WebGL context
-      // we would clean up here, but for now we want to preserve 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"