UI Hang When Clearing Search Filter

[matthughes]

I have a grid with ~2K rows. Occasionally, if I type a query in the filter and then clear it, Firefox will completely hang. Doing some profiling when it happens, I see this stack:

This is using Angular/Angular-Animcate 1.2.0-rc2 and 2.0.7 of Grid.

I have upgraded to 1.2.0-rc3 and have not been able to reproduce since. Filtering seems more responsive overall with RC3.

[jesslilly]

I have the same issue! And I have a plunkr! I'm using exclamation points because I'm glad I'm not the only one! Also I know if we can reproduce it, we can fix it! I'm not sure, but I think the problem is in $digest. Or maybe the grid is adding too many watches or recursive watches.

Here's the plunkr:

http://plnkr.co/edit/vKhezr

With this issue I either have to sacrifice column sorting or filtering as a work around. This issue will kill my page because I often have thousands of rows.

[jesslilly]

IMO This should be a high priority.

[matthughes]

Have you tried it with Angular 1.2.0.rc3? I have not been able to
reproduce since upgrading to that version. And there definitely were
animation improvements in that release.

On Wed, Oct 23, 2013 at 10:52 PM, Jess Lilly notifications@github.comwrote:

I have the same issue! And I have a plunkr! I'm using exclamation points
because I'm glad I'm not the only one! Also I know if we can reproduce it,
we can fix it! I'm not sure, but I think the problem is in $digest. Or
maybe the grid is adding too many watches or recursive watches.

Here's the plunkr:

http://plnkr.co/edit/vKhezr

With this issue I either have to sacrifice column sorting or filtering as
a work around. This issue will kill my page because I often have thousands
of rows.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/777#issuecomment-26963141
.

[jesslilly]

I will try it, but 1.0.8 is the highest stable release right now. Anything higher is unstable.

[jesslilly]

@matthughes, thank you for the response. I updated my app and the plunkr. The issue remains. Have you tried the plunkr? If you increase the number of rows in the grid from 1000 to 5000 you really see quite a big performance impact. It takes maybe 30 seconds to clear the filter field and update the grid.

[matthughes]

Yeah I see it. It definitely seems to happen repeatedly if you do the sorting as your plunker describes.

I heard talk (#716) about addressing performance issues in ngGrid 1.0.7 but haven't seen any follow up.

[jaydamask]

I, too, have this problem.

I'm running (stable release) ng 1.0.8 in production, so I'm reluctant to upgrade to the rc (although I will if that helps). I'm using the latest ng-grid.

I cannot tell if it is the # of rows or the total number of cells that matter. My application .get()'s some tables with thousands of records. On the ng-grid the table populates quickly. Application of one or more filters also works well. However, setting filterText = '' (via a clear or other means) virtually crashes the app once I'm between 1k-2k records. (For this table I have ~15 columns).

It's suspicious that applying a non-empty filter is fast while clearing the filter is so slow. I've tried to catch the ng-grid code in the debugger to find where it's looping, but as per matthughes, the pb starts w/ jQuery.min.js (I'm on 2.10).

The asymmetry of the performance, filter-on vs filter-off, should mean that a fix is possible. Right now I find it hard to use ng-grid in production given that my app can spin forever and crash.

[jaydamask]

dpangler: thank you for working on this. Is it clear that filter clearing is slow only after a sort? I have found clear to be very slow with large tables (1k rows+) even without sort.

[dpangier]

No, it isn't clear that this is the only cause - the bug can be triggered whenever there is a filter in place which reduces the number of displayed rows below the "virtualisation threshold" and the scroll top position is changed.

[jaydamask]

I see. That may be the situation I'm observing, but I don't have it in front of me. I will get back on that.

Nonetheless, the code governs the behavior, and I appreciate that you've found another case, one that probably applies to me, where the bad behavior manifests itself.

[jaydamask]

Thanks dpangier for pushing a fix. I can confirm that, before the fix, a clear after filtering data causes a near hang when the before state is where ng-grid presents a scrollbar and has lots of records, and the after state is when the filter slims the selection down so much that the scrollbar disappears.

[dpangier]

There are still issues. When rows are added dynamically, the viewableRange is still being miscalculated. The change in pull request #821 appeared to work by reducing the rendered row count dramatically, but still got it wrong under common circumstances. I am submitting another PR with what I hope is a correct fix.