fix: updating table source (#326)

* fix: updating table source

* refactor: add debounce time and fix column's datasource dependency

* refactor: fixing lint and formatting

* refactor: adding comment

Author: anandtiwary

projects/components/src/table/data/table-cdk-data-source.ts

@@ -1,7 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { forkJoinSafeEmpty, isEqualIgnoreFunctions, RequireBy, sortUnknown } from '@hypertrace/common';
 import { combineLatest, NEVER, Observable, of, Subject, throwError } from 'rxjs';
-import { catchError, map, mergeMap, startWith, switchMap, tap } from 'rxjs/operators';
+import { catchError, debounceTime, map, mergeMap, startWith, switchMap, 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';
@@ -54,6 +54,10 @@ export class TableCdkDataSource implements DataSource<TableRow> {
     this.buildChangeObservable()
       .pipe(
         tap(() => this.loadingStateSubject.next({ loading$: NEVER })),
+        /**
+         * Below debouce is needed to handle multiple emission from buildChangeObservable.
+         */
+        debounceTime(100),
         mergeMap(([columnConfigs, pageEvent, filters, changedColumn, changedRow]) =>
           this.buildDataObservable(columnConfigs, pageEvent, filters, changedColumn, changedRow)
         )

projects/components/src/table/table.component.ts

@@ -519,7 +519,7 @@ export class TableComponent
   }
 
   private buildColumnConfigExtendeds(): TableColumnConfigExtended[] {
-    if (!this.columnConfigs || !this.dataSource) {
+    if (!this.columnConfigs) {
       return [];
     }
 

projects/components/src/table/table.service.ts

@@ -34,7 +34,7 @@ export class TableService {
 
   public buildExtendedColumnConfigs(
     columnConfigs: TableColumnConfig[],
-    dataSource: TableCdkDataSource,
+    dataSource?: TableCdkDataSource,
     attributes: FilterAttribute[] = []
   ): TableColumnConfigExtended[] {
     return columnConfigs.map(columnConfig => {
@@ -52,7 +52,7 @@ export class TableService {
         attribute: attribute,
         renderer: rendererConstructor,
         parser: new parserConstructor(this.rootInjector),
-        filterValues: dataSource.getFilterValues(columnConfig.id)
+        filterValues: dataSource?.getFilterValues(columnConfig.id) ?? []
       };
     });
   }