diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx index 53bf0a2b..4bbebbcd 100644 --- a/lightrag_webui/src/features/GraphViewer.tsx +++ b/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 () => { - // 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') + 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('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); } diff --git a/lightrag_webui/src/hooks/useLightragGraph.tsx b/lightrag_webui/src/hooks/useLightragGraph.tsx index af5ab041..5f51c234 100644 --- a/lightrag_webui/src/hooks/useLightragGraph.tsx +++ b/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]) diff --git a/lightrag_webui/src/stores/graph.ts b/lightrag_webui/src/stores/graph.ts index efff20ae..637a3845 100644 --- a/lightrag_webui/src/stores/graph.ts +++ b/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 setIsFetching: (isFetching: boolean) => void - setShouldRender: (shouldRender: boolean) => void // 搜索引擎方法 setSearchEngine: (engine: MiniSearch | null) => void @@ -122,7 +120,6 @@ const useGraphStoreBase = create()((set) => ({ moveToSelectedNode: false, isFetching: false, - shouldRender: false, // Initialize global flags graphDataFetchAttempted: false, @@ -137,7 +134,6 @@ const useGraphStoreBase = create()((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()((set) => ({ rawGraph: null, sigmaGraph: null, // to avoid other components from acccessing graph objects searchEngine: null, - moveToSelectedNode: false, - shouldRender: false + moveToSelectedNode: false }); },