@kylincloud/flamegraph 0.35.6

package/src/FlameGraph/FlameGraphComponent/Flamegraph_render.ts

@@ -0,0 +1,478 @@
+/*
+
+This component is based on code from flamebearer project
+  https://github.com/mapbox/flamebearer
+
+ISC License
+
+Copyright (c) 2018, Mapbox
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.
+
+*/
+
+/* eslint-disable no-continue */
+import { createFF, Flamebearer, SpyName } from '../../models';
+import {
+  formatPercent,
+  getFormatter,
+  ratioToPercent,
+} from '../../format/format';
+import { fitToCanvasRect } from '../../fitMode/fitMode';
+import { getRatios } from './utils';
+import {
+  PX_PER_LEVEL,
+  COLLAPSE_THRESHOLD,
+  LABEL_THRESHOLD,
+  BAR_HEIGHT,
+  GAP,
+} from './constants';
+import {
+  colorBasedOnDiffPercent,
+  colorBasedOnPackageName,
+  colorGreyscale,
+  getPackageNameFromStackTrace,
+} 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';
+
+type CanvasRendererConfig = Flamebearer & {
+  canvas: HTMLCanvasElement;
+  focusedNode: ConstructorParameters<typeof Flamegraph>[2];
+  fitMode: ConstructorParameters<typeof Flamegraph>[3];
+  highlightQuery: ConstructorParameters<typeof Flamegraph>[4];
+  zoom: ConstructorParameters<typeof Flamegraph>[5];
+
+  /**
+   * Used when zooming, values between 0 and 1.
+   * For illustration, in a non zoomed state it has the value of 0
+   */
+  readonly rangeMin: number;
+  /**
+   * Used when zooming, values between 0 and 1.
+   * For illustration, in a non zoomed state it has the value of 1
+   */
+  readonly rangeMax: number;
+
+  tickToX: (i: number) => number;
+
+  pxPerTick: number;
+
+  palette: FlamegraphPalette;
+  maxSelf?: number;
+};
+
+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 graphWidth = getCanvasWidth(canvas);
+  // TODO: why is this needed? otherwise height is all messed up
+  canvas.width = graphWidth;
+
+  if (rangeMin >= rangeMax) {
+    throw new Error(`'rangeMin' should be strictly smaller than 'rangeMax'`);
+  }
+
+  const { format } = props;
+  const ff = createFF(format);
+
+  //  const pxPerTick = graphWidth / numTicks / (rangeMax - rangeMin);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    throw new Error('Could not get ctx');
+  }
+
+  const selectedLevel = zoom.mapOrElse(
+    () => 0,
+    (z) => z.i
+  );
+  const formatter = getFormatter(numTicks, sampleRate, units);
+  const isFocused = focusedNode.isJust;
+  const topLevel = focusedNode.mapOrElse(
+    () => 0,
+    (f) => f.i
+  );
+
+  const canvasHeight =
+    PX_PER_LEVEL * (levels.length - topLevel) + (isFocused ? BAR_HEIGHT : 0);
+  //  const canvasHeight = PX_PER_LEVEL * (levels.length - topLevel);
+  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 { names } = props;
+  // 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();
+
+    // TODO show the samples too?
+    const shortName = focusedNode.mapOrElse(
+      () => 'total',
+      (f) => `total (${f.i - 1} level(s) collapsed)`
+    );
+
+    // 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,
+      rectWidth: width,
+      fullText: shortName,
+      shortText: shortName,
+    });
+
+    const x = 0;
+    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();
+  }
+
+  for (let i = 0; i < levels.length - topLevel; 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) {
+      const barIndex = ff.getBarOffset(level, j);
+      const x = tickToX(barIndex);
+      const y = i * PX_PER_LEVEL + (isFocused ? BAR_HEIGHT : 0);
+
+      const sh = BAR_HEIGHT;
+
+      const highlightModeOn =
+        !!props.highlightQuery && props.highlightQuery.length > 0;
+
+      const isHighlighted = nodeIsInQuery(
+        j + ff.jName,
+        level,
+        names,
+        props.highlightQuery
+      );
+
+      let numBarTicks = ff.getBarTotal(level, j);
+
+      // merge very small blocks into big "collapsed" ones for performance
+      const collapsed = numBarTicks * pxPerTick <= COLLAPSE_THRESHOLD;
+      if (collapsed) {
+        // TODO: refactor this
+        while (
+          j < level.length - ff.jStep &&
+          barIndex + numBarTicks === ff.getBarOffset(level, j + ff.jStep) &&
+          ff.getBarTotal(level, j + ff.jStep) * pxPerTick <=
+            COLLAPSE_THRESHOLD &&
+          isHighlighted ===
+            ((props.highlightQuery &&
+              nodeIsInQuery(
+                j + ff.jStep + ff.jName,
+                level,
+                names,
+                props.highlightQuery
+              )) ||
+              false)
+        ) {
+          j += ff.jStep;
+          numBarTicks += ff.getBarTotal(level, j);
+        }
+      }
+
+      const sw = numBarTicks * pxPerTick - (collapsed ? 0 : GAP);
+      /*******************************/
+      /*      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,
+        };
+
+        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}`);
+          }
+        }
+      };
+
+      const color = getColor();
+
+      ctx.beginPath();
+      ctx.rect(x, y, sw, sh);
+      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) {
+        continue;
+      }
+
+      if (sw < LABEL_THRESHOLD) {
+        continue;
+      }
+
+      const shortName = getFunctionName(names, j, format, level);
+      const longName = getLongName(
+        shortName,
+        numBarTicks,
+        numTicks,
+        sampleRate,
+        formatter
+      );
+
+      // 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,
+        rectWidth: sw,
+        fullText: longName,
+        shortText: shortName,
+      });
+
+      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();
+    }
+  }
+}
+
+function getFunctionName(
+  names: CanvasRendererConfig['names'],
+  j: number,
+  format: CanvasRendererConfig['format'],
+  level: number[]
+) {
+  const ff = createFF(format);
+
+  let l = level[j + ff.jName];
+  if (l === undefined) {
+    l = -1;
+  }
+  const shortName = names[l];
+
+  if (!shortName) {
+    console.warn('Could not find function name for', {
+      j,
+      format,
+      level,
+      names,
+    });
+    return '';
+  }
+  return shortName;
+}
+
+function getLongName(
+  shortName: string,
+  numBarTicks: number,
+  numTicks: number,
+  sampleRate: number,
+  formatter: ReturnType<typeof getFormatter>
+) {
+  const ratio = numBarTicks / numTicks;
+  const percent = formatPercent(ratio);
+
+  const longName = `${shortName} (${percent}, ${formatter.format(
+    numBarTicks,
+    sampleRate
+  )})`;
+
+  return longName;
+}
+
+type getColorCfg = {
+  collapsed: boolean;
+  level: number[];
+  j: number;
+  selectedLevel: number;
+  i: number;
+  highlightModeOn: boolean;
+  isHighlighted: boolean;
+  names: string[];
+  spyName: SpyName;
+  palette: FlamegraphPalette;
+};
+
+function getColorCommon({
+  collapsed,
+  highlightModeOn,
+  isHighlighted,
+}: Pick<
+  getColorCfg,
+  'selectedLevel' | 'i' | 'collapsed' | 'highlightModeOn' | 'isHighlighted'
+>) {
+  // Collapsed
+  if (collapsed) {
+    return colorGreyscale(200, 0.66);
+  }
+
+  // We are in a search
+  if (highlightModeOn) {
+    if (!isHighlighted) {
+      return colorGreyscale(200, 0.66);
+    }
+  }
+
+  return null;
+}
+
+function getColorSingle(cfg: getColorCfg) {
+  const common = getColorCommon(cfg);
+
+  // common cases, like highlight
+  if (common) {
+    return common;
+  }
+
+  const ff = createFF('single');
+
+  const a = cfg.selectedLevel > cfg.i ? 0.33 : 1;
+
+  // TODO: clean this up
+  let l = cfg.level[cfg.j + ff.jName];
+  if (l === undefined) {
+    console.warn('Could nto find level', {
+      l: cfg.j,
+      jName: ff.jName,
+      level: cfg.level,
+    });
+    l = -1;
+  }
+  const name = cfg.names[l] || '';
+  const packageName = getPackageNameFromStackTrace(cfg.spyName, name) || '';
+
+  return colorBasedOnPackageName(cfg.palette, packageName).alpha(a);
+}
+
+function getColorDouble(
+  cfg: getColorCfg & { leftTicks: number; rightTicks: number }
+) {
+  const common = getColorCommon(cfg);
+
+  // common cases, like highlight
+  if (common) {
+    return common;
+  }
+
+  const a = cfg.selectedLevel > cfg.i ? 0.33 : 1;
+  const { leftRatio, rightRatio } = getRatios(
+    cfg.level,
+    cfg.j,
+    cfg.leftTicks,
+    cfg.rightTicks
+  );
+
+  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;
+  }
+
+  const l2 = names[l];
+  if (!l2) {
+    return false;
+  }
+
+  return isMatch(query, l2);
+}
+
+function getCanvasWidth(canvas: HTMLCanvasElement) {
+  // 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;
+}

package/src/FlameGraph/FlameGraphComponent/GraphVizPane.tsx

@@ -0,0 +1,56 @@
+// src/FlameGraph/FlameGraphComponent/GraphVizPane.tsx
+import type { Flamebearer } from '../../models';
+import React, { useMemo } from 'react';
+import toGraphviz from '../../convert/toGraphviz';
+import styles from './GraphVizPanel.module.scss';
+
+interface IGraphvizProps {
+  dot: string;
+  options?: object;
+  className?: string;
+}
+
+// 这里不再引入 graphviz-react，而是用一个简单的占位组件
+// 后续如果真的需要 GraphViz 视图，可以在这里改成动态 import
+const Graphviz: React.FC<IGraphvizProps> = () => null;
+
+interface GraphVizPaneProps {
+  flamebearer: Flamebearer;
+}
+
+export function GraphVizPane({ flamebearer }: GraphVizPaneProps) {
+  // TODO(@petethepig): 原始注释，保留
+  const fb = flamebearer as ShamefulAny;
+
+  // flamebearer 是否存在
+  const dot = fb.metadata?.format && fb.flamebearer?.levels;
+
+  // Graphviz 原来的逻辑：通过 key 强制 remount，避免缩放状态不更新
+  const key = `graphviz-pane-${fb?.appName || String(new Date().valueOf())}`;
+
+  const dotValue = useMemo(() => {
+    return toGraphviz(fb);
+  }, [JSON.stringify(fb)]);
+
+  return (
+    <div className={styles.graphVizPane} key={key}>
+      {dot ? (
+        <Graphviz
+          // options https://github.com/magjac/d3-graphviz#supported-options
+          options={{
+            zoom: true,
+            width: '150%',
+            height: '100%',
+            scale: 1,
+            // 'true' by default, but causes warning
+            // https://github.com/magjac/d3-graphviz/blob/master/README.md#defining-the-hpcc-jswasm-script-tag
+            useWorker: false,
+          }}
+          dot={dotValue}
+        />
+      ) : (
+        <div>NO DATA</div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+.graphVizPane {
+  display: flex;
+  flex: 1;
+
+  // hacky better than !important
+  &#{&} {
+    margin-right: 0;
+    border: 1px solid var(--ps-ui-border);
+  }
+
+  div[id^='graphviz'] {
+    width: 100%;
+    overflow: hidden;
+
+    :global {
+      .graph > polygon {
+        // graphviz overlay
+        fill: none;
+      }
+
+      .node {
+        polygon {
+          // node box
+          // stroke: var(--ps-fl-toolbar-btn-bg);
+        }
+
+        text[text-anchor='middle'] {
+          // node caption
+          // fill: var(--ps-toolbar-icon-color);
+        }
+      }
+
+      .edge {
+        text[text-anchor='middle'] {
+          // edge caption
+          fill: var(--ps-toolbar-icon-color);
+          // fill: red;
+        }
+
+        a {
+          path {
+            // arrow body
+            // stroke: var(--ps-fl-toolbar-btn-bg);
+          }
+
+          polygon {
+            // arrow head
+            // stroke: var(--ps-fl-toolbar-btn-bg);
+            // fill: var(--ps-fl-toolbar-btn-bg);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+.flamegraphHeader {
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: space-between;
+
+  align-items: flex-start;
+}
+
+.flamegraphHeader > div:first-child {
+  width: 100%;
+}
+
+.flamegraphHeader button {
+  /* margin: auto;
+  display: block; */
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+.flamegraphTitle {
+  width: 100%;
+  display: block;
+  text-align: center;
+}

package/src/FlameGraph/FlameGraphComponent/Header.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Flamebearer } from '../../models';
+import styles from './Header.module.css';
+import { FlamegraphPalette } from './colorPalette';
+import { DiffLegendPaletteDropdown } from './DiffLegendPaletteDropdown';
+
+interface HeaderProps {
+  format: Flamebearer['format'];
+  units: Flamebearer['units'];
+
+  palette: FlamegraphPalette;
+  setPalette: (p: FlamegraphPalette) => void;
+  toolbarVisible?: boolean;
+}
+export default function Header(props: HeaderProps) {
+  const { format, units, palette, setPalette, toolbarVisible } = props;
+
+  const unitsToFlamegraphTitle = {
+    objects: 'number of objects in RAM per function',
+    goroutines: 'number of goroutines',
+    bytes: 'amount of RAM per function',
+    samples: 'CPU time per function',
+    lock_nanoseconds: 'time spent waiting on locks per function',
+    lock_samples: 'number of contended locks per function',
+    trace_samples: 'aggregated span duration',
+    exceptions: 'number of exceptions thrown',
+    unknown: '',
+  };
+
+  const getTitle = () => {
+    switch (format) {
+      case 'single': {
+        return (
+          <div>
+            <div
+              className={`${styles.row} ${styles.flamegraphTitle}`}
+              role="heading"
+              aria-level={2}
+            >
+              {unitsToFlamegraphTitle[units] && (
+                <>Frame width represents {unitsToFlamegraphTitle[units]}</>
+              )}
+            </div>
+          </div>
+        );
+      }
+
+      case 'double': {
+        return (
+          <>
+            <DiffLegendPaletteDropdown
+              palette={palette}
+              onChange={setPalette}
+            />
+          </>
+        );
+      }
+
+      default:
+        throw new Error(`unexpected format ${format}`);
+    }
+  };
+
+  const title = toolbarVisible ? getTitle() : null;
+
+  return (
+    <div className={styles.flamegraphHeader}>
+      <div>{title}</div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+.highlight {
+  position: absolute;
+  pointer-events: none;
+  background: #ffffff40;
+  mix-blend-mode: overlay;
+  z-index: 2;
+}