From f86c0a768acefcdbaf560fb1bcdaea04834dbbc2 Mon Sep 17 00:00:00 2001 From: Anand Tiwary Date: Mon, 11 Dec 2023 00:45:10 -0800 Subject: [PATCH 1/2] refactor: adding triggers to datasource --- .../src/table/data/table-cdk-data-source.ts | 45 +++++++++++++++---- .../src/table/data/table-data-source.ts | 8 +++- 2 files changed, 43 insertions(+), 10 deletions(-) diff --git a/projects/components/src/table/data/table-cdk-data-source.ts b/projects/components/src/table/data/table-cdk-data-source.ts index 02f37d91a..8f73542c1 100644 --- a/projects/components/src/table/data/table-cdk-data-source.ts +++ b/projects/components/src/table/data/table-cdk-data-source.ts @@ -25,6 +25,7 @@ type WatchedObservables = [ Dictionary, TableColumnConfigExtended | undefined, StatefulTableRow | undefined, + unknown | undefined, ]; export class TableCdkDataSource implements DataSource { @@ -63,8 +64,17 @@ export class TableCdkDataSource implements DataSource { * Below debounce is needed to handle multiple emission from buildChangeObservable. */ debounceTime(100), - mergeMap(([columnConfigs, pageEvent, filters, queryProperties, changedColumn, changedRow]) => - this.buildDataObservable(columnConfigs, pageEvent, filters, queryProperties, changedColumn, changedRow), + mergeMap( + ([columnConfigs, pageEvent, filters, queryProperties, changedColumn, changedRow, secondaryDataTriggers]) => + this.buildDataObservable( + columnConfigs, + pageEvent, + filters, + queryProperties, + changedColumn, + changedRow, + secondaryDataTriggers, + ), ), ) .subscribe(this.rowsChange$); @@ -174,7 +184,12 @@ export class TableCdkDataSource implements DataSource { this.filtersProvider.queryProperties$, this.columnStateChangeProvider.columnState$, this.rowStateChangeProvider.rowState$, - ]).pipe(map(values => this.detectRowStateChanges(...values))); + ]).pipe( + switchMap(values => + combineLatest([of(values), this.tableDataSourceProvider.data?.secondaryDataTriggers$ ?? of(undefined)]), + ), + map(([values, triggers]) => this.detectRowStateChanges(...values, triggers)), + ); } private columnConfigChange(): Observable { @@ -204,8 +219,17 @@ export class TableCdkDataSource implements DataSource { queryProperties: Dictionary, changedColumn: TableColumnConfigExtended | undefined, changedRow: StatefulTableRow | undefined, + secondaryDataTriggers?: unknown, ): WatchedObservables { - return [columnConfigs, pageEvent, filters, queryProperties, changedColumn, this.buildRowStateChange(changedRow)]; + return [ + columnConfigs, + pageEvent, + filters, + queryProperties, + changedColumn, + this.buildRowStateChange(changedRow), + secondaryDataTriggers, + ]; } private buildRowStateChange(changedRow: StatefulTableRow | undefined): StatefulTableRow | undefined { @@ -232,6 +256,7 @@ export class TableCdkDataSource implements DataSource { queryProperties: Dictionary, changedColumn: TableColumnConfigExtended | undefined, changedRow: StatefulTableRow | undefined, + secondaryDataTriggers?: unknown, ): Observable { if (changedRow !== undefined) { return of(this.cachedData.rows).pipe( @@ -246,7 +271,7 @@ export class TableCdkDataSource implements DataSource { TableCdkColumnUtil.unsortOtherColumns(changedColumn, columnConfigs); } - return this.fetchData(columnConfigs, pageEvent, filters, queryProperties); + return this.fetchData(columnConfigs, pageEvent, filters, queryProperties, secondaryDataTriggers); } private fetchAndAppendNewChildren(stateChanges: RowStateChange[]): Observable { @@ -277,6 +302,7 @@ export class TableCdkDataSource implements DataSource { pageEvent: PageEvent, filters: TableFilter[], queryProperties: Dictionary, + secondaryDataTriggers?: unknown, ): Observable { if (this.tableDataSourceProvider.data === undefined) { return of([]); @@ -284,7 +310,9 @@ export class TableCdkDataSource implements DataSource { const request = this.buildRequest(columnConfigs, pageEvent, filters, queryProperties); - return this.hasCacheForRequest(request) ? this.fetchCachedData(request) : this.fetchNewData(request); + return this.hasCacheForRequest(request) + ? this.fetchCachedData(request) + : this.fetchNewData(request, secondaryDataTriggers); } private haveColumConfigsChanged(request: TableDataRequest): boolean { @@ -296,6 +324,7 @@ export class TableCdkDataSource implements DataSource { } private hasCacheForRequest(request: TableDataRequest): boolean { + return false; //TBD: why do we need this method? if ( !isEqual(this.cachedData.request?.sort, request.sort) || !isEqual(this.cachedData.request?.filters, request.filters) || @@ -325,14 +354,14 @@ export class TableCdkDataSource implements DataSource { return currentOffset - cachedOffset; } - private fetchNewData(request: TableDataRequest): Observable { + private fetchNewData(request: TableDataRequest, secondaryDataTriggers?: unknown): Observable { if (this.tableDataSourceProvider.data === undefined) { return of([]); } let total = 0; - return this.tableDataSourceProvider.data.getData(request).pipe( + return this.tableDataSourceProvider.data.getData(request, secondaryDataTriggers).pipe( tap(response => (total = response.totalCount)), tap(response => this.updatePaginationTotalCount(response.totalCount)), map(response => response.data), diff --git a/projects/components/src/table/data/table-data-source.ts b/projects/components/src/table/data/table-data-source.ts index 2f355c407..77c3540f0 100644 --- a/projects/components/src/table/data/table-data-source.ts +++ b/projects/components/src/table/data/table-data-source.ts @@ -1,8 +1,12 @@ import { Observable } from 'rxjs'; import { TableColumnConfig, TableFilter, TableSortDirection } from '../table-api'; -export interface TableDataSource { - getData(request: TableDataRequest): Observable>; +export interface TableDataSource { + secondaryDataTriggers$?: Observable; // TBD + getData( + request: TableDataRequest, + secondaryDataTriggers?: TDataTriggers, + ): Observable>; getScope?(): string | undefined; } From 50bf809f1b83b8f7bb7e4c0c69208b6bcfa9d7fa Mon Sep 17 00:00:00 2001 From: Anand Tiwary Date: Mon, 11 Dec 2023 16:28:39 -0800 Subject: [PATCH 2/2] refactor: add take(1) --- projects/components/src/table/data/table-cdk-data-source.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/components/src/table/data/table-cdk-data-source.ts b/projects/components/src/table/data/table-cdk-data-source.ts index 8f73542c1..9444b4357 100644 --- a/projects/components/src/table/data/table-cdk-data-source.ts +++ b/projects/components/src/table/data/table-cdk-data-source.ts @@ -2,7 +2,7 @@ import { DataSource } from '@angular/cdk/collections'; import { Dictionary, forkJoinSafeEmpty, isEqualIgnoreFunctions, RequireBy, sortUnknown } from '@hypertrace/common'; import { isEqual, isNil } from 'lodash-es'; import { BehaviorSubject, combineLatest, NEVER, Observable, of, Subject, Subscription, throwError } from 'rxjs'; -import { catchError, debounceTime, map, mergeMap, startWith, switchMap, tap } from 'rxjs/operators'; +import { catchError, debounceTime, map, mergeMap, startWith, switchMap, take, tap } from 'rxjs/operators'; import { PageEvent } from '../../paginator/page.event'; import { PaginationProvider } from '../../paginator/paginator-api'; import { RowStateChange, StatefulTableRow, StatefulTreeTableRow, TableFilter, TableRow } from '../table-api'; @@ -362,6 +362,7 @@ export class TableCdkDataSource implements DataSource { let total = 0; return this.tableDataSourceProvider.data.getData(request, secondaryDataTriggers).pipe( + take(1), tap(response => (total = response.totalCount)), tap(response => this.updatePaginationTotalCount(response.totalCount)), map(response => response.data),