@kylincloud/flamegraph 0.35.20 → 0.35.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.20",
+  "version": "0.35.21",
   "description": "KylinCloud flamegraph renderer (Pyroscope-based)",
   "license": "Apache-2.0",
   "main": "dist/index.node.cjs.js",

package/src/Tooltip/Tooltip.module.scss

@@ -7,7 +7,7 @@
   color: var(--ps-tooltip-text);
   font-size: 12px;
   visibility: hidden;
-  z-index: 2;
+  z-index: 5;
   pointer-events: none;
 
   &.flamegraphDiffTooltip {

package/src/Tooltip/Tooltip.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
   useRef,
   useCallback,
+  useLayoutEffect,
   Dispatch,
   SetStateAction,
 } from 'react';
@@ -210,6 +211,52 @@ function getDiffColorByText(
   return undefined;
 }
 
+/**
+ * Tooltip 位置计算：默认右下；若越界则翻到左/上；最终 clamp 到视口内。
+ * 注意：Tooltip 使用 position: fixed，因此用 innerWidth/innerHeight 做视口碰撞检测最直接。
+ */
+const TOOLTIP_GAP_X = 12;
+const TOOLTIP_GAP_Y = 20;
+const TOOLTIP_PAD = 8;
+
+function clamp(v: number, min: number, max: number) {
+  if (max < min) return min;
+  return Math.max(min, Math.min(max, v));
+}
+
+function computeSafeTooltipPos(
+  x: number,
+  y: number,
+  tipW: number,
+  tipH: number
+) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const w = Math.max(0, tipW || 0);
+  const h = Math.max(0, tipH || 0);
+
+  // 默认：右下
+  let left = x + TOOLTIP_GAP_X;
+  let top = y + TOOLTIP_GAP_Y;
+
+  // 右侧溢出：翻到左边
+  if (left + w + TOOLTIP_PAD > vw) {
+    left = x - w - TOOLTIP_GAP_X;
+  }
+
+  // 底部溢出：翻到上边
+  if (top + h + TOOLTIP_PAD > vh) {
+    top = y - h - TOOLTIP_GAP_Y;
+  }
+
+  // 最终夹取到视口内
+  left = clamp(left, TOOLTIP_PAD, vw - w - TOOLTIP_PAD);
+  top = clamp(top, TOOLTIP_PAD, vh - h - TOOLTIP_PAD);
+
+  return { left, top };
+}
+
 export function Tooltip({
   shouldShowFooter = true,
   shouldShowTitle = true,
@@ -219,6 +266,8 @@ export function Tooltip({
   palette,
 }: TooltipProps) {
   const tooltipRef = useRef<HTMLDivElement>(null);
+  const lastPosRef = useRef<{ x: number; y: number } | null>(null);
+
   const [content, setContent] = React.useState({
     title: {
       text: '',
@@ -245,13 +294,17 @@ export function Tooltip({
         throw new Error('Missing tooltipElement');
       }
 
-      const left = Math.min(
-        e.clientX + 12,
-        window.innerWidth - tooltipRef.current.clientWidth - 20
-      );
-      const top = e.clientY + 20;
+      // 记录最后鼠标位置（给 useLayoutEffect 二次校正用）
+      lastPosRef.current = { x: e.clientX, y: e.clientY };
 
+      // 先更新内容（tooltip 高度可能因此变化）
       setTooltipContent(setContent, onMouseOut, e);
+
+      // 用当前已渲染的尺寸先算一次位置（内容变化后的真实尺寸会在 useLayoutEffect 再校正）
+      const w = tooltipRef.current.clientWidth || 0;
+      const h = tooltipRef.current.clientHeight || 0;
+
+      const { left, top } = computeSafeTooltipPos(e.clientX, e.clientY, w, h);
       setStyle({ top, left, visibility: 'visible' });
     },
     [setTooltipContent]
@@ -278,6 +331,24 @@ export function Tooltip({
     };
   }, [dataSourceRef.current, memoizedOnMouseMove]);
 
+  // 内容变化后用真实 DOM 尺寸做二次校正，避免“首次显示尺寸尚未更新导致仍越界”
+  useLayoutEffect(() => {
+    if (!tooltipRef.current) return;
+    if (!lastPosRef.current) return;
+    if (content.tooltipData.length === 0) return;
+
+    const { x, y } = lastPosRef.current;
+    const rect = tooltipRef.current.getBoundingClientRect();
+    const { left, top } = computeSafeTooltipPos(x, y, rect.width, rect.height);
+
+    setStyle((prev) => {
+      if (prev && prev.left === left && prev.top === top && prev.visibility === 'visible') {
+        return prev;
+      }
+      return { ...(prev || {}), left, top, visibility: 'visible' };
+    });
+  }, [content.tooltipData.length, content.title.text]);
+
   return (
     <div
       data-testid="tooltip"
@@ -460,12 +531,10 @@ function TooltipTable({
             <tr>
               <td />
               <td>
-                {i18n.self} (
-                {i18n.tooltipUnitTitles[baselineData.units].total})
+                {i18n.self} ({i18n.tooltipUnitTitles[baselineData.units].total})
               </td>
               <td>
-                {i18n.total} (
-                {i18n.tooltipUnitTitles[baselineData.units].total})
+                {i18n.total} ({i18n.tooltipUnitTitles[baselineData.units].total})
               </td>
             </tr>
           </thead>