fix(deps): roll back vtk.js due to paint widget bug

Added a e2e test to catch the bug in the future.

Author: PaulHax

package-lock.json

@@ -36,7 +36,7 @@
     "@itk-wasm/dicom": "^7.6.4",
     "@itk-wasm/image-io": "1.6.0",
     "@itk-wasm/morphological-contour-interpolation": "2.0.0",
-    "@kitware/vtk.js": "^34.15.1",
+    "@kitware/vtk.js": "^32.12.1",
     "@netlify/edge-functions": "^3.0.2",
     "@rollup/plugin-replace": "^6.0.3",
     "@sentry/vite-plugin": "^4.6.1",

package.json

@@ -92,8 +92,8 @@ useEventListener(
 
 watch(updatedExtents, (current, old) => {
   const startOffset = old.length;
-  rep.property.setUpdatedExtents([
-    ...rep.property.getUpdatedExtents(),
+  rep.mapper.setUpdatedExtents([
+    ...rep.mapper.getUpdatedExtents(),
     ...current.slice(startOffset),
   ]);
   view.requestRender();
@@ -149,23 +149,22 @@ watchEffect(() => {
 
   setCinematicVolumeScatter({
     enabled: enabled && useVolumetricScatteringBlending,
-    property,
+    mapper,
     blending: volumetricScatteringBlending,
   });
 
   setCinematicVolumeSampling({
     enabled,
     image: img,
     mapper,
-    property,
     quality: volumeQuality,
   });
 
   setCinematicLocalAmbientOcclusion({
     enabled: enabled && useLocalAmbientOcclusion,
     kernelRadius: laoKernelRadius,
     kernelSize: laoKernelSize,
-    property,
+    mapper,
   });
 
   view.requestRender();

src/components/vtk/VtkBaseVolumeRepresentation.vue

@@ -1,5 +1,3 @@
- 
- 
 import { Maybe } from '@/src/types';
 import { ensureError } from '@/src/utils';
 import * as BaseParser from 'socket.io-parser';

src/core/remote/chunkedParser.ts

@@ -225,5 +225,4 @@ export type AnnotationToolAPI<T extends AnnotationTool> = ReturnType<
 };
 
 export interface AnnotationToolStore<T extends AnnotationTool = AnnotationTool>
-  extends UnwrapAll<AnnotationToolAPI<T>>,
-    IToolStore {}
+  extends UnwrapAll<AnnotationToolAPI<T>>, IToolStore {}

src/store/tools/useAnnotationTool.ts

@@ -82,15 +82,13 @@ export function setCinematicLighting({
 export interface SetCinematicVolumeSamplingParameters {
   enabled: boolean;
   mapper: vtkVolumeMapper;
-  property: vtkVolumeProperty;
   quality: number;
   image: vtkImageData;
 }
 
 export function setCinematicVolumeSampling({
   enabled,
   mapper,
-  property,
   quality,
   image,
 }: SetCinematicVolumeSamplingParameters) {
@@ -105,8 +103,8 @@ export function setCinematicVolumeSampling({
   mapper.setMaximumSamplesPerRay(samplesPerRay);
   mapper.setSampleDistance(sampleDistance);
   // Adjust the global illumination reach by volume quality slider
-  property.setGlobalIlluminationReach(enabled ? 0.25 * quality : 0);
-  property.setComputeNormalFromOpacity(!enabled && quality > 2);
+  mapper.setGlobalIlluminationReach(enabled ? 0.25 * quality : 0);
+  mapper.setComputeNormalFromOpacity(!enabled && quality > 2);
 }
 
 export interface SetCinematicVolumeShadingParameters {
@@ -153,38 +151,38 @@ export function setCinematicVolumeShading({
 
 export interface SetCinematicVolumeScatterParameters {
   enabled: boolean;
-  property: vtkVolumeProperty;
+  mapper: vtkVolumeMapper;
   blending: number;
 }
 
 export function setCinematicVolumeScatter({
   enabled,
-  property,
+  mapper,
   blending,
 }: SetCinematicVolumeScatterParameters) {
-  property.setVolumetricScatteringBlending(enabled ? blending : 0);
+  mapper.setVolumetricScatteringBlending(enabled ? blending : 0);
 }
 
 export interface SetCinematicLocalAmbientOcclusionParameters {
   enabled: boolean;
-  property: vtkVolumeProperty;
+  mapper: vtkVolumeMapper;
   kernelSize: number;
   kernelRadius: number;
 }
 
 export function setCinematicLocalAmbientOcclusion({
   enabled,
-  property,
+  mapper,
   kernelSize,
   kernelRadius,
 }: SetCinematicLocalAmbientOcclusionParameters) {
   if (enabled) {
-    property.setLocalAmbientOcclusion(true);
-    property.setLAOKernelSize(kernelSize);
-    property.setLAOKernelRadius(kernelRadius);
+    mapper.setLocalAmbientOcclusion(true);
+    mapper.setLAOKernelSize(kernelSize);
+    mapper.setLAOKernelRadius(kernelRadius);
   } else {
-    property.setLocalAmbientOcclusion(false);
-    property.setLAOKernelSize(0);
-    property.setLAOKernelRadius(0);
+    mapper.setLocalAmbientOcclusion(false);
+    mapper.setLAOKernelSize(0);
+    mapper.setLAOKernelRadius(0);
   }
 }

src/utils/volumeProperties.ts

@@ -132,6 +132,15 @@ class VolViewPage extends Page {
     await button.click();
   }
 
+  get paintButton() {
+    return $('button span i[class~=mdi-brush]');
+  }
+
+  async activatePaint() {
+    const button = this.paintButton;
+    await button.click();
+  }
+
   get viewTwoContainer() {
     return $('div[data-testid~="two-view-container"]');
   }

tests/baseline/paint_tool_axial_view_after_stroke-chrome-linux-1200x800-1.png

@@ -0,0 +1,52 @@
+import AppPage from '../pageobjects/volview.page';
+
+describe('Paint tool rendering', () => {
+  it('should not black out axial view after painting', async () => {
+    await AppPage.open();
+    await AppPage.downloadProstateSample();
+    await AppPage.waitForViews();
+
+    const views2D = await AppPage.getViews2D();
+    const axialView = views2D[0];
+
+    await AppPage.activatePaint();
+
+    const canvas = await axialView.$('canvas');
+    const location = await canvas.getLocation();
+    const size = await canvas.getSize();
+
+    const centerX = location.x + size.width / 2;
+    const centerY = location.y + size.height / 2;
+
+    await browser
+      .action('pointer')
+      .move({ x: Math.round(centerX), y: Math.round(centerY) })
+      .down()
+      .move({ x: Math.round(centerX + 50), y: Math.round(centerY + 30) })
+      .up()
+      .perform();
+
+    for (let i = 0; i < 5; i++) {
+      await browser
+        .action('pointer')
+        .move({ x: Math.round(centerX + i * 20), y: Math.round(centerY) })
+        .perform();
+    }
+
+    await browser.waitUntil(
+      async () => {
+        const result = await browser.checkElement(
+          axialView,
+          'paint_tool_axial_view_after_stroke'
+        );
+        return (result as number) < 5;
+      },
+      {
+        timeout: 10000,
+        timeoutMsg:
+          'Axial view should not go black after painting with paint tool',
+        interval: 1000,
+      }
+    );
+  });
+});