refactor(devtools): rename tree graph to tree map

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,

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';

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<WebtreegraphNode>;
+  let entry: AppEntry<TreeMapNode>;
 
   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);
   });
 });

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<WebtreegraphNode> {
+export class TreeMapFormatter extends RecordFormatter<TreeMapNode> {
   format(records: ProfilerFrame[]): any {
-    const result: TimelineView<WebtreegraphNode> = {
+    const result: TimelineView<TreeMapNode> = {
       timeline: [],
     };
     records.forEach((record) => {
@@ -21,8 +21,8 @@ export class WebtreegraphFormatter extends RecordFormatter<WebtreegraphNode> {
     return result;
   }
 
-  insertTimelineRecord(result: AppEntry<WebtreegraphNode>[], record: ProfilerFrame): void {
-    const entry: AppEntry<WebtreegraphNode> = {
+  insertTimelineRecord(result: AppEntry<TreeMapNode>[], record: ProfilerFrame): void {
+    const entry: AppEntry<TreeMapNode> = {
       app: [],
       timeSpent: 0,
       source: record.source,
@@ -45,14 +45,14 @@ export class WebtreegraphFormatter extends RecordFormatter<WebtreegraphNode> {
     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,

projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/record-formatter/webtreegraph-formatter/index.ts

@@ -1 +0,0 @@
-export * from './webtreegraph-formatter';

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],

projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/recording-visualizer/timeline-visualizer.component.html

@@ -2,8 +2,8 @@
   <ng-container *ngSwitchCase="cmpVisualizationModes.FlameGraph">
     <ng-flamegraph-visualizer [bars]="records"></ng-flamegraph-visualizer>
   </ng-container>
-  <ng-container *ngSwitchCase="cmpVisualizationModes.WebTreeGraph">
-    <ng-webtreegraph-visualizer [records]="records"></ng-webtreegraph-visualizer>
+  <ng-container *ngSwitchCase="cmpVisualizationModes.TreeMap">
+    <ng-tree-map-visualizer [records]="records"></ng-tree-map-visualizer>
   </ng-container>
   <ng-container *ngSwitchCase="cmpVisualizationModes.BarGraph">
     <ng-bargraph-visualizer [records]="records"></ng-bargraph-visualizer>

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;
 }

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<void>();
 
-  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,

projects/ng-devtools/src/lib/devtools-tabs/profiler/recording/timeline/timeline.component.html

@@ -18,7 +18,7 @@
         <mat-option [value]="cmpVisualizationModes.FlameGraph">
           Flame graph
         </mat-option>
-        <mat-option [value]="cmpVisualizationModes.WebTreeGraph">
+        <mat-option [value]="cmpVisualizationModes.TreeMap">
           Tree map
         </mat-option>
         <mat-option [value]="cmpVisualizationModes.BarGraph">

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<FlamegraphNode> | TimelineView<WebtreegraphNode> | TimelineView<BargraphNode> = {
+  profileRecords: TimelineView<FlamegraphNode> | TimelineView<TreeMapNode> | TimelineView<BargraphNode> = {
     timeline: [],
   };
   currentView = 0;
 
   cmpVisualizationModes = VisualizationMode;
   visualizationMode = VisualizationMode.BarGraph;
-  graphData: GraphNode<FlamegraphNode | WebtreegraphNode | BargraphNode>[] = [];
+  graphData: GraphNode<FlamegraphNode | TreeMapNode | BargraphNode>[] = [];
 
-  get formatter(): FlamegraphFormatter | WebtreegraphFormatter | BarGraphFormatter {
+  get formatter(): FlamegraphFormatter | TreeMapFormatter | BarGraphFormatter {
     return formatters[this.visualizationMode];
   }
 
-  get recordsView(): AppEntry<FlamegraphNode> | AppEntry<WebtreegraphNode> | AppEntry<BargraphNode> {
+  get recordsView(): AppEntry<FlamegraphNode> | AppEntry<TreeMapNode> | AppEntry<BargraphNode> {
     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<FlamegraphNode | WebtreegraphNode | BargraphNode>[]): void {
+  renderBarChart(timeline: AppEntry<FlamegraphNode | TreeMapNode | BargraphNode>[]): void {
     const maxValue = timeline.reduce(
-      (acc: number, node: AppEntry<FlamegraphNode | WebtreegraphNode | BargraphNode>) => Math.max(acc, node.timeSpent),
+      (acc: number, node: AppEntry<FlamegraphNode | TreeMapNode | BargraphNode>) => Math.max(acc, node.timeSpent),
       0
     );
     const multiplicationFactor = parseFloat((MAX_HEIGHT / maxValue).toFixed(2));