@kylincloud/flamegraph 0.35.28 → 0.36.0

package/src/ProfilerTable.tsx

@@ -1,5 +1,5 @@
 // src/ProfilerTable.tsx
-import React, { useRef, RefObject, useCallback, useState, useEffect } from 'react';
+import React, { useRef, RefObject, useCallback, useState, useEffect, useMemo } from 'react';
 import type Color from 'color';
 import cl from 'classnames';
 import type { Maybe } from 'true-myth';
@@ -31,10 +31,20 @@ import {
   type FlamegraphMessages,
 } from './i18n';
 import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';
+import {
+  createProfilerTableWorker,
+  type ProfilerTableWorkerRow,
+  type ProfilerTableWorkerRequest,
+  type ProfilerTableWorkerResponse,
+} from './workers/profilerTableWorker';
 
 import styles from './ProfilerTable.module.scss';
 
 const zero = (v?: number) => v || 0;
+const canUseWorker =
+  typeof Worker !== 'undefined' &&
+  typeof Blob !== 'undefined' &&
+  typeof URL !== 'undefined';
 
 interface SingleCell {
   type: 'single';
@@ -56,6 +66,8 @@ interface DoubleCell {
   rightTicks: number;
 }
 
+type VirtualRange = { start: number; end: number };
+
 function generateCellSingle(
   ff: typeof singleFF,
   cell: SingleCell,
@@ -147,6 +159,23 @@ function generateTable(
   return Array.from(hash.values());
 }
 
+const tableCache = new WeakMap<
+  Flamebearer,
+  ((SingleCell | DoubleCell) & { name: string })[]
+>();
+
+function getTableCells(
+  flamebearer: Flamebearer
+): ((SingleCell | DoubleCell) & { name: string })[] {
+  const cached = tableCache.get(flamebearer);
+  if (cached) {
+    return cached;
+  }
+  const next = generateTable(flamebearer);
+  tableCache.set(flamebearer, next);
+  return next;
+}
+
 /**
  * 根据函数名在 flamebearer 中查找 total 值最大的节点位置
  * 返回 { i, j } 坐标，用于聚焦
@@ -264,7 +293,7 @@ const getTableBody = ({
 }: GetTableBodyRowsProps): TableBodyType => {
   const { numTicks, maxSelf, sampleRate, spyName, units } = flamebearer;
 
-  const tableBodyCells = generateTable(flamebearer).sort(
+  const tableBodyCells = [...getTableCells(flamebearer)].sort(
     (a, b) => b.total - a.total
   );
   const m = sortByDirection === 'asc' ? 1 : -1;
@@ -468,11 +497,120 @@ function Table({
   onFocusOnNode,
   updateView,
   enableSandwichView = true,
-}: ProfilerTableProps & { isDoubles: boolean }) {
+  virtualize,
+  virtualizeRowHeight,
+  virtualizeOverscan,
+  scrollRef,
+}: ProfilerTableProps & {
+  isDoubles: boolean;
+  virtualize?: boolean;
+  virtualizeRowHeight?: number;
+  virtualizeOverscan?: number;
+  scrollRef?: RefObject<HTMLElement>;
+}) {
   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 useWorker = canUseWorker;
+  const workerRef = useRef<Worker | null>(null);
+  const flamebearerRef = useRef<Flamebearer | null>(null);
+  const rangeRequestIdRef = useRef(0);
+  const focusRequestIdRef = useRef(0);
+  const pendingFocusRef = useRef(
+    new Map<number, (node: { i: number; j: number } | null) => void>()
+  );
+  const [workerReady, setWorkerReady] = useState(false);
+  const [rowCount, setRowCount] = useState(0);
+  const [visibleRowData, setVisibleRowData] = useState<ProfilerTableWorkerRow[]>(
+    []
+  );
+  const [virtualRange, setVirtualRange] = useState<VirtualRange>({
+    start: 0,
+    end: 0,
+  });
+  const [requestedRange, setRequestedRange] = useState<VirtualRange | null>(null);
+  const [dataVersion, setDataVersion] = useState(0);
+  const [workerInstance, setWorkerInstance] = useState(0);
+
+  useEffect(() => {
+    if (!useWorker) {
+      return () => {};
+    }
+    const worker = createProfilerTableWorker();
+    workerRef.current = worker;
+    setWorkerInstance((prev) => prev + 1);
+
+    const handleMessage = (event: MessageEvent<ProfilerTableWorkerResponse>) => {
+      const msg = event.data;
+      if (!msg || !msg.type) {
+        return;
+      }
+      switch (msg.type) {
+        case 'ready': {
+          setRowCount(msg.payload.rowCount);
+          setWorkerReady(true);
+          setDataVersion((prev) => prev + 1);
+          break;
+        }
+        case 'range': {
+          if (msg.payload.requestId !== rangeRequestIdRef.current) {
+            return;
+          }
+          setVisibleRowData(msg.payload.rows);
+          setVirtualRange({ start: msg.payload.start, end: msg.payload.end });
+          break;
+        }
+        case 'findNode': {
+          const resolver = pendingFocusRef.current.get(msg.payload.requestId);
+          if (resolver) {
+            pendingFocusRef.current.delete(msg.payload.requestId);
+            resolver(msg.payload.node);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    };
+
+    worker.addEventListener('message', handleMessage as EventListener);
+    return () => {
+      worker.removeEventListener('message', handleMessage as EventListener);
+      worker.terminate();
+      workerRef.current = null;
+      pendingFocusRef.current.clear();
+    };
+  }, [useWorker]);
+
+  const requestFocusNode = useCallback(
+    (name: string) => {
+    if (!useWorker || !workerRef.current) {
+      return Promise.resolve(findNodeByName(flamebearer, name));
+    }
+    const requestId = ++focusRequestIdRef.current;
+    return new Promise<{ i: number; j: number } | null>((resolve) => {
+      pendingFocusRef.current.set(requestId, resolve);
+      workerRef.current?.postMessage({
+        type: 'findNode',
+        payload: { name, requestId },
+      } satisfies ProfilerTableWorkerRequest);
+      });
+    },
+    [flamebearer, useWorker]
+  );
+
+  const focusByName = useCallback(
+    (name: string) => {
+      if (!onFocusOnNode) return;
+      requestFocusNode(name).then((node) => {
+        if (node) {
+          onFocusOnNode(node.i, node.j);
+        }
+      });
+    },
+    [onFocusOnNode, requestFocusNode]
+  );
 
   // 双击处理：高亮 + 聚焦到火焰图
   const handleDoubleClick = useCallback(
@@ -483,14 +621,9 @@ function Table({
       }
 
       // 然后聚焦到火焰图
-      if (!onFocusOnNode) return;
-
-      const node = findNodeByName(flamebearer, name);
-      if (node) {
-        onFocusOnNode(node.i, node.j);
-      }
+      focusByName(name);
     },
-    [flamebearer, onFocusOnNode, selectedItem, handleTableItemClick]
+    [focusByName, selectedItem, handleTableItemClick]
   );
 
   // 右键菜单处理
@@ -511,14 +644,10 @@ function Table({
 
   // 菜单项：聚焦到此函数
   const handleFocusClick = useCallback(() => {
-    if (!contextMenuTarget || !onFocusOnNode) return;
-
-    const node = findNodeByName(flamebearer, contextMenuTarget);
-    if (node) {
-      onFocusOnNode(node.i, node.j);
-    }
+    if (!contextMenuTarget) return;
+    focusByName(contextMenuTarget);
     handleMenuClose();
-  }, [contextMenuTarget, flamebearer, onFocusOnNode, handleMenuClose]);
+  }, [contextMenuTarget, focusByName, handleMenuClose]);
 
   // 菜单项：复制函数名
   const handleCopyClick = useCallback(() => {
@@ -590,25 +719,273 @@ function Table({
   );
 
   const tableSortProps = useTableSort(tableFormat as any);
-  const table = {
-    headRow: tableFormat as any,
-    ...getTableBody({
-      flamebearer,
+
+  useEffect(() => {
+    if (!useWorker || !workerRef.current) {
+      return;
+    }
+    const worker = workerRef.current;
+    const payload = {
       sortBy: tableSortProps.sortBy,
       sortByDirection: tableSortProps.sortByDirection,
-      fitMode,
-      handleTableItemClick,
       highlightQuery,
+    };
+
+    if (flamebearerRef.current !== flamebearer) {
+      flamebearerRef.current = flamebearer;
+      setWorkerReady(false);
+      setRowCount(0);
+      setVisibleRowData([]);
+      worker.postMessage({
+        type: 'init',
+        payload: {
+          flamebearer,
+          ...payload,
+        },
+      } satisfies ProfilerTableWorkerRequest);
+    } else {
+      setWorkerReady(false);
+      setVisibleRowData([]);
+      worker.postMessage({
+        type: 'update',
+        payload,
+      } satisfies ProfilerTableWorkerRequest);
+    }
+  }, [
+    flamebearer,
+    highlightQuery,
+    tableSortProps.sortBy,
+    tableSortProps.sortByDirection,
+    useWorker,
+    workerInstance,
+  ]);
+
+  const handleRangeChange = useCallback((start: number, end: number) => {
+    setRequestedRange((prev) => {
+      if (prev && prev.start === start && prev.end === end) {
+        return prev;
+      }
+      return { start, end };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!useWorker || !workerRef.current || !requestedRange) {
+      return;
+    }
+    const requestId = ++rangeRequestIdRef.current;
+    workerRef.current.postMessage({
+      type: 'range',
+      payload: {
+        start: requestedRange.start,
+        end: requestedRange.end,
+        requestId,
+      },
+    } satisfies ProfilerTableWorkerRequest);
+  }, [requestedRange, dataVersion, useWorker]);
+
+  const { numTicks, maxSelf, sampleRate, spyName, units } = flamebearer;
+  const formatter = useMemo(
+    () => getFormatter(numTicks, sampleRate, units),
+    [numTicks, sampleRate, units]
+  );
+  const nameCellStyle = useMemo(() => fitIntoTableCell(fitMode), [fitMode]);
+  const isRowSelected = useCallback(
+    (name: string) => selectedItem.isJust && selectedItem.value === name,
+    [selectedItem]
+  );
+  const nameCell = useCallback(
+    (name: string) => (
+      <button className="table-item-button">
+        <div className="symbol-name" style={nameCellStyle}>
+          <bdi dir="ltr">{name}</bdi>
+        </div>
+      </button>
+    ),
+    [nameCellStyle]
+  );
+
+  const buildSingleRow = useCallback(
+    (x: Extract<ProfilerTableWorkerRow, { type: 'single' }>): BodyRow => {
+      const pn = getPackageNameFromStackTrace(spyName, x.name);
+      const color = colorBasedOnPackageName(palette, pn);
+      return {
+        'data-row': `single;${x.name};${x.self};${x.total}`,
+        isRowSelected: isRowSelected(x.name),
+        onClick: () => {
+          handleTableItemClick({ name: x.name });
+        },
+        onContextMenu: (e: React.MouseEvent) => handleContextMenu(e, x.name),
+        onDoubleClick: () => handleDoubleClick(x.name),
+        cells: [
+          { value: nameCell(x.name) },
+          {
+            value: formatter.format(x.self, sampleRate),
+            style: backgroundImageStyle(x.self, maxSelf, color),
+          },
+          {
+            value: formatter.format(x.total, sampleRate),
+            style: backgroundImageStyle(x.total, numTicks, color),
+          },
+        ],
+      };
+    },
+    [
+      formatter,
+      handleContextMenu,
+      handleDoubleClick,
+      handleTableItemClick,
+      isRowSelected,
+      maxSelf,
+      nameCell,
+      numTicks,
       palette,
-      selectedItem,
-      messages: i18n,
-      onRowContextMenu: handleContextMenu,
-      onRowDoubleClick: handleDoubleClick,
-      onFocusOnNode,
-      updateView,
-      enableSandwichView,
-    }),
-  };
+      sampleRate,
+      spyName,
+    ]
+  );
+
+  const buildDoubleRow = useCallback(
+    (x: Extract<ProfilerTableWorkerRow, { type: 'double' }>): BodyRow => {
+      const leftPercent = ratioToPercent(
+        x.leftTicks > 0 ? x.totalLeft / x.leftTicks : 0
+      );
+      const rghtPercent = ratioToPercent(
+        x.rightTicks > 0 ? x.totalRght / x.rightTicks : 0
+      );
+
+      let totalDiff = diffPercent(leftPercent, rghtPercent);
+      if (!Number.isFinite(totalDiff)) {
+        totalDiff = 0;
+      }
+
+      let diffCellColor = '';
+      if (totalDiff > 0) {
+        diffCellColor = palette.badColor.rgb().string();
+      } else if (totalDiff < 0) {
+        diffCellColor = palette.goodColor.rgb().string();
+      }
+
+      let diffValue = '';
+      if (x.totalLeft === 0 && x.totalRght > 0) {
+        diffValue = i18n.diffNew;
+      } else if (x.totalRght === 0 && x.totalLeft > 0) {
+        diffValue = i18n.diffRemoved;
+      } else if (totalDiff === 0) {
+        diffValue = '0%';
+      } else if (totalDiff > 0) {
+        diffValue = `+${totalDiff.toFixed(2)}%`;
+      } else if (totalDiff < 0) {
+        diffValue = `${totalDiff.toFixed(2)}%`;
+      }
+
+      return {
+        'data-row': `double;${x.name};${x.totalLeft};${x.leftTicks};${x.totalRght};${x.rightTicks}`,
+        isRowSelected: isRowSelected(x.name),
+        onClick: () => {
+          handleTableItemClick({ name: x.name });
+        },
+        onContextMenu: (e: React.MouseEvent) => handleContextMenu(e, x.name),
+        onDoubleClick: () => handleDoubleClick(x.name),
+        cells: [
+          { value: nameCell(x.name) },
+          { value: `${leftPercent} %` },
+          { value: `${rghtPercent} %` },
+          {
+            value: diffValue,
+            style: {
+              color: diffCellColor,
+            },
+          },
+        ],
+      };
+    },
+    [
+      handleContextMenu,
+      handleDoubleClick,
+      handleTableItemClick,
+      i18n,
+      isRowSelected,
+      nameCell,
+      palette,
+    ]
+  );
+
+  const visibleRows = useMemo(() => {
+    if (!useWorker) {
+      return [];
+    }
+    return visibleRowData.map((row) =>
+      row.type === 'double'
+        ? buildDoubleRow(row)
+        : buildSingleRow(row)
+    );
+  }, [buildDoubleRow, buildSingleRow, useWorker, visibleRowData]);
+
+  const table = useMemo(() => {
+    if (useWorker) {
+      if (workerReady && rowCount === 0) {
+        return {
+          headRow: tableFormat as any,
+          type: 'not-filled' as const,
+          value: (
+            <div className="unsupported-format">{i18n.noItemsFound}</div>
+          ),
+        };
+      }
+      return {
+        headRow: tableFormat as any,
+        type: 'virtual' as const,
+        rowCount,
+        rows: visibleRows,
+        range: virtualRange,
+        onRangeChange: handleRangeChange,
+      };
+    }
+    return {
+      headRow: tableFormat as any,
+      ...getTableBody({
+        flamebearer,
+        sortBy: tableSortProps.sortBy,
+        sortByDirection: tableSortProps.sortByDirection,
+        fitMode,
+        handleTableItemClick,
+        highlightQuery,
+        palette,
+        selectedItem,
+        messages: i18n,
+        onRowContextMenu: handleContextMenu,
+        onRowDoubleClick: handleDoubleClick,
+        onFocusOnNode,
+        updateView,
+        enableSandwichView,
+      }),
+    };
+  }, [
+    buildDoubleRow,
+    buildSingleRow,
+    enableSandwichView,
+    fitMode,
+    flamebearer,
+    handleContextMenu,
+    handleDoubleClick,
+    handleRangeChange,
+    handleTableItemClick,
+    highlightQuery,
+    i18n,
+    onFocusOnNode,
+    palette,
+    rowCount,
+    selectedItem,
+    tableFormat,
+    tableSortProps.sortBy,
+    tableSortProps.sortByDirection,
+    updateView,
+    useWorker,
+    visibleRows,
+    virtualRange,
+    workerReady,
+  ]);
 
   const isHighlighted =
     selectedItem.isJust && selectedItem.value === contextMenuTarget;
@@ -620,9 +997,14 @@ function Table({
         {...tableSortProps}
         tableBodyRef={tableBodyRef}
         table={table}
+        isLoading={useWorker && !workerReady}
         className={cl('flamegraph-table', {
           'flamegraph-table-doubles': isDoubles,
         })}
+        virtualize={virtualize}
+        virtualizeRowHeight={virtualizeRowHeight}
+        virtualizeOverscan={virtualizeOverscan}
+        scrollRef={scrollRef}
       />
 
       {/* 右键菜单 */}
@@ -670,8 +1052,10 @@ const ProfilerTable = React.memo(function ProfilerTable({
 }: Omit<ProfilerTableProps, 'tableBodyRef'>) {
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
   const [scrollbarSize, setScrollbarSize] = useState(0);
   const isDoubles = flamebearer.format === 'double';
+  const shouldVirtualize = true;
 
   useEffect(() => {
     const bodyEl = tableBodyRef.current;
@@ -698,7 +1082,7 @@ const ProfilerTable = React.memo(function ProfilerTable({
       }
     >
       {/* 内部滚动容器：只控制表格本身的高度和滚动 */}
-      <div className="flamegraph-table-scroll">
+      <div className="flamegraph-table-scroll" ref={scrollRef}>
         <Table
           tableBodyRef={tableBodyRef}
           flamebearer={flamebearer}
@@ -711,6 +1095,10 @@ const ProfilerTable = React.memo(function ProfilerTable({
           onFocusOnNode={onFocusOnNode}
           updateView={updateView}
           enableSandwichView={enableSandwichView}
+          virtualize={shouldVirtualize}
+          virtualizeRowHeight={26}
+          virtualizeOverscan={8}
+          scrollRef={scrollRef}
         />
       </div>
 

package/src/Tooltip/Tooltip.tsx

@@ -193,6 +193,8 @@ export function Tooltip({
 }: TooltipProps) {
   const tooltipRef = useRef<HTMLDivElement>(null);
   const lastPosRef = useRef<{ x: number; y: number } | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const lastMeasureRef = useRef<{ w: number; h: number } | null>(null);
 
   const [content, setContent] = React.useState({
     title: {
@@ -216,22 +218,29 @@ export function Tooltip({
 
   const memoizedOnMouseMove = useCallback(
     (e: MouseEvent) => {
-      if (!tooltipRef.current) {
-        throw new Error('Missing tooltipElement');
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
       }
-
-      // 记录最后鼠标位置（给 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' });
+      const x = e.clientX;
+      const y = e.clientY;
+      rafRef.current = requestAnimationFrame(() => {
+        if (!tooltipRef.current) {
+          throw new Error('Missing tooltipElement');
+        }
+
+        // 记录最后鼠标位置（给 useLayoutEffect 二次校正用）
+        lastPosRef.current = { x, y };
+
+        // 先更新内容（tooltip 高度可能因此变化）
+        setTooltipContent(setContent, onMouseOut, e);
+
+        // 用当前已渲染的尺寸先算一次位置（内容变化后的真实尺寸会在 useLayoutEffect 再校正）
+        const w = tooltipRef.current.clientWidth || 0;
+        const h = tooltipRef.current.clientHeight || 0;
+
+        const { left, top } = computeSafeTooltipPos(x, y, w, h);
+        setStyle({ top, left, visibility: 'visible' });
+      });
     },
     [setTooltipContent]
   );
@@ -241,12 +250,23 @@ export function Tooltip({
     if (!dataSourceEl) {
       return () => { };
     }
+    const onMouseLeave = () => {
+      onMouseOut();
+    };
+    const onWindowMove = (e: MouseEvent) => {
+      if (!dataSourceEl.contains(e.target as Node)) {
+        onMouseOut();
+      }
+    };
 
     dataSourceEl.addEventListener(
       'mousemove',
       memoizedOnMouseMove as EventListener
     );
     dataSourceEl.addEventListener('mouseout', onMouseOut);
+    dataSourceEl.addEventListener('mouseleave', onMouseLeave);
+    window.addEventListener('mousemove', onWindowMove, { passive: true });
+    window.addEventListener('blur', onMouseLeave);
 
     return () => {
       dataSourceEl.removeEventListener(
@@ -254,6 +274,12 @@ export function Tooltip({
         memoizedOnMouseMove as EventListener
       );
       dataSourceEl.removeEventListener('mouseout', onMouseOut);
+      dataSourceEl.removeEventListener('mouseleave', onMouseLeave);
+      window.removeEventListener('mousemove', onWindowMove as EventListener);
+      window.removeEventListener('blur', onMouseLeave);
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
     };
   }, [dataSourceRef.current, memoizedOnMouseMove]);
 
@@ -265,7 +291,14 @@ export function Tooltip({
 
     const { x, y } = lastPosRef.current;
     const rect = tooltipRef.current.getBoundingClientRect();
-    const { left, top } = computeSafeTooltipPos(x, y, rect.width, rect.height);
+    const w = rect.width;
+    const h = rect.height;
+    const last = lastMeasureRef.current;
+    if (last && Math.abs(last.w - w) < 1 && Math.abs(last.h - h) < 1) {
+      return;
+    }
+    lastMeasureRef.current = { w, h };
+    const { left, top } = computeSafeTooltipPos(x, y, w, h);
 
     setStyle((prev) => {
       if (prev && prev.left === left && prev.top === top && prev.visibility === 'visible') {

package/src/shims/Table.module.scss

@@ -73,6 +73,11 @@
           background: var(--ps-ui-element-bg-highlight);
         }
       }
+
+      &.virtualSpacer {
+        pointer-events: none;
+        background: transparent !important;
+      }
     }
 
     td,