perf(utils): Improved internal utils performance

This is still work in progress and they will be
additional commits.

This aims to improve the baseline performance of
some internal functions used across the grid data
pipeline. These are relatively easy to improve
before tackling the more complicated interactions.

Author: rkaraivanov

projects/igniteui-angular/src/lib/core/utils.ts

@@ -4,7 +4,7 @@ import { mergeWith } from 'lodash-es';
 import { NEVER, Observable } from 'rxjs';
 import { setImmediate } from './setImmediate';
 import { isDevMode } from '@angular/core';
-import { IgxTheme } from '../services/theme/theme.token';
+import type { IgxTheme } from '../services/theme/theme.token';
 
 /** @hidden @internal */
 export const ELEMENTS_TOKEN = /*@__PURE__*/new InjectionToken<boolean>('elements environment');
@@ -31,17 +31,9 @@ export const getResizeObserver = () => globalThis.window?.ResizeObserver;
 /**
  * @hidden
  */
-export const cloneArray = (array: any[], deep?: boolean) => {
-    const arr = [];
-    if (!array) {
-        return arr;
-    }
-    let i = array.length;
-    while (i--) {
-        arr[i] = deep ? cloneValue(array[i]) : array[i];
-    }
-    return arr;
-};
+export function cloneArray<T>(array: T[], deep = false): T[] {
+    return deep ? (array ?? []).map(cloneValue) : (array ?? []).slice();
+}
 
 /**
  * Doesn't clone leaf items
@@ -108,7 +100,7 @@ export const cloneValue = (value: any): any => {
         return new Date(value.getTime());
     }
     if (Array.isArray(value)) {
-        return [...value];
+        return value.slice();
     }
 
     if (value instanceof Map || value instanceof Set) {
@@ -298,7 +290,7 @@ export class PlatformUtil {
      */
     public getNodeSizeViaRange(range: Range, node: HTMLElement, sizeHoldingNode?: HTMLElement) {
         let overflow = null;
-        let nodeStyles;
+        let nodeStyles: string[];
 
         if (!this.isFirefox) {
             overflow = node.style.overflow;
@@ -455,17 +447,17 @@ export const resizeObservable = (target: HTMLElement): Observable<ResizeObserver
     // check whether we are on server env or client env
     if (resizeObserver) {
         return new Observable((observer) => {
-                const instance = new resizeObserver((entries: ResizeObserverEntry[]) => {
-                    observer.next(entries);
-                });
-                instance.observe(target);
-                const unsubscribe = () => instance.disconnect();
-                return unsubscribe;
+            const instance = new resizeObserver((entries: ResizeObserverEntry[]) => {
+                observer.next(entries);
+            });
+            instance.observe(target);
+            const unsubscribe = () => instance.disconnect();
+            return unsubscribe;
         });
-    } else {
-        // if on a server env return a empty observable that does not complete immediately
-        return NEVER;
     }
+    // if on a server env return a empty observable that does not complete immediately
+    return NEVER;
+
 }
 
 /**
@@ -476,7 +468,7 @@ export const resizeObservable = (target: HTMLElement): Observable<ResizeObserver
  */
 export const compareMaps = (map1: Map<any, any>, map2: Map<any, any>): boolean => {
     if (!map2) {
-        return !map1 ? true : false;
+        return !map1;
     }
     if (map1.size !== map2.size) {
         return false;
@@ -496,26 +488,38 @@ export const compareMaps = (map1: Map<any, any>, map2: Map<any, any>): boolean =
     return match;
 };
 
+function _isObject(entity: unknown): entity is object {
+    return entity != null && typeof entity === 'object';
+}
+
+export function columnFieldPath(path?: string): string[] {
+    return path?.split('.') ?? [];
+}
+
 /**
- *
  * Given a property access path in the format `x.y.z` resolves and returns
  * the value of the `z` property in the passed object.
  *
  * @hidden
  * @internal
  */
-export const resolveNestedPath = (obj: any, path: string) => {
-    const parts = path?.split('.') ?? [];
-    let current = obj[parts.shift()];
+export function resolveNestedPath<T extends object, U>(obj: unknown, pathParts: string[], defaultValue?: U): T | U | undefined {
+    if (!_isObject(obj)) {
+        return defaultValue;
+    }
 
-    parts.forEach(prop => {
-        if (current) {
-            current = current[prop];
+    let current = obj;
+
+    for (const key of pathParts) {
+        if (_isObject(current) && key in (current as T)) {
+            current = current[key];
+        } else {
+            return defaultValue;
         }
-    });
+    }
 
-    return current;
-};
+    return current as T;
+}
 
 /**
  *
@@ -628,12 +632,12 @@ export function modulo(n: number, d: number) {
  * ```
  */
 export function* intoChunks<T>(arr: T[], size: number) {
-  if (size < 1) {
-    throw new Error('size must be an integer >= 1');
-  }
-  for (let i = 0; i < arr.length; i += size) {
-    yield arr.slice(i, i + size);
-  }
+    if (size < 1) {
+        throw new Error('size must be an integer >= 1');
+    }
+    for (let i = 0; i < arr.length; i += size) {
+        yield arr.slice(i, i + size);
+    }
 }
 
 /**
@@ -646,7 +650,6 @@ export function getComponentCssSizeVar(size: string) {
             return 'var(--ig-size, var(--ig-size-small))';
         case "2":
             return 'var(--ig-size, var(--ig-size-medium))';
-        case "3":
         default:
             return 'var(--ig-size, var(--ig-size-large))';
     }
@@ -662,9 +665,9 @@ export function normalizeURI(path: string) {
 
 export function getComponentTheme(el: Element) {
     return globalThis.window
-    ?.getComputedStyle(el)
-    .getPropertyValue('--theme')
-    .trim() as IgxTheme;
+        ?.getComputedStyle(el)
+        .getPropertyValue('--theme')
+        .trim() as IgxTheme;
 }
 
 /**

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -1,6 +1,6 @@
 import { FilteringLogic, IFilteringExpression } from './filtering-expression.interface';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from './filtering-expressions-tree';
-import { resolveNestedPath, parseDate, formatDate, formatCurrency } from '../core/utils';
+import { resolveNestedPath, parseDate, formatDate, formatCurrency, columnFieldPath } from '../core/utils';
 import { ColumnType, EntityType, GridType } from '../grids/common/grid.interface';
 import { GridColumnDataType } from './data-util';
 import { SortingDirection } from './sorting-strategy';
@@ -26,7 +26,7 @@ export interface IFilteringStrategy {
     filter(data: any[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree?: IFilteringExpressionsTree,
         grid?: GridType): any[];
     /* csSuppress */
-    getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree) : Promise<IgxFilterItem[]>;
+    getFilterItems(column: ColumnType, tree: IFilteringExpressionsTree): Promise<IgxFilterItem[]>;
 }
 
 /* csSuppress */
@@ -37,16 +37,14 @@ export interface IgxFilterItem {
 }
 
 /* csSuppress */
-export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
+export abstract class BaseFilteringStrategy implements IFilteringStrategy {
     // protected
     public findMatchByExpression(rec: any, expr: IFilteringExpression, isDate?: boolean, isTime?: boolean, grid?: GridType): boolean {
         if (expr.searchTree) {
             const records = rec[expr.searchTree.entity];
             const shouldMatchRecords = expr.conditionName === 'inQuery';
             if (!records) { // child grid is not yet created
                 return true;
-            } else if (records.length === 0) { // child grid is empty
-                return false;
             }
 
             for (let index = 0; index < records.length; index++) {
@@ -74,7 +72,7 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
                 const operator = expressionsTree.operator as FilteringLogic;
                 let matchOperand;
 
-                if (expressionsTree.filteringOperands && expressionsTree.filteringOperands.length) {
+                if (expressionsTree.filteringOperands?.length) {
                     for (const operand of expressionsTree.filteringOperands) {
                         matchOperand = this.matchRecord(rec, operand, grid, entity);
 
@@ -137,9 +135,9 @@ export abstract class BaseFilteringStrategy implements IFilteringStrategy  {
         data = column.grid.gridAPI.sortDataByExpressions(data,
             [{ fieldName: column.field, dir: SortingDirection.Asc, ignoreCase: column.sortingIgnoreCase }]);
 
-        const columnField = column.field;
+        const pathParts = columnFieldPath(column.field)
         let filterItems: IgxFilterItem[] = data.map(record => {
-            let value = resolveNestedPath(record, columnField);
+            let value = resolveNestedPath(record, pathParts);
             const applyFormatter = column.formatter && this.shouldFormatFilterValues(column);
 
             value = applyFormatter ?
@@ -239,36 +237,25 @@ export class NoopFilteringStrategy extends BaseFilteringStrategy {
 export class FilteringStrategy extends BaseFilteringStrategy {
     private static _instance: FilteringStrategy = null;
 
-    constructor() {
-        super();
-    }
 
     public static instance() {
         return this._instance || (this._instance = new this());
     }
 
     public filter<T>(data: T[], expressionsTree: IFilteringExpressionsTree, advancedExpressionsTree: IFilteringExpressionsTree,
         grid: GridType): T[] {
-        let i;
-        let rec;
-        const len = data.length;
-        const res: T[] = [];
 
-        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree)) || !len) {
+
+        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree))) {
             return data;
         }
-        for (i = 0; i < len; i++) {
-            rec = data[i];
-            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
-                res.push(rec);
-            }
-        }
-        return res;
+
+        return data.filter(record => this.matchRecord(record, expressionsTree, grid) && this.matchRecord(record, advancedExpressionsTree, grid));
     }
 
     protected getFieldValue(rec: any, fieldName: string, isDate = false, isTime = false, grid?: GridType): any {
         const column = grid?.getColumnByName(fieldName);
-        let value = resolveNestedPath(rec, fieldName);
+        let value = resolveNestedPath(rec, columnFieldPath(fieldName));
 
         value = column?.formatter && this.shouldFormatFilterValues(column) ?
             column.formatter(value, rec) :

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -1,6 +1,6 @@
 import { Pipe, PipeTransform, Inject } from '@angular/core';
 import { DataUtil } from '../../data-operations/data-util';
-import { cloneArray, resolveNestedPath } from '../../core/utils';
+import { cloneArray, columnFieldPath, resolveNestedPath } from '../../core/utils';
 import { GridType, IGX_GRID_BASE, RowType } from './grid.interface';
 import { IgxAddRow } from './crud.service';
 import { IgxSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
@@ -26,11 +26,12 @@ export class IgxGridCellStyleClassesPipe implements PipeTransform {
         }
 
         const result = [];
+        const pathParts = columnFieldPath(field);
 
         for (const cssClass of Object.keys(cssClasses)) {
             const callbackOrValue = cssClasses[cssClass];
             const apply = typeof callbackOrValue === 'function' ?
-                callbackOrValue(data, field, resolveNestedPath(data, field), index) : callbackOrValue;
+                callbackOrValue(data, field, resolveNestedPath(data, pathParts), index) : callbackOrValue;
             if (apply) {
                 result.push(cssClass);
             }
@@ -57,9 +58,11 @@ export class IgxGridCellStylesPipe implements PipeTransform {
             return css;
         }
 
+        const pathParts = columnFieldPath(field);
+
         for (const prop of Object.keys(styles)) {
             const res = styles[prop];
-            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, field), index) : res;
+            css[prop] = typeof res === 'function' ? res(data, field, resolveNestedPath(data, pathParts), index) : res;
         }
 
         return css;
@@ -70,7 +73,7 @@ export class IgxGridCellStylesPipe implements PipeTransform {
  * @hidden
  * @internal
  */
- @Pipe({
+@Pipe({
     name: 'igxCellImageAlt',
     standalone: true
 })
@@ -116,7 +119,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
         _rowData: any,
         _: number
     ) {
-        const result = new Set(['igx-grid__tr', index % 2 ? 'igx-grid__tr--even': 'igx-grid__tr--odd']);
+        const result = new Set(['igx-grid__tr', index % 2 ? 'igx-grid__tr--even' : 'igx-grid__tr--odd']);
         const mapping = [
             [selected, 'igx-grid__tr--selected'],
             [editMode, 'igx-grid__tr--edit'],
@@ -329,7 +332,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 export class IgxGridDataMapperPipe implements PipeTransform {
 
     public transform(data: any[], field: string, _: number, val: any, isNestedPath: boolean) {
-        return isNestedPath ? resolveNestedPath(data, field) : val;
+        return isNestedPath ? resolveNestedPath(data, columnFieldPath(field)) : val;
     }
 }
 
@@ -354,13 +357,13 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {
-                const value = resolveNestedPath(rowCurrentState, field);
+                const value = resolveNestedPath(rowCurrentState, columnFieldPath(field));
                 return value !== undefined && value !== null;
             }
         } else {
             const transaction = transactions.getState(row_id);
-            const value = resolveNestedPath(transaction?.value ?? {}, field);
-            return transaction && transaction.value && (value || value === 0 || value === false);
+            const value = resolveNestedPath(transaction?.value ?? {}, columnFieldPath(field));
+            return transaction?.value && (value || value === 0 || value === false);
         }
     }
 }
@@ -371,7 +374,7 @@ export class IgxGridTransactionStatePipe implements PipeTransform {
 })
 export class IgxColumnFormatterPipe implements PipeTransform {
 
-    public transform(value: any, formatter: (v: any, data: any, columnData? :any) => any, rowData: any, columnData? : any) {
+    public transform(value: any, formatter: (v: any, data: any, columnData?: any) => any, rowData: any, columnData?: any) {
         return formatter(value, rowData, columnData);
     }
 }