Show 1-based in stack position of measurement in measurements panel. (#1967)

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

@@ -32,7 +32,11 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
     measurementChangeTimestamp,
     200
   );
-  const { MeasurementService, UIDialogService } = servicesManager.services;
+  const {
+    MeasurementService,
+    UIDialogService,
+    DisplaySetService,
+  } = servicesManager.services;
   const [
     trackedMeasurements,
     sendTrackedMeasurementsEvent,
@@ -51,8 +55,12 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
         trackedSeries.includes(m.referenceSeriesUID)
     );
 
-    const mappedMeasurements = filteredMeasurements.map((m, index) =>
-      _mapMeasurementToDisplay(m, index, MeasurementService.VALUE_TYPES)
+    const mappedMeasurements = filteredMeasurements.map(m =>
+      _mapMeasurementToDisplay(
+        m,
+        MeasurementService.VALUE_TYPES,
+        DisplaySetService
+      )
     );
     setDisplayMeasurements(mappedMeasurements);
     // eslint-ignore-next-line
@@ -295,27 +303,39 @@ PanelMeasurementTableTracking.propTypes = {
 };
 
 // TODO: This could be a MeasurementService mapper
-function _mapMeasurementToDisplay(measurement, index, types) {
-  const {
-    id,
-    label,
-    description,
-    // Reference IDs
-    referenceStudyUID,
-    referenceSeriesUID,
-    SOPInstanceUID,
-  } = measurement;
+function _mapMeasurementToDisplay(measurement, types, DisplaySetService) {
+  const { referenceStudyUID, referenceSeriesUID, SOPInstanceUID } = measurement;
+
+  // TODO: We don't deal with multiframe well yet, would need to update
+  // This in OHIF-312 when we add FrameIndex to measurements.
+
   const instance = DicomMetadataStore.getInstance(
     referenceStudyUID,
     referenceSeriesUID,
     SOPInstanceUID
   );
-  const { PixelSpacing, SeriesNumber, InstanceNumber } = instance;
+
+  const displaySets = DisplaySetService.getDisplaySetsForSeries(
+    referenceSeriesUID
+  );
+
+  if (!displaySets[0] || !displaySets[0].images) {
+    throw new Error(
+      'The tracked measurements panel should only be tracking "stack" displaySets.'
+    );
+  }
+
+  const oneBasedImageIdIndex = _getOneBasedImageIdIndex(
+    displaySets,
+    SOPInstanceUID
+  );
+  const { PixelSpacing, SeriesNumber } = instance;
+
   const displayText = _getDisplayText(
     measurement,
     PixelSpacing,
     SeriesNumber,
-    InstanceNumber,
+    oneBasedImageIdIndex,
     types
   );
 
@@ -328,6 +348,25 @@ function _mapMeasurementToDisplay(measurement, index, types) {
   };
 }
 
+/**
+ *
+ * @param {*} displaySets An array of displaySets relating to a given series.
+ * @param {*} SOPInstanceUID The SOPInstanceUID to find.
+ * @returns {number} The one-based imageIdIndex.
+ */
+function _getOneBasedImageIdIndex(displaySets, SOPInstanceUID) {
+  for (let ds = 0; ds < displaySets.length; ds++) {
+    const displaySet = displaySets[0];
+    const { images } = displaySet;
+
+    for (let i = 0; i < images.length; i++) {
+      if (images[i].SOPInstanceUID === SOPInstanceUID) {
+        return i + 1; // We want the instack position 1-based.
+      }
+    }
+  }
+}
+
 /**
  *
  * @param {*} points

extensions/measurement-tracking/src/viewports/ViewportOverlay.js

@@ -10,7 +10,7 @@ const ViewportOverlay = ({
   windowCenter,
   imageIndex,
   stackSize,
-  activeTools
+  activeTools,
 }) => {
   const topLeft = 'top-viewport left-viewport';
   const topRight = 'top-viewport right-viewport-scrollbar';
@@ -25,7 +25,8 @@ const ViewportOverlay = ({
     return null;
   }
 
-  const generalImageModule = cornerstone.metaData.get('generalImageModule', imageId) || {};
+  const generalImageModule =
+    cornerstone.metaData.get('generalImageModule', imageId) || {};
   const { instanceNumber } = generalImageModule;
 
   return (
@@ -40,7 +41,9 @@ const ViewportOverlay = ({
         {isWwwcActive && (
           <div className="flex flex-row">
             <span className="mr-1">W:</span>
-            <span className="ml-1 mr-2 font-thin">{windowWidth.toFixed(0)}</span>
+            <span className="ml-1 mr-2 font-thin">
+              {windowWidth.toFixed(0)}
+            </span>
             <span className="mr-1">L:</span>
             <span className="ml-1 font-thin">{windowCenter.toFixed(0)}</span>
           </div>
@@ -51,7 +54,7 @@ const ViewportOverlay = ({
           <div className="flex flex-row">
             <span className="mr-1">I:</span>
             <span className="font-thin">
-              {`${instanceNumber} ${imageIndex}/${stackSize}`}
+              {`${instanceNumber} (${imageIndex}/${stackSize})`}
             </span>
           </div>
         )}
@@ -69,11 +72,11 @@ ViewportOverlay.propTypes = {
   imageId: PropTypes.string.isRequired,
   imageIndex: PropTypes.number.isRequired,
   stackSize: PropTypes.number.isRequired,
-  activeTools: PropTypes.arrayOf(PropTypes.string)
+  activeTools: PropTypes.arrayOf(PropTypes.string),
 };
 
 ViewportOverlay.defaultProps = {
-  activeTools: []
+  activeTools: [],
 };
 
 export default ViewportOverlay;