@kylincloud/flamegraph 0.35.27 → 0.35.29

package/src/Toolbar.module.scss

@@ -128,3 +128,93 @@ $buttonHeight: 37px;
   padding: 4px;
   z-index: 1;
 }
+
+:global([data-theme='kylin']) {
+  .navbar {
+    height: 40px;
+    padding: 4px 0;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .searchWrapper {
+    width: 180px;
+  }
+
+  .navbar button {
+    color: #595959;
+  }
+
+  .toggleViewButton,
+  .fitModeButton,
+  .collapseNodeButton,
+  .resetViewButton {
+    height: 28px;
+    width: 28px;
+    border: 1px solid #d9d9d9;
+    background-color: #ffffff;
+    border-radius: 4px;
+  }
+
+  .toggleViewButton:hover,
+  .fitModeButton:hover,
+  .collapseNodeButton:hover,
+  .resetViewButton:hover {
+    border-color: #3c7150;
+    color: #3c7150;
+    background-color: #e6f4ea;
+  }
+
+  .collapseNodeButton,
+  .resetViewButton {
+    background-color: #fafafa;
+  }
+
+  .collapseNodeButton:disabled,
+  .resetViewButton:disabled {
+    color: #bfbfbf;
+    border-color: #d9d9d9;
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+  }
+
+  .toggleViewButton.selected,
+  .fitModeButton.selected {
+    background-color: #3c7150;
+    border-color: #3c7150;
+  }
+
+  .toggleViewButton.selected svg {
+    color: #ffffff;
+  }
+
+  .fitModeButton.selected svg {
+    color: #ffffff;
+  }
+
+  .toggleViewButton svg,
+  .fitModeButton svg,
+  .collapseNodeButton svg,
+  .resetViewButton svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .divider {
+    height: 28px;
+    background-color: #e5e5e5;
+  }
+
+  .moreButton {
+    height: 28px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background-color: #ffffff;
+  }
+
+  .moreButton:hover {
+    border-color: #3c7150;
+    color: #3c7150;
+    background-color: #e6f4ea;
+  }
+}

package/src/Toolbar.tsx

@@ -7,6 +7,7 @@ import React, {
   useLayoutEffect,
   isValidElement,
   memo,
+  useEffect,
 } from 'react';
 import classNames from 'classnames/bind';
 import { faUndo } from '@fortawesome/free-solid-svg-icons/faUndo';
@@ -170,8 +171,21 @@ const Toolbar = memo(
     setPalette,
   }: ProfileHeaderProps) => {
     const toolbarRef = useRef<HTMLDivElement>(null);
+    const [isKylin, setIsKylin] = useState(false);
     const i18n = useFlamegraphI18n();
 
+    useEffect(() => {
+      const el = toolbarRef.current;
+      if (!el) return;
+      const kylinEl = el.closest(
+        "[data-theme='kylin'], [data-flamegraph-color-mode='kylin']"
+      );
+      setIsKylin(!!kylinEl);
+    }, []);
+
+    const toolbarSquareWidth = isKylin ? 32 : TOOLBAR_SQUARE_WIDTH;
+    const queryInputWidth = isKylin ? 220 : QUERY_INPUT_WIDTH;
+
     // 是否显示调色板选择器（仅在 diff 模式且有 palette 时显示）
     const showPaletteDropdown = flamegraphType === 'double' && palette && setPalette;
 
@@ -182,11 +196,11 @@ const Toolbar = memo(
           <Divider />
         </>
       ),
-      width: TOOLBAR_SQUARE_WIDTH * 2 + DIVIDER_WIDTH,
+      width: toolbarSquareWidth * 2 + DIVIDER_WIDTH,
     };
     const resetItem = {
       el: <ResetView isFlamegraphDirty={isFlamegraphDirty} reset={reset} />,
-      width: TOOLBAR_SQUARE_WIDTH,
+      width: toolbarSquareWidth,
     };
     const focusOnSubtree = {
       el: (
@@ -198,7 +212,7 @@ const Toolbar = memo(
           <Divider />
         </>
       ),
-      width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
+      width: toolbarSquareWidth + DIVIDER_WIDTH,
     };
 
     const viewSectionItem = enableChangingDisplay
@@ -210,7 +224,7 @@ const Toolbar = memo(
               updateView={updateView}
             />
           ),
-          width: TOOLBAR_SQUARE_WIDTH * (flamegraphType === 'single' ? 5 : 3),
+          width: toolbarSquareWidth * (flamegraphType === 'single' ? 5 : 3),
         }
       : null;
     const exportDataItem = isValidElement(ExportData)
@@ -221,7 +235,7 @@ const Toolbar = memo(
               {ExportData}
             </>
           ),
-          width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
+          width: toolbarSquareWidth + DIVIDER_WIDTH,
         }
       : null;
 
@@ -261,7 +275,7 @@ const Toolbar = memo(
           {/* 左侧：搜索框 */}
           <div className={styles.searchWrapper}>
             <SharedQueryInput
-              width={QUERY_INPUT_WIDTH}
+              width={queryInputWidth}
               onHighlightChange={handleSearchChange}
               highlightQuery={highlightQuery}
               sharedQuery={sharedQuery}
@@ -430,17 +444,17 @@ const getViewOptions = (
 }> =>
   flamegraphType === 'single'
     ? [
+        {
+          label: messages.viewFlamegraph,
+          value: 'flamegraph',
+          Icon: FlamegraphIcon,
+        },
         { label: messages.viewTable, value: 'table', Icon: TableIcon },
         {
           label: messages.viewTableAndFlamegraph,
           value: 'both',
           Icon: TablePlusFlamegraphIcon,
         },
-        {
-          label: messages.viewFlamegraph,
-          value: 'flamegraph',
-          Icon: FlamegraphIcon,
-        },
         { label: messages.viewSandwich, value: 'sandwich', Icon: SandwichIcon },
         {
           label: messages.viewGraphviz,
@@ -449,17 +463,17 @@ const getViewOptions = (
         },
       ]
     : [
+        {
+          label: messages.viewFlamegraph,
+          value: 'flamegraph',
+          Icon: FlamegraphIcon,
+        },
         { label: messages.viewTable, value: 'table', Icon: TableIcon },
         {
           label: messages.viewTableAndFlamegraph,
           value: 'both',
           Icon: TablePlusFlamegraphIcon,
         },
-        {
-          label: messages.viewFlamegraph,
-          value: 'flamegraph',
-          Icon: FlamegraphIcon,
-        },
       ];
 
 function ViewSection({

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/i18n.tsx

@@ -296,7 +296,7 @@ export const zhCNMessages: FlamegraphMessages = {
   diffLegendAddedLabel: '增加 (+)',
   diffLegendSelectPalette: '选择颜色方案',
   paletteDefaultName: '默认',
-  paletteColorBlindName: '色盲模式',
+  paletteColorBlindName: '色盲',
   // 调色板补充描述（中文）
   paletteDefaultDesc: '(绿色 → 红色)',
   paletteColorBlindDesc: '(蓝色 → 红色)',

package/src/sass/_common.scss

@@ -131,9 +131,8 @@ tt {
     padding: 6px 10px;
   }
 
-  tr th,
-  tr:nth-child(2n) td {
-    background: var(--ps-neutral-9);
+  thead th {
+    background: var(--ps-table-header-bg, var(--ps-ui-foreground, #ffffff));
   }
 
   td {
@@ -182,3 +181,23 @@ tt {
     }
   }
 }
+
+// Kylin theme table density tweaks to match Insights UI
+:global([data-theme='kylin']) {
+  .flamegraph-table {
+    font-size: 12px;
+    border-color: #d9d9d9;
+  }
+
+  .flamegraph-table th {
+    padding: 6px 8px;
+    border-left-color: #d9d9d9;
+    border-bottom-color: #d9d9d9;
+  }
+
+  .flamegraph-table td {
+    padding: 4px 8px;
+    border-left-color: #f0f0f0;
+    border-bottom-color: #f0f0f0;
+  }
+}

package/src/sass/_css-variables.scss

@@ -57,6 +57,8 @@
   // 表头（使用实心背景，避免 sticky 时透出内容）
   --ps-table-header-bg: #212124;
   --ps-table-header-text: #d8d8d8;
+  --ps-table-sort-icon: #9a9aa0;
+  --ps-table-sort-icon-active: var(--ps-button-switch-bg-highlight);
 
   // 选择器
   --ps-selected-app: #df8b53;
@@ -209,6 +211,8 @@
   --ps-tooltip-header-bg: #f0f0f0;
 
   // 表头专用：完全不透明的白色
-  --ps-table-header-bg: #ffffff;
+  --ps-table-header-bg: #fafafa;
   --ps-table-header-text: #000000;
+  --ps-table-sort-icon: #bfbfbf;
+  --ps-table-sort-icon-active: #5d976f;
 }

package/src/sass/flamegraph.scss

@@ -29,43 +29,41 @@ pyro-flamegraph {
 
 /* 只在差分火焰图（double）模式下启用滚动限制 */
 /* 把滚动交给 tbody，表头固定在表格上方 */
-.flamegraph-table-wrapper--double .flamegraph-table-scroll {
+.flamegraph-table-wrapper--double {
+  border: 1px solid var(--ps-ui-border);
+  border-radius: 6px;
   overflow: hidden;
-  position: relative;
-}
-
-.flamegraph-table-wrapper--double .flamegraph-table-scroll table {
-  width: 100%;
-  table-layout: fixed;
+  background-color: var(--ps-ui-foreground, #fff);
+  min-height: var(--kylin-flamegraph-pane-min-height, 320px);
 }
 
-.flamegraph-table-wrapper--double .flamegraph-table-scroll thead {
-  display: table;
-  width: calc(100% - var(--kylin-flamegraph-scrollbar-size, 0px));
-  table-layout: fixed;
+.flamegraph-table-wrapper--double .flamegraph-table {
+  border: none;
 }
 
-.flamegraph-table-wrapper--double .flamegraph-table-scroll tbody {
-  display: block;
-  max-height: var(--kylin-flamegraph-table-max-height, 1000px);
-  overflow-y: scroll;
+.flamegraph-table-wrapper--double .flamegraph-table-scroll {
   overflow-x: hidden;
-  scrollbar-gutter: stable;
+  overflow-y: auto;
+  position: relative;
+  max-height: var(--kylin-flamegraph-table-max-height, 1000px);
 }
 
-.flamegraph-table-wrapper--double .flamegraph-table-scroll tbody tr {
-  display: table;
+.flamegraph-table-wrapper--double .flamegraph-table-scroll table {
   width: 100%;
   table-layout: fixed;
 }
 
-/* 表头固定 + 不透明背景，避免内容透出来 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll thead {
+  display: table-header-group;
   position: sticky;
   top: 0;
   z-index: 3; // 比下面的行和 tooltip 都高一点
 }
 
+.flamegraph-table-wrapper--double .flamegraph-table-scroll tbody {
+  display: table-row-group;
+}
+
 /* 整行都有底色，避免列间缝隙透出内容 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll thead tr {
   background-color: var(--ps-table-header-bg, var(--ps-ui-foreground, #ffffff));
@@ -85,14 +83,19 @@ pyro-flamegraph {
 
 /* 可选：稍微美化一下内部滚动条，轨道透明，避免太抢眼 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
 }
 
 .flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar-track {
-  background: transparent;
+  background: #f5f5f5;
+  border-radius: 6px;
 }
 
 .flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.18);
-  border-radius: 4px;
+  background-color: #bfbfbf;
+  border-radius: 6px;
+}
+
+.flamegraph-table-wrapper--double .flamegraph-table-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: #8c8c8c;
 }

package/src/shims/Table.module.scss

@@ -21,23 +21,23 @@
       top: 3px;
       position: relative;
       margin-left: 7px;
+    }
 
-      &.asc {
-        border-top-color: transparent;
-        border-bottom-color: var(--ps-button-switch-bg-highlight);
-        top: -2px;
-      }
+    .sortArrowUp,
+    .sortArrowDown {
+      display: none;
+    }
 
-      &.desc {
-        border-top-color: var(--ps-button-switch-bg-highlight);
-        top: 3px;
-      }
+    .sortArrow.asc {
+      border-top-color: transparent;
+      border-bottom-color: var(--ps-button-switch-bg-highlight);
+      top: -2px;
     }
-  }
 
-  /* 斑马纹只应用在 tbody 行，不再影响 thead */
-  tbody tr:nth-child(2n) {
-    background-color: var(--ps-neutral-9);
+    .sortArrow.desc {
+      border-top-color: var(--ps-button-switch-bg-highlight);
+      top: 3px;
+    }
   }
 
   tbody {
@@ -73,6 +73,11 @@
           background: var(--ps-ui-element-bg-highlight);
         }
       }
+
+      &.virtualSpacer {
+        pointer-events: none;
+        background: transparent !important;
+      }
     }
 
     td,
@@ -83,6 +88,79 @@
   }
 }
 
+:global([data-theme='kylin']) {
+  .table {
+    thead th {
+      text-align: left;
+      background: #fafafa;
+      border-color: #d9d9d9;
+    }
+
+    tbody td {
+      border-color: #f0f0f0;
+    }
+
+    tbody tr:not(.isRowSelected):hover {
+      background: #f5f5f5;
+      color: var(--ps-neutral-2);
+    }
+
+    thead th {
+      &.sortable {
+        position: relative;
+        padding-right: 18px;
+      }
+
+      .sortArrow {
+        display: inline-flex;
+        flex-direction: column;
+        margin-left: 6px;
+        line-height: 1;
+        border: 0;
+        position: absolute;
+        right: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        vertical-align: middle;
+      }
+
+      .sortArrowUp,
+      .sortArrowDown {
+        display: inline-block;
+        width: 0;
+        height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        opacity: 0.35;
+      }
+
+      .sortArrowUp {
+        border-bottom: 5px solid var(--ps-table-sort-icon, var(--ps-ui-foreground-text));
+        margin-bottom: 2px;
+      }
+
+      .sortArrowDown {
+        border-top: 5px solid var(--ps-table-sort-icon, var(--ps-ui-foreground-text));
+      }
+
+      .sortArrow.active .sortArrowUp,
+      .sortArrow.active .sortArrowDown {
+        opacity: 0.45;
+      }
+
+      .sortArrow.asc .sortArrowUp {
+        border-bottom-color: var(--ps-table-sort-icon-active, var(--ps-button-switch-bg-highlight));
+        opacity: 1;
+      }
+
+      .sortArrow.desc .sortArrowDown {
+        border-top-color: var(--ps-table-sort-icon-active, var(--ps-button-switch-bg-highlight));
+        opacity: 1;
+      }
+    }
+  }
+}
+
 .table:global(.flamegraph-table-doubles) {
   th:first-child,
   td:first-child {