feat(graph): Add editing function for entity and relationship attributes

lightrag_webui/src/components/graph/PropertiesView.tsx

@@ -5,6 +5,7 @@ import Button from '@/components/ui/Button'
 import useLightragGraph from '@/hooks/useLightragGraph'
 import { useTranslation } from 'react-i18next'
 import { GitBranchPlus, Scissors } from 'lucide-react'
+import EditablePropertyRow from './EditablePropertyRow'
 
 /**
  * Component that view properties of elements in graph.
@@ -169,12 +170,22 @@ const PropertyRow = ({
   name,
   value,
   onClick,
-  tooltip
+  tooltip,
+  entityId,
+  entityType,
+  sourceId,
+  targetId,
+  isEditable = false
 }: {
   name: string
   value: any
   onClick?: () => void
   tooltip?: string
+  entityId?: string
+  entityType?: 'node' | 'edge'
+  sourceId?: string
+  targetId?: string
+  isEditable?: boolean
 }) => {
   const { t } = useTranslation()
 
@@ -184,8 +195,24 @@ const PropertyRow = ({
     return translation === translationKey ? name : translation
   }
 
-  // Since Text component uses a label internally, we'll use a span here instead of a label
-  // to avoid nesting labels which is not recommended for accessibility
+  // Use EditablePropertyRow for editable fields (description and entity_id)
+  if (isEditable && (name === 'description' || name === 'entity_id')) {
+    return (
+      <EditablePropertyRow
+        name={name}
+        value={value}
+        onClick={onClick}
+        tooltip={tooltip}
+        entityId={entityId}
+        entityType={entityType}
+        sourceId={sourceId}
+        targetId={targetId}
+        isEditable={true}
+      />
+    )
+  }
+
+  // For non-editable fields, use the regular Text component
   return (
     <div className="flex items-center gap-2">
       <span className="text-primary/60 tracking-wide whitespace-nowrap">{getPropertyNameTranslation(name)}</span>:
@@ -253,7 +280,16 @@ const NodePropertiesView = ({ node }: { node: NodeType }) => {
         {Object.keys(node.properties)
           .sort()
           .map((name) => {
-            return <PropertyRow key={name} name={name} value={node.properties[name]} />
+            return (
+              <PropertyRow
+                key={name}
+                name={name}
+                value={node.properties[name]}
+                entityId={node.properties['entity_id'] || node.id}
+                entityType="node"
+                isEditable={name === 'description' || name === 'entity_id'}
+              />
+            )
           })}
       </div>
       {node.relationships.length > 0 && (
@@ -309,7 +345,18 @@ const EdgePropertiesView = ({ edge }: { edge: EdgeType }) => {
         {Object.keys(edge.properties)
           .sort()
           .map((name) => {
-            return <PropertyRow key={name} name={name} value={edge.properties[name]} />
+            return (
+              <PropertyRow
+                key={name}
+                name={name}
+                value={edge.properties[name]}
+                entityId={edge.id}
+                entityType="edge"
+                sourceId={edge.sourceNode?.properties['entity_id'] || edge.source}
+                targetId={edge.targetNode?.properties['entity_id'] || edge.target}
+                isEditable={name === 'description'}
+              />
+            )
           })}
       </div>
     </div>