β => 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.
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:
- allergyintolerance
- appointment
- codeable-concept
- dosage
- encounter
- medicationrequest
- medicationstatement
- quantity
- reference
- schedule
- servicerequest
- slot
- vitals
Some of the other changes include :
- [status: β ] Convert all the label Case to Normal for consistency
- [status: β ] Fix build for all the failing components
- [status: β ] Create single component for allergyIntolerance
- [status: π§] UI improvements
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:
[status: β ] Check In workflow MR
[status: β ] Appointment workflow MR
- visit-nurse:
[status: β ] visit-nurse workflow MR
- visit-provider & order:
[status: π§] visit provider MR
- e-prescription:
[status: π§] e-prescription workflow MR
Hereβs a list of MRs I opened during Summerβ21:
- [Status: β ] [init]react-ehr : initial commit
- [Status: β ] [fix]: fixes made for checkin workflow
- [Status: β ] [feat]: - add reference, codeable-concept data type and schedule resource component
- [Status: β ] [feat]: add slot resource component, modify schedule component for edit operation
- [Status: β ] [feat]#104, #103, #101 : add component for appointment resource , fix builds and change label case
- [Status: β ] [feat]: add unit tests for appointment workflow components
- [Status: β ] [appointment]: update submodule, implement workflow, add tests
- [Status: β ][fix]: fix timezone error in slot test
- [Status: β ] [fix]: fix fhir-coding test
- [Status: β ] [visit]: create fhir-encounter component, add tests, add readme file
- [Status: β ][visit]: create a single component for allergyIntolerance resource, remove exisiting allergy packages, add tests
- [Status: β ][visit]: add medicationstatement component, add tests
- [Status: β ][visit]: create servicerequest component, add tests
- [Status: β ][visit]: create component for vital signs, add tests
- [Status: β ]feat(medication-request): add medication request component, add dosage backbone component
- [Status: β ]feat(visit): add screens for the visit-nurse workflow
- [Status: β ]feat(allergyintolerance): add patient and encounter fields in the component
- [Status: β ]build(polymer): fix typo in fragments
- [Status: π§] feat(visit-provider): implement the visit-provider workflow
- [Status: π§] Draft: feat(e-prescription): add screens for the e-prescription workflow
- [Status: π§] (style): set all field's type to outline
- [Status: π§] docs: add readme
- [Status: π§] style(placeholder-text): add placeholder text and helper text, remove unused label
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.
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.
https://geforce6t.github.io/blog/categories/LibreHealth/
Farewell, reader! :β)
Hope to see you next year, with a new story ποΈ.