feat: heap flame

Author: zjffun

packages/vscode-js-profile-core/src/heap/tree.ts

@@ -37,9 +37,7 @@ export class TreeNode implements ITreeNode {
   constructor(
     public readonly node: Cdp.HeapProfiler.SamplingHeapProfileNode,
     public readonly parent?: TreeNode,
-  ) {
-    this.parent = parent;
-  }
+  ) {}
 
   public toJSON(): ITreeNode {
     return {
@@ -89,6 +87,5 @@ export const createTree = (model: IProfileModel) => {
     root.totalSize += root.children[child].totalSize;
   }
 
-  console.log(root.totalSize);
   return root;
 };

packages/vscode-js-profile-flame/package.json

@@ -29,19 +29,22 @@
   "scripts": {
     "pack": "vsce package --yarn",
     "compile": "rimraf out && concurrently \"npm:compile:*\"",
-    "compile:client": "webpack --mode production --config webpack.client.js",
+    "compile:cpu-client": "webpack --mode production --config webpack.cpu-client.js",
+    "compile:heap-client": "webpack --mode production --config webpack.heap-client.js",
     "compile:realtime": "webpack --mode production --config webpack.realtime.js",
     "compile:ext": "webpack --mode production --config webpack.extension.js --target node",
     "compile:ext:web": "webpack --mode production --config webpack.extension.js --target web",
     "watch": "concurrently \"npm:watch:*\"",
-    "watch:client": "webpack --mode development --config webpack.client.js --watch",
+    "watch:cpu-client": "webpack --mode development --config webpack.cpu-client.js --watch",
+    "watch:heap-client": "webpack --mode development --config webpack.heap-client.js --watch",
     "watch:realtime": "webpack --mode development --config webpack.realtime.js --watch",
     "watch:ext": "webpack --mode development --config webpack.extension.js --watch --target node"
   },
   "icon": "resources/logo.png",
   "activationEvents": [
     "onView:vscode-js-profile-flame.realtime",
-    "onCustomEditor:jsProfileVisualizer.cpuprofile.flame"
+    "onCustomEditor:jsProfileVisualizer.cpuprofile.flame",
+    "onCustomEditor:jsProfileVisualizer.heapprofile.flame"
   ],
   "contributes": {
     "customEditors": [
@@ -54,6 +57,16 @@
             "filenamePattern": "*.cpuprofile"
           }
         ]
+      },
+      {
+        "viewType": "jsProfileVisualizer.heapprofile.flame",
+        "displayName": "Heap Profile Flame Graph Visualizer",
+        "priority": "option",
+        "selector": [
+          {
+            "filenamePattern": "*.heapprofile"
+          }
+        ]
       }
     ],
     "views": {

packages/vscode-js-profile-flame/src/client/common/build-boxes.ts

@@ -0,0 +1,71 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { Category } from 'vscode-js-profile-core/out/esm/cpu/model';
+import { Constants } from './constants';
+import { IBox, IColumn, IColumnRow } from './types';
+
+const getBoxInRowColumn = (
+  columns: ReadonlyArray<IColumn>,
+  boxes: ReadonlyMap<number, IBox>,
+  column: number,
+  row: number,
+) => {
+  let candidate = columns[column]?.rows[row];
+  if (typeof candidate === 'number') {
+    candidate = columns[candidate].rows[row];
+  }
+
+  return candidate !== undefined
+    ? boxes.get((candidate as { graphId: number }).graphId)
+    : undefined;
+};
+
+const pickColor = (row: IColumnRow): number => {
+  if (row.category === Category.System) {
+    return -1;
+  }
+
+  const hash = row.graphId * 5381; // djb2's prime, just some bogus stuff
+  return hash & 0xff;
+};
+
+export default (columns: ReadonlyArray<IColumn>, filtered: ReadonlyArray<number>) => {
+  const boxes: Map<number, IBox> = new Map();
+  let maxY = 0;
+  for (let x = 0; x < columns.length; x++) {
+    const col = columns[x];
+    const highlightY = filtered[x];
+    for (let y = 0; y < col.rows.length; y++) {
+      const loc = col.rows[y];
+      if (typeof loc === 'number') {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        getBoxInRowColumn(columns, boxes, x, y)!.x2 = col.x2;
+      } else {
+        const y1 = Constants.BoxHeight * y + Constants.TimelineHeight;
+        const y2 = y1 + Constants.BoxHeight;
+        boxes.set(loc.graphId, {
+          column: x,
+          row: y,
+          x1: col.x1,
+          x2: col.x2,
+          y1,
+          y2,
+          level: y,
+          text: loc.callFrame.functionName,
+          color: pickColor(loc),
+          category: y <= highlightY ? loc.category : Category.Deemphasized,
+          loc,
+        });
+
+        maxY = Math.max(y2, maxY);
+      }
+    }
+  }
+
+  return {
+    boxById: boxes,
+    maxY,
+  };
+};

packages/vscode-js-profile-flame/src/client/common/common.css

@@ -0,0 +1,5 @@
+.goToFile {
+  width: 1em;
+  display: inline-block;
+  cursor: pointer;
+}

packages/vscode-js-profile-flame/src/client/common/constants.ts

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+export const enum Constants {
+  BoxHeight = 20,
+  TextColor = '#fff',
+  BoxColor = '#000',
+  TimelineHeight = 22,
+  TimelineLabelSpacing = 200,
+  MinWindow = 0.005,
+  ExtraYBuffer = 300,
+  DefaultStackLimit = 7,
+}

packages/vscode-js-profile-flame/src/client/common/drag-handle.tsx

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { FunctionComponent, h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import { classes } from 'vscode-js-profile-core/out/esm/client/util';
+import { Constants } from '../common/constants';
+import { IBounds, IDrag, LockBound } from '../common/types';
+import styles from './common.css';
+
+const DragHandle: FunctionComponent<{
+  canvasWidth: number;
+  bounds: IBounds;
+  current: IDrag | undefined;
+  startDrag: (bounds: IDrag) => void;
+}> = ({ current, bounds, startDrag, canvasWidth }) => {
+  const start = useCallback(
+    (evt: MouseEvent, lock: LockBound, original: IBounds = bounds) => {
+      startDrag({
+        timestamp: Date.now(),
+        pageXOrigin: evt.pageX,
+        pageYOrigin: evt.pageY,
+        original,
+        xPerPixel: -1 / canvasWidth,
+        lock: lock | LockBound.Y,
+      });
+      evt.preventDefault();
+      evt.stopPropagation();
+    },
+    [canvasWidth, bounds],
+  );
+
+  const range = bounds.maxX - bounds.minX;
+  const lock = current?.lock ?? 0;
+
+  return (
+    <div
+      className={classes(styles.handle, current && styles.active)}
+      style={{ height: Constants.TimelineHeight }}
+    >
+      <div
+        className={classes(styles.bg, lock === LockBound.Y && styles.active)}
+        onMouseDown={useCallback((evt: MouseEvent) => start(evt, LockBound.Y), [start])}
+        style={{ transform: `scaleX(${range}) translateX(${(bounds.minX / range) * 100}%)` }}
+      />
+      <div
+        className={classes(styles.bookend, lock & LockBound.MaxX && styles.active)}
+        style={{ transform: `translateX(${bounds.minX * 100}%)` }}
+      >
+        <div
+          style={{ left: 0 }}
+          onMouseDown={useCallback((evt: MouseEvent) => start(evt, LockBound.MaxX), [start])}
+        />
+      </div>
+      <div
+        className={classes(styles.bookend, lock & LockBound.MinX && styles.active)}
+        style={{ transform: `translateX(${(bounds.maxX - 1) * 100}%)` }}
+      >
+        <div
+          style={{ right: 0 }}
+          onMouseDown={useCallback((evt: MouseEvent) => start(evt, LockBound.MinX), [start])}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DragHandle;

packages/vscode-js-profile-flame/src/client/common/get-boxIn-row-column.ts

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { IBox, IColumn } from './types';
+
+export default (
+  columns: ReadonlyArray<IColumn>,
+  boxes: ReadonlyMap<number, IBox>,
+  column: number,
+  row: number,
+) => {
+  let candidate = columns[column]?.rows[row];
+  if (typeof candidate === 'number') {
+    candidate = columns[candidate].rows[row];
+  }
+
+  return candidate !== undefined
+    ? boxes.get((candidate as { graphId: number }).graphId)
+    : undefined;
+};

packages/vscode-js-profile-flame/src/client/common/stack-list.tsx

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { Fragment, FunctionComponent, h } from 'preact';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks';
+import * as GoToFileIcon from 'vscode-codicons/src/icons/go-to-file.svg';
+import { Icon } from 'vscode-js-profile-core/out/esm/client/icons';
+import { IVscodeApi, VsCodeApi } from 'vscode-js-profile-core/out/esm/client/vscodeApi';
+import { getLocationText } from 'vscode-js-profile-core/out/esm/cpu/display';
+import { IOpenDocumentMessage } from 'vscode-js-profile-core/out/esm/cpu/types';
+import { Constants } from '../common/constants';
+import getBoxInRowColumn from '../common/get-boxIn-row-column';
+import styles from './common.css';
+import { IBox, IColumn } from './types';
+
+const StackList: FunctionComponent<{
+  box: IBox;
+  columns: ReadonlyArray<IColumn>;
+  boxes: ReadonlyMap<number, IBox>;
+  setFocused(box: IBox): void;
+}> = ({ columns, boxes, box, setFocused }) => {
+  const [limitedStack, setLimitedStack] = useState(true);
+
+  useEffect(() => setLimitedStack(true), [box]);
+
+  const stack = useMemo(() => {
+    const stack: IBox[] = [box];
+    for (let row = box.row - 1; row >= 0 && stack.length; row--) {
+      const b = getBoxInRowColumn(columns, boxes, box.column, row);
+      if (b) {
+        stack.push(b);
+      }
+    }
+
+    return stack;
+  }, [box, columns, boxes]);
+
+  const shouldTruncateStack = stack.length >= Constants.DefaultStackLimit + 3 && limitedStack;
+
+  return (
+    <ol start={0}>
+      {stack.map(
+        (b, i) =>
+          (!shouldTruncateStack || i < Constants.DefaultStackLimit) && (
+            <li key={i}>
+              <BoxLink box={b} onClick={setFocused} link={i > 0} />
+            </li>
+          ),
+      )}
+      {shouldTruncateStack && (
+        <li>
+          <a onClick={() => setLimitedStack(false)}>
+            <em>{stack.length - Constants.DefaultStackLimit} more...</em>
+          </a>
+        </li>
+      )}
+    </ol>
+  );
+};
+
+const BoxLink: FunctionComponent<{ box: IBox; onClick(box: IBox): void; link?: boolean }> = ({
+  box,
+  onClick,
+  link,
+}) => {
+  const vscode = useContext(VsCodeApi) as IVscodeApi;
+  const open = useCallback(
+    (evt: { altKey: boolean }) => {
+      const src = box.loc.src;
+      if (!src?.source.path) {
+        return;
+      }
+
+      vscode.postMessage<IOpenDocumentMessage>({
+        type: 'openDocument',
+        location: src,
+        callFrame: box.loc.callFrame,
+        toSide: evt.altKey,
+      });
+    },
+    [vscode, box],
+  );
+
+  const click = useCallback(() => onClick(box), [box, onClick]);
+  const locText = getLocationText(box.loc);
+  const linkContent = (
+    <Fragment>
+      {box.loc.callFrame.functionName} <em>({locText})</em>
+    </Fragment>
+  );
+
+  return (
+    <Fragment>
+      {link ? <a onClick={click}>{linkContent}</a> : linkContent}
+      {box.loc.src?.source.path && (
+        <Icon
+          i={GoToFileIcon}
+          className={styles.goToFile}
+          onClick={open}
+          role="button"
+          title="Go to File"
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export default StackList;