@kylincloud/flamegraph 0.35.21 → 0.35.23

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} %` },
@@ -373,11 +426,11 @@ const getTableBody = ({
   return rows.length > 0
     ? { bodyRows: rows, type: 'filled' as const }
     : {
-        value: (
-          <div className="unsupported-format">{messages.noItemsFound}</div>
-        ),
-        type: 'not-filled' as const,
-      };
+      value: (
+        <div className="unsupported-format">{messages.noItemsFound}</div>
+      ),
+      type: 'not-filled' as const,
+    };
 };
 
 export interface ProfilerTableProps {
@@ -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,53 +460,127 @@ 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 (!selectedItem.isJust || selectedItem.value !== name) {
+        handleTableItemClick({ name });
+      }
+
+      // 然后聚焦到火焰图
+      if (!onFocusOnNode) return;
+
+      const node = findNodeByName(flamebearer, name);
+      if (node) {
+        onFocusOnNode(node.i, node.j);
+      }
+    },
+    [flamebearer, onFocusOnNode, selectedItem, handleTableItemClick]
+  );
+
+  // 右键菜单处理
+  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(
     () =>
       isDoubles
         ? [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'baseline' as const,
-              label: i18n.baseline,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'comparison' as const,
-              label: i18n.comparison,
-            },
-            {
-              sortable: 1,
-              name: 'diff' as const,
-              label: i18n.diff,
-            },
-          ]
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'baseline' as const,
+            label: i18n.baseline,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'comparison' as const,
+            label: i18n.comparison,
+          },
+          {
+            sortable: 1,
+            name: 'diff' as const,
+            label: i18n.diff,
+          },
+        ]
         : [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'self' as const,
-              label: i18n.self,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'total' as const,
-              label: i18n.total,
-            },
-          ],
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'self' as const,
+            label: i18n.self,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'total' as const,
+            label: i18n.total,
+          },
+        ],
     [i18n, isDoubles]
   );
 
@@ -463,19 +597,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 +659,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 +686,9 @@ const ProfilerTable = React.memo(function ProfilerTable({
           handleTableItemClick={handleTableItemClick}
           palette={palette}
           selectedItem={selectedItem}
+          onFocusOnNode={onFocusOnNode}
+          updateView={updateView}
+          enableSandwichView={enableSandwichView}
         />
       </div>
 

package/src/i18n.tsx

@@ -68,6 +68,15 @@ export type FlamegraphMessages = {
   searchPlaceholder: string;
   syncSearchBars: string;
   unsyncSearchBars: string;
+
+  // 表格右键菜单（新增）
+  focusOnThisFunction: string;
+  tableDoubleClickToFocus: string;
+  tableRightClickForOptions: string;
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: string; // "total (1 level collapsed)"
+  collapsedLevelsPlural: string;   // "total (n levels collapsed)"
 };
 
 const defaultTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
@@ -217,6 +226,15 @@ 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',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
 };
 
 export const zhCNMessages: FlamegraphMessages = {
@@ -271,6 +289,15 @@ export const zhCNMessages: FlamegraphMessages = {
   searchPlaceholder: '搜索...',
   syncSearchBars: '同步搜索栏',
   unsyncSearchBars: '取消同步搜索栏',
+
+  // 表格右键菜单（新增）
+  focusOnThisFunction: '聚焦到此函数',
+  tableDoubleClickToFocus: '双击可聚焦到火焰图',
+  tableRightClickForOptions: '右键查看更多选项',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: '总计（已折叠 1 层）',
+  collapsedLevelsPlural: '总计（已折叠 {n} 层）',
 };
 
 const I18nContext = createContext<FlamegraphMessages>(defaultMessages);

package/src/shims/Table.module.scss

@@ -49,10 +49,17 @@
     }
 
     tr {
+      /* 选中行样式 - 使用更明显的 antd 风格蓝色 */
       &.isRowSelected {
         cursor: pointer;
-        background: var(--ps-table-highlight-row-bg) !important;
-        color: var(--ps-table-highlight-row-text);
+        /* antd 选中蓝色，更明显但不会与红绿/红蓝火焰图冲突 */
+        background: var(--ps-table-highlight-row-bg, #bae0ff) !important;
+        color: var(--ps-table-highlight-row-text, #0958d9);
+        
+        /* 左侧添加强调边框 */
+        td:first-child {
+          box-shadow: inset 3px 0 0 0 var(--ps-table-highlight-border, #1677ff);
+        }
       }
 
       &.isRowDisabled td {

package/src/shims/Table.tsx

@@ -1,5 +1,6 @@
+// src/shims/Table.tsx
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState, ReactNode, CSSProperties, RefObject } from 'react';
+import React, { useState, useRef, ReactNode, CSSProperties, RefObject } from 'react';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import clsx from 'clsx';
@@ -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[];
@@ -91,6 +94,46 @@ interface TableProps {
   itemsPerPage?: number;
 }
 
+/**
+ * 表格行组件
+ * 单击立即高亮，双击同时触发高亮和聚焦
+ */
+function TableRow({ row }: { row: BodyRow }) {
+  const {
+    cells,
+    isRowSelected,
+    isRowDisabled,
+    className,
+    onClick,
+    onDoubleClick,
+    onContextMenu,
+    ...rest
+  } = row;
+
+  const renderID = useRef(Math.random()).current;
+
+  return (
+    <tr
+      {...rest}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
+      className={clsx(className, {
+        [styles.isRowSelected]: isRowSelected,
+        [styles.isRowDisabled]: isRowDisabled,
+      })}
+    >
+      {cells &&
+        cells.map(({ style, value, ...cellRest }: Cell, index: number) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <td key={renderID + index} style={style} {...cellRest}>
+            {value}
+          </td>
+        ))}
+    </tr>
+  );
+}
+
 function Table({
   sortByDirection,
   sortBy,
@@ -151,33 +194,9 @@ function Table({
             </tr>
           ) : (
             paginate(table.bodyRows, currPage, itemsPerPage).map(
-              ({ cells, isRowSelected, isRowDisabled, className, ...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.
-                const renderID = Math.random();
-
-                return (
-                  <tr
-                    key={renderID}
-                    {...rest}
-                    className={clsx(className, {
-                      [styles.isRowSelected]: isRowSelected,
-                      [styles.isRowDisabled]: isRowDisabled,
-                    })}
-                  >
-                    {cells &&
-                      cells.map(
-                        ({ style, value, ...rest }: Cell, index: number) => (
-                          // eslint-disable-next-line react/no-array-index-key
-                          <td key={renderID + index} style={style} {...rest}>
-                            {value}
-                          </td>
-                        )
-                      )}
-                  </tr>
-                );
-              }
+              (row, idx) => (
+                <TableRow key={row['data-row'] ?? `row-${idx}`} row={row} />
+              )
             )
           )}
         </tbody>