@kylincloud/flamegraph 0.36.0 → 0.36.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "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/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 });
@@ -744,8 +746,8 @@ function Table({
         },
       } satisfies ProfilerTableWorkerRequest);
     } else {
-      setWorkerReady(false);
-      setVisibleRowData([]);
+      // Keep current table visible while worker recomputes filtered/sorted rows.
+      // This avoids flicker on every keystroke in the search box.
       worker.postMessage({
         type: 'update',
         payload,
@@ -1013,6 +1015,7 @@ function Table({
         anchorPoint={anchorPoint}
         onClose={handleMenuClose}
         className={styles.tableContextMenu}
+        portal={menuPortalTarget ? { target: menuPortalTarget } : true}
       >
         {onFocusOnNode && (
           <MenuItem onClick={handleFocusClick}>
@@ -1054,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;
 
@@ -1066,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"
@@ -1096,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/sass/flamegraph.scss

@@ -46,6 +46,8 @@ pyro-flamegraph {
   overflow-y: auto;
   position: relative;
   max-height: var(--kylin-flamegraph-table-max-height, 1000px);
+  /* Avoid browser scroll anchoring jumps during async virtual row updates */
+  overflow-anchor: none;
 }
 
 .flamegraph-table-wrapper--double .flamegraph-table-scroll table {
@@ -62,6 +64,11 @@ pyro-flamegraph {
 
 .flamegraph-table-wrapper--double .flamegraph-table-scroll tbody {
   display: table-row-group;
+  overflow-anchor: none;
+}
+
+.flamegraph-table-wrapper--double .flamegraph-table-scroll tr {
+  overflow-anchor: none;
 }
 
 /* 整行都有底色，避免列间缝隙透出内容 */

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 ? (