@kylincloud/flamegraph 0.35.27 → 0.35.29

package/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -57,6 +57,116 @@ export interface CanvasI18nMessages {
   isZh?: boolean;
 }
 
+const formattedValueCacheByCanvas = new WeakMap<
+  HTMLCanvasElement | OffscreenCanvas,
+  Map<number, string>
+>();
+const highlightCacheByNames = new WeakMap<
+  string[],
+  Map<string, Uint8Array>
+>();
+const colorCacheByNames = new WeakMap<
+  string[],
+  Map<string, ReturnType<typeof colorBasedOnPackageName>[]>
+>();
+const barIndexByLevels = new WeakMap<
+  Flamebearer['levels'],
+  Map<number, Array<{ i: number; j: number }>>
+>();
+
+function getFormattedValueCache(canvas: HTMLCanvasElement | OffscreenCanvas) {
+  const cached = formattedValueCacheByCanvas.get(canvas);
+  if (cached) {
+    return cached;
+  }
+  const next = new Map<number, string>();
+  formattedValueCacheByCanvas.set(canvas, next);
+  return next;
+}
+
+function getHighlightByNameIndex(names: string[], query: string) {
+  const cachedByQuery = highlightCacheByNames.get(names);
+  if (cachedByQuery) {
+    const cached = cachedByQuery.get(query);
+    if (cached) {
+      return cached;
+    }
+  }
+  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;
+    }
+  }
+  const nextMap = cachedByQuery ?? new Map<string, Uint8Array>();
+  nextMap.set(query, matches);
+  highlightCacheByNames.set(names, nextMap);
+  return matches;
+}
+
+function getColorByNameIndexCached(
+  names: string[],
+  spyName: SpyName,
+  palette: FlamegraphPalette
+) {
+  const key = `${spyName}|${palette.name}`;
+  const cachedByPalette = colorCacheByNames.get(names);
+  if (cachedByPalette) {
+    const cached = cachedByPalette.get(key);
+    if (cached) {
+      return cached;
+    }
+  }
+  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);
+  }
+  const nextMap =
+    cachedByPalette ??
+    new Map<string, ReturnType<typeof colorBasedOnPackageName>[]>();
+  nextMap.set(key, colors);
+  colorCacheByNames.set(names, nextMap);
+  return colors;
+}
+
+function getBarIndex(
+  levels: Flamebearer['levels'],
+  format: Flamebearer['format']
+) {
+  const cached = barIndexByLevels.get(levels);
+  if (cached) {
+    return cached;
+  }
+  const ff = createFF(format);
+  const index = new Map<number, Array<{ i: number; j: number }>>();
+  for (let i = 0; i < levels.length; i += 1) {
+    const level = levels[i];
+    for (let j = 0; j < level.length; j += ff.jStep) {
+      const nameIndex = ff.getBarName(level, j);
+      if (nameIndex === undefined || nameIndex < 0) {
+        continue;
+      }
+      const list = index.get(nameIndex);
+      if (list) {
+        list.push({ i, j });
+      } else {
+        index.set(nameIndex, [{ i, j }]);
+      }
+    }
+  }
+  barIndexByLevels.set(levels, index);
+  return index;
+}
+
 /** Default English messages (fallback) */
 const defaultCanvasMessages: CanvasI18nMessages = {
   collapsedLevelsSingular: 'total (1 level collapsed)',
@@ -65,13 +175,22 @@ const defaultCanvasMessages: CanvasI18nMessages = {
 };
 
 type CanvasRendererConfig = Flamebearer & {
-  canvas: HTMLCanvasElement;
+  canvas: HTMLCanvasElement | OffscreenCanvas;
   focusedNode: ConstructorParameters<typeof Flamegraph>[2];
   fitMode: ConstructorParameters<typeof Flamegraph>[3];
   highlightQuery: ConstructorParameters<typeof Flamegraph>[4];
   zoom: ConstructorParameters<typeof Flamegraph>[5];
   renderRects?: boolean;
   renderText?: boolean;
+  renderMode?: 'normal' | 'highlightOnly' | 'forceGrey';
+  levelStart?: number;
+  levelEnd?: number;
+  startI?: number;
+  startJ?: number;
+  timeBudgetMs?: number;
+  skipCanvasResize?: boolean;
+  skipDprScale?: boolean;
+  devicePixelRatio?: number;
 
   /**
    * Used when zooming, values between 0 and 1.
@@ -108,18 +227,25 @@ function getCollapsedText(
   return messages.collapsedLevelsPlural.replace('{n}', String(levelCount));
 }
 
-export default function RenderCanvas(props: CanvasRendererConfig) {
+export default function RenderCanvas(
+  props: CanvasRendererConfig
+): { done: boolean; nextI: number; nextJ: number } {
+  const renderStart = performance.now();
   const renderRects = props.renderRects !== false;
   const renderText = props.renderText !== false;
+  const renderMode = props.renderMode ?? 'normal';
+  const timeBudgetMs = props.timeBudgetMs;
   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);
+  const graphWidth = props.skipCanvasResize ? canvas.width : getCanvasWidth(canvas);
   // TODO: why is this needed? otherwise height is all messed up
-  canvas.width = graphWidth;
+  if (!props.skipCanvasResize) {
+    canvas.width = graphWidth;
+  }
 
   if (rangeMin >= rangeMax) {
     throw new Error(`'rangeMin' should be strictly smaller than 'rangeMax'`);
@@ -151,13 +277,21 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
   const canvasHeight =
     PX_PER_LEVEL * (levels.length - topLevel) + (isFocused ? BAR_HEIGHT : 0);
   //  const canvasHeight = PX_PER_LEVEL * (levels.length - topLevel);
-  canvas.height = canvasHeight;
+  if (!props.skipCanvasResize) {
+    canvas.height = canvasHeight;
+  }
 
   // increase pixel ratio, otherwise it looks bad in high resolution devices
-  if (devicePixelRatio > 1) {
-    canvas.width *= 2;
-    canvas.height *= 2;
-    ctx.scale(2, 2);
+  const dpr =
+    typeof props.devicePixelRatio === 'number'
+      ? props.devicePixelRatio
+      : typeof devicePixelRatio !== 'undefined'
+        ? devicePixelRatio
+        : 1;
+  if (!props.skipDprScale && dpr > 1) {
+    canvas.width *= dpr;
+    canvas.height *= dpr;
+    ctx.scale(dpr, dpr);
   }
 
   ctx.textBaseline = 'middle';
@@ -167,13 +301,13 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
   const characterSize = ctx.measureText('a').width;
 
   const { names } = props;
-  const formattedValueCache = new Map<number, string>();
+  const formattedValueCache = getFormattedValueCache(canvas);
   const highlightByNameIndex = highlightModeOn
-    ? buildHighlightByNameIndex(names, props.highlightQuery)
+    ? getHighlightByNameIndex(names, props.highlightQuery)
     : null;
   const colorByNameIndex =
     props.format === 'single'
-      ? buildColorByNameIndex(names, props.spyName as SpyName, palette)
+      ? getColorByNameIndexCached(names, props.spyName as SpyName, palette)
       : null;
   const diffColorFn =
     props.format === 'double'
@@ -194,7 +328,15 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
   // are we focused?
   // if so, add an initial bar telling it's a collapsed one
   // TODO clean this up
-  if (isFocused) {
+  const initialStartI = props.startI ?? 0;
+  const initialStartJ = props.startJ ?? 0;
+  if (
+    isFocused &&
+    renderMode !== 'highlightOnly' &&
+    (props.levelStart ?? 0) === 0 &&
+    initialStartI === 0 &&
+    initialStartJ === 0
+  ) {
     const width = numTicks * pxPerTick;
     if (renderRects) {
       ctx.beginPath();
@@ -239,13 +381,120 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
     }
   }
 
-  for (let i = 0; i < levels.length - topLevel; i += 1) {
+  const levelStart = Math.max(0, props.levelStart ?? 0);
+  const maxLevels = levels.length - topLevel;
+  const levelEnd = Math.min(maxLevels, props.levelEnd ?? maxLevels);
+  const renderStartI = Math.max(levelStart, props.startI ?? levelStart);
+  const renderStartJ = Math.max(0, props.startJ ?? 0);
+
+  const { spyName } = props;
+  const getColorForBar = (
+    level: number[],
+    j: number,
+    i: number,
+    collapsed: boolean,
+    isHighlighted: boolean
+  ) => {
+    const common = {
+      level,
+      j,
+      // discount for the levels we skipped
+      // otherwise it will dim out all nodes
+      i:
+        i +
+        focusedNode.mapOrElse(
+          () => 0,
+          (f) => f.i
+        ),
+      names,
+      collapsed,
+      selectedLevel,
+      highlightModeOn,
+      isHighlighted,
+      // keep type narrow https://stackoverflow.com/q/54333982
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      spyName: spyName as SpyName,
+      palette,
+      colorByNameIndex,
+      diffColorFn,
+    };
+
+    switch (format) {
+      case 'single': {
+        return getColorSingle({ ...common });
+      }
+      case 'double': {
+        return getColorDouble({
+          ...common,
+          leftTicks: props.leftTicks,
+          rightTicks: props.rightTicks,
+        });
+      }
+      default: {
+        throw new Error(`Unsupported format: ${format}`);
+      }
+    }
+  };
+
+  if (renderMode === 'highlightOnly' && highlightModeOn && renderRects) {
+    const barIndex = getBarIndex(levels, format);
+    const highlightNameIndices: number[] = [];
+    for (let i = 1; i < names.length; i += 1) {
+      if (highlightByNameIndex && highlightByNameIndex[i] === 1) {
+        highlightNameIndices.push(i);
+      }
+    }
+    for (let i = 0; i < highlightNameIndices.length; i += 1) {
+      const nameIndex = highlightNameIndices[i];
+      const entries = barIndex.get(nameIndex);
+      if (!entries) {
+        continue;
+      }
+      for (let k = 0; k < entries.length; k += 1) {
+        const entry = entries[k];
+        const relativeLevel = entry.i - topLevel;
+        if (
+          entry.i < topLevel ||
+          relativeLevel < levelStart ||
+          relativeLevel >= levelEnd
+        ) {
+          continue;
+        }
+        const level = levels[entry.i];
+        const barIndexValue = ff.getBarOffset(level, entry.j);
+        const x = tickToX(barIndexValue);
+        const y = relativeLevel * PX_PER_LEVEL + focusOffset;
+        const sh = BAR_HEIGHT;
+        const numBarTicks = ff.getBarTotal(level, entry.j);
+        const collapsed = numBarTicks * pxPerTick <= COLLAPSE_THRESHOLD;
+        const sw = numBarTicks * pxPerTick - (collapsed ? 0 : GAP);
+        if (sw <= 0) {
+          continue;
+        }
+        ctx.beginPath();
+        ctx.rect(x, y, sw, sh);
+        const color = getColorForBar(
+          level,
+          entry.j,
+          relativeLevel,
+          collapsed,
+          true
+        );
+        ctx.fillStyle = color.string();
+        ctx.fill();
+      }
+    }
+    return { done: true, nextI: levelEnd, nextJ: 0 };
+  }
+
+  for (let i = renderStartI; i < levelEnd; i += 1) {
     const level = levels[topLevel + i];
     if (!level) {
       throw new Error(`Could not find level: ${topLevel + i}`);
     }
 
-    for (let j = 0; j < level.length; j += ff.jStep) {
+    let j = i === renderStartI ? renderStartJ : 0;
+    for (; j < level.length; j += ff.jStep) {
       const barIndex = ff.getBarOffset(level, j);
       const x = tickToX(barIndex);
       const y = i * PX_PER_LEVEL + focusOffset;
@@ -277,55 +526,15 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       /*******************************/
       /*      D r a w   R e c t      */
       /*******************************/
-      const { spyName } = props;
-
-      const getColor = () => {
-        const common = {
-          level,
-          j,
-          // discount for the levels we skipped
-          // otherwise it will dim out all nodes
-          i:
-            i +
-            focusedNode.mapOrElse(
-              () => 0,
-              (f) => f.i
-            ),
-          names,
-          collapsed,
-          selectedLevel,
-          highlightModeOn,
-          isHighlighted,
-          // keep type narrow https://stackoverflow.com/q/54333982
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
-          spyName: spyName as SpyName,
-          palette,
-          colorByNameIndex,
-          diffColorFn,
-        };
-
-        switch (format) {
-          case 'single': {
-            return getColorSingle({ ...common });
-          }
-          case 'double': {
-            return getColorDouble({
-              ...common,
-              leftTicks: props.leftTicks,
-              rightTicks: props.rightTicks,
-            });
-          }
-          default: {
-            throw new Error(`Unsupported format: ${format}`);
-          }
-        }
-      };
-
       ctx.beginPath();
       ctx.rect(x, y, sw, sh);
       if (renderRects) {
-        const color = getColor();
-        ctx.fillStyle = color.string();
+        if (renderMode === 'forceGrey') {
+          ctx.fillStyle = colorGreyscale(200, 0.66).rgb().string();
+        } else {
+          const color = getColorForBar(level, j, i, collapsed, isHighlighted);
+          ctx.fillStyle = color.string();
+        }
         ctx.fill();
       }
 
@@ -333,7 +542,10 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       /*      D r a w   T e x t      */
       /*******************************/
       // don't write text if there's not enough space for a single letter
-      if (!renderText || collapsed) {
+      if (!renderText || collapsed || renderMode === 'forceGrey') {
+        if (timeBudgetMs && performance.now() - renderStart > timeBudgetMs) {
+          return { done: false, nextI: i, nextJ: j + ff.jStep };
+        }
         continue;
       }
 
@@ -365,8 +577,16 @@ export default function RenderCanvas(props: CanvasRendererConfig) {
       const namePosX = Math.round(Math.max(x, 0));
       ctx.fillText(fitCalc.text, namePosX + fitCalc.marginLeft, y + sh / 2 + 1);
       ctx.restore();
+
+      if (timeBudgetMs && performance.now() - renderStart > timeBudgetMs) {
+        return { done: false, nextI: i, nextJ: j + ff.jStep };
+      }
+    }
+    if (timeBudgetMs && performance.now() - renderStart > timeBudgetMs) {
+      return { done: false, nextI: i + 1, nextJ: 0 };
     }
   }
+  return { done: true, nextI: levelEnd, nextJ: 0 };
 }
 
 function getFunctionName(
@@ -517,26 +737,18 @@ function getColorDouble(
   return colorBasedOnDiffPercent(cfg.palette, leftPercent, rightPercent).alpha(a);
 }
 
-function getCanvasWidth(canvas: HTMLCanvasElement) {
+function getCanvasWidth(canvas: HTMLCanvasElement | OffscreenCanvas) {
   // clientWidth includes padding
   // however it's not present in node-canvas (used for testing)
   // so we also fallback to canvas.width
-  return canvas.clientWidth || canvas.width;
+  if ('clientWidth' in canvas && typeof canvas.clientWidth === 'number') {
+    return canvas.clientWidth;
+  }
+  return 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;
+  return getHighlightByNameIndex(names, query);
 }
 
 function buildColorByNameIndex(
@@ -544,13 +756,5 @@ function buildColorByNameIndex(
   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;
+  return getColorByNameIndexCached(names, spyName, palette);
 }

package/src/FlameGraph/FlameGraphComponent/Highlight.tsx

@@ -24,6 +24,9 @@ export default function Highlight(props: HighlightProps) {
     height: '0px',
     visibility: 'hidden',
   });
+  const highlightRef = React.useRef<HTMLDivElement>(null);
+  const rafRef = React.useRef<number | null>(null);
+  const lastStyleRef = React.useRef<React.CSSProperties | null>(null);
 
   React.useEffect(() => {
     // stops highlighting every time a node is zoomed or unzoomed
@@ -35,27 +38,46 @@ export default function Highlight(props: HighlightProps) {
     });
   }, [zoom]);
 
-  const onMouseMove = (e: MouseEvent) => {
-    const opt = xyToHighlightData(e.offsetX, e.offsetY);
-
-    if (opt.isJust) {
-      const data = opt.value;
-
-      setStyle({
-        visibility: 'visible',
-        height: `${barHeight}px`,
-        ...data,
-      });
-    } else {
-      // it doesn't map to a valid xy
-      // so it means we are hovering out
-      onMouseOut();
+  const applyStyle = (next: React.CSSProperties) => {
+    const node = highlightRef.current;
+    if (!node) {
+      setStyle(next);
+      return;
     }
+    const prev = lastStyleRef.current;
+    if (prev && prev.left === next.left && prev.top === next.top && prev.width === next.width && prev.visibility === next.visibility) {
+      return;
+    }
+    lastStyleRef.current = next;
+    node.style.visibility = String(next.visibility || '');
+    if (next.left !== undefined) node.style.left = String(next.left);
+    if (next.top !== undefined) node.style.top = String(next.top);
+    if (next.width !== undefined) node.style.width = String(next.width);
+    if (next.height !== undefined) node.style.height = String(next.height);
+  };
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    const x = e.offsetX;
+    const y = e.offsetY;
+    rafRef.current = requestAnimationFrame(() => {
+      const opt = xyToHighlightData(x, y);
+      if (opt.isJust) {
+        const data = opt.value;
+        applyStyle({
+          visibility: 'visible',
+          height: `${barHeight}px`,
+          ...data,
+        });
+      } else {
+        onMouseOut();
+      }
+    });
   };
 
   const onMouseOut = () => {
-    setStyle({
-      ...style,
+    applyStyle({
+      ...(lastStyleRef.current || {}),
       visibility: 'hidden',
     });
   };
@@ -77,6 +99,9 @@ export default function Highlight(props: HighlightProps) {
       return () => {
         canvasEl.removeEventListener('mousemove', onMouseMove);
         canvasEl.removeEventListener('mouseout', onMouseOut);
+        if (rafRef.current) {
+          cancelAnimationFrame(rafRef.current);
+        }
       };
     },
 
@@ -86,6 +111,7 @@ export default function Highlight(props: HighlightProps) {
 
   return (
     <div
+      ref={highlightRef}
       className={styles.highlight}
       style={style}
       data-testid="flamegraph-highlight"