From c31b9895e5242ed80d97db141602f1f651ba7c5f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 11:49:26 -0500
Subject: [PATCH 01/11] refactor: split out imaging configs

useSliceConfig and useWindowingConfig encapsulate the values, ranges,
and config objects for each respective imaging property.

SliceSlider now supports the v-model protocol.

fix: asdf
---
 src/components/SliceSlider.vue        |  12 +-
 src/components/VtkObliqueView.vue     |  32 ++---
 src/components/VtkTwoView.vue         | 161 ++++++++++++++------------
 src/composables/useSliceConfig.ts     |  32 +++++
 src/composables/useWindowingConfig.ts |  36 ++++++
 5 files changed, 174 insertions(+), 99 deletions(-)
 create mode 100644 src/composables/useSliceConfig.ts
 create mode 100644 src/composables/useWindowingConfig.ts

diff --git a/src/components/SliceSlider.vue b/src/components/SliceSlider.vue
index 74737e17c..d87f131c6 100644
--- a/src/components/SliceSlider.vue
+++ b/src/components/SliceSlider.vue
@@ -35,7 +35,7 @@ function getYOffsetFromTransform(matStr) {
 
 export default {
   props: {
-    slice: {
+    modelValue: {
       type: Number,
       default: 0,
     },
@@ -57,6 +57,8 @@ export default {
     },
   },
 
+  emits: ['update:modelValue'],
+
   data() {
     return {
       maxHandlePos: 0,
@@ -70,7 +72,7 @@ export default {
   computed: {
     handlePosition() {
       const range = this.max - this.min <= 0 ? 1 : this.max - this.min;
-      const pos = this.maxHandlePos * ((this.slice - this.min) / range);
+      const pos = this.maxHandlePos * ((this.modelValue - this.min) / range);
       return this.dragging ? this.draggingHandlePos : pos;
     },
     draggingHandlePos() {
@@ -118,7 +120,7 @@ export default {
           Math.min(this.maxHandlePos, ev.pageY - y - this.handleHeight / 2)
         );
         const newSlice = this.getNearestSlice(this.initialHandlePos);
-        this.$emit('input', newSlice);
+        this.$emit('modelValue', newSlice);
       }
 
       this.yOffset = 0;
@@ -132,7 +134,7 @@ export default {
 
       this.yOffset = ev.pageY - this.initialMousePosY;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('input', slice);
+      this.$emit('modelValue', slice);
     },
 
     onDragEnd(ev) {
@@ -142,7 +144,7 @@ export default {
 
       this.dragging = false;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('input', slice);
+      this.$emit('modelValue', slice);
     },
 
     getNearestSlice(pos) {
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 57fdd9f81..4cc95d818 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -130,6 +130,8 @@ import { ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/Resl
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
@@ -146,9 +148,7 @@ import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
 import { useWidgetManager } from '../composables/useWidgetManager';
-import useViewSliceStore, {
-  defaultSliceConfig,
-} from '../store/view-configs/slicing';
+import useViewSliceStore from '../store/view-configs/slicing';
 import {
   OBLIQUE_OUTLINE_COLORS,
   ToolContainer,
@@ -207,26 +207,16 @@ export default defineComponent({
 
     const dicomStore = useDICOMStore();
 
-    const sliceConfigDefaults = defaultSliceConfig();
-    const sliceConfig = computed(() =>
-      viewSliceStore.getConfig(viewID.value, curImageID.value)
-    );
-    const currentSlice = computed(
-      () => sliceConfig.value?.slice ?? sliceConfigDefaults.slice
+    const { slice: currentSlice, config: sliceConfig } = useSliceConfig(
+      viewID,
+      curImageID
     );
+    const {
+      width: windowWidth,
+      level: windowLevel,
+      config: wlConfig,
+    } = useWindowingConfig(viewID, curImageID);
 
-    const wlConfig = computed({
-      get: () => windowingStore.getConfig(viewID.value, curImageID.value),
-      set: (newValue) => {
-        const imageID = curImageID.value;
-        if (imageID != null && newValue != null) {
-          windowingStore.updateConfig(viewID.value, imageID, newValue);
-        }
-      },
-    });
-
-    const windowWidth = computed(() => wlConfig.value?.width);
-    const windowLevel = computed(() => wlConfig.value?.level);
     const dicomInfo = computed(() => {
       if (
         curImageID.value != null &&
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 94ee61c43..4785e74d8 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -19,13 +19,12 @@
         </v-tooltip>
       </v-btn>
       <slice-slider
+        v-model="currentSlice"
         class="slice-slider"
-        :slice="currentSlice"
-        :min="sliceMin"
-        :max="sliceMax"
+        :min="sliceRange[0]"
+        :max="sliceRange[1]"
         :step="1"
         :handle-height="20"
-        @input="setSlice"
       />
     </div>
     <div
@@ -94,7 +93,7 @@
         </template>
         <template v-slot:bottom-left>
           <div class="annotation-cell">
-            <div>Slice: {{ currentSlice + 1 }}/{{ sliceMax + 1 }}</div>
+            <div>Slice: {{ currentSlice + 1 }}/{{ sliceRange[1] + 1 }}</div>
             <div
               v-if="
                 typeof windowWidth === 'number' &&
@@ -190,10 +189,12 @@ import {
   toRefs,
   watch,
   watchEffect,
+  MaybeRef,
+  unref,
 } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { onKeyStroke } from '@vueuse/core';
-
+import { Maybe } from '@/src/types';
 import { useResizeToFit } from '@/src/composables/useResizeToFit';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkIJKSliceRepresentationProxy from '@/src/vtk/IJKSliceRepresentationProxy';
@@ -208,10 +209,12 @@ import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import type { TypedArray } from '@kitware/vtk.js/types';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
-import { useCurrentImage } from '../composables/useCurrentImage';
+import { useCurrentImage, useImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
 import WindowLevelTool from './tools/windowing/WindowLevelTool.vue';
 import SliceScrollTool from './tools/SliceScrollTool.vue';
@@ -233,9 +236,7 @@ import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
 import { useWidgetManager } from '../composables/useWidgetManager';
-import useViewSliceStore, {
-  defaultSliceConfig,
-} from '../store/view-configs/slicing';
+import useViewSliceStore from '../store/view-configs/slicing';
 import CropTool from './tools/crop/CropTool.vue';
 import {
   ToolContainer,
@@ -258,6 +259,69 @@ const SLICE_OFFSET_KEYS: Record<string, number> = {
   ArrowDown: 1,
 } as const;
 
+function useSliceConfigInitializer(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>,
+  viewDirection: MaybeRef<LPSAxisDir>
+) {
+  const { metadata } = useImage(imageID);
+
+  const viewAxis = computed(() => getLPSAxisFromDir(unref(viewDirection)));
+  const sliceDomain = computed(() => {
+    const { lpsOrientation, dimensions } = metadata.value;
+    const ijkIndex = lpsOrientation[viewAxis.value];
+    const dimMax = dimensions[ijkIndex];
+
+    return {
+      min: 0,
+      max: dimMax - 1,
+    };
+  });
+
+  const store = useViewSliceStore();
+  const { config: sliceConfig } = useSliceConfig(viewID, imageID);
+
+  watch(
+    sliceConfig,
+    (config) => {
+      const imageIdVal = unref(imageID);
+      const viewIdVal = unref(viewID);
+      if (config || !imageIdVal) return;
+      store.updateConfig(viewIdVal, imageIdVal, {
+        ...sliceDomain.value,
+        axisDirection: unref(viewDirection),
+      });
+      store.resetSlice(viewIdVal, imageIdVal);
+    },
+    { immediate: true }
+  );
+}
+
+function useWindowingConfigInitializer(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>
+) {
+  const { imageData } = useImage(imageID);
+
+  const store = useWindowingStore();
+  const { config: windowConfig } = useWindowingConfig(viewID, imageID);
+
+  watch(
+    windowConfig,
+    (config) => {
+      const image = imageData.value;
+      const imageIdVal = unref(imageID);
+      const viewIdVal = unref(viewID);
+      if (config || !image || !imageIdVal) return;
+
+      const [min, max] = image.getPointData().getScalars().getRange();
+      store.updateConfig(viewIdVal, imageIdVal, { min, max });
+      store.resetWindowLevel(viewIdVal, imageIdVal);
+    },
+    { immediate: true }
+  );
+}
+
 export default defineComponent({
   name: 'VtkTwoView',
   props: {
@@ -315,32 +379,17 @@ export default defineComponent({
 
     const dicomStore = useDICOMStore();
 
-    const sliceConfigDefaults = defaultSliceConfig();
-    const sliceConfig = computed(() =>
-      viewSliceStore.getConfig(viewID.value, curImageID.value)
-    );
-    const currentSlice = computed(
-      () => sliceConfig.value?.slice ?? sliceConfigDefaults.slice
-    );
-    const sliceMin = computed(
-      () => sliceConfig.value?.min ?? sliceConfigDefaults.min
-    );
-    const sliceMax = computed(
-      () => sliceConfig.value?.max ?? sliceConfigDefaults.max
-    );
-
-    const wlConfig = computed({
-      get: () => windowingStore.getConfig(viewID.value, curImageID.value),
-      set: (newValue) => {
-        const imageID = curImageID.value;
-        if (imageID != null && newValue != null) {
-          windowingStore.updateConfig(viewID.value, imageID, newValue);
-        }
-      },
-    });
+    const {
+      config: sliceConfig,
+      slice: currentSlice,
+      range: sliceRange,
+    } = useSliceConfig(viewID, curImageID);
+    const {
+      config: wlConfig,
+      width: windowWidth,
+      level: windowLevel,
+    } = useWindowingConfig(viewID, curImageID);
 
-    const windowWidth = computed(() => wlConfig.value?.width);
-    const windowLevel = computed(() => wlConfig.value?.level);
     const autoRange = computed<keyof typeof WLAutoRanges>(
       () => wlConfig.value?.auto || WL_AUTO_DEFAULT
     );
@@ -374,26 +423,10 @@ export default defineComponent({
       return null;
     });
 
-    const sliceDomain = computed(() => {
-      const { lpsOrientation, dimensions } = curImageMetadata.value;
-      const ijkIndex = lpsOrientation[viewAxis.value];
-      const dimMax = dimensions[ijkIndex];
-
-      return {
-        min: 0,
-        max: dimMax - 1,
-      };
-    });
-
-    // --- setters --- //
+    // --- initializers --- //
 
-    const setSlice = (slice: number) => {
-      if (curImageID.value != null) {
-        viewSliceStore.updateConfig(viewID.value, curImageID.value, {
-          slice,
-        });
-      }
-    };
+    useSliceConfigInitializer(viewID, curImageID, viewDirection);
+    useWindowingConfigInitializer(viewID, curImageID);
 
     // --- view proxy setup --- //
 
@@ -422,22 +455,6 @@ export default defineComponent({
       viewProxy.value.setSlicingMode('IJK'[ijkIndex]);
     });
 
-    watch(
-      [viewID, curImageID, viewDirection],
-      ([viewID_, imageID, viewDir]) => {
-        if (!imageID || sliceConfig.value != null) {
-          return;
-        }
-
-        viewSliceStore.updateConfig(viewID_, imageID, {
-          ...sliceDomain.value,
-          axisDirection: viewDir,
-        });
-        viewSliceStore.resetSlice(viewID_, imageID);
-      },
-      { immediate: true }
-    );
-
     // --- arrows change slice --- //
 
     const hover = ref(false);
@@ -882,14 +899,12 @@ export default defineComponent({
       viewAxis,
       active: true,
       currentSlice,
-      sliceMin,
-      sliceMax,
+      sliceRange,
       windowWidth,
       windowLevel,
       topLabel,
       leftLabel,
       isImageLoading,
-      setSlice,
       widgetManager,
       dicomInfo,
       enableResizeToFit() {
diff --git a/src/composables/useSliceConfig.ts b/src/composables/useSliceConfig.ts
new file mode 100644
index 000000000..7e21d9c35
--- /dev/null
+++ b/src/composables/useSliceConfig.ts
@@ -0,0 +1,32 @@
+import useViewSliceStore, {
+  defaultSliceConfig,
+} from '@/src/store/view-configs/slicing';
+import { Maybe } from '@/src/types';
+import { Vector2 } from '@kitware/vtk.js/types';
+import { unref, MaybeRef, computed } from 'vue';
+
+export function useSliceConfig(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>
+) {
+  const store = useViewSliceStore();
+  const configDefaults = defaultSliceConfig();
+  const config = computed(() => store.getConfig(unref(viewID), unref(imageID)));
+
+  const slice = computed({
+    get: () => config.value?.slice ?? configDefaults.slice,
+    set: (val) => {
+      const imageIdVal = unref(imageID);
+      if (!imageIdVal || val == null) return;
+      store.updateConfig(unref(viewID), imageIdVal, { slice: val });
+    },
+  });
+  const range = computed((): Vector2 => {
+    const { min, max } = config.value ?? {};
+    if (min == null || max == null)
+      return [configDefaults.min, configDefaults.max];
+    return [min, max];
+  });
+
+  return { config, slice, range };
+}
diff --git a/src/composables/useWindowingConfig.ts b/src/composables/useWindowingConfig.ts
new file mode 100644
index 000000000..c3586bb0b
--- /dev/null
+++ b/src/composables/useWindowingConfig.ts
@@ -0,0 +1,36 @@
+import useWindowingStore from '@/src/store/view-configs/windowing';
+import { Maybe } from '@/src/types';
+import { Vector2 } from '@kitware/vtk.js/types';
+import { MaybeRef, unref, computed } from 'vue';
+
+export function useWindowingConfig(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>
+) {
+  const store = useWindowingStore();
+  const config = computed(() => store.getConfig(unref(viewID), unref(imageID)));
+
+  const generateComputed = (prop: 'width' | 'level') => {
+    return computed({
+      get: () => config.value?.[prop],
+      set: (val) => {
+        const imageIdVal = unref(imageID);
+        if (!imageIdVal || val == null) return;
+        store.updateConfig(unref(viewID), imageIdVal, { [prop]: val });
+      },
+    });
+  };
+
+  const range = computed((): Vector2 => {
+    const { min, max } = config.value ?? {};
+    if (min == null || max == null) return [0, 1];
+    return [min, max];
+  });
+
+  return {
+    config,
+    width: generateComputed('width'),
+    level: generateComputed('level'),
+    range,
+  };
+}

From 73aee1e7effc2cf4ee845ee7a0cdc10b8ffcc8b5 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 17:04:57 -0500
Subject: [PATCH 02/11] refactor: split out initializers

---
 src/components/VtkObliqueView.vue             |  31 +--
 src/components/VtkTwoView.vue                 | 202 ++----------------
 src/composables/useSliceConfigInitializer.ts  |  40 ++++
 .../useWindowingConfigInitializer.ts          | 145 +++++++++++++
 4 files changed, 207 insertions(+), 211 deletions(-)
 create mode 100644 src/composables/useSliceConfigInitializer.ts
 create mode 100644 src/composables/useWindowingConfigInitializer.ts

diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 4cc95d818..fda11f955 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -131,7 +131,9 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
@@ -143,7 +145,6 @@ import ResliceCursorTool from './tools/ResliceCursorTool.vue';
 import { useSceneBuilder } from '../composables/useSceneBuilder';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
 import { useDICOMStore } from '../store/datasets-dicom';
-import useWindowingStore from '../store/view-configs/windowing';
 import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
@@ -187,7 +188,6 @@ export default defineComponent({
     ResliceCursorTool,
   },
   setup(props) {
-    const windowingStore = useWindowingStore();
     const viewSliceStore = useViewSliceStore();
 
     const { id: viewID, viewDirection, viewUp } = toRefs(props);
@@ -330,8 +330,6 @@ export default defineComponent({
       setViewProxyContainer(null);
     });
 
-    // --- apply windowing and slice configs --- //
-
     // Function to compute float range of slicing for oblique slicing.
     // Range is calculated as distance along the plane normal (as originating from {0,0,0} ).
     function slicePlaneRange(
@@ -405,14 +403,6 @@ export default defineComponent({
         }
 
         updateViewFromResliceCursor();
-
-        // TODO listen to changes in point data
-        const range = imageData.getPointData().getScalars().getRange();
-        windowingStore.updateConfig(viewID.value, curImageID.value, {
-          min: range[0],
-          max: range[1],
-        });
-        windowingStore.resetWindowLevel(viewID.value, curImageID.value);
       },
       {
         immediate: true,
@@ -455,21 +445,10 @@ export default defineComponent({
       };
     });
 
-    watch(
-      [viewID, curImageID, viewDirection],
-      ([viewID_, imageID, viewDir]) => {
-        if (!imageID || sliceConfig.value != null) {
-          return;
-        }
+    // --- apply windowing and slice configs --- //
 
-        viewSliceStore.updateConfig(viewID_, imageID, {
-          ...sliceDomain.value,
-          axisDirection: viewDir,
-        });
-        viewSliceStore.resetSlice(viewID_, imageID);
-      },
-      { immediate: true }
-    );
+    useSliceConfigInitializer(viewID, curImageID, viewDirection, sliceDomain);
+    useWindowingConfigInitializer(viewID, curImageID);
 
     watch(
       baseImageRep,
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 4785e74d8..68a257d5c 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -189,12 +189,9 @@ import {
   toRefs,
   watch,
   watchEffect,
-  MaybeRef,
-  unref,
 } from 'vue';
 import { vec3 } from 'gl-matrix';
 import { onKeyStroke } from '@vueuse/core';
-import { Maybe } from '@/src/types';
 import { useResizeToFit } from '@/src/composables/useResizeToFit';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkIJKSliceRepresentationProxy from '@/src/vtk/IJKSliceRepresentationProxy';
@@ -208,13 +205,14 @@ import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
-import type { TypedArray } from '@kitware/vtk.js/types';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
-import { useCurrentImage, useImage } from '../composables/useCurrentImage';
+import { useCurrentImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
 import WindowLevelTool from './tools/windowing/WindowLevelTool.vue';
 import SliceScrollTool from './tools/SliceScrollTool.vue';
@@ -229,7 +227,6 @@ import { useDICOMStore } from '../store/datasets-dicom';
 import { useSegmentGroupStore } from '../store/segmentGroups';
 import vtkLabelMapSliceRepProxy from '../vtk/LabelMapSliceRepProxy';
 import { usePaintToolStore } from '../store/tools/paint';
-import useWindowingStore from '../store/view-configs/windowing';
 import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
 import CrosshairsTool from './tools/crosshairs/CrosshairsTool.vue';
 import { LPSAxisDir } from '../types/lps';
@@ -238,13 +235,7 @@ import { useViewProxy } from '../composables/useViewProxy';
 import { useWidgetManager } from '../composables/useWidgetManager';
 import useViewSliceStore from '../store/view-configs/slicing';
 import CropTool from './tools/crop/CropTool.vue';
-import {
-  ToolContainer,
-  VTKTwoViewWidgetManager,
-  WLAutoRanges,
-  WL_AUTO_DEFAULT,
-  WL_HIST_BINS,
-} from '../constants';
+import { ToolContainer, VTKTwoViewWidgetManager } from '../constants';
 import { useProxyManager } from '../composables/useProxyManager';
 import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
 import { useLayersStore } from '../store/datasets-layers';
@@ -259,69 +250,6 @@ const SLICE_OFFSET_KEYS: Record<string, number> = {
   ArrowDown: 1,
 } as const;
 
-function useSliceConfigInitializer(
-  viewID: MaybeRef<string>,
-  imageID: MaybeRef<Maybe<string>>,
-  viewDirection: MaybeRef<LPSAxisDir>
-) {
-  const { metadata } = useImage(imageID);
-
-  const viewAxis = computed(() => getLPSAxisFromDir(unref(viewDirection)));
-  const sliceDomain = computed(() => {
-    const { lpsOrientation, dimensions } = metadata.value;
-    const ijkIndex = lpsOrientation[viewAxis.value];
-    const dimMax = dimensions[ijkIndex];
-
-    return {
-      min: 0,
-      max: dimMax - 1,
-    };
-  });
-
-  const store = useViewSliceStore();
-  const { config: sliceConfig } = useSliceConfig(viewID, imageID);
-
-  watch(
-    sliceConfig,
-    (config) => {
-      const imageIdVal = unref(imageID);
-      const viewIdVal = unref(viewID);
-      if (config || !imageIdVal) return;
-      store.updateConfig(viewIdVal, imageIdVal, {
-        ...sliceDomain.value,
-        axisDirection: unref(viewDirection),
-      });
-      store.resetSlice(viewIdVal, imageIdVal);
-    },
-    { immediate: true }
-  );
-}
-
-function useWindowingConfigInitializer(
-  viewID: MaybeRef<string>,
-  imageID: MaybeRef<Maybe<string>>
-) {
-  const { imageData } = useImage(imageID);
-
-  const store = useWindowingStore();
-  const { config: windowConfig } = useWindowingConfig(viewID, imageID);
-
-  watch(
-    windowConfig,
-    (config) => {
-      const image = imageData.value;
-      const imageIdVal = unref(imageID);
-      const viewIdVal = unref(viewID);
-      if (config || !image || !imageIdVal) return;
-
-      const [min, max] = image.getPointData().getScalars().getRange();
-      store.updateConfig(viewIdVal, imageIdVal, { min, max });
-      store.resetWindowLevel(viewIdVal, imageIdVal);
-    },
-    { immediate: true }
-  );
-}
-
 export default defineComponent({
   name: 'VtkTwoView',
   props: {
@@ -355,7 +283,6 @@ export default defineComponent({
     SelectTool,
   },
   setup(props) {
-    const windowingStore = useWindowingStore();
     const viewSliceStore = useViewSliceStore();
     const viewCameraStore = useViewCameraStore();
     const layerColoringStore = useLayerColoringStore();
@@ -370,7 +297,6 @@ export default defineComponent({
     // --- computed vars --- //
 
     const {
-      currentImageData: curImageData,
       currentImageID: curImageID,
       currentImageMetadata: curImageMetadata,
       isImageLoading,
@@ -390,9 +316,6 @@ export default defineComponent({
       level: windowLevel,
     } = useWindowingConfig(viewID, curImageID);
 
-    const autoRange = computed<keyof typeof WLAutoRanges>(
-      () => wlConfig.value?.auto || WL_AUTO_DEFAULT
-    );
     const dicomInfo = computed(() => {
       if (
         curImageID.value != null &&
@@ -425,7 +348,18 @@ export default defineComponent({
 
     // --- initializers --- //
 
-    useSliceConfigInitializer(viewID, curImageID, viewDirection);
+    const sliceDomain = computed(() => {
+      const { lpsOrientation, dimensions } = curImageMetadata.value;
+      const ijkIndex = lpsOrientation[viewAxis.value];
+      const dimMax = dimensions[ijkIndex];
+
+      return {
+        min: 0,
+        max: dimMax - 1,
+      };
+    });
+
+    useSliceConfigInitializer(viewID, curImageID, viewDirection, sliceDomain);
     useWindowingConfigInitializer(viewID, curImageID);
 
     // --- view proxy setup --- //
@@ -482,112 +416,10 @@ export default defineComponent({
 
     // --- widget manager --- //
 
+    // TODO Attach to ViewProxy
     const { widgetManager } = useWidgetManager(viewProxy);
     provide(VTKTwoViewWidgetManager, widgetManager);
 
-    // --- window/level setup --- //
-
-    const histogram = (
-      data: number[] | TypedArray,
-      dataRange: number[],
-      numberOfBins: number
-    ) => {
-      const [min, max] = dataRange;
-      const width = (max - min + 1) / numberOfBins;
-      const hist = new Array(numberOfBins).fill(0);
-      data.forEach((value) => hist[Math.floor((value - min) / width)]++);
-      return hist;
-    };
-
-    const autoRangeValues = computed(() => {
-      // Pre-compute the auto-range values
-      if (curImageData?.value) {
-        const scalarData = curImageData.value.getPointData().getScalars();
-        const [min, max] = scalarData.getRange();
-        const hist = histogram(scalarData.getData(), [min, max], WL_HIST_BINS);
-        const cumm = hist.reduce((acc, val, idx) => {
-          const prev = idx !== 0 ? acc[idx - 1] : 0;
-          acc.push(val + prev);
-          return acc;
-        }, []);
-
-        const width = (max - min + 1) / WL_HIST_BINS;
-        return Object.fromEntries(
-          Object.entries(WLAutoRanges).map(([key, value]) => {
-            const startIdx = cumm.findIndex(
-              (v: number) => v >= value * 0.01 * scalarData.getData().length
-            );
-            const endIdx = cumm.findIndex(
-              (v: number) =>
-                v >= (1 - value * 0.01) * scalarData.getData().length
-            );
-            const start = Math.max(min, min + width * startIdx);
-            const end = Math.min(max, min + width * endIdx + width);
-            return [key, [start, end]];
-          })
-        );
-      }
-      return {};
-    });
-
-    const firstTag = computed(() => {
-      if (
-        curImageID.value &&
-        curImageID.value in dicomStore.imageIDToVolumeKey
-      ) {
-        const volKey = dicomStore.imageIDToVolumeKey[curImageID.value];
-        const { WindowWidth, WindowLevel } = dicomStore.volumeInfo[volKey];
-        return {
-          width: WindowWidth.split('\\')[0],
-          level: WindowLevel.split('\\')[0],
-        };
-      }
-      return {};
-    });
-
-    watch(
-      curImageData,
-      (imageData) => {
-        if (curImageID.value == null || wlConfig.value != null || !imageData) {
-          return;
-        }
-
-        const range = autoRangeValues.value[autoRange.value];
-        windowingStore.updateConfig(viewID.value, curImageID.value, {
-          min: range[0],
-          max: range[1],
-        });
-        if (firstTag.value?.width) {
-          windowingStore.updateConfig(viewID.value, curImageID.value, {
-            preset: {
-              width: parseFloat(firstTag.value.width),
-              level: parseFloat(firstTag.value.level),
-            },
-          });
-        }
-        windowingStore.resetWindowLevel(viewID.value, curImageID.value);
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    watch(autoRange, (percentile) => {
-      if (
-        curImageID.value == null ||
-        wlConfig.value == null ||
-        !curImageData.value
-      ) {
-        return;
-      }
-      const range = autoRangeValues.value[percentile];
-      windowingStore.updateConfig(viewID.value, curImageID.value, {
-        min: range[0],
-        max: range[1],
-      });
-      windowingStore.resetWindowLevel(viewID.value, curImageID.value);
-    });
-
     // --- scene setup --- //
 
     const segmentGroupStore = useSegmentGroupStore();
diff --git a/src/composables/useSliceConfigInitializer.ts b/src/composables/useSliceConfigInitializer.ts
new file mode 100644
index 000000000..e3fbcbaa4
--- /dev/null
+++ b/src/composables/useSliceConfigInitializer.ts
@@ -0,0 +1,40 @@
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import useViewSliceStore from '@/src/store/view-configs/slicing';
+import { Maybe } from '@/src/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import { MaybeRef, toRef, unref, watch } from 'vue';
+
+export function useSliceConfigInitializer(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>,
+  viewDirection: MaybeRef<LPSAxisDir>,
+  sliceDomain: MaybeRef<{ min: number; max: number }>
+) {
+  const store = useViewSliceStore();
+  const { config: sliceConfig } = useSliceConfig(viewID, imageID);
+
+  watch(
+    toRef(sliceDomain),
+    (domain) => {
+      const imageIdVal = unref(imageID);
+      if (!imageIdVal) return;
+      store.updateConfig(unref(viewID), imageIdVal, domain);
+    },
+    { immediate: true }
+  );
+
+  watch(
+    sliceConfig,
+    (config) => {
+      const imageIdVal = unref(imageID);
+      const viewIdVal = unref(viewID);
+      if (config || !imageIdVal) return;
+      store.updateConfig(viewIdVal, imageIdVal, {
+        ...unref(sliceDomain),
+        axisDirection: unref(viewDirection),
+      });
+      store.resetSlice(viewIdVal, imageIdVal);
+    },
+    { immediate: true }
+  );
+}
diff --git a/src/composables/useWindowingConfigInitializer.ts b/src/composables/useWindowingConfigInitializer.ts
new file mode 100644
index 000000000..79cfee1aa
--- /dev/null
+++ b/src/composables/useWindowingConfigInitializer.ts
@@ -0,0 +1,145 @@
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { WLAutoRanges, WL_AUTO_DEFAULT, WL_HIST_BINS } from '@/src/constants';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import useWindowingStore from '@/src/store/view-configs/windowing';
+import { Maybe } from '@/src/types';
+import { TypedArray } from '@kitware/vtk.js/types';
+import { MaybeRef, computed, unref, watch } from 'vue';
+
+function useAutoRangeValues(imageID: MaybeRef<Maybe<string>>) {
+  const { imageData } = useImage(imageID);
+
+  const histogram = (
+    data: number[] | TypedArray,
+    dataRange: number[],
+    numberOfBins: number
+  ) => {
+    const [min, max] = dataRange;
+    const width = (max - min + 1) / numberOfBins;
+    const hist = new Array(numberOfBins).fill(0);
+    data.forEach((value) => hist[Math.floor((value - min) / width)]++);
+    return hist;
+  };
+
+  const autoRangeValues = computed(() => {
+    if (!imageData.value) {
+      return {};
+    }
+
+    // Pre-compute the auto-range values
+    const scalarData = imageData.value.getPointData().getScalars();
+    const [min, max] = scalarData.getRange();
+    const hist = histogram(scalarData.getData(), [min, max], WL_HIST_BINS);
+    const cumm = hist.reduce((acc, val, idx) => {
+      const prev = idx !== 0 ? acc[idx - 1] : 0;
+      acc.push(val + prev);
+      return acc;
+    }, []);
+
+    const width = (max - min + 1) / WL_HIST_BINS;
+    return Object.fromEntries(
+      Object.entries(WLAutoRanges).map(([key, value]) => {
+        const startIdx = cumm.findIndex(
+          (v: number) => v >= value * 0.01 * scalarData.getData().length
+        );
+        const endIdx = cumm.findIndex(
+          (v: number) => v >= (1 - value * 0.01) * scalarData.getData().length
+        );
+        const start = Math.max(min, min + width * startIdx);
+        const end = Math.min(max, min + width * endIdx + width);
+        return [key, [start, end]];
+      })
+    );
+  });
+
+  return { autoRangeValues };
+}
+
+export function useWindowingConfigInitializer(
+  viewID: MaybeRef<string>,
+  imageID: MaybeRef<Maybe<string>>
+) {
+  const { imageData } = useImage(imageID);
+  const dicomStore = useDICOMStore();
+
+  const store = useWindowingStore();
+  const { config: windowConfig } = useWindowingConfig(viewID, imageID);
+  const { autoRangeValues } = useAutoRangeValues(imageID);
+  const autoRange = computed<keyof typeof WLAutoRanges>(
+    () => windowConfig.value?.auto || WL_AUTO_DEFAULT
+  );
+
+  const firstTag = computed(() => {
+    const id = unref(imageID);
+    if (id && id in dicomStore.imageIDToVolumeKey) {
+      const volKey = dicomStore.imageIDToVolumeKey[id];
+      const { WindowWidth, WindowLevel } = dicomStore.volumeInfo[volKey];
+      return {
+        width: WindowWidth.split('\\')[0],
+        level: WindowLevel.split('\\')[0],
+      };
+    }
+    return {};
+  });
+
+  watch(
+    windowConfig,
+    (config) => {
+      const image = imageData.value;
+      const imageIdVal = unref(imageID);
+      const viewIdVal = unref(viewID);
+      if (config || !image || !imageIdVal) return;
+
+      const [min, max] = image.getPointData().getScalars().getRange();
+      store.updateConfig(viewIdVal, imageIdVal, { min, max });
+      store.resetWindowLevel(viewIdVal, imageIdVal);
+    },
+    { immediate: true }
+  );
+
+  watch(
+    imageData,
+    (image) => {
+      const imageIdVal = unref(imageID);
+      const config = unref(windowConfig);
+      const viewIdVal = unref(viewID);
+      if (imageIdVal == null || config != null || !image) {
+        return;
+      }
+
+      const range = autoRangeValues.value[autoRange.value];
+      store.updateConfig(viewIdVal, imageIdVal, {
+        min: range[0],
+        max: range[1],
+      });
+      if (firstTag.value?.width) {
+        store.updateConfig(viewIdVal, imageIdVal, {
+          preset: {
+            width: parseFloat(firstTag.value.width),
+            level: parseFloat(firstTag.value.level),
+          },
+        });
+      }
+      store.resetWindowLevel(viewIdVal, imageIdVal);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(autoRange, (percentile) => {
+    const image = imageData.value;
+    const imageIdVal = unref(imageID);
+    const viewIdVal = unref(viewID);
+    if (imageIdVal == null || windowConfig.value == null || !image) {
+      return;
+    }
+    const range = autoRangeValues.value[percentile];
+    store.updateConfig(viewIdVal, imageIdVal, {
+      min: range[0],
+      max: range[1],
+    });
+    store.resetWindowLevel(viewIdVal, imageIdVal);
+  });
+}

From c08411920640b2fe22df12ca3b555bc599a0d1e5 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 21:59:13 -0500
Subject: [PATCH 03/11] refactor(useSceneBuilder): split into composables

---
 src/components/VtkObliqueThreeView.vue        |  13 +--
 src/components/VtkObliqueView.vue             |  12 +-
 src/components/VtkThreeView.vue               |  18 +--
 src/components/VtkTwoView.vue                 |  28 +++--
 src/composables/useBaseSliceRepresentation.ts |  22 ++++
 src/composables/useLabelMapRepresentations.ts |  10 ++
 src/composables/useLayerRepresentations.ts    |  10 ++
 src/composables/useProxyRepresentations.ts    |  55 ++++++++++
 src/composables/useSceneBuilder.ts            | 103 ------------------
 src/main.js                                   |   4 -
 10 files changed, 128 insertions(+), 147 deletions(-)
 create mode 100644 src/composables/useBaseSliceRepresentation.ts
 create mode 100644 src/composables/useLabelMapRepresentations.ts
 create mode 100644 src/composables/useLayerRepresentations.ts
 create mode 100644 src/composables/useProxyRepresentations.ts
 delete mode 100644 src/composables/useSceneBuilder.ts

diff --git a/src/components/VtkObliqueThreeView.vue b/src/components/VtkObliqueThreeView.vue
index c3c0ee3a7..4560e56e2 100644
--- a/src/components/VtkObliqueThreeView.vue
+++ b/src/components/VtkObliqueThreeView.vue
@@ -63,6 +63,7 @@ import vtkMultiSliceRepresentationProxy, {
 } from '@/src/vtk/MultiSliceRepresentationProxy';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
 import PanTool from './tools/PanTool.vue';
 import { LPSAxisDir } from '../types/lps';
 import { useViewProxy } from '../composables/useViewProxy';
@@ -74,7 +75,6 @@ import { InitViewIDs } from '../config';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
 import { VTKResliceCursor, OBLIQUE_OUTLINE_COLORS } from '../constants';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
 import useWindowingStore from '../store/view-configs/windowing';
 
 export default defineComponent({
@@ -109,12 +109,11 @@ export default defineComponent({
     const { viewProxy, setContainer: setViewProxyContainer } =
       useViewProxy<vtkLPSView3DProxy>(viewID, ViewProxyType.Oblique3D);
 
-    const { baseImageRep } = useSceneBuilder<vtkMultiSliceRepresentationProxy>(
-      viewID,
-      {
-        baseImage: currentImageID,
-      }
-    );
+    const { representation: baseImageRep } =
+      useProxyRepresentation<vtkMultiSliceRepresentationProxy>(
+        currentImageID,
+        viewID
+      );
 
     // --- Set the data and slice outline properties --- //
     const setOutlineProperties = () => {
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index fda11f955..8bac131df 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -121,7 +121,7 @@ import { onKeyStroke } from '@vueuse/core';
 import type { RGBColor, Vector3 } from '@kitware/vtk.js/types';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
-import vtkReslicReperesentationProxy from '@kitware/vtk.js/Proxy/Representations/ResliceRepresentationProxy';
+import vtkResliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/ResliceRepresentationProxy';
 import { useResizeToFit } from '@/src/composables/useResizeToFit';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants';
@@ -134,6 +134,7 @@ import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
+import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
@@ -142,7 +143,6 @@ import WindowLevelTool from './tools/windowing/WindowLevelTool.vue';
 import PanTool from './tools/PanTool.vue';
 import ZoomTool from './tools/ZoomTool.vue';
 import ResliceCursorTool from './tools/ResliceCursorTool.vue';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
 import { useDICOMStore } from '../store/datasets-dicom';
 import { LPSAxisDir } from '../types/lps';
@@ -269,12 +269,8 @@ export default defineComponent({
       }
     });
 
-    const { baseImageRep } = useSceneBuilder<vtkReslicReperesentationProxy>(
-      viewID,
-      {
-        baseImage: curImageID,
-      }
-    );
+    const { representation: baseImageRep } =
+      useProxyRepresentation<vtkResliceRepresentationProxy>(curImageID, viewID);
 
     onBeforeMount(() => {
       // do this before mount, as the ManipulatorTools run onMounted
diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
index 75858684d..613ef5b1a 100644
--- a/src/components/VtkThreeView.vue
+++ b/src/components/VtkThreeView.vue
@@ -74,16 +74,14 @@ import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { Vector3 } from '@kitware/vtk.js/types';
-
+import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
 import { useProxyManager } from '@/src/composables/useProxyManager';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useCurrentImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
 import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
 import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
-import { useModelStore } from '../store/datasets-models';
 import { LPSAxisDir } from '../types/lps';
 import { useViewProxy } from '../composables/useViewProxy';
 import { ViewProxyType } from '../core/proxies';
@@ -107,7 +105,7 @@ import { useResetViewsEvents } from './tools/ResetViews.vue';
 
 function useCvrEffect(
   config: Ref<Maybe<VolumeColorConfig>>,
-  imageRep: Ref<vtkVolumeRepresentationProxy | null>,
+  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
   viewProxy: Ref<vtkLPSView3DProxy>
 ) {
   const cvrParams = computed(() => config.value?.cvr);
@@ -326,7 +324,7 @@ function useCvrEffect(
 
 function useColoringEffect(
   config: Ref<Maybe<ColoringConfig>>,
-  imageRep: Ref<vtkVolumeRepresentationProxy | null>,
+  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
   viewProxy: Ref<vtkLPSView3DProxy>
 ) {
   const colorBy = computed(() => config.value?.colorBy);
@@ -409,7 +407,6 @@ export default defineComponent({
     PanTool,
   },
   setup(props) {
-    const modelStore = useModelStore();
     const volumeColoringStore = useVolumeColoringStore();
     const viewCameraStore = useViewCameraStore();
 
@@ -447,13 +444,8 @@ export default defineComponent({
 
     // --- scene setup --- //
 
-    const { baseImageRep } = useSceneBuilder<vtkVolumeRepresentationProxy>(
-      viewID,
-      {
-        baseImage: curImageID,
-        models: computed(() => modelStore.idList),
-      }
-    );
+    const { representation: baseImageRep } =
+      useProxyRepresentation<vtkVolumeRepresentationProxy>(curImageID, viewID);
 
     // --- picking --- //
 
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 68a257d5c..4bfce5dd5 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -209,6 +209,9 @@ import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
+import { useBaseSliceRepresentation } from '@/src/composables/useBaseSliceRepresentation';
+import { useLabelMapRepresentations } from '@/src/composables/useLabelMapRepresentations';
+import { useLayerRepresentations } from '@/src/composables/useLayerRepresentations';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
@@ -222,10 +225,8 @@ import RulerTool from './tools/ruler/RulerTool.vue';
 import RectangleTool from './tools/rectangle/RectangleTool.vue';
 import PolygonTool from './tools/polygon/PolygonTool.vue';
 import PaintTool from './tools/paint/PaintTool.vue';
-import { useSceneBuilder } from '../composables/useSceneBuilder';
 import { useDICOMStore } from '../store/datasets-dicom';
 import { useSegmentGroupStore } from '../store/segmentGroups';
-import vtkLabelMapSliceRepProxy from '../vtk/LabelMapSliceRepProxy';
 import { usePaintToolStore } from '../store/tools/paint';
 import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
 import CrosshairsTool from './tools/crosshairs/CrosshairsTool.vue';
@@ -430,15 +431,19 @@ export default defineComponent({
 
     const layerIDs = computed(() => currentLayers.value.map(({ id }) => id));
 
-    const { baseImageRep, labelmapReps, layerReps } = useSceneBuilder<
-      vtkIJKSliceRepresentationProxy,
-      vtkLabelMapSliceRepProxy,
-      vtkIJKSliceRepresentationProxy
-    >(viewID, {
-      baseImage: curImageID,
-      labelmaps: segmentGroupIDs,
-      layers: layerIDs,
-    });
+    const { representation: baseImageRep } =
+      useBaseSliceRepresentation<vtkIJKSliceRepresentationProxy>(
+        curImageID,
+        viewID
+      );
+
+    const { representations: labelmapReps } = useLabelMapRepresentations(
+      segmentGroupIDs,
+      viewID
+    );
+
+    const { representations: layerReps } =
+      useLayerRepresentations<vtkIJKSliceRepresentationProxy>(layerIDs, viewID);
 
     // --- camera setup --- //
 
@@ -758,4 +763,3 @@ export default defineComponent({
   cursor: pointer;
 }
 </style>
-../composables/useProxyManager
diff --git a/src/composables/useBaseSliceRepresentation.ts b/src/composables/useBaseSliceRepresentation.ts
new file mode 100644
index 000000000..b61705dac
--- /dev/null
+++ b/src/composables/useBaseSliceRepresentation.ts
@@ -0,0 +1,22 @@
+import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
+import { Maybe } from '@/src/types';
+import vtkSliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/SliceRepresentationProxy';
+import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
+import { MaybeRef, watchEffect } from 'vue';
+
+export function useBaseSliceRepresentation<
+  T extends vtkSliceRepresentationProxy = vtkSliceRepresentationProxy
+>(imageID: MaybeRef<Maybe<string>>, viewID: MaybeRef<string>) {
+  const { representation } = useProxyRepresentation<T>(imageID, viewID);
+
+  watchEffect(() => {
+    const rep = representation.value;
+    if (!rep) return;
+
+    const mapper = rep.getMapper() as vtkImageMapper;
+    mapper.setResolveCoincidentTopologyToPolygonOffset();
+    mapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
+  });
+
+  return { representation };
+}
diff --git a/src/composables/useLabelMapRepresentations.ts b/src/composables/useLabelMapRepresentations.ts
new file mode 100644
index 000000000..32e84433c
--- /dev/null
+++ b/src/composables/useLabelMapRepresentations.ts
@@ -0,0 +1,10 @@
+import { useProxyRepresentations } from '@/src/composables/useProxyRepresentations';
+import { Maybe } from '@/src/types';
+import vtkLabelMapSliceRepProxy from '@/src/vtk/LabelMapSliceRepProxy';
+import { MaybeRef } from 'vue';
+
+export function useLabelMapRepresentations<
+  T extends vtkLabelMapSliceRepProxy = vtkLabelMapSliceRepProxy
+>(dataIDs: MaybeRef<Maybe<Array<Maybe<string>>>>, viewID: MaybeRef<string>) {
+  return useProxyRepresentations<T>(dataIDs, viewID);
+}
diff --git a/src/composables/useLayerRepresentations.ts b/src/composables/useLayerRepresentations.ts
new file mode 100644
index 000000000..be1226e82
--- /dev/null
+++ b/src/composables/useLayerRepresentations.ts
@@ -0,0 +1,10 @@
+import { useProxyRepresentations } from '@/src/composables/useProxyRepresentations';
+import { Maybe } from '@/src/types';
+import vtkSliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/SliceRepresentationProxy';
+import { MaybeRef } from 'vue';
+
+export function useLayerRepresentations<
+  T extends vtkSliceRepresentationProxy = vtkSliceRepresentationProxy
+>(dataIDs: MaybeRef<Maybe<Array<Maybe<string>>>>, viewID: MaybeRef<string>) {
+  return useProxyRepresentations<T>(dataIDs, viewID);
+}
diff --git a/src/composables/useProxyRepresentations.ts b/src/composables/useProxyRepresentations.ts
new file mode 100644
index 000000000..d2f1fa5be
--- /dev/null
+++ b/src/composables/useProxyRepresentations.ts
@@ -0,0 +1,55 @@
+import { useViewStore } from '@/src/store/views';
+import { Maybe } from '@/src/types';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
+import { MaybeRef, computed, unref, watchEffect } from 'vue';
+
+export function useProxyRepresentations<
+  T extends vtkAbstractRepresentationProxy = vtkAbstractRepresentationProxy
+>(dataIDs: MaybeRef<Maybe<Array<Maybe<string>>>>, viewID: MaybeRef<string>) {
+  const viewStore = useViewStore();
+  const viewProxy = computed(() =>
+    viewStore.getViewProxy<vtkLPSViewProxy>(unref(viewID))
+  );
+
+  const representations = computed(() => {
+    const viewIdVal = unref(viewID);
+    return (unref(dataIDs) ?? [])
+      .filter((id): id is string => !!id)
+      .map((id) => {
+        return viewStore.getDataRepresentationForView<T>(id, viewIdVal);
+      })
+      .filter((rep): rep is T => !!rep);
+  });
+
+  watchEffect((onCleanup) => {
+    const reps = representations.value;
+    const view = viewProxy.value;
+    if (!view) return;
+
+    reps.forEach((rep) => {
+      view.addRepresentation(rep);
+    });
+    view.getRenderer().computeVisiblePropBounds();
+    view.renderLater();
+
+    onCleanup(() => {
+      reps.forEach((rep) => {
+        view.removeRepresentation(rep);
+      });
+    });
+  });
+
+  return { representations };
+}
+
+export function useProxyRepresentation<
+  T extends vtkAbstractRepresentationProxy = vtkAbstractRepresentationProxy
+>(dataID: MaybeRef<Maybe<string>>, viewID: MaybeRef<string>) {
+  const ids = computed(() => [unref(dataID)]);
+  const { representations } = useProxyRepresentations<T>(ids, viewID);
+  const representation = computed<Maybe<T>>(
+    () => representations.value[0] ?? null
+  );
+  return { representation };
+}
diff --git a/src/composables/useSceneBuilder.ts b/src/composables/useSceneBuilder.ts
deleted file mode 100644
index 3b95c1906..000000000
--- a/src/composables/useSceneBuilder.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
-import { computed, Ref, watch } from 'vue';
-import { Maybe } from '@/src/types';
-import { useViewStore } from '../store/views';
-import { vtkLPSViewProxy } from '../types/vtk-types';
-import { arrayEquals } from '../utils';
-
-interface Scene {
-  baseImage?: Ref<Maybe<string>>;
-  labelmaps?: Ref<string[]>;
-  layers?: Ref<string[]>;
-  models?: Ref<string[]>;
-}
-
-type RepProxy = vtkAbstractRepresentationProxy;
-
-export function useSceneBuilder<
-  BaseImageType extends RepProxy = RepProxy,
-  LabelMapType extends RepProxy = RepProxy,
-  LayerType extends RepProxy = RepProxy,
-  ModelType extends RepProxy = RepProxy
->(viewID: Ref<string>, sceneIDs: Scene) {
-  const viewStore = useViewStore();
-  const viewProxy = computed(() =>
-    viewStore.getViewProxy<vtkLPSViewProxy>(viewID.value)
-  );
-
-  const baseImageRep = computed(() => {
-    const imageID = sceneIDs.baseImage?.value;
-    if (!imageID) return null;
-
-    return viewStore.getDataRepresentationForView<BaseImageType>(
-      imageID,
-      viewID.value
-    );
-  });
-
-  const labelmapReps = computed(() => {
-    const ids = sceneIDs.labelmaps?.value ?? [];
-    return ids
-      .map((id) =>
-        viewStore.getDataRepresentationForView<LabelMapType>(id, viewID.value)
-      )
-      .filter(Boolean) as LabelMapType[];
-  });
-
-  const layerReps = computed(
-    () =>
-      (sceneIDs.layers?.value ?? [])
-        .map((id) =>
-          viewStore.getDataRepresentationForView<LayerType>(id, viewID.value)
-        )
-        .filter(Boolean) as LayerType[]
-  );
-
-  const modelReps = computed(() => {
-    const modelIDs = sceneIDs.models?.value ?? [];
-    return modelIDs
-      .map((id) =>
-        viewStore.getDataRepresentationForView<ModelType>(id, viewID.value)
-      )
-      .filter(Boolean) as ModelType[];
-  });
-
-  type SceneObject = BaseImageType | LabelMapType | LayerType | ModelType;
-
-  const allRepresentations = computed<SceneObject[]>(() => {
-    return [
-      baseImageRep.value,
-      ...labelmapReps.value,
-      ...layerReps.value,
-      ...modelReps.value,
-    ].filter(Boolean) as SceneObject[];
-  });
-
-  watch(
-    [viewProxy, allRepresentations],
-    ([view, reps], [, oldReps]) => {
-      if (!view) {
-        throw new Error('[useSceneBuilder] No view available');
-      }
-
-      if (oldReps && arrayEquals(reps, oldReps)) {
-        return;
-      }
-
-      view.removeAllRepresentations();
-      reps.forEach((rep) => {
-        view.addRepresentation(rep);
-      });
-
-      // TODO not sure why I need this, but might as well keep
-      // the renderer up to date.
-      // For reference, this doesn't get invoked when resetting the
-      // camera with a supplied bounds, so we manually invoke it here.
-      view.getRenderer().computeVisiblePropBounds();
-      view.renderLater();
-    },
-    { immediate: true }
-  );
-
-  return { baseImageRep, labelmapReps, layerReps, modelReps };
-}
diff --git a/src/main.js b/src/main.js
index 351a90b04..74ba7ec18 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,7 +11,6 @@ import VueToast from 'vue-toastification';
 import { createPinia } from 'pinia';
 import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
 import { setPipelinesBaseUrl, setPipelineWorkerUrl } from '@itk-wasm/image-io';
 
 import itkConfig from '@/src/io/itk/itkConfig';
@@ -36,9 +35,6 @@ patchExitPointerLock();
 vtkMapper.setResolveCoincidentTopologyToPolygonOffset();
 vtkMapper.setResolveCoincidentTopologyPolygonOffsetParameters(-3, -3);
 vtkMapper.setResolveCoincidentTopologyLineOffsetParameters(-3, -3);
-// image poly in the back
-vtkImageMapper.setResolveCoincidentTopologyToPolygonOffset();
-vtkImageMapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
 
 registerAllReaders(FILE_READERS);
 

From 1f65ccd32b0940186bfbbe4fbca0198cee5150e6 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 22:11:31 -0500
Subject: [PATCH 04/11] refactor: split out dicom quick info

---
 src/components/DicomQuickInfoButton.vue |  99 +++++++++++++++++++++++
 src/components/VtkObliqueView.vue       |  95 ++--------------------
 src/components/VtkTwoView.vue           | 102 ++----------------------
 3 files changed, 111 insertions(+), 185 deletions(-)
 create mode 100644 src/components/DicomQuickInfoButton.vue

diff --git a/src/components/DicomQuickInfoButton.vue b/src/components/DicomQuickInfoButton.vue
new file mode 100644
index 000000000..eb88e6f10
--- /dev/null
+++ b/src/components/DicomQuickInfoButton.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import { Maybe } from '@/src/types';
+import { computed, toRef } from 'vue';
+
+interface Props {
+  imageId: Maybe<string>;
+}
+
+const props = defineProps<Props>();
+const imageId = toRef(props, 'imageId');
+
+const dicomStore = useDICOMStore();
+const dicomInfo = computed(() => {
+  if (imageId.value != null && imageId.value in dicomStore.imageIDToVolumeKey) {
+    const volumeKey = dicomStore.imageIDToVolumeKey[imageId.value];
+    const volumeInfo = dicomStore.volumeInfo[volumeKey];
+    const studyKey = dicomStore.volumeStudy[volumeKey];
+    const studyInfo = dicomStore.studyInfo[studyKey];
+    const patientKey = dicomStore.studyPatient[studyKey];
+    const patientInfo = dicomStore.patientInfo[patientKey];
+
+    const patientID = patientInfo.PatientID;
+    const studyID = studyInfo.StudyID;
+    const studyDescription = studyInfo.StudyDescription;
+    const seriesNumber = volumeInfo.SeriesNumber;
+    const seriesDescription = volumeInfo.SeriesDescription;
+
+    return {
+      patientID,
+      studyID,
+      studyDescription,
+      seriesNumber,
+      seriesDescription,
+    };
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <v-menu
+    open-on-hover
+    location="bottom left"
+    left
+    nudge-left="10"
+    dark
+    v-if="dicomInfo !== null"
+    max-width="300px"
+  >
+    <template v-slot:activator="{ props }">
+      <v-icon
+        v-bind="props"
+        dark
+        size="x-large"
+        class="pointer-events-all hover-info"
+      >
+        mdi-information
+      </v-icon>
+    </template>
+    <v-list class="bg-grey-darken-3">
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold">
+          PATIENT / CASE
+        </v-list-item-title>
+        <v-divider />
+        <v-list-item-title> ID: {{ dicomInfo.patientID }} </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold"> STUDY </v-list-item-title>
+        <v-divider />
+        <v-list-item-title> ID: {{ dicomInfo.studyID }} </v-list-item-title>
+        <v-list-item-title>
+          {{ dicomInfo.studyDescription }}
+        </v-list-item-title>
+      </v-list-item>
+      <v-list-item>
+        <v-list-item-title class="font-weight-bold"> SERIES </v-list-item-title>
+        <v-divider />
+        <v-list-item-title>
+          Series #: {{ dicomInfo.seriesNumber }}
+        </v-list-item-title>
+        <v-list-item-title>
+          {{ dicomInfo.seriesDescription }}
+        </v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped src="@/src/components/styles/utils.css"></style>
+<style scoped>
+.hover-info {
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 8bac131df..d9ad09401 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -30,61 +30,9 @@
         </template>
         <template v-slot:top-right>
           <div class="annotation-cell">
-            <v-menu
-              open-on-hover
-              location="bottom left"
-              left
-              nudge-left="10"
-              dark
-              v-if="dicomInfo !== null"
-              max-width="300px"
-            >
-              <template v-slot:activator="{ props }">
-                <v-icon
-                  v-bind="props"
-                  dark
-                  size="x-large"
-                  class="pointer-events-all hover-info"
-                >
-                  mdi-information
-                </v-icon>
-              </template>
-              <v-list class="bg-grey-darken-3">
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    PATIENT / CASE
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    ID: {{ dicomInfo.patientID }}
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    STUDY
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    ID: {{ dicomInfo.studyID }}
-                  </v-list-item-title>
-                  <v-list-item-title>
-                    {{ dicomInfo.studyDescription }}
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    SERIES
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    Series #: {{ dicomInfo.seriesNumber }}
-                  </v-list-item-title>
-                  <v-list-item-title>
-                    {{ dicomInfo.seriesDescription }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
+            <dicom-quick-info-button
+              :image-id="curImageID"
+            ></dicom-quick-info-button>
           </div>
         </template>
       </view-overlay-grid>
@@ -135,6 +83,7 @@ import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigIniti
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
 import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
+import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { getLPSAxisFromDir } from '../utils/lps';
 import { useCurrentImage } from '../composables/useCurrentImage';
@@ -144,7 +93,6 @@ import PanTool from './tools/PanTool.vue';
 import ZoomTool from './tools/ZoomTool.vue';
 import ResliceCursorTool from './tools/ResliceCursorTool.vue';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
-import { useDICOMStore } from '../store/datasets-dicom';
 import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
@@ -186,6 +134,7 @@ export default defineComponent({
     PanTool,
     ZoomTool,
     ResliceCursorTool,
+    DicomQuickInfoButton,
   },
   setup(props) {
     const viewSliceStore = useViewSliceStore();
@@ -205,8 +154,6 @@ export default defineComponent({
       isImageLoading,
     } = useCurrentImage();
 
-    const dicomStore = useDICOMStore();
-
     const { slice: currentSlice, config: sliceConfig } = useSliceConfig(
       viewID,
       curImageID
@@ -217,36 +164,6 @@ export default defineComponent({
       config: wlConfig,
     } = useWindowingConfig(viewID, curImageID);
 
-    const dicomInfo = computed(() => {
-      if (
-        curImageID.value != null &&
-        curImageID.value in dicomStore.imageIDToVolumeKey
-      ) {
-        const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
-        const volumeInfo = dicomStore.volumeInfo[volumeKey];
-        const studyKey = dicomStore.volumeStudy[volumeKey];
-        const studyInfo = dicomStore.studyInfo[studyKey];
-        const patientKey = dicomStore.studyPatient[studyKey];
-        const patientInfo = dicomStore.patientInfo[patientKey];
-
-        const patientID = patientInfo.PatientID;
-        const studyID = studyInfo.StudyID;
-        const studyDescription = studyInfo.StudyDescription;
-        const seriesNumber = volumeInfo.SeriesNumber;
-        const seriesDescription = volumeInfo.SeriesDescription;
-
-        return {
-          patientID,
-          studyID,
-          studyDescription,
-          seriesNumber,
-          seriesDescription,
-        };
-      }
-
-      return null;
-    });
-
     // --- view proxy setup --- //
 
     const { viewProxy, setContainer: setViewProxyContainer } =
@@ -631,12 +548,12 @@ export default defineComponent({
       viewProxy,
       viewAxis,
       active: true,
+      curImageID,
       currentSlice,
       windowWidth,
       windowLevel,
       isImageLoading,
       widgetManager,
-      dicomInfo,
       enableResizeToFit,
       hover,
     };
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 4bfce5dd5..06b05e10c 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -106,61 +106,9 @@
         </template>
         <template v-slot:top-right>
           <div class="annotation-cell">
-            <v-menu
-              open-on-hover
-              location="bottom left"
-              left
-              nudge-left="10"
-              dark
-              v-if="dicomInfo !== null"
-              max-width="300px"
-            >
-              <template v-slot:activator="{ props }">
-                <v-icon
-                  v-bind="props"
-                  dark
-                  size="x-large"
-                  class="pointer-events-all hover-info"
-                >
-                  mdi-information
-                </v-icon>
-              </template>
-              <v-list class="bg-grey-darken-3">
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    PATIENT / CASE
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    ID: {{ dicomInfo.patientID }}
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    STUDY
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    ID: {{ dicomInfo.studyID }}
-                  </v-list-item-title>
-                  <v-list-item-title>
-                    {{ dicomInfo.studyDescription }}
-                  </v-list-item-title>
-                </v-list-item>
-                <v-list-item>
-                  <v-list-item-title class="font-weight-bold">
-                    SERIES
-                  </v-list-item-title>
-                  <v-divider />
-                  <v-list-item-title>
-                    Series #: {{ dicomInfo.seriesNumber }}
-                  </v-list-item-title>
-                  <v-list-item-title>
-                    {{ dicomInfo.seriesDescription }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-menu>
+            <dicom-quick-info-button
+              :image-id="curImageID"
+            ></dicom-quick-info-button>
           </div>
         </template>
       </view-overlay-grid>
@@ -212,6 +160,7 @@ import { useWindowingConfigInitializer } from '@/src/composables/useWindowingCon
 import { useBaseSliceRepresentation } from '@/src/composables/useBaseSliceRepresentation';
 import { useLabelMapRepresentations } from '@/src/composables/useLabelMapRepresentations';
 import { useLayerRepresentations } from '@/src/composables/useLayerRepresentations';
+import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
@@ -225,7 +174,6 @@ import RulerTool from './tools/ruler/RulerTool.vue';
 import RectangleTool from './tools/rectangle/RectangleTool.vue';
 import PolygonTool from './tools/polygon/PolygonTool.vue';
 import PaintTool from './tools/paint/PaintTool.vue';
-import { useDICOMStore } from '../store/datasets-dicom';
 import { useSegmentGroupStore } from '../store/segmentGroups';
 import { usePaintToolStore } from '../store/tools/paint';
 import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
@@ -282,6 +230,7 @@ export default defineComponent({
     CrosshairsTool,
     CropTool,
     SelectTool,
+    DicomQuickInfoButton,
   },
   setup(props) {
     const viewSliceStore = useViewSliceStore();
@@ -304,8 +253,6 @@ export default defineComponent({
       currentLayers,
     } = useCurrentImage();
 
-    const dicomStore = useDICOMStore();
-
     const {
       config: sliceConfig,
       slice: currentSlice,
@@ -317,36 +264,6 @@ export default defineComponent({
       level: windowLevel,
     } = useWindowingConfig(viewID, curImageID);
 
-    const dicomInfo = computed(() => {
-      if (
-        curImageID.value != null &&
-        curImageID.value in dicomStore.imageIDToVolumeKey
-      ) {
-        const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
-        const volumeInfo = dicomStore.volumeInfo[volumeKey];
-        const studyKey = dicomStore.volumeStudy[volumeKey];
-        const studyInfo = dicomStore.studyInfo[studyKey];
-        const patientKey = dicomStore.studyPatient[studyKey];
-        const patientInfo = dicomStore.patientInfo[patientKey];
-
-        const patientID = patientInfo.PatientID;
-        const studyID = studyInfo.StudyID;
-        const studyDescription = studyInfo.StudyDescription;
-        const seriesNumber = volumeInfo.SeriesNumber;
-        const seriesDescription = volumeInfo.SeriesDescription;
-
-        return {
-          patientID,
-          studyID,
-          studyDescription,
-          seriesNumber,
-          seriesDescription,
-        };
-      }
-
-      return null;
-    });
-
     // --- initializers --- //
 
     const sliceDomain = computed(() => {
@@ -735,6 +652,7 @@ export default defineComponent({
       viewProxy,
       viewAxis,
       active: true,
+      curImageID,
       currentSlice,
       sliceRange,
       windowWidth,
@@ -743,7 +661,6 @@ export default defineComponent({
       leftLabel,
       isImageLoading,
       widgetManager,
-      dicomInfo,
       enableResizeToFit() {
         resizeToFit.value = true;
       },
@@ -756,10 +673,3 @@ export default defineComponent({
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>
 <style scoped src="@/src/components/styles/utils.css"></style>
-<style scoped>
-.hover-info {
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-}
-</style>

From 3585904684c37b172eda49319831da23a9a49c47 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 22:16:46 -0500
Subject: [PATCH 05/11] refactor: simplify view setContainer call

---
 src/components/VtkObliqueThreeView.vue |  9 +++++----
 src/components/VtkObliqueView.vue      | 10 ++++++----
 src/components/VtkThreeView.vue        |  9 +++++----
 src/components/VtkTwoView.vue          | 10 ++++++----
 src/composables/useViewProxy.ts        | 24 +++---------------------
 5 files changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/components/VtkObliqueThreeView.vue b/src/components/VtkObliqueThreeView.vue
index 4560e56e2..a0fea0e60 100644
--- a/src/components/VtkObliqueThreeView.vue
+++ b/src/components/VtkObliqueThreeView.vue
@@ -106,8 +106,10 @@ export default defineComponent({
 
     // --- view proxy setup --- //
 
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView3DProxy>(viewID, ViewProxyType.Oblique3D);
+    const { viewProxy } = useViewProxy<vtkLPSView3DProxy>(
+      viewID,
+      ViewProxyType.Oblique3D
+    );
 
     const { representation: baseImageRep } =
       useProxyRepresentation<vtkMultiSliceRepresentationProxy>(
@@ -134,7 +136,6 @@ export default defineComponent({
     };
 
     onBeforeUnmount(() => {
-      setViewProxyContainer(null);
       viewProxy.value.setContainer(null);
     });
 
@@ -143,7 +144,7 @@ export default defineComponent({
       viewProxy.value.setOrientationAxesType('cube');
       viewProxy.value.setBackground([0, 0, 0, 0]);
       viewProxy.value.getCamera().setParallelProjection(true);
-      setViewProxyContainer(vtkContainerRef.value);
+      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
     });
 
     const resliceCursor = inject(VTKResliceCursor);
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index d9ad09401..9694d6ab0 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -166,8 +166,10 @@ export default defineComponent({
 
     // --- view proxy setup --- //
 
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView2DProxy>(viewID, ViewProxyType.Oblique);
+    const { viewProxy } = useViewProxy<vtkLPSView2DProxy>(
+      viewID,
+      ViewProxyType.Oblique
+    );
 
     const resliceCursor = inject(VTKResliceCursor);
     if (!resliceCursor) {
@@ -224,7 +226,7 @@ export default defineComponent({
     );
 
     onMounted(() => {
-      setViewProxyContainer(vtkContainerRef.value);
+      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
       viewProxy.value.setOrientationAxesVisibility(false);
 
       // Initialize camera points during construction
@@ -240,7 +242,7 @@ export default defineComponent({
     });
 
     onBeforeUnmount(() => {
-      setViewProxyContainer(null);
+      viewProxy.value.setContainer(null);
     });
 
     // Function to compute float range of slicing for oblique slicing.
diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
index 613ef5b1a..862d25187 100644
--- a/src/components/VtkThreeView.vue
+++ b/src/components/VtkThreeView.vue
@@ -425,18 +425,19 @@ export default defineComponent({
 
     // --- view proxy setup --- //
 
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView3DProxy>(viewID, ViewProxyType.Volume);
+    const { viewProxy } = useViewProxy<vtkLPSView3DProxy>(
+      viewID,
+      ViewProxyType.Volume
+    );
 
     onMounted(() => {
       viewProxy.value.setOrientationAxesVisibility(true);
       viewProxy.value.setOrientationAxesType('cube');
       viewProxy.value.setBackground([0, 0, 0, 0]);
-      setViewProxyContainer(vtkContainerRef.value);
+      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
     });
 
     onBeforeUnmount(() => {
-      setViewProxyContainer(null);
       viewProxy.value.setContainer(null);
     });
 
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 06b05e10c..86205e21a 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -282,8 +282,10 @@ export default defineComponent({
 
     // --- view proxy setup --- //
 
-    const { viewProxy, setContainer: setViewProxyContainer } =
-      useViewProxy<vtkLPSView2DProxy>(viewID, ViewProxyType.Slice);
+    const { viewProxy } = useViewProxy<vtkLPSView2DProxy>(
+      viewID,
+      ViewProxyType.Slice
+    );
 
     onBeforeMount(() => {
       // do this before mount, as the ManipulatorTools run onMounted
@@ -292,12 +294,12 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      setViewProxyContainer(vtkContainerRef.value);
+      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
       viewProxy.value.setOrientationAxesVisibility(false);
     });
 
     onBeforeUnmount(() => {
-      setViewProxyContainer(null);
+      viewProxy.value.setContainer(null);
     });
 
     // --- Slicing setup --- //
diff --git a/src/composables/useViewProxy.ts b/src/composables/useViewProxy.ts
index e2a85ce5f..0b25af4f3 100644
--- a/src/composables/useViewProxy.ts
+++ b/src/composables/useViewProxy.ts
@@ -12,34 +12,16 @@ export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
 ) {
   const viewStore = useViewStore();
 
-  const container = ref<HTMLElement | null>(null);
-
-  const setContainer = (el: HTMLElement | null | undefined) => {
-    container.value = el ?? null;
-  };
-
   const viewProxy = computed<T>(() =>
     viewStore.createOrGetViewProxy(unref(id), unref(type))
   );
 
-  watch(viewProxy, (curViewProxy, oldViewProxy) => {
-    oldViewProxy.setContainer(null);
-    curViewProxy.setContainer(container.value);
-  });
-
-  watch(container, (curContainer) => {
-    viewProxy.value.setContainer(curContainer);
-    // setContainer doesn't call modified
-    viewProxy.value.modified();
-  });
-
   return {
     viewProxy,
-    setContainer,
   };
 }
 
-function useMountedViewProxy<T extends vtkViewProxy = vtkViewProxy>(
+function isViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
   viewProxy: MaybeRef<Maybe<T>>
 ) {
   const mounted = ref(false);
@@ -65,7 +47,7 @@ export function onViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
   viewProxy: MaybeRef<Maybe<T>>,
   callback: () => void
 ) {
-  const mounted = useMountedViewProxy(viewProxy);
+  const mounted = isViewProxyMounted(viewProxy);
 
   watch(
     mounted,
@@ -80,7 +62,7 @@ export function onViewProxyUnmounted<T extends vtkViewProxy = vtkViewProxy>(
   viewProxy: MaybeRef<Maybe<T>>,
   callback: () => void
 ) {
-  const mounted = useMountedViewProxy(viewProxy);
+  const mounted = isViewProxyMounted(viewProxy);
   let invoked = false;
   const invokeCallback = () => {
     if (invoked) return;

From 668585a677edae97521759aa30508bc09e032beb Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 7 Feb 2024 23:44:24 -0500
Subject: [PATCH 06/11] fix(useProxyRepresentations): addRep in PostEffect

---
 src/composables/useProxyRepresentations.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/composables/useProxyRepresentations.ts b/src/composables/useProxyRepresentations.ts
index d2f1fa5be..95ec64364 100644
--- a/src/composables/useProxyRepresentations.ts
+++ b/src/composables/useProxyRepresentations.ts
@@ -2,7 +2,7 @@ import { useViewStore } from '@/src/store/views';
 import { Maybe } from '@/src/types';
 import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
-import { MaybeRef, computed, unref, watchEffect } from 'vue';
+import { MaybeRef, computed, unref, watchPostEffect } from 'vue';
 
 export function useProxyRepresentations<
   T extends vtkAbstractRepresentationProxy = vtkAbstractRepresentationProxy
@@ -22,11 +22,16 @@ export function useProxyRepresentations<
       .filter((rep): rep is T => !!rep);
   });
 
-  watchEffect((onCleanup) => {
-    const reps = representations.value;
+  // Wait for the component to have mounted with PostEffect.
+  // When changing layouts, it's possible for the new component instance to
+  // execute effects prior to the old component running onCleanup callbacks.
+  watchPostEffect((onCleanup) => {
     const view = viewProxy.value;
     if (!view) return;
 
+    const reps = representations.value;
+    if (!reps.length) return;
+
     reps.forEach((rep) => {
       view.addRepresentation(rep);
     });

From 2b943494386c7da1ca85484616384fb4fa0da1b1 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 8 Feb 2024 12:06:53 -0500
Subject: [PATCH 07/11] refactor: get widget manager from view proxy

---
 src/components/VtkObliqueView.vue             |  8 --
 src/components/VtkThreeView.vue               |  8 --
 src/components/VtkTwoView.vue                 | 17 +---
 src/components/tools/ResliceCursorTool.vue    | 13 +---
 src/components/tools/SelectTool.vue           | 11 ++-
 src/components/tools/crop/Crop3D.vue          |  8 +-
 .../tools/crosshairs/CrosshairsTool.vue       |  6 --
 .../tools/crosshairs/CrosshairsWidget2D.vue   | 26 +++----
 src/components/tools/paint/PaintTool.vue      |  6 --
 src/components/tools/paint/PaintWidget2D.vue  | 21 +++--
 src/components/tools/polygon/PolygonTool.vue  |  6 --
 .../tools/polygon/PolygonWidget2D.vue         | 27 +++----
 .../tools/rectangle/RectangleTool.vue         |  6 --
 .../tools/rectangle/RectangleWidget2D.vue     | 27 +++----
 src/components/tools/ruler/RulerTool.vue      |  6 --
 src/components/tools/ruler/RulerWidget2D.vue  | 25 +++---
 src/composables/annotationTool.ts             |  4 +-
 src/constants.ts                              | 15 ----
 src/vtk/LPSView2DProxy/index.d.ts             | 17 ++--
 src/vtk/LPSView2DProxy/index.js               |  6 +-
 src/vtk/LPSView3DProxy/index.d.ts             | 17 ++--
 src/vtk/LPSView3DProxy/index.js               | 65 +---------------
 src/vtk/LPSViewProxyBase/index.d.ts           | 14 ++++
 src/vtk/LPSViewProxyBase/index.js             | 78 +++++++++++++++++++
 24 files changed, 178 insertions(+), 259 deletions(-)
 create mode 100644 src/vtk/LPSViewProxyBase/index.d.ts
 create mode 100644 src/vtk/LPSViewProxyBase/index.js

diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 9694d6ab0..cf07da675 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -96,12 +96,10 @@ import { useResetViewsEvents } from './tools/ResetViews.vue';
 import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
-import { useWidgetManager } from '../composables/useWidgetManager';
 import useViewSliceStore from '../store/view-configs/slicing';
 import {
   OBLIQUE_OUTLINE_COLORS,
   ToolContainer,
-  VTKTwoViewWidgetManager,
   VTKResliceCursor,
 } from '../constants';
 
@@ -303,11 +301,6 @@ export default defineComponent({
     const toolContainer = ref<HTMLElement>();
     provide(ToolContainer, toolContainer);
 
-    // --- widget manager --- //
-
-    const { widgetManager } = useWidgetManager(viewProxy);
-    provide(VTKTwoViewWidgetManager, widgetManager);
-
     // --- window/level setup --- //
 
     watch(
@@ -555,7 +548,6 @@ export default defineComponent({
       windowWidth,
       windowLevel,
       isImageLoading,
-      widgetManager,
       enableResizeToFit,
       hover,
     };
diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
index 862d25187..decc538da 100644
--- a/src/components/VtkThreeView.vue
+++ b/src/components/VtkThreeView.vue
@@ -57,7 +57,6 @@ import {
   onBeforeUnmount,
   onMounted,
   PropType,
-  provide,
   ref,
   toRefs,
   watch,
@@ -94,8 +93,6 @@ import useVolumeColoringStore, {
 import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
 import CropTool from './tools/crop/CropTool.vue';
 import PanTool from './tools/PanTool.vue';
-import { useWidgetManager } from '../composables/useWidgetManager';
-import { VTKThreeViewWidgetManager } from '../constants';
 import { useCropStore, croppingPlanesEqual } from '../store/tools/crop';
 import { isViewAnimating } from '../composables/isViewAnimating';
 import { ColoringConfig } from '../types/views';
@@ -461,11 +458,6 @@ export default defineComponent({
       { immediate: true }
     );
 
-    // --- widget manager --- //
-
-    const { widgetManager } = useWidgetManager(viewProxy);
-    provide(VTKThreeViewWidgetManager, widgetManager);
-
     // --- camera setup --- //
 
     const { cameraUpVec, cameraDirVec } = useCameraOrientation(
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 86205e21a..4751de986 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -47,35 +47,30 @@
         <zoom-tool :view-id="viewID" />
         <slice-scroll-tool :view-id="viewID" />
         <window-level-tool :view-id="viewID" />
-        <select-tool :view-id="viewID" :widget-manager="widgetManager" />
+        <select-tool :view-id="viewID" />
         <ruler-tool
           :view-id="viewID"
-          :widget-manager="widgetManager"
           :view-direction="viewDirection"
           :current-slice="currentSlice"
         />
         <rectangle-tool
           :view-id="viewID"
-          :widget-manager="widgetManager"
           :view-direction="viewDirection"
           :current-slice="currentSlice"
         />
         <polygon-tool
           :view-id="viewID"
-          :widget-manager="widgetManager"
           :view-direction="viewDirection"
           :current-slice="currentSlice"
         />
         <paint-tool
           :view-id="viewID"
           :view-direction="viewDirection"
-          :widget-manager="widgetManager"
           :slice="currentSlice"
         />
         <crosshairs-tool
           :view-id="viewID"
           :view-direction="viewDirection"
-          :widget-manager="widgetManager"
           :slice="currentSlice"
         />
         <crop-tool :view-id="viewID" />
@@ -181,10 +176,9 @@ import CrosshairsTool from './tools/crosshairs/CrosshairsTool.vue';
 import { LPSAxisDir } from '../types/lps';
 import { ViewProxyType } from '../core/proxies';
 import { useViewProxy } from '../composables/useViewProxy';
-import { useWidgetManager } from '../composables/useWidgetManager';
 import useViewSliceStore from '../store/view-configs/slicing';
 import CropTool from './tools/crop/CropTool.vue';
-import { ToolContainer, VTKTwoViewWidgetManager } from '../constants';
+import { ToolContainer } from '../constants';
 import { useProxyManager } from '../composables/useProxyManager';
 import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
 import { useLayersStore } from '../store/datasets-layers';
@@ -334,12 +328,6 @@ export default defineComponent({
     const toolContainer = ref<HTMLElement>();
     provide(ToolContainer, toolContainer);
 
-    // --- widget manager --- //
-
-    // TODO Attach to ViewProxy
-    const { widgetManager } = useWidgetManager(viewProxy);
-    provide(VTKTwoViewWidgetManager, widgetManager);
-
     // --- scene setup --- //
 
     const segmentGroupStore = useSegmentGroupStore();
@@ -662,7 +650,6 @@ export default defineComponent({
       topLabel,
       leftLabel,
       isImageLoading,
-      widgetManager,
       enableResizeToFit() {
         resizeToFit.value = true;
       },
diff --git a/src/components/tools/ResliceCursorTool.vue b/src/components/tools/ResliceCursorTool.vue
index 5739b66ec..a8ad12f51 100644
--- a/src/components/tools/ResliceCursorTool.vue
+++ b/src/components/tools/ResliceCursorTool.vue
@@ -15,11 +15,7 @@ import {
   vtkResliceCursorViewWidget,
   ResliceCursorWidgetState,
 } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import {
-  OBLIQUE_OUTLINE_COLORS,
-  VTKTwoViewWidgetManager,
-  VTKResliceCursor,
-} from '@/src/constants';
+import { OBLIQUE_OUTLINE_COLORS, VTKResliceCursor } from '@/src/constants';
 import { onViewProxyMounted } from '@/src/composables/useViewProxy';
 import { getLPSAxisFromDir, getVTKViewTypeFromLPSAxis } from '@/src/utils/lps';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -39,12 +35,6 @@ export default defineComponent({
   setup(props) {
     const active = true;
     const { viewId: viewID, viewDirection } = toRefs(props);
-    const widgetManager = inject(VTKTwoViewWidgetManager);
-    if (!widgetManager) {
-      throw new Error(
-        'ResliceCursorTool component cannot access the 2D widget manager.'
-      );
-    }
 
     const { currentImageMetadata: curImageMetadata, currentImageData } =
       useCurrentImage();
@@ -53,6 +43,7 @@ export default defineComponent({
     const viewProxy = computed(
       () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
     );
+    const widgetManager = computed(() => viewProxy.value.getWidgetManager());
 
     const viewType = computed(() => {
       return viewStore.viewSpecs[viewID.value].viewType;
diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
index 22b55c18b..5f8bc3809 100644
--- a/src/components/tools/SelectTool.vue
+++ b/src/components/tools/SelectTool.vue
@@ -3,18 +3,20 @@ import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useViewStore } from '@/src/store/views';
 import { computed, toRefs } from 'vue';
 import { WIDGET_PRIORITY } from '@kitware/vtk.js/Widgets/Core/AbstractWidget/Constants';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/types';
+import type { vtkLPSViewProxy } from '@/src/types/vtk-types';
 
 const props = defineProps<{
   viewId: string;
-  widgetManager: vtkWidgetManager;
 }>();
 
-const { viewId, widgetManager } = toRefs(props);
+const { viewId } = toRefs(props);
 
-const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+const viewProxy = computed(() =>
+  useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+);
+const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
 const interactor = computed(() => viewProxy.value?.getInteractor());
 const selectionStore = useToolSelectionStore();
 
@@ -22,6 +24,7 @@ onVTKEvent(
   interactor,
   'onLeftButtonPress',
   (event: any) => {
+    if (!widgetManager.value) return;
     const withModifiers = !!(event.shiftKey || event.controlKey);
     const selectedData = widgetManager.value.getSelectedData();
     if ('widget' in selectedData) {
diff --git a/src/components/tools/crop/Crop3D.vue b/src/components/tools/crop/Crop3D.vue
index ad3455e2b..3f6390d4c 100644
--- a/src/components/tools/crop/Crop3D.vue
+++ b/src/components/tools/crop/Crop3D.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { VTKThreeViewWidgetManager } from '@/src/constants';
 import { useCropStore } from '@/src/store/tools/crop';
 import { LPSCroppingPlanes } from '@/src/types/crop';
 import { useViewStore } from '@/src/store/views';
@@ -17,7 +16,6 @@ import {
   computed,
   DeepReadonly,
   defineComponent,
-  inject,
   onBeforeUnmount,
   ref,
   toRefs,
@@ -55,15 +53,11 @@ export default defineComponent({
   setup(props) {
     const { viewId: viewID } = toRefs(props);
 
-    const widgetManager = inject(VTKThreeViewWidgetManager);
-    if (!widgetManager) {
-      throw new Error('Crop3D component cannot access the 2D widget manager.');
-    }
-
     const viewStore = useViewStore();
     const viewProxy = computed(
       () => viewStore.getViewProxy<vtkLPSView3DProxy>(viewID.value)!
     );
+    const widgetManager = computed(() => viewProxy.value.getWidgetManager());
 
     const cropStore = useCropStore();
     const { currentImageID, currentImageMetadata } = useCurrentImage();
diff --git a/src/components/tools/crosshairs/CrosshairsTool.vue b/src/components/tools/crosshairs/CrosshairsTool.vue
index 0abf50ad9..69eb3d9e4 100644
--- a/src/components/tools/crosshairs/CrosshairsTool.vue
+++ b/src/components/tools/crosshairs/CrosshairsTool.vue
@@ -11,7 +11,6 @@
       :slice="slice"
       :view-id="viewId"
       :view-direction="viewDirection"
-      :widget-manager="widgetManager"
     />
   </div>
 </template>
@@ -19,7 +18,6 @@
 <script lang="ts">
 import { storeToRefs } from 'pinia';
 import { computed, defineComponent, PropType, toRefs } from 'vue';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useToolStore } from '@/src/store/tools';
@@ -45,10 +43,6 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
   },
   components: {
     CrosshairsWidget2D,
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index 10d2ac498..1a96db12a 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   defineComponent,
   onBeforeUnmount,
@@ -17,14 +16,11 @@ import { vtkCrosshairsViewWidget } from '@/src/vtk/CrosshairsWidget';
 import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
 import { useViewStore } from '@/src/store/views';
 import { onViewProxyMounted } from '@/src/composables/useViewProxy';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
   props: {
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
     viewId: {
       type: String,
       required: true,
@@ -39,22 +35,22 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      widgetManager: widgetManagerRef,
-      viewDirection,
-      slice,
-      viewId,
-    } = toRefs(props);
+    const { viewDirection, slice, viewId } = toRefs(props);
 
     const widgetRef = ref<vtkCrosshairsViewWidget>();
 
     const crosshairsStore = useCrosshairsToolStore();
     const factory = crosshairsStore.getWidgetFactory();
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+    const viewProxy = computed(() =>
+      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+    );
+    const widgetManagerRef = computed(() =>
+      viewProxy.value?.getWidgetManager()
+    );
 
     onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
-      widgetRef.value = widgetManager.addWidget(
+      widgetRef.value = widgetManager?.addWidget(
         factory
       ) as vtkCrosshairsViewWidget;
 
@@ -91,11 +87,11 @@ export default defineComponent({
 
     onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
-      widgetManager.renderWidgets();
+      widgetManager?.renderWidgets();
     });
 
     onBeforeUnmount(() => {
-      widgetManagerRef.value.removeWidget(widgetRef.value!);
+      widgetManagerRef.value?.removeWidget(widgetRef.value!);
     });
 
     return () => null;
diff --git a/src/components/tools/paint/PaintTool.vue b/src/components/tools/paint/PaintTool.vue
index 66c593357..15b7e7316 100644
--- a/src/components/tools/paint/PaintTool.vue
+++ b/src/components/tools/paint/PaintTool.vue
@@ -5,14 +5,12 @@
       :slice="slice"
       :view-id="viewId"
       :view-direction="viewDirection"
-      :widget-manager="widgetManager"
     />
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { LPSAxisDir } from '@/src/types/lps';
 import PaintWidget2D from './PaintWidget2D.vue';
@@ -32,10 +30,6 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
   },
   components: {
     PaintWidget2D,
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index 37ade34f8..eec247d20 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   computed,
   defineComponent,
@@ -23,14 +22,11 @@ import {
   onViewProxyMounted,
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 
 export default defineComponent({
   name: 'PaintWidget2D',
   props: {
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
     viewId: {
       type: String,
       required: true,
@@ -45,7 +41,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { widgetManager, viewDirection, slice, viewId } = toRefs(props);
+    const { viewDirection, slice, viewId } = toRefs(props);
 
     const paintStore = usePaintToolStore();
     const widgetFactory = paintStore.getWidgetFactory();
@@ -65,10 +61,13 @@ export default defineComponent({
       return indexPoint;
     };
 
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+    const viewProxy = computed(() =>
+      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+    );
+    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
 
     onViewProxyMounted(viewProxy, () => {
-      widgetRef.value = widgetManager.value.addWidget(
+      widgetRef.value = widgetManager.value?.addWidget(
         widgetFactory
       ) as vtkPaintViewWidget;
 
@@ -76,15 +75,15 @@ export default defineComponent({
         throw new Error('PaintWidget2D failed to create view widget');
       }
 
-      widgetManager.value.renderWidgets();
-      widgetManager.value.grabFocus(widgetRef.value);
+      widgetManager.value?.renderWidgets();
+      widgetManager.value?.grabFocus(widgetRef.value);
     });
 
     onViewProxyUnmounted(viewProxy, () => {
       if (!widgetRef.value) {
         return;
       }
-      widgetManager.value.removeWidget(widgetRef.value);
+      widgetManager.value?.removeWidget(widgetRef.value);
     });
 
     // --- widget representation config --- //
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 117247609..55c399d16 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -9,7 +9,6 @@
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
-        :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
         @widgetHover="onHover(tool.id, $event)"
@@ -34,7 +33,6 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
 import { usePolygonStore } from '@/src/store/tools/polygons';
 import {
@@ -66,10 +64,6 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
   },
   components: {
     PolygonWidget2D,
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index c524d11ef..526b34027 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   reactive,
   computed,
@@ -32,6 +31,7 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -42,10 +42,6 @@ export default defineComponent({
       type: String as unknown as PropType<ToolID>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
     viewId: {
       type: String,
       required: true,
@@ -67,19 +63,16 @@ export default defineComponent({
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const {
-      toolId,
-      viewId,
-      widgetManager,
-      viewDirection,
-      currentSlice,
-      isPlacing,
-    } = toRefs(props);
+    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
+      toRefs(props);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+    const viewProxy = computed(() =>
+      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+    );
+    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
@@ -87,7 +80,9 @@ export default defineComponent({
     const widget = ref<WidgetView | null>(null);
 
     onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
+      widget.value = widgetManager.value?.addWidget(
+        widgetFactory
+      ) as WidgetView;
     });
 
     onViewProxyUnmounted(viewProxy, () => {
@@ -95,7 +90,7 @@ export default defineComponent({
         return;
       }
       // widgetManager calls widget.delete()
-      widgetManager.value.removeWidget(widget.value);
+      widgetManager.value?.removeWidget(widget.value);
       widgetFactory.delete();
     });
 
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index d454c1ef2..f2520a80e 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -9,7 +9,6 @@
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
-        :widget-manager="widgetManager"
         @contextmenu="openContextMenu(tool.id, $event)"
         @placed="onToolPlaced"
         @widgetHover="onHover(tool.id, $event)"
@@ -34,7 +33,6 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRectangleStore } from '@/src/store/tools/rectangles';
 import {
@@ -66,10 +64,6 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
   },
   components: {
     RectangleWidget2D,
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index bae22c549..fdc0feaca 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -1,5 +1,4 @@
 <script lang="ts">
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   computed,
   defineComponent,
@@ -33,6 +32,7 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -47,10 +47,6 @@ export default defineComponent({
       type: String as unknown as PropType<ToolID>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
     viewId: {
       type: String,
       required: true,
@@ -72,19 +68,16 @@ export default defineComponent({
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const {
-      toolId,
-      viewId,
-      widgetManager,
-      viewDirection,
-      currentSlice,
-      isPlacing,
-    } = toRefs(props);
+    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
+      toRefs(props);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+    const viewProxy = computed(() =>
+      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+    );
+    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
@@ -93,7 +86,9 @@ export default defineComponent({
     const widget = ref<WidgetView | null>(null);
 
     onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value.addWidget(widgetFactory) as WidgetView;
+      widget.value = widgetManager.value?.addWidget(
+        widgetFactory
+      ) as WidgetView;
     });
 
     onViewProxyUnmounted(viewProxy, () => {
@@ -101,7 +96,7 @@ export default defineComponent({
         return;
       }
       // widgetManager calls widget.delete()
-      widgetManager.value.removeWidget(widget.value);
+      widgetManager.value?.removeWidget(widget.value);
       widgetFactory.delete();
     });
 
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index b25e0f494..7815e7aad 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -9,7 +9,6 @@
         :current-slice="currentSlice"
         :view-id="viewId"
         :view-direction="viewDirection"
-        :widget-manager="widgetManager"
         @contextmenu="openContextMenu(ruler.id, $event)"
         @placed="onRulerPlaced"
         @widgetHover="onHover(ruler.id, $event)"
@@ -35,7 +34,6 @@ import { Tools } from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { LPSAxisDir } from '@/src/types/lps';
 import { storeToRefs } from 'pinia';
 import {
@@ -63,10 +61,6 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
   },
   components: {
     RulerWidget2D,
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 58b7bbba1..b44b91830 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -4,7 +4,6 @@ import vtkRulerWidget, {
   vtkRulerViewWidget,
   vtkRulerWidgetState,
 } from '@/src/vtk/RulerWidget';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   reactive,
   computed,
@@ -33,6 +32,7 @@ import {
   onViewProxyUnmounted,
 } from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
+import { vtkLPSViewProxy } from '@/src/types/vtk-types';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -42,10 +42,6 @@ export default defineComponent({
       type: String as unknown as PropType<ToolID>,
       required: true,
     },
-    widgetManager: {
-      type: Object as PropType<vtkWidgetManager>,
-      required: true,
-    },
     viewId: {
       type: String,
       required: true,
@@ -67,19 +63,16 @@ export default defineComponent({
     RulerSVG2D,
   },
   setup(props, { emit }) {
-    const {
-      toolId,
-      viewId,
-      widgetManager,
-      viewDirection,
-      currentSlice,
-      isPlacing,
-    } = toRefs(props);
+    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
+      toRefs(props);
 
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[toolId.value]);
     const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
+    const viewProxy = computed(() =>
+      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
+    );
+    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
 
     const widgetFactory = vtkRulerWidget.newInstance({
       id: toolId.value,
@@ -88,7 +81,7 @@ export default defineComponent({
     const widget = ref<vtkRulerViewWidget | null>(null);
 
     onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value.addWidget(
+      widget.value = widgetManager.value?.addWidget(
         widgetFactory
       ) as vtkRulerViewWidget;
     });
@@ -98,7 +91,7 @@ export default defineComponent({
         return;
       }
       // widgetManager calls widget.delete()
-      widgetManager.value.removeWidget(widget.value);
+      widgetManager.value?.removeWidget(widget.value);
       widgetFactory.delete();
     });
 
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 4a12a3c9b..295a18aec 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -246,7 +246,7 @@ export const usePlacingAnnotationTool = (
 export const useWidgetVisibility = <T extends vtkAbstractWidget>(
   widget: Ref<Maybe<T>>,
   visible: Ref<boolean>,
-  widgetManager: Ref<vtkWidgetManager>,
+  widgetManager: Ref<Maybe<vtkWidgetManager>>,
   viewId: Ref<string>
 ) => {
   // toggles the pickability of the ruler handles,
@@ -267,7 +267,7 @@ export const useWidgetVisibility = <T extends vtkAbstractWidget>(
     }
     // hide handle visibility, but not picking visibility
     widget.value.setHandleVisibility(false);
-    widgetManager.value.renderWidgets();
+    widgetManager.value?.renderWidgets();
     viewProxy.value?.renderLater();
   });
 };
diff --git a/src/constants.ts b/src/constants.ts
index 301d1cd57..20a0229a5 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,6 +1,5 @@
 import { Maybe } from '@/src/types';
 import type { RGBColor } from '@kitware/vtk.js/types';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import vtkResliceCursorWidget, {
   vtkResliceCursorViewWidget,
 } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
@@ -25,20 +24,6 @@ export const VTKResliceCursorViewWidget: InjectionKey<
   ComputedRef<vtkResliceCursorViewWidget>
 > = Symbol('VTKResliceCursorViewWidget');
 
-/**
- * Retrieves the parent VtkTwoView's widget manager.
- */
-export const VTKTwoViewWidgetManager: InjectionKey<
-  ComputedRef<vtkWidgetManager>
-> = Symbol('VTKTwoViewWidgetManager');
-
-/**
- * Retrieves the parent VtkThreeView's widget manager.
- */
-export const VTKThreeViewWidgetManager: InjectionKey<
-  ComputedRef<vtkWidgetManager>
-> = Symbol('VTKThreeViewWidgetManager');
-
 /**
  * Retrieves the parent tool HTML element.
  */
diff --git a/src/vtk/LPSView2DProxy/index.d.ts b/src/vtk/LPSView2DProxy/index.d.ts
index a3d0d6e11..283df555d 100644
--- a/src/vtk/LPSView2DProxy/index.d.ts
+++ b/src/vtk/LPSView2DProxy/index.d.ts
@@ -1,21 +1,22 @@
 import { vec3 } from 'gl-matrix';
 import { vtkView2DProxy } from '@kitware/vtk.js/Proxy/Core/View2DProxy';
 import { ViewProxyCustomizations } from '@/src/vtk/LPSView3DProxy';
+import { LPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
 
-export interface vtkLPSView2DProxy extends vtkView2DProxy {
+// LPSViewProxyBase changes some types from vtkView2DProxy
+export interface vtkLPSView2DProxy extends LPSViewProxyBase, vtkView2DProxy {
   resizeToFit(lookAxis: Vector3, viewUpAxis: Vector3, worldDims: Vector3);
   resetCamera(boundsToUse?: number[]);
   /**
    * @param mode One of IJKXYZ
    */
   setSlicingMode(mode: string);
-
-  removeAllRepresentations(): void;
-  updateCamera(directionOfProjection: vec3, viewUp: vec3, focalPoint: vec3);
-  getInteractorStyle2D(): vtkInteractorStyleManipulator;
-  getInteractorStyle3D(): vtkInteractorStyleManipulator;
 }
 
-// TODO extend, newInstance...
-export declare const vtkLPSView2DProxy: {};
+export function extend(publicAPI: object, model: object): void;
+
+export declare const vtkLPSView2DProxy: {
+  extend: typeof extend;
+};
+
 export default vtkLPSView2DProxy;
diff --git a/src/vtk/LPSView2DProxy/index.js b/src/vtk/LPSView2DProxy/index.js
index 97f83339b..a119806d0 100644
--- a/src/vtk/LPSView2DProxy/index.js
+++ b/src/vtk/LPSView2DProxy/index.js
@@ -1,14 +1,11 @@
 import macro from '@kitware/vtk.js/macro';
 import vtkView2DProxy from '@kitware/vtk.js/Proxy/Core/View2DProxy';
-
-import { commonViewCustomizations } from '@/src/vtk/LPSView3DProxy';
+import { applyLPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
 
 function vtkLPSView2DProxy(publicAPI, model) {
   model.classHierarchy.push('vtkLPSView2DProxy');
   const superClass = { ...publicAPI };
 
-  commonViewCustomizations(publicAPI, model);
-
   // override; we will set the manipulator ourselves
   publicAPI.bindRepresentationToManipulator = () => {};
 
@@ -87,6 +84,7 @@ export function extend(publicAPI, model, initialValues = {}) {
   macro.setGet(publicAPI, model, ['slicingMode']);
 
   vtkView2DProxy.extend(publicAPI, model, initialValues);
+  applyLPSViewProxyBase(publicAPI, model);
 
   vtkLPSView2DProxy(publicAPI, model);
 }
diff --git a/src/vtk/LPSView3DProxy/index.d.ts b/src/vtk/LPSView3DProxy/index.d.ts
index dee06dd6b..4baea5754 100644
--- a/src/vtk/LPSView3DProxy/index.d.ts
+++ b/src/vtk/LPSView3DProxy/index.d.ts
@@ -1,16 +1,13 @@
 import { vec3 } from 'gl-matrix';
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { LPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
 
-export interface vtkLPSView3DProxy extends vtkViewProxy {
-  removeAllRepresentations(): void;
-  updateCamera(directionOfProjection: vec3, viewUp: vec3, focalPoint: vec3);
-  getInteractorStyle2D(): vtkInteractorStyleManipulator;
-  getInteractorStyle3D(): vtkInteractorStyleManipulator;
-}
+export interface vtkLPSView3DProxy extends vtkViewProxy, LPSViewProxyBase {}
 
-export function commonViewCustomizations(publicAPI: any, model: any): void;
+export function extend(publicAPI: object, model: object): void;
+
+export declare const vtkLPSView3DProxy: {
+  extend: typeof extend;
+};
 
-// TODO extend, newInstance...
-export declare const vtkLPSView3DProxy: {};
 export default vtkLPSView3DProxy;
diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js
index a1347bd5d..666566cad 100644
--- a/src/vtk/LPSView3DProxy/index.js
+++ b/src/vtk/LPSView3DProxy/index.js
@@ -1,77 +1,16 @@
-import { vec3 } from 'gl-matrix';
 import macro from '@kitware/vtk.js/macro';
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import { batchForNextTask } from '@/src/utils/batchForNextTask';
-
-export function commonViewCustomizations(publicAPI, model) {
-  // override resize to avoid flickering from rendering later
-  publicAPI.resize = () => {
-    if (model.container) {
-      const dims = model.container.getBoundingClientRect();
-      if (dims.width === dims.height && dims.width === 0) {
-        return;
-      }
-      const devicePixelRatio = window.devicePixelRatio || 1;
-      const width = Math.max(10, Math.floor(devicePixelRatio * dims.width));
-      const height = Math.max(10, Math.floor(devicePixelRatio * dims.height));
-      model.renderWindow.getViews()[0].setSize(width, height);
-      publicAPI.invokeResize({ width, height });
-      publicAPI.render();
-    }
-  };
-
-  // override render to not reset camera
-  publicAPI.render = () => {
-    model.orientationWidget.updateMarkerOrientation();
-    model.renderWindow.render();
-  };
-
-  // provide a renderLater impl that schedules for the next js task
-  publicAPI.renderLater = batchForNextTask(() => {
-    publicAPI.render();
-  });
-
-  // add helper function
-  publicAPI.removeAllRepresentations = () => {
-    model.representations.forEach((rep) => model.renderer.removeViewProp(rep));
-    model.representations.length = 0;
-  };
-
-  publicAPI.updateCamera = (directionOfProjection, viewUp, focalPoint) => {
-    const position = vec3.clone(focalPoint);
-    vec3.sub(position, position, directionOfProjection);
-    model.camera.setFocalPoint(...focalPoint);
-    model.camera.setPosition(...position);
-    model.camera.setDirectionOfProjection(...directionOfProjection);
-    model.camera.setViewUp(...viewUp);
-  };
-
-  const { setContainer } = publicAPI;
-  publicAPI.setContainer = (el) => {
-    const changed = model.container !== el;
-    setContainer(el);
-    // disable the built-in corner annotations
-    model.cornerAnnotation.setContainer(null);
-    // trigger onModified
-    if (changed) publicAPI.modified();
-  };
-
-  const { resetCamera } = publicAPI;
-  publicAPI.resetCamera = (...args) => {
-    resetCamera(args);
-    model.renderer.updateLightsGeometryToFollowCamera();
-  };
-}
+import { applyLPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
 
 function vtkLPSView3DProxy(publicAPI, model) {
   model.classHierarchy.push('vtkLPSView3DProxy');
-  commonViewCustomizations(publicAPI, model);
 }
 
 export function extend(publicAPI, model, initialValues = {}) {
   Object.assign(model, initialValues);
 
   vtkViewProxy.extend(publicAPI, model, initialValues);
+  applyLPSViewProxyBase(publicAPI, model);
 
   vtkLPSView3DProxy(publicAPI, model);
 }
diff --git a/src/vtk/LPSViewProxyBase/index.d.ts b/src/vtk/LPSViewProxyBase/index.d.ts
new file mode 100644
index 000000000..61ddbde25
--- /dev/null
+++ b/src/vtk/LPSViewProxyBase/index.d.ts
@@ -0,0 +1,14 @@
+import { vec3 } from 'gl-matrix';
+import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+
+export interface LPSViewProxyBase {
+  removeAllRepresentations(): void;
+  updateCamera(directionOfProjection: vec3, viewUp: vec3, focalPoint: vec3);
+  getInteractorStyle2D(): vtkInteractorStyleManipulator;
+  getInteractorStyle3D(): vtkInteractorStyleManipulator;
+  getWidgetManager(): vtkWidgetManager;
+}
+
+export function applyLPSViewProxyBase(publicAPI: object, model: object);
diff --git a/src/vtk/LPSViewProxyBase/index.js b/src/vtk/LPSViewProxyBase/index.js
new file mode 100644
index 000000000..adf0ec558
--- /dev/null
+++ b/src/vtk/LPSViewProxyBase/index.js
@@ -0,0 +1,78 @@
+import { vec3 } from 'gl-matrix';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { CaptureOn } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+
+export function applyLPSViewProxyBase(publicAPI, model) {
+  model._widgetManager = vtkWidgetManager.newInstance({
+    pickingEnabled: true,
+    captureOn: CaptureOn.MOUSE_MOVE,
+  });
+  model._widgetManager.setRenderer(model.renderer);
+
+  publicAPI.getWidgetManager = () => model._widgetManager;
+
+  // override resize to avoid flickering from rendering later
+  publicAPI.resize = () => {
+    if (model.container) {
+      const dims = model.container.getBoundingClientRect();
+      if (dims.width === dims.height && dims.width === 0) {
+        return;
+      }
+      const devicePixelRatio = window.devicePixelRatio || 1;
+      const width = Math.max(10, Math.floor(devicePixelRatio * dims.width));
+      const height = Math.max(10, Math.floor(devicePixelRatio * dims.height));
+      model.renderWindow.getViews()[0].setSize(width, height);
+      publicAPI.invokeResize({ width, height });
+      publicAPI.render();
+    }
+  };
+
+  // override render to not reset camera
+  publicAPI.render = () => {
+    model.orientationWidget.updateMarkerOrientation();
+    model.renderWindow.render();
+  };
+
+  // provide a renderLater impl that schedules for the next js task
+  publicAPI.renderLater = batchForNextTask(() => {
+    publicAPI.render();
+  });
+
+  // add helper function
+  publicAPI.removeAllRepresentations = () => {
+    model.representations.forEach((rep) => model.renderer.removeViewProp(rep));
+    model.representations.length = 0;
+  };
+
+  publicAPI.updateCamera = (directionOfProjection, viewUp, focalPoint) => {
+    const position = vec3.clone(focalPoint);
+    vec3.sub(position, position, directionOfProjection);
+    model.camera.setFocalPoint(...focalPoint);
+    model.camera.setPosition(...position);
+    model.camera.setDirectionOfProjection(...directionOfProjection);
+    model.camera.setViewUp(...viewUp);
+  };
+
+  const { setContainer } = publicAPI;
+  publicAPI.setContainer = (el) => {
+    const changed = model.container !== el;
+    setContainer(el);
+    // disable the built-in corner annotations
+    model.cornerAnnotation.setContainer(null);
+    // trigger onModified
+    if (changed) publicAPI.modified();
+  };
+
+  const { resetCamera } = publicAPI;
+  publicAPI.resetCamera = (...args) => {
+    resetCamera(args);
+    model.renderer.updateLightsGeometryToFollowCamera();
+  };
+
+  const { delete: delete_ } = publicAPI;
+  publicAPI.delete = () => {
+    delete_();
+    model._widgetManager.delete();
+  };
+}

From 0f54cf2834c56f99e276d728729d9d3d34182849 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 8 Feb 2024 12:42:56 -0500
Subject: [PATCH 08/11] refactor(VtkThreeView): separate cvr/color effects

---
 src/components/VtkThreeView.vue      | 305 +--------------------------
 src/composables/useColoringEffect.ts |  73 +++++++
 src/composables/useCvrEffect.ts      | 224 ++++++++++++++++++++
 src/vtk/LPSViewProxyBase/index.js    |   3 +-
 4 files changed, 302 insertions(+), 303 deletions(-)
 create mode 100644 src/composables/useColoringEffect.ts
 create mode 100644 src/composables/useCvrEffect.ts

diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
index decc538da..0e3b71f00 100644
--- a/src/components/VtkThreeView.vue
+++ b/src/components/VtkThreeView.vue
@@ -60,22 +60,15 @@ import {
   ref,
   toRefs,
   watch,
-  Ref,
   nextTick,
 } from 'vue';
-import { computedWithControl } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 
 import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
-import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
-import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
-import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
-import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import type { Vector3 } from '@kitware/vtk.js/types';
 import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
-import { useProxyManager } from '@/src/composables/useProxyManager';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import { useCvrEffect } from '@/src/composables/useCvrEffect';
+import { useColoringEffect } from '@/src/composables/useColoringEffect';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useCurrentImage } from '../composables/useCurrentImage';
 import { useCameraOrientation } from '../composables/useCameraOrientation';
@@ -84,305 +77,13 @@ import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
 import { LPSAxisDir } from '../types/lps';
 import { useViewProxy } from '../composables/useViewProxy';
 import { ViewProxyType } from '../core/proxies';
-import { VolumeColorConfig } from '../store/view-configs/types';
-import useVolumeColoringStore, {
-  DEFAULT_AMBIENT,
-  DEFAULT_DIFFUSE,
-  DEFAULT_SPECULAR,
-} from '../store/view-configs/volume-coloring';
-import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
+import useVolumeColoringStore from '../store/view-configs/volume-coloring';
 import CropTool from './tools/crop/CropTool.vue';
 import PanTool from './tools/PanTool.vue';
 import { useCropStore, croppingPlanesEqual } from '../store/tools/crop';
-import { isViewAnimating } from '../composables/isViewAnimating';
-import { ColoringConfig } from '../types/views';
 import useViewCameraStore from '../store/view-configs/camera';
-import { Maybe } from '../types';
 import { useResetViewsEvents } from './tools/ResetViews.vue';
 
-function useCvrEffect(
-  config: Ref<Maybe<VolumeColorConfig>>,
-  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
-  viewProxy: Ref<vtkLPSView3DProxy>
-) {
-  const cvrParams = computed(() => config.value?.cvr);
-  const repMapper = computedWithControl(
-    imageRep,
-    () => imageRep.value?.getMapper() as vtkVolumeMapper | undefined
-  );
-  const image = computedWithControl(
-    imageRep,
-    () => imageRep.value?.getInputDataSet() as vtkImageData | null | undefined
-  );
-  const volume = computedWithControl(
-    imageRep,
-    () => imageRep.value?.getVolumes()[0]
-  );
-  const renderer = computed(() => viewProxy.value.getRenderer());
-  const isAnimating = isViewAnimating(viewProxy);
-  const cvrEnabled = computed(() => {
-    const enabled = !!cvrParams.value?.enabled;
-    const animating = isAnimating.value;
-    return enabled && !animating;
-  });
-
-  const requestRender = () => {
-    if (!isAnimating.value) {
-      viewProxy.value.renderLater();
-    }
-  };
-
-  // lights
-  const volumeCenter = computed(() => {
-    if (!volume.value) return null;
-    const volumeBounds = volume.value.getBounds();
-    return [
-      (volumeBounds[0] + volumeBounds[1]) / 2,
-      (volumeBounds[2] + volumeBounds[3]) / 2,
-      (volumeBounds[4] + volumeBounds[5]) / 2,
-    ] as Vector3;
-  });
-  const lightFollowsCamera = computed(
-    () => cvrParams.value?.lightFollowsCamera ?? true
-  );
-
-  watch(
-    [volumeCenter, renderer, cvrEnabled, lightFollowsCamera],
-    ([center, ren, enabled, lightFollowsCamera_]) => {
-      if (!center) return;
-
-      if (ren.getLights().length === 0) {
-        ren.createLight();
-      }
-      const light = ren.getLights()[0];
-      if (enabled) {
-        light.setFocalPoint(...center);
-        light.setColor(1, 1, 1);
-        light.setIntensity(1);
-        light.setConeAngle(90);
-        light.setPositional(true);
-        ren.setTwoSidedLighting(false);
-        if (lightFollowsCamera_) {
-          light.setLightTypeToHeadLight();
-          ren.updateLightsGeometryToFollowCamera();
-        } else {
-          light.setLightTypeToSceneLight();
-        }
-      } else {
-        light.setPositional(false);
-      }
-
-      requestRender();
-    },
-    { immediate: true }
-  );
-
-  // sampling distance
-  const volumeQuality = computed(() => cvrParams.value?.volumeQuality);
-
-  watch(
-    [volume, image, repMapper, volumeQuality, cvrEnabled, isAnimating],
-    ([volume_, image_, mapper, volumeQuality_, enabled, animating]) => {
-      if (!volume_ || !mapper || volumeQuality_ == null || !image_) return;
-
-      if (animating) {
-        mapper.setSampleDistance(0.75);
-        mapper.setMaximumSamplesPerRay(1000);
-        mapper.setGlobalIlluminationReach(0);
-        mapper.setComputeNormalFromOpacity(false);
-      } else {
-        const dims = image_.getDimensions();
-        const spacing = image_.getSpacing();
-        const spatialDiagonal = vec3.length(
-          vec3.fromValues(
-            dims[0] * spacing[0],
-            dims[1] * spacing[1],
-            dims[2] * spacing[2]
-          )
-        );
-
-        // Use the average spacing for sampling by default
-        let sampleDistance = spacing.reduce((a, b) => a + b) / 3.0;
-        // Adjust the volume sampling by the quality slider value
-        sampleDistance /= volumeQuality_ > 1 ? 0.5 * volumeQuality_ ** 2 : 1.0;
-        const samplesPerRay = spatialDiagonal / sampleDistance + 1;
-        mapper.setMaximumSamplesPerRay(samplesPerRay);
-        mapper.setSampleDistance(sampleDistance);
-        // Adjust the global illumination reach by volume quality slider
-        mapper.setGlobalIlluminationReach(enabled ? 0.25 * volumeQuality_ : 0);
-        mapper.setComputeNormalFromOpacity(!enabled && volumeQuality_ > 2);
-      }
-
-      requestRender();
-    },
-    { immediate: true }
-  );
-
-  // volume properties
-  const ambient = computed(() => cvrParams.value?.ambient ?? 0);
-  const diffuse = computed(() => cvrParams.value?.diffuse ?? 0);
-  const specular = computed(() => cvrParams.value?.specular ?? 0);
-
-  watch(
-    [volume, image, ambient, diffuse, specular, cvrEnabled],
-    ([volume_, image_, ambient_, diffuse_, specular_, enabled]) => {
-      if (!volume_ || !image_) return;
-
-      const property = volume_.getProperty();
-      property.setScalarOpacityUnitDistance(
-        0,
-        (0.5 * getDiagonalLength(image_.getBounds())) /
-          Math.max(...image_.getDimensions())
-      );
-
-      property.setShade(true);
-      property.setUseGradientOpacity(0, !enabled);
-      property.setGradientOpacityMinimumValue(0, 0.0);
-      const dataRange = image_.getPointData().getScalars().getRange();
-      property.setGradientOpacityMaximumValue(
-        0,
-        (dataRange[1] - dataRange[0]) * 0.01
-      );
-      property.setGradientOpacityMinimumOpacity(0, 0.0);
-      property.setGradientOpacityMaximumOpacity(0, 1.0);
-
-      // do not toggle these parameters when animating
-      property.setAmbient(enabled ? ambient_ : DEFAULT_AMBIENT);
-      property.setDiffuse(enabled ? diffuse_ : DEFAULT_DIFFUSE);
-      property.setSpecular(enabled ? specular_ : DEFAULT_SPECULAR);
-
-      requestRender();
-    },
-    { immediate: true }
-  );
-
-  // volumetric scattering blending
-  const useVolumetricScatteringBlending = computed(
-    () => cvrParams.value?.useVolumetricScatteringBlending ?? false
-  );
-  const volumetricScatteringBlending = computed(
-    () => cvrParams.value?.volumetricScatteringBlending ?? 0
-  );
-
-  watch(
-    [
-      useVolumetricScatteringBlending,
-      volumetricScatteringBlending,
-      repMapper,
-      cvrEnabled,
-    ],
-    ([useVsb, vsb, mapper, enabled]) => {
-      if (!mapper) return;
-
-      if (enabled && useVsb) {
-        mapper.setVolumetricScatteringBlending(vsb);
-      } else {
-        mapper.setVolumetricScatteringBlending(0);
-      }
-
-      requestRender();
-    },
-    { immediate: true }
-  );
-
-  // local ambient occlusion
-  const useLocalAmbientOcclusion = computed(
-    () => cvrParams.value?.useLocalAmbientOcclusion ?? false
-  );
-  const laoKernelSize = computed(() => cvrParams.value?.laoKernelSize ?? 0);
-  const laoKernelRadius = computed(() => cvrParams.value?.laoKernelRadius ?? 0);
-
-  watch(
-    [
-      useLocalAmbientOcclusion,
-      laoKernelSize,
-      laoKernelRadius,
-      repMapper,
-      cvrEnabled,
-    ],
-    ([useLao, kernelSize, kernelRadius, mapper, enabled]) => {
-      if (!mapper) return;
-
-      if (enabled && useLao) {
-        mapper.setLocalAmbientOcclusion(true);
-        mapper.setLAOKernelSize(kernelSize);
-        mapper.setLAOKernelRadius(kernelRadius);
-      } else {
-        mapper.setLocalAmbientOcclusion(false);
-        mapper.setLAOKernelSize(0);
-        mapper.setLAOKernelRadius(0);
-      }
-
-      requestRender();
-    },
-    { immediate: true }
-  );
-}
-
-function useColoringEffect(
-  config: Ref<Maybe<ColoringConfig>>,
-  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
-  viewProxy: Ref<vtkLPSView3DProxy>
-) {
-  const colorBy = computed(() => config.value?.colorBy);
-  const colorTransferFunction = computed(() => config.value?.transferFunction);
-  const opacityFunction = computed(() => config.value?.opacityFunction);
-
-  const proxyManager = useProxyManager();
-
-  watch(
-    [imageRep, colorBy, colorTransferFunction, opacityFunction],
-    ([rep, colorBy_, colorFunc, opacityFunc]) => {
-      if (!rep || !colorBy_ || !colorFunc || !opacityFunc || !proxyManager) {
-        return;
-      }
-
-      const { arrayName, location } = colorBy_;
-
-      const lut = proxyManager.getLookupTable(arrayName);
-      lut.setMode(LookupTableProxyMode.Preset);
-      lut.setPresetName(colorFunc.preset);
-      lut.setDataRange(...colorFunc.mappingRange);
-
-      const pwf = proxyManager.getPiecewiseFunction(arrayName);
-      pwf.setMode(opacityFunc.mode);
-      pwf.setDataRange(...opacityFunc.mappingRange);
-
-      switch (opacityFunc.mode) {
-        case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-          pwf.setGaussians(opacityFunc.gaussians);
-          break;
-        case vtkPiecewiseFunctionProxy.Mode.Points: {
-          const opacityPoints = getShiftedOpacityFromPreset(
-            opacityFunc.preset,
-            opacityFunc.mappingRange,
-            opacityFunc.shift,
-            opacityFunc.shiftAlpha
-          );
-          if (opacityPoints) {
-            pwf.setPoints(opacityPoints);
-          }
-          break;
-        }
-        case vtkPiecewiseFunctionProxy.Mode.Nodes:
-          pwf.setNodes(opacityFunc.nodes);
-          break;
-        default:
-      }
-
-      if (rep) {
-        // control color range manually
-        rep.setRescaleOnColorBy(false);
-        rep.setColorBy(arrayName, location);
-      }
-
-      // Need to trigger a render for when we are restoring from a state file
-      viewProxy.value.renderLater();
-    },
-    { immediate: true }
-  );
-}
-
 export default defineComponent({
   props: {
     id: {
diff --git a/src/composables/useColoringEffect.ts b/src/composables/useColoringEffect.ts
new file mode 100644
index 000000000..8305de251
--- /dev/null
+++ b/src/composables/useColoringEffect.ts
@@ -0,0 +1,73 @@
+import { useProxyManager } from '@/src/composables/useProxyManager';
+import { Maybe } from '@/src/types';
+import { ColoringConfig } from '@/src/types/views';
+import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
+import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
+import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
+import { Ref, computed, watch } from 'vue';
+import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import { getShiftedOpacityFromPreset } from '@/src/utils/vtk-helpers';
+
+export function useColoringEffect(
+  config: Ref<Maybe<ColoringConfig>>,
+  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
+  viewProxy: Ref<vtkLPSView3DProxy>
+) {
+  const colorBy = computed(() => config.value?.colorBy);
+  const colorTransferFunction = computed(() => config.value?.transferFunction);
+  const opacityFunction = computed(() => config.value?.opacityFunction);
+
+  const proxyManager = useProxyManager();
+
+  watch(
+    [imageRep, colorBy, colorTransferFunction, opacityFunction],
+    ([rep, colorBy_, colorFunc, opacityFunc]) => {
+      if (!rep || !colorBy_ || !colorFunc || !opacityFunc || !proxyManager) {
+        return;
+      }
+
+      const { arrayName, location } = colorBy_;
+
+      const lut = proxyManager.getLookupTable(arrayName);
+      lut.setMode(LookupTableProxyMode.Preset);
+      lut.setPresetName(colorFunc.preset);
+      lut.setDataRange(...colorFunc.mappingRange);
+
+      const pwf = proxyManager.getPiecewiseFunction(arrayName);
+      pwf.setMode(opacityFunc.mode);
+      pwf.setDataRange(...opacityFunc.mappingRange);
+
+      switch (opacityFunc.mode) {
+        case vtkPiecewiseFunctionProxy.Mode.Gaussians:
+          pwf.setGaussians(opacityFunc.gaussians);
+          break;
+        case vtkPiecewiseFunctionProxy.Mode.Points: {
+          const opacityPoints = getShiftedOpacityFromPreset(
+            opacityFunc.preset,
+            opacityFunc.mappingRange,
+            opacityFunc.shift,
+            opacityFunc.shiftAlpha
+          );
+          if (opacityPoints) {
+            pwf.setPoints(opacityPoints);
+          }
+          break;
+        }
+        case vtkPiecewiseFunctionProxy.Mode.Nodes:
+          pwf.setNodes(opacityFunc.nodes);
+          break;
+        default:
+      }
+
+      if (rep) {
+        // control color range manually
+        rep.setRescaleOnColorBy(false);
+        rep.setColorBy(arrayName, location);
+      }
+
+      // Need to trigger a render for when we are restoring from a state file
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+}
diff --git a/src/composables/useCvrEffect.ts b/src/composables/useCvrEffect.ts
new file mode 100644
index 000000000..2da1aded3
--- /dev/null
+++ b/src/composables/useCvrEffect.ts
@@ -0,0 +1,224 @@
+import { isViewAnimating } from '@/src/composables/isViewAnimating';
+import { VolumeColorConfig } from '@/src/store/view-configs/types';
+import {
+  DEFAULT_AMBIENT,
+  DEFAULT_DIFFUSE,
+  DEFAULT_SPECULAR,
+} from '@/src/store/view-configs/volume-coloring';
+import { Maybe } from '@/src/types';
+import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
+import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
+import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { vec3 } from 'gl-matrix';
+import { Ref, computed, watch } from 'vue';
+
+export function useCvrEffect(
+  config: Ref<Maybe<VolumeColorConfig>>,
+  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
+  viewProxy: Ref<vtkLPSView3DProxy>
+) {
+  const cvrParams = computed(() => config.value?.cvr);
+  const repMapper = computed(
+    () => imageRep.value?.getMapper() as Maybe<vtkVolumeMapper>
+  );
+  const image = computed(
+    () => imageRep.value?.getInputDataSet() as Maybe<vtkImageData>
+  );
+  const volume = computed(() => imageRep.value?.getVolumes()[0]);
+  const renderer = computed(() => viewProxy.value.getRenderer());
+  const isAnimating = isViewAnimating(viewProxy);
+  const cvrEnabled = computed(() => {
+    const enabled = !!cvrParams.value?.enabled;
+    const animating = isAnimating.value;
+    return enabled && !animating;
+  });
+
+  // lights
+  const volumeCenter = computed(() => {
+    if (!volume.value) return null;
+    const volumeBounds = volume.value.getBounds();
+    return [
+      (volumeBounds[0] + volumeBounds[1]) / 2,
+      (volumeBounds[2] + volumeBounds[3]) / 2,
+      (volumeBounds[4] + volumeBounds[5]) / 2,
+    ] as Vector3;
+  });
+  const lightFollowsCamera = computed(
+    () => cvrParams.value?.lightFollowsCamera ?? true
+  );
+
+  watch(
+    [volumeCenter, renderer, cvrEnabled, lightFollowsCamera],
+    ([center, ren, enabled, lightFollowsCamera_]) => {
+      if (!center) return;
+
+      if (ren.getLights().length === 0) {
+        ren.createLight();
+      }
+      const light = ren.getLights()[0];
+      if (enabled) {
+        light.setFocalPoint(...center);
+        light.setColor(1, 1, 1);
+        light.setIntensity(1);
+        light.setConeAngle(90);
+        light.setPositional(true);
+        ren.setTwoSidedLighting(false);
+        if (lightFollowsCamera_) {
+          light.setLightTypeToHeadLight();
+          ren.updateLightsGeometryToFollowCamera();
+        } else {
+          light.setLightTypeToSceneLight();
+        }
+      } else {
+        light.setPositional(false);
+      }
+
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+
+  // sampling distance
+  const volumeQuality = computed(() => cvrParams.value?.volumeQuality);
+
+  watch(
+    [volume, image, repMapper, volumeQuality, cvrEnabled, isAnimating],
+    ([volume_, image_, mapper, volumeQuality_, enabled, animating]) => {
+      if (!volume_ || !mapper || volumeQuality_ == null || !image_) return;
+
+      if (animating) {
+        mapper.setSampleDistance(0.75);
+        mapper.setMaximumSamplesPerRay(1000);
+        mapper.setGlobalIlluminationReach(0);
+        mapper.setComputeNormalFromOpacity(false);
+      } else {
+        const dims = image_.getDimensions();
+        const spacing = image_.getSpacing();
+        const spatialDiagonal = vec3.length(
+          vec3.fromValues(
+            dims[0] * spacing[0],
+            dims[1] * spacing[1],
+            dims[2] * spacing[2]
+          )
+        );
+
+        // Use the average spacing for sampling by default
+        let sampleDistance = spacing.reduce((a, b) => a + b) / 3.0;
+        // Adjust the volume sampling by the quality slider value
+        sampleDistance /= volumeQuality_ > 1 ? 0.5 * volumeQuality_ ** 2 : 1.0;
+        const samplesPerRay = spatialDiagonal / sampleDistance + 1;
+        mapper.setMaximumSamplesPerRay(samplesPerRay);
+        mapper.setSampleDistance(sampleDistance);
+        // Adjust the global illumination reach by volume quality slider
+        mapper.setGlobalIlluminationReach(enabled ? 0.25 * volumeQuality_ : 0);
+        mapper.setComputeNormalFromOpacity(!enabled && volumeQuality_ > 2);
+      }
+
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+
+  // volume properties
+  const ambient = computed(() => cvrParams.value?.ambient ?? 0);
+  const diffuse = computed(() => cvrParams.value?.diffuse ?? 0);
+  const specular = computed(() => cvrParams.value?.specular ?? 0);
+
+  watch(
+    [volume, image, ambient, diffuse, specular, cvrEnabled],
+    ([volume_, image_, ambient_, diffuse_, specular_, enabled]) => {
+      if (!volume_ || !image_) return;
+
+      const property = volume_.getProperty();
+      property.setScalarOpacityUnitDistance(
+        0,
+        (0.5 * getDiagonalLength(image_.getBounds())) /
+          Math.max(...image_.getDimensions())
+      );
+
+      property.setShade(true);
+      property.setUseGradientOpacity(0, !enabled);
+      property.setGradientOpacityMinimumValue(0, 0.0);
+      const dataRange = image_.getPointData().getScalars().getRange();
+      property.setGradientOpacityMaximumValue(
+        0,
+        (dataRange[1] - dataRange[0]) * 0.01
+      );
+      property.setGradientOpacityMinimumOpacity(0, 0.0);
+      property.setGradientOpacityMaximumOpacity(0, 1.0);
+
+      // do not toggle these parameters when animating
+      property.setAmbient(enabled ? ambient_ : DEFAULT_AMBIENT);
+      property.setDiffuse(enabled ? diffuse_ : DEFAULT_DIFFUSE);
+      property.setSpecular(enabled ? specular_ : DEFAULT_SPECULAR);
+
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+
+  // volumetric scattering blending
+  const useVolumetricScatteringBlending = computed(
+    () => cvrParams.value?.useVolumetricScatteringBlending ?? false
+  );
+  const volumetricScatteringBlending = computed(
+    () => cvrParams.value?.volumetricScatteringBlending ?? 0
+  );
+
+  watch(
+    [
+      useVolumetricScatteringBlending,
+      volumetricScatteringBlending,
+      repMapper,
+      cvrEnabled,
+    ],
+    ([useVsb, vsb, mapper, enabled]) => {
+      if (!mapper) return;
+
+      if (enabled && useVsb) {
+        mapper.setVolumetricScatteringBlending(vsb);
+      } else {
+        mapper.setVolumetricScatteringBlending(0);
+      }
+
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+
+  // local ambient occlusion
+  const useLocalAmbientOcclusion = computed(
+    () => cvrParams.value?.useLocalAmbientOcclusion ?? false
+  );
+  const laoKernelSize = computed(() => cvrParams.value?.laoKernelSize ?? 0);
+  const laoKernelRadius = computed(() => cvrParams.value?.laoKernelRadius ?? 0);
+
+  watch(
+    [
+      useLocalAmbientOcclusion,
+      laoKernelSize,
+      laoKernelRadius,
+      repMapper,
+      cvrEnabled,
+    ],
+    ([useLao, kernelSize, kernelRadius, mapper, enabled]) => {
+      if (!mapper) return;
+
+      if (enabled && useLao) {
+        mapper.setLocalAmbientOcclusion(true);
+        mapper.setLAOKernelSize(kernelSize);
+        mapper.setLAOKernelRadius(kernelRadius);
+      } else {
+        mapper.setLocalAmbientOcclusion(false);
+        mapper.setLAOKernelSize(0);
+        mapper.setLAOKernelRadius(0);
+      }
+
+      viewProxy.value.renderLater();
+    },
+    { immediate: true }
+  );
+}
diff --git a/src/vtk/LPSViewProxyBase/index.js b/src/vtk/LPSViewProxyBase/index.js
index adf0ec558..ca30e70db 100644
--- a/src/vtk/LPSViewProxyBase/index.js
+++ b/src/vtk/LPSViewProxyBase/index.js
@@ -28,8 +28,9 @@ export function applyLPSViewProxyBase(publicAPI, model) {
     }
   };
 
-  // override render to not reset camera
+  // override render to not reset camera and to not render during animation
   publicAPI.render = () => {
+    if (model.interactor.isAnimating()) return;
     model.orientationWidget.updateMarkerOrientation();
     model.renderWindow.render();
   };

From 4f9294325123f125022dc8cc43517ed86cc88e75 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 8 Feb 2024 13:05:43 -0500
Subject: [PATCH 09/11] refactor(useColoringEffect): export applyColoring

---
 src/composables/useColoringEffect.ts | 133 +++++++++++++++++----------
 1 file changed, 82 insertions(+), 51 deletions(-)

diff --git a/src/composables/useColoringEffect.ts b/src/composables/useColoringEffect.ts
index 8305de251..3e4f2e0cd 100644
--- a/src/composables/useColoringEffect.ts
+++ b/src/composables/useColoringEffect.ts
@@ -1,12 +1,74 @@
 import { useProxyManager } from '@/src/composables/useProxyManager';
 import { Maybe } from '@/src/types';
-import { ColoringConfig } from '@/src/types/views';
+import {
+  ColorBy,
+  ColorTransferFunction,
+  ColoringConfig,
+  OpacityFunction,
+} from '@/src/types/views';
 import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
 import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
 import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
-import { Ref, computed, watch } from 'vue';
+import { Ref, computed, watchEffect } from 'vue';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import { getShiftedOpacityFromPreset } from '@/src/utils/vtk-helpers';
+import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
+import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
+
+export interface ApplyColoringParams {
+  colorBy: ColorBy;
+  colorFunc: ColorTransferFunction;
+  opacityFunc: OpacityFunction;
+  rep: vtkAbstractRepresentationProxy;
+  proxyManager: vtkProxyManager;
+}
+
+export function applyColoring({
+  colorBy,
+  colorFunc,
+  opacityFunc,
+  rep,
+  proxyManager,
+}: ApplyColoringParams) {
+  const { arrayName, location } = colorBy;
+
+  const lut = proxyManager.getLookupTable(arrayName);
+  lut.setMode(LookupTableProxyMode.Preset);
+  lut.setPresetName(colorFunc.preset);
+  lut.setDataRange(...colorFunc.mappingRange);
+
+  const pwf = proxyManager.getPiecewiseFunction(arrayName);
+  pwf.setMode(opacityFunc.mode);
+  pwf.setDataRange(...opacityFunc.mappingRange);
+
+  switch (opacityFunc.mode) {
+    case vtkPiecewiseFunctionProxy.Mode.Gaussians:
+      pwf.setGaussians(opacityFunc.gaussians);
+      break;
+    case vtkPiecewiseFunctionProxy.Mode.Points: {
+      const opacityPoints = getShiftedOpacityFromPreset(
+        opacityFunc.preset,
+        opacityFunc.mappingRange,
+        opacityFunc.shift,
+        opacityFunc.shiftAlpha
+      );
+      if (opacityPoints) {
+        pwf.setPoints(opacityPoints);
+      }
+      break;
+    }
+    case vtkPiecewiseFunctionProxy.Mode.Nodes:
+      pwf.setNodes(opacityFunc.nodes);
+      break;
+    default:
+  }
+
+  if (rep) {
+    // control color range manually
+    rep.setRescaleOnColorBy(false);
+    rep.setColorBy(arrayName, location);
+  }
+}
 
 export function useColoringEffect(
   config: Ref<Maybe<ColoringConfig>>,
@@ -19,55 +81,24 @@ export function useColoringEffect(
 
   const proxyManager = useProxyManager();
 
-  watch(
-    [imageRep, colorBy, colorTransferFunction, opacityFunction],
-    ([rep, colorBy_, colorFunc, opacityFunc]) => {
-      if (!rep || !colorBy_ || !colorFunc || !opacityFunc || !proxyManager) {
-        return;
-      }
-
-      const { arrayName, location } = colorBy_;
-
-      const lut = proxyManager.getLookupTable(arrayName);
-      lut.setMode(LookupTableProxyMode.Preset);
-      lut.setPresetName(colorFunc.preset);
-      lut.setDataRange(...colorFunc.mappingRange);
+  watchEffect(() => {
+    const rep = imageRep.value;
+    const colorBy_ = colorBy.value;
+    const colorFunc = colorTransferFunction.value;
+    const opacityFunc = opacityFunction.value;
+    if (!rep || !colorBy_ || !colorFunc || !opacityFunc || !proxyManager) {
+      return;
+    }
 
-      const pwf = proxyManager.getPiecewiseFunction(arrayName);
-      pwf.setMode(opacityFunc.mode);
-      pwf.setDataRange(...opacityFunc.mappingRange);
-
-      switch (opacityFunc.mode) {
-        case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-          pwf.setGaussians(opacityFunc.gaussians);
-          break;
-        case vtkPiecewiseFunctionProxy.Mode.Points: {
-          const opacityPoints = getShiftedOpacityFromPreset(
-            opacityFunc.preset,
-            opacityFunc.mappingRange,
-            opacityFunc.shift,
-            opacityFunc.shiftAlpha
-          );
-          if (opacityPoints) {
-            pwf.setPoints(opacityPoints);
-          }
-          break;
-        }
-        case vtkPiecewiseFunctionProxy.Mode.Nodes:
-          pwf.setNodes(opacityFunc.nodes);
-          break;
-        default:
-      }
-
-      if (rep) {
-        // control color range manually
-        rep.setRescaleOnColorBy(false);
-        rep.setColorBy(arrayName, location);
-      }
+    applyColoring({
+      colorBy: colorBy_,
+      colorFunc,
+      opacityFunc,
+      rep,
+      proxyManager,
+    });
 
-      // Need to trigger a render for when we are restoring from a state file
-      viewProxy.value.renderLater();
-    },
-    { immediate: true }
-  );
+    // Need to trigger a render for when we are restoring from a state file
+    viewProxy.value.renderLater();
+  });
 }

From ffe3974662c5033eb622775d35b635b9b2dc85f4 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 8 Feb 2024 13:09:21 -0500
Subject: [PATCH 10/11] refactor(VtkTwoView): use applyColoring

---
 src/components/VtkTwoView.vue        | 119 +++++++++------------------
 src/composables/useColoringEffect.ts |   8 +-
 2 files changed, 41 insertions(+), 86 deletions(-)

diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 4751de986..32a1a42ef 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -138,8 +138,6 @@ import { onKeyStroke } from '@vueuse/core';
 import { useResizeToFit } from '@/src/composables/useResizeToFit';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkIJKSliceRepresentationProxy from '@/src/vtk/IJKSliceRepresentationProxy';
-import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
-import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import SliceSlider from '@/src/components/SliceSlider.vue';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
@@ -156,6 +154,7 @@ import { useBaseSliceRepresentation } from '@/src/composables/useBaseSliceRepres
 import { useLabelMapRepresentations } from '@/src/composables/useLabelMapRepresentations';
 import { useLayerRepresentations } from '@/src/composables/useLayerRepresentations';
 import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
+import { applyColoring } from '@/src/composables/useColoringEffect';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useOrientationLabels } from '../composables/useOrientationLabels';
 import { getLPSAxisFromDir } from '../utils/lps';
@@ -180,7 +179,6 @@ import useViewSliceStore from '../store/view-configs/slicing';
 import CropTool from './tools/crop/CropTool.vue';
 import { ToolContainer } from '../constants';
 import { useProxyManager } from '../composables/useProxyManager';
-import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
 import { useLayersStore } from '../store/datasets-layers';
 import { useViewCameraStore } from '../store/view-configs/camera';
 import useLayerColoringStore from '../store/view-configs/layers';
@@ -532,85 +530,44 @@ export default defineComponent({
       layersConfigs.value.map((config) => config?.blendConfig)
     );
 
-    watch(
-      [layerReps, colorBys, transferFunctions, opacityFunctions, blendConfigs],
-      () => {
-        layerReps.value
-          .map(
-            (layerRep, idx) =>
-              [
-                layerRep,
-                colorBys.value[idx],
-                transferFunctions.value[idx],
-                opacityFunctions.value[idx],
-                blendConfigs.value[idx],
-              ] as const
-          )
-          .forEach(
-            ([
-              rep,
-              colorBy,
-              transferFunction,
-              opacityFunction,
-              blendConfig,
-            ]) => {
-              if (
-                !colorBy ||
-                !transferFunction ||
-                !opacityFunction ||
-                !blendConfig
-              ) {
-                return;
-              }
-
-              const { arrayName, location } = colorBy;
-              const ctFunc = transferFunction;
-              const opFunc = opacityFunction;
-
-              const lut = proxyManager.getLookupTable(arrayName);
-              lut.setMode(LookupTableProxyMode.Preset);
-              lut.setPresetName(ctFunc.preset);
-              lut.setDataRange(...ctFunc.mappingRange);
-
-              const pwf = proxyManager.getPiecewiseFunction(arrayName);
-              pwf.setMode(vtkPiecewiseFunctionProxy.Mode.Points);
-              pwf.setDataRange(...opFunc.mappingRange);
-
-              switch (opFunc.mode) {
-                case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-                  pwf.setGaussians(opFunc.gaussians);
-                  break;
-                case vtkPiecewiseFunctionProxy.Mode.Points: {
-                  const opacityPoints = getShiftedOpacityFromPreset(
-                    opFunc.preset,
-                    opFunc.mappingRange,
-                    opFunc.shift,
-                    opFunc.shiftAlpha
-                  );
-                  if (opacityPoints) {
-                    pwf.setPoints(opacityPoints);
-                  }
-                  break;
-                }
-                case vtkPiecewiseFunctionProxy.Mode.Nodes:
-                  pwf.setNodes(opFunc.nodes);
-                  break;
-                default:
-              }
-
-              rep.setOpacity(blendConfig.opacity);
-
-              // control color range manually
-              rep.setRescaleOnColorBy(false);
-              rep.setColorBy(arrayName, location);
-
-              // Need to trigger a render for when we are restoring from a state file
-              viewProxy.value.renderLater();
+    watchEffect(() => {
+      layerReps.value
+        .map(
+          (layerRep, idx) =>
+            [
+              layerRep,
+              colorBys.value[idx],
+              transferFunctions.value[idx],
+              opacityFunctions.value[idx],
+              blendConfigs.value[idx],
+            ] as const
+        )
+        .forEach(
+          ([rep, colorBy, transferFunction, opacityFunction, blendConfig]) => {
+            if (
+              !colorBy ||
+              !transferFunction ||
+              !opacityFunction ||
+              !blendConfig
+            ) {
+              return;
             }
-          );
-      },
-      { immediate: true, deep: true }
-    );
+
+            applyColoring({
+              colorBy,
+              colorFunc: transferFunction,
+              opacityFunc: opacityFunction,
+              rep,
+              proxyManager,
+            });
+
+            rep.setOpacity(blendConfig.opacity);
+
+            // Need to trigger a render for when we are restoring from a state file
+            viewProxy.value.renderLater();
+          }
+        );
+    });
 
     // --- selection points --- //
 
diff --git a/src/composables/useColoringEffect.ts b/src/composables/useColoringEffect.ts
index 3e4f2e0cd..6b2ea42d3 100644
--- a/src/composables/useColoringEffect.ts
+++ b/src/composables/useColoringEffect.ts
@@ -63,11 +63,9 @@ export function applyColoring({
     default:
   }
 
-  if (rep) {
-    // control color range manually
-    rep.setRescaleOnColorBy(false);
-    rep.setColorBy(arrayName, location);
-  }
+  // control color range manually
+  rep.setRescaleOnColorBy(false);
+  rep.setColorBy(arrayName, location);
 }
 
 export function useColoringEffect(

From badc75e00d862cd7c70768322cbc5cceeefeb67e Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 8 Feb 2024 13:18:14 -0500
Subject: [PATCH 11/11] fix(LPSView3DProxy): prioritize LPSViewProxyBase

---
 src/vtk/LPSView3DProxy/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vtk/LPSView3DProxy/index.d.ts b/src/vtk/LPSView3DProxy/index.d.ts
index 4baea5754..3cf841a61 100644
--- a/src/vtk/LPSView3DProxy/index.d.ts
+++ b/src/vtk/LPSView3DProxy/index.d.ts
@@ -2,7 +2,7 @@ import { vec3 } from 'gl-matrix';
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { LPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
 
-export interface vtkLPSView3DProxy extends vtkViewProxy, LPSViewProxyBase {}
+export interface vtkLPSView3DProxy extends LPSViewProxyBase, vtkViewProxy {}
 
 export function extend(publicAPI: object, model: object): void;