Refactor virtualization resize observer to track individual forOf elements. (#16809)

---------

Co-authored-by: MKirova <MKirova@DEV-MKIROVA>
Co-authored-by: Radoslav Karaivanov <rkaraivanov@infragistics.com>

Author: 3 people

projects/igniteui-angular-performance/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { GridComponent } from './grid/grid.component';
 import { TreeGridComponent } from './tree-grid/tree-grid.component';
 import { PivotGridComponent } from './pivot-grid/pivot-grid.component';
+import { HierarchicalGridComponent } from './hierarchical-grid/hierarchical-grid.component';
 
 export const routes: Routes = [
     {
@@ -45,6 +46,12 @@ export const routes: Routes = [
         pathMatch: 'full',
         component: GridComponent,
         data: { rows: 1000 }
-    }
+    },
+    {
+        path: "hierarchical-grid-100k",
+        title: "Hierarchical Grid 100k records",
+        component: HierarchicalGridComponent,
+        data: { rows: 100_000 }
+    },
 
 ];

projects/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.html

@@ -0,0 +1,35 @@
+<div class="grid-wrapper">
+  <igx-hierarchical-grid
+    [showExpandAll]="true"
+    #grid
+    [data]="data"
+    [allowFiltering]="false"
+    [height]="'100%'"
+    [width]="'100%'"
+  >
+    @for (col of columns; track col) {
+      <igx-column
+        [field]="col.field"
+        [header]="col.header"
+        [sortable]="col.sortable"
+        [dataType]="col.dataType"
+        [width]="col.width"
+        [groupable]="col.groupable"
+      >
+      </igx-column>
+    }
+    <igx-row-island [height]="null" [width]="null" [key]="'childData'" [autoGenerate]="false">
+        @for (col of columns; track col) {
+            <igx-column
+              [field]="col.field"
+              [header]="col.header"
+              [sortable]="col.sortable"
+              [dataType]="col.dataType"
+              [width]="col.width"
+              [groupable]="col.groupable"
+            >
+            </igx-column>
+        }
+    </igx-row-island>
+</igx-hierarchical-grid>
+</div>

projects/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.scss

@@ -0,0 +1,10 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.grid-wrapper {
+    height: 100%;
+    width: 100%;
+}

projects/igniteui-angular-performance/src/app/hierarchical-grid/hierarchical-grid.component.ts

@@ -0,0 +1,39 @@
+import { Component, inject, ViewChild } from '@angular/core';
+import { GridColumnDataType, IgxColumnComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent } from "igniteui-angular"
+import { DataService } from '../services/data.service';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app-hierarchical-grid',
+    imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent],
+    templateUrl: './hierarchical-grid.component.html',
+    styleUrl: './hierarchical-grid.component.scss'
+})
+export class HierarchicalGridComponent {
+    protected columns: any[] = []
+    protected data: any[] = [];
+    protected performanceDataList: PerformanceEntryList = [];
+    private dataService = inject(DataService);
+    private activatedRoute = inject(ActivatedRoute);
+
+    @ViewChild(IgxHierarchicalGridComponent, { static: true })
+    public grid: IgxHierarchicalGridComponent;
+
+    constructor() {
+        this.data = this.dataService.generateHierarchicalData(this.activatedRoute.snapshot.data.rows)
+        this.columns = [
+            { field: "Id", dataType: GridColumnDataType.Number, sortable: true, width: 'auto', groupable: true },
+            { field: "Name", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+            { field: "AthleteNumber", dataType: GridColumnDataType.Number, sortable: true, width: 'auto', groupable: true },
+            { field: "Registered", dataType: GridColumnDataType.DateTime, sortable: true, width: 'auto', groupable: true },
+            { field: "CountryName", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+            { field: "FirstAppearance", dataType: GridColumnDataType.Time, sortable: true, width: 'auto', groupable: true },
+            { field: "CareerStart", dataType: GridColumnDataType.Date, sortable: true, width: 'auto', groupable: true },
+            { field: "Active", dataType: GridColumnDataType.Boolean, sortable: true, width: 'auto', groupable: true },
+            { field: "NetWorth", dataType: GridColumnDataType.Currency, sortable: true, width: 'auto', groupable: true },
+            { field: "CountryFlag", dataType: GridColumnDataType.Image, sortable: true, width: 'auto', groupable: true },
+            { field: "SuccessRate", dataType: GridColumnDataType.Percent, sortable: true, width: 'auto', groupable: true },
+            { field: "Position", dataType: GridColumnDataType.String, sortable: true, width: 'auto', groupable: true },
+        ];
+    }
+}

projects/igniteui-angular-performance/src/app/services/data.service.ts

@@ -16,6 +16,12 @@ export class DataService {
         return data;
     }
 
+    public generateHierarchicalData(rows: number): any[] {
+        const rnd = new Mulberry32(1234);
+        const data = this.generateAthletesData(rnd, rows, true);
+        return data;
+    }
+
     public generateTreeData(rows: number): any[] {
         const rnd = new Mulberry32(1234);
         const data = this.generateEmployeesData(rnd, rows);
@@ -114,7 +120,7 @@ export class DataService {
         return currData;
     }
 
-    private generateAthletesData(rnd: Mulberry32, rows: number): any[] {
+    private generateAthletesData(rnd: Mulberry32, rows: number, children = false): any[] {
         const currData = [];
         for (let i = 0; i < rows; i++) {
             const rand = Math.floor(rnd.random() * Math.floor(athletesData.length));
@@ -125,6 +131,10 @@ export class DataService {
             dataObj["Active"] = this.randomizeBoolean(rnd);
             dataObj["SuccessRate"] = this.randomizePercentage(rnd);
             dataObj["AthleteNumber"] = this.randomizeAthleteNumber(dataObj["AthleteNumber"], rnd);
+            if (children) {
+                const rnd = new Mulberry32(i);
+                dataObj["childData"] = this.generateAthletesData(rnd, 5);
+            }
             currData.push(dataObj);
         }
         return currData;