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

Getting through the Mid-term Evaluations...

Just now received the mail from the Google Open Source Programs Team, announcing the results of the mid-term evaluations for my project. Happy that I got through it...

Special thanks to my mentors Sy and Paul, and the whole OpenMRS community for the guidance and support... I am sure that with this great motivation, I can successfully complete the project and get through the final evaluations ...

Reaching the Mid-Term of the Summer

We have reached the mid of the summer and the mid-term evaluations are to be completed during this week. I am really happy that I have reached far beyond my mid-term goals and completed majority of the tasks for the summer. Now I am left with few more tasks, ehancements and documentation. I believe I can complete them far before the end of summer and work more on future enhancements. I have updated the 'Planning' section of my project wiki . I am very much thankful to the whole OpenMRS community; especially my mentors Sy Hass and Paul Biondich, and Burke for their wonderful guidance and feedback on my work. The motivation I got from my mentors and the rest of the community was the secret behind my success in this project. I am sure that this will continue during the rest of the summer and in the future as well.

I was able to complete some nice feature additions to the Flowsheet module. I added a flowsheet section in the pop-up window which shows the obs values against dates in a tabular view. For numeric type observations, the pop-up window has a the line chart along with this flowsheet. The screenshots below, shows the newly added features.

I used the GXT's Grid widget to create the flowsheet. This required some learning since it has some data binding confiurations. I am planning to use the Grid widget for the main view of the module where the obs are listed in reverse chronological order. This will give a nicer look than the current one. I got ideas for some more features from my mentors and Burke and I am working on it along with the rest of the tasks. Looking forward to the demo on the 22nd, July.

Hope everything will be fine with my mid-term evaluations.

Creating a Date-range double slider

Last week was a special one where I have created my first GWT-widget. As per the suggestions made by my mentors & Burke, I decided to have a Slider widget for the date range selection. The major reason for choosing this, beyond the nice date picker widget was the amount of space it holds in the whole page. I searched for a double-slider. But unfortunately either GWT or GXT doesn't have a double-slider. I found a sample double slider in the GWT incubator mailing list and I went through it. I followed the same way to create my widget for date range selection.

Creating the widget was a wonderful experience to create the widget, where I learnt a lot about the GWT framework. I learned about the base widgets,handlers and event listeners. I got help from the developers at ##gwt IRC. I was an amazing learning experience. And I was more happy when my mentors & Burke liked it.

Then I changed the way of concept filterting. As suggested, I modified that feature to select results by ConceptClass types. I replaced the ListBox widget with a CheckBoxGroup widget. The concept classes for which the patient has obs, will be dynamically generated as check box options. The screenshots below shows the new look to the module. The slider widget and checkboxes really reduced the space for the filtering options form and increased the area to display observations.

I got valuable feedback from my mentors and Burke. Currently I am working on improving the pop-up window with details, to have the line-chat and flowsheet together. Hope I can finish this before the next demonstration on July 22nd. Mid-term evaluations are to be held next week and I've reached the goals exceeding my personal expections. Having a great time and I am sure this will continue...

New Look to Flowsheet Module UI

During the last week I added a new feature to filter patient history by Concepts. There are options to select all concepts at one or few concepts at once. The patient history will be filtered according to that concepts and will be displayed.

I used the GXT FormPanel to enhance the UI. The screenshot below shows the new look.

Then I worked on displaying details of a single observation when clicked on it. There will be a popup window showing the details. In addition for numeric type concepts, there's an option to view the history of that particular concept in a graph(line chart). Images below shows these features.

I sent the progress update to my mentors Sy and Paul. Paul suggested some changes to the UI. I am working on them during this week. We have planning to have a discussion on Skype to discuss more on improving the module features.