fix: 修复模型演化tooltip控件的位置不正确

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

@@ -45,6 +45,7 @@ function ModelEvolution({
   const [enterTooltip, setEnterTooltip] = useState(false);
   const [nodeTooltipX, setNodeToolTipX] = useState(0);
   const [nodeTooltipY, setNodeToolTipY] = useState(0);
+  const [isNodeTooltipLeft, setIsNodeTooltipLeft] = useState(true);
   const [hoverNodeData, setHoverNodeData] = useState<
     ModelDepsData | ProjectDependency | TrainDataset | undefined
   >(undefined);
@@ -141,19 +142,28 @@ function ModelEvolution({
       const { x, y } = model;
       const point = graph.getCanvasByPoint(x!, y!);
       const zoom = graph.getZoom();
-      // 更加缩放，调整 tooltip 位置
+
+      // 根据缩放，调整 tooltip 位置
       const offsetX = (nodeWidth * zoom) / 4;
       const offsetY = (nodeHeight * zoom) / 4;
-      point.x += offsetX;
+      // 25 是 `.model-evolution` 的 `padding-left` 值
+      const tooltipX = point.x + offsetX + 25;
+      // 20 是 `.model-evolution` 的 `padding-bottom` 值
+      const tooltipY = graphRef.current!.clientHeight - point.y + offsetY + 20;
+      setNodeToolTipY(tooltipY);
 
+      // 如果右边显示不下
       const canvasWidth = graphRef.current!.clientWidth;
-      if (point.x + 300 > canvasWidth + 30) {
-        point.x = canvasWidth + 30 - 300;
+      // 300 是 NodeTool 的宽度，canvasWidth + 50 是 `.model-evolution` 的宽度
+      if (tooltipX + 300 > canvasWidth + 50) {
+        setIsNodeTooltipLeft(false);
+        setNodeToolTipX(canvasWidth + 50 - (point.x - offsetX + 25));
+      } else {
+        setNodeToolTipX(tooltipX);
+        setIsNodeTooltipLeft(true);
       }
 
       setHoverNodeData(model);
-      setNodeToolTipX(point.x);
-      setNodeToolTipY(graphRef.current!.clientHeight - point.y + offsetY);
       setShowNodeTooltip(true);
     });
 
@@ -254,6 +264,7 @@ function ModelEvolution({
           resourceId={resourceId}
           x={nodeTooltipX}
           y={nodeTooltipY}
+          isLeft={isNodeTooltipLeft}
           data={hoverNodeData!}
           onVersionChange={onVersionChange}
           onMouseEnter={handleTooltipsMouseEnter}

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

@@ -150,11 +150,14 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr
 
   // 表头
   const columns: TableProps<TableData>['columns'] = useMemo(() => {
-    const first: TableData | undefined = tableData.find(
+    const firstMetrics: TableData | undefined = tableData.find(
       (item) => item.metrics_names && item.metrics_names.length > 0,
     );
-    const metricsNames = first?.metrics_names ?? [];
-    const paramsNames = first?.params_names ?? [];
+    const firstParams: TableData | undefined = tableData.find(
+      (item) => item.params_names && item.params_names.length > 0,
+    );
+    const metricsNames = firstMetrics?.metrics_names ?? [];
+    const paramsNames = firstParams?.params_names ?? [];
     return [
       {
         title: '基本信息',

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

@@ -1,7 +1,5 @@
 .node-tooltips {
   position: absolute;
-  bottom: -100px;
-  left: -300px;
   z-index: 10;
   width: 300px;
   padding: 10px;

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

@@ -180,6 +180,7 @@ type NodeTooltipsProps = {
   data: ModelDepsData | ProjectDependency | TrainDataset;
   x: number;
   y: number;
+  isLeft: boolean;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
   onVersionChange: (version: string) => void;
@@ -190,6 +191,7 @@ function NodeTooltips({
   data,
   x,
   y,
+  isLeft,
   onMouseEnter,
   onMouseLeave,
   onVersionChange,
@@ -208,10 +210,13 @@ function NodeTooltips({
   ) {
     Component = <ModelInfo resourceId={resourceId} data={data} onVersionChange={onVersionChange} />;
   }
+  const style = isLeft
+    ? { left: `${x}px`, bottom: `${y}px` }
+    : { right: `${x}px`, bottom: `${y}px` };
   return (
     <div
       className={styles['node-tooltips']}
-      style={{ left: `${x}px`, bottom: `${y}px` }}
+      style={style}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >