Avoid graphics flickering during node operations

2025-03-14 23:25:38 +08:00
parent 1ae65c9272
commit 5decd03e2e
7 changed files with 300 additions and 121 deletions
--- a/lightrag_webui/src/components/graph/FocusOnNode.tsx
+++ b/lightrag_webui/src/components/graph/FocusOnNode.tsx
@@ -13,23 +13,37 @@ const FocusOnNode = ({ node, move }: { node: string | null; move?: boolean }) =>
   * When the selected item changes, highlighted the node and center the camera on it.
   */
  useEffect(() => {
+    const graph = sigma.getGraph();
+    
    if (move) {
-      if (node) {
-        sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
-        gotoNode(node)
+      if (node && graph.hasNode(node)) {
+        try {
+          graph.setNodeAttribute(node, 'highlighted', true);
+          gotoNode(node);
+        } catch (error) {
+          console.error('Error focusing on node:', error);
+        }
      } else {
        // If no node is selected but move is true, reset to default view
-        sigma.setCustomBBox(null)
-        sigma.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 0 })
+        sigma.setCustomBBox(null);
+        sigma.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 0 });
+      }
+      useGraphStore.getState().setMoveToSelectedNode(false);
+    } else if (node && graph.hasNode(node)) {
+      try {
+        graph.setNodeAttribute(node, 'highlighted', true);
+      } catch (error) {
+        console.error('Error highlighting node:', error);
      }
-      useGraphStore.getState().setMoveToSelectedNode(false)
-    } else if (node) {
-      sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
    }

    return () => {
-      if (node) {
-        sigma.getGraph().setNodeAttribute(node, 'highlighted', false)
+      if (node && graph.hasNode(node)) {
+        try {
+          graph.setNodeAttribute(node, 'highlighted', false);
+        } catch (error) {
+          console.error('Error cleaning up node highlight:', error);
+        }
      }
    }
  }, [node, move, sigma, gotoNode])
--- a/lightrag_webui/src/components/graph/GraphControl.tsx
+++ b/lightrag_webui/src/components/graph/GraphControl.tsx
@@ -1,5 +1,5 @@
-import { useLoadGraph, useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core'
-import Graph from 'graphology'
+import { useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core'
+import { AbstractGraph } from 'graphology-types'
 // import { useLayoutCircular } from '@react-sigma/layout-circular'
 import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
 import { useEffect } from 'react'
@@ -25,7 +25,6 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
  const sigma = useSigma<NodeType, EdgeType>()
  const registerEvents = useRegisterEvents<NodeType, EdgeType>()
  const setSettings = useSetSettings<NodeType, EdgeType>()
-  const loadGraph = useLoadGraph<NodeType, EdgeType>()

  const maxIterations = useSettingsStore.use.graphLayoutMaxIterations()
  const { assign: assignLayout } = useLayoutForceAtlas2({
@@ -45,14 +44,45 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })

  /**
   * When component mount or maxIterations changes
-   * => load the graph and apply layout
+   * => ensure graph reference and apply layout
   */
  useEffect(() => {
-    if (sigmaGraph) {
-      loadGraph(sigmaGraph as unknown as Graph<NodeType, EdgeType>)
-      assignLayout()
+    if (sigmaGraph && sigma) {
+      // 确保 sigma 实例内部的 graph 引用被更新
+      try {
+        // 尝试直接设置 sigma 实例的 graph 引用
+        if (typeof sigma.setGraph === 'function') {
+          sigma.setGraph(sigmaGraph as unknown as AbstractGraph<NodeType, EdgeType>);
+          console.log('Directly set graph on sigma instance');
+        } else {
+          // 如果 setGraph 方法不存在，尝试直接设置 graph 属性
+          (sigma as any).graph = sigmaGraph;
+          console.log('Set graph property on sigma instance');
+        }
+      } catch (error) {
+        console.error('Error setting graph on sigma instance:', error);
+      }
+      
+      // 应用布局
+      assignLayout();
+      console.log('Layout applied to graph');
    }
-  }, [assignLayout, loadGraph, sigmaGraph, maxIterations])
+  }, [sigma, sigmaGraph, assignLayout, maxIterations])
+  
+  /**
+   * Ensure the sigma instance is set in the store
+   * This provides a backup in case the instance wasn't set in GraphViewer
+   */
+  useEffect(() => {
+    if (sigma) {
+      // Double-check that the store has the sigma instance
+      const currentInstance = useGraphStore.getState().sigmaInstance;
+      if (!currentInstance) {
+        console.log('Setting sigma instance from GraphControl (backup)');
+        useGraphStore.getState().setSigmaInstance(sigma);
+      }
+    }
+  }, [sigma]);

  /**
   * When component mount
@@ -138,14 +168,18 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
          const _focusedNode = focusedNode || selectedNode
          const _focusedEdge = focusedEdge || selectedEdge

-          if (_focusedNode) {
-            if (node === _focusedNode || graph.neighbors(_focusedNode).includes(node)) {
-              newData.highlighted = true
-              if (node === selectedNode) {
-                newData.borderColor = Constants.nodeBorderColorSelected
+          if (_focusedNode && graph.hasNode(_focusedNode)) {
+            try {
+              if (node === _focusedNode || graph.neighbors(_focusedNode).includes(node)) {
+                newData.highlighted = true
+                if (node === selectedNode) {
+                  newData.borderColor = Constants.nodeBorderColorSelected
+                }
              }
+            } catch (error) {
+              console.error('Error in nodeReducer:', error);
            }
-          } else if (_focusedEdge) {
+          } else if (_focusedEdge && graph.hasEdge(_focusedEdge)) {
            if (graph.extremities(_focusedEdge).includes(node)) {
              newData.highlighted = true
              newData.size = 3
@@ -173,21 +207,28 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
        if (!disableHoverEffect) {
          const _focusedNode = focusedNode || selectedNode

-          if (_focusedNode) {
-            if (hideUnselectedEdges) {
-              if (!graph.extremities(edge).includes(_focusedNode)) {
-                newData.hidden = true
-              }
-            } else {
-              if (graph.extremities(edge).includes(_focusedNode)) {
-                newData.color = Constants.edgeColorHighlighted
+          if (_focusedNode && graph.hasNode(_focusedNode)) {
+            try {
+              if (hideUnselectedEdges) {
+                if (!graph.extremities(edge).includes(_focusedNode)) {
+                  newData.hidden = true
+                }
+              } else {
+                if (graph.extremities(edge).includes(_focusedNode)) {
+                  newData.color = Constants.edgeColorHighlighted
+                }
              }
+            } catch (error) {
+              console.error('Error in edgeReducer:', error);
            }
          } else {
-            if (focusedEdge || selectedEdge) {
-              if (edge === selectedEdge) {
+            const _selectedEdge = selectedEdge && graph.hasEdge(selectedEdge) ? selectedEdge : null;
+            const _focusedEdge = focusedEdge && graph.hasEdge(focusedEdge) ? focusedEdge : null;
+            
+            if (_selectedEdge || _focusedEdge) {
+              if (edge === _selectedEdge) {
                newData.color = Constants.edgeColorSelected
-              } else if (edge === focusedEdge) {
+              } else if (edge === _focusedEdge) {
                newData.color = Constants.edgeColorHighlighted
              } else if (hideUnselectedEdges) {
                newData.hidden = true
--- a/lightrag_webui/src/components/graph/PropertiesView.tsx
+++ b/lightrag_webui/src/components/graph/PropertiesView.tsx
@@ -90,22 +90,46 @@ const refineNodeProperties = (node: RawNodeType): NodeType => {
  const relationships = []

  if (state.sigmaGraph && state.rawGraph) {
-    for (const edgeId of state.sigmaGraph.edges(node.id)) {
-      const edge = state.rawGraph.getEdge(edgeId, true)
-      if (edge) {
-        const isTarget = node.id === edge.source
-        const neighbourId = isTarget ? edge.target : edge.source
-        const neighbour = state.rawGraph.getNode(neighbourId)
-        if (neighbour) {
-          relationships.push({
-            type: 'Neighbour',
-            id: neighbourId,
-            label: neighbour.properties['entity_id'] ? neighbour.properties['entity_id'] : neighbour.labels.join(', ')
-          })
+    try {
+      // 检查节点是否还存在
+      if (!state.sigmaGraph.hasNode(node.id)) {
+        return {
+          ...node,
+          relationships: []
        }
      }
+
+      // 获取所有边
+      const edges = state.sigmaGraph.edges(node.id)
+      
+      // 处理每条边
+      for (const edgeId of edges) {
+        // 检查边是否还存在
+        if (!state.sigmaGraph.hasEdge(edgeId)) continue;
+
+        const edge = state.rawGraph.getEdge(edgeId, true)
+        if (edge) {
+          const isTarget = node.id === edge.source
+          const neighbourId = isTarget ? edge.target : edge.source
+
+          // 检查邻居节点是否存在
+          if (!state.sigmaGraph.hasNode(neighbourId)) continue;
+
+          const neighbour = state.rawGraph.getNode(neighbourId)
+          if (neighbour) {
+            relationships.push({
+              type: 'Neighbour',
+              id: neighbourId,
+              label: neighbour.properties['entity_id'] ? neighbour.properties['entity_id'] : neighbour.labels.join(', ')
+            })
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error refining node properties:', error)
    }
  }
+
  return {
    ...node,
    relationships
@@ -114,8 +138,34 @@ const refineNodeProperties = (node: RawNodeType): NodeType => {

 const refineEdgeProperties = (edge: RawEdgeType): EdgeType => {
  const state = useGraphStore.getState()
-  const sourceNode = state.rawGraph?.getNode(edge.source)
-  const targetNode = state.rawGraph?.getNode(edge.target)
+  let sourceNode: RawNodeType | undefined = undefined
+  let targetNode: RawNodeType | undefined = undefined
+
+  if (state.sigmaGraph && state.rawGraph) {
+    try {
+      // 检查边是否还存在
+      if (!state.sigmaGraph.hasEdge(edge.id)) {
+        return {
+          ...edge,
+          sourceNode: undefined,
+          targetNode: undefined
+        }
+      }
+
+      // 检查源节点是否存在
+      if (state.sigmaGraph.hasNode(edge.source)) {
+        sourceNode = state.rawGraph.getNode(edge.source)
+      }
+
+      // 检查目标节点是否存在
+      if (state.sigmaGraph.hasNode(edge.target)) {
+        targetNode = state.rawGraph.getNode(edge.target)
+      }
+    } catch (error) {
+      console.error('Error refining edge properties:', error)
+    }
+  }
+
  return {
    ...edge,
    sourceNode,
--- a/lightrag_webui/src/contexts/TabVisibilityProvider.tsx
+++ b/lightrag_webui/src/contexts/TabVisibilityProvider.tsx
@@ -15,16 +15,22 @@ export const TabVisibilityProvider: React.FC<TabVisibilityProviderProps> = ({ ch
  // Get current tab from settings store
  const currentTab = useSettingsStore.use.currentTab();

-  // Initialize visibility state with current tab as visible
+  // Initialize visibility state with all tabs visible
  const [visibleTabs, setVisibleTabs] = useState<Record<string, boolean>>(() => ({
-    [currentTab]: true
+    'documents': true,
+    'knowledge-graph': true,
+    'retrieval': true,
+    'api': true
  }));

-  // Update visibility when current tab changes
+  // Keep all tabs visible when current tab changes
  useEffect(() => {
    setVisibleTabs((prev) => ({
      ...prev,
-      [currentTab]: true
+      'documents': true,
+      'knowledge-graph': true,
+      'retrieval': true,
+      'api': true
    }));
  }, [currentTab]);

--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
+import { useEffect, useLayoutEffect, useState, useCallback, useMemo, useRef } from 'react'
 import { useTabVisibility } from '@/contexts/useTabVisibility'
 // import { MiniMap } from '@react-sigma/minimap'
 import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
@@ -148,6 +148,49 @@ const GraphViewer = () => {
    setSigmaSettings(defaultSigmaSettings)
  }, [])
  
+  // Clean up sigma instance when component unmounts
+  useEffect(() => {
+    return () => {
+      // Clear the sigma instance when component unmounts
+      useGraphStore.getState().setSigmaInstance(null);
+      console.log('Cleared sigma instance on unmount');
+    };
+  }, []);
+  
+  // Get the sigmaGraph from the store
+  const sigmaGraph = useGraphStore.use.sigmaGraph();
+  
+  // Set the sigma instance in the graph store when it's available
+  // Using useLayoutEffect to ensure this runs before child components need the instance
+  useLayoutEffect(() => {
+    if (sigmaRef.current?.sigma) {
+      const instance = sigmaRef.current.sigma;
+      
+      // Get the sigma instance from the ref and store it
+      console.log('Setting sigma instance in graph store (layout effect)');
+      useGraphStore.getState().setSigmaInstance(instance);
+      
+      // If we also have a graph, bind it to the sigma instance
+      if (sigmaGraph) {
+        try {
+          // Try to set the graph on the sigma instance
+          if (typeof instance.setGraph === 'function') {
+            instance.setGraph(sigmaGraph);
+            console.log('Directly set graph on sigma instance in GraphViewer');
+          } else {
+            // If setGraph method doesn't exist, try to set the graph property directly
+            (instance as any).graph = sigmaGraph;
+            console.log('Set graph property on sigma instance in GraphViewer');
+          }
+        } catch (error) {
+          console.error('Error setting graph on sigma instance in GraphViewer:', error);
+        }
+      }
+    }
+    // We want this to run when either the ref or the graph changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sigmaRef.current, sigmaGraph]);
+
  const onSearchFocus = useCallback((value: GraphSearchOption | null) => {
    if (value === null) useGraphStore.getState().setFocusedNode(null)
    else if (value.type === 'nodes') useGraphStore.getState().setFocusedNode(value.id)
@@ -167,62 +210,51 @@ const GraphViewer = () => {
    [selectedNode]
  )

-  // Since TabsContent now forces mounting of all tabs, we need to conditionally render
-  // the SigmaContainer based on visibility to avoid unnecessary rendering
+  // Always render SigmaContainer but control its visibility with CSS
  return (
    <div className="relative h-full w-full">
-      {/* Only render the SigmaContainer when the tab is visible */}
-      {isGraphTabVisible ? (
-        <SigmaContainer
-          settings={sigmaSettings}
-          className="!bg-background !size-full overflow-hidden"
-          ref={sigmaRef}
-        >
-          <GraphControl />
+      <SigmaContainer
+        settings={sigmaSettings}
+        className="!bg-background !size-full overflow-hidden"
+        ref={sigmaRef}
+      >
+        <GraphControl />

-          {enableNodeDrag && <GraphEvents />}
+        {enableNodeDrag && <GraphEvents />}

-          <FocusOnNode node={autoFocusedNode} move={moveToSelectedNode} />
+        <FocusOnNode node={autoFocusedNode} move={moveToSelectedNode} />

-          <div className="absolute top-2 left-2 flex items-start gap-2">
-            <GraphLabels />
-            {showNodeSearchBar && (
-              <GraphSearch
-                value={searchInitSelectedNode}
-                onFocus={onSearchFocus}
-                onChange={onSearchSelect}
-              />
-            )}
-          </div>
-
-          <div className="bg-background/60 absolute bottom-2 left-2 flex flex-col rounded-xl border-2 backdrop-blur-lg">
-            <Settings />
-            <ZoomControl />
-            <LayoutsControl />
-            <FullScreenControl />
-            {/* <ThemeToggle /> */}
-          </div>
-
-          {showPropertyPanel && (
-            <div className="absolute top-2 right-2">
-              <PropertiesView />
-            </div>
+        <div className="absolute top-2 left-2 flex items-start gap-2">
+          <GraphLabels />
+          {showNodeSearchBar && (
+            <GraphSearch
+              value={searchInitSelectedNode}
+              onFocus={onSearchFocus}
+              onChange={onSearchSelect}
+            />
          )}
-
-          {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
-            <MiniMap width="100px" height="100px" />
-          </div> */}
-
-          <SettingsDisplay />
-        </SigmaContainer>
-      ) : (
-        // Placeholder when tab is not visible
-        <div className="flex h-full w-full items-center justify-center">
-          <div className="text-center text-muted-foreground">
-            {/* Placeholder content */}
-          </div>
        </div>
-      )}
+
+        <div className="bg-background/60 absolute bottom-2 left-2 flex flex-col rounded-xl border-2 backdrop-blur-lg">
+          <Settings />
+          <ZoomControl />
+          <LayoutsControl />
+          <FullScreenControl />
+          {/* <ThemeToggle /> */}
+        </div>
+
+        {showPropertyPanel && (
+          <div className="absolute top-2 right-2">
+            <PropertiesView />
+          </div>
+        )}
+
+        {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
+          <MiniMap width="100px" height="100px" />
+        </div> */}
+
+        <SettingsDisplay />
+      </SigmaContainer>

      {/* Loading overlay - shown when data is loading */}
      {isFetching && (
--- a/lightrag_webui/src/hooks/useLightragGraph.tsx
+++ b/lightrag_webui/src/hooks/useLightragGraph.tsx
@@ -589,7 +589,8 @@ const useLightrangeGraph = () => {
          }
        }

-        // Refresh the layout
+        // We need to keep the refreshLayout call because Sigma doesn't automatically detect 
+        // changes to the DirectedGraph object. This is necessary to trigger a re-render.
        useGraphStore.getState().refreshLayout();

      } catch (error) {
@@ -637,28 +638,27 @@ const useLightrangeGraph = () => {
      if (!nodeId || !sigmaGraph || !rawGraph) return;

      try {
-        // Check if the node exists
+        const state = useGraphStore.getState();
+
+        // 1. 检查节点是否存在
        if (!sigmaGraph.hasNode(nodeId)) {
          console.error('Node not found:', nodeId);
          return;
        }

-        // Get all nodes that will be deleted (including isolated nodes)
+        // 2. 获取要删除的节点
        const nodesToDelete = getNodesThatWillBeDeleted(nodeId, sigmaGraph);

-        // Check if we would delete all nodes in the graph
+        // 3. 检查是否会删除所有节点
        if (nodesToDelete.size === sigmaGraph.nodes().length) {
          toast.error(t('graphPanel.propertiesView.node.deleteAllNodesError'));
          return;
        }

-        // If the node is selected or focused, clear selection
-        const state = useGraphStore.getState();
-        if (state.selectedNode === nodeId || state.focusedNode === nodeId) {
-          state.clearSelection();
-        }
+        // 4. 清除选中状态 - 这会导致PropertiesView立即关闭
+        state.clearSelection();

-        // Process all nodes that need to be deleted
+        // 5. 删除节点和相关边
        for (const nodeToDelete of nodesToDelete) {
          // Remove the node from the sigma graph (this will also remove connected edges)
          sigmaGraph.dropNode(nodeToDelete);
@@ -713,7 +713,8 @@ const useLightrangeGraph = () => {
          toast.info(t('graphPanel.propertiesView.node.nodesRemoved', { count: nodesToDelete.size }));
        }

-        // Force a refresh of the graph layout
+        // We need to keep the refreshLayout call because Sigma doesn't automatically detect 
+        // changes to the DirectedGraph object. This is necessary to trigger a re-render.
        useGraphStore.getState().refreshLayout();

      } catch (error) {
--- a/lightrag_webui/src/stores/graph.ts
+++ b/lightrag_webui/src/stores/graph.ts
@@ -66,6 +66,7 @@ interface GraphState {

  rawGraph: RawGraph | null
  sigmaGraph: DirectedGraph | null
+  sigmaInstance: any | null
  allDatabaseLabels: string[]

  moveToSelectedNode: boolean
@@ -77,6 +78,7 @@ interface GraphState {
  labelsFetchAttempted: boolean

  refreshLayout: () => void
+  setSigmaInstance: (instance: any) => void
  setSelectedNode: (nodeId: string | null, moveToSelectedNode?: boolean) => void
  setFocusedNode: (nodeId: string | null) => void
  setSelectedEdge: (edgeId: string | null) => void
@@ -122,17 +124,45 @@ const useGraphStoreBase = create<GraphState>()((set, get) => ({

  rawGraph: null,
  sigmaGraph: null,
+  sigmaInstance: null,
  allDatabaseLabels: ['*'],

  refreshLayout: () => {
-    const currentGraph = get().sigmaGraph;
-    if (currentGraph) {
-      get().clearSelection();
-      get().setSigmaGraph(null);
-      setTimeout(() => {
-        get().setSigmaGraph(currentGraph);
-      }, 10);
+    const { sigmaInstance, sigmaGraph } = get();
+    
+    // Debug information to help diagnose issues
+    console.log('refreshLayout called with:', { 
+      hasSigmaInstance: !!sigmaInstance, 
+      hasSigmaGraph: !!sigmaGraph,
+      sigmaInstanceType: sigmaInstance ? typeof sigmaInstance : 'null',
+      sigmaGraphNodeCount: sigmaGraph ? sigmaGraph.order : 0
+    });
+    
+    if (sigmaInstance && sigmaGraph) {
+      try {
+        // 先尝试直接刷新
+        if (typeof sigmaInstance.refresh === 'function') {
+          sigmaInstance.refresh();
+          console.log('Graph refreshed using sigma.refresh()');
+          return;
+        }
+        
+        // 如果没有refresh方法,尝试重新绑定graph
+        if (typeof sigmaInstance.setGraph === 'function') {
+          sigmaInstance.setGraph(sigmaGraph);
+          console.log('Rebound graph to sigma instance');
+        } else {
+          // 如果setGraph方法不存在，尝试直接设置graph属性
+          (sigmaInstance as any).graph = sigmaGraph;
+          console.log('Set graph property directly on sigma instance');
+        }
+      } catch (error) {
+        console.error('Error during refresh:', error);
+      }
    }
+    
+    // 通知UI需要重新渲染
+    set(state => ({ ...state }));
  },

  setIsFetching: (isFetching: boolean) => set({ isFetching }),
@@ -198,6 +228,8 @@ const useGraphStoreBase = create<GraphState>()((set, get) => ({

  setMoveToSelectedNode: (moveToSelectedNode?: boolean) => set({ moveToSelectedNode }),
  
+  setSigmaInstance: (instance: any) => set({ sigmaInstance: instance }),
+
  // Methods to set global flags
  setGraphDataFetchAttempted: (attempted: boolean) => set({ graphDataFetchAttempted: attempted }),
  setLabelsFetchAttempted: (attempted: boolean) => set({ labelsFetchAttempted: attempted }),
@@ -457,6 +489,9 @@ const useGraphStoreBase = create<GraphState>()((set, get) => ({
        state.rawGraph.buildDynamicMap();
      }
      
+      // Refresh the layout to update the visualization
+      state.refreshLayout();
+
    } catch (error) {
      console.error('Error pruning node:', error);
    }