[chore](sqle/knowledge) optimization graph

jest.config.js

@@ -15,8 +15,7 @@ module.exports = {
   },
   transformIgnorePatterns: [
     '/dist/',
-    // Ignore modules without es dir.
-    'node_modules/(?!(?:.pnpm/)?(.+/es))[^/]+?/(?!(es|node_modules)/)'
+    'node_modules/(?!(?:.pnpm/)?(@react-sigma|.+/es))[^/]+?/(?!(es|node_modules)/)'
   ],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx', 'node'],
   testEnvironment: 'jest-environment-jsdom',
@@ -35,18 +34,18 @@ module.exports = {
       '<rootDir>/packages/shared/lib/testUtil/mockSigmaCore.tsx',
     '@react-sigma/graph-search$':
       '<rootDir>/packages/shared/lib/testUtil/mockSigmaGraphSearch.tsx',
-    '@sigma/node-image$':
-      '<rootDir>/packages/shared/lib/testUtil/mockSigmaNodeImage.tsx',
     ...pathsToModuleNameMapper(compilerOptions.paths)
   },
+
   collectCoverageFrom: [
     'packages/**/{src,lib}/{page,components,hooks,global,store,utils}/**/*.{ts,tsx}',
     'packages/**/src/App.tsx',
     'packages/shared/api/common/**',
     '!packages/**/index.type.ts',
     '!packages/**/index.enum.ts',
     '!packages/sqle/src/page/SqlAnalyze/SqlAnalyze/ProcessListCom/**',
-    '!packages/shared/lib/hooks/usePrompt/index.tsx'
+    '!packages/shared/lib/hooks/usePrompt/index.tsx',
+    '!packages/sqle/src/page/Knowledge/Graph/components/**'
   ],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
   reporters: [

packages/base/src/page/DataSource/components/List/index.tsx

@@ -220,7 +220,7 @@ const DataSourceList = () => {
           hide();
         });
     },
-    [messageApi, modalApi, projectID, t]
+    [messageApi, modalApi, projectID, refresh, t]
   );
 
   const batchTestDatabaseConnection = () => {

packages/base/vite.config.mts

@@ -114,7 +114,7 @@ export default defineConfig((config) => {
       open: true,
       proxy: {
         '^(/v|/sqle/v)': {
-          target: 'http://10.186.62.32:9999'
+          target: 'http://10.186.62.13:11000/'
         },
         '^/provision/v': {
           target: 'http://10.186.62.13:11000/'

packages/sqle/package.json

@@ -9,9 +9,11 @@
     "@react-sigma/core": "^5.0.2",
     "@react-sigma/graph-search": "^5.0.3",
     "@react-sigma/layout-force": "^5.0.2",
-    "@sigma/node-image": "^3.0.0",
+    "@react-sigma/layout-forceatlas2": "^5.0.2",
     "@uiw/react-md-editor": "^3.23.5",
     "graphology": "^0.25.4",
+    "graphology-communities-louvain": "^2.0.2",
+    "iwanthue": "^2.0.0",
     "react-grid-layout": "^1.3.4",
     "react-infinite-scroll-component": "^6.1.0",
     "rehype-sanitize": "^6.0.0",

packages/sqle/src/page/GlobalDashboard/index.tsx

@@ -5,7 +5,7 @@ import {
 } from '@actiontech/shared';
 import useDashboardFilter from './hooks/useDashboardFilter';
 import GlobalDashboardTableFilter from './components/TableFilter';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { GlobalDashBoardSegmentedEnum } from './index.type';
 import { useTranslation } from 'react-i18next';
 import { Space } from 'antd';

packages/sqle/src/page/Knowledge/Graph/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KnowledgeGraph should match snapshot 1`] = `
+<Styled(div)>
+  <Spin
+    spinning={true}
+    tip="加载知识图谱中..."
+  >
+    <mockConstructor
+      className="sigma-container"
+      settings={
+        {
+          "allowInvalidContainer": true,
+          "defaultEdgeType": "line",
+          "defaultNodeType": "circle",
+          "hideEdgesOnMove": false,
+          "hideLabelsOnMove": false,
+          "labelDensity": 0.1,
+          "labelFont": "'PlusJakartaSans Medium', -apple-system, 'Microsoft YaHei',
+  BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
+  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  'Noto Color Emoji",
+          "labelGridCellSize": 150,
+          "labelRenderedSizeThreshold": 8,
+          "labelSize": 14,
+          "maxCameraRatio": 10,
+          "minCameraRatio": 0.1,
+          "nodeProgramClasses": {},
+          "renderEdgeLabels": false,
+          "renderLabels": true,
+          "zoomToSizeRatioFunction": [Function],
+        }
+      }
+    >
+      <Fa2 />
+      <LoadGraph
+        graphData={
+          {
+            "edges": [],
+            "nodes": [],
+          }
+        }
+        hoveredNode={null}
+        onLoaded={[Function]}
+        setHoveredNode={[Function]}
+      />
+      <FocusOnNode
+        move={true}
+        node={null}
+      />
+      <mockConstructor
+        className="graph-control-container"
+        position="bottom-right"
+      >
+        <mockConstructor />
+        <mockConstructor />
+      </mockConstructor>
+      <mockConstructor
+        className="graph-control-container"
+        position="top-right"
+      >
+        <mockConstructor
+          onChange={[Function]}
+          onFocus={[Function]}
+          postSearchResult={[Function]}
+          type="nodes"
+          value={null}
+        />
+      </mockConstructor>
+      <NodePopover
+        nodeId={null}
+      />
+    </mockConstructor>
+  </Spin>
+</Styled(div)>
+`;

packages/sqle/src/page/Knowledge/Graph/__tests__/index.test.tsx

@@ -0,0 +1,23 @@
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import KnowledgeGraph from '..';
+
+describe('KnowledgeGraph', () => {
+  const mockGraphData = {
+    nodes: [],
+    edges: []
+  };
+
+  beforeEach(() => {});
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('should match snapshot', () => {
+    expect(
+      toJson(shallow(<KnowledgeGraph graphData={mockGraphData} />))
+    ).toMatchSnapshot();
+  });
+});

packages/sqle/src/page/Knowledge/Graph/components/Fa2.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useWorkerLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2';
+
+const Fa2: React.FC = () => {
+  const { start, kill, stop } = useWorkerLayoutForceAtlas2({
+    settings: {
+      slowDown: 10,
+      gravity: 1, // 增加重力，防止节点飞散
+      strongGravityMode: false,
+      scalingRatio: 2, // 增加节点间斥力
+      linLogMode: true, // 使用对数模式，更好地处理大图
+      outboundAttractionDistribution: true, // 基于度数分布吸引力
+      adjustSizes: true // 考虑节点大小
+    }
+  });
+
+  useEffect(() => {
+    // start FA2
+    start();
+
+    const timer = setTimeout(() => {
+      stop();
+    }, 10000);
+
+    // Kill FA2 on unmount
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      kill();
+    };
+  }, [start, kill, stop]);
+
+  return null;
+};
+export default Fa2;

packages/sqle/src/page/Knowledge/Graph/common/LoadGraph.tsx → packages/sqle/src/page/Knowledge/Graph/components/LoadGraph.tsx

@@ -4,7 +4,7 @@ import {
   useSetSettings,
   useSigma
 } from '@react-sigma/core';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import useGraph from '../hooks/useGraph';
 import { EdgeType, NodeType } from '../index.type';
 import {
@@ -34,30 +34,32 @@ 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) {
       const graph = createGraph(graphData);
       loadGraph(graph);
       onLoaded?.();
 
-      const handleEnterNode = (event: any) => {
-        setHoveredNode(event.node);
-      };
-
-      const handleLeaveNode = () => {
-        setHoveredNode(null);
-      };
-
       registerEvents({
-        enterNode: handleEnterNode,
-        leaveNode: handleLeaveNode
+        enterNode: (event) => {
+          setHoveredNode(event.node);
+        },
+        leaveNode: () => {
+          setHoveredNode(null);
+        },
+        clickNode: (event) => {
+          setClickedNode((nodeId) =>
+            nodeId === event.node ? null : event.node
+          );
+        }
       });
 
       return () => {
-        // 清理事件监听
         sigma.removeAllListeners('enterNode');
         sigma.removeAllListeners('leaveNode');
+        sigma.removeAllListeners('clickNode');
       };
     }
   }, [
@@ -79,6 +81,18 @@ const LoadGraph: FC<props> = ({
           highlighted: data.highlighted || false
         };
 
+        if (clickedNode && graph.hasNode(clickedNode)) {
+          const isNeighbor =
+            node === clickedNode || graph.neighbors(clickedNode).includes(node);
+          if (isNeighbor) {
+            newData.highlighted = true;
+          } else {
+            newData.color = sharedTheme.uiToken.colorFillSecondary;
+            newData.highlighted = false;
+          }
+          return newData;
+        }
+
         if (hoveredNode && graph.hasNode(hoveredNode)) {
           const isNeighbor =
             node === hoveredNode || graph.neighbors(hoveredNode).includes(node);
@@ -106,7 +120,13 @@ const LoadGraph: FC<props> = ({
         return newData;
       }
     });
-  }, [hoveredNode, setSettings, sharedTheme.uiToken.colorFillSecondary, sigma]);
+  }, [
+    clickedNode,
+    hoveredNode,
+    setSettings,
+    sharedTheme.uiToken.colorFillSecondary,
+    sigma
+  ]);
 
   return null;
 };

packages/sqle/src/page/Knowledge/Graph/common/NodePopover.tsx → packages/sqle/src/page/Knowledge/Graph/components/NodePopover.tsx

@@ -50,7 +50,7 @@ const NodePopover: React.FC<NodePopoverProps> = ({ nodeId }) => {
 
       // 考虑左侧菜单栏和顶部区域的偏移
       const MENU_WIDTH = 270;
-      const HEADER_HEIGHT = 160;
+      const HEADER_HEIGHT = 156;
 
       const finalPosition = {
         x: containerRect.left + viewportPos.x - MENU_WIDTH,