From cae1224cab241fabbcb23fc2318e94371152a27b Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Wed, 16 Sep 2026 20:55:35 -0400
Subject: [PATCH 1/2] fix(rendering): release resources when views are torn
 down

---
 package-lock.json                             |  35 ++---
 package.json                                  |   2 +-
 src/components/tools/SelectTool.vue           |   2 +
 src/components/vtk/VtkRenderWindowParent.vue  |  11 +-
 .../__tests__/useVolumeThumbnailing.spec.ts   | 139 ++++++++++++++++++
 src/composables/useVolumeThumbnailing.ts      |  32 +++-
 src/core/thumbnailers/volume-thumbnailer.ts   |  30 ++++
 src/core/vtk/__tests__/useVtkView.spec.ts     | 108 ++++++++++++++
 src/core/vtk/deleteInteractor.ts              |  21 +++
 src/core/vtk/releaseRenderWindow.ts           |  40 +++++
 src/core/vtk/useVtkView.ts                    |  41 +++---
 11 files changed, 407 insertions(+), 54 deletions(-)
 create mode 100644 src/composables/__tests__/useVolumeThumbnailing.spec.ts
 create mode 100644 src/core/vtk/__tests__/useVtkView.spec.ts
 create mode 100644 src/core/vtk/deleteInteractor.ts
 create mode 100644 src/core/vtk/releaseRenderWindow.ts

diff --git a/package-lock.json b/package-lock.json
index 242cf90ef..db7f994ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@itk-wasm/dicom": "^7.6.4",
         "@itk-wasm/image-io": "1.6.1",
         "@itk-wasm/morphological-contour-interpolation": "2.0.0",
-        "@kitware/vtk.js": "^36.2.0",
+        "@kitware/vtk.js": "^37.0.4",
         "@netlify/edge-functions": "^3.0.2",
         "@rollup/plugin-replace": "^6.0.3",
         "@sentry/vite-plugin": "^4.6.1",
@@ -2636,9 +2636,9 @@
       }
     },
     "node_modules/@kitware/vtk.js": {
-      "version": "36.2.1",
-      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-36.2.1.tgz",
-      "integrity": "sha512-u5V7jfYeve1WNXVl7bZbjp755t1/EMyiW2y0aQU7YZ7RteCfZ8mxk9jB3DTeo9pGcIsVr+E8SIQz2bXHHedPlg==",
+      "version": "37.0.4",
+      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-37.0.4.tgz",
+      "integrity": "sha512-iBCeHRqiYXAQXkYXe8hoMijwgnweYaPVaZrNhyfL1TLR82bfmxiazfjirnixNksSJTpphU8q/7wX1G8SfNOiXA==",
       "dev": true,
       "license": "BSD-3-Clause",
       "dependencies": {
@@ -2646,9 +2646,8 @@
         "commander": "9.2.0",
         "d3-scale": "4.0.2",
         "fast-deep-equal": "3.1.3",
-        "fflate": "0.7.3",
+        "fflate": "0.7.5",
         "gl-matrix": "3.4.3",
-        "globalthis": "1.0.3",
         "seedrandom": "3.0.5",
         "shelljs": "0.8.5",
         "spark-md5": "3.0.2",
@@ -2662,7 +2661,7 @@
       },
       "peerDependencies": {
         "autoprefixer": "^10.4.7",
-        "wslink": ">=1.1.0 || ^2.0.0"
+        "wslink": ">=2.0.0"
       }
     },
     "node_modules/@msgpack/msgpack": {
@@ -11416,9 +11415,9 @@
       }
     },
     "node_modules/fflate": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.3.tgz",
-      "integrity": "sha512-0Zz1jOzJWERhyhsimS54VTqOteCNwRtIlh8isdL0AXLo0g7xNTfTL7oWrkmCnPhZGocKIkWHBistBrrpoNH3aw==",
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.7.5.tgz",
+      "integrity": "sha512-QieYf//cis6ywHNi5qW1+PXPQ4bC+XVJAtS4AXIML8P76GroEiOxm/oQtn1f02UkJY1+KsXMJcC+R2v/Eg4G3g==",
       "dev": true,
       "license": "MIT"
     },
@@ -12121,22 +12120,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/gopd": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
diff --git a/package.json b/package.json
index b5d08518e..df82796ee 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@itk-wasm/dicom": "^7.6.4",
     "@itk-wasm/image-io": "1.6.1",
     "@itk-wasm/morphological-contour-interpolation": "2.0.0",
-    "@kitware/vtk.js": "^36.2.0",
+    "@kitware/vtk.js": "^37.0.4",
     "@netlify/edge-functions": "^3.0.2",
     "@rollup/plugin-replace": "^6.0.3",
     "@sentry/vite-plugin": "^4.6.1",
diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
index af6ad6c6f..7b6b99c4b 100644
--- a/src/components/tools/SelectTool.vue
+++ b/src/components/tools/SelectTool.vue
@@ -48,6 +48,8 @@ onVTKEvent(
     // whatever its last tracked mouse move resolved, which can be a different
     // position or, mid capture, nothing at all.
     const selectedData = await view.widgetManager.getSelectedDataForXY(x, y);
+    // the pick spans a capture, which the view teardown can outrun
+    if (view.widgetManager.isDeleted()) return;
     if ('widget' in selectedData) {
       const widget =
         selectedData.widget as Partial<vtkAnnotationToolWidget> | null;
diff --git a/src/components/vtk/VtkRenderWindowParent.vue b/src/components/vtk/VtkRenderWindowParent.vue
index c4629c69d..ea64ef36d 100644
--- a/src/components/vtk/VtkRenderWindowParent.vue
+++ b/src/components/vtk/VtkRenderWindowParent.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { VtkRenderWindowParentContext } from '@/src/components/vtk/context';
+import { releaseOpenGLRenderWindow } from '@/src/core/vtk/releaseRenderWindow';
 import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
 import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
-import { effectScope, onUnmounted, provide } from 'vue';
+import { effectScope, onScopeDispose, onUnmounted, provide } from 'vue';
 
 const scope = effectScope(true);
 
@@ -12,6 +13,14 @@ const api = scope.run(() => {
   renderWindow.addView(rwView);
   rwView.initialize();
 
+  // Child views unmount before this hook runs, so their nodes are already off
+  // the scene graph by the time the WebGL context they draw through goes away.
+  onScopeDispose(() => {
+    renderWindow.removeView(rwView);
+    releaseOpenGLRenderWindow(rwView as vtkOpenGLRenderWindow);
+    renderWindow.delete();
+  });
+
   return {
     renderWindow,
     renderWindowView: rwView as vtkOpenGLRenderWindow,
diff --git a/src/composables/__tests__/useVolumeThumbnailing.spec.ts b/src/composables/__tests__/useVolumeThumbnailing.spec.ts
new file mode 100644
index 000000000..27df935ef
--- /dev/null
+++ b/src/composables/__tests__/useVolumeThumbnailing.spec.ts
@@ -0,0 +1,139 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { defineComponent, h, ref, type Ref } from 'vue';
+import { flushPromises, mount } from '@vue/test-utils';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { useVolumeThumbnailing } from '@/src/composables/useVolumeThumbnailing';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+import { useImageCacheStore } from '@/src/store/image-cache';
+import { NOOP } from '@/src/constants';
+import type { createVolumeThumbnailer } from '@/src/core/thumbnailers/volume-thumbnailer';
+
+type Thumbnailer = ReturnType<typeof createVolumeThumbnailer>;
+
+const IMAGE_ID = 'img-1';
+const OTHER_IMAGE_ID = 'img-2';
+
+// the real thumbnailer needs a WebGL context the test DOM cannot provide, so
+// this stands in for the surface the composable touches
+function createStubThumbnailer(capture?: Promise<string>) {
+  let deleted = false;
+  let captureCount = 0;
+  const noopProxy = {
+    setDataRange: NOOP,
+    setMode: NOOP,
+    setPoints: NOOP,
+    setGaussians: NOOP,
+    setPresetName: NOOP,
+  };
+  const renderWindow = {
+    render: NOOP,
+    captureImages: () => {
+      captureCount += 1;
+      return [capture ?? Promise.resolve('')];
+    },
+  };
+  const thumbnailer = {
+    scene: { getRenderWindow: () => renderWindow },
+    opacityFuncProxy: noopProxy,
+    colorTransferFuncProxy: noopProxy,
+    setInputImage: NOOP,
+    resetCameraWithOrientation: NOOP,
+    delete() {
+      deleted = true;
+    },
+  };
+  return {
+    thumbnailer: thumbnailer as unknown as Thumbnailer,
+    isDeleted: () => deleted,
+    getCaptureCount: () => captureCount,
+  };
+}
+
+function addImageToCache(id = IMAGE_ID) {
+  const image = vtkImageData.newInstance();
+  image.setDimensions([2, 2, 2]);
+  image
+    .getPointData()
+    .setScalars(vtkDataArray.newInstance({ values: new Uint8Array(8) }));
+  useImageCacheStore().addVTKImageData(image, 'CT', { id });
+}
+
+function mountThumbnailing(
+  thumbnailer: Thumbnailer,
+  imageID: Ref<string | null>
+) {
+  const component = defineComponent({
+    setup() {
+      useVolumeThumbnailing(64, () => thumbnailer);
+      return () => h('div');
+    },
+  });
+  return mount(component, {
+    global: {
+      provide: {
+        [CurrentImageInjectionKey as symbol]: { imageID },
+      },
+    },
+  });
+}
+
+describe('useVolumeThumbnailing', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('disposes the thumbnailer when the component unmounts', async () => {
+    const stub = createStubThumbnailer();
+    const wrapper = mountThumbnailing(stub.thumbnailer, ref(null));
+    expect(stub.isDeleted()).toBe(false);
+
+    wrapper.unmount();
+    await flushPromises();
+
+    expect(stub.isDeleted()).toBe(true);
+  });
+
+  it('holds off deletion until an in-flight capture settles', async () => {
+    let resolveCapture!: (uri: string) => void;
+    const capture = new Promise<string>((resolve) => {
+      resolveCapture = resolve;
+    });
+    const stub = createStubThumbnailer(capture);
+    addImageToCache();
+
+    const wrapper = mountThumbnailing(stub.thumbnailer, ref(IMAGE_ID));
+    await flushPromises();
+    expect(stub.getCaptureCount()).toBe(1);
+
+    // captureImages() finishes its render on a timer, so deleting the render
+    // window while the capture is pending would crash that callback.
+    wrapper.unmount();
+    await flushPromises();
+    expect(stub.isDeleted()).toBe(false);
+
+    resolveCapture('data:image/png;base64,');
+    await flushPromises();
+    expect(stub.isDeleted()).toBe(true);
+
+    // the unmount sentinel keeps the remaining presets from capturing
+    expect(stub.getCaptureCount()).toBe(1);
+  });
+
+  it('starts a new cycle even while an earlier capture never settles', async () => {
+    const stub = createStubThumbnailer(new Promise<string>(() => {}));
+    addImageToCache();
+    addImageToCache(OTHER_IMAGE_ID);
+    const imageID = ref<string | null>(IMAGE_ID);
+
+    mountThumbnailing(stub.thumbnailer, imageID);
+    await flushPromises();
+    expect(stub.getCaptureCount()).toBe(1);
+
+    imageID.value = OTHER_IMAGE_ID;
+    await flushPromises();
+
+    expect(stub.getCaptureCount()).toBeGreaterThan(1);
+  });
+});
diff --git a/src/composables/useVolumeThumbnailing.ts b/src/composables/useVolumeThumbnailing.ts
index f3b5ba307..6dacf8221 100644
--- a/src/composables/useVolumeThumbnailing.ts
+++ b/src/composables/useVolumeThumbnailing.ts
@@ -13,6 +13,7 @@ import {
   getOpacityRangeFromPreset,
 } from '../utils/vtk-helpers';
 import { PresetNameList } from '../vtk/ColorMaps';
+import { logError } from '../utils/loggers';
 
 function resetOpacityFunction(
   pwfProxy: vtkPiecewiseFunctionProxy,
@@ -42,9 +43,12 @@ function resetOpacityFunction(
   }
 }
 
-export function useVolumeThumbnailing(thumbnailSize: number) {
+export function useVolumeThumbnailing(
+  thumbnailSize: number,
+  createThumbnailer = createVolumeThumbnailer
+) {
   const thumbnails = reactive<Record<string, Record<string, string>>>({});
-  const thumbnailer = createVolumeThumbnailer(thumbnailSize);
+  const thumbnailer = createThumbnailer(thumbnailSize);
   const currentThumbnails = ref<Record<string, string>>({});
 
   const { currentImageMetadata, currentImageID, currentImageData } =
@@ -59,9 +63,15 @@ export function useVolumeThumbnailing(thumbnailSize: number) {
 
   // used to interrupt a thumbnailing cycle if
   // doThumbnailing is called again
+  const UNMOUNTED = Symbol('unmount');
   let interruptSentinel = Symbol('interrupt');
 
+  // captures finish on a timer, so deletion waits for the in-flight ones
+  const inFlightCaptures = new Set<Promise<string>>();
+
   async function doThumbnailing(imageID: string, image: vtkImageData) {
+    if (interruptSentinel === UNMOUNTED) return;
+
     const localSentinel = Symbol('interrupt');
     interruptSentinel = localSentinel;
 
@@ -108,7 +118,16 @@ export function useVolumeThumbnailing(thumbnailSize: number) {
 
       const renWin = thumbnailer.scene.getRenderWindow();
       renWin.render();
-      const imageURL = await renWin.captureImages()[0];
+      const capture = renWin.captureImages()[0];
+      inFlightCaptures.add(capture);
+      const imageURL = await capture.finally(() => {
+        inFlightCaptures.delete(capture);
+      });
+
+      // the capture spans a render, so the cycle may have been superseded
+      if (interruptSentinel !== localSentinel) return;
+      if (imageID !== currentImageID.value) return;
+
       if (imageURL) {
         thumbnails[imageID][presetName] = imageURL;
       }
@@ -117,7 +136,7 @@ export function useVolumeThumbnailing(thumbnailSize: number) {
     PresetNameList.reduce(
       (promise, presetName) => promise.then(() => helper(presetName)),
       Promise.resolve()
-    );
+    ).catch(logError);
   }
 
   // workaround for computed not properly working on deeply reactive objects
@@ -134,7 +153,10 @@ export function useVolumeThumbnailing(thumbnailSize: number) {
 
   // force thumbnailing to stop
   onBeforeUnmount(() => {
-    interruptSentinel = Symbol('unmount');
+    interruptSentinel = UNMOUNTED;
+    Promise.allSettled([...inFlightCaptures])
+      .then(() => thumbnailer.delete())
+      .catch(logError);
   });
 
   // trigger thumbnailing
diff --git a/src/core/thumbnailers/volume-thumbnailer.ts b/src/core/thumbnailers/volume-thumbnailer.ts
index 8bec0742b..aa6a12836 100644
--- a/src/core/thumbnailers/volume-thumbnailer.ts
+++ b/src/core/thumbnailers/volume-thumbnailer.ts
@@ -9,7 +9,10 @@ import vtkLookupTableProxy from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
 import { vec3 } from 'gl-matrix';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import vtkVolumeProperty from '@kitware/vtk.js/Rendering/Core/VolumeProperty';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
 import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { beginContextRelease } from '@/src/core/vtk/releaseRenderWindow';
+import { deleteInteractor } from '@/src/core/vtk/deleteInteractor';
 
 export function createRenderingPipeline() {
   const actor = vtkVolume.newInstance();
@@ -127,5 +130,32 @@ export function createVolumeThumbnailer(size: number) {
         renderer.updateLightsGeometryToFollowCamera();
       }
     },
+    delete() {
+      renderer.removeVolume(actor);
+      // scene.delete() deletes the API specific render window, so the context
+      // can only be handed back afterwards
+      const apiRenderWindow =
+        scene.getApiSpecificRenderWindow() as vtkOpenGLRenderWindow;
+      const loseContext = beginContextRelease(apiRenderWindow);
+      const interactor = scene.getInteractor();
+      const renderWindow = scene.getRenderWindow();
+      try {
+        // nothing that walks the render window's view list should reach the
+        // deleted view
+        renderWindow.removeView(apiRenderWindow);
+        scene.delete();
+        deleteInteractor(interactor);
+      } finally {
+        loseContext();
+      }
+      renderWindow.delete();
+      renderer.delete();
+      actor.delete();
+      mapper.delete();
+      opacityFuncProxy.delete();
+      colorTransferFuncProxy.delete();
+      pipeline.cfun.delete();
+      pipeline.ofun.delete();
+    },
   };
 }
diff --git a/src/core/vtk/__tests__/useVtkView.spec.ts b/src/core/vtk/__tests__/useVtkView.spec.ts
new file mode 100644
index 000000000..4bc87d430
--- /dev/null
+++ b/src/core/vtk/__tests__/useVtkView.spec.ts
@@ -0,0 +1,108 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponent, effectScope, h, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import { VtkRenderWindowParentContext } from '@/src/components/vtk/context';
+import { VtkRenderWindowParentApi } from '@/src/types/vtk-types';
+import { useVtkView, useWebGLRenderWindow } from '@/src/core/vtk/useVtkView';
+
+function createParent() {
+  const renderWindow = vtkRenderWindow.newInstance();
+  const renderWindowView = renderWindow.newAPISpecificView(
+    'WebGL'
+  ) as vtkOpenGLRenderWindow;
+  renderWindow.addView(renderWindowView);
+  return { renderWindow, renderWindowView };
+}
+
+function createRecordingParent(calls: Array<string>) {
+  const { renderWindow, renderWindowView } = createParent();
+  // an uninitialized interactor keeps the parent's renders inert: the test DOM
+  // has no WebGL context to traverse
+  renderWindow.setInteractor(vtkRenderWindowInteractor.newInstance());
+
+  return {
+    renderWindow: {
+      ...renderWindow,
+      removeRenderWindow: (child: vtkRenderWindow) => {
+        calls.push('removeRenderWindow');
+        return renderWindow.removeRenderWindow(child);
+      },
+    },
+    renderWindowView: {
+      ...renderWindowView,
+      removeNode: (node: vtkOpenGLRenderWindow) => {
+        calls.push('removeNode');
+        return renderWindowView.removeNode(node);
+      },
+    },
+  } as unknown as VtkRenderWindowParentApi;
+}
+
+function mountViewUnder(parent: VtkRenderWindowParentApi) {
+  const component = defineComponent({
+    setup() {
+      // no container: attaching one kicks off renders the test DOM cannot
+      // service without a WebGL context
+      useVtkView(ref(null));
+      return () => h('div');
+    },
+  });
+  return mount(component, {
+    global: {
+      provide: { [VtkRenderWindowParentContext as symbol]: parent },
+    },
+  });
+}
+
+describe('useVtkView teardown', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('queues no render work once the view scope is disposed', () => {
+    const container = document.createElement('div');
+    const scope = effectScope(true);
+    const view = scope.run(() => useVtkView(container))!;
+
+    scope.stop();
+
+    view.requestRender();
+    view.requestRender({ immediate: true });
+
+    expect(vi.getTimerCount()).toBe(0);
+    expect(view.widgetManager.isDeleted()).toBe(true);
+  });
+
+  it('takes its view node off the parent scene graph on dispose', () => {
+    const parent = createParent();
+    const renderWindow = vtkRenderWindow.newInstance();
+    const container = document.createElement('div');
+    const scope = effectScope(true);
+
+    const renderWindowView = scope.run(() =>
+      useWebGLRenderWindow(renderWindow, container, parent)
+    )!;
+    expect(parent.renderWindowView.getChildren()).toHaveLength(1);
+
+    scope.stop();
+
+    expect(parent.renderWindowView.getChildren()).toHaveLength(0);
+    expect(renderWindowView.isDeleted()).toBe(true);
+  });
+
+  it('unregisters from the parent render window before dropping its view node', () => {
+    const calls: Array<string> = [];
+    const wrapper = mountViewUnder(createRecordingParent(calls));
+
+    wrapper.unmount();
+
+    expect(calls).toEqual(['removeRenderWindow', 'removeNode']);
+  });
+});
diff --git a/src/core/vtk/deleteInteractor.ts b/src/core/vtk/deleteInteractor.ts
new file mode 100644
index 000000000..7fc9ef68d
--- /dev/null
+++ b/src/core/vtk/deleteInteractor.ts
@@ -0,0 +1,21 @@
+import type vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+
+// vtk.js' public cancelAnimation() is a no-op while the post-wheel extension
+// window is still open (model._animationExtendedEnd), so a pending rAF can
+// survive dispose and fire against a deleted interactor.
+function cancelPendingAnimationFrame(interactor: vtkRenderWindowInteractor) {
+  const model = (
+    interactor as unknown as { get(): { animationRequest?: number | null } }
+  ).get();
+  if (model.animationRequest == null) return;
+
+  cancelAnimationFrame(model.animationRequest);
+  model.animationRequest = null;
+}
+
+// interactor.delete() cancels outstanding animations by rendering, through a
+// view its callers have already deleted, so the pending frame has to go first.
+export function deleteInteractor(interactor: vtkRenderWindowInteractor) {
+  cancelPendingAnimationFrame(interactor);
+  interactor.delete();
+}
diff --git a/src/core/vtk/releaseRenderWindow.ts b/src/core/vtk/releaseRenderWindow.ts
new file mode 100644
index 000000000..741751029
--- /dev/null
+++ b/src/core/vtk/releaseRenderWindow.ts
@@ -0,0 +1,40 @@
+import type vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+
+// These public methods are not included in vtk.js' render window typings.
+type ReleasableRenderWindow = vtkOpenGLRenderWindow & {
+  getContext(): WebGLRenderingContext | WebGL2RenderingContext | null;
+  releaseGraphicsResources(): void;
+};
+
+/**
+ * Releases a WebGL render window along with the browser context behind it.
+ *
+ * delete() alone leaves the context live until the canvas is collected, and
+ * browsers force-lose the oldest context past their per page cap. loseContext()
+ * runs after delete() because delete() removes the webglcontextlost handler
+ * that would ask the browser to restore what we are giving up.
+ */
+export function releaseOpenGLRenderWindow(view: vtkOpenGLRenderWindow) {
+  if (view.isDeleted()) return;
+  const loseContext = beginContextRelease(view);
+  try {
+    view.delete();
+  } finally {
+    loseContext();
+  }
+}
+
+/**
+ * Frees a render window's GPU resources and returns the step that gives the
+ * browser context back, for owners whose own teardown chain deletes the view
+ * for them.
+ *
+ * This must only be called for a root render window. Child windows proxy both
+ * methods to their root, which would release resources still used by siblings.
+ */
+export function beginContextRelease(view: vtkOpenGLRenderWindow) {
+  const releasable = view as ReleasableRenderWindow;
+  const context = releasable.getContext();
+  releasable.releaseGraphicsResources();
+  return () => context?.getExtension('WEBGL_lose_context')?.loseContext();
+}
diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index 3ff4e6aea..06519b164 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -3,6 +3,8 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { View } from '@/src/core/vtk/types';
 import { Maybe } from '@/src/types';
 import { VtkRenderWindowParentApi } from '@/src/types/vtk-types';
+import { releaseOpenGLRenderWindow } from '@/src/core/vtk/releaseRenderWindow';
+import { deleteInteractor } from '@/src/core/vtk/deleteInteractor';
 import { batchForNextTask } from '@/src/utils/batchForNextTask';
 import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
@@ -19,23 +21,6 @@ import {
   watchPostEffect,
 } from 'vue';
 
-// vtk.js' public interactor.cancelAnimation() is a no-op while the
-// post-wheel extension window is still open (model._animationExtendedEnd),
-// so on dispose during that window a pending rAF survives and fires against
-// the deleted interactor. Reach into the private animationRequest field to
-// cancel it directly.
-function cancelPendingInteractorAnimationFrame(
-  interactor: vtkRenderWindowInteractor
-) {
-  const model = (
-    interactor as unknown as { get(): { animationRequest?: number | null } }
-  ).get();
-  if (model.animationRequest == null) return;
-
-  cancelAnimationFrame(model.animationRequest);
-  model.animationRequest = null;
-}
-
 export function useWebGLRenderWindow(
   renderWindow: vtkRenderWindow,
   container: MaybeRef<Maybe<HTMLElement>>,
@@ -57,10 +42,12 @@ export function useWebGLRenderWindow(
   });
 
   onScopeDispose(() => {
+    // a child node draws through its parent's context, so only the standalone
+    // case has one of its own to release
     if (parent?.renderWindowView) {
       parent.renderWindowView.removeNode(renderWindowView);
     } else {
-      renderWindowView.delete();
+      releaseOpenGLRenderWindow(renderWindowView);
     }
   });
 
@@ -77,6 +64,8 @@ export function useWidgetManager(renderer: vtkRenderer) {
   const manager = vtkWidgetManager.newInstance();
   manager.setRenderer(renderer);
 
+  onScopeDispose(() => manager.delete());
+
   const updatePickingState = () => {
     const enabled = manager.getPickingEnabled();
     const widgetCount = manager.getWidgets().length;
@@ -99,6 +88,15 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
   const renderWindow = vtkRenderWindow.newInstance();
   renderWindow.addRenderer(renderer);
 
+  let disposed = false;
+
+  // Registered before the view cleanup because the parent rebuilds its scene
+  // graph from its own child render window list.
+  onScopeDispose(() => {
+    disposed = true;
+    parent?.renderWindow.removeRenderWindow(renderWindow);
+  });
+
   parent?.renderWindow.addRenderWindow(renderWindow);
 
   // the render window view
@@ -141,7 +139,10 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
     renderWindow.render();
   };
 
+  // requests outlive the view: vtk event handlers and promises that settle
+  // after dispose has deleted the scene graph nodes a render would traverse
   const requestRender = ({ immediate } = { immediate: false }) => {
+    if (disposed) return;
     if (immediate) {
       immediateRender();
     }
@@ -176,12 +177,10 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
     deferredRender.cancel();
 
     renderWindow.removeRenderer(renderer);
-    parent?.renderWindow.removeRenderWindow(renderWindow);
 
     renderer.delete();
     renderWindow.delete();
-    cancelPendingInteractorAnimationFrame(interactor);
-    interactor.delete();
+    deleteInteractor(interactor);
   });
 
   return {

From ebf44f120669ed5f9a3af3d888c9502aa769c5d3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul@vizworkshop.com>
Date: Wed, 16 Sep 2026 21:35:32 -0400
Subject: [PATCH 2/2] fix(rendering): close remaining VTK resource leaks

---
 .gitattributes                                |  1 +
 patches/@kitware+vtk.js+37.0.4.patch          | 68 +++++++++++++++++
 src/components/RenderingModule.vue            |  5 +-
 src/components/VolumeRendering.vue            | 12 +--
 src/components/tools/ScalarProbe.vue          |  3 +-
 src/components/tools/crop/Crop3D.vue          |  1 +
 .../tools/crosshairs/CrosshairsWidget2D.vue   |  1 +
 src/components/tools/paint/PaintWidget2D.vue  |  1 +
 .../tools/polygon/PolygonWidget2D.vue         |  1 +
 .../tools/rectangle/RectangleWidget2D.vue     |  1 +
 src/components/tools/ruler/RulerWidget2D.vue  |  1 +
 .../vtk/VtkBaseObliqueSliceRepresentation.vue |  3 +-
 .../vtk/VtkBaseVolumeRepresentation.vue       |  5 ++
 .../vtk/VtkImageOutlineRepresentation.vue     |  3 +-
 .../vtk/VtkLayerSliceRepresentation.vue       | 15 ++--
 src/components/vtk/VtkOrientationMarker.vue   |  3 +-
 .../VtkSegmentationSliceRepresentation.vue    | 22 ++++--
 src/core/vtk/useOrientationMarker.ts          |  1 +
 tests/specs/volume-thumbnail-layout.e2e.ts    | 76 +++++++++++++++++++
 19 files changed, 195 insertions(+), 28 deletions(-)
 create mode 100644 patches/@kitware+vtk.js+37.0.4.patch
 create mode 100644 tests/specs/volume-thumbnail-layout.e2e.ts

diff --git a/.gitattributes b/.gitattributes
index 056e3cb90..5fcaab605 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,2 +1,3 @@
 * text=auto eol=lf
 package-lock.json linguist-generated=true
+patches/*.patch -whitespace
diff --git a/patches/@kitware+vtk.js+37.0.4.patch b/patches/@kitware+vtk.js+37.0.4.patch
new file mode 100644
index 000000000..09a4dffed
--- /dev/null
+++ b/patches/@kitware+vtk.js+37.0.4.patch
@@ -0,0 +1,68 @@
+diff --git a/node_modules/@kitware/vtk.js/Rendering/OpenGL/ImageMapper.js b/node_modules/@kitware/vtk.js/Rendering/OpenGL/ImageMapper.js
+index 7defbee..70178df 100644
+--- a/node_modules/@kitware/vtk.js/Rendering/OpenGL/ImageMapper.js
++++ b/node_modules/@kitware/vtk.js/Rendering/OpenGL/ImageMapper.js
+@@ -32,11 +32,16 @@ function splitStringOnEnter(inputString) {
+ }
+ function vtkOpenGLImageMapper(publicAPI, model) {
+ 	model.classHierarchy.push("vtkOpenGLImageMapper");
++	function unregisterTextureResource(renderWindow, coreObject, texture) {
++		if (coreObject) renderWindow.unregisterGraphicsResourceUser(coreObject, publicAPI);
++		else texture?.releaseGraphicsResources(renderWindow);
++	}
+ 	function unregisterGraphicsResources(renderWindow) {
+ 		model.openGLTexture.releaseGraphicsResources(renderWindow);
++		model.tris.releaseGraphicsResources(renderWindow);
++		unregisterTextureResource(renderWindow, model._colorTransferFunc, model.colorTexture);
++		unregisterTextureResource(renderWindow, model._pwFunc, model.pwfTexture);
+ 		[
+-			model._colorTransferFunc,
+-			model._pwFunc,
+ 			model._labelOutlineThicknessArray,
+ 			model._labelOutlineOpacity
+ 		].forEach((coreObject) => renderWindow.unregisterGraphicsResourceUser(coreObject, publicAPI));
+@@ -567,6 +572,11 @@ function vtkOpenGLImageMapper(publicAPI, model) {
+ 		const firstColorTransferFunc = actorProperty.getRGBTransferFunction();
+ 		const cTex = model._openGLRenderWindow.getGraphicsResourceForObject(firstColorTransferFunc);
+ 		if (!cTex?.oglObject?.getHandle() || cTex?.hash !== cfunToString) {
++			if (!firstColorTransferFunc) {
++				if (model._colorTransferFunc) model._openGLRenderWindow.unregisterGraphicsResourceUser(model._colorTransferFunc, publicAPI);
++				else model.colorTexture?.releaseGraphicsResources(model._openGLRenderWindow);
++				model._colorTransferFunc = null;
++			}
+ 			model.colorTexture = Texture_default.newInstance({ resizable: true });
+ 			model.colorTexture.setOpenGLRenderWindow(model._openGLRenderWindow);
+ 			let cWidth = model.renderable.getColorTextureWidth();
+@@ -629,6 +639,11 @@ function vtkOpenGLImageMapper(publicAPI, model) {
+ 		const firstPwFunc = actorProperty.getPiecewiseFunction();
+ 		const pwfTex = model._openGLRenderWindow.getGraphicsResourceForObject(firstPwFunc);
+ 		if (!pwfTex?.oglObject?.getHandle() || pwfTex?.hash !== pwfunToString) {
++			if (!firstPwFunc) {
++				if (model._pwFunc) model._openGLRenderWindow.unregisterGraphicsResourceUser(model._pwFunc, publicAPI);
++				else model.pwfTexture?.releaseGraphicsResources(model._openGLRenderWindow);
++				model._pwFunc = null;
++			}
+ 			let pwfWidth = model.renderable.getOpacityTextureWidth();
+ 			if (pwfWidth <= 0) pwfWidth = model.context.getParameter(model.context.MAX_TEXTURE_SIZE);
+ 			const pwfSize = pwfWidth * textureHeight;
+diff --git a/node_modules/@kitware/vtk.js/Rendering/OpenGL/Texture.js b/node_modules/@kitware/vtk.js/Rendering/OpenGL/Texture.js
+index 3563142..111214c 100644
+--- a/node_modules/@kitware/vtk.js/Rendering/OpenGL/Texture.js
++++ b/node_modules/@kitware/vtk.js/Rendering/OpenGL/Texture.js
+@@ -182,7 +182,7 @@ function vtkOpenGLTexture(publicAPI, model) {
+ 	publicAPI.deactivate = () => {
+ 		if (model._openGLRenderWindow) model._openGLRenderWindow.deactivateTexture(publicAPI);
+ 	};
+-	publicAPI.releaseGraphicsResources = (rwin) => {
++	publicAPI.releaseGraphicsResources = (rwin = model._openGLRenderWindow) => {
+ 		if (rwin && model.handle) {
+ 			rwin.activateTexture(publicAPI);
+ 			rwin.deactivateTexture(publicAPI);
+@@ -863,6 +863,7 @@ function vtkOpenGLTexture(publicAPI, model) {
+ 	publicAPI.enableUseHalfFloat = (use) => {
+ 		model.enableUseHalfFloat = use;
+ 	};
++	publicAPI.delete = macros_exports.chain(() => publicAPI.releaseGraphicsResources(), publicAPI.delete);
+ }
+ var DEFAULT_VALUES = {
+ 	_openGLRenderWindow: null,
diff --git a/src/components/RenderingModule.vue b/src/components/RenderingModule.vue
index 2180bc8af..7091a2a89 100644
--- a/src/components/RenderingModule.vue
+++ b/src/components/RenderingModule.vue
@@ -22,12 +22,13 @@ export default defineComponent({
       const activeView = viewStore.getView(viewStore.activeView);
       if (
         activeView?.type === '3D' &&
-        activeView.dataID === currentImageID.value
+        activeView.dataID === currentImageID.value &&
+        viewStore.visibleViews.includes(activeView)
       ) {
         return activeView.id;
       }
 
-      const any3DView = Object.values(viewStore.viewByID).find(
+      const any3DView = viewStore.visibleViews.find(
         (v) => v.type === '3D' && v.dataID === currentImageID.value
       );
       return any3DView?.id;
diff --git a/src/components/VolumeRendering.vue b/src/components/VolumeRendering.vue
index 8a7184ddb..8ee168645 100644
--- a/src/components/VolumeRendering.vue
+++ b/src/components/VolumeRendering.vue
@@ -8,7 +8,6 @@ import {
   watchEffect,
 } from 'vue';
 import { onKeyDown, onKeyUp } from '@vueuse/core';
-import { PresetNameList } from '@/src/vtk/ColorMaps';
 import vtkPiecewiseWidget from '@/src/vtk/PiecewiseWidget';
 import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
@@ -25,11 +24,9 @@ import {
   getColorFunctionRangeFromPreset,
   getShiftedOpacityFromPreset,
 } from '@/src/utils/vtk-helpers';
-import { useVolumeThumbnailing } from '@/src/composables/useVolumeThumbnailing';
 
 const WIDGET_WIDTH = 250;
 const WIDGET_HEIGHT = 150;
-const THUMBNAIL_SIZE = 80;
 
 export default defineComponent({
   name: 'VolumeRendering',
@@ -182,6 +179,8 @@ export default defineComponent({
     onBeforeUnmount(() => {
       pwfWidget.unbindMouseListeners();
       pwfWidget.setContainer(null);
+      pwfWidget.delete();
+      colorTransferFunc.delete();
     });
 
     watch(
@@ -239,10 +238,6 @@ export default defineComponent({
       { immediate: true }
     );
 
-    // -- thumbnailing -- //
-
-    const { currentThumbnails } = useVolumeThumbnailing(THUMBNAIL_SIZE);
-
     // --- selection and updates --- //
 
     const selectedPreset = computed(
@@ -335,7 +330,6 @@ export default defineComponent({
     return {
       editorContainerRef,
       pwfEditorRef,
-      thumbnails: currentThumbnails,
       hasCurrentImage,
       preset: selectedPreset,
       fullMappingRange,
@@ -348,8 +342,6 @@ export default defineComponent({
         const step = Math.min(1, width / 256);
         return step > 1 ? Math.round(step) : step;
       }),
-      presetList: PresetNameList,
-      size: THUMBNAIL_SIZE,
       rangeShiftMin: computed(() => -fullMappingRangeWidth.value / 2),
       rangeShiftMax: computed(() => fullMappingRangeWidth.value / 2),
       rangeShift,
diff --git a/src/components/tools/ScalarProbe.vue b/src/components/tools/ScalarProbe.vue
index a3e317840..c962c82b1 100644
--- a/src/components/tools/ScalarProbe.vue
+++ b/src/components/tools/ScalarProbe.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject, watch, computed, toRefs } from 'vue';
+import { inject, watch, computed, toRefs, onScopeDispose } from 'vue';
 import type { ReadonlyVec3 } from 'gl-matrix';
 import { vec3 } from 'gl-matrix';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
@@ -94,6 +94,7 @@ const sampleSet = computed(() => {
 
 const pointPicker = vtkPointPicker.newInstance();
 pointPicker.setPickFromList(true);
+onScopeDispose(() => pointPicker.delete());
 
 watch(
   () => baseRep.value?.actor,
diff --git a/src/components/tools/crop/Crop3D.vue b/src/components/tools/crop/Crop3D.vue
index 08ee562af..92962b8e8 100644
--- a/src/components/tools/crop/Crop3D.vue
+++ b/src/components/tools/crop/Crop3D.vue
@@ -83,6 +83,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       widgetManager.removeWidget(factory);
+      (factory as unknown as { delete(): void }).delete();
     });
 
     const { metadata: imageMetadata } = useImage(imageId);
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index 7294c1a76..980adc4b9 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -68,6 +68,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
+    onUnmounted(() => manipulator.delete());
 
     const { metadata: imageMetadata } = useImage(imageId);
     watchEffect(() => {
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index b870dfed1..93db850b5 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -130,6 +130,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
+    onUnmounted(() => manipulator.delete());
 
     watchEffect(() => {
       if (slice.value == null) return;
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index c5b5d2470..2c1b8f65b 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -135,6 +135,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
+    onUnmounted(() => manipulator.delete());
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index f48a568ab..00eec0a2a 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -123,6 +123,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
+    onUnmounted(() => manipulator.delete());
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 8d146c63d..7e710df42 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -122,6 +122,7 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
+    onUnmounted(() => manipulator.delete());
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
index 3be406056..9cc07f56b 100644
--- a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject } from 'vue';
+import { toRefs, watchEffect, inject, onScopeDispose } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useResliceRepresentation } from '@/src/core/vtk/useResliceRepresentation';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
@@ -42,6 +42,7 @@ sliceRep.mapper.setRelativeCoincidentTopologyPolygonOffsetParameters(1, 1);
 
 // create slicing plane
 const slicePlane = vtkPlane.newInstance();
+onScopeDispose(() => slicePlane.delete());
 sliceRep.mapper.setSlicePlane(slicePlane);
 
 // initialize visual properties
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index 8793c9f62..03953f45d 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -7,6 +7,7 @@ import {
   watch,
   shallowRef,
   Ref,
+  onScopeDispose,
 } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useVolumeRepresentation } from '@/src/core/vtk/useVolumeRepresentation';
@@ -67,6 +68,10 @@ const rep = useVolumeRepresentation(view, imageData);
 
 const cfun = vtkColorTransferFunction.newInstance();
 const ofun = vtkPiecewiseFunction.newInstance();
+onScopeDispose(() => {
+  cfun.delete();
+  ofun.delete();
+});
 rep.property.setRGBTransferFunction(0, cfun);
 rep.property.setScalarOpacity(0, ofun);
 rep.property.setShade(true);
diff --git a/src/components/vtk/VtkImageOutlineRepresentation.vue b/src/components/vtk/VtkImageOutlineRepresentation.vue
index 7a8a78da3..40b9ddab2 100644
--- a/src/components/vtk/VtkImageOutlineRepresentation.vue
+++ b/src/components/vtk/VtkImageOutlineRepresentation.vue
@@ -13,7 +13,7 @@ import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { syncRefs, watchImmediate } from '@vueuse/core';
-import { inject, toRefs, watchEffect } from 'vue';
+import { inject, onScopeDispose, toRefs, watchEffect } from 'vue';
 
 interface Props {
   viewId: string;
@@ -40,6 +40,7 @@ const outline = outlineFilter.getOutputData<vtkPolyData>(0);
 
 // slicing plane
 const slicePlane = vtkPlane.newInstance();
+onScopeDispose(() => slicePlane.delete());
 const cutterFilter = useVtkFilter(vtkCutter, outline);
 (cutterFilter.filter as any).setCutFunction(slicePlane);
 
diff --git a/src/components/vtk/VtkLayerSliceRepresentation.vue b/src/components/vtk/VtkLayerSliceRepresentation.vue
index b935246e0..1d5946f50 100644
--- a/src/components/vtk/VtkLayerSliceRepresentation.vue
+++ b/src/components/vtk/VtkLayerSliceRepresentation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject, computed } from 'vue';
+import { toRefs, watchEffect, inject, computed, onScopeDispose } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { LPSAxis } from '@/src/types/lps';
@@ -39,11 +39,14 @@ const imageData = computed(() =>
 );
 const sliceRep = useSliceRepresentation(view, imageData);
 
-sliceRep.property.setRGBTransferFunction(
-  0,
-  vtkColorTransferFunction.newInstance()
-);
-sliceRep.property.setScalarOpacity(0, vtkPiecewiseFunction.newInstance());
+const ownedColorTransferFunction = vtkColorTransferFunction.newInstance();
+const ownedOpacityFunction = vtkPiecewiseFunction.newInstance();
+sliceRep.property.setRGBTransferFunction(0, ownedColorTransferFunction);
+sliceRep.property.setScalarOpacity(0, ownedOpacityFunction);
+onScopeDispose(() => {
+  ownedColorTransferFunction.delete();
+  ownedOpacityFunction.delete();
+});
 sliceRep.property.setUseLookupTableScalarRange(false);
 
 // set slice ordering to be in front of the segmentations
diff --git a/src/components/vtk/VtkOrientationMarker.vue b/src/components/vtk/VtkOrientationMarker.vue
index 7bdf9fa13..f74eb93c7 100644
--- a/src/components/vtk/VtkOrientationMarker.vue
+++ b/src/components/vtk/VtkOrientationMarker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue';
+import { inject, onScopeDispose } from 'vue';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useOrientationMarker } from '@/src/core/vtk/useOrientationMarker';
 import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
@@ -13,6 +13,7 @@ AnnotatedCubePresets.applyPreset('default', actor); // applies color
 AnnotatedCubePresets.applyPreset('lps', actor);
 
 useOrientationMarker(actor, view.interactor);
+onScopeDispose(() => actor.delete());
 </script>
 
 <template><slot></slot></template>
diff --git a/src/components/vtk/VtkSegmentationSliceRepresentation.vue b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
index 033920fe4..cfc2a3599 100644
--- a/src/components/vtk/VtkSegmentationSliceRepresentation.vue
+++ b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { toRefs, watchEffect, inject, computed, unref } from 'vue';
+import {
+  toRefs,
+  watchEffect,
+  inject,
+  computed,
+  unref,
+  onScopeDispose,
+} from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
 import { LPSAxis } from '@/src/types/lps';
@@ -52,11 +59,14 @@ const sliceRep = useSliceRepresentation(view, imageData);
 // Let widget fill representations be picked through the segment overlay
 sliceRep.actor.setPickable(false);
 
-sliceRep.property.setRGBTransferFunction(
-  0,
-  vtkColorTransferFunction.newInstance()
-);
-sliceRep.property.setScalarOpacity(0, vtkPiecewiseFunction.newInstance());
+const ownedColorTransferFunction = vtkColorTransferFunction.newInstance();
+const ownedOpacityFunction = vtkPiecewiseFunction.newInstance();
+sliceRep.property.setRGBTransferFunction(0, ownedColorTransferFunction);
+sliceRep.property.setScalarOpacity(0, ownedOpacityFunction);
+onScopeDispose(() => {
+  ownedColorTransferFunction.delete();
+  ownedOpacityFunction.delete();
+});
 sliceRep.property.setInterpolationType(InterpolationType.NEAREST);
 // needed for vtk.js >= 23.0.0
 sliceRep.property.setUseLookupTableScalarRange(true);
diff --git a/src/core/vtk/useOrientationMarker.ts b/src/core/vtk/useOrientationMarker.ts
index aa76b8217..27cb08ceb 100644
--- a/src/core/vtk/useOrientationMarker.ts
+++ b/src/core/vtk/useOrientationMarker.ts
@@ -34,6 +34,7 @@ export function useOrientationMarker(
 
   onScopeDispose(() => {
     widget.setEnabled(false);
+    widget.delete();
   });
 
   const corner = computed(() => unref(options)?.corner ?? DEFAULT_CORNER);
diff --git a/tests/specs/volume-thumbnail-layout.e2e.ts b/tests/specs/volume-thumbnail-layout.e2e.ts
new file mode 100644
index 000000000..017f12a09
--- /dev/null
+++ b/tests/specs/volume-thumbnail-layout.e2e.ts
@@ -0,0 +1,76 @@
+import { volViewPage } from '../pageobjects/volview.page';
+import { openConfigAndDataset } from './configTestUtils';
+
+async function waitForPresetThumbnails() {
+  await browser.waitUntil(
+    () =>
+      browser.execute(() =>
+        Array.from(document.querySelectorAll('.v-expansion-panel-title')).some(
+          (element) => element.textContent?.includes('Color Presets')
+        )
+      ),
+    { timeoutMsg: 'Expected the color presets panel' }
+  );
+
+  const imageCount = await browser.execute(
+    () => document.querySelectorAll('.thumbnail-container img').length
+  );
+  if (imageCount === 0) {
+    await browser.execute(() => {
+      const title = Array.from(
+        document.querySelectorAll<HTMLElement>('.v-expansion-panel-title')
+      ).find((element) => element.textContent?.includes('Color Presets'));
+      title?.click();
+    });
+  }
+
+  await browser.waitUntil(
+    () =>
+      browser.execute(() => {
+        const images = Array.from(
+          document.querySelectorAll<HTMLImageElement>(
+            '.thumbnail-container img'
+          )
+        );
+        return (
+          images.length > 0 &&
+          images.every((image) => image.src.startsWith('data:image/png'))
+        );
+      }),
+    { timeoutMsg: 'Expected every color preset thumbnail to finish rendering' }
+  );
+}
+
+async function selectLayout(name: string, views2D: number, has3D: boolean) {
+  await volViewPage.openLayoutMenu(2);
+  await volViewPage.selectLayoutOption(name);
+  await volViewPage.waitForViewCounts(views2D, has3D);
+}
+
+describe('volume preset thumbnails', () => {
+  it('renders thumbnails after repeatedly removing and restoring the 3D view', async () => {
+    await openConfigAndDataset(
+      {
+        layouts: {
+          'Four Up': [
+            ['axial', 'sagittal'],
+            ['coronal', 'volume'],
+          ],
+          'Single Axial': [['axial']],
+        },
+      },
+      'volume-thumbnail-layout'
+    );
+
+    await volViewPage.waitForViewCounts(3, true);
+    await volViewPage.renderingModuleTab.waitForClickable();
+    await volViewPage.renderingModuleTab.click();
+    await waitForPresetThumbnails();
+
+    for (let cycle = 0; cycle < 3; cycle += 1) {
+      await selectLayout('Single Axial', 1, false);
+      await selectLayout('Four Up', 3, true);
+      await waitForPresetThumbnails();
+    }
+  });
+});