@kylincloud/flamegraph 0.35.23 → 0.35.25

package/package.json

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

package/src/FlameGraph/FlameGraphComponent/Flamegraph.ts

@@ -23,6 +23,8 @@ type XYWithinBounds = { x: number; y: number } & { __brand: 'XYWithinBounds' };
 
 export default class Flamegraph {
   private ff: ReturnType<typeof createFF>;
+  private cachedRange: { rangeMin: number; rangeMax: number } | null = null;
+  private cachedPxPerTick: number | null = null;
 
   constructor(
     private readonly flamebearer: Flamebearer,
@@ -73,8 +75,11 @@ export default class Flamegraph {
     }
   }
 
-  public render() {
-    const { rangeMin, rangeMax } = this.getRange();
+  public render(options?: { renderRects?: boolean; renderText?: boolean }) {
+    const { rangeMin, rangeMax, pxPerTick } = this.updateCachedMetrics();
+    const tickToX = (i: number) => {
+      return (i - this.flamebearer.numTicks * rangeMin) * pxPerTick;
+    };
 
     const props = {
       canvas: this.canvas,
@@ -97,10 +102,12 @@ export default class Flamegraph {
       highlightQuery: this.highlightQuery,
       zoom: this.zoom,
       focusedNode: this.focusedNode,
-      pxPerTick: this.pxPerTick(),
-      tickToX: this.tickToX,
+      pxPerTick,
+      tickToX,
       palette: this.palette,
       messages: this.messages,
+      renderRects: options?.renderRects,
+      renderText: options?.renderText,
     };
 
     const { format: viewType } = this.flamebearer;
@@ -125,18 +132,37 @@ export default class Flamegraph {
   }
 
   private pxPerTick() {
+    if (this.cachedPxPerTick !== null) {
+      return this.cachedPxPerTick;
+    }
     const { rangeMin, rangeMax } = this.getRange();
     //    const graphWidth = this.canvas.width;
     const graphWidth = this.getCanvasWidth();
-
-    return graphWidth / this.flamebearer.numTicks / (rangeMax - rangeMin);
+    const pxPerTick =
+      graphWidth / this.flamebearer.numTicks / (rangeMax - rangeMin);
+    this.cachedRange = { rangeMin, rangeMax };
+    this.cachedPxPerTick = pxPerTick;
+    return pxPerTick;
   }
 
   private tickToX = (i: number) => {
-    const { rangeMin } = this.getRange();
-    return (i - this.flamebearer.numTicks * rangeMin) * this.pxPerTick();
+    const rangeMin = this.cachedRange
+      ? this.cachedRange.rangeMin
+      : this.getRange().rangeMin;
+    const pxPerTick = this.cachedPxPerTick ?? this.pxPerTick();
+    return (i - this.flamebearer.numTicks * rangeMin) * pxPerTick;
   };
 
+  private updateCachedMetrics() {
+    const { rangeMin, rangeMax } = this.getRange();
+    const graphWidth = this.getCanvasWidth();
+    const pxPerTick =
+      graphWidth / this.flamebearer.numTicks / (rangeMax - rangeMin);
+    this.cachedRange = { rangeMin, rangeMax };
+    this.cachedPxPerTick = pxPerTick;
+    return { rangeMin, rangeMax, pxPerTick };
+  }
+
   private getRange() {
     const { ff } = this;
 

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';
@@ -41,10 +41,11 @@ import {
   colorBasedOnDiffPercent,
   colorBasedOnPackageName,
   colorGreyscale,
+  diffPercent,
   getPackageNameFromStackTrace,
+  NewDiffColor,
 } from './color';
 import type { FlamegraphPalette } from './colorPalette';
-import { isMatch } from '../../search';
 // there's a dependency cycle here but it should be fine
 /* eslint-disable-next-line import/no-cycle */
 import Flamegraph from './Flamegraph';
@@ -53,12 +54,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 & {
@@ -67,6 +70,8 @@ type CanvasRendererConfig = Flamebearer & {
   fitMode: ConstructorParameters<typeof Flamegraph>[3];
   highlightQuery: ConstructorParameters<typeof Flamegraph>[4];
   zoom: ConstructorParameters<typeof Flamegraph>[5];
+  renderRects?: boolean;
+  renderText?: boolean;
 
   /**
    * Used when zooming, values between 0 and 1.
@@ -104,6 +109,8 @@ function getCollapsedText(
 }
 
 export default function RenderCanvas(props: CanvasRendererConfig) {
+  const renderRects = props.renderRects !== false;
+  const renderText = props.renderText !== false;
   const { canvas, fitMode, units, tickToX, levels, palette } = props;
   const { numTicks, sampleRate, pxPerTick } = props;
   const { rangeMin, rangeMax } = props;
@@ -137,6 +144,9 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     () => 0,
     (f) => f.i
   );
+  const focusOffset = isFocused ? BAR_HEIGHT : 0;
+  const highlightModeOn =
+    !!props.highlightQuery && props.highlightQuery.length > 0;
 
   const canvasHeight =
     PX_PER_LEVEL * (levels.length - topLevel) + (isFocused ? BAR_HEIGHT : 0);
@@ -150,18 +160,50 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     ctx.scale(2, 2);
   }
 
+  ctx.textBaseline = 'middle';
+  ctx.font =
+    '400 11.5px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace';
+  // Since this is a monospaced font any character would do
+  const characterSize = ctx.measureText('a').width;
+
   const { names } = props;
+  const formattedValueCache = new Map<number, string>();
+  const highlightByNameIndex = highlightModeOn
+    ? buildHighlightByNameIndex(names, props.highlightQuery)
+    : null;
+  const colorByNameIndex =
+    props.format === 'single'
+      ? buildColorByNameIndex(names, props.spyName as SpyName, palette)
+      : null;
+  const diffColorFn =
+    props.format === 'double'
+      ? NewDiffColor({
+          name: palette.name,
+          goodColor: palette.goodColor,
+          neutralColor: palette.neutralColor,
+          badColor: palette.badColor,
+        })
+      : null;
+  const isHighlightedAt = (level: number[], j: number) => {
+    const nameIndex = level[j + ff.jName];
+    if (!nameIndex || nameIndex < 0 || !highlightByNameIndex) {
+      return false;
+    }
+    return highlightByNameIndex[nameIndex] === 1;
+  };
   // are we focused?
   // if so, add an initial bar telling it's a collapsed one
   // TODO clean this up
   if (isFocused) {
     const width = numTicks * pxPerTick;
-    ctx.beginPath();
-    ctx.rect(0, 0, numTicks * pxPerTick, BAR_HEIGHT);
-    // TODO find a neutral color
-    // TODO use getColor ?
-    ctx.fillStyle = colorGreyscale(200, 1).rgb().string();
-    ctx.fill();
+    if (renderRects) {
+      ctx.beginPath();
+      ctx.rect(0, 0, numTicks * pxPerTick, BAR_HEIGHT);
+      // TODO find a neutral color
+      // TODO use getColor ?
+      ctx.fillStyle = colorGreyscale(200, 1).rgb().string();
+      ctx.fill();
+    }
 
     // 使用 i18n 翻译的 collapsed 文本
     const shortName = focusedNode.mapOrElse(
@@ -169,14 +211,6 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       (f) => getCollapsedText(f.i - 1, messages)
     );
 
-    // Set the font syle
-    // It's important to set the font BEFORE calculating 'characterSize'
-    // Since it will be used to calculate how many characters can fit
-    ctx.textBaseline = 'middle';
-    ctx.font =
-      '400 11.5px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace';
-    // Since this is a monospaced font any character would do
-    const characterSize = ctx.measureText('a').width;
     const fitCalc = fitToCanvasRect({
       mode: fitMode,
       charSize: characterSize,
@@ -189,12 +223,20 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     const y = 0;
     const sh = BAR_HEIGHT;
 
-    ctx.save();
-    ctx.clip();
-    ctx.fillStyle = 'black';
-    const namePosX = Math.round(Math.max(x, 0));
-    ctx.fillText(fitCalc.text, namePosX + fitCalc.marginLeft, y + sh / 2 + 1);
-    ctx.restore();
+    if (renderText) {
+      ctx.beginPath();
+      ctx.rect(0, 0, width, BAR_HEIGHT);
+      ctx.save();
+      ctx.clip();
+      ctx.fillStyle = 'black';
+      const namePosX = Math.round(Math.max(x, 0));
+      ctx.fillText(
+        fitCalc.text,
+        namePosX + fitCalc.marginLeft,
+        y + sh / 2 + 1
+      );
+      ctx.restore();
+    }
   }
 
   for (let i = 0; i < levels.length - topLevel; i += 1) {
@@ -206,19 +248,11 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     for (let j = 0; j < level.length; j += ff.jStep) {
       const barIndex = ff.getBarOffset(level, j);
       const x = tickToX(barIndex);
-      const y = i * PX_PER_LEVEL + (isFocused ? BAR_HEIGHT : 0);
+      const y = i * PX_PER_LEVEL + focusOffset;
 
       const sh = BAR_HEIGHT;
 
-      const highlightModeOn =
-        !!props.highlightQuery && props.highlightQuery.length > 0;
-
-      const isHighlighted = nodeIsInQuery(
-        j + ff.jName,
-        level,
-        names,
-        props.highlightQuery
-      );
+      const isHighlighted = highlightModeOn && isHighlightedAt(level, j);
 
       let numBarTicks = ff.getBarTotal(level, j);
 
@@ -230,16 +264,9 @@ 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)
+          (highlightModeOn && isHighlightedAt(level, j + ff.jStep))
         ) {
           j += ff.jStep;
           numBarTicks += ff.getBarTotal(level, j);
@@ -273,6 +300,8 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
           // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
           spyName: spyName as SpyName,
           palette,
+          colorByNameIndex,
+          diffColorFn,
         };
 
         switch (format) {
@@ -292,18 +321,19 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
         }
       };
 
-      const color = getColor();
-
       ctx.beginPath();
       ctx.rect(x, y, sw, sh);
-      ctx.fillStyle = color.string();
-      ctx.fill();
+      if (renderRects) {
+        const color = getColor();
+        ctx.fillStyle = color.string();
+        ctx.fill();
+      }
 
       /*******************************/
       /*      D r a w   T e x t      */
       /*******************************/
       // don't write text if there's not enough space for a single letter
-      if (collapsed) {
+      if (!renderText || collapsed) {
         continue;
       }
 
@@ -315,19 +345,12 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       const longName = getLongName(
         shortName,
         numBarTicks,
-        numTicks,
         sampleRate,
-        formatter
+        formatter,
+        messages,
+        formattedValueCache
       );
 
-      // Set the font syle
-      // It's important to set the font BEFORE calculating 'characterSize'
-      // Since it will be used to calculate how many characters can fit
-      ctx.textBaseline = 'middle';
-      ctx.font =
-        '400 11.5px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace';
-      // Since this is a monospaced font any character would do
-      const characterSize = ctx.measureText('a').width;
       const fitCalc = fitToCanvasRect({
         mode: fitMode,
         charSize: characterSize,
@@ -372,20 +395,26 @@ 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,
+  formattedValueCache?: Map<number, string>
 ) {
-  const ratio = numBarTicks / numTicks;
-  const percent = formatPercent(ratio);
-
-  const longName = `${shortName} (${percent}, ${formatter.format(
-    numBarTicks,
-    sampleRate
-  )})`;
+  let cachedValue = formattedValueCache?.get(numBarTicks);
+  if (!cachedValue) {
+    const formatted = formatter.format(numBarTicks, sampleRate);
+    const localized = localizeDurationString(formatted, !!messages.isZh);
+    cachedValue = localized || formatted;
+    formattedValueCache?.set(numBarTicks, cachedValue);
+  }
+  const longName = `${shortName} (${cachedValue})`;
 
   return longName;
 }
@@ -401,6 +430,8 @@ type getColorCfg = {
   names: string[];
   spyName: SpyName;
   palette: FlamegraphPalette;
+  colorByNameIndex: ReturnType<typeof colorBasedOnPackageName>[] | null;
+  diffColorFn: ReturnType<typeof NewDiffColor> | null;
 };
 
 function getColorCommon({
@@ -448,6 +479,10 @@ function getColorSingle(cfg: getColorCfg) {
     });
     l = -1;
   }
+  if (cfg.colorByNameIndex && l >= 0 && cfg.colorByNameIndex[l]) {
+    return cfg.colorByNameIndex[l].alpha(a);
+  }
+
   const name = cfg.names[l] || '';
   const packageName = getPackageNameFromStackTrace(cfg.spyName, name) || '';
 
@@ -475,28 +510,11 @@ function getColorDouble(
   const leftPercent = ratioToPercent(leftRatio);
   const rightPercent = ratioToPercent(rightRatio);
 
-  return colorBasedOnDiffPercent(cfg.palette, leftPercent, rightPercent).alpha(
-    a
-  );
-}
-
-function nodeIsInQuery(
-  index: number,
-  level: number[],
-  names: string[],
-  query: string
-) {
-  const l = level[index];
-  if (!l) {
-    return false;
+  if (cfg.diffColorFn) {
+    return cfg.diffColorFn(diffPercent(leftPercent, rightPercent)).alpha(a);
   }
 
-  const l2 = names[l];
-  if (!l2) {
-    return false;
-  }
-
-  return isMatch(query, l2);
+  return colorBasedOnDiffPercent(cfg.palette, leftPercent, rightPercent).alpha(a);
 }
 
 function getCanvasWidth(canvas: HTMLCanvasElement) {
@@ -505,3 +523,34 @@ function getCanvasWidth(canvas: HTMLCanvasElement) {
   // so we also fallback to canvas.width
   return canvas.clientWidth || canvas.width;
 }
+
+function buildHighlightByNameIndex(names: string[], query: string) {
+  const queryLower = query.toLowerCase();
+  const matches = new Uint8Array(names.length);
+  for (let i = 1; i < names.length; i += 1) {
+    const name = names[i];
+    if (!name) {
+      continue;
+    }
+    if (name.toLowerCase().includes(queryLower)) {
+      matches[i] = 1;
+    }
+  }
+  return matches;
+}
+
+function buildColorByNameIndex(
+  names: string[],
+  spyName: SpyName,
+  palette: FlamegraphPalette
+) {
+  const colors = new Array<ReturnType<typeof colorBasedOnPackageName>>(
+    names.length
+  );
+  for (let i = 0; i < names.length; i += 1) {
+    const name = names[i] || '';
+    const packageName = getPackageNameFromStackTrace(spyName, name) || '';
+    colors[i] = colorBasedOnPackageName(palette, packageName);
+  }
+  return colors;
+}

package/src/FlameGraph/FlameGraphComponent/canvas.module.css

@@ -4,3 +4,12 @@
   position: relative;
   z-index: 1;
 }
+
+.textCanvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  pointer-events: none;
+  z-index: 2;
+}