@kylincloud/flamegraph 0.35.24 → 0.35.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kylincloud/flamegraph",
-  "version": "0.35.24",
+  "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/Flamegraph_render.ts

@@ -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';
@@ -69,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.
@@ -106,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;
@@ -139,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);
@@ -152,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(
@@ -171,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,
@@ -191,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) {
@@ -208,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);
 
@@ -234,14 +266,7 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
           ff.getBarTotal(level, j + ff.jStep) * pxPerTick <=
           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);
@@ -275,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) {
@@ -294,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;
       }
 
@@ -319,17 +347,10 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
         numBarTicks,
         sampleRate,
         formatter,
-        messages
+        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,
@@ -383,11 +404,17 @@ function getLongName(
   numBarTicks: number,
   sampleRate: number,
   formatter: ReturnType<typeof getFormatter>,
-  messages: CanvasI18nMessages
+  messages: CanvasI18nMessages,
+  formattedValueCache?: Map<number, string>
 ) {
-  const formatted = formatter.format(numBarTicks, sampleRate);
-  const localized = localizeDurationString(formatted, !!messages.isZh);
-  const longName = `${shortName} (${localized || formatted})`;
+  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;
 }
@@ -403,6 +430,8 @@ type getColorCfg = {
   names: string[];
   spyName: SpyName;
   palette: FlamegraphPalette;
+  colorByNameIndex: ReturnType<typeof colorBasedOnPackageName>[] | null;
+  diffColorFn: ReturnType<typeof NewDiffColor> | null;
 };
 
 function getColorCommon({
@@ -450,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) || '';
 
@@ -477,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) {
@@ -507,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;
+}

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -75,8 +75,14 @@ interface FlamegraphProps {
 
 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(
@@ -117,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();
     }
   });
@@ -323,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);
 
@@ -400,6 +445,7 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       <div
         data-testid={dataTestId}
         style={{
+          position: 'relative',
           opacity: dataUnavailable && !showSingleLevel ? 0 : 1,
         }}
       >
@@ -411,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

@@ -147,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
@@ -614,6 +618,9 @@ class FlameGraphRenderer extends Component<
     );
 
     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">