@kylincloud/flamegraph 0.35.23 → 0.35.24

package/package.json

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

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';
@@ -53,12 +53,14 @@ import Flamegraph from './Flamegraph';
 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 & {
@@ -230,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);
@@ -315,9 +317,9 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       const longName = getLongName(
         shortName,
         numBarTicks,
-        numTicks,
         sampleRate,
-        formatter
+        formatter,
+        messages
       );
 
       // Set the font syle
@@ -372,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

@@ -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) {
@@ -68,8 +83,9 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     () => ({
       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 +108,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     selectedItem,
     updateView,
     enableSandwichView = true,
+    breadcrumb,
   } = props;
 
   const { onZoom, onReset, isDirty, onFocusOnNode } = props;
@@ -356,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 && (

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>(),
@@ -395,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 = () => {
@@ -445,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"
@@ -467,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,
+              }
+        }
       />
     );
 
@@ -574,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,
@@ -671,4 +812,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,