Project: Complete UI rewrite or radiology and toolkit as an open web application


Congratulations on being selected for GSoC 2022! Use this topic for all communications this summer. No private messages should happen. Use the Jitsi link below if you need to have real-time discussions with your mentors.

@sunbiz @judywawira I am glad to be working with and mentored by experienced mentors like you. I just wanted to get some feedback on my proposal, and any changes or suggestions on the plan I laid out to complete this project.

For the community bonding period, I will be getting an understanding of the UI workflow, the code base workflow, and the detailed designs (following the material design philosophy). Any optimizations in this?

Details in Blog Post: GSoC - Community bonding period (LibreHealth)

Proposal: GSoC Proposal - LH-Toolkit & Radiology UI Re-Write - Google Documenten

I got this warning when I was building radiology and I think this needs attention.

[WARNING] npm WARN deprecated bower@1.7.10: This Bower version has SECURITY BUG THAT ALLOWS TO WRITE TO ARBITRARY FILE ON YOUR COMPUTER when you install malicious package. Please upgrade Bower to at least version 1.8.8 if you don't want to get hacked. More info:

We should update to bower@1.8.8

1 Like

Good initiative, go for it.

I have been going through the codebase and understanding various workflows’ data flow. I came across lh-radiolog-owa which was updated 4 years ago and even though the repo name says owa it doesn’t follow Open Web Apps Module folder structure. It is instead an Angular app. Is this repo relevant?

lh-toolkit-legacyui is the UI module currently used in lh-toolkit so, this is what I will be re-writing as an owa right? Or there will be a different repo for the new owa?

I don’t currently understand OHIF Viewer and what it does, so I am going through its docs and trying to make sense of it. Will ask questions regarding it in the future.

I have also been working on creating the designs for the new UI on Figma and this is what the current ones look like. Early feedback on the designs would be great so that I can implement the reviews and finalize the designs before the community bonding period ends.

Link to Figma Designs

P.S. I am consulting one of my friends Yuvraj for the UI designs since he is a better UI designer than I am. I hope that’s okay, if not I will stop doing that.

@sunbiz @judywawira

No, that’s gives LibreHealth Toolkit a UI that’s useable – otherwise, you don’t really have a UI for it, just the REST API. The UI you’re rewriting is in the Radiology Module.

That’s a DICOM viewer to view the studies. Don’t worry about that.

Understood. Can I please get feedback on the designs?

The community boding period will be ending in around 4 days, and it would be very helpful if we could have a meeting later this week before the coding period begins. @sunbiz @judywawira

I will personally ensure that this doesn’t go against you. I reached out to @sunbiz.

If you don’t hear from @sunbiz by 2022-06-10T00:00:00Z then reach out to me and I’ll figure something out.

Thank you, I will do that.

1 Like
    "version": "0.1",
    "name": "My App",
    "description": "My App is a Packaged App",
    "launch_path": "index.html",
    "icons": {
        "16": "img/icons/mortar-16.png",
        "48": "img/icons/mortar-48.png",
        "128": "img/icons/mortar-128.png"
    "developer": {
        "name": "Me",
        "url": ""
    "default_locale": "en",
    "activities": {
        "openmrs": {
            "href": "*"

This is an example manifest.webapp present on the openmrs-module-owa’s, what I can observe from this is that we need to have an index.html file which the module uses as the "launch_path".

Maybe we can use frameworks like react (in which I have a lot of experience) to render the UI in this index.html file.

The skeleton of the web app can be created using this tutorial

Please, do let me know if I am thinking in the right direction.

You can use whatever framework you like for the OWA. The index.html can include JS files.

You just need to know what you’re doing enough to get the job done in 12 weeks. Choose something you are familiar with or you can learn quickly.

You don’t have to change any of the existing code… you will need to use the components that were written, and you will need to assemble the components. I like your Figma designs. It will be good to implement those using the existing web components.

You also don’t have to write it against the lh-toolkit underlying codebase. You need to use the FHIR server that is used as part of the web components. It can be the HAPI FHIR or any other FHIR server

I’ll set up the server, and create the owa under my name the ownership of which can be changed upon completion, or maybe you can create a repo and provide me access.

I’ll then move ahead and set up the CI and CD pipeline. The timeline of this would be to complete it by 2022-06-12T18:30:00Z

Does this plan sound good?

Is there a repo for my project already created or should I create on in my name? @sunbiz @judywawira

CI & CD is up, it will deploy in preview on MR on ui-rewrite branch and in production when pushed to the ui-rewrite branch.

What could be a good way to add lh-toolkit-webcomponents to the OWA? Should I just clone them and remove the .git folder and import packages from it?

@r0bby @sunbiz @judywawira

@rosekamallove no, you should not replicate the code. Just add them to the package.json, so that they can downloaded and used from npm.