@kylincloud/flamegraph 0.35.29 → 0.36.1

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"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"}

package/dist/workers/createFlamegraphRenderWorker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFlamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/createFlamegraphRenderWorker.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,IAAI,MAAM,CAMrD"}
+{"version":3,"file":"createFlamegraphRenderWorker.d.ts","sourceRoot":"","sources":["../../src/workers/createFlamegraphRenderWorker.ts"],"names":[],"mappings":"AAAA,wBAAgB,4BAA4B,IAAI,MAAM,CAsBrD"}

package/dist/workers/profilerTableWorker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"profilerTableWorker.d.ts","sourceRoot":"","sources":["../../src/workers/profilerTableWorker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAC9B;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,0BAA0B,GAClC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,EAAE,CAAC;YAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,MAAM,MAAM,2BAA2B,GACnC;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,IAAI,EAAE,sBAAsB,EAAE,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,wBAAgB,yBAAyB,IAAI,MAAM,CA+RlD"}
+{"version":3,"file":"profilerTableWorker.d.ts","sourceRoot":"","sources":["../../src/workers/profilerTableWorker.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAC9B;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEN,MAAM,MAAM,0BAA0B,GAClC;IACE,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QACP,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,EAAE,CAAC;YAChB,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;YACnB,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;YAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;YACnB,UAAU,CAAC,EAAE,MAAM,CAAC;SACrB,CAAC;QACF,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE;QACP,MAAM,EAAE,MAAM,CAAC;QACf,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;QAChC,cAAc,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,MAAM,MAAM,2BAA2B,GACnC;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE;QACP,IAAI,EAAE,sBAAsB,EAAE,CAAC;QAC/B,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE;QACP,IAAI,EAAE;YAAE,CAAC,EAAE,MAAM,CAAC;YAAC,CAAC,EAAE,MAAM,CAAA;SAAE,GAAG,IAAI,CAAC;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH,CAAC;AAEN,wBAAgB,yBAAyB,IAAI,MAAM,CAqQlD"}

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/ContextMenu.module.scss

@@ -1,10 +1,46 @@
 // a dummy class is required
 // so that the component can import this class
 // and therefore the library style (index.css above) is imported
-.dummy {
+.menu {
   display: block;
 
   svg {
     margin-right: 10px;
   }
+
+  :global(.szh-menu) {
+    background-color: var(--ps-dropdown-background, #fff);
+    border: 1px solid var(--ps-ui-border, #d9d9d9);
+    border-radius: 6px;
+    box-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    padding: 4px 0;
+    min-width: 180px;
+    font-size: 13px;
+    color: var(--ps-ui-foreground-text, #000);
+  }
+
+  :global(.szh-menu__item) {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    height: 32px;
+    cursor: pointer;
+    color: inherit;
+    transition: background-color 0.15s;
+
+    &:hover {
+      background-color: var(--ps-ui-element-bg-highlight, #f5f5f5);
+    }
+
+    svg {
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+      margin-right: 0;
+    }
+  }
 }

package/src/FlameGraph/FlameGraphComponent/ContextMenu.tsx

@@ -76,7 +76,7 @@ export default function ContextMenu(props: ContextMenuProps) {
   return (
     <ControlledMenu
       {...menuProps}
-      className={styles.dummy}
+      className={styles.menu}
       anchorPoint={anchorPoint}
       onClose={onClose}
     >

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -80,7 +80,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const textCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const flamegraph = useRef<Flamegraph>();
   const flamegraphText = useRef<Flamegraph>();
-  const renderSeq = useRef(0);
   const renderWorkerRef = useRef<Worker | null>(null);
   const rectOffscreenRef = useRef<OffscreenCanvas | null>(null);
   const textOffscreenRef = useRef<OffscreenCanvas | null>(null);
@@ -159,8 +158,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     }
     const worker = createFlamegraphRenderWorker();
     renderWorkerRef.current = worker;
-    // eslint-disable-next-line no-console
-    console.debug('[flamegraph] render worker created');
     setTimeout(() => {
       renderRectCanvas();
       renderTextCanvas();
@@ -171,8 +168,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       rectOffscreenRef.current = null;
       textOffscreenRef.current = null;
       workerReadyRef.current = { rect: false, text: false };
-      // eslint-disable-next-line no-console
-      console.debug('[flamegraph] render worker terminated');
     };
   }, [useRenderWorker]);
 
@@ -375,10 +370,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   );
 
   const constructCanvas = () => {
-    const seq = renderSeq.current + 1;
-    renderSeq.current = seq;
-    // eslint-disable-next-line no-console
-    console.time(`[flamegraph] constructCanvas #${seq}`);
     if (canvasRef.current) {
       const f = new Flamegraph(
         flamebearer,
@@ -406,8 +397,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       );
       flamegraphText.current = f;
     }
-    // eslint-disable-next-line no-console
-    console.timeEnd(`[flamegraph] constructCanvas #${seq}`);
   };
 
   const ensureRenderWorkerCanvases = useCallback(() => {
@@ -426,8 +415,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         );
         workerReadyRef.current.rect = true;
       } catch (err) {
-        // eslint-disable-next-line no-console
-        console.debug('[flamegraph] rect transfer failed', err);
       }
     }
 
@@ -441,8 +428,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         );
         workerReadyRef.current.text = true;
       } catch (err) {
-        // eslint-disable-next-line no-console
-        console.debug('[flamegraph] text transfer failed', err);
       }
     }
 
@@ -482,8 +467,6 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       return false;
     }
     if (!renderWorkerRef.current) {
-      // eslint-disable-next-line no-console
-      console.debug('[flamegraph] worker not ready yet');
       return true;
     }
     if (!ensureRenderWorkerCanvases()) {
@@ -512,35 +495,21 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   };
 
   const renderRectCanvas = () => {
-    const seq = renderSeq.current;
     if (postWorkerRender('rect', { renderText: false })) {
-      // eslint-disable-next-line no-console
-      console.debug(`[flamegraph] renderRects via worker #${seq}`);
       return;
     }
-    // eslint-disable-next-line no-console
-    console.time(`[flamegraph] renderRects #${seq}`);
     canvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraph?.current?.render({ renderText: false });
     canvasRef?.current?.setAttribute('data-state', 'rendered');
-    // eslint-disable-next-line no-console
-    console.timeEnd(`[flamegraph] renderRects #${seq}`);
   };
 
   const renderTextCanvas = () => {
-    const seq = renderSeq.current;
     if (postWorkerRender('text', { renderRects: false })) {
-      // eslint-disable-next-line no-console
-      console.debug(`[flamegraph] renderText via worker #${seq}`);
       return;
     }
-    // eslint-disable-next-line no-console
-    console.time(`[flamegraph] renderText #${seq}`);
     textCanvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraphText?.current?.render({ renderRects: false });
     textCanvasRef?.current?.setAttribute('data-state', 'rendered');
-    // eslint-disable-next-line no-console
-    console.timeEnd(`[flamegraph] renderText #${seq}`);
   };
 
   const dataUnavailable =

package/src/FlameGraph/FlameGraphComponent/styles.module.scss

@@ -5,7 +5,7 @@
   .fitModeItem svg,
   .sandwichItem svg {
     width: 1em;
-    margin-right: 10px;
+    margin-right: 0;
   }
 }
 

package/src/ProfilerTable.module.scss

@@ -3,27 +3,32 @@
 .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);
+    background-color: var(--ps-dropdown-background, #fff);
+    border: 1px solid var(--ps-ui-border, #d9d9d9);
+    border-radius: 6px;
+    box-shadow:
+      0 6px 16px 0 rgba(0, 0, 0, 0.08),
+      0 3px 6px -4px rgba(0, 0, 0, 0.12),
+      0 9px 28px 8px rgba(0, 0, 0, 0.05);
     padding: 4px 0;
     min-width: 180px;
-    z-index: 1000;
+    font-size: 13px;
+    z-index: 3000;
   }
 
   :global(.szh-menu__item) {
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 8px 12px;
+    padding: 6px 12px;
+    height: 32px;
     cursor: pointer;
-    color: var(--ps-ui-foreground-text, #333);
-    font-size: 13px;
+    color: var(--ps-ui-foreground-text, #000);
+    font-size: inherit;
     transition: background-color 0.15s;
 
     &:hover {
-      background-color: var(--ps-ui-element-bg-highlight, #f0f0f0);
+      background-color: var(--ps-ui-element-bg-highlight, #f5f5f5);
     }
 
     svg {

package/src/ProfilerTable.tsx

@@ -501,12 +501,14 @@ function Table({
   virtualizeRowHeight,
   virtualizeOverscan,
   scrollRef,
+  menuPortalTarget,
 }: ProfilerTableProps & {
   isDoubles: boolean;
   virtualize?: boolean;
   virtualizeRowHeight?: number;
   virtualizeOverscan?: number;
   scrollRef?: RefObject<HTMLElement>;
+  menuPortalTarget?: HTMLElement | null;
 }) {
   const i18n = useFlamegraphI18n();
   const [menuProps, toggleMenu] = useMenuState({ transition: true });
@@ -540,8 +542,6 @@ function Table({
     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;
@@ -553,10 +553,6 @@ function Table({
           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': {
@@ -565,12 +561,6 @@ function Table({
           }
           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': {
@@ -579,10 +569,6 @@ function Table({
             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:
@@ -596,8 +582,6 @@ function Table({
       worker.terminate();
       workerRef.current = null;
       pendingFocusRef.current.clear();
-      // eslint-disable-next-line no-console
-      console.debug('[profiler-table] worker terminated');
     };
   }, [useWorker]);
 
@@ -607,8 +591,6 @@ function Table({
       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({
@@ -637,19 +619,11 @@ function Table({
     (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}`);
       }
 
       // 然后聚焦到火焰图
-      // 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}`);
     },
     [focusByName, selectedItem, handleTableItemClick]
   );
@@ -673,11 +647,7 @@ function Table({
   // 菜单项：聚焦到此函数
   const handleFocusClick = useCallback(() => {
     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, focusByName, handleMenuClose]);
 
@@ -793,8 +763,6 @@ function Table({
   ]);
 
   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;
@@ -847,11 +815,7 @@ function Table({
         '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),
@@ -921,11 +885,7 @@ function Table({
         '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),
@@ -1055,6 +1015,7 @@ function Table({
         anchorPoint={anchorPoint}
         onClose={handleMenuClose}
         className={styles.tableContextMenu}
+        portal={menuPortalTarget ? { target: menuPortalTarget } : true}
       >
         {onFocusOnNode && (
           <MenuItem onClick={handleFocusClick}>
@@ -1096,6 +1057,9 @@ const ProfilerTable = React.memo(function ProfilerTable({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
   const [scrollbarSize, setScrollbarSize] = useState(0);
+  const [menuPortalTarget, setMenuPortalTarget] = useState<HTMLElement | null>(
+    null
+  );
   const isDoubles = flamebearer.format === 'double';
   const shouldVirtualize = true;
 
@@ -1108,6 +1072,26 @@ const ProfilerTable = React.memo(function ProfilerTable({
     }
   }, [tableBodyRef.current, isDoubles, scrollbarSize]);
 
+  useEffect(() => {
+    const host = wrapperRef.current;
+    if (!host || typeof document === 'undefined') return;
+
+    const themeHost = host.closest(
+      "[data-theme], [data-flamegraph-color-mode]"
+    ) as HTMLElement | null;
+    const targetParent = themeHost || host;
+    const portalTarget = document.createElement('div');
+    portalTarget.className = 'flamegraph-menu-portal';
+    targetParent.appendChild(portalTarget);
+    setMenuPortalTarget(portalTarget);
+
+    return () => {
+      if (portalTarget.parentElement) {
+        portalTarget.parentElement.removeChild(portalTarget);
+      }
+    };
+  }, []);
+
   return (
     <div
       data-testid="table-view"
@@ -1138,9 +1122,9 @@ const ProfilerTable = React.memo(function ProfilerTable({
           updateView={updateView}
           enableSandwichView={enableSandwichView}
           virtualize={shouldVirtualize}
-          virtualizeRowHeight={26}
           virtualizeOverscan={8}
           scrollRef={scrollRef}
+          menuPortalTarget={menuPortalTarget}
         />
       </div>
 

package/src/shims/Table.tsx

@@ -177,6 +177,7 @@ function Table({
   const [measuredRowHeight, setMeasuredRowHeight] = useState<number | null>(null);
   const [scrollEl, setScrollEl] = useState<HTMLElement | null>(null);
   const rafRef = useRef<number | null>(null);
+  const lastVirtualRowsRef = useRef<BodyRow[] | null>(null);
 
   useLayoutEffect(() => {
     if (scrollRef?.current && scrollRef.current !== scrollEl) {
@@ -231,7 +232,8 @@ function Table({
         ? bodyRows.length
         : 0;
 
-  const rowHeight = virtualizeRowHeight || measuredRowHeight || 0;
+  // Fallback row height prevents empty render when no measurement yet.
+  const rowHeight = virtualizeRowHeight || measuredRowHeight || 26;
   const canVirtualize =
     !!virtualize &&
     !!scrollEl &&
@@ -296,13 +298,22 @@ function Table({
       }))
       : [];
 
-  const renderVirtualRows =
+  const shouldUseFreshRows =
     table.type === 'virtual' &&
     virtualState &&
     table.range &&
     table.range.start === virtualState.startIndex &&
-    table.range.end === virtualState.endIndex
-      ? table.rows
+    table.range.end === virtualState.endIndex;
+
+  if (table.type === 'virtual' && shouldUseFreshRows) {
+    lastVirtualRowsRef.current = table.rows;
+  }
+
+  const renderVirtualRows =
+    table.type === 'virtual'
+      ? (shouldUseFreshRows
+        ? table.rows
+        : lastVirtualRowsRef.current || placeholderRows)
       : placeholderRows;
 
   return isLoading ? (

package/src/workers/createFlamegraphRenderWorker.ts

@@ -1,7 +1,23 @@
 export function createFlamegraphRenderWorker(): Worker {
-  const fromSrc = import.meta.url.includes('/src/');
-  const workerUrl = fromSrc
-    ? new URL('./flamegraphRenderWorker.ts', import.meta.url)
-    : new URL('./flamegraphRenderWorker.js', import.meta.url);
+  const metaUrl = new URL(import.meta.url);
+  const pathname = metaUrl.pathname;
+  const isFromSrc = pathname.includes('/src/');
+  const isFromDist = pathname.includes('/dist/');
+  const isFromViteDeps = pathname.includes('/node_modules/.vite/deps/');
+
+  if (isFromViteDeps) {
+    // Vite prebundle path -> hop back to node_modules/@kylincloud/flamegraph/dist
+    const viteDepsWorkerUrl = new URL(
+      '../../@kylincloud/flamegraph/dist/flamegraphRenderWorker.js',
+      metaUrl
+    );
+    return new Worker(viteDepsWorkerUrl, { type: 'module' });
+  }
+
+  const workerUrl = isFromSrc
+    ? new URL('./flamegraphRenderWorker.ts', metaUrl)
+    : isFromDist
+      ? new URL('./flamegraphRenderWorker.js', metaUrl)
+      : new URL('./flamegraphRenderWorker.js', metaUrl);
   return new Worker(workerUrl, { type: 'module' });
 }

package/src/workers/flamegraphRenderWorker.ts

@@ -107,8 +107,6 @@ const runChunk = (kind: 'rect' | 'text', token: number) => {
   }
   const canvas = kind === 'rect' ? state.rectCanvas : state.textCanvas;
   if (!canvas) {
-    // eslint-disable-next-line no-console
-    console.debug('[flamegraph-worker] missing canvas for', kind);
     renderState.running = false;
     return;
   }
@@ -155,8 +153,6 @@ const renderFlamegraph = (payload: FlamegraphRenderRequest['payload']) => {
   const canvas =
     payload.kind === 'rect' ? state.rectCanvas : state.textCanvas;
   if (!canvas) {
-    // eslint-disable-next-line no-console
-    console.debug('[flamegraph-worker] missing canvas for', payload.kind);
     return;
   }
 
@@ -188,8 +184,6 @@ self.onmessage = (event: MessageEvent<FlamegraphWorkerMessage>) => {
     } else {
       state.textCanvas = msg.payload.canvas;
     }
-    // eslint-disable-next-line no-console
-    console.debug('[flamegraph-worker] init', msg.payload.kind);
     return;
   }
   if (msg.type === 'render') {

package/src/workers/profilerTableWorker.ts

@@ -275,13 +275,6 @@ export function createProfilerTableWorker(): Worker {
       state.sortByDirection = payload.sortByDirection;
       state.highlightQuery = payload.highlightQuery || '';
       applyFilterAndSort();
-      // eslint-disable-next-line no-console
-      console.debug('[profiler-table-worker] init ready', {
-        rowCount: state.rows.length,
-        sortBy: state.sortBy,
-        sortByDirection: state.sortByDirection,
-        highlightQuery: state.highlightQuery,
-      });
       self.postMessage({
         type: 'ready',
         payload: { rowCount: state.rows.length },
@@ -293,13 +286,6 @@ export function createProfilerTableWorker(): Worker {
       state.sortByDirection = payload.sortByDirection;
       state.highlightQuery = payload.highlightQuery || '';
       applyFilterAndSort();
-      // eslint-disable-next-line no-console
-      console.debug('[profiler-table-worker] update ready', {
-        rowCount: state.rows.length,
-        sortBy: state.sortBy,
-        sortByDirection: state.sortByDirection,
-        highlightQuery: state.highlightQuery,
-      });
       self.postMessage({
         type: 'ready',
         payload: { rowCount: state.rows.length },
@@ -311,12 +297,6 @@ export function createProfilerTableWorker(): Worker {
       const safeStart = Math.max(0, start);
       const safeEnd = Math.min(state.rows.length, end);
       const rows = state.rows.slice(safeStart, safeEnd);
-      // eslint-disable-next-line no-console
-      console.debug('[profiler-table-worker] range', {
-        start: safeStart,
-        end: safeEnd,
-        requestId,
-      });
       self.postMessage({
         type: 'range',
         payload: { rows, start: safeStart, end: safeEnd, requestId },
@@ -326,12 +306,6 @@ export function createProfilerTableWorker(): Worker {
     const handleFindNode = (payload) => {
       const { name, requestId } = payload;
       const best = state.bestNodeByName.get(name);
-      // eslint-disable-next-line no-console
-      console.debug('[profiler-table-worker] findNode', {
-        name,
-        found: !!best,
-        requestId,
-      });
       self.postMessage({
         type: 'findNode',
         payload: { node: best ? { i: best.i, j: best.j } : null, requestId },