GroupingView.groupBy creating huge performance problem

[ByReaL]

GXT3.0.1, Chrome 32, windows 7 x64

I have a grid with a GroupingView, if i enable the grouping
view.groupBy(myColumn)
before the data (max 2500 rows) is added to the store the browser gets frozen for a very long time (never had patience to wait till it actually completes)

if i enable grouping after i add the data to the store than the grouping part is freezing the page only for 5-6 sec

now the problem is that i add and remove data from time to time, and each time i need to disable grouping
view.groupBy(null) change the data in the store and than enable grouping again , disable grouping takes also ~5 sec

bugs:
1) enabling grouping before data is added to store generates a performance problem
2) adding data to a store for a view with grouping has a big performance problem

workaround:
1) enable grouping after data is added to the store
2) disable and re-enable grouping when data is changed in the store (~10 sec of hang time not really acceptable)
3) maybe remote grouping/paging ... will help (did not tried it yet this will be my next step)

[Colin Alworth]

Thanks for the report. I need a little more information before I can start building a test sample around this, or a test sample from you (following our bug template) would help a lot.

Are you measuring this time in dev mode, or in compiled JS?

Do you experience the same performance hit with normal sorting? Grouping is mostly a sorting operation, plus rendering all similar items in the same parent element so they can be expanded/collapsed.

When you add new items after the grid is grouped, are you inserting them in the correct location so they are with the rest of their group?

Roughly how many columns are in your grid? Anything custom, i.e. more than just drawing text?

What are you using as your data model? We've heard similar reports of massive performance problems with RequestFactory ValueProxys, but it ended up being due to the very slow .equals implementation in ValueProxy, not anything we can fix in GXT.

[ByReaL]

i added
Date date = new Date();
DateTimeFormat.getFormat("H:mms.S").format(date)
and i print the date in a text area (built in logging) after each call in java

there are 8 visible columns and 12 hidden columns (user may hide make visible columns as he see fit)

i tried sorting (by clicking the column header) and is in the 5-6 sec range so it's in line with your observation


good performance

AR2Service.get1(a1, a2, a3, new AsyncCallback<List<MyObject>>() {
    public void onFailure(Throwable caught) {
        Info.display("Error",caught.toString());
    }
    public void onSuccess(List<MyObject> result) {
        myStore.addAll(result);
        view.groupBy(myAColumn);  
    }
});

bad performance

view.groupBy(myAColumn);  
AR2Service.get1(a1, a2, a3, new AsyncCallback<List<MyObject>>() {
    public void onFailure(Throwable caught) {
        Info.display("Error",caught.toString());
    }
    public void onSuccess(List<MyObject> result) {
        myStore.addAll(result);
    }
});

long story

private final AR2ServiceAsync AR2Service = GWT.create(com.ar.client.AR2Service.class);MyObjectProperties myProps = GWT.create(MyObjectProperties.class);
final ListStore<MyObject> myStore = new ListStore<MyObject>(myProps.id());






final GroupingView<MyObject> view = new GroupingView<MyObject>();
ColumnModel<MyObject> myCM = new ColumnModel<MyObject>(myColumnConfig);
final Grid<MyObject> myGrid = new Grid<MyObject>(myStore, myCM);




myGrid.setColumnResize(true);
myGrid.setColumnReordering(true);


view.setShowGroupedColumn(false);
view.setForceFit(true);
view.setStripeRows(true);
view.setAutoFill(true);
view.setTrackMouseOver(true);
view.setColumnLines(true);
myGrid.setView(view);




AR2.logView.log("C1");
AR2Service.get1(a1, a2, a3, new AsyncCallback<List<MyObject>>() {
    public void onFailure(Throwable caught) {
        Info.display("Error",caught.toString());
    }
    public void onSuccess(List<MyObject> result) {
        AR2.logView.log("C1 - results are in");
        myStore.addAll(result);
        AR2.logView.log("C1 - results are added to the store");
        view.groupBy(myAColumn);     <------ the time here is ~6 sec
        AR2.logView.log("C1 - grouping enabled");
    }
});


AR2.logView.log("C2");
AR2Service.get2(a1, a2, a3, new AsyncCallback<List<MyObject>>() {
    public void onFailure(Throwable caught) {
        Info.display("Error",caught.toString());
    }
    public void onSuccess(List<MyObject> result) {
        AR2.logView.log("C2 - results are in");
        view.groupBy(null); <------ the time here is ~6 sec ( i set it to null to remove grouping, not sure if there is a better way to do it)
        AR2.logView.log("C2 - grouping disabled");
        myStore.addAll(result);
        AR2.logView.log("C2 - results are added to the store");
        view.groupBy(myAColumn); <------ the time here is ~6 sec if i have that line with groupBy null, if i remove that line it will hang here forever (beyond may patience 1-2 min)
        AR2.logView.log("C2 - grouping enabled");
    }
});

[ByReaL]

Required InformationVersion(s) of Ext GWT3.0.1 GPLBrowser versions and OS(and desktop environment, if applicable)

• «Internet Explorer 11, Windows 7 x64»
• Chrome 32.0.1700.19 beta-m Aura, windows 7 x64

Virtual MachineNoDescriptionenabling grouping groupBy on a grouping view before data is added to a store creates a performance problemRun modeproduction/devSteps to reproduce the problem

view.groupBy(myAColumn);  AR2Service.get1(a1, a2, a3, new AsyncCallback() {    public void onFailure(Throwable caught) {        Info.display("Error",caught.toString());    }    public void onSuccess(List result) {        myStore.addAll(result);    }});

Expected resultit should add the data to the store in a decent time same as groping was not enabled or not much slowerActual resultit takes a very long time for grid to be displayed/updatedTest case

view.groupBy(myAColumn);  AR2Service.get1(a1, a2, a3, new AsyncCallback() {    public void onFailure(Throwable caught) {        Info.display("Error",caught.toString());    }    public void onSuccess(List result) {        myStore.addAll(result);    }});

Helpful InformationScreenshot or video

• «Link to attachment»

Live test«http://… Address for a test case for this bug on a running server»Debugging already done

• «none»

Possible fixdisable grouping while adding items to the store and enable groping after the items have been added to the store

AR2Service.get1(a1, a2, a3, new AsyncCallback() {    public void onFailure(Throwable caught) {        Info.display("Error",caught.toString());    }    public void onSuccess(List result) {        myStore.addAll(result);       view.groupBy(myAColumn);      }});

not tried yet to do remote sorting (grouping if possible))


i also did a JS CPU profiling in Chrome for 1 minute (during the hang period)

53% spent in get offsetHeight
20 % spent in set innerHTML
15% spent in getPropertyValue

i'll try to attach a picture

[Colin Alworth]

Thanks, the performance figures do help, though we really need to know why those are getting called so frequently.

Your sample still isn't complete though, so I can't possibly run it to reproduce this: I still don't have AR2Service, AR2, MyObject, nor do i have *any* grid configuration code.

[ByReaL]

source.zip

i have attached the view, the object , the data in excel format

public List<DbResultsTestCase> getTestCasePageXY(String aUser, String aPath, String aRunDate) throws IllegalArgumentException {


        List<DbResultsTestCase> TestCasePageData = new ArrayList<DbResultsTestCase>();
    
                TestCasePageData.add(new DbResultsTestCase(................)); <<-- add here that data from excel, use anywhere from 100 to all rows, 2500 of them will produce a very noticeable result (6 sec vs what looks like a total hang), must copy paste data, or write a bit of code to read from excel or save as csv .... 1 object per row


        return TestCasePageData;
    }

[ByReaL]

any update on this? is still any info required ?