@kylincloud/flamegraph 0.35.25 → 0.35.27

package/package.json

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

package/src/ProfilerTable.tsx

@@ -1,5 +1,5 @@
 // src/ProfilerTable.tsx
-import React, { useRef, RefObject, useCallback, useState } from 'react';
+import React, { useRef, RefObject, useCallback, useState, useEffect } from 'react';
 import type Color from 'color';
 import cl from 'classnames';
 import type { Maybe } from 'true-myth';
@@ -329,7 +329,7 @@ const getTableBody = ({
   const nameCell = (x: { name: string }) => (
     <button className="table-item-button">
       <div className="symbol-name" style={fitIntoTableCell(fitMode)}>
-        {x.name}
+        <bdi dir="ltr">{x.name}</bdi>
       </div>
     </button>
   );
@@ -359,10 +359,13 @@ const getTableBody = ({
   const getDoubleRow = (
     x: DoubleCell & { name: string }
   ): BodyRow => {
-    const leftPercent = ratioToPercent(x.totalLeft / x.leftTicks);
-    const rghtPercent = ratioToPercent(x.totalRght / x.rightTicks);
+    const leftPercent = ratioToPercent(x.leftTicks > 0 ? x.totalLeft / x.leftTicks : 0);
+    const rghtPercent = ratioToPercent(x.rightTicks > 0 ? x.totalRght / x.rightTicks : 0);
 
-    const totalDiff = diffPercent(leftPercent, rghtPercent);
+    let totalDiff = diffPercent(leftPercent, rghtPercent);
+    if (!Number.isFinite(totalDiff)) {
+      totalDiff = 0;
+    }
 
     let diffCellColor = '';
     if (totalDiff > 0) {
@@ -372,12 +375,14 @@ const getTableBody = ({
     }
 
     let diffValue = '';
-    if (!x.totalLeft || totalDiff === Infinity) {
+    if (x.totalLeft === 0 && x.totalRght > 0) {
       // this is a new function
       diffValue = messages.diffNew;
-    } else if (!x.totalRght) {
+    } else if (x.totalRght === 0 && x.totalLeft > 0) {
       // this function has been removed
       diffValue = messages.diffRemoved;
+    } else if (totalDiff === 0) {
+      diffValue = '0%';
     } else if (totalDiff > 0) {
       diffValue = `+${totalDiff.toFixed(2)}%`;
     } else if (totalDiff < 0) {
@@ -664,11 +669,28 @@ const ProfilerTable = React.memo(function ProfilerTable({
   enableSandwichView,
 }: Omit<ProfilerTableProps, 'tableBodyRef'>) {
   const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const [scrollbarSize, setScrollbarSize] = useState(0);
   const isDoubles = flamebearer.format === 'double';
 
+  useEffect(() => {
+    const bodyEl = tableBodyRef.current;
+    if (!bodyEl) return;
+    const next = bodyEl.offsetWidth - bodyEl.clientWidth;
+    if (Number.isFinite(next) && next !== scrollbarSize) {
+      setScrollbarSize(next);
+    }
+  }, [tableBodyRef.current, isDoubles, scrollbarSize]);
+
   return (
     <div
       data-testid="table-view"
+      ref={wrapperRef}
+      style={
+        {
+          '--kylin-flamegraph-scrollbar-size': `${scrollbarSize}px`,
+        } as React.CSSProperties
+      }
       className={
         isDoubles
           ? 'flamegraph-table-wrapper flamegraph-table-wrapper--double'

package/src/Tooltip/FlamegraphTooltip.tsx

@@ -214,8 +214,8 @@ export function formatDouble(
     };
   };
 } {
-  const leftRatio = totalLeft / leftTicks;
-  const rightRatio = totalRight / rightTicks;
+  const leftRatio = leftTicks > 0 ? totalLeft / leftTicks : 0;
+  const rightRatio = rightTicks > 0 ? totalRight / rightTicks : 0;
 
   const leftPercent = ratioToPercent(leftRatio);
   const rightPercent = ratioToPercent(rightRatio);
@@ -236,7 +236,10 @@ export function formatDouble(
     tooltipType: 'flamegraph',
   };
 
-  const totalDiff = diffPercent(leftPercent, rightPercent);
+  let totalDiff = diffPercent(leftPercent, rightPercent);
+  if (!Number.isFinite(totalDiff)) {
+    totalDiff = 0;
+  }
 
   let tooltipDiffColor = '';
   if (totalDiff > 0) {
@@ -249,12 +252,14 @@ export function formatDouble(
   // - new / removed 走 i18n，带安全兜底
   // - 百分比 diff 不再带括号，直接 "+12.34%" / "-5.67%"
   let tooltipDiffText = '';
-  if (!totalLeft) {
+  if (totalLeft === 0 && totalRight > 0) {
     // 新函数
     tooltipDiffText = i18n?.diffNew ?? '新增';
-  } else if (!totalRight) {
+  } else if (totalRight === 0 && totalLeft > 0) {
     // 被移除的函数
     tooltipDiffText = i18n?.diffRemoved ?? '移除';
+  } else if (totalDiff === 0) {
+    tooltipDiffText = '0%';
   } else if (totalDiff > 0) {
     tooltipDiffText = `+${totalDiff.toFixed(2)}%`;
   } else if (totalDiff < 0) {

package/src/sass/flamegraph.scss

@@ -28,14 +28,35 @@ pyro-flamegraph {
 }
 
 /* 只在差分火焰图（double）模式下启用滚动限制 */
+/* 把滚动交给 tbody，表头固定在表格上方 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll {
-  /* 最大高度：1000px，可按需调小/调大 */
+  overflow: hidden;
+  position: relative;
+}
+
+.flamegraph-table-wrapper--double .flamegraph-table-scroll table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.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-scroll tbody {
+  display: block;
   max-height: var(--kylin-flamegraph-table-max-height, 1000px);
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
+  scrollbar-gutter: stable;
+}
 
-  /* 让 sticky 参照这个容器 */
-  position: relative;
+.flamegraph-table-wrapper--double .flamegraph-table-scroll tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
 }
 
 /* 表头固定 + 不透明背景，避免内容透出来 */
@@ -47,12 +68,12 @@ pyro-flamegraph {
 
 /* 整行都有底色，避免列间缝隙透出内容 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll thead tr {
-  background-color: var(--ps-neutral-9);
+  background-color: var(--ps-table-header-bg, var(--ps-ui-foreground, #ffffff));
 }
 
 /* 每个单元格再补一层底色，保证完全不透明 */
 .flamegraph-table-wrapper--double .flamegraph-table-scroll thead th {
-  background-color: var(--ps-neutral-9);
+  background-color: var(--ps-table-header-bg, var(--ps-ui-foreground, #ffffff));
   background-clip: padding-box; // 防止边框区域产生透明感
 }
 

package/src/shims/Table.module.scss

@@ -79,11 +79,40 @@
     th {
       border: 1px solid var(--ps-ui-border);
       padding: 4px 10px;
-      width: 10%;
     }
   }
 }
 
+.table:global(.flamegraph-table-doubles) {
+  th:first-child,
+  td:first-child {
+    width: 55%;
+  }
+
+  th:nth-child(2),
+  td:nth-child(2),
+  th:nth-child(3),
+  td:nth-child(3),
+  th:nth-child(4),
+  td:nth-child(4) {
+    width: 15%;
+  }
+}
+
+.table:global(.flamegraph-table) {
+  th:first-child,
+  td:first-child {
+    width: 55%;
+  }
+
+  th:nth-child(2),
+  td:nth-child(2),
+  th:nth-child(3),
+  td:nth-child(3) {
+    width: 22.5%;
+  }
+}
+
 .loadingSpinner {
   text-align: center;
   margin-top: 50px;