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

Fix Neo4j node and edge edit problem
This commit is contained in:
Daniel.y
2025-04-15 13:08:22 +08:00
committed by GitHub
7 changed files with 281 additions and 270 deletions

View File

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

File diff suppressed because one or more lines are too long

View File

@@ -8,7 +8,7 @@
<link rel="icon" type="image/svg+xml" href="logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lightrag</title>
<script type="module" crossorigin src="/webui/assets/index-1fU28mRC.js"></script>
<script type="module" crossorigin src="/webui/assets/index-CK7D4HV6.js"></script>
<link rel="stylesheet" crossorigin href="/webui/assets/index-BJDb04H1.css">
</head>
<body>

View File

@@ -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'))
}

View File

@@ -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'}
/>
)

View File

@@ -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)

View File

@@ -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')
}
}