Merge pull request #1374 from danielaskdd/fix-neo4j-graph-edit

lightrag/api/__init__.py

@@ -1 +1 @@
-__api_version__ = "0150"
+__api_version__ = "0151"

lightrag_webui/src/components/graph/EditablePropertyRow.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
 import { updateEntity, updateRelation, checkEntityNameExists } from '@/api/lightrag'
-import { updateGraphNode, updateGraphEdge } from '@/utils/graphOperations'
+import { useGraphStore } from '@/stores/graph'
 import { PropertyName, EditIcon, PropertyValue } from './PropertyRowComponents'
 import PropertyEditDialog from './PropertyEditDialog'
 
@@ -13,7 +13,10 @@ interface EditablePropertyRowProps {
   name: string                  // Property name to display and edit
   value: any                    // Initial value of the property
   onClick?: () => void          // Optional click handler for the property value
+  nodeId?: string               // ID of the node (for node type)
   entityId?: string             // ID of the entity (for node type)
+  edgeId?: string               // ID of the edge (for edge type)
+  dynamicId?: string
   entityType?: 'node' | 'edge'  // Type of graph entity
   sourceId?: string            // Source node ID (for edge type)
   targetId?: string            // Target node ID (for edge type)
@@ -30,7 +33,10 @@ const EditablePropertyRow = ({
   name,
   value: initialValue,
   onClick,
+  nodeId,
+  edgeId,
   entityId,
+  dynamicId,
   entityType,
   sourceId,
   targetId,
@@ -66,7 +72,7 @@ const EditablePropertyRow = ({
     setIsSubmitting(true)
 
     try {
-      if (entityType === 'node' && entityId) {
+      if (entityType === 'node' && entityId && nodeId) {
         let updatedData = { [name]: value }
 
         if (name === 'entity_id') {
@@ -79,12 +85,22 @@ const EditablePropertyRow = ({
         }
 
         await updateEntity(entityId, updatedData, true)
-        await updateGraphNode(entityId, name, value)
+        try {
+          await useGraphStore.getState().updateNodeAndSelect(nodeId, entityId, name, value)
+        } catch (error) {
+          console.error('Error updating node in graph:', error)
+          throw new Error('Failed to update node in graph')
+        }
         toast.success(t('graphPanel.propertiesView.success.entityUpdated'))
-      } else if (entityType === 'edge' && sourceId && targetId) {
+      } else if (entityType === 'edge' && sourceId && targetId && edgeId && dynamicId) {
         const updatedData = { [name]: value }
         await updateRelation(sourceId, targetId, updatedData)
-        await updateGraphEdge(sourceId, targetId, name, value)
+        try {
+          await useGraphStore.getState().updateEdgeAndSelect(edgeId, dynamicId, sourceId, targetId, name, value)
+        } catch (error) {
+          console.error(`Error updating edge ${sourceId}->${targetId} in graph:`, error)
+          throw new Error('Failed to update edge in graph')
+        }
         toast.success(t('graphPanel.propertiesView.success.relationUpdated'))
       }
 

lightrag_webui/src/components/graph/PropertiesView.tsx

@@ -16,10 +16,12 @@ const PropertiesView = () => {
   const focusedNode = useGraphStore.use.focusedNode()
   const selectedEdge = useGraphStore.use.selectedEdge()
   const focusedEdge = useGraphStore.use.focusedEdge()
+  const graphDataVersion = useGraphStore.use.graphDataVersion()
 
   const [currentElement, setCurrentElement] = useState<NodeType | EdgeType | null>(null)
   const [currentType, setCurrentType] = useState<'node' | 'edge' | null>(null)
 
+  // This effect will run when selection changes or when graph data is updated
   useEffect(() => {
     let type: 'node' | 'edge' | null = null
     let element: RawNodeType | RawEdgeType | null = null
@@ -53,6 +55,7 @@ const PropertiesView = () => {
     selectedNode,
     focusedEdge,
     selectedEdge,
+    graphDataVersion, // Add dependency on graphDataVersion to refresh when data changes
     setCurrentElement,
     setCurrentType,
     getNode,
@@ -93,6 +96,7 @@ const refineNodeProperties = (node: RawNodeType): NodeType => {
   if (state.sigmaGraph && state.rawGraph) {
     try {
       if (!state.sigmaGraph.hasNode(node.id)) {
+        console.warn('Node not found in sigmaGraph:', node.id)
         return {
           ...node,
           relationships: []
@@ -139,7 +143,8 @@ const refineEdgeProperties = (edge: RawEdgeType): EdgeType => {
 
   if (state.sigmaGraph && state.rawGraph) {
     try {
-      if (!state.sigmaGraph.hasEdge(edge.id)) {
+      if (!state.sigmaGraph.hasEdge(edge.dynamicId)) {
+        console.warn('Edge not found in sigmaGraph:', edge.id, 'dynamicId:', edge.dynamicId)
         return {
           ...edge,
           sourceNode: undefined,
@@ -171,6 +176,9 @@ const PropertyRow = ({
   value,
   onClick,
   tooltip,
+  nodeId,
+  edgeId,
+  dynamicId,
   entityId,
   entityType,
   sourceId,
@@ -181,7 +189,10 @@ const PropertyRow = ({
   value: any
   onClick?: () => void
   tooltip?: string
+  nodeId?: string
   entityId?: string
+  edgeId?: string
+  dynamicId?: string
   entityType?: 'node' | 'edge'
   sourceId?: string
   targetId?: string
@@ -202,7 +213,10 @@ const PropertyRow = ({
         name={name}
         value={value}
         onClick={onClick}
+        nodeId={nodeId}
         entityId={entityId}
+        edgeId={edgeId}
+        dynamicId={dynamicId}
         entityType={entityType}
         sourceId={sourceId}
         targetId={targetId}
@@ -265,7 +279,7 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
         </div>
       </div>
       <div className="bg-primary/5 max-h-96 overflow-auto rounded p-1">
-        <PropertyRow name={t('graphPanel.propertiesView.node.id')} value={node.id} />
+        <PropertyRow name={t('graphPanel.propertiesView.node.id')} value={String(node.id)} />
         <PropertyRow
           name={t('graphPanel.propertiesView.node.labels')}
           value={node.labels.join(', ')}
@@ -285,7 +299,8 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
                 key={name}
                 name={name}
                 value={node.properties[name]}
-                entityId={node.properties['entity_id'] || node.id}
+                nodeId={String(node.id)}
+                entityId={node.properties['entity_id']}
                 entityType="node"
                 isEditable={name === 'description' || name === 'entity_id'}
               />
@@ -350,10 +365,11 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
                 key={name}
                 name={name}
                 value={edge.properties[name]}
-                entityId={edge.id}
+                edgeId={String(edge.id)}
+                dynamicId={String(edge.dynamicId)}
                 entityType="edge"
-                sourceId={edge.source}
-                targetId={edge.target}
+                sourceId={edge.sourceNode?.properties['entity_id'] || edge.source}
+                targetId={edge.targetNode?.properties['entity_id'] || edge.target}
                 isEditable={name === 'description' || name === 'keywords'}
               />
             )

lightrag_webui/src/stores/graph.ts

@@ -5,6 +5,8 @@ import { getGraphLabels } from '@/api/lightrag'
 import MiniSearch from 'minisearch'
 
 export type RawNodeType = {
+  // for NetworkX: id is identical to properties['entity_id']
+  // for Neo4j: id is unique identifier for each node
   id: string
   labels: string[]
   properties: Record<string, any>
@@ -18,20 +20,34 @@ export type RawNodeType = {
 }
 
 export type RawEdgeType = {
+  // for NetworkX: id is "source-target"
+  // for Neo4j: id is unique identifier for each edge
   id: string
   source: string
   target: string
   type?: string
   properties: Record<string, any>
-
+  // dynamicId: key for sigmaGraph
   dynamicId: string
 }
 
+/**
+ * Interface for tracking edges that need updating when a node ID changes
+ */
+interface EdgeToUpdate {
+  originalDynamicId: string
+  newEdgeId: string
+  edgeIndex: number
+}
+
 export class RawGraph {
   nodes: RawNodeType[] = []
   edges: RawEdgeType[] = []
+  // nodeIDMap: map node id to index in nodes array (SigmaGraph has nodeId as key)
   nodeIdMap: Record<string, number> = {}
+  // edgeIDMap: map edge id to index in edges array (SigmaGraph not use id as key)
   edgeIdMap: Record<string, number> = {}
+  // edgeDynamicIdMap: map edge dynamic id to index in edges array (SigmaGraph has DynamicId as key)
   edgeDynamicIdMap: Record<string, number> = {}
 
   getNode = (nodeId: string) => {
@@ -120,9 +136,13 @@ interface GraphState {
   // Version counter to trigger data refresh
   graphDataVersion: number
   incrementGraphDataVersion: () => void
+
+  // Methods for updating graph elements and UI state together
+  updateNodeAndSelect: (nodeId: string, entityId: string, propertyName: string, newValue: string) => Promise<void>
+  updateEdgeAndSelect: (edgeId: string, dynamicId: string, sourceId: string, targetId: string, propertyName: string, newValue: string) => Promise<void>
 }
 
-const useGraphStoreBase = create<GraphState>()((set) => ({
+const useGraphStoreBase = create<GraphState>()((set, get) => ({
   selectedNode: null,
   focusedNode: null,
   selectedEdge: null,
@@ -227,6 +247,140 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
   graphDataVersion: 0,
   incrementGraphDataVersion: () => set((state) => ({ graphDataVersion: state.graphDataVersion + 1 })),
 
+  // Methods for updating graph elements and UI state together
+  updateNodeAndSelect: async (nodeId: string, entityId: string, propertyName: string, newValue: string) => {
+    // Get current state
+    const state = get()
+    const { sigmaGraph, rawGraph } = state
+
+    // Validate graph state
+    if (!sigmaGraph || !rawGraph || !sigmaGraph.hasNode(nodeId)) {
+      return
+    }
+
+    try {
+      const nodeAttributes = sigmaGraph.getNodeAttributes(nodeId)
+
+      console.log('updateNodeAndSelect', nodeId, entityId, propertyName, newValue)
+
+      // For entity_id changes (node renaming) with NetworkX graph storage
+      if ((nodeId === entityId) && (propertyName === 'entity_id')) {
+        // Create new node with updated ID but same attributes
+        sigmaGraph.addNode(newValue, { ...nodeAttributes, label: newValue })
+
+        const edgesToUpdate: EdgeToUpdate[] = []
+
+        // Process all edges connected to this node
+        sigmaGraph.forEachEdge(nodeId, (edge, attributes, source, target) => {
+          const otherNode = source === nodeId ? target : source
+          const isOutgoing = source === nodeId
+
+          // Get original edge dynamic ID for later reference
+          const originalEdgeDynamicId = edge
+          const edgeIndexInRawGraph = rawGraph.edgeDynamicIdMap[originalEdgeDynamicId]
+
+          // Create new edge with updated node reference
+          const newEdgeId = sigmaGraph.addEdge(
+            isOutgoing ? newValue : otherNode,
+            isOutgoing ? otherNode : newValue,
+            attributes
+          )
+
+          // Track edges that need updating in the raw graph
+          if (edgeIndexInRawGraph !== undefined) {
+            edgesToUpdate.push({
+              originalDynamicId: originalEdgeDynamicId,
+              newEdgeId: newEdgeId,
+              edgeIndex: edgeIndexInRawGraph
+            })
+          }
+
+          // Remove the old edge
+          sigmaGraph.dropEdge(edge)
+        })
+
+        // Remove the old node after all edges are processed
+        sigmaGraph.dropNode(nodeId)
+
+        // Update node reference in raw graph data
+        const nodeIndex = rawGraph.nodeIdMap[nodeId]
+        if (nodeIndex !== undefined) {
+          rawGraph.nodes[nodeIndex].id = newValue
+          rawGraph.nodes[nodeIndex].labels = [newValue]
+          rawGraph.nodes[nodeIndex].properties.entity_id = newValue
+          delete rawGraph.nodeIdMap[nodeId]
+          rawGraph.nodeIdMap[newValue] = nodeIndex
+        }
+
+        // Update all edge references in raw graph data
+        edgesToUpdate.forEach(({ originalDynamicId, newEdgeId, edgeIndex }) => {
+          if (rawGraph.edges[edgeIndex]) {
+            // Update source/target references
+            if (rawGraph.edges[edgeIndex].source === nodeId) {
+              rawGraph.edges[edgeIndex].source = newValue
+            }
+            if (rawGraph.edges[edgeIndex].target === nodeId) {
+              rawGraph.edges[edgeIndex].target = newValue
+            }
+
+            // Update dynamic ID mappings
+            rawGraph.edges[edgeIndex].dynamicId = newEdgeId
+            delete rawGraph.edgeDynamicIdMap[originalDynamicId]
+            rawGraph.edgeDynamicIdMap[newEdgeId] = edgeIndex
+          }
+        })
+
+        // Update selected node in store
+        set({ selectedNode: newValue, moveToSelectedNode: true })
+      } else {
+        // For non-NetworkX nodes or non-entity_id changes
+        const nodeIndex = rawGraph.nodeIdMap[String(nodeId)]
+        if (nodeIndex !== undefined) {
+          rawGraph.nodes[nodeIndex].properties[propertyName] = newValue
+          if (propertyName === 'entity_id') {
+            rawGraph.nodes[nodeIndex].labels = [newValue]
+            sigmaGraph.setNodeAttribute(String(nodeId), 'label', newValue)
+          }
+        }
+
+        // Trigger a re-render by incrementing the version counter
+        set((state) => ({ graphDataVersion: state.graphDataVersion + 1 }))
+      }
+    } catch (error) {
+      console.error('Error updating node in graph:', error)
+      throw new Error('Failed to update node in graph')
+    }
+  },
+
+  updateEdgeAndSelect: async (edgeId: string, dynamicId: string, sourceId: string, targetId: string, propertyName: string, newValue: string) => {
+    // Get current state
+    const state = get()
+    const { sigmaGraph, rawGraph } = state
+
+    // Validate graph state
+    if (!sigmaGraph || !rawGraph) {
+      return
+    }
+
+    try {
+      const edgeIndex = rawGraph.edgeIdMap[String(edgeId)]
+      if (edgeIndex !== undefined && rawGraph.edges[edgeIndex]) {
+        rawGraph.edges[edgeIndex].properties[propertyName] = newValue
+        if(dynamicId !== undefined && propertyName === 'keywords') {
+          sigmaGraph.setEdgeAttribute(dynamicId, 'label', newValue)
+        }
+      }
+
+      // Trigger a re-render by incrementing the version counter
+      set((state) => ({ graphDataVersion: state.graphDataVersion + 1 }))
+
+      // Update selected edge in store to ensure UI reflects changes
+      set({ selectedEdge: dynamicId })
+    } catch (error) {
+      console.error(`Error updating edge ${sourceId}->${targetId} in graph:`, error)
+      throw new Error('Failed to update edge in graph')
+    }
+  }
 }))
 
 const useGraphStore = createSelectors(useGraphStoreBase)

lightrag_webui/src/utils/graphOperations.ts

@@ -1,175 +0,0 @@
-import { useGraphStore } from '@/stores/graph'
-
-/**
- * Interface for tracking edges that need updating when a node ID changes
- */
-interface EdgeToUpdate {
-  originalDynamicId: string
-  newEdgeId: string
-  edgeIndex: number
-}
-
-/**
- * Update node in the graph visualization
- * Handles both property updates and entity ID changes
- *
- * @param nodeId - ID of the node to update
- * @param propertyName - Name of the property being updated
- * @param newValue - New value for the property
- */
-export const updateGraphNode = async (nodeId: string, propertyName: string, newValue: string) => {
-  // Get graph state from store
-  const sigmaGraph = useGraphStore.getState().sigmaGraph
-  const rawGraph = useGraphStore.getState().rawGraph
-
-  // Validate graph state
-  if (!sigmaGraph || !rawGraph || !sigmaGraph.hasNode(String(nodeId))) {
-    return
-  }
-
-  try {
-    const nodeAttributes = sigmaGraph.getNodeAttributes(String(nodeId))
-
-    // Special handling for entity_id changes (node renaming)
-    if (propertyName === 'entity_id') {
-      // Create new node with updated ID but same attributes
-      sigmaGraph.addNode(newValue, { ...nodeAttributes, label: newValue })
-
-      const edgesToUpdate: EdgeToUpdate[] = []
-
-      // Process all edges connected to this node
-      sigmaGraph.forEachEdge(String(nodeId), (edge, attributes, source, target) => {
-        const otherNode = source === String(nodeId) ? target : source
-        const isOutgoing = source === String(nodeId)
-
-        // Get original edge dynamic ID for later reference
-        const originalEdgeDynamicId = edge
-        const edgeIndexInRawGraph = rawGraph.edgeDynamicIdMap[originalEdgeDynamicId]
-
-        // Create new edge with updated node reference
-        const newEdgeId = sigmaGraph.addEdge(
-          isOutgoing ? newValue : otherNode,
-          isOutgoing ? otherNode : newValue,
-          attributes
-        )
-
-        // Track edges that need updating in the raw graph
-        if (edgeIndexInRawGraph !== undefined) {
-          edgesToUpdate.push({
-            originalDynamicId: originalEdgeDynamicId,
-            newEdgeId: newEdgeId,
-            edgeIndex: edgeIndexInRawGraph
-          })
-        }
-
-        // Remove the old edge
-        sigmaGraph.dropEdge(edge)
-      })
-
-      // Remove the old node after all edges are processed
-      sigmaGraph.dropNode(String(nodeId))
-
-      // Update node reference in raw graph data
-      const nodeIndex = rawGraph.nodeIdMap[String(nodeId)]
-      if (nodeIndex !== undefined) {
-        rawGraph.nodes[nodeIndex].id = newValue
-        rawGraph.nodes[nodeIndex].properties.entity_id = newValue
-        delete rawGraph.nodeIdMap[String(nodeId)]
-        rawGraph.nodeIdMap[newValue] = nodeIndex
-      }
-
-      // Update all edge references in raw graph data
-      edgesToUpdate.forEach(({ originalDynamicId, newEdgeId, edgeIndex }) => {
-        if (rawGraph.edges[edgeIndex]) {
-          // Update source/target references
-          if (rawGraph.edges[edgeIndex].source === String(nodeId)) {
-            rawGraph.edges[edgeIndex].source = newValue
-          }
-          if (rawGraph.edges[edgeIndex].target === String(nodeId)) {
-            rawGraph.edges[edgeIndex].target = newValue
-          }
-
-          // Update dynamic ID mappings
-          rawGraph.edges[edgeIndex].dynamicId = newEdgeId
-          delete rawGraph.edgeDynamicIdMap[originalDynamicId]
-          rawGraph.edgeDynamicIdMap[newEdgeId] = edgeIndex
-        }
-      })
-
-      // Update selected node in store
-      useGraphStore.getState().setSelectedNode(newValue)
-    } else {
-      // For other properties, just update the property in raw graph
-      const nodeIndex = rawGraph.nodeIdMap[String(nodeId)]
-      if (nodeIndex !== undefined) {
-        rawGraph.nodes[nodeIndex].properties[propertyName] = newValue
-      }
-    }
-  } catch (error) {
-    console.error('Error updating node in graph:', error)
-    throw new Error('Failed to update node in graph')
-  }
-}
-
-/**
- * Update edge in the graph visualization
- *
- * @param sourceId - ID of the source node
- * @param targetId - ID of the target node
- * @param propertyName - Name of the property being updated
- * @param newValue - New value for the property
- */
-export const updateGraphEdge = async (sourceId: string, targetId: string, propertyName: string, newValue: string) => {
-  // Get graph state from store
-  const sigmaGraph = useGraphStore.getState().sigmaGraph
-  const rawGraph = useGraphStore.getState().rawGraph
-
-  // Validate graph state
-  if (!sigmaGraph || !rawGraph) {
-    return
-  }
-
-  try {
-    // Find the edge between source and target nodes
-    const allEdges = sigmaGraph.edges()
-    let keyToUse = null
-
-    for (const edge of allEdges) {
-      const edgeSource = sigmaGraph.source(edge)
-      const edgeTarget = sigmaGraph.target(edge)
-
-      // Match edge in either direction (undirected graph support)
-      if ((edgeSource === sourceId && edgeTarget === targetId) ||
-          (edgeSource === targetId && edgeTarget === sourceId)) {
-        keyToUse = edge
-        break
-      }
-    }
-
-    if (keyToUse !== null) {
-      // Special handling for keywords property (updates edge label)
-      if(propertyName === 'keywords') {
-        sigmaGraph.setEdgeAttribute(keyToUse, 'label', newValue)
-      } else {
-        sigmaGraph.setEdgeAttribute(keyToUse, propertyName, newValue)
-      }
-
-      // Update edge in raw graph data using dynamic ID mapping
-      if (keyToUse && rawGraph.edgeDynamicIdMap[keyToUse] !== undefined) {
-        const edgeIndex = rawGraph.edgeDynamicIdMap[keyToUse]
-        if (rawGraph.edges[edgeIndex]) {
-          rawGraph.edges[edgeIndex].properties[propertyName] = newValue
-        }
-      } else if (keyToUse !== null) {
-        // Fallback: try to find edge by key in edge ID map
-        const edgeIndexByKey = rawGraph.edgeIdMap[keyToUse]
-        if (edgeIndexByKey !== undefined && rawGraph.edges[edgeIndexByKey]) {
-          rawGraph.edges[edgeIndexByKey].properties[propertyName] = newValue
-        }
-      }
-    }
-  } catch (error) {
-    console.error(`Error updating edge ${sourceId}->${targetId} in graph:`, error)
-    throw new Error('Failed to update edge in graph')
-  }
-}