fix viewport overlay

dicom-viewer/src/App.tsx

@@ -407,12 +407,14 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
     total: number,
     windowCenter: string,
     windowWidth: string,
+    slicePosition?: number,
   }>>(() =>
     Array(viewportGrid.rows * viewportGrid.cols).fill({
       index: 0,
       total: 0,
       windowCenter: "",
       windowWidth: "",
+      slicePosition: 0,
     })
   );
 
@@ -742,14 +744,13 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
   // Update overlay info for a specific viewport
 
   const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
-  console.log("updateOverlay called for viewportIdx:", viewportIdx, "viewport:", viewport);
     if (!viewport) return;
 
     let currentIndex = 0;
     let total = 0;
     let windowCenter = "";
     let windowWidth = "";
-  console.log("Updating overlay for viewport:", viewportIdx, viewportModes[viewportIdx]);
+    let slicePosition = "";
 
     if (viewportModes[viewportIdx] === "stack") {
       currentIndex = typeof viewport.getCurrentImageIdIndex === "function"
@@ -768,7 +769,6 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
         }
       }
     } else if (viewportModes[viewportIdx] === "volume") {
-    console.log(viewport)
       // For volume, get slice index and number of slices if available
       if (typeof viewport.getSliceIndex === "function") {
         currentIndex = viewport.getSliceIndex();
@@ -792,6 +792,13 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
           windowWidth = (upper - lower).toFixed(0);
         }
       }
+      // Try to get slice position in mm (distance along viewPlaneNormal from origin)
+      if (typeof viewport.getSlicePlaneCoordinates === "function") {
+        const coords = viewport.getSlicePlaneCoordinates();
+        if (coords && typeof coords.position === "number") {
+          slicePosition = coords.position.toFixed(2) + " mm";
+        }
+      }
     }
 
     setImageInfos(prev => {
@@ -801,6 +808,7 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
         total,
         windowCenter,
         windowWidth,
+        slicePosition, // add this field
       };
       return next;
     });
@@ -918,7 +926,6 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
         }
 
         if (viewportModes[i] === 'stack') {
-          //if (imageIds && !restoringStateRef.current) {
           if (imageIds && imageIds.length > 0) {
             viewport.setStack(imageIds);
           }
@@ -950,6 +957,16 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
           volume.load();
           viewport.setVolumes([{ volumeId }]);
           viewport.render();
+
+          // Always (re-)attach overlay update for each viewport
+          if ((element)._overlayListener) {
+            // Remove previous listener if present
+            viewport.element.removeEventListener(IMAGE_RENDERED, (element)._overlayListener);
+          }
+          const overlayListener = () => updateOverlay(i, viewport);
+          viewport.element.addEventListener(IMAGE_RENDERED, overlayListener);
+          (element)._overlayListener = overlayListener;
+          updateOverlay(i, viewport);
           continue
         }
         viewport.render();
@@ -991,7 +1008,6 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
 
         }
 
-
         // Always (re-)attach overlay update for each viewport
         if ((element)._overlayListener) {
           // Remove previous listener if present
@@ -1001,8 +1017,14 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
         viewport.element.addEventListener(IMAGE_RENDERED, overlayListener);
         (element)._overlayListener = overlayListener;
         updateOverlay(i, viewport);
+
       }
 
+
+
+
+
+
       const activeVolumeViewports = [];
       for (let i = 0; i < viewportGrid.rows * viewportGrid.cols; i++) {
         const viewportId = `CT_${i}`;
@@ -2371,8 +2393,12 @@ const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
               </div>
             </>
           ) : (
-            // Volume mode: do not show image position
             <div>
+              Slice: {imageInfos[i]?.index} / {imageInfos[i]?.total}
+              {imageInfos[i]?.slicePosition && (
+                <span> &nbsp; ({imageInfos[i]?.slicePosition})</span>
+              )}
+              <br />
               WC: {imageInfos[i]?.windowCenter} &nbsp; WW: {imageInfos[i]?.windowWidth}
             </div>
           )}