From 1320c8d36f70fa451f1c13dffb25a8f41cdf407f Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Mon, 30 Mar 2020 15:17:59 -0400 Subject: [PATCH] refactor(devtools): rename tree graph to tree map --- .../record-formatter-spec-constants.ts | 2 +- .../tree-map-formatter/index.ts | 1 + .../tree-map-formatter.spec.ts} | 10 +++++----- .../tree-map-formatter.ts} | 16 ++++++++-------- .../webtreegraph-formatter/index.ts | 1 - .../recording-visualizer.module.ts | 4 ++-- .../timeline-visualizer.component.html | 4 ++-- .../timeline-visualizer.component.ts | 4 ++-- .../tree-map-visualizer.component.html} | 0 .../tree-map-visualizer.component.scss} | 0 .../tree-map-visualizer.component.ts} | 18 +++++++++--------- .../recording/timeline/timeline.component.html | 2 +- .../recording/timeline/timeline.component.ts | 18 +++++++++--------- 13 files changed, 40 insertions(+), 40 deletions(-) create mode 100644 projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/index.ts rename projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/{webtreegraph-formatter/webtreegraph-formatter.spec.ts => tree-map-formatter/tree-map-formatter.spec.ts} (61%) rename projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/{webtreegraph-formatter/webtreegraph-formatter.ts => tree-map-formatter/tree-map-formatter.ts} (74%) delete mode 100644 projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/index.ts rename projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/{webtreegraph-visualizer/webtreegraph-visualizer.component.html => tree-map-visualizer/tree-map-visualizer.component.html} (100%) rename projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/{webtreegraph-visualizer/webtreegraph-visualizer.component.scss => tree-map-visualizer/tree-map-visualizer.component.scss} (100%) rename projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/{webtreegraph-visualizer/webtreegraph-visualizer.component.ts => tree-map-visualizer/tree-map-visualizer.component.ts} (70%) diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/record-formatter-spec-constants.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/record-formatter-spec-constants.ts index 390bf4cc0a7..dee4b3645d8 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/record-formatter-spec-constants.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/record-formatter-spec-constants.ts @@ -49,7 +49,7 @@ export const SIMPLE_FORMATTED_FLAMEGRAPH_RECORD = [ original: SIMPLE_RECORD[0], }, ]; -export const SIMPLE_FORMATTED_WEBTREEGRAPH_RECORD = [ +export const SIMPLE_FORMATTED_TREE_MAP_RECORD = [ Object({ id: '[NgForOf]', size: 17, diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/index.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/index.ts new file mode 100644 index 00000000000..a9c18815b47 --- /dev/null +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/index.ts @@ -0,0 +1 @@ +export * from './tree-map-formatter'; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.spec.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts similarity index 61% rename from projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.spec.ts rename to projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts index 7f5fe4ad63c..32ec599ac49 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.spec.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.spec.ts @@ -2,16 +2,16 @@ import { NESTED_FORMATTED_FLAMEGRAPH_RECORD, NESTED_RECORD, SIMPLE_FORMATTED_FLAMEGRAPH_RECORD, - SIMPLE_FORMATTED_WEBTREEGRAPH_RECORD, + SIMPLE_FORMATTED_TREE_MAP_RECORD, SIMPLE_RECORD, } from '../record-formatter-spec-constants'; import { AppEntry } from '../record-formatter'; -import { WebtreegraphFormatter, WebtreegraphNode } from './webtreegraph-formatter'; +import { TreeMapFormatter, TreeMapNode } from './tree-map-formatter'; -const formatter = new WebtreegraphFormatter(); +const formatter = new TreeMapFormatter(); describe('addFrame cases', () => { - let entry: AppEntry; + let entry: AppEntry; beforeEach(() => { entry = { @@ -23,6 +23,6 @@ describe('addFrame cases', () => { it('add frame for simple case', () => { formatter.addFrame(entry.app, SIMPLE_RECORD); - expect(entry.app).toEqual(SIMPLE_FORMATTED_WEBTREEGRAPH_RECORD); + expect(entry.app).toEqual(SIMPLE_FORMATTED_TREE_MAP_RECORD); }); }); diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts similarity index 74% rename from projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.ts rename to projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts index 32d68fb71ec..4b4d8a2e4c9 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/webtreegraph-formatter.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/tree-map-formatter/tree-map-formatter.ts @@ -1,17 +1,17 @@ import { AppEntry, RecordFormatter, TimelineView } from '../record-formatter'; import { ElementProfile, ProfilerFrame } from 'protocol'; -export interface WebtreegraphNode { +export interface TreeMapNode { id: string; value: number; size: number; - children: WebtreegraphNode[]; + children: TreeMapNode[]; original: ElementProfile | null; } -export class WebtreegraphFormatter extends RecordFormatter { +export class TreeMapFormatter extends RecordFormatter { format(records: ProfilerFrame[]): any { - const result: TimelineView = { + const result: TimelineView = { timeline: [], }; records.forEach((record) => { @@ -21,8 +21,8 @@ export class WebtreegraphFormatter extends RecordFormatter { return result; } - insertTimelineRecord(result: AppEntry[], record: ProfilerFrame): void { - const entry: AppEntry = { + insertTimelineRecord(result: AppEntry[], record: ProfilerFrame): void { + const entry: AppEntry = { app: [], timeSpent: 0, source: record.source, @@ -45,14 +45,14 @@ export class WebtreegraphFormatter extends RecordFormatter { result.push(entry); } - addFrame(nodes: WebtreegraphNode[], elements: ElementProfile[], prev: WebtreegraphNode | null = null): void { + addFrame(nodes: TreeMapNode[], elements: ElementProfile[], prev: TreeMapNode | null = null): void { elements.forEach((element) => { if (!element) { console.error('Unable to insert undefined element'); return; } const nodeVal = super.getValue(element); - const node: WebtreegraphNode = { + const node: TreeMapNode = { id: super.getLabel(element), size: nodeVal, value: nodeVal, diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/index.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/index.ts deleted file mode 100644 index 168b458e730..00000000000 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './webtreegraph-formatter'; diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/recording-visualizer.module.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/recording-visualizer.module.ts index c33f44861b0..8dfed648af1 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/recording-visualizer.module.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/recording-visualizer.module.ts @@ -4,14 +4,14 @@ import { CommonModule } from '@angular/common'; import { NgxFlamegraphModule } from 'ngx-flamegraph'; import { NgxChartsModule } from '@swimlane/ngx-charts'; import { FlamegraphVisualizerComponent } from './flamegraph-visualizer/flamegraph-visualizer.component'; -import { WebtreegraphVisualizerComponent } from './webtreegraph-visualizer/webtreegraph-visualizer.component'; import { BargraphVisualizerComponent } from './bargraph-visualizer/bargraph-visualizer.component'; +import { TreeMapVisualizerComponent } from './tree-map-visualizer/tree-map-visualizer.component'; @NgModule({ declarations: [ TimelineVisualizerComponent, FlamegraphVisualizerComponent, - WebtreegraphVisualizerComponent, + TreeMapVisualizerComponent, BargraphVisualizerComponent, ], imports: [CommonModule, NgxFlamegraphModule, NgxChartsModule], diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html index c69822eec49..af579774f03 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html @@ -2,8 +2,8 @@ - - + + diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.ts index 19e6134bbaf..768f2215de0 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.ts @@ -1,7 +1,7 @@ import { Component, Input } from '@angular/core'; import { VisualizationMode } from '../timeline.component'; import { FlamegraphNode } from '../record-formatter/flamegraph-formatter'; -import { WebtreegraphNode } from '../record-formatter/webtreegraph-formatter'; +import { TreeMapNode } from '../record-formatter/tree-map-formatter'; import { BargraphNode } from '../record-formatter/bargraph-formatter'; @Component({ @@ -11,7 +11,7 @@ import { BargraphNode } from '../record-formatter/bargraph-formatter'; }) export class TimelineVisualizerComponent { @Input() visualizationMode: VisualizationMode; - @Input() records: FlamegraphNode[] | WebtreegraphNode[] | BargraphNode[]; + @Input() records: FlamegraphNode[] | TreeMapNode[] | BargraphNode[]; cmpVisualizationModes = VisualizationMode; } diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.html b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.html similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.html rename to projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.html diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.scss b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.scss similarity index 100% rename from projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.scss rename to projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.scss diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.ts similarity index 70% rename from projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.ts rename to projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.ts index 78e934776d7..bc15eb53ff4 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/webtreegraph-visualizer/webtreegraph-visualizer.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/tree-map-visualizer/tree-map-visualizer.component.ts @@ -1,18 +1,18 @@ import { AfterViewInit, Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core'; import * as treemap from 'webtreemap/build/webtreemap'; -import { WebtreegraphNode } from '../../record-formatter/webtreegraph-formatter'; +import { TreeMapNode } from '../../record-formatter/tree-map-formatter'; import { Subject } from 'rxjs'; import { throttleTime } from 'rxjs/operators'; @Component({ - selector: 'ng-webtreegraph-visualizer', - templateUrl: './webtreegraph-visualizer.component.html', - styleUrls: ['./webtreegraph-visualizer.component.scss'], + selector: 'ng-tree-map-visualizer', + templateUrl: './tree-map-visualizer.component.html', + styleUrls: ['./tree-map-visualizer.component.scss'], }) -export class WebtreegraphVisualizerComponent implements AfterViewInit, OnInit { - @Input() set records(data: WebtreegraphNode[]) { +export class TreeMapVisualizerComponent implements AfterViewInit, OnInit { + @Input() set records(data: TreeMapNode[]) { // first element in data is the Application node - this.webTreeRecords = data[0]; + this.treeMapRecords = data[0]; if (this.tree) { this.updateTree(); } @@ -20,7 +20,7 @@ export class WebtreegraphVisualizerComponent implements AfterViewInit, OnInit { private changeSize = new Subject(); - webTreeRecords: WebtreegraphNode; + treeMapRecords: TreeMapNode; @ViewChild('webTree') tree: ElementRef; @@ -41,7 +41,7 @@ export class WebtreegraphVisualizerComponent implements AfterViewInit, OnInit { } createTree(): void { - treemap.render(this.tree.nativeElement, this.webTreeRecords as any, { + treemap.render(this.tree.nativeElement, this.treeMapRecords as any, { padding: [20, 5, 5, 5], caption: (node) => `${node.id}: ${node.size.toFixed(3)} ms`, showNode: () => true, diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html index 06f4352e4b5..35ec14cc595 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html @@ -18,7 +18,7 @@ Flame graph - + Tree map diff --git a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.ts b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.ts index 5087f52665c..cc545b57957 100644 --- a/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.ts +++ b/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.ts @@ -3,17 +3,17 @@ import { ProfilerFrame } from 'protocol'; import { FlamegraphFormatter, FlamegraphNode } from './record-formatter/flamegraph-formatter'; import { BarGraphFormatter, BargraphNode } from './record-formatter/bargraph-formatter'; import { AppEntry, TimelineView, GraphNode } from './record-formatter/record-formatter'; -import { WebtreegraphFormatter, WebtreegraphNode } from './record-formatter/webtreegraph-formatter'; +import { TreeMapFormatter, TreeMapNode } from './record-formatter/tree-map-formatter'; export enum VisualizationMode { FlameGraph, - WebTreeGraph, + TreeMap, BarGraph, } const formatters = { [VisualizationMode.FlameGraph]: new FlamegraphFormatter(), - [VisualizationMode.WebTreeGraph]: new WebtreegraphFormatter(), + [VisualizationMode.TreeMap]: new TreeMapFormatter(), [VisualizationMode.BarGraph]: new BarGraphFormatter(), }; @@ -37,20 +37,20 @@ export class TimelineComponent { @Input() unFormattedRecords: ProfilerFrame[]; - profileRecords: TimelineView | TimelineView | TimelineView = { + profileRecords: TimelineView | TimelineView | TimelineView = { timeline: [], }; currentView = 0; cmpVisualizationModes = VisualizationMode; visualizationMode = VisualizationMode.BarGraph; - graphData: GraphNode[] = []; + graphData: GraphNode[] = []; - get formatter(): FlamegraphFormatter | WebtreegraphFormatter | BarGraphFormatter { + get formatter(): FlamegraphFormatter | TreeMapFormatter | BarGraphFormatter { return formatters[this.visualizationMode]; } - get recordsView(): AppEntry | AppEntry | AppEntry { + get recordsView(): AppEntry | AppEntry | AppEntry { return this.profileRecords.timeline[this.currentView] || { app: [], timeSpent: 0, source: '' }; } @@ -80,9 +80,9 @@ export class TimelineComponent { this.renderBarChart(this.profileRecords.timeline); } - renderBarChart(timeline: AppEntry[]): void { + renderBarChart(timeline: AppEntry[]): void { const maxValue = timeline.reduce( - (acc: number, node: AppEntry) => Math.max(acc, node.timeSpent), + (acc: number, node: AppEntry) => Math.max(acc, node.timeSpent), 0 ); const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2));