a lot of fixes

dicom-viewer/src/App.tsx

@@ -398,7 +398,7 @@ function App({ container_id, imageStacks, autoCacheStack, ...props }: AppProps)
   const [metaModalOpen, setMetaModalOpen] = useState(false);
   const [metaModalContent, setMetaModalContent] = useState<any>(null);
 
-const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
+  const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
     // Use the official selection API for Cornerstone3D Tools
     if (cornerstoneTools?.annotation?.selection?.setAnnotationSelected) {
       cornerstoneTools.annotation.selection.setAnnotationSelected(uid);
@@ -410,9 +410,9 @@ const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
       next[viewportIdx] = uid;
       return next;
     });
-};
+  };
 
-const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotations: any[]) => {
+  const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotations: any[]) => {
     const allAnnotations = cornerstoneTools.annotation.state.getAllAnnotations() || [];
     allAnnotations.forEach(ann => {
       if (ann.annotationUID === uid) ann.isSelected = false;
@@ -433,7 +433,7 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
       renderingEngineRef.current.render();
       return next;
     });
-};
+  };
 
   // Add this function to gather and format metadata:
   const handleShowMetadata = () => {
@@ -510,7 +510,7 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
 
   const [altPressed, setAltPressed] = useState(false);
 
-useEffect(() => {
+  useEffect(() => {
     const mainToolGroup = ToolGroupManager.getToolGroup(MAIN_TOOL_GROUP_ID);
     if (!mainToolGroup) return;
 
@@ -530,7 +530,7 @@ useEffect(() => {
         selectedColor: '#ffeb3b', // yellow for selected
       });
     });
-}, [MAIN_TOOL_GROUP_ID]);
+  }, [MAIN_TOOL_GROUP_ID]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -1161,7 +1161,10 @@ useEffect(() => {
     const viewport = renderingEngine.getViewport(`CT_${viewportIdx}`);
     if (!viewport || typeof viewport.getImageIds !== "function") return;
     const imageIds = viewport.getImageIds();
-    const idx = imageIds.indexOf(imageId);
+    // Some stacks may have imageIds with or without "wadouri:" prefix, so normalize for comparison
+    const normImageIds = imageIds.map(id => id.replace(/^wadouri:/, ""));
+    const normTarget = imageId.replace(/^wadouri:/, "");
+    const idx = normImageIds.indexOf(normTarget);
     if (idx !== -1 && typeof viewport.setImageIdIndex === "function") {
       csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
       updateOverlay(viewportIdx, viewport);
@@ -1351,6 +1354,11 @@ useEffect(() => {
     };
 
     window[`importLegacyAnnotations_${apiKey}`] = (json: string) => {
+      // Remove all existing annotations
+      if (cornerstoneTools.annotation.state.removeAllAnnotations) {
+        cornerstoneTools.annotation.state.removeAllAnnotations();
+      }
+
       let legacyData: any;
       try {
         legacyData = typeof json === "string" ? JSON.parse(json) : json;
@@ -1359,17 +1367,13 @@ useEffect(() => {
         return;
       }
 
-      // Remove all existing annotations
-      if (cornerstoneTools.annotation.state.removeAllAnnotations) {
-        cornerstoneTools.annotation.state.removeAllAnnotations();
-      }
-
       const toolNameMap: Record<string, string> = {
         ArrowAnnotate: "ArrowAnnotate",
         // Add more mappings if needed
       };
 
       Object.entries(legacyData).forEach(([imageId, tools]) => {
+        console.log("Importing legacy annotations for imageId:", imageId);
         Object.entries(tools as any).forEach(([legacyTool, toolData]: [string, any]) => {
           const cs3Tool = toolNameMap[legacyTool] || legacyTool;
           if (toolData.data && Array.isArray(toolData.data)) {
@@ -1410,8 +1414,11 @@ useEffect(() => {
               }
 
 
-
+              // --- Add rotation if present in legacy annotation ---
-
+              // Does this actually exist?
+              if (typeof ann.rotation === "number") {
+                metadata.rotation = ann.rotation;
+              }
 
               const annotation = {
                 annotationUID: ann.uuid, // || cornerstoneTools.utilities.uuidv4(),
@@ -1471,7 +1478,6 @@ useEffect(() => {
       }
       if (typeof legacy.invert === "boolean") props.invert = legacy.invert;
       if (typeof legacy.pixelReplication === "boolean") props.interpolationType = legacy.pixelReplication ? 0 : 1;
-      if (typeof legacy.rotation === "number") props.rotation = legacy.rotation;
       if (typeof legacy.hflip === "boolean") props.hflip = legacy.hflip;
       if (typeof legacy.vflip === "boolean") props.vflip = legacy.vflip;
 
@@ -1493,6 +1499,10 @@ useEffect(() => {
           viewport.setCamera(camera);
         }
       }
+      // --- Fix: Import rotation from legacy viewport ---
+      if (typeof legacy.rotation === "number") {
+        viewport.setRotation(legacy.rotation);
+      }
 
       viewport.render();
       updateOverlay(activeViewport ?? 0, viewport);
@@ -1732,7 +1742,8 @@ useEffect(() => {
             ann =>
               ann.metadata &&
               ann.metadata.referencedImageId &&
-              imageIds.includes(ann.metadata.referencedImageId)
+              imageIds.includes(ann.metadata.referencedImageId) &&
+              ann.metadata.toolName !== ReferenceCursors.toolName // Exclude ReferenceCursors
           );
           if (!stackAnnotations.length) return null;
           // Find the annotation(s) on the current image
@@ -1786,7 +1797,7 @@ useEffect(() => {
                 }}
                 title="Previous Annotation"
                 aria-label="Previous Annotation"
-onClick={() => {
+                onClick={() => {
                   const renderingEngine = renderingEngineRef.current;
                   const viewport = renderingEngine?.getViewport(`CT_${i}`);
                   if (!viewport || typeof viewport.getCurrentImageIdIndex !== "function") return;
@@ -1802,7 +1813,7 @@ onClick={() => {
                     );
                     handleSelectAnnotation(i, annsOnImage.length > 0 ? annsOnImage[0].annotationUID : null);
                   }
-}}
+                }}
               >
                 <span aria-hidden="true">◀</span>
               </button>
@@ -1826,7 +1837,7 @@ onClick={() => {
                 }}
                 title="Next Annotation"
                 aria-label="Next Annotation"
-onClick={() => {
+                onClick={() => {
                   const renderingEngine = renderingEngineRef.current;
                   const viewport = renderingEngine?.getViewport(`CT_${i}`);
                   if (!viewport || typeof viewport.getCurrentImageIdIndex !== "function") return;
@@ -1842,7 +1853,7 @@ onClick={() => {
                     );
                     handleSelectAnnotation(i, annsOnImage.length > 0 ? annsOnImage[0].annotationUID : null);
                   }
-}}
+                }}
               >
                 <span aria-hidden="true">▶</span>
               </button>
@@ -1850,7 +1861,7 @@ onClick={() => {
               {currentAnnotations.length > 0 && (
                 <div style={{ display: "flex", gap: 2, alignItems: "center" }}>
                   {currentAnnotations.map(ann => (
-<div
+                    <div
                       key={ann.annotationUID}
                       style={{
                         display: "flex",
@@ -1865,7 +1876,7 @@ onClick={() => {
                         fontWeight: selectedAnnUID === ann.annotationUID ? "bold" : "normal",
                       }}
                       onClick={() => handleSelectAnnotation(i, ann.annotationUID)}
->
+                    >
                       <span style={{ marginRight: 4 }}>
                         {selectedAnnUID === ann.annotationUID ? "★ " : ""}
                         {ann.metadata.toolName || "Annotation"}
@@ -2123,7 +2134,7 @@ onClick={() => {
             </div>
           </div>
         )}
-        {isVisible && (
+        {isVisible && availableStacks.length > 1 && (
           <div
             style={{
               position: "absolute",

dicom-viewer/src/main.tsx

@@ -6,8 +6,14 @@ import Nifti from './Nifti.tsx'
 import './index.css'
 import { createImageIds, availableImageIds } from "./lib/createImageIds.ts"
 
-const test_containers = document.querySelectorAll(".dicom-viewer-test-root");
+// Helper to convert URLs to wadouri
-test_containers.forEach((container) => {
+const toWadouri = (arr: string[]) =>
+  arr.map(url => url.startsWith("wadouri:") ? url : `wadouri:${url}`);
+
+export function mountDicomViewers() {
+  // Test containers
+  const test_containers = document.querySelectorAll(".dicom-viewer-test-root");
+  test_containers.forEach((container) => {
     const id = container.id || '';
     const imageStacks = () => availableImageIds();
     createRoot(container).render(
@@ -16,18 +22,14 @@ test_containers.forEach((container) => {
         imageStacks={imageStacks}
       />
     );
-});
+  });
 
-const containers = document.querySelectorAll(".dicom-viewer-root");
+  // Main containers
-containers.forEach((container) => {
+  const containers = document.querySelectorAll(".dicom-viewer-root");
+  containers.forEach((container) => {
     const id = container.id || '';
     let imageStacks;
 
-  // Helper to convert URLs to wadouri
-  const toWadouri = (arr: string[]) =>
-    arr.map(url => url.startsWith("wadouri:") ? url : `wadouri:${url}`);
-
-  // Check for data-images attribute
     const dataImages = container.getAttribute('data-images');
     if (dataImages) {
       let parsed;
@@ -37,7 +39,6 @@ containers.forEach((container) => {
         console.error("Invalid data-images JSON:", e);
         parsed = [];
       }
-    // If it's a flat list, wrap in an array to make it a stack list and convert to wadouri
       if (Array.isArray(parsed) && parsed.length > 0 && typeof parsed[0] === "string") {
         imageStacks = () => Promise.resolve([toWadouri(parsed)]);
       } else if (Array.isArray(parsed)) {
@@ -51,7 +52,6 @@ containers.forEach((container) => {
       imageStacks = () => Promise.resolve([[]]);
     }
 
-  // Read autoCacheStack from data-auto-cache-stack attribute
     const autoCacheStackAttr = container.getAttribute('data-auto-cache-stack');
     const autoCacheStack = autoCacheStackAttr === "true" || autoCacheStackAttr === "1";
 
@@ -62,4 +62,11 @@ containers.forEach((container) => {
         autoCacheStack={autoCacheStack}
       />
     );
-});
+  });
+}
+
+// Optionally, call it immediately for static containers:
+mountDicomViewers();
+
+// Optionally, expose globally for dynamic use:
+(window as any).mountDicomViewers = mountDicomViewers;