GSoC 2021 : An astonishing journey with OpenMRS | Vineet Sharma

This story describes my whole work done during my coding period of 10 weeks with OpenMRS under Frontend Squad.

Project: Clinical Data Management

Mentors: Mr. Dennis Kigen | Mr. Donal Kibet | Mr. Burke Mamlin

Who am I?

I am Vineet Sharma, a student at the National Institute of Technology Hamirpur, pursuing an Integrated B.Tech + M.Tech Dual Degree and will be post-graduated in 2022. I have worked in web development for the past 2 years and have also represented our institute in National level hackathons during my study.

Contribution in OpenMRS

I joined OpenMRS in February 2021 and started my code contributions in March 2021. I was very determined and enthusiastic to be a part of a great and helpful community. My journey in OpenMRS was a life-changing experience, got to learn about open-source and was a great platform to start a professional career. I will surely encourage my juniors and my mates to contribute to OpenMRS.

Abstract

Clinical Data Management is a child project under Modernizing Administrative functions for OpenMRS. The project focuses on porting administrative functions for managing clinical data within OpenMRS to OpenMRS 3.0: A Frontend Framework. As frontend technologies have evolved quickly over the past 5 years, many sites have started making their front ends for the platform, Thereby, OpenMRS is moving from legacy server-rendered pages to React using Carbon Design within a micro frontend framework.

My Responsibilities

My work as a student Developer, being a part of “Microfrontend Squad”, was to build various extensions and widgets/ sections. Along with that, I was responsible for communicating with various teams during the period and developed in collaboration with those teams.

Acknowledgment

I have immense pleasure in expressing my sincerest and deepest sense of gratitude towards my mentors, senior developers, coordinators from various teams, and GSoC admins for their assistance, valuable guidance, and cooperation in carrying out the project successfully. I am greatly thankful to my parents, friends for their motivation, guidance, and help whenever needed.

Projects completed

Below is the list of all the projects I completed during my coding period at GSoC’21 @ OpenMRS.

Past Visits Widget

Link to the Pull Request: https://github.com/openmrs/openmrs-esm-patient-chart/pull/276
Link to the Repository: https://github.com/openmrs/openmrs-esm-patient-chart

Motive

The main motive behind building the past visits widget was to show visit summaries of a patient to the user. The widget consists of 2 parts:

1. List of encounters
2. Observations
3. Visit Summary
4. Diagnoses
5. Visit Notes
6. Test Results
7. Medications

Problems faced

Since this was my first big project after my small contributions during the period, I faced many issues while building this project, some were related to designs, because I was not much knowledgeable with the style guide. Another issue I faced was related to the API endpoints which I was not familiar with at that time. I used to look at the pre-existing code and take an idea from there or used to communicate with the Backend Team. All the members were very helpful to me.

Issues resolved

1. I checked out already implemented widgets and extensions to get a view.
2. I checked out the documentation about carbon components and videos on extensions made by senior developers.
3. I reached out to the senior developer for help wherever needed.

Results

The final widget looks like this:

Fixed the color profile of nav links

Pull request Link: https://github.com/openmrs/openmrs-esm-core/pull/129

Repository: https://github.com/openmrs/openmrs-esm-core

Motive

The motive behind the change was to fix the color profile of nav links.

Results:

Before:

After:

Fixed design issues in Patient Registration Form

Pull request Link: https://github.com/openmrs/openmrs-esm-patient-management/pull/14

Repository Link: https://github.com/openmrs/openmrs-esm-patient-management

Motive

The patient registration form when first made, consisted of input sections one below another. As per the design, the input sections were grouped according to sub-divisions. I was instructed by my mentor Mr. Dennis Kigen to do the changes.

Problems Faced

1. The structure of how the page was created was changed.
2. Many discussions happened between the senior developers as to how the configuration file will have to be designed to match the new designs.

Problems Resolved

After discussions and coming to conclusions, I did some changes in re-structuring the code and the corresponding CSS.

Result

The final view of the registration page looks like this:

Active Visits Widget

This widget was decided to showcase the latest 50 visits that happened in the facility. This widget was made in 2 iterations as discussed below:

Active Visits Widget — Iteration 1

Pull Request Links:

https://github.com/openmrs/openmrs-esm-patient-management/pull/15

https://github.com/openmrs/openmrs-esm-patient-management/pull/17

Repository:

https://github.com/openmrs/openmrs-esm-patient-management/tree/main/packages/esm-active-visits-app

Motive

The motive of the Active Visits Widget was to showcase the latest visits in the facility. The widget included:

1. Latest 50 visits in the facility.
2. Pagination with variable page sizes
3. Searching for a visit on different parameters
4. Link to the patient chart

Problems faced

1. Several discussions on whether to show only the day’s visits or to show a no. of predefined visits happened.
2. Which time format is to be used when fetching the results(UTC or Local time)
3. Various small bugs in different iterations came up along the way.
4. Issues related to carbon design’s pagination.
5. Issues related to styling came up because of no availability of designs beforehand.
6. Implementation of searching on my own.

Problems resolved

1. After discussions among Mr. Jonathan Dick, Mr. Manuel Romar, Mr. Dimitri, and Mr. Burke, we concluded showing the top 50 visits.
2. Bugs were removed in the 2nd pull request.
3. I checked out the docs to the pagination component online.
4. I talked to the design team about the design improvements after every iteration.
5. I checked out the implementation of searching in the carbon design’s data table and took the inspiration from there to implement it on my own.

Results

Active Visits Widget — Iteration 2

Pull Request Link: https://github.com/openmrs/openmrs-esm-patient-management/pull/28

Motive

The motive of the second iteration is to show Visit Summary for a particular visit, using the same widget that was built in the Past Visits app, This way the admin user will be able to have a view over all the visits and what is the current status of the visit.

Problems Faced

1. Some issues related to Carbon’s DataTable styling were refactored in the expansion view.
2. Styling of one table inside another table was a big issue to handle.
3. Zebra styling along with expansion view was also an issue to handle.
4. Minor changes in the visit summary widget to fit in.

Problems resolved

1. All the stylings were fixed after a long try of hits and tries.
2. Custom classes to override carbon component classes were added.
3. A few changes in the visit summary widget were also done to act as a separate extension.

Result

Add Patient to Patient List Modal

Pull Request links: https://github.com/openmrs/openmrs-esm-patient-management/pull/26

Repository: https://github.com/openmrs/openmrs-esm-patient-management

Motive

To add a patient into a patient list (cohort), we display a modal to show all the patient lists present and to select which lists to add the patient into.

The widget should include:

1. Fetching all the patient lists
2. Hiding the lists the patient is already a part of
3. Searching through the patient lists
4. Showing notification toasts whether the patient is added to the list or not.

Problems Faced

1. When I started working on the modal, multiple changes on the Cohort module in the backend and frontend were taking place simultaneously.
2. Endpoints were not present when I started working.
3. Hiding the lists the user is already a part of.
4. Pagination was to be included or infinite scroll was to be added.

Problems Resolved

1. When the endpoints were not present, I decided to first make the frontend structure.
2. The developers decided to create a custom modal instead of using the carbon modal and I also contributed some design changes to it.
3. Pagination and searching the lists were completed.
4. When endpoints were provided, I added the fetching and integrated it successfully.

Result

The final widget/modal looks like this:

Cohort Details

Pull Request Link: https://github.com/openmrs/openmrs-esm-patient-management/pull/34

Repository Link: https://github.com/openmrs/openmrs-esm-patient-management

Motive

On the cohort details page, we need to showcase the details about the count of patient members in the cohort and the details about the members. The page includes:

1. Description of the Patient list
2. Count of the patient members
3. Action buttons
4. Edit Patient list details
5. Duplicate list into own list
6. Delete the list
7. Details about the patient members
8. Searching through the patient members
9. Pagination

Problems Faced

1. The endpoint for duplicating the patient list into their own list is not yet completed.
2. The endpoint for fetching the patient list members does not provide all details about the patient.
3. The count of the members is also not provided by the endpoint.

Work done

1. The structure of the cohort detail page is complete.
2. The fetching of patient list details and patient list members is implemented.
3. DataTable to list patient list members is completed.

Results:

The final widget looks like this: