@kylincloud/flamegraph 0.35.27 → 0.35.28

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/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 {
@@ -83,6 +83,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 {

package/src/shims/Table.tsx

@@ -179,9 +179,14 @@ function Table({
                     {label}
                     <span
                       className={clsx(styles.sortArrow, {
-                        [styles[sortByDirection]]: sortBy === name,
+                        [styles.active]: sortBy === name,
+                        [styles.asc]: sortBy === name && sortByDirection === 'asc',
+                        [styles.desc]: sortBy === name && sortByDirection === 'desc',
                       })}
-                    />
+                    >
+                      <span className={styles.sortArrowUp} />
+                      <span className={styles.sortArrowDown} />
+                    </span>
                   </th>
                 )
             )}

package/src/shims/Tooltip.module.scss

@@ -0,0 +1,40 @@
+.tooltipWrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.tooltipBubble {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, -8px);
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 5;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.tooltipArrow {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  transform: translate(-50%, -2px);
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
+  pointer-events: none;
+}
+
+.tooltipWrapper:hover .tooltipBubble {
+  opacity: 1;
+  transform: translate(-50%, -14px);
+}

package/src/shims/Tooltip.tsx

@@ -1,5 +1,6 @@
 // src/shims/Tooltip.tsx
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import styles from './Tooltip.module.scss'
 
 export interface TooltipProps {
   placement?: string
@@ -34,18 +35,45 @@ function nodeToPlainText(node: React.ReactNode): string | undefined {
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({
-  placement, // 目前不用，但保留参数以兼容原版
+  placement, // 目前只处理 top
   title,
   content,
   children,
 }) => {
   const text = title ?? content
   const titleStr = nodeToPlainText(text)
+  const wrapperRef = useRef<HTMLSpanElement | null>(null)
+  const [isKylin, setIsKylin] = useState(false)
+
+  useEffect(() => {
+    const el = wrapperRef.current
+    if (!el) return
+    const kylinEl = el.closest(
+      "[data-theme='kylin'], [data-flamegraph-color-mode='kylin']"
+    )
+    setIsKylin(!!kylinEl)
+  }, [])
 
   // 没有文本就不加 title，避免空 tooltip
   if (!titleStr) {
     return <>{children}</>
   }
 
-  return <span title={titleStr}>{children}</span>
+  return (
+    <span
+      ref={wrapperRef}
+      className={styles.tooltipWrapper}
+      data-placement={placement || 'top'}
+      data-tooltip={isKylin ? titleStr : undefined}
+      title={isKylin ? undefined : titleStr}
+    >
+      {children}
+      {isKylin ? (
+        <span className={styles.tooltipBubble} role="tooltip">
+          {titleStr}
+          <span className={styles.tooltipArrow} />
+        </span>
+      ) : null}
+    </span>
+  )
 }