diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records-test-constants.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records-test-constants.ts new file mode 100644 index 00000000000..f2b10b491d5 --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records-test-constants.ts @@ -0,0 +1,1175 @@ +export const SIMPLE_RECORD = [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 5, + }, + { + changeDetection: 5, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, +]; +export const SIMPLE_FORMATTED_RECORD = [ + { + value: 7, + label: '[NgForOf]', + children: [ + { + value: 10, + label: 'TodoComponent[TooltipDirective]', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 5, + }, + { + changeDetection: 5, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + }, + ], + instances: 1, + original: SIMPLE_RECORD[0], + }, +]; +export const NESTED_RECORD = [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + ], + directives: [ + { isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }, + ], + }, + { + children: [], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'HeavyComponent', + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'DemoAppComponent', + }, + ], + }, + ], + directives: [{ isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + { + children: [], + directives: [ + { + changeDetection: 1, + isElement: true, + isComponent: true, + lifecycle: {}, + name: 'ZippyComponent', + }, + ], + }, +]; +export const NESTED_FORMATTED_RECORD = [ + { + value: 1, + label: 'AppComponent', + children: [ + { + value: 0, + label: '[RouterOutlet]', + children: [ + { + value: 1, + label: 'DemoAppComponent', + children: [ + { + value: 0, + label: '[RouterOutlet]', + children: [ + { + value: 1, + label: 'AppComponent', + children: [ + { + value: 0, + label: '[RouterOutlet]', + children: [ + { + value: 9, + label: 'TodosComponent', + children: [ + { + value: 7, + label: '[NgForOf]', + children: [ + { + value: 0, + label: 'TodoComponent[TooltipDirective]', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + }, + { + value: 0, + label: 'TodoComponent[TooltipDirective]', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + }, + { + value: 0, + label: 'TodoComponent[TooltipDirective]', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + ], + directives: [ + { isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }, + ], + }, + }, + { + value: 1, + label: 'HeavyComponent', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'HeavyComponent', + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + ], + directives: [ + { isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }, + ], + }, + { + children: [], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'HeavyComponent', + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'DemoAppComponent', + }, + ], + }, + }, + ], + instances: 1, + original: { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [ + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'TooltipDirective', + lifecycle: {}, + changeDetection: 0, + }, + { + changeDetection: 0, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodoComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 7 }, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 9, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'TodosComponent', + }, + ], + }, + ], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }, + ], + directives: [ + { isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }, + ], + }, + { + children: [], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'HeavyComponent', + }, + ], + }, + ], + directives: [ + { + changeDetection: 1, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'DemoAppComponent', + }, + ], + }, + ], + directives: [ + { isComponent: false, isElement: false, name: 'RouterOutlet', lifecycle: {}, changeDetection: 0 }, + ], + }, + }, + ], + instances: 1, + original: NESTED_RECORD[0], + }, + { + value: 1, + label: 'ZippyComponent', + children: [], + instances: 1, + original: { + children: [], + directives: [ + { + changeDetection: 1, + isElement: true, + isComponent: true, + lifecycle: {}, + name: 'ZippyComponent', + }, + ], + }, + }, +]; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.spec.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.spec.ts new file mode 100644 index 00000000000..aed56f24721 --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.spec.ts @@ -0,0 +1,140 @@ +import { addFrame, AppEntry, getLabel, getValue, insertTimelineRecord, TimelineView } from './format-records'; +import { ElementProfile } from 'protocol'; +import { + NESTED_FORMATTED_RECORD, + NESTED_RECORD, + SIMPLE_FORMATTED_RECORD, + SIMPLE_RECORD, +} from './format-records-test-constants'; + +describe('getValue cases', () => { + let element; + + it('calculates value with no lifecycle hooks', () => { + element = { + children: [], + directives: [{ changeDetection: 10, isElement: false, isComponent: true, lifecycle: {}, name: 'AppComponent' }], + }; + expect(getValue(element)).toBe(10); + }); + + it('calculates value with 0 change detection and existing lifecycle hooks', () => { + element = { + children: [], + directives: [ + { isComponent: false, isElement: false, name: 'NgForOf', lifecycle: { ngDoCheck: 5 }, changeDetection: 0 }, + ], + }; + expect(getValue(element)).toBe(5); + }); + + it('calculates value with non 0 change detection and one lifecycle hook', () => { + element = { + children: [], + directives: [ + { isComponent: false, isElement: false, name: 'NgForOf', lifecycle: { ngDoCheck: 5 }, changeDetection: 10 }, + ], + }; + expect(getValue(element)).toBe(15); + }); + + it('calculates value with non 0 change detection and multiple lifecycle hooks', () => { + element = { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'NgForOf', + lifecycle: { ngDoCheck: 5, ngAfterViewInit: 100 }, + changeDetection: 10, + }, + ], + }; + expect(getValue(element)).toBe(115); + }); +}); + +describe('getLabel cases', () => { + let element: ElementProfile; + + it('has only components', () => { + element = { + children: [], + directives: [ + { + changeDetection: 10, + isElement: false, + isComponent: true, + lifecycle: {}, + name: 'AppComponent', + }, + ], + }; + expect(getLabel(element)).toBe('AppComponent'); + }); + + it('has only directives', () => { + element = { + children: [], + directives: [ + { + isComponent: false, + isElement: false, + name: 'RouterOutlet', + lifecycle: {}, + changeDetection: 0, + }, + ], + }; + expect(getLabel(element)).toBe('[RouterOutlet]'); + }); + + it('has a component and a directive', () => { + element = { + children: [], + directives: [ + { isComponent: false, isElement: false, name: 'TooltipDirective', lifecycle: {}, changeDetection: 0 }, + { changeDetection: 0, isElement: false, isComponent: true, lifecycle: {}, name: 'TodoComponent' }, + ], + }; + expect(getLabel(element)).toBe('TodoComponent[TooltipDirective]'); + }); + + it('has a component and multiple directives', () => { + element = { + children: [], + directives: [ + { isComponent: false, isElement: false, name: 'TooltipDirective', lifecycle: {}, changeDetection: 0 }, + { isComponent: false, isElement: false, name: 'RandomDirective', lifecycle: {}, changeDetection: 0 }, + { changeDetection: 0, isElement: false, isComponent: true, lifecycle: {}, name: 'TodoComponent' }, + ], + }; + expect(getLabel(element)).toBe('TodoComponent[TooltipDirective, RandomDirective]'); + }); +}); + +describe('addFrame cases', () => { + let entry: AppEntry; + let timeSpent; + + beforeEach(() => { + entry = { + app: [], + timeSpent: 0, + source: '', + }; + }); + + it('add frame for simple case', () => { + timeSpent = addFrame(entry.app, SIMPLE_RECORD); + expect(timeSpent).toBe(17); + expect(entry.app).toEqual(SIMPLE_FORMATTED_RECORD); + }); + + it('add frame for deeply nested records', () => { + timeSpent = addFrame(entry.app, NESTED_RECORD); + expect(timeSpent).toBe(21); + expect(entry.app).toEqual(NESTED_FORMATTED_RECORD); + }); +}); diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.ts similarity index 86% rename from projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts rename to projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.ts index 0c87aafaf32..b328915f3a3 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/format-records.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/record-formatter/format-records.ts @@ -18,7 +18,7 @@ export interface FlamegraphNode { original: ElementProfile; } -const getLabel = (element: ElementProfile) => { +export const getLabel = (element: ElementProfile) => { const name = element.directives .filter(d => d.isComponent) .map(c => c.name) @@ -27,7 +27,7 @@ const getLabel = (element: ElementProfile) => { return attributes === '' ? name : `${name}[${attributes}]`; }; -const getValue = (element: ElementProfile, e: any) => { +export const getValue = (element: ElementProfile) => { let result = 0; element.directives.forEach(dir => { result += dir.changeDetection; @@ -41,7 +41,7 @@ const getValue = (element: ElementProfile, e: any) => { return result; }; -const addFrame = (nodes: FlamegraphNode[], elements: ElementProfile[]): number => { +export const addFrame = (nodes: FlamegraphNode[], elements: ElementProfile[]): number => { let timeSpent = 0; elements.forEach(element => { // Possibly undefined because of @@ -51,7 +51,7 @@ const addFrame = (nodes: FlamegraphNode[], elements: ElementProfile[]): number = return; } const node: FlamegraphNode = { - value: getValue(element, elements), + value: getValue(element), label: getLabel(element), children: [], instances: 1, @@ -64,7 +64,7 @@ const addFrame = (nodes: FlamegraphNode[], elements: ElementProfile[]): number = return timeSpent; }; -const insertTimelineRecord = (result: AppEntry[], record: ProfilerFrame) => { +export const insertTimelineRecord = (result: AppEntry[], record: ProfilerFrame) => { const entry: AppEntry = { app: [], timeSpent: 0, diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/recording-visualizer/flamegraph-visualizer/flamegraph-visualizer.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/recording-visualizer/flamegraph-visualizer/flamegraph-visualizer.component.ts index f3c82bc9f0e..8982c1b3b80 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/recording-visualizer/flamegraph-visualizer/flamegraph-visualizer.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/recording-visualizer/flamegraph-visualizer/flamegraph-visualizer.component.ts @@ -1,5 +1,5 @@ import { Component, ElementRef, Input } from '@angular/core'; -import { FlamegraphNode } from '../../format-records'; +import { FlamegraphNode } from '../../record-formatter/format-records'; import { RawData } from 'ngx-flamegraph/lib/utils'; @Component({ diff --git a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts index 78027ae94ac..1e17e60e990 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/profiler/recording/timeline/timeline.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; -import { AppEntry, formatFlamegraphRecords, TimelineView } from './format-records'; +import { AppEntry, formatFlamegraphRecords, TimelineView } from './record-formatter/format-records'; import { MatSlider, MatSliderChange } from '@angular/material/slider'; import { ProfilerFrame } from 'protocol';