Merge pull request #589 from actiontech/feature/graph-search

[feature](sqle/knowledge): optimize permission control and graph rendering
actiontech · Feb 14, 2025 · 4d0fb78 · 4d0fb78
2 parents bceb643 + 8baea80
commit 4d0fb78
Show file tree

Hide file tree

Showing 19 changed files with 334 additions and 137 deletions.
diff --git a/packages/base/public/static/image/knowledge.svg b/packages/base/public/static/image/knowledge.svg
diff --git a/packages/base/src/page/Nav/SideMenu/QuickActions/index.tsx b/packages/base/src/page/Nav/SideMenu/QuickActions/index.tsx
@@ -77,15 +77,13 @@ const QuickActions = () => {
           <ProfileSquareFilled width={18} height={18} color="currentColor" />
         )
       },
-      // #if [ee]
       {
         key: 'knowledge',
         title: t('dmsMenu.globalSettings.knowledge'),
         path: ROUTE_PATHS.SQLE.KNOWLEDGE.index.path,
         icon: <BookMarkOutlined width={18} height={18} color="currentColor" />,
         permission: PERMISSIONS.PAGES.SQLE.KNOWLEDGE
       }
-      // #endif
     ];
     return actionList.filter((item) => {
       if (!item.permission) {

diff --git a/packages/sqle/package.json b/packages/sqle/package.json
@@ -9,6 +9,7 @@
     "@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",
     "@uiw/react-md-editor": "^3.23.5",
     "graphology": "^0.25.4",
     "react-grid-layout": "^1.3.4",
@@ -20,8 +21,8 @@
   },
   "devDependencies": {
     "@types/react-grid-layout": "^1.3.2",
-    "jest-canvas-mock": "^2.2.0",
-    "graphology-types": "^0.24.8"
+    "graphology-types": "^0.24.8",
+    "jest-canvas-mock": "^2.2.0"
   },
   "scripts": {
     "start": "PORT=3030 craco start",

diff --git a/packages/sqle/src/locale/zh-CN/knowledgeBase.ts b/packages/sqle/src/locale/zh-CN/knowledgeBase.ts
@@ -1,12 +1,15 @@
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   pageTitle: '知识库',
+  ceTips:
+    '当您需要系统性学习数据库规范或日常开发需要了解特定SQL语法规范时，可以使用平台的数据库语法知识图谱功能，快速掌握SQL语法。',
   searchResults: {
     backToKnowledgeBase: '返回知识库',
     searchPlaceholder: '请输入关键字搜索你感兴趣的SQL语法'
   },
   graph: {
-    viewRelatedRules: '查看关联规则'
+    viewRelatedRules: '查看关联规则',
+    loadingTips: '加载知识图谱中...'
   },
   search: {
     retrieveKnowledgeGraph: '检索知识图谱',

diff --git a/packages/sqle/src/page/Knowledge/Common/KnowledgeSearchBar/index.tsx b/packages/sqle/src/page/Knowledge/Common/KnowledgeSearchBar/index.tsx
@@ -60,7 +60,7 @@ const KnowledgeSearchBar: React.FC<KnowledgeSearchBarProps> = (props) => {
           }}
           rows={1}
           bordered={false}
-          autoSize
+          autoSize={{ minRows: 1, maxRows: 3 }}
         />
         <div className="search-icon">
           <SearchOutlined width={20} height={20} onClick={handleSearch} />

diff --git a/packages/sqle/src/page/Knowledge/Graph/common/LoadGraph.tsx b/packages/sqle/src/page/Knowledge/Graph/common/LoadGraph.tsx
@@ -11,6 +11,7 @@ import {
   INodeResponse,
   IEdgeResponse
 } from '@actiontech/shared/lib/api/sqle/service/common';
+import useThemeStyleData from '../../../../hooks/useThemeStyleData';
 
 type props = {
   graphData?: {
@@ -19,18 +20,26 @@ type props = {
   };
   hoveredNode: string | null;
   setHoveredNode: (node: string | null) => void;
+  onLoaded?: () => void;
 };
-const LoadGraph: FC<props> = ({ graphData, hoveredNode, setHoveredNode }) => {
+const LoadGraph: FC<props> = ({
+  graphData,
+  hoveredNode,
+  setHoveredNode,
+  onLoaded
+}) => {
   const { createGraph } = useGraph();
   const sigma = useSigma<NodeType, EdgeType>();
   const registerEvents = useRegisterEvents<NodeType, EdgeType>();
   const setSettings = useSetSettings<NodeType, EdgeType>();
   const loadGraph = useLoadGraph<NodeType, EdgeType>();
+  const { sharedTheme } = useThemeStyleData();
 
   useEffect(() => {
     if (graphData) {
       const graph = createGraph(graphData);
       loadGraph(graph);
+      onLoaded?.();
 
       const handleEnterNode = (event: any) => {
         setHoveredNode(event.node);
@@ -57,7 +66,8 @@ const LoadGraph: FC<props> = ({ graphData, hoveredNode, setHoveredNode }) => {
     loadGraph,
     registerEvents,
     setHoveredNode,
-    sigma
+    sigma,
+    onLoaded
   ]);
 
   useEffect(() => {
@@ -70,19 +80,13 @@ const LoadGraph: FC<props> = ({ graphData, hoveredNode, setHoveredNode }) => {
         };
 
         if (hoveredNode && graph.hasNode(hoveredNode)) {
-          try {
-            const isNeighbor =
-              node === hoveredNode ||
-              graph.neighbors(hoveredNode).includes(node);
-            if (isNeighbor) {
-              newData.highlighted = true;
-            } else {
-              newData.color = '#E2E2E2';
-              newData.highlighted = false;
-            }
-          } catch (error) {
-            // 如果出现错误，保持节点原样
-            console.debug('Failed to process node highlighting:', error);
+          const isNeighbor =
+            node === hoveredNode || graph.neighbors(hoveredNode).includes(node);
+          if (isNeighbor) {
+            newData.highlighted = true;
+          } else {
+            newData.color = sharedTheme.uiToken.colorFillSecondary;
+            newData.highlighted = false;
           }
         }
         return newData;
@@ -93,20 +97,16 @@ const LoadGraph: FC<props> = ({ graphData, hoveredNode, setHoveredNode }) => {
         const newData = { ...data, hidden: false, size: edgeSize };
 
         if (hoveredNode && graph.hasNode(hoveredNode)) {
-          try {
-            if (graph.extremities(edge).includes(hoveredNode)) {
-              newData.size = edgeSize * 1.5;
-            } else {
-              newData.hidden = true;
-            }
-          } catch (error) {
-            console.debug('Failed to process edge highlighting:', error);
+          if (graph.extremities(edge).includes(hoveredNode)) {
+            newData.size = edgeSize * 1.5;
+          } else {
+            newData.hidden = true;
           }
         }
         return newData;
       }
     });
-  }, [hoveredNode, setSettings, sigma]);
+  }, [hoveredNode, setSettings, sharedTheme.uiToken.colorFillSecondary, sigma]);
 
   return null;
 };

diff --git a/packages/sqle/src/page/Knowledge/Graph/common/data.ts b/packages/sqle/src/page/Knowledge/Graph/common/data.ts
@@ -1,6 +1,8 @@
 import { SigmaContainerProps } from '@react-sigma/core';
 import { EdgeType, NodeType } from '../index.type';
 import { Attributes } from 'graphology-types';
+import { NodeProgramType } from 'sigma/rendering';
+import { NodeImageProgram } from '@sigma/node-image';
 
 export const sigmaSettings: SigmaContainerProps<
   NodeType,
@@ -9,25 +11,36 @@ export const sigmaSettings: SigmaContainerProps<
 >['settings'] = {
   // 允许在无效容器中渲染 (默认值: false)
   allowInvalidContainer: true,
-  defaultNodeType: 'circle',
+  defaultNodeType: 'image',
   // 设置边的默认类型 (默认值: 'line')
-  defaultEdgeType: 'arrow',
+  defaultEdgeType: 'line',
 
   // 相机缩放比例限制 (默认值: min: 0.1, max: 32)
   minCameraRatio: 0.2,
   maxCameraRatio: 5,
 
   // 节点渲染程序类 (默认值: {})
-  nodeProgramClasses: {},
+  nodeProgramClasses: {
+    image: NodeImageProgram as unknown as NodeProgramType<
+      NodeType,
+      EdgeType,
+      Attributes
+    >
+  },
 
   // 渲染性能优化
   hideEdgesOnMove: true, // 移动时隐藏边 (默认值: false)
   hideLabelsOnMove: false, // 移动时隐藏标签 (默认值: false)
   renderLabels: true, // 是否渲染标签 (默认值: true)
   renderEdgeLabels: false, // 是否渲染边标签 (默认值: false)
 
+  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`,
+  labelSize: 14,
   // 标签渲染优化
-  labelDensity: 0.1, // 标签密度 (默认值: 0.03)
+  labelDensity: 0.07, // 标签密度 (默认值: 0.03)
   labelGridCellSize: 100, // 标签网格大小 (默认值: 100)
   labelRenderedSizeThreshold: 8, // 标签大小阈值 (默认值: 6)
 

diff --git a/packages/sqle/src/page/Knowledge/Graph/hooks/useGraph.ts b/packages/sqle/src/page/Knowledge/Graph/hooks/useGraph.ts
@@ -5,9 +5,11 @@ import {
   INodeResponse
 } from '@actiontech/shared/lib/api/sqle/service/common';
 import { EdgeType, NodeType } from '../index.type';
+import useThemeStyleData from '../../../../hooks/useThemeStyleData';
 
 const useGraph = () => {
-  const randomColor = useCallback(() => {
+  const { sqleTheme } = useThemeStyleData();
+  const generateNodeColor = useCallback(() => {
     const digits = '0123456789abcdef';
     let code = '#';
     for (let i = 0; i < 6; i++) {
@@ -72,10 +74,11 @@ const useGraph = () => {
         graph.addNode(node.id, {
           label: node.name ?? '',
           size: normalizedSize,
-          color: randomColor(),
+          color: generateNodeColor(),
           x: 0.5 + radius * Math.cos(theta),
           y: 0.5 + radius * Math.sin(theta),
-          shortLabel: (node.name ?? '')[0]?.toUpperCase() ?? ''
+          shortLabel: (node.name ?? '')[0]?.toUpperCase() ?? '',
+          image: '/static/image/knowledge.svg'
         });
       });
 
@@ -90,13 +93,19 @@ const useGraph = () => {
 
         graph.addEdge(edge.from_id, edge.to_id, {
           size: normalizedSize,
-          forceLabel: false
+          forceLabel: false,
+          color: sqleTheme.knowledgeTheme.graph.edge.color
         });
       });
 
       return graph as Graph<NodeType, EdgeType>;
     },
-    [calculateNormalizedSize, getWeightRange, randomColor]
+    [
+      getWeightRange,
+      calculateNormalizedSize,
+      generateNodeColor,
+      sqleTheme.knowledgeTheme.graph.edge.color
+    ]
   );
 
   return { createGraph };