fix: fix SSR issues and optimize DICOM viewer performance

- Convert Cornerstone3D static imports to dynamic imports to avoid SSR errors
- Update DICOM server URL to working endpoint
- Replace volume viewer with faster stack viewport for local files
- Increase web worker threads for better decoding performance
- Add local DICOM example with commented remote WADO-RS reference

Author: imadselka

app/page.tsx

@@ -1,17 +1,7 @@
 "use client"
 
 import { useEffect, useRef } from "react"
-import createImageIdsAndCacheMetaData from "../lib/createImageIdsAndCacheMetaData"
-import {
-  RenderingEngine,
-  Enums,
-  type Types,
-  volumeLoader,
-} from "@cornerstonejs/core"
-import { init as csRenderInit } from "@cornerstonejs/core"
-import { init as csToolsInit } from "@cornerstonejs/tools"
-import { init as dicomImageLoaderInit } from "@cornerstonejs/dicom-image-loader"
-
+import type { Types } from "@cornerstonejs/core"
 
 function App() {
   const elementRef = useRef<HTMLDivElement>(null)
@@ -24,26 +14,47 @@ function App() {
       }
       running.current = true
 
+      // Dynamically import all Cornerstone modules to avoid SSR issues
+      const [
+        { RenderingEngine, Enums, init: csRenderInit },
+        { init: csToolsInit },
+        dicomImageLoader,
+      ] = await Promise.all([
+        import("@cornerstonejs/core"),
+        import("@cornerstonejs/tools"),
+        import("@cornerstonejs/dicom-image-loader"),
+      ])
+
       await csRenderInit()
       await csToolsInit()
-      dicomImageLoaderInit({ maxWebWorkers: 1 })
-
-      // Get Cornerstone imageIds and fetch metadata into RAM
+      dicomImageLoader.init({ maxWebWorkers: navigator.hardwareConcurrency || 4 })
+
+      // ===== EXAMPLE 1: Local DICOM file =====
+      // Use local DICOM file from public folder (fast, no network latency)
+      const imageId = "wadouri:/dicom-examples/CT0012.fragmented_no_bot_jpeg_baseline.51.dcm"
+
+      // ===== EXAMPLE 2: Remote DICOM server (WADO-RS) =====
+      // Uncomment the code below to fetch from a remote DICOM web server
+      // Note: This requires more setup and loads a full volume (slower)
+      /*
+      const { default: createImageIdsAndCacheMetaData } = await import("../lib/createImageIdsAndCacheMetaData")
+      const { volumeLoader } = await import("@cornerstonejs/core")
+      
       const imageIds = await createImageIdsAndCacheMetaData({
         StudyInstanceUID:
           "1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463",
         SeriesInstanceUID:
           "1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561",
-        wadoRsRoot: "https://d3t6nz73ql33tx.cloudfront.net/dicomweb",
+        wadoRsRoot: "https://d14fa38qiwhyfd.cloudfront.net/dicomweb",
       })
 
-      // Instantiate a rendering engine
-      const renderingEngineId = "myRenderingEngine"
-      const renderingEngine = new RenderingEngine(renderingEngineId)
-      const viewportId = "CT"
+      const volumeId = "streamingImageVolume"
+      const volume = await volumeLoader.createAndCacheVolume(volumeId, {
+        imageIds,
+      })
 
       const viewportInput = {
-        viewportId,
+        viewportId: "CT_VOLUME",
         type: Enums.ViewportType.ORTHOGRAPHIC,
         element: elementRef.current,
         defaultOptions: {
@@ -52,33 +63,39 @@ function App() {
       }
 
       renderingEngine.enableElement(viewportInput)
+      const viewport = renderingEngine.getViewport("CT_VOLUME") as Types.IVolumeViewport
+      
+      volume.load()
+      viewport.setVolumes([{ volumeId }])
+      viewport.render()
+      return
+      */
 
-      // Get the stack viewport that was created
-      const viewport = renderingEngine.getViewport(
-        viewportId
-      ) as Types.IVolumeViewport
+      // Instantiate a rendering engine
+      const renderingEngineId = "myRenderingEngine"
+      const renderingEngine = new RenderingEngine(renderingEngineId)
+      const viewportId = "CT_STACK"
 
-      // Define a volume in memory
-      const volumeId = "streamingImageVolume"
-      const volume = await volumeLoader.createAndCacheVolume(volumeId, {
-        imageIds,
-      })
+      const viewportInput = {
+        viewportId,
+        type: Enums.ViewportType.STACK,
+        element: elementRef.current,
+      }
 
-      // Set the volume to load
-      // @ts-ignore
-      volume.load()
+      renderingEngine.enableElement(viewportInput)
 
-      // Set the volume on the viewport and it's default properties
-      viewport.setVolumes([{ volumeId }])
+      // Get the stack viewport that was created
+      const viewport = renderingEngine.getViewport(viewportId) as Types.IStackViewport
+
+      // Set the stack of images on the viewport
+      await viewport.setStack([imageId])
 
       // Render the image
       viewport.render()
     }
 
     setup()
-
-    // Create a stack viewport
-  }, [elementRef, running])
+  }, [])
 
   return (
     <div

app/polyseg/page.tsx

@@ -1,34 +1,12 @@
 "use client"
 
-import { useEffect, useRef } from "react"
-import createImageIdsAndCacheMetaData from "../../lib/createImageIdsAndCacheMetaData"
-import {
-  RenderingEngine,
-  Enums,
-  CONSTANTS,
-  type Types,
-  volumeLoader,
-  setVolumesForViewports,
-  utilities,
-} from "@cornerstonejs/core"
-import { init as csRenderInit } from "@cornerstonejs/core"
-import {
-  init as csToolsInit,
-  addTool,
-  BrushTool,
-  ToolGroupManager,
-  segmentation,
-  Enums as csToolsEnums,
-} from "@cornerstonejs/tools"
-import { init as dicomImageLoaderInit } from "@cornerstonejs/dicom-image-loader"
-
-const { ViewportType } = Enums
-const { MouseBindings } = csToolsEnums
+import { useEffect, useRef, useCallback, useState } from "react"
+import type { Types } from "@cornerstonejs/core"
 
 const toolGroupId = "ToolGroup_MPR"
 const toolGroupId2 = "ToolGroup_3D"
-let toolGroup1, toolGroup2
-let renderingEngine
+let toolGroup1: any, toolGroup2: any
+let renderingEngine: any
 // Create the viewports
 const viewportId1 = "CT_AXIAL"
 const viewportId2 = "CT_SAGITTAL"
@@ -42,6 +20,19 @@ function App() {
   const elementRef2 = useRef<HTMLDivElement>(null)
   const elementRef3 = useRef<HTMLDivElement>(null)
   const running = useRef(false)
+  const [isReady, setIsReady] = useState(false)
+
+  const handleConvertTo3D = useCallback(async () => {
+    const cornerstoneTools = await import("@cornerstonejs/tools")
+    const { segmentation, Enums: csToolsEnums } = cornerstoneTools
+    
+    segmentation.addSegmentationRepresentations(viewportId3, [
+      {
+        segmentationId,
+        type: csToolsEnums.SegmentationRepresentations.Surface,
+      },
+    ])
+  }, [])
 
   useEffect(() => {
     const setup = async () => {
@@ -50,6 +41,43 @@ function App() {
       }
       running.current = true
 
+      // Dynamically import all Cornerstone modules to avoid SSR issues
+      const [
+        cornerstoneCore,
+        cornerstoneTools,
+        dicomImageLoader,
+        { default: createImageIdsAndCacheMetaData },
+      ] = await Promise.all([
+        import("@cornerstonejs/core"),
+        import("@cornerstonejs/tools"),
+        import("@cornerstonejs/dicom-image-loader"),
+        import("../../lib/createImageIdsAndCacheMetaData"),
+      ])
+
+      const {
+        RenderingEngine,
+        Enums,
+        CONSTANTS,
+        volumeLoader,
+        setVolumesForViewports,
+        utilities,
+        init: csRenderInit,
+      } = cornerstoneCore
+
+      const {
+        init: csToolsInit,
+        addTool,
+        BrushTool,
+        ToolGroupManager,
+        segmentation,
+        Enums: csToolsEnums,
+      } = cornerstoneTools
+
+      const { init: dicomImageLoaderInit } = dicomImageLoader
+
+      const { ViewportType } = Enums
+      const { MouseBindings } = csToolsEnums
+
       await csRenderInit()
       await csToolsInit()
       dicomImageLoaderInit({ maxWebWorkers: 1 })
@@ -182,6 +210,7 @@ function App() {
 
       // Render the image
       renderingEngine.render()
+      setIsReady(true)
     }
 
     setup()
@@ -192,15 +221,8 @@ function App() {
   return (
     <div>
       <button
-        onClick={() => {
-          // add the 3d representation to the 3d toolgroup
-          segmentation.addSegmentationRepresentations(viewportId3, [
-            {
-              segmentationId,
-              type: csToolsEnums.SegmentationRepresentations.Surface,
-            },
-          ])
-        }}
+        onClick={handleConvertTo3D}
+        disabled={!isReady}
       >
         Convert to 3D
       </button>

bun.lockb

@@ -1,5 +1,4 @@
 import { api } from "dicomweb-client"
-import cornerstoneDICOMImageLoader from "@cornerstonejs/dicom-image-loader"
 
 /**
 /**
@@ -31,7 +30,7 @@ export default async function createImageIdsAndCacheMetaData({
     client ||
     new api.DICOMwebClient({ url: wadoRsRoot as string, singlepart: true })
   const instances = await client.retrieveSeriesMetadata(studySearchOptions)
-  const imageIds = instances.map((instanceMetaData) => {
+  const imageIdsWithMetadata = instances.map((instanceMetaData) => {
     const SeriesInstanceUID = instanceMetaData[SERIES_INSTANCE_UID].Value[0]
     const SOPInstanceUIDToUse =
       SOPInstanceUID || instanceMetaData[SOP_INSTANCE_UID].Value[0]
@@ -49,12 +48,20 @@ export default async function createImageIdsAndCacheMetaData({
       SOPInstanceUIDToUse +
       "/frames/1"
 
-    cornerstoneDICOMImageLoader.wadors.metaDataManager.add(
+    return { imageId, instanceMetaData }
+  })
+
+  // Dynamically import the DICOM image loader to avoid SSR issues
+  const cornerstoneDICOMImageLoader = await import("@cornerstonejs/dicom-image-loader")
+  
+  for (const { imageId, instanceMetaData } of imageIdsWithMetadata) {
+    cornerstoneDICOMImageLoader.default.wadors.metaDataManager.add(
       imageId,
       instanceMetaData
     )
-    return imageId
-  })
+  }
+
+  const imageIds = imageIdsWithMetadata.map(({ imageId }) => imageId)
 
   // we don't want to add non-pet
   // Note: for 99% of scanners SUV calculation is consistent bw slices