Happy Moments...

Couple of minutes ago I received the mail from the Google Open Source Programs Team announcing the final results of Google Summer of Code 2010. I am so happy that I got through the final evaluations :-)

Simply it was a lifetime experience and opened me new paths towards achieving many new goals... My special thanks to my mentors Sy Haas and Dr.Paul Biondich for their immense support and guidance throughout the summer.. All developers of OpenMRS were very much motivating and inspiring me towards contributing to open source... Thank you very much everyone... I would like to thank all my teachers and friends for their support in every way...

Just wanted to share my happy moments...

I will be writing more about my GSoC experience soon...

Thank you every one...

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

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.

Fourth Week of Coding - Date Range Filtering

Just completed another exciting week and now it's almost a month after coding started. During this week, I modified the class diagram posted in my previous blog to have some fields like hiNormal,hiCritical, hiAbsolute,lowNormal,lowCritical and lowAbsolute in the UIConcept class. The purpose is to indicate any abnormal values of observation. Using this values, abnormal flags are indicated in red text as show below.

I will use a more effective way to show the abnormal flags in the future.

As the next task, I worked on date range filtering of Patient data. I did some search about possible widgets to use for the date range selection. DatePicker and Slider were my choices. After reading more, I used GXT's DateField (which has DatePicker popup) widget for date range selection. Using a slider widget was not a good choice in my opinion since it will be difficult to select accurate values. Using the feature of the GXT DatePicker widget which allows to specify a Max and Min value of dates to be selection-enabled, I achieved the objective. This widget will only allow to select dates between the range the patient has records.

I modified the service method which retrieve patient data to have additional parameters in order to enable date range filtering. I am happy that we reached the mid-term goal roughly by finishing this task. But there will be much more improvements in these features.

The next feature I am planning to have is filtering data by Concept. Once this features is implemented, the user will be able to filter patient data according to the Concepts related to the observations of that person. I started working on this and looking forward to finish it by next week.

In the mean time I received the Google's welcome package. It included a note book, pend and two stickers. Also the payment card as well :) .

Looking forward to keep my passion growing...

Third week of Coding - Modeling the Transfer Objects

As mentioned in my previous post, during the third week I worked on the modeling the required API classes in the GWT client side. When using GWT-RPC, the transfer objects should be serializable. The bean class can implement either java.io.Serializable interface or the IsSerializable provided by GWT library. When the GWT module is compiled using the GWT compiler, it will create these bean classes in to javascript and package them in the generated folder, which is used as a resources in the OpenMRS module. I came up with a initial version of the class diagram and it can be modified later on when requiring more details. The diagram below shows the initial version of the class diagram.

I added these classes to org.openmrs.modules.flowsheet.gwt.model package and modified the FlowsheetServiceImpl to use these classes. The image below shows the output I got.

Last Thursday I presented my project's first demo to the OpenMRS community during the developer call. I explained the project, integration of GWT-RPC to the module etc. I got good feedback and valuable suggestions from the community to handle huge amount of data. I am reading more on the suggestions to decide on the most suitable methodology. It was a great experience for me to present the demo to such a experienced group of developers. Their encouraging words always motivate me to give my best. Special thanks to my mentor Syfor guiding me to present the demo successfully.

Awaiting for many more excitements and experiences...

GWT Integration to the Flowsheet Module

As mentioned in my previous post, during the second week of coding, I started figuring out the way to integrate GoogleWebToolkit(GWT) to the Flowsheet module. As I expected, it was a challenging task since I needed to find out the integration points. My thanks to my mentor Sy and the OpenMRS developer Daniel Kayiwa. Daniel has already done some work related to GWT in his Xform module. I am happy that I could find out the way to integrate GWT. Thanks to the folks at ##gwt IRC as well. I have written the details about the integration in the module wiki page. Here I will talk more about the problems I faced and how I managed to solve them.

I faced two major problems during the integration:

1. I used a div tag id "flowsheet" in the GWT UI code to get the RootPane. But since my module name is "flowsheet", there was already a div tag defined with the id "flowsheet". When I used the same id in the JSP to hold the GWT UI, there was a conflict and the GWT was not rendered properly. When I inspected via Firebug, I found that the content window retrieved by the new div area was null. But I couldn't figure out at the first try that the name duplication was the actual cause for the problem. While going through the generated code observed in Firebug, I found that there was already a div area with that name. When I changed the name of the new div area, in to some other name, it worked fine.

2. After reading the documentations, I came to know that the servlets under the web/src of a module can be accessed via http:/moduleServlet/flowsheet/flowsheetService. But I took sometime to figure out the format of the URI parameter for the @RemoteServiceRelativePath annotation of the RemoteService interface. The @RemoteServiceRelativePath annotation specifies the relative path of the Service. In this case, the compiled GWT code resides under . So if the relative path is given as /moduleServlet/flowsheet/flowsheetService, it will end up with
http://localhost:8080/openmrs/moduleResources/flowsheet/generated-folder/moduleServlet/flowsheet/flowsheetService. To avoid that, the location ../../../moduleServlet/flowsheet/flowsheetService is used. This will end up in the correct location of the service :
http://localhost:8080/openmrs/moduleServlet/flowsheet/flowsheetService

My next task is to decide on the UI objects to be represented in the client side of GWT. I have already started working on designing a class diagram for this purpose.

The first group of GSoC students presented their project progress during the developer call on last Thursday. This week is the turn for the students belong to the second group. I belong to the second group and eagerly waiting for this Thursday to present my progress to the OpenMRS developer community. I am sure that it will bring me lot of experience. Looking forward to it....

Started the New Journey - First Week of Coding

The official coding period for Google Summer of Code 2010 started on the 24th of May. I was prepared to kickoff with coding. One the very first day, my mentor created a svn location for my module named "flowsheet". Since the name, Longitudinal Dataview Model was somewhat lengthy, we decided to go with "flowsheet" as the module name. I was having conversations with my mentor Sy via Skype and Sy assigned me the first task. It was to make the module's tab available in the patient dashboard.

I created a new module using the OpenMRS Eclipse studio, modified the configurations and started working on getting the tab available in the patient dashboard. After some amount of time looking at other module's code and module wiki I managed to find how to do that task. I created a class inside the package org.openmrs.module.flowsheet.extension.html named FlowsheetTabExt which extends the class PatientDashboardTabExt. I got a new tab called "Flowsheet" available on the patient dashboard. I informed Sy about it and Sy asked me to check in the code to the svn. I did my first commit on Monday it self to the svn location http://svn.openmrs.org/openmrs-modules/flowsheet/.

Even though we decided to GWT, for the purpose of getting the idea about retrieving patient data, I worked on to get the patient history printed on the jsp page of the module. It was just a throw-away work to get knowing the stuff. I managed to list all the obs of a patient in reverse chronological order in a jsp page. The figure below, shows the output I got.

Next, I listed the obs grouped by encounters as shown in the figure below.

After doing these two tasks, I got more understanding of how the patient history can be retrieved from the existing OpenMRS services.

Next, I worked on integrating a simple GWT UI under the Flowsheet tab of the patient dashboard. I referred the existing Xforms module code which uses GWT. I created a separate GWT project, compiled the code and copied the generated folder to module/resources. Then I used the generated javascript by a call in the jsp page. The figure below shows the output I got.

Apart from coding, we had a nice demonstration on OpenMRS by Ben Wolfe. During the demo Ben explained how OpenMRS is used in a typical system, answered questions and discussed some code as well. I got to know many things and my doubts cleared about Obs,Encounters & Concepts. The demo was very useful for all new interns.

My next goal is to write some services to retrieve data in the GWT UI. Since it requires integration of both the OpenMRS module and the GWT module, it is a challenging task. I started working on it..
The first week of coding was lot of new experience... I felt that I am learning something new and was very happy... Expecting this fun will continue through out the summer...

Getting ready towards a new journey...

During the last two weeks my main focus was on preparing myself with the technologies which I am going to use in the project. I read about GXT and Spring mostly. While reading on Spring, I referred the OpenMRS code base (both trunk and modules) to get a clear understanding of how Spring Controllers, Handlers etc are used in the project. Honestly I progressed quickly with my reading because of the real world solution I was looking at. I read more on Spring Controllers since it will be handy for me when implementing the project.

As the next step I searched for possible libraries to be used for the purpose of GXT+Spring integration. As my mentor Sy suggested, I read about GWT-SL library and looked at some code hosted online. I got the basic idea about it and I am sure that I will get more understanding once I start using it. Meanwhile I requested for svn access and I got it. The developers at OpenMRS had long discussions about the name of the module and finally decided to have "flowsheet" replacing the existing flowsheet module.

In brief the last two weeks were full of new learning experience. Now another new journey is going to start... Yes, it is the GSoC coding period... the coding period officially starts on 24th May. I am looking forward for a nice period ahead.. Also I am sure that I will be learning a lot during the next developer call on Thursday through the demonstration on OpenMRS by Ben Wolfe.

The new journey starts here and I am getting ready to give my best...

Write Code! Save Lives!

It has been two weeks since I got the surprise mail from Google! Yes, I got accepted to the OpenMRS project : Longitudinal Data Review Module. My mentors are Sy Haas and Paul Biondich.

Since I was already working on tickets it wasn't hard for me to kick off and start with preparing for the project. On one side I was continuing with creating patches for the tickets and it really helped me to understand the OpenMRS code base. At the other side, I started to read and learn about the possible technology to be used to create the widget for the module. The possible candidates were : jQuery, GWT, GXT etc... As my mentor Sy suggested, I read about these technologies and did some sample apps following some tutorials. After initial reading, I decided to choose either GWT or GXT. GXT is an extended library of GWT. I did sample GWT applications using the GWT plugin for Eclipse. It was very easy to use the IDE to develop the applications. Then I tried samples with GXT and found that it has more features and GWT.

But there seems to be a drawback of using either GWT or GXT than normal JavaScript; that is the performance issues. Since there are some OpenMRS deployments used in less-speed internet connections. But according to my further reading I found that the latest version of GWT has handled it in a nicer way to make it efficient. So me and Sy decided to go with GXT. I started to read about integrating GXT with Spring and Hibernate as suggested by Sy.

Meanwhile I was looking in to the code base related to Patient data. I used the Patient dashboard in the web application to learn more about the Observations, Encounters and Concepts related to Patients. Finally I came up with some plans to break down the tasks to be done in to smaller steps. I will continue working with this and will finalize the requirements and timeline after discussing with my mentor Sy.

The first two weeks were full of new learning experiences! I am looking forward to learn more things in the coming two weeks and prepare my self well enough to start coding on May, 24th.

I had another good experience too in the last week. On last Saturday all four Sri Lankan OpenMRS interns met and had a good time sharing our experiences. It was a really nice experience to meet the talented guys Shazin, Ruwan and Firzhan. We are planning to have meetups in the future too...