CPU usage after sorting

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

[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();
      }
    }
  }

[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.