@kylincloud/flamegraph 0.35.22 → 0.35.24

package/dist/shims/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAU7E,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEN,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAsGZ;AA2DD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/shims/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAoB,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUrF,UAAU,UAAU;IAClB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC;CACvH;AAED,MAAM,WAAW,IAAK,SAAQ,UAAU;IACtC,KAAK,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,UAAU,QAAS,SAAQ,UAAU;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,aAAa,GACrB;IACA,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GACC;IACA,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB,CAAC;AAEJ,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;CACrB,CAAC;AAEF,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,MAAM,GAAG,KAAK,CAAC;CACjC;AAED,eAAO,MAAM,YAAY,YAAa,QAAQ,EAAE,KAAG,cAsBlD,CAAC;AAEF,UAAU,UAAU;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC;IACb,YAAY,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0CD,iBAAS,KAAK,CAAC,EACb,eAAe,EACf,MAAM,EACN,gBAAgB,EAChB,KAAK,EACL,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,GACb,EAAE,UAAU,2CAkEZ;AA2DD,eAAe,KAAK,CAAC"}

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -12,7 +12,7 @@ import { PX_PER_LEVEL, BAR_HEIGHT, COLLAPSE_THRESHOLD } from './constants';
 import type { FlamegraphPalette } from './colorPalette';
 // there's a dependency cycle here but it should be fine
 /* eslint-disable-next-line import/no-cycle */
-import RenderCanvas from './Flamegraph_render';
+import RenderCanvas, { CanvasI18nMessages } from './Flamegraph_render';
 
 /* eslint-disable no-useless-constructor */
 
@@ -47,7 +47,10 @@ export default class Flamegraph {
     private readonly highlightQuery: string,
     private zoom: Maybe<DeepReadonly<{ i: number; j: number }>>,
 
-    private palette: FlamegraphPalette
+    private palette: FlamegraphPalette,
+
+    /** i18n messages for canvas rendering */
+    private messages?: CanvasI18nMessages
   ) {
     // TODO
     // these were only added because storybook is not setting
@@ -59,6 +62,7 @@ export default class Flamegraph {
     this.highlightQuery = highlightQuery;
     this.ff = createFF(flamebearer.format);
     this.palette = palette;
+    this.messages = messages;
 
     // don't allow to have a zoom smaller than the focus
     // since it does not make sense
@@ -96,6 +100,7 @@ export default class Flamegraph {
       pxPerTick: this.pxPerTick(),
       tickToX: this.tickToX,
       palette: this.palette,
+      messages: this.messages,
     };
 
     const { format: viewType } = this.flamebearer;

package/src/FlameGraph/FlameGraphComponent/FlamegraphBreadcrumb.module.scss

@@ -0,0 +1,106 @@
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 6px 0;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 1.2;
+  background-color: var(--ps-ui-element-bg-primary);
+  border: 1px solid var(--ps-ui-border);
+  color: var(--ps-ui-foreground-text);
+}
+
+.focusTooltip {
+  position: relative;
+}
+
+.focusTooltip[data-tooltip]:hover::after,
+.focusTooltip[data-tooltip]:hover::before {
+  opacity: 1;
+  transform: translate(-50%, -6px);
+}
+
+.focusTooltip[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, -2px);
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--ps-ui-foreground);
+  color: var(--ps-ui-foreground-text);
+  border: 1px solid var(--ps-ui-border);
+  font-size: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 3;
+}
+
+.focusTooltip[data-tooltip]::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translate(-50%, -2px);
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: var(--ps-ui-border) transparent transparent transparent;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease, transform 120ms ease;
+  z-index: 2;
+}
+
+.separator {
+  opacity: 0.6;
+}
+
+.chipSeparator {
+  opacity: 0.6;
+  color: var(--ps-ui-foreground-text);
+}
+
+.unitLabel {
+  opacity: 0.8;
+}
+
+.focusIcon {
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  color: currentColor;
+}
+
+.ofTotal {
+  opacity: 0.8;
+}
+
+.clearBtn {
+  margin-left: 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--ps-toolbar-icon-color);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.clearBtn:focus-visible {
+  outline: 1px solid var(--ps-ui-border);
+  border-radius: 4px;
+}

package/src/FlameGraph/FlameGraphComponent/FlamegraphBreadcrumb.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import styles from './FlamegraphBreadcrumb.module.scss';
+
+type FlamegraphBreadcrumbProps = {
+  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 FlamegraphBreadcrumb(
+  props: FlamegraphBreadcrumbProps
+) {
+  const {
+    totalValueText,
+    totalSamplesText,
+    samplesLabel,
+    unitLabel,
+    hasFocus,
+    focusPercent,
+    focusLabel,
+    ofTotalPlacement = 'after',
+    ofTotalLabel,
+    clearFocusLabel,
+    onClearFocus,
+  } = props;
+
+  const focusTooltip =
+    focusLabel && focusLabel.trim().length > 0 ? focusLabel : undefined;
+
+  return (
+    <div className={styles.bar} aria-live="polite">
+      <span className={styles.chip}>
+        <span>{totalValueText}</span>
+        <span className={styles.separator}>|</span>
+        <span>
+          {totalSamplesText} {samplesLabel}
+        </span>
+        <span className={styles.unitLabel}>({unitLabel})</span>
+      </span>
+      {hasFocus && focusPercent !== undefined && (
+        <>
+          <span className={styles.chipSeparator}>&gt;</span>
+          <span
+            className={`${styles.chip} ${styles.focusTooltip}`}
+            data-tooltip={focusTooltip}
+          >
+            <span className={styles.focusIcon} aria-hidden="true">
+              <svg
+                viewBox="0 0 24 24"
+                width="14"
+                height="14"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" />
+                <circle cx="12" cy="12" r="3.2" />
+              </svg>
+            </span>
+            {ofTotalPlacement === 'before' ? (
+              <>
+                <span className={styles.ofTotal}>{ofTotalLabel}</span>
+                <span>{focusPercent.toFixed(2)}%</span>
+              </>
+            ) : (
+              <>
+                <span>{focusPercent.toFixed(2)}%</span>
+                <span className={styles.ofTotal}>{ofTotalLabel}</span>
+              </>
+            )}
+            <button
+              type="button"
+              className={styles.clearBtn}
+              aria-label={clearFocusLabel}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onClearFocus();
+              }}
+            >
+              ×
+            </button>
+          </span>
+        </>
+      )}
+    </div>
+  );
+}

package/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -24,9 +24,9 @@ THIS SOFTWARE.
 /* eslint-disable no-continue */
 import { createFF, Flamebearer, SpyName } from '../../models';
 import {
-  formatPercent,
   getFormatter,
   ratioToPercent,
+  localizeDurationString,
 } from '../../format/format';
 import { fitToCanvasRect } from '../../fitMode/fitMode';
 import { getRatios } from './utils';
@@ -49,6 +49,20 @@ import { isMatch } from '../../search';
 /* eslint-disable-next-line import/no-cycle */
 import Flamegraph from './Flamegraph';
 
+/** i18n messages needed for canvas rendering */
+export interface CanvasI18nMessages {
+  collapsedLevelsSingular: string;
+  collapsedLevelsPlural: string;
+  isZh?: boolean;
+}
+
+/** Default English messages (fallback) */
+const defaultCanvasMessages: CanvasI18nMessages = {
+  collapsedLevelsSingular: 'total (1 level collapsed)',
+  collapsedLevelsPlural: 'total ({n} levels collapsed)',
+  isZh: false,
+};
+
 type CanvasRendererConfig = Flamebearer & {
   canvas: HTMLCanvasElement;
   focusedNode: ConstructorParameters<typeof Flamegraph>[2];
@@ -73,13 +87,30 @@ type CanvasRendererConfig = Flamebearer & {
 
   palette: FlamegraphPalette;
   maxSelf?: number;
+
+  /** i18n messages for collapsed text */
+  messages?: CanvasI18nMessages;
 };
 
+/**
+ * 生成 collapsed 层级的显示文本
+ */
+function getCollapsedText(
+  levelCount: number,
+  messages: CanvasI18nMessages
+): string {
+  if (levelCount === 1) {
+    return messages.collapsedLevelsSingular;
+  }
+  return messages.collapsedLevelsPlural.replace('{n}', String(levelCount));
+}
+
 export default function RenderCanvas(props: CanvasRendererConfig) {
   const { canvas, fitMode, units, tickToX, levels, palette } = props;
   const { numTicks, sampleRate, pxPerTick } = props;
   const { rangeMin, rangeMax } = props;
   const { focusedNode, zoom } = props;
+  const messages = props.messages || defaultCanvasMessages;
 
   const graphWidth = getCanvasWidth(canvas);
   // TODO: why is this needed? otherwise height is all messed up
@@ -134,10 +165,10 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     ctx.fillStyle = colorGreyscale(200, 1).rgb().string();
     ctx.fill();
 
-    // TODO show the samples too?
+    // 使用 i18n 翻译的 collapsed 文本
     const shortName = focusedNode.mapOrElse(
       () => 'total',
-      (f) => `total (${f.i - 1} level(s) collapsed)`
+      (f) => getCollapsedText(f.i - 1, messages)
     );
 
     // Set the font syle
@@ -201,16 +232,16 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
           j < level.length - ff.jStep &&
           barIndex + numBarTicks === ff.getBarOffset(level, j + ff.jStep) &&
           ff.getBarTotal(level, j + ff.jStep) * pxPerTick <=
-            COLLAPSE_THRESHOLD &&
+          COLLAPSE_THRESHOLD &&
           isHighlighted ===
-            ((props.highlightQuery &&
-              nodeIsInQuery(
-                j + ff.jStep + ff.jName,
-                level,
-                names,
-                props.highlightQuery
-              )) ||
-              false)
+          ((props.highlightQuery &&
+            nodeIsInQuery(
+              j + ff.jStep + ff.jName,
+              level,
+              names,
+              props.highlightQuery
+            )) ||
+            false)
         ) {
           j += ff.jStep;
           numBarTicks += ff.getBarTotal(level, j);
@@ -286,9 +317,9 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       const longName = getLongName(
         shortName,
         numBarTicks,
-        numTicks,
         sampleRate,
-        formatter
+        formatter,
+        messages
       );
 
       // Set the font syle
@@ -343,20 +374,20 @@ function getFunctionName(
   return shortName;
 }
 
+/**
+ * 生成条形文本的长名称
+ * 格式: functionName (value) - 对齐 Grafana 风格，不显示百分比
+ */
 function getLongName(
   shortName: string,
   numBarTicks: number,
-  numTicks: number,
   sampleRate: number,
-  formatter: ReturnType<typeof getFormatter>
+  formatter: ReturnType<typeof getFormatter>,
+  messages: CanvasI18nMessages
 ) {
-  const ratio = numBarTicks / numTicks;
-  const percent = formatPercent(ratio);
-
-  const longName = `${shortName} (${percent}, ${formatter.format(
-    numBarTicks,
-    sampleRate
-  )})`;
+  const formatted = formatter.format(numBarTicks, sampleRate);
+  const localized = localizeDurationString(formatted, !!messages.isZh);
+  const longName = `${shortName} (${localized || formatted})`;
 
   return longName;
 }

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 // src/FlameGraph/FlameGraphComponent/index.tsx
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
@@ -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,6 +57,20 @@ 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) {
@@ -63,6 +78,16 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const flamegraph = useRef<Flamegraph>();
   const i18n = useFlamegraphI18n();
 
+  // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
+  const canvasMessages = useMemo(
+    () => ({
+      collapsedLevelsSingular: i18n.collapsedLevelsSingular,
+      collapsedLevelsPlural: i18n.collapsedLevelsPlural,
+      isZh: i18n.location !== 'Location',
+    }),
+    [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural, i18n.location]
+  );
+
   const [rightClickedNode, setRightClickedNode] = React.useState<
     Maybe<{ top: number; left: number; width: number }>
   >(Maybe.nothing());
@@ -83,6 +108,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     selectedItem,
     updateView,
     enableSandwichView = true,
+    breadcrumb,
   } = props;
 
   const { onZoom, onReset, isDirty, onFocusOnNode } = props;
@@ -291,17 +317,19 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
         fitMode,
         highlightQuery,
         zoom,
-        palette
+        palette,
+        canvasMessages  // ====== 新增：传递 i18n messages ======
       );
 
       flamegraph.current = f;
     }
   };
 
+  // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
     renderCanvas();
-  }, [palette]);
+  }, [palette, canvasMessages]);
 
   React.useEffect(() => {
     constructCanvas();
@@ -345,6 +373,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 && (