refactor: table and flame

Author: zjffun

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

@@ -21,10 +21,10 @@ export interface INode {
   callFrame: Cdp.Runtime.CallFrame;
 }
 
-export interface IGraphNode extends INode {
-  children: { [id: number]: IGraphNode };
+export interface ICommonNode extends INode {
+  children: { [id: number]: ICommonNode };
   childrenSize: number;
-  parent?: IGraphNode;
+  parent?: ICommonNode;
 }
 
 /**

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

@@ -9,8 +9,7 @@ import { openLocation } from '../open-location';
 import { ProfileCodeLensProvider } from '../profileCodeLensProvider';
 import { ReadonlyCustomDocument } from '../readonly-custom-document';
 import { reopenWithEditor } from '../reopenWithEditor';
-import { buildModel, IProfileModel } from './model';
-import { IHeapProfileRaw } from './types';
+import { buildModel, IHeapProfileRaw, IProfileModel } from './model';
 
 export class HeapProfileEditorProvider
   implements vscode.CustomEditorProvider<ReadonlyCustomDocument<IProfileModel>>
@@ -34,8 +33,8 @@ export class HeapProfileEditorProvider
     // TODO: annotations
     // const annotations = new ProfileAnnotations();
     // const rootPath = document.userData.rootPath;
-    // for (const location of document.userData.locations) {
-    //   annotations.add(rootPath, location);
+    // for (const treeNode of document.userData.treeNodes) {
+    //   annotations.add(rootPath, treeNode);
     // }
 
     // this.lens.registerLenses(annotations);

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

@@ -4,7 +4,6 @@
 
 import { Protocol as Cdp } from 'devtools-protocol';
 import { INode } from '../common/model';
-import { IHeapProfileRaw } from './types';
 
 export interface IHeapProfileNode extends INode {
   selfSize: number;
@@ -17,18 +16,34 @@ export interface ITreeNode extends IHeapProfileNode {
   parent?: ITreeNode;
 }
 
+/**
+ * Extra annotations added by js-debug.
+ */
+export interface IJsDebugAnnotations {
+  /**
+   * Workspace root path, if set.
+   */
+  rootPath?: string;
+}
+
+export interface IHeapProfileRaw extends Cdp.HeapProfiler.SamplingHeapProfile {
+  $vscode?: IJsDebugAnnotations;
+}
+
 /**
  * Data model for the profile.
  */
-export type IProfileModel = Cdp.HeapProfiler.SamplingHeapProfile;
+export type IProfileModel = Cdp.HeapProfiler.SamplingHeapProfile & {
+  rootPath?: string;
+};
 
 /**
  * Computes the model for the given profile.
  */
 export const buildModel = (profile: IHeapProfileRaw): IProfileModel => {
-  return profile;
-  // return {
-  //   head: profile.head,
-  //   rootPath: profile.$vscode?.rootPath,
-  // };
+  return {
+    head: profile.head,
+    samples: profile.samples,
+    rootPath: profile.$vscode?.rootPath,
+  };
 };

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

@@ -12,7 +12,7 @@ import { IReopenWithEditor } from 'vscode-js-profile-core/out/esm/common/types';
 import { cpuProfileLayoutFactory } from 'vscode-js-profile-core/out/esm/cpu/layout';
 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 './client.css';
+import styles from '../common/client.css';
 import { FlameGraph } from './flame-graph';
 import { buildColumns, buildLeftHeavyColumns, IColumn, LocationAccessor } from './stacks';
 

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

@@ -9,10 +9,10 @@ import { decimalFormat, getLocationText } from 'vscode-js-profile-core/out/esm/c
 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 useFlame from '../common/use-flame';
-import styles from './flame-graph.css';
 import { IColumn, IColumnLocation } from './stacks';
 
 export interface IBox {

packages/vscode-js-profile-flame/src/client/cpu/flame-graph.css renamed to packages/vscode-js-profile-flame/src/client/common/flame-graph.css

@@ -9,13 +9,13 @@ import { ToggleButton } from 'vscode-js-profile-core/out/esm/client/toggle-butto
 import { usePersistedState } from 'vscode-js-profile-core/out/esm/client/usePersistedState';
 import { VsCodeApi } from 'vscode-js-profile-core/out/esm/client/vscodeApi';
 import { IReopenWithEditor } from 'vscode-js-profile-core/out/esm/common/types';
-import { cpuProfileLayoutFactory } from 'vscode-js-profile-core/out/esm/cpu/layout';
+import { heapProfileLayoutFactory } from 'vscode-js-profile-core/out/esm/heap/layout';
 import { IProfileModel } from 'vscode-js-profile-core/out/esm/heap/model';
 import { IQueryResults, PropertyType } from 'vscode-js-profile-core/out/esm/ql';
+import styles from '../common/client.css';
 import { IColumn } from '../common/types';
-import styles from './client.css';
 import { FlameGraph } from './flame-graph';
-import { buildColumns, buildLeftHeavyColumns, LocationAccessor } from './stacks';
+import { buildColumns, buildLeftHeavyColumns, TreeNodeAccessor } from './stacks';
 
 declare const MODEL: IProfileModel;
 
@@ -43,7 +43,7 @@ const CloseButton: FunctionComponent = () => {
     () =>
       vscode.postMessage<IReopenWithEditor>({
         type: 'reopenWith',
-        viewType: 'jsProfileVisualizer.cpuprofile.table',
+        viewType: 'jsProfileVisualizer.heapprofile.table',
         requireExtension: 'ms-vscode.vscode-js-profile-table',
       }),
     [vscode],
@@ -54,7 +54,7 @@ const CloseButton: FunctionComponent = () => {
   );
 };
 
-const CpuProfileLayout = cpuProfileLayoutFactory<LocationAccessor>();
+const HeapProfileLayout = heapProfileLayoutFactory<TreeNodeAccessor>();
 
 const Root: FunctionComponent = () => {
   const [leftHeavy, setLeftHeavy] = usePersistedState('leftHeavy', false);
@@ -77,11 +77,11 @@ const Root: FunctionComponent = () => {
   const cols = leftHeavy ? getLeftHeavyCols() : getTimelineCols();
 
   const FlameGraphWrapper: FunctionComponent<{
-    data: IQueryResults<LocationAccessor>;
+    data: IQueryResults<TreeNodeAccessor>;
   }> = useCallback(
     ({ data }) => {
       const filtered = useMemo(
-        () => LocationAccessor.getFilteredColumns(cols, data.selectedAndParents),
+        () => TreeNodeAccessor.getFilteredColumns(cols, data.selectedAndParents),
         [data],
       );
       return <FlameGraph model={MODEL} columns={cols} filtered={filtered} />;
@@ -90,9 +90,9 @@ const Root: FunctionComponent = () => {
   );
 
   return (
-    <CpuProfileLayout
+    <HeapProfileLayout
       data={{
-        data: LocationAccessor.rootAccessors(cols),
+        data: TreeNodeAccessor.rootAccessors(cols),
         getChildren: n => n.children,
         genericMatchStr: n => [n.callFrame.functionName, n.callFrame.url].join(' '),
         properties: {