GSoC 2023: O3: Draw on a body diagram

Abstract

OpenMRS is a medical record system that has previously allowed the uploading and visualisation of patient conditions through diagrams. This feature has been critical in helping doctors better explain patient conditions to their patients. However, the module lacked certain essential functionalities that could improve the user experience. Therefore, this project aims to improve the diagramming feature in OpenMRS by allowing the upload of any diagram as an image, annotation of certain areas of the diagram with different shapes, saving and retrieving these diagrams, and additionally downloading them as an image with the edited annotations.

Objectives

The project has two parts, essential and desirable objectives. The essential objectives aim to provide the basic functionalities for uploading and editing diagrams while the desirable objectives enhance the user experience by adding more features.

Essential Objectives:

• Allow users to upload any diagram as an image to the module
• Enable users to annotate certain areas of the diagram with different shapes such as circles, squares, and single points, etc..
• Allow users to save the annotated diagrams for future reference
• Enable users to retrieve diagrams from a list of already saved ones

Desirable Objectives:

• Allow users to draw free shapes on the diagram and annotate them with a description text
• Enable users to download the diagrams as images with the edited annotations, allowing for easy sharing and printing.

Implementer Request Features

• Embedding diagrams in the forms i.e the Ampath(Angular based Engine) and Ohri Forms(React Form Engine)

Discussion on form controls for diagrams

https://openmrs.slack.com/archives/CHP5QAE5R/p1687149622112019

https://talk.openmrs.org/t/seeking-clarity-and-guidance-for-implementing-the-unique-o3-draw-on-body-diagram-app-in-openmrs-3-x/39792

https://github.com/jona42-ui/afe-diagramming-custom-control

Handling Complex obs in the OpenMRS  React form engine

• This is not present in the React form engine find the discussion here;

https://github.com/openmrs/openmrs-form-engine-lib/pull/103

• Diagram template loading

The improved diagramming feature in OpenMRS will make it easier for doctors to communicate patient conditions to their patients, leading to better health outcomes. This project will require proficiency in programming fundamentals, OpenMRS 3 microfrontend architecture, Single Page Application, OpenMRS API.

Tech Stack

• React
• Typescript
• Java
• SQL

Project Rating and length

175 hours

Medium Project

Draw On Body Diagram Examples

Weekly Blog Posts

Meeting Notes

**Meeting 1: Project Kick-off and Agenda Discussion**

- Date: May 5, 2023

- Participants: thembo42, heshan, jayasanka, grace, jesplana, pauladams, cduffy, mksd, ibacher, ball, johnblack, mogoodrich, burke, kdaud

**Agenda:**

- Introduction to the o3:Draw-on-body-diagram project and its objectives.

- Overview of the main project objectives: essential and desirable.

- Introduction of mentors and student participants.

- Discussion of project resources and references.

**Meeting 2: First Mentor Meeting**

- Date: May 12, 2023

- Participants: thembo42, heshan, jesplana, burke

**Agenda:**

- Pro Tips and Guidance for successful project implementation.

- Detailed discussion of the project timeline and realistic breakdown.

- Identifying the required technologies for the project and potential updates.

- Exploring UI/UX design considerations, especially with the ICRC team's input.

Certainly, here's the addition of the provided conversation to the relevant meeting minutes in your document:

---

**Discussion Highlights:**

- thembo42 presented mock-ups for the Draw On Body Diagram project.

- @jesplana from ICRC provided valuable feedback on the design mock-ups and use cases.

**Feedback from @jesplana:**

- Clarified the situations in which drawing on the body in an EMR is needed, such as during admission or assessment processes.

- Highlighted the need for larger images to draw on and improve visibility.

- Raised questions about attaching drawings to specific forms and ensuring they are part of patient attachments.

- Discussed the importance of integrating drawings into the attachment page for easy retrieval.

- Emphasized key user actions, including form filling, template selection, drawing, image saving, and side-by-side comparison.

- Provided a link to the ICRC war surgery manual for reference: https://www.icrc.org/en/doc/assets/files/other/icrc-002-0973.pdf

---

This addition captures the feedback and insights provided by @jesplana during the meeting, 

**Meeting 3: Technical Insights and Scoping**

- Date: May 12, 2023

- Participants: thembo42, heshan, burke, grace, jesplana

**Discussion Highlights:**

- Avoiding a body-specific solution in favor of a flexible image notation approach.

- Integration of the diagramming feature into the existing OpenMRS system.

- Supported image formats, handling of large images, and storage considerations.

- User roles and permissions for diagramming, testing and validation strategies.

- Tools and libraries for development compatibility with OpenMRS technology stack.

- Scoping and prioritization for GSoC timeline constraints.

**Meeting 4: Refactoring vs. Fresh Module Discussion**

- Date: May 12, 2023

- Participants: thembo42, heshan, jayasanka

**Discussion Highlights:**

- Deliberation on whether to continue with refactoring the legacy drawing module or creating a fresh module for the project.

- Seeking guidance on the best approach for the project's architectural direction.

**Meeting 5: Backend Focus and Progress Update**

- Date: May 16, 2023

- Participants: thembo42, heshan

**Discussion Highlights:**

- Overview of backend implementation progress.

- Details of database setup for storing annotated images and annotations.

- Implementation of necessary APIs for image operations, including storage, retrieval, and display.

- Intention to integrate APIs from the Attachments module for image upload functionality.

**Meeting 6: Update on Image Attachment**

- Date: August 14, 2023

- Participants: thembo42, heshan

**Discussion Highlights:**

- Notifying progress on attaching annotated images to patient attachments.

- Sharing a pull request for the code implementation.

- Seeking feedback on the approach and implementation.

Documentation

Talk Threads

• https://talk.openmrs.org/t/gsoc-2023-o3-draw-on-body-diagram-app-project-updates-discussion/39544?u=thembo42
• https://talk.openmrs.org/t/seeking-clarity-and-guidance-for-implementing-the-unique-o3-draw-on-body-diagram-app-in-openmrs-3-x/39792?u=thembo42

Epic

• O3-1817 - Getting issue details... STATUS

Mockup designs

• figma.com

Important Links 

• https://talk.openmrs.org/t/o3-feature-draw-on-a-body-diagram/37513
• https://talk.openmrs.org/t/ideas-for-gsoc-2023/38143/15

More Resources

• OpenMRS 3.0 Micro Frontend Demo Page

• OpenMRS 3.0: A Frontend Framework that enables collaboration and better User Experience

Project Repos

• https://github.com/openmrs/openmrs-esm-draw-app
• https://github.com/openmrs/openmrs-form-engine-lib
• https://www.icrc.org/en/doc/assets/files/other/icrc-002-0973.pdf
• https://www.ohchr.org/sites/default/files/documents/publications/2022-06-29/Istanbul-Protocol_Rev2_EN.pdf