fix(test): add surface test

.github/workflows/playwright.yml

@@ -13,8 +13,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
-        shardTotal: [15]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     steps:
       - name: Install unzip
         run: apt-get update && apt-get install -y unzip
@@ -28,7 +28,7 @@ jobs:
       - name: Run Playwright tests
         run: |
           export NODE_OPTIONS="--max_old_space_size=8192"
-          bun x playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+          bun x playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=4
       - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4

package.json

@@ -76,8 +76,8 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@rspack/cli": "^1.1.6",
-    "@rspack/core": "^1.1.6",
+    "@rspack/cli": "^1.2.2",
+    "@rspack/core": "^1.2.2",
     "@types/dom-webcodecs": "^0.1.11",
     "@types/emscripten": "^1.39.6",
     "@types/jasmine": "^4.3.1",

packages/tools/examples/surfaceRenderingForTest/index.ts

@@ -0,0 +1,208 @@
+import type { Types } from '@cornerstonejs/core';
+import {
+  RenderingEngine,
+  Enums,
+  setVolumesForViewports,
+  volumeLoader,
+  utilities,
+  CONSTANTS,
+} from '@cornerstonejs/core';
+import {
+  initDemo,
+  createImageIdsAndCacheMetaData,
+  setTitleAndDescription,
+  createAndCacheGeometriesFromOneSurface,
+} from '../../../../utils/demo/helpers';
+
+import * as cornerstoneTools from '@cornerstonejs/tools';
+
+// This is for debugging purposes
+console.warn(
+  'Click on index.ts to open source code for this example --------->'
+);
+
+const {
+  ToolGroupManager,
+  Enums: csToolsEnums,
+  segmentation,
+  ZoomTool,
+  PanTool,
+  StackScrollTool,
+  TrackballRotateTool,
+} = cornerstoneTools;
+const { MouseBindings } = csToolsEnums;
+const { ViewportType, GeometryType } = Enums;
+
+// Define a unique id for the volume
+const volumeName = 'CT_VOLUME_ID'; // Id of the volume less loader prefix
+const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
+const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
+const toolGroupId3d = 'MY_TOOLGROUP_ID_3d';
+const segmentationId = 'MY_SEGMENTATION_ID';
+
+// ======== Set up page ======== //
+setTitleAndDescription(
+  'Surface Segmentation Representation for Volume Viewports',
+  'This example first downloads the surface data. In this demonstration, we will show you how to render surfaces. There is a 3D viewport. When you interact with the images, the intersection between the surfaces and the underlying volume is calculated. Please note that this calculation may be slow during the initial visit, but we have implemented caching to significantly improve speed in subsequent visits. In the future, we plan to enhance the user experience by introducing off-thread pre-calculation of all surfaces.'
+);
+
+const size = '500px';
+const content = document.getElementById('content');
+const viewportGrid = document.createElement('div');
+
+viewportGrid.style.display = 'flex';
+viewportGrid.style.display = 'flex';
+viewportGrid.style.flexDirection = 'row';
+
+const element2 = document.createElement('div');
+element2.oncontextmenu = () => false;
+
+element2.style.width = size;
+element2.style.height = size;
+
+viewportGrid.appendChild(element2);
+
+content.appendChild(viewportGrid);
+let renderingEngine;
+const instructions = document.createElement('p');
+content.append(instructions);
+// ============================= //
+
+// Create the viewports
+const viewportId2 = 'CT_3D';
+
+let surfaces;
+async function addSegmentationsToState() {
+  // Download the surface data. Please note that this is a large file
+  // and may take a while to download
+
+  const geometriesInfo = await createAndCacheGeometriesFromOneSurface();
+
+  // Add the segmentations to state
+  segmentation.addSegmentations([
+    {
+      segmentationId,
+      representation: {
+        type: csToolsEnums.SegmentationRepresentations.Surface,
+        data: {
+          geometryIds: geometriesInfo,
+        },
+      },
+    },
+  ]);
+}
+
+/**
+ * Runs the demo
+ */
+async function run() {
+  // Init Cornerstone and related libraries
+  await initDemo();
+
+  // Add tools to Cornerstone3D
+  cornerstoneTools.addTool(PanTool);
+  cornerstoneTools.addTool(ZoomTool);
+  cornerstoneTools.addTool(StackScrollTool);
+  cornerstoneTools.addTool(TrackballRotateTool);
+
+  const toolGroup3d = ToolGroupManager.createToolGroup(toolGroupId3d);
+
+  toolGroup3d.addTool(ZoomTool.toolName);
+  toolGroup3d.addTool(TrackballRotateTool.toolName, {
+    configuration: { volumeId },
+  });
+
+  toolGroup3d.setToolActive(TrackballRotateTool.toolName, {
+    bindings: [
+      {
+        mouseButton: MouseBindings.Primary,
+      },
+    ],
+  });
+
+  toolGroup3d.setToolActive(ZoomTool.toolName, {
+    bindings: [
+      {
+        mouseButton: MouseBindings.Secondary,
+      },
+    ],
+  });
+
+  // Get Cornerstone imageIds for the source data and fetch metadata into RAM
+  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://d14fa38qiwhyfd.cloudfront.net/dicomweb',
+  });
+
+  // Define a volume in memory
+  const volume = await volumeLoader.createAndCacheVolume(volumeId, {
+    imageIds,
+  });
+
+  // Add some segmentations based on the source data volume
+  await addSegmentationsToState();
+
+  // Instantiate a rendering engine
+  const renderingEngineId = 'myRenderingEngine';
+  renderingEngine = new RenderingEngine(renderingEngineId);
+
+  const viewportInputArray = [
+    {
+      viewportId: viewportId2,
+      type: ViewportType.VOLUME_3D,
+      element: element2,
+      defaultOptions: {
+        background: <Types.Point3>[0.2, 0, 0.2],
+      },
+    },
+  ];
+
+  renderingEngine.setViewports(viewportInputArray);
+
+  toolGroup3d.addViewport(viewportId2, renderingEngineId);
+
+  // Set the volume to load
+  volume.load();
+
+  // Set volumes on the viewports
+  setVolumesForViewports(renderingEngine, [{ volumeId }], [viewportId2]).then(
+    () => {
+      const viewport3d = renderingEngine.getViewport(viewportId2);
+      const volumeActor = viewport3d.getDefaultActor()
+        .actor as Types.VolumeActor;
+      utilities.applyPreset(
+        volumeActor,
+        CONSTANTS.VIEWPORT_PRESETS.find(
+          (preset) => preset.name === 'CT-Chest-Contrast-Enhanced'
+        )
+      );
+
+      const renderer = viewport3d.getRenderer();
+      renderer.getActiveCamera().elevation(-70);
+      viewport3d.setCamera({ parallelScale: 600 });
+
+      viewport3d.render();
+    }
+  );
+
+  await segmentation.addSurfaceRepresentationToViewport(viewportId2, [
+    {
+      segmentationId,
+    },
+  ]);
+
+  const viewport3d = renderingEngine.getViewport(viewportId2);
+
+  setTimeout(() => {
+    viewport3d.setCamera({ parallelScale: 100 });
+    viewport3d.render();
+  }, 10);
+
+  // Render the image
+  renderingEngine.render();
+}
+
+run();

playwright.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
   timeout: 720 * 1000,
   snapshotPathTemplate:
     'tests/screenshots{/projectName}/{testFilePath}/{arg}{ext}',
@@ -23,8 +23,14 @@ export default defineConfig({
   },
 
   projects: [
+    {
+      name: 'slow-tests',
+      testMatch: /.+@slow.+/,
+      use: { ...devices['Desktop Chrome'], deviceScaleFactor: 1 },
+    },
     {
       name: 'chromium',
+      testIgnore: /.+@slow.+/,
       use: { ...devices['Desktop Chrome'], deviceScaleFactor: 1 },
     },
     {

tests/surfaceRendering.spec.ts

@@ -6,18 +6,22 @@ import {
 } from './utils/index';
 
 test.beforeEach(async ({ page }) => {
-  await visitExample(page, 'surfaceRendering');
+  await visitExample(page, 'surfaceRenderingForTest');
 });
 
 // this is too much for the CI.
-test.skip('Surface Segmentation Representation for Volume Viewports', async () => {
-  test('should render the segmentation correctly', async ({ page }) => {
+test(
+  'should render the segmentation correctly',
+  {
+    testTimeout: 2000,
+    tag: '@slow',
+  },
+  async ({ page }) => {
     const locator = page.locator('.cornerstone-canvas');
     await checkForScreenshot(
       page,
       locator,
-      screenShotPaths.surfaceRendering.viewport,
-      200
+      screenShotPaths.surfaceRendering.viewport
     );
-  });
-});
+  }
+);

tests/utils/screenShotPaths.ts

@@ -61,7 +61,7 @@ const screenShotPaths = {
     splinesOnSegmentTwo: 'splinesOnSegmentTwo.png',
   },
   surfaceRendering: {
-    viewport: 'viewport.png',
+    viewport: 'surfaceRendering.png',
   },
   labelmapSegmentationTools: {
     circularBrush: 'circularBrush.png',

utils/demo/helpers/createAndCacheGeometriesFromSurfaces.ts

@@ -1,5 +1,5 @@
 import { geometryLoader, Enums } from '@cornerstonejs/core';
-import downloadSurfaces from './downloadSurfacesData';
+import downloadSurfaces, { downloadOneSurface } from './downloadSurfacesData';
 import type { SurfaceData } from '@cornerstonejs/core/types';
 
 /**
@@ -15,27 +15,43 @@ import type { SurfaceData } from '@cornerstonejs/core/types';
  * - segmentIndex
  * - frameOfReferenceUID
  */
-export async function createAndCacheGeometriesFromSurfaces(): Promise<
-  Map<number, string>
-> {
-  const surfaces = await downloadSurfaces();
+function createAndCacheGeometry(surface: any, index: number): [number, string] {
+  const geometryId = surface.closedSurface.id;
+  geometryLoader.createAndCacheGeometry(geometryId, {
+    type: Enums.GeometryType.SURFACE,
+    geometryData: {
+      points: surface.closedSurface.data.points,
+      polys: surface.closedSurface.data.polys,
+      id: surface.closedSurface.id,
+      segmentIndex: index + 1,
+      frameOfReferenceUID: surface.closedSurface.frameOfReferenceUID,
+    } as SurfaceData,
+  });
 
-  return surfaces.reduce((acc: Map<number, string>, surface, index) => {
-    const geometryId = surface.closedSurface.id;
-    geometryLoader.createAndCacheGeometry(geometryId, {
-      type: Enums.GeometryType.SURFACE,
-      geometryData: {
-        points: surface.closedSurface.data.points,
-        polys: surface.closedSurface.data.polys,
-        id: surface.closedSurface.id,
-        segmentIndex: index + 1,
-        frameOfReferenceUID: surface.closedSurface.frameOfReferenceUID,
-      } as SurfaceData,
-    });
+  const segmentIndex = index + 1;
+  return [segmentIndex, geometryId];
+}
 
-    const segmentIndex = index + 1;
+async function processGeometries(
+  surfaces: any[]
+): Promise<Map<number, string>> {
+  return surfaces.reduce((acc: Map<number, string>, surface, index) => {
+    const [segmentIndex, geometryId] = createAndCacheGeometry(surface, index);
     acc.set(segmentIndex, geometryId);
-
     return acc;
   }, new Map());
 }
+
+export async function createAndCacheGeometriesFromSurfaces(): Promise<
+  Map<number, string>
+> {
+  const surfaces = await downloadSurfaces();
+  return processGeometries(surfaces);
+}
+
+export async function createAndCacheGeometriesFromOneSurface(): Promise<
+  Map<number, string>
+> {
+  const surfaces = await downloadOneSurface();
+  return processGeometries([surfaces]);
+}

utils/demo/helpers/downloadSurfacesData.ts

@@ -25,3 +25,11 @@ export default function downloadSurfaces() {
     lung17Promise,
   ]);
 }
+
+export function downloadOneSurface() {
+  const surfacePromise = fetch(assetsURL.SurfaceLung16).then((res) =>
+    res.json()
+  );
+
+  return surfacePromise;
+}