@kylincloud/flamegraph 0.35.20 → 0.35.22

package/dist/shims/Table.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, CSSProperties, RefObject } from 'react';
+import React, { ReactNode, CSSProperties, RefObject } from 'react';
 interface CustomProp {
-    [k: string]: string | CSSProperties | ReactNode | number | undefined;
+    [k: string]: string | CSSProperties | ReactNode | number | undefined | ((e: React.MouseEvent) => void) | (() => void);
 }
 export interface Cell extends CustomProp {
     value: ReactNode | string;
@@ -18,6 +18,8 @@ export interface BodyRow {
     isRowDisabled?: boolean;
     cells: Cell[];
     onClick?: () => void;
+    onDoubleClick?: () => void;
+    onContextMenu?: (e: React.MouseEvent) => void;
     className?: string;
 }
 export type TableBodyType = {

package/dist/shims/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AACA,OAAc,EAAY,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7E,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;CACtE;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEN,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CA0FZ;AA2DD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7E,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEN,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAsGZ;AA2DD,eAAe,KAAK,CAAC"}

package/package.json

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

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -337,7 +337,7 @@ class FlameGraphRenderer extends Component<
     return (
       this.state.selectedItem.isJust ||
       JSON.stringify(this.initialFlamegraphState) !==
-        JSON.stringify(this.state.flamegraphConfigs)
+      JSON.stringify(this.state.flamegraphConfigs)
     );
   };
 
@@ -371,6 +371,10 @@ class FlameGraphRenderer extends Component<
           selectedItem={this.state.selectedItem}
           handleTableItemClick={this.setActiveItem}
           palette={this.state.palette}
+          // 新增：传递聚焦和视图切换能力给表格
+          onFocusOnNode={this.onFocusOnNode}
+          updateView={this.props.onlyDisplay ? undefined : this.updateView}
+          enableSandwichView={this.props.enableSandwichView}
         />
       </div>
     );

package/src/ProfilerTable.module.scss

@@ -0,0 +1,43 @@
+// src/ProfilerTable.module.scss
+
+.tableContextMenu {
+
+  // 继承 react-menu 的基础样式
+  :global(.szh-menu) {
+    background-color: var(--ps-ui-background, #fff);
+    border: 1px solid var(--ps-ui-border, #ccc);
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    padding: 4px 0;
+    min-width: 180px;
+    z-index: 1000;
+  }
+
+  :global(.szh-menu__item) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+    color: var(--ps-ui-foreground-text, #333);
+    font-size: 13px;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--ps-ui-element-bg-highlight, #f0f0f0);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.sandwichItem {
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}

package/src/ProfilerTable.tsx

@@ -1,9 +1,13 @@
 // src/ProfilerTable.tsx
-import React, { useRef, RefObject } from 'react';
+import React, { useRef, RefObject, useCallback, useState } from 'react';
 import type Color from 'color';
 import cl from 'classnames';
 import type { Maybe } from 'true-myth';
-import { doubleFF, singleFF, Flamebearer } from './models';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCrosshairs } from '@fortawesome/free-solid-svg-icons/faCrosshairs';
+import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
+import { faHighlighter } from '@fortawesome/free-solid-svg-icons/faHighlighter';
+import { doubleFF, singleFF, Flamebearer, createFF } from './models';
 // until ui is moved to its own package this should do it
 // eslint-disable-next-line import/no-extraneous-dependencies
 import TableUI, {
@@ -11,6 +15,7 @@ import TableUI, {
   BodyRow,
   TableBodyType,
 } from './shims/Table';
+import { ControlledMenu, MenuItem, useMenuState } from './shims/Menu';
 import TableTooltip from './Tooltip/TableTooltip';
 import { getFormatter, ratioToPercent, diffPercent } from './format/format';
 import {
@@ -20,10 +25,14 @@ import {
 import { fitIntoTableCell, FitModes } from './fitMode/fitMode';
 import { isMatch } from './search';
 import type { FlamegraphPalette } from './FlameGraph/FlameGraphComponent/colorPalette';
+import { SandwichIcon } from './Icons';
 import {
   useFlamegraphI18n,
   type FlamegraphMessages,
 } from './i18n';
+import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';
+
+import styles from './ProfilerTable.module.scss';
 
 const zero = (v?: number) => v || 0;
 
@@ -138,6 +147,42 @@ function generateTable(
   return Array.from(hash.values());
 }
 
+/**
+ * 根据函数名在 flamebearer 中查找 total 值最大的节点位置
+ * 返回 { i, j } 坐标，用于聚焦
+ */
+function findNodeByName(
+  flamebearer: Flamebearer,
+  targetName: string
+): { i: number; j: number } | null {
+  if (!flamebearer || !flamebearer.levels) {
+    return null;
+  }
+
+  const { names, levels, format } = flamebearer;
+  const ff = createFF(format);
+
+  let bestMatch: { i: number; j: number; total: number } | null = null;
+
+  for (let i = 0; i < levels.length; i++) {
+    const level = levels[i];
+    for (let j = 0; j < level.length; j += ff.jStep) {
+      const nameIndex = ff.getBarName(level, j);
+      const name = names[nameIndex];
+
+      if (name === targetName) {
+        const total = ff.getBarTotal(level, j);
+        // 找到 total 值最大的节点
+        if (!bestMatch || total > bestMatch.total) {
+          bestMatch = { i, j, total };
+        }
+      }
+    }
+  }
+
+  return bestMatch ? { i: bestMatch.i, j: bestMatch.j } : null;
+}
+
 // the value must be negative or zero
 function neg(v: number) {
   return Math.min(0, v);
@@ -200,6 +245,8 @@ interface GetTableBodyRowsProps
   sortBy: string;
   sortByDirection: string;
   messages: FlamegraphMessages;
+  onRowContextMenu: (e: React.MouseEvent, name: string) => void;
+  onRowDoubleClick: (name: string) => void;
 }
 
 const getTableBody = ({
@@ -212,6 +259,8 @@ const getTableBody = ({
   palette,
   selectedItem,
   messages,
+  onRowContextMenu,
+  onRowDoubleClick,
 }: GetTableBodyRowsProps): TableBodyType => {
   const { numTicks, maxSelf, sampleRate, spyName, units } = flamebearer;
 
@@ -292,6 +341,8 @@ const getTableBody = ({
     'data-row': `${x.type};${x.name};${x.self};${x.total}`,
     isRowSelected: isRowSelected(x.name),
     onClick: () => handleTableItemClick(x),
+    onContextMenu: (e: React.MouseEvent) => onRowContextMenu(e, x.name),
+    onDoubleClick: () => onRowDoubleClick(x.name),
     cells: [
       { value: nameCell(x) },
       {
@@ -337,6 +388,8 @@ const getTableBody = ({
       'data-row': `${x.type};${x.name};${x.totalLeft};${x.leftTicks};${x.totalRght};${x.rightTicks}`,
       isRowSelected: isRowSelected(x.name),
       onClick: () => handleTableItemClick(x),
+      onContextMenu: (e: React.MouseEvent) => onRowContextMenu(e, x.name),
+      onDoubleClick: () => onRowDoubleClick(x.name),
       cells: [
         { value: nameCell(x) },
         { value: `${leftPercent} %` },
@@ -389,6 +442,13 @@ export interface ProfilerTableProps {
   selectedItem: Maybe<string>;
 
   tableBodyRef: RefObject<HTMLTableSectionElement>;
+
+  // 新增：聚焦到火焰图节点
+  onFocusOnNode?: (i: number, j: number) => void;
+  // 新增：切换视图（用于 sandwich view）
+  updateView?: (v: ViewTypes) => void;
+  // 新增：是否启用 sandwich 视图菜单项
+  enableSandwichView?: boolean;
 }
 
 function Table({
@@ -400,8 +460,76 @@ function Table({
   highlightQuery,
   selectedItem,
   palette,
+  onFocusOnNode,
+  updateView,
+  enableSandwichView = true,
 }: ProfilerTableProps & { isDoubles: boolean }) {
   const i18n = useFlamegraphI18n();
+  const [menuProps, toggleMenu] = useMenuState({ transition: true });
+  const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
+  const [contextMenuTarget, setContextMenuTarget] = useState<string | null>(null);
+
+  // 双击处理：聚焦到火焰图
+  const handleDoubleClick = useCallback(
+    (name: string) => {
+      if (!onFocusOnNode) return;
+
+      const node = findNodeByName(flamebearer, name);
+      if (node) {
+        onFocusOnNode(node.i, node.j);
+      }
+    },
+    [flamebearer, onFocusOnNode]
+  );
+
+  // 右键菜单处理
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent, name: string) => {
+      e.preventDefault();
+      setAnchorPoint({ x: e.clientX, y: e.clientY });
+      setContextMenuTarget(name);
+      toggleMenu(true);
+    },
+    [toggleMenu]
+  );
+
+  const handleMenuClose = useCallback(() => {
+    toggleMenu(false);
+    setContextMenuTarget(null);
+  }, [toggleMenu]);
+
+  // 菜单项：聚焦到此函数
+  const handleFocusClick = useCallback(() => {
+    if (!contextMenuTarget || !onFocusOnNode) return;
+
+    const node = findNodeByName(flamebearer, contextMenuTarget);
+    if (node) {
+      onFocusOnNode(node.i, node.j);
+    }
+    handleMenuClose();
+  }, [contextMenuTarget, flamebearer, onFocusOnNode, handleMenuClose]);
+
+  // 菜单项：复制函数名
+  const handleCopyClick = useCallback(() => {
+    if (!contextMenuTarget || !navigator.clipboard) return;
+    navigator.clipboard.writeText(contextMenuTarget);
+    handleMenuClose();
+  }, [contextMenuTarget, handleMenuClose]);
+
+  // 菜单项：高亮相似节点
+  const handleHighlightClick = useCallback(() => {
+    if (!contextMenuTarget) return;
+    handleTableItemClick({ name: contextMenuTarget });
+    handleMenuClose();
+  }, [contextMenuTarget, handleTableItemClick, handleMenuClose]);
+
+  // 菜单项：在 sandwich 视图中打开
+  const handleSandwichClick = useCallback(() => {
+    if (!contextMenuTarget || !updateView) return;
+    updateView('sandwich');
+    handleTableItemClick({ name: contextMenuTarget });
+    handleMenuClose();
+  }, [contextMenuTarget, updateView, handleTableItemClick, handleMenuClose]);
 
   const tableFormat = React.useMemo(
     () =>
@@ -463,19 +591,58 @@ function Table({
       palette,
       selectedItem,
       messages: i18n,
+      onRowContextMenu: handleContextMenu,
+      onRowDoubleClick: handleDoubleClick,
+      onFocusOnNode,
+      updateView,
+      enableSandwichView,
     }),
   };
 
+  const isHighlighted =
+    selectedItem.isJust && selectedItem.value === contextMenuTarget;
+
   return (
-    <TableUI
-      /* eslint-disable-next-line react/jsx-props-no-spreading */
-      {...tableSortProps}
-      tableBodyRef={tableBodyRef}
-      table={table}
-      className={cl('flamegraph-table', {
-        'flamegraph-table-doubles': isDoubles,
-      })}
-    />
+    <>
+      <TableUI
+        /* eslint-disable-next-line react/jsx-props-no-spreading */
+        {...tableSortProps}
+        tableBodyRef={tableBodyRef}
+        table={table}
+        className={cl('flamegraph-table', {
+          'flamegraph-table-doubles': isDoubles,
+        })}
+      />
+
+      {/* 右键菜单 */}
+      <ControlledMenu
+        {...menuProps}
+        anchorPoint={anchorPoint}
+        onClose={handleMenuClose}
+        className={styles.tableContextMenu}
+      >
+        {onFocusOnNode && (
+          <MenuItem onClick={handleFocusClick}>
+            <FontAwesomeIcon icon={faCrosshairs} />
+            {i18n.focusOnThisFunction}
+          </MenuItem>
+        )}
+        <MenuItem onClick={handleCopyClick}>
+          <FontAwesomeIcon icon={faCopy} />
+          {i18n.copyFunctionName}
+        </MenuItem>
+        <MenuItem onClick={handleHighlightClick}>
+          <FontAwesomeIcon icon={faHighlighter} />
+          {isHighlighted ? i18n.clearHighlight : i18n.highlightSimilarNodes}
+        </MenuItem>
+        {updateView && enableSandwichView && (
+          <MenuItem onClick={handleSandwichClick} className={styles.sandwichItem}>
+            <SandwichIcon fill="currentColor" />
+            {i18n.openInSandwichView}
+          </MenuItem>
+        )}
+      </ControlledMenu>
+    </>
   );
 }
 
@@ -486,6 +653,9 @@ const ProfilerTable = React.memo(function ProfilerTable({
   highlightQuery,
   palette,
   selectedItem,
+  onFocusOnNode,
+  updateView,
+  enableSandwichView,
 }: Omit<ProfilerTableProps, 'tableBodyRef'>) {
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
   const isDoubles = flamebearer.format === 'double';
@@ -510,6 +680,9 @@ const ProfilerTable = React.memo(function ProfilerTable({
           handleTableItemClick={handleTableItemClick}
           palette={palette}
           selectedItem={selectedItem}
+          onFocusOnNode={onFocusOnNode}
+          updateView={updateView}
+          enableSandwichView={enableSandwichView}
         />
       </div>
 

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>

package/src/i18n.tsx

@@ -68,6 +68,11 @@ export type FlamegraphMessages = {
   searchPlaceholder: string;
   syncSearchBars: string;
   unsyncSearchBars: string;
+
+  // 表格右键菜单（新增）
+  focusOnThisFunction: string;
+  tableDoubleClickToFocus: string;
+  tableRightClickForOptions: string;
 };
 
 const defaultTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
@@ -217,6 +222,11 @@ export const defaultMessages: FlamegraphMessages = {
   searchPlaceholder: 'Search...',
   syncSearchBars: 'Sync Search Bars',
   unsyncSearchBars: 'Unsync Search Bars',
+
+  // 表格右键菜单（新增）
+  focusOnThisFunction: 'Focus on this function',
+  tableDoubleClickToFocus: 'Double-click to focus in flamegraph',
+  tableRightClickForOptions: 'Right-click for more options',
 };
 
 export const zhCNMessages: FlamegraphMessages = {
@@ -271,6 +281,11 @@ export const zhCNMessages: FlamegraphMessages = {
   searchPlaceholder: '搜索...',
   syncSearchBars: '同步搜索栏',
   unsyncSearchBars: '取消同步搜索栏',
+
+  // 表格右键菜单（新增）
+  focusOnThisFunction: '聚焦到此函数',
+  tableDoubleClickToFocus: '双击可聚焦到火焰图',
+  tableRightClickForOptions: '右键查看更多选项',
 };
 
 const I18nContext = createContext<FlamegraphMessages>(defaultMessages);

package/src/shims/Table.tsx

@@ -1,3 +1,4 @@
+// src/shims/Table.tsx
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { useState, ReactNode, CSSProperties, RefObject } from 'react';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
@@ -10,7 +11,7 @@ import styles from './Table.module.scss';
 import Button from './Button';
 
 interface CustomProp {
-  [k: string]: string | CSSProperties | ReactNode | number | undefined;
+  [k: string]: string | CSSProperties | ReactNode | number | undefined | ((e: React.MouseEvent) => void) | (() => void);
 }
 
 export interface Cell extends CustomProp {
@@ -31,19 +32,21 @@ export interface BodyRow {
   isRowDisabled?: boolean;
   cells: Cell[];
   onClick?: () => void;
+  onDoubleClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
   className?: string;
 }
 
 export type TableBodyType =
   | {
-      type: 'not-filled';
-      value: string | ReactNode;
-      bodyClassName?: string;
-    }
+    type: 'not-filled';
+    value: string | ReactNode;
+    bodyClassName?: string;
+  }
   | {
-      type: 'filled';
-      bodyRows: BodyRow[];
-    };
+    type: 'filled';
+    bodyRows: BodyRow[];
+  };
 
 type Table = TableBodyType & {
   headRow: HeadCell[];
@@ -151,7 +154,16 @@ function Table({
             </tr>
           ) : (
             paginate(table.bodyRows, currPage, itemsPerPage).map(
-              ({ cells, isRowSelected, isRowDisabled, className, ...rest }) => {
+              ({
+                cells,
+                isRowSelected,
+                isRowDisabled,
+                className,
+                onClick,
+                onDoubleClick,
+                onContextMenu,
+                ...rest
+              }) => {
                 // The problem is that when you switch apps or time-range and the function
                 // names stay the same it leads to an issue where rows don't get re-rendered
                 // So we force a rerender each time.
@@ -161,6 +173,9 @@ function Table({
                   <tr
                     key={renderID}
                     {...rest}
+                    onClick={onClick}
+                    onDoubleClick={onDoubleClick}
+                    onContextMenu={onContextMenu}
                     className={clsx(className, {
                       [styles.isRowSelected]: isRowSelected,
                       [styles.isRowDisabled]: isRowDisabled,