@kylincloud/flamegraph 0.35.6

package/src/FlameGraph/FlameGraphComponent/color.ts

@@ -0,0 +1,167 @@
+/* eslint-disable camelcase */
+import Color from 'color';
+import { scaleLinear } from 'd3-scale';
+import type { SpyName } from '../../models';
+import murmurhash3_32_gc from './murmur3';
+import type { FlamegraphPalette } from './colorPalette';
+
+export const defaultColor = Color.rgb(148, 142, 142);
+export const diffColorRed = Color.rgb(200, 0, 0);
+export const diffColorGreen = Color.rgb(0, 170, 0);
+
+export const highlightColor = Color('#48CE73');
+
+export function colorBasedOnDiffPercent(
+  palette: FlamegraphPalette,
+  leftPercent: number,
+  rightPercent: number
+) {
+  const result = diffPercent(leftPercent, rightPercent);
+  const color = NewDiffColor(palette);
+  return color(result);
+}
+
+// TODO move to a different file
+// difference between 2 percents
+export function diffPercent(leftPercent: number, rightPercent: number) {
+  if (leftPercent === rightPercent) {
+    return 0;
+  }
+
+  if (leftPercent === 0) {
+    return 100;
+  }
+
+  // https://en.wikipedia.org/wiki/Relative_change_and_difference
+  const result = ((rightPercent - leftPercent) / leftPercent) * 100;
+
+  if (result > 100) {
+    return 100;
+  }
+  if (result < -100) {
+    return -100;
+  }
+
+  return result;
+}
+
+export function colorFromPercentage(p: number, alpha: number) {
+  // calculated by drawing a line (https://en.wikipedia.org/wiki/Line_drawing_algorithm)
+  // where p1 = (0, 180) and p2 = (100, 0)
+  // where x is the absolute percentage
+  // and y is the color variation
+  let v = 180 - 1.8 * Math.abs(p);
+
+  if (v > 200) {
+    v = 200;
+  }
+
+  // red
+  if (p > 0) {
+    return Color.rgb(200, v, v).alpha(alpha);
+  }
+  // green
+  if (p < 0) {
+    return Color.rgb(v, 200, v).alpha(alpha);
+  }
+  // grey
+  return Color.rgb(200, 200, 200).alpha(alpha);
+}
+
+export function colorGreyscale(v: number, a: number) {
+  return Color.rgb(v, v, v).alpha(a);
+}
+
+function spyToRegex(spyName: SpyName): RegExp {
+  // eslint-disable-next-line default-case
+  switch (spyName) {
+    case 'dotnetspy':
+      return /^(?<packageName>.+)\.(.+)\.(.+)\(.*\)$/;
+    // TODO: come up with a clever heuristic
+    case 'ebpfspy':
+      return /^(?<packageName>.+)$/;
+    // tested with pyroscope stacktraces here: https://regex101.com/r/99KReq/1
+    case 'gospy':
+      return /^(?<packageName>.*?\/.*?\.|.*?\.|.+)(?<functionName>.*)$/;
+    // assume scrape is golang, since that's the only language we support right now
+    case 'scrape':
+      return /^(?<packageName>.*?\/.*?\.|.*?\.|.+)(?<functionName>.*)$/;
+    case 'phpspy':
+      return /^(?<packageName>(.*\/)*)(?<filename>.*\.php+)(?<line_info>.*)$/;
+    case 'pyspy':
+      return /^(?<packageName>(.*\/)*)(?<filename>.*\.py+)(?<line_info>.*)$/;
+    case 'rbspy':
+      return /^(?<packageName>(.*\/)*)(?<filename>.*\.rb+)(?<line_info>.*)$/;
+    case 'nodespy':
+      return /^(\.\/node_modules\/)?(?<packageName>[^/]*)(?<filename>.*\.?(jsx?|tsx?)?):(?<functionName>.*):(?<line_info>.*)$/;
+    case 'tracing':
+      return /^(?<packageName>.+?):.*$/;
+    case 'javaspy':
+      // TODO: we might want to add ? after groups
+      return /^(?<packageName>.+\/)(?<filename>.+\.)(?<functionName>.+)$/;
+    case 'pyroscope-rs':
+      return /^(?<packageName>[^::]+)/;
+    case 'unknown':
+      return /^(?<packageName>.+)$/;
+  }
+
+  return /^(?<packageName>.+)$/;
+}
+
+// TODO spy names?
+export function getPackageNameFromStackTrace(
+  spyName: SpyName,
+  stackTrace: string
+) {
+  if (stackTrace.length === 0) {
+    return stackTrace;
+  }
+  const regexp = spyToRegex(spyName);
+  const fullStackGroups = stackTrace.match(regexp);
+  if (fullStackGroups && fullStackGroups.groups) {
+    return fullStackGroups.groups['packageName'] || '';
+  }
+  return stackTrace;
+}
+
+export function colorBasedOnPackageName(
+  palette: FlamegraphPalette,
+  name: string
+) {
+  const hash = murmurhash3_32_gc(name, 0);
+  const colorIndex = hash % palette.colors.length;
+  const baseClr = palette.colors[colorIndex];
+  if (!baseClr) {
+    console.warn('Could not calculate color. Defaulting to the first one');
+    // We assert to Color since the first position is always available
+    return palette.colors[0];
+  }
+
+  return baseClr;
+}
+
+/**
+ * NewDiffColor constructs a function that given a number from -100 to 100
+ * it returns the color for that number in a linear scale
+ * encoded in rgb
+ */
+export function NewDiffColor(
+  props: Omit<FlamegraphPalette, 'colors'>
+): (n: number) => InstanceType<typeof Color> {
+  const { goodColor, neutralColor, badColor } = props;
+
+  const color = scaleLinear()
+    .domain([-100, 0, 100])
+    // TODO types from DefinitelyTyped seem to mismatch
+    .range([
+      goodColor.rgb().toString(),
+      neutralColor.rgb().toString(),
+      badColor.rgb().toString(),
+    ] as ShamefulAny);
+
+  return (n: number) => {
+    // convert to our Color object
+    // since that's what users are expecting to use
+    return Color(color(n).toString());
+  };
+}

package/src/FlameGraph/FlameGraphComponent/colorPalette.ts

@@ -0,0 +1,58 @@
+import Color from 'color';
+
+// FlamegraphPalette represents
+export interface FlamegraphPalette {
+  name: string;
+  goodColor: InstanceType<typeof Color>;
+  neutralColor: InstanceType<typeof Color>;
+  badColor: InstanceType<typeof Color>;
+
+  colors: InstanceType<typeof Color>[];
+}
+
+export const DefaultPalette: FlamegraphPalette = {
+  name: 'Default',
+  // green
+  goodColor: Color.rgb(0, 170, 0),
+  // grey
+  neutralColor: Color.rgb(148, 142, 142),
+  // red
+  badColor: Color.rgb(200, 0, 0),
+
+  colors: [
+    Color.hsl(24, 69, 60),
+    Color.hsl(34, 65, 65),
+    Color.hsl(194, 52, 61),
+    Color.hsl(163, 45, 55),
+    Color.hsl(211, 48, 60),
+    Color.hsl(246, 40, 65),
+    Color.hsl(305, 63, 79),
+    Color.hsl(47, 100, 73),
+
+    Color.rgb(183, 219, 171),
+    Color.rgb(244, 213, 152),
+    Color.rgb(78, 146, 249),
+    Color.rgb(249, 186, 143),
+    Color.rgb(242, 145, 145),
+    Color.rgb(130, 181, 216),
+    Color.rgb(229, 168, 226),
+    Color.rgb(174, 162, 224),
+    Color.rgb(154, 196, 138),
+    Color.rgb(242, 201, 109),
+    Color.rgb(101, 197, 219),
+    Color.rgb(249, 147, 78),
+    Color.rgb(234, 100, 96),
+    Color.rgb(81, 149, 206),
+    Color.rgb(214, 131, 206),
+    Color.rgb(128, 110, 183),
+  ],
+};
+
+export const ColorBlindPalette: FlamegraphPalette = {
+  ...DefaultPalette,
+
+  name: 'Color Blind',
+  goodColor: Color.rgb(26, 133, 255),
+  neutralColor: Color.rgb(148, 142, 142),
+  badColor: Color.rgb(220, 50, 32),
+};

package/src/FlameGraph/FlameGraphComponent/constants.ts

@@ -0,0 +1,5 @@
+export const PX_PER_LEVEL = 22;
+export const COLLAPSE_THRESHOLD = 5;
+export const LABEL_THRESHOLD = 20;
+export const GAP = 0.5;
+export const BAR_HEIGHT = PX_PER_LEVEL - GAP;

package/src/FlameGraph/FlameGraphComponent/index.spec.tsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Maybe } from 'true-myth';
+import FlamegraphComponent from './index';
+import TestData from './testData';
+import { BAR_HEIGHT } from './constants';
+import { DefaultPalette, FlamegraphPalette } from './colorPalette';
+
+// the leaves have already been tested
+// this is just to guarantee code is compiling
+// and the callbacks are being called correctly
+describe('FlamegraphComponent', () => {
+  const setPalette = (p: FlamegraphPalette) => {};
+  it('renders', () => {
+    const onZoom = jest.fn();
+    const onReset = jest.fn();
+    const isDirty = jest.fn();
+    const onFocusOnNode = jest.fn();
+
+    render(
+      <FlamegraphComponent
+        updateFitMode={() => ({})}
+        selectedItem={Maybe.nothing()}
+        setActiveItem={() => ({})}
+        showCredit
+        fitMode="HEAD"
+        zoom={Maybe.nothing()}
+        focusedNode={Maybe.nothing()}
+        highlightQuery=""
+        onZoom={onZoom}
+        onFocusOnNode={onFocusOnNode}
+        onReset={onReset}
+        isDirty={isDirty}
+        flamebearer={TestData.SimpleTree}
+        palette={DefaultPalette}
+        setPalette={setPalette}
+      />
+    );
+  });
+
+  it('resizes correctly', () => {
+    const onZoom = jest.fn();
+    const onReset = jest.fn();
+    const isDirty = jest.fn();
+    const onFocusOnNode = jest.fn();
+
+    render(
+      <FlamegraphComponent
+        updateFitMode={() => ({})}
+        selectedItem={Maybe.nothing()}
+        setActiveItem={() => ({})}
+        showCredit
+        fitMode="HEAD"
+        zoom={Maybe.nothing()}
+        focusedNode={Maybe.nothing()}
+        highlightQuery=""
+        onZoom={onZoom}
+        onFocusOnNode={onFocusOnNode}
+        onReset={onReset}
+        isDirty={isDirty}
+        flamebearer={TestData.SimpleTree}
+        palette={DefaultPalette}
+        setPalette={setPalette}
+      />
+    );
+
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 800,
+    });
+
+    window.dispatchEvent(new Event('resize'));
+
+    // there's nothing much to assert here
+    expect(window.innerWidth).toBe(800);
+  });
+
+  it('zooms on click', () => {
+    const onZoom = jest.fn();
+    const onReset = jest.fn();
+    const isDirty = jest.fn();
+    const onFocusOnNode = jest.fn();
+
+    render(
+      <FlamegraphComponent
+        updateFitMode={() => ({})}
+        selectedItem={Maybe.nothing()}
+        setActiveItem={() => ({})}
+        showCredit
+        fitMode="HEAD"
+        zoom={Maybe.nothing()}
+        focusedNode={Maybe.nothing()}
+        highlightQuery=""
+        onZoom={onZoom}
+        onFocusOnNode={onFocusOnNode}
+        onReset={onReset}
+        isDirty={isDirty}
+        flamebearer={TestData.SimpleTree}
+        palette={DefaultPalette}
+        setPalette={setPalette}
+      />
+    );
+
+    userEvent.click(screen.getByTestId('flamegraph-canvas'), {
+      clientX: 0,
+      clientY: BAR_HEIGHT * 3,
+    });
+
+    expect(onZoom).toHaveBeenCalled();
+  });
+
+  describe('context menu', () => {
+    it(`enables "reset view" menuitem when it's dirty`, async () => {
+      const onZoom = jest.fn();
+      const onReset = jest.fn();
+      const isDirty = jest.fn();
+      const onFocusOnNode = jest.fn();
+
+      const { rerender } = render(
+        <FlamegraphComponent
+          updateFitMode={() => ({})}
+          selectedItem={Maybe.nothing()}
+          setActiveItem={() => ({})}
+          showCredit
+          fitMode="HEAD"
+          zoom={Maybe.nothing()}
+          focusedNode={Maybe.nothing()}
+          highlightQuery=""
+          onZoom={onZoom}
+          onFocusOnNode={onFocusOnNode}
+          onReset={onReset}
+          isDirty={isDirty}
+          flamebearer={TestData.SimpleTree}
+          palette={DefaultPalette}
+          setPalette={setPalette}
+        />
+      );
+
+      userEvent.click(screen.getByTestId('flamegraph-canvas'), {
+        button: 2,
+        clientX: 1,
+        clientY: 1,
+      });
+
+      // should not be available unless we zoom
+      await waitFor(() =>
+        expect(
+          screen.queryByRole('menuitem', { name: /Reset View/ })
+        ).toHaveAttribute('aria-disabled', 'true')
+      );
+
+      // it's dirty now
+      isDirty.mockReturnValue(true);
+
+      rerender(
+        <FlamegraphComponent
+          updateFitMode={() => ({})}
+          selectedItem={Maybe.nothing()}
+          setActiveItem={() => ({})}
+          showCredit
+          fitMode="HEAD"
+          zoom={Maybe.nothing()}
+          focusedNode={Maybe.nothing()}
+          highlightQuery=""
+          onZoom={onZoom}
+          onFocusOnNode={onFocusOnNode}
+          onReset={onReset}
+          isDirty={isDirty}
+          flamebearer={TestData.SimpleTree}
+          palette={DefaultPalette}
+          setPalette={setPalette}
+        />
+      );
+
+      userEvent.click(screen.getByTestId('flamegraph-canvas'), {
+        button: 2,
+      });
+
+      // should be enabled now
+      expect(
+        screen.queryByRole('menuitem', { name: /Reset View/ })
+      ).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('triggers a highlight', () => {
+      const onZoom = jest.fn();
+      const onReset = jest.fn();
+      const isDirty = jest.fn();
+      const onFocusOnNode = jest.fn();
+
+      render(
+        <FlamegraphComponent
+          updateFitMode={() => ({})}
+          selectedItem={Maybe.nothing()}
+          setActiveItem={() => ({})}
+          showCredit
+          fitMode="HEAD"
+          zoom={Maybe.nothing()}
+          focusedNode={Maybe.nothing()}
+          highlightQuery=""
+          onZoom={onZoom}
+          onFocusOnNode={onFocusOnNode}
+          onReset={onReset}
+          isDirty={isDirty}
+          flamebearer={TestData.SimpleTree}
+          palette={DefaultPalette}
+          setPalette={setPalette}
+        />
+      );
+
+      // initially the context highlight is not visible
+      expect(
+        screen.getByTestId('flamegraph-highlight-contextmenu')
+      ).not.toBeVisible();
+
+      // then we click
+      userEvent.click(screen.getByTestId('flamegraph-canvas'), { button: 2 });
+
+      // should be visible now
+      expect(
+        screen.getByTestId('flamegraph-highlight-contextmenu')
+      ).toBeVisible();
+    });
+  });
+
+  describe('header', () => {
+    const onZoom = jest.fn();
+    const onReset = jest.fn();
+    const isDirty = jest.fn();
+    const onFocusOnNode = jest.fn();
+
+    it('renders when type is single', () => {
+      render(
+        <FlamegraphComponent
+          updateFitMode={() => ({})}
+          selectedItem={Maybe.nothing()}
+          setActiveItem={() => ({})}
+          showCredit
+          fitMode="HEAD"
+          zoom={Maybe.nothing()}
+          focusedNode={Maybe.nothing()}
+          highlightQuery=""
+          onZoom={onZoom}
+          onFocusOnNode={onFocusOnNode}
+          onReset={onReset}
+          isDirty={isDirty}
+          flamebearer={TestData.SimpleTree}
+          palette={DefaultPalette}
+          setPalette={setPalette}
+          toolbarVisible
+        />
+      );
+
+      expect(screen.queryByRole('heading', { level: 2 })).toHaveTextContent(
+        'Frame width represents CPU time per function'
+      );
+    });
+
+    it('renders when type is "double"', () => {
+      const flamebearer = TestData.DiffTree;
+      render(
+        <FlamegraphComponent
+          updateFitMode={() => ({})}
+          selectedItem={Maybe.nothing()}
+          setActiveItem={() => ({})}
+          showCredit
+          fitMode="HEAD"
+          zoom={Maybe.nothing()}
+          focusedNode={Maybe.nothing()}
+          highlightQuery=""
+          onZoom={onZoom}
+          onFocusOnNode={onFocusOnNode}
+          onReset={onReset}
+          isDirty={isDirty}
+          flamebearer={flamebearer}
+          palette={DefaultPalette}
+          setPalette={setPalette}
+          toolbarVisible
+        />
+      );
+
+      expect(screen.queryByRole('heading', { level: 2 })).toHaveTextContent(
+        '(-) RemovedAdded (+)'
+      );
+
+      expect(screen.getByTestId('flamegraph-legend')).toBeInTheDocument();
+    });
+  });
+});