Skip to content

Instantly share code, notes, and snippets.

@shashwatVar

shashwatVar/GSoC_2021_Final_Report.md

Last active March 16, 2022 18:37
Show Gist options
  • Save shashwatVar/93b02ec14ef2c5613500049717d0f5cd to your computer and use it in GitHub Desktop.
Save shashwatVar/93b02ec14ef2c5613500049717d0f5cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
GSoC_2021_Final_Report.md

LibreHealth

Organization : LibreHealth

Project : Create web components for FHIR Resources

Student : Shashwat

✅ => MR merged.

🚧 => MR open.

About the Project ( link to my GSoC proposal) :

Overall, the project was divided into two parts:

- Refactoring and creating new custom components that implement FHIR resources.

FHIR is a standard that defines how healthcare information can be exchanged between different computer systems regardless of how it is stored in those systems. FHIR Resources are the data packages used to send or receive data from a FHIR repository.

- Developing a demo EHR application that implements the most common workflows using the created web components.

Refactoring Custom Elements:

In this period many changes and improvements have been made to the webcomponents. The requirement of most of these changes were identified while developing different workflows in the React EHR application.

The major changes made this term were :

converting the components from dynamic type to presentational type : The components consisted of request and response handling, which is not a good practice as these should always be in the implemented app.

The web component can be installed in different configurations and it should be upto the dev assembling the components to handle what to do after the response.

default/empty data value for the different fields in a resource : An FHIR resource may consist of multiple fields, and every entry of a specific resource will not contain the data values for all the fields present. Hence to accommodate the facility of editing entries, every component based on a resource was provided with empty/default data value, so that later if user desires to add / change any field, he/she will face no console warnings :).

moving away from different components for different CRUD operation : Many of the resources had different components for different CRUD operation, like a component for creating a resource entry (create-slot.js) and another for getting a resource entry (get-slot.js). These components were replaced by a single component which can implement all the CRUD operations.

development of a template for creating components :

/*imports required*/  
import { LitElement, html, css } from 'lit-element';  
  
class MyCustomElement extends LitElement {  
  
 //all the properties are defined here  
 static get properties() {  
 return {  
 value: { type: Object, reflect: true },  
 }  
 }  
  
 constructor() {  
 super();  
 this.value = {};   
 }  
  
 // handle the change in input  
 setDisplayValue(e) {  
 this.value.display = e.target.value;  
 }   
  
 // templates to render the component  
 displayTemplate() {  
 this.value.display = this.value.display || "";  
 return html`<div>HELLO!</div>`  
 }  
  
 // render al the templates created   
 render() {  
 return html`  
 ${this.displayTemplate()}  
 `  
 }  
}  
  
customElements.define('my-custom-element', MyCustomElement);

All of the components created this term are based on this template:

Some of the other changes include :

Demo React EHR developement:

The react ehr bases itself on workflows. Each page in the application is a workflow. The rendering of different components inside a specific workflow is controlled using redux. As the application is basically for demo purpose, the application communicates with a demo server : https://hapi.fhir.org/.

The application also contains a search component, which is used to display search results in a tabular form with pagination based on different params passed to the component.

The documented api endpoints of the EHR can be seen at this address (this was written long before the coding period.)https://geforce6t.github.io/blog/categories/EHR/

the following workflows have been implemented for the application yet:

  • check-in:

Search component

Search component

[status: ✅] Check In workflow MR

  • appointment: Watch the video

[status: ✅] Appointment workflow MR

  • visit-nurse:

Watch the video

[status: ✅] visit-nurse workflow MR

  • visit-provider & order:

Watch the video

[status: 🚧] visit provider MR

  • e-prescription:

Watch the video

[status: 🚧] e-prescription workflow MR

Merge Requests:

Here’s a list of MRs I opened during Summer’21:

What after GSoC ?

lh-toolkit-webcomponents are a work in progress. There are a lot of improvements and features that can be added to the library. I would love to keep contributing to the library and help others to do the same.

Acknowledgements

I’m grateful to LibreHealth and Google Summer of Code for providing this incredible learning opportunity. Special thanks to my mentor Saptarshi Purkayastha for clearing my doubts and guiding me throughout the summer.

Weekly blogs during GSoC

https://geforce6t.github.io/blog/categories/LibreHealth/

Farewell, reader! :’)

Hope to see you next year, with a new story 👀️.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment