feat: WSI Viewport - basic framework to display WSI images with annotations

.webpack/webpack.base.js

@@ -49,6 +49,7 @@ module.exports = (env, argv, { DIST_DIR }) => {
       alias: {
         '@cornerstonejs/dicom-image-loader':
           '@cornerstonejs/dicom-image-loader/dist/dynamic-import/cornerstoneDICOMImageLoader.min.js',
+        'dicom-microscopy-viewer': 'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
       },
       fallback: {
         fs: false,

common/reviews/api/core.api.md

@@ -1745,8 +1745,6 @@ interface IRenderingEngine {
     // (undocumented)
     getStackViewports(): Array<IStackViewport>;
     // (undocumented)
-    getVideoViewports(): Array<IVideoViewport>;
-    // (undocumented)
     getViewport(id: string): IViewport;
     // (undocumented)
     getViewports(): Array<IViewport>;
@@ -2169,6 +2167,28 @@ interface IVolumeViewport extends IViewport {
     worldToCanvas: (worldPos: Point3) => Point2;
 }
 
+// @public (undocumented)
+interface IWSIViewport extends IViewport {
+    // (undocumented)
+    getCurrentImageId(): string;
+    // (undocumented)
+    getFrameNumber(): number;
+    // (undocumented)
+    getProperties: () => WSIViewportProperties;
+    // (undocumented)
+    resetCamera(resetPan?: boolean, resetZoom?: boolean): boolean;
+    // (undocumented)
+    resetProperties(): void;
+    // (undocumented)
+    resize: () => void;
+    // (undocumented)
+    setFrameNumber(frameNo: number): any;
+    // (undocumented)
+    setProperties(props: WSIViewportProperties, suppressEvents?: boolean): void;
+    // (undocumented)
+    setWSI: (imageIds: string[], client: any) => Promise<unknown>;
+}
+
 // @public (undocumented)
 function linePlaneIntersection(p0: Point3, p1: Point3, plane: Plane): Point3;
 
@@ -2478,8 +2498,6 @@ export class RenderingEngine implements IRenderingEngine {
     // (undocumented)
     getStackViewports(): Array<IStackViewport>;
     // (undocumented)
-    getVideoViewports(): Array<IVideoViewport>;
-    // (undocumented)
     getViewport(viewportId: string): IViewport;
     // (undocumented)
     getViewports(): Array<IViewport>;
@@ -2910,6 +2928,7 @@ declare namespace Types {
         ICamera,
         IStackViewport,
         IVideoViewport,
+        IWSIViewport,
         IVolumeViewport,
         IEnabledElement,
         ICache,
@@ -2959,6 +2978,7 @@ declare namespace Types {
         Plane,
         ViewportInputOptions,
         VideoViewportProperties,
+        WSIViewportProperties,
         VOIRange,
         VOI,
         DisplayArea,
@@ -3000,6 +3020,7 @@ declare namespace Types {
         ImageLoadListener,
         InternalVideoCamera,
         VideoViewportInput,
+        WSIViewportInput,
         BoundsIJK,
         Color,
         ColorLUT
@@ -3468,7 +3489,9 @@ enum ViewportType {
     // (undocumented)
     VIDEO = "video",
     // (undocumented)
-    VOLUME_3D = "volume3d"
+    VOLUME_3D = "volume3d",
+    // (undocumented)
+    WSI = "wsi"
 }
 
 // @public (undocumented)
@@ -3710,6 +3733,111 @@ declare namespace windowLevel {
 // @public (undocumented)
 function worldToImageCoords(imageId: string, worldCoords: Point3): Point2 | undefined;
 
+// @public (undocumented)
+export class WSIViewport extends Viewport implements IWSIViewport {
+    constructor(props: WSIViewportInput);
+    // (undocumented)
+    protected canvasToIndex: (canvasPos: Point2) => Point2;
+    // (undocumented)
+    canvasToWorld: (canvasPos: Point2) => Point3;
+    // (undocumented)
+    customRenderViewportToCanvas: () => void;
+    // (undocumented)
+    getCamera(): ICamera;
+    // (undocumented)
+    getCurrentImageId(): string;
+    // (undocumented)
+    getFrameNumber(): number;
+    // (undocumented)
+    getFrameOfReferenceUID: () => string;
+    // (undocumented)
+    getImageData(): {
+        dimensions: any;
+        spacing: any;
+        origin: any;
+        direction: any;
+        metadata: {
+            Modality: any;
+        };
+        getScalarData: () => any;
+        imageData: {
+            getDirection: () => any;
+            getDimensions: () => any;
+            getRange: () => number[];
+            getScalarData: () => any;
+            getSpacing: () => any;
+            worldToIndex: (point: Point3) => number[];
+            indexToWorld: (point: Point3) => Point3;
+        };
+        hasPixelSpacing: boolean;
+        calibration: IImageCalibration;
+        preScale: {
+            scaled: boolean;
+        };
+    };
+    // (undocumented)
+    getNumberOfSlices: () => number;
+    // (undocumented)
+    getPan(): Point2;
+    // (undocumented)
+    getProperties: () => WSIViewportProperties;
+    // (undocumented)
+    getRotation: () => number;
+    // (undocumented)
+    protected getScalarData(): any;
+    // (undocumented)
+    protected getTransform(): Transform;
+    // (undocumented)
+    hasImageURI(imageURI: string): boolean;
+    // (undocumented)
+    protected imageIds: string[];
+    // (undocumented)
+    protected indexToCanvas: (indexPos: Point2) => Point2;
+    // (undocumented)
+    protected metadata: any;
+    // (undocumented)
+    modality: any;
+    // (undocumented)
+    readonly renderingEngineId: string;
+    // (undocumented)
+    resetCamera: () => boolean;
+    // (undocumented)
+    resetProperties(): void;
+    // (undocumented)
+    resize: () => void;
+    // (undocumented)
+    setCamera(camera: ICamera): void;
+    // (undocumented)
+    setFrameNumber(frame: number): Promise<void>;
+    // (undocumented)
+    setProperties(props: WSIViewportProperties): void;
+    // (undocumented)
+    setWSI(imageIds: string[], client: any): Promise<void>;
+    // (undocumented)
+    readonly uid: any;
+    // (undocumented)
+    static get useCustomRenderingPipeline(): boolean;
+    // (undocumented)
+    worldToCanvas: (worldPos: Point3) => Point2;
+}
+
+// @public (undocumented)
+type WSIViewportInput = {
+    id: string;
+    renderingEngineId: string;
+    type: ViewportType;
+    element: HTMLDivElement;
+    sx: number;
+    sy: number;
+    sWidth: number;
+    sHeight: number;
+    defaultOptions: any;
+    canvas: HTMLCanvasElement;
+};
+
+// @public (undocumented)
+type WSIViewportProperties = ViewportProperties;
+
 // (No @packageDocumentation comment for this package)
 
 ```

karma.conf.js

@@ -120,6 +120,8 @@ module.exports = function (config) {
           '@cornerstonejs/streaming-image-volume-loader': path.resolve(
             'packages/streaming-image-volume-loader/src/index'
           ),
+          'dicom-microscopy-viewer':
+            'dicom-microscopy-viewer/dist/dynamic-import/dicomMicroscopyViewer.min.js',
         },
       },
     },

packages/core/examples/wsi/index.ts

@@ -0,0 +1,122 @@
+import {
+  RenderingEngine,
+  Types,
+  Enums,
+  getRenderingEngine,
+} from '@cornerstonejs/core';
+import dicomImageLoader from '@cornerstonejs/dicom-image-loader';
+import { api } from 'dicomweb-client';
+
+import {
+  initDemo,
+  setTitleAndDescription,
+  createImageIdsAndCacheMetaData,
+  getLocalUrl,
+} from '../../../../utils/demo/helpers';
+
+// This is for debugging purposes
+console.warn(
+  'Click on index.ts to open source code for this example --------->'
+);
+
+const { wadors } = dicomImageLoader;
+
+const { ViewportType, Events } = Enums;
+
+// ======== Constants ======= //
+const renderingEngineId = 'myRenderingEngine';
+const viewportId = 'videoViewport';
+
+// ======== Set up page ======== //
+setTitleAndDescription(
+  'WSI - Whole Slide Imaging Viewport',
+  'Demonstrates viewing of whole slide imaging data'
+);
+
+const content = document.getElementById('content');
+const element = document.createElement('div');
+element.id = 'cornerstone-element';
+element.style.width = '500px';
+element.style.height = '500px';
+
+content.appendChild(element);
+
+const info = document.createElement('div');
+content.appendChild(info);
+
+const rotationInfo = document.createElement('div');
+info.appendChild(rotationInfo);
+
+const flipHorizontalInfo = document.createElement('div');
+info.appendChild(flipHorizontalInfo);
+
+const flipVerticalInfo = document.createElement('div');
+info.appendChild(flipVerticalInfo);
+
+element.addEventListener(Events.CAMERA_MODIFIED, (_) => {
+  // Get the rendering engine
+  const renderingEngine = getRenderingEngine(renderingEngineId);
+
+  // Get the stack viewport
+  const viewport = <Types.IStackViewport>(
+    renderingEngine.getViewport(viewportId)
+  );
+
+  if (!viewport) {
+    return;
+  }
+
+  const { flipHorizontal, flipVertical } = viewport.getCamera();
+  const { rotation } = viewport.getProperties();
+
+  rotationInfo.innerText = `Rotation: ${Math.round(rotation)}`;
+  flipHorizontalInfo.innerText = `Flip horizontal: ${flipHorizontal}`;
+  flipVerticalInfo.innerText = `Flip vertical: ${flipVertical}`;
+});
+
+/**
+ * Runs the demo
+ */
+async function run() {
+  // Init Cornerstone and related libraries
+  await initDemo();
+
+  // Get Cornerstone imageIds and fetch metadata into RAM
+  // TODO - deploy the testdata publically
+  const wadoRsRoot =
+    getLocalUrl() || 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb';
+  const client = new api.DICOMwebClient({ url: wadoRsRoot });
+  const imageIds = await createImageIdsAndCacheMetaData({
+    StudyInstanceUID: '1.2.276.1.74.1.2.132733202464108492637644434464108492',
+    SeriesInstanceUID:
+      '2.16.840.1.113883.3.8467.132733202477512857637644434477512857',
+    client,
+    wadoRsRoot,
+    convertMultiframe: false,
+  });
+
+  // Instantiate a rendering engine
+  const renderingEngine = new RenderingEngine(renderingEngineId);
+
+  // Create a stack viewport
+
+  const viewportInput = {
+    viewportId,
+    type: ViewportType.WSI,
+    element,
+    defaultOptions: {
+      background: <Types.Point3>[0.2, 0, 0.2],
+    },
+  };
+
+  renderingEngine.enableElement(viewportInput);
+
+  // Get the stack viewport that was created
+  const viewport = <Types.IWSIViewport>renderingEngine.getViewport(viewportId);
+
+  client.getDICOMwebMetadata = (imageId) => wadors.metaDataManager.get(imageId);
+  // Set the stack on the viewport
+  await viewport.setWSI(imageIds, client);
+}
+
+run();

packages/core/package.json

@@ -33,6 +33,7 @@
     "@kitware/vtk.js": "27.3.1",
     "comlink": "^4.4.1",
     "detect-gpu": "^5.0.22",
+    "dicom-microscopy-viewer": "^0.45.1",
     "gl-matrix": "^3.4.3",
     "lodash.clonedeep": "4.5.0"
   },

packages/core/src/RenderingEngine/RenderingEngine.ts

@@ -1,7 +1,7 @@
 import Events from '../enums/Events';
 import renderingEngineCache from './renderingEngineCache';
 import eventTarget from '../eventTarget';
-import { triggerEvent, uuidv4 } from '../utilities';
+import { triggerEvent } from '../utilities';
 import { vtkOffscreenMultiRenderWindow } from './vtkClasses';
 import ViewportType from '../enums/ViewportType';
 import VolumeViewport from './VolumeViewport';
@@ -11,11 +11,9 @@ import viewportTypeUsesCustomRenderingPipeline from './helpers/viewportTypeUsesC
 import getOrCreateCanvas from './helpers/getOrCreateCanvas';
 import { getShouldUseCPURendering, isCornerstoneInitialized } from '../init';
 import type IStackViewport from '../types/IStackViewport';
-import type IVideoViewport from '../types/IVideoViewport';
 import type IRenderingEngine from '../types/IRenderingEngine';
 import type IVolumeViewport from '../types/IVolumeViewport';
 import type { IViewport } from '../types/IViewport';
-import VideoViewport from './VideoViewport';
 import viewportTypeToViewportClass from './helpers/viewportTypeToViewportClass';
 
 import type * as EventTypes from '../types/EventTypes';
@@ -88,7 +86,7 @@ class RenderingEngine implements IRenderingEngine {
    * @param uid - Unique identifier for RenderingEngine
    */
   constructor(id?: string) {
-    this.id = id ? id : uuidv4();
+    this.id = id ? id : crypto.randomUUID();
     this.useCPURendering = getShouldUseCPURendering();
 
     renderingEngineCache.set(this);
@@ -382,24 +380,6 @@ class RenderingEngine implements IRenderingEngine {
     return viewports.filter(isStackViewport) as Array<IStackViewport>;
   }
 
-  /**
-   * Filters all the available viewports and return the stack viewports
-   * @returns stack viewports registered on the rendering Engine
-   */
-  public getVideoViewports(): Array<IVideoViewport> {
-    this._throwIfDestroyed();
-
-    const viewports = this.getViewports();
-
-    const isVideoViewport = (
-      viewport: IViewport
-    ): viewport is VideoViewport => {
-      return viewport instanceof VideoViewport;
-    };
-
-    return viewports.filter(isVideoViewport) as Array<IVideoViewport>;
-  }
-
   /**
    * Return all the viewports that are volume viewports
    * @returns An array of VolumeViewport objects.