@kylincloud/flamegraph 0.35.27 → 0.35.29

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,29 +497,161 @@ 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);
+    // eslint-disable-next-line no-console
+    console.debug('[profiler-table] worker created');
+
+    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);
+          // eslint-disable-next-line no-console
+          console.debug('[profiler-table] worker ready', {
+            rowCount: msg.payload.rowCount,
+          });
+          break;
+        }
+        case 'range': {
+          if (msg.payload.requestId !== rangeRequestIdRef.current) {
+            return;
+          }
+          setVisibleRowData(msg.payload.rows);
+          setVirtualRange({ start: msg.payload.start, end: msg.payload.end });
+          // eslint-disable-next-line no-console
+          console.debug('[profiler-table] range received', {
+            start: msg.payload.start,
+            end: msg.payload.end,
+            rows: msg.payload.rows.length,
+          });
+          break;
+        }
+        case 'findNode': {
+          const resolver = pendingFocusRef.current.get(msg.payload.requestId);
+          if (resolver) {
+            pendingFocusRef.current.delete(msg.payload.requestId);
+            resolver(msg.payload.node);
+          }
+          // eslint-disable-next-line no-console
+          console.debug('[profiler-table] findNode response', {
+            found: !!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();
+      // eslint-disable-next-line no-console
+      console.debug('[profiler-table] worker terminated');
+    };
+  }, [useWorker]);
+
+  const requestFocusNode = useCallback(
+    (name: string) => {
+    if (!useWorker || !workerRef.current) {
+      return Promise.resolve(findNodeByName(flamebearer, name));
+    }
+    const requestId = ++focusRequestIdRef.current;
+    // eslint-disable-next-line no-console
+    console.debug('[profiler-table] findNode request', { name, requestId });
+    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(
     (name: string) => {
       // 先确保该项被高亮（如果未高亮则高亮，如果已高亮则保持）
       if (!selectedItem.isJust || selectedItem.value !== name) {
+        // eslint-disable-next-line no-console
+        console.time(`[profiler-table] dblclick highlight ${name}`);
         handleTableItemClick({ name });
+        // eslint-disable-next-line no-console
+        console.timeEnd(`[profiler-table] dblclick highlight ${name}`);
       }
 
       // 然后聚焦到火焰图
-      if (!onFocusOnNode) return;
-
-      const node = findNodeByName(flamebearer, name);
-      if (node) {
-        onFocusOnNode(node.i, node.j);
-      }
+      // eslint-disable-next-line no-console
+      console.time(`[profiler-table] dblclick focus ${name}`);
+      focusByName(name);
+      // eslint-disable-next-line no-console
+      console.timeEnd(`[profiler-table] dblclick focus ${name}`);
     },
-    [flamebearer, onFocusOnNode, selectedItem, handleTableItemClick]
+    [focusByName, selectedItem, handleTableItemClick]
   );
 
   // 右键菜单处理
@@ -511,14 +672,14 @@ function Table({
 
   // 菜单项：聚焦到此函数
   const handleFocusClick = useCallback(() => {
-    if (!contextMenuTarget || !onFocusOnNode) return;
-
-    const node = findNodeByName(flamebearer, contextMenuTarget);
-    if (node) {
-      onFocusOnNode(node.i, node.j);
-    }
+    if (!contextMenuTarget) return;
+    // eslint-disable-next-line no-console
+    console.time(`[profiler-table] menu focus ${contextMenuTarget}`);
+    focusByName(contextMenuTarget);
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[profiler-table] menu focus ${contextMenuTarget}`);
     handleMenuClose();
-  }, [contextMenuTarget, flamebearer, onFocusOnNode, handleMenuClose]);
+  }, [contextMenuTarget, focusByName, handleMenuClose]);
 
   // 菜单项：复制函数名
   const handleCopyClick = useCallback(() => {
@@ -590,25 +751,283 @@ 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) => {
+    // eslint-disable-next-line no-console
+    console.debug('[profiler-table] range requested', { start, end });
+    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: () => {
+          // eslint-disable-next-line no-console
+          console.time(`[profiler-table] click ${x.name}`);
+          handleTableItemClick({ name: x.name });
+          // eslint-disable-next-line no-console
+          console.timeEnd(`[profiler-table] click ${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: () => {
+          // eslint-disable-next-line no-console
+          console.time(`[profiler-table] click ${x.name}`);
+          handleTableItemClick({ name: x.name });
+          // eslint-disable-next-line no-console
+          console.timeEnd(`[profiler-table] click ${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 +1039,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 +1094,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 +1124,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 +1137,10 @@ const ProfilerTable = React.memo(function ProfilerTable({
           onFocusOnNode={onFocusOnNode}
           updateView={updateView}
           enableSandwichView={enableSandwichView}
+          virtualize={shouldVirtualize}
+          virtualizeRowHeight={26}
+          virtualizeOverscan={8}
+          scrollRef={scrollRef}
         />
       </div>
 

package/src/SharedQueryInput.module.scss

@@ -134,3 +134,53 @@
   border-right-color: var(--ps-immutable-linked-border);
   border-bottom-color: var(--ps-immutable-linked-border);
 }
+
+.searchIcon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--ps-toolbar-icon-color);
+  font-size: 12px;
+  pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  z-index: 2;
+}
+
+:global([data-theme='kylin']) {
+  .search {
+    height: 28px;
+    border-radius: 4px;
+    padding: 0 10px 0 28px;
+    font-size: 12px;
+    color: #262626;
+    background: #ffffff;
+    border-color: #d9d9d9;
+  }
+
+  .search::placeholder {
+    color: #8c8c8c;
+  }
+
+  .search:hover {
+    border-color: #3c7150;
+  }
+
+  .search:focus-visible,
+  .search:focus {
+    border-color: #3c7150;
+    box-shadow: 0 0 0 2px rgba(60, 113, 80, 0.2);
+  }
+
+  .searchIcon {
+    color: #8c8c8c;
+  }
+
+  .sync,
+  .syncSelected {
+    height: 28px;
+    width: 28px;
+    border-radius: 4px;
+  }
+}

package/src/SharedQueryInput.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-expressions */
-import React, { useEffect, useMemo, ChangeEvent, useRef } from 'react';
+import React, { useEffect, useMemo, ChangeEvent, useRef, useState } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import Input from './shims/Input';
 import { Tooltip } from './shims/Tooltip';
 import styles from './SharedQueryInput.module.scss';
@@ -33,6 +34,8 @@ const SharedQueryInput = ({
 }: SharedQueryProps) => {
   const messages = useFlamegraphI18n();
   const prevSyncEnabled = usePreviousSyncEnabled(sharedQuery?.syncEnabled);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [isKylin, setIsKylin] = useState(false);
 
   const onQueryChange = (e: ChangeEvent<HTMLInputElement>) => {
     onHighlightChange(e.target.value);
@@ -58,6 +61,15 @@ const SharedQueryInput = ({
     }
   }, [sharedQuery?.searchQuery, sharedQuery?.syncEnabled]);
 
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el) return;
+    const kylinEl = el.closest(
+      "[data-theme='kylin'], [data-flamegraph-color-mode='kylin']"
+    );
+    setIsKylin(!!kylinEl);
+  }, []);
+
   const onToggleSync = () => {
     const newValue = sharedQuery?.syncEnabled ? false : sharedQuery?.id;
     sharedQuery?.toggleSync(newValue as string | false);
@@ -91,13 +103,16 @@ const SharedQueryInput = ({
     : messages.syncSearchBars;
 
   return (
-    <div className={styles.wrapper} style={{ width }}>
+    <div ref={wrapperRef} className={styles.wrapper} style={{ width }}>
+      <span className={styles.searchIcon}>
+        <FontAwesomeIcon icon={faSearch} />
+      </span>
       <Input
         testId="flamegraph-search"
         className={inputClassName}
         type="search"
         name="flamegraph-search"
-        placeholder={messages.searchPlaceholder}
+        placeholder={isKylin ? '搜索函数 / 过滤' : messages.searchPlaceholder}
         minLength={1}
         debounceTimeout={100}
         onChange={onQueryChange}