From 272b10197436b05b89c5bba91b6a5d087394c659 Mon Sep 17 00:00:00 2001
From: choizhang <choizhang@qq.com>
Date: Sat, 12 Apr 2025 14:33:40 +0800
Subject: [PATCH] feat: Add double-click editing prompt text and optimize
 editable attribute line style

---
 .../components/graph/EditablePropertyRow.tsx  | 20 ++++++----
 lightrag_webui/src/locales/ar.json            | 36 +++++-------------
 lightrag_webui/src/locales/en.json            |  1 +
 lightrag_webui/src/locales/fr.json            | 37 ++++++-------------
 lightrag_webui/src/locales/zh.json            |  1 +
 5 files changed, 36 insertions(+), 59 deletions(-)

diff --git a/lightrag_webui/src/components/graph/EditablePropertyRow.tsx b/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
index b6dc2588..bf583a0e 100644
--- a/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
+++ b/lightrag_webui/src/components/graph/EditablePropertyRow.tsx
@@ -5,6 +5,7 @@ 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'
 
 interface EditablePropertyRowProps {
   name: string
@@ -222,9 +223,17 @@ const EditablePropertyRow = ({
 
   return (
     <div className="flex items-center gap-2">
-      <span className="text-primary/60 tracking-wide whitespace-nowrap">
+      <div className="flex items-center gap-1 text-primary/60 tracking-wide whitespace-nowrap">
         {getPropertyNameTranslation(name)}
-      </span>:
+        {isEditableField && (
+          <div className="group relative">
+            <PencilIcon className="w-3 h-3 opacity-50 hover:opacity-100" />
+            <div className="absolute left-5 transform -translate-y-full -top-2 bg-primary/90 text-white text-xs px-3 py-1.5 rounded shadow-lg border border-primary/20 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-[100]">
+              {t('graphPanel.propertiesView.doubleClickToEdit')}
+            </div>
+          </div>
+        )}
+      </div>:
       {isEditing ? (
         <div className="flex-1">
           <Input
@@ -238,20 +247,17 @@ const EditablePropertyRow = ({
           />
         </div>
       ) : (
-        // Wrap Text component in a div to handle onDoubleClick
         <div
-          className={`flex-1 overflow-hidden ${isEditableField ? 'cursor-text' : ''}`} // Apply cursor style to wrapper
+          className={`flex-1 overflow-hidden ${isEditableField ? 'cursor-text' : ''}`}
           onDoubleClick={isEditableField ? handleDoubleClick : undefined}
         >
           <Text
-            className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis block w-full" // Ensure Text fills the div
+            className="hover:bg-primary/20 rounded p-1 overflow-hidden text-ellipsis block w-full"
             tooltipClassName="max-w-80"
-            // Ensure the text prop always receives a string representation
             text={String(value)}
             tooltip={tooltip || (typeof value === 'string' ? value : JSON.stringify(value, null, 2))}
             side="left"
             onClick={onClick}
-            // Removed onDoubleClick from Text component
           />
         </div>
       )}
diff --git a/lightrag_webui/src/locales/ar.json b/lightrag_webui/src/locales/ar.json
index 9b227d47..315bfe48 100644
--- a/lightrag_webui/src/locales/ar.json
+++ b/lightrag_webui/src/locales/ar.json
@@ -35,32 +35,6 @@
   "common": {
     "cancel": "إلغاء"
   },
-  "graphPanel": {
-    "propertiesView": {
-      "errors": {
-        "duplicateName": "اسم العقدة موجود بالفعل",
-        "updateFailed": "فشل تحديث العقدة",
-        "tryAgainLater": "يرجى المحاولة مرة أخرى لاحقاً"
-      },
-      "success": {
-        "entityUpdated": "تم تحديث العقدة بنجاح",
-        "relationUpdated": "تم تحديث العلاقة بنجاح"
-      },
-      "node": {
-        "title": "عقدة",
-        "id": "المعرف",
-        "labels": "التسميات",
-        "degree": "الدرجة",
-        "properties": "الخصائص",
-        "relationships": "العلاقات (ضمن الرسم البياني الفرعي)",
-        "expandNode": "توسيع العقدة",
-        "pruneNode": "تقليم العقدة",
-        "deleteAllNodesError": "رفض حذف جميع العقد في الرسم البياني",
-        "nodesRemoved": "تم حذف {{count}} عقدة، بما في ذلك العقد اليتيمة",
-        "noNewNodes": "لم يتم العثور على عقد قابلة للتوسيع"
-      }
-    }
-  },
   "documentPanel": {
     "clearDocuments": {
       "button": "مسح",
@@ -262,6 +236,16 @@
       "vectorStorage": "تخزين المتجهات"
     },
     "propertiesView": {
+      "errors": {
+        "duplicateName": "اسم العقدة موجود بالفعل",
+        "updateFailed": "فشل تحديث العقدة",
+        "tryAgainLater": "يرجى المحاولة مرة أخرى لاحقًا"
+      },
+      "doubleClickToEdit": "انقر نقرًا مزدوجًا للتعديل",
+      "success": {
+        "entityUpdated": "تم تحديث العقدة بنجاح",
+        "relationUpdated": "تم تحديث العلاقة بنجاح"
+      },
       "node": {
         "title": "عقدة",
         "id": "المعرف",
diff --git a/lightrag_webui/src/locales/en.json b/lightrag_webui/src/locales/en.json
index a7119cbd..fb420ba1 100644
--- a/lightrag_webui/src/locales/en.json
+++ b/lightrag_webui/src/locales/en.json
@@ -240,6 +240,7 @@
         "updateFailed": "Failed to update node",
         "tryAgainLater": "Please try again later"
       },
+      "doubleClickToEdit": "Double click to edit",
       "success": {
         "entityUpdated": "Node updated successfully",
         "relationUpdated": "Relation updated successfully"
diff --git a/lightrag_webui/src/locales/fr.json b/lightrag_webui/src/locales/fr.json
index f4894d86..325d73d3 100644
--- a/lightrag_webui/src/locales/fr.json
+++ b/lightrag_webui/src/locales/fr.json
@@ -35,32 +35,7 @@
   "common": {
     "cancel": "Annuler"
   },
-  "graphPanel": {
-    "propertiesView": {
-      "errors": {
-        "duplicateName": "Le nom du nœud existe déjà",
-        "updateFailed": "Échec de la mise à jour du nœud",
-        "tryAgainLater": "Veuillez réessayer plus tard"
-      },
-      "success": {
-        "entityUpdated": "Nœud mis à jour avec succès",
-        "relationUpdated": "Relation mise à jour avec succès"
-      },
-      "node": {
-        "title": "Nœud",
-        "id": "ID",
-        "labels": "Étiquettes",
-        "degree": "Degré",
-        "properties": "Propriétés",
-        "relationships": "Relations(dans le sous-graphe)",
-        "expandNode": "Développer le nœud",
-        "pruneNode": "Élaguer le nœud",
-        "deleteAllNodesError": "Refus de supprimer tous les nœuds du graphe",
-        "nodesRemoved": "{{count}} nœuds supprimés, y compris les nœuds orphelins",
-        "noNewNodes": "Aucun nœud extensible trouvé"
-      }
-    }
-  },
+
   "documentPanel": {
     "clearDocuments": {
       "button": "Effacer",
@@ -262,6 +237,16 @@
       "vectorStorage": "Stockage vectoriel"
     },
     "propertiesView": {
+      "errors": {
+        "duplicateName": "Le nom du nœud existe déjà",
+        "updateFailed": "Échec de la mise à jour du nœud",
+        "tryAgainLater": "Veuillez réessayer plus tard"
+      },
+      "doubleClickToEdit": "Double-cliquez pour modifier",
+      "success": {
+        "entityUpdated": "Nœud mis à jour avec succès",
+        "relationUpdated": "Relation mise à jour avec succès"
+      },
       "node": {
         "title": "Nœud",
         "id": "ID",
diff --git a/lightrag_webui/src/locales/zh.json b/lightrag_webui/src/locales/zh.json
index beeb56d4..1bbfbbf6 100644
--- a/lightrag_webui/src/locales/zh.json
+++ b/lightrag_webui/src/locales/zh.json
@@ -241,6 +241,7 @@
         "updateFailed": "更新节点失败",
         "tryAgainLater": "请稍后重试"
       },
+      "doubleClickToEdit": "双击编辑",
       "success": {
         "entityUpdated": "节点更新成功",
         "relationUpdated": "关系更新成功"