@kylincloud/flamegraph 0.35.6

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

@@ -0,0 +1,53 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Maybe } from 'true-myth';
+
+import Highlight, { HighlightProps } from './Highlight';
+
+function TestComponent(props: Omit<HighlightProps, 'canvasRef'>) {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null);
+
+  return (
+    <>
+      <canvas data-testid="canvas" ref={canvasRef} />
+      {canvasRef && <Highlight canvasRef={canvasRef} {...props} />}
+    </>
+  );
+}
+
+describe('Highlight', () => {
+  it('works', () => {
+    const xyToHighlightData = jest.fn();
+    render(
+      <TestComponent
+        barHeight={50}
+        xyToHighlightData={xyToHighlightData}
+        zoom={Maybe.nothing()}
+      />
+    );
+
+    // hover over a bar
+    xyToHighlightData.mockReturnValueOnce(
+      Maybe.of({
+        left: 10,
+        top: 5,
+        width: 100,
+      })
+    );
+    userEvent.hover(screen.getByTestId('canvas'));
+    expect(screen.getByTestId('flamegraph-highlight')).toBeVisible();
+    expect(screen.getByTestId('flamegraph-highlight')).toHaveStyle({
+      height: '50px',
+      left: '10px',
+      top: '5px',
+      width: '100px',
+    });
+
+    // hover outside the canvas
+    xyToHighlightData.mockReturnValueOnce(Maybe.nothing());
+    userEvent.hover(screen.getByTestId('canvas'));
+    expect(screen.getByTestId('flamegraph-highlight')).not.toBeVisible();
+  });
+});

package/src/FlameGraph/FlameGraphComponent/Highlight.tsx

@@ -0,0 +1,94 @@
+import { Maybe } from 'true-myth';
+import React from 'react';
+import { DeepReadonly } from 'ts-essentials';
+import styles from './Highlight.module.css';
+
+export interface HighlightProps {
+  // probably the same as the bar height
+  barHeight: number;
+  zoom: Maybe<DeepReadonly<{ i: number; j: number }>>;
+  xyToHighlightData: (
+    x: number,
+    y: number
+  ) => Maybe<{
+    left: number;
+    top: number;
+    width: number;
+  }>;
+
+  canvasRef: React.RefObject<HTMLCanvasElement>;
+}
+export default function Highlight(props: HighlightProps) {
+  const { canvasRef, barHeight, xyToHighlightData, zoom } = props;
+  const [style, setStyle] = React.useState<React.CSSProperties>({
+    height: '0px',
+    visibility: 'hidden',
+  });
+
+  React.useEffect(() => {
+    // stops highlighting every time a node is zoomed or unzoomed
+    // then, when a mouse move event is detected,
+    // listeners are triggered and highlighting becomes visible again
+    setStyle({
+      height: '0px',
+      visibility: 'hidden',
+    });
+  }, [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 onMouseOut = () => {
+    setStyle({
+      ...style,
+      visibility: 'hidden',
+    });
+  };
+
+  React.useEffect(
+    () => {
+      // use closure to "cache" the current canvas reference
+      // so that when cleaning up, it points to a valid canvas
+      // (otherwise it would be null)
+      const canvasEl = canvasRef.current;
+      if (!canvasEl) {
+        return () => {};
+      }
+
+      // watch for mouse events on the bar
+      canvasEl.addEventListener('mousemove', onMouseMove);
+      canvasEl.addEventListener('mouseout', onMouseOut);
+
+      return () => {
+        canvasEl.removeEventListener('mousemove', onMouseMove);
+        canvasEl.removeEventListener('mouseout', onMouseOut);
+      };
+    },
+
+    // refresh callback functions when they change
+    [canvasRef.current, onMouseMove, onMouseOut]
+  );
+
+  return (
+    <div
+      className={styles.highlight}
+      style={style}
+      data-testid="flamegraph-highlight"
+    />
+  );
+}

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

@@ -0,0 +1,10 @@
+.logoLink {
+  text-decoration: none;
+  font-weight: 500;
+  opacity: 0.5;
+  color: var(--ps-neutral-2);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}

package/src/FlameGraph/FlameGraphComponent/LogoLink.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import styles from './LogoLink.module.scss';
+
+// TODO: move this to assets pipeline. for now just embedding it here because this is less likely to break
+function svgLogo() {
+  return (
+    <svg
+      width="22px"
+      height="22px"
+      viewBox="0 0 1024 1024"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <radialGradient
+          cx="49.4236252%"
+          cy="92.6627823%"
+          fx="49.4236252%"
+          fy="92.6627823%"
+          r="195.066755%"
+          gradientTransform="translate(0.494236,0.926628),scale(1.000000,0.735610),rotate(-90.000000),translate(-0.494236,-0.926628)"
+          id="radialGradient-1"
+        >
+          <stop stopColor="#FFB90C" offset="0%" />
+          <stop stopColor="#F9243A" offset="38.390924%" />
+          <stop stopColor="#F9243A" offset="50.5405%" />
+          <stop stopColor="#B51424" offset="73.98091%" />
+          <stop stopColor="#B51424" offset="100%" />
+        </radialGradient>
+      </defs>
+      <g
+        id="Artboard"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+      >
+        <g
+          id="fire-part"
+          transform="translate(148.516736, 0.000000)"
+          fillRule="nonzero"
+        >
+          <g
+            id="whole-thing"
+            transform="translate(363.983264, 495.000000) scale(-1, 1) rotate(-180.000000) translate(-363.983264, -495.000000) translate(0.483264, 0.000000)"
+          >
+            <g
+              id="g70"
+              transform="translate(-0.000091, 0.685815)"
+              fill="url(#radialGradient-1)"
+            >
+              <path
+                d="M65.3646667,571.739321 L65.4492471,571.698868 C19.5139147,505.999969 -5.32464048,424.477859 1.04305801,336.877516 L1.04305801,336.877516 C14.0321963,158.179446 159.192462,13.7596653 338.059844,1.5917266 L338.059844,1.5917266 C419.418369,-3.93888015 495.500283,17.3823334 558.456522,57.4611191 L558.456522,57.4611191 L481.301947,162.097965 C437.516468,136.521928 399.367671,129.590556 363.486536,130.155994 L363.486536,130.155994 C234.497143,130.155994 129.556988,235.032238 129.556988,363.946998 L129.556988,363.946998 C129.556988,492.865683 234.497143,597.738003 363.486536,597.738003 L363.486536,597.738003 C492.483783,597.738003 597.427864,492.865683 597.427864,363.946998 L597.427864,363.946998 C597.41276,304.634864 581.39383,255.677522 530.630465,199.668053 L607.770843,95.1329436 C680.936847,161.576603 726.932594,257.364176 726.932594,363.946998 L726.932594,363.946998 C726.932594,458.031616 691.13483,543.75602 632.416071,608.271816 L632.416071,608.271816 L632.416071,608.275741 L533.597728,748.122808 L428.601388,617.203806 L434.703262,646.563419 C459.453008,765.59222 433.664131,889.543925 363.49439,988.853335 L363.49439,988.853335 L65.3646667,571.723019 L65.3646667,571.739321 Z"
+                id="path84"
+              />
+            </g>
+            <g id="blue" transform="translate(191.447039, 191.331780)">
+              <g id="g88" transform="translate(-0.000063, 0.685930)">
+                <g
+                  id="g94"
+                  transform="translate(0.177296, 0.699054)"
+                  fill="#3EC1D3"
+                >
+                  <path
+                    d="M171.862466,343.697728 C77.0961324,343.697728 -0.00497405932,266.647602 -0.00497405932,171.934957 C-0.00497405932,77.2182874 77.0961324,0.168162396 171.862466,0.168162396 C266.632828,0.168162396 343.741988,77.2182874 343.741988,171.934957 C343.741988,266.647602 266.632828,343.697728 171.862466,343.697728"
+                    id="path96"
+                  />
+                </g>
+                <g
+                  id="g98"
+                  transform="translate(29.362379, 172.629585)"
+                  fill="#FFFFFF"
+                >
+                  <path
+                    d="M22.8397982,0 L0.671669409,0 C0.671669409,78.2496309 64.380874,141.920035 142.678189,141.920035 L142.678189,119.765407 C76.6007327,119.765407 22.8397982,66.0372141 22.8397982,0"
+                    id="path100"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default function LogoLink() {
+  return (
+    <a
+      className={styles.logoLink}
+      href="https://github.com/pyroscope-io/pyroscope/"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {svgLogo()}
+      <span>Pyroscope</span>
+    </a>
+  );
+}

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

@@ -0,0 +1,6 @@
+.canvas {
+  width: 100%;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}

package/src/FlameGraph/FlameGraphComponent/color.spec.ts

@@ -0,0 +1,308 @@
+import Color from 'color';
+type Color = ColorLib
+import {
+  colorBasedOnDiffPercent,
+  NewDiffColor,
+  getPackageNameFromStackTrace,
+} from './color';
+import { DefaultPalette } from './colorPalette';
+
+describe.each([
+  // red (diff > 0)
+  [30, 60, DefaultPalette.badColor.toString()],
+
+  // green (diff < 0%)
+  [60, 0, DefaultPalette.goodColor.toString()],
+
+  // grey (diff == 0)
+  [0, 0, DefaultPalette.neutralColor.toString()],
+])('.colorBasedOnDiffPercent(%i, %i)', (a, b, expected) => {
+  it(`returns ${expected}`, () => {
+    expect(colorBasedOnDiffPercent(DefaultPalette, a, b).rgb().toString()).toBe(
+      expected
+    );
+  });
+});
+
+describe('NewDiffColor with white-to-black example palette', () => {
+  describe.each([
+    [-100, 'rgb(255, 255, 255)'],
+    [0, 'rgb(128, 128, 128)'],
+    [100, 'rgb(0, 0, 0)'],
+  ])('.NewDiffColor(%i)', (a, expected) => {
+    it(`returns ${expected}`, () => {
+      const color = NewDiffColor({
+        name: 'my palette',
+        goodColor: Color('white'),
+        neutralColor: Color('grey'),
+        badColor: Color('black'),
+      });
+
+      expect(color(a).rgb().toString()).toBe(expected);
+    });
+  });
+});
+
+describe('getPackageNameFromStackTrace', () => {
+  describe('golang', () => {
+    describe.each([
+      ['bufio.(*Reader).fill', 'bufio.'],
+      ['cmpbody', 'cmpbody'],
+      ['bytes.Compare', 'bytes.'],
+      ['crypto/tls.(*Conn).clientHandshake', 'crypto/tls.'],
+      [
+        'github.com/DataDog/zstd._Cfunc_ZSTD_compress_wrapper',
+        'github.com/DataDog/zstd.',
+      ],
+      [
+        'github.com/dgraph-io/badger/v2.(*DB).calculateSize',
+        'github.com/dgraph-io/badger/v2.',
+      ],
+      [
+        'github.com/dgraph-io/badger/v2/table.(*blockIterator).next',
+        'github.com/dgraph-io/badger/v2/table.',
+      ],
+      ['path/filepath.walk', 'path/filepath.'],
+      ['os.(*File).write', 'os.'],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('gospy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('pyspy', () => {
+    describe.each([
+      ['total', 'total'],
+      [
+        'System.Private.CoreLib!System.Threading.TimerQueue.FireNextTimers()',
+        'System.Private.CoreLib!System.Threading',
+      ],
+      [
+        'StackExchange.Redis!StackExchange.Redis.ConnectionMultiplexer.OnHeartbeat()',
+        'StackExchange.Redis!StackExchange.Redis',
+      ],
+      [
+        'Microsoft.AspNetCore.Server.Kestrel.Core!Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpRequestPipeReader.ReadAsync(value class System.Threading.CancellationToken)',
+        'Microsoft.AspNetCore.Server.Kestrel.Core!Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http',
+      ],
+      [
+        'Google.Protobuf!Google.Protobuf.ParsingPrimitivesMessages.ReadRawMessage(value class Google.Protobuf.ParseContext\u0026,class Google.Protobuf.IMessage)',
+        'Google.Protobuf!Google.Protobuf',
+      ],
+      [
+        'Grpc.AspNetCore.Server!Grpc.AspNetCore.Server.Internal.PipeExtensions.ReadSingleMessageAsync(class System.IO.Pipelines.PipeReader,class Grpc.AspNetCore.Server.Internal.HttpContextServerCallContext,class System.Func`2\u003cclass Grpc.Core.DeserializationContext,!!0\u003e)',
+        'Grpc.AspNetCore.Server!Grpc.AspNetCore.Server.Internal',
+      ],
+      [
+        'System.Private.CoreLib!System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1[System.__Canon].GetStateMachineBox(!!0\u0026,class System.Threading.Tasks.Task`1\u003c!0\u003e\u0026)',
+        'System.Private.CoreLib!System.Runtime.CompilerServices.AsyncTaskMethodBuilder`1[System',
+      ],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('dotnetspy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('pyspy', () => {
+    describe.each([
+      ['total', 'total'],
+      ['urllib3/response.py:579 - stream', 'urllib3/'],
+      ['requests/models.py:580 - prepare_cookies', 'requests/'],
+      ['logging/__init__.py:1548 - findCaller', 'logging/'],
+      [
+        'jaeger_client/thrift_gen/jaeger/ttypes.py:147 - write',
+        'jaeger_client/thrift_gen/jaeger/',
+      ],
+
+      // TODO: this one looks incorrect, but keeping in the test for now
+      [
+        '\u003cfrozen importlib._bootstrap\u003e:1030 - _gcd_import',
+        '<frozen importlib._bootstrap>:1030 - _gcd_import',
+      ],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('pyspy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('rbspy', () => {
+    describe.each([
+      ['total', 'total'],
+      ['webrick/utils.rb:194 - watch', 'webrick/'],
+      ['webrick/server.rb:190 - block (2 levels) in start', 'webrick/'],
+      [
+        'gems/sinatra-2.0.3/lib/sinatra/base.rb:1537 - start_server',
+        'gems/sinatra-2.0.3/lib/sinatra/',
+      ],
+      ['services/driver/client.rb:34 - get_drivers', 'services/driver/'],
+      ['uri/common.rb:742 - URI', 'uri/'],
+      ['net/protocol.rb:299 - block in write0', 'net/'],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('rbspy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('ebpfspy', () => {
+    describe.each([
+      ['total', 'total'],
+      ['entry_SYSCALL_64_after_hwframe', 'entry_SYSCALL_64_after_hwframe'],
+      ['[unknown]', '[unknown]'],
+      [
+        'QApplicationPrivate::notify_helper(QObject*, QEvent*)',
+        'QApplicationPrivate::notify_helper(QObject*, QEvent*)',
+      ],
+      [
+        'v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&)',
+        'v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&)',
+      ],
+      [
+        'github.com/pyroscope-io/pyroscope/pkg/agent.(*ProfileSession).Start.dwrap.3',
+        'github.com/pyroscope-io/pyroscope/pkg/agent.(*ProfileSession).Start.dwrap.3',
+      ],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('ebpfspy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('default', () => {
+    describe.each([
+      ['total', 'total'],
+      ['entry_SYSCALL_64_after_hwframe', 'entry_SYSCALL_64_after_hwframe'],
+      ['[unknown]', '[unknown]'],
+      [
+        'QApplicationPrivate::notify_helper(QObject*, QEvent*)',
+        'QApplicationPrivate::notify_helper(QObject*, QEvent*)',
+      ],
+      [
+        'v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&)',
+        'v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&)',
+      ],
+      [
+        'github.com/pyroscope-io/pyroscope/pkg/agent.(*ProfileSession).Start.dwrap.3',
+        'github.com/pyroscope-io/pyroscope/pkg/agent.(*ProfileSession).Start.dwrap.3',
+      ],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('unknown', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('rust', () => {
+    describe.each([
+      ['total', 'total'],
+      ['std::thread::local::LocalKey<T>::with', 'std'],
+      [
+        'tokio::runtime::basic_scheduler::CoreGuard::block_on::{{closure}}::{{closure}}::{{closure}}',
+        'tokio',
+      ],
+      [
+        '<core::future::from_generator::GenFuture<T> as core::future::future::Future>::poll',
+        '<core',
+      ],
+      [
+        'reqwest::blocking::client::ClientHandle::new::{{closure}}::{{closure}}',
+        'reqwest',
+      ],
+      ['core::time::Duration::as_secs', 'core'],
+      ['clock_gettime@GLIBC_2.2.5', 'clock_gettime@GLIBC_2.2.5'],
+      [
+        'hyper::proto::h1::dispatch::Dispatcher<D,Bs,I,T>::poll_catch debugger eval code',
+        'hyper',
+      ],
+      ['openssl::ssl::connector::SslConnector::builder', 'openssl'],
+
+      // TODO looks incorrect
+      [
+        '<F as futures_core::future::TryFuture>::try_poll',
+        '<F as futures_core',
+      ],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('pyroscope-rs', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('scrape (pull mode)', () => {
+    describe.each([
+      ['bufio.(*Reader).fill', 'bufio.'],
+      ['cmpbody', 'cmpbody'],
+      ['bytes.Compare', 'bytes.'],
+      ['crypto/tls.(*Conn).clientHandshake', 'crypto/tls.'],
+      [
+        'github.com/DataDog/zstd._Cfunc_ZSTD_compress_wrapper',
+        'github.com/DataDog/zstd.',
+      ],
+      [
+        'github.com/dgraph-io/badger/v2.(*DB).calculateSize',
+        'github.com/dgraph-io/badger/v2.',
+      ],
+      [
+        'github.com/dgraph-io/badger/v2/table.(*blockIterator).next',
+        'github.com/dgraph-io/badger/v2/table.',
+      ],
+      ['path/filepath.walk', 'path/filepath.'],
+      ['os.(*File).write', 'os.'],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('scrape', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('nodejs spy', () => {
+    describe.each([
+      ['total', 'total'],
+      ['./node_modules/node-fetch/lib/index.js:fetch:1493', 'node-fetch'],
+      [
+        './node_modules/@pyroscope-node/dist/pull/index.js:sampleFunction:1827',
+        '@pyroscope-node',
+      ],
+      ['node:net:Socket:320', 'node:net'],
+      [':(idle):0', ''],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('nodespy', a)).toBe(expected);
+      });
+    });
+  });
+
+  describe('java spy', () => {
+    describe.each([
+      [
+        'org/apache/catalina/core/ApplicationFilterChain.doFilter',
+        'org/apache/catalina/core/',
+      ],
+      [
+        'org/apache/catalina/core/ApplicationFilterChain.internalDoFilter',
+        'org/apache/catalina/core/',
+      ],
+      [
+        'org/apache/coyote/AbstractProcessorLight.process',
+        'org/apache/coyote/',
+      ],
+      [
+        'org/springframework/web/servlet/DispatcherServlet.doService',
+        'org/springframework/web/servlet/',
+      ],
+      [
+        'org/example/rideshare/RideShareController.orderCar',
+        'org/example/rideshare/',
+      ],
+      ['org/example/rideshare/OrderService.orderCar', 'org/example/rideshare/'],
+      ['total', 'total'],
+    ])(`.getPackageNameFromStackTrace('%s')`, (a, expected) => {
+      it(`returns '${expected}'`, () => {
+        expect(getPackageNameFromStackTrace('javaspy', a)).toBe(expected);
+      });
+    });
+  });
+});