Ngx-datatable: CPU usage after sorting

[dae721]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
I only started looking at this component a couple days ago, but from my outsider's perspective this appears to be a bug. As you sort and/or resize columns, the CPU usage gradually creeps up (and stays there). I'm using Chrome on Windows 10, but I also repro'ed this on an older Win 7 machine using both IE and Chrome (and on that machine, the CPU usage quickly reached 50%).

Expected behavior
CPU to go back down to 0 after the sort completes

Reproduction of the problem
Bring up the Fluid Row Heights sample:
http://swimlane.github.io/ngx-datatable

Bring up Chrome's Task Manager (Shift+Esc, or via the button in the upper right corner/more tools). You can also see this happening in Windows Task Manager, but Chrome's task manager shows CPU usage on a per tab basis. Notice the CPU for the datatable tab is at 0 or near 0.

Now click on column headers to sort the rows. After each click the average CPU usage increases slightly. After a dozen or so clicks it's at about 15%. Go to another tab and it falls to about 1%. It jumps back up after coming back to the datatable tab.

Seems like it's related to the number of rows. If I go to the Inline Editing sample with 100 rows, 5 showing at a time, CPU load goes down to about 5%. If I go to the 10k rows sample, it goes up to about 25%.

Same thing happens if I resize the columns instead of sorting them, though doesn't seem to be as severe.

What is the motivation / use case for changing the behavior?
Fan eventually kicks in, which is when I first noticed the problem.

Please tell us about your environment:
Windows 10, Windows 7

• Table version: 4.0.0
  I assume the online demo is using latest, but I was also able to repro on a sample app on localhost using 4.0.0.

• Angular version: 2.3.1

• Browser: Chrome 55 | IE 11

• Language: TypeScript 2.1

[dae721]

Took a stab at trying to figure out what the problem is. By breaking in the Chrome debugger when it should be idle, I _think_ I found an infinite loop in __directives\long-press.directive.ts__ in the loop function. Set a breakpoint there, click anywhere in the header, you'll hit the breakpoint, press F8 to continue and the breakpoint will be hit each time. If I remove the breakpoint, let it run awhile, then add the breakpoint back, it hits it right away. Haven't looked at the code enough to understand if it's indeed a problem, or maybe a side-effect caused by breaking in the debugger.

[JanCejka]

Problem is on line 64 - it contains:

if(this.longPressing) {

, while it should be

if(this.isLongPressing) {

this.longPressiong will evaluate always to true since it is EventEmitter assigned at creation of Component.

On top - probably line 29 should be changed as well. I believe current content

get isLongPress(): boolean { return this.longPressing !== undefined; }

should be

get isLongPress(): boolean { return this.isLongPressing; }

and last point - correct onMouseMove should be (there was typo as well plus abs() was missing):

  @HostListener('mousemove', ['$event'])
  onMouseMove(event: MouseEvent): void {
    if(this.pressing && !this.isLongPressing) {
      const xThres = Math.abs(event.clientX - this.mouseX) > 10;
      const yThres = Math.abs(event.clientY - this.mouseY) > 10;

      if(xThres || yThres) {
        this.endPress();
      }
    }
  }

[JanCejka]

This issue is still not fixed in 4.1.0. If I open http://swimlane.github.io/ngx-datatable/ and click header multiple times (just header even w/o sorting), CPU usage of tab starts to increase. "Multiple times" depends on computer. 40 header clicks on my computer increase CPU load to ~20% permanently. And CPU stays high even if I navigate to most of other examples. And if it drops on selected examples, it jumps back up after returning to original page where CPU went up. Solution of this issue is above, sorry for not providing PR, but I did not learn how to do it yet. ;-)

[retallicka]

I just tried to move from angular2-data-table 3.0.0 to ngx-data-table 4.1.0 and I hoped the sorting issues would be fixed but alas not, and I also noticed this immediately when sorting. If you click a few times then move the cursor away there is a visible delay. Would be good to have it fixed, until then we cannot use this version

[dae721]

@retallicka This has been fixed in version 4.2.0 (PR #409).