.

dicom-viewer/src/App.tsx

@@ -17,6 +17,7 @@ import * as dicomParser from "dicom-parser";
 import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
 
 import { NoLabelArrowAnnotateTool } from "./NoLabelArrowAnnotateTool";
+import { render } from "@cornerstonejs/tools/tools/displayTools/Labelmap/labelmapDisplay"
 
 // Extend the Window interface to include cornerstoneTools
 declare global {
@@ -399,8 +400,8 @@ function App({ container_id, imageStacks, autoCacheStack, ...props }: AppProps)
 
 const handleSelectAnnotation = (viewportIdx: number, uid: string | null) => {
   // Use the official selection API for Cornerstone3D Tools
-  if (window.cornerstone3dTools?.annotation?.selection?.setAnnotationSelected) {
+  if (cornerstoneTools?.annotation?.selection?.setAnnotationSelected) {
-    window.cornerstone3dTools.annotation.selection.setAnnotationSelected(uid);
+    cornerstoneTools.annotation.selection.setAnnotationSelected(uid);
   }
 
   // Optionally, update your own UI state
@@ -417,11 +418,8 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
     if (ann.annotationUID === uid) ann.isSelected = false;
   });
   cornerstoneTools.annotation.state.removeAnnotation(uid);
-  if (cornerstoneTools.annotation.state.triggerAnnotationRender) {
-    cornerstoneTools.annotation.state.triggerAnnotationRender();
-  } else if (renderingEngineRef.current) {
     renderingEngineRef.current.render();
-  }
+  //}
   // Auto-select another annotation if available
   const remaining = currentAnnotations.filter(ann => ann.annotationUID !== uid);
   setSelectedAnnUIDs(prev => {
@@ -431,11 +429,8 @@ const handleDeleteAnnotation = (viewportIdx: number, uid: string, currentAnnotat
     allAnnotations.forEach(ann => {
       ann.isSelected = ann.annotationUID === newSelected;
     });
-    if (cornerstoneTools.annotation.state.triggerAnnotationRender) {
+    cornerstoneTools.annotation.selection.setAnnotationSelected(newSelected);
-      cornerstoneTools.annotation.state.triggerAnnotationRender();
+    renderingEngineRef.current.render();
-    } else if (renderingEngineRef.current) {
-      renderingEngineRef.current.render();
-    }
     return next;
   });
 };
@@ -1159,6 +1154,23 @@ useEffect(() => {
   }
   useEffect(() => {
     const apiKey = container_id || "default";
+
+  function jumpToSliceByImageId(viewportIdx: number, imageId: string) {
+    const renderingEngine = renderingEngineRef.current;
+    if (!renderingEngine) return;
+    const viewport = renderingEngine.getViewport(`CT_${viewportIdx}`);
+    if (!viewport || typeof viewport.getImageIds !== "function") return;
+    const imageIds = viewport.getImageIds();
+    const idx = imageIds.indexOf(imageId);
+    if (idx !== -1 && typeof viewport.setImageIdIndex === "function") {
+      csUtilities.jumpToSlice(viewport.element, { imageIndex: idx });
+      updateOverlay(viewportIdx, viewport);
+    }
+  }
+  // Attach to window with a unique name
+  window[`jumpToSliceByImageId_${apiKey}`] = jumpToSliceByImageId;
+
+
     // Export the current viewer state as JSON
     window[`exportViewerState_${apiKey}`] = () => {
       const numActive = viewportGrid.rows * viewportGrid.cols;
@@ -1496,6 +1508,7 @@ useEffect(() => {
       window[`importAnnotations_${apiKey}`] = undefined;
       window[`importLegacyAnnotations_${apiKey}`] = undefined;
       window[`importLegacyViewport_${apiKey}`] = undefined;
+      window[`jumpToSliceByImageId_${apiKey}`] = undefined;
     };
   }, [
     viewportGrid,