feat(webui): Add attribute editing dialog box and optimize editable attribute row component

2025-04-13 23:32:35 +08:00
parent 4900cf07d9
commit 5b1938e5b3
7 changed files with 173 additions and 80 deletions
--- a/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
+++ b/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
@@ -1,12 +1,12 @@
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect } from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Text from '@/components/ui/Text'
-import Input from '@/components/ui/Input'
 import { toast } from 'sonner'
 import { updateEntity, updateRelation, checkEntityNameExists } from '@/api/lightrag'
 import { useGraphStore } from '@/stores/graph'
 import { PencilIcon } from 'lucide-react'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
+import PropertyEditDialog from './PropertyEditDialog'

 /**
 * Interface for the EditablePropertyRow component props
@@ -44,7 +44,6 @@ const EditablePropertyRow = ({
  name,
  value: initialValue,
  onClick,
-  tooltip,
  entityId,
  entityType,
  sourceId,
@@ -55,11 +54,11 @@ const EditablePropertyRow = ({
  // Component state
  const { t } = useTranslation()
  const [isEditing, setIsEditing] = useState(false)
-  const [editValue, setEditValue] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [currentValue, setCurrentValue] = useState(initialValue)
  const inputRef = useRef<HTMLInputElement>(null)

+
  /**
   * Update currentValue when initialValue changes from parent
   */
@@ -72,7 +71,6 @@ const EditablePropertyRow = ({
   */
  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(() => {
@@ -82,7 +80,7 @@ const EditablePropertyRow = ({
        }
      }, 50)
    }
-  }, [isEditing, currentValue])
+  }, [isEditing])

  /**
   * Get translated property name from i18n
@@ -95,25 +93,19 @@ const EditablePropertyRow = ({
  }

  /**
-   * Handle double-click event to enter edit mode
+   * Handle edit icon click to open dialog
   */
-  const handleDoubleClick = () => {
+  const handleEditClick = () => {
    if (isEditable && !isEditing) {
      setIsEditing(true)
    }
  }

  /**
-   * Handle keyboard events in the input field
-   * - Enter: Save changes
-   * - Escape: Cancel editing
+   * Handle dialog close without saving
   */
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSave()
-    } else if (e.key === 'Escape') {
-      setIsEditing(false)
-    }
+  const handleCancel = () => {
+    setIsEditing(false)
  }

  /**
@@ -300,12 +292,12 @@ const EditablePropertyRow = ({
   * Save changes to the property value
   * Updates both the API and the graph visualization
   */
-  const handleSave = async () => {
+  const handleSave = async (value: string) => {
    // Prevent duplicate submissions
    if (isSubmitting) return

    // Skip if value hasn't changed
-    if (editValue === String(currentValue)) {
+    if (value === String(currentValue)) {
      setIsEditing(false)
      return
    }
@@ -315,44 +307,44 @@ const EditablePropertyRow = ({
    try {
      // Handle node property updates
      if (entityType === 'node' && entityId) {
-        let updatedData = { [name]: editValue }
+        let updatedData = { [name]: value }

        // Special handling for entity_id (name) changes
        if (name === 'entity_id') {
          // Check if the new name already exists
-          const exists = await checkEntityNameExists(editValue)
+          const exists = await checkEntityNameExists(value)
          if (exists) {
            toast.error(t('graphPanel.propertiesView.errors.duplicateName'))
            setIsSubmitting(false)
            return
          }
          // For entity_id, we update entity_name in the API
-          updatedData = { 'entity_name': editValue }
+          updatedData = { 'entity_name': value }
        }

        // Update entity in API
        await updateEntity(entityId, updatedData, true)
        // Update graph visualization
-        await updateGraphNode(entityId, name, editValue)
+        await updateGraphNode(entityId, name, value)
        toast.success(t('graphPanel.propertiesView.success.entityUpdated'))
      }
      // Handle edge property updates
      else if (entityType === 'edge' && sourceId && targetId) {
-        const updatedData = { [name]: editValue }
+        const updatedData = { [name]: value }
        // Update relation in API
        await updateRelation(sourceId, targetId, updatedData)
        // Update graph visualization
-        await updateGraphEdge(sourceId, targetId, name, editValue)
+        await updateGraphEdge(sourceId, targetId, name, value)
        toast.success(t('graphPanel.propertiesView.success.relationUpdated'))
      }

      // Update local state
      setIsEditing(false)
-      setCurrentValue(editValue)
+      setCurrentValue(value)

      // Notify parent component if callback provided
      if (onValueChange) {
-        onValueChange(editValue)
+        onValueChange(value)
      }
    } catch (error) {
      console.error('Error updating property:', error)
@@ -364,58 +356,43 @@ const EditablePropertyRow = ({

  /**
   * Render the property row with edit functionality
-   * Shows property name, edit icon, and either the editable input or the current value
+   * Shows property name, edit icon, and the current value
   */
  return (
-    <div className="flex items-center gap-1" onDoubleClick={handleDoubleClick}>
+    <div className="flex items-center gap-1">
      {/* 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}
+      {/* Edit icon without tooltip */}
+      <div>
+        <PencilIcon
+          className="h-3 w-3 text-gray-500 hover:text-gray-700 cursor-pointer"
+          onClick={handleEditClick}
        />
-      ) : (
-        // Text display when not editing
-        <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={currentValue}
-            tooltip={tooltip || (typeof currentValue === 'string' ? currentValue : JSON.stringify(currentValue, null, 2))}
-            side="left"
-            onClick={onClick}
-          />
-        </div>
-      )}
+      </div>:
+
+      {/* Text display */}
+      <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={currentValue}
+          side="left"
+          onClick={onClick}
+        />
+      </div>
+
+      {/* Edit dialog */}
+      <PropertyEditDialog
+        isOpen={isEditing}
+        onClose={handleCancel}
+        onSave={handleSave}
+        propertyName={name}
+        initialValue={String(currentValue)}
+        isSubmitting={isSubmitting}
+      />
    </div>
  )
 }
--- a/lightrag_webui/src/components/graph/PropertyEditDialog.tsx
+++ b/lightrag_webui/src/components/graph/PropertyEditDialog.tsx
@@ -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
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -33,7 +33,8 @@
    "guestMode": "وضع بدون تسجيل دخول"
  },
  "common": {
-    "cancel": "إلغاء"
+    "cancel": "إلغاء",
+    "save": "حفظ"
  },
  "documentPanel": {
    "clearDocuments": {
@@ -236,12 +237,14 @@
      "vectorStorage": "تخزين المتجهات"
    },
    "propertiesView": {
+      "editProperty": "تعديل {{property}}",
+      "editPropertyDescription": "قم بتحرير قيمة الخاصية في منطقة النص أدناه.",
      "errors": {
        "duplicateName": "اسم العقدة موجود بالفعل",
        "updateFailed": "فشل تحديث العقدة",
        "tryAgainLater": "يرجى المحاولة مرة أخرى لاحقًا"
      },
-      "doubleClickToEdit": "انقر نقرًا مزدوجًا للتعديل",
+
      "success": {
        "entityUpdated": "تم تحديث العقدة بنجاح",
        "relationUpdated": "تم تحديث العلاقة بنجاح"
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -33,7 +33,8 @@
    "guestMode": "Login Free"
  },
  "common": {
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "save": "Save"
  },
  "documentPanel": {
    "clearDocuments": {
@@ -235,12 +236,14 @@
      "vectorStorage": "Vector Storage"
    },
    "propertiesView": {
+      "editProperty": "Edit {{property}}",
+      "editPropertyDescription": "Edit the property value in the text area below.",
      "errors": {
        "duplicateName": "Node name already exists",
        "updateFailed": "Failed to update node",
        "tryAgainLater": "Please try again later"
      },
-      "doubleClickToEdit": "Double click to edit",
+
      "success": {
        "entityUpdated": "Node updated successfully",
        "relationUpdated": "Relation updated successfully"
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -33,7 +33,8 @@
    "guestMode": "Mode sans connexion"
  },
  "common": {
-    "cancel": "Annuler"
+    "cancel": "Annuler",
+    "save": "Sauvegarder"
  },
  "documentPanel": {
    "clearDocuments": {
@@ -236,6 +237,8 @@
      "vectorStorage": "Stockage vectoriel"
    },
    "propertiesView": {
+      "editProperty": "Modifier {{property}}",
+      "editPropertyDescription": "Modifiez la valeur de la propriété dans la zone de texte ci-dessous.",
      "errors": {
        "duplicateName": "Le nom du nœud existe déjà",
        "updateFailed": "Échec de la mise à jour du nœud",
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -33,7 +33,8 @@
    "guestMode": "无需登陆"
  },
  "common": {
-    "cancel": "取消"
+    "cancel": "取消",
+    "save": "保存"
  },
  "documentPanel": {
    "clearDocuments": {
@@ -236,12 +237,14 @@
      "vectorStorage": "向量存储"
    },
    "propertiesView": {
+      "editProperty": "编辑{{property}}",
+      "editPropertyDescription": "在下方文本区域编辑属性值。",
      "errors": {
        "duplicateName": "节点名称已存在",
        "updateFailed": "更新节点失败",
        "tryAgainLater": "请稍后重试"
      },
-      "doubleClickToEdit": "双击编辑",
+
      "success": {
        "entityUpdated": "节点更新成功",
        "relationUpdated": "关系更新成功"