From 621c54f04830577a9b59742c4c70b756605db51c Mon Sep 17 00:00:00 2001 From: Aaron Steinfeld Date: Wed, 18 Aug 2021 15:26:50 -0400 Subject: [PATCH 1/3] fix: increase debounce time for table search --- .../components/src/table/controls/table-controls.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index caaff7710..d72e2e6b2 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -161,7 +161,7 @@ export class TableControlsComponent implements OnChanges { this.checkboxDiffer = this.differFactory.find([]).create(); this.subscriptionLifecycle.add( - this.searchDebounceSubject.pipe(debounceTime(200)).subscribe(text => this.searchChange.emit(text)) + this.searchDebounceSubject.pipe(debounceTime(400)).subscribe(text => this.searchChange.emit(text)) ); } From 02e5183d491a5aeebdc1f0b5e3c06787a0e2a867 Mon Sep 17 00:00:00 2001 From: Aaron Steinfeld Date: Wed, 18 Aug 2021 15:29:01 -0400 Subject: [PATCH 2/3] test: update debounce --- .../src/table/controls/table-controls.component.test.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts index 0a473b844..d535da368 100644 --- a/projects/components/src/table/controls/table-controls.component.test.ts +++ b/projects/components/src/table/controls/table-controls.component.test.ts @@ -55,6 +55,9 @@ describe('Table Controls component', () => { spectator.triggerEventHandler(SearchBoxComponent, 'valueChange', 'testing'); spectator.tick(200); + expect(onChangeSpy).not.toHaveBeenCalledWith('testing'); + // 400 ms debounce + spectator.tick(200); expect(onChangeSpy).toHaveBeenCalledWith('testing'); })); From 3fb4632f6d108fb4491e6c965377f4b4eb95c613 Mon Sep 17 00:00:00 2001 From: Aaron Steinfeld Date: Wed, 18 Aug 2021 17:43:00 -0400 Subject: [PATCH 3/3] refactor: use searchbox debounce --- .../controls/table-controls.component.test.ts | 5 ----- .../controls/table-controls.component.ts | 19 ++++--------------- 2 files changed, 4 insertions(+), 20 deletions(-) diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts index d535da368..643c7ad00 100644 --- a/projects/components/src/table/controls/table-controls.component.test.ts +++ b/projects/components/src/table/controls/table-controls.component.test.ts @@ -53,11 +53,6 @@ describe('Table Controls component', () => { }); spectator.triggerEventHandler(SearchBoxComponent, 'valueChange', 'testing'); - spectator.tick(200); - - expect(onChangeSpy).not.toHaveBeenCalledWith('testing'); - // 400 ms debounce - spectator.tick(200); expect(onChangeSpy).toHaveBeenCalledWith('testing'); })); diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index d72e2e6b2..6289032b4 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -9,9 +9,7 @@ import { Output } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { SubscriptionLifecycle, TypedSimpleChanges } from '@hypertrace/common'; -import { Subject } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import { TypedSimpleChanges } from '@hypertrace/common'; import { IconSize } from '../../icon/icon-size'; import { MultiSelectJustify } from '../../multi-select/multi-select-justify'; import { MultiSelectSearchMode, TriggerLabelDisplayMode } from '../../multi-select/multi-select.component'; @@ -27,7 +25,6 @@ import { @Component({ selector: 'ht-table-controls', styleUrls: ['./table-controls.component.scss'], - providers: [SubscriptionLifecycle], changeDetection: ChangeDetectionStrategy.OnPush, template: `
@@ -38,6 +35,7 @@ import { *ngIf="this.searchEnabled" class="control search-box" [placeholder]="this.searchPlaceholder || this.DEFAULT_SEARCH_PLACEHOLDER" + [debounceTime]="400" (valueChange)="this.onSearchChange($event)" > @@ -152,17 +150,8 @@ export class TableControlsComponent implements OnChanges { return !!this.searchEnabled || this.viewToggleEnabled || this.selectControlsEnabled || this.checkboxControlsEnabled; } - private readonly searchDebounceSubject: Subject = new Subject(); - - public constructor( - private readonly subscriptionLifecycle: SubscriptionLifecycle, - private readonly differFactory: IterableDiffers - ) { + public constructor(private readonly differFactory: IterableDiffers) { this.checkboxDiffer = this.differFactory.find([]).create(); - - this.subscriptionLifecycle.add( - this.searchDebounceSubject.pipe(debounceTime(400)).subscribe(text => this.searchChange.emit(text)) - ); } public ngOnChanges(changes: TypedSimpleChanges): void { @@ -208,7 +197,7 @@ export class TableControlsComponent implements OnChanges { } public onSearchChange(text: string): void { - this.searchDebounceSubject.next(text); + this.searchChange.emit(text); } public onMultiSelectChange(select: TableSelectControl, selections: TableSelectControlOption[]): void {