mirror of
https://github.com/HKUDS/LightRAG.git
synced 2025-08-01 21:31:54 +00:00
Merge branch 'edit-node' into add-graph-db-lock
This commit is contained in:
commit
40240bc79e
@ -95,7 +95,6 @@ def create_graph_routes(rag, api_key: Optional[str] = None):
|
|||||||
Dict: Updated entity information
|
Dict: Updated entity information
|
||||||
"""
|
"""
|
||||||
try:
|
try:
|
||||||
print(request.entity_name, request.updated_data, request.allow_rename)
|
|
||||||
result = await rag.aedit_entity(
|
result = await rag.aedit_entity(
|
||||||
entity_name=request.entity_name,
|
entity_name=request.entity_name,
|
||||||
updated_data=request.updated_data,
|
updated_data=request.updated_data,
|
||||||
|
@ -1,22 +1,18 @@
|
|||||||
import { useState, useEffect, useRef } from 'react'
|
import { useState, useEffect } from 'react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import Text from '@/components/ui/Text'
|
|
||||||
import Input from '@/components/ui/Input'
|
|
||||||
import { toast } from 'sonner'
|
import { toast } from 'sonner'
|
||||||
import { updateEntity, updateRelation, checkEntityNameExists } from '@/api/lightrag'
|
import { updateEntity, updateRelation, checkEntityNameExists } from '@/api/lightrag'
|
||||||
import { useGraphStore } from '@/stores/graph'
|
import { updateGraphNode, updateGraphEdge } from '@/utils/graphOperations'
|
||||||
import { PencilIcon } from 'lucide-react'
|
import { PropertyName, EditIcon, PropertyValue } from './PropertyRowComponents'
|
||||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
|
import PropertyEditDialog from './PropertyEditDialog'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Interface for the EditablePropertyRow component props
|
* Interface for the EditablePropertyRow component props
|
||||||
* Defines all possible properties that can be passed to the component
|
|
||||||
*/
|
*/
|
||||||
interface EditablePropertyRowProps {
|
interface EditablePropertyRowProps {
|
||||||
name: string // Property name to display and edit
|
name: string // Property name to display and edit
|
||||||
value: any // Initial value of the property
|
value: any // Initial value of the property
|
||||||
onClick?: () => void // Optional click handler for the property value
|
onClick?: () => void // Optional click handler for the property value
|
||||||
tooltip?: string // Optional tooltip text
|
|
||||||
entityId?: string // ID of the entity (for node type)
|
entityId?: string // ID of the entity (for node type)
|
||||||
entityType?: 'node' | 'edge' // Type of graph entity
|
entityType?: 'node' | 'edge' // Type of graph entity
|
||||||
sourceId?: string // Source node ID (for edge type)
|
sourceId?: string // Source node ID (for edge type)
|
||||||
@ -26,25 +22,13 @@ interface EditablePropertyRowProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Interface for tracking edges that need updating when a node ID changes
|
* EditablePropertyRow component that supports editing property values
|
||||||
*/
|
|
||||||
interface EdgeToUpdate {
|
|
||||||
originalDynamicId: string;
|
|
||||||
newEdgeId: string;
|
|
||||||
edgeIndex: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* EditablePropertyRow component that supports double-click to edit property values
|
|
||||||
* This component is used in the graph properties panel to display and edit entity properties
|
* This component is used in the graph properties panel to display and edit entity properties
|
||||||
*
|
|
||||||
* @component
|
|
||||||
*/
|
*/
|
||||||
const EditablePropertyRow = ({
|
const EditablePropertyRow = ({
|
||||||
name,
|
name,
|
||||||
value: initialValue,
|
value: initialValue,
|
||||||
onClick,
|
onClick,
|
||||||
tooltip,
|
|
||||||
entityId,
|
entityId,
|
||||||
entityType,
|
entityType,
|
||||||
sourceId,
|
sourceId,
|
||||||
@ -52,260 +36,27 @@ const EditablePropertyRow = ({
|
|||||||
onValueChange,
|
onValueChange,
|
||||||
isEditable = false
|
isEditable = false
|
||||||
}: EditablePropertyRowProps) => {
|
}: EditablePropertyRowProps) => {
|
||||||
// Component state
|
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const [isEditing, setIsEditing] = useState(false)
|
const [isEditing, setIsEditing] = useState(false)
|
||||||
const [editValue, setEditValue] = useState('')
|
|
||||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
const [currentValue, setCurrentValue] = useState(initialValue)
|
const [currentValue, setCurrentValue] = useState(initialValue)
|
||||||
const inputRef = useRef<HTMLInputElement>(null)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Update currentValue when initialValue changes from parent
|
|
||||||
*/
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setCurrentValue(initialValue)
|
setCurrentValue(initialValue)
|
||||||
}, [initialValue])
|
}, [initialValue])
|
||||||
|
|
||||||
/**
|
const handleEditClick = () => {
|
||||||
* Initialize edit value and focus input when entering edit mode
|
|
||||||
*/
|
|
||||||
useEffect(() => {
|
|
||||||
if (isEditing) {
|
|
||||||
setEditValue(String(currentValue))
|
|
||||||
// Focus the input element when entering edit mode with a small delay
|
|
||||||
// to ensure the input is rendered before focusing
|
|
||||||
setTimeout(() => {
|
|
||||||
if (inputRef.current) {
|
|
||||||
inputRef.current.focus()
|
|
||||||
inputRef.current.select()
|
|
||||||
}
|
|
||||||
}, 50)
|
|
||||||
}
|
|
||||||
}, [isEditing, currentValue])
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get translated property name from i18n
|
|
||||||
* Falls back to the original name if no translation is found
|
|
||||||
*/
|
|
||||||
const getPropertyNameTranslation = (propName: string) => {
|
|
||||||
const translationKey = `graphPanel.propertiesView.node.propertyNames.${propName}`
|
|
||||||
const translation = t(translationKey)
|
|
||||||
return translation === translationKey ? propName : translation
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle double-click event to enter edit mode
|
|
||||||
*/
|
|
||||||
const handleDoubleClick = () => {
|
|
||||||
if (isEditable && !isEditing) {
|
if (isEditable && !isEditing) {
|
||||||
setIsEditing(true)
|
setIsEditing(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
const handleCancel = () => {
|
||||||
* Handle keyboard events in the input field
|
|
||||||
* - Enter: Save changes
|
|
||||||
* - Escape: Cancel editing
|
|
||||||
*/
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
handleSave()
|
|
||||||
} else if (e.key === 'Escape') {
|
|
||||||
setIsEditing(false)
|
setIsEditing(false)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
const handleSave = async (value: string) => {
|
||||||
* Update node in the graph visualization after API update
|
if (isSubmitting || value === String(currentValue)) {
|
||||||
* 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
|
|
||||||
*/
|
|
||||||
const updateGraphNode = async (nodeId: string, propertyName: string, newValue: string) => {
|
|
||||||
// Get graph state from store
|
|
||||||
const sigmaInstance = useGraphStore.getState().sigmaInstance
|
|
||||||
const sigmaGraph = useGraphStore.getState().sigmaGraph
|
|
||||||
const rawGraph = useGraphStore.getState().rawGraph
|
|
||||||
|
|
||||||
// Validate graph state
|
|
||||||
if (!sigmaInstance || !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 after API update
|
|
||||||
*
|
|
||||||
* @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
|
|
||||||
*/
|
|
||||||
const updateGraphEdge = async (sourceId: string, targetId: string, propertyName: string, newValue: string) => {
|
|
||||||
// Get graph state from store
|
|
||||||
const sigmaInstance = useGraphStore.getState().sigmaInstance
|
|
||||||
const sigmaGraph = useGraphStore.getState().sigmaGraph
|
|
||||||
const rawGraph = useGraphStore.getState().rawGraph
|
|
||||||
|
|
||||||
// Validate graph state
|
|
||||||
if (!sigmaInstance || !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 {
|
|
||||||
console.warn(`Edge index ${edgeIndex} found but edge data missing in rawGraph for dynamicId ${entityId}`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// Fallback: try to find edge by key in edge ID map
|
|
||||||
console.warn(`Could not find edge with dynamicId ${entityId} in rawGraph.edgeDynamicIdMap to update properties.`);
|
|
||||||
if (keyToUse !== null) {
|
|
||||||
const edgeIndexByKey = rawGraph.edgeIdMap[keyToUse];
|
|
||||||
if (edgeIndexByKey !== undefined && rawGraph.edges[edgeIndexByKey]) {
|
|
||||||
rawGraph.edges[edgeIndexByKey].properties[propertyName] = newValue;
|
|
||||||
console.log(`Updated rawGraph edge using constructed key ${keyToUse}`);
|
|
||||||
} else {
|
|
||||||
console.warn(`Could not find edge in rawGraph using key ${keyToUse} either.`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn('Cannot update edge properties: edge key is null');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn(`Edge not found in sigmaGraph with key ${keyToUse}`);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
// Log the specific edge key that caused the error
|
|
||||||
console.error(`Error updating edge ${sourceId}->${targetId} in graph:`, error);
|
|
||||||
throw new Error('Failed to update edge in graph')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Save changes to the property value
|
|
||||||
* Updates both the API and the graph visualization
|
|
||||||
*/
|
|
||||||
const handleSave = async () => {
|
|
||||||
// Prevent duplicate submissions
|
|
||||||
if (isSubmitting) return
|
|
||||||
|
|
||||||
// Skip if value hasn't changed
|
|
||||||
if (editValue === String(currentValue)) {
|
|
||||||
setIsEditing(false)
|
setIsEditing(false)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -313,47 +64,31 @@ const EditablePropertyRow = ({
|
|||||||
setIsSubmitting(true)
|
setIsSubmitting(true)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Handle node property updates
|
|
||||||
if (entityType === 'node' && entityId) {
|
if (entityType === 'node' && entityId) {
|
||||||
let updatedData = { [name]: editValue }
|
let updatedData = { [name]: value }
|
||||||
|
|
||||||
// Special handling for entity_id (name) changes
|
|
||||||
if (name === 'entity_id') {
|
if (name === 'entity_id') {
|
||||||
// Check if the new name already exists
|
const exists = await checkEntityNameExists(value)
|
||||||
const exists = await checkEntityNameExists(editValue)
|
|
||||||
if (exists) {
|
if (exists) {
|
||||||
toast.error(t('graphPanel.propertiesView.errors.duplicateName'))
|
toast.error(t('graphPanel.propertiesView.errors.duplicateName'))
|
||||||
setIsSubmitting(false)
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// For entity_id, we update entity_name in the API
|
updatedData = { 'entity_name': value }
|
||||||
updatedData = { 'entity_name': editValue }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update entity in API
|
|
||||||
await updateEntity(entityId, updatedData, true)
|
await updateEntity(entityId, updatedData, true)
|
||||||
// Update graph visualization
|
await updateGraphNode(entityId, name, value)
|
||||||
await updateGraphNode(entityId, name, editValue)
|
|
||||||
toast.success(t('graphPanel.propertiesView.success.entityUpdated'))
|
toast.success(t('graphPanel.propertiesView.success.entityUpdated'))
|
||||||
}
|
} else if (entityType === 'edge' && sourceId && targetId) {
|
||||||
// Handle edge property updates
|
const updatedData = { [name]: value }
|
||||||
else if (entityType === 'edge' && sourceId && targetId) {
|
|
||||||
const updatedData = { [name]: editValue }
|
|
||||||
// Update relation in API
|
|
||||||
await updateRelation(sourceId, targetId, updatedData)
|
await updateRelation(sourceId, targetId, updatedData)
|
||||||
// Update graph visualization
|
await updateGraphEdge(sourceId, targetId, name, value)
|
||||||
await updateGraphEdge(sourceId, targetId, name, editValue)
|
|
||||||
toast.success(t('graphPanel.propertiesView.success.relationUpdated'))
|
toast.success(t('graphPanel.propertiesView.success.relationUpdated'))
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update local state
|
|
||||||
setIsEditing(false)
|
setIsEditing(false)
|
||||||
setCurrentValue(editValue)
|
setCurrentValue(value)
|
||||||
|
onValueChange?.(value)
|
||||||
// Notify parent component if callback provided
|
|
||||||
if (onValueChange) {
|
|
||||||
onValueChange(editValue)
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error updating property:', error)
|
console.error('Error updating property:', error)
|
||||||
toast.error(t('graphPanel.propertiesView.errors.updateFailed'))
|
toast.error(t('graphPanel.propertiesView.errors.updateFailed'))
|
||||||
@ -362,61 +97,20 @@ const EditablePropertyRow = ({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Render the property row with edit functionality
|
|
||||||
* Shows property name, edit icon, and either the editable input or the current value
|
|
||||||
*/
|
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1" onDoubleClick={handleDoubleClick}>
|
|
||||||
{/* Property name with translation */}
|
|
||||||
<span className="text-primary/60 tracking-wide whitespace-nowrap">
|
|
||||||
{getPropertyNameTranslation(name)}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{/* Edit icon with tooltip */}
|
|
||||||
<TooltipProvider delayDuration={200}>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger asChild>
|
|
||||||
<div>
|
|
||||||
<PencilIcon
|
|
||||||
className="h-3 w-3 text-gray-500 hover:text-gray-700 cursor-pointer"
|
|
||||||
onClick={() => setIsEditing(true)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent side="top">
|
|
||||||
{t('graphPanel.propertiesView.doubleClickToEdit')}
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>:
|
|
||||||
|
|
||||||
{/* Conditional rendering based on edit state */}
|
|
||||||
{isEditing ? (
|
|
||||||
// Input field for editing
|
|
||||||
<Input
|
|
||||||
ref={inputRef}
|
|
||||||
type="text"
|
|
||||||
value={editValue}
|
|
||||||
onChange={(e) => setEditValue(e.target.value)}
|
|
||||||
onKeyDown={handleKeyDown}
|
|
||||||
onBlur={handleSave}
|
|
||||||
className="h-6 text-xs"
|
|
||||||
disabled={isSubmitting}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
// Text display when not editing
|
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Text
|
<PropertyName name={name} />
|
||||||
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
|
<EditIcon onClick={handleEditClick} />:
|
||||||
tooltipClassName="max-w-80"
|
<PropertyValue value={currentValue} onClick={onClick} />
|
||||||
text={currentValue}
|
<PropertyEditDialog
|
||||||
tooltip={tooltip || (typeof currentValue === 'string' ? currentValue : JSON.stringify(currentValue, null, 2))}
|
isOpen={isEditing}
|
||||||
side="left"
|
onClose={handleCancel}
|
||||||
onClick={onClick}
|
onSave={handleSave}
|
||||||
|
propertyName={name}
|
||||||
|
initialValue={String(currentValue)}
|
||||||
|
isSubmitting={isSubmitting}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -202,7 +202,6 @@ const PropertyRow = ({
|
|||||||
name={name}
|
name={name}
|
||||||
value={value}
|
value={value}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
tooltip={tooltip}
|
|
||||||
entityId={entityId}
|
entityId={entityId}
|
||||||
entityType={entityType}
|
entityType={entityType}
|
||||||
sourceId={sourceId}
|
sourceId={sourceId}
|
||||||
|
105
lightrag_webui/src/components/graph/PropertyEditDialog.tsx
Normal file
105
lightrag_webui/src/components/graph/PropertyEditDialog.tsx
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogFooter
|
||||||
|
} from '@/components/ui/Dialog'
|
||||||
|
import Button from '@/components/ui/Button'
|
||||||
|
import Input from '@/components/ui/Input'
|
||||||
|
|
||||||
|
interface PropertyEditDialogProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
onSave: (value: string) => void
|
||||||
|
propertyName: string
|
||||||
|
initialValue: string
|
||||||
|
isSubmitting?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Dialog component for editing property values
|
||||||
|
* Provides a modal with a title, multi-line text input, and save/cancel buttons
|
||||||
|
*/
|
||||||
|
const PropertyEditDialog = ({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
propertyName,
|
||||||
|
initialValue,
|
||||||
|
isSubmitting = false
|
||||||
|
}: PropertyEditDialogProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const [value, setValue] = useState('')
|
||||||
|
|
||||||
|
// Initialize value when dialog opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setValue(initialValue)
|
||||||
|
}
|
||||||
|
}, [isOpen, initialValue])
|
||||||
|
|
||||||
|
// Get translated property name
|
||||||
|
const getPropertyNameTranslation = (name: string) => {
|
||||||
|
const translationKey = `graphPanel.propertiesView.node.propertyNames.${name}`
|
||||||
|
const translation = t(translationKey)
|
||||||
|
return translation === translationKey ? name : translation
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
if (value.trim() !== '') {
|
||||||
|
onSave(value)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
||||||
|
<DialogContent className="sm:max-w-md" aria-describedby="property-edit-description">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{t('graphPanel.propertiesView.editProperty', {
|
||||||
|
property: getPropertyNameTranslation(propertyName)
|
||||||
|
})}
|
||||||
|
</DialogTitle>
|
||||||
|
<p id="property-edit-description" className="text-sm text-muted-foreground">
|
||||||
|
{t('graphPanel.propertiesView.editPropertyDescription')}
|
||||||
|
</p>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{/* Multi-line text input using textarea */}
|
||||||
|
<div className="grid gap-4 py-4">
|
||||||
|
<textarea
|
||||||
|
value={value}
|
||||||
|
onChange={(e) => setValue(e.target.value)}
|
||||||
|
rows={5}
|
||||||
|
className="border-input focus-visible:ring-ring flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={onClose}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PropertyEditDialog
|
@ -0,0 +1,53 @@
|
|||||||
|
import { PencilIcon } from 'lucide-react'
|
||||||
|
import Text from '@/components/ui/Text'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
interface PropertyNameProps {
|
||||||
|
name: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PropertyName = ({ name }: PropertyNameProps) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const getPropertyNameTranslation = (propName: string) => {
|
||||||
|
const translationKey = `graphPanel.propertiesView.node.propertyNames.${propName}`
|
||||||
|
const translation = t(translationKey)
|
||||||
|
return translation === translationKey ? propName : translation
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className="text-primary/60 tracking-wide whitespace-nowrap">
|
||||||
|
{getPropertyNameTranslation(name)}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface EditIconProps {
|
||||||
|
onClick: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const EditIcon = ({ onClick }: EditIconProps) => (
|
||||||
|
<div>
|
||||||
|
<PencilIcon
|
||||||
|
className="h-3 w-3 text-gray-500 hover:text-gray-700 cursor-pointer"
|
||||||
|
onClick={onClick}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
interface PropertyValueProps {
|
||||||
|
value: any
|
||||||
|
onClick?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const PropertyValue = ({ value, onClick }: PropertyValueProps) => (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Text
|
||||||
|
className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis"
|
||||||
|
tooltipClassName="max-w-80"
|
||||||
|
text={value}
|
||||||
|
side="left"
|
||||||
|
onClick={onClick}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
@ -33,7 +33,8 @@
|
|||||||
"guestMode": "وضع بدون تسجيل دخول"
|
"guestMode": "وضع بدون تسجيل دخول"
|
||||||
},
|
},
|
||||||
"common": {
|
"common": {
|
||||||
"cancel": "إلغاء"
|
"cancel": "إلغاء",
|
||||||
|
"save": "حفظ"
|
||||||
},
|
},
|
||||||
"documentPanel": {
|
"documentPanel": {
|
||||||
"clearDocuments": {
|
"clearDocuments": {
|
||||||
@ -236,12 +237,14 @@
|
|||||||
"vectorStorage": "تخزين المتجهات"
|
"vectorStorage": "تخزين المتجهات"
|
||||||
},
|
},
|
||||||
"propertiesView": {
|
"propertiesView": {
|
||||||
|
"editProperty": "تعديل {{property}}",
|
||||||
|
"editPropertyDescription": "قم بتحرير قيمة الخاصية في منطقة النص أدناه.",
|
||||||
"errors": {
|
"errors": {
|
||||||
"duplicateName": "اسم العقدة موجود بالفعل",
|
"duplicateName": "اسم العقدة موجود بالفعل",
|
||||||
"updateFailed": "فشل تحديث العقدة",
|
"updateFailed": "فشل تحديث العقدة",
|
||||||
"tryAgainLater": "يرجى المحاولة مرة أخرى لاحقًا"
|
"tryAgainLater": "يرجى المحاولة مرة أخرى لاحقًا"
|
||||||
},
|
},
|
||||||
"doubleClickToEdit": "انقر نقرًا مزدوجًا للتعديل",
|
|
||||||
"success": {
|
"success": {
|
||||||
"entityUpdated": "تم تحديث العقدة بنجاح",
|
"entityUpdated": "تم تحديث العقدة بنجاح",
|
||||||
"relationUpdated": "تم تحديث العلاقة بنجاح"
|
"relationUpdated": "تم تحديث العلاقة بنجاح"
|
||||||
|
@ -33,7 +33,8 @@
|
|||||||
"guestMode": "Login Free"
|
"guestMode": "Login Free"
|
||||||
},
|
},
|
||||||
"common": {
|
"common": {
|
||||||
"cancel": "Cancel"
|
"cancel": "Cancel",
|
||||||
|
"save": "Save"
|
||||||
},
|
},
|
||||||
"documentPanel": {
|
"documentPanel": {
|
||||||
"clearDocuments": {
|
"clearDocuments": {
|
||||||
@ -235,12 +236,14 @@
|
|||||||
"vectorStorage": "Vector Storage"
|
"vectorStorage": "Vector Storage"
|
||||||
},
|
},
|
||||||
"propertiesView": {
|
"propertiesView": {
|
||||||
|
"editProperty": "Edit {{property}}",
|
||||||
|
"editPropertyDescription": "Edit the property value in the text area below.",
|
||||||
"errors": {
|
"errors": {
|
||||||
"duplicateName": "Node name already exists",
|
"duplicateName": "Node name already exists",
|
||||||
"updateFailed": "Failed to update node",
|
"updateFailed": "Failed to update node",
|
||||||
"tryAgainLater": "Please try again later"
|
"tryAgainLater": "Please try again later"
|
||||||
},
|
},
|
||||||
"doubleClickToEdit": "Double click to edit",
|
|
||||||
"success": {
|
"success": {
|
||||||
"entityUpdated": "Node updated successfully",
|
"entityUpdated": "Node updated successfully",
|
||||||
"relationUpdated": "Relation updated successfully"
|
"relationUpdated": "Relation updated successfully"
|
||||||
|
@ -33,7 +33,8 @@
|
|||||||
"guestMode": "Mode sans connexion"
|
"guestMode": "Mode sans connexion"
|
||||||
},
|
},
|
||||||
"common": {
|
"common": {
|
||||||
"cancel": "Annuler"
|
"cancel": "Annuler",
|
||||||
|
"save": "Sauvegarder"
|
||||||
},
|
},
|
||||||
"documentPanel": {
|
"documentPanel": {
|
||||||
"clearDocuments": {
|
"clearDocuments": {
|
||||||
@ -236,6 +237,8 @@
|
|||||||
"vectorStorage": "Stockage vectoriel"
|
"vectorStorage": "Stockage vectoriel"
|
||||||
},
|
},
|
||||||
"propertiesView": {
|
"propertiesView": {
|
||||||
|
"editProperty": "Modifier {{property}}",
|
||||||
|
"editPropertyDescription": "Modifiez la valeur de la propriété dans la zone de texte ci-dessous.",
|
||||||
"errors": {
|
"errors": {
|
||||||
"duplicateName": "Le nom du nœud existe déjà",
|
"duplicateName": "Le nom du nœud existe déjà",
|
||||||
"updateFailed": "Échec de la mise à jour du nœud",
|
"updateFailed": "Échec de la mise à jour du nœud",
|
||||||
|
@ -33,7 +33,8 @@
|
|||||||
"guestMode": "无需登陆"
|
"guestMode": "无需登陆"
|
||||||
},
|
},
|
||||||
"common": {
|
"common": {
|
||||||
"cancel": "取消"
|
"cancel": "取消",
|
||||||
|
"save": "保存"
|
||||||
},
|
},
|
||||||
"documentPanel": {
|
"documentPanel": {
|
||||||
"clearDocuments": {
|
"clearDocuments": {
|
||||||
@ -236,12 +237,14 @@
|
|||||||
"vectorStorage": "向量存储"
|
"vectorStorage": "向量存储"
|
||||||
},
|
},
|
||||||
"propertiesView": {
|
"propertiesView": {
|
||||||
|
"editProperty": "编辑{{property}}",
|
||||||
|
"editPropertyDescription": "在下方文本区域编辑属性值。",
|
||||||
"errors": {
|
"errors": {
|
||||||
"duplicateName": "节点名称已存在",
|
"duplicateName": "节点名称已存在",
|
||||||
"updateFailed": "更新节点失败",
|
"updateFailed": "更新节点失败",
|
||||||
"tryAgainLater": "请稍后重试"
|
"tryAgainLater": "请稍后重试"
|
||||||
},
|
},
|
||||||
"doubleClickToEdit": "双击编辑",
|
|
||||||
"success": {
|
"success": {
|
||||||
"entityUpdated": "节点更新成功",
|
"entityUpdated": "节点更新成功",
|
||||||
"relationUpdated": "关系更新成功"
|
"relationUpdated": "关系更新成功"
|
||||||
|
175
lightrag_webui/src/utils/graphOperations.ts
Normal file
175
lightrag_webui/src/utils/graphOperations.ts
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
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')
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user