Severe Performance Degradation after Upgrading to 3.0 on a ListGrid with a Large Sets

[chatchawee.tangsayan]

Issue Title:
Severe Performance Degradation after Upgrading to 3.0 on a ListGrid with a Large Set of Fields

Issue Details:
After upgrading from Smart GWT 2.5 to 3.0, the data setting process in the the below standalone test case changes from a few seconds to more than a minute for all three major browsers.

My Test Environments:
GWT 2.3.0
Smart GWT 3.0p (http://www.smartclient.com/builds/SmartGWT/3.0p/LGPL/2012-01-16)
Smart GWT 2.5 (http://code.google.com/p/smartgwt/downloads/detail?name=smartgwt-2.5.zip&can=2&q=)
Test against compiled javascript files on the following browsers
- Windows Internet Explorer 9.0.8112.16421, Update Versions 9.0.4
- Firefox 8.0
- Google Chrome 16.0.912.75 m
Windows 7 Ultimate Service Pack 1


Standalone Test Case - click the button above the grid to populate data:

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;


public class ListGridTester implements EntryPoint {
    
    public final static int COLUMN_COUNT = 100;
    public final static int ROW_COUNT = 10;

    ListGrid listGrid;  

    @Override
    public void onModuleLoad() {
        VLayout layout = new VLayout();
        layout.setHeight100();
        layout.setWidth100();

        // Create a list grid with COLUMN_COUNT columns
        listGrid = new ListGrid();  
        listGrid.setWidth100();
        listGrid.setHeight100();
        listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
        listGrid.setAutoFitFieldWidths(true);

        ListGridField[] listGridFieldArray = new ListGridField[COLUMN_COUNT];
        for (int i=0; i<COLUMN_COUNT; i++) {
            listGridFieldArray[i] = new ListGridField("COLUMN_"+i);
        }
        listGrid.setFields(listGridFieldArray);

        // A button to start populating data into the grid
        Button button = new Button("Populate " + COLUMN_COUNT + " columns");
        button.addClickHandler(new ClickHandler() {
            
            @Override
            public void onClick(ClickEvent event) {
                Record[] recordArray = new Record[ROW_COUNT];

                for (int i=0; i<ROW_COUNT; i++) {
                    Record record = new Record();
                    for (int j=0; j<COLUMN_COUNT; j++) {
                        record.setAttribute("COLUMN_"+j, "r:"+i+", c:"+j);
                    }
                    recordArray[i] = record;
                }
                listGrid.setData(recordArray);
            }
        });

        layout.addMember(button);
        layout.addMember(listGrid);
        layout.draw();  
    }

}

[Isomorphic]

There's no significant degradation between releases. The request to autofit a grid with 100 columns is what makes things slow, and the docs set this expectation. You most likely tested on 2.5 without this setting, then on 3.0 with this setting.

[chatchawee.tangsayan]

Thanks for your reply. However, I have tested both 2.5, and 3.0 with exactly same code, the standalone test case above, and their results are really different.

[Isomorphic]

Another difference here is that in 3.0 autofit was upgraded so that it would be applied if setData() was called even if the original dataset was empty. So what you're really seeing here is that the autofit behavior is slow as expected in both editions, but is not active at all in 2.5 because of the way you are populating data.

[chatchawee.tangsayan]

Thank you for your explanation. I have verified that data setting on 3.0 becomes very fast when the autofit is disalbed. However, it seems to me that this feature is also active in 2.5 since I see the width of each column is perfectly fit with its data/title when the autofit is enabled (which is similar from what I get from 3.0) as you can see in the attached images.

In the real situation, the data is fetched from a RestDataSource.

[Isomorphic]

No, you're seeing auto fitting to titles is quick, auto fitting to data is much slower (in both builds - there was no regression).

[chatchawee.tangsayan]

When observing the attached "Image1" below which is the result produced from SmartGWT 2.5, I still think that autofit is applied for both title and value. Please kindly advise me if I misunderstand something.

Here is result of new tests. "Test case 1" is modified from the previous test case by putting long text in even columns. "Test case 2" doesn't specify "setAutoFitFieldWidths", and test the autofit feature from the header context menu.

Version, Test Case 1, Test Case 2
2.5, 2 seconds (image1), 8 seconds(image2)
3.0, 82 seconds (image3), 11 seconds (image4)

Test Case 1: setAutoFitFieldWidths = true

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;


public class ListGridTester implements EntryPoint {
    
    public final static int COLUMN_COUNT = 100;
    public final static int ROW_COUNT = 10;

    ListGrid listGrid;  

    @Override
    public void onModuleLoad() {
        VLayout layout = new VLayout();
        layout.setHeight100();
        layout.setWidth100();

        // Create a list grid with COLUMN_COUNT columns
        listGrid = new ListGrid();  
        listGrid.setWidth100();
        listGrid.setHeight100();
        listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
        listGrid.setAutoFitFieldWidths(true);

        ListGridField[] listGridFieldArray = new ListGridField[COLUMN_COUNT];
        for (int i=0; i<COLUMN_COUNT; i++) {
            listGridFieldArray[i] = new ListGridField("COLUMN_"+i);
        }
        listGrid.setFields(listGridFieldArray);

        // A button to start populating data into the grid
        Button button = new Button("Populate " + COLUMN_COUNT + " columns");
        button.addClickHandler(new ClickHandler() {
            
            @Override
            public void onClick(ClickEvent event) {
                Record[] recordArray = new Record[ROW_COUNT];

                for (int i=0; i<ROW_COUNT; i++) {
                    Record record = new Record();
                    for (int j=0; j<COLUMN_COUNT; j++) {
                        if ((j) % 2 == 0) {
                            record.setAttribute("COLUMN_"+j, "The even columns have much longer text.");
                        } else {
                            record.setAttribute("COLUMN_"+j, "short.");
                        }
                    }
                    recordArray[i] = record;
                }
                listGrid.setData(recordArray);
            }
        });

        layout.addMember(button);
        layout.addMember(listGrid);
        layout.draw();  
    }

Test Case 2: setAutoFitFieldWidths = false, and apply "auto fit all columns" from the header context menu. (recorded time after clicking the "auto fit all columns" menu).

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;


public class ListGridTester implements EntryPoint {
    
    public final static int COLUMN_COUNT = 100;
    public final static int ROW_COUNT = 10;

    ListGrid listGrid;  

    @Override
    public void onModuleLoad() {
        VLayout layout = new VLayout();
        layout.setHeight100();
        layout.setWidth100();

        // Create a list grid with COLUMN_COUNT columns
        listGrid = new ListGrid();  
        listGrid.setWidth100();
        listGrid.setHeight100();
        listGrid.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);

        ListGridField[] listGridFieldArray = new ListGridField[COLUMN_COUNT];
        for (int i=0; i<COLUMN_COUNT; i++) {
            listGridFieldArray[i] = new ListGridField("COLUMN_"+i);
        }
        listGrid.setFields(listGridFieldArray);

        // A button to start populating data into the grid
        Button button = new Button("Populate " + COLUMN_COUNT + " columns");
        button.addClickHandler(new ClickHandler() {
            
            @Override
            public void onClick(ClickEvent event) {
                Record[] recordArray = new Record[ROW_COUNT];

                for (int i=0; i<ROW_COUNT; i++) {
                    Record record = new Record();
                    for (int j=0; j<COLUMN_COUNT; j++) {
                        if ((j) % 2 == 0) {
                            record.setAttribute("COLUMN_"+j, "The even columns have much longer text.");
                        } else {
                            record.setAttribute("COLUMN_"+j, "short.");
                        }
                    }
                    recordArray[i] = record;
                }
                listGrid.setData(recordArray);
            }
        });

        layout.addMember(button);
        layout.addMember(listGrid);
        layout.draw();  
    }

In addition, when performing "Test Case 2" with both 2.5 and 3.0 on FireFox and Chrome. I've found an alignment issue between header row and data rows. Please see Image5.