feat(devtools): use flamegraph in timeline and aggregated view

angular · Feb 24, 2020 · 86cb107 · 86cb107
1 parent b2a537a
commit 86cb107
Show file tree

Hide file tree

Showing 5 changed files with 701 additions and 723 deletions.
diff --git a/projects/ng-devtools-backend/src/lib/recording/index.ts b/projects/ng-devtools-backend/src/lib/recording/index.ts
@@ -13,11 +13,11 @@ export const start = (messageBus: MessageBus<Events>): void => {
     throw new Error('Recording already in progress');
   }
   inProgress = true;
-  observer = new ComponentTreeObserver(
-    (component: RecorderComponent) => {
-      addNewRecord(createRecord({ recorderComponent: component, eventType: ComponentEventType.Create }), messageBus);
+  observer = new ComponentTreeObserver({
+    onCreate(component: RecorderComponent) {
+      records.push(createRecord({ recorderComponent: component, eventType: ComponentEventType.Create }));
     },
-    (component: RecorderComponent, duration: number) => {
+    onChangeDetection(component: RecorderComponent, duration: number) {
       if (!inChangeDetection) {
         inChangeDetection = true;
         records.push(createRecord({ eventType: LifeCycleEventType.ChangeDetectionStart }));
@@ -33,10 +33,10 @@ export const start = (messageBus: MessageBus<Events>): void => {
         messageBus
       );
     },
-    (component: RecorderComponent) => {
-      addNewRecord(createRecord({ recorderComponent: component, eventType: ComponentEventType.Destroy }), messageBus);
-    }
-  );
+    onDestroy(component: RecorderComponent) {
+      records.push(createRecord({ recorderComponent: component, eventType: ComponentEventType.Destroy }));
+    },
+  });
   observer.initialize();
 };
 

diff --git a/projects/ng-devtools-backend/src/lib/recording/observer.ts b/projects/ng-devtools-backend/src/lib/recording/observer.ts
@@ -19,6 +19,12 @@ interface TreeNode {
 
 declare const ng: any;
 
+export interface Config {
+  onCreate: CreationCallback;
+  onDestroy: DestroyCallback;
+  onChangeDetection: ChangeDetectionCallback;
+}
+
 /**
  * This is a temporal "polyfill" until we receive more comprehensive framework
  * debugging APIs. This observer checks for new elements added. When it detects
@@ -37,18 +43,16 @@ export class ComponentTreeObserver {
   private _forest: TreeNode[] = [];
   private _componentTreeNode = new Map<any, TreeNode>();
 
-  constructor(
-    private _onCreation: CreationCallback,
-    private _onChangeDetection: ChangeDetectionCallback,
-    private _onDestroy: DestroyCallback
-  ) {}
+  constructor(private _config: Partial<Config>) {}
 
   initialize(): void {
     this._mutationObserver.observe(document, {
       subtree: true,
       childList: true,
     });
-    this._initializeChangeDetectionObserver();
+    if (this._config.onChangeDetection) {
+      this._initializeChangeDetectionObserver();
+    }
     this._indexTree();
     this._createOriginalTree();
   }
@@ -84,7 +88,9 @@ export class ComponentTreeObserver {
     if (component) {
       this._elementComponent.set(node, component);
 
-      this._observeComponent(component);
+      if (this._config.onChangeDetection) {
+        this._observeComponent(component);
+      }
 
       const parentComponent = getParentComponentFromDomNode(node);
       this._updateInsertionID(component, parentComponent);
@@ -102,11 +108,11 @@ export class ComponentTreeObserver {
 
   private _fireCreationCallback(component): void {
     const id = this._currentComponentID.get(component);
-    this._onCreation({ component, id });
+    this._config.onCreate({ component, id });
   }
 
   private _fireChangeDetectionCallback(component): void {
-    this._onChangeDetection(
+    this._config.onChangeDetection(
       {
         component,
         id: this._currentComponentID.get(component),
@@ -126,7 +132,7 @@ export class ComponentTreeObserver {
 
   private _fireDestroyCallback(component): void {
     const id = this._currentComponentID.get(component);
-    this._onDestroy({ component, id });
+    this._config.onDestroy({ component, id });
   }
 
   private _updateInsertionID(cmp: any, parent: any): void {
@@ -223,7 +229,7 @@ export class ComponentTreeObserver {
       const start = performance.now();
       original.apply(this, arguments);
       if (self._createdComponents.has(component)) {
-        self._onChangeDetection(
+        self._config.onChangeDetection(
           {
             component,
             id: self._currentComponentID.get(component),

diff --git a/...ls/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts b/...ls/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts
@@ -52,7 +52,7 @@ const processFlamegraphRecord = (record: ComponentRecord, result: AppEntry) => {
   };
 };
 
-export const formatRecords = (records: AppRecord[]): TimelineView => {
+export const formatRecords = <T>(records: AppRecord[]): TimelineView => {
   const result: TimelineView = {
     aggregated: {
       app: [],
@@ -84,3 +84,7 @@ export const formatRecords = (records: AppRecord[]): TimelineView => {
   }
   return result;
 };
+
+export const formatFlamegraphRecords = (records: AppRecord[]): TimelineView => {
+  return formatRecords(records);
+};
diff --git a/...rc/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts b/...rc/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts
@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
-import { AppEntry, formatRecords, TimelineView } from './format-records';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { AppEntry, FlamegraphNode, formatRecords, formatFlamegraphRecords, TimelineView } from './format-records';
 import { MatSlider, MatSliderChange } from '@angular/material/slider';
 import { AppRecord } from 'protocol';
 
@@ -11,7 +11,7 @@ import { AppRecord } from 'protocol';
 })
 export class TimelineComponent {
   @Input() set records(data: AppRecord[]) {
-    this.profileRecords = formatRecords(data);
+    this.profileRecords = formatFlamegraphRecords(data);
   }
 
   @Input() view: 'aggregated' | 'timeline' = 'aggregated';
@@ -27,6 +27,8 @@ export class TimelineComponent {
   };
   currentView = 1;
 
+  constructor(private _el: ElementRef) {}
+
   get recordsView(): AppEntry {
     if (this.view === 'timeline') {
       // null coalesce to aggregated if no data was recorded since aggregated will be empty, whereas