Hi everyone,
I’m working on a project based on the OHIF Viewer. My goal is to load measurement data from a mock JSON file and have it automatically drawn on the corresponding image slice when the viewer loads.
When implementing measurement in the ViewerLayout component I use a useEffect hook that is bound to the activeViewportId and renderingEngineId. Inside this hook I do the following:
Read my mock measurement data.
Enrich it with the current study/series/instance UIDs.
Attempt to add it to the measurementService and annotationManager.
The Problem:
The measurement data successfully appears in the “Measurements” side panel, and measurementService.getMeasurements() shows the data correctly. However, the annotation (the actual PlanarFreehandROI drawing) is not rendered on the viewport’s SVG layer. There are no errors in the console.
It seems the data is tracked by the measurementService, but the rendering part is not being triggered correctly.
What is the correct, idiomatic way in OHIF/Cornerstone.js to programmatically add a measurement from data and ensure it gets rendered?
I’ve tried using measurementService.annotationToMeasurement and annotationManager.addAnnotation manually. Is this correct, or should measurementService.addMeasurement handle the rendering automatically through its mappings?
My current implementation uses a useEffect hook. Is there a more reliable event-based approach (e.g., listening for Enums.Events.IMAGE_RENDERED) to ensure the viewport is fully ready before I attempt to add the annotation?
Here are the relevant code snippets and my mock data structure. Any guidance would be greatly appreciated!