@kylincloud/flamegraph 0.35.22 → 0.35.24

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -30,6 +30,15 @@ import { ViewTypes } from './FlameGraphComponent/viewTypes';
 import { GraphVizPane } from './FlameGraphComponent/GraphVizPane';
 import { isSameFlamebearer } from './uniqueness';
 import { normalize } from './normalize';
+import {
+  formatSampleCount,
+  getFormatter,
+  localizeDurationString,
+} from '../format/format';
+import {
+  FlamegraphI18nContext,
+  type FlamegraphMessages,
+} from '../i18n';
 
 // Refers to a node in the flamegraph
 interface Node {
@@ -92,6 +101,9 @@ class FlameGraphRenderer extends Component<
   FlamegraphRendererProps,
   FlamegraphRendererState
 > {
+  static contextType = FlamegraphI18nContext;
+  declare context: FlamegraphMessages;
+
   resetFlamegraphState = {
     focusedNode: Maybe.nothing<Node>(),
     zoom: Maybe.nothing<Node>(),
@@ -275,6 +287,55 @@ class FlameGraphRenderer extends Component<
     });
   };
 
+  /**
+   * 检查指定名称的函数是否在当前聚焦节点的子树中
+   */
+  isNameInFocusedSubtree = (name: string): boolean => {
+    const { focusedNode } = this.state.flamegraphConfigs;
+
+    // 如果没有聚焦节点，任何 name 都算"在子树中"
+    if (focusedNode.isNothing) {
+      return true;
+    }
+
+    const { flamebearer } = this.state;
+    if (!flamebearer || !flamebearer.levels) {
+      return true;
+    }
+
+    const { names, levels, format } = flamebearer;
+    const ff = createFF(format);
+    const focusedI = (focusedNode as any).value.i;
+    const focusedJ = (focusedNode as any).value.j;
+
+    // 获取聚焦节点的范围
+    const focusedLevel = levels[focusedI];
+    if (!focusedLevel) return true;
+
+    const focusedOffset = ff.getBarOffset(focusedLevel, focusedJ);
+    const focusedTotal = ff.getBarTotal(focusedLevel, focusedJ);
+    const focusedEnd = focusedOffset + focusedTotal;
+
+    // 遍历聚焦节点及其下面的所有层级，检查是否有匹配的函数名
+    for (let i = focusedI; i < levels.length; i++) {
+      const level = levels[i];
+      for (let j = 0; j < level.length; j += ff.jStep) {
+        const offset = ff.getBarOffset(level, j);
+        const total = ff.getBarTotal(level, j);
+
+        // 检查这个节点是否在聚焦范围内
+        if (offset >= focusedOffset && offset + total <= focusedEnd) {
+          const nameIndex = ff.getBarName(level, j);
+          if (names[nameIndex] === name) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+
   setActiveItem = (item: { name: string }) => {
     const { name } = item;
 
@@ -288,10 +349,25 @@ class FlameGraphRenderer extends Component<
       }
     }
 
-    // clicking for the first time
-    this.setState({
-      selectedItem: Maybe.just(name),
-    });
+    // 检查选中的 item 是否在当前聚焦的子树中
+    // 如果不在，需要重置聚焦状态，以便在火焰图中正确显示高亮
+    const isInSubtree = this.isNameInFocusedSubtree(name);
+
+    if (isInSubtree) {
+      // 在子树中，只更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+      });
+    } else {
+      // 不在子树中，重置聚焦并更新选中项
+      this.setState({
+        selectedItem: Maybe.just(name),
+        flamegraphConfigs: {
+          ...this.state.flamegraphConfigs,
+          focusedNode: this.resetFlamegraphState.focusedNode,
+        },
+      });
+    }
   };
 
   getHighlightQuery = () => {
@@ -331,6 +407,66 @@ class FlameGraphRenderer extends Component<
     });
   };
 
+  clearFocus = () => {
+    this.setState((prevState) => ({
+      ...prevState,
+      flamegraphConfigs: {
+        ...prevState.flamegraphConfigs,
+        ...this.resetFlamegraphState,
+      },
+    }));
+  };
+
+  getActiveRange = () => {
+    const { flamebearer } = this.state;
+    const { zoom, focusedNode } = this.state.flamegraphConfigs;
+    const totalTicks = flamebearer.numTicks;
+
+    if (!totalTicks) {
+      return { rangeMin: 0, rangeMax: 1 };
+    }
+
+    const ff = createFF(flamebearer.format);
+
+    const getRangeFromNode = (node: Node) => {
+      const level = flamebearer.levels[node.i];
+      if (!level) {
+        return { rangeMin: 0, rangeMax: 1 };
+      }
+
+      const offset = ff.getBarOffset(level, node.j);
+      const total = ff.getBarTotal(level, node.j);
+      return {
+        rangeMin: offset / totalTicks,
+        rangeMax: (offset + total) / totalTicks,
+      };
+    };
+
+    return zoom.match({
+      Just: (z) => {
+        return focusedNode.match({
+          Just: (f) => {
+            const focusRange = getRangeFromNode(f);
+            const zoomRange = getRangeFromNode(z);
+            if (
+              focusRange.rangeMax - focusRange.rangeMin <
+              zoomRange.rangeMax - zoomRange.rangeMin
+            ) {
+              return focusRange;
+            }
+            return zoomRange;
+          },
+          Nothing: () => getRangeFromNode(z),
+        });
+      },
+      Nothing: () =>
+        focusedNode.match({
+          Just: (f) => getRangeFromNode(f),
+          Nothing: () => ({ rangeMin: 0, rangeMax: 1 }),
+        }),
+    });
+  };
+
   // used as a variable instead of keeping in the state
   // so that the flamegraph doesn't rerender unnecessarily
   isDirty = () => {
@@ -381,6 +517,60 @@ class FlameGraphRenderer extends Component<
 
     const toolbarVisible = this.shouldShowToolbar();
 
+    const dataUnavailable =
+      !this.state.flamebearer || this.state.flamebearer.names.length <= 1;
+    const i18n = this.context;
+    const isZh = i18n.location !== 'Location';
+    const totalTicks = this.state.flamebearer.numTicks;
+    const formatter = getFormatter(
+      totalTicks,
+      this.state.flamebearer.sampleRate,
+      this.state.flamebearer.units
+    );
+    const totalValueRaw = formatter.format(
+      totalTicks,
+      this.state.flamebearer.sampleRate
+    );
+    const totalValueText =
+      localizeDurationString(totalValueRaw, isZh) || totalValueRaw;
+    const totalSamplesText = formatSampleCount(
+      totalTicks,
+      i18n.sampleCountFormat
+    );
+    const samplesLabel = i18n.tooltipSamples.replace(/[:：]\s*$/, '');
+    const unitLabel =
+      i18n.tooltipUnitTitles[this.state.flamebearer.units]?.formattedValue ||
+      i18n.tooltipUnitTitles.unknown.formattedValue;
+    const activeRange = this.getActiveRange();
+    const hasFocus =
+      activeRange.rangeMin > 0 || activeRange.rangeMax < 1;
+    const activeRangeTicks = Math.max(
+      0,
+      Math.min(
+        totalTicks,
+        (activeRange.rangeMax - activeRange.rangeMin) * totalTicks
+      )
+    );
+    const focusPercent =
+      totalTicks > 0 ? (activeRangeTicks / totalTicks) * 100 : 0;
+    const focusLabel = (() => {
+      const ff = createFF(this.state.flamebearer.format);
+      const focusNode = this.state.flamegraphConfigs.focusedNode.mapOrElse(
+        () =>
+          this.state.flamegraphConfigs.zoom.mapOrElse(() => null, (z) => z),
+        (f) => f
+      );
+      if (!focusNode) {
+        return '';
+      }
+      const level = this.state.flamebearer.levels[focusNode.i];
+      if (!level) {
+        return '';
+      }
+      const nameIndex = ff.getBarName(level, focusNode.j);
+      return this.state.flamebearer.names[nameIndex] || '';
+    })();
+
     const flameGraphPane = (
       <Graph
         key="flamegraph-pane"
@@ -403,6 +593,23 @@ class FlameGraphRenderer extends Component<
         toolbarVisible={toolbarVisible}
         setPalette={this.handleSetPalette}
         enableSandwichView={this.props.enableSandwichView}
+        breadcrumb={
+          dataUnavailable
+            ? undefined
+            : {
+                totalValueText,
+                totalSamplesText,
+                samplesLabel,
+                unitLabel,
+                hasFocus,
+                focusPercent,
+                focusLabel,
+                ofTotalPlacement: isZh ? 'before' : 'after',
+                ofTotalLabel: i18n.ofTotal,
+                clearFocusLabel: i18n.clearFocus,
+                onClearFocus: this.clearFocus,
+              }
+        }
       />
     );
 
@@ -510,8 +717,6 @@ class FlameGraphRenderer extends Component<
     //   //  rightTicks?: number;
     // } & addTicks;
 
-    const dataUnavailable =
-      !this.state.flamebearer || this.state.flamebearer.names.length <= 1;
     const panes = decidePanesOrder(
       this.state.view,
       flameGraphPane,

package/src/ProfilerTable.module.scss

@@ -1,7 +1,6 @@
 // src/ProfilerTable.module.scss
 
 .tableContextMenu {
-
   // 继承 react-menu 的基础样式
   :global(.szh-menu) {
     background-color: var(--ps-ui-background, #fff);
@@ -40,4 +39,4 @@
     width: 16px;
     height: 16px;
   }
-}
+}

package/src/ProfilerTable.tsx

@@ -426,11 +426,11 @@ const getTableBody = ({
   return rows.length > 0
     ? { bodyRows: rows, type: 'filled' as const }
     : {
-        value: (
-          <div className="unsupported-format">{messages.noItemsFound}</div>
-        ),
-        type: 'not-filled' as const,
-      };
+      value: (
+        <div className="unsupported-format">{messages.noItemsFound}</div>
+      ),
+      type: 'not-filled' as const,
+    };
 };
 
 export interface ProfilerTableProps {
@@ -469,9 +469,15 @@ function Table({
   const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
   const [contextMenuTarget, setContextMenuTarget] = useState<string | null>(null);
 
-  // 双击处理：聚焦到火焰图
+  // 双击处理：高亮 + 聚焦到火焰图
   const handleDoubleClick = useCallback(
     (name: string) => {
+      // 先确保该项被高亮（如果未高亮则高亮，如果已高亮则保持）
+      if (!selectedItem.isJust || selectedItem.value !== name) {
+        handleTableItemClick({ name });
+      }
+
+      // 然后聚焦到火焰图
       if (!onFocusOnNode) return;
 
       const node = findNodeByName(flamebearer, name);
@@ -479,7 +485,7 @@ function Table({
         onFocusOnNode(node.i, node.j);
       }
     },
-    [flamebearer, onFocusOnNode]
+    [flamebearer, onFocusOnNode, selectedItem, handleTableItemClick]
   );
 
   // 右键菜单处理
@@ -535,46 +541,46 @@ function Table({
     () =>
       isDoubles
         ? [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'baseline' as const,
-              label: i18n.baseline,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'comparison' as const,
-              label: i18n.comparison,
-            },
-            {
-              sortable: 1,
-              name: 'diff' as const,
-              label: i18n.diff,
-            },
-          ]
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'baseline' as const,
+            label: i18n.baseline,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'comparison' as const,
+            label: i18n.comparison,
+          },
+          {
+            sortable: 1,
+            name: 'diff' as const,
+            label: i18n.diff,
+          },
+        ]
         : [
-            {
-              sortable: 1,
-              name: 'name' as const,
-              label: i18n.location,
-            },
-            {
-              sortable: 1,
-              name: 'self' as const,
-              label: i18n.self,
-              default: true,
-            },
-            {
-              sortable: 1,
-              name: 'total' as const,
-              label: i18n.total,
-            },
-          ],
+          {
+            sortable: 1,
+            name: 'name' as const,
+            label: i18n.location,
+          },
+          {
+            sortable: 1,
+            name: 'self' as const,
+            label: i18n.self,
+            default: true,
+          },
+          {
+            sortable: 1,
+            name: 'total' as const,
+            label: i18n.total,
+          },
+        ],
     [i18n, isDoubles]
   );
 

package/src/Tooltip/Tooltip.tsx

@@ -20,6 +20,7 @@ import LeftClickIcon from './LeftClickIcon';
 import styles from './Tooltip.module.scss';
 import { useFlamegraphI18n } from '../i18n';
 import type { FlamegraphPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
+import { localizeDurationString, parseNumericWithUnit } from '../format/format';
 
 export type TooltipData = {
   units: Units;
@@ -56,81 +57,6 @@ export interface TooltipProps {
   ) => void;
 }
 
-/** 解析各种带单位的字符串，例如：
- *  "0.63 seconds" / "0.63 分钟" / "< 1 ms" / "+0.24minutes"
- */
-function parseNumericWithUnit(
-  input?: string | number
-): { value: number; unit: string; hasLessThan: boolean; sign: string } | null {
-  if (input == null) return null;
-
-  if (typeof input === 'number') {
-    return { value: input, unit: '', hasLessThan: false, sign: '' };
-  }
-
-  // 统一 Unicode 减号
-  let s = String(input).trim().replace(/\u2212/g, '-');
-  if (!s) return null;
-
-  let hasLessThan = false;
-  if (s.startsWith('<')) {
-    hasLessThan = true;
-    s = s.slice(1).trim();
-  }
-
-  const m = s.match(/^([+\-]?)(\d*\.?\d+)\s*(.*)$/);
-  if (!m) return null;
-
-  const sign = m[1] || '';
-  const numStr = m[2];
-  const unit = (m[3] || '').trim();
-
-  const value = parseFloat(numStr);
-  if (!Number.isFinite(value)) return null;
-
-  return { value, unit, hasLessThan, sign };
-}
-
-/** 把 DurationFormatter 输出的英文单位翻译成中文，并保证数字和单位之间有空格 */
-function localizeDurationString(
-  input?: string,
-  isZh = false
-): string | undefined {
-  if (!input || !isZh) return input;
-
-  const parsed = parseNumericWithUnit(input);
-  if (!parsed) return input;
-
-  const { hasLessThan, unit, sign, value } = parsed;
-
-  let unitZh = unit;
-  const u = unit.toLowerCase();
-
-  if (u === 'ms') unitZh = '毫秒';
-  else if (u === 'μs' || u === 'µs' || u === 'us') unitZh = '微秒';
-  else if (u === 'second' || u === 'seconds') unitZh = '秒';
-  else if (u === 'minute' || u === 'minutes' || u === 'min' || u === 'mins')
-    unitZh = '分钟';
-  else if (u === 'hour' || u === 'hours') unitZh = '小时';
-  else if (u === 'day' || u === 'days') unitZh = '天';
-  else if (u === 'month' || u === 'months') unitZh = '月';
-  else if (u === 'year' || u === 'years') unitZh = '年';
-
-  // 尽量保留原来的数值部分
-  const m = String(input)
-    .trim()
-    .replace(/\u2212/g, '-')
-    .match(/^<?\s*([+\-]?)(\d*\.?\d+)/);
-  const valueStr =
-    m && m[2] ? `${m[1] || ''}${m[2]}` : `${sign}${Math.abs(value)}`;
-
-  const prefix = hasLessThan ? '< ' : '';
-  if (!unitZh) {
-    return `${prefix}${valueStr}`.trim();
-  }
-  return `${prefix}${valueStr} ${unitZh}`.trim();
-}
-
 /** CPU 时间差异：构造 "+0.24 minutes" / "-0.12 s" 这种文本（注意带空格） */
 function formatTimeDiff(
   baselineFormatted?: string,

package/src/format/format.ts

@@ -5,6 +5,104 @@ export function numberWithCommas(x: number): string {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
 }
 
+type NumericWithUnit = {
+  value: number;
+  unit: string;
+  hasLessThan: boolean;
+  sign: string;
+};
+
+export function parseNumericWithUnit(
+  input?: string | number
+): NumericWithUnit | null {
+  if (input == null) return null;
+
+  if (typeof input === 'number') {
+    return { value: input, unit: '', hasLessThan: false, sign: '' };
+  }
+
+  let s = String(input).trim().replace(/\u2212/g, '-');
+  if (!s) return null;
+
+  let hasLessThan = false;
+  if (s.startsWith('<')) {
+    hasLessThan = true;
+    s = s.slice(1).trim();
+  }
+
+  const m = s.match(/^([+\-]?)(\d*\.?\d+)\s*(.*)$/);
+  if (!m) return null;
+
+  const sign = m[1] || '';
+  const numStr = m[2];
+  const unit = (m[3] || '').trim();
+
+  const value = parseFloat(numStr);
+  if (!Number.isFinite(value)) return null;
+
+  return { value, unit, hasLessThan, sign };
+}
+
+export function localizeDurationString(
+  input?: string,
+  isZh = false
+): string | undefined {
+  if (!input || !isZh) return input;
+
+  const parsed = parseNumericWithUnit(input);
+  if (!parsed) return input;
+
+  const { unit } = parsed;
+
+  let unitZh = unit;
+  const u = unit.toLowerCase();
+
+  if (u === 'ms') unitZh = '毫秒';
+  else if (u === 'μs' || u === 'µs' || u === 'us') unitZh = '微秒';
+  else if (u === 'second' || u === 'seconds') unitZh = '秒';
+  else if (u === 'minute' || u === 'minutes' || u === 'min' || u === 'mins')
+    unitZh = '分钟';
+  else if (u === 'hour' || u === 'hours') unitZh = '小时';
+  else if (u === 'day' || u === 'days') unitZh = '天';
+  else if (u === 'month' || u === 'months') unitZh = '月';
+  else if (u === 'year' || u === 'years') unitZh = '年';
+
+  const m = String(input).match(/^([<\s]*)([+\-]?\d*\.?\d+)(.*)$/);
+  if (!m) return input;
+
+  const prefix = m[1] || '';
+  const numberPart = m[2] || '';
+
+  return `${prefix}${numberPart} ${unitZh}`.trim();
+}
+
+export type SampleCountFormat = Array<{ value: number; label: string }>;
+
+const defaultSampleCountFormat: SampleCountFormat = [
+  { value: 1e15, label: 'Quad' },
+  { value: 1e12, label: 'Tri' },
+  { value: 1e9, label: 'B' },
+  { value: 1e6, label: 'M' },
+  { value: 1e3, label: 'K' },
+];
+
+export function formatSampleCount(
+  value: number,
+  format: SampleCountFormat = defaultSampleCountFormat
+): string {
+  const absValue = Math.abs(value);
+  for (const { value: threshold, label } of format) {
+    if (absValue >= threshold) {
+      const scaled = value / threshold;
+      const fixed = scaled.toFixed(2);
+      const trimmed = fixed.replace(/\.?0+$/, '');
+      return `${trimmed} ${label}`;
+    }
+  }
+
+  return numberWithCommas(value);
+}
+
 export function formatPercent(ratio: number) {
   const percent = ratioToPercent(ratio);
   return `${percent}%`;

package/src/i18n.tsx

@@ -73,6 +73,15 @@ export type FlamegraphMessages = {
   focusOnThisFunction: string;
   tableDoubleClickToFocus: string;
   tableRightClickForOptions: string;
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: string; // "total (1 level collapsed)"
+  collapsedLevelsPlural: string;   // "total (n levels collapsed)"
+
+  // Breadcrumb
+  ofTotal: string;
+  clearFocus: string;
+  sampleCountFormat: Array<{ value: number; label: string }>;
 };
 
 const defaultTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
@@ -227,6 +236,21 @@ export const defaultMessages: FlamegraphMessages = {
   focusOnThisFunction: 'Focus on this function',
   tableDoubleClickToFocus: 'Double-click to focus in flamegraph',
   tableRightClickForOptions: 'Right-click for more options',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
+
+  // Breadcrumb
+  ofTotal: 'of total',
+  clearFocus: 'Clear focus',
+  sampleCountFormat: [
+    { value: 1e15, label: 'Quad' },
+    { value: 1e12, label: 'Tri' },
+    { value: 1e9, label: 'B' },
+    { value: 1e6, label: 'M' },
+    { value: 1e3, label: 'K' },
+  ],
 };
 
 export const zhCNMessages: FlamegraphMessages = {
@@ -286,9 +310,24 @@ export const zhCNMessages: FlamegraphMessages = {
   focusOnThisFunction: '聚焦到此函数',
   tableDoubleClickToFocus: '双击可聚焦到火焰图',
   tableRightClickForOptions: '右键查看更多选项',
+
+  // 火焰图聚焦时的 collapsed 提示
+  collapsedLevelsSingular: '总计（已折叠 1 层）',
+  collapsedLevelsPlural: '总计（已折叠 {n} 层）',
+
+  // Breadcrumb
+  ofTotal: '占总量',
+  clearFocus: '清除聚焦',
+  sampleCountFormat: [
+    { value: 1e12, label: '兆' },
+    { value: 1e8, label: '亿' },
+    { value: 1e4, label: '万' },
+    { value: 1e3, label: '千' },
+  ],
 };
 
 const I18nContext = createContext<FlamegraphMessages>(defaultMessages);
+export const FlamegraphI18nContext = I18nContext;
 
 export type FlamegraphI18nProviderProps = {
   messages?: Partial<FlamegraphMessages>;

package/src/shims/Table.module.scss

@@ -49,10 +49,17 @@
     }
 
     tr {
+      /* 选中行样式 - 使用更明显的 antd 风格蓝色 */
       &.isRowSelected {
         cursor: pointer;
-        background: var(--ps-table-highlight-row-bg) !important;
-        color: var(--ps-table-highlight-row-text);
+        /* antd 选中蓝色，更明显但不会与红绿/红蓝火焰图冲突 */
+        background: var(--ps-table-highlight-row-bg, #bae0ff) !important;
+        color: var(--ps-table-highlight-row-text, #0958d9);
+        
+        /* 左侧添加强调边框 */
+        td:first-child {
+          box-shadow: inset 3px 0 0 0 var(--ps-table-highlight-border, #1677ff);
+        }
       }
 
       &.isRowDisabled td {