Merge branch 'feat/heap' of https://github.com/zjffun/vscode-js-profile-visualizer into zjffun-feat/heap

Author: connor4312

package-lock.json

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------
+ * 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}`;
+};

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

@@ -0,0 +1,45 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { Protocol as Cdp } from 'devtools-protocol';
+import { ISourceLocation } from '../location-mapping';
+
+/**
+ * Category of call frames. Grouped into system, modules, and user code.
+ */
+export const enum Category {
+  System,
+  User,
+  Module,
+  Deemphasized,
+}
+
+export interface INode {
+  id: number;
+  category: Category;
+  callFrame: Cdp.Runtime.CallFrame;
+  src?: ISourceLocation;
+}
+
+export interface ICommonNode extends INode {
+  children: { [id: number]: ICommonNode };
+  childrenSize: number;
+  parent?: ICommonNode;
+}
+
+/**
+ * Categorizes the given call frame.
+ */
+export const categorize = (callFrame: Cdp.Runtime.CallFrame, src: ISourceLocation | undefined) => {
+  callFrame.functionName = callFrame.functionName || '(anonymous)';
+  if (callFrame.lineNumber < 0) {
+    return Category.System;
+  }
+
+  if (callFrame.url.includes('node_modules') || !src) {
+    return Category.Module;
+  }
+
+  return Category.User;
+};

packages/vscode-js-profile-core/src/cpu/layout.css renamed to packages/vscode-js-profile-core/src/common/layout.css

@@ -0,0 +1,56 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { Protocol as Cdp } from 'devtools-protocol';
+import { ISourceLocation } from '../location-mapping';
+
+export interface IAnnotationLocation {
+  callFrame: Cdp.Runtime.CallFrame;
+  locations: ISourceLocation[];
+}
+
+/**
+ * Extra annotations added by js-debug.
+ */
+export interface IJsDebugAnnotations {
+  /**
+   * Workspace root path, if set.
+   */
+  rootPath?: string;
+
+  /**
+   * For each node in the profile, the list of locations in corresponds to
+   * in the workspace (if any).
+   */
+  locations: ReadonlyArray<IAnnotationLocation>;
+
+  /**
+   * Optional cell data saved from previously opening the profile as a notebook.
+   */
+  cellData?: {
+    version: number;
+  };
+}
+
+/**
+ * Request from the webview to open a document
+ */
+export interface IOpenDocumentMessage {
+  type: 'openDocument';
+  location?: ISourceLocation;
+  callFrame?: Cdp.Runtime.CallFrame;
+  toSide: boolean;
+}
+
+/**
+ * Reopens the current document with the given editor, optionally only if
+ * the given extension is installed.
+ */
+export interface IReopenWithEditor {
+  type: 'reopenWith';
+  viewType: string;
+  requireExtension?: string;
+}
+
+export type Message = IOpenDocumentMessage | IReopenWithEditor;

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

@@ -2,7 +2,8 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { ILocation, IProfileModel, IComputedNode, IGraphNode, Category } from './model';
+import { Category } from '../common/model';
+import { IComputedNode, IGraphNode, ILocation, IProfileModel } from './model';
 
 export class BottomUpNode implements IGraphNode {
   public static root() {

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

@@ -0,0 +1,89 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { CodeLens, Position, Range } from 'vscode';
+import { ILocation } from '../cpu/model';
+import { lowerCaseInsensitivePath } from '../path';
+import { ProfileAnnotations } from '../profileAnnotations';
+import { decimalFormat } from './display';
+
+export interface IProfileInformation {
+  selfTime: number;
+  aggregateTime: number;
+  ticks: number;
+}
+
+/**
+ * A collection of profile data. Paths are expanded lazily, as doing so
+ * up-front for very large profiles turned out to be costly (mainly in path)
+ * manipulation.
+ */
+export class CpuProfileAnnotations extends ProfileAnnotations<IProfileInformation, ILocation> {
+  /**
+   * Adds a new code lens at the given location in the file.
+   */
+  protected set(file: string, position: Position, data: ILocation) {
+    let list = this.data.get(lowerCaseInsensitivePath(file));
+    if (!list) {
+      list = [];
+      this.data.set(lowerCaseInsensitivePath(file), list);
+    }
+
+    let index = 0;
+    while (index < list.length && list[index].position.line < position.line) {
+      index++;
+    }
+
+    if (list[index]?.position.line === position.line) {
+      const existing = list[index];
+      if (position.character < existing.position.character) {
+        existing.position = new Position(position.line, position.character);
+      }
+      existing.data.aggregateTime += data.aggregateTime;
+      existing.data.selfTime += data.selfTime;
+      existing.data.ticks += data.ticks;
+    } else {
+      list.splice(index, 0, {
+        position: new Position(position.line, position.character),
+        data: {
+          aggregateTime: data.aggregateTime,
+          selfTime: data.selfTime,
+          ticks: data.ticks,
+        },
+      });
+    }
+  }
+
+  /**
+   * Get all lenses for a file. Ordered by line number.
+   */
+  public getLensesForFile(file: string): CodeLens[] {
+    this.expandForFile(file);
+
+    return (
+      this.data
+        .get(lowerCaseInsensitivePath(file))
+        ?.map(({ position, data }) => {
+          if (data.aggregateTime === 0 && data.selfTime === 0) {
+            return [];
+          }
+
+          const range = new Range(position, position);
+          return [
+            new CodeLens(range, {
+              title:
+                `${decimalFormat.format(data.selfTime / 1000)}ms Self Time, ` +
+                `${decimalFormat.format(data.aggregateTime / 1000)}ms Total`,
+              command: '',
+            }),
+            new CodeLens(range, {
+              title: 'Clear',
+              command: 'extension.jsProfileVisualizer.table.clearCodeLenses',
+            }),
+          ];
+        })
+        .reduce((acc, lenses) => [...acc, ...lenses], []) ?? []
+    );
+  }
+}

packages/vscode-js-profile-core/src/cpu/bottomUpGraph.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/cpuProfileAnnotations.ts

@@ -4,16 +4,18 @@
 
 import * as vscode from 'vscode';
 import { bundlePage } from '../bundlePage';
+import { Message } from '../common/types';
 import { openLocation } from '../open-location';
-import { ProfileAnnotations } from '../profileAnnotations';
 import { ProfileCodeLensProvider } from '../profileCodeLensProvider';
 import { ReadonlyCustomDocument } from '../readonly-custom-document';
 import { reopenWithEditor } from '../reopenWithEditor';
+import { CpuProfileAnnotations } from './cpuProfileAnnotations';
 import { buildModel, IProfileModel } from './model';
-import { ICpuProfileRaw, Message } from './types';
+import { ICpuProfileRaw } from './types';
 
 export class CpuProfileEditorProvider
-  implements vscode.CustomEditorProvider<ReadonlyCustomDocument<IProfileModel>> {
+  implements vscode.CustomEditorProvider<ReadonlyCustomDocument<IProfileModel>>
+{
   public readonly onDidChangeCustomDocument = new vscode.EventEmitter<never>().event;
 
   constructor(
@@ -30,7 +32,7 @@ export class CpuProfileEditorProvider
     const raw: ICpuProfileRaw = JSON.parse(new TextDecoder().decode(content));
     const document = new ReadonlyCustomDocument(uri, buildModel(raw));
 
-    const annotations = new ProfileAnnotations();
+    const annotations = new CpuProfileAnnotations();
     const rootPath = document.userData.rootPath;
     for (const location of document.userData.locations) {
       annotations.add(rootPath, location);

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

@@ -4,8 +4,8 @@
 import { ComponentType, Fragment, FunctionComponent, h } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 import { richFilter, RichFilterComponent } from '../client/rich-filter';
+import styles from '../common/layout.css';
 import { IDataSource, IQueryResults } from '../ql';
-import styles from './layout.css';
 
 export interface IBodyProps<T> {
   data: IQueryResults<T>;
@@ -14,32 +14,44 @@ export interface IBodyProps<T> {
 type CpuProfileLayoutComponent<T> = FunctionComponent<{
   data: IDataSource<T>;
   body: ComponentType<IBodyProps<T>>;
-  filterFooter?: ComponentType<{}>;
+  filterFooter?: ComponentType<{ viewType: string; requireExtension: string }>;
 }>;
 
 /**
  * Base layout component to display CPU-profile related info.
  */
-export const cpuProfileLayoutFactory = <T extends {}>(): CpuProfileLayoutComponent<T> => ({
-  data,
-  body: RowBody,
-  filterFooter: FilterFooter,
-}) => {
-  const RichFilter = useMemo<RichFilterComponent<T>>(richFilter, []);
-  const [filteredData, setFilteredData] = useState<IQueryResults<T> | undefined>(undefined);
-  const footer = useMemo(() => (FilterFooter ? <FilterFooter /> : undefined), [FilterFooter]);
+export const cpuProfileLayoutFactory = <T extends {}>(): CpuProfileLayoutComponent<T> => {
+  const CpuProfileLayout: CpuProfileLayoutComponent<T> = ({
+    data,
+    body: RowBody,
+    filterFooter: FilterFooter,
+  }) => {
+    const RichFilter = useMemo<RichFilterComponent<T>>(richFilter, []);
+    const [filteredData, setFilteredData] = useState<IQueryResults<T> | undefined>(undefined);
+    const footer = useMemo(
+      () =>
+        FilterFooter ? (
+          <FilterFooter
+            viewType="jsProfileVisualizer.cpuprofile.flame"
+            requireExtension="ms-vscode.vscode-js-profile-flame"
+          />
+        ) : undefined,
+      [FilterFooter],
+    );
 
-  return (
-    <Fragment>
-      <div className={styles.filter}>
-        <RichFilter
-          data={data}
-          onChange={setFilteredData}
-          placeholder="Filter functions or files, or start a query()"
-          foot={footer}
-        />
-      </div>
-      <div className={styles.rows}>{filteredData && <RowBody data={filteredData} />}</div>
-    </Fragment>
-  );
+    return (
+      <Fragment>
+        <div className={styles.filter}>
+          <RichFilter
+            data={data}
+            onChange={setFilteredData}
+            placeholder="Filter functions or files, or start a query()"
+            foot={footer}
+          />
+        </div>
+        <div className={styles.rows}>{filteredData && <RowBody data={filteredData} />}</div>
+      </Fragment>
+    );
+  };
+  return CpuProfileLayout;
 };