Remove unused shouldRender state and related rendering control logic

lightrag_webui/src/features/GraphViewer.tsx

@@ -114,7 +114,6 @@ const GraphViewer = () => {
   const focusedNode = useGraphStore.use.focusedNode()
   const moveToSelectedNode = useGraphStore.use.moveToSelectedNode()
   const isFetching = useGraphStore.use.isFetching()
-  const shouldRender = useGraphStore.use.shouldRender() // Rendering control state
 
   // Get tab visibility
   const { isTabVisible } = useTabVisibility()
@@ -127,20 +126,19 @@ const GraphViewer = () => {
   // Handle component mount/unmount and tab visibility
   useEffect(() => {
     // When component mounts or tab becomes visible
-    if (isGraphTabVisible && !shouldRender && !isFetching && !initAttemptedRef.current) {
-      // If tab is visible but graph is not rendering, try to enable rendering
-      useGraphStore.getState().setShouldRender(true)
+    if (isGraphTabVisible && !isFetching && !initAttemptedRef.current) {
       initAttemptedRef.current = true
-      console.log('Graph viewer initialized')
+      console.log('GraphViewer is visible')
     }
 
-    // Cleanup function when component unmounts
     return () => {
+      if (!isGraphTabVisible) {
         // 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')
+        console.log('GraphViewer is invisible, WebGL context is persisting')
       }
-  }, [isGraphTabVisible, shouldRender, isFetching])
+    }
+  }, [isGraphTabVisible, isFetching])
 
   // Initialize sigma settings once on component mount
   // All dynamic settings will be updated in GraphControl using useSetSettings
@@ -151,13 +149,15 @@ const GraphViewer = () => {
   // Clean up sigma instance when component unmounts
   useEffect(() => {
     return () => {
+      // TAB is mount twice in vite dev mode, this is a workaround
+
       const sigma = useGraphStore.getState().sigmaInstance;
       if (sigma) {
         try {
-          // 销毁sigma实例，这会自动清理WebGL上下文
+          // Destroy sigma，and clear WebGL context
           sigma.kill();
           useGraphStore.getState().setSigmaInstance(null);
-          console.log('Cleared sigma instance on unmount');
+          console.log('Cleared sigma instance on Graphviewer unmount');
         } catch (error) {
           console.error('Error cleaning up sigma instance:', error);
         }

lightrag_webui/src/hooks/useLightragGraph.tsx

@@ -260,7 +260,6 @@ const useLightrangeGraph = () => {
 
       const state = useGraphStore.getState()
       state.setIsFetching(true)
-      state.setShouldRender(false) // Disable rendering during data loading
 
       // Clear selection and highlighted nodes before fetching new graph
       state.clearSelection()
@@ -305,8 +304,6 @@ const useLightrangeGraph = () => {
         // Reset camera view
         state.setMoveToSelectedNode(true)
 
-        // Enable rendering if the tab is visible
-        state.setShouldRender(isGraphTabVisible)
         state.setIsFetching(false)
       }).catch((error) => {
         console.error('Error fetching graph data:', error)
@@ -314,7 +311,6 @@ const useLightrangeGraph = () => {
         // Reset state on error
         const state = useGraphStore.getState()
         state.setIsFetching(false)
-        state.setShouldRender(isGraphTabVisible)
         dataLoadedRef.current = false
         fetchInProgressRef.current = false
         state.setGraphDataFetchAttempted(false)
@@ -326,15 +322,7 @@ const useLightrangeGraph = () => {
   useEffect(() => {
     // When tab becomes visible
     if (isGraphTabVisible) {
-      // If we have data, enable rendering
-      if (rawGraph) {
-        useGraphStore.getState().setShouldRender(true)
-      }
-
       // We no longer reset the fetch attempted flag here to prevent continuous API calls
-    } else {
-      // When tab becomes invisible, disable rendering
-      useGraphStore.getState().setShouldRender(false)
     }
   }, [isGraphTabVisible, rawGraph])
 

lightrag_webui/src/stores/graph.ts

@@ -74,7 +74,6 @@ interface GraphState {
 
   moveToSelectedNode: boolean
   isFetching: boolean
-  shouldRender: boolean
 
   // Global flags to track data fetching attempts
   graphDataFetchAttempted: boolean
@@ -95,7 +94,6 @@ interface GraphState {
   setAllDatabaseLabels: (labels: string[]) => void
   fetchAllDatabaseLabels: () => Promise<void>
   setIsFetching: (isFetching: boolean) => void
-  setShouldRender: (shouldRender: boolean) => void
 
   // 搜索引擎方法
   setSearchEngine: (engine: MiniSearch | null) => void
@@ -122,7 +120,6 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
 
   moveToSelectedNode: false,
   isFetching: false,
-  shouldRender: false,
 
   // Initialize global flags
   graphDataFetchAttempted: false,
@@ -137,7 +134,6 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
 
 
   setIsFetching: (isFetching: boolean) => set({ isFetching }),
-  setShouldRender: (shouldRender: boolean) => set({ shouldRender }),
   setSelectedNode: (nodeId: string | null, moveToSelectedNode?: boolean) =>
     set({ selectedNode: nodeId, moveToSelectedNode }),
   setFocusedNode: (nodeId: string | null) => set({ focusedNode: nodeId }),
@@ -159,8 +155,7 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
       rawGraph: null,
       sigmaGraph: null,  // to avoid other components from acccessing graph objects
       searchEngine: null,
-      moveToSelectedNode: false,
-      shouldRender: false
+      moveToSelectedNode: false
     });
   },