Pixel annotation tool for doctors to review and interpret MRI scans
Highlight the necessary elements with lines and labels.
Zoom in and out to see the important details more closely.
Navigate the scan with the help of a convenient mini-map.
Hide all the annotations if necessary and erase the incorrect lines.
Our client came to us with the task of creating a custom tool to help doctors annotate and interpret musculoskeletal MRI scans. The solution should be integrated into a larger platform and provide users with a simple editing kit.
The Сlient Had
We were responsible for
The platform’s frontend has three working areas: Navigation, Drawing, and Annotation. The Navigation area provides easy access to all slices of a particular MRI scan, the Drawing field is where doctors add necessary lines and labels, and the Annotation area contains all the editing tools. The frontend is connected with the backend in the following way:
Our main responsibility was the last area since we had to create the annotation toolset for doctors to review MRI scans. Besides, we have done some work on the Navigation and Drawing blocks.
The most crucial elements created by our team for the platform.
To easily navigate around the image when it’s zoomed in, we created a mini-map where we highlight the area the user is examining right now.
All the necessary tools for interpreting an MRI scan are on hand. The area is divided into three main blocks: annotation classes, the drawn lines list, and the editing block.
For doctors to easily identify the status of the MRI scans, we added the ability to mark the scans with various icons like “annotated” or “reviewed.”
It’s possible to zoom in on an image to take a closer look at the scan’s details. Additionally, the image size is responsive to the changes of a browser window.
It’s easy to navigate between the different slices of one MRI scan without jumping to other MRIs so that the results will not get confused.
To facilitate the navigation within the image when it's zoomed in, there should be a mini-map that will highlight what part of the slice is displayed. Our task was to put the full image into a small square and place an indication frame over it. This area should respond quickly to provide the best experience.
We have applied several mathematical calculations that estimated the user’s positions on the image and showed the indication frame in the correct place.
Since users can draw more than one line and all these lines can have various settings (color, width, opacity), we needed to implement the layer system with the ability to save the settings for each line, change them if necessary, and erase the selected line. To make it happen, each layer should have its own reference, but it was impossible to implement with React.
We created one parental reference that addressed the setting of each layer. It allowed users to change and erase lines without influencing other elements.
The result of our work was a simple and efficient tool that allowed doctors to review the MRI scans and save them for future use.
Fill in this form orsend us an e-mail
We have received your request
We will be back in a flash