diff --git a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx b/react-ui/src/pages/Model/components/ModelEvolution/index.tsx index 63d116ad..3557c12e 100644 --- a/react-ui/src/pages/Model/components/ModelEvolution/index.tsx +++ b/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} diff --git a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx index 110d28ce..730afaac 100644 --- a/react-ui/src/pages/Model/components/ModelMetrics/index.tsx +++ b/react-ui/src/pages/Model/components/ModelMetrics/index.tsx @@ -150,11 +150,14 @@ function ModelMetrics({ resourceId, identifier, owner, version }: ModelMetricsPr // 表头 const columns: TableProps['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: '基本信息', diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.less b/react-ui/src/pages/Model/components/NodeTooltips/index.less index eabb979a..420fbacc 100644 --- a/react-ui/src/pages/Model/components/NodeTooltips/index.less +++ b/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; diff --git a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx b/react-ui/src/pages/Model/components/NodeTooltips/index.tsx index 8a0f055e..1e95a5c1 100644 --- a/react-ui/src/pages/Model/components/NodeTooltips/index.tsx +++ b/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 = ; } + const style = isLeft + ? { left: `${x}px`, bottom: `${y}px` } + : { right: `${x}px`, bottom: `${y}px` }; return (