@kylincloud/flamegraph 0.35.23 → 0.35.25

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -23,6 +23,7 @@ import { SandwichIcon, HeadFirstIcon, TailFirstIcon } from '../../Icons';
 import { PX_PER_LEVEL } from './constants';
 import Header from './Header';
 import { FlamegraphPalette } from './colorPalette';
+import FlamegraphBreadcrumb from './FlamegraphBreadcrumb';
 import type { ViewTypes } from './viewTypes';
 import { FitModes, HeadMode, TailMode } from '../../fitMode/fitMode';
 import indexStyles from './styles.module.scss';
@@ -56,20 +57,41 @@ interface FlamegraphProps {
 
   /** 是否显示右键菜单中的「打开 Sandwich 视图」项，默认 true */
   enableSandwichView?: boolean;
+
+  breadcrumb?: {
+    totalValueText: string;
+    totalSamplesText: string;
+    samplesLabel: string;
+    unitLabel: string;
+    hasFocus: boolean;
+    focusPercent?: number;
+    focusLabel?: string;
+    ofTotalPlacement?: 'before' | 'after';
+    ofTotalLabel: string;
+    clearFocusLabel: string;
+    onClearFocus: () => void;
+  };
 }
 
 export default function FlameGraphComponent(props: FlamegraphProps) {
   const canvasRef = React.useRef<HTMLCanvasElement>(null);
+  const textCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const flamegraph = useRef<Flamegraph>();
+  const flamegraphText = useRef<Flamegraph>();
   const i18n = useFlamegraphI18n();
+  const resizeLogRef = useRef({
+    lastWidth: 0,
+    lastHeight: 0,
+  });
 
   // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
   const canvasMessages = useMemo(
     () => ({
       collapsedLevelsSingular: i18n.collapsedLevelsSingular,
       collapsedLevelsPlural: i18n.collapsedLevelsPlural,
+      isZh: i18n.location !== 'Location',
     }),
-    [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural]
+    [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural, i18n.location]
   );
 
   const [rightClickedNode, setRightClickedNode] = React.useState<
@@ -92,6 +114,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     selectedItem,
     updateView,
     enableSandwichView = true,
+    breadcrumb,
   } = props;
 
   const { onZoom, onReset, isDirty, onFocusOnNode } = props;
@@ -100,13 +123,26 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
 
   const debouncedRenderCanvas = useCallback(
     debounce(() => {
-      renderCanvas();
+      renderRectCanvas();
+      renderTextCanvas();
     }, 50),
     []
   );
 
   useResizeObserver(canvasRef, () => {
     if (flamegraph) {
+      if (canvasRef.current) {
+        const width = canvasRef.current.clientWidth;
+        const height = canvasRef.current.clientHeight;
+        const info = resizeLogRef.current;
+        const widthDelta = Math.abs(width - info.lastWidth);
+        const widthChanged = widthDelta >= 2;
+        if (!widthChanged) {
+          return;
+        }
+        info.lastWidth = width;
+        info.lastHeight = height;
+      }
       debouncedRenderCanvas();
     }
   });
@@ -306,32 +342,58 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
 
       flamegraph.current = f;
     }
+    if (textCanvasRef.current) {
+      const f = new Flamegraph(
+        flamebearer,
+        textCanvasRef.current,
+        focusedNode,
+        fitMode,
+        highlightQuery,
+        zoom,
+        palette,
+        canvasMessages
+      );
+      flamegraphText.current = f;
+    }
   };
 
   // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
-    renderCanvas();
+    renderRectCanvas();
+    renderTextCanvas();
   }, [palette, canvasMessages]);
 
   React.useEffect(() => {
     constructCanvas();
-    renderCanvas();
+    renderRectCanvas();
+    renderTextCanvas();
   }, [
     canvasRef.current,
     flamebearer,
     focusedNode,
     fitMode,
-    highlightQuery,
     zoom,
   ]);
 
-  const renderCanvas = () => {
+  React.useEffect(() => {
+    constructCanvas();
+    renderRectCanvas();
+    renderTextCanvas();
+  }, [highlightQuery]);
+
+  const renderRectCanvas = () => {
     canvasRef?.current?.setAttribute('data-state', 'rendering');
-    flamegraph?.current?.render();
+    flamegraph?.current?.render({ renderText: false });
     canvasRef?.current?.setAttribute('data-state', 'rendered');
   };
 
+  const renderTextCanvas = () => {
+    textCanvasRef?.current?.setAttribute('data-state', 'rendering');
+    flamegraphText?.current?.render({ renderRects: false });
+    textCanvasRef?.current?.setAttribute('data-state', 'rendered');
+  };
+
   const dataUnavailable =
     !flamebearer || (flamebearer && flamebearer.names.length <= 1);
 
@@ -356,6 +418,21 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         'vertical-orientation': flamebearer.format === 'double',
       })}
     >
+      {breadcrumb && (
+        <FlamegraphBreadcrumb
+          totalValueText={breadcrumb.totalValueText}
+          totalSamplesText={breadcrumb.totalSamplesText}
+          samplesLabel={breadcrumb.samplesLabel}
+          unitLabel={breadcrumb.unitLabel}
+          hasFocus={breadcrumb.hasFocus}
+          focusPercent={breadcrumb.focusPercent}
+          focusLabel={breadcrumb.focusLabel}
+          ofTotalPlacement={breadcrumb.ofTotalPlacement}
+          ofTotalLabel={breadcrumb.ofTotalLabel}
+          clearFocusLabel={breadcrumb.clearFocusLabel}
+          onClearFocus={breadcrumb.onClearFocus}
+        />
+      )}
       {/* Header 已简化，仅在 single 模式下显示标题 */}
       {/* DiffLegend 已移到 Toolbar */}
       {headerVisible && (
@@ -368,6 +445,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       <div
         data-testid={dataTestId}
         style={{
+          position: 'relative',
           opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
         }}
       >
@@ -379,22 +457,28 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
           ref={canvasRef}
           onClick={!disableClick ? onClick : undefined}
         />
+        <canvas
+          height="0"
+          data-testid="flamegraph-text-canvas"
+          className={clsx('flamegraph-text-canvas', styles.textCanvas)}
+          ref={textCanvasRef}
+        />
+        {flamegraph && canvasRef && (
+          <Highlight
+            barHeight={PX_PER_LEVEL}
+            canvasRef={canvasRef}
+            zoom={zoom}
+            xyToHighlightData={xyToHighlightData}
+          />
+        )}
+        {flamegraph && (
+          <ContextMenuHighlight
+            barHeight={PX_PER_LEVEL}
+            node={rightClickedNode}
+          />
+        )}
       </div>
       {showCredit ? <LogoLink /> : ''}
-      {flamegraph && canvasRef && (
-        <Highlight
-          barHeight={PX_PER_LEVEL}
-          canvasRef={canvasRef}
-          zoom={zoom}
-          xyToHighlightData={xyToHighlightData}
-        />
-      )}
-      {flamegraph && (
-        <ContextMenuHighlight
-          barHeight={PX_PER_LEVEL}
-          node={rightClickedNode}
-        />
-      )}
       {flamegraph && (
         <FlamegraphTooltip
           format={flamebearer.format}

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>(),
@@ -135,24 +147,28 @@ class FlameGraphRenderer extends Component<
     prevProps: FlamegraphRendererProps,
     prevState: FlamegraphRendererState
   ) {
-    // TODO: this is a slow operation
-    const prevFlame = normalize(prevProps);
-    const currFlame = normalize(this.props);
-
-    if (!this.isSameFlamebearer(prevFlame, currFlame)) {
-      const newConfigs = this.calcNewConfigs(prevFlame, currFlame);
-
-      // Batch these updates to not do unnecessary work
-      // eslint-disable-next-line react/no-did-update-set-state
-      this.setState({
-        flamebearer: currFlame,
-        flamegraphConfigs: {
-          ...this.state.flamegraphConfigs,
-          ...newConfigs,
-        },
-        selectedItem: Maybe.nothing(),
-      });
-      return;
+    const propsChanged =
+      prevProps.profile !== this.props.profile ||
+      prevProps.flamebearer !== this.props.flamebearer;
+    if (propsChanged) {
+      const prevFlame = prevState.flamebearer;
+      const currFlame = normalize(this.props);
+
+      if (!this.isSameFlamebearer(prevFlame, currFlame)) {
+        const newConfigs = this.calcNewConfigs(prevFlame, currFlame);
+
+        // Batch these updates to not do unnecessary work
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({
+          flamebearer: currFlame,
+          flamegraphConfigs: {
+            ...this.state.flamegraphConfigs,
+            ...newConfigs,
+          },
+          selectedItem: Maybe.nothing(),
+        });
+        return;
+      }
     }
 
     // flamegraph configs changed
@@ -395,6 +411,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 = () => {
@@ -445,6 +521,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"
@@ -467,10 +597,30 @@ 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,
+              }
+        }
       />
     );
 
     const sandwichPane = (() => {
+      if (this.state.view !== 'sandwich') {
+        return <div className={styles.sandwichPane} key="sandwich-pane" />;
+      }
       if (this.state.selectedItem.isNothing) {
         return (
           <div className={styles.sandwichPane} key="sandwich-pane">
@@ -574,8 +724,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,
@@ -671,4 +819,4 @@ function decidePanesOrder(
   }
 }
 
-export default FlameGraphRenderer;
+export default FlameGraphRenderer;

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}%`;