feat: heap src

Author: zjffun

packages/vscode-js-profile-core/src/common/display.ts

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { INode } from './model';
+
+/**
+ * Gets the human-readable label for the given node.
+ */
+export const getNodeText = (node: INode) => {
+  if (!node.callFrame.url) {
+    return; // 'virtual' frames like (program) or (idle)
+  }
+
+  if (!node.src?.source.path) {
+    let text = `${node.callFrame.url}`;
+    if (node.callFrame.lineNumber >= 0) {
+      text += `:${node.callFrame.lineNumber}`;
+    }
+
+    return text;
+  }
+
+  if (node.src.relativePath) {
+    return `${node.src.relativePath}:${node.src.lineNumber}`;
+  }
+
+  return `${node.src.source.path}:${node.src.lineNumber}`;
+};
+
+export const decimalFormat = new Intl.NumberFormat(undefined, {
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 2,
+});

packages/vscode-js-profile-core/src/common/model.ts

@@ -19,6 +19,7 @@ export interface INode {
   id: number;
   category: Category;
   callFrame: Cdp.Runtime.CallFrame;
+  src?: ISourceLocation;
 }
 
 export interface ICommonNode extends INode {

packages/vscode-js-profile-core/src/cpu/display.ts

@@ -2,32 +2,6 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { ILocation } from './model';
-
-/**
- * Gets the human-readable label for the given location.
- */
-export const getLocationText = (location: ILocation) => {
-  if (!location.callFrame.url) {
-    return; // 'virtual' frames like (program) or (idle)
-  }
-
-  if (!location.src?.source.path) {
-    let text = `${location.callFrame.url}`;
-    if (location.callFrame.lineNumber >= 0) {
-      text += `:${location.callFrame.lineNumber}`;
-    }
-
-    return text;
-  }
-
-  if (location.src.relativePath) {
-    return `${location.src.relativePath}:${location.src.lineNumber}`;
-  }
-
-  return `${location.src.source.path}:${location.src.lineNumber}`;
-};
-
 export const decimalFormat = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 2,
   minimumFractionDigits: 2,

packages/vscode-js-profile-core/src/cpu/model.ts

@@ -29,7 +29,6 @@ export interface ILocation extends INode {
   selfTime: number;
   aggregateTime: number;
   ticks: number;
-  src?: ISourceLocation;
 }
 
 export interface IGraphNode extends ILocation {

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

@@ -2,24 +2,6 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { ITreeNode } from './model';
-
-/**
- * Gets the human-readable label for the given node.
- */
-export const getNodeText = (node: ITreeNode) => {
-  if (!node.callFrame.url) {
-    return; // 'virtual' frames like (program) or (idle)
-  }
-
-  let text = `${node.callFrame.url}`;
-  if (node.callFrame.lineNumber >= 0) {
-    text += `:${node.callFrame.lineNumber}`;
-  }
-
-  return text;
-};
-
 export const decimalFormat = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 0,
   minimumFractionDigits: 0,

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

@@ -4,6 +4,8 @@
 
 import { Protocol as Cdp } from 'devtools-protocol';
 import { INode } from '../common/model';
+import { ISourceLocation } from '../location-mapping';
+import { maybeFileUrlToPath } from '../path';
 
 export interface IHeapProfileNode extends INode {
   selfSize: number;
@@ -30,17 +32,47 @@ export interface IHeapProfileRaw extends Cdp.HeapProfiler.SamplingHeapProfile {
   $vscode?: IJsDebugAnnotations;
 }
 
+export interface IProfileModelNode
+  extends Omit<Cdp.HeapProfiler.SamplingHeapProfileNode, 'children'> {
+  src?: ISourceLocation;
+  children: IProfileModelNode[];
+}
+
 /**
  * Data model for the profile.
  */
-export type IProfileModel = Cdp.HeapProfiler.SamplingHeapProfile & {
+export type IProfileModel = {
+  head: IProfileModelNode;
+  samples: Cdp.HeapProfiler.SamplingHeapProfileSample[];
   rootPath?: string;
 };
 
 /**
  * Computes the model for the given profile.
  */
 export const buildModel = (profile: IHeapProfileRaw): IProfileModel => {
+  let nodes = [profile.head];
+
+  while (nodes.length) {
+    const node = nodes.pop();
+
+    if (node) {
+      const { callFrame } = node;
+      (node as unknown as IHeapProfileNode).src = {
+        lineNumber: callFrame.lineNumber,
+        columnNumber: callFrame.columnNumber,
+        source: {
+          name: maybeFileUrlToPath(callFrame.url),
+          path: maybeFileUrlToPath(callFrame.url),
+          sourceReference: 0,
+        },
+      };
+      if (node.children) {
+        nodes = nodes.concat(node.children);
+      }
+    }
+  }
+
   return {
     head: profile.head,
     samples: profile.samples,

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

@@ -2,9 +2,8 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { Protocol as Cdp } from 'devtools-protocol';
 import { categorize, Category } from '../common/model';
-import { IProfileModel, ITreeNode } from './model';
+import { IProfileModel, IProfileModelNode, ITreeNode } from './model';
 
 export class TreeNode implements ITreeNode {
   public static root() {
@@ -22,7 +21,7 @@ export class TreeNode implements ITreeNode {
     });
   }
 
-  public children: { [id: number]: ITreeNode } = {};
+  public children: { [id: number]: TreeNode } = {};
   public totalSize = 0;
   public selfSize = 0;
   public childrenSize = 0;
@@ -36,10 +35,11 @@ export class TreeNode implements ITreeNode {
     return this.node.callFrame;
   }
 
-  constructor(
-    public readonly node: Cdp.HeapProfiler.SamplingHeapProfileNode,
-    public readonly parent?: TreeNode,
-  ) {
+  public get src() {
+    return this.node.src;
+  }
+
+  constructor(public readonly node: IProfileModelNode, public readonly parent?: TreeNode) {
     this.category = categorize(node.callFrame, undefined);
   }
 
@@ -52,11 +52,12 @@ export class TreeNode implements ITreeNode {
       totalSize: this.totalSize,
       id: this.id,
       callFrame: this.callFrame,
+      src: this.src,
     };
   }
 }
 
-const processNode = (node: Cdp.HeapProfiler.SamplingHeapProfileNode, parent: TreeNode) => {
+const processNode = (node: IProfileModelNode, parent: TreeNode) => {
   const treeNode = new TreeNode(node, parent);
 
   node.children.forEach(child => {

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

@@ -7,8 +7,8 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/ho
 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 { getNodeText } from 'vscode-js-profile-core/out/esm/common/display';
 import { IOpenDocumentMessage } from 'vscode-js-profile-core/out/esm/common/types';
-import { getLocationText } from 'vscode-js-profile-core/out/esm/cpu/display';
 import { Constants } from '../common/constants';
 import getBoxInRowColumn from '../common/get-boxIn-row-column';
 import styles from './common.css';
@@ -83,7 +83,7 @@ const BoxLink: FunctionComponent<{ box: IBox; onClick(box: IBox): void; link?: b
   );
 
   const click = useCallback(() => onClick(box), [box, onClick]);
-  const locText = getLocationText(box.loc);
+  const locText = getNodeText(box.loc);
   const linkContent = (
     <Fragment>
       {box.loc.callFrame.functionName} <em>({locText})</em>

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

@@ -2,7 +2,8 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { Category } from 'vscode-js-profile-core/out/esm/common/model';
+import { ILocation } from 'vscode-js-profile-core/out/esm/cpu/model';
+import { IHeapProfileNode } from 'vscode-js-profile-core/out/esm/heap/model';
 
 export interface IBox {
   column: number;
@@ -14,8 +15,8 @@ export interface IBox {
   color: number;
   level: number;
   text: string;
-  loc: any;
-  category: any;
+  category: number;
+  loc: IColumnRow;
 }
 
 export interface IBounds {
@@ -30,13 +31,9 @@ export interface ICanvasSize {
   height: number;
 }
 
-export interface IColumnRow {
+export type IColumnRow = (ILocation | IHeapProfileNode) & {
   graphId: number; //. unique ID of the location in the graph
-  category: Category;
-  callFrame?: any;
-  id: number;
-  [key: string]: any;
-}
+};
 
 export interface IColumn {
   x1: number;

packages/vscode-js-profile-flame/src/client/cpu/client.tsx

@@ -13,8 +13,9 @@ import { cpuProfileLayoutFactory } from 'vscode-js-profile-core/out/esm/cpu/layo
 import { IProfileModel } from 'vscode-js-profile-core/out/esm/cpu/model';
 import { IQueryResults, PropertyType } from 'vscode-js-profile-core/out/esm/ql';
 import styles from '../common/client.css';
+import { IColumn } from '../common/types';
 import { FlameGraph } from './flame-graph';
-import { buildColumns, buildLeftHeavyColumns, IColumn, LocationAccessor } from './stacks';
+import { buildColumns, buildLeftHeavyColumns, LocationAccessor } from './stacks';
 
 declare const MODEL: IProfileModel;
 

packages/vscode-js-profile-flame/src/client/cpu/flame-graph.tsx

@@ -5,29 +5,15 @@
 import { Fragment, FunctionComponent, h } from 'preact';
 import { MiddleOut } from 'vscode-js-profile-core/out/esm/client/middleOutCompression';
 import { classes } from 'vscode-js-profile-core/out/esm/client/util';
-import { decimalFormat, getLocationText } from 'vscode-js-profile-core/out/esm/cpu/display';
+import { getNodeText } from 'vscode-js-profile-core/out/esm/common/display';
+import { decimalFormat } from 'vscode-js-profile-core/out/esm/cpu/display';
 import { ILocation, IProfileModel } from 'vscode-js-profile-core/out/esm/cpu/model';
 import { Constants } from '../common/constants';
 import DragHandle from '../common/drag-handle';
 import styles from '../common/flame-graph.css';
 import StackList from '../common/stack-list';
-import { HighlightSource } from '../common/types';
+import { HighlightSource, IBox, IColumn } from '../common/types';
 import useFlame from '../common/use-flame';
-import { IColumn, IColumnLocation } from './stacks';
-
-export interface IBox {
-  column: number;
-  row: number;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  color: number;
-  level: number;
-  text: string;
-  category: number;
-  loc: IColumnLocation;
-}
 
 const clamp = (min: number, v: number, max: number) => Math.max(Math.min(v, max), min);
 
@@ -103,7 +89,7 @@ export const FlameGraph: FunctionComponent<{
           upperY={canvasSize.height - hovered.box.y1 + bounds.y}
           lowerY={hovered.box.y2 - bounds.y}
           src={hovered.src}
-          location={hovered.box.loc}
+          location={hovered.box.loc as ILocation}
         />
       )}
       {focused && showInfo && (
@@ -128,7 +114,7 @@ const Tooltip: FunctionComponent<{
   location: ILocation;
   src: HighlightSource;
 }> = ({ left, lowerY, upperY, src, location, canvasWidth, canvasHeight }) => {
-  const label = getLocationText(location);
+  const label = getNodeText(location);
   const above = lowerY + 300 > canvasHeight && lowerY > canvasHeight / 2;
 
   const file = label?.split(/\\|\//g).pop();
@@ -183,9 +169,9 @@ const InfoBox: FunctionComponent<{
     <div className={styles.info}>
       <dl>
         <dt>Self Time</dt>
-        <dd>{decimalFormat.format(localLocation.selfTime / 1000)}ms</dd>
+        <dd>{decimalFormat.format((localLocation as ILocation).selfTime / 1000)}ms</dd>
         <dt>Total Time</dt>
-        <dd>{decimalFormat.format(localLocation.aggregateTime / 1000)}ms</dd>
+        <dd>{decimalFormat.format((localLocation as ILocation).aggregateTime / 1000)}ms</dd>
         <dt>
           Self Time<small>Entire Profile</small>
         </dt>