Reaching the Final Evaluations of Google Summer of Code 2010

Last week was the final week of Google Summer of Code 2010 and I spent it in writing module documentation, documenting the code and completing few enhancements. I did some refactoring to the code - introducing a new class FlowsheetPanel to have the user interface generation code (earlier it was inside the onModuleLoad() of the Flowsheet EntryPoint class). This idea was suggested by my mentor Sy, to make the code re-usable. The user interface generation code was put inside the onRender() of the FlowsheetPanel class, which is a subclass of LayoutContainer. In the Flowsheet EntryPoint class, new instance of FlowsheetPanel was simply created and added to the root panel.

Searching for observations based on ConceptName was handled using the default filtering options in the Grid widget earlier; since that way is only known by the users who read the documentation or the users who explore the module, I added the search box on the on top of the observations grid, visible to all users. The image below show's the new search box:

Module documentation for the Flowsheet module was created in the wiki page located at : http://openmrs.org/wiki/Flowsheet_Module. This wiki page contains the details of the module, especially the features of the Flowsheet module and how to use them. Also I have provided link for other resources related to the module.

I documented the source code using class level and method level comments and checked in the code to the svn repository. Last Thursday I attended the weekly Developer Call and listened to the final presentations of the Group-3 GSoC students. There were some good presentation on GSoC projects.

According to the GSoC 2010 timeline, next week is the deadline for the final evaluations. I had an awesome 12-weeks, working on the Flowsheet module and with the OpenMRS community. It is a life time opportunity for me to work with the developers all around the world. As I have reached all the goals we planned for the summer, I am so glad and feel very much satisfied. I hope everything will be fine with the final evaluations... The great motivation I got while working with the OpenMRS community during this summer opened me new paths towards contributing to FOSS. I am sure that this is a good starting point for me to reach many targets in contributing to the Open Source communities... I will continue my contribution to OpenMRS in the feature and will try to contribute to some other open source projects as well...

Eagerly waiting for the final evaluations next week...

Leveraging the new features in GXT (Ext GWT) 2.2 Beta...

I couldn't blog last week. So I will be writing about how I progressed with the enhancements to the flowsheet module in the past two weeks. I completed my final demonstration on July 22nd and it was very success. I received very good feedback and more motivation from the OpenMRS community. I was really happy to hear that the developers of the community liked the progress of the project and the new look to the module.

After the demonstration I started working on the feedback given by my mentors, Burke and other developers. One of the major issue I had earlier was the height of the main Grid widget. Earlier I had a fixed size for the height of the grid, an integer multiple of the number of rows in the grid. But in some browsers, there were more white spaces left in the bottom and in some other browsers there was scroll bar added to the grid. After trying with many options, finally I found the best way to do it following the AutoHeightGrid sample. Now the Grid's height is adjusted automatically.

Another feature suggested was to highlighted the selected obs value in the graph as well. I managed to do it my using a star for the selected value and dots for other values. The screenshot below shows the change:

I did the other small changes like header of the pop-ups, make windows to close when ESC is pressed, etc, as suggested. Thereafter I started working on the two tasks left in the development plan: Adding search functionality to search by a name of obs and handling abnormal flags.

I came across the new release of GXT and the features in Ext GWT 2.2 Beta. One of the major feature added is the functionality to filter grid columns using boolean, integer range, string values etc. I understood that this new feature will be handy in doing the first task I mentioned above and went through the sample widget using this feature. I managed to get the way to add the filtering feature and added it to the main grid of the flowsheet after upgrading the GXT jar to Ext GWT 2.2 Beta. The output was very nice! The filtering of column is very fast and easy to handle. Some screenshots below showing this new features:

I believe that this filtering feature will be very handy.

I added some code to show the abnormal values using a color code; this color code will be finalized with others' suggestions. I'll add data about the color code in the flowsheet once it's finalized, so that others can understand it easily. Since there are no much abnormal data, I couldn't check all the scenarios; I will be adding more data and checking them as well. Once such indication is shown in the screenshot below.

While reaching the end of summer in next two weeks, I am left with the documentation work now. I started on writing the module documentation and will be completing it by next week. Looking forward to complete all planned tasks before the 'pencils down' date of GSoC and then continue further enhancements with future versions.

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