Merge pull request #600 from actiontech/fix/sqle-ee-issue-2192

[chore](KnowledgeGraph): Add reset clickedNode state on focus and change events
actiontech · Feb 27, 2025 · 0004e21 · 0004e21
2 parents 4fb48cd + a097460
commit 0004e21
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/sqle/src/page/Knowledge/Graph/__tests__/__snapshots__/index.test.tsx.snap b/packages/sqle/src/page/Knowledge/Graph/__tests__/__snapshots__/index.test.tsx.snap
@@ -34,6 +34,7 @@ exports[`KnowledgeGraph should match snapshot 1`] = `
     >
       <Fa2 />
       <LoadGraph
+        clickedNode={null}
         graphData={
           {
             "edges": [],
@@ -42,6 +43,7 @@ exports[`KnowledgeGraph should match snapshot 1`] = `
         }
         hoveredNode={null}
         onLoaded={[Function]}
+        setClickedNode={[Function]}
         setHoveredNode={[Function]}
       />
       <FocusOnNode

diff --git a/packages/sqle/src/page/Knowledge/Graph/components/LoadGraph.tsx b/packages/sqle/src/page/Knowledge/Graph/components/LoadGraph.tsx
@@ -4,7 +4,7 @@ import {
   useSetSettings,
   useSigma
 } from '@react-sigma/core';
-import { FC, useEffect, useState } from 'react';
+import { Dispatch, FC, SetStateAction, useEffect } from 'react';
 import useGraph from '../hooks/useGraph';
 import { EdgeType, NodeType } from '../index.type';
 import {
@@ -20,12 +20,16 @@ type props = {
   };
   hoveredNode: string | null;
   setHoveredNode: (node: string | null) => void;
+  clickedNode: string | null;
+  setClickedNode: Dispatch<SetStateAction<string | null>>;
   onLoaded?: () => void;
 };
 const LoadGraph: FC<props> = ({
   graphData,
   hoveredNode,
   setHoveredNode,
+  clickedNode,
+  setClickedNode,
   onLoaded
 }) => {
   const { createGraph } = useGraph();
@@ -34,7 +38,6 @@ const LoadGraph: FC<props> = ({
   const setSettings = useSetSettings<NodeType, EdgeType>();
   const loadGraph = useLoadGraph<NodeType, EdgeType>();
   const { sharedTheme } = useThemeStyleData();
-  const [clickedNode, setClickedNode] = useState<string | null>(null);
 
   useEffect(() => {
     if (graphData) {
@@ -69,7 +72,8 @@ const LoadGraph: FC<props> = ({
     registerEvents,
     setHoveredNode,
     sigma,
-    onLoaded
+    onLoaded,
+    setClickedNode
   ]);
 
   useEffect(() => {

diff --git a/packages/sqle/src/page/Knowledge/Graph/index.tsx b/packages/sqle/src/page/Knowledge/Graph/index.tsx
@@ -66,13 +66,15 @@ const KnowledgeGraph: React.FC<KnowledgeGraphProp> = ({ graphData }) => {
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [hoveredNode, setHoveredNode] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [clickedNode, setClickedNode] = useState<string | null>(null);
 
   const onFocus = useCallback((value: GraphSearchOption | null) => {
     if (value === null) {
       setFocusNode(null);
     } else if (value.type === 'nodes') {
       setFocusNode(value.id);
     }
+    setClickedNode(null);
   }, []);
 
   const onChange = useCallback((value: GraphSearchOption | null) => {
@@ -81,6 +83,7 @@ const KnowledgeGraph: React.FC<KnowledgeGraphProp> = ({ graphData }) => {
     } else if (value.type === 'nodes') {
       setSelectedNode(value.id);
     }
+    setClickedNode(null);
   }, []);
 
   const handleGraphLoaded = useCallback(() => {
@@ -132,6 +135,8 @@ const KnowledgeGraph: React.FC<KnowledgeGraphProp> = ({ graphData }) => {
             hoveredNode={hoveredNode}
             setHoveredNode={setHoveredNode}
             onLoaded={handleGraphLoaded}
+            clickedNode={clickedNode}
+            setClickedNode={setClickedNode}
           />
           <FocusOnNode
             node={focusNode ?? selectedNode}