From 277771540307fc1fa35efa0a385e42063d61a9d7 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Fri, 14 Mar 2025 03:33:40 +0800
Subject: [PATCH] Fix edge event and show edge label error

---
 .../src/components/graph/GraphControl.tsx     | 55 ++++++++++++++-----
 lightrag_webui/src/features/GraphViewer.tsx   |  8 +--
 2 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/lightrag_webui/src/components/graph/GraphControl.tsx b/lightrag_webui/src/components/graph/GraphControl.tsx
index 40030362..b7cf5502 100644
--- a/lightrag_webui/src/components/graph/GraphControl.tsx
+++ b/lightrag_webui/src/components/graph/GraphControl.tsx
@@ -34,6 +34,8 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
 
   const { theme } = useTheme()
   const hideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
+  const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
+  const renderEdgeLabels = useSettingsStore.use.showEdgeLabel()
   const selectedNode = useGraphStore.use.selectedNode()
   const focusedNode = useGraphStore.use.focusedNode()
   const selectedEdge = useGraphStore.use.selectedEdge()
@@ -59,39 +61,52 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     const { setFocusedNode, setSelectedNode, setFocusedEdge, setSelectedEdge, clearSelection } =
       useGraphStore.getState()
 
-    // Register the events
-    registerEvents({
-      enterNode: (event) => {
+    // Define event types
+    type NodeEvent = { node: string; event: { original: MouseEvent | TouchEvent } }
+    type EdgeEvent = { edge: string; event: { original: MouseEvent | TouchEvent } }
+    
+    // Register all events, but edge events will only be processed if enableEdgeEvents is true
+    const events: Record<string, any> = {
+      enterNode: (event: NodeEvent) => {
         if (!isButtonPressed(event.event.original)) {
           setFocusedNode(event.node)
         }
       },
-      leaveNode: (event) => {
+      leaveNode: (event: NodeEvent) => {
         if (!isButtonPressed(event.event.original)) {
           setFocusedNode(null)
         }
       },
-      clickNode: (event) => {
+      clickNode: (event: NodeEvent) => {
         setSelectedNode(event.node)
         setSelectedEdge(null)
       },
-      clickEdge: (event) => {
+      clickStage: () => clearSelection()
+    }
+    
+    // Only add edge event handlers if enableEdgeEvents is true
+    if (enableEdgeEvents) {
+      events.clickEdge = (event: EdgeEvent) => {
         setSelectedEdge(event.edge)
         setSelectedNode(null)
-      },
-      enterEdge: (event) => {
+      }
+      
+      events.enterEdge = (event: EdgeEvent) => {
         if (!isButtonPressed(event.event.original)) {
           setFocusedEdge(event.edge)
         }
-      },
-      leaveEdge: (event) => {
+      }
+      
+      events.leaveEdge = (event: EdgeEvent) => {
         if (!isButtonPressed(event.event.original)) {
           setFocusedEdge(null)
         }
-      },
-      clickStage: () => clearSelection()
-    })
-  }, [registerEvents])
+      }
+    }
+
+    // Register the events
+    registerEvents(events)
+  }, [registerEvents, enableEdgeEvents])
 
   /**
    * When component mount or hovered node change
@@ -102,7 +117,13 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     const labelColor = isDarkTheme ? Constants.labelColorDarkTheme : undefined
     const edgeColor = isDarkTheme ? Constants.edgeColorDarkTheme : undefined
 
+    // Update edge-related settings directly without recreating the sigma container
     setSettings({
+      // Update edge-specific settings
+      enableEdgeEvents,
+      renderEdgeLabels,
+      
+      // Node reducer for node appearance
       nodeReducer: (node, data) => {
         const graph = sigma.getGraph()
         const newData: NodeType & {
@@ -141,6 +162,8 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
         }
         return newData
       },
+      
+      // Edge reducer for edge appearance
       edgeReducer: (edge, data) => {
         const graph = sigma.getGraph()
         const newData = { ...data, hidden: false, labelColor, color: edgeColor }
@@ -182,7 +205,9 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
     sigma,
     disableHoverEffect,
     theme,
-    hideUnselectedEdges
+    hideUnselectedEdges,
+    enableEdgeEvents,
+    renderEdgeLabels
   ])
 
   return null
diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx
index 42ed912e..814b8696 100644
--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -124,9 +124,7 @@ const GraphViewer = () => {
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
   const renderLabels = useSettingsStore.use.showNodeLabel()
 
-  const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
   const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
-  const renderEdgeLabels = useSettingsStore.use.showEdgeLabel()
 
   // Handle component mount/unmount and tab visibility
   useEffect(() => {
@@ -146,14 +144,14 @@ const GraphViewer = () => {
     }
   }, [isGraphTabVisible, shouldRender, isFetching])
 
+  // Initialize sigma settings once on component mount
+  // Edge-related settings will be updated in GraphControl using useSetSettings
   useEffect(() => {
     setSigmaSettings({
       ...defaultSigmaSettings,
-      enableEdgeEvents,
-      renderEdgeLabels,
       renderLabels
     })
-  }, [renderLabels, enableEdgeEvents, renderEdgeLabels])
+  }, [renderLabels])
 
   const onSearchFocus = useCallback((value: GraphSearchOption | null) => {
     if (value === null) useGraphStore.getState().setFocusedNode(null)