More UI Enhancements to the Flowsheet module

Last week was an eventful one with more UI enhancements. I learnt lot of new things about GWT and GXT, especially using the GXT Grid widget, while doing the UI enhancements. I did a major change to the UI by changing the widget to display the obs from simple GWT Table widget to GXT Grid widget. The Grid widget gives a very nice look to the UI. I added the grouping feature to group the obs by obs date and it's really a cool stuff. Another advantage of using the Grid widget is it's support for easy data binding. In the following paragraph I explain how the data binding is handled in the Grid widget.

The GXT Grid widget uses BaseModel class for data binding. We have to have the following stepts to bind data to the Grid widget:

1. Create the model class extending BaseModel class
2. Have required constructors, getters and setters in the sub class of BaseModel class
3. It is always ideal to have a primary key fields, so that a specific entry of data can be retrieved easily
4. Create the ListStore or GroupStore objects with the type of the BaseModel class

• Subclassing BaseModel class

class ObsDataModel extends BaseModel {

public ObsDataModel(String date, String time, String value) {
set("obsDate", date);
set("obsTime", time);
set("obsValue", value);
}

public ObsDataModel(String date, String value) {
set("obsDate", date);
set("obsValue", value);
}

String getObsDate() {
return (String) get("obsDate");
}

String getObsTime() {
return (String) get("obsTime");
}

String getObsValue() {
return (String) get("obsValue");
}
}

• Creating GroupStore

       GroupingStore store = new GroupingStore();
store.groupBy("obsDate");
store.sort("obsDate", SortDir.DESC);
          sotre.add(new ObsDataModel("xxx","xxx","xxx"));

• Creating the Columns for the Grid

               List col = new ArrayList();
ColumnConfig column = new ColumnConfig();
column.setId("obsDate");
column.setHeader("Date of Observation");
column.setWidth(200);
col.add(column);

• Creating the ColumnModel and Grouping view

  ColumnModel cm = new ColumnModel(col);
GroupingView view = new GroupingView();

• Creating the Grid and and setting view

  Grid grid = new Grid(store, cm);
grid.setBorders(true);
grid.setStripeRows(true);
grid.getView().setForceFit(true);
GridSelectionModel gsm = grid.getSelectionModel();
gsm.setSelectionMode(SelectionMode.SINGLE);
grid.setView(view);

The screenshots below shows the new look to the UI. ( I have upgraded to the branch 1.7.x)

In addition to this, I did some improvements to the flowsheet pop-up. The obs selected from the main view of the module is highlighted in color. When clicked on any entry of obs in the flowsheet, it will shows more details of the obs including obs location etc. I improved the chart for numeric obs to have the range limited to 10% from more and above the max and min values. This removes unused extra space. In addition according to the available data, I've added the critical and normal range of the obs values for numeric concepts. If all data is available, it will shows the range. Otherwise it will give an interpretation using the available data (eg: 'range > xxxx' , ' range <>

During the last week I also looked at improvements to handle huge dataset. As the initial steps I measured the time delay for data transfer and rendering the UI, using the System timer. I've listed the average measurements below.

No of rows	Time delay for data transfer	Delay for rendering
240	1310ms	42ms
130	999ms	24ms
93	640ms	20ms
80	883ms	19ms
60	496ms	12ms

I started to look at possible improvements to reduce the delays in data transfer. This will be a major task left before releasing the inital version of the module.

I am looking forward to the demo on this Thursday. I am sure that I can give a good demo about the flowsheet module.

As I mentioned in my previous post, mid-term evaluations gave me more motivation to work on the project... I believe that it will bring me towards successfully completing the final evaluations as well...