chore: 模型演化tooltip添加箭头

react-ui/src/pages/Model/components/ModelEvolution/index.tsx

@@ -51,6 +51,8 @@ function ModelEvolution({
   >(undefined);
   const apiData = useRef<ModelDepsData | undefined>(undefined); // 接口返回的树形结构
   const hierarchyNodes = useRef<ModelDepsData[]>([]); // 层级迭代树形结构，得到的节点列表
+  const leaveNodeTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const leaveTooltipTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     initGraph();
@@ -135,6 +137,12 @@ function ModelEvolution({
   // 绑定事件
   const bindEvents = () => {
     graph.on('node:mouseenter', (e: G6GraphEvent) => {
+      // 清除延时关闭tooltip的定时器
+      if (leaveNodeTimeout.current) {
+        clearTimeout(leaveNodeTimeout.current);
+        leaveNodeTimeout.current = null;
+      }
+
       const nodeItem = e.item;
       graph.setItemState(nodeItem, 'hover', true);
 
@@ -144,12 +152,12 @@ function ModelEvolution({
       const zoom = graph.getZoom();
 
       // 根据缩放，调整 tooltip 位置
-      const offsetX = (nodeWidth * zoom) / 4;
-      const offsetY = (nodeHeight * zoom) / 4;
+      // const offsetX = (nodeWidth * zoom) / 4;
+      const offsetY = (nodeHeight * zoom) / 2;
       // 25 是 `.model-evolution` 的 `padding-left` 值
-      const tooltipX = point.x + offsetX + 25;
+      const tooltipX = point.x + 25 - 20;
       // 20 是 `.model-evolution` 的 `padding-bottom` 值
-      const tooltipY = graphRef.current!.clientHeight - point.y + offsetY + 20;
+      const tooltipY = graphRef.current!.clientHeight - point.y + offsetY + 20 + 10;
       setNodeToolTipY(tooltipY);
 
       // 如果右边显示不下
@@ -157,7 +165,7 @@ function ModelEvolution({
       // 300 是 NodeTool 的宽度，canvasWidth + 50 是 `.model-evolution` 的宽度
       if (tooltipX + 300 > canvasWidth + 50) {
         setIsNodeTooltipLeft(false);
-        setNodeToolTipX(canvasWidth + 50 - (point.x - offsetX + 25));
+        setNodeToolTipX(canvasWidth + 50 - (point.x + 25) - 20);
       } else {
         setNodeToolTipX(tooltipX);
         setIsNodeTooltipLeft(true);
@@ -170,7 +178,9 @@ function ModelEvolution({
     graph.on('node:mouseleave', (e: G6GraphEvent) => {
       const nodeItem = e.item;
       graph.setItemState(nodeItem, 'hover', false);
-      setShowNodeTooltip(false);
+      leaveNodeTimeout.current = setTimeout(() => {
+        setShowNodeTooltip(false);
+      }, 100);
     });
 
     graph.on('node:click', (e: G6GraphEvent) => {
@@ -201,6 +211,12 @@ function ModelEvolution({
       setShowNodeTooltip(false);
       setEnterTooltip(false);
     });
+
+    // 开始拖拽画布时触发
+    graph.on('DRAG_START', () => {
+      setShowNodeTooltip(false);
+      setEnterTooltip(false);
+    });
   };
 
   // toggle 展开
@@ -215,11 +231,18 @@ function ModelEvolution({
   };
 
   const handleTooltipsMouseEnter = () => {
+    // 清除延时关闭tooltip的定时器
+    if (leaveTooltipTimeout.current) {
+      clearTimeout(leaveTooltipTimeout.current);
+      leaveTooltipTimeout.current = null;
+    }
     setEnterTooltip(true);
   };
 
   const handleTooltipsMouseLeave = () => {
-    setEnterTooltip(false);
+    leaveTooltipTimeout.current = setTimeout(() => {
+      setEnterTooltip(false);
+    }, 100);
   };
 
   // 获取模型依赖

react-ui/src/pages/Model/components/ModelEvolution/utils.tsx

@@ -33,7 +33,7 @@ export type Rect = {
 };
 
 export interface TrainDataset extends NodeConfig {
-  repo_id: number;
+  repo_id: string;
   name: string;
   version: string;
   identifier: string;

react-ui/src/pages/Model/components/NodeTooltips/index.less

@@ -8,6 +8,30 @@
   border-radius: 4px;
   box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
 
+  &::after {
+    position: absolute;
+    bottom: -8px; /* 让三角形紧贴 div 底部 */
+    left: 12px; /* 控制三角形相对 div 的位置 */
+    width: 0;
+    height: 0;
+    border-top: 8px solid white; /* 主要颜色 */
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+    content: '';
+  }
+
+  &::before {
+    position: absolute;
+    bottom: -10px; /* 边框略大，形成描边效果 */
+    left: 10px; /* 调整边框的偏移量，使其覆盖白色三角形 */
+    width: 0;
+    height: 0;
+    border-top: 10px solid #eaeaea; /* 这是边框颜色 */
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+    content: '';
+  }
+
   &__title {
     margin: 10px 0;
     color: @text-color;
@@ -57,3 +81,31 @@
     }
   }
 }
+
+.node-tooltips.node-tooltips--right {
+  &::after {
+    position: absolute;
+    right: 12px; /* 控制三角形相对 div 的位置 */
+    bottom: -8px; /* 让三角形紧贴 div 底部 */
+    left: auto;
+    width: 0;
+    height: 0;
+    border-top: 8px solid white; /* 主要颜色 */
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+    content: '';
+  }
+
+  &::before {
+    position: absolute;
+    right: 10px; /* 调整边框的偏移量，使其覆盖白色三角形 */
+    bottom: -10px; /* 边框略大，形成描边效果 */
+    left: auto;
+    width: 0;
+    height: 0;
+    border-top: 10px solid #eaeaea; /* 这是边框颜色 */
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+    content: '';
+  }
+}

react-ui/src/pages/Model/components/NodeTooltips/index.tsx

@@ -2,6 +2,7 @@ import { ResourceInfoTabKeys } from '@/pages/Dataset/components/ResourceInfo';
 import { getGitUrl } from '@/utils';
 import { formatDate } from '@/utils/date';
 import { useNavigate } from '@umijs/max';
+import classNames from 'classnames';
 import { ModelDepsData, NodeType, ProjectDependency, TrainDataset } from '../ModelEvolution/utils';
 import styles from './index.less';
 
@@ -215,7 +216,7 @@ function NodeTooltips({
     : { right: `${x}px`, bottom: `${y}px` };
   return (
     <div
-      className={styles['node-tooltips']}
+      className={classNames(styles['node-tooltips'], { [styles['node-tooltips--right']]: !isLeft })}
       style={style}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}