fix(measurements): Update the calibration tool to match changes in CS3D (#3505)

This change makes the OHIF side consistent with the CS3D user calibration settings, and will correctly display px and rounding values consistent with the CS3D display.

extensions/cornerstone/src/utils/measurementServiceMappings/RectangleROI.ts

@@ -25,7 +25,11 @@ const RectangleROI = {
       throw new Error('Tool not supported');
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, StudyInstanceUID } = getSOPInstanceAttributes(
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      StudyInstanceUID,
+    } = getSOPInstanceAttributes(
       referencedImageId,
       CornerstoneViewportService,
       viewportId
@@ -88,8 +92,11 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       throw new Error('Non-acquisition plane measurement mapping not supported');
     }
 
-    const { SOPInstanceUID, SeriesInstanceUID, frameNumber } =
-      getSOPInstanceAttributes(referencedImageId);
+    const {
+      SOPInstanceUID,
+      SeriesInstanceUID,
+      frameNumber,
+    } = getSOPInstanceAttributes(referencedImageId);
 
     const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
       SOPInstanceUID,
@@ -98,7 +105,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
     );
 
     const { SeriesNumber } = displaySet;
-    const { mean, stdDev, max, area, Modality, modalityUnit } = targetStats;
+    const { mean, stdDev, max, area, Modality, modalityUnit, areaUnit } = targetStats;
 
     annotations.push({
       SeriesInstanceUID,
@@ -111,6 +118,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
       stdDev,
       max,
       area,
+      areaUnit,
     });
   });
 
@@ -131,14 +139,14 @@ function _getReport(mappedAnnotations, points, FrameOfReferenceUID) {
   values.push('Cornerstone:RectangleROI');
 
   mappedAnnotations.forEach(annotation => {
-    const { mean, stdDev, max, area, unit } = annotation;
+    const { mean, stdDev, max, area, unit, areaUnit } = annotation;
 
     if (!mean || !unit || !max || !area) {
       return;
     }
 
-    columns.push(`max (${unit})`, `mean (${unit})`, `std (${unit})`, `area (mm2)`);
-    values.push(max, mean, stdDev, area);
+    columns.push(`Maximum`, `Mean`, `Std Dev`, 'Pixel Unit', `Area`, 'Unit');
+    values.push(max, mean, stdDev, unit, area, areaUnit);
   });
 
   if (FrameOfReferenceUID) {
@@ -168,7 +176,7 @@ function getDisplayText(mappedAnnotations, displaySet) {
   const displayText = [];
 
   // Area is the same for all series
-  const { area, SOPInstanceUID, frameNumber } = mappedAnnotations[0];
+  const { area, SOPInstanceUID, frameNumber, areaUnit } = mappedAnnotations[0];
 
   const instance = displaySet.images.find(image => image.SOPInstanceUID === SOPInstanceUID);
 
@@ -182,7 +190,7 @@ function getDisplayText(mappedAnnotations, displaySet) {
 
   // Area sometimes becomes undefined if `preventHandleOutsideImage` is off.
   const roundedArea = utils.roundNumber(area || 0, 2);
-  displayText.push(`${roundedArea} mm<sup>2</sup>`);
+  displayText.push(`${roundedArea} ${areaUnit}`);
 
   // Todo: we need a better UI for displaying all these information
   mappedAnnotations.forEach(mappedAnnotation => {