Clarity: Server-Driven Datagrid - 'clrDgRefresh' should be different event for pagination

Created on 14 Jun 2017 · 7Comments · Source: vmware/clarity

[ ] bug
[ ] feature request
[X] enhancement

As suggested in #793

Our current recommendation regarding this is that you simply debounce the clrDgRefresh event on your side, it'll do the exact same thing.
Having the debounce on each filter would currently bloat the API far too much for something that doesn't bring much to the table, since the clrDgRefresh debounce takes less code than manually giving us a couple additional options on each filter.

The problem with such attitude is that clrDgRefresh debounce time affect pagination.
And you have user experience of delayed click.

datagrid

Source

ph55

Most helpful comment

You can get around this behavior by doing something like the following:

filterSubject: Subject<ClrDatagridStateInterface> = new Subject<ClrDatagridStateInterface>();
previousFilters: Array<Object>;
constructor() {
  this.filterSubject.pipe(
    debounce(state => this.compareFilters(state) ? timer(500) : EMPTY),
    tap(state => this.previousFilters = state.filters)
  ).subscribe((state: ClrDatagridStateInterface) => this.filterHandler(state)));
}

// Only debounce if there's a new filter in the state
compareFilters(state: ClrDatagridStateInterface): boolean {
  if (!state.filters) {
    return false;
  }
  return (JSON.stringify(state.filters) !== JSON.stringify(this.previousFilters));
}

// this does the actual refresh of data
filterHandler(state: ClrDatagridStateInterface) {
  // get more results
}

// refresh just triggers the Subject
refresh(state: ClrDatagridStateInterface) {
  this.filterSubject.next(state);
}

syndesis on 22 Jun 2018

👍5

All 7 comments

You can get around this behavior by doing something like the following:

filterSubject: Subject<ClrDatagridStateInterface> = new Subject<ClrDatagridStateInterface>();
previousFilters: Array<Object>;
constructor() {
  this.filterSubject.pipe(
    debounce(state => this.compareFilters(state) ? timer(500) : EMPTY),
    tap(state => this.previousFilters = state.filters)
  ).subscribe((state: ClrDatagridStateInterface) => this.filterHandler(state)));
}

// Only debounce if there's a new filter in the state
compareFilters(state: ClrDatagridStateInterface): boolean {
  if (!state.filters) {
    return false;
  }
  return (JSON.stringify(state.filters) !== JSON.stringify(this.previousFilters));
}

// this does the actual refresh of data
filterHandler(state: ClrDatagridStateInterface) {
  // get more results
}

// refresh just triggers the Subject
refresh(state: ClrDatagridStateInterface) {
  this.filterSubject.next(state);
}

syndesis on 22 Jun 2018

👍5

@syndesis , Hello, could you please help to make it clear about this code:
debounce(this.compareFilters(state) ? timer(500) : EMPTY),

where does the state param come from? so as timer and EMPTY.

Thanks a lot.

chuduyunhuan on 11 Jul 2018

Sorry, state should be the argument for debounce. I updated the code above to reflect that. timer and empty come from rxjs 6:

import { timer, EMPTY } from 'rxjs';

syndesis on 11 Jul 2018

👍1

Yeah, it works well, thanks a lot.

chuduyunhuan on 12 Jul 2018

@syndesis This is very well written example of debouncing. But somewhere I saw interval is used instead of timer. What's the difference?

One thing more what the main reason to stringify function and than compare strings?

technbuzz on 27 Aug 2018

I'm closing this issue due to inactivity. If there is new information or an update to the enhancement request please re-open it and add the details.

The recommendation here is to debounce on the client side (See also #793).

hippee-lee on 3 Feb 2020

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.