.

dicom-viewer/src/App.tsx

@@ -740,18 +740,25 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
   }
 
   // Update overlay info for a specific viewport
-  const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
+
-    if (!viewport) return;
+const updateOverlay = useCallback((viewportIdx: number, viewport: any) => {
-    const currentIndex = typeof viewport.getCurrentImageIdIndex === "function"
+  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]);
+
+  if (viewportModes[viewportIdx] === "stack") {
+    currentIndex = typeof viewport.getCurrentImageIdIndex === "function"
       ? viewport.getCurrentImageIdIndex()
       : 0;
     const imageIds = typeof viewport.getImageIds === "function"
       ? viewport.getImageIds()
       : [];
-    const total = imageIds.length;
+    total = imageIds.length;
-
-    let windowCenter = "";
-    let windowWidth = "";
     if (typeof viewport.getProperties === "function") {
       const props = viewport.getProperties();
       if (props.voiRange) {
@@ -760,18 +767,45 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
         windowWidth = (upper - lower).toFixed(0);
       }
     }
+  } 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();
+    }
+    if (typeof viewport.getNumberOfSlices === "function") {
+      total = viewport.getNumberOfSlices();
+    }
+    // Get VOI from getProperties (may need to pass volumeId if multiple volumes)
+    if (typeof viewport.getProperties === "function") {
+      let props;
+      if (viewport.volumeIds && viewport.volumeIds.size > 0) {
+        // If multiple volumes, get the first one
+        const volumeId = Array.from(viewport.volumeIds)[0];
+        props = viewport.getProperties(volumeId);
+      } else {
+        props = viewport.getProperties();
+      }
+      if (props && props.voiRange) {
+        const { lower, upper } = props.voiRange;
+        windowCenter = ((upper + lower) / 2).toFixed(0);
+        windowWidth = (upper - lower).toFixed(0);
+      }
+    }
+  }
+
+  setImageInfos(prev => {
+    const next = [...prev];
+    next[viewportIdx] = {
+      index: currentIndex + 1,
+      total,
+      windowCenter,
+      windowWidth,
+    };
+    return next;
+  });
+}, [viewportModes]);
 
-    setImageInfos(prev => {
-      const next = [...prev];
-      next[viewportIdx] = {
-        index: currentIndex + 1,
-        total,
-        windowCenter,
-        windowWidth,
-      };
-      return next;
-    });
-  }, []);
 
   const [gridBtnActive, setGridBtnActive] = useState(false);
 
@@ -1493,6 +1527,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
             console.log("viewport", viewport);
             console.log("viewport.getImageIds", viewport.getImageIds?.());
             if (!importedImageIds.length) continue;
+            try {
             const viewportImageIds = viewport.getImageIds?.() || [];
             if (
               viewportImageIds.length !== importedImageIds.length ||
@@ -1505,6 +1540,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
               allReady = false;
               break;
             }
+            } catch(e) {
+              allReady = false;
+
+            }
           }
           if (!allReady && attempts < maxAttempts) {
             attempts++;