From ff6b86a63bacd2ee5b0088ad81caf0c32f71dc33 Mon Sep 17 00:00:00 2001
From: Shreeraj Jadhav <shreerajjadhav@gmail.com>
Date: Mon, 27 Nov 2023 12:14:17 -0500
Subject: [PATCH 001/113] fix(sidebar): show toggle sidebar button by default

---
 src/components/App.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index 748022779..dcde1c04e 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -3,11 +3,7 @@
     <template v-slot="{ dragHover }">
       <v-app>
         <v-app-bar app clipped-left :height="48">
-          <v-btn
-            v-if="mobile"
-            icon="mdi-menu"
-            @click="leftSideBar = !leftSideBar"
-          />
+          <v-btn icon="mdi-menu" @click="leftSideBar = !leftSideBar" />
           <v-toolbar-title class="d-flex flex-row align-center mt-3">
             <vol-view-logo v-if="mobile" />
             <vol-view-full-logo v-else />

From 716283db6317db0119be2574829c77e2b58bad22 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 29 Nov 2023 10:57:20 -0500
Subject: [PATCH 002/113] fix(CrosshairsWidget2D): avoid error when changing
 layout

Could not create widget if View Proxy was not yet created.
---
 .../tools/crosshairs/CrosshairsWidget2D.vue   | 22 +++++++++++--------
 src/components/tools/paint/PaintWidget2D.vue  | 11 +++-------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index a10d90cb0..10d2ac498 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -3,11 +3,11 @@ import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import {
   defineComponent,
   onBeforeUnmount,
-  onMounted,
   PropType,
   ref,
   toRefs,
   watchEffect,
+  computed,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -15,6 +15,8 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 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';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
@@ -41,22 +43,23 @@ export default defineComponent({
       widgetManager: widgetManagerRef,
       viewDirection,
       slice,
+      viewId,
     } = toRefs(props);
 
+    const widgetRef = ref<vtkCrosshairsViewWidget>();
+
     const crosshairsStore = useCrosshairsToolStore();
     const factory = crosshairsStore.getWidgetFactory();
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
-    const widgetRef = ref<vtkCrosshairsViewWidget>();
-
-    const { currentImageMetadata } = useCurrentImage();
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
       widgetRef.value = widgetManager.addWidget(
         factory
       ) as vtkCrosshairsViewWidget;
 
       if (!widgetRef.value) {
-        throw new Error('[PaintWidget2D] failed to create view widget');
+        throw new Error('CrosshairsWidget2D failed to create view widget');
       }
     });
 
@@ -64,10 +67,11 @@ export default defineComponent({
 
     const manipulator = vtkPlaneManipulator.newInstance();
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       widgetRef.value!.setManipulator(manipulator);
     });
 
+    const { currentImageMetadata } = useCurrentImage();
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
@@ -79,13 +83,13 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       widgetRef.value!.setVisibility(true);
     });
 
     // --- focus and rendering --- //
 
-    onMounted(() => {
+    onViewProxyMounted(viewProxy, () => {
       const widgetManager = widgetManagerRef.value;
       widgetManager.renderWidgets();
     });
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index bf09c8634..37ade34f8 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -45,12 +45,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      widgetManager,
-      viewDirection,
-      slice,
-      viewId: viewID,
-    } = toRefs(props);
+    const { widgetManager, viewDirection, slice, viewId } = toRefs(props);
 
     const paintStore = usePaintToolStore();
     const widgetFactory = paintStore.getWidgetFactory();
@@ -70,7 +65,7 @@ export default defineComponent({
       return indexPoint;
     };
 
-    const viewProxy = computed(() => useViewStore().getViewProxy(viewID.value));
+    const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
 
     onViewProxyMounted(viewProxy, () => {
       widgetRef.value = widgetManager.value.addWidget(
@@ -78,7 +73,7 @@ export default defineComponent({
       ) as vtkPaintViewWidget;
 
       if (!widgetRef.value) {
-        throw new Error('[PaintWidget2D] failed to create view widget');
+        throw new Error('PaintWidget2D failed to create view widget');
       }
 
       widgetManager.value.renderWidgets();

From 9dd9e2e6b38df18ae9d2e1ad267730b9ccd07baf Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 20 Nov 2023 19:13:22 -0500
Subject: [PATCH 003/113] fix(session-zip.e2e): select child input avoiding
 webdriverio error

---
 tests/pageobjects/volview.page.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index b1e06adec..d37b4be58 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -68,13 +68,17 @@ class VolViewPage extends Page {
     return $('#notifications');
   }
 
+  async getNotificationsCount() {
+    const badge = await this.notifications.$('span[aria-label="Badge"]');
+    const innerText = await badge.getText();
+    return parseInt(innerText, 10);
+  }
+
   async waitForNotification() {
     const this_ = this;
     await browser.waitUntil(
       async () => {
-        const badge = await this_.notifications.$('span[aria-label="Badge"]');
-        const innerText = await badge.getText();
-        const notificationCount = parseInt(innerText, 10);
+        const notificationCount = await this_.getNotificationsCount();
         return notificationCount >= 1;
       },
       {
@@ -138,7 +142,7 @@ class VolViewPage extends Page {
 
   get labelStrokeWidthInput() {
     // there should only be one on the screen at any given time
-    return $('.label-stroke-width-input');
+    return $('.label-stroke-width-input').$('input');
   }
 
   get editLabelModalDoneButton() {

From 49dd65bd7bf3e1e2d1bd9614825b24b835e19b5e Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 20 Nov 2023 19:42:34 -0500
Subject: [PATCH 004/113] chore(state-manifest.e2e): add test loading version
 3.0.0 state manifest

---
 tests/fixtures/toolsProstate.volview.json | 407 ++++++++++++++++++++++
 tests/pageobjects/volview.page.ts         |   1 +
 tests/specs/state-manifest.e2e.ts         |  35 ++
 wdio.shared.conf.ts                       |   2 +
 4 files changed, 445 insertions(+)
 create mode 100644 tests/fixtures/toolsProstate.volview.json
 create mode 100644 tests/specs/state-manifest.e2e.ts

diff --git a/tests/fixtures/toolsProstate.volview.json b/tests/fixtures/toolsProstate.volview.json
new file mode 100644
index 000000000..40ae51e2b
--- /dev/null
+++ b/tests/fixtures/toolsProstate.volview.json
@@ -0,0 +1,407 @@
+{
+  "version": "3.0.0",
+  "datasets": [
+    {
+      "id": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922",
+      "path": "data/1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922/",
+      "type": "dicom"
+    }
+  ],
+  "remoteFiles": {
+    "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922": [
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-19.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-18.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-17.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-16.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-15.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-14.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-13.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-12.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-11.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-10.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-09.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-08.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-07.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-06.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-05.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-04.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-03.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-02.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      },
+      {
+        "archiveSrc": { "path": "MRI-PROSTATEx-0004/1-01.dcm" },
+        "parent": {
+          "uriSrc": {
+            "uri": "https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download",
+            "name": "MRI-PROSTATEx-0004.zip"
+          }
+        }
+      }
+    ]
+  },
+  "labelMaps": [],
+  "tools": {
+    "crosshairs": { "position": [0, 0, 0] },
+    "paint": {
+      "activeSegmentGroupID": null,
+      "activeSegment": null,
+      "brushSize": 4,
+      "labelmapOpacity": 1
+    },
+    "crop": {
+      "10": {
+        "Sagittal": [-0.5, 383.5],
+        "Coronal": [-0.5, 383.5],
+        "Axial": [-0.5, 18.5]
+      }
+    },
+    "current": "Ruler",
+    "polygons": {
+      "tools": [
+        {
+          "imageID": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922",
+          "frameOfReference": {
+            "planeNormal": [
+              1.408073370182161e-17, 0.24192189256080032, 0.9702957270336713
+            ],
+            "planeOrigin": [
+              -117.91325380387, -75.35208161269456, 52.13696960699617
+            ]
+          },
+          "slice": 9,
+          "placing": false,
+          "color": "#ffffff",
+          "strokeWidth": 1,
+          "name": "Polygon",
+          "points": [
+            [-18.053922796672243, -55.928583890596556, 47.29414777633043],
+            [11.43659320468982, -15.117696849450404, 37.11885095186395],
+            [-31.590564517872114, -5.0322464081816385, 34.6042657691187]
+          ],
+          "id": "15",
+          "label": "9",
+          "labelName": "white",
+          "movePoint": null
+        }
+      ],
+      "labels": {
+        "7": { "labelName": "red", "color": "red", "strokeWidth": 1 },
+        "8": { "labelName": "green", "color": "#00ff00", "strokeWidth": 1 },
+        "9": { "labelName": "white", "color": "#ffffff", "strokeWidth": 1 }
+      }
+    },
+    "rectangles": {
+      "tools": [
+        {
+          "imageID": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922",
+          "frameOfReference": {
+            "planeNormal": [
+              1.408073370182161e-17, 0.24192189256080032, 0.9702957270336713
+            ],
+            "planeOrigin": [
+              -117.91325380387, -75.35208161269456, 52.13696960699617
+            ]
+          },
+          "slice": 9,
+          "placing": false,
+          "color": "red",
+          "strokeWidth": 1,
+          "name": "Rectangle",
+          "firstPoint": [
+            -56.7300165298934, -65.31039649940394, 49.633296345923895
+          ],
+          "secondPoint": [
+            -34.007813285594224, -51.23767954755222, 46.12457398055551
+          ],
+          "id": "11",
+          "fillColor": "transparent",
+          "label": "6",
+          "labelName": "lesion"
+        }
+      ],
+      "labels": {
+        "4": {
+          "labelName": "artifact",
+          "color": "#888888",
+          "strokeWidth": 1,
+          "fillColor": "transparent"
+        },
+        "5": {
+          "labelName": "innocuous",
+          "color": "#00ff00",
+          "strokeWidth": 1,
+          "fillColor": "transparent"
+        },
+        "6": {
+          "labelName": "lesion",
+          "color": "red",
+          "strokeWidth": 1,
+          "fillColor": "transparent"
+        }
+      }
+    },
+    "rulers": {
+      "tools": [
+        {
+          "imageID": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922",
+          "frameOfReference": {
+            "planeNormal": [
+              1.408073370182161e-17, 0.24192189256080032, 0.9702957270336713
+            ],
+            "planeOrigin": [
+              -117.91325380387, -75.35208161269456, 52.13696960699617
+            ]
+          },
+          "slice": 9,
+          "placing": false,
+          "color": "#ffffff",
+          "strokeWidth": 1,
+          "name": "Ruler",
+          "firstPoint": [
+            -49.23652102879336, -28.72132454079226, 40.510616230314696
+          ],
+          "secondPoint": [
+            14.579040930216323, -31.7704125712456, 41.270839249297595
+          ],
+          "id": "28",
+          "label": "3",
+          "labelName": "white"
+        },
+        {
+          "imageID": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922",
+          "frameOfReference": {
+            "planeNormal": [
+              1.408073370182161e-17, 0.24192189256080032, 0.9702957270336713
+            ],
+            "planeOrigin": [
+              -117.91325380387, -75.35208161269456, 52.13696960699617
+            ]
+          },
+          "slice": 9,
+          "placing": false,
+          "color": "#58f24c",
+          "strokeWidth": 3,
+          "name": "Ruler",
+          "firstPoint": [
+            -49.7199707777567, -16.29041996967262, 37.411243661415796
+          ],
+          "secondPoint": [
+            16.75455670028652, -20.043149753622366, 38.346904271174324
+          ],
+          "id": "31",
+          "label": "32",
+          "labelName": "New Label"
+        }
+      ],
+      "labels": {
+        "1": { "labelName": "red", "color": "red", "strokeWidth": 1 },
+        "2": { "labelName": "green", "color": "#00ff00", "strokeWidth": 1 },
+        "3": { "labelName": "white", "color": "#ffffff", "strokeWidth": 1 },
+        "32": { "labelName": "New Label", "color": "#58f24c", "strokeWidth": 3 }
+      }
+    }
+  },
+  "layout": {
+    "name": "Axial Primary",
+    "direction": "V",
+    "items": [
+      "Axial",
+      { "direction": "H", "items": ["3D", "Coronal", "Sagittal"] }
+    ]
+  },
+  "views": [
+    {
+      "id": "Coronal",
+      "type": "2D",
+      "props": { "viewDirection": "Posterior", "viewUp": "Superior" },
+      "config": {}
+    },
+    {
+      "id": "Sagittal",
+      "type": "2D",
+      "props": { "viewDirection": "Right", "viewUp": "Superior" },
+      "config": {}
+    },
+    {
+      "id": "Axial",
+      "type": "2D",
+      "props": { "viewDirection": "Superior", "viewUp": "Anterior" },
+      "config": {}
+    },
+    {
+      "id": "ObliqueCoronal",
+      "type": "Oblique",
+      "props": { "viewDirection": "Posterior", "viewUp": "Superior" },
+      "config": {}
+    },
+    {
+      "id": "ObliqueSagittal",
+      "type": "Oblique",
+      "props": { "viewDirection": "Right", "viewUp": "Superior" },
+      "config": {}
+    },
+    {
+      "id": "ObliqueAxial",
+      "type": "Oblique",
+      "props": { "viewDirection": "Superior", "viewUp": "Anterior" },
+      "config": {}
+    },
+    {
+      "id": "3D",
+      "type": "3D",
+      "props": { "viewDirection": "Posterior", "viewUp": "Superior" },
+      "config": {}
+    },
+    {
+      "id": "Oblique3D",
+      "type": "Oblique3D",
+      "props": { "viewDirection": "Posterior", "viewUp": "Superior" },
+      "config": {}
+    }
+  ],
+  "parentToLayers": [],
+  "primarySelection": "1.3.6.1.4.1.14519.5.2.1.7311.5101.206828891270520544417996275680.5tse2d1254.538438420111018.1D000000SN0D000000S0D000000S0D000000S0D970296SN0D241922"
+}
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index d37b4be58..f740e0f2f 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -71,6 +71,7 @@ class VolViewPage extends Page {
   async getNotificationsCount() {
     const badge = await this.notifications.$('span[aria-label="Badge"]');
     const innerText = await badge.getText();
+    if (innerText === '') return 0;
     return parseInt(innerText, 10);
   }
 
diff --git a/tests/specs/state-manifest.e2e.ts b/tests/specs/state-manifest.e2e.ts
new file mode 100644
index 000000000..9242018ef
--- /dev/null
+++ b/tests/specs/state-manifest.e2e.ts
@@ -0,0 +1,35 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { cleanuptotal } from 'wdio-cleanuptotal-service';
+import JSZip from 'jszip';
+import { FIXTURES, TEMP_DIR } from '../../wdio.shared.conf';
+import { volViewPage } from '../pageobjects/volview.page';
+// import toolsProstateJSON from '/fixtures/toolsProstate.volview.json';
+
+describe('State file manifest.json code', () => {
+  it('has no errors loading version 3.0.0 manifest.json file ', async () => {
+    // write json to zip file in temp dir
+    const fileName = 'asdf.zip';
+    const filePath = path.join(TEMP_DIR, fileName);
+
+    const manifest = fs.readFileSync(
+      path.join(FIXTURES, 'toolsProstate.volview.json')
+    );
+
+    const zip = new JSZip();
+    zip.file('manifest.json', manifest);
+    const data = await zip.generateAsync({ type: 'nodebuffer' });
+
+    await fs.promises.writeFile(filePath, data);
+    cleanuptotal.addCleanup(async () => {
+      fs.unlinkSync(filePath);
+    });
+
+    const urlParams = `?urls=[tmp/${fileName}]`;
+    await volViewPage.open(urlParams);
+    await volViewPage.waitForViews();
+
+    const notifications = await volViewPage.getNotificationsCount();
+    expect(notifications).toEqual(0);
+  });
+});
diff --git a/wdio.shared.conf.ts b/wdio.shared.conf.ts
index c7b8389fb..aa9e06b52 100644
--- a/wdio.shared.conf.ts
+++ b/wdio.shared.conf.ts
@@ -13,6 +13,8 @@ const ROOT = projectRoot();
 // TEMP_DIR is also downloads directory
 const TMP = '.tmp/';
 export const TEMP_DIR = path.resolve(ROOT, TMP);
+const FIXTURES_DIR = 'tests/fixtures/';
+export const FIXTURES = path.resolve(ROOT, FIXTURES_DIR);
 
 export const config: Options.Testrunner = {
   baseUrl: `http://localhost:${TEST_PORT}`,

From b94b14276786ea8a59ec8cad71636ec955720dc2 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 27 Nov 2023 15:52:18 -0500
Subject: [PATCH 005/113] fix(restoreStateFile): support 2.1.0 version of state
 file

Fixes #521
---
 src/io/import/processors/restoreStateFile.ts  | 125 +++++++++++++++++-
 ...json => tools-prostate.3-0-0.volview.json} |   0
 tests/specs/remote-manifest.e2e.ts            |  14 +-
 tests/specs/state-manifest.e2e.ts             |  62 ++++++---
 tests/specs/utils.ts                          |  15 +++
 wdio.shared.conf.ts                           |   2 +-
 6 files changed, 184 insertions(+), 34 deletions(-)
 rename tests/fixtures/{toolsProstate.volview.json => tools-prostate.3-0-0.volview.json} (100%)
 create mode 100644 tests/specs/utils.ts

diff --git a/src/io/import/processors/restoreStateFile.ts b/src/io/import/processors/restoreStateFile.ts
index 840b3120c..f7f12c287 100644
--- a/src/io/import/processors/restoreStateFile.ts
+++ b/src/io/import/processors/restoreStateFile.ts
@@ -26,7 +26,10 @@ import {
   makeImageSelection,
   useDatasetStore,
 } from '@/src/store/datasets';
-import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import {
+  makeDefaultSegmentGroupName,
+  useSegmentGroupStore,
+} from '@/src/store/segmentGroups';
 import { useToolStore } from '@/src/store/tools';
 import { useLayersStore } from '@/src/store/datasets-layers';
 import { extractFilesFromZip } from '@/src/io/zip';
@@ -34,6 +37,120 @@ import downloadUrl from '@/src/io/import/processors/downloadUrl';
 import updateFileMimeType from '@/src/io/import/processors/updateFileMimeType';
 import extractArchiveTarget from '@/src/io/import/processors/extractArchiveTarget';
 
+const LABELMAP_PALETTE_2_1_0 = {
+  '0': {
+    value: 0,
+    name: 'Segment 0',
+    color: [0, 0, 0, 0],
+  },
+  '1': {
+    value: 1,
+    name: 'Segment 1',
+    color: [153, 153, 0, 255],
+  },
+  '2': {
+    value: 2,
+    name: 'Segment 2',
+    color: [76, 76, 0, 255],
+  },
+  '3': {
+    value: 3,
+    name: 'Segment 3',
+    color: [255, 255, 0, 255],
+  },
+  '4': {
+    value: 4,
+    name: 'Segment 4',
+    color: [0, 76, 0, 255],
+  },
+  '5': {
+    value: 5,
+    name: 'Segment 5',
+    color: [0, 153, 0, 255],
+  },
+  '6': {
+    value: 6,
+    name: 'Segment 6',
+    color: [0, 255, 0, 255],
+  },
+  '7': {
+    value: 7,
+    name: 'Segment 7',
+    color: [76, 0, 0, 255],
+  },
+  '8': {
+    value: 8,
+    name: 'Segment 8',
+    color: [153, 0, 0, 255],
+  },
+  '9': {
+    value: 9,
+    name: 'Segment 9',
+    color: [255, 0, 0, 255],
+  },
+  '10': {
+    value: 10,
+    name: 'Segment 10',
+    color: [0, 76, 76, 255],
+  },
+  '11': {
+    value: 11,
+    name: 'Segment 11',
+    color: [0, 153, 153, 255],
+  },
+  '12': {
+    value: 12,
+    name: 'Segment 12',
+    color: [0, 255, 255, 255],
+  },
+  '13': {
+    value: 13,
+    name: 'Segment 13',
+    color: [0, 0, 76, 255],
+  },
+  '14': {
+    value: 14,
+    name: 'Segment 14',
+    color: [0, 0, 153, 255],
+  },
+};
+
+const OLD_MANIFEST_VERSIONS = ['2.1.0', '1.1.0', '1.0.0', '0.5.0'];
+
+const migrateManifest = (manifestString: string) => {
+  const inputManifest = JSON.parse(manifestString);
+
+  if (
+    OLD_MANIFEST_VERSIONS.some(
+      (oldVersion) => oldVersion === inputManifest.version
+    )
+  ) {
+    inputManifest.tools.paint.activeSegmentGroupID =
+      inputManifest.tools.paint.activeLabelmapID;
+    delete inputManifest.tools.paint.activeLabelmapID;
+
+    const order = Object.keys(LABELMAP_PALETTE_2_1_0).map((key) => Number(key));
+    inputManifest.labelMaps = inputManifest.labelMaps.map(
+      (labelMap: any, index: number) => ({
+        id: labelMap.id,
+        path: labelMap.path,
+        metadata: {
+          parentImage: labelMap.parent,
+          name: makeDefaultSegmentGroupName('My Image', index),
+          segments: {
+            order,
+            byValue: LABELMAP_PALETTE_2_1_0,
+          },
+        },
+      })
+    );
+
+    inputManifest.version = '3.0.0';
+  }
+
+  return inputManifest;
+};
+
 const resolveUriSource: ImportHandler = async (dataSource, { extra, done }) => {
   const { uriSrc } = dataSource;
 
@@ -234,9 +351,9 @@ const restoreStateFile: ImportHandler = async (
       throw new Error('State file does not have exactly 1 manifest');
     }
 
-    const manifest = ManifestSchema.parse(
-      JSON.parse(await manifests[0].file.text())
-    );
+    const manifestString = await manifests[0].file.text();
+    const migrated = migrateManifest(manifestString);
+    const manifest = ManifestSchema.parse(migrated);
 
     // We restore the view first, so that the appropriate watchers are triggered
     // in the views as the data is loaded
diff --git a/tests/fixtures/toolsProstate.volview.json b/tests/fixtures/tools-prostate.3-0-0.volview.json
similarity index 100%
rename from tests/fixtures/toolsProstate.volview.json
rename to tests/fixtures/tools-prostate.3-0-0.volview.json
diff --git a/tests/specs/remote-manifest.e2e.ts b/tests/specs/remote-manifest.e2e.ts
index c167cec0f..e76f282ee 100644
--- a/tests/specs/remote-manifest.e2e.ts
+++ b/tests/specs/remote-manifest.e2e.ts
@@ -3,6 +3,7 @@ import * as fs from 'fs';
 import { cleanuptotal } from 'wdio-cleanuptotal-service';
 import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
+import { downloadFile } from './utils';
 
 async function writeManifestToFile(manifest: any, fileName: string) {
   const filePath = path.join(TEMP_DIR, fileName);
@@ -32,15 +33,10 @@ describe('VolView loading of remoteManifest.json', () => {
 
   it('should load relative URI with no name property', async () => {
     const dicom = '1-001.dcm';
-    const dicomPath = path.join(TEMP_DIR, dicom);
-    if (!fs.existsSync(dicomPath)) {
-      const response = await fetch(
-        'https://data.kitware.com/api/v1/file/655d42a694ef39bf0a4a8bb3/download'
-      );
-      const data = await response.arrayBuffer();
-      const buffer = Buffer.from(data);
-      fs.writeFileSync(dicomPath, buffer);
-    }
+    await downloadFile(
+      'https://data.kitware.com/api/v1/file/655d42a694ef39bf0a4a8bb3/download',
+      dicom
+    );
 
     const manifest = {
       resources: [{ url: `/tmp/${dicom}` }],
diff --git a/tests/specs/state-manifest.e2e.ts b/tests/specs/state-manifest.e2e.ts
index 9242018ef..da6e19825 100644
--- a/tests/specs/state-manifest.e2e.ts
+++ b/tests/specs/state-manifest.e2e.ts
@@ -4,32 +4,54 @@ import { cleanuptotal } from 'wdio-cleanuptotal-service';
 import JSZip from 'jszip';
 import { FIXTURES, TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
-// import toolsProstateJSON from '/fixtures/toolsProstate.volview.json';
+import { downloadFile } from './utils';
+
+async function writeManifestToZip(manifestPath: string, fileName: string) {
+  const filePath = path.join(TEMP_DIR, fileName);
+  const manifest = fs.readFileSync(manifestPath);
+
+  const zip = new JSZip();
+  zip.file('manifest.json', manifest);
+  const data = await zip.generateAsync({ type: 'nodebuffer' });
+
+  await fs.promises.writeFile(filePath, data);
+  cleanuptotal.addCleanup(async () => {
+    fs.unlinkSync(filePath);
+  });
+
+  return filePath;
+}
+
+async function openVolViewPage(fileName: string) {
+  const urlParams = `?urls=[tmp/${fileName}]`;
+  await volViewPage.open(urlParams);
+  await volViewPage.waitForViews();
+
+  const notifications = await volViewPage.getNotificationsCount();
+  expect(notifications).toEqual(0);
+}
 
 describe('State file manifest.json code', () => {
   it('has no errors loading version 3.0.0 manifest.json file ', async () => {
-    // write json to zip file in temp dir
-    const fileName = 'asdf.zip';
-    const filePath = path.join(TEMP_DIR, fileName);
-
-    const manifest = fs.readFileSync(
-      path.join(FIXTURES, 'toolsProstate.volview.json')
+    const manifestPath = path.join(
+      FIXTURES,
+      'tools-prostate.3-0-0.volview.json'
     );
+    const fileName = 'temp-session.volview.zip';
+    await writeManifestToZip(manifestPath, fileName);
+    await openVolViewPage(fileName);
+  });
 
-    const zip = new JSZip();
-    zip.file('manifest.json', manifest);
-    const data = await zip.generateAsync({ type: 'nodebuffer' });
-
-    await fs.promises.writeFile(filePath, data);
-    cleanuptotal.addCleanup(async () => {
-      fs.unlinkSync(filePath);
-    });
+  // Dev test
+  // http://localhost:8080/?&urls=[http://localhost:9999/session.volview-2-1-0-labelmap-tools.zip]
+  it('has no errors loading version 2.1.0 manifest.json file ', async () => {
+    const FILE_NAME = 'session.volview-2-1-0-labelmap-tools.zip';
 
-    const urlParams = `?urls=[tmp/${fileName}]`;
-    await volViewPage.open(urlParams);
-    await volViewPage.waitForViews();
+    await downloadFile(
+      'https://data.kitware.com/api/v1/file/6566acb6c5a2b36857ad1786/download',
+      FILE_NAME
+    );
 
-    const notifications = await volViewPage.getNotificationsCount();
-    expect(notifications).toEqual(0);
+    await openVolViewPage(FILE_NAME);
   });
 });
diff --git a/tests/specs/utils.ts b/tests/specs/utils.ts
new file mode 100644
index 000000000..f48424353
--- /dev/null
+++ b/tests/specs/utils.ts
@@ -0,0 +1,15 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { TEMP_DIR } from '../../wdio.shared.conf';
+
+// File is not automatically deleted
+export const downloadFile = async (url: string, fileName: string) => {
+  const savePath = path.join(TEMP_DIR, fileName);
+  if (!fs.existsSync(savePath)) {
+    const response = await fetch(url);
+    const data = await response.arrayBuffer();
+    const buffer = Buffer.from(data);
+    fs.writeFileSync(savePath, buffer);
+  }
+  return savePath;
+};
diff --git a/wdio.shared.conf.ts b/wdio.shared.conf.ts
index aa9e06b52..376bf91b3 100644
--- a/wdio.shared.conf.ts
+++ b/wdio.shared.conf.ts
@@ -10,8 +10,8 @@ export const TEST_PORT = 4567;
 export const DOWNLOAD_TIMEOUT = Number(process.env.DOWNLOAD_TIMEOUT ?? 5000);
 
 const ROOT = projectRoot();
-// TEMP_DIR is also downloads directory
 const TMP = '.tmp/';
+// TEMP_DIR is also browser downloads directory
 export const TEMP_DIR = path.resolve(ROOT, TMP);
 const FIXTURES_DIR = 'tests/fixtures/';
 export const FIXTURES = path.resolve(ROOT, FIXTURES_DIR);

From f5ae4e9a8343932a9c3041584043a49c722d6dbe Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 29 Nov 2023 16:16:08 -0500
Subject: [PATCH 006/113] refactor(restoreStateFile): pipe manifest migration
 funcs

---
 src/io/import/processors/restoreStateFile.ts | 79 +++++++++++---------
 src/utils/index.ts                           | 37 +++++++++
 2 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/src/io/import/processors/restoreStateFile.ts b/src/io/import/processors/restoreStateFile.ts
index f7f12c287..093540b5c 100644
--- a/src/io/import/processors/restoreStateFile.ts
+++ b/src/io/import/processors/restoreStateFile.ts
@@ -14,7 +14,7 @@ import {
   fileToDataSource,
 } from '@/src/io/import/dataSource';
 import { MANIFEST, isStateFile } from '@/src/io/state-file';
-import { ensureError, partition } from '@/src/utils';
+import { ensureError, partition, pipe } from '@/src/utils';
 import Pipeline, { PipelineContext } from '@/src/core/pipeline';
 import { Awaitable } from '@vueuse/core';
 import doneWithDataSource from '@/src/io/import/processors/doneWithDataSource';
@@ -38,11 +38,6 @@ import updateFileMimeType from '@/src/io/import/processors/updateFileMimeType';
 import extractArchiveTarget from '@/src/io/import/processors/extractArchiveTarget';
 
 const LABELMAP_PALETTE_2_1_0 = {
-  '0': {
-    value: 0,
-    name: 'Segment 0',
-    color: [0, 0, 0, 0],
-  },
   '1': {
     value: 1,
     name: 'Segment 1',
@@ -115,40 +110,54 @@ const LABELMAP_PALETTE_2_1_0 = {
   },
 };
 
-const OLD_MANIFEST_VERSIONS = ['2.1.0', '1.1.0', '1.0.0', '0.5.0'];
+const migrateOrPass =
+  (versions: Array<string>, migrationFunc: (manifest: any) => any) =>
+  (inputManifest: any) => {
+    if (versions.includes(inputManifest.version)) {
+      return migrationFunc(inputManifest);
+    }
+    return inputManifest;
+  };
 
-const migrateManifest = (manifestString: string) => {
-  const inputManifest = JSON.parse(manifestString);
+const migrateBefore210 = (inputManifest: any) => {
+  const manifest = JSON.parse(JSON.stringify(inputManifest));
+  manifest.version = '2.1.0';
+  return manifest;
+};
 
-  if (
-    OLD_MANIFEST_VERSIONS.some(
-      (oldVersion) => oldVersion === inputManifest.version
-    )
-  ) {
-    inputManifest.tools.paint.activeSegmentGroupID =
-      inputManifest.tools.paint.activeLabelmapID;
-    delete inputManifest.tools.paint.activeLabelmapID;
-
-    const order = Object.keys(LABELMAP_PALETTE_2_1_0).map((key) => Number(key));
-    inputManifest.labelMaps = inputManifest.labelMaps.map(
-      (labelMap: any, index: number) => ({
-        id: labelMap.id,
-        path: labelMap.path,
-        metadata: {
-          parentImage: labelMap.parent,
-          name: makeDefaultSegmentGroupName('My Image', index),
-          segments: {
-            order,
-            byValue: LABELMAP_PALETTE_2_1_0,
-          },
+const migrate210To300 = (inputManifest: any) => {
+  const manifest = JSON.parse(JSON.stringify(inputManifest));
+  manifest.tools.paint.activeSegmentGroupID =
+    inputManifest.tools.paint.activeLabelmapID;
+  delete manifest.tools.paint.activeLabelmapID;
+
+  const order = Object.keys(LABELMAP_PALETTE_2_1_0).map((key) => Number(key));
+  manifest.labelMaps = inputManifest.labelMaps.map(
+    (labelMap: any, index: number) => ({
+      id: labelMap.id,
+      path: labelMap.path,
+      metadata: {
+        parentImage: labelMap.parent,
+        name: makeDefaultSegmentGroupName('My Image', index),
+        segments: {
+          order,
+          byValue: LABELMAP_PALETTE_2_1_0,
         },
-      })
-    );
+      },
+    })
+  );
 
-    inputManifest.version = '3.0.0';
-  }
+  manifest.version = '3.0.0';
+  return manifest;
+};
 
-  return inputManifest;
+const migrateManifest = (manifestString: string) => {
+  const inputManifest = JSON.parse(manifestString);
+  return pipe(
+    inputManifest,
+    migrateOrPass(['1.1.0', '1.0.0', '0.5.0'], migrateBefore210),
+    migrateOrPass(['2.1.0'], migrate210To300)
+  );
 };
 
 const resolveUriSource: ImportHandler = async (dataSource, { extra, done }) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 28a83ac51..b4722bde0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -326,3 +326,40 @@ export function normalizeForStore<T, K extends keyof T>(objects: T[], key: K) {
 
   return { order, byKey };
 }
+
+// Pipe code from
+// https://dev.to/ecyrbe/how-to-use-advanced-typescript-to-define-a-pipe-function-381h
+type AnyFunc = (...arg: any) => any;
+
+type LastFnReturnType<F extends Array<AnyFunc>, Else = never> = F extends [
+  ...any[],
+  (...arg: any) => infer R
+]
+  ? R
+  : Else;
+
+type PipeArgs<F extends AnyFunc[], Acc extends AnyFunc[] = []> = F extends [
+  (...args: infer A) => infer B
+]
+  ? [...Acc, (...args: A) => B]
+  : F extends [(...args: infer A) => any, ...infer Tail]
+  ? Tail extends [(arg: infer B) => any, ...any[]]
+    ? PipeArgs<Tail, [...Acc, (...args: A) => B]>
+    : Acc
+  : Acc;
+
+// Example:
+// const valid = pipe(
+//   "1",
+//   (a: string) => Number(a),
+//   (c: number) => c + 1,
+//   (d: number) => `${d}`,
+//   (e: string) => Number(e)
+// );
+export function pipe<FirstFn extends AnyFunc, F extends AnyFunc[]>(
+  arg: Parameters<FirstFn>[0],
+  firstFn: FirstFn,
+  ...fns: PipeArgs<F> extends F ? F : PipeArgs<F>
+): LastFnReturnType<F, ReturnType<FirstFn>> {
+  return (fns as AnyFunc[]).reduce((acc, fn) => fn(acc), firstFn(arg));
+}

From f58d5f20a570392398e99a5778dcf35028d77d4d Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 30 Nov 2023 13:43:49 -0500
Subject: [PATCH 007/113] refactor(functional): move pipe function, rename old
 pipe to flow

---
 src/core/remote/client.ts                    | 11 ++---
 src/io/import/processors/restoreStateFile.ts |  3 +-
 src/utils/functional.ts                      | 42 ++++++++++++++++++++
 src/utils/index.ts                           | 37 -----------------
 src/utils/pipe.ts                            |  5 ---
 5 files changed, 47 insertions(+), 51 deletions(-)
 create mode 100644 src/utils/functional.ts
 delete mode 100644 src/utils/pipe.ts

diff --git a/src/core/remote/client.ts b/src/core/remote/client.ts
index f13babdae..2ee649751 100644
--- a/src/core/remote/client.ts
+++ b/src/core/remote/client.ts
@@ -7,7 +7,7 @@ import {
 import { Maybe } from '@/src/types';
 import { Deferred, defer } from '@/src/utils';
 import { debug } from '@/src/utils/loggers';
-import pipe from '@/src/utils/pipe';
+import { flow } from '@/src/utils/functional';
 import { nanoid } from 'nanoid';
 import { Socket, io } from 'socket.io-client';
 import { z } from 'zod';
@@ -160,13 +160,8 @@ export default class RpcClient {
     this.socket.on(STREAM_RESULT_EVENT, this.onStreamResultEvent);
   }
 
-  protected serialize = (obj: any) => {
-    return pipe(...this.serializers)(obj);
-  };
-
-  protected deserialize = (obj: any) => {
-    return pipe(...this.deserializers)(obj);
-  };
+  protected serialize = flow(...this.serializers);
+  protected deserialize = flow(...this.deserializers);
 
   async connect(uri: string) {
     await this.disconnect();
diff --git a/src/io/import/processors/restoreStateFile.ts b/src/io/import/processors/restoreStateFile.ts
index 093540b5c..ad6157c1c 100644
--- a/src/io/import/processors/restoreStateFile.ts
+++ b/src/io/import/processors/restoreStateFile.ts
@@ -14,7 +14,8 @@ import {
   fileToDataSource,
 } from '@/src/io/import/dataSource';
 import { MANIFEST, isStateFile } from '@/src/io/state-file';
-import { ensureError, partition, pipe } from '@/src/utils';
+import { ensureError, partition } from '@/src/utils';
+import { pipe } from '@/src/utils/functional';
 import Pipeline, { PipelineContext } from '@/src/core/pipeline';
 import { Awaitable } from '@vueuse/core';
 import doneWithDataSource from '@/src/io/import/processors/doneWithDataSource';
diff --git a/src/utils/functional.ts b/src/utils/functional.ts
new file mode 100644
index 000000000..3f27df22b
--- /dev/null
+++ b/src/utils/functional.ts
@@ -0,0 +1,42 @@
+type FlowFunction<T> = (o: T) => T;
+
+export function flow<T>(...fns: Array<FlowFunction<T>>) {
+  return (input: T) => fns.reduce((result, fn) => fn(result), input);
+}
+
+// Pipe code from
+// https://dev.to/ecyrbe/how-to-use-advanced-typescript-to-define-a-pipe-function-381h
+// Changed second parameter to rest/spread argument.
+type AnyFunc = (...arg: any) => any;
+
+type LastFnReturnType<F extends Array<AnyFunc>, Else = never> = F extends [
+  ...any[],
+  (...arg: any) => infer R
+]
+  ? R
+  : Else;
+
+type PipeArgs<F extends AnyFunc[], Acc extends AnyFunc[] = []> = F extends [
+  (...args: infer A) => infer B
+]
+  ? [...Acc, (...args: A) => B]
+  : F extends [(...args: infer A) => any, ...infer Tail]
+  ? Tail extends [(arg: infer B) => any, ...any[]]
+    ? PipeArgs<Tail, [...Acc, (...args: A) => B]>
+    : Acc
+  : Acc;
+
+// Example:
+// const myNumber = pipe(
+//   "1",
+//   (a: string) => Number(a),
+//   (c: number) => c + 1,
+//   (d: number) => `${d}`,
+//   (e: string) => Number(e)
+// );
+export function pipe<F extends AnyFunc[]>(
+  arg: Parameters<F[0]>[0],
+  ...fns: PipeArgs<F> extends F ? F : PipeArgs<F>
+): LastFnReturnType<F, ReturnType<F[0]>> {
+  return (fns.slice(1) as AnyFunc[]).reduce((acc, fn) => fn(acc), fns[0](arg));
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b4722bde0..28a83ac51 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -326,40 +326,3 @@ export function normalizeForStore<T, K extends keyof T>(objects: T[], key: K) {
 
   return { order, byKey };
 }
-
-// Pipe code from
-// https://dev.to/ecyrbe/how-to-use-advanced-typescript-to-define-a-pipe-function-381h
-type AnyFunc = (...arg: any) => any;
-
-type LastFnReturnType<F extends Array<AnyFunc>, Else = never> = F extends [
-  ...any[],
-  (...arg: any) => infer R
-]
-  ? R
-  : Else;
-
-type PipeArgs<F extends AnyFunc[], Acc extends AnyFunc[] = []> = F extends [
-  (...args: infer A) => infer B
-]
-  ? [...Acc, (...args: A) => B]
-  : F extends [(...args: infer A) => any, ...infer Tail]
-  ? Tail extends [(arg: infer B) => any, ...any[]]
-    ? PipeArgs<Tail, [...Acc, (...args: A) => B]>
-    : Acc
-  : Acc;
-
-// Example:
-// const valid = pipe(
-//   "1",
-//   (a: string) => Number(a),
-//   (c: number) => c + 1,
-//   (d: number) => `${d}`,
-//   (e: string) => Number(e)
-// );
-export function pipe<FirstFn extends AnyFunc, F extends AnyFunc[]>(
-  arg: Parameters<FirstFn>[0],
-  firstFn: FirstFn,
-  ...fns: PipeArgs<F> extends F ? F : PipeArgs<F>
-): LastFnReturnType<F, ReturnType<FirstFn>> {
-  return (fns as AnyFunc[]).reduce((acc, fn) => fn(acc), firstFn(arg));
-}
diff --git a/src/utils/pipe.ts b/src/utils/pipe.ts
deleted file mode 100644
index a41065412..000000000
--- a/src/utils/pipe.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type PipeFunction<T> = (o: T) => T;
-
-export default function pipe<T>(...fns: Array<PipeFunction<T>>) {
-  return (input: T) => fns.reduce((result, fn) => fn(result), input);
-}

From 37e762222fd89a4bef83e4772081a136c3cf0470 Mon Sep 17 00:00:00 2001
From: Shreeraj Jadhav <shreerajjadhav@gmail.com>
Date: Thu, 30 Nov 2023 15:46:47 -0500
Subject: [PATCH 008/113] feat(SegmentGroup): convert a loaded image to
 labelmap/segmentGroup

---
 src/components/ImageDataBrowser.vue     | 33 ++++++++++++-
 src/components/SegmentGroupControls.vue | 63 ++++++++++++++++++++++++-
 2 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/src/components/ImageDataBrowser.vue b/src/components/ImageDataBrowser.vue
index 48b2c82d8..cbe5fe0de 100644
--- a/src/components/ImageDataBrowser.vue
+++ b/src/components/ImageDataBrowser.vue
@@ -4,6 +4,7 @@ import ItemGroup from '@/src/components/ItemGroup.vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import ImageListCard from '@/src/components/ImageListCard.vue';
 import { createVTKImageThumbnailer } from '@/src/core/thumbnailers/vtk-image';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { useImageStore } from '../store/datasets-images';
 import { useDICOMStore } from '../store/datasets-dicom';
 import {
@@ -30,6 +31,7 @@ export default defineComponent({
     const dicomStore = useDICOMStore();
     const dataStore = useDatasetStore();
     const layersStore = useLayersStore();
+    const segmentGroupStore = useSegmentGroupStore();
 
     const primarySelection = computed(() => dataStore.primarySelection);
 
@@ -62,7 +64,8 @@ export default defineComponent({
         const isLayer = layerImageIDs.includes(id);
         const layerLoaded = loadedLayerImageIDs.includes(id);
         const layerLoading = isLayer && !layerLoaded;
-        const layerable = id !== selectedImageID && primarySelection.value;
+        const layerable =
+          id !== selectedImageID && primarySelection.value != null;
         return {
           id,
           cacheKey: imageCacheKey(id),
@@ -132,6 +135,15 @@ export default defineComponent({
       selected.value = [];
     }
 
+    function convertToLabelMap(key: string) {
+      if (primarySelection.value) {
+        segmentGroupStore.convertImageToLabelmap(
+          { type: 'image', dataID: key },
+          primarySelection.value
+        );
+      }
+    }
+
     function removeData(id: string) {
       imageStore.deleteData(id);
     }
@@ -143,6 +155,7 @@ export default defineComponent({
       toggleSelectAll,
       removeSelection,
       removeData,
+      convertToLabelMap,
       images,
       thumbnails,
       primarySelection,
@@ -244,6 +257,24 @@ export default defineComponent({
                       <span v-else>Add as layer</span>
                     </template>
                   </v-list-item>
+                  <v-list-item
+                    @click="
+                      image.layerable ? convertToLabelMap(image.id) : null
+                    "
+                  >
+                    <v-icon v-if="!image.layerable" class="mr-1"
+                      >mdi-alert</v-icon
+                    >
+                    Convert to Segment Group
+                    <v-tooltip
+                      activator="parent"
+                      location="end"
+                      max-width="200px"
+                      :disabled="image.layerable"
+                    >
+                      Must load a background image before converting
+                    </v-tooltip>
+                  </v-list-item>
                   <v-list-item @click="removeData(image.id)">
                     Delete
                   </v-list-item>
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index cfeebec56..56e77597b 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import SegmentList from '@/src/components/SegmentList.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { selectionEquals, useDatasetStore } from '@/src/store/datasets';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
+import { useImageStore } from '@/src/store/datasets-images';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { Maybe } from '@/src/types';
@@ -10,6 +13,9 @@ const UNNAMED_GROUP_NAME = 'Unnamed Segment Group';
 
 const segmentGroupStore = useSegmentGroupStore();
 const { currentImageID } = useCurrentImage();
+const imageStore = useImageStore();
+const dicomStore = useDICOMStore();
+const dataStore = useDatasetStore();
 
 const currentSegmentGroups = computed(() => {
   if (!currentImageID.value) return [];
@@ -110,14 +116,40 @@ function createSegmentGroup() {
 
   startEditing(id);
 }
+
+// Filter and collect all acceptable images, excluding
+// the current background image, that can be converted into
+// a SegmentGroup (labelmap) for the current background image.
+const nonDICOMImages = computed(() => {
+  const primarySelection = dataStore.primarySelection;
+  const ids = imageStore.idList.filter(
+    (id) =>
+      !(id in dicomStore.imageIDToVolumeKey) &&
+      primarySelection &&
+      !selectionEquals({ type: 'image', dataID: id }, primarySelection)
+  );
+  return ids.map((id) => ({ id, name: imageStore.metadata[id].name }));
+});
+
+function createSegmentGroupFromImage(selectedImageID: string) {
+  if (!selectedImageID) {
+    throw new Error('Cannot create a labelmap without a base image');
+  }
+  const primarySelection = dataStore.primarySelection;
+  if (primarySelection) {
+    segmentGroupStore.convertImageToLabelmap(
+      { type: 'image', dataID: selectedImageID },
+      primarySelection
+    );
+  }
+}
 </script>
 
 <template>
   <div class="my-2" v-if="currentImageID">
     <div
-      class="text-grey text-subtitle-2 d-flex flex-row align-center justify-space-between mb-2"
+      class="text-grey text-subtitle-2 d-flex align-center justify-space-evenly mb-2"
     >
-      <div>Segment Groups</div>
       <v-btn
         variant="tonal"
         color="secondary"
@@ -126,6 +158,33 @@ function createSegmentGroup() {
       >
         <v-icon class="mr-1">mdi-plus</v-icon> New Group
       </v-btn>
+      <v-menu location="bottom">
+        <template v-slot:activator="{ props }">
+          <v-btn
+            variant="tonal"
+            color="secondary"
+            density="compact"
+            v-bind="props"
+          >
+            <v-icon class="mr-1">mdi-chevron-down</v-icon>From Image
+          </v-btn>
+        </template>
+        <v-list v-if="nonDICOMImages.length !== 0">
+          <v-list-item
+            v-for="(item, index) in nonDICOMImages"
+            :key="index"
+            @click="createSegmentGroupFromImage(item.id)"
+          >
+            {{ item.name }}
+            <v-tooltip activator="parent" location="end" max-width="200px">
+              Convert to segment group
+            </v-tooltip>
+          </v-list-item>
+        </v-list>
+        <v-list v-else>
+          <v-list-item class="font-italic" title="No eligible images found" />
+        </v-list>
+      </v-menu>
     </div>
     <v-divider />
     <v-radio-group

From 357aad7fc89c2da2004258b7f373844fb629001b Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 30 Nov 2023 21:44:50 -0500
Subject: [PATCH 009/113] feat(segmentGroups): add image format config on
 serialization

---
 package-lock.json                             | 17 ++++++++
 package.json                                  |  3 +-
 src/io/import/common.ts                       |  2 +-
 .../import/{configSchema.ts => configJson.ts} | 16 ++++++++
 src/io/import/importDataSources.ts            |  2 +-
 src/io/import/processors/handleConfig.ts      |  2 +-
 src/shims-vtk.d.ts                            |  6 ---
 src/store/segmentGroups.ts                    | 40 ++++++++++++++++---
 8 files changed, 72 insertions(+), 16 deletions(-)
 rename src/io/import/{configSchema.ts => configJson.ts} (89%)

diff --git a/package-lock.json b/package-lock.json
index 4db0f8b6f..3ebe00e6d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@aws-sdk/client-s3": "^3.435.0",
         "@itk-wasm/dicom": "^5.0.0",
+        "@itk-wasm/image-io": "^0.5.0",
         "@kitware/vtk.js": "^28.13.0",
         "@netlify/edge-functions": "^2.0.0",
         "@sentry/vue": "^7.54.0",
@@ -2713,6 +2714,14 @@
         "itk-wasm": "^1.0.0-b.154"
       }
     },
+    "node_modules/@itk-wasm/image-io": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@itk-wasm/image-io/-/image-io-0.5.0.tgz",
+      "integrity": "sha512-h7SF9bb+DDLZsH+tpBFZyxCM7Dqf0bbvayhS8/bn3voyTZQy80bEMnPgmRCzUoGWGyDOygbSgqohqJ6IelvDvA==",
+      "dependencies": {
+        "itk-wasm": "^1.0.0-b.154"
+      }
+    },
     "node_modules/@jest/expect-utils": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.6.3.tgz",
@@ -24511,6 +24520,14 @@
         "itk-wasm": "^1.0.0-b.154"
       }
     },
+    "@itk-wasm/image-io": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@itk-wasm/image-io/-/image-io-0.5.0.tgz",
+      "integrity": "sha512-h7SF9bb+DDLZsH+tpBFZyxCM7Dqf0bbvayhS8/bn3voyTZQy80bEMnPgmRCzUoGWGyDOygbSgqohqJ6IelvDvA==",
+      "requires": {
+        "itk-wasm": "^1.0.0-b.154"
+      }
+    },
     "@jest/expect-utils": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.6.3.tgz",
diff --git a/package.json b/package.json
index 88368e319..6e31d66fc 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.435.0",
     "@itk-wasm/dicom": "^5.0.0",
+    "@itk-wasm/image-io": "^0.5.0",
     "@kitware/vtk.js": "^28.13.0",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
@@ -126,4 +127,4 @@
       "eslint"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/src/io/import/common.ts b/src/io/import/common.ts
index bc34371ea..ab9627d04 100644
--- a/src/io/import/common.ts
+++ b/src/io/import/common.ts
@@ -3,7 +3,7 @@ import { DataSource, FileSource } from '@/src/io/import/dataSource';
 import { Handler } from '@/src/core/pipeline';
 import { ARCHIVE_FILE_TYPES } from '@/src/io/mimeTypes';
 import { Awaitable } from '@vueuse/core';
-import { Config } from '@/src/io/import/configSchema';
+import { Config } from '@/src/io/import/configJson';
 
 interface DataResult {
   dataSource: DataSource;
diff --git a/src/io/import/configSchema.ts b/src/io/import/configJson.ts
similarity index 89%
rename from src/io/import/configSchema.ts
rename to src/io/import/configJson.ts
index 900544463..231da4373 100644
--- a/src/io/import/configSchema.ts
+++ b/src/io/import/configJson.ts
@@ -10,6 +10,7 @@ import { useDataBrowserStore } from '@/src/store/data-browser';
 import { usePolygonStore } from '@/src/store/tools/polygons';
 import { useViewStore } from '@/src/store/views';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 
 const layout = z
   .object({
@@ -54,11 +55,18 @@ const labels = z
   })
   .optional();
 
+const io = z
+  .object({
+    segmentGroupSaveFormat: z.string().optional(),
+  })
+  .optional();
+
 export const config = z.object({
   layout,
   dataBrowser,
   labels,
   shortcuts,
+  io,
 });
 
 export type Config = z.infer<typeof config>;
@@ -107,9 +115,17 @@ const applyShortcuts = (manifest: Config) => {
   };
 };
 
+const applyIo = (manifest: Config) => {
+  if (!manifest.io) return;
+
+  if (manifest.io.segmentGroupSaveFormat)
+    useSegmentGroupStore().saveFormat = manifest.io.segmentGroupSaveFormat;
+};
+
 export const applyConfig = (manifest: Config) => {
   applyLayout(manifest);
   applyLabels(manifest);
   applySampleData(manifest);
   applyShortcuts(manifest);
+  applyIo(manifest);
 };
diff --git a/src/io/import/importDataSources.ts b/src/io/import/importDataSources.ts
index e3ddc7127..656192b6e 100644
--- a/src/io/import/importDataSources.ts
+++ b/src/io/import/importDataSources.ts
@@ -23,7 +23,7 @@ import updateFileMimeType from '@/src/io/import/processors/updateFileMimeType';
 import handleConfig from '@/src/io/import/processors/handleConfig';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
 import { makeDICOMSelection, makeImageSelection } from '@/src/store/datasets';
-import { applyConfig } from '@/src/io/import/configSchema';
+import { applyConfig } from '@/src/io/import/configJson';
 
 /**
  * Tries to turn a thrown object into a meaningful error string.
diff --git a/src/io/import/processors/handleConfig.ts b/src/io/import/processors/handleConfig.ts
index a04f290c0..b093ba236 100644
--- a/src/io/import/processors/handleConfig.ts
+++ b/src/io/import/processors/handleConfig.ts
@@ -1,6 +1,6 @@
 import { ImportHandler } from '@/src/io/import/common';
 import { ensureError } from '@/src/utils';
-import { readConfigFile } from '@/src/io/import/configSchema';
+import { readConfigFile } from '@/src/io/import/configJson';
 
 /**
  * Reads a JSON file with label config and updates stores.
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index 4bb4d5721..f1ee4b343 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -11,12 +11,6 @@ declare module '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator/Pre
   export default any;
 }
 
-declare module '@kitware/vtk.js/Common/DataModel/ITKHelper' {
-  import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-  export function convertVtkToItkImage(image: vtkImageData): Image;
-  export function convertItkToVtkImage(image: Image): vtkImageData;
-}
-
 declare module '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps' {
   export declare const vtkColorMaps: {
     addPreset(preset: any): void;
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index 4cd1b225f..20914dbab 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -1,6 +1,12 @@
 import { computed, reactive, ref, toRaw, watch } from 'vue';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
+import { copyImage } from 'itk-wasm';
+import {
+  readImage as readImageItk,
+  writeImage as writeImageItk,
+} from '@itk-wasm/image-io';
 import { defineStore } from 'pinia';
 import { useImageStore } from '@/src/store/datasets-images';
 import { join, normalize } from '@/src/utils/path';
@@ -27,6 +33,24 @@ import {
   selectionEquals,
 } from './datasets';
 
+const readImage = async (file: File) => {
+  if (file.name.endsWith('.vti'))
+    return (await vtiReader(file)) as vtkImageData;
+
+  const { image } = await readImageItk(null, file);
+  return vtkITKHelper.convertItkToVtkImage(image);
+};
+
+const writeImage = async (format: string, image: vtkImageData) => {
+  if (format === 'vti') {
+    return vtiWriter(image);
+  }
+  // copyImage so writeImage does not detach live data when passing to worker
+  const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
+  const result = await writeImageItk(null, itkImage, `image.${format}`);
+  return result.serializedImage.data;
+};
+
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;
 
@@ -332,6 +356,8 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     );
   }
 
+  const saveFormat = ref('vti');
+
   /**
    * Serializes the store's state.
    */
@@ -348,7 +374,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
         const metadata = metadataByID[id];
         return {
           id,
-          path: `labels/${id}.vti`,
+          path: `labels/${id}.${saveFormat.value}`,
           metadata: {
             ...metadata,
             parentImage: getDataID(metadata.parentImage),
@@ -362,8 +388,9 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     // save labelmap images
     await Promise.all(
       serialized.map(async ({ id, path }) => {
-        const vtiImage = await vtiWriter(dataIndex[id]);
-        zip.file(path, vtiImage);
+        const vtkImage = dataIndex[id];
+        const serializedImage = await writeImage(saveFormat.value, vtkImage);
+        zip.file(path, serializedImage);
       })
     );
   }
@@ -394,9 +421,9 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
           )
           .map((entry) => entry.file);
 
-        const labelmapImage = toLabelMap(
-          (await vtiReader(file)) as vtkImageData
-        );
+        const vtkImage = await readImage(file);
+        const labelmapImage = toLabelMap(vtkImage);
+
         const id = useIdStore().nextId();
         dataIndex[id] = labelmapImage;
         this.$proxies.addData(id, labelmapImage);
@@ -464,6 +491,7 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     metadataByID,
     orderByParent,
     segmentByGroupID,
+    saveFormat,
     addLabelmap,
     newLabelmapFromImage,
     removeGroup,

From 5e2bf3012f2deb90222de14769da3b34b776af10 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 5 Dec 2023 18:40:40 -0500
Subject: [PATCH 010/113] fix(io): remove itk-image-io dependency

---
 package-lock.json                      | 17 -----------------
 package.json                           |  1 -
 src/io/readers.ts                      | 18 +++++-------------
 src/main.js                            |  6 ++++++
 src/store/dicom-web/dicom-web-store.ts |  1 +
 vite.config.ts                         |  4 ++--
 6 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3ebe00e6d..83c713b68 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,6 @@
         "dicomweb-client-typed": "^0.8.6",
         "file-saver": "^2.0.5",
         "gl-matrix": "3.4.3",
-        "itk-image-io": "1.0.0-b.156",
         "itk-wasm": "1.0.0-b.156",
         "jszip": "3.10.0",
         "mitt": "^3.0.0",
@@ -13166,14 +13165,6 @@
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "dev": true
     },
-    "node_modules/itk-image-io": {
-      "version": "1.0.0-b.156",
-      "resolved": "https://registry.npmjs.org/itk-image-io/-/itk-image-io-1.0.0-b.156.tgz",
-      "integrity": "sha512-PxhCRK0QqBKbQy20moj7ecftlXZjvjlEZDY9WjxsKif4jN1z8VYOxQS9Ie5eOdOVQDylbXu3Ejgg+xa4DBf1Rw==",
-      "dependencies": {
-        "itk-wasm": "1.0.0-b.156"
-      }
-    },
     "node_modules/itk-wasm": {
       "version": "1.0.0-b.156",
       "resolved": "https://registry.npmjs.org/itk-wasm/-/itk-wasm-1.0.0-b.156.tgz",
@@ -32536,14 +32527,6 @@
       "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==",
       "dev": true
     },
-    "itk-image-io": {
-      "version": "1.0.0-b.156",
-      "resolved": "https://registry.npmjs.org/itk-image-io/-/itk-image-io-1.0.0-b.156.tgz",
-      "integrity": "sha512-PxhCRK0QqBKbQy20moj7ecftlXZjvjlEZDY9WjxsKif4jN1z8VYOxQS9Ie5eOdOVQDylbXu3Ejgg+xa4DBf1Rw==",
-      "requires": {
-        "itk-wasm": "1.0.0-b.156"
-      }
-    },
     "itk-wasm": {
       "version": "1.0.0-b.156",
       "resolved": "https://registry.npmjs.org/itk-wasm/-/itk-wasm-1.0.0-b.156.tgz",
diff --git a/package.json b/package.json
index 6e31d66fc..4d6ec07b5 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
     "dicomweb-client-typed": "^0.8.6",
     "file-saver": "^2.0.5",
     "gl-matrix": "3.4.3",
-    "itk-image-io": "1.0.0-b.156",
     "itk-wasm": "1.0.0-b.156",
     "jszip": "3.10.0",
     "mitt": "^3.0.0",
diff --git a/src/io/readers.ts b/src/io/readers.ts
index 62ff3425f..14ce9336b 100644
--- a/src/io/readers.ts
+++ b/src/io/readers.ts
@@ -1,8 +1,9 @@
 import vtkITKImageReader from '@kitware/vtk.js/IO/Misc/ITKImageReader';
+import { convertItkToVtkImage } from '@kitware/vtk.js/Common/DataModel/ITKHelper';
 import { readImageArrayBuffer, extensionToImageIO } from 'itk-wasm';
+import { readImage } from '@itk-wasm/image-io';
 import { FileReaderMap } from '.';
 
-import { readFileAsArrayBuffer } from './io';
 import { stlReader, vtiReader, vtpReader } from './vtk/async';
 import { FILE_EXT_TO_MIME } from './mimeTypes';
 
@@ -17,18 +18,9 @@ export const ITK_IMAGE_MIME_TYPES = Array.from(
 vtkITKImageReader.setReadImageArrayBufferFromITK(readImageArrayBuffer);
 
 async function itkReader(file: File) {
-  const fileBuffer = await readFileAsArrayBuffer(file);
-
-  const reader = vtkITKImageReader.newInstance();
-  reader.setFileName(file.name);
-  try {
-    await reader.parseAsArrayBuffer(fileBuffer);
-  } catch (e) {
-    // itkreader doesn't give us a meaningful error
-    throw new Error('Failed to parse file');
-  }
-
-  return reader.getOutputData();
+  const { image, webWorker } = await readImage(null, file);
+  webWorker.terminate();
+  return convertItkToVtkImage(image);
 }
 
 /**
diff --git a/src/main.js b/src/main.js
index 4501beec5..b53260df4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,7 +12,9 @@ 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';
 import App from './components/App.vue';
 import vuetify from './plugins/vuetify';
 import { DICOMIO } from './io/dicom';
@@ -44,6 +46,10 @@ const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
 const dicomIO = new DICOMIO();
 dicomIO.initialize();
 
+// for @itk-wasm/image-io
+setPipelineWorkerUrl(itkConfig.pipelineWorkerUrl);
+setPipelinesBaseUrl(itkConfig.imageIOUrl);
+
 const pinia = createPinia();
 pinia.use(
   CorePiniaProviderPlugin({
diff --git a/src/store/dicom-web/dicom-web-store.ts b/src/store/dicom-web/dicom-web-store.ts
index fe33fc1a5..a51c8bb2b 100644
--- a/src/store/dicom-web/dicom-web-store.ts
+++ b/src/store/dicom-web/dicom-web-store.ts
@@ -203,6 +203,7 @@ export const useDicomWebStore = defineStore('dicom-web', () => {
         state: 'Done',
       };
     } catch (error) {
+      console.error(error);
       const messageStore = useMessageStore();
       messageStore.addError('Failed to load DICOM', error as Error);
       volumes.value[volumeKey] = {
diff --git a/vite.config.ts b/vite.config.ts
index b3d5f6a86..3da1114f7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -151,8 +151,8 @@ export default defineConfig({
         },
         {
           src: resolvePath(
-            resolveNodeModulePath('itk-image-io'),
-            '*{.wasm,.js,.zst}'
+            resolveNodeModulePath('@itk-wasm/image-io'),
+            'dist/pipelines/*{.wasm,.js,.zst}'
           ),
           dest: 'itk/image-io',
         },

From 6ae16e8ff42c0d80259589486da235d92ff28ab7 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 8 Dec 2023 16:18:37 -0500
Subject: [PATCH 011/113] fix(segmentGroups): workaround direction matrix bug
 in writeImage

---
 src/store/segmentGroups.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index 20914dbab..fb9929d98 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -47,6 +47,18 @@ const writeImage = async (format: string, image: vtkImageData) => {
   }
   // copyImage so writeImage does not detach live data when passing to worker
   const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
+
+  // Transpose the direction matrix to fix bug in @itk-wasm/image-io.writeImage
+  // Remove when @itk-wasm/image-io version is above 0.5.0 https://github.com/InsightSoftwareConsortium/itk-wasm/commit/ad9ca85eedc47c9d3444cf36859569c529886bde
+  const oldDirection = [...itkImage.direction];
+  const { dimension } = itkImage.imageType;
+  for (let idx = 0; idx < dimension; ++idx) {
+    for (let idy = 0; idy < dimension; ++idy) {
+      itkImage.direction[idx + idy * dimension] =
+        oldDirection[idy + idx * dimension];
+    }
+  }
+
   const result = await writeImageItk(null, itkImage, `image.${format}`);
   return result.serializedImage.data;
 };

From 12f770aee12e166a08cdbf977f7da30f7af0ffad Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 11 Dec 2023 12:16:51 -0500
Subject: [PATCH 012/113] doc(configuration_file): add separate page for JSON
 config

Add segmentGroupSaveFormat section.
---
 .../content/doc/configuration_file.md         | 141 ++++++++++++++++++
 documentation/content/doc/loading_data.md     |  86 -----------
 documentation/content/doc/state_files.md      |   2 +-
 documentation/tpl/__en__                      |   3 +-
 documentation/tpl/__sidebar__                 |   5 +-
 5 files changed, 147 insertions(+), 90 deletions(-)
 create mode 100644 documentation/content/doc/configuration_file.md

diff --git a/documentation/content/doc/configuration_file.md b/documentation/content/doc/configuration_file.md
new file mode 100644
index 000000000..af0e78a52
--- /dev/null
+++ b/documentation/content/doc/configuration_file.md
@@ -0,0 +1,141 @@
+# Configuration JSON File
+
+By loading a JSON file, you can set VolView's:
+
+- Starting view layout (Axial Only, 3D Primary, etc).
+- Labels for tools
+- Visibility of Sample Data section
+- Keyboard shortcuts
+
+## Starting view layout
+
+The `activeLayout` key has options (Axial Only, 3D Primary, etc.) defined in `config.ts`
+
+```json
+{
+  "layout": {
+    "activeLayout": "Axial Only"
+  }
+}
+```
+
+## Labels for tools
+
+Each tool type (Rectangle, Polygon, etc.) can have tool specific labels. To share labels
+across tools, define the `defaultLabels` key and don't provide labels for a tool that
+should use the default labels.
+
+```json
+{
+  "labels": {
+    "defaultLabels": {
+      "lesion": { "color": "#ff0000" },
+      "tumor": { "color": "green", "strokeWidth": 3 }
+    }
+  }
+}
+```
+
+## Segment Group File Format
+
+The `segmentGroupSaveFormat` key specifies the file extension of the segment group images
+VolView will include in the volview.zip file.
+
+```json
+{
+  "io": {
+    "segmentGroupSaveFormat": "nii"
+  }
+}
+```
+
+These are the supported file formats:
+
+hdf5, iwi.cbor, mha, nii, nii.gz, nrrd, vtk
+
+## Keyboard Shortcuts
+
+Configure the keys to activate tools, change selected labels, and more.
+All [shortcut actions](https://github.com/Kitware/VolView/blob/main/src/constants.ts#L53) are under the `ACTIONS` variable.
+
+To configure a key for an action, add its action name and the key(s) under the `shortcuts` section. For key combinations, use `+` like `Ctrl+f`.
+
+```json
+{
+  "shortcuts": {
+    "polygon": "Ctrl+p",
+    "showKeyboardShortcuts": "t"
+  }
+}
+```
+
+## Visibility of Sample Data section
+
+Simplify the data browser by hiding the Sample Data expandable section.
+
+```json
+{
+  "dataBrowser": {
+    "hideSampleData": false
+  }
+}
+```
+
+## Example JSON:
+
+```json
+{
+  "labels": {
+    "defaultLabels": {
+      "lesion": { "color": "#ff0000" },
+      "tumor": { "color": "green", "strokeWidth": 3 }
+    }
+  },
+  "layout": {
+    "activeLayout": "Axial Only"
+  }
+}
+```
+
+## All options:
+
+```json
+{
+  "labels": {
+    "defaultLabels": {
+      "lesion": { "color": "#ff0000" },
+      "tumor": { "color": "green", "strokeWidth": 3 },
+      "innocuous": { "color": "white" }
+    },
+    "rulerLabels": {
+      "big": { "color": "#ff0000" },
+      "small": { "color": "white" }
+    },
+    "rectangleLabels": {
+      "red": { "color": "#ff0000", "fillColor": "transparent" },
+      "green": { "color": "green", "fillColor": "transparent" },
+      "white-yellow-fill": {
+        "color": "white",
+        "fillColor": "#00ff0030"
+      }
+    },
+    "polygonLabels": {
+      "poly1": { "color": "#ff0000" },
+      "poly2Label": { "color": "green" }
+    }
+  },
+  "layout": {
+    "activeLayout": "Axial Only"
+  },
+  "dataBrowser": {
+    "hideSampleData": false
+  },
+  "shortcuts": {
+    "polygon": "Ctrl+p",
+    "showKeyboardShortcuts": "t"
+  },
+  "io": {
+    "segmentGroupSaveFormat": "nrrd"
+  }
+}
+```
diff --git a/documentation/content/doc/loading_data.md b/documentation/content/doc/loading_data.md
index d0ef92498..04b368a13 100644
--- a/documentation/content/doc/loading_data.md
+++ b/documentation/content/doc/loading_data.md
@@ -56,92 +56,6 @@ page](https://github.com/Kitware/VolView/issues)!
 
 In order for VolView to download and display your remote datasets, your server must be configured with the correct [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) configuration. CORS is a browser security mechanism that restricts how web applications can access remote resources. Without proper CORS configuration, VolView will be unable to download and display your datasets. Configuring your web server with CORS is beyond the scope of this documentation; please refer to your server's documentation.
 
-### Configuration JSON File
-
-By loading a JSON file, you can set VolView's:
-
-- Starting view layout (Axial Only, 3D Primary, etc).
-- Labels for tools
-- Visibility of Sample Data section
-- Keyboard shortcuts
-
-#### Starting view layout
-
-The `activeLayout` key has options (Axial Only, 3D Primary, etc.) defined in `config.ts`
-
-#### Labels for tools
-
-Each tool type (Rectangle, Polygon, etc.) can have tool specific labels. To share labels
-across tools, define the `defaultLabels` key and don't provide labels for a tool that
-should use the default labels.
-
-#### Visibility of Sample Data section
-
-Simplify the data browser by hiding the Sample Data expandable section.
-
-#### Keyboard Shortcuts
-
-Configure the keys to activate tools, change selected labels, and more.
-All [shortcut actions](https://github.com/Kitware/VolView/blob/main/src/constants.ts#L53) are under the `ACTIONS` variable.
-
-To configure a key for an action, add its action name and the key(s) under the `shortcuts` section. For key combinations, use `+` like `Ctrl+f`.
-
-#### Example JSON:
-
-```json
-{
-  "labels": {
-    "defaultLabels": {
-      "lesion": { "color": "#ff0000" },
-      "tumor": { "color": "green", "strokeWidth": 3 }
-    }
-  },
-  "layout": {
-    "activeLayout": "Axial Only"
-  }
-}
-```
-
-#### All options:
-
-```json
-{
-  "labels": {
-    "defaultLabels": {
-      "lesion": { "color": "#ff0000" },
-      "tumor": { "color": "green", "strokeWidth": 3 },
-      "innocuous": { "color": "white" }
-    },
-    "rulerLabels": {
-      "big": { "color": "#ff0000" },
-      "small": { "color": "white" }
-    },
-    "rectangleLabels": {
-      "red": { "color": "#ff0000", "fillColor": "transparent" },
-      "green": { "color": "green", "fillColor": "transparent" },
-      "white-yellow-fill": {
-        "color": "white",
-        "fillColor": "#00ff0030"
-      }
-    },
-    "polygonLabels": {
-      "poly1": { "color": "#ff0000" },
-      "poly2Label": { "color": "green" }
-    }
-  },
-  "layout": {
-    "activeLayout": "Axial Only"
-  },
-  "dataBrowser": {
-    "hideSampleData": false
-  }
-  "shortcuts": {
-    "polygon": "Ctrl+p",
-    "showKeyboardShortcuts": "t"
-  }
-}
-```
-
 ## Layer Images
 
 To overlay images in the 2D views, there is a layer button on image thumbnails. A PET image could be layered on top of a CT image. The layered image is resampled to the base image using the image's spatial metadata. If the spatial metadata does not place the images in the same coordinate system, the layer alignment will be incorrect.
diff --git a/documentation/content/doc/state_files.md b/documentation/content/doc/state_files.md
index 7a9d8e8c6..ac78eaf44 100644
--- a/documentation/content/doc/state_files.md
+++ b/documentation/content/doc/state_files.md
@@ -2,7 +2,7 @@
 
 VolView state files are a great way to save your scene and data to either be used later, or for distributing to collaborators and other users. These files store all of the information you need to restore the state of VolView: your data, annotations, camera positions, background colors, colormaps, and more.
 
-State files can be saved by clicking on "Disk" icon in the top of the toolbar. This button will generate a `*.volview` file that can then be re-opened in VolView at any time.
+State files can be saved by clicking on "Disk" icon in the top of the toolbar. This button will generate a `*.volview.zip` file that can then be re-opened in VolView at any time.
 
 When saving VolView state, your data is saved along with the application state. This way, when you send a state file to a collaborator, they too can open the state file and load the previously saved data. However, this means that your state file will be as large as your dataset(s) and may contain patient identifying information. Please follow your institutes HIPAA, IRB and other regulatory and confidentiality requirements.
 
diff --git a/documentation/tpl/__en__ b/documentation/tpl/__en__
index 9bf65bbeb..b41bdc4c0 100644
--- a/documentation/tpl/__en__
+++ b/documentation/tpl/__en__
@@ -29,4 +29,5 @@ sidebar:
     mouse_controls: Mouse/Keyboard Controls
     rendering: Cinematic Rendering
     state_files: State Files
-    server: Remote Server Capabilities
\ No newline at end of file
+    server: Remote Server Capabilities
+    configuration_file: Configuration File
diff --git a/documentation/tpl/__sidebar__ b/documentation/tpl/__sidebar__
index 56f52dfad..6ee3e3420 100644
--- a/documentation/tpl/__sidebar__
+++ b/documentation/tpl/__sidebar__
@@ -1,8 +1,8 @@
 doc:
-  introduction: 
+  introduction:
     what_is_volview: index.html
     quick_start_guide: quick_start_guide.html
-  details: 
+  details:
     welcome_screen: welcome_screen.html
     loading_data: loading_data.html
     toolbar: toolbar.html
@@ -10,3 +10,4 @@ doc:
     rendering: rendering.html
     state_files: state_files.html
     server: server.html
+    configuration_file: configuration_file.html

From 67d2631cd6000625844015a6e44a62630191fc6d Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Dec 2023 16:07:33 -0500
Subject: [PATCH 013/113] fix(segmentGroups): terminate webworker after
 exporting

---
 src/store/segmentGroups.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index fb9929d98..b04238103 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -60,6 +60,7 @@ const writeImage = async (format: string, image: vtkImageData) => {
   }
 
   const result = await writeImageItk(null, itkImage, `image.${format}`);
+  result.webWorker?.terminate();
   return result.serializedImage.data;
 };
 

From 918f4bde32124388bcf712813776d32a02ec1550 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 10 Jan 2024 08:47:18 +0000
Subject: [PATCH 014/113] chore(deps): bump follow-redirects from 1.15.2 to
 1.15.4

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.2 to 1.15.4.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.2...v1.15.4)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 83c713b68..7dd393d9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11261,9 +11261,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
       "funding": [
         {
           "type": "individual",
@@ -31153,9 +31153,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
+      "version": "1.15.4",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
+      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw=="
     },
     "for-each": {
       "version": "0.3.3",

From 66c9381aae065ac72f3740ce8e8f39f43cc4e2ab Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 20 Jan 2024 01:12:22 +0000
Subject: [PATCH 015/113] chore(deps-dev): bump vite from 4.3.9 to 4.5.2

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.3.9 to 4.5.2.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 640 ++++++++++++++++++++++++++++++++++++++++------
 package.json      |   2 +-
 2 files changed, 566 insertions(+), 76 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7dd393d9e..32384215c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,7 +85,7 @@
         "sinon-chai": "3.7.0",
         "ts-node": "^10.9.1",
         "typescript": "~5.1.3",
-        "vite": "^4.3.9",
+        "vite": "^4.5.2",
         "vite-plugin-html": "^3.2.0",
         "vite-plugin-static-copy": "^0.16.0",
         "vite-plugin-vuetify": "^1.0.2",
@@ -2493,10 +2493,250 @@
       "resolved": "https://registry.npmjs.org/@deno/shim-deno-test/-/shim-deno-test-0.3.3.tgz",
       "integrity": "sha512-Ge0Tnl7zZY0VvEfgsyLhjid8DzI1d0La0dgm+3m0/A8gZXgp5xwlyIyue5e4SCUuVB/3AH/0lun9LcJhhTwmbg=="
     },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
       "cpu": [
         "x64"
       ],
@@ -2509,6 +2749,102 @@
         "node": ">=12"
       }
     },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -9757,9 +10093,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "devOptional": true,
       "hasInstallScript": true,
       "bin": {
@@ -9769,28 +10105,28 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.17.19",
-        "@esbuild/android-arm64": "0.17.19",
-        "@esbuild/android-x64": "0.17.19",
-        "@esbuild/darwin-arm64": "0.17.19",
-        "@esbuild/darwin-x64": "0.17.19",
-        "@esbuild/freebsd-arm64": "0.17.19",
-        "@esbuild/freebsd-x64": "0.17.19",
-        "@esbuild/linux-arm": "0.17.19",
-        "@esbuild/linux-arm64": "0.17.19",
-        "@esbuild/linux-ia32": "0.17.19",
-        "@esbuild/linux-loong64": "0.17.19",
-        "@esbuild/linux-mips64el": "0.17.19",
-        "@esbuild/linux-ppc64": "0.17.19",
-        "@esbuild/linux-riscv64": "0.17.19",
-        "@esbuild/linux-s390x": "0.17.19",
-        "@esbuild/linux-x64": "0.17.19",
-        "@esbuild/netbsd-x64": "0.17.19",
-        "@esbuild/openbsd-x64": "0.17.19",
-        "@esbuild/sunos-x64": "0.17.19",
-        "@esbuild/win32-arm64": "0.17.19",
-        "@esbuild/win32-ia32": "0.17.19",
-        "@esbuild/win32-x64": "0.17.19"
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
       }
     },
     "node_modules/escalade": {
@@ -18224,9 +18560,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.25.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz",
-      "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "devOptional": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -20156,14 +20492,14 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "4.3.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
-      "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "devOptional": true,
       "dependencies": {
-        "esbuild": "^0.17.5",
-        "postcss": "^8.4.23",
-        "rollup": "^3.21.0"
+        "esbuild": "^0.18.10",
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -20171,12 +20507,16 @@
       "engines": {
         "node": "^14.18.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
       "optionalDependencies": {
         "fsevents": "~2.3.2"
       },
       "peerDependencies": {
         "@types/node": ">= 14",
         "less": "*",
+        "lightningcss": "^1.21.0",
         "sass": "*",
         "stylus": "*",
         "sugarss": "*",
@@ -20189,6 +20529,9 @@
         "less": {
           "optional": true
         },
+        "lightningcss": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         },
@@ -24359,10 +24702,157 @@
       "resolved": "https://registry.npmjs.org/@deno/shim-deno-test/-/shim-deno-test-0.3.3.tgz",
       "integrity": "sha512-Ge0Tnl7zZY0VvEfgsyLhjid8DzI1d0La0dgm+3m0/A8gZXgp5xwlyIyue5e4SCUuVB/3AH/0lun9LcJhhTwmbg=="
     },
+    "@esbuild/android-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz",
+      "integrity": "sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/android-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.18.20.tgz",
+      "integrity": "sha512-8GDdlePJA8D6zlZYJV/jnrRAi6rOiNaCC/JclcXpB+KIuvfBN4owLtgzY2bsxnx666XjJx2kDPUmnTtR8qKQUg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz",
+      "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/darwin-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.20.tgz",
+      "integrity": "sha512-pc5gxlMDxzm513qPGbCbDukOdsGtKhfxD1zJKXjCCcU7ju50O7MeAZ8c4krSJcOIJGFR+qx21yMMVYwiQvyTyQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.18.20.tgz",
+      "integrity": "sha512-yqDQHy4QHevpMAaxhhIwYPMv1NECwOvIpGCZkECn8w2WFHXjEwrBn3CeNIYsibZ/iZEUemj++M26W3cNR5h+Tw==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/freebsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.18.20.tgz",
+      "integrity": "sha512-tgWRPPuQsd3RmBZwarGVHZQvtzfEBOreNuxEMKFcd5DaDn2PbBxfwLcj4+aenoh7ctXcbXmOQIn8HI6mCSw5MQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.18.20.tgz",
+      "integrity": "sha512-/5bHkMWnq1EgKr1V+Ybz3s1hWXok7mDFUMQ4cG10AfW3wL02PSZi5kFpYKrptDsgb2WAJIvRcDm+qIvXf/apvg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.18.20.tgz",
+      "integrity": "sha512-2YbscF+UL7SQAVIpnWvYwM+3LskyDmPhe31pE7/aoTMFKKzIc9lLbyGUpmmb8a8AixOL61sQ/mFh3jEjHYFvdA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz",
+      "integrity": "sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-loong64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-mips64el": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.18.20.tgz",
+      "integrity": "sha512-d5NeaXZcHp8PzYy5VnXV3VSd2D328Zb+9dEq5HE6bw6+N86JVPExrA6O68OPwobntbNJ0pzCpUFZTo3w0GyetQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-ppc64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.18.20.tgz",
+      "integrity": "sha512-WHPyeScRNcmANnLQkq6AfyXRFr5D6N2sKgkFo2FqguP44Nw2eyDlbTdZwd9GYk98DZG9QItIiTlFLHJHjxP3FA==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-riscv64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.18.20.tgz",
+      "integrity": "sha512-WSxo6h5ecI5XH34KC7w5veNnKkju3zBRLEQNY7mv5mtBmrP/MjNBCAlsM2u5hDBlS3NGcTQpoBvRzqBcRtpq1A==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/linux-s390x": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.18.20.tgz",
+      "integrity": "sha512-+8231GMs3mAEth6Ja1iK0a1sQ3ohfcpzpRLH8uuc5/KVDFneH6jtAJLFGafpzpMRO6DzJ6AvXKze9LfFMrIHVQ==",
+      "dev": true,
+      "optional": true
+    },
     "@esbuild/linux-x64": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
-      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.20.tgz",
+      "integrity": "sha512-UYqiqemphJcNsFEskc73jQ7B9jgwjWrSayxawS6UVFZGWrAAtkzjxSqnoclCXxWtfwLdzU+vTpcNYhpn43uP1w==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/netbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-iO1c++VP6xUBUmltHZoMtCUdPlnPGdBom6IrO4gyKPFFVBKioIImVooR5I83nTew5UOYrk3gIJhbZh8X44y06A==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/openbsd-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.18.20.tgz",
+      "integrity": "sha512-e5e4YSsuQfX4cxcygw/UCPIEP6wbIL+se3sxPdCiMbFLBWu0eiZOJ7WoD+ptCLrmjZBK1Wk7I6D/I3NglUGOxg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/sunos-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.18.20.tgz",
+      "integrity": "sha512-kDbFRFp0YpTQVVrqUd5FTYmWo45zGaXe0X8E1G/LKFC0v8x0vWrhOWSLITcCn63lmZIxfOMXtCfti/RxN/0wnQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-arm64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.18.20.tgz",
+      "integrity": "sha512-ddYFR6ItYgoaq4v4JmQQaAI5s7npztfV4Ag6NrhiaW0RrnOXqBkgwZLofVTlq1daVTQNhtI5oieTvkRPfZrePg==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-ia32": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.18.20.tgz",
+      "integrity": "sha512-Wv7QBi3ID/rROT08SABTS7eV4hX26sVduqDOTe1MvGMjNd3EjOz4b7zeexIR62GTIEKrfJXKL9LFxTYgkyeu7g==",
+      "dev": true,
+      "optional": true
+    },
+    "@esbuild/win32-x64": {
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz",
+      "integrity": "sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==",
       "dev": true,
       "optional": true
     },
@@ -30012,33 +30502,33 @@
       }
     },
     "esbuild": {
-      "version": "0.17.19",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
-      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "devOptional": true,
       "requires": {
-        "@esbuild/android-arm": "0.17.19",
-        "@esbuild/android-arm64": "0.17.19",
-        "@esbuild/android-x64": "0.17.19",
-        "@esbuild/darwin-arm64": "0.17.19",
-        "@esbuild/darwin-x64": "0.17.19",
-        "@esbuild/freebsd-arm64": "0.17.19",
-        "@esbuild/freebsd-x64": "0.17.19",
-        "@esbuild/linux-arm": "0.17.19",
-        "@esbuild/linux-arm64": "0.17.19",
-        "@esbuild/linux-ia32": "0.17.19",
-        "@esbuild/linux-loong64": "0.17.19",
-        "@esbuild/linux-mips64el": "0.17.19",
-        "@esbuild/linux-ppc64": "0.17.19",
-        "@esbuild/linux-riscv64": "0.17.19",
-        "@esbuild/linux-s390x": "0.17.19",
-        "@esbuild/linux-x64": "0.17.19",
-        "@esbuild/netbsd-x64": "0.17.19",
-        "@esbuild/openbsd-x64": "0.17.19",
-        "@esbuild/sunos-x64": "0.17.19",
-        "@esbuild/win32-arm64": "0.17.19",
-        "@esbuild/win32-ia32": "0.17.19",
-        "@esbuild/win32-x64": "0.17.19"
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
       }
     },
     "escalade": {
@@ -36370,9 +36860,9 @@
       }
     },
     "rollup": {
-      "version": "3.25.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.25.1.tgz",
-      "integrity": "sha512-tywOR+rwIt5m2ZAWSe5AIJcTat8vGlnPFAv15ycCrw33t6iFsXZ6mzHVFh2psSjxQPmI+xgzMZZizUAukBI4aQ==",
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
       "devOptional": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -37858,15 +38348,15 @@
       }
     },
     "vite": {
-      "version": "4.3.9",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
-      "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "devOptional": true,
       "requires": {
-        "esbuild": "^0.17.5",
+        "esbuild": "^0.18.10",
         "fsevents": "~2.3.2",
-        "postcss": "^8.4.23",
-        "rollup": "^3.21.0"
+        "postcss": "^8.4.27",
+        "rollup": "^3.27.1"
       }
     },
     "vite-node": {
diff --git a/package.json b/package.json
index 4d6ec07b5..a202fabdc 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "sinon-chai": "3.7.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.1.3",
-    "vite": "^4.3.9",
+    "vite": "^4.5.2",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-static-copy": "^0.16.0",
     "vite-plugin-vuetify": "^1.0.2",

From b738bff4a3460dbd93fba0a490fb0731dbcf5270 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Sun, 26 Nov 2023 22:42:22 -0500
Subject: [PATCH 016/113] feat(AboutBox): add investigation-use only banner

---
 src/components/AboutBox.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/AboutBox.vue b/src/components/AboutBox.vue
index 731578c29..34893863a 100644
--- a/src/components/AboutBox.vue
+++ b/src/components/AboutBox.vue
@@ -3,6 +3,9 @@
     <v-card-title class="d-flex flex-row justify-center">
       <vol-view-full-logo />
     </v-card-title>
+    <v-alert color="secondary" variant="tonal" class="notice">
+      For investigational use only
+    </v-alert>
     <v-card-text>
       <h2 class="mt-2">About VolView</h2>
       <v-divider class="mb-2" />
@@ -182,10 +185,10 @@
 </template>
 
 <style scoped>
-.close-button {
-  position: absolute;
-  right: 12px;
-  top: 12px;
+.notice {
+  width: fit-content;
+  margin: 0 auto;
+  text-transform: uppercase;
 }
 </style>
 

From 6f14bed4ed701cdaf11df8ac32a4f1c2b8607538 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 29 Jan 2024 23:55:17 +0000
Subject: [PATCH 017/113] chore(deps): bump aiohttp from 3.8.5 to 3.9.2 in
 /server

Bumps [aiohttp](https://github.com/aio-libs/aiohttp) from 3.8.5 to 3.9.2.
- [Release notes](https://github.com/aio-libs/aiohttp/releases)
- [Changelog](https://github.com/aio-libs/aiohttp/blob/master/CHANGES.rst)
- [Commits](https://github.com/aio-libs/aiohttp/compare/v3.8.5...v3.9.2)

---
updated-dependencies:
- dependency-name: aiohttp
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 server/poetry.lock    | 176 ++++++++++++++++++++----------------------
 server/pyproject.toml |   2 +-
 2 files changed, 83 insertions(+), 95 deletions(-)

diff --git a/server/poetry.lock b/server/poetry.lock
index e011ca61f..7a9377970 100644
--- a/server/poetry.lock
+++ b/server/poetry.lock
@@ -1,112 +1,100 @@
-# This file is automatically @generated by Poetry 1.6.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 1.7.1 and should not be changed by hand.
 
 [[package]]
 name = "aiohttp"
-version = "3.8.5"
+version = "3.9.2"
 description = "Async http client/server framework (asyncio)"
 optional = false
-python-versions = ">=3.6"
+python-versions = ">=3.8"
 files = [
-    {file = "aiohttp-3.8.5-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:a94159871304770da4dd371f4291b20cac04e8c94f11bdea1c3478e557fbe0d8"},
-    {file = "aiohttp-3.8.5-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:13bf85afc99ce6f9ee3567b04501f18f9f8dbbb2ea11ed1a2e079670403a7c84"},
-    {file = "aiohttp-3.8.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:2ce2ac5708501afc4847221a521f7e4b245abf5178cf5ddae9d5b3856ddb2f3a"},
-    {file = "aiohttp-3.8.5-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:96943e5dcc37a6529d18766597c491798b7eb7a61d48878611298afc1fca946c"},
-    {file = "aiohttp-3.8.5-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2ad5c3c4590bb3cc28b4382f031f3783f25ec223557124c68754a2231d989e2b"},
-    {file = "aiohttp-3.8.5-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:0c413c633d0512df4dc7fd2373ec06cc6a815b7b6d6c2f208ada7e9e93a5061d"},
-    {file = "aiohttp-3.8.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:df72ac063b97837a80d80dec8d54c241af059cc9bb42c4de68bd5b61ceb37caa"},
-    {file = "aiohttp-3.8.5-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:c48c5c0271149cfe467c0ff8eb941279fd6e3f65c9a388c984e0e6cf57538e14"},
-    {file = "aiohttp-3.8.5-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:368a42363c4d70ab52c2c6420a57f190ed3dfaca6a1b19afda8165ee16416a82"},
-    {file = "aiohttp-3.8.5-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:7607ec3ce4993464368505888af5beb446845a014bc676d349efec0e05085905"},
-    {file = "aiohttp-3.8.5-cp310-cp310-musllinux_1_1_ppc64le.whl", hash = "sha256:0d21c684808288a98914e5aaf2a7c6a3179d4df11d249799c32d1808e79503b5"},
-    {file = "aiohttp-3.8.5-cp310-cp310-musllinux_1_1_s390x.whl", hash = "sha256:312fcfbacc7880a8da0ae8b6abc6cc7d752e9caa0051a53d217a650b25e9a691"},
-    {file = "aiohttp-3.8.5-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:ad093e823df03bb3fd37e7dec9d4670c34f9e24aeace76808fc20a507cace825"},
-    {file = "aiohttp-3.8.5-cp310-cp310-win32.whl", hash = "sha256:33279701c04351a2914e1100b62b2a7fdb9a25995c4a104259f9a5ead7ed4802"},
-    {file = "aiohttp-3.8.5-cp310-cp310-win_amd64.whl", hash = "sha256:6e4a280e4b975a2e7745573e3fc9c9ba0d1194a3738ce1cbaa80626cc9b4f4df"},
-    {file = "aiohttp-3.8.5-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:ae871a964e1987a943d83d6709d20ec6103ca1eaf52f7e0d36ee1b5bebb8b9b9"},
-    {file = "aiohttp-3.8.5-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:461908b2578955045efde733719d62f2b649c404189a09a632d245b445c9c975"},
-    {file = "aiohttp-3.8.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:72a860c215e26192379f57cae5ab12b168b75db8271f111019509a1196dfc780"},
-    {file = "aiohttp-3.8.5-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:cc14be025665dba6202b6a71cfcdb53210cc498e50068bc088076624471f8bb9"},
-    {file = "aiohttp-3.8.5-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8af740fc2711ad85f1a5c034a435782fbd5b5f8314c9a3ef071424a8158d7f6b"},
-    {file = "aiohttp-3.8.5-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:841cd8233cbd2111a0ef0a522ce016357c5e3aff8a8ce92bcfa14cef890d698f"},
-    {file = "aiohttp-3.8.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:5ed1c46fb119f1b59304b5ec89f834f07124cd23ae5b74288e364477641060ff"},
-    {file = "aiohttp-3.8.5-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:84f8ae3e09a34f35c18fa57f015cc394bd1389bce02503fb30c394d04ee6b938"},
-    {file = "aiohttp-3.8.5-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:62360cb771707cb70a6fd114b9871d20d7dd2163a0feafe43fd115cfe4fe845e"},
-    {file = "aiohttp-3.8.5-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:23fb25a9f0a1ca1f24c0a371523546366bb642397c94ab45ad3aedf2941cec6a"},
-    {file = "aiohttp-3.8.5-cp311-cp311-musllinux_1_1_ppc64le.whl", hash = "sha256:b0ba0d15164eae3d878260d4c4df859bbdc6466e9e6689c344a13334f988bb53"},
-    {file = "aiohttp-3.8.5-cp311-cp311-musllinux_1_1_s390x.whl", hash = "sha256:5d20003b635fc6ae3f96d7260281dfaf1894fc3aa24d1888a9b2628e97c241e5"},
-    {file = "aiohttp-3.8.5-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:0175d745d9e85c40dcc51c8f88c74bfbaef9e7afeeeb9d03c37977270303064c"},
-    {file = "aiohttp-3.8.5-cp311-cp311-win32.whl", hash = "sha256:2e1b1e51b0774408f091d268648e3d57f7260c1682e7d3a63cb00d22d71bb945"},
-    {file = "aiohttp-3.8.5-cp311-cp311-win_amd64.whl", hash = "sha256:043d2299f6dfdc92f0ac5e995dfc56668e1587cea7f9aa9d8a78a1b6554e5755"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-macosx_10_9_x86_64.whl", hash = "sha256:cae533195e8122584ec87531d6df000ad07737eaa3c81209e85c928854d2195c"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4f21e83f355643c345177a5d1d8079f9f28b5133bcd154193b799d380331d5d3"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:a7a75ef35f2df54ad55dbf4b73fe1da96f370e51b10c91f08b19603c64004acc"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:2e2e9839e14dd5308ee773c97115f1e0a1cb1d75cbeeee9f33824fa5144c7634"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c44e65da1de4403d0576473e2344828ef9c4c6244d65cf4b75549bb46d40b8dd"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:78d847e4cde6ecc19125ccbc9bfac4a7ab37c234dd88fbb3c5c524e8e14da543"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-musllinux_1_1_aarch64.whl", hash = "sha256:c7a815258e5895d8900aec4454f38dca9aed71085f227537208057853f9d13f2"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-musllinux_1_1_i686.whl", hash = "sha256:8b929b9bd7cd7c3939f8bcfffa92fae7480bd1aa425279d51a89327d600c704d"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-musllinux_1_1_ppc64le.whl", hash = "sha256:5db3a5b833764280ed7618393832e0853e40f3d3e9aa128ac0ba0f8278d08649"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-musllinux_1_1_s390x.whl", hash = "sha256:a0215ce6041d501f3155dc219712bc41252d0ab76474615b9700d63d4d9292af"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:fd1ed388ea7fbed22c4968dd64bab0198de60750a25fe8c0c9d4bef5abe13824"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-win32.whl", hash = "sha256:6e6783bcc45f397fdebc118d772103d751b54cddf5b60fbcc958382d7dd64f3e"},
-    {file = "aiohttp-3.8.5-cp36-cp36m-win_amd64.whl", hash = "sha256:b5411d82cddd212644cf9360879eb5080f0d5f7d809d03262c50dad02f01421a"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:01d4c0c874aa4ddfb8098e85d10b5e875a70adc63db91f1ae65a4b04d3344cda"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e5980a746d547a6ba173fd5ee85ce9077e72d118758db05d229044b469d9029a"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2a482e6da906d5e6e653be079b29bc173a48e381600161c9932d89dfae5942ef"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:80bd372b8d0715c66c974cf57fe363621a02f359f1ec81cba97366948c7fc873"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c1161b345c0a444ebcf46bf0a740ba5dcf50612fd3d0528883fdc0eff578006a"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:cd56db019015b6acfaaf92e1ac40eb8434847d9bf88b4be4efe5bfd260aee692"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:153c2549f6c004d2754cc60603d4668899c9895b8a89397444a9c4efa282aaf4"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:4a01951fabc4ce26ab791da5f3f24dca6d9a6f24121746eb19756416ff2d881b"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-musllinux_1_1_ppc64le.whl", hash = "sha256:bfb9162dcf01f615462b995a516ba03e769de0789de1cadc0f916265c257e5d8"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-musllinux_1_1_s390x.whl", hash = "sha256:7dde0009408969a43b04c16cbbe252c4f5ef4574ac226bc8815cd7342d2028b6"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:4149d34c32f9638f38f544b3977a4c24052042affa895352d3636fa8bffd030a"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-win32.whl", hash = "sha256:68c5a82c8779bdfc6367c967a4a1b2aa52cd3595388bf5961a62158ee8a59e22"},
-    {file = "aiohttp-3.8.5-cp37-cp37m-win_amd64.whl", hash = "sha256:2cf57fb50be5f52bda004b8893e63b48530ed9f0d6c96c84620dc92fe3cd9b9d"},
-    {file = "aiohttp-3.8.5-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:eca4bf3734c541dc4f374ad6010a68ff6c6748f00451707f39857f429ca36ced"},
-    {file = "aiohttp-3.8.5-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:1274477e4c71ce8cfe6c1ec2f806d57c015ebf84d83373676036e256bc55d690"},
-    {file = "aiohttp-3.8.5-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:28c543e54710d6158fc6f439296c7865b29e0b616629767e685a7185fab4a6b9"},
-    {file = "aiohttp-3.8.5-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:910bec0c49637d213f5d9877105d26e0c4a4de2f8b1b29405ff37e9fc0ad52b8"},
-    {file = "aiohttp-3.8.5-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:5443910d662db951b2e58eb70b0fbe6b6e2ae613477129a5805d0b66c54b6cb7"},
-    {file = "aiohttp-3.8.5-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:2e460be6978fc24e3df83193dc0cc4de46c9909ed92dd47d349a452ef49325b7"},
-    {file = "aiohttp-3.8.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fb1558def481d84f03b45888473fc5a1f35747b5f334ef4e7a571bc0dfcb11f8"},
-    {file = "aiohttp-3.8.5-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:34dd0c107799dcbbf7d48b53be761a013c0adf5571bf50c4ecad5643fe9cfcd0"},
-    {file = "aiohttp-3.8.5-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:aa1990247f02a54185dc0dff92a6904521172a22664c863a03ff64c42f9b5410"},
-    {file = "aiohttp-3.8.5-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:0e584a10f204a617d71d359fe383406305a4b595b333721fa50b867b4a0a1548"},
-    {file = "aiohttp-3.8.5-cp38-cp38-musllinux_1_1_ppc64le.whl", hash = "sha256:a3cf433f127efa43fee6b90ea4c6edf6c4a17109d1d037d1a52abec84d8f2e42"},
-    {file = "aiohttp-3.8.5-cp38-cp38-musllinux_1_1_s390x.whl", hash = "sha256:c11f5b099adafb18e65c2c997d57108b5bbeaa9eeee64a84302c0978b1ec948b"},
-    {file = "aiohttp-3.8.5-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:84de26ddf621d7ac4c975dbea4c945860e08cccde492269db4e1538a6a6f3c35"},
-    {file = "aiohttp-3.8.5-cp38-cp38-win32.whl", hash = "sha256:ab88bafedc57dd0aab55fa728ea10c1911f7e4d8b43e1d838a1739f33712921c"},
-    {file = "aiohttp-3.8.5-cp38-cp38-win_amd64.whl", hash = "sha256:5798a9aad1879f626589f3df0f8b79b3608a92e9beab10e5fda02c8a2c60db2e"},
-    {file = "aiohttp-3.8.5-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:a6ce61195c6a19c785df04e71a4537e29eaa2c50fe745b732aa937c0c77169f3"},
-    {file = "aiohttp-3.8.5-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:773dd01706d4db536335fcfae6ea2440a70ceb03dd3e7378f3e815b03c97ab51"},
-    {file = "aiohttp-3.8.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:f83a552443a526ea38d064588613aca983d0ee0038801bc93c0c916428310c28"},
-    {file = "aiohttp-3.8.5-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1f7372f7341fcc16f57b2caded43e81ddd18df53320b6f9f042acad41f8e049a"},
-    {file = "aiohttp-3.8.5-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:ea353162f249c8097ea63c2169dd1aa55de1e8fecbe63412a9bc50816e87b761"},
-    {file = "aiohttp-3.8.5-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:e5d47ae48db0b2dcf70bc8a3bc72b3de86e2a590fc299fdbbb15af320d2659de"},
-    {file = "aiohttp-3.8.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:d827176898a2b0b09694fbd1088c7a31836d1a505c243811c87ae53a3f6273c1"},
-    {file = "aiohttp-3.8.5-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:3562b06567c06439d8b447037bb655ef69786c590b1de86c7ab81efe1c9c15d8"},
-    {file = "aiohttp-3.8.5-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:4e874cbf8caf8959d2adf572a78bba17cb0e9d7e51bb83d86a3697b686a0ab4d"},
-    {file = "aiohttp-3.8.5-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:6809a00deaf3810e38c628e9a33271892f815b853605a936e2e9e5129762356c"},
-    {file = "aiohttp-3.8.5-cp39-cp39-musllinux_1_1_ppc64le.whl", hash = "sha256:33776e945d89b29251b33a7e7d006ce86447b2cfd66db5e5ded4e5cd0340585c"},
-    {file = "aiohttp-3.8.5-cp39-cp39-musllinux_1_1_s390x.whl", hash = "sha256:eaeed7abfb5d64c539e2db173f63631455f1196c37d9d8d873fc316470dfbacd"},
-    {file = "aiohttp-3.8.5-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:e91d635961bec2d8f19dfeb41a539eb94bd073f075ca6dae6c8dc0ee89ad6f91"},
-    {file = "aiohttp-3.8.5-cp39-cp39-win32.whl", hash = "sha256:00ad4b6f185ec67f3e6562e8a1d2b69660be43070bd0ef6fcec5211154c7df67"},
-    {file = "aiohttp-3.8.5-cp39-cp39-win_amd64.whl", hash = "sha256:c0a9034379a37ae42dea7ac1e048352d96286626251862e448933c0f59cbd79c"},
-    {file = "aiohttp-3.8.5.tar.gz", hash = "sha256:b9552ec52cc147dbf1944ac7ac98af7602e51ea2dcd076ed194ca3c0d1c7d0bc"},
+    {file = "aiohttp-3.9.2-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:772fbe371788e61c58d6d3d904268e48a594ba866804d08c995ad71b144f94cb"},
+    {file = "aiohttp-3.9.2-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:edd4f1af2253f227ae311ab3d403d0c506c9b4410c7fc8d9573dec6d9740369f"},
+    {file = "aiohttp-3.9.2-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:cfee9287778399fdef6f8a11c9e425e1cb13cc9920fd3a3df8f122500978292b"},
+    {file = "aiohttp-3.9.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:3cc158466f6a980a6095ee55174d1de5730ad7dec251be655d9a6a9dd7ea1ff9"},
+    {file = "aiohttp-3.9.2-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:54ec82f45d57c9a65a1ead3953b51c704f9587440e6682f689da97f3e8defa35"},
+    {file = "aiohttp-3.9.2-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:abeb813a18eb387f0d835ef51f88568540ad0325807a77a6e501fed4610f864e"},
+    {file = "aiohttp-3.9.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cc91d07280d7d169f3a0f9179d8babd0ee05c79d4d891447629ff0d7d8089ec2"},
+    {file = "aiohttp-3.9.2-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:b65e861f4bebfb660f7f0f40fa3eb9f2ab9af10647d05dac824390e7af8f75b7"},
+    {file = "aiohttp-3.9.2-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:04fd8ffd2be73d42bcf55fd78cde7958eeee6d4d8f73c3846b7cba491ecdb570"},
+    {file = "aiohttp-3.9.2-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:3d8d962b439a859b3ded9a1e111a4615357b01620a546bc601f25b0211f2da81"},
+    {file = "aiohttp-3.9.2-cp310-cp310-musllinux_1_1_ppc64le.whl", hash = "sha256:8ceb658afd12b27552597cf9a65d9807d58aef45adbb58616cdd5ad4c258c39e"},
+    {file = "aiohttp-3.9.2-cp310-cp310-musllinux_1_1_s390x.whl", hash = "sha256:0e4ee4df741670560b1bc393672035418bf9063718fee05e1796bf867e995fad"},
+    {file = "aiohttp-3.9.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:2dec87a556f300d3211decf018bfd263424f0690fcca00de94a837949fbcea02"},
+    {file = "aiohttp-3.9.2-cp310-cp310-win32.whl", hash = "sha256:3e1a800f988ce7c4917f34096f81585a73dbf65b5c39618b37926b1238cf9bc4"},
+    {file = "aiohttp-3.9.2-cp310-cp310-win_amd64.whl", hash = "sha256:ea510718a41b95c236c992b89fdfc3d04cc7ca60281f93aaada497c2b4e05c46"},
+    {file = "aiohttp-3.9.2-cp311-cp311-macosx_10_9_universal2.whl", hash = "sha256:6aaa6f99256dd1b5756a50891a20f0d252bd7bdb0854c5d440edab4495c9f973"},
+    {file = "aiohttp-3.9.2-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:a27d8c70ad87bcfce2e97488652075a9bdd5b70093f50b10ae051dfe5e6baf37"},
+    {file = "aiohttp-3.9.2-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:54287bcb74d21715ac8382e9de146d9442b5f133d9babb7e5d9e453faadd005e"},
+    {file = "aiohttp-3.9.2-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5bb3d05569aa83011fcb346b5266e00b04180105fcacc63743fc2e4a1862a891"},
+    {file = "aiohttp-3.9.2-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c8534e7d69bb8e8d134fe2be9890d1b863518582f30c9874ed7ed12e48abe3c4"},
+    {file = "aiohttp-3.9.2-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:4bd9d5b989d57b41e4ff56ab250c5ddf259f32db17159cce630fd543376bd96b"},
+    {file = "aiohttp-3.9.2-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fa6904088e6642609981f919ba775838ebf7df7fe64998b1a954fb411ffb4663"},
+    {file = "aiohttp-3.9.2-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:bda42eb410be91b349fb4ee3a23a30ee301c391e503996a638d05659d76ea4c2"},
+    {file = "aiohttp-3.9.2-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:193cc1ccd69d819562cc7f345c815a6fc51d223b2ef22f23c1a0f67a88de9a72"},
+    {file = "aiohttp-3.9.2-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:b9f1cb839b621f84a5b006848e336cf1496688059d2408e617af33e3470ba204"},
+    {file = "aiohttp-3.9.2-cp311-cp311-musllinux_1_1_ppc64le.whl", hash = "sha256:d22a0931848b8c7a023c695fa2057c6aaac19085f257d48baa24455e67df97ec"},
+    {file = "aiohttp-3.9.2-cp311-cp311-musllinux_1_1_s390x.whl", hash = "sha256:4112d8ba61fbd0abd5d43a9cb312214565b446d926e282a6d7da3f5a5aa71d36"},
+    {file = "aiohttp-3.9.2-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:c4ad4241b52bb2eb7a4d2bde060d31c2b255b8c6597dd8deac2f039168d14fd7"},
+    {file = "aiohttp-3.9.2-cp311-cp311-win32.whl", hash = "sha256:ee2661a3f5b529f4fc8a8ffee9f736ae054adfb353a0d2f78218be90617194b3"},
+    {file = "aiohttp-3.9.2-cp311-cp311-win_amd64.whl", hash = "sha256:4deae2c165a5db1ed97df2868ef31ca3cc999988812e82386d22937d9d6fed52"},
+    {file = "aiohttp-3.9.2-cp312-cp312-macosx_10_9_universal2.whl", hash = "sha256:6f4cdba12539215aaecf3c310ce9d067b0081a0795dd8a8805fdb67a65c0572a"},
+    {file = "aiohttp-3.9.2-cp312-cp312-macosx_10_9_x86_64.whl", hash = "sha256:84e843b33d5460a5c501c05539809ff3aee07436296ff9fbc4d327e32aa3a326"},
+    {file = "aiohttp-3.9.2-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:8008d0f451d66140a5aa1c17e3eedc9d56e14207568cd42072c9d6b92bf19b52"},
+    {file = "aiohttp-3.9.2-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:61c47ab8ef629793c086378b1df93d18438612d3ed60dca76c3422f4fbafa792"},
+    {file = "aiohttp-3.9.2-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:bc71f748e12284312f140eaa6599a520389273174b42c345d13c7e07792f4f57"},
+    {file = "aiohttp-3.9.2-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:a1c3a4d0ab2f75f22ec80bca62385db2e8810ee12efa8c9e92efea45c1849133"},
+    {file = "aiohttp-3.9.2-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9a87aa0b13bbee025faa59fa58861303c2b064b9855d4c0e45ec70182bbeba1b"},
+    {file = "aiohttp-3.9.2-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:e2cc0d04688b9f4a7854c56c18aa7af9e5b0a87a28f934e2e596ba7e14783192"},
+    {file = "aiohttp-3.9.2-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:1956e3ac376b1711c1533266dec4efd485f821d84c13ce1217d53e42c9e65f08"},
+    {file = "aiohttp-3.9.2-cp312-cp312-musllinux_1_1_i686.whl", hash = "sha256:114da29f39eccd71b93a0fcacff178749a5c3559009b4a4498c2c173a6d74dff"},
+    {file = "aiohttp-3.9.2-cp312-cp312-musllinux_1_1_ppc64le.whl", hash = "sha256:3f17999ae3927d8a9a823a1283b201344a0627272f92d4f3e3a4efe276972fe8"},
+    {file = "aiohttp-3.9.2-cp312-cp312-musllinux_1_1_s390x.whl", hash = "sha256:f31df6a32217a34ae2f813b152a6f348154f948c83213b690e59d9e84020925c"},
+    {file = "aiohttp-3.9.2-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:7a75307ffe31329928a8d47eae0692192327c599113d41b278d4c12b54e1bd11"},
+    {file = "aiohttp-3.9.2-cp312-cp312-win32.whl", hash = "sha256:972b63d589ff8f305463593050a31b5ce91638918da38139b9d8deaba9e0fed7"},
+    {file = "aiohttp-3.9.2-cp312-cp312-win_amd64.whl", hash = "sha256:200dc0246f0cb5405c80d18ac905c8350179c063ea1587580e3335bfc243ba6a"},
+    {file = "aiohttp-3.9.2-cp38-cp38-macosx_10_9_universal2.whl", hash = "sha256:158564d0d1020e0d3fe919a81d97aadad35171e13e7b425b244ad4337fc6793a"},
+    {file = "aiohttp-3.9.2-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:da1346cd0ccb395f0ed16b113ebb626fa43b7b07fd7344fce33e7a4f04a8897a"},
+    {file = "aiohttp-3.9.2-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:eaa9256de26ea0334ffa25f1913ae15a51e35c529a1ed9af8e6286dd44312554"},
+    {file = "aiohttp-3.9.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1543e7fb00214fb4ccead42e6a7d86f3bb7c34751ec7c605cca7388e525fd0b4"},
+    {file = "aiohttp-3.9.2-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:186e94570433a004e05f31f632726ae0f2c9dee4762a9ce915769ce9c0a23d89"},
+    {file = "aiohttp-3.9.2-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:d52d20832ac1560f4510d68e7ba8befbc801a2b77df12bd0cd2bcf3b049e52a4"},
+    {file = "aiohttp-3.9.2-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1c45e4e815ac6af3b72ca2bde9b608d2571737bb1e2d42299fc1ffdf60f6f9a1"},
+    {file = "aiohttp-3.9.2-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:aa906b9bdfd4a7972dd0628dbbd6413d2062df5b431194486a78f0d2ae87bd55"},
+    {file = "aiohttp-3.9.2-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:68bbee9e17d66f17bb0010aa15a22c6eb28583edcc8b3212e2b8e3f77f3ebe2a"},
+    {file = "aiohttp-3.9.2-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:4c189b64bd6d9a403a1a3f86a3ab3acbc3dc41a68f73a268a4f683f89a4dec1f"},
+    {file = "aiohttp-3.9.2-cp38-cp38-musllinux_1_1_ppc64le.whl", hash = "sha256:8a7876f794523123bca6d44bfecd89c9fec9ec897a25f3dd202ee7fc5c6525b7"},
+    {file = "aiohttp-3.9.2-cp38-cp38-musllinux_1_1_s390x.whl", hash = "sha256:d23fba734e3dd7b1d679b9473129cd52e4ec0e65a4512b488981a56420e708db"},
+    {file = "aiohttp-3.9.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:b141753be581fab842a25cb319f79536d19c2a51995d7d8b29ee290169868eab"},
+    {file = "aiohttp-3.9.2-cp38-cp38-win32.whl", hash = "sha256:103daf41ff3b53ba6fa09ad410793e2e76c9d0269151812e5aba4b9dd674a7e8"},
+    {file = "aiohttp-3.9.2-cp38-cp38-win_amd64.whl", hash = "sha256:328918a6c2835861ff7afa8c6d2c70c35fdaf996205d5932351bdd952f33fa2f"},
+    {file = "aiohttp-3.9.2-cp39-cp39-macosx_10_9_universal2.whl", hash = "sha256:5264d7327c9464786f74e4ec9342afbbb6ee70dfbb2ec9e3dfce7a54c8043aa3"},
+    {file = "aiohttp-3.9.2-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:07205ae0015e05c78b3288c1517afa000823a678a41594b3fdc870878d645305"},
+    {file = "aiohttp-3.9.2-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:ae0a1e638cffc3ec4d4784b8b4fd1cf28968febc4bd2718ffa25b99b96a741bd"},
+    {file = "aiohttp-3.9.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:d43302a30ba1166325974858e6ef31727a23bdd12db40e725bec0f759abce505"},
+    {file = "aiohttp-3.9.2-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:16a967685907003765855999af11a79b24e70b34dc710f77a38d21cd9fc4f5fe"},
+    {file = "aiohttp-3.9.2-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:6fa3ee92cd441d5c2d07ca88d7a9cef50f7ec975f0117cd0c62018022a184308"},
+    {file = "aiohttp-3.9.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:0b500c5ad9c07639d48615a770f49618130e61be36608fc9bc2d9bae31732b8f"},
+    {file = "aiohttp-3.9.2-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:c07327b368745b1ce2393ae9e1aafed7073d9199e1dcba14e035cc646c7941bf"},
+    {file = "aiohttp-3.9.2-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:cc7d6502c23a0ec109687bf31909b3fb7b196faf198f8cff68c81b49eb316ea9"},
+    {file = "aiohttp-3.9.2-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:07be2be7071723c3509ab5c08108d3a74f2181d4964e869f2504aaab68f8d3e8"},
+    {file = "aiohttp-3.9.2-cp39-cp39-musllinux_1_1_ppc64le.whl", hash = "sha256:122468f6fee5fcbe67cb07014a08c195b3d4c41ff71e7b5160a7bcc41d585a5f"},
+    {file = "aiohttp-3.9.2-cp39-cp39-musllinux_1_1_s390x.whl", hash = "sha256:00a9abcea793c81e7f8778ca195a1714a64f6d7436c4c0bb168ad2a212627000"},
+    {file = "aiohttp-3.9.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:7a9825fdd64ecac5c670234d80bb52bdcaa4139d1f839165f548208b3779c6c6"},
+    {file = "aiohttp-3.9.2-cp39-cp39-win32.whl", hash = "sha256:5422cd9a4a00f24c7244e1b15aa9b87935c85fb6a00c8ac9b2527b38627a9211"},
+    {file = "aiohttp-3.9.2-cp39-cp39-win_amd64.whl", hash = "sha256:7d579dcd5d82a86a46f725458418458fa43686f6a7b252f2966d359033ffc8ab"},
+    {file = "aiohttp-3.9.2.tar.gz", hash = "sha256:b0ad0a5e86ce73f5368a164c10ada10504bf91869c05ab75d982c6048217fbf7"},
 ]
 
 [package.dependencies]
 aiosignal = ">=1.1.2"
-async-timeout = ">=4.0.0a3,<5.0"
+async-timeout = {version = ">=4.0,<5.0", markers = "python_version < \"3.11\""}
 attrs = ">=17.3.0"
-charset-normalizer = ">=2.0,<4.0"
 frozenlist = ">=1.1.1"
 multidict = ">=4.5,<7.0"
 yarl = ">=1.0,<2.0"
 
 [package.extras]
-speedups = ["Brotli", "aiodns", "cchardet"]
+speedups = ["Brotli", "aiodns", "brotlicffi"]
 
 [[package]]
 name = "aiosignal"
@@ -1471,4 +1459,4 @@ multidict = ">=4.0"
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8.1"
-content-hash = "3c3ec72a728ca4a11e09432cfeda3ab8945b04f25ceb7ed5c6321ec0db7f8e65"
+content-hash = "d8d247ce731060f2b40003013d35471122c98667453b184631dc13d08830ba4b"
diff --git a/server/pyproject.toml b/server/pyproject.toml
index 6dc322a14..025cc05b1 100644
--- a/server/pyproject.toml
+++ b/server/pyproject.toml
@@ -12,7 +12,7 @@ black = "^23.1.0"
 flake8 = "^6.0.0"
 pytest = "^7.2.1"
 numpy = "^1.24.1"
-aiohttp = "^3.8.5"
+aiohttp = "^3.9.2"
 python-socketio = "^5.8.0"
 charset-normalizer = "^3.1.0"
 

From cd4ee5c9b89146878bd80ff1f64c833079329e17 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 31 Jan 2024 10:57:12 -0500
Subject: [PATCH 018/113] fix(proxyManager): cleaner API

requireProxyManager replaces withProxyManager, explicitly throwing an
error if the proxy manager is unavailable.
---
 src/composables/onProxyManagerEvent.ts | 51 ++++++++++++++------------
 src/composables/proxyManager.ts        | 21 ++++++++---
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/composables/onProxyManagerEvent.ts b/src/composables/onProxyManagerEvent.ts
index 9e8267ee8..111fd355d 100644
--- a/src/composables/onProxyManagerEvent.ts
+++ b/src/composables/onProxyManagerEvent.ts
@@ -1,7 +1,7 @@
 import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { VtkProxy } from '@kitware/vtk.js/macros';
 import { onBeforeUnmount } from 'vue';
-import { withProxyManager } from './proxyManager';
+import { requireProxyManager } from './proxyManager';
 
 export enum ProxyManagerEvent {
   ProxyCreated,
@@ -15,36 +15,39 @@ export function onProxyManagerEvent(
   cb: (proxyID: string, obj: VtkProxy | null) => void
 ) {
   const subs: vtkSubscription[] = [];
+  const proxyManager = requireProxyManager();
 
-  withProxyManager((proxyManager) => {
-    const proxySubs = Object.create(null);
+  const proxySubs: Record<string, vtkSubscription> = Object.create(null);
 
-    subs.push(
-      proxyManager.onProxyRegistrationChange((info) => {
-        const { action, proxyId, proxy } = info;
-        if (action === 'register') {
-          if (event === ProxyManagerEvent.ProxyCreated) {
-            cb(proxyId, proxy);
-          }
-          if (event === ProxyManagerEvent.ProxyModified) {
-            proxySubs[proxyId] = proxy.onModified(() => cb(proxyId, proxy));
-          }
-        } else if (action === 'unregister') {
-          if (proxyId in proxySubs) {
-            proxySubs[proxyId].unsubscribe();
-            delete proxySubs[proxyId];
-          }
-          if (event === ProxyManagerEvent.ProxyDeleted) {
-            cb(proxyId, null);
-          }
+  subs.push(
+    proxyManager.onProxyRegistrationChange((info) => {
+      const { action, proxyId, proxy } = info;
+      if (action === 'register') {
+        if (event === ProxyManagerEvent.ProxyCreated) {
+          cb(proxyId, proxy);
         }
-      })
-    );
-  });
+        if (event === ProxyManagerEvent.ProxyModified) {
+          proxySubs[proxyId] = proxy.onModified(() => cb(proxyId, proxy));
+        }
+      } else if (action === 'unregister') {
+        if (proxyId in proxySubs) {
+          proxySubs[proxyId].unsubscribe();
+          delete proxySubs[proxyId];
+        }
+        if (event === ProxyManagerEvent.ProxyDeleted) {
+          cb(proxyId, null);
+        }
+      }
+    })
+  );
 
   onBeforeUnmount(() => {
     while (subs.length) {
       subs.pop()!.unsubscribe();
     }
+    Object.entries(proxySubs).forEach(([id, sub]) => {
+      sub.unsubscribe();
+      delete proxySubs[id];
+    });
   });
 }
diff --git a/src/composables/proxyManager.ts b/src/composables/proxyManager.ts
index 3a0cf089f..0a9a24540 100644
--- a/src/composables/proxyManager.ts
+++ b/src/composables/proxyManager.ts
@@ -1,13 +1,22 @@
 import { inject } from 'vue';
 import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
 
-const defaultKey = 'ProxyManager';
+export const PROXYMANAGER_INJECT_KEY = Symbol('ProxyManager');
 
-export function withProxyManager(cb: (pxm: vtkProxyManager) => void) {
-  const pxm = inject<vtkProxyManager>('ProxyManager');
-  return pxm ? cb(pxm) : null;
+/**
+ * Injects a provided proxy manager instance if available.
+ */
+export function useProxyManager(): vtkProxyManager | undefined {
+  return inject<vtkProxyManager>(PROXYMANAGER_INJECT_KEY);
 }
 
-export function useProxyManager(key = defaultKey) {
-  return inject<vtkProxyManager>(key ?? defaultKey);
+/**
+ * Injects a provided proxy manager instance.
+ *
+ * Throws an error if no proxy manager is available.
+ */
+export function requireProxyManager() {
+  const pxm = useProxyManager();
+  if (!pxm) throw new Error('No proxy manager provided');
+  return pxm;
 }

From e88e377f0a65c2708b084ecccb67dd3b49be8edc Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 31 Jan 2024 11:21:40 -0500
Subject: [PATCH 019/113] fix(ViewProxy): drop delayedRender

- Improve readability for renderLater
- Drop the delayed render parameter for publicAPI.render
---
 src/utils/batchForNextTask.ts   | 17 +++++++++++++++++
 src/vtk/LPSView3DProxy/index.js | 29 +++++++++++------------------
 2 files changed, 28 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/batchForNextTask.ts

diff --git a/src/utils/batchForNextTask.ts b/src/utils/batchForNextTask.ts
new file mode 100644
index 000000000..a1910173c
--- /dev/null
+++ b/src/utils/batchForNextTask.ts
@@ -0,0 +1,17 @@
+/**
+ * Batches a function for the next JS task.
+ *
+ * Returns a function that wraps the given callback.
+ * @param fn
+ * @returns
+ */
+export function batchForNextTask(fn: () => void) {
+  let timeout: NodeJS.Timeout | null = null;
+  return () => {
+    if (timeout != null) return;
+    timeout = setTimeout(() => {
+      timeout = null;
+      fn();
+    }, 0);
+  };
+}
diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js
index 879185fb6..a1347bd5d 100644
--- a/src/vtk/LPSView3DProxy/index.js
+++ b/src/vtk/LPSView3DProxy/index.js
@@ -1,10 +1,9 @@
 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) {
-  const delayedRender = macro.debounce(model.renderWindow.render, 5);
-
   // override resize to avoid flickering from rendering later
   publicAPI.resize = () => {
     if (model.container) {
@@ -17,29 +16,20 @@ export function commonViewCustomizations(publicAPI, model) {
       const height = Math.max(10, Math.floor(devicePixelRatio * dims.height));
       model.renderWindow.getViews()[0].setSize(width, height);
       publicAPI.invokeResize({ width, height });
-      publicAPI.render(true);
+      publicAPI.render();
     }
   };
 
   // override render to not reset camera
-  publicAPI.render = (blocking = true) => {
+  publicAPI.render = () => {
     model.orientationWidget.updateMarkerOrientation();
-    if (blocking) {
-      model.renderWindow.render();
-    } else {
-      delayedRender();
-    }
+    model.renderWindow.render();
   };
 
   // provide a renderLater impl that schedules for the next js task
-  let timeout = null;
-  publicAPI.renderLater = () => {
-    if (timeout != null) return;
-    timeout = setTimeout(() => {
-      publicAPI.render();
-      timeout = null;
-    }, 0);
-  };
+  publicAPI.renderLater = batchForNextTask(() => {
+    publicAPI.render();
+  });
 
   // add helper function
   publicAPI.removeAllRepresentations = () => {
@@ -56,11 +46,14 @@ export function commonViewCustomizations(publicAPI, model) {
     model.camera.setViewUp(...viewUp);
   };
 
-  // disable the built-in corner annotations
   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;

From b8e1fb60144211b02488a5b11ec00ba8ff459c7b Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 31 Jan 2024 19:40:12 -0500
Subject: [PATCH 020/113] refactor: improve proxy manager usage

---
 src/components/VtkThreeView.vue        |  2 +-
 src/components/VtkTwoView.vue          |  3 +-
 src/composables/onProxyManagerEvent.ts | 36 ++++++++++++++---------
 src/composables/proxyManager.ts        | 22 --------------
 src/composables/useProxyManager.ts     | 40 ++++++++++++++++++++++++++
 src/composables/useWebGLWatchdog.ts    |  8 +++---
 src/core/proxies.ts                    | 13 +++++----
 src/main.js                            | 11 ++++---
 src/store/views.ts                     |  2 +-
 9 files changed, 85 insertions(+), 52 deletions(-)
 delete mode 100644 src/composables/proxyManager.ts
 create mode 100644 src/composables/useProxyManager.ts

diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
index 0735cfdd7..75858684d 100644
--- a/src/components/VtkThreeView.vue
+++ b/src/components/VtkThreeView.vue
@@ -75,7 +75,7 @@ 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 { useProxyManager } from '@/src/composables/proxyManager';
+import { useProxyManager } from '@/src/composables/useProxyManager';
 import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useCurrentImage } from '../composables/useCurrentImage';
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 85986d3aa..67b227faa 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -244,7 +244,7 @@ import {
   WL_AUTO_DEFAULT,
   WL_HIST_BINS,
 } from '../constants';
-import { useProxyManager } from '../composables/proxyManager';
+import { useProxyManager } from '../composables/useProxyManager';
 import { getShiftedOpacityFromPreset } from '../utils/vtk-helpers';
 import { useLayersStore } from '../store/datasets-layers';
 import { useViewCameraStore } from '../store/view-configs/camera';
@@ -911,3 +911,4 @@ export default defineComponent({
   cursor: pointer;
 }
 </style>
+../composables/useProxyManager
diff --git a/src/composables/onProxyManagerEvent.ts b/src/composables/onProxyManagerEvent.ts
index 111fd355d..dd0d743b8 100644
--- a/src/composables/onProxyManagerEvent.ts
+++ b/src/composables/onProxyManagerEvent.ts
@@ -1,18 +1,21 @@
 import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { VtkProxy } from '@kitware/vtk.js/macros';
 import { onBeforeUnmount } from 'vue';
-import { requireProxyManager } from './proxyManager';
+import { requireProxyManager } from './useProxyManager';
 
-export enum ProxyManagerEvent {
-  ProxyCreated,
-  ProxyModified,
-  ProxyDeleted,
-  ProxyRegistrationChange,
-}
+export type ProxyManagerEvent =
+  | 'ProxyCreated'
+  | 'ProxyModified'
+  | 'ProxyDeleted'
+  | 'ProxyRegistrationChange';
 
 export function onProxyManagerEvent(
   event: ProxyManagerEvent,
-  cb: (proxyID: string, obj: VtkProxy | null) => void
+  cb: (
+    proxyID: string,
+    obj: VtkProxy | null,
+    action: 'register' | 'unregister' | 'modified'
+  ) => void
 ) {
   const subs: vtkSubscription[] = [];
   const proxyManager = requireProxyManager();
@@ -23,21 +26,26 @@ export function onProxyManagerEvent(
     proxyManager.onProxyRegistrationChange((info) => {
       const { action, proxyId, proxy } = info;
       if (action === 'register') {
-        if (event === ProxyManagerEvent.ProxyCreated) {
-          cb(proxyId, proxy);
+        if (event === 'ProxyCreated') {
+          cb(proxyId, proxy, 'register');
         }
-        if (event === ProxyManagerEvent.ProxyModified) {
-          proxySubs[proxyId] = proxy.onModified(() => cb(proxyId, proxy));
+        if (event === 'ProxyModified') {
+          proxySubs[proxyId] = proxy.onModified(() =>
+            cb(proxyId, proxy, 'modified')
+          );
         }
       } else if (action === 'unregister') {
         if (proxyId in proxySubs) {
           proxySubs[proxyId].unsubscribe();
           delete proxySubs[proxyId];
         }
-        if (event === ProxyManagerEvent.ProxyDeleted) {
-          cb(proxyId, null);
+        if (event === 'ProxyDeleted') {
+          cb(proxyId, null, 'unregister');
         }
       }
+      if (event === 'ProxyRegistrationChange') {
+        cb(proxyId, proxy, action);
+      }
     })
   );
 
diff --git a/src/composables/proxyManager.ts b/src/composables/proxyManager.ts
deleted file mode 100644
index 0a9a24540..000000000
--- a/src/composables/proxyManager.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { inject } from 'vue';
-import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
-
-export const PROXYMANAGER_INJECT_KEY = Symbol('ProxyManager');
-
-/**
- * Injects a provided proxy manager instance if available.
- */
-export function useProxyManager(): vtkProxyManager | undefined {
-  return inject<vtkProxyManager>(PROXYMANAGER_INJECT_KEY);
-}
-
-/**
- * Injects a provided proxy manager instance.
- *
- * Throws an error if no proxy manager is available.
- */
-export function requireProxyManager() {
-  const pxm = useProxyManager();
-  if (!pxm) throw new Error('No proxy manager provided');
-  return pxm;
-}
diff --git a/src/composables/useProxyManager.ts b/src/composables/useProxyManager.ts
new file mode 100644
index 000000000..640ca4a02
--- /dev/null
+++ b/src/composables/useProxyManager.ts
@@ -0,0 +1,40 @@
+import { inject } from 'vue';
+import ProxyManagerWrapper from '@/src/core/proxies';
+
+export const PROXY_MANAGER_WRAPPER_INJECT_KEY = Symbol('ProxyManagerWrapper');
+
+/**
+ * Injects a provided ProxyManagerWrapper instance if available.
+ */
+export function useProxyManagerWrapper() {
+  return inject<ProxyManagerWrapper>(PROXY_MANAGER_WRAPPER_INJECT_KEY);
+}
+
+/**
+ * Injects a provided ProxyManagerWrapper instance.
+ *
+ * Throws an error if none is available.
+ */
+export function requireProxyManagerWrapper() {
+  const pxm = useProxyManagerWrapper();
+  if (!pxm) throw new Error('No ProxyManagerWrapper provided');
+  return pxm;
+}
+
+/**
+ * Obtains the underlying vtkProxyManager.
+ */
+export function useProxyManager() {
+  return useProxyManagerWrapper()?.proxyManager;
+}
+
+/**
+ * Obtains the underlying vtkProxyManager.
+ *
+ * Throws an error if none is available.
+ */
+export function requireProxyManager() {
+  const pxm = useProxyManager();
+  if (!pxm) throw new Error('No ProxyManager provided');
+  return pxm;
+}
diff --git a/src/composables/useWebGLWatchdog.ts b/src/composables/useWebGLWatchdog.ts
index e7c07eed8..6142be663 100644
--- a/src/composables/useWebGLWatchdog.ts
+++ b/src/composables/useWebGLWatchdog.ts
@@ -3,10 +3,10 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
 import { useEventListener, useThrottleFn } from '@vueuse/core';
 import { Maybe } from '@/src/types';
-import { useProxyManager } from '@/src/composables/proxyManager';
+import { useProxyManager } from '@/src/composables/useProxyManager';
 import { Messages } from '../constants';
 import { useMessageStore } from '../store/messages';
-import { onProxyManagerEvent, ProxyManagerEvent } from './onProxyManagerEvent';
+import { onProxyManagerEvent } from './onProxyManagerEvent';
 
 /**
  * Collects relevant context for debugging 3D crashes.
@@ -50,7 +50,7 @@ export function useWebGLWatchdog() {
     });
   }, 150);
 
-  onProxyManagerEvent(ProxyManagerEvent.ProxyCreated, (id, obj) => {
+  onProxyManagerEvent('ProxyCreated', (id, obj) => {
     if (!obj || !obj.isA('vtkViewProxy')) return;
     const view = obj as vtkViewProxy;
     // TODO getCanvas() typing
@@ -63,7 +63,7 @@ export function useWebGLWatchdog() {
     watchdogs.set(id, cleanup);
   });
 
-  onProxyManagerEvent(ProxyManagerEvent.ProxyDeleted, (id) => {
+  onProxyManagerEvent('ProxyDeleted', (id) => {
     if (watchdogs.has(id)) {
       watchdogs.get(id)!();
       watchdogs.delete(id);
diff --git a/src/core/proxies.ts b/src/core/proxies.ts
index be77fad75..60e13cb84 100644
--- a/src/core/proxies.ts
+++ b/src/core/proxies.ts
@@ -17,10 +17,10 @@ export enum ViewProxyType {
  * Wrapper around the vtkProxyManager, since we don't need some of
  * its complexities.
  */
-export default class ProxyWrapper {
+export default class ProxyManagerWrapper {
   private viewProxies: Map<string, vtkViewProxy>;
   private dataProxies: Map<string, vtkSourceProxy<vtkObject>>;
-  private proxyManager: vtkProxyManager;
+  public readonly proxyManager: vtkProxyManager;
 
   constructor(proxyManager: vtkProxyManager) {
     this.viewProxies = new Map();
@@ -28,17 +28,20 @@ export default class ProxyWrapper {
     this.proxyManager = proxyManager;
   }
 
-  delete() {
+  clearAll() {
     const deleteProxy = (proxy: VtkProxy) =>
       this.proxyManager.deleteProxy(proxy);
 
     this.viewProxies.forEach(deleteProxy);
     this.dataProxies.forEach(deleteProxy);
+
+    this.viewProxies.clear();
+    this.dataProxies.clear();
   }
 
   createView(id: string, type: ViewProxyType) {
     if (this.viewProxies.has(id)) {
-      throw new Error('Cannot create a view with the same ID');
+      throw new Error(`Cannot create a view with the same ID "${id}"`);
     }
 
     const proxy = this.proxyManager.createProxy<vtkViewProxy>('Views', type, {
@@ -53,7 +56,7 @@ export default class ProxyWrapper {
     return <T | null>this.viewProxies.get(id);
   }
 
-  removeView(id: string) {
+  deleteView(id: string) {
     const proxy = this.viewProxies.get(id);
     if (proxy) {
       this.proxyManager.deleteProxy(proxy);
diff --git a/src/main.js b/src/main.js
index b53260df4..351a90b04 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,10 +22,11 @@ import { FILE_READERS } from './io';
 import { registerAllReaders } from './io/readers';
 import proxyConfiguration from './vtk/proxy';
 import { CorePiniaProviderPlugin } from './core/provider';
-import ProxyWrapper from './core/proxies';
+import ProxyManagerWrapper from './core/proxies';
 import { patchExitPointerLock } from './utils/hacks';
 import { init as initErrorReporting } from './utils/errorReporting';
 import { StoreRegistry } from './plugins/storeRegistry';
+import { PROXY_MANAGER_WRAPPER_INJECT_KEY } from './composables/useProxyManager';
 
 // patches
 patchExitPointerLock();
@@ -41,7 +42,9 @@ vtkImageMapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
 
 registerAllReaders(FILE_READERS);
 
-const proxyManager = vtkProxyManager.newInstance({ proxyConfiguration });
+const proxyManagerWrapper = new ProxyManagerWrapper(
+  vtkProxyManager.newInstance({ proxyConfiguration })
+);
 
 const dicomIO = new DICOMIO();
 dicomIO.initialize();
@@ -53,7 +56,7 @@ setPipelinesBaseUrl(itkConfig.imageIOUrl);
 const pinia = createPinia();
 pinia.use(
   CorePiniaProviderPlugin({
-    proxies: new ProxyWrapper(proxyManager),
+    proxies: proxyManagerWrapper,
     dicomIO,
   })
 );
@@ -63,7 +66,7 @@ const app = createApp(App);
 
 initErrorReporting(app);
 
-app.provide('ProxyManager', proxyManager);
+app.provide(PROXY_MANAGER_WRAPPER_INJECT_KEY, proxyManagerWrapper);
 app.use(pinia);
 app.use(VueToast);
 app.use(vuetify);
diff --git a/src/store/views.ts b/src/store/views.ts
index 1d42a9221..03fb81fb0 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -62,7 +62,7 @@ export const useViewStore = defineStore('view', {
     removeView(id: string) {
       if (id in this.viewSpecs) {
         delete this.viewSpecs[id];
-        this.$proxies.removeView(id);
+        this.$proxies.deleteView(id);
       }
     },
     setLayout(layout: Layout) {

From 2c0abb26e25a3089a3a07e053e3ea91552b2f0d7 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 31 Jan 2024 22:00:08 -0500
Subject: [PATCH 021/113] fix(batchForNextTask): improve typing

---
 src/utils/batchForNextTask.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/utils/batchForNextTask.ts b/src/utils/batchForNextTask.ts
index a1910173c..cef800c91 100644
--- a/src/utils/batchForNextTask.ts
+++ b/src/utils/batchForNextTask.ts
@@ -5,13 +5,14 @@
  * @param fn
  * @returns
  */
-export function batchForNextTask(fn: () => void) {
+export function batchForNextTask<T extends (...args: any[]) => void>(fn: T) {
   let timeout: NodeJS.Timeout | null = null;
-  return () => {
+  const wrapper = ((...args: any[]) => {
     if (timeout != null) return;
     timeout = setTimeout(() => {
       timeout = null;
-      fn();
+      fn(...args);
     }, 0);
-  };
+  }) as T;
+  return wrapper;
 }

From adb14045c9d40fb4887c66e3304c86b8b6b25fbb Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 1 Feb 2024 13:49:55 -0500
Subject: [PATCH 022/113] refactor(App): split out AppBar

---
 src/components/App.vue    | 49 +++-------------------------------
 src/components/AppBar.vue | 56 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 46 deletions(-)
 create mode 100644 src/components/AppBar.vue

diff --git a/src/components/App.vue b/src/components/App.vue
index dcde1c04e..11859e69c 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -2,36 +2,7 @@
   <drag-and-drop enabled @drop-files="openFiles" id="app-container">
     <template v-slot="{ dragHover }">
       <v-app>
-        <v-app-bar app clipped-left :height="48">
-          <v-btn icon="mdi-menu" @click="leftSideBar = !leftSideBar" />
-          <v-toolbar-title class="d-flex flex-row align-center mt-3">
-            <vol-view-logo v-if="mobile" />
-            <vol-view-full-logo v-else />
-          </v-toolbar-title>
-          <v-btn
-            variant="text"
-            icon
-            :rounded="0"
-            class="toolbar-button"
-            href="https://volview.kitware.com/feedback/"
-            target="_blank"
-          >
-            <v-icon icon="mdi-comment-question-outline"></v-icon>
-            <v-tooltip activator="parent" location="bottom">
-              Ask Question/Submit Feedback
-            </v-tooltip>
-          </v-btn>
-          <v-btn
-            variant="text"
-            icon
-            :rounded="0"
-            class="toolbar-button"
-            @click="aboutBoxDialog = !aboutBoxDialog"
-          >
-            <v-icon icon="mdi-information-outline"></v-icon>
-            <v-tooltip activator="parent" location="bottom">About</v-tooltip>
-          </v-btn>
-        </v-app-bar>
+        <app-bar @click:left-menu="leftSideBar = !leftSideBar"></app-bar>
         <v-navigation-drawer
           v-model="leftSideBar"
           app
@@ -150,10 +121,6 @@
           </div>
         </v-main>
 
-        <closeable-dialog v-model="aboutBoxDialog">
-          <about-box />
-        </closeable-dialog>
-
         <closeable-dialog v-model="messageDialog" content-class="fill-height">
           <message-center />
         </closeable-dialog>
@@ -209,7 +176,7 @@ import { storeToRefs } from 'pinia';
 import { UrlParams } from '@vueuse/core';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import { useDisplay } from 'vuetify';
-
+import AppBar from '@/src/components/AppBar.vue';
 import { basename } from '@/src/utils/path';
 import { useDatasetStore } from '@/src/store/datasets';
 import { logError } from '@/src/utils/loggers';
@@ -232,15 +199,12 @@ import LayoutGrid from './LayoutGrid.vue';
 import ModulePanel from './ModulePanel.vue';
 import DragAndDrop from './DragAndDrop.vue';
 import CloseableDialog from './CloseableDialog.vue';
-import AboutBox from './AboutBox.vue';
 import ToolStrip from './ToolStrip.vue';
 import MessageCenter from './MessageCenter.vue';
 import MessageNotifications from './MessageNotifications.vue';
 import Settings from './Settings.vue';
 import PersistentOverlay from './PersistentOverlay.vue';
 import DataSecurityBox from './DataSecurityBox.vue';
-import VolViewFullLogo from './icons/VolViewFullLogo.vue';
-import VolViewLogo from './icons/VolViewLogo.vue';
 import KeyboardShortcuts from './KeyboardShortcuts.vue';
 import {
   DataSource,
@@ -330,19 +294,17 @@ export default defineComponent({
     LayoutGrid,
     DragAndDrop,
     CloseableDialog,
-    AboutBox,
     DataSecurityBox,
     ToolStrip,
     ModulePanel,
     MessageCenter,
     MessageNotifications,
-    VolViewFullLogo,
-    VolViewLogo,
     Settings,
     SaveSession,
     PersistentOverlay,
     KeyboardShortcuts,
     WelcomePage,
+    AppBar,
   },
 
   setup() {
@@ -582,7 +544,6 @@ export default defineComponent({
     const display = useDisplay();
 
     return {
-      aboutBoxDialog: ref(false),
       messageDialog: ref(false),
       settingsDialog: ref(false),
       dataSecurityDialog: ref(false),
@@ -649,10 +610,6 @@ export default defineComponent({
   flex: 0 0 40px;
 }
 
-.toolbar-button {
-  min-height: 100%; /* fill toolbar height */
-}
-
 .tool-separator {
   width: 75%;
   height: 1px;
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
new file mode 100644
index 000000000..93bc041ac
--- /dev/null
+++ b/src/components/AppBar.vue
@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue';
+import { useDisplay } from 'vuetify';
+import CloseableDialog from '@/src/components/CloseableDialog.vue';
+import AboutBox from '@/src/components/AboutBox.vue';
+import VolViewFullLogo from '@/src/components/icons/VolViewFullLogo.vue';
+import VolViewLogo from '@/src/components/icons/VolViewLogo.vue';
+
+const emit = defineEmits(['click:left-menu']);
+
+const { mobile } = useDisplay();
+const aboutBoxDialog = ref(false);
+</script>
+
+<template>
+  <v-app-bar app clipped-left :height="48">
+    <v-btn v-if="mobile" icon="mdi-menu" @click="emit('click:left-menu')" />
+    <v-toolbar-title class="d-flex flex-row align-center mt-3">
+      <vol-view-logo v-if="mobile" />
+      <vol-view-full-logo v-else />
+    </v-toolbar-title>
+    <v-btn
+      variant="text"
+      icon
+      :rounded="0"
+      class="toolbar-button"
+      href="https://volview.kitware.com/feedback/"
+      target="_blank"
+    >
+      <v-icon icon="mdi-comment-question-outline"></v-icon>
+      <v-tooltip activator="parent" location="bottom">
+        Ask Question/Submit Feedback
+      </v-tooltip>
+    </v-btn>
+    <v-btn
+      variant="text"
+      icon
+      :rounded="0"
+      class="toolbar-button"
+      @click="aboutBoxDialog = !aboutBoxDialog"
+    >
+      <v-icon icon="mdi-information-outline"></v-icon>
+      <v-tooltip activator="parent" location="bottom">About</v-tooltip>
+    </v-btn>
+  </v-app-bar>
+  <closeable-dialog v-model="aboutBoxDialog">
+    <about-box />
+  </closeable-dialog>
+</template>
+
+<style src="@/src/components/styles/utils.css"></style>
+<style scoped>
+.toolbar-button {
+  min-height: 100%; /* fill toolbar height */
+}
+</style>

From 78e8572437c6da39020b64bee1c37cf6db73fa13 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 1 Feb 2024 15:23:55 -0500
Subject: [PATCH 023/113] refactor(App): load entrypoint is now importable

A new load-data store is made available to make the loading state
available outside the App component.
---
 src/actions/loadUserFiles.ts                  |  45 +++++
 src/components/App.vue                        | 146 ++--------------
 src/composables/useAppLoadingNotifications.ts |  74 --------
 src/store/load-data.ts                        | 165 ++++++++++++++++++
 4 files changed, 229 insertions(+), 201 deletions(-)
 create mode 100644 src/actions/loadUserFiles.ts
 delete mode 100644 src/composables/useAppLoadingNotifications.ts
 create mode 100644 src/store/load-data.ts

diff --git a/src/actions/loadUserFiles.ts b/src/actions/loadUserFiles.ts
new file mode 100644
index 000000000..7e38464a4
--- /dev/null
+++ b/src/actions/loadUserFiles.ts
@@ -0,0 +1,45 @@
+import { fileToDataSource, uriToDataSource } from '@/src/io/import/dataSource';
+import useLoadDataStore from '@/src/store/load-data';
+import { wrapInArray } from '@/src/utils';
+import { basename } from '@/src/utils/path';
+import { parseUrl } from '@/src/utils/url';
+import { UrlParams } from '@vueuse/core';
+
+export function openFileDialog() {
+  return new Promise<File[]>((resolve) => {
+    const fileEl = document.createElement('input');
+    fileEl.setAttribute('type', 'file');
+    fileEl.setAttribute('multiple', 'multiple');
+    fileEl.setAttribute('accept', '*');
+    fileEl.addEventListener('change', () => {
+      const files = [...(fileEl.files ?? [])];
+      resolve(files);
+    });
+    fileEl.click();
+  });
+}
+
+export async function loadFiles(files: File[]) {
+  const dataSources = files.map(fileToDataSource);
+  return useLoadDataStore().loadDataSources(dataSources);
+}
+
+export async function loadUserPromptedFiles() {
+  const files = await openFileDialog();
+  return loadFiles(files);
+}
+
+export async function loadUrls(params: UrlParams) {
+  const urls = wrapInArray(params.urls);
+  const names = wrapInArray(params.names ?? []); // optional names should resolve to [] if params.names === undefined
+  const sources = urls.map((url, idx) =>
+    uriToDataSource(
+      url,
+      names[idx] ||
+        basename(parseUrl(url, window.location.href).pathname) ||
+        url
+    )
+  );
+
+  return useLoadDataStore().loadDataSources(sources);
+}
diff --git a/src/components/App.vue b/src/components/App.vue
index 11859e69c..fea9c1490 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <drag-and-drop enabled @drop-files="openFiles" id="app-container">
+  <drag-and-drop enabled @drop-files="loadFiles" id="app-container">
     <template v-slot="{ dragHover }">
       <v-app>
         <app-bar @click:left-menu="leftSideBar = !leftSideBar"></app-bar>
@@ -23,7 +23,7 @@
                 size="40"
                 icon="mdi-folder-open"
                 name="Open files"
-                @click="userPromptFiles"
+                @click="loadUserPromptedFiles"
               />
               <tool-button
                 size="40"
@@ -98,9 +98,9 @@
               <layout-grid v-show="hasData" :layout="currentLayout" />
               <welcome-page
                 v-if="!hasData"
-                :loading="isLoadingData"
+                :loading="showLoading"
                 class="clickable"
-                @click="userPromptFiles"
+                @click="loadUserPromptedFiles"
               >
                 <div v-if="!saveUrl" class="vertical-offset-margin">
                   <v-icon size="64">mdi-cloud-off-outline</v-icon>
@@ -165,7 +165,6 @@
 import {
   computed,
   defineComponent,
-  nextTick,
   onMounted,
   provide,
   Ref,
@@ -176,15 +175,13 @@ import { storeToRefs } from 'pinia';
 import { UrlParams } from '@vueuse/core';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import { useDisplay } from 'vuetify';
+import useLoadDataStore from '@/src/store/load-data';
 import AppBar from '@/src/components/AppBar.vue';
-import { basename } from '@/src/utils/path';
-import { useDatasetStore } from '@/src/store/datasets';
-import { logError } from '@/src/utils/loggers';
 import {
-  importDataSources,
-  ImportDataSourcesResult,
-  convertSuccessResultToDataSelection,
-} from '@/src/io/import/importDataSources';
+  loadFiles,
+  loadUserPromptedFiles,
+  loadUrls,
+} from '@/src/actions/loadUserFiles';
 import vtkResliceCursorWidget, {
   ResliceCursorWidgetState,
 } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
@@ -193,7 +190,6 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import WelcomePage from '@/src/components/WelcomePage.vue';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
-import { parseUrl } from '@/src/utils/url';
 import ToolButton from './ToolButton.vue';
 import LayoutGrid from './LayoutGrid.vue';
 import ModulePanel from './ModulePanel.vue';
@@ -206,12 +202,6 @@ import Settings from './Settings.vue';
 import PersistentOverlay from './PersistentOverlay.vue';
 import DataSecurityBox from './DataSecurityBox.vue';
 import KeyboardShortcuts from './KeyboardShortcuts.vue';
-import {
-  DataSource,
-  fileToDataSource,
-  getDataSourceName,
-  uriToDataSource,
-} from '../io/import/dataSource';
 import { useImageStore } from '../store/datasets-images';
 import { useViewStore } from '../store/views';
 import { ConnectionState, useServerStore } from '../store/server';
@@ -221,70 +211,8 @@ import { serialize } from '../io/state-file';
 import SaveSession from './SaveSession.vue';
 import { useGlobalErrorHook } from '../composables/useGlobalErrorHook';
 import { useWebGLWatchdog } from '../composables/useWebGLWatchdog';
-import { useAppLoadingNotifications } from '../composables/useAppLoadingNotifications';
-import { wrapInArray } from '../utils';
 import { useKeyboardShortcuts } from '../composables/useKeyboardShortcuts';
 import { VTKResliceCursor } from '../constants';
-import { partitionResults } from '../core/pipeline';
-
-async function loadFiles(
-  sources: DataSource[],
-  setError: (err: Error) => void
-) {
-  const dataStore = useDatasetStore();
-
-  let results: ImportDataSourcesResult[];
-  try {
-    results = await importDataSources(sources);
-  } catch (error) {
-    setError(error as Error);
-    return;
-  }
-
-  const [succeeded, errored] = partitionResults(results);
-
-  if (!dataStore.primarySelection && succeeded.length) {
-    const selection = convertSuccessResultToDataSelection(succeeded[0]);
-    if (selection) {
-      dataStore.setPrimarySelection(selection);
-    }
-  }
-
-  if (errored.length) {
-    const errorMessages = errored.map((errResult) => {
-      // pick first error
-      const [firstError] = errResult.errors;
-      // pick innermost dataset that errored
-      const name = getDataSourceName(firstError.inputDataStackTrace[0]);
-      // log error for debugging
-      logError(firstError.cause);
-      return `- ${name}: ${firstError.message}`;
-    });
-    const failedError = new Error(
-      `These files failed to load:\n${errorMessages.join('\n')}`
-    );
-
-    setError(failedError);
-  }
-}
-
-async function loadRemoteFilesFromURLParams(
-  params: UrlParams,
-  setError: (err: Error) => void
-) {
-  const urls = wrapInArray(params.urls);
-  const names = wrapInArray(params.names ?? []); // optional names should resolve to [] if params.names === undefined
-  const sources = urls.map((url, idx) =>
-    uriToDataSource(
-      url,
-      names[idx] ||
-        basename(parseUrl(url, window.location.href).pathname) ||
-        url
-    )
-  );
-
-  await loadFiles(sources, setError);
-}
 
 export default defineComponent({
   name: 'App',
@@ -317,7 +245,6 @@ export default defineComponent({
     useWebGLWatchdog();
     useKeyboardShortcuts();
 
-    const { runAsLoading } = useAppLoadingNotifications();
     const { currentImageData, currentImageMetadata } = useCurrentImage();
 
     // --- layout --- //
@@ -403,42 +330,19 @@ export default defineComponent({
 
     // --- file handling --- //
 
+    const loadDataStore = useLoadDataStore();
     const hasData = computed(
       () =>
         imageStore.idList.length > 0 ||
         Object.keys(dicomStore.volumeInfo).length > 0
     );
-    const loadingDataCounter = ref(0);
-    const isLoadingData = computed(
-      // hasData: show loading during dicom loading/rendering
-      () => loadingDataCounter.value > 0 || hasData.value
+    // show loading if actually loading or has any data,
+    // since the welcome screen shouldn't be visible when
+    // a dataset is opened.
+    const showLoading = computed(
+      () => loadDataStore.isLoading || hasData.value
     );
 
-    async function openFiles(files: FileList | null) {
-      if (!files) {
-        return;
-      }
-
-      const dataSources = Array.from(files).map(fileToDataSource);
-      try {
-        loadingDataCounter.value += 1;
-        await runAsLoading((setError) => loadFiles(dataSources, setError));
-      } finally {
-        loadingDataCounter.value -= 1;
-      }
-    }
-
-    const fileEl = document.createElement('input');
-    fileEl.setAttribute('type', 'file');
-    fileEl.setAttribute('multiple', 'multiple');
-    fileEl.setAttribute('accept', '*');
-    fileEl.addEventListener('change', () => openFiles(fileEl.files));
-
-    function userPromptFiles() {
-      fileEl.value = '';
-      fileEl.click();
-    }
-
     // --- parse URL -- //
 
     const urlParams = vtkURLExtract.extractURLParameters() as UrlParams;
@@ -448,19 +352,7 @@ export default defineComponent({
         return;
       }
 
-      // TODO remove this nextTick when we switch away from
-      // vue-toastification.
-      // We run in nextTick to ensure the library is mounted.
-      nextTick(async () => {
-        try {
-          loadingDataCounter.value += 1;
-          await runAsLoading((setError) =>
-            loadRemoteFilesFromURLParams(urlParams, setError)
-          );
-        } finally {
-          loadingDataCounter.value -= 1;
-        }
-      });
+      loadUrls(urlParams);
     });
 
     // --- remote server --- //
@@ -557,13 +449,13 @@ export default defineComponent({
       layoutName,
       currentLayout,
       Layouts,
-      userPromptFiles,
-      openFiles,
+      loadUserPromptedFiles,
+      loadFiles,
       hasData,
       saveUrl,
       serverConnectionIcon,
       serverUrl,
-      isLoadingData,
+      showLoading,
     };
   },
 });
diff --git a/src/composables/useAppLoadingNotifications.ts b/src/composables/useAppLoadingNotifications.ts
deleted file mode 100644
index d412cd371..000000000
--- a/src/composables/useAppLoadingNotifications.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { TYPE } from 'vue-toastification';
-import { useToast } from '@/src/composables/useToast';
-import { ToastID } from 'vue-toastification/dist/types/types';
-import { useMessageStore } from '../store/messages';
-
-export function useAppLoadingNotifications() {
-  const toast = useToast();
-  const messageStore = useMessageStore();
-
-  let loadingCount = 0;
-  let toastID: ToastID | null = null;
-  let error: Error | null = null;
-
-  const resetState = () => {
-    loadingCount = 0;
-    toastID = null;
-    error = null;
-  };
-
-  const _setError = (err: Error) => {
-    error = err;
-  };
-
-  const startLoading = () => {
-    loadingCount++;
-    if (toastID === null) {
-      toastID = toast.info('Loading datasets...', {
-        timeout: false,
-        closeButton: false,
-        closeOnClick: false,
-      });
-    }
-  };
-
-  const stopLoading = () => {
-    loadingCount--;
-    if (loadingCount === 0 && toastID !== null) {
-      if (error) {
-        console.error(error);
-        toast.dismiss(toastID);
-        messageStore.addError('Some files failed to load', error);
-      } else {
-        toast.update(toastID, {
-          content: 'Datasets loaded!',
-          options: {
-            type: TYPE.SUCCESS,
-            timeout: 3000,
-            closeButton: 'button',
-            closeOnClick: true,
-          },
-        });
-      }
-      resetState();
-    }
-  };
-
-  /**
-   * Notifies of loading status until all function calls return.
-   * @param fn function to call
-   * @returns whatever fn returns.
-   */
-  const runAsLoading = async (fn: (setError: typeof _setError) => void) => {
-    startLoading();
-    try {
-      return await fn(_setError);
-    } finally {
-      stopLoading();
-    }
-  };
-
-  return {
-    runAsLoading,
-  };
-}
diff --git a/src/store/load-data.ts b/src/store/load-data.ts
new file mode 100644
index 000000000..c0533f346
--- /dev/null
+++ b/src/store/load-data.ts
@@ -0,0 +1,165 @@
+import { partitionResults } from '@/src/core/pipeline';
+import { DataSource, getDataSourceName } from '@/src/io/import/dataSource';
+import {
+  ImportDataSourcesResult,
+  convertSuccessResultToDataSelection,
+  importDataSources,
+} from '@/src/io/import/importDataSources';
+import { useDatasetStore } from '@/src/store/datasets';
+import { useMessageStore } from '@/src/store/messages';
+import { Maybe } from '@/src/types';
+import { logError } from '@/src/utils/loggers';
+import { defineStore } from 'pinia';
+import { computed, ref, watch } from 'vue';
+import { useToast } from '@/src/composables/useToast';
+import { TYPE } from 'vue-toastification';
+import { ToastID, ToastOptions } from 'vue-toastification/dist/types/types';
+
+const NotificationMessages = {
+  Loading: 'Loading datasets...',
+  Done: 'Datasets loaded!',
+  Error: 'Some files failed to load',
+};
+
+const LoadingToastOptions = {
+  type: TYPE.INFO,
+  timeout: false,
+  closeButton: false,
+  closeOnClick: false,
+} satisfies ToastOptions;
+
+function useLoadingNotifications() {
+  const messageStore = useMessageStore();
+
+  const loadingCount = ref(0);
+  const loadingError = ref<Maybe<Error>>();
+
+  const startLoading = () => {
+    loadingCount.value += 1;
+  };
+
+  const stopLoading = () => {
+    if (loadingCount.value === 0) return;
+    loadingCount.value -= 1;
+  };
+
+  const setError = (err: Error) => {
+    loadingError.value = err;
+  };
+
+  const toast = useToast();
+  let toastID: Maybe<ToastID> = null;
+
+  const showLoadingToast = () => {
+    if (toastID == null) {
+      toastID = toast.info(NotificationMessages.Loading, LoadingToastOptions);
+    } else {
+      toast.update(toastID, {
+        content: NotificationMessages.Loading,
+        options: LoadingToastOptions,
+      });
+    }
+  };
+
+  const showResults = () => {
+    if (toastID == null) return;
+    const error = loadingError.value;
+    loadingError.value = null;
+
+    if (error) {
+      logError(error);
+      toast.dismiss(toastID);
+      messageStore.addError(NotificationMessages.Error, error);
+    } else {
+      toast.update(toastID, {
+        content: NotificationMessages.Done,
+        options: {
+          type: TYPE.SUCCESS,
+          timeout: 3000,
+          closeButton: 'button',
+          closeOnClick: true,
+          onClose() {
+            toastID = null;
+          },
+        },
+      });
+    }
+  };
+
+  watch(loadingCount, (count) => {
+    if (count) showLoadingToast();
+    else showResults();
+  });
+
+  const isLoading = computed(() => {
+    return loadingCount.value > 0;
+  });
+
+  return {
+    isLoading,
+    startLoading,
+    stopLoading,
+    setError,
+  };
+}
+
+const useLoadDataStore = defineStore('loadData', () => {
+  const { startLoading, stopLoading, setError, isLoading } =
+    useLoadingNotifications();
+
+  const wrapWithLoading = <T extends (...args: any[]) => void>(fn: T) => {
+    return async function wrapper(...args: any[]) {
+      try {
+        startLoading();
+        await fn(...args);
+      } finally {
+        stopLoading();
+      }
+    };
+  };
+
+  const loadDataSources = wrapWithLoading(async (sources: DataSource[]) => {
+    const dataStore = useDatasetStore();
+
+    let results: ImportDataSourcesResult[];
+    try {
+      results = await importDataSources(sources);
+    } catch (error) {
+      setError(error as Error);
+      return;
+    }
+
+    const [succeeded, errored] = partitionResults(results);
+
+    if (!dataStore.primarySelection && succeeded.length) {
+      const selection = convertSuccessResultToDataSelection(succeeded[0]);
+      if (selection) {
+        dataStore.setPrimarySelection(selection);
+      }
+    }
+
+    if (errored.length) {
+      const errorMessages = errored.map((errResult) => {
+        // pick first error
+        const [firstError] = errResult.errors;
+        // pick innermost dataset that errored
+        const name = getDataSourceName(firstError.inputDataStackTrace[0]);
+        // log error for debugging
+        logError(firstError.cause);
+        return `- ${name}: ${firstError.message}`;
+      });
+      const failedError = new Error(
+        `These files failed to load:\n${errorMessages.join('\n')}`
+      );
+
+      setError(failedError);
+    }
+  });
+
+  return {
+    isLoading,
+    loadDataSources,
+  };
+});
+
+export default useLoadDataStore;

From 38b004dcf7939e5aa48a466bf73934163e4169a1 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 1 Feb 2024 16:22:12 -0500
Subject: [PATCH 024/113] refactor(App): split out remote-save-state store

Splits out the WelcomePage to add more override points.
---
 src/components/App.vue         | 71 +++++++---------------------------
 src/components/WelcomePage.vue | 32 ++++++++++++++-
 src/store/remote-save-state.ts | 48 +++++++++++++++++++++++
 3 files changed, 93 insertions(+), 58 deletions(-)
 create mode 100644 src/store/remote-save-state.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index fea9c1490..cedd65e1f 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -29,7 +29,7 @@
                 size="40"
                 icon="mdi-content-save-all"
                 name="Save session"
-                :loading="saveHappening"
+                :loading="isSaving"
                 @click="handleSave"
               />
               <div class="my-1 tool-separator" />
@@ -102,20 +102,6 @@
                 class="clickable"
                 @click="loadUserPromptedFiles"
               >
-                <div v-if="!saveUrl" class="vertical-offset-margin">
-                  <v-icon size="64">mdi-cloud-off-outline</v-icon>
-                </div>
-                <div v-if="!saveUrl">
-                  Secure: Image data never leaves your machine.
-                </div>
-                <v-btn
-                  class="mt-2"
-                  variant="tonal"
-                  color="secondary"
-                  @click.stop="dataSecurityDialog = true"
-                >
-                  Learn More
-                </v-btn>
               </welcome-page>
             </div>
           </div>
@@ -137,10 +123,6 @@
           </template>
         </closeable-dialog>
 
-        <closeable-dialog v-model="dataSecurityDialog">
-          <data-security-box />
-        </closeable-dialog>
-
         <keyboard-shortcuts />
       </v-app>
       <persistent-overlay
@@ -176,6 +158,7 @@ import { UrlParams } from '@vueuse/core';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import { useDisplay } from 'vuetify';
 import useLoadDataStore from '@/src/store/load-data';
+import useRemoteSaveStateStore from '@/src/store/remote-save-state';
 import AppBar from '@/src/components/AppBar.vue';
 import {
   loadFiles,
@@ -200,14 +183,12 @@ import MessageCenter from './MessageCenter.vue';
 import MessageNotifications from './MessageNotifications.vue';
 import Settings from './Settings.vue';
 import PersistentOverlay from './PersistentOverlay.vue';
-import DataSecurityBox from './DataSecurityBox.vue';
 import KeyboardShortcuts from './KeyboardShortcuts.vue';
 import { useImageStore } from '../store/datasets-images';
 import { useViewStore } from '../store/views';
 import { ConnectionState, useServerStore } from '../store/server';
 import { MessageType, useMessageStore } from '../store/messages';
 import { Layouts } from '../config';
-import { serialize } from '../io/state-file';
 import SaveSession from './SaveSession.vue';
 import { useGlobalErrorHook } from '../composables/useGlobalErrorHook';
 import { useWebGLWatchdog } from '../composables/useWebGLWatchdog';
@@ -222,7 +203,6 @@ export default defineComponent({
     LayoutGrid,
     DragAndDrop,
     CloseableDialog,
-    DataSecurityBox,
     ToolStrip,
     ModulePanel,
     MessageCenter,
@@ -399,35 +379,17 @@ export default defineComponent({
     });
 
     const saveDialog = ref(false);
-    const saveUrl =
-      import.meta.env.VITE_ENABLE_REMOTE_SAVE && (urlParams.save as string);
-    const saveHappening = ref(false);
-
-    const handleSave = async () => {
-      if (saveUrl) {
-        try {
-          saveHappening.value = true;
-
-          const blob = await serialize();
-          const saveResult = await fetch(saveUrl, {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/zip',
-              'Content-Length': blob.size.toString(),
-            },
-            body: blob,
-          });
-
-          if (saveResult.ok) messageStore.addSuccess('Save Successful');
-          else messageStore.addError('Save Failed', 'Network response not OK');
-        } catch (error) {
-          messageStore.addError(
-            'Save Failed with error',
-            `Failed from: ${error}`
-          );
-        } finally {
-          saveHappening.value = false;
-        }
+
+    const remoteSaveStateStore = useRemoteSaveStateStore();
+    const { isSaving, saveUrl } = storeToRefs(remoteSaveStateStore);
+
+    if (import.meta.env.VITE_ENABLE_REMOTE_SAVE) {
+      remoteSaveStateStore.setSaveUrl(urlParams.save.toString());
+    }
+
+    const handleSave = () => {
+      if (saveUrl.value !== '') {
+        remoteSaveStateStore.saveState();
       } else {
         saveDialog.value = true;
       }
@@ -441,7 +403,7 @@ export default defineComponent({
       dataSecurityDialog: ref(false),
       saveDialog,
       handleSave,
-      saveHappening,
+      isSaving,
       leftSideBar: ref(!display.mobile.value),
       mobile: display.mobile,
       messageCount,
@@ -452,7 +414,6 @@ export default defineComponent({
       loadUserPromptedFiles,
       loadFiles,
       hasData,
-      saveUrl,
       serverConnectionIcon,
       serverUrl,
       showLoading,
@@ -509,10 +470,6 @@ export default defineComponent({
   border-top: 1px solid rgb(112, 112, 112);
 }
 
-.vertical-offset-margin {
-  margin-top: 128px;
-}
-
 .dnd-prompt {
   background: rgba(0, 0, 0, 0.4);
   color: white;
diff --git a/src/components/WelcomePage.vue b/src/components/WelcomePage.vue
index 775c66fa3..87c90f03e 100644
--- a/src/components/WelcomePage.vue
+++ b/src/components/WelcomePage.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue';
+import CloseableDialog from '@/src/components/CloseableDialog.vue';
+import DataSecurityBox from '@/src/components/DataSecurityBox.vue';
+import useRemoteSaveStateStore from '@/src/store/remote-save-state';
+
 withDefaults(
   defineProps<{
     loading?: boolean;
@@ -7,6 +12,11 @@ withDefaults(
     loading: false,
   }
 );
+
+const isRemoteSaveDisabled = computed(
+  () => useRemoteSaveStateStore().saveUrl === ''
+);
+const dataSecurityDialog = ref(false);
 </script>
 
 <template>
@@ -31,7 +41,20 @@ withDefaults(
             <div>Drag &amp; drop your DICOM files.</div>
 
             <div class="vertical-offset-margin">
-              <slot></slot>
+              <div v-if="isRemoteSaveDisabled" class="vertical-offset-margin">
+                <v-icon size="64">mdi-cloud-off-outline</v-icon>
+              </div>
+              <div v-if="isRemoteSaveDisabled">
+                Secure: Image data never leaves your machine.
+              </div>
+              <v-btn
+                class="mt-2"
+                variant="tonal"
+                color="secondary"
+                @click.stop="dataSecurityDialog = true"
+              >
+                Learn More
+              </v-btn>
             </div>
           </template>
           <template v-else>
@@ -42,6 +65,9 @@ withDefaults(
       </v-row>
     </v-col>
   </v-container>
+  <closeable-dialog v-model="dataSecurityDialog">
+    <data-security-box />
+  </closeable-dialog>
 </template>
 
 <style scoped>
@@ -52,4 +78,8 @@ withDefaults(
   align-items: center;
   max-width: 100%;
 }
+
+.vertical-offset-margin {
+  margin-top: 128px;
+}
 </style>
diff --git a/src/store/remote-save-state.ts b/src/store/remote-save-state.ts
new file mode 100644
index 000000000..0b60b5ce2
--- /dev/null
+++ b/src/store/remote-save-state.ts
@@ -0,0 +1,48 @@
+import { serialize } from '@/src/io/state-file';
+import { useMessageStore } from '@/src/store/messages';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+const useRemoteSaveStateStore = defineStore('remoteSaveState', () => {
+  const saveUrl = ref('');
+  const isSaving = ref(false);
+
+  const messageStore = useMessageStore();
+
+  const setSaveUrl = (url: string) => {
+    saveUrl.value = url;
+  };
+
+  const saveState = async () => {
+    if (!saveUrl.value || isSaving.value) return;
+    try {
+      isSaving.value = true;
+
+      const blob = await serialize();
+      const saveResult = await fetch(saveUrl.value, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/zip',
+          'Content-Length': blob.size.toString(),
+        },
+        body: blob,
+      });
+
+      if (saveResult.ok) messageStore.addSuccess('Save Successful');
+      else messageStore.addError('Save Failed', 'Network response not OK');
+    } catch (error) {
+      messageStore.addError('Save Failed with error', `Failed from: ${error}`);
+    } finally {
+      isSaving.value = false;
+    }
+  };
+
+  return {
+    saveUrl,
+    setSaveUrl,
+    isSaving,
+    saveState,
+  };
+});
+
+export default useRemoteSaveStateStore;

From 18f00040a33328990686bab1a3c55766f9fad798 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 1 Feb 2024 16:58:36 -0500
Subject: [PATCH 025/113] refactor(App): control strip to its own component

Split up the app component to facilitate more override points.

ToolStrip has been renamed to ControlsStrip to avoid name conflicts with
the tools.
---
 src/components/App.vue                        | 256 ++----------------
 .../{ToolButton.vue => ControlButton.vue}     |   0
 src/components/ControlsStrip.vue              | 225 +++++++++++++++
 .../{ToolStrip.vue => ControlsStripTools.vue} |  62 ++---
 src/components/LayoutGrid.vue                 |   2 +-
 ...nuToolButton.vue => MenuControlButton.vue} |   8 +-
 ...olButton.spec.js => ControlButton.spec.js} |  12 +-
 src/components/tools/ResetViews.vue           |   6 +-
 src/components/tools/crop/CropControls.vue    |   6 +-
 9 files changed, 297 insertions(+), 280 deletions(-)
 rename src/components/{ToolButton.vue => ControlButton.vue} (100%)
 create mode 100644 src/components/ControlsStrip.vue
 rename src/components/{ToolStrip.vue => ControlsStripTools.vue} (79%)
 rename src/components/{MenuToolButton.vue => MenuControlButton.vue} (94%)
 rename src/components/__tests__/{ToolButton.spec.js => ControlButton.spec.js} (68%)

diff --git a/src/components/App.vue b/src/components/App.vue
index cedd65e1f..9a9ed892f 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -15,87 +15,9 @@
         </v-navigation-drawer>
         <v-main id="content-main">
           <div class="fill-height d-flex flex-row flex-grow-1">
-            <div
-              id="tools-strip"
-              class="bg-grey-darken-4 d-flex flex-column align-center"
-            >
-              <tool-button
-                size="40"
-                icon="mdi-folder-open"
-                name="Open files"
-                @click="loadUserPromptedFiles"
-              />
-              <tool-button
-                size="40"
-                icon="mdi-content-save-all"
-                name="Save session"
-                :loading="isSaving"
-                @click="handleSave"
-              />
-              <div class="my-1 tool-separator" />
-              <v-menu location="right" :close-on-content-click="true">
-                <template v-slot:activator="{ props }">
-                  <div>
-                    <tool-button
-                      v-bind="props"
-                      size="40"
-                      icon="mdi-view-dashboard"
-                      name="Layouts"
-                    />
-                  </div>
-                </template>
-                <v-card>
-                  <v-card-text>
-                    <v-radio-group
-                      v-model="layoutName"
-                      class="mt-0"
-                      hide-details
-                    >
-                      <v-radio
-                        v-for="(value, key) in Layouts"
-                        :key="key"
-                        :label="value.name"
-                        :value="key"
-                      />
-                    </v-radio-group>
-                  </v-card-text>
-                </v-card>
-              </v-menu>
-              <template v-if="hasData">
-                <tool-strip />
-              </template>
-              <v-spacer />
-              <tool-button
-                v-if="serverUrl"
-                size="40"
-                :icon="serverConnectionIcon"
-                name="Open Server Settings"
-                @click="settingsDialog = true"
-              />
-              <v-badge
-                offset-x="10"
-                offset-y="10"
-                :content="messageCount"
-                :color="messageBadgeColor"
-                :model-value="messageCount > 0"
-                id="notifications"
-              >
-                <tool-button
-                  size="40"
-                  icon="mdi-bell-outline"
-                  name="Notifications"
-                  @click="messageDialog = true"
-                />
-              </v-badge>
-              <tool-button
-                size="40"
-                icon="mdi-cog"
-                name="Settings"
-                @click="settingsDialog = true"
-              />
-            </div>
+            <controls-strip :has-data="hasData"></controls-strip>
             <div class="d-flex flex-column flex-grow-1">
-              <layout-grid v-show="hasData" :layout="currentLayout" />
+              <layout-grid v-show="hasData" :layout="layout" />
               <welcome-page
                 v-if="!hasData"
                 :loading="showLoading"
@@ -106,23 +28,6 @@
             </div>
           </div>
         </v-main>
-
-        <closeable-dialog v-model="messageDialog" content-class="fill-height">
-          <message-center />
-        </closeable-dialog>
-
-        <message-notifications @open-notifications="messageDialog = true" />
-
-        <closeable-dialog v-model="settingsDialog">
-          <settings />
-        </closeable-dialog>
-
-        <closeable-dialog v-model="saveDialog" max-width="30%">
-          <template v-slot="{ close }">
-            <save-session :close="close" />
-          </template>
-        </closeable-dialog>
-
         <keyboard-shortcuts />
       </v-app>
       <persistent-overlay
@@ -144,22 +49,16 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  provide,
-  Ref,
-  ref,
-  watch,
-} from 'vue';
+import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import { UrlParams } from '@vueuse/core';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
 import { useDisplay } from 'vuetify';
 import useLoadDataStore from '@/src/store/load-data';
+import { useViewStore } from '@/src/store/views';
 import useRemoteSaveStateStore from '@/src/store/remote-save-state';
 import AppBar from '@/src/components/AppBar.vue';
+import ControlsStrip from '@/src/components/ControlsStrip.vue';
 import {
   loadFiles,
   loadUserPromptedFiles,
@@ -173,42 +72,26 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import WelcomePage from '@/src/components/WelcomePage.vue';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
-import ToolButton from './ToolButton.vue';
-import LayoutGrid from './LayoutGrid.vue';
-import ModulePanel from './ModulePanel.vue';
-import DragAndDrop from './DragAndDrop.vue';
-import CloseableDialog from './CloseableDialog.vue';
-import ToolStrip from './ToolStrip.vue';
-import MessageCenter from './MessageCenter.vue';
-import MessageNotifications from './MessageNotifications.vue';
-import Settings from './Settings.vue';
-import PersistentOverlay from './PersistentOverlay.vue';
-import KeyboardShortcuts from './KeyboardShortcuts.vue';
-import { useImageStore } from '../store/datasets-images';
-import { useViewStore } from '../store/views';
-import { ConnectionState, useServerStore } from '../store/server';
-import { MessageType, useMessageStore } from '../store/messages';
-import { Layouts } from '../config';
-import SaveSession from './SaveSession.vue';
-import { useGlobalErrorHook } from '../composables/useGlobalErrorHook';
-import { useWebGLWatchdog } from '../composables/useWebGLWatchdog';
-import { useKeyboardShortcuts } from '../composables/useKeyboardShortcuts';
-import { VTKResliceCursor } from '../constants';
+import LayoutGrid from '@/src/components/LayoutGrid.vue';
+import ModulePanel from '@/src/components/ModulePanel.vue';
+import DragAndDrop from '@/src/components/DragAndDrop.vue';
+import PersistentOverlay from '@/src/components/PersistentOverlay.vue';
+import KeyboardShortcuts from '@/src/components/KeyboardShortcuts.vue';
+import { useImageStore } from '@/src/store/datasets-images';
+import { useServerStore } from '@/src/store/server';
+import { useGlobalErrorHook } from '@/src/composables/useGlobalErrorHook';
+import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
+import { useKeyboardShortcuts } from '@/src/composables/useKeyboardShortcuts';
+import { VTKResliceCursor } from '@/src/constants';
 
 export default defineComponent({
   name: 'App',
 
   components: {
-    ToolButton,
+    ControlsStrip,
     LayoutGrid,
     DragAndDrop,
-    CloseableDialog,
-    ToolStrip,
     ModulePanel,
-    MessageCenter,
-    MessageNotifications,
-    Settings,
-    SaveSession,
     PersistentOverlay,
     KeyboardShortcuts,
     WelcomePage,
@@ -218,8 +101,6 @@ export default defineComponent({
   setup() {
     const imageStore = useImageStore();
     const dicomStore = useDICOMStore();
-    const messageStore = useMessageStore();
-    const viewStore = useViewStore();
 
     useGlobalErrorHook();
     useWebGLWatchdog();
@@ -227,31 +108,6 @@ export default defineComponent({
 
     const { currentImageData, currentImageMetadata } = useCurrentImage();
 
-    // --- layout --- //
-
-    const layoutName: Ref<string> = ref('Quad View');
-    const { layout: currentLayout } = storeToRefs(viewStore);
-
-    watch(
-      layoutName,
-      () => {
-        const layout = Layouts[layoutName.value] || [];
-        viewStore.setLayout(layout);
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    watch(currentLayout, () => {
-      if (
-        currentLayout.value?.name &&
-        currentLayout.value.name !== layoutName.value
-      ) {
-        layoutName.value = currentLayout.value.name;
-      }
-    });
-
     // --- ResliceCursorWidget --- //
     // Construct the common instance of vtkResliceCursorWidget and provide it
     // to all the child ObliqueView components.
@@ -338,85 +194,33 @@ export default defineComponent({
     // --- remote server --- //
 
     const serverStore = useServerStore();
-    const { url: serverUrl } = storeToRefs(serverStore);
-
-    const serverConnectionIcon = computed(() => {
-      switch (serverStore.connState) {
-        case ConnectionState.Connected:
-          return 'mdi-lan-check';
-        case ConnectionState.Disconnected:
-          return 'mdi-lan-disconnect';
-        case ConnectionState.Pending:
-          return 'mdi-lan-pending';
-        default:
-          throw new Error('Invalid connection state');
-      }
-    });
 
     onMounted(() => {
       serverStore.connect();
     });
 
-    // --- --- //
-
-    const messageCount = computed(() => messageStore.importantMessages.length);
-    const messageBadgeColor = computed(() => {
-      if (
-        messageStore.importantMessages.find(
-          (msg) => msg.type === MessageType.Error
-        )
-      ) {
-        return 'error';
-      }
-      if (
-        messageStore.importantMessages.find(
-          (msg) => msg.type === MessageType.Warning
-        )
-      ) {
-        return 'warning';
-      }
-      return 'primary';
-    });
-
-    const saveDialog = ref(false);
+    // --- save state --- //
 
     const remoteSaveStateStore = useRemoteSaveStateStore();
-    const { isSaving, saveUrl } = storeToRefs(remoteSaveStateStore);
-
     if (import.meta.env.VITE_ENABLE_REMOTE_SAVE) {
       remoteSaveStateStore.setSaveUrl(urlParams.save.toString());
     }
 
-    const handleSave = () => {
-      if (saveUrl.value !== '') {
-        remoteSaveStateStore.saveState();
-      } else {
-        saveDialog.value = true;
-      }
-    };
+    // --- layout --- //
+
+    const { layout } = storeToRefs(useViewStore());
+
+    // --- //
 
     const display = useDisplay();
 
     return {
-      messageDialog: ref(false),
-      settingsDialog: ref(false),
-      dataSecurityDialog: ref(false),
-      saveDialog,
-      handleSave,
-      isSaving,
       leftSideBar: ref(!display.mobile.value),
-      mobile: display.mobile,
-      messageCount,
-      messageBadgeColor,
-      layoutName,
-      currentLayout,
-      Layouts,
       loadUserPromptedFiles,
       loadFiles,
       hasData,
-      serverConnectionIcon,
-      serverUrl,
       showLoading,
+      layout,
     };
   },
 });
@@ -458,18 +262,6 @@ export default defineComponent({
   height: 100%;
 }
 
-#tools-strip {
-  border-left: 1px solid #212121;
-  flex: 0 0 40px;
-}
-
-.tool-separator {
-  width: 75%;
-  height: 1px;
-  border: none;
-  border-top: 1px solid rgb(112, 112, 112);
-}
-
 .dnd-prompt {
   background: rgba(0, 0, 0, 0.4);
   color: white;
diff --git a/src/components/ToolButton.vue b/src/components/ControlButton.vue
similarity index 100%
rename from src/components/ToolButton.vue
rename to src/components/ControlButton.vue
diff --git a/src/components/ControlsStrip.vue b/src/components/ControlsStrip.vue
new file mode 100644
index 000000000..7644a335e
--- /dev/null
+++ b/src/components/ControlsStrip.vue
@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { ref, computed, watch } from 'vue';
+import { loadUserPromptedFiles } from '@/src/actions/loadUserFiles';
+import useRemoteSaveStateStore from '@/src/store/remote-save-state';
+import CloseableDialog from '@/src/components/CloseableDialog.vue';
+import SaveSession from '@/src/components/SaveSession.vue';
+import ControlButton from '@/src/components/ControlButton.vue';
+import MessageNotifications from '@/src/components/MessageNotifications.vue';
+import Settings from '@/src/components/Settings.vue';
+import ControlsStripTools from '@/src/components/ControlsStripTools.vue';
+import MessageCenter from '@/src/components/MessageCenter.vue';
+import { MessageType, useMessageStore } from '@/src/store/messages';
+import { ConnectionState, useServerStore } from '@/src/store/server';
+import { useViewStore } from '@/src/store/views';
+import { Layouts } from '@/src/config';
+
+interface Props {
+  hasData: boolean;
+}
+
+defineProps<Props>();
+
+function useViewLayout() {
+  const viewStore = useViewStore();
+  const layoutName = ref('Quad View');
+  const { layout: currentLayout } = storeToRefs(viewStore);
+
+  watch(
+    layoutName,
+    () => {
+      const layout = Layouts[layoutName.value] || [];
+      viewStore.setLayout(layout);
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(currentLayout, () => {
+    if (
+      currentLayout.value?.name &&
+      currentLayout.value.name !== layoutName.value
+    ) {
+      layoutName.value = currentLayout.value.name;
+    }
+  });
+
+  return layoutName;
+}
+
+function useSaveControls() {
+  const remoteSaveStateStore = useRemoteSaveStateStore();
+  const { isSaving, saveUrl } = storeToRefs(remoteSaveStateStore);
+
+  const saveDialog = ref(false);
+
+  const handleSave = () => {
+    if (saveUrl.value !== '') {
+      remoteSaveStateStore.saveState();
+    } else {
+      saveDialog.value = true;
+    }
+  };
+
+  return { handleSave, isSaving, saveDialog };
+}
+
+function useMessageBubble() {
+  const messageStore = useMessageStore();
+  const count = computed(() => messageStore.importantMessages.length);
+  const badgeColor = computed(() => {
+    if (
+      messageStore.importantMessages.find(
+        (msg) => msg.type === MessageType.Error
+      )
+    ) {
+      return 'error';
+    }
+    if (
+      messageStore.importantMessages.find(
+        (msg) => msg.type === MessageType.Warning
+      )
+    ) {
+      return 'warning';
+    }
+    return 'primary';
+  });
+
+  return { count, badgeColor };
+}
+
+function useServerConnection() {
+  const serverStore = useServerStore();
+
+  const icon = computed(() => {
+    switch (serverStore.connState) {
+      case ConnectionState.Connected:
+        return 'mdi-lan-check';
+      case ConnectionState.Disconnected:
+        return 'mdi-lan-disconnect';
+      case ConnectionState.Pending:
+        return 'mdi-lan-pending';
+      default:
+        throw new Error('Invalid connection state');
+    }
+  });
+
+  const { url } = storeToRefs(serverStore);
+
+  return { icon, url };
+}
+
+const settingsDialog = ref(false);
+const messageDialog = ref(false);
+const { icon: connIcon, url: serverUrl } = useServerConnection();
+const layoutName = useViewLayout();
+const { handleSave, saveDialog, isSaving } = useSaveControls();
+const { count: msgCount, badgeColor: msgBadgeColor } = useMessageBubble();
+</script>
+
+<template>
+  <div
+    id="tools-strip"
+    class="bg-grey-darken-4 d-flex flex-column align-center"
+  >
+    <control-button
+      size="40"
+      icon="mdi-folder-open"
+      name="Open files"
+      @click="loadUserPromptedFiles"
+    />
+    <control-button
+      size="40"
+      icon="mdi-content-save-all"
+      name="Save session"
+      :loading="isSaving"
+      @click="handleSave"
+    />
+    <div class="my-1 tool-separator" />
+    <v-menu location="right" :close-on-content-click="true">
+      <template v-slot:activator="{ props }">
+        <div>
+          <control-button
+            v-bind="props"
+            size="40"
+            icon="mdi-view-dashboard"
+            name="Layouts"
+          />
+        </div>
+      </template>
+      <v-card>
+        <v-card-text>
+          <v-radio-group v-model="layoutName" class="mt-0" hide-details>
+            <v-radio
+              v-for="(value, key) in Layouts"
+              :key="key"
+              :label="value.name"
+              :value="key"
+            />
+          </v-radio-group>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+    <controls-strip-tools v-if="hasData" />
+    <v-spacer />
+    <control-button
+      v-if="serverUrl"
+      size="40"
+      :icon="connIcon"
+      name="Open Server Settings"
+      @click="settingsDialog = true"
+    />
+    <v-badge
+      offset-x="10"
+      offset-y="10"
+      :content="msgCount"
+      :color="msgBadgeColor"
+      :model-value="msgCount > 0"
+      id="notifications"
+    >
+      <control-button
+        size="40"
+        icon="mdi-bell-outline"
+        name="Notifications"
+        @click="messageDialog = true"
+      />
+    </v-badge>
+    <control-button
+      size="40"
+      icon="mdi-cog"
+      name="Settings"
+      @click="settingsDialog = true"
+    />
+  </div>
+  <closeable-dialog v-model="saveDialog" max-width="30%">
+    <template v-slot="{ close }">
+      <save-session :close="close" />
+    </template>
+  </closeable-dialog>
+  <closeable-dialog v-model="messageDialog" content-class="fill-height">
+    <message-center />
+  </closeable-dialog>
+
+  <message-notifications @open-notifications="messageDialog = true" />
+
+  <closeable-dialog v-model="settingsDialog">
+    <settings />
+  </closeable-dialog>
+</template>
+
+<style src="@/src/components/styles/utils.css"></style>
+<style scoped>
+#tools-strip {
+  border-left: 1px solid #212121;
+  flex: 0 0 40px;
+}
+
+.tool-separator {
+  width: 75%;
+  height: 1px;
+  border: none;
+  border-top: 1px solid rgb(112, 112, 112);
+}
+</style>
diff --git a/src/components/ToolStrip.vue b/src/components/ControlsStripTools.vue
similarity index 79%
rename from src/components/ToolStrip.vue
rename to src/components/ControlsStripTools.vue
index ba11201ba..3bbaaafd2 100644
--- a/src/components/ToolStrip.vue
+++ b/src/components/ControlsStripTools.vue
@@ -9,7 +9,7 @@
       v-slot:default="{ active, toggle }"
       :value="Tools.WindowLevel"
     >
-      <menu-tool-button
+      <menu-control-button
         icon="mdi-circle-half-full"
         name="Window & Level"
         :active="active"
@@ -17,10 +17,10 @@
         @click="toggle"
       >
         <window-level-controls />
-      </menu-tool-button>
+      </menu-control-button>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Pan">
-      <tool-button
+      <control-button
         icon="mdi-cursor-move"
         name="Pan"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
@@ -29,7 +29,7 @@
       />
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Zoom">
-      <tool-button
+      <control-button
         icon="mdi-magnify-plus-outline"
         name="Zoom"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
@@ -41,7 +41,7 @@
       v-slot:default="{ active, toggle }"
       :value="Tools.Crosshairs"
     >
-      <tool-button
+      <control-button
         icon="mdi-crosshairs"
         name="Crosshairs"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
@@ -51,7 +51,7 @@
     </groupable-item>
     <div class="my-1 tool-separator" />
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Select">
-      <tool-button
+      <control-button
         icon="mdi-cursor-default"
         name="Select"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
@@ -60,19 +60,19 @@
       />
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Paint">
-      <tool-button
+      <control-button
         icon="mdi-brush"
         name="Paint"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
         :disabled="noCurrentImage || isObliqueLayout"
         @click="toggle"
-      ></tool-button>
+      ></control-button>
     </groupable-item>
     <groupable-item
       v-slot:default="{ active, toggle }"
       :value="Tools.Rectangle"
     >
-      <menu-tool-button
+      <menu-control-button
         icon="mdi-vector-square"
         name="Rectangle"
         :mobileOnlyMenu="true"
@@ -81,10 +81,10 @@
         @click="toggle"
       >
         <rectangle-controls />
-      </menu-tool-button>
+      </menu-control-button>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Polygon">
-      <menu-tool-button
+      <menu-control-button
         icon="mdi-pentagon-outline"
         name="Polygon"
         :mobileOnlyMenu="true"
@@ -93,10 +93,10 @@
         @click="toggle"
       >
         <polygon-controls />
-      </menu-tool-button>
+      </menu-control-button>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Ruler">
-      <menu-tool-button
+      <menu-control-button
         icon="mdi-ruler"
         name="Ruler"
         :mobileOnlyMenu="true"
@@ -105,12 +105,12 @@
         @click="toggle"
       >
         <ruler-controls />
-      </menu-tool-button>
+      </menu-control-button>
     </groupable-item>
 
     <div class="my-1 tool-separator" />
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Crop">
-      <menu-tool-button
+      <menu-control-button
         icon="mdi-crop"
         name="Crop"
         :active="active"
@@ -118,7 +118,7 @@
         @click="toggle"
       >
         <crop-controls />
-      </menu-tool-button>
+      </menu-control-button>
     </groupable-item>
     <div class="my-1 tool-separator" />
     <reset-views />
@@ -130,24 +130,24 @@ import { computed, defineComponent, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { onKeyDown } from '@vueuse/core';
 import { Tools } from '@/src/store/tools/types';
-import ToolButton from './ToolButton.vue';
-import ItemGroup from './ItemGroup.vue';
-import GroupableItem from './GroupableItem.vue';
-import { useDatasetStore } from '../store/datasets';
-import { useToolStore } from '../store/tools';
-import { useViewStore } from '../store/views';
-import MenuToolButton from './MenuToolButton.vue';
-import CropControls from './tools/crop/CropControls.vue';
-import ResetViews from './tools/ResetViews.vue';
-import RulerControls from './RulerControls.vue';
-import RectangleControls from './RectangleControls.vue';
-import PolygonControls from './PolygonControls.vue';
-import WindowLevelControls from './tools/windowing/WindowLevelControls.vue';
+import ControlButton from '@/src/components/ControlButton.vue';
+import ItemGroup from '@/src/components/ItemGroup.vue';
+import GroupableItem from '@/src/components/GroupableItem.vue';
+import { useDatasetStore } from '@/src/store/datasets';
+import { useToolStore } from '@/src/store/tools';
+import { useViewStore } from '@/src/store/views';
+import MenuControlButton from '@/src/components/MenuControlButton.vue';
+import CropControls from '@/src/components/tools/crop/CropControls.vue';
+import ResetViews from '@/src/components/tools/ResetViews.vue';
+import RulerControls from '@/src/components/RulerControls.vue';
+import RectangleControls from '@/src/components/RectangleControls.vue';
+import PolygonControls from '@/src/components/PolygonControls.vue';
+import WindowLevelControls from '@/src/components/tools/windowing/WindowLevelControls.vue';
 
 export default defineComponent({
   components: {
-    ToolButton,
-    MenuToolButton,
+    ControlButton,
+    MenuControlButton,
     ItemGroup,
     GroupableItem,
     CropControls,
diff --git a/src/components/LayoutGrid.vue b/src/components/LayoutGrid.vue
index b726358b2..14c5ea93a 100644
--- a/src/components/LayoutGrid.vue
+++ b/src/components/LayoutGrid.vue
@@ -5,7 +5,7 @@
     data-testid="layout-grid"
   >
     <div v-for="(item, i) in items" :key="i" class="d-flex flex-equal">
-      <layout-grid v-if="item.type === 'layout'" :layout="item" />
+      <layout-grid v-if="item.type === 'layout'" :layout="(item as Layout)" />
       <div v-else class="layout-item">
         <component
           :is="item.component"
diff --git a/src/components/MenuToolButton.vue b/src/components/MenuControlButton.vue
similarity index 94%
rename from src/components/MenuToolButton.vue
rename to src/components/MenuControlButton.vue
index a3a9ee30c..062a25822 100644
--- a/src/components/MenuToolButton.vue
+++ b/src/components/MenuControlButton.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { watch, ref, computed, defineComponent } from 'vue';
 import { useDisplay } from 'vuetify';
-import ToolButton from './ToolButton.vue';
+import ControlButton from './ControlButton.vue';
 
 export default defineComponent({
   name: 'MenuToolButton',
@@ -14,7 +14,7 @@ export default defineComponent({
     mobileOnlyMenu: Boolean,
   },
   components: {
-    ToolButton,
+    ControlButton,
   },
   setup(props) {
     const display = useDisplay();
@@ -54,7 +54,7 @@ export default defineComponent({
     class="overflow-auto"
   >
     <template #activator="{ props }">
-      <tool-button
+      <control-button
         :icon="icon"
         :name="name"
         :buttonClass="['tool-btn', active ? 'tool-btn-selected' : '']"
@@ -70,7 +70,7 @@ export default defineComponent({
         >
           {{ showLeft ? 'mdi-menu-left' : 'mdi-menu-right' }}
         </v-icon>
-      </tool-button>
+      </control-button>
     </template>
 
     <div class="menu-content elevation-24">
diff --git a/src/components/__tests__/ToolButton.spec.js b/src/components/__tests__/ControlButton.spec.js
similarity index 68%
rename from src/components/__tests__/ToolButton.spec.js
rename to src/components/__tests__/ControlButton.spec.js
index 1026483da..983792176 100644
--- a/src/components/__tests__/ToolButton.spec.js
+++ b/src/components/__tests__/ControlButton.spec.js
@@ -2,9 +2,9 @@ import { describe, it } from 'vitest';
 import { expect } from 'chai';
 import { shallowMount } from '@vue/test-utils';
 
-import ToolButton from '@/src/components/ToolButton.vue';
+import ControlButton from '@/src/components/ControlButton.vue';
 
-describe('ToolButton.vue', () => {
+describe('ControlButton.vue', () => {
   const propsData = {
     size: '80',
     name: 'TEST BUTTON',
@@ -12,7 +12,7 @@ describe('ToolButton.vue', () => {
   };
 
   it('computes icon size', () => {
-    const wrapper = shallowMount(ToolButton, { propsData });
+    const wrapper = shallowMount(ControlButton, { propsData });
     expect(wrapper.vm.iconSize).to.equal(48);
   });
 
@@ -21,11 +21,11 @@ describe('ToolButton.vue', () => {
     let wrapper;
 
     props = { ...propsData, buttonClass: 'c1 c2 c3' };
-    wrapper = shallowMount(ToolButton, { propsData: props });
+    wrapper = shallowMount(ControlButton, { propsData: props });
     expect(wrapper.vm.classV).to.equal('c1 c2 c3');
 
     props = { ...propsData, buttonClass: ['c1', 'c2', 'c3'] };
-    wrapper = shallowMount(ToolButton, { propsData: props });
+    wrapper = shallowMount(ControlButton, { propsData: props });
     expect(wrapper.vm.classV).to.equal('c1 c2 c3');
 
     props = {
@@ -36,7 +36,7 @@ describe('ToolButton.vue', () => {
         c3: false,
       },
     };
-    wrapper = shallowMount(ToolButton, { propsData: props });
+    wrapper = shallowMount(ControlButton, { propsData: props });
     expect(wrapper.vm.classV).to.equal('c1 c2');
   });
 });
diff --git a/src/components/tools/ResetViews.vue b/src/components/tools/ResetViews.vue
index a80deef99..b9b2c9097 100644
--- a/src/components/tools/ResetViews.vue
+++ b/src/components/tools/ResetViews.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import ToolButton from '@/src/components/ToolButton.vue';
+import ControlButton from '@/src/components/ControlButton.vue';
 import { createEventHook } from '@vueuse/core';
 
 const clickEvent = createEventHook<void>();
@@ -10,7 +10,7 @@ export function useResetViewsEvents() {
 
 export default defineComponent({
   components: {
-    ToolButton,
+    ControlButton,
   },
   // setup() {
   // },
@@ -23,7 +23,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <tool-button
+  <control-button
     size="40"
     icon="mdi-camera-flip-outline"
     name="Reset Views"
diff --git a/src/components/tools/crop/CropControls.vue b/src/components/tools/crop/CropControls.vue
index 3cdceea45..21207da09 100644
--- a/src/components/tools/crop/CropControls.vue
+++ b/src/components/tools/crop/CropControls.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import ToolButton from '@/src/components/ToolButton.vue';
+import ControlButton from '@/src/components/ControlButton.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useCropStore } from '@/src/store/tools/crop';
 
 export default defineComponent({
   components: {
-    ToolButton,
+    ControlButton,
   },
   setup() {
     const { currentImageID } = useCurrentImage();
@@ -28,7 +28,7 @@ export default defineComponent({
 
 <template>
   <v-card dark>
-    <tool-button
+    <control-button
       size="40"
       icon="mdi-restore"
       name="Reset Crop"

From b069b68faa0dac061baaac1494042a0c9c5cea25 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 29 Aug 2023 20:34:07 -0400
Subject: [PATCH 026/113] feat(CurrentImageProvider): inject current image

Decouples the current image from the current selection.
---
 src/components/CurrentImageProvider.vue |  19 ++++
 src/components/VtkTwoView.vue           |   2 +-
 src/composables/annotationTool.ts       |  31 ++++--
 src/composables/useCurrentImage.ts      | 127 ++++++++++++++----------
 src/store/datasets.ts                   |   1 +
 src/store/tools/useAnnotationTool.ts    |   3 +-
 6 files changed, 116 insertions(+), 67 deletions(-)
 create mode 100644 src/components/CurrentImageProvider.vue

diff --git a/src/components/CurrentImageProvider.vue b/src/components/CurrentImageProvider.vue
new file mode 100644
index 000000000..a96840c10
--- /dev/null
+++ b/src/components/CurrentImageProvider.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Maybe } from '@/src/types';
+import { provide, toRefs } from 'vue';
+import { CurrentImageInjectionKey } from '@/src/composables/useCurrentImage';
+
+const props = defineProps<{
+  imageId: Maybe<string>;
+}>();
+
+const { imageId: imageID } = toRefs(props);
+
+provide(CurrentImageInjectionKey, {
+  imageID,
+});
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 67b227faa..3b8c921a6 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -863,7 +863,7 @@ export default defineComponent({
         .filter(
           ({ tool }) =>
             tool.slice === currentSlice.value &&
-            doesToolFrameMatchViewAxis(viewAxis, tool)
+            doesToolFrameMatchViewAxis(viewAxis, tool, curImageMetadata)
         )
         .flatMap(({ store, tool }) => store.getPoints(tool.id));
     });
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 6afa9487a..4a12a3c9b 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -1,4 +1,13 @@
-import { Ref, UnwrapRef, computed, readonly, ref, watch } from 'vue';
+import {
+  MaybeRef,
+  Ref,
+  UnwrapRef,
+  computed,
+  readonly,
+  ref,
+  unref,
+  watch,
+} from 'vue';
 import { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
@@ -19,34 +28,35 @@ import {
   ContextMenuEvent,
   vtkAnnotationToolWidget,
 } from '@/src/vtk/ToolWidgetUtils/types';
+import { ImageMetadata } from '@/src/types/image';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
 // does the tools's frame of reference match
 // the view's axis
 export const doesToolFrameMatchViewAxis = <Tool extends AnnotationTool>(
-  viewAxis: Ref<LPSAxis>,
-  tool: Partial<Tool>
+  viewAxis: MaybeRef<LPSAxis>,
+  tool: Partial<Tool>,
+  imageMetadata: MaybeRef<ImageMetadata>
 ) => {
   if (!tool.frameOfReference) return false;
 
-  const { currentImageMetadata } = useCurrentImage();
   const toolAxis = frameOfReferenceToImageSliceAndAxis(
     tool.frameOfReference,
-    currentImageMetadata.value,
+    unref(imageMetadata),
     {
       allowOutOfBoundsSlice: true,
     }
   );
-  return !!toolAxis && toolAxis.axis === viewAxis.value;
+  return !!toolAxis && toolAxis.axis === unref(viewAxis);
 };
 
 export const useCurrentTools = <S extends AnnotationToolStore>(
   toolStore: S,
   viewAxis: Ref<LPSAxis>
-) =>
-  computed(() => {
-    const { currentImageID } = useCurrentImage();
+) => {
+  const { currentImageID, currentImageMetadata } = useCurrentImage();
+  return computed(() => {
     const curImageID = currentImageID.value;
 
     type ToolType = S['tools'][number];
@@ -55,11 +65,12 @@ export const useCurrentTools = <S extends AnnotationToolStore>(
       // current view axis and not hidden
       return (
         tool.imageID === curImageID &&
-        doesToolFrameMatchViewAxis(viewAxis, tool) &&
+        doesToolFrameMatchViewAxis(viewAxis, tool, currentImageMetadata) &&
         !tool.hidden
       );
     });
   });
+};
 
 // --- Context Menu --- //
 
diff --git a/src/composables/useCurrentImage.ts b/src/composables/useCurrentImage.ts
index eaf365470..71a82d3c0 100644
--- a/src/composables/useCurrentImage.ts
+++ b/src/composables/useCurrentImage.ts
@@ -1,12 +1,32 @@
-import { computed } from 'vue';
-import { useDatasetStore } from '../store/datasets';
-import { useDICOMStore } from '../store/datasets-dicom';
-import { defaultImageMetadata, useImageStore } from '../store/datasets-images';
-import { useLayersStore } from '../store/datasets-layers';
-import { createLPSBounds, getAxisBounds } from '../utils/lps';
+import {
+  InjectionKey,
+  MaybeRef,
+  Ref,
+  computed,
+  hasInjectionContext,
+  inject,
+  unref,
+} from 'vue';
+import { Maybe } from '@/src/types';
+import {
+  defaultImageMetadata,
+  useImageStore,
+} from '@/src/store/datasets-images';
+import { useLayersStore } from '@/src/store/datasets-layers';
+import { createLPSBounds, getAxisBounds } from '@/src/utils/lps';
+import { getImageID, useDatasetStore } from '@/src/store/datasets';
+import { storeToRefs } from 'pinia';
+
+export interface CurrentImageContext {
+  imageID: Ref<Maybe<string>>;
+}
+
+export const CurrentImageInjectionKey = Symbol(
+  'CurrentImage'
+) as InjectionKey<CurrentImageContext>;
 
 // Returns a spatially inflated image extent
-export function getImageSpatialExtent(imageID: string | null) {
+export function getImageSpatialExtent(imageID: Maybe<string>) {
   const imageStore = useImageStore();
 
   if (imageID && imageID in imageStore.metadata) {
@@ -24,62 +44,59 @@ export function getImageSpatialExtent(imageID: string | null) {
   return createLPSBounds();
 }
 
-export function useCurrentImage() {
-  const dataStore = useDatasetStore();
-  const dicomStore = useDICOMStore();
-  const imageStore = useImageStore();
-  const layersStore = useLayersStore();
-
-  const currentImageID = computed(() => {
-    const { primarySelection } = dataStore;
-    const { volumeToImageID } = dicomStore;
+export function getImageMetadata(imageID: Maybe<string>) {
+  const { metadata } = useImageStore();
+  return imageID ? metadata[imageID] : defaultImageMetadata();
+}
 
-    if (primarySelection?.type === 'image') {
-      return primarySelection.dataID;
-    }
-    if (primarySelection?.type === 'dicom') {
-      return volumeToImageID[primarySelection.volumeKey] || null;
-    }
-    return null;
-  });
+export function getImageData(imageID: Maybe<string>) {
+  const { dataIndex } = useImageStore();
+  return imageID ? dataIndex[imageID] : null;
+}
 
-  const currentImageMetadata = computed(() => {
-    const { metadata } = imageStore;
-    const imageID = currentImageID.value;
+export function getIsImageLoading(imageID: Maybe<string>) {
+  const dataStore = useDatasetStore();
+  if (!dataStore.primarySelection) return false;
 
-    if (imageID) {
-      return metadata[imageID];
-    }
-    return defaultImageMetadata();
-  });
+  const selectedImageID = getImageID(dataStore.primarySelection);
+  if (selectedImageID !== unref(imageID)) return false;
 
-  const currentImageData = computed(() => {
-    if (currentImageID.value)
-      // assumed to be only images for now
-      return imageStore.dataIndex[currentImageID.value];
-    return undefined;
-  });
+  return !!dataStore.primarySelection && !dataStore.primaryDataset;
+}
 
-  const currentImageExtent = computed(() =>
-    getImageSpatialExtent(currentImageID.value)
-  );
+export function getImageLayers(imageID: Maybe<string>) {
+  const layersStore = useLayersStore();
+  return layersStore
+    .getLayers(imageID ? { type: 'image', dataID: imageID } : null)
+    .filter(({ id }) => id in layersStore.layerImages);
+}
 
-  const isImageLoading = computed(() => {
-    return !!dataStore.primarySelection && !dataStore.primaryDataset;
-  });
+export function useImage(imageID: MaybeRef<Maybe<string>>) {
+  return {
+    id: computed(() => unref(imageID)),
+    imageData: computed(() => getImageData(unref(imageID))),
+    metadata: computed(() => getImageMetadata(unref(imageID))),
+    extent: computed(() => getImageSpatialExtent(unref(imageID))),
+    isLoading: computed(() => getIsImageLoading(unref(imageID))),
+    layers: computed(() => getImageLayers(unref(imageID))),
+  };
+}
 
-  const currentLayers = computed(() =>
-    layersStore
-      .getLayers(dataStore.primarySelection)
-      .filter(({ id }) => id in layersStore.layerImages)
-  );
+export function useCurrentImage() {
+  const { primaryImageID } = storeToRefs(useDatasetStore());
+  const defaultContext = { imageID: primaryImageID };
+  const { imageID } = hasInjectionContext()
+    ? inject(CurrentImageInjectionKey, defaultContext)
+    : defaultContext;
 
+  const { id, imageData, metadata, extent, isLoading, layers } =
+    useImage(imageID);
   return {
-    currentImageData,
-    currentImageID,
-    currentImageMetadata,
-    currentImageExtent,
-    isImageLoading,
-    currentLayers,
+    currentImageID: id,
+    currentImageMetadata: metadata,
+    currentImageData: imageData,
+    currentImageExtent: extent,
+    isImageLoading: isLoading,
+    currentLayers: layers,
   };
 }
diff --git a/src/store/datasets.ts b/src/store/datasets.ts
index 103377fa2..4db700707 100644
--- a/src/store/datasets.ts
+++ b/src/store/datasets.ts
@@ -179,6 +179,7 @@ export const useDatasetStore = defineStore('dataset', () => {
   });
 
   return {
+    primaryImageID,
     primarySelection,
     primaryDataset,
     allDataIDs,
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 04f86e4df..1be76c6d1 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -136,9 +136,10 @@ export const useAnnotationTool = <
     });
   });
 
+  const { currentImageID, currentImageMetadata } = useCurrentImage();
+
   function jumpToTool(toolID: ToolID) {
     const tool = toolByID.value[toolID];
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
 
     const imageID = currentImageID.value;
     if (!imageID || tool.imageID !== imageID) return;

From c57abd74b611eb8710d3c9fceb1b9d99bb20aea4 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 31 Aug 2023 11:09:00 -0400
Subject: [PATCH 027/113] refactor: currentImageID is now Maybe<string>

---
 src/components/VtkObliqueView.vue         |  4 ++--
 src/components/VtkTwoView.vue             |  6 +++---
 src/components/tools/SliceScrollTool.vue  |  2 +-
 src/composables/usePersistCameraConfig.ts | 13 +++++++------
 src/composables/useSceneBuilder.ts        |  3 ++-
 src/store/tools/crop.ts                   |  3 ++-
 src/store/tools/paint.ts                  |  8 ++++----
 7 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
index 4ae8f8e80..57fdd9f81 100644
--- a/src/components/VtkObliqueView.vue
+++ b/src/components/VtkObliqueView.vue
@@ -219,7 +219,7 @@ export default defineComponent({
       get: () => windowingStore.getConfig(viewID.value, curImageID.value),
       set: (newValue) => {
         const imageID = curImageID.value;
-        if (imageID !== null && newValue != null) {
+        if (imageID != null && newValue != null) {
           windowingStore.updateConfig(viewID.value, imageID, newValue);
         }
       },
@@ -229,7 +229,7 @@ export default defineComponent({
     const windowLevel = computed(() => wlConfig.value?.level);
     const dicomInfo = computed(() => {
       if (
-        curImageID.value !== null &&
+        curImageID.value != null &&
         curImageID.value in dicomStore.imageIDToVolumeKey
       ) {
         const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 3b8c921a6..94ee61c43 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -333,7 +333,7 @@ export default defineComponent({
       get: () => windowingStore.getConfig(viewID.value, curImageID.value),
       set: (newValue) => {
         const imageID = curImageID.value;
-        if (imageID !== null && newValue != null) {
+        if (imageID != null && newValue != null) {
           windowingStore.updateConfig(viewID.value, imageID, newValue);
         }
       },
@@ -346,7 +346,7 @@ export default defineComponent({
     );
     const dicomInfo = computed(() => {
       if (
-        curImageID.value !== null &&
+        curImageID.value != null &&
         curImageID.value in dicomStore.imageIDToVolumeKey
       ) {
         const volumeKey = dicomStore.imageIDToVolumeKey[curImageID.value];
@@ -388,7 +388,7 @@ export default defineComponent({
     // --- setters --- //
 
     const setSlice = (slice: number) => {
-      if (curImageID.value !== null) {
+      if (curImageID.value != null) {
         viewSliceStore.updateConfig(viewID.value, curImageID.value, {
           slice,
         });
diff --git a/src/components/tools/SliceScrollTool.vue b/src/components/tools/SliceScrollTool.vue
index cd04de824..0feaf6c51 100644
--- a/src/components/tools/SliceScrollTool.vue
+++ b/src/components/tools/SliceScrollTool.vue
@@ -96,7 +96,7 @@ export default defineComponent({
         range.step,
         () => scrollVal.value,
         (slice) => {
-          if (currentImageID.value !== null) {
+          if (currentImageID.value != null) {
             viewSliceStore.updateConfig(viewID.value, currentImageID.value, {
               slice,
             });
diff --git a/src/composables/usePersistCameraConfig.ts b/src/composables/usePersistCameraConfig.ts
index 2fdfb5eea..5bddbe127 100644
--- a/src/composables/usePersistCameraConfig.ts
+++ b/src/composables/usePersistCameraConfig.ts
@@ -1,12 +1,13 @@
 import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
 import { Ref } from 'vue';
+import { Maybe } from '@/src/types';
 import { CameraConfig } from '../store/view-configs/types';
 import { vtkLPSViewProxy } from '../types/vtk-types';
 import useViewCameraStore from '../store/view-configs/camera';
 
 export function usePersistCameraConfig(
   viewID: Ref<string>,
-  dataID: Ref<string | null>,
+  dataID: Ref<Maybe<string>>,
   viewProxy: Ref<vtkLPSViewProxy>,
   ...toPersist: (keyof CameraConfig)[]
 ) {
@@ -19,7 +20,7 @@ export function usePersistCameraConfig(
 
   if (toPersist.indexOf('position') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           position: viewProxy.value.getCamera().getPosition(),
         });
@@ -28,7 +29,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('viewUp') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           viewUp: viewProxy.value.getCamera().getViewUp(),
         });
@@ -37,7 +38,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('focalPoint') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           focalPoint: viewProxy.value.getCamera().getFocalPoint(),
         });
@@ -46,7 +47,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('directionOfProjection') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           directionOfProjection: viewProxy.value
             .getCamera()
@@ -57,7 +58,7 @@ export function usePersistCameraConfig(
   }
   if (toPersist.indexOf('parallelScale') > -1) {
     persist.push(() => {
-      if (dataID.value !== null && persistCameraConfig) {
+      if (dataID.value != null && persistCameraConfig) {
         viewCameraStore.updateConfig(viewID.value, dataID.value, {
           parallelScale: viewProxy.value.getCamera().getParallelScale(),
         });
diff --git a/src/composables/useSceneBuilder.ts b/src/composables/useSceneBuilder.ts
index 71b1dd991..3b95c1906 100644
--- a/src/composables/useSceneBuilder.ts
+++ b/src/composables/useSceneBuilder.ts
@@ -1,11 +1,12 @@
 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<string | null>;
+  baseImage?: Ref<Maybe<string>>;
   labelmaps?: Ref<string[]>;
   layers?: Ref<string[]>;
   models?: Ref<string[]>;
diff --git a/src/store/tools/crop.ts b/src/store/tools/crop.ts
index 9fe59a13c..73e100a18 100644
--- a/src/store/tools/crop.ts
+++ b/src/store/tools/crop.ts
@@ -9,6 +9,7 @@ import { MaybeRef } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { defineStore } from 'pinia';
 import { arrayEqualsWithComparator } from '@/src/utils';
+import { Maybe } from '@/src/types';
 import { useImageStore } from '../datasets-images';
 import { LPSCroppingPlanes } from '../../types/crop';
 import { ImageMetadata } from '../../types/image';
@@ -89,7 +90,7 @@ export const useCropStore = defineStore('crop', () => {
     croppingByImageID: {} as Record<string, LPSCroppingPlanes>,
   });
 
-  const getComputedVTKPlanes = (imageID: MaybeRef<string | null>) =>
+  const getComputedVTKPlanes = (imageID: MaybeRef<Maybe<string>>) =>
     computed(() => {
       const id = unref(imageID);
       if (id && id in state.croppingByImageID && id in imageStore.metadata) {
diff --git a/src/store/tools/paint.ts b/src/store/tools/paint.ts
index e7716e657..0a96dffcd 100644
--- a/src/store/tools/paint.ts
+++ b/src/store/tools/paint.ts
@@ -15,7 +15,7 @@ export const usePaintToolStore = defineStore('paint', () => {
   type _This = ReturnType<typeof usePaintToolStore>;
 
   const activeMode = ref(PaintMode.CirclePaint);
-  const activeSegmentGroupID = ref<string | null>(null);
+  const activeSegmentGroupID = ref<Maybe<string>>(null);
   const activeSegment = ref<Maybe<number>>(null);
   const brushSize = ref(DEFAULT_BRUSH_SIZE);
   const strokePoints = ref<vec3[]>([]);
@@ -48,7 +48,7 @@ export const usePaintToolStore = defineStore('paint', () => {
   /**
    * Sets the active labelmap.
    */
-  function setActiveLabelmap(segmentGroupID: string | null) {
+  function setActiveLabelmap(segmentGroupID: Maybe<string>) {
     activeSegmentGroupID.value = segmentGroupID;
   }
 
@@ -57,7 +57,7 @@ export const usePaintToolStore = defineStore('paint', () => {
    *
    * If a labelmap exists, pick the first one. If no labelmap exists, create one.
    */
-  function setActiveLabelmapFromImage(imageID: string | null) {
+  function setActiveLabelmapFromImage(imageID: Maybe<string>) {
     if (!imageID) {
       setActiveLabelmap(null);
       return;
@@ -178,7 +178,7 @@ export const usePaintToolStore = defineStore('paint', () => {
   function serialize(state: StateFile) {
     const { paint } = state.manifest.tools;
 
-    paint.activeSegmentGroupID = activeSegmentGroupID.value;
+    paint.activeSegmentGroupID = activeSegmentGroupID.value ?? null;
     paint.brushSize = brushSize.value;
     paint.activeSegment = activeSegment.value;
     paint.labelmapOpacity = labelmapOpacity.value;

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 028/113] 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 029/113] 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 030/113] 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 031/113] 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 7afb8660b0da7df7564da9b691394a74ae633a50 Mon Sep 17 00:00:00 2001
From: Shreeraj Jadhav <shreerajjadhav@gmail.com>
Date: Wed, 7 Feb 2024 22:15:03 -0500
Subject: [PATCH 032/113] fix(urlParams): empty save param issue

---
 src/components/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index 9a9ed892f..eea3df00c 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -202,7 +202,7 @@ export default defineComponent({
     // --- save state --- //
 
     const remoteSaveStateStore = useRemoteSaveStateStore();
-    if (import.meta.env.VITE_ENABLE_REMOTE_SAVE) {
+    if (import.meta.env.VITE_ENABLE_REMOTE_SAVE && urlParams.save) {
       remoteSaveStateStore.setSaveUrl(urlParams.save.toString());
     }
 

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 033/113] 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 034/113] 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 035/113] 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 036/113] 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 037/113] 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 038/113] 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 039/113] 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;
 

From 50ad98dae343cab81717cf4c01480c9e1d5e8edd Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 12 Feb 2024 16:39:16 -0500
Subject: [PATCH 040/113] fix(useCurrentImage): return defaults/null

---
 src/composables/useCurrentImage.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/composables/useCurrentImage.ts b/src/composables/useCurrentImage.ts
index 71a82d3c0..804b2745b 100644
--- a/src/composables/useCurrentImage.ts
+++ b/src/composables/useCurrentImage.ts
@@ -46,12 +46,13 @@ export function getImageSpatialExtent(imageID: Maybe<string>) {
 
 export function getImageMetadata(imageID: Maybe<string>) {
   const { metadata } = useImageStore();
-  return imageID ? metadata[imageID] : defaultImageMetadata();
+  if (!imageID) return defaultImageMetadata();
+  return metadata[imageID] ?? defaultImageMetadata();
 }
 
 export function getImageData(imageID: Maybe<string>) {
   const { dataIndex } = useImageStore();
-  return imageID ? dataIndex[imageID] : null;
+  return imageID ? dataIndex[imageID] ?? null : null;
 }
 
 export function getIsImageLoading(imageID: Maybe<string>) {

From 21ecd960b82d1f4af42b7d0db2cca2033301fe67 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 12 Feb 2024 12:27:08 -0500
Subject: [PATCH 041/113] feat(config): add default layout name

---
 src/components/ControlsStrip.vue | 4 ++--
 src/config.ts                    | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ControlsStrip.vue b/src/components/ControlsStrip.vue
index 7644a335e..a3f5ea61a 100644
--- a/src/components/ControlsStrip.vue
+++ b/src/components/ControlsStrip.vue
@@ -13,7 +13,7 @@ import MessageCenter from '@/src/components/MessageCenter.vue';
 import { MessageType, useMessageStore } from '@/src/store/messages';
 import { ConnectionState, useServerStore } from '@/src/store/server';
 import { useViewStore } from '@/src/store/views';
-import { Layouts } from '@/src/config';
+import { Layouts, DefaultLayoutName } from '@/src/config';
 
 interface Props {
   hasData: boolean;
@@ -23,7 +23,7 @@ defineProps<Props>();
 
 function useViewLayout() {
   const viewStore = useViewStore();
-  const layoutName = ref('Quad View');
+  const layoutName = ref(DefaultLayoutName);
   const { layout: currentLayout } = storeToRefs(viewStore);
 
   watch(
diff --git a/src/config.ts b/src/config.ts
index 1ad9c6f38..e98485bee 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -90,6 +90,11 @@ export const InitViewSpecs: Record<string, ViewSpec> = {
  */
 export const DefaultViewSpec = InitViewSpecs[InitViewIDs.Axial];
 
+/**
+ * The default layout.
+ */
+export const DefaultLayoutName = 'Quad View';
+
 /**
  * Defines the default layouts.
  */

From 8ea16b03220f0cb706d73d8cedc3982721cb32aa Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 15 Feb 2024 14:15:32 -0500
Subject: [PATCH 042/113] feat(config): specify layout component name

---
 src/components/LayoutGrid.vue | 17 +++--------------
 src/core/viewTypes.ts         | 12 ++++++++++++
 src/types/views.ts            |  4 +---
 3 files changed, 16 insertions(+), 17 deletions(-)
 create mode 100644 src/core/viewTypes.ts

diff --git a/src/components/LayoutGrid.vue b/src/components/LayoutGrid.vue
index 14c5ea93a..659f694df 100644
--- a/src/components/LayoutGrid.vue
+++ b/src/components/LayoutGrid.vue
@@ -19,22 +19,11 @@
 </template>
 
 <script lang="ts">
-import { Component, computed, defineComponent, PropType, toRefs } from 'vue';
+import { computed, defineComponent, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
-import VtkTwoView from './VtkTwoView.vue';
-import VtkObliqueView from './VtkObliqueView.vue';
-import VtkObliqueThreeView from './VtkObliqueThreeView.vue';
-import VtkThreeView from './VtkThreeView.vue';
+import { ViewTypeToComponent } from '@/src/core/viewTypes';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewStore } from '../store/views';
-import { ViewType } from '../types/views';
-
-const TYPE_TO_COMPONENT: Record<ViewType, Component> = {
-  '2D': VtkTwoView,
-  '3D': VtkThreeView,
-  Oblique: VtkObliqueView,
-  Oblique3D: VtkObliqueThreeView,
-};
 
 export default defineComponent({
   name: 'LayoutGrid',
@@ -63,7 +52,7 @@ export default defineComponent({
           return {
             type: 'view',
             id: item,
-            component: TYPE_TO_COMPONENT[spec.viewType],
+            component: ViewTypeToComponent[spec.viewType],
             props: spec.props,
           };
         }
diff --git a/src/core/viewTypes.ts b/src/core/viewTypes.ts
new file mode 100644
index 000000000..2646b080c
--- /dev/null
+++ b/src/core/viewTypes.ts
@@ -0,0 +1,12 @@
+import VtkObliqueThreeView from '@/src/components/VtkObliqueThreeView.vue';
+import VtkObliqueView from '@/src/components/VtkObliqueView.vue';
+import VtkThreeView from '@/src/components/VtkThreeView.vue';
+import VtkTwoView from '@/src/components/VtkTwoView.vue';
+import { Component } from 'vue';
+
+export const ViewTypeToComponent: Record<string, Component> = {
+  '2D': VtkTwoView,
+  '3D': VtkThreeView,
+  Oblique: VtkObliqueView,
+  Oblique3D: VtkObliqueThreeView,
+};
diff --git a/src/types/views.ts b/src/types/views.ts
index bae31dd00..953221eac 100644
--- a/src/types/views.ts
+++ b/src/types/views.ts
@@ -4,10 +4,8 @@ import {
   PiecewiseNode,
 } from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 
-export type ViewType = '2D' | '3D' | 'Oblique' | 'Oblique3D';
-
 export interface ViewSpec {
-  viewType: ViewType;
+  viewType: string;
   props: Record<string, any>;
 }
 

From 2d3f9660e83f61b714237db7ef7be456f7734531 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 15 Feb 2024 14:53:36 -0500
Subject: [PATCH 043/113] fix(schema): viewType is now just a string

---
 src/io/state-file/schema.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/io/state-file/schema.ts b/src/io/state-file/schema.ts
index 34acadb23..e3608e65c 100644
--- a/src/io/state-file/schema.ts
+++ b/src/io/state-file/schema.ts
@@ -25,7 +25,6 @@ import {
 import { LPSAxisDir, LPSAxis } from '../../types/lps';
 import { LayoutDirection } from '../../types/layout';
 import {
-  ViewType,
   ColorBy,
   ColorTransferFunction,
   OpacityFunction,
@@ -220,18 +219,11 @@ const ViewConfig = z.object({
   volumeColorConfig: VolumeColorConfig.optional(),
 });
 
-const ViewType = z.union([
-  z.literal('2D'),
-  z.literal('3D'),
-  z.literal('Oblique'),
-  z.literal('Oblique3D'),
-]) satisfies z.ZodType<ViewType>;
-
 export type ViewConfig = z.infer<typeof ViewConfig>;
 
 const View = z.object({
   id: z.string(),
-  type: ViewType,
+  type: z.string(),
   props: z.record(z.any()),
   config: z.record(ViewConfig),
 });

From e9a6d7dcbafbb435fc712fc2b7aae74ac5f44f90 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Dec 2023 16:10:19 -0500
Subject: [PATCH 044/113] feat(SegmentGroupControls): add save button

---
 src/components/SaveSegmentGroupDialog.vue | 93 +++++++++++++++++++++++
 src/components/SaveSession.vue            |  1 +
 src/components/SegmentGroupControls.vue   | 25 +++++-
 src/io/readWriteImage.ts                  | 39 ++++++++++
 src/store/segmentGroups.ts                | 41 +---------
 5 files changed, 158 insertions(+), 41 deletions(-)
 create mode 100644 src/components/SaveSegmentGroupDialog.vue
 create mode 100644 src/io/readWriteImage.ts

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
new file mode 100644
index 000000000..579a6e97a
--- /dev/null
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -0,0 +1,93 @@
+<template>
+  <v-card>
+    <v-card-title class="d-flex flex-row align-center">
+      Save Segment Group
+    </v-card-title>
+    <v-card-text>
+      <v-form v-model="valid" @submit.prevent="saveSegmentGroup">
+        <v-text-field
+          v-model="fileName"
+          hint="Filename that will appear in downloads."
+          label="Filename"
+          :rules="[validFileName]"
+          required
+          id="filename"
+        />
+
+        <v-radio-group v-model="fileFormat" label="Format">
+          <v-radio v-for="ext in EXTENSIONS" :key="ext" :value="ext">
+            <template #label>
+              {{ ext }}
+            </template>
+          </v-radio>
+        </v-radio-group>
+      </v-form>
+    </v-card-text>
+    <v-card-actions>
+      <v-spacer />
+      <v-btn
+        :loading="saving"
+        color="secondary"
+        @click="saveSegmentGroup"
+        :disabled="!valid"
+      >
+        <v-icon class="mr-2">mdi-content-save</v-icon>
+        <span data-testid="save-confirm-button">Save</span>
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { saveAs } from 'file-saver';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { writeImage } from '@/src/io/readWriteImage';
+
+const EXTENSIONS = [
+  'dcm',
+  'nrrd',
+  'hdf5',
+  'nii',
+  'nii.gz',
+  'tif',
+  'mha',
+  'vtk',
+  'iwi.cbor',
+];
+
+const props = defineProps<{
+  close: () => undefined;
+  id: string;
+}>();
+const fileName = ref('');
+const valid = ref(true);
+const saving = ref(false);
+const fileFormat = ref(EXTENSIONS[0]);
+
+const segmentGroupStore = useSegmentGroupStore();
+
+async function saveSegmentGroup() {
+  if (fileName.value.trim().length === 0) {
+    return;
+  }
+  try {
+    saving.value = true;
+    const image = segmentGroupStore.dataIndex[props.id];
+    const serialized = await writeImage(fileFormat.value, image);
+    saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`);
+    props.close();
+  } finally {
+    saving.value = false;
+  }
+}
+
+onMounted(() => {
+  // trigger form validation check so can immediately save with default value
+  fileName.value = segmentGroupStore.metadataByID[props.id].name;
+});
+
+function validFileName(name: string) {
+  return name.trim().length > 0 || 'Required';
+}
+</script>
diff --git a/src/components/SaveSession.vue b/src/components/SaveSession.vue
index f2c999f41..ad2710b35 100644
--- a/src/components/SaveSession.vue
+++ b/src/components/SaveSession.vue
@@ -64,6 +64,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
+      // triggers form validation check so can immediately save with default value
       fileName.value = DEFAULT_FILENAME;
     });
 
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index 56e77597b..eddf6cdd0 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import SegmentList from '@/src/components/SegmentList.vue';
+import CloseableDialog from '@/src/components/CloseableDialog.vue';
+import SaveSegmentGroupDialog from '@/src/components/SaveSegmentGroupDialog.vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { selectionEquals, useDatasetStore } from '@/src/store/datasets';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
@@ -143,6 +145,13 @@ function createSegmentGroupFromImage(selectedImageID: string) {
     );
   }
 }
+
+const saveId = ref('');
+const saveDialog = ref(false);
+function openSaveDialog(id: string) {
+  saveId.value = id;
+  saveDialog.value = true;
+}
 </script>
 
 <template>
@@ -202,15 +211,21 @@ function createSegmentGroupFromImage(selectedImageID: string) {
           <div class="d-flex flex-row align-center w-100" :title="group.name">
             <span class="group-name">{{ group.name }}</span>
             <v-spacer />
+            <v-btn
+              icon="mdi-content-save"
+              size="small"
+              variant="flat"
+              @click.stop="openSaveDialog(group.id)"
+            ></v-btn>
             <v-btn
               icon="mdi-pencil"
-              size="x-small"
+              size="small"
               variant="flat"
               @click.stop="startEditing(group.id)"
             ></v-btn>
             <v-btn
               icon="mdi-delete"
-              size="x-small"
+              size="small"
               variant="flat"
               @click.stop="deleteGroup(group.id)"
             ></v-btn>
@@ -245,6 +260,12 @@ function createSegmentGroupFromImage(selectedImageID: string) {
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <closeable-dialog v-model="saveDialog" max-width="30%">
+    <template v-slot="{ close }">
+      <save-segment-group-dialog :close="close" :id="saveId" />
+    </template>
+  </closeable-dialog>
 </template>
 
 <style>
diff --git a/src/io/readWriteImage.ts b/src/io/readWriteImage.ts
new file mode 100644
index 000000000..fd32604b9
--- /dev/null
+++ b/src/io/readWriteImage.ts
@@ -0,0 +1,39 @@
+import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { copyImage } from 'itk-wasm';
+import {
+  readImage as readImageItk,
+  writeImage as writeImageItk,
+} from '@itk-wasm/image-io';
+import { vtiReader, vtiWriter } from '@/src/io/vtk/async';
+
+export const readImage = async (file: File) => {
+  if (file.name.endsWith('.vti'))
+    return (await vtiReader(file)) as vtkImageData;
+
+  const { image } = await readImageItk(null, file);
+  return vtkITKHelper.convertItkToVtkImage(image);
+};
+
+export const writeImage = async (format: string, image: vtkImageData) => {
+  if (format === 'vti') {
+    return vtiWriter(image);
+  }
+  // copyImage so writeImage does not detach live data when passing to worker
+  const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
+
+  // Transpose the direction matrix to fix bug in @itk-wasm/image-io.writeImage
+  // Remove when @itk-wasm/image-io version is above 0.5.0 https://github.com/InsightSoftwareConsortium/itk-wasm/commit/ad9ca85eedc47c9d3444cf36859569c529886bde
+  const oldDirection = [...itkImage.direction];
+  const { dimension } = itkImage.imageType;
+  for (let idx = 0; idx < dimension; ++idx) {
+    for (let idy = 0; idy < dimension; ++idy) {
+      itkImage.direction[idx + idy * dimension] =
+        oldDirection[idy + idx * dimension];
+    }
+  }
+
+  const result = await writeImageItk(null, itkImage, `image.${format}`);
+  result.webWorker?.terminate();
+  return result.serializedImage.data;
+};
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index b04238103..97ef0645a 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -1,12 +1,7 @@
 import { computed, reactive, ref, toRaw, watch } from 'vue';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import vtkITKHelper from '@kitware/vtk.js/Common/DataModel/ITKHelper';
-import { copyImage } from 'itk-wasm';
-import {
-  readImage as readImageItk,
-  writeImage as writeImageItk,
-} from '@itk-wasm/image-io';
+import { RGBAColor } from '@kitware/vtk.js/types';
 import { defineStore } from 'pinia';
 import { useImageStore } from '@/src/store/datasets-images';
 import { join, normalize } from '@/src/utils/path';
@@ -16,14 +11,13 @@ import { normalizeForStore, removeFromArray } from '@/src/utils';
 import { compareImageSpaces } from '@/src/utils/imageSpace';
 import { SegmentMask } from '@/src/types/segment';
 import { DEFAULT_SEGMENT_MASKS } from '@/src/config';
-import { RGBAColor } from '@kitware/vtk.js/types';
+import { readImage, writeImage } from '@/src/io/readWriteImage';
 import vtkLabelMap from '../vtk/LabelMap';
 import {
   StateFile,
   Manifest,
   SegmentGroupMetadata,
 } from '../io/state-file/schema';
-import { vtiReader, vtiWriter } from '../io/vtk/async';
 import { FileEntry } from '../io/types';
 import {
   DataSelection,
@@ -33,37 +27,6 @@ import {
   selectionEquals,
 } from './datasets';
 
-const readImage = async (file: File) => {
-  if (file.name.endsWith('.vti'))
-    return (await vtiReader(file)) as vtkImageData;
-
-  const { image } = await readImageItk(null, file);
-  return vtkITKHelper.convertItkToVtkImage(image);
-};
-
-const writeImage = async (format: string, image: vtkImageData) => {
-  if (format === 'vti') {
-    return vtiWriter(image);
-  }
-  // copyImage so writeImage does not detach live data when passing to worker
-  const itkImage = copyImage(vtkITKHelper.convertVtkToItkImage(image));
-
-  // Transpose the direction matrix to fix bug in @itk-wasm/image-io.writeImage
-  // Remove when @itk-wasm/image-io version is above 0.5.0 https://github.com/InsightSoftwareConsortium/itk-wasm/commit/ad9ca85eedc47c9d3444cf36859569c529886bde
-  const oldDirection = [...itkImage.direction];
-  const { dimension } = itkImage.imageType;
-  for (let idx = 0; idx < dimension; ++idx) {
-    for (let idy = 0; idy < dimension; ++idy) {
-      itkImage.direction[idx + idy * dimension] =
-        oldDirection[idy + idx * dimension];
-    }
-  }
-
-  const result = await writeImageItk(null, itkImage, `image.${format}`);
-  result.webWorker?.terminate();
-  return result.serializedImage.data;
-};
-
 const LabelmapArrayType = Uint8Array;
 export type LabelmapArrayType = Uint8Array;
 

From 85918a9e6b28d0b7ac051bd093988534ed512ea6 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 15 Dec 2023 11:55:07 -0500
Subject: [PATCH 045/113] feat(Save Dialogs): enter key triggers save

---
 src/components/SaveSegmentGroupDialog.vue | 7 ++++++-
 src/components/SaveSession.vue            | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
index 579a6e97a..f064e1214 100644
--- a/src/components/SaveSegmentGroupDialog.vue
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -43,6 +43,7 @@ import { onMounted, ref } from 'vue';
 import { saveAs } from 'file-saver';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { writeImage } from '@/src/io/readWriteImage';
+import { onKeyDown } from '@vueuse/core';
 
 const EXTENSIONS = [
   'dcm',
@@ -57,7 +58,7 @@ const EXTENSIONS = [
 ];
 
 const props = defineProps<{
-  close: () => undefined;
+  close: () => void;
   id: string;
 }>();
 const fileName = ref('');
@@ -87,6 +88,10 @@ onMounted(() => {
   fileName.value = segmentGroupStore.metadataByID[props.id].name;
 });
 
+onKeyDown('Enter', () => {
+  saveSegmentGroup();
+});
+
 function validFileName(name: string) {
   return name.trim().length > 0 || 'Required';
 }
diff --git a/src/components/SaveSession.vue b/src/components/SaveSession.vue
index ad2710b35..33c1973d6 100644
--- a/src/components/SaveSession.vue
+++ b/src/components/SaveSession.vue
@@ -33,6 +33,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
 import { saveAs } from 'file-saver';
+import { onKeyDown } from '@vueuse/core';
 
 import { serialize } from '../io/state-file';
 
@@ -68,6 +69,10 @@ export default defineComponent({
       fileName.value = DEFAULT_FILENAME;
     });
 
+    onKeyDown('Enter', () => {
+      saveSession();
+    });
+
     function validFileName(name: string) {
       return name.trim().length > 0 || 'Required';
     }

From 234558aecdf5c6f2f2ecf074c46c5338432d9706 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 29 Dec 2023 13:56:20 -0500
Subject: [PATCH 046/113] fix(io): terminate web workers for vtk async
 read/write

---
 src/io/readWriteImage.ts |  3 ++-
 src/io/vtk/async.ts      | 18 ++++++++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/io/readWriteImage.ts b/src/io/readWriteImage.ts
index fd32604b9..286e3ebb4 100644
--- a/src/io/readWriteImage.ts
+++ b/src/io/readWriteImage.ts
@@ -11,7 +11,8 @@ export const readImage = async (file: File) => {
   if (file.name.endsWith('.vti'))
     return (await vtiReader(file)) as vtkImageData;
 
-  const { image } = await readImageItk(null, file);
+  const { image, webWorker } = await readImageItk(null, file);
+  webWorker.terminate();
   return vtkITKHelper.convertItkToVtkImage(image);
 };
 
diff --git a/src/io/vtk/async.ts b/src/io/vtk/async.ts
index e99619b25..9e21e2db6 100644
--- a/src/io/vtk/async.ts
+++ b/src/io/vtk/async.ts
@@ -18,15 +18,18 @@ interface FailResult {
 type ReadResult = SuccessReadResult | FailResult;
 
 export const runAsyncVTKReader = (readerName: string) => async (file: File) => {
-  const worker = new PromiseWorker(
-    new Worker(new URL('./async.reader.worker.ts', import.meta.url), {
+  const asyncWorker = new Worker(
+    new URL('./async.reader.worker.ts', import.meta.url),
+    {
       type: 'module',
-    })
+    }
   );
+  const worker = new PromiseWorker(asyncWorker);
   const data = (await worker.postMessage({
     file,
     readerName,
   })) as ReadResult;
+  asyncWorker.terminate();
   if (data.status === 'success') {
     return vtk(data.obj) as vtkObject;
   }
@@ -41,15 +44,18 @@ type WriteResult = SuccessWriteResult | FailResult;
 
 export const runAsyncVTKWriter =
   (writerName: string) => async (dataSet: vtkDataSet) => {
-    const worker = new PromiseWorker(
-      new Worker(new URL('./async.writer.worker.ts', import.meta.url), {
+    const asyncWorker = new Worker(
+      new URL('./async.writer.worker.ts', import.meta.url),
+      {
         type: 'module',
-      })
+      }
     );
+    const worker = new PromiseWorker(asyncWorker);
     const result = (await worker.postMessage({
       obj: dataSet.getState(),
       writerName,
     })) as WriteResult;
+    asyncWorker.terminate();
     if (result.status === 'success') {
       return result.data;
     }

From 40ee9c3c03f46728c4706283803e740356e33c99 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 21 Feb 2024 16:06:37 -0500
Subject: [PATCH 047/113] fix(SaveSegmentGroupDialog): show error message

---
 src/components/SaveSegmentGroupDialog.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
index f064e1214..80e7579c9 100644
--- a/src/components/SaveSegmentGroupDialog.vue
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -40,10 +40,11 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { onKeyDown } from '@vueuse/core';
 import { saveAs } from 'file-saver';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import { writeImage } from '@/src/io/readWriteImage';
-import { onKeyDown } from '@vueuse/core';
+import { useErrorMessage } from '@/src/composables/useErrorMessage';
 
 const EXTENSIONS = [
   'dcm',
@@ -72,15 +73,15 @@ async function saveSegmentGroup() {
   if (fileName.value.trim().length === 0) {
     return;
   }
-  try {
-    saving.value = true;
+
+  saving.value = true;
+  await useErrorMessage('Failed to save segment group', async () => {
     const image = segmentGroupStore.dataIndex[props.id];
     const serialized = await writeImage(fileFormat.value, image);
     saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`);
-    props.close();
-  } finally {
-    saving.value = false;
-  }
+  });
+  saving.value = false;
+  props.close();
 }
 
 onMounted(() => {

From 259e2924715247868cedc4ac73a2e31ba1d2b9c9 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 21 Feb 2024 16:16:51 -0500
Subject: [PATCH 048/113] feat(SaveSegmentGroupDialog): use select, not radio

For file format selection
---
 src/components/SaveSegmentGroupDialog.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
index 80e7579c9..2f9e5d09a 100644
--- a/src/components/SaveSegmentGroupDialog.vue
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -14,13 +14,11 @@
           id="filename"
         />
 
-        <v-radio-group v-model="fileFormat" label="Format">
-          <v-radio v-for="ext in EXTENSIONS" :key="ext" :value="ext">
-            <template #label>
-              {{ ext }}
-            </template>
-          </v-radio>
-        </v-radio-group>
+        <v-select
+          label="Format"
+          v-model="fileFormat"
+          :items="EXTENSIONS"
+        ></v-select>
       </v-form>
     </v-card-text>
     <v-card-actions>
@@ -47,11 +45,11 @@ import { writeImage } from '@/src/io/readWriteImage';
 import { useErrorMessage } from '@/src/composables/useErrorMessage';
 
 const EXTENSIONS = [
-  'dcm',
   'nrrd',
-  'hdf5',
   'nii',
   'nii.gz',
+  'dcm',
+  'hdf5',
   'tif',
   'mha',
   'vtk',

From d2c00f1b548853298a12399d63177c7a83272aa3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 22 Feb 2024 09:33:31 -0500
Subject: [PATCH 049/113] chore(deps): update wido packages for new chrome url

Fix e2e tests not finding correct chrome version.
---
 package-lock.json                 | 4915 +++++++++++------------------
 package.json                      |   12 +-
 tests/pageobjects/volview.page.ts |    2 +-
 3 files changed, 1895 insertions(+), 3034 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 32384215c..c16dd977c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,10 +53,10 @@
         "@vue/eslint-config-airbnb": "^6.0.0",
         "@vue/eslint-config-typescript": "^9.1.0",
         "@vue/test-utils": "^2.3.2",
-        "@wdio/cli": "^8.11.2",
-        "@wdio/local-runner": "^8.11.2",
-        "@wdio/mocha-framework": "^8.11.0",
-        "@wdio/spec-reporter": "^8.11.2",
+        "@wdio/cli": "^8.32.3",
+        "@wdio/local-runner": "^8.32.3",
+        "@wdio/mocha-framework": "^8.32.3",
+        "@wdio/spec-reporter": "^8.32.2",
         "@wdio/static-server-service": "^8.11.0",
         "babel-eslint": "10.1.0",
         "canvas": "^2.11.2",
@@ -64,7 +64,7 @@
         "chai-almost": "^1.0.1",
         "chai-as-promised": "7.1.1",
         "chai-subset": "^1.6.0",
-        "chromedriver": "^119.0.0",
+        "chromedriver": "^121.0.2",
         "concurrently": "^8.2.2",
         "cross-env": "^7.0.3",
         "eslint": "^7.32.0",
@@ -99,7 +99,7 @@
         "wdio-image-comparison-service": "^5.0.3",
         "wdio-safaridriver-service": "^2.1.0",
         "wdio-wait-for": "^3.0.4",
-        "webdriverio": "^8.20.0",
+        "webdriverio": "^8.32.3",
         "yorkie": "^2.0.0"
       }
     },
@@ -3058,9 +3058,9 @@
       }
     },
     "node_modules/@jest/expect-utils": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.6.3.tgz",
-      "integrity": "sha512-nvOEW4YoqRKD9HBJ9OJ6przvIvP9qilp5nAn1462P5ZlL/MM9SgPEZFyjTGPfs7QkocdUsJa6KjHhyRn4ueItA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
+      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
       "dev": true,
       "dependencies": {
         "jest-get-type": "^29.6.3"
@@ -3265,10 +3265,13 @@
       }
     },
     "node_modules/@ljharb/through": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.9.tgz",
-      "integrity": "sha512-yN599ZBuMPPK4tdoToLlvgJB4CLK8fGl7ntfy0Wn7U6ttNvHYurd81bfUiK/6sMkiIwm65R6ck4L6+Y3DfVbNQ==",
+      "version": "2.3.12",
+      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.12.tgz",
+      "integrity": "sha512-ajo/heTlG3QgC8EGP6APIejksVAYt4ayz4tqoP3MolFELzcH1x1fzwEYRJTPO0IELutZ5HQ0c26/GqAYy79u3g==",
       "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5"
+      },
       "engines": {
         "node": ">= 0.4"
       }
@@ -4686,24 +4689,24 @@
       "dev": true
     },
     "node_modules/@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
       "dev": true
     },
     "node_modules/@types/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
       "dev": true,
       "dependencies": {
         "@types/istanbul-lib-coverage": "*"
       }
     },
     "node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
       "dev": true,
       "dependencies": {
         "@types/istanbul-lib-report": "*"
@@ -4790,9 +4793,9 @@
       }
     },
     "node_modules/@types/stack-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
     "node_modules/@types/tcp-port-used": {
@@ -4822,18 +4825,18 @@
       }
     },
     "node_modules/@types/yargs": {
-      "version": "17.0.24",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
-      "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "version": "17.0.32",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
+      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
       "dev": true,
       "dependencies": {
         "@types/yargs-parser": "*"
       }
     },
     "node_modules/@types/yargs-parser": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "dev": true
     },
     "node_modules/@types/yauzl": {
@@ -5492,35 +5495,35 @@
       }
     },
     "node_modules/@wdio/cli": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/cli/-/cli-8.15.6.tgz",
-      "integrity": "sha512-6k+Dscy3XQY9USsEvTy5nWuzvExmEaDmJtuewTlxDn2nWbIy9GX/Hwm48O2ts5v9xzftxqoZTVtZpKWlicA/6Q==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/cli/-/cli-8.32.3.tgz",
+      "integrity": "sha512-qjR1MFKQM547iCooceBHyggJRNguD7fhgF4Q7L2r7psG3AQFWzdCN/8rulRGIxTz4PJlIqks9AH9kUJlVAf44A==",
       "dev": true,
       "dependencies": {
         "@types/node": "^20.1.1",
-        "@wdio/config": "8.15.6",
-        "@wdio/globals": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@vitest/snapshot": "^1.2.1",
+        "@wdio/config": "8.32.3",
+        "@wdio/globals": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "async-exit-hook": "^2.0.1",
         "chalk": "^5.2.0",
         "chokidar": "^3.5.3",
         "cli-spinners": "^2.9.0",
         "dotenv": "^16.3.1",
         "ejs": "^3.1.9",
-        "execa": "^7.1.1",
-        "import-meta-resolve": "^3.0.0",
-        "inquirer": "9.2.10",
+        "execa": "^8.0.1",
+        "import-meta-resolve": "^4.0.0",
+        "inquirer": "9.2.12",
         "lodash.flattendeep": "^4.4.0",
         "lodash.pickby": "^4.6.0",
         "lodash.union": "^4.6.0",
         "read-pkg-up": "10.0.0",
         "recursive-readdir": "^2.2.3",
-        "webdriverio": "8.15.6",
-        "yargs": "^17.7.2",
-        "yarn-install": "^1.0.0"
+        "webdriverio": "8.32.3",
+        "yargs": "^17.7.2"
       },
       "bin": {
         "wdio": "bin/wdio.js"
@@ -5529,184 +5532,113 @@
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/cli/node_modules/archiver": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+    "node_modules/@wdio/cli/node_modules/@vitest/snapshot": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.3.1.tgz",
+      "integrity": "sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==",
       "dev": true,
       "dependencies": {
-        "archiver-utils": "^2.1.0",
-        "async": "^3.2.4",
-        "buffer-crc32": "^0.2.1",
-        "readable-stream": "^3.6.0",
-        "readdir-glob": "^1.1.2",
-        "tar-stream": "^2.2.0",
-        "zip-stream": "^4.1.0"
+        "magic-string": "^0.30.5",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.7.0"
       },
-      "engines": {
-        "node": ">= 10"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@wdio/cli/node_modules/archiver-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+    "node_modules/@wdio/cli/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
-        "glob": "^7.1.4",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^2.0.0"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/cli/node_modules/archiver/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/cli/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wdio/cli/node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-      "dev": true
-    },
-    "node_modules/@wdio/cli/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/cli/node_modules/chalk": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
-      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+    "node_modules/@wdio/cli/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
       "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+        "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@wdio/cli/node_modules/compress-commons": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+    "node_modules/@wdio/cli/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
       "dev": true,
-      "dependencies": {
-        "buffer-crc32": "^0.2.13",
-        "crc32-stream": "^4.0.2",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
-      },
       "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@wdio/cli/node_modules/compress-commons/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "node": ">=10"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@wdio/cli/node_modules/crc32-stream": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+    "node_modules/@wdio/cli/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
-      "dependencies": {
-        "crc-32": "^1.2.0",
-        "readable-stream": "^3.4.0"
-      },
       "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@wdio/cli/node_modules/crc32-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/@wdio/cli/node_modules/execa": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-      "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
       "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.1",
-        "human-signals": "^4.3.0",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
         "is-stream": "^3.0.0",
         "merge-stream": "^2.0.0",
         "npm-run-path": "^5.1.0",
         "onetime": "^6.0.0",
-        "signal-exit": "^3.0.7",
+        "signal-exit": "^4.1.0",
         "strip-final-newline": "^3.0.0"
       },
       "engines": {
-        "node": "^14.18.0 || ^16.14.0 || >=18.0.0"
+        "node": ">=16.17"
       },
       "funding": {
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
     "node_modules/@wdio/cli/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@wdio/cli/node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -5736,25 +5668,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@wdio/cli/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/@wdio/cli/node_modules/npm-run-path": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-      "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
+      "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
       "dev": true,
       "dependencies": {
         "path-key": "^4.0.0"
@@ -5793,159 +5710,128 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@wdio/cli/node_modules/strip-final-newline": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
+    "node_modules/@wdio/cli/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true
     },
-    "node_modules/@wdio/cli/node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+    "node_modules/@wdio/cli/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@wdio/cli/node_modules/tar-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/cli/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
+    "node_modules/@wdio/cli/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
       "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
       "engines": {
-        "node": ">= 6"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@wdio/cli/node_modules/webdriverio": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-      "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
+    "node_modules/@wdio/cli/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
       "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/config": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/repl": "8.10.1",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "archiver": "^5.0.0",
-        "aria-query": "^5.0.0",
-        "css-shorthand-properties": "^1.1.1",
-        "css-value": "^0.0.1",
-        "devtools-protocol": "^0.0.1182435",
-        "grapheme-splitter": "^1.0.2",
-        "import-meta-resolve": "^3.0.0",
-        "is-plain-obj": "^4.1.0",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.zip": "^4.2.0",
-        "minimatch": "^9.0.0",
-        "puppeteer-core": "^20.9.0",
-        "query-selector-shadow-dom": "^1.0.0",
-        "resq": "^1.9.1",
-        "rgb2hex": "0.2.5",
-        "serialize-error": "^11.0.1",
-        "webdriver": "8.15.6"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": "^16.13 || >=18"
-      },
-      "peerDependencies": {
-        "devtools": "^8.14.0"
+        "node": ">=12"
       },
-      "peerDependenciesMeta": {
-        "devtools": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@wdio/cli/node_modules/zip-stream": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+    "node_modules/@wdio/cli/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
       "dev": true,
-      "dependencies": {
-        "archiver-utils": "^3.0.4",
-        "compress-commons": "^4.1.2",
-        "readable-stream": "^3.6.0"
-      },
       "engines": {
-        "node": ">= 10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@wdio/cli/node_modules/zip-stream/node_modules/archiver-utils": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+    "node_modules/@wdio/config": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.32.3.tgz",
+      "integrity": "sha512-hZkaz5Fd8830uniQvRgPus8yp9rp50MAsHa5kZ2Jt8y++Rp330FyJpQZE5oPjTATuz35G5Anprk2Q3fmFd0Ifw==",
       "dev": true,
       "dependencies": {
-        "glob": "^7.2.3",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
+        "decamelize": "^6.0.0",
+        "deepmerge-ts": "^5.0.0",
+        "glob": "^10.2.2",
+        "import-meta-resolve": "^4.0.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/cli/node_modules/zip-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/config/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/config": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.15.6.tgz",
-      "integrity": "sha512-SWUoky6FrhBpcTtKOYLP2d9Sknw71W9A7ih5NuhL9joJZ8BfFQrwJxZ6b/O8zTTuUU5OikFBWFqNKx2XmJlKtw==",
+    "node_modules/@wdio/config/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "decamelize": "^6.0.0",
-        "deepmerge-ts": "^5.0.0",
-        "glob": "^10.2.2",
-        "import-meta-resolve": "^3.0.0",
-        "read-pkg-up": "^10.0.0"
+        "@types/node": "^20.1.0"
       },
       "engines": {
         "node": "^16.13 || >=18"
       }
     },
+    "node_modules/@wdio/config/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/@wdio/config/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -5955,20 +5841,32 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/@wdio/config/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/@wdio/config/node_modules/glob": {
-      "version": "10.3.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
-      "integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
-        "jackspeak": "^2.0.3",
+        "jackspeak": "^2.3.5",
         "minimatch": "^9.0.1",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
         "path-scurry": "^1.10.1"
       },
       "bin": {
-        "glob": "dist/cjs/src/bin.js"
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -5993,334 +5891,125 @@
       }
     },
     "node_modules/@wdio/config/node_modules/minipass": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
-      "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
       "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/@wdio/globals": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/globals/-/globals-8.15.6.tgz",
-      "integrity": "sha512-Y3yAYONtWHg9GwZ+WKoHOwZT0vfa2TN7yl/ThtitIWwwaaUdaIO/LfcAo9kTwTdB9F6JefQQtWWljCBO9q2bzQ==",
-      "dev": true,
-      "engines": {
-        "node": "^16.13 || >=18"
-      },
-      "optionalDependencies": {
-        "expect-webdriverio": "^4.2.5",
-        "webdriverio": "8.15.6"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/archiver": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+    "node_modules/@wdio/config/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
-      "optional": true,
       "dependencies": {
-        "archiver-utils": "^2.1.0",
-        "async": "^3.2.4",
-        "buffer-crc32": "^0.2.1",
-        "readable-stream": "^3.6.0",
-        "readdir-glob": "^1.1.2",
-        "tar-stream": "^2.2.0",
-        "zip-stream": "^4.1.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/archiver-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "glob": "^7.1.4",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^2.0.0"
+        "node": ">=12"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@wdio/globals/node_modules/archiver/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/globals": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/globals/-/globals-8.32.3.tgz",
+      "integrity": "sha512-jyK89GvWaOYQT9pfZ6HNwkFANgai9eBVfeDPw5yFLXfk6js9GSWbvqMJg/PFi1dQ7xbnbuuf5eYVc65bfAt9KQ==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/@wdio/globals/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/compress-commons": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "buffer-crc32": "^0.2.13",
-        "crc32-stream": "^4.0.2",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
+        "node": "^16.13 || >=18"
       },
-      "engines": {
-        "node": ">= 10"
+      "optionalDependencies": {
+        "expect-webdriverio": "^4.11.2",
+        "webdriverio": "8.32.3"
       }
     },
-    "node_modules/@wdio/globals/node_modules/compress-commons/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/local-runner": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/local-runner/-/local-runner-8.32.3.tgz",
+      "integrity": "sha512-YgqYkKarx2m9OjA8WO4NqQPCfFNLmZHnuEWQ6P2LqUeYFsdXRd3wR3UTo9XrI23VSQo+kcpqInsR5vLOYDd1zg==",
       "dev": true,
-      "optional": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/repl": "8.24.12",
+        "@wdio/runner": "8.32.3",
+        "@wdio/types": "8.32.2",
+        "async-exit-hook": "^2.0.1",
+        "split2": "^4.1.0",
+        "stream-buffers": "^3.0.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/globals/node_modules/crc32-stream": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+    "node_modules/@wdio/local-runner/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
-      "optional": true,
       "dependencies": {
-        "crc-32": "^1.2.0",
-        "readable-stream": "^3.4.0"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/globals/node_modules/crc32-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/local-runner/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
-      "optional": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/globals/node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+    "node_modules/@wdio/local-runner/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
-      "optional": true,
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@wdio/globals/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+    "node_modules/@wdio/local-runner/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/tar-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/webdriverio": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-      "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/config": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/repl": "8.10.1",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "archiver": "^5.0.0",
-        "aria-query": "^5.0.0",
-        "css-shorthand-properties": "^1.1.1",
-        "css-value": "^0.0.1",
-        "devtools-protocol": "^0.0.1182435",
-        "grapheme-splitter": "^1.0.2",
-        "import-meta-resolve": "^3.0.0",
-        "is-plain-obj": "^4.1.0",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.zip": "^4.2.0",
-        "minimatch": "^9.0.0",
-        "puppeteer-core": "^20.9.0",
-        "query-selector-shadow-dom": "^1.0.0",
-        "resq": "^1.9.1",
-        "rgb2hex": "0.2.5",
-        "serialize-error": "^11.0.1",
-        "webdriver": "8.15.6"
-      },
-      "engines": {
-        "node": "^16.13 || >=18"
-      },
-      "peerDependencies": {
-        "devtools": "^8.14.0"
-      },
-      "peerDependenciesMeta": {
-        "devtools": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/zip-stream": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "archiver-utils": "^3.0.4",
-        "compress-commons": "^4.1.2",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@wdio/globals/node_modules/zip-stream/node_modules/archiver-utils": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "glob": "^7.2.3",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">= 10"
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@wdio/globals/node_modules/zip-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/local-runner/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
-      "optional": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wdio/local-runner": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/local-runner/-/local-runner-8.15.6.tgz",
-      "integrity": "sha512-nanWaaBHocu7LtETX11Yn74AHe9lNfb/7rzVku1fJIjtmilqPXP/oL2kFK/U+tWFmX/pma93o5t2hqTpTVtIUA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/repl": "8.10.1",
-        "@wdio/runner": "8.15.6",
-        "@wdio/types": "8.15.0",
-        "async-exit-hook": "^2.0.1",
-        "split2": "^4.1.0",
-        "stream-buffers": "^3.0.2"
+        "node": ">=12"
       },
-      "engines": {
-        "node": "^16.13 || >=18"
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/@wdio/logger": {
@@ -6378,16 +6067,16 @@
       }
     },
     "node_modules/@wdio/mocha-framework": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/mocha-framework/-/mocha-framework-8.15.6.tgz",
-      "integrity": "sha512-HBE1IQn+g1L7r1fUhFHWl0HNGWwcOZg3KeDyeBSTVcjE5MspK4FfhSanT3zT4dkNVTvUVbTY00uKfj8ArK4q8g==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/mocha-framework/-/mocha-framework-8.32.3.tgz",
+      "integrity": "sha512-wwQ6rDd6TMPqwGfkwvtcBmcirYZUi9GUiwH2OsHvMJ4i+YY7H2dLyZon1ghcIan7r4ufr8KlljbwyerCpUzvcw==",
       "dev": true,
       "dependencies": {
         "@types/mocha": "^10.0.0",
         "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "mocha": "^10.0.0"
       },
       "engines": {
@@ -6400,356 +6089,268 @@
       "integrity": "sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q==",
       "dev": true
     },
-    "node_modules/@wdio/protocols": {
-      "version": "8.14.6",
-      "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.14.6.tgz",
-      "integrity": "sha512-KM2taEMUDEt1of0Na/6kIv/aNzX0pmr0etpKRci4QrWPQ1O11dXxWjkatFILQz6qOVKvQ0v+vkTPQRUllmH+uQ==",
-      "dev": true
-    },
-    "node_modules/@wdio/repl": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-8.10.1.tgz",
-      "integrity": "sha512-VZ1WFHTNKjR8Ga97TtV2SZM6fvRjWbYI2i/f4pJB4PtusorKvONAMJf2LQcUBIyzbVobqr7KSrcjmSwRolI+yw==",
+    "node_modules/@wdio/mocha-framework/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
-        "@types/node": "^20.1.0"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/reporter": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/reporter/-/reporter-8.15.6.tgz",
-      "integrity": "sha512-0gxFIdg9EeFijbsQDJW1WVnZxeNprRP+PCkZxZjdkHjX8II9rsYF7XpMdhAWaebqwNLWcZI3/xB9zOTeLgjaFg==",
+    "node_modules/@wdio/mocha-framework/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "diff": "^5.0.0",
-        "object-inspect": "^1.12.0",
-        "supports-color": "9.4.0"
+        "@types/node": "^20.1.0"
       },
       "engines": {
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/reporter/node_modules/supports-color": {
-      "version": "9.4.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
-      "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==",
+    "node_modules/@wdio/mocha-framework/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/runner/-/runner-8.15.6.tgz",
-      "integrity": "sha512-V2IS9zyzSNrDfAvf1I2nWXwhCVJ9bm3ezLefkPCrPmVGtT8RaQbtI8p3BBpg4XewJoFM2vpP4p3zhCmZ+zrSDQ==",
+    "node_modules/@wdio/mocha-framework/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
-      "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/config": "8.15.6",
-        "@wdio/globals": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "deepmerge-ts": "^5.0.0",
-        "expect-webdriverio": "^4.2.5",
-        "gaze": "^1.1.2",
-        "webdriver": "8.15.6",
-        "webdriverio": "8.15.6"
-      },
       "engines": {
-        "node": "^16.13 || >=18"
-      }
-    },
-    "node_modules/@wdio/runner/node_modules/archiver": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
-      "dev": true,
-      "dependencies": {
-        "archiver-utils": "^2.1.0",
-        "async": "^3.2.4",
-        "buffer-crc32": "^0.2.1",
-        "readable-stream": "^3.6.0",
-        "readdir-glob": "^1.1.2",
-        "tar-stream": "^2.2.0",
-        "zip-stream": "^4.1.0"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
-      "engines": {
-        "node": ">= 10"
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/archiver-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+    "node_modules/@wdio/mocha-framework/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
       "dependencies": {
-        "glob": "^7.1.4",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^2.0.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/@wdio/runner/node_modules/archiver/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "node": ">=12"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/async": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-      "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+    "node_modules/@wdio/protocols": {
+      "version": "8.32.0",
+      "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.32.0.tgz",
+      "integrity": "sha512-inLJRrtIGdTz/YPbcsvpSvPlYQFTVtF3OYBwAXhG2FiP1ZwE1CQNLP/xgRGye1ymdGCypGkexRqIx3KBGm801Q==",
       "dev": true
     },
-    "node_modules/@wdio/runner/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/@wdio/runner/node_modules/compress-commons": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+    "node_modules/@wdio/repl": {
+      "version": "8.24.12",
+      "resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-8.24.12.tgz",
+      "integrity": "sha512-321F3sWafnlw93uRTSjEBVuvWCxTkWNDs7ektQS15drrroL3TMeFOynu4rDrIz0jXD9Vas0HCD2Tq/P0uxFLdw==",
       "dev": true,
       "dependencies": {
-        "buffer-crc32": "^0.2.13",
-        "crc32-stream": "^4.0.2",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
+        "@types/node": "^20.1.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/compress-commons/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/reporter": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/reporter/-/reporter-8.32.2.tgz",
+      "integrity": "sha512-BZdReAFfRCtgtYbyhkKgSGqqoIn/yG5/Z4COjvRvon9NJkz+eA4PiHCKdEP7+ekBIjud7H8Gy+6mPBDEu+wllw==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "diff": "^5.0.0",
+        "object-inspect": "^1.12.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/crc32-stream": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+    "node_modules/@wdio/reporter/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
-        "crc-32": "^1.2.0",
-        "readable-stream": "^3.4.0"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/crc32-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/reporter/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/is-plain-obj": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+    "node_modules/@wdio/reporter/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/minimatch": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+    "node_modules/@wdio/reporter/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
       "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/tar-stream": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+    "node_modules/@wdio/reporter/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
       "dependencies": {
-        "bl": "^4.0.3",
-        "end-of-stream": "^1.4.1",
-        "fs-constants": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^3.1.1"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/tar-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/runner": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/runner/-/runner-8.32.3.tgz",
+      "integrity": "sha512-HlhdQ4lJ07seL7/x0UQPDnK+o5a0okyjd8ukFYqDL+g9+d3KlW/oM3NvFfX7pb9liIYNEpmoNMwKFp+5XPUE7w==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "@types/node": "^20.1.0",
+        "@wdio/config": "8.32.3",
+        "@wdio/globals": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
+        "deepmerge-ts": "^5.0.0",
+        "expect-webdriverio": "^4.11.2",
+        "gaze": "^1.1.2",
+        "webdriver": "8.32.3",
+        "webdriverio": "8.32.3"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/webdriverio": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-      "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
+    "node_modules/@wdio/runner/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
-        "@types/node": "^20.1.0",
-        "@wdio/config": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/repl": "8.10.1",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "archiver": "^5.0.0",
-        "aria-query": "^5.0.0",
-        "css-shorthand-properties": "^1.1.1",
-        "css-value": "^0.0.1",
-        "devtools-protocol": "^0.0.1182435",
-        "grapheme-splitter": "^1.0.2",
-        "import-meta-resolve": "^3.0.0",
-        "is-plain-obj": "^4.1.0",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.zip": "^4.2.0",
-        "minimatch": "^9.0.0",
-        "puppeteer-core": "^20.9.0",
-        "query-selector-shadow-dom": "^1.0.0",
-        "resq": "^1.9.1",
-        "rgb2hex": "0.2.5",
-        "serialize-error": "^11.0.1",
-        "webdriver": "8.15.6"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
       },
       "engines": {
         "node": "^16.13 || >=18"
-      },
-      "peerDependencies": {
-        "devtools": "^8.14.0"
-      },
-      "peerDependenciesMeta": {
-        "devtools": {
-          "optional": true
-        }
       }
     },
-    "node_modules/@wdio/runner/node_modules/zip-stream": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+    "node_modules/@wdio/runner/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
-        "archiver-utils": "^3.0.4",
-        "compress-commons": "^4.1.2",
-        "readable-stream": "^3.6.0"
+        "@types/node": "^20.1.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@wdio/runner/node_modules/zip-stream/node_modules/archiver-utils": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+    "node_modules/@wdio/runner/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
       "dev": true,
-      "dependencies": {
-        "glob": "^7.2.3",
-        "graceful-fs": "^4.2.0",
-        "lazystream": "^1.0.0",
-        "lodash.defaults": "^4.2.0",
-        "lodash.difference": "^4.5.0",
-        "lodash.flatten": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.union": "^4.6.0",
-        "normalize-path": "^3.0.0",
-        "readable-stream": "^3.6.0"
+      "engines": {
+        "node": ">=12"
       },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@wdio/runner/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
       "engines": {
-        "node": ">= 10"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@wdio/runner/node_modules/zip-stream/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+    "node_modules/@wdio/runner/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
       "dev": true,
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/@wdio/spec-reporter": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/spec-reporter/-/spec-reporter-8.15.6.tgz",
-      "integrity": "sha512-uhD6Kzek0ClDTBLdApt8ZTyIK8rPob9PoEIehy3ifI/gBHVCNYOnHIg7Z6gNcPnXuA7vvEALBBW/YS5iysiUeA==",
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/spec-reporter/-/spec-reporter-8.32.2.tgz",
+      "integrity": "sha512-3hUXpE+idC4KOXofJnpubdDDCE8X0OTd6ykypiaXMI2hJTA2nIZcHtpRQnAE0E4JT9OzLnPWODcMq54GGBDRkg==",
       "dev": true,
       "dependencies": {
-        "@wdio/reporter": "8.15.6",
-        "@wdio/types": "8.15.0",
+        "@wdio/reporter": "8.32.2",
+        "@wdio/types": "8.32.2",
         "chalk": "^5.1.2",
         "easy-table": "^1.2.0",
         "pretty-ms": "^7.0.0"
@@ -6758,6 +6359,18 @@
         "node": "^16.13 || >=18"
       }
     },
+    "node_modules/@wdio/spec-reporter/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^20.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
     "node_modules/@wdio/spec-reporter/node_modules/chalk": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -6798,42 +6411,108 @@
       }
     },
     "node_modules/@wdio/utils": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.15.6.tgz",
-      "integrity": "sha512-oC6iqlVQwtyUyjq3erEn599l/VS0FLE/2a0LMeRooteq8Za+LlXJCDU2kvh5Q4wxk9qrq45OFjlA3a3CmCUoPg==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.32.3.tgz",
+      "integrity": "sha512-UnR9rPpR1W9U5wz2TU+6BQ2rlxtuK/e3fvdaiWIMZKleB/OCcEQFGiGPAGGVi4ShfaTPwz6hK1cTTgj1OtMXkg==",
       "dev": true,
       "dependencies": {
         "@puppeteer/browsers": "^1.6.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "chrome-launcher": "^1.0.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
         "decamelize": "^6.0.0",
         "deepmerge-ts": "^5.1.0",
         "edgedriver": "^5.3.5",
-        "geckodriver": "^4.2.0",
+        "geckodriver": "^4.3.1",
         "get-port": "^7.0.0",
-        "got": "^13.0.0",
-        "import-meta-resolve": "^3.0.0",
+        "import-meta-resolve": "^4.0.0",
+        "locate-app": "^2.1.0",
         "safaridriver": "^0.1.0",
+        "split2": "^4.2.0",
         "wait-port": "^1.0.4"
       },
       "engines": {
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
-      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+    "node_modules/@wdio/utils/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+      "dev": true,
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
       }
     },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
-      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
+    "node_modules/@wdio/utils/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^20.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
+    "node_modules/@wdio/utils/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@wdio/utils/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@wdio/utils/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
+      "integrity": "sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.1"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz",
+      "integrity": "sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ=="
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.11.1",
@@ -7521,11 +7200,11 @@
       "dev": true
     },
     "node_modules/axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.4",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -7619,6 +7298,43 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/bare-events": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.0.tgz",
+      "integrity": "sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/bare-fs": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.1.5.tgz",
+      "integrity": "sha512-5t0nlecX+N2uJqdxe9d18A98cp2u9BETelbjKpiVgQqzzmVNFYWEAjQHqS+2Khgto1vcwhik9cXucaj5ve2WWA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.0.0",
+        "bare-os": "^2.0.0",
+        "bare-path": "^2.0.0",
+        "streamx": "^2.13.0"
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.0.tgz",
+      "integrity": "sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/bare-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.0.tgz",
+      "integrity": "sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^2.1.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -8013,12 +7729,18 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8065,28 +7787,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-keys": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-3.0.0.tgz",
-      "integrity": "sha512-U4E6A6aFyYnNW+tDt5/yIUKQURKXe3WMFPfX4FxrQFcwZ/R08AUk1xWcUtlr7oq6CV07Ji+aa69V2g7BSpblnQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^3.0.0",
-        "map-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/camelcase-keys/node_modules/camelcase": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-      "integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001431",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
@@ -8281,36 +7981,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/chrome-launcher": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-1.0.0.tgz",
-      "integrity": "sha512-74IMFVfgni/bQ4GotUNJpH2vDR+Sh9cXNPVhPXiedeiB0+5j7/8i8LAqS7WlyNSKqtxJ/CgbOpBDPLkzqDVhlw==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "escape-string-regexp": "^4.0.0",
-        "is-wsl": "^2.2.0",
-        "lighthouse-logger": "^2.0.1"
-      },
-      "bin": {
-        "print-chrome-path": "bin/print-chrome-path.js"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      }
-    },
-    "node_modules/chrome-launcher/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -8320,14 +7990,14 @@
       }
     },
     "node_modules/chromedriver": {
-      "version": "119.0.1",
-      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-119.0.1.tgz",
-      "integrity": "sha512-lpCFFLaXPpvElTaUOWKdP74pFb/sJhWtWqMjn7Ju1YriWn8dT5JBk84BGXMPvZQs70WfCYWecxdMmwfIu1Mupg==",
+      "version": "121.0.2",
+      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-121.0.2.tgz",
+      "integrity": "sha512-58MUSCEE3oB3G3Y/Jo3URJ2Oa1VLHcVBufyYt7vNfGrABSJm7ienQLF9IQ8LPDlPVgLUXt2OBfggK3p2/SlEBg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@testim/chrome-version": "^1.1.4",
-        "axios": "^1.6.0",
+        "axios": "^1.6.5",
         "compare-versions": "^6.1.0",
         "extract-zip": "^2.0.1",
         "https-proxy-agent": "^5.0.1",
@@ -8402,9 +8072,9 @@
       }
     },
     "node_modules/cli-spinners": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
-      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -9359,6 +9029,22 @@
         "node": ">=10"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -9528,7 +9214,8 @@
       "version": "0.0.1182435",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1182435.tgz",
       "integrity": "sha512-EmlkWb62wSbQNE1gRZZsi4KZYRaF5Skpp183LhRU7+sadKR06O1dHCjZmFSEG6Kv7P6S/UYLxcY3NlYwqKM99w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "node_modules/dicomweb-client-typed": {
       "version": "0.8.6",
@@ -10043,6 +9730,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
@@ -10974,36 +10680,149 @@
       "dev": true
     },
     "node_modules/expect": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-29.6.3.tgz",
-      "integrity": "sha512-x1vY4LlEMWUYVZQrFi4ZANXFwqYbJ/JNQspLVvzhW2BNY28aNcXMQH6imBbt+RBf5sVRTodYHXtSP/TLEU0Dxw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
+      "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
       "dev": true,
       "dependencies": {
-        "@jest/expect-utils": "^29.6.3",
+        "@jest/expect-utils": "^29.7.0",
         "jest-get-type": "^29.6.3",
-        "jest-matcher-utils": "^29.6.3",
-        "jest-message-util": "^29.6.3",
-        "jest-util": "^29.6.3"
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0"
       },
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
     "node_modules/expect-webdriverio": {
-      "version": "4.2.7",
-      "resolved": "https://registry.npmjs.org/expect-webdriverio/-/expect-webdriverio-4.2.7.tgz",
-      "integrity": "sha512-ulNspQoTct5/0OBfNSNzBKldSgoQxzmHBi/TLtrsLZY5QCZ7svD7Csdtm+YEW6IBg/v8MI7ibiMcpWY9cjcG6A==",
+      "version": "4.11.9",
+      "resolved": "https://registry.npmjs.org/expect-webdriverio/-/expect-webdriverio-4.11.9.tgz",
+      "integrity": "sha512-nHVLoC4W8wuVAyfpitJ07iDMLjeQ2OeYVjrKEb7dMeG4fqlegzN1SGYnnsKay+KWrte9KzuW1pZ7h5Nmbm/hAQ==",
       "dev": true,
       "dependencies": {
-        "expect": "^29.6.1",
-        "jest-matcher-utils": "^29.6.1"
+        "@vitest/snapshot": "^1.2.2",
+        "expect": "^29.7.0",
+        "jest-matcher-utils": "^29.7.0",
+        "lodash.isequal": "^4.5.0"
       },
       "engines": {
         "node": ">=16 || >=18 || >=20"
       },
       "optionalDependencies": {
-        "@wdio/globals": "^8.13.1",
-        "webdriverio": "^8.13.1"
+        "@wdio/globals": "^8.29.3",
+        "@wdio/logger": "^8.28.0",
+        "webdriverio": "^8.29.3"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/@vitest/snapshot": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.3.1.tgz",
+      "integrity": "sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==",
+      "dev": true,
+      "dependencies": {
+        "magic-string": "^0.30.5",
+        "pathe": "^1.1.1",
+        "pretty-format": "^29.7.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true
+    },
+    "node_modules/expect-webdriverio/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+      "dev": true,
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/expect-webdriverio/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+      "dev": true
+    },
+    "node_modules/expect-webdriverio/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/express": {
@@ -11735,12 +11554,6 @@
         "readable-stream": "^2.0.0"
       }
     },
-    "node_modules/fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true
-    },
     "node_modules/fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -11813,9 +11626,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -11882,20 +11698,20 @@
       }
     },
     "node_modules/geckodriver": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-4.2.0.tgz",
-      "integrity": "sha512-I2BlybeMFMzpxHRrh8X4VwP4ys74JHszyUgfezOrbTR7PEybFneDcuEjKIQxKV6vFPmsdwhwF1x8AshdQo56xA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-4.3.3.tgz",
+      "integrity": "sha512-we2c2COgxFkLVuoknJNx+ioP+7VDq0sr6SCqWHTzlA4kzIbzR0EQ1Pps34s8WrsOnQqPC8a4sZV9dRPROOrkSg==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@wdio/logger": "^8.11.0",
+        "@wdio/logger": "^8.28.0",
         "decamelize": "^6.0.0",
-        "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.1",
-        "node-fetch": "^3.3.1",
-        "tar-fs": "^3.0.4",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.4",
+        "node-fetch": "^3.3.2",
+        "tar-fs": "^3.0.5",
         "unzipper": "^0.10.14",
-        "which": "^3.0.1"
+        "which": "^4.0.0"
       },
       "bin": {
         "geckodriver": "bin/geckodriver.js"
@@ -11904,6 +11720,21 @@
         "node": "^16.13 || >=18 || >=20"
       }
     },
+    "node_modules/geckodriver/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
     "node_modules/geckodriver/node_modules/agent-base": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
@@ -11916,6 +11747,30 @@
         "node": ">= 14"
       }
     },
+    "node_modules/geckodriver/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/geckodriver/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/geckodriver/node_modules/data-uri-to-buffer": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -11926,9 +11781,9 @@
       }
     },
     "node_modules/geckodriver/node_modules/http-proxy-agent": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-      "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.1.0",
@@ -11939,9 +11794,9 @@
       }
     },
     "node_modules/geckodriver/node_modules/https-proxy-agent": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.1.tgz",
-      "integrity": "sha512-Eun8zV0kcYS1g19r78osiQLEFIRspRUDd9tIfBCTBPBeMieF/EsJNL8VI3xOIdYRDEkjQnqOYPsZ2DsWsVsFwQ==",
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.0.2",
@@ -11951,6 +11806,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/geckodriver/node_modules/isexe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+      "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/geckodriver/node_modules/node-fetch": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
@@ -11969,19 +11833,48 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/geckodriver/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/geckodriver/node_modules/tar-fs": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
+      "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+      "dev": true,
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^2.1.1",
+        "bare-path": "^2.1.0"
+      }
+    },
     "node_modules/geckodriver/node_modules/which": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
-      "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
       "dev": true,
       "dependencies": {
-        "isexe": "^2.0.0"
+        "isexe": "^3.1.1"
       },
       "bin": {
         "node-which": "bin/which.js"
       },
       "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+        "node": "^16.13.0 || >=18.0.0"
       }
     },
     "node_modules/gensync": {
@@ -12012,13 +11905,18 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
-      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12348,70 +12246,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/got": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-13.0.0.tgz",
-      "integrity": "sha512-XfBk1CxOOScDcMr9O1yKkNaQyy865NbYs+F7dr4H0LZMVgCj2Le59k6PqbNHoL5ToeaEQUYh6c6yMfVcc6SJxA==",
-      "dev": true,
-      "dependencies": {
-        "@sindresorhus/is": "^5.2.0",
-        "@szmarczak/http-timer": "^5.0.1",
-        "cacheable-lookup": "^7.0.0",
-        "cacheable-request": "^10.2.8",
-        "decompress-response": "^6.0.0",
-        "form-data-encoder": "^2.1.2",
-        "get-stream": "^6.0.1",
-        "http2-wrapper": "^2.1.10",
-        "lowercase-keys": "^3.0.0",
-        "p-cancelable": "^3.0.0",
-        "responselike": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/got?sponsor=1"
-      }
-    },
-    "node_modules/got/node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/got/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/got/node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -12501,11 +12335,22 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dependencies": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12542,6 +12387,17 @@
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
       "dev": true
     },
+    "node_modules/hasown": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
+      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -12747,12 +12603,12 @@
       }
     },
     "node_modules/human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
       "dev": true,
       "engines": {
-        "node": ">=14.18.0"
+        "node": ">=16.17.0"
       }
     },
     "node_modules/humanize-url": {
@@ -12848,9 +12704,9 @@
       }
     },
     "node_modules/import-meta-resolve": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
-      "integrity": "sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
+      "integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
       "dev": true,
       "funding": {
         "type": "github",
@@ -12896,12 +12752,12 @@
       "dev": true
     },
     "node_modules/inquirer": {
-      "version": "9.2.10",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.10.tgz",
-      "integrity": "sha512-tVVNFIXU8qNHoULiazz612GFl+yqNfjMTbLuViNJE/d860Qxrd3NMrse8dm40VUQLOQeULvaQF8lpAhvysjeyA==",
+      "version": "9.2.12",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.12.tgz",
+      "integrity": "sha512-mg3Fh9g2zfuVWJn6lhST0O7x4n03k7G8Tx5nvikJkbq8/CK47WDVm+UznF0G6s5Zi0KcyUisr6DU8T67N5U+1Q==",
       "dev": true,
       "dependencies": {
-        "@ljharb/through": "^2.3.9",
+        "@ljharb/through": "^2.3.11",
         "ansi-escapes": "^4.3.2",
         "chalk": "^5.3.0",
         "cli-cursor": "^3.1.0",
@@ -13421,12 +13277,6 @@
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
       "dev": true
     },
-    "node_modules/is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
-      "dev": true
-    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -13680,15 +13530,15 @@
       }
     },
     "node_modules/jest-diff": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.6.3.tgz",
-      "integrity": "sha512-3sw+AdWnwH9sSNohMRKA7JiYUJSRr/WS6+sEFfBuhxU5V5GlEVKfvUn8JuMHE0wqKowemR1C2aHy8VtXbaV8dQ==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
         "diff-sequences": "^29.6.3",
         "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.6.3"
+        "pretty-format": "^29.7.0"
       },
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -13753,9 +13603,9 @@
       }
     },
     "node_modules/jest-diff/node_modules/pretty-format": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-      "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -13806,15 +13656,15 @@
       }
     },
     "node_modules/jest-matcher-utils": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.6.3.tgz",
-      "integrity": "sha512-6ZrMYINZdwduSt5Xu18/n49O1IgXdjsfG7NEZaQws9k69eTKWKcVbJBw/MZsjOZe2sSyJFmuzh8042XWwl54Zg==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
+      "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.0.0",
-        "jest-diff": "^29.6.3",
+        "jest-diff": "^29.7.0",
         "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.6.3"
+        "pretty-format": "^29.7.0"
       },
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -13879,9 +13729,9 @@
       }
     },
     "node_modules/jest-matcher-utils/node_modules/pretty-format": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-      "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -13923,9 +13773,9 @@
       }
     },
     "node_modules/jest-message-util": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.6.3.tgz",
-      "integrity": "sha512-FtzaEEHzjDpQp51HX4UMkPZjy46ati4T5pEMyM6Ik48ztu4T9LQplZ6OsimHx7EuM9dfEh5HJa6D3trEftu3dA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
+      "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.13",
@@ -13934,7 +13784,7 @@
         "chalk": "^4.0.0",
         "graceful-fs": "^4.2.9",
         "micromatch": "^4.0.4",
-        "pretty-format": "^29.6.3",
+        "pretty-format": "^29.7.0",
         "slash": "^3.0.0",
         "stack-utils": "^2.0.3"
       },
@@ -14001,9 +13851,9 @@
       }
     },
     "node_modules/jest-message-util/node_modules/pretty-format": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-      "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+      "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
       "dev": true,
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -14045,9 +13895,9 @@
       }
     },
     "node_modules/jest-util": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.3.tgz",
-      "integrity": "sha512-QUjna/xSy4B32fzcKTSz1w7YYzgiHrjjJjevdRf61HYk998R5vVMMNmrHESYZVDS5DSWs+1srPLPKxXPkeSDOA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
       "dev": true,
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -14603,31 +14453,6 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lighthouse-logger": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-2.0.1.tgz",
-      "integrity": "sha512-ioBrW3s2i97noEmnXxmUq7cjIcVRjT5HBpAYy8zE11CxU9HqlWHHeRxfeN1tn8F7OEMVPIC9x1f8t3Z7US9ehQ==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^2.6.9",
-        "marky": "^1.2.2"
-      }
-    },
-    "node_modules/lighthouse-logger/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/lighthouse-logger/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true
-    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -14862,46 +14687,6 @@
         }
       }
     },
-    "node_modules/load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/load-json-file/node_modules/parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
-      "dev": true,
-      "dependencies": {
-        "error-ex": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/load-json-file/node_modules/strip-bom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-      "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
-      "dev": true,
-      "dependencies": {
-        "is-utf8": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -14947,12 +14732,12 @@
       }
     },
     "node_modules/locate-app": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.1.0.tgz",
-      "integrity": "sha512-rcVo/iLUxrd9d0lrmregK/Z5Y5NCpSwf9KlMbPpOHmKmdxdQY1Fj8NDQ5QymJTryCsBLqwmniFv2f3JKbk9Bvg==",
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.2.20.tgz",
+      "integrity": "sha512-TOCp8H9l75GhNtd+BgyUnLMNzR+IpYge7cWjxELsyDlqH+MyYWxq+NfyjQ+o6oRAORzOs3IfMM6KAR6q3JNfhg==",
       "dev": true,
       "dependencies": {
-        "n12": "0.4.0",
+        "n12": "1.8.23",
         "type-fest": "2.13.0",
         "userhome": "1.0.0"
       }
@@ -15008,18 +14793,6 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "peer": true
     },
-    "node_modules/lodash.defaults": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
-      "dev": true
-    },
-    "node_modules/lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
-      "dev": true
-    },
     "node_modules/lodash.endswith": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/lodash.endswith/-/lodash.endswith-4.2.1.tgz",
@@ -15044,10 +14817,10 @@
       "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
       "dev": true
     },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
       "dev": true
     },
     "node_modules/lodash.merge": {
@@ -15316,9 +15089,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
-      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -15361,15 +15134,6 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
-    "node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -15379,12 +15143,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/marky": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.5.tgz",
-      "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==",
-      "dev": true
-    },
     "node_modules/md5-hex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
@@ -15914,9 +15672,9 @@
       }
     },
     "node_modules/n12": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/n12/-/n12-0.4.0.tgz",
-      "integrity": "sha512-p/hj4zQ8d3pbbFLQuN1K9honUxiDDhueOWyFLw/XgBv+wZCE44bcLH4CIcsolOceJQduh4Jf7m/LfaTxyGmGtQ==",
+      "version": "1.8.23",
+      "resolved": "https://registry.npmjs.org/n12/-/n12-1.8.23.tgz",
+      "integrity": "sha512-kQITb5LlO0Gk8rmbMAkfbmhs+QlXZ5SRHsx6YcG++3yc57iolbiQuo5rsfu3dkB7Qw3jKCqntsZvNNgvdfotkA==",
       "dev": true
     },
     "node_modules/nan": {
@@ -18848,6 +18606,22 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true
     },
+    "node_modules/set-function-length": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
+      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "dependencies": {
+        "define-data-property": "^1.1.2",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -19584,15 +19358,6 @@
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
     },
-    "node_modules/suffix": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/suffix/-/suffix-0.1.1.tgz",
-      "integrity": "sha512-j5uf6MJtMCfC4vBe5LFktSe4bGyNTBk7I2Kdri0jeLrcv5B9pWfxVa5JQpoxgtR8vaVB7bVxsWgnfQbX5wkhAA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -21393,20 +21158,20 @@
       }
     },
     "node_modules/webdriver": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.15.6.tgz",
-      "integrity": "sha512-TpSb0+L6NlFnjFu02/BegO3g3suAw25eorWvNdmXRxPYMf5K6zAVYjpU3rD0GJ37R119dcsHWEKvEQ8ElrGnOw==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.32.3.tgz",
+      "integrity": "sha512-1/kpZvuftt59oikHs+6FvWXNfOM5tgMMMAk3LnMe7D938dVOoNGAe46fq0oL/xsxxPicbMRTRgIy1OifLiglaA==",
       "dev": true,
       "dependencies": {
         "@types/node": "^20.1.0",
         "@types/ws": "^8.5.3",
-        "@wdio/config": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@wdio/config": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "deepmerge-ts": "^5.1.0",
-        "got": "^ 12.6.1",
+        "got": "^12.6.1",
         "ky": "^0.33.0",
         "ws": "^8.8.0"
       },
@@ -21424,6 +21189,57 @@
         "fs-extra": "^10.1.0"
       }
     },
+    "node_modules/webdriver/node_modules/@wdio/logger": {
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^5.1.2",
+        "loglevel": "^1.6.0",
+        "loglevel-plugin-prefix": "^0.8.4",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
+    "node_modules/webdriver/node_modules/@wdio/types": {
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "^20.1.0"
+      },
+      "engines": {
+        "node": "^16.13 || >=18"
+      }
+    },
+    "node_modules/webdriver/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/webdriver/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/webdriver/node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -21488,26 +21304,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/webdriver/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/webdriverio": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.20.0.tgz",
-      "integrity": "sha512-nVd3n4v1CYzjEezK6OgmGIcVx+T/7PNYwLK3fTNH2hGRNX05TyGGcR9HAcVZCbIu8WWFKRE0SrLvCjEutPO8gg==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.32.3.tgz",
+      "integrity": "sha512-SupbQKMtUZHSH7lmF5xaJPgxsn8sIBNAjs1CyPI33u30eY9VcVQ4CJQ818ZS3FLxR0q2XdWk9lsQNyhZwlN3RA==",
       "dev": true,
       "dependencies": {
         "@types/node": "^20.1.0",
-        "@wdio/config": "8.20.0",
-        "@wdio/logger": "8.16.17",
-        "@wdio/protocols": "8.18.0",
-        "@wdio/repl": "8.10.1",
-        "@wdio/types": "8.20.0",
-        "@wdio/utils": "8.20.0",
+        "@wdio/config": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/repl": "8.24.12",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "archiver": "^6.0.0",
         "aria-query": "^5.0.0",
         "css-shorthand-properties": "^1.1.1",
         "css-value": "^0.0.1",
-        "devtools-protocol": "^0.0.1209236",
+        "devtools-protocol": "^0.0.1262051",
         "grapheme-splitter": "^1.0.2",
-        "import-meta-resolve": "^3.0.0",
+        "import-meta-resolve": "^4.0.0",
         "is-plain-obj": "^4.1.0",
         "lodash.clonedeep": "^4.5.0",
         "lodash.zip": "^4.2.0",
@@ -21517,7 +21348,7 @@
         "resq": "^1.9.1",
         "rgb2hex": "0.2.5",
         "serialize-error": "^11.0.1",
-        "webdriver": "8.20.0"
+        "webdriver": "8.32.3"
       },
       "engines": {
         "node": "^16.13 || >=18"
@@ -21531,29 +21362,10 @@
         }
       }
     },
-    "node_modules/webdriverio/node_modules/@wdio/config": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.20.0.tgz",
-      "integrity": "sha512-ODsafHlxEawyYa6IyIdXJMV2plPFyrDbGrXLNKNFBQVfB/FmoHUiiOTh+4Gu+sUXzpn2YNH5O199qHxHw61uUw==",
-      "dev": true,
-      "dependencies": {
-        "@wdio/logger": "8.16.17",
-        "@wdio/types": "8.20.0",
-        "@wdio/utils": "8.20.0",
-        "decamelize": "^6.0.0",
-        "deepmerge-ts": "^5.0.0",
-        "glob": "^10.2.2",
-        "import-meta-resolve": "^3.0.0",
-        "read-pkg-up": "^10.0.0"
-      },
-      "engines": {
-        "node": "^16.13 || >=18"
-      }
-    },
     "node_modules/webdriverio/node_modules/@wdio/logger": {
-      "version": "8.16.17",
-      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.16.17.tgz",
-      "integrity": "sha512-zeQ41z3T+b4IsrriZZipayXxLNDuGsm7TdExaviNGojPVrIsQUCSd/FvlLHM32b7ZrMyInHenu/zx1cjAZO71g==",
+      "version": "8.28.0",
+      "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+      "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
       "dev": true,
       "dependencies": {
         "chalk": "^5.1.2",
@@ -21565,16 +21377,10 @@
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/webdriverio/node_modules/@wdio/protocols": {
-      "version": "8.18.0",
-      "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.18.0.tgz",
-      "integrity": "sha512-TABA0mksHvu5tE8qNYYDR0fDyo90NCANeghbGAtsI8TUsJzgH0dwpos3WSSiB97J9HRSZuWIMa7YuABEkBIjWQ==",
-      "dev": true
-    },
     "node_modules/webdriverio/node_modules/@wdio/types": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.20.0.tgz",
-      "integrity": "sha512-y0En5V5PPF48IHJMetaNYQobhCr3ddsgp2aX/crLL51UccWqnFpCL8pCh6cP01gRgCchCasa2JCBMB+PucbYmA==",
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+      "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
       "dev": true,
       "dependencies": {
         "@types/node": "^20.1.0"
@@ -21583,31 +21389,6 @@
         "node": "^16.13 || >=18"
       }
     },
-    "node_modules/webdriverio/node_modules/@wdio/utils": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.20.0.tgz",
-      "integrity": "sha512-nZ5QF5lPyZNJG9YaSrRuVfkVeg80yRrUQT42D0mUDDjmUIh2pAXDMu4HxgxocuQSOyLacg4Vpg3Sju9NFipxIA==",
-      "dev": true,
-      "dependencies": {
-        "@puppeteer/browsers": "^1.6.0",
-        "@wdio/logger": "8.16.17",
-        "@wdio/types": "8.20.0",
-        "decamelize": "^6.0.0",
-        "deepmerge-ts": "^5.1.0",
-        "edgedriver": "^5.3.5",
-        "geckodriver": "^4.2.0",
-        "get-port": "^7.0.0",
-        "got": "^13.0.0",
-        "import-meta-resolve": "^3.0.0",
-        "locate-app": "^2.1.0",
-        "safaridriver": "^0.1.0",
-        "split2": "^4.2.0",
-        "wait-port": "^1.0.4"
-      },
-      "engines": {
-        "node": "^16.13 || >=18"
-      }
-    },
     "node_modules/webdriverio/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -21641,61 +21422,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/webdriverio/node_modules/decompress-response": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-      "dev": true,
-      "dependencies": {
-        "mimic-response": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/webdriverio/node_modules/devtools-protocol": {
-      "version": "0.0.1209236",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1209236.tgz",
-      "integrity": "sha512-z4eehc+fhmptqhxwreLcg9iydszZGU4Q5FzaaElXVGp3KyfXbjtXeUCmo4l8FxBJbyXtCz4VRIJsGW2ekApyUQ==",
+      "version": "0.0.1262051",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1262051.tgz",
+      "integrity": "sha512-YJe4CT5SA8on3Spa+UDtNhEqtuV6Epwz3OZ4HQVLhlRccpZ9/PAYk0/cy/oKxFKRrZPBUPyxympQci4yWNWZ9g==",
       "dev": true
     },
-    "node_modules/webdriverio/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/webdriverio/node_modules/glob": {
-      "version": "10.3.10",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^2.3.5",
-        "minimatch": "^9.0.1",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-        "path-scurry": "^1.10.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/webdriverio/node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -21708,18 +21440,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/webdriverio/node_modules/mimic-response": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/webdriverio/node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -21735,15 +21455,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/webdriverio/node_modules/minipass": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/webdriverio/node_modules/strip-ansi": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -21759,53 +21470,6 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/webdriverio/node_modules/webdriver": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.20.0.tgz",
-      "integrity": "sha512-U/sej7yljVf/enEWR9L2AtOntrd3lqtkEtHeuSWU2FPp5cWvoMEe7vQiG0WJA74VE2e7uwd8S1LfCgQD1wY3Bg==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "^20.1.0",
-        "@types/ws": "^8.5.3",
-        "@wdio/config": "8.20.0",
-        "@wdio/logger": "8.16.17",
-        "@wdio/protocols": "8.18.0",
-        "@wdio/types": "8.20.0",
-        "@wdio/utils": "8.20.0",
-        "deepmerge-ts": "^5.1.0",
-        "got": "^ 12.6.1",
-        "ky": "^0.33.0",
-        "ws": "^8.8.0"
-      },
-      "engines": {
-        "node": "^16.13 || >=18"
-      }
-    },
-    "node_modules/webdriverio/node_modules/webdriver/node_modules/got": {
-      "version": "12.6.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-12.6.1.tgz",
-      "integrity": "sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==",
-      "dev": true,
-      "dependencies": {
-        "@sindresorhus/is": "^5.2.0",
-        "@szmarczak/http-timer": "^5.0.1",
-        "cacheable-lookup": "^7.0.0",
-        "cacheable-request": "^10.2.8",
-        "decompress-response": "^6.0.0",
-        "form-data-encoder": "^2.1.2",
-        "get-stream": "^6.0.1",
-        "http2-wrapper": "^2.1.10",
-        "lowercase-keys": "^3.0.0",
-        "p-cancelable": "^3.0.0",
-        "responselike": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/got?sponsor=1"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -22544,237 +22208,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/yarn-install": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yarn-install/-/yarn-install-1.0.0.tgz",
-      "integrity": "sha512-VO1u181msinhPcGvQTVMnHVOae8zjX/NSksR17e6eXHRveDvHCF5mGjh9hkN8mzyfnCqcBe42LdTs7bScuTaeg==",
-      "dev": true,
-      "dependencies": {
-        "cac": "^3.0.3",
-        "chalk": "^1.1.3",
-        "cross-spawn": "^4.0.2"
-      },
-      "bin": {
-        "yarn-install": "bin/yarn-install.js",
-        "yarn-remove": "bin/yarn-remove.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/yarn-install/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/cac": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/cac/-/cac-3.0.4.tgz",
-      "integrity": "sha512-hq4rxE3NT5PlaEiVV39Z45d6MoFcQZG5dsgJqtAUeOz3408LEQAElToDkf9i5IYSCOmK0If/81dLg7nKxqPR0w==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-keys": "^3.0.0",
-        "chalk": "^1.1.3",
-        "indent-string": "^3.0.0",
-        "minimist": "^1.2.0",
-        "read-pkg-up": "^1.0.1",
-        "suffix": "^0.1.0",
-        "text-table": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/yarn-install/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/cross-spawn": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-      "integrity": "sha512-yAXz/pA1tD8Gtg2S98Ekf/sewp3Lcp3YoFKJ4Hkp5h5yLWnKVTDU0kwjKJ8NDCYcfTLfyGkzTikst+jWypT1iA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "which": "^1.2.9"
-      }
-    },
-    "node_modules/yarn-install/node_modules/find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
-      "dev": true,
-      "dependencies": {
-        "path-exists": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-      "dev": true
-    },
-    "node_modules/yarn-install/node_modules/indent-string": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-      "integrity": "sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/yarn-install/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/yarn-install/node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "node_modules/yarn-install/node_modules/path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
-      "dev": true,
-      "dependencies": {
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
-      "dev": true,
-      "dependencies": {
-        "load-json-file": "^1.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^1.0.0",
-        "read-pkg": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/yarn-install/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/yarn-install/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/yarn-install/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
-      "dev": true
-    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
@@ -25010,9 +24443,9 @@
       }
     },
     "@jest/expect-utils": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.6.3.tgz",
-      "integrity": "sha512-nvOEW4YoqRKD9HBJ9OJ6przvIvP9qilp5nAn1462P5ZlL/MM9SgPEZFyjTGPfs7QkocdUsJa6KjHhyRn4ueItA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
+      "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
       "dev": true,
       "requires": {
         "jest-get-type": "^29.6.3"
@@ -25170,10 +24603,13 @@
       }
     },
     "@ljharb/through": {
-      "version": "2.3.9",
-      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.9.tgz",
-      "integrity": "sha512-yN599ZBuMPPK4tdoToLlvgJB4CLK8fGl7ntfy0Wn7U6ttNvHYurd81bfUiK/6sMkiIwm65R6ck4L6+Y3DfVbNQ==",
-      "dev": true
+      "version": "2.3.12",
+      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.12.tgz",
+      "integrity": "sha512-ajo/heTlG3QgC8EGP6APIejksVAYt4ayz4tqoP3MolFELzcH1x1fzwEYRJTPO0IELutZ5HQ0c26/GqAYy79u3g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.5"
+      }
     },
     "@log4js-node/log4js-api": {
       "version": "1.0.2",
@@ -26328,24 +25764,24 @@
       "dev": true
     },
     "@types/istanbul-lib-coverage": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
-      "integrity": "sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
       "dev": true
     },
     "@types/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-coverage": "*"
       }
     },
     "@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
       "dev": true,
       "requires": {
         "@types/istanbul-lib-report": "*"
@@ -26432,9 +25868,9 @@
       }
     },
     "@types/stack-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+      "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
     "@types/tcp-port-used": {
@@ -26464,18 +25900,18 @@
       }
     },
     "@types/yargs": {
-      "version": "17.0.24",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.24.tgz",
-      "integrity": "sha512-6i0aC7jV6QzQB8ne1joVZ0eSFIstHsCrobmOtghM11yGlH0j43FKL2UhWdELkyps0zuf7qVTUVCCR+tgSlyLLw==",
+      "version": "17.0.32",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
+      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
       "dev": true,
       "requires": {
         "@types/yargs-parser": "*"
       }
     },
     "@types/yargs-parser": {
-      "version": "21.0.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
-      "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==",
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
       "dev": true
     },
     "@types/yauzl": {
@@ -26944,179 +26380,108 @@
       }
     },
     "@wdio/cli": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/cli/-/cli-8.15.6.tgz",
-      "integrity": "sha512-6k+Dscy3XQY9USsEvTy5nWuzvExmEaDmJtuewTlxDn2nWbIy9GX/Hwm48O2ts5v9xzftxqoZTVtZpKWlicA/6Q==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/cli/-/cli-8.32.3.tgz",
+      "integrity": "sha512-qjR1MFKQM547iCooceBHyggJRNguD7fhgF4Q7L2r7psG3AQFWzdCN/8rulRGIxTz4PJlIqks9AH9kUJlVAf44A==",
       "dev": true,
       "requires": {
         "@types/node": "^20.1.1",
-        "@wdio/config": "8.15.6",
-        "@wdio/globals": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@vitest/snapshot": "^1.2.1",
+        "@wdio/config": "8.32.3",
+        "@wdio/globals": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "async-exit-hook": "^2.0.1",
         "chalk": "^5.2.0",
         "chokidar": "^3.5.3",
         "cli-spinners": "^2.9.0",
         "dotenv": "^16.3.1",
         "ejs": "^3.1.9",
-        "execa": "^7.1.1",
-        "import-meta-resolve": "^3.0.0",
-        "inquirer": "9.2.10",
+        "execa": "^8.0.1",
+        "import-meta-resolve": "^4.0.0",
+        "inquirer": "9.2.12",
         "lodash.flattendeep": "^4.4.0",
         "lodash.pickby": "^4.6.0",
         "lodash.union": "^4.6.0",
         "read-pkg-up": "10.0.0",
         "recursive-readdir": "^2.2.3",
-        "webdriverio": "8.15.6",
-        "yargs": "^17.7.2",
-        "yarn-install": "^1.0.0"
+        "webdriverio": "8.32.3",
+        "yargs": "^17.7.2"
       },
       "dependencies": {
-        "archiver": {
-          "version": "5.3.2",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-          "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+        "@vitest/snapshot": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.3.1.tgz",
+          "integrity": "sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==",
           "dev": true,
           "requires": {
-            "archiver-utils": "^2.1.0",
-            "async": "^3.2.4",
-            "buffer-crc32": "^0.2.1",
-            "readable-stream": "^3.6.0",
-            "readdir-glob": "^1.1.2",
-            "tar-stream": "^2.2.0",
-            "zip-stream": "^4.1.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "magic-string": "^0.30.5",
+            "pathe": "^1.1.1",
+            "pretty-format": "^29.7.0"
           }
         },
-        "archiver-utils": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-          "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
           "dev": true,
           "requires": {
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.2.0",
-            "lazystream": "^1.0.0",
-            "lodash.defaults": "^4.2.0",
-            "lodash.difference": "^4.5.0",
-            "lodash.flatten": "^4.4.0",
-            "lodash.isplainobject": "^4.0.6",
-            "lodash.union": "^4.6.0",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^2.0.0"
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
           }
         },
-        "async": {
-          "version": "3.2.4",
-          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-          "dev": true
-        },
-        "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
           "dev": true,
           "requires": {
-            "balanced-match": "^1.0.0"
+            "@types/node": "^20.1.0"
           }
         },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        },
         "chalk": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
           "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
           "dev": true
         },
-        "compress-commons": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-          "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
-          "dev": true,
-          "requires": {
-            "buffer-crc32": "^0.2.13",
-            "crc32-stream": "^4.0.2",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
-          }
-        },
-        "crc32-stream": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-          "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
-          "dev": true,
-          "requires": {
-            "crc-32": "^1.2.0",
-            "readable-stream": "^3.4.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
-          }
-        },
         "execa": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-7.2.0.tgz",
-          "integrity": "sha512-UduyVP7TLB5IcAQl+OzLyLcS/l32W/GLg+AhHJ+ow40FOk2U3SAllPwR44v4vmdFwIWqpdwxxpQbF1n5ta9seA==",
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+          "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
           "dev": true,
           "requires": {
             "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.1",
-            "human-signals": "^4.3.0",
+            "get-stream": "^8.0.1",
+            "human-signals": "^5.0.0",
             "is-stream": "^3.0.0",
             "merge-stream": "^2.0.0",
             "npm-run-path": "^5.1.0",
             "onetime": "^6.0.0",
-            "signal-exit": "^3.0.7",
+            "signal-exit": "^4.1.0",
             "strip-final-newline": "^3.0.0"
           }
         },
         "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "is-plain-obj": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-          "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+          "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
           "dev": true
         },
         "is-stream": {
@@ -27131,19 +26496,10 @@
           "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
           "dev": true
         },
-        "minimatch": {
-          "version": "9.0.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        },
         "npm-run-path": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz",
-          "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",
+          "integrity": "sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==",
           "dev": true,
           "requires": {
             "path-key": "^4.0.0"
@@ -27164,130 +26520,94 @@
           "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
           "dev": true
         },
-        "strip-final-newline": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
-          "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+        "pathe": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+          "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
           "dev": true
         },
-        "tar-stream": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-          "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+        "pretty-format": {
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
           "dev": true,
           "requires": {
-            "bl": "^4.0.3",
-            "end-of-stream": "^1.4.1",
-            "fs-constants": "^1.0.0",
-            "inherits": "^2.0.3",
-            "readable-stream": "^3.1.1"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "@jest/schemas": "^29.6.3",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^18.0.0"
           }
         },
-        "webdriverio": {
-          "version": "8.15.6",
-          "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-          "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
-          "dev": true,
-          "requires": {
-            "@types/node": "^20.1.0",
-            "@wdio/config": "8.15.6",
-            "@wdio/logger": "8.11.0",
-            "@wdio/protocols": "8.14.6",
-            "@wdio/repl": "8.10.1",
-            "@wdio/types": "8.15.0",
-            "@wdio/utils": "8.15.6",
-            "archiver": "^5.0.0",
-            "aria-query": "^5.0.0",
-            "css-shorthand-properties": "^1.1.1",
-            "css-value": "^0.0.1",
-            "devtools-protocol": "^0.0.1182435",
-            "grapheme-splitter": "^1.0.2",
-            "import-meta-resolve": "^3.0.0",
-            "is-plain-obj": "^4.1.0",
-            "lodash.clonedeep": "^4.5.0",
-            "lodash.zip": "^4.2.0",
-            "minimatch": "^9.0.0",
-            "puppeteer-core": "^20.9.0",
-            "query-selector-shadow-dom": "^1.0.0",
-            "resq": "^1.9.1",
-            "rgb2hex": "0.2.5",
-            "serialize-error": "^11.0.1",
-            "webdriver": "8.15.6"
-          }
-        },
-        "zip-stream": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-          "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
+        },
+        "signal-exit": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
           "dev": true,
           "requires": {
-            "archiver-utils": "^3.0.4",
-            "compress-commons": "^4.1.2",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "archiver-utils": {
-              "version": "3.0.4",
-              "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-              "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
-              "dev": true,
-              "requires": {
-                "glob": "^7.2.3",
-                "graceful-fs": "^4.2.0",
-                "lazystream": "^1.0.0",
-                "lodash.defaults": "^4.2.0",
-                "lodash.difference": "^4.5.0",
-                "lodash.flatten": "^4.4.0",
-                "lodash.isplainobject": "^4.0.6",
-                "lodash.union": "^4.6.0",
-                "normalize-path": "^3.0.0",
-                "readable-stream": "^3.6.0"
-              }
-            },
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "ansi-regex": "^6.0.1"
           }
+        },
+        "strip-final-newline": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+          "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+          "dev": true
         }
       }
     },
     "@wdio/config": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.15.6.tgz",
-      "integrity": "sha512-SWUoky6FrhBpcTtKOYLP2d9Sknw71W9A7ih5NuhL9joJZ8BfFQrwJxZ6b/O8zTTuUU5OikFBWFqNKx2XmJlKtw==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.32.3.tgz",
+      "integrity": "sha512-hZkaz5Fd8830uniQvRgPus8yp9rp50MAsHa5kZ2Jt8y++Rp330FyJpQZE5oPjTATuz35G5Anprk2Q3fmFd0Ifw==",
       "dev": true,
       "requires": {
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "decamelize": "^6.0.0",
         "deepmerge-ts": "^5.0.0",
         "glob": "^10.2.2",
-        "import-meta-resolve": "^3.0.0",
-        "read-pkg-up": "^10.0.0"
+        "import-meta-resolve": "^4.0.0"
       },
       "dependencies": {
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "^20.1.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
         "brace-expansion": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -27297,14 +26617,20 @@
             "balanced-match": "^1.0.0"
           }
         },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
         "glob": {
-          "version": "10.3.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.3.tgz",
-          "integrity": "sha512-92vPiMb/iqpmEgsOoIDvTjc50wf9CCCvMzsi6W0JLPeUKE8TWP1a73PgqSrqy7iAZxaSD1YdzU7QZR5LF51MJw==",
+          "version": "10.3.10",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+          "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
           "dev": true,
           "requires": {
             "foreground-child": "^3.1.0",
-            "jackspeak": "^2.0.3",
+            "jackspeak": "^2.3.5",
             "minimatch": "^9.0.1",
             "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
             "path-scurry": "^1.10.1"
@@ -27320,282 +26646,92 @@
           }
         },
         "minipass": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.3.tgz",
-          "integrity": "sha512-LhbbwCfz3vsb12j/WkWQPZfKTsgqIe1Nf/ti1pKjYESGLHIVjWU96G9/ljLH4F9mWNVhlQOm0VySdAWzf05dpg==",
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
           "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
         }
       }
     },
     "@wdio/globals": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/globals/-/globals-8.15.6.tgz",
-      "integrity": "sha512-Y3yAYONtWHg9GwZ+WKoHOwZT0vfa2TN7yl/ThtitIWwwaaUdaIO/LfcAo9kTwTdB9F6JefQQtWWljCBO9q2bzQ==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/globals/-/globals-8.32.3.tgz",
+      "integrity": "sha512-jyK89GvWaOYQT9pfZ6HNwkFANgai9eBVfeDPw5yFLXfk6js9GSWbvqMJg/PFi1dQ7xbnbuuf5eYVc65bfAt9KQ==",
+      "dev": true,
+      "requires": {
+        "expect-webdriverio": "^4.11.2",
+        "webdriverio": "8.32.3"
+      }
+    },
+    "@wdio/local-runner": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/local-runner/-/local-runner-8.32.3.tgz",
+      "integrity": "sha512-YgqYkKarx2m9OjA8WO4NqQPCfFNLmZHnuEWQ6P2LqUeYFsdXRd3wR3UTo9XrI23VSQo+kcpqInsR5vLOYDd1zg==",
       "dev": true,
       "requires": {
-        "expect-webdriverio": "^4.2.5",
-        "webdriverio": "8.15.6"
+        "@types/node": "^20.1.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/repl": "8.24.12",
+        "@wdio/runner": "8.32.3",
+        "@wdio/types": "8.32.2",
+        "async-exit-hook": "^2.0.1",
+        "split2": "^4.1.0",
+        "stream-buffers": "^3.0.2"
       },
       "dependencies": {
-        "archiver": {
-          "version": "5.3.2",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-          "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "archiver-utils": "^2.1.0",
-            "async": "^3.2.4",
-            "buffer-crc32": "^0.2.1",
-            "readable-stream": "^3.6.0",
-            "readdir-glob": "^1.1.2",
-            "tar-stream": "^2.2.0",
-            "zip-stream": "^4.1.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
-          }
-        },
-        "archiver-utils": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-          "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.2.0",
-            "lazystream": "^1.0.0",
-            "lodash.defaults": "^4.2.0",
-            "lodash.difference": "^4.5.0",
-            "lodash.flatten": "^4.4.0",
-            "lodash.isplainobject": "^4.0.6",
-            "lodash.union": "^4.6.0",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^2.0.0"
-          }
-        },
-        "async": {
-          "version": "3.2.4",
-          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
-          "dev": true,
-          "optional": true
-        },
-        "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "balanced-match": "^1.0.0"
-          }
-        },
-        "compress-commons": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-          "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "buffer-crc32": "^0.2.13",
-            "crc32-stream": "^4.0.2",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
           }
         },
-        "crc32-stream": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-          "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "crc-32": "^1.2.0",
-            "readable-stream": "^3.4.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "@types/node": "^20.1.0"
           }
         },
-        "is-plain-obj": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-          "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "9.0.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
         },
-        "tar-stream": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-          "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "bl": "^4.0.3",
-            "end-of-stream": "^1.4.1",
-            "fs-constants": "^1.0.0",
-            "inherits": "^2.0.3",
-            "readable-stream": "^3.1.1"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
-          }
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
         },
-        "webdriverio": {
-          "version": "8.15.6",
-          "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-          "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@types/node": "^20.1.0",
-            "@wdio/config": "8.15.6",
-            "@wdio/logger": "8.11.0",
-            "@wdio/protocols": "8.14.6",
-            "@wdio/repl": "8.10.1",
-            "@wdio/types": "8.15.0",
-            "@wdio/utils": "8.15.6",
-            "archiver": "^5.0.0",
-            "aria-query": "^5.0.0",
-            "css-shorthand-properties": "^1.1.1",
-            "css-value": "^0.0.1",
-            "devtools-protocol": "^0.0.1182435",
-            "grapheme-splitter": "^1.0.2",
-            "import-meta-resolve": "^3.0.0",
-            "is-plain-obj": "^4.1.0",
-            "lodash.clonedeep": "^4.5.0",
-            "lodash.zip": "^4.2.0",
-            "minimatch": "^9.0.0",
-            "puppeteer-core": "^20.9.0",
-            "query-selector-shadow-dom": "^1.0.0",
-            "resq": "^1.9.1",
-            "rgb2hex": "0.2.5",
-            "serialize-error": "^11.0.1",
-            "webdriver": "8.15.6"
-          }
-        },
-        "zip-stream": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-          "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
           "dev": true,
-          "optional": true,
           "requires": {
-            "archiver-utils": "^3.0.4",
-            "compress-commons": "^4.1.2",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "archiver-utils": {
-              "version": "3.0.4",
-              "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-              "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "glob": "^7.2.3",
-                "graceful-fs": "^4.2.0",
-                "lazystream": "^1.0.0",
-                "lodash.defaults": "^4.2.0",
-                "lodash.difference": "^4.5.0",
-                "lodash.flatten": "^4.4.0",
-                "lodash.isplainobject": "^4.0.6",
-                "lodash.union": "^4.6.0",
-                "normalize-path": "^3.0.0",
-                "readable-stream": "^3.6.0"
-              }
-            },
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "ansi-regex": "^6.0.1"
           }
         }
       }
     },
-    "@wdio/local-runner": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/local-runner/-/local-runner-8.15.6.tgz",
-      "integrity": "sha512-nanWaaBHocu7LtETX11Yn74AHe9lNfb/7rzVku1fJIjtmilqPXP/oL2kFK/U+tWFmX/pma93o5t2hqTpTVtIUA==",
-      "dev": true,
-      "requires": {
-        "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/repl": "8.10.1",
-        "@wdio/runner": "8.15.6",
-        "@wdio/types": "8.15.0",
-        "async-exit-hook": "^2.0.1",
-        "split2": "^4.1.0",
-        "stream-buffers": "^3.0.2"
-      }
-    },
     "@wdio/logger": {
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.11.0.tgz",
@@ -27632,16 +26768,16 @@
       }
     },
     "@wdio/mocha-framework": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/mocha-framework/-/mocha-framework-8.15.6.tgz",
-      "integrity": "sha512-HBE1IQn+g1L7r1fUhFHWl0HNGWwcOZg3KeDyeBSTVcjE5MspK4FfhSanT3zT4dkNVTvUVbTY00uKfj8ArK4q8g==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/mocha-framework/-/mocha-framework-8.32.3.tgz",
+      "integrity": "sha512-wwQ6rDd6TMPqwGfkwvtcBmcirYZUi9GUiwH2OsHvMJ4i+YY7H2dLyZon1ghcIan7r4ufr8KlljbwyerCpUzvcw==",
       "dev": true,
       "requires": {
         "@types/mocha": "^10.0.0",
         "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "mocha": "^10.0.0"
       },
       "dependencies": {
@@ -27650,304 +26786,208 @@
           "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.1.tgz",
           "integrity": "sha512-/fvYntiO1GeICvqbQ3doGDIP97vWmvFt83GKguJ6prmQM2iXZfFcq6YE8KteFyRtX2/h5Hf91BYvPodJKFYv5Q==",
           "dev": true
+        },
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "^20.1.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
         }
       }
     },
     "@wdio/protocols": {
-      "version": "8.14.6",
-      "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.14.6.tgz",
-      "integrity": "sha512-KM2taEMUDEt1of0Na/6kIv/aNzX0pmr0etpKRci4QrWPQ1O11dXxWjkatFILQz6qOVKvQ0v+vkTPQRUllmH+uQ==",
+      "version": "8.32.0",
+      "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.32.0.tgz",
+      "integrity": "sha512-inLJRrtIGdTz/YPbcsvpSvPlYQFTVtF3OYBwAXhG2FiP1ZwE1CQNLP/xgRGye1ymdGCypGkexRqIx3KBGm801Q==",
       "dev": true
     },
     "@wdio/repl": {
-      "version": "8.10.1",
-      "resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-8.10.1.tgz",
-      "integrity": "sha512-VZ1WFHTNKjR8Ga97TtV2SZM6fvRjWbYI2i/f4pJB4PtusorKvONAMJf2LQcUBIyzbVobqr7KSrcjmSwRolI+yw==",
+      "version": "8.24.12",
+      "resolved": "https://registry.npmjs.org/@wdio/repl/-/repl-8.24.12.tgz",
+      "integrity": "sha512-321F3sWafnlw93uRTSjEBVuvWCxTkWNDs7ektQS15drrroL3TMeFOynu4rDrIz0jXD9Vas0HCD2Tq/P0uxFLdw==",
       "dev": true,
       "requires": {
         "@types/node": "^20.1.0"
       }
     },
     "@wdio/reporter": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/reporter/-/reporter-8.15.6.tgz",
-      "integrity": "sha512-0gxFIdg9EeFijbsQDJW1WVnZxeNprRP+PCkZxZjdkHjX8II9rsYF7XpMdhAWaebqwNLWcZI3/xB9zOTeLgjaFg==",
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/reporter/-/reporter-8.32.2.tgz",
+      "integrity": "sha512-BZdReAFfRCtgtYbyhkKgSGqqoIn/yG5/Z4COjvRvon9NJkz+eA4PiHCKdEP7+ekBIjud7H8Gy+6mPBDEu+wllw==",
       "dev": true,
       "requires": {
         "@types/node": "^20.1.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
         "diff": "^5.0.0",
-        "object-inspect": "^1.12.0",
-        "supports-color": "9.4.0"
+        "object-inspect": "^1.12.0"
       },
       "dependencies": {
-        "supports-color": {
-          "version": "9.4.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
-          "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==",
-          "dev": true
-        }
-      }
-    },
-    "@wdio/runner": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/runner/-/runner-8.15.6.tgz",
-      "integrity": "sha512-V2IS9zyzSNrDfAvf1I2nWXwhCVJ9bm3ezLefkPCrPmVGtT8RaQbtI8p3BBpg4XewJoFM2vpP4p3zhCmZ+zrSDQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "^20.1.0",
-        "@wdio/config": "8.15.6",
-        "@wdio/globals": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
-        "deepmerge-ts": "^5.0.0",
-        "expect-webdriverio": "^4.2.5",
-        "gaze": "^1.1.2",
-        "webdriver": "8.15.6",
-        "webdriverio": "8.15.6"
-      },
-      "dependencies": {
-        "archiver": {
-          "version": "5.3.2",
-          "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
-          "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
           "dev": true,
           "requires": {
-            "archiver-utils": "^2.1.0",
-            "async": "^3.2.4",
-            "buffer-crc32": "^0.2.1",
-            "readable-stream": "^3.6.0",
-            "readdir-glob": "^1.1.2",
-            "tar-stream": "^2.2.0",
-            "zip-stream": "^4.1.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
           }
         },
-        "archiver-utils": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
-          "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
           "dev": true,
           "requires": {
-            "glob": "^7.1.4",
-            "graceful-fs": "^4.2.0",
-            "lazystream": "^1.0.0",
-            "lodash.defaults": "^4.2.0",
-            "lodash.difference": "^4.5.0",
-            "lodash.flatten": "^4.4.0",
-            "lodash.isplainobject": "^4.0.6",
-            "lodash.union": "^4.6.0",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^2.0.0"
+            "@types/node": "^20.1.0"
           }
         },
-        "async": {
-          "version": "3.2.4",
-          "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
-          "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==",
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
           "dev": true
         },
-        "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
           "dev": true,
           "requires": {
-            "balanced-match": "^1.0.0"
+            "ansi-regex": "^6.0.1"
           }
-        },
-        "compress-commons": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
-          "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+        }
+      }
+    },
+    "@wdio/runner": {
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/runner/-/runner-8.32.3.tgz",
+      "integrity": "sha512-HlhdQ4lJ07seL7/x0UQPDnK+o5a0okyjd8ukFYqDL+g9+d3KlW/oM3NvFfX7pb9liIYNEpmoNMwKFp+5XPUE7w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "^20.1.0",
+        "@wdio/config": "8.32.3",
+        "@wdio/globals": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
+        "deepmerge-ts": "^5.0.0",
+        "expect-webdriverio": "^4.11.2",
+        "gaze": "^1.1.2",
+        "webdriver": "8.32.3",
+        "webdriverio": "8.32.3"
+      },
+      "dependencies": {
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
           "dev": true,
           "requires": {
-            "buffer-crc32": "^0.2.13",
-            "crc32-stream": "^4.0.2",
-            "normalize-path": "^3.0.0",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
           }
         },
-        "crc32-stream": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
-          "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
           "dev": true,
           "requires": {
-            "crc-32": "^1.2.0",
-            "readable-stream": "^3.4.0"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "@types/node": "^20.1.0"
           }
         },
-        "is-plain-obj": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
-          "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
           "dev": true
         },
-        "minimatch": {
-          "version": "9.0.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
-          "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^2.0.1"
-          }
-        },
-        "tar-stream": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
-          "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
-          "dev": true,
-          "requires": {
-            "bl": "^4.0.3",
-            "end-of-stream": "^1.4.1",
-            "fs-constants": "^1.0.0",
-            "inherits": "^2.0.3",
-            "readable-stream": "^3.1.1"
-          },
-          "dependencies": {
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
-          }
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
         },
-        "webdriverio": {
-          "version": "8.15.6",
-          "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.15.6.tgz",
-          "integrity": "sha512-00jIqucMOFWxpyQ/hoyj73m5qXAo+nBZc6Wpqg44SQYa9FuryMk8ejT3qHvTV5hxwDiNWKuAoKpxwD1N/aD4DQ==",
-          "dev": true,
-          "requires": {
-            "@types/node": "^20.1.0",
-            "@wdio/config": "8.15.6",
-            "@wdio/logger": "8.11.0",
-            "@wdio/protocols": "8.14.6",
-            "@wdio/repl": "8.10.1",
-            "@wdio/types": "8.15.0",
-            "@wdio/utils": "8.15.6",
-            "archiver": "^5.0.0",
-            "aria-query": "^5.0.0",
-            "css-shorthand-properties": "^1.1.1",
-            "css-value": "^0.0.1",
-            "devtools-protocol": "^0.0.1182435",
-            "grapheme-splitter": "^1.0.2",
-            "import-meta-resolve": "^3.0.0",
-            "is-plain-obj": "^4.1.0",
-            "lodash.clonedeep": "^4.5.0",
-            "lodash.zip": "^4.2.0",
-            "minimatch": "^9.0.0",
-            "puppeteer-core": "^20.9.0",
-            "query-selector-shadow-dom": "^1.0.0",
-            "resq": "^1.9.1",
-            "rgb2hex": "0.2.5",
-            "serialize-error": "^11.0.1",
-            "webdriver": "8.15.6"
-          }
-        },
-        "zip-stream": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
-          "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
           "dev": true,
           "requires": {
-            "archiver-utils": "^3.0.4",
-            "compress-commons": "^4.1.2",
-            "readable-stream": "^3.6.0"
-          },
-          "dependencies": {
-            "archiver-utils": {
-              "version": "3.0.4",
-              "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
-              "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
-              "dev": true,
-              "requires": {
-                "glob": "^7.2.3",
-                "graceful-fs": "^4.2.0",
-                "lazystream": "^1.0.0",
-                "lodash.defaults": "^4.2.0",
-                "lodash.difference": "^4.5.0",
-                "lodash.flatten": "^4.4.0",
-                "lodash.isplainobject": "^4.0.6",
-                "lodash.union": "^4.6.0",
-                "normalize-path": "^3.0.0",
-                "readable-stream": "^3.6.0"
-              }
-            },
-            "readable-stream": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-              "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-              "dev": true,
-              "requires": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-              }
-            }
+            "ansi-regex": "^6.0.1"
           }
         }
       }
     },
     "@wdio/spec-reporter": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/spec-reporter/-/spec-reporter-8.15.6.tgz",
-      "integrity": "sha512-uhD6Kzek0ClDTBLdApt8ZTyIK8rPob9PoEIehy3ifI/gBHVCNYOnHIg7Z6gNcPnXuA7vvEALBBW/YS5iysiUeA==",
+      "version": "8.32.2",
+      "resolved": "https://registry.npmjs.org/@wdio/spec-reporter/-/spec-reporter-8.32.2.tgz",
+      "integrity": "sha512-3hUXpE+idC4KOXofJnpubdDDCE8X0OTd6ykypiaXMI2hJTA2nIZcHtpRQnAE0E4JT9OzLnPWODcMq54GGBDRkg==",
       "dev": true,
       "requires": {
-        "@wdio/reporter": "8.15.6",
-        "@wdio/types": "8.15.0",
+        "@wdio/reporter": "8.32.2",
+        "@wdio/types": "8.32.2",
         "chalk": "^5.1.2",
         "easy-table": "^1.2.0",
         "pretty-ms": "^7.0.0"
       },
       "dependencies": {
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "^20.1.0"
+          }
+        },
         "chalk": {
           "version": "5.3.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
@@ -27978,24 +27018,68 @@
       }
     },
     "@wdio/utils": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.15.6.tgz",
-      "integrity": "sha512-oC6iqlVQwtyUyjq3erEn599l/VS0FLE/2a0LMeRooteq8Za+LlXJCDU2kvh5Q4wxk9qrq45OFjlA3a3CmCUoPg==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.32.3.tgz",
+      "integrity": "sha512-UnR9rPpR1W9U5wz2TU+6BQ2rlxtuK/e3fvdaiWIMZKleB/OCcEQFGiGPAGGVi4ShfaTPwz6hK1cTTgj1OtMXkg==",
       "dev": true,
       "requires": {
         "@puppeteer/browsers": "^1.6.0",
-        "@wdio/logger": "8.11.0",
-        "@wdio/types": "8.15.0",
-        "chrome-launcher": "^1.0.0",
+        "@wdio/logger": "8.28.0",
+        "@wdio/types": "8.32.2",
         "decamelize": "^6.0.0",
         "deepmerge-ts": "^5.1.0",
         "edgedriver": "^5.3.5",
-        "geckodriver": "^4.2.0",
+        "geckodriver": "^4.3.1",
         "get-port": "^7.0.0",
-        "got": "^13.0.0",
-        "import-meta-resolve": "^3.0.0",
+        "import-meta-resolve": "^4.0.0",
+        "locate-app": "^2.1.0",
         "safaridriver": "^0.1.0",
+        "split2": "^4.2.0",
         "wait-port": "^1.0.4"
+      },
+      "dependencies": {
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "^20.1.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
       }
     },
     "@webassemblyjs/ast": {
@@ -28567,11 +27651,11 @@
       "dev": true
     },
     "axios": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.1.tgz",
-      "integrity": "sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g==",
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
       "requires": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.4",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -28647,6 +27731,43 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "bare-events": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.0.tgz",
+      "integrity": "sha512-Yyyqff4PIFfSuthCZqLlPISTWHmnQxoPuAvkmgzsJEmG3CesdIv6Xweayl0JkCZJSB2yYIdJyEz97tpxNhgjbg==",
+      "dev": true,
+      "optional": true
+    },
+    "bare-fs": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.1.5.tgz",
+      "integrity": "sha512-5t0nlecX+N2uJqdxe9d18A98cp2u9BETelbjKpiVgQqzzmVNFYWEAjQHqS+2Khgto1vcwhik9cXucaj5ve2WWA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "bare-events": "^2.0.0",
+        "bare-os": "^2.0.0",
+        "bare-path": "^2.0.0",
+        "streamx": "^2.13.0"
+      }
+    },
+    "bare-os": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.2.0.tgz",
+      "integrity": "sha512-hD0rOPfYWOMpVirTACt4/nK8mC55La12K5fY1ij8HAdfQakD62M+H4o4tpfKzVGLgRDTuk3vjA4GqGXXCeFbag==",
+      "dev": true,
+      "optional": true
+    },
+    "bare-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.0.tgz",
+      "integrity": "sha512-DIIg7ts8bdRKwJRJrUMy/PICEaQZaPGZ26lsSx9MJSwIhSrcdHn7/C8W+XmnG/rKi6BaRcz+JO00CjZteybDtw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "bare-os": "^2.1.0"
+      }
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -28933,12 +28054,15 @@
       }
     },
     "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
       }
     },
     "callsite": {
@@ -28970,24 +28094,6 @@
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
       "dev": true
     },
-    "camelcase-keys": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-3.0.0.tgz",
-      "integrity": "sha512-U4E6A6aFyYnNW+tDt5/yIUKQURKXe3WMFPfX4FxrQFcwZ/R08AUk1xWcUtlr7oq6CV07Ji+aa69V2g7BSpblnQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^3.0.0",
-        "map-obj": "^1.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha512-4nhGqUkc4BqbBBB4Q6zLuD7lzzrHYrjKGeYaEji/3tFR5VdJu9v+LilhGIVe8wxEJPPOeWo7eg8dwY13TZ1BNg==",
-          "dev": true
-        }
-      }
-    },
     "caniuse-lite": {
       "version": "1.0.30001431",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
@@ -29133,39 +28239,19 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
-    "chrome-launcher": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/chrome-launcher/-/chrome-launcher-1.0.0.tgz",
-      "integrity": "sha512-74IMFVfgni/bQ4GotUNJpH2vDR+Sh9cXNPVhPXiedeiB0+5j7/8i8LAqS7WlyNSKqtxJ/CgbOpBDPLkzqDVhlw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "escape-string-regexp": "^4.0.0",
-        "is-wsl": "^2.2.0",
-        "lighthouse-logger": "^2.0.1"
-      },
-      "dependencies": {
-        "escape-string-regexp": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-          "dev": true
-        }
-      }
-    },
     "chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
       "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
     },
     "chromedriver": {
-      "version": "119.0.1",
-      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-119.0.1.tgz",
-      "integrity": "sha512-lpCFFLaXPpvElTaUOWKdP74pFb/sJhWtWqMjn7Ju1YriWn8dT5JBk84BGXMPvZQs70WfCYWecxdMmwfIu1Mupg==",
+      "version": "121.0.2",
+      "resolved": "https://registry.npmjs.org/chromedriver/-/chromedriver-121.0.2.tgz",
+      "integrity": "sha512-58MUSCEE3oB3G3Y/Jo3URJ2Oa1VLHcVBufyYt7vNfGrABSJm7ienQLF9IQ8LPDlPVgLUXt2OBfggK3p2/SlEBg==",
       "dev": true,
       "requires": {
         "@testim/chrome-version": "^1.1.4",
-        "axios": "^1.6.0",
+        "axios": "^1.6.5",
         "compare-versions": "^6.1.0",
         "extract-zip": "^2.0.1",
         "https-proxy-agent": "^5.0.1",
@@ -29213,9 +28299,9 @@
       }
     },
     "cli-spinners": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.0.tgz",
-      "integrity": "sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
+      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
       "dev": true
     },
     "cli-truncate": {
@@ -29936,6 +29022,16 @@
       "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
       "dev": true
     },
+    "define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "requires": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      }
+    },
     "define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -30063,7 +29159,8 @@
       "version": "0.0.1182435",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1182435.tgz",
       "integrity": "sha512-EmlkWb62wSbQNE1gRZZsi4KZYRaF5Skpp183LhRU7+sadKR06O1dHCjZmFSEG6Kv7P6S/UYLxcY3NlYwqKM99w==",
-      "dev": true
+      "dev": true,
+      "peer": true
     },
     "dicomweb-client-typed": {
       "version": "0.8.6",
@@ -30461,6 +29558,19 @@
         "unbox-primitive": "^1.0.2"
       }
     },
+    "es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "requires": {
+        "get-intrinsic": "^1.2.4"
+      }
+    },
+    "es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="
+    },
     "es-get-iterator": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.2.tgz",
@@ -31164,28 +30274,110 @@
       }
     },
     "expect": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-29.6.3.tgz",
-      "integrity": "sha512-x1vY4LlEMWUYVZQrFi4ZANXFwqYbJ/JNQspLVvzhW2BNY28aNcXMQH6imBbt+RBf5sVRTodYHXtSP/TLEU0Dxw==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
+      "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
       "dev": true,
       "requires": {
-        "@jest/expect-utils": "^29.6.3",
+        "@jest/expect-utils": "^29.7.0",
         "jest-get-type": "^29.6.3",
-        "jest-matcher-utils": "^29.6.3",
-        "jest-message-util": "^29.6.3",
-        "jest-util": "^29.6.3"
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0"
       }
     },
     "expect-webdriverio": {
-      "version": "4.2.7",
-      "resolved": "https://registry.npmjs.org/expect-webdriverio/-/expect-webdriverio-4.2.7.tgz",
-      "integrity": "sha512-ulNspQoTct5/0OBfNSNzBKldSgoQxzmHBi/TLtrsLZY5QCZ7svD7Csdtm+YEW6IBg/v8MI7ibiMcpWY9cjcG6A==",
+      "version": "4.11.9",
+      "resolved": "https://registry.npmjs.org/expect-webdriverio/-/expect-webdriverio-4.11.9.tgz",
+      "integrity": "sha512-nHVLoC4W8wuVAyfpitJ07iDMLjeQ2OeYVjrKEb7dMeG4fqlegzN1SGYnnsKay+KWrte9KzuW1pZ7h5Nmbm/hAQ==",
       "dev": true,
       "requires": {
-        "@wdio/globals": "^8.13.1",
-        "expect": "^29.6.1",
-        "jest-matcher-utils": "^29.6.1",
-        "webdriverio": "^8.13.1"
+        "@vitest/snapshot": "^1.2.2",
+        "@wdio/globals": "^8.29.3",
+        "@wdio/logger": "^8.28.0",
+        "expect": "^29.7.0",
+        "jest-matcher-utils": "^29.7.0",
+        "lodash.isequal": "^4.5.0",
+        "webdriverio": "^8.29.3"
+      },
+      "dependencies": {
+        "@vitest/snapshot": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.3.1.tgz",
+          "integrity": "sha512-EF++BZbt6RZmOlE3SuTPu/NfwBF6q4ABS37HHXzs2LUVPBLx2QoY/K0fKpRChSo8eLiuxcbCVfqKgx/dplCDuQ==",
+          "dev": true,
+          "requires": {
+            "magic-string": "^0.30.5",
+            "pathe": "^1.1.1",
+            "pretty-format": "^29.7.0"
+          }
+        },
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true,
+          "optional": true
+        },
+        "ansi-styles": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+          "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true,
+          "optional": true
+        },
+        "pathe": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+          "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+          "dev": true,
+          "requires": {
+            "@jest/schemas": "^29.6.3",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^18.0.0"
+          }
+        },
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        }
       }
     },
     "express": {
@@ -31732,12 +30924,6 @@
         "readable-stream": "^2.0.0"
       }
     },
-    "fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true
-    },
     "fs-extra": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -31793,9 +30979,9 @@
       }
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "function.prototype.name": {
       "version": "1.1.5",
@@ -31847,21 +31033,33 @@
       }
     },
     "geckodriver": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-4.2.0.tgz",
-      "integrity": "sha512-I2BlybeMFMzpxHRrh8X4VwP4ys74JHszyUgfezOrbTR7PEybFneDcuEjKIQxKV6vFPmsdwhwF1x8AshdQo56xA==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/geckodriver/-/geckodriver-4.3.3.tgz",
+      "integrity": "sha512-we2c2COgxFkLVuoknJNx+ioP+7VDq0sr6SCqWHTzlA4kzIbzR0EQ1Pps34s8WrsOnQqPC8a4sZV9dRPROOrkSg==",
       "dev": true,
       "requires": {
-        "@wdio/logger": "^8.11.0",
+        "@wdio/logger": "^8.28.0",
         "decamelize": "^6.0.0",
-        "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.1",
-        "node-fetch": "^3.3.1",
-        "tar-fs": "^3.0.4",
+        "http-proxy-agent": "^7.0.2",
+        "https-proxy-agent": "^7.0.4",
+        "node-fetch": "^3.3.2",
+        "tar-fs": "^3.0.5",
         "unzipper": "^0.10.14",
-        "which": "^3.0.1"
+        "which": "^4.0.0"
       },
       "dependencies": {
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
         "agent-base": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.0.tgz",
@@ -31871,6 +31069,18 @@
             "debug": "^4.3.4"
           }
         },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
         "data-uri-to-buffer": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
@@ -31878,9 +31088,9 @@
           "dev": true
         },
         "http-proxy-agent": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.0.tgz",
-          "integrity": "sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==",
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+          "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
           "dev": true,
           "requires": {
             "agent-base": "^7.1.0",
@@ -31888,15 +31098,21 @@
           }
         },
         "https-proxy-agent": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.1.tgz",
-          "integrity": "sha512-Eun8zV0kcYS1g19r78osiQLEFIRspRUDd9tIfBCTBPBeMieF/EsJNL8VI3xOIdYRDEkjQnqOYPsZ2DsWsVsFwQ==",
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
+          "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
           "dev": true,
           "requires": {
             "agent-base": "^7.0.2",
             "debug": "4"
           }
         },
+        "isexe": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
+          "integrity": "sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==",
+          "dev": true
+        },
         "node-fetch": {
           "version": "3.3.2",
           "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
@@ -31908,13 +31124,34 @@
             "formdata-polyfill": "^4.0.10"
           }
         },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "tar-fs": {
+          "version": "3.0.5",
+          "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
+          "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+          "dev": true,
+          "requires": {
+            "bare-fs": "^2.1.1",
+            "bare-path": "^2.1.0",
+            "pump": "^3.0.0",
+            "tar-stream": "^3.1.5"
+          }
+        },
         "which": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
-          "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
+          "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
           "dev": true,
           "requires": {
-            "isexe": "^2.0.0"
+            "isexe": "^3.1.1"
           }
         }
       }
@@ -31938,13 +31175,15 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
-      "integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       }
     },
     "get-own-enumerable-property-symbols": {
@@ -32195,48 +31434,6 @@
         "get-intrinsic": "^1.1.3"
       }
     },
-    "got": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-13.0.0.tgz",
-      "integrity": "sha512-XfBk1CxOOScDcMr9O1yKkNaQyy865NbYs+F7dr4H0LZMVgCj2Le59k6PqbNHoL5ToeaEQUYh6c6yMfVcc6SJxA==",
-      "dev": true,
-      "requires": {
-        "@sindresorhus/is": "^5.2.0",
-        "@szmarczak/http-timer": "^5.0.1",
-        "cacheable-lookup": "^7.0.0",
-        "cacheable-request": "^10.2.8",
-        "decompress-response": "^6.0.0",
-        "form-data-encoder": "^2.1.2",
-        "get-stream": "^6.0.1",
-        "http2-wrapper": "^2.1.10",
-        "lowercase-keys": "^3.0.0",
-        "p-cancelable": "^3.0.0",
-        "responselike": "^3.0.0"
-      },
-      "dependencies": {
-        "decompress-response": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-          "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-          "dev": true,
-          "requires": {
-            "mimic-response": "^3.1.0"
-          }
-        },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "mimic-response": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-          "dev": true
-        }
-      }
-    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -32306,13 +31503,18 @@
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw=="
     },
     "has-property-descriptors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
-      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "requires": {
-        "get-intrinsic": "^1.1.1"
+        "es-define-property": "^1.0.0"
       }
     },
+    "has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q=="
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -32332,6 +31534,14 @@
       "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
       "dev": true
     },
+    "hasown": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
+      "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -32486,9 +31696,9 @@
       }
     },
     "human-signals": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz",
-      "integrity": "sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
       "dev": true
     },
     "humanize-url": {
@@ -32555,9 +31765,9 @@
       }
     },
     "import-meta-resolve": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
-      "integrity": "sha512-4IwhLhNNA8yy445rPjD/lWh++7hMDOml2eHtd58eG7h+qK3EryMuuRbsHGPikCoAgIkkDnckKfWSk2iDla/ejg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
+      "integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
       "dev": true
     },
     "imurmurhash": {
@@ -32593,12 +31803,12 @@
       "dev": true
     },
     "inquirer": {
-      "version": "9.2.10",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.10.tgz",
-      "integrity": "sha512-tVVNFIXU8qNHoULiazz612GFl+yqNfjMTbLuViNJE/d860Qxrd3NMrse8dm40VUQLOQeULvaQF8lpAhvysjeyA==",
+      "version": "9.2.12",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-9.2.12.tgz",
+      "integrity": "sha512-mg3Fh9g2zfuVWJn6lhST0O7x4n03k7G8Tx5nvikJkbq8/CK47WDVm+UznF0G6s5Zi0KcyUisr6DU8T67N5U+1Q==",
       "dev": true,
       "requires": {
-        "@ljharb/through": "^2.3.9",
+        "@ljharb/through": "^2.3.11",
         "ansi-escapes": "^4.3.2",
         "chalk": "^5.3.0",
         "cli-cursor": "^3.1.0",
@@ -32952,12 +32162,6 @@
       "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
       "dev": true
     },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==",
-      "dev": true
-    },
     "is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -33150,15 +32354,15 @@
       }
     },
     "jest-diff": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.6.3.tgz",
-      "integrity": "sha512-3sw+AdWnwH9sSNohMRKA7JiYUJSRr/WS6+sEFfBuhxU5V5GlEVKfvUn8JuMHE0wqKowemR1C2aHy8VtXbaV8dQ==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+      "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
         "diff-sequences": "^29.6.3",
         "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.6.3"
+        "pretty-format": "^29.7.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -33202,9 +32406,9 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-          "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
           "dev": true,
           "requires": {
             "@jest/schemas": "^29.6.3",
@@ -33244,15 +32448,15 @@
       "dev": true
     },
     "jest-matcher-utils": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.6.3.tgz",
-      "integrity": "sha512-6ZrMYINZdwduSt5Xu18/n49O1IgXdjsfG7NEZaQws9k69eTKWKcVbJBw/MZsjOZe2sSyJFmuzh8042XWwl54Zg==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
+      "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
       "dev": true,
       "requires": {
         "chalk": "^4.0.0",
-        "jest-diff": "^29.6.3",
+        "jest-diff": "^29.7.0",
         "jest-get-type": "^29.6.3",
-        "pretty-format": "^29.6.3"
+        "pretty-format": "^29.7.0"
       },
       "dependencies": {
         "ansi-styles": {
@@ -33296,9 +32500,9 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-          "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
           "dev": true,
           "requires": {
             "@jest/schemas": "^29.6.3",
@@ -33332,9 +32536,9 @@
       }
     },
     "jest-message-util": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.6.3.tgz",
-      "integrity": "sha512-FtzaEEHzjDpQp51HX4UMkPZjy46ati4T5pEMyM6Ik48ztu4T9LQplZ6OsimHx7EuM9dfEh5HJa6D3trEftu3dA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
+      "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.13",
@@ -33343,7 +32547,7 @@
         "chalk": "^4.0.0",
         "graceful-fs": "^4.2.9",
         "micromatch": "^4.0.4",
-        "pretty-format": "^29.6.3",
+        "pretty-format": "^29.7.0",
         "slash": "^3.0.0",
         "stack-utils": "^2.0.3"
       },
@@ -33389,9 +32593,9 @@
           "dev": true
         },
         "pretty-format": {
-          "version": "29.6.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz",
-          "integrity": "sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==",
+          "version": "29.7.0",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+          "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
           "dev": true,
           "requires": {
             "@jest/schemas": "^29.6.3",
@@ -33425,9 +32629,9 @@
       }
     },
     "jest-util": {
-      "version": "29.6.3",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.6.3.tgz",
-      "integrity": "sha512-QUjna/xSy4B32fzcKTSz1w7YYzgiHrjjJjevdRf61HYk998R5vVMMNmrHESYZVDS5DSWs+1srPLPKxXPkeSDOA==",
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
       "dev": true,
       "requires": {
         "@jest/types": "^29.6.3",
@@ -33852,33 +33056,6 @@
         "immediate": "~3.0.5"
       }
     },
-    "lighthouse-logger": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/lighthouse-logger/-/lighthouse-logger-2.0.1.tgz",
-      "integrity": "sha512-ioBrW3s2i97noEmnXxmUq7cjIcVRjT5HBpAYy8zE11CxU9HqlWHHeRxfeN1tn8F7OEMVPIC9x1f8t3Z7US9ehQ==",
-      "dev": true,
-      "requires": {
-        "debug": "^2.6.9",
-        "marky": "^1.2.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-          "dev": true
-        }
-      }
-    },
     "lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -34047,39 +33224,6 @@
         "wrap-ansi": "^7.0.0"
       }
     },
-    "load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
-          "dev": true,
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        }
-      }
-    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -34112,12 +33256,12 @@
       "dev": true
     },
     "locate-app": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.1.0.tgz",
-      "integrity": "sha512-rcVo/iLUxrd9d0lrmregK/Z5Y5NCpSwf9KlMbPpOHmKmdxdQY1Fj8NDQ5QymJTryCsBLqwmniFv2f3JKbk9Bvg==",
+      "version": "2.2.20",
+      "resolved": "https://registry.npmjs.org/locate-app/-/locate-app-2.2.20.tgz",
+      "integrity": "sha512-TOCp8H9l75GhNtd+BgyUnLMNzR+IpYge7cWjxELsyDlqH+MyYWxq+NfyjQ+o6oRAORzOs3IfMM6KAR6q3JNfhg==",
       "dev": true,
       "requires": {
-        "n12": "0.4.0",
+        "n12": "1.8.23",
         "type-fest": "2.13.0",
         "userhome": "1.0.0"
       },
@@ -34163,18 +33307,6 @@
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
       "peer": true
     },
-    "lodash.defaults": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
-      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
-      "dev": true
-    },
-    "lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
-      "dev": true
-    },
     "lodash.endswith": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/lodash.endswith/-/lodash.endswith-4.2.1.tgz",
@@ -34199,10 +33331,10 @@
       "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
       "dev": true
     },
-    "lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
       "dev": true
     },
     "lodash.merge": {
@@ -34408,9 +33540,9 @@
       }
     },
     "magic-string": {
-      "version": "0.30.1",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.1.tgz",
-      "integrity": "sha512-mbVKXPmS0z0G4XqFDCTllmDQ6coZzn94aMlb0o/A4HEHJCKcanlDZwYJgwnkmgD3jyWhUgj9VsPrfd972yPffA==",
+      "version": "0.30.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz",
+      "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==",
       "requires": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -34445,23 +33577,11 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
-    "map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
-      "dev": true
-    },
     "markdown-table": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
       "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw=="
     },
-    "marky": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/marky/-/marky-1.2.5.tgz",
-      "integrity": "sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==",
-      "dev": true
-    },
     "md5-hex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/md5-hex/-/md5-hex-3.0.1.tgz",
@@ -34880,9 +34000,9 @@
       "dev": true
     },
     "n12": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/n12/-/n12-0.4.0.tgz",
-      "integrity": "sha512-p/hj4zQ8d3pbbFLQuN1K9honUxiDDhueOWyFLw/XgBv+wZCE44bcLH4CIcsolOceJQduh4Jf7m/LfaTxyGmGtQ==",
+      "version": "1.8.23",
+      "resolved": "https://registry.npmjs.org/n12/-/n12-1.8.23.tgz",
+      "integrity": "sha512-kQITb5LlO0Gk8rmbMAkfbmhs+QlXZ5SRHsx6YcG++3yc57iolbiQuo5rsfu3dkB7Qw3jKCqntsZvNNgvdfotkA==",
       "dev": true
     },
     "nan": {
@@ -37079,6 +36199,19 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true
     },
+    "set-function-length": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.1.tgz",
+      "integrity": "sha512-j4t6ccc+VsKwYHso+kElc5neZpjtq9EnRICFZtWyBsLojhmeF/ZBd/elqm22WJh/BziDe/SBiOeAt0m2mfLD0g==",
+      "requires": {
+        "define-data-property": "^1.1.2",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.1"
+      }
+    },
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
@@ -37660,12 +36793,6 @@
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
     },
-    "suffix": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/suffix/-/suffix-0.1.1.tgz",
-      "integrity": "sha512-j5uf6MJtMCfC4vBe5LFktSe4bGyNTBk7I2Kdri0jeLrcv5B9pWfxVa5JQpoxgtR8vaVB7bVxsWgnfQbX5wkhAA==",
-      "dev": true
-    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -38934,24 +38061,57 @@
       "dev": true
     },
     "webdriver": {
-      "version": "8.15.6",
-      "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.15.6.tgz",
-      "integrity": "sha512-TpSb0+L6NlFnjFu02/BegO3g3suAw25eorWvNdmXRxPYMf5K6zAVYjpU3rD0GJ37R119dcsHWEKvEQ8ElrGnOw==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.32.3.tgz",
+      "integrity": "sha512-1/kpZvuftt59oikHs+6FvWXNfOM5tgMMMAk3LnMe7D938dVOoNGAe46fq0oL/xsxxPicbMRTRgIy1OifLiglaA==",
       "dev": true,
       "requires": {
         "@types/node": "^20.1.0",
         "@types/ws": "^8.5.3",
-        "@wdio/config": "8.15.6",
-        "@wdio/logger": "8.11.0",
-        "@wdio/protocols": "8.14.6",
-        "@wdio/types": "8.15.0",
-        "@wdio/utils": "8.15.6",
+        "@wdio/config": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "deepmerge-ts": "^5.1.0",
-        "got": "^ 12.6.1",
+        "got": "^12.6.1",
         "ky": "^0.33.0",
         "ws": "^8.8.0"
       },
       "dependencies": {
+        "@wdio/logger": {
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
+          "dev": true,
+          "requires": {
+            "chalk": "^5.1.2",
+            "loglevel": "^1.6.0",
+            "loglevel-plugin-prefix": "^0.8.4",
+            "strip-ansi": "^7.1.0"
+          }
+        },
+        "@wdio/types": {
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
+          "dev": true,
+          "requires": {
+            "@types/node": "^20.1.0"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+          "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+          "dev": true
+        },
         "decompress-response": {
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -38991,6 +38151,15 @@
           "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
           "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
           "dev": true
+        },
+        "strip-ansi": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
         }
       }
     },
@@ -39005,25 +38174,25 @@
       }
     },
     "webdriverio": {
-      "version": "8.20.0",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.20.0.tgz",
-      "integrity": "sha512-nVd3n4v1CYzjEezK6OgmGIcVx+T/7PNYwLK3fTNH2hGRNX05TyGGcR9HAcVZCbIu8WWFKRE0SrLvCjEutPO8gg==",
+      "version": "8.32.3",
+      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-8.32.3.tgz",
+      "integrity": "sha512-SupbQKMtUZHSH7lmF5xaJPgxsn8sIBNAjs1CyPI33u30eY9VcVQ4CJQ818ZS3FLxR0q2XdWk9lsQNyhZwlN3RA==",
       "dev": true,
       "requires": {
         "@types/node": "^20.1.0",
-        "@wdio/config": "8.20.0",
-        "@wdio/logger": "8.16.17",
-        "@wdio/protocols": "8.18.0",
-        "@wdio/repl": "8.10.1",
-        "@wdio/types": "8.20.0",
-        "@wdio/utils": "8.20.0",
+        "@wdio/config": "8.32.3",
+        "@wdio/logger": "8.28.0",
+        "@wdio/protocols": "8.32.0",
+        "@wdio/repl": "8.24.12",
+        "@wdio/types": "8.32.2",
+        "@wdio/utils": "8.32.3",
         "archiver": "^6.0.0",
         "aria-query": "^5.0.0",
         "css-shorthand-properties": "^1.1.1",
         "css-value": "^0.0.1",
-        "devtools-protocol": "^0.0.1209236",
+        "devtools-protocol": "^0.0.1262051",
         "grapheme-splitter": "^1.0.2",
-        "import-meta-resolve": "^3.0.0",
+        "import-meta-resolve": "^4.0.0",
         "is-plain-obj": "^4.1.0",
         "lodash.clonedeep": "^4.5.0",
         "lodash.zip": "^4.2.0",
@@ -39033,29 +38202,13 @@
         "resq": "^1.9.1",
         "rgb2hex": "0.2.5",
         "serialize-error": "^11.0.1",
-        "webdriver": "8.20.0"
+        "webdriver": "8.32.3"
       },
       "dependencies": {
-        "@wdio/config": {
-          "version": "8.20.0",
-          "resolved": "https://registry.npmjs.org/@wdio/config/-/config-8.20.0.tgz",
-          "integrity": "sha512-ODsafHlxEawyYa6IyIdXJMV2plPFyrDbGrXLNKNFBQVfB/FmoHUiiOTh+4Gu+sUXzpn2YNH5O199qHxHw61uUw==",
-          "dev": true,
-          "requires": {
-            "@wdio/logger": "8.16.17",
-            "@wdio/types": "8.20.0",
-            "@wdio/utils": "8.20.0",
-            "decamelize": "^6.0.0",
-            "deepmerge-ts": "^5.0.0",
-            "glob": "^10.2.2",
-            "import-meta-resolve": "^3.0.0",
-            "read-pkg-up": "^10.0.0"
-          }
-        },
         "@wdio/logger": {
-          "version": "8.16.17",
-          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.16.17.tgz",
-          "integrity": "sha512-zeQ41z3T+b4IsrriZZipayXxLNDuGsm7TdExaviNGojPVrIsQUCSd/FvlLHM32b7ZrMyInHenu/zx1cjAZO71g==",
+          "version": "8.28.0",
+          "resolved": "https://registry.npmjs.org/@wdio/logger/-/logger-8.28.0.tgz",
+          "integrity": "sha512-/s6zNCqwy1hoc+K4SJypis0Ud0dlJ+urOelJFO1x0G0rwDRWyFiUP6ijTaCcFxAm29jYEcEPWijl2xkVIHwOyA==",
           "dev": true,
           "requires": {
             "chalk": "^5.1.2",
@@ -39064,43 +38217,15 @@
             "strip-ansi": "^7.1.0"
           }
         },
-        "@wdio/protocols": {
-          "version": "8.18.0",
-          "resolved": "https://registry.npmjs.org/@wdio/protocols/-/protocols-8.18.0.tgz",
-          "integrity": "sha512-TABA0mksHvu5tE8qNYYDR0fDyo90NCANeghbGAtsI8TUsJzgH0dwpos3WSSiB97J9HRSZuWIMa7YuABEkBIjWQ==",
-          "dev": true
-        },
         "@wdio/types": {
-          "version": "8.20.0",
-          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.20.0.tgz",
-          "integrity": "sha512-y0En5V5PPF48IHJMetaNYQobhCr3ddsgp2aX/crLL51UccWqnFpCL8pCh6cP01gRgCchCasa2JCBMB+PucbYmA==",
+          "version": "8.32.2",
+          "resolved": "https://registry.npmjs.org/@wdio/types/-/types-8.32.2.tgz",
+          "integrity": "sha512-jq8LcBBQpBP9ZF5kECKEpXv8hN7irCGCjLFAN0Bd5ScRR6qu6MGWvwkDkau2sFPr0b++sKDCEaMzQlwrGFjZXg==",
           "dev": true,
           "requires": {
             "@types/node": "^20.1.0"
           }
         },
-        "@wdio/utils": {
-          "version": "8.20.0",
-          "resolved": "https://registry.npmjs.org/@wdio/utils/-/utils-8.20.0.tgz",
-          "integrity": "sha512-nZ5QF5lPyZNJG9YaSrRuVfkVeg80yRrUQT42D0mUDDjmUIh2pAXDMu4HxgxocuQSOyLacg4Vpg3Sju9NFipxIA==",
-          "dev": true,
-          "requires": {
-            "@puppeteer/browsers": "^1.6.0",
-            "@wdio/logger": "8.16.17",
-            "@wdio/types": "8.20.0",
-            "decamelize": "^6.0.0",
-            "deepmerge-ts": "^5.1.0",
-            "edgedriver": "^5.3.5",
-            "geckodriver": "^4.2.0",
-            "get-port": "^7.0.0",
-            "got": "^13.0.0",
-            "import-meta-resolve": "^3.0.0",
-            "locate-app": "^2.1.0",
-            "safaridriver": "^0.1.0",
-            "split2": "^4.2.0",
-            "wait-port": "^1.0.4"
-          }
-        },
         "ansi-regex": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -39122,52 +38247,18 @@
           "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
           "dev": true
         },
-        "decompress-response": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
-          "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
-          "dev": true,
-          "requires": {
-            "mimic-response": "^3.1.0"
-          }
-        },
         "devtools-protocol": {
-          "version": "0.0.1209236",
-          "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1209236.tgz",
-          "integrity": "sha512-z4eehc+fhmptqhxwreLcg9iydszZGU4Q5FzaaElXVGp3KyfXbjtXeUCmo4l8FxBJbyXtCz4VRIJsGW2ekApyUQ==",
+          "version": "0.0.1262051",
+          "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1262051.tgz",
+          "integrity": "sha512-YJe4CT5SA8on3Spa+UDtNhEqtuV6Epwz3OZ4HQVLhlRccpZ9/PAYk0/cy/oKxFKRrZPBUPyxympQci4yWNWZ9g==",
           "dev": true
         },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "glob": {
-          "version": "10.3.10",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
-          "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
-          "dev": true,
-          "requires": {
-            "foreground-child": "^3.1.0",
-            "jackspeak": "^2.3.5",
-            "minimatch": "^9.0.1",
-            "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
-            "path-scurry": "^1.10.1"
-          }
-        },
         "is-plain-obj": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
           "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
           "dev": true
         },
-        "mimic-response": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
-          "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
-          "dev": true
-        },
         "minimatch": {
           "version": "9.0.3",
           "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -39177,12 +38268,6 @@
             "brace-expansion": "^2.0.1"
           }
         },
-        "minipass": {
-          "version": "7.0.4",
-          "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
-          "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-          "dev": true
-        },
         "strip-ansi": {
           "version": "7.1.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
@@ -39191,46 +38276,6 @@
           "requires": {
             "ansi-regex": "^6.0.1"
           }
-        },
-        "webdriver": {
-          "version": "8.20.0",
-          "resolved": "https://registry.npmjs.org/webdriver/-/webdriver-8.20.0.tgz",
-          "integrity": "sha512-U/sej7yljVf/enEWR9L2AtOntrd3lqtkEtHeuSWU2FPp5cWvoMEe7vQiG0WJA74VE2e7uwd8S1LfCgQD1wY3Bg==",
-          "dev": true,
-          "requires": {
-            "@types/node": "^20.1.0",
-            "@types/ws": "^8.5.3",
-            "@wdio/config": "8.20.0",
-            "@wdio/logger": "8.16.17",
-            "@wdio/protocols": "8.18.0",
-            "@wdio/types": "8.20.0",
-            "@wdio/utils": "8.20.0",
-            "deepmerge-ts": "^5.1.0",
-            "got": "^ 12.6.1",
-            "ky": "^0.33.0",
-            "ws": "^8.8.0"
-          },
-          "dependencies": {
-            "got": {
-              "version": "12.6.1",
-              "resolved": "https://registry.npmjs.org/got/-/got-12.6.1.tgz",
-              "integrity": "sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==",
-              "dev": true,
-              "requires": {
-                "@sindresorhus/is": "^5.2.0",
-                "@szmarczak/http-timer": "^5.0.1",
-                "cacheable-lookup": "^7.0.0",
-                "cacheable-request": "^10.2.8",
-                "decompress-response": "^6.0.0",
-                "form-data-encoder": "^2.1.2",
-                "get-stream": "^6.0.1",
-                "http2-wrapper": "^2.1.10",
-                "lowercase-keys": "^3.0.0",
-                "p-cancelable": "^3.0.0",
-                "responselike": "^3.0.0"
-              }
-            }
-          }
         }
       }
     },
@@ -39777,190 +38822,6 @@
         }
       }
     },
-    "yarn-install": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/yarn-install/-/yarn-install-1.0.0.tgz",
-      "integrity": "sha512-VO1u181msinhPcGvQTVMnHVOae8zjX/NSksR17e6eXHRveDvHCF5mGjh9hkN8mzyfnCqcBe42LdTs7bScuTaeg==",
-      "dev": true,
-      "requires": {
-        "cac": "^3.0.3",
-        "chalk": "^1.1.3",
-        "cross-spawn": "^4.0.2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-          "dev": true
-        },
-        "cac": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/cac/-/cac-3.0.4.tgz",
-          "integrity": "sha512-hq4rxE3NT5PlaEiVV39Z45d6MoFcQZG5dsgJqtAUeOz3408LEQAElToDkf9i5IYSCOmK0If/81dLg7nKxqPR0w==",
-          "dev": true,
-          "requires": {
-            "camelcase-keys": "^3.0.0",
-            "chalk": "^1.1.3",
-            "indent-string": "^3.0.0",
-            "minimist": "^1.2.0",
-            "read-pkg-up": "^1.0.1",
-            "suffix": "^0.1.0",
-            "text-table": "^0.2.0"
-          }
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "cross-spawn": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-4.0.2.tgz",
-          "integrity": "sha512-yAXz/pA1tD8Gtg2S98Ekf/sewp3Lcp3YoFKJ4Hkp5h5yLWnKVTDU0kwjKJ8NDCYcfTLfyGkzTikst+jWypT1iA==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "which": "^1.2.9"
-          }
-        },
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
-          "dev": true,
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "hosted-git-info": {
-          "version": "2.8.9",
-          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
-          "dev": true
-        },
-        "indent-string": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-3.2.0.tgz",
-          "integrity": "sha512-BYqTHXTGUIvg7t1r4sJNKcbDZkL92nkXA8YtRpbjFHRHGDL/NtUeiBJMeE60kIFN/Mg8ESaWQvftaYMGJzQZCQ==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "normalize-package-data": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-          "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-          "dev": true,
-          "requires": {
-            "hosted-git-info": "^2.1.4",
-            "resolve": "^1.10.0",
-            "semver": "2 || 3 || 4 || 5",
-            "validate-npm-package-license": "^3.0.1"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
-          "dev": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha512-S4eENJz1pkiQn9Znv33Q+deTOKmbl+jj1Fl+qiP/vYezj+S8x+J3Uo0ISrx/QoEvIlOaDWJhPaRd1flJ9HXZqg==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha512-7BGwRHqt4s/uVbuyoeejRn4YmFnYZiFl4AuaeXHlgZf3sONF0SOGlxs2Pw8g6hCKupo08RafIO5YXFNOKTfwsQ==",
-          "dev": true,
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha512-WD9MTlNtI55IwYUS27iHh9tK3YoIVhxis8yKhLpTqWtml739uXc9NWTpxoHkfZf3+DkCCsXox94/VWZniuZm6A==",
-          "dev": true,
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "semver": {
-          "version": "5.7.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-          "dev": true
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
-          "dev": true
-        }
-      }
-    },
     "yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
diff --git a/package.json b/package.json
index a202fabdc..319416aec 100644
--- a/package.json
+++ b/package.json
@@ -69,10 +69,10 @@
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "^2.3.2",
-    "@wdio/cli": "^8.11.2",
-    "@wdio/local-runner": "^8.11.2",
-    "@wdio/mocha-framework": "^8.11.0",
-    "@wdio/spec-reporter": "^8.11.2",
+    "@wdio/cli": "^8.32.3",
+    "@wdio/local-runner": "^8.32.3",
+    "@wdio/mocha-framework": "^8.32.3",
+    "@wdio/spec-reporter": "^8.32.2",
     "@wdio/static-server-service": "^8.11.0",
     "babel-eslint": "10.1.0",
     "canvas": "^2.11.2",
@@ -80,7 +80,7 @@
     "chai-almost": "^1.0.1",
     "chai-as-promised": "7.1.1",
     "chai-subset": "^1.6.0",
-    "chromedriver": "^119.0.0",
+    "chromedriver": "^121.0.2",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
@@ -115,7 +115,7 @@
     "wdio-image-comparison-service": "^5.0.3",
     "wdio-safaridriver-service": "^2.1.0",
     "wdio-wait-for": "^3.0.4",
-    "webdriverio": "^8.20.0",
+    "webdriverio": "^8.32.3",
     "yorkie": "^2.0.0"
   },
   "gitHooks": {
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index f740e0f2f..ce04b4d23 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -53,7 +53,7 @@ class VolViewPage extends Page {
         const views = await this_.views;
         if (views.length === 0) return false;
         const inView = await Promise.all(
-          views.map((v) => v.isDisplayedInViewport())
+          Array.from(views).map((v) => v.isDisplayedInViewport())
         );
         return inView.every(Boolean);
       },

From 6c0f0984524001607c394b9e98b31c7fca18a4d3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 23 Feb 2024 14:50:52 -0500
Subject: [PATCH 050/113] refactor(SaveSegmentGroupDialog): emit event rather
 than close prop

---
 src/components/SaveSegmentGroupDialog.vue | 6 ++++--
 src/components/SegmentGroupControls.vue   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/SaveSegmentGroupDialog.vue b/src/components/SaveSegmentGroupDialog.vue
index 2f9e5d09a..e603b459a 100644
--- a/src/components/SaveSegmentGroupDialog.vue
+++ b/src/components/SaveSegmentGroupDialog.vue
@@ -57,9 +57,11 @@ const EXTENSIONS = [
 ];
 
 const props = defineProps<{
-  close: () => void;
   id: string;
 }>();
+
+const emit = defineEmits(['done']);
+
 const fileName = ref('');
 const valid = ref(true);
 const saving = ref(false);
@@ -79,7 +81,7 @@ async function saveSegmentGroup() {
     saveAs(new Blob([serialized]), `${fileName.value}.${fileFormat.value}`);
   });
   saving.value = false;
-  props.close();
+  emit('done');
 }
 
 onMounted(() => {
diff --git a/src/components/SegmentGroupControls.vue b/src/components/SegmentGroupControls.vue
index eddf6cdd0..fef96e103 100644
--- a/src/components/SegmentGroupControls.vue
+++ b/src/components/SegmentGroupControls.vue
@@ -263,7 +263,7 @@ function openSaveDialog(id: string) {
 
   <closeable-dialog v-model="saveDialog" max-width="30%">
     <template v-slot="{ close }">
-      <save-segment-group-dialog :close="close" :id="saveId" />
+      <save-segment-group-dialog :id="saveId" @done="close" />
     </template>
   </closeable-dialog>
 </template>

From e9ea9e304dceed59ac93ff00f1caf3f78c4c66ee Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 1 Mar 2024 16:08:21 +0000
Subject: [PATCH 051/113] chore(deps-dev): bump ip from 1.1.8 to 1.1.9

Bumps [ip](https://github.com/indutny/node-ip) from 1.1.8 to 1.1.9.
- [Commits](https://github.com/indutny/node-ip/compare/v1.1.8...v1.1.9)

---
updated-dependencies:
- dependency-name: ip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c16dd977c..7a56ac2b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12880,9 +12880,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "dev": true
     },
     "node_modules/ip-regex": {
@@ -18931,9 +18931,9 @@
       }
     },
     "node_modules/socks/node_modules/ip": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-      "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+      "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
       "dev": true
     },
     "node_modules/sort-keys": {
@@ -31900,9 +31900,9 @@
       }
     },
     "ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "dev": true
     },
     "ip-regex": {
@@ -36425,9 +36425,9 @@
       },
       "dependencies": {
         "ip": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
-          "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz",
+          "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==",
           "dev": true
         }
       }

From 6af06e50a9f3e33e8354bc9d7d3af5a01740e973 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 20 Dec 2023 17:50:33 -0500
Subject: [PATCH 052/113] fix(useLabels): keep deserialized labels with same
 name

* remove clear default labels flag from mergeLabels and make explicit function.
* set max width to LabelControls label editor
---
 src/components/LabelControls.vue     |  2 +-
 src/io/import/configJson.ts          | 21 +++++++++++++++------
 src/store/tools/useAnnotationTool.ts |  7 +++++--
 src/store/tools/useLabels.ts         | 13 ++++---------
 4 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/LabelControls.vue b/src/components/LabelControls.vue
index 5ef17e9c4..7c6561550 100644
--- a/src/components/LabelControls.vue
+++ b/src/components/LabelControls.vue
@@ -105,7 +105,7 @@ function deleteEditingLabel() {
     </v-container>
   </v-card>
 
-  <isolated-dialog v-model="editDialog">
+  <isolated-dialog v-model="editDialog" max-width="800px">
     <ToolLabelEditor
       v-if="editingLabelID"
       v-model:name="editState.labelName"
diff --git a/src/io/import/configJson.ts b/src/io/import/configJson.ts
index 231da4373..f8277f737 100644
--- a/src/io/import/configJson.ts
+++ b/src/io/import/configJson.ts
@@ -11,6 +11,7 @@ import { usePolygonStore } from '@/src/store/tools/polygons';
 import { useViewStore } from '@/src/store/views';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { AnnotationToolStore } from '@/src/store/tools/useAnnotationTool';
 
 const layout = z
   .object({
@@ -82,17 +83,25 @@ const applyLabels = (manifest: Config) => {
   if (!manifest.labels) return;
 
   // pass through null labels, use fallback labels if undefined
-  const labelsIfUndefined = (
-    toolLabels: (typeof manifest.labels)[keyof typeof manifest.labels]
-  ) => {
+  const defaultLabelsIfUndefined = <T>(toolLabels: T) => {
     if (toolLabels === undefined) return manifest.labels?.defaultLabels;
     return toolLabels;
   };
 
+  const applyLabelsToStore = (
+    maybeLabels: (typeof manifest.labels)[keyof typeof manifest.labels],
+    store: AnnotationToolStore
+  ) => {
+    const labelsOrFallback = defaultLabelsIfUndefined(maybeLabels);
+    if (!labelsOrFallback) return;
+    store.clearDefaultLabels();
+    store.mergeLabels(labelsOrFallback);
+  };
+
   const { rulerLabels, rectangleLabels, polygonLabels } = manifest.labels;
-  useRulerStore().mergeLabels(labelsIfUndefined(rulerLabels));
-  useRectangleStore().mergeLabels(labelsIfUndefined(rectangleLabels));
-  usePolygonStore().mergeLabels(labelsIfUndefined(polygonLabels));
+  applyLabelsToStore(rulerLabels, useRulerStore());
+  applyLabelsToStore(rectangleLabels, useRectangleStore());
+  applyLabelsToStore(polygonLabels, usePolygonStore());
 };
 
 const applySampleData = (manifest: Config) => {
diff --git a/src/store/tools/useAnnotationTool.ts b/src/store/tools/useAnnotationTool.ts
index 1be76c6d1..94a584219 100644
--- a/src/store/tools/useAnnotationTool.ts
+++ b/src/store/tools/useAnnotationTool.ts
@@ -73,7 +73,7 @@ export const useAnnotationTool = <
     ...annotationToolLabelDefault,
     ...newLabelDefault,
   });
-  labels.mergeLabels(initialLabels, false);
+  labels.mergeLabels(initialLabels);
 
   function makePropsFromLabel(label: string | undefined) {
     if (!label) return { labelName: '' };
@@ -190,9 +190,12 @@ export const useAnnotationTool = <
     serialized: Maybe<Serialized>,
     dataIDMap: Record<string, string>
   ) {
+    if (serialized?.labels) {
+      labels.clearDefaultLabels();
+    }
     const labelIDMap = Object.fromEntries(
       Object.entries(serialized?.labels ?? {}).map(([id, label]) => {
-        const newID = labels.mergeLabel(label); // side effect
+        const newID = labels.addLabel(label); // side effect in Array.map
         return [id, newID];
       })
     );
diff --git a/src/store/tools/useLabels.ts b/src/store/tools/useLabels.ts
index 955aa6aec..148fb285b 100644
--- a/src/store/tools/useLabels.ts
+++ b/src/store/tools/useLabels.ts
@@ -79,9 +79,7 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
    * param label: label to merge
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
    */
-  const mergeLabel = (label: ToolLabel, clearDefault: boolean = true) => {
-    if (clearDefault) clearDefaultLabels();
-
+  const mergeLabel = (label: ToolLabel) => {
     const { labelName } = label;
     const matchingName = findLabel(labelName);
 
@@ -100,12 +98,9 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
    * param newLabels: each key is the label name
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
    */
-  const mergeLabels = (
-    newLabels: Maybe<ToolLabels>,
-    clearDefault: boolean = true
-  ) => {
+  const mergeLabels = (newLabels: Maybe<ToolLabels>) => {
     Object.entries(newLabels ?? {}).forEach(([labelName, props]) =>
-      mergeLabel({ ...props, labelName }, clearDefault)
+      mergeLabel({ ...props, labelName })
     );
   };
 
@@ -116,9 +111,9 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
     addLabel,
     deleteLabel,
     updateLabel,
-    mergeLabel,
     mergeLabels,
     findLabel,
+    clearDefaultLabels,
   };
 };
 

From ef9de042a0e7565a62ae11cc1a5f4a73968bca71 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 20 Dec 2023 20:00:21 -0500
Subject: [PATCH 053/113] feat(ToolLabelEditor): warn if label name is not
 unique

Still allows duplicate names if user presses "Done".

New labels are created with unique names suffixed with a number.

New labels loop through the confgi.ts:TOOL_COLORS.
---
 src/components/LabelControls.vue   | 17 ++++++++++++++++-
 src/components/ToolLabelEditor.vue | 30 +++++++++++++++++++++++++-----
 src/io/import/configJson.ts        | 10 +++++-----
 src/store/tools/useLabels.ts       |  9 +++++++--
 4 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/LabelControls.vue b/src/components/LabelControls.vue
index 7c6561550..c5e671ee2 100644
--- a/src/components/LabelControls.vue
+++ b/src/components/LabelControls.vue
@@ -42,8 +42,22 @@ const editingLabel = computed(() => {
   return props.labelsStore.labels[editingLabelID.value];
 });
 
+const makeUniqueName = (name: string) => {
+  const existingNames = new Set(
+    Object.values(props.labelsStore.labels).map((label) => label.labelName)
+  );
+  let uniqueName = name;
+  let i = 1;
+  while (existingNames.has(uniqueName)) {
+    uniqueName = `${name} (${i})`;
+    i++;
+  }
+  return uniqueName;
+};
+
 const createLabel = () => {
-  editingLabelID.value = props.labelsStore.addLabel();
+  const labelName = makeUniqueName('New Label');
+  editingLabelID.value = props.labelsStore.addLabel({ labelName });
 };
 
 function startEditing(label: LabelID) {
@@ -114,6 +128,7 @@ function deleteEditingLabel() {
       @delete="deleteEditingLabel"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
+      :labelsStore="labelsStore"
     />
   </isolated-dialog>
 </template>
diff --git a/src/components/ToolLabelEditor.vue b/src/components/ToolLabelEditor.vue
index 9415e0d0b..c1e72c307 100644
--- a/src/components/ToolLabelEditor.vue
+++ b/src/components/ToolLabelEditor.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import LabelEditor from '@/src/components/LabelEditor.vue';
+import type { LabelsStore } from '../store/tools/useLabels';
+import type { AnnotationTool } from '../types/annotation-tool';
 
 defineEmits([
   'done',
@@ -10,11 +13,27 @@ defineEmits([
   'update:color',
 ]);
 
-defineProps({
-  name: String,
-  strokeWidth: Number,
-  color: String,
-});
+const props = defineProps<{
+  name: string;
+  strokeWidth: number;
+  color: string;
+  labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
+}>();
+
+const existingNames = computed(
+  () =>
+    new Set(
+      Object.values(props.labelsStore.labels).map((label) => label.labelName)
+    )
+);
+
+function isUniqueEditingName(name: string) {
+  return !existingNames.value.has(name);
+}
+
+function uniqueNameRule(name: string) {
+  return isUniqueEditingName(name) || 'Name is not unique';
+}
 </script>
 
 <template>
@@ -37,6 +56,7 @@ defineProps({
         :model-value="name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
+        :rules="[uniqueNameRule]"
       />
       <v-text-field
         label="Stroke Width"
diff --git a/src/io/import/configJson.ts b/src/io/import/configJson.ts
index f8277f737..2f5c7e4e5 100644
--- a/src/io/import/configJson.ts
+++ b/src/io/import/configJson.ts
@@ -89,8 +89,8 @@ const applyLabels = (manifest: Config) => {
   };
 
   const applyLabelsToStore = (
-    maybeLabels: (typeof manifest.labels)[keyof typeof manifest.labels],
-    store: AnnotationToolStore
+    store: AnnotationToolStore,
+    maybeLabels: (typeof manifest.labels)[keyof typeof manifest.labels]
   ) => {
     const labelsOrFallback = defaultLabelsIfUndefined(maybeLabels);
     if (!labelsOrFallback) return;
@@ -99,9 +99,9 @@ const applyLabels = (manifest: Config) => {
   };
 
   const { rulerLabels, rectangleLabels, polygonLabels } = manifest.labels;
-  applyLabelsToStore(rulerLabels, useRulerStore());
-  applyLabelsToStore(rectangleLabels, useRectangleStore());
-  applyLabelsToStore(polygonLabels, usePolygonStore());
+  applyLabelsToStore(useRulerStore(), rulerLabels);
+  applyLabelsToStore(useRectangleStore(), rectangleLabels);
+  applyLabelsToStore(usePolygonStore(), polygonLabels);
 };
 
 const applySampleData = (manifest: Config) => {
diff --git a/src/store/tools/useLabels.ts b/src/store/tools/useLabels.ts
index 148fb285b..d9d9c06a3 100644
--- a/src/store/tools/useLabels.ts
+++ b/src/store/tools/useLabels.ts
@@ -27,14 +27,19 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
     activeLabel.value = id;
   };
 
+  let nextToolColorIndex = 0;
+
   const addLabel = (label: ToolLabel = {}) => {
     const id = useIdStore().nextId();
     labels.value[id] = {
       ...labelDefault,
       ...newLabelDefault,
+      color: TOOL_COLORS[nextToolColorIndex],
       ...label,
     };
 
+    nextToolColorIndex = (nextToolColorIndex + 1) % TOOL_COLORS.length;
+
     setActiveLabel(id);
     return id;
   };
@@ -74,7 +79,7 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
   };
 
   /*
-   * If new label have the same name as existing label, overwrite existing label.
+   * If input label has the same name as existing label, update existing label with input label properties.
    *
    * param label: label to merge
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
@@ -93,7 +98,7 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
   };
 
   /*
-   * If new label have the same name as existing label, overwrite existing label.
+   * If input label has the same name as existing label, update existing label with input label properties.
    *
    * param newLabels: each key is the label name
    * param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared

From badca45343fd582c8c42f068a77de4a0767e512b Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Sun, 31 Dec 2023 09:42:45 -0500
Subject: [PATCH 054/113] feat(labels + segments): disable Done if duplicate
 name

---
 src/components/LabelControls.vue   | 18 +++++++++++++++---
 src/components/LabelEditor.vue     | 10 ++++++----
 src/components/SegmentEditor.vue   | 22 +++++++++++++++++++---
 src/components/SegmentList.vue     |  7 +++++++
 src/components/ToolLabelEditor.vue | 20 ++++++++------------
 5 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/components/LabelControls.vue b/src/components/LabelControls.vue
index c5e671ee2..d79708d57 100644
--- a/src/components/LabelControls.vue
+++ b/src/components/LabelControls.vue
@@ -6,6 +6,7 @@ import type { AnnotationTool } from '@/src/types/annotation-tool';
 import { Maybe } from '@/src/types';
 import ToolLabelEditor from '@/src/components/ToolLabelEditor.vue';
 import IsolatedDialog from '@/src/components/IsolatedDialog.vue';
+import { nonNullable } from '@/src/utils';
 
 const props = defineProps<{
   labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
@@ -42,6 +43,17 @@ const editingLabel = computed(() => {
   return props.labelsStore.labels[editingLabelID.value];
 });
 
+const invalidNames = computed(() => {
+  const names = new Set(
+    Object.values(props.labelsStore.labels)
+      .map(({ labelName }) => labelName)
+      .filter(nonNullable)
+  );
+  const currentName = editingLabel.value?.labelName;
+  if (currentName) names.delete(currentName); // allow current name
+  return names;
+});
+
 const makeUniqueName = (name: string) => {
   const existingNames = new Set(
     Object.values(props.labelsStore.labels).map((label) => label.labelName)
@@ -99,7 +111,7 @@ function deleteEditingLabel() {
         @create="createLabel"
       >
         <template #item-prepend="{ item }">
-          <!-- dot container keeps overflowing name from squishing dot width  -->
+          <!-- dot-container class keeps overflowing name from squishing dot width  -->
           <div class="dot-container mr-3">
             <div class="color-dot" :style="{ background: item.color }" />
           </div>
@@ -120,7 +132,7 @@ function deleteEditingLabel() {
   </v-card>
 
   <isolated-dialog v-model="editDialog" max-width="800px">
-    <ToolLabelEditor
+    <tool-label-editor
       v-if="editingLabelID"
       v-model:name="editState.labelName"
       v-model:stroke-width="editState.strokeWidth"
@@ -128,7 +140,7 @@ function deleteEditingLabel() {
       @delete="deleteEditingLabel"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
-      :labelsStore="labelsStore"
+      :invalidNames="invalidNames"
     />
   </isolated-dialog>
 </template>
diff --git a/src/components/LabelEditor.vue b/src/components/LabelEditor.vue
index 45ae4f0fe..b2535f29d 100644
--- a/src/components/LabelEditor.vue
+++ b/src/components/LabelEditor.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { toRefs } from 'vue';
+import { computed, toRefs } from 'vue';
 
 const emit = defineEmits(['done', 'cancel', 'delete', 'update:color']);
-const props = defineProps({
-  color: String,
+const props = defineProps<{ color: string; valid: boolean }>();
+const { color, valid } = toRefs(props);
+const doneDisabled = computed(() => {
+  return !valid.value;
 });
-const { color } = toRefs(props);
 
 const done = () => {
   emit('done');
@@ -40,6 +41,7 @@ const onDelete = () => {
               color="secondary"
               variant="elevated"
               @click="done"
+              :disabled="doneDisabled"
               data-testid="edit-label-done-button"
             >
               Done
diff --git a/src/components/SegmentEditor.vue b/src/components/SegmentEditor.vue
index 636aabdae..998df3b87 100644
--- a/src/components/SegmentEditor.vue
+++ b/src/components/SegmentEditor.vue
@@ -1,17 +1,32 @@
 <script setup lang="ts">
 import LabelEditor from '@/src/components/LabelEditor.vue';
+import { computed } from 'vue';
 
 defineEmits(['done', 'cancel', 'delete', 'update:name', 'update:color']);
 
-defineProps({
-  name: String,
-  color: String,
+const props = defineProps<{
+  name: string;
+  color: string;
+  invalidNames: Set<string>;
+}>();
+
+function isUniqueEditingName(name: string) {
+  return !props.invalidNames.has(name.trim());
+}
+
+function uniqueNameRule(name: string) {
+  return isUniqueEditingName(name) || 'Name is not unique';
+}
+
+const valid = computed(() => {
+  return isUniqueEditingName(props.name);
 });
 </script>
 
 <template>
   <label-editor
     :color="color"
+    :valid="valid"
     @update:color="$emit('update:color', $event)"
     @delete="$emit('delete')"
     @cancel="$emit('cancel')"
@@ -24,6 +39,7 @@ defineProps({
         :model-value="name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
+        :rules="[uniqueNameRule]"
       />
     </template>
   </label-editor>
diff --git a/src/components/SegmentList.vue b/src/components/SegmentList.vue
index b3a945a2b..d303bd41a 100644
--- a/src/components/SegmentList.vue
+++ b/src/components/SegmentList.vue
@@ -70,6 +70,12 @@ const editingSegment = computed(() => {
   if (editingSegmentValue.value == null) return null;
   return segmentGroupStore.getSegment(groupId.value, editingSegmentValue.value);
 });
+const invalidNames = computed(() => {
+  const names = new Set(segments.value.map((seg) => seg.name));
+  const currentName = editingSegment.value?.name;
+  if (currentName) names.delete(currentName); // allow current name
+  return names;
+});
 
 function startEditing(value: number) {
   editDialog.value = true;
@@ -145,6 +151,7 @@ function deleteEditingSegment() {
       @delete="deleteEditingSegment"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
+      :invalidNames="invalidNames"
     />
   </isolated-dialog>
 </template>
diff --git a/src/components/ToolLabelEditor.vue b/src/components/ToolLabelEditor.vue
index c1e72c307..cfa1ebb71 100644
--- a/src/components/ToolLabelEditor.vue
+++ b/src/components/ToolLabelEditor.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import LabelEditor from '@/src/components/LabelEditor.vue';
-import type { LabelsStore } from '../store/tools/useLabels';
-import type { AnnotationTool } from '../types/annotation-tool';
 
 defineEmits([
   'done',
@@ -17,28 +15,26 @@ const props = defineProps<{
   name: string;
   strokeWidth: number;
   color: string;
-  labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
+  invalidNames: Set<string>;
 }>();
 
-const existingNames = computed(
-  () =>
-    new Set(
-      Object.values(props.labelsStore.labels).map((label) => label.labelName)
-    )
-);
-
 function isUniqueEditingName(name: string) {
-  return !existingNames.value.has(name);
+  return !props.invalidNames.has(name.trim());
 }
 
 function uniqueNameRule(name: string) {
   return isUniqueEditingName(name) || 'Name is not unique';
 }
+
+const valid = computed(() => {
+  return isUniqueEditingName(props.name);
+});
 </script>
 
 <template>
   <label-editor
     :color="color"
+    :valid="valid"
     @update:color="$emit('update:color', $event)"
     @cancel="$emit('cancel')"
     @done="$emit('done')"
@@ -53,7 +49,7 @@ function uniqueNameRule(name: string) {
       <v-text-field
         label="Name"
         class="flex-grow-0"
-        :model-value="name"
+        :model-value="props.name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
         :rules="[uniqueNameRule]"

From 14c6f1ea0e14aa8e83de7f81a4aa719932a47646 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Fri, 1 Mar 2024 10:47:56 -0500
Subject: [PATCH 055/113] fix(App): keep query params on save url query param

Avoid dropping JSON or array query param arguments on the "save" query parameter
by parsing query params without casting to native types in vtkURLExtract.
---
 src/components/App.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index eea3df00c..1ee1462b3 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -201,9 +201,14 @@ export default defineComponent({
 
     // --- save state --- //
 
-    const remoteSaveStateStore = useRemoteSaveStateStore();
     if (import.meta.env.VITE_ENABLE_REMOTE_SAVE && urlParams.save) {
-      remoteSaveStateStore.setSaveUrl(urlParams.save.toString());
+      // Avoid dropping JSON or array query param arguments on the "save" query parameter
+      // by parsing query params without casting to native types in vtkURLExtract.
+      const queryParams = new URLSearchParams(window.location.search);
+      const saveUrl = queryParams.get('save');
+      if (saveUrl) {
+        useRemoteSaveStateStore().setSaveUrl(saveUrl);
+      }
     }
 
     // --- layout --- //

From 0b2c54c5629be5a93b4f722bc13bdb70a2fe3f68 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Mar 2024 17:49:52 -0400
Subject: [PATCH 056/113] chore(layers.e2e): add test layering 2 DICOMs

---
 src/components/LayerProperties.vue           |  1 +
 src/components/ModulePanel.vue               |  6 +-
 src/components/PatientStudyVolumeBrowser.vue |  2 +
 src/io/manifest.ts                           |  2 +-
 tests/pageobjects/volview.page.ts            | 12 ++++
 tests/specs/layers.e2e.ts                    | 60 ++++++++++++++++++++
 tests/specs/remote-manifest.e2e.ts           | 20 +------
 tests/specs/utils.ts                         | 35 ++++++++++++
 8 files changed, 117 insertions(+), 21 deletions(-)
 create mode 100644 tests/specs/layers.e2e.ts

diff --git a/src/components/LayerProperties.vue b/src/components/LayerProperties.vue
index ad9495aa1..7ecde1f2c 100644
--- a/src/components/LayerProperties.vue
+++ b/src/components/LayerProperties.vue
@@ -83,6 +83,7 @@ export default defineComponent({
       thumb-label
       :model-value="blendConfig.opacity"
       @update:model-value="setBlendConfig('opacity', $event)"
+      data-testid="layer-opacity-slider"
     />
   </div>
 </template>
diff --git a/src/components/ModulePanel.vue b/src/components/ModulePanel.vue
index 690bcb6c8..2e3d4ee6f 100644
--- a/src/components/ModulePanel.vue
+++ b/src/components/ModulePanel.vue
@@ -7,7 +7,11 @@
         icons-and-text
         show-arrows
       >
-        <v-tab v-for="item in Modules" :key="item.name">
+        <v-tab
+          v-for="item in Modules"
+          :key="item.name"
+          :data-testid="`module-tab-${item.name}`"
+        >
           <div class="tab-content">
             <span class="mb-0 mt-1 module-text">{{ item.name }}</span>
             <v-icon>mdi-{{ item.icon }}</v-icon>
diff --git a/src/components/PatientStudyVolumeBrowser.vue b/src/components/PatientStudyVolumeBrowser.vue
index e4be12c1c..7e21769fb 100644
--- a/src/components/PatientStudyVolumeBrowser.vue
+++ b/src/components/PatientStudyVolumeBrowser.vue
@@ -291,12 +291,14 @@ export default defineComponent({
                   size="x-small"
                   class="dataset-menu"
                   @click.stop
+                  data-testid="dataset-menu-button"
                 >
                   <v-menu activator="parent">
                     <v-list>
                       <v-list-item
                         v-if="volume.layerable"
                         @click.stop="volume.layerHandler()"
+                        data-testid="dataset-menu-layer-item"
                       >
                         <template v-if="volume.layerLoading">
                           <div style="margin: 0 auto">
diff --git a/src/io/manifest.ts b/src/io/manifest.ts
index d132a80aa..eb69f17c3 100644
--- a/src/io/manifest.ts
+++ b/src/io/manifest.ts
@@ -1,6 +1,6 @@
 import { z } from 'zod';
 
-const RemoteResource = z.object({
+export const RemoteResource = z.object({
   url: z.string(),
   name: z.optional(z.string()),
 });
diff --git a/tests/pageobjects/volview.page.ts b/tests/pageobjects/volview.page.ts
index ce04b4d23..1d1df733c 100644
--- a/tests/pageobjects/volview.page.ts
+++ b/tests/pageobjects/volview.page.ts
@@ -149,6 +149,18 @@ class VolViewPage extends Page {
   get editLabelModalDoneButton() {
     return $('button[data-testid="edit-label-done-button"]');
   }
+
+  get datasetMenuButtons() {
+    return $$('button[data-testid="dataset-menu-button"]');
+  }
+
+  get renderingModuleTab() {
+    return $('button[data-testid="module-tab-Rendering"]');
+  }
+
+  get layerOpacitySliders() {
+    return $$('div[data-testid="layer-opacity-slider"] input');
+  }
 }
 
 export const volViewPage = new VolViewPage();
diff --git a/tests/specs/layers.e2e.ts b/tests/specs/layers.e2e.ts
new file mode 100644
index 000000000..f1ecfc010
--- /dev/null
+++ b/tests/specs/layers.e2e.ts
@@ -0,0 +1,60 @@
+import { volViewPage } from '../pageobjects/volview.page';
+import { openUrls } from './utils';
+
+describe('Add Layer button', () => {
+  it('should create overlay with 2 DICOM images', async () => {
+    await openUrls([
+      {
+        url: 'https://data.kitware.com/api/v1/item/63527c7311dab8142820a338/download',
+        name: 'prostate.zip',
+      },
+      {
+        url: 'https://data.kitware.com/api/v1/item/6352a2b311dab8142820a33b/download',
+        name: 'MRA-Head_and_Neck.zip',
+      },
+    ]);
+
+    // Wait for both volumes to appear in list
+    await browser.waitUntil(
+      async () => {
+        const menus = await volViewPage.datasetMenuButtons;
+        return menus.length >= 2;
+      },
+      {
+        timeout: 30000,
+        timeoutMsg: `Expected 2 volumes to appear in list`,
+      }
+    );
+
+    const menus = await volViewPage.datasetMenuButtons;
+    await menus[0].click();
+    await browser.waitUntil(
+      async () => {
+        const addLayerButton = await $(
+          'div[data-testid="dataset-menu-layer-item"]'
+        );
+        return addLayerButton.isClickable();
+      },
+      { timeoutMsg: 'Expected clickable Add Layer button' }
+    );
+
+    const addLayerButton = await $(
+      'div[data-testid="dataset-menu-layer-item"]'
+    );
+    await addLayerButton.click();
+
+    const renderTab = await volViewPage.renderingModuleTab;
+    await renderTab.click();
+
+    // need to wait a little for layer section to render
+    await browser.waitUntil(
+      async function slidersExist() {
+        const layerOpacitySliders = await volViewPage.layerOpacitySliders;
+        return layerOpacitySliders.length > 0;
+      },
+      {
+        timeoutMsg: `Expected at least one layer opacity slider`,
+      }
+    );
+  });
+});
diff --git a/tests/specs/remote-manifest.e2e.ts b/tests/specs/remote-manifest.e2e.ts
index e76f282ee..fe0583f8c 100644
--- a/tests/specs/remote-manifest.e2e.ts
+++ b/tests/specs/remote-manifest.e2e.ts
@@ -1,23 +1,5 @@
-import * as path from 'path';
-import * as fs from 'fs';
-import { cleanuptotal } from 'wdio-cleanuptotal-service';
-import { TEMP_DIR } from '../../wdio.shared.conf';
 import { volViewPage } from '../pageobjects/volview.page';
-import { downloadFile } from './utils';
-
-async function writeManifestToFile(manifest: any, fileName: string) {
-  const filePath = path.join(TEMP_DIR, fileName);
-  await fs.promises.writeFile(filePath, JSON.stringify(manifest));
-  cleanuptotal.addCleanup(async () => {
-    fs.unlinkSync(filePath);
-  });
-  return filePath;
-}
-
-async function openVolViewPage(fileName: string) {
-  const urlParams = `?urls=[tmp/${fileName}]`;
-  await volViewPage.open(urlParams);
-}
+import { downloadFile, writeManifestToFile, openVolViewPage } from './utils';
 
 describe('VolView loading of remoteManifest.json', () => {
   it('should show error when there is no name and URL is malformed', async () => {
diff --git a/tests/specs/utils.ts b/tests/specs/utils.ts
index f48424353..dead29e7b 100644
--- a/tests/specs/utils.ts
+++ b/tests/specs/utils.ts
@@ -1,6 +1,10 @@
 import * as path from 'path';
 import * as fs from 'fs';
+import { z } from 'zod';
+import { cleanuptotal } from 'wdio-cleanuptotal-service';
 import { TEMP_DIR } from '../../wdio.shared.conf';
+import { volViewPage } from '../pageobjects/volview.page';
+import { RemoteResource } from '../../src/io/manifest';
 
 // File is not automatically deleted
 export const downloadFile = async (url: string, fileName: string) => {
@@ -13,3 +17,34 @@ export const downloadFile = async (url: string, fileName: string) => {
   }
   return savePath;
 };
+
+export async function writeManifestToFile(manifest: any, fileName: string) {
+  const filePath = path.join(TEMP_DIR, fileName);
+  await fs.promises.writeFile(filePath, JSON.stringify(manifest));
+  cleanuptotal.addCleanup(async () => {
+    fs.unlinkSync(filePath);
+  });
+  return filePath;
+}
+
+export async function openVolViewPage(fileName: string) {
+  const urlParams = `?urls=[tmp/${fileName}]`;
+  await volViewPage.open(urlParams);
+}
+
+type RemoteResourceType = z.infer<typeof RemoteResource> & { name: string };
+
+export async function openUrls(urlsAndNames: Array<RemoteResourceType>) {
+  await Promise.all(
+    urlsAndNames.map((resource) => downloadFile(resource.url, resource.name))
+  );
+
+  const resources = urlsAndNames.map(({ name }) => ({ url: `/tmp/${name}` }));
+  const manifest = {
+    resources,
+  };
+  const fileName = 'openUrlsManifest.json';
+  await writeManifestToFile(manifest, fileName);
+  await openVolViewPage(fileName);
+  await volViewPage.waitForViews();
+}

From b0a1b1550a3320c0b6e601a4355f0b4f7a3a03d5 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Thu, 14 Mar 2024 21:15:14 -0400
Subject: [PATCH 057/113] fix(useCurrentImage): pass DataSelection to layer
 store

Layering a DICOM dataset on another image/DICOM
did not work.
---
 src/composables/useCurrentImage.ts | 10 ++++++++--
 src/store/datasets.ts              |  9 +++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/composables/useCurrentImage.ts b/src/composables/useCurrentImage.ts
index 804b2745b..add2ccea8 100644
--- a/src/composables/useCurrentImage.ts
+++ b/src/composables/useCurrentImage.ts
@@ -14,7 +14,11 @@ import {
 } from '@/src/store/datasets-images';
 import { useLayersStore } from '@/src/store/datasets-layers';
 import { createLPSBounds, getAxisBounds } from '@/src/utils/lps';
-import { getImageID, useDatasetStore } from '@/src/store/datasets';
+import {
+  getDataSelection,
+  getImageID,
+  useDatasetStore,
+} from '@/src/store/datasets';
 import { storeToRefs } from 'pinia';
 
 export interface CurrentImageContext {
@@ -66,9 +70,11 @@ export function getIsImageLoading(imageID: Maybe<string>) {
 }
 
 export function getImageLayers(imageID: Maybe<string>) {
+  if (!imageID) return [];
+  const selection = getDataSelection(imageID);
   const layersStore = useLayersStore();
   return layersStore
-    .getLayers(imageID ? { type: 'image', dataID: imageID } : null)
+    .getLayers(selection)
     .filter(({ id }) => id in layersStore.layerImages);
 }
 
diff --git a/src/store/datasets.ts b/src/store/datasets.ts
index 4db700707..1eec010a6 100644
--- a/src/store/datasets.ts
+++ b/src/store/datasets.ts
@@ -63,6 +63,15 @@ export const getDataID = (imageID: string) => {
   return dicomStore.imageIDToVolumeKey[imageID] ?? imageID;
 };
 
+export const getDataSelection = (imageID: string) => {
+  const dicomStore = useDICOMStore();
+  const volumeKey = dicomStore.imageIDToVolumeKey[imageID];
+  if (volumeKey) {
+    return makeDICOMSelection(volumeKey);
+  }
+  return makeImageSelection(imageID);
+};
+
 // Pass VolumeKey or ImageID and get ImageID
 export const findImageID = (dataID: string) => {
   const dicomStore = useDICOMStore();

From 1d5e0df9e2e2e316efdb857388fd7f03bc05d093 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Sat, 16 Mar 2024 22:55:28 +0000
Subject: [PATCH 058/113] chore(deps): bump follow-redirects from 1.15.4 to
 1.15.6

Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.4 to 1.15.6.
- [Release notes](https://github.com/follow-redirects/follow-redirects/releases)
- [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.4...v1.15.6)

---
updated-dependencies:
- dependency-name: follow-redirects
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c16dd977c..550d51fb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11416,9 +11416,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -30835,9 +30835,9 @@
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw=="
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
     },
     "for-each": {
       "version": "0.3.3",

From 618d07fb2934b66c4c8e9880d453b287d93d8e67 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 25 Mar 2024 16:56:53 -0400
Subject: [PATCH 059/113] feat(load-data): prefer some DICOMs modalities as
 primary selection

The "base" DICOM modalties: 'CT', 'MR', 'DX', 'US'

Side effect: When an image and DICOM are loaded at same time, DICOM is always Primary Selection.
---
 src/io/import/importDataSources.ts | 19 ++++++++++---------
 src/store/load-data.ts             | 23 +++++++++++++++++++++--
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/io/import/importDataSources.ts b/src/io/import/importDataSources.ts
index 656192b6e..bdcd11f96 100644
--- a/src/io/import/importDataSources.ts
+++ b/src/io/import/importDataSources.ts
@@ -172,20 +172,21 @@ export type ImportDataSourcesResult = Awaited<
   ReturnType<typeof importDataSources>
 >[number];
 
-export function convertSuccessResultToDataSelection(
-  result: ImportDataSourcesResult
-) {
-  if (!isSelectable(result)) return null;
-
-  const { dataID, dataType } = result.data[0];
-
+export function toDataSelection(loadable: LoadableResult) {
+  const { dataID, dataType } = loadable;
   if (dataType === 'dicom') {
     return makeDICOMSelection(dataID);
   }
-
   if (dataType === 'image') {
     return makeImageSelection(dataID);
   }
-
   return null;
 }
+
+export function convertSuccessResultToDataSelection(
+  result: ImportDataSourcesResult
+) {
+  if (!isSelectable(result)) return null;
+
+  return toDataSelection(result.data[0]);
+}
diff --git a/src/store/load-data.ts b/src/store/load-data.ts
index c0533f346..e27e55388 100644
--- a/src/store/load-data.ts
+++ b/src/store/load-data.ts
@@ -2,9 +2,11 @@ import { partitionResults } from '@/src/core/pipeline';
 import { DataSource, getDataSourceName } from '@/src/io/import/dataSource';
 import {
   ImportDataSourcesResult,
-  convertSuccessResultToDataSelection,
   importDataSources,
+  toDataSelection,
 } from '@/src/io/import/importDataSources';
+import { isLoadableResult } from '@/src/io/import/common';
+import { useDICOMStore } from '@/src/store/datasets-dicom';
 import { useDatasetStore } from '@/src/store/datasets';
 import { useMessageStore } from '@/src/store/messages';
 import { Maybe } from '@/src/types';
@@ -15,6 +17,8 @@ import { useToast } from '@/src/composables/useToast';
 import { TYPE } from 'vue-toastification';
 import { ToastID, ToastOptions } from 'vue-toastification/dist/types/types';
 
+const BASE_MODALITY_TYPES = ['CT', 'MR', 'DX', 'US'];
+
 const NotificationMessages = {
   Loading: 'Loading datasets...',
   Done: 'Datasets loaded!',
@@ -132,7 +136,22 @@ const useLoadDataStore = defineStore('loadData', () => {
     const [succeeded, errored] = partitionResults(results);
 
     if (!dataStore.primarySelection && succeeded.length) {
-      const selection = convertSuccessResultToDataSelection(succeeded[0]);
+      const loadableDataSources = succeeded.flatMap((result) => {
+        return result.data.filter(isLoadableResult);
+      });
+      // pick dicom dataset as primary selection if available
+      const dicoms = loadableDataSources.filter(
+        ({ dataType }) => dataType === 'dicom'
+      );
+      const dicomStore = useDICOMStore();
+      // prefer some modalities as primary selection
+      const baseDicom = dicoms.find((dicomSource) => {
+        const volumeInfo = dicomStore.volumeInfo[dicomSource.dataID];
+        const modality = volumeInfo?.Modality;
+        return BASE_MODALITY_TYPES.includes(modality);
+      });
+      const primaryDataset = baseDicom ?? loadableDataSources[0];
+      const selection = toDataSelection(primaryDataset);
       if (selection) {
         dataStore.setPrimarySelection(selection);
       }

From 5cba3d919f4114c15106414ec552f7731b3f2e22 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 25 Mar 2024 17:33:02 -0400
Subject: [PATCH 060/113] refactor(load-data): factor out dataset picking logic

---
 src/store/load-data.ts | 48 +++++++++++++++++++++++++++---------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/store/load-data.ts b/src/store/load-data.ts
index e27e55388..8dd7d8b9c 100644
--- a/src/store/load-data.ts
+++ b/src/store/load-data.ts
@@ -1,11 +1,15 @@
-import { partitionResults } from '@/src/core/pipeline';
+import { PipelineResultSuccess, partitionResults } from '@/src/core/pipeline';
 import { DataSource, getDataSourceName } from '@/src/io/import/dataSource';
 import {
   ImportDataSourcesResult,
   importDataSources,
   toDataSelection,
 } from '@/src/io/import/importDataSources';
-import { isLoadableResult } from '@/src/io/import/common';
+import {
+  ImportResult,
+  LoadableResult,
+  isLoadableResult,
+} from '@/src/io/import/common';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
 import { useDatasetStore } from '@/src/store/datasets';
 import { useMessageStore } from '@/src/store/messages';
@@ -107,6 +111,30 @@ function useLoadingNotifications() {
   };
 }
 
+function pickBaseDicom(loadableDataSources: Array<LoadableResult>) {
+  // pick dicom dataset as primary selection if available
+  const dicoms = loadableDataSources.filter(
+    ({ dataType }) => dataType === 'dicom'
+  );
+  // prefer some modalities as base
+  const dicomStore = useDICOMStore();
+  return dicoms.find((dicomSource) => {
+    const volumeInfo = dicomStore.volumeInfo[dicomSource.dataID];
+    const modality = volumeInfo?.Modality;
+    return BASE_MODALITY_TYPES.includes(modality);
+  });
+}
+
+function pickBaseDataset(
+  succeeded: Array<PipelineResultSuccess<ImportResult>>
+) {
+  const loadableDataSources = succeeded.flatMap((result) => {
+    return result.data.filter(isLoadableResult);
+  });
+  const baseDicom = pickBaseDicom(loadableDataSources);
+  return baseDicom ?? loadableDataSources[0];
+}
+
 const useLoadDataStore = defineStore('loadData', () => {
   const { startLoading, stopLoading, setError, isLoading } =
     useLoadingNotifications();
@@ -136,21 +164,7 @@ const useLoadDataStore = defineStore('loadData', () => {
     const [succeeded, errored] = partitionResults(results);
 
     if (!dataStore.primarySelection && succeeded.length) {
-      const loadableDataSources = succeeded.flatMap((result) => {
-        return result.data.filter(isLoadableResult);
-      });
-      // pick dicom dataset as primary selection if available
-      const dicoms = loadableDataSources.filter(
-        ({ dataType }) => dataType === 'dicom'
-      );
-      const dicomStore = useDICOMStore();
-      // prefer some modalities as primary selection
-      const baseDicom = dicoms.find((dicomSource) => {
-        const volumeInfo = dicomStore.volumeInfo[dicomSource.dataID];
-        const modality = volumeInfo?.Modality;
-        return BASE_MODALITY_TYPES.includes(modality);
-      });
-      const primaryDataset = baseDicom ?? loadableDataSources[0];
+      const primaryDataset = pickBaseDataset(succeeded);
       const selection = toDataSelection(primaryDataset);
       if (selection) {
         dataStore.setPrimarySelection(selection);

From 42824349e48f84ea4edd0a0e8d13e615c21e369b Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 25 Mar 2024 18:30:32 -0400
Subject: [PATCH 061/113] feat(load-data): layer PT modalities on CT DICOMs

---
 src/store/load-data.ts | 51 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/store/load-data.ts b/src/store/load-data.ts
index 8dd7d8b9c..7d72cb719 100644
--- a/src/store/load-data.ts
+++ b/src/store/load-data.ts
@@ -20,6 +20,7 @@ import { computed, ref, watch } from 'vue';
 import { useToast } from '@/src/composables/useToast';
 import { TYPE } from 'vue-toastification';
 import { ToastID, ToastOptions } from 'vue-toastification/dist/types/types';
+import { useLayersStore } from './datasets-layers';
 
 const BASE_MODALITY_TYPES = ['CT', 'MR', 'DX', 'US'];
 
@@ -125,16 +126,57 @@ function pickBaseDicom(loadableDataSources: Array<LoadableResult>) {
   });
 }
 
-function pickBaseDataset(
+function pickLoadableDataSources(
   succeeded: Array<PipelineResultSuccess<ImportResult>>
 ) {
-  const loadableDataSources = succeeded.flatMap((result) => {
+  return succeeded.flatMap((result) => {
     return result.data.filter(isLoadableResult);
   });
+}
+
+function pickBaseDataSource(
+  succeeded: Array<PipelineResultSuccess<ImportResult>>
+) {
+  const loadableDataSources = pickLoadableDataSources(succeeded);
   const baseDicom = pickBaseDicom(loadableDataSources);
   return baseDicom ?? loadableDataSources[0];
 }
 
+function getStudyUID(volumeID: string) {
+  const dicomStore = useDICOMStore();
+  const studyKey = dicomStore.volumeStudy[volumeID];
+  return dicomStore.studyInfo[studyKey].StudyInstanceUID;
+}
+
+function loadLayers(
+  primaryDataSource: LoadableResult,
+  succeeded: Array<PipelineResultSuccess<ImportResult>>
+) {
+  if (primaryDataSource.dataType !== 'dicom') return;
+  const dicomDataSources = pickLoadableDataSources(succeeded).filter(
+    ({ dataType }) => dataType === 'dicom'
+  );
+  const studyID = getStudyUID(primaryDataSource.dataID);
+  const otherVolumesInStudy = dicomDataSources.filter((ds) => {
+    const studyUID = getStudyUID(ds.dataID);
+    return studyUID === studyID && ds.dataID !== primaryDataSource.dataID;
+  });
+  const dicomStore = useDICOMStore();
+  const primaryModality =
+    dicomStore.volumeInfo[primaryDataSource.dataID].Modality;
+  // Look for one PET volume to layer with CT.  Only one as there are often multiple "White Balance" corrected PET volumes.
+  const toLayer = otherVolumesInStudy.find((ds) => {
+    const otherModality = dicomStore.volumeInfo[ds.dataID].Modality;
+    return primaryModality === 'CT' && otherModality === 'PT';
+  });
+  if (!toLayer) return;
+
+  const primarySelection = toDataSelection(primaryDataSource)!;
+  const layersStore = useLayersStore();
+  const layerSelection = toDataSelection(toLayer)!;
+  layersStore.addLayer(primarySelection, layerSelection);
+}
+
 const useLoadDataStore = defineStore('loadData', () => {
   const { startLoading, stopLoading, setError, isLoading } =
     useLoadingNotifications();
@@ -164,10 +206,11 @@ const useLoadDataStore = defineStore('loadData', () => {
     const [succeeded, errored] = partitionResults(results);
 
     if (!dataStore.primarySelection && succeeded.length) {
-      const primaryDataset = pickBaseDataset(succeeded);
-      const selection = toDataSelection(primaryDataset);
+      const primaryDataSource = pickBaseDataSource(succeeded);
+      const selection = toDataSelection(primaryDataSource);
       if (selection) {
         dataStore.setPrimarySelection(selection);
+        loadLayers(primaryDataSource, succeeded);
       }
     }
 

From c19f84847342052421cdee24e175ede6189701d4 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 25 Mar 2024 19:24:36 -0400
Subject: [PATCH 062/113] fix(datasets-layers): remove failed layer from
 parent's layer list

If there was an error loading a layer's image, the GUI spinner would
keep spinning forever.
---
 src/store/datasets-layers.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/store/datasets-layers.ts b/src/store/datasets-layers.ts
index 880a68da4..a76256294 100644
--- a/src/store/datasets-layers.ts
+++ b/src/store/datasets-layers.ts
@@ -76,6 +76,9 @@ export const useLayersStore = defineStore('layer', () => {
       [parent, source].map(getImage)
     );
 
+    if (!sourceImage) {
+      throw new Error('Failed to load layer image');
+    }
     if (
       !vtkBoundingBox.intersects(
         parentImage.getBounds(),
@@ -110,9 +113,18 @@ export const useLayersStore = defineStore('layer', () => {
     parent: DataSelection,
     source: DataSelection
   ) {
-    return useErrorMessage('Failed to build layer', () =>
-      this._addLayer(parent, source)
-    );
+    return useErrorMessage('Failed to build layer', async () => {
+      try {
+        await this._addLayer(parent, source);
+      } catch (error) {
+        // remove failed layer from parent's layer list
+        const parentKey = toDataSelectionKey(parent);
+        this.parentToLayers[parentKey] = this.parentToLayers[parentKey]?.filter(
+          ({ selection }) => !selectionEquals(selection, source)
+        );
+        throw error;
+      }
+    });
   }
 
   function deleteLayer(

From a211f35f5333ba6b6a54e185e79e17a395e5be0c Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 20 Feb 2024 17:22:17 -0500
Subject: [PATCH 063/113] feat: replace proxies

---
 package-lock.json                             | 153 +++++++-----
 package.json                                  |   4 +-
 src/components/LayoutGrid.vue                 |   2 +
 src/components/SliceVolumeViewer.vue          | 109 +++++++++
 src/components/VolumeRendering.vue            |  13 +-
 src/components/VolumeViewer.vue               |  69 ++++++
 src/components/VtkTwoView.vue                 |  13 +-
 .../vtk/VtkBaseSliceRepresentation.vue        |  60 +++++
 .../vtk/VtkBaseVolumeRepresentation.vue       | 148 ++++++++++++
 .../vtk/VtkLayerSliceRepresentation.vue       | 103 ++++++++
 .../VtkSegmentationSliceRepresentation.vue    | 119 +++++++++
 src/components/vtk/VtkSliceView.vue           | 161 +++++++++++++
 src/components/vtk/VtkVolumeView.vue          | 112 +++++++++
 src/components/vtk/context.ts                 |   4 +
 src/composables/isViewAnimating.ts            |  13 +
 src/composables/onPausableVTKEvent.ts         |  50 ++++
 src/composables/onVTKEvent.ts                 |  20 +-
 src/composables/useAutoFitState.ts            |  13 +
 src/composables/useCameraOrientation.ts       |  13 +-
 src/composables/useColoringEffectNew.ts       | 103 ++++++++
 src/composables/useLayerConfigInitializer.ts  |  22 ++
 src/composables/usePersistCameraConfigNew.ts  |  62 +++++
 src/composables/useSliceConfigInitializer.ts  |  60 +++--
 src/composables/useViewAnimationListener.ts   |  30 +++
 .../useVolumeColoringInitializer.ts           |  27 +++
 src/composables/useWindowingConfig.ts         |   2 +-
 .../useWindowingConfigInitializer.ts          |  67 +++---
 src/core/vtk/types.ts                         |   3 +
 .../vtk/useMouseRangeManipulatorListener.ts   |  54 +++++
 src/core/vtk/useSliceRepresentation.ts        |  21 ++
 src/core/vtk/useVolumeRepresentation.ts       |  21 ++
 src/core/vtk/useVtkInteractionManipulator.ts  |  57 +++++
 src/core/vtk/useVtkInteractorStyle.ts         |  25 ++
 src/core/vtk/useVtkRepresentation.ts          |  67 ++++++
 src/core/vtk/useVtkView.ts                    | 130 ++++++++++
 src/core/vtk/vtkFieldRef.ts                   |  71 ++++++
 src/shims-vtk.d.ts                            |  20 ++
 src/store/view-animation.ts                   |  75 ++++++
 src/store/view-configs/volume-coloring.ts     |   2 +
 src/types/index.ts                            |   4 +
 src/types/vtk-types.ts                        |   7 +
 src/utils/camera.ts                           | 112 +++++++++
 src/utils/guardedWritableRef.ts               |  16 ++
 src/utils/volumeProperties.ts                 | 225 ++++++++++++++++++
 src/utils/vtk-helpers.ts                      |  60 ++++-
 src/utils/watchCompare.ts                     |  75 ++++++
 46 files changed, 2433 insertions(+), 164 deletions(-)
 create mode 100644 src/components/SliceVolumeViewer.vue
 create mode 100644 src/components/VolumeViewer.vue
 create mode 100644 src/components/vtk/VtkBaseSliceRepresentation.vue
 create mode 100644 src/components/vtk/VtkBaseVolumeRepresentation.vue
 create mode 100644 src/components/vtk/VtkLayerSliceRepresentation.vue
 create mode 100644 src/components/vtk/VtkSegmentationSliceRepresentation.vue
 create mode 100644 src/components/vtk/VtkSliceView.vue
 create mode 100644 src/components/vtk/VtkVolumeView.vue
 create mode 100644 src/components/vtk/context.ts
 create mode 100644 src/composables/onPausableVTKEvent.ts
 create mode 100644 src/composables/useAutoFitState.ts
 create mode 100644 src/composables/useColoringEffectNew.ts
 create mode 100644 src/composables/useLayerConfigInitializer.ts
 create mode 100644 src/composables/usePersistCameraConfigNew.ts
 create mode 100644 src/composables/useViewAnimationListener.ts
 create mode 100644 src/composables/useVolumeColoringInitializer.ts
 create mode 100644 src/core/vtk/types.ts
 create mode 100644 src/core/vtk/useMouseRangeManipulatorListener.ts
 create mode 100644 src/core/vtk/useSliceRepresentation.ts
 create mode 100644 src/core/vtk/useVolumeRepresentation.ts
 create mode 100644 src/core/vtk/useVtkInteractionManipulator.ts
 create mode 100644 src/core/vtk/useVtkInteractorStyle.ts
 create mode 100644 src/core/vtk/useVtkRepresentation.ts
 create mode 100644 src/core/vtk/useVtkView.ts
 create mode 100644 src/core/vtk/vtkFieldRef.ts
 create mode 100644 src/store/view-animation.ts
 create mode 100644 src/utils/camera.ts
 create mode 100644 src/utils/guardedWritableRef.ts
 create mode 100644 src/utils/volumeProperties.ts
 create mode 100644 src/utils/watchCompare.ts

diff --git a/package-lock.json b/package-lock.json
index c90332843..a71959e89 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,11 +15,11 @@
         "@kitware/vtk.js": "^28.13.0",
         "@netlify/edge-functions": "^2.0.0",
         "@sentry/vue": "^7.54.0",
-        "@vueuse/core": "^8.5.0",
-        "@vueuse/shared": "^9.2.0",
+        "@vueuse/core": "^10.7.0",
         "core-js": "3.22.5",
         "deep-equal": "^2.0.5",
         "dicomweb-client-typed": "^0.8.6",
+        "fast-deep-equal": "^3.1.3",
         "file-saver": "^2.0.5",
         "gl-matrix": "3.4.3",
         "itk-wasm": "1.0.0-b.156",
@@ -4805,9 +4805,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "node_modules/@types/which": {
       "version": "2.0.2",
@@ -5427,73 +5427,88 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
-      "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.9.4",
-        "@vueuse/shared": "8.9.4",
-        "vue-demi": "*"
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        },
-        "vue": {
-          "optional": true
-        }
       }
     },
-    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
-      "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
-      "dependencies": {
-        "vue-demi": "*"
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
       "peerDependencies": {
-        "@vue/composition-api": "^1.1.0",
-        "vue": "^2.6.0 || ^3.2.0"
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
       },
       "peerDependenciesMeta": {
         "@vue/composition-api": {
           "optional": true
-        },
-        "vue": {
-          "optional": true
         }
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
-      "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.5.0.tgz",
-      "integrity": "sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
       "dependencies": {
-        "vue-demi": "*"
+        "vue-demi": ">=0.14.6"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@wdio/cli": {
       "version": "8.32.3",
       "resolved": "https://registry.npmjs.org/@wdio/cli/-/cli-8.32.3.tgz",
@@ -25880,9 +25895,9 @@
       "dev": true
     },
     "@types/web-bluetooth": {
-      "version": "0.0.14",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
-      "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
     "@types/which": {
       "version": "2.0.2",
@@ -26346,37 +26361,43 @@
       }
     },
     "@vueuse/core": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
-      "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.7.2.tgz",
+      "integrity": "sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.14",
-        "@vueuse/metadata": "8.9.4",
-        "@vueuse/shared": "8.9.4",
-        "vue-demi": "*"
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.7.2",
+        "@vueuse/shared": "10.7.2",
+        "vue-demi": ">=0.14.6"
       },
       "dependencies": {
-        "@vueuse/shared": {
-          "version": "8.9.4",
-          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
-          "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
-          "requires": {
-            "vue-demi": "*"
-          }
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
         }
       }
     },
     "@vueuse/metadata": {
-      "version": "8.9.4",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
-      "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.7.2.tgz",
+      "integrity": "sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ=="
     },
     "@vueuse/shared": {
-      "version": "9.5.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.5.0.tgz",
-      "integrity": "sha512-HnnCWU1Vg9CVWRCcI8ohDKDRB2Sc4bTgT1XAIaoLSfVHHn+TKbrox6pd3klCSw4UDxkhDfOk8cAdcK+Z5KleCA==",
+      "version": "10.7.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.7.2.tgz",
+      "integrity": "sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==",
       "requires": {
-        "vue-demi": "*"
+        "vue-demi": ">=0.14.6"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
+        }
       }
     },
     "@wdio/cli": {
diff --git a/package.json b/package.json
index 319416aec..50fea5e98 100644
--- a/package.json
+++ b/package.json
@@ -31,11 +31,11 @@
     "@kitware/vtk.js": "^28.13.0",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
-    "@vueuse/core": "^8.5.0",
-    "@vueuse/shared": "^9.2.0",
+    "@vueuse/core": "^10.7.0",
     "core-js": "3.22.5",
     "deep-equal": "^2.0.5",
     "dicomweb-client-typed": "^0.8.6",
+    "fast-deep-equal": "^3.1.3",
     "file-saver": "^2.0.5",
     "gl-matrix": "3.4.3",
     "itk-wasm": "1.0.0-b.156",
diff --git a/src/components/LayoutGrid.vue b/src/components/LayoutGrid.vue
index 659f694df..ea161001f 100644
--- a/src/components/LayoutGrid.vue
+++ b/src/components/LayoutGrid.vue
@@ -11,6 +11,7 @@
           :is="item.component"
           :key="item.id"
           :id="item.id"
+          :type="item.viewType"
           v-bind="item.props"
         />
       </div>
@@ -52,6 +53,7 @@ export default defineComponent({
           return {
             type: 'view',
             id: item,
+            viewType: spec.viewType,
             component: ViewTypeToComponent[spec.viewType],
             props: spec.props,
           };
diff --git a/src/components/SliceVolumeViewer.vue b/src/components/SliceVolumeViewer.vue
new file mode 100644
index 000000000..6660569df
--- /dev/null
+++ b/src/components/SliceVolumeViewer.vue
@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="vtk-container-wrapper"
+    tabindex="0"
+    @pointerenter="hover = true"
+    @pointerleave="hover = false"
+    @focusin="hover = true"
+    @focusout="hover = false"
+  >
+    <div class="vtk-gutter">
+      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
+        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
+        <v-tooltip
+          location="right"
+          activator="parent"
+          transition="slide-x-transition"
+        >
+          Reset Camera
+        </v-tooltip>
+      </v-btn>
+    </div>
+    <div class="vtk-container" data-testid="two-view-container">
+      <div class="vtk-sub-container">
+        <vtk-slice-view
+          class="vtk-view"
+          ref="vtkView"
+          data-testid="vtk-view vtk-two-view"
+          :view-id="id"
+          :image-id="currentImageID"
+          :view-direction="viewDirection"
+          :view-up="viewUp"
+        >
+          <vtk-base-slice-representation
+            :view-id="id"
+            :image-id="currentImageID"
+            :axis="viewAxis"
+          ></vtk-base-slice-representation>
+          <vtk-segmentation-slice-representation
+            v-for="segId in segmentations"
+            :key="`seg-${segId}`"
+            :view-id="id"
+            :segmentation-id="segId"
+            :axis="viewAxis"
+          ></vtk-segmentation-slice-representation>
+          <template v-if="currentImageID">
+            <vtk-layer-slice-representation
+              v-for="layer in currentLayers"
+              :key="`layer-${layer.id}`"
+              :view-id="id"
+              :layer-id="layer.id"
+              :parent-id="currentImageID"
+              :axis="viewAxis"
+            ></vtk-layer-slice-representation>
+          </template>
+          <slot></slot>
+        </vtk-slice-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed } from 'vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { LPSAxisDir } from '@/src/types/lps';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import VtkBaseSliceRepresentation from '@/src/components/vtk/VtkBaseSliceRepresentation.vue';
+import VtkSegmentationSliceRepresentation from '@/src/components/vtk/VtkSegmentationSliceRepresentation.vue';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import VtkLayerSliceRepresentation from '@/src/components/vtk/VtkLayerSliceRepresentation.vue';
+
+interface Props {
+  id: string;
+  viewType: string;
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+}
+
+const vtkView = ref<VtkViewApi>();
+
+const props = defineProps<Props>();
+
+const { viewDirection, viewUp } = toRefs(props);
+const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+
+const hover = ref(false);
+
+function resetCamera() {
+  if (!vtkView.value) return;
+  vtkView.value.resetCamera();
+}
+
+// base image
+const { currentImageID, currentLayers } = useCurrentImage();
+
+// segmentations
+const segmentations = computed(() => {
+  if (!currentImageID.value) return [];
+  const store = useSegmentGroupStore();
+  return store.orderByParent[currentImageID.value];
+});
+
+// TODO selection points to bounding box
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
+<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/VolumeRendering.vue b/src/components/VolumeRendering.vue
index 0e71385f2..44d84465a 100644
--- a/src/components/VolumeRendering.vue
+++ b/src/components/VolumeRendering.vue
@@ -15,6 +15,7 @@ import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/C
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import useViewAnimationStore from '@/src/store/view-animation';
 import { useResizeObserver } from '../composables/useResizeObserver';
 import { useCurrentImage } from '../composables/useCurrentImage';
 import useVolumeColoringStore from '../store/view-configs/volume-coloring';
@@ -23,8 +24,6 @@ import {
   getShiftedOpacityFromPreset,
 } from '../utils/vtk-helpers';
 import { useVolumeThumbnailing } from '../composables/useVolumeThumbnailing';
-import { useViewProxy } from '../composables/useViewProxy';
-import { ViewProxyType } from '../core/proxies';
 import { InitViewIDs } from '../config';
 
 const WIDGET_WIDTH = 250;
@@ -133,21 +132,21 @@ export default defineComponent({
     onVTKEvent(pwfWidget, 'onOpacityChange', updateOpacityFunc);
 
     // trigger 3D view animations when updating the opacity widget
-    const { viewProxy } = useViewProxy(TARGET_VIEW_ID, ViewProxyType.Volume);
+    const viewAnimationStore = useViewAnimationStore();
     let animationRequested = false;
 
     const request3DAnimation = () => {
       if (!animationRequested) {
         animationRequested = true;
-        viewProxy.value.getInteractor().requestAnimation(pwfWidget);
+        viewAnimationStore.requestAnimation(pwfWidget, {
+          byViewType: ['3D'],
+        });
       }
     };
 
     const cancel3DAnimation = () => {
       animationRequested = false;
-      viewProxy.value
-        .getInteractor()
-        .cancelAnimation(pwfWidget, true /* skipWarning */);
+      viewAnimationStore.cancelAnimation(pwfWidget);
     };
 
     onVTKEvent(pwfWidget, 'onAnimation', (animating: boolean) => {
diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
new file mode 100644
index 000000000..3f8688447
--- /dev/null
+++ b/src/components/VolumeViewer.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="vtk-container-wrapper" tabindex="0">
+    <div class="vtk-gutter">
+      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
+        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
+        <v-tooltip
+          location="right"
+          activator="parent"
+          transition="slide-x-transition"
+        >
+          Reset Camera
+        </v-tooltip>
+      </v-btn>
+    </div>
+    <div class="vtk-container" data-testid="two-view-container">
+      <div class="vtk-sub-container">
+        <vtk-volume-view
+          class="vtk-view"
+          ref="vtkView"
+          data-testid="vtk-view vtk-two-view"
+          :view-id="id"
+          :image-id="currentImageID"
+          :view-direction="viewDirection"
+          :view-up="viewUp"
+        >
+          <vtk-base-volume-representation
+            :view-id="id"
+            :view-type="type"
+            :image-id="currentImageID"
+          ></vtk-base-volume-representation>
+          <slot></slot>
+        </vtk-volume-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { LPSAxisDir } from '@/src/types/lps';
+import VtkVolumeView from '@/src/components/vtk/VtkVolumeView.vue';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import VtkBaseVolumeRepresentation from '@/src/components/vtk/VtkBaseVolumeRepresentation.vue';
+
+interface Props {
+  id: string;
+  type: string;
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+}
+
+const vtkView = ref<VtkViewApi>();
+
+const props = defineProps<Props>();
+
+const { viewDirection, viewUp } = toRefs(props);
+
+function resetCamera() {
+  if (!vtkView.value) return;
+  vtkView.value.resetCamera();
+}
+
+// base image
+const { currentImageID } = useCurrentImage();
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
+<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
index 32a1a42ef..fb21677cd 100644
--- a/src/components/VtkTwoView.vue
+++ b/src/components/VtkTwoView.vue
@@ -258,18 +258,7 @@ export default defineComponent({
 
     // --- initializers --- //
 
-    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);
+    useSliceConfigInitializer(viewID, curImageID, viewDirection);
     useWindowingConfigInitializer(viewID, curImageID);
 
     // --- view proxy setup --- //
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
new file mode 100644
index 000000000..9d89667a1
--- /dev/null
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { toRefs, watchEffect, inject } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { LPSAxis } from '@/src/types/lps';
+import { syncRefs } from '@vueuse/core';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  axis: LPSAxis;
+}
+
+const props = defineProps<Props>();
+const { viewId: viewID, imageId: imageID, axis } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const { metadata: imageMetadata, imageData } = useImage(imageID);
+
+// bind slice and window configs
+const sliceConfig = useSliceConfig(viewID, imageID);
+const wlConfig = useWindowingConfig(viewID, imageID);
+
+// setup base image
+const sliceRep = useSliceRepresentation(view, imageData);
+
+// set slice ordering to be in the back
+sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
+sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
+
+// set slicing mode
+watchEffect(() => {
+  const { lpsOrientation } = imageMetadata.value;
+  const ijkIndex = lpsOrientation[axis.value];
+  const mode = [SlicingMode.I, SlicingMode.J, SlicingMode.K][ijkIndex];
+  sliceRep.mapper.setSlicingMode(mode);
+});
+
+// sync slicing
+const slice = vtkFieldRef(sliceRep.mapper, 'slice');
+syncRefs(sliceConfig.slice, slice, { immediate: true });
+
+// sync windowing
+const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
+const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
+syncRefs(wlConfig.level, colorLevel, { immediate: true });
+syncRefs(wlConfig.width, colorWindow, { immediate: true });
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
new file mode 100644
index 000000000..1f73306d1
--- /dev/null
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { toRefs, computed, inject, watchEffect } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useVolumeRepresentation } from '@/src/core/vtk/useVolumeRepresentation';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useColoringEffect } from '@/src/composables/useColoringEffectNew';
+import useVolumeColoringStore, {
+  DEFAULT_AMBIENT,
+  DEFAULT_DIFFUSE,
+  DEFAULT_SPECULAR,
+  DEFAULT_EDGE_GRADIENT,
+  DEFAULT_SAMPLING_DISTANCE,
+} from '@/src/store/view-configs/volume-coloring';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import { useVolumeColoringInitializer } from '@/src/composables/useVolumeColoringInitializer';
+import { isViewAnimatingNew as isViewAnimating } from '@/src/composables/isViewAnimating';
+import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/VolumeProperty/Constants';
+import {
+  setEdgeGradient,
+  setSamplingDistance,
+  setCinematicLighting,
+  setCinematicLocalAmbientOcclusion,
+  setCinematicVolumeSampling,
+  setCinematicVolumeScatter,
+  setCinematicVolumeShading,
+} from '@/src/utils/volumeProperties';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+
+interface Props {
+  viewId: string;
+  viewType: string;
+  imageId: Maybe<string>;
+}
+
+const props = defineProps<Props>();
+const { viewId: viewID, imageId: imageID, viewType } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+useViewAnimationListener(view, viewID, viewType);
+
+const { imageData, metadata: imageMetadata } = useImage(imageID);
+const coloringConfig = computed(() =>
+  useVolumeColoringStore().getConfig(viewID.value, imageID.value)
+);
+
+// setup base image
+const rep = useVolumeRepresentation(view, imageData);
+
+const cfun = vtkColorTransferFunction.newInstance();
+const ofun = vtkPiecewiseFunction.newInstance();
+rep.property.setRGBTransferFunction(0, cfun);
+rep.property.setScalarOpacity(0, ofun);
+rep.property.setShade(true);
+rep.property.setInterpolationType(InterpolationType.LINEAR);
+rep.property.setAmbient(DEFAULT_AMBIENT);
+rep.property.setDiffuse(DEFAULT_DIFFUSE);
+rep.property.setSpecular(DEFAULT_SPECULAR);
+
+[cfun, ofun].forEach((obj: vtkObject) => {
+  onVTKEvent(obj, 'onModified', view.requestRender);
+});
+
+// set initial edge gradient + sampling distance
+watchEffect(() => {
+  if (!imageData.value) return;
+  const dataArray = imageData.value.getPointData().getScalars();
+  setEdgeGradient(rep.property, DEFAULT_EDGE_GRADIENT, dataArray);
+  setSamplingDistance(rep.mapper, DEFAULT_SAMPLING_DISTANCE, imageData.value);
+});
+
+// cinematic volume rendering
+const cvrParams = computed(() => coloringConfig.value?.cvr);
+const center = computed(() =>
+  vtkBoundingBox.getCenter(imageMetadata.value.worldBounds)
+);
+const isAnimating = isViewAnimating(view);
+
+watchEffect(() => {
+  const image = imageData.value;
+  if (!cvrParams.value || !image) return;
+
+  const {
+    enabled,
+    lightFollowsCamera,
+    ambient,
+    diffuse,
+    specular,
+    volumetricScatteringBlending,
+    volumeQuality,
+    useLocalAmbientOcclusion,
+    useVolumetricScatteringBlending,
+    laoKernelRadius,
+    laoKernelSize,
+  } = cvrParams.value;
+  const { property, mapper } = rep;
+
+  setCinematicLighting({
+    enabled,
+    renderer: view.renderer,
+    lightFollowsCamera,
+    center: center.value,
+  });
+  setCinematicVolumeShading({
+    enabled,
+    image,
+    ambient,
+    diffuse,
+    specular,
+    property,
+  });
+  setCinematicVolumeScatter({
+    enabled: enabled && useVolumetricScatteringBlending,
+    mapper,
+    blending: volumetricScatteringBlending,
+  });
+  setCinematicVolumeSampling({
+    enabled,
+    image,
+    mapper,
+    quality: volumeQuality,
+    isAnimating: isAnimating.value,
+  });
+  setCinematicLocalAmbientOcclusion({
+    enabled: enabled && useLocalAmbientOcclusion,
+    kernelRadius: laoKernelRadius,
+    kernelSize: laoKernelSize,
+    mapper,
+  });
+
+  view.requestRender();
+});
+
+// apply coloring
+useVolumeColoringInitializer(viewID, imageID);
+
+useColoringEffect(coloringConfig, cfun, ofun);
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/components/vtk/VtkLayerSliceRepresentation.vue b/src/components/vtk/VtkLayerSliceRepresentation.vue
new file mode 100644
index 000000000..882981dcf
--- /dev/null
+++ b/src/components/vtk/VtkLayerSliceRepresentation.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { toRefs, watchEffect, inject, computed } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+import { LPSAxis } from '@/src/types/lps';
+import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { syncRef } from '@vueuse/core';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { LayerID, useLayersStore } from '@/src/store/datasets-layers';
+import useLayerColoringStore from '@/src/store/view-configs/layers';
+import { useLayerConfigInitializer } from '@/src/composables/useLayerConfigInitializer';
+import { applyColoring } from '@/src/composables/useColoringEffectNew';
+
+interface Props {
+  viewId: string;
+  layerId: LayerID;
+  parentId: string;
+  axis: LPSAxis;
+}
+
+const props = defineProps<Props>();
+const { viewId, layerId, parentId, axis } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const coloringStore = useLayerColoringStore();
+const coloringConfig = computed(() =>
+  coloringStore.getConfig(viewId.value, layerId.value)
+);
+
+// setup slice rep
+const layerStore = useLayersStore();
+const imageData = computed(() => layerStore.layerImages[layerId.value]);
+const sliceRep = useSliceRepresentation(view, imageData);
+
+sliceRep.property.setRGBTransferFunction(
+  0,
+  vtkColorTransferFunction.newInstance()
+);
+sliceRep.property.setScalarOpacity(0, vtkPiecewiseFunction.newInstance());
+sliceRep.property.setUseLookupTableScalarRange(false);
+
+// set slice ordering to be in front of the segmentations
+sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
+sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(-4, -4);
+
+// set slicing mode
+const { metadata: parentMetadata } = useImage(parentId);
+
+watchEffect(() => {
+  const { lpsOrientation } = parentMetadata.value;
+  const ijkIndex = lpsOrientation[axis.value];
+  const mode = [SlicingMode.I, SlicingMode.J, SlicingMode.K][ijkIndex];
+  sliceRep.mapper.setSlicingMode(mode);
+});
+
+// sync slicing
+const slice = vtkFieldRef(sliceRep.mapper, 'slice');
+const { slice: storedSlice } = useSliceConfig(viewId, parentId);
+syncRef(storedSlice, slice, { immediate: true });
+
+// initialize layer coloring
+useLayerConfigInitializer(viewId, layerId);
+
+// apply layer coloring
+const applyLayerColoring = () => {
+  const config = coloringConfig.value;
+  if (!config) return;
+
+  const cfun = sliceRep.property.getRGBTransferFunction(0);
+  const ofun = sliceRep.property.getScalarOpacity(0);
+
+  applyColoring({
+    props: {
+      colorFunction: config.transferFunction,
+      opacityFunction: config.opacityFunction,
+    },
+    cfun,
+    ofun,
+  });
+
+  const { opacityFunction } = config;
+
+  const { mappingRange } = opacityFunction;
+  const width = mappingRange[1] - mappingRange[0];
+  const center = (mappingRange[1] + mappingRange[0]) / 2;
+
+  sliceRep.property.setColorWindow(width);
+  sliceRep.property.setColorLevel(center);
+  sliceRep.property.setOpacity(config.blendConfig.opacity);
+};
+
+watchEffect(applyLayerColoring);
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/components/vtk/VtkSegmentationSliceRepresentation.vue b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
new file mode 100644
index 000000000..ad5251142
--- /dev/null
+++ b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { toRefs, watchEffect, inject, computed } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useSliceRepresentation } from '@/src/core/vtk/useSliceRepresentation';
+import { LPSAxis } from '@/src/types/lps';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { SlicingMode } from '@kitware/vtk.js/Rendering/Core/ImageMapper/Constants';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSegmentGroupStore } from '@/src/store/segmentGroups';
+import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/ImageProperty/Constants';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { syncRef } from '@vueuse/core';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { usePaintToolStore } from '@/src/store/tools/paint';
+import { storeToRefs } from 'pinia';
+
+interface Props {
+  viewId: string;
+  segmentationId: string;
+  axis: LPSAxis;
+}
+
+const props = defineProps<Props>();
+const { viewId, segmentationId, axis } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const segmentationStore = useSegmentGroupStore();
+const metadata = computed(
+  () => segmentationStore.metadataByID[segmentationId.value]
+);
+const imageData = computed(
+  () => segmentationStore.dataIndex[segmentationId.value]
+);
+
+// redraw whenever the image changes
+onVTKEvent(imageData, 'onModified', () => {
+  view.requestRender();
+});
+
+// setup slice rep
+const sliceRep = useSliceRepresentation(view, imageData);
+
+sliceRep.property.setRGBTransferFunction(
+  0,
+  vtkColorTransferFunction.newInstance()
+);
+sliceRep.property.setScalarOpacity(0, vtkPiecewiseFunction.newInstance());
+sliceRep.property.setInterpolationType(InterpolationType.NEAREST);
+// needed for vtk.js >= 23.0.0
+sliceRep.property.setUseLookupTableScalarRange(true);
+
+// set slice ordering to be in front of the base image
+sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
+sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(-2, -2);
+
+// set opacity from painting tool
+const { labelmapOpacity: sliceOpacity } = storeToRefs(usePaintToolStore());
+watchEffect(() => {
+  sliceRep.property.setOpacity(sliceOpacity.value);
+});
+
+// set slicing mode
+const parentImageId = computed(() => metadata.value.parentImage);
+const { metadata: parentMetadata } = useImage(parentImageId);
+
+watchEffect(() => {
+  const { lpsOrientation } = parentMetadata.value;
+  const ijkIndex = lpsOrientation[axis.value];
+  const mode = [SlicingMode.I, SlicingMode.J, SlicingMode.K][ijkIndex];
+  sliceRep.mapper.setSlicingMode(mode);
+});
+
+// sync slicing
+const slice = vtkFieldRef(sliceRep.mapper, 'slice');
+const { slice: storedSlice } = useSliceConfig(viewId, parentImageId);
+syncRef(storedSlice, slice, { immediate: true });
+
+// set coloring properties
+const applySegmentColoring = () => {
+  const cfun = sliceRep.property.getRGBTransferFunction(0);
+  const ofun = sliceRep.property.getPiecewiseFunction(0);
+
+  cfun.removeAllPoints();
+  ofun.removeAllPoints();
+
+  let maxValue = 0;
+
+  const { segments } = metadata.value;
+  segments.order.forEach((segId) => {
+    const segment = segments.byValue[segId];
+    const r = segment.color[0] || 0;
+    const g = segment.color[1] || 0;
+    const b = segment.color[2] || 0;
+    const a = segment.color[3] || 0;
+    cfun.addRGBPoint(segment.value, r / 255, g / 255, b / 255);
+    ofun.addPoint(segment.value, a / 255);
+
+    maxValue = Math.max(maxValue, segment.value);
+  });
+
+  // add min/max values of the colormap range
+  cfun.addRGBPoint(0, 0, 0, 0);
+  ofun.addPoint(0, 0);
+  cfun.addRGBPoint(maxValue + 1, 0, 0, 0);
+  ofun.addPoint(maxValue + 1, 0);
+
+  sliceRep.property.modified();
+};
+
+watchEffect(applySegmentColoring);
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
new file mode 100644
index 000000000..b321ea3c4
--- /dev/null
+++ b/src/components/vtk/VtkSliceView.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { ref, toRefs, computed, provide, toRaw } from 'vue';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import { useVtkView } from '@/src/core/vtk/useVtkView';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useVtkInteractorStyle } from '@/src/core/vtk/useVtkInteractorStyle';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+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 { LPSAxisDir } from '@/src/types/lps';
+import type { Vector2 } from '@kitware/vtk.js/types';
+import { syncRef, useResizeObserver, watchImmediate } from '@vueuse/core';
+import { resetCameraToImage, resizeToFitImage } from '@/src/utils/camera';
+import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfigNew';
+import { useAutoFitState } from '@/src/composables/useAutoFitState';
+import { Maybe } from '@/src/types';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+}
+
+const props = defineProps<Props>();
+const {
+  viewId: viewID,
+  imageId: imageID,
+  viewDirection,
+  viewUp,
+} = toRefs(props);
+
+const vtkContainerRef = ref<HTMLElement>();
+
+const { metadata: imageMetadata } = useImage(imageID);
+
+const view = useVtkView(vtkContainerRef);
+view.renderer.setBackground(0, 0, 0);
+view.renderer.getActiveCamera().setParallelProjection(true);
+
+// setup interactor style
+const { interactorStyle } = useVtkInteractorStyle(
+  vtkInteractorStyleManipulator,
+  view
+);
+
+useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseCameraTrackballPanManipulator,
+  { button: 1, shift: true }
+);
+useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseCameraTrackballZoomManipulator,
+  { button: 3 }
+);
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseRangeManipulator,
+  { button: 1, dragEnabled: true, scrollEnabled: true }
+);
+
+// initialize and bind slice and window configs
+const sliceConfig = useSliceConfig(viewID, imageID);
+const wlConfig = useWindowingConfig(viewID, imageID);
+
+const computeStep = (range: Vector2) => {
+  return Math.min(range[1] - range[0], 1) / 256;
+};
+const wlStep = computed(() => computeStep(wlConfig.range.value));
+
+useSliceConfigInitializer(viewID, imageID, viewDirection);
+useWindowingConfigInitializer(viewID, imageID);
+
+const horiz = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'horizontal',
+  wlConfig.range,
+  wlStep,
+  wlConfig.level.value
+);
+
+const vert = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'vertical',
+  computed(() => [1e-12, wlConfig.range.value[1] - wlConfig.range.value[0]]),
+  wlStep,
+  wlConfig.width.value
+);
+
+const scroll = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'scroll',
+  sliceConfig.range,
+  1,
+  sliceConfig.slice.value
+);
+
+syncRef(horiz, wlConfig.level, { immediate: true });
+syncRef(vert, wlConfig.width, { immediate: true });
+syncRef(scroll, sliceConfig.slice, { immediate: true });
+
+// resizeToFit camera controls
+const { autoFit, withoutAutoFitEffect } = useAutoFitState(
+  view.renderer.getActiveCamera()
+);
+
+function autoFitImage() {
+  if (!autoFit.value) return;
+  withoutAutoFitEffect(() => {
+    resizeToFitImage(
+      view,
+      imageMetadata.value,
+      viewDirection.value,
+      viewUp.value
+    );
+  });
+}
+
+useResizeObserver(vtkContainerRef, autoFitImage);
+
+function resetCamera() {
+  autoFit.value = true;
+  withoutAutoFitEffect(() => {
+    resetCameraToImage(
+      view,
+      imageMetadata.value,
+      viewDirection.value,
+      viewUp.value
+    );
+    autoFitImage();
+  });
+}
+
+watchImmediate([viewID, imageID], resetCamera);
+
+// persistent camera config
+usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
+
+// exposed API
+const api: VtkViewApi = toRaw({
+  ...view,
+  interactorStyle,
+  resetCamera,
+});
+
+defineExpose(api);
+provide(VtkViewContext, api);
+</script>
+
+<template>
+  <div ref="vtkContainerRef"><slot></slot></div>
+</template>
diff --git a/src/components/vtk/VtkVolumeView.vue b/src/components/vtk/VtkVolumeView.vue
new file mode 100644
index 000000000..f4990a3bb
--- /dev/null
+++ b/src/components/vtk/VtkVolumeView.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import {
+  ref,
+  toRefs,
+  provide,
+  watchEffect,
+  toRaw,
+  effectScope,
+  onUnmounted,
+} from 'vue';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
+import { useVtkView } from '@/src/core/vtk/useVtkView';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useVtkInteractorStyle } from '@/src/core/vtk/useVtkInteractorStyle';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { LPSAxisDir } from '@/src/types/lps';
+import { watchImmediate } from '@vueuse/core';
+import { resetCameraToImage } from '@/src/utils/camera';
+import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfigNew';
+import { Maybe } from '@/src/types';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import vtkMouseCameraTrackballRotateManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballRotateManipulator';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+}
+
+const props = defineProps<Props>();
+const {
+  viewId: viewID,
+  imageId: imageID,
+  viewDirection,
+  viewUp,
+} = toRefs(props);
+
+const vtkContainerRef = ref<HTMLElement>();
+
+const { metadata: imageMetadata } = useImage(imageID);
+
+// use a detached scope so that actors can be removed from
+// the renderer before the renderer is deleted.
+const scope = effectScope(true);
+const view = scope.run(() => useVtkView(vtkContainerRef))!;
+onUnmounted(() => {
+  scope.stop();
+});
+
+view.renderer.setBackground(0, 0, 0);
+
+// setup interactor style
+const { interactorStyle } = useVtkInteractorStyle(
+  vtkInteractorStyleManipulator,
+  view
+);
+
+useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseCameraTrackballPanManipulator,
+  { button: 1, shift: true }
+);
+useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseCameraTrackballZoomManipulator,
+  { button: 3, scrollEnabled: true }
+);
+useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseCameraTrackballRotateManipulator,
+  { button: 1 }
+);
+
+// set center of rotation
+watchEffect(() => {
+  const center = vtkBoundingBox.getCenter(imageMetadata.value.worldBounds);
+  interactorStyle.setCenterOfRotation(...center);
+});
+
+function resetCamera() {
+  resetCameraToImage(
+    view,
+    imageMetadata.value,
+    viewDirection.value,
+    viewUp.value
+  );
+}
+
+watchImmediate([viewID, imageID], resetCamera);
+
+// persistent camera config
+usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
+
+// exposed API
+const api: VtkViewApi = toRaw({
+  ...view,
+  interactorStyle,
+  resetCamera,
+});
+
+defineExpose(api);
+provide(VtkViewContext, api);
+</script>
+
+<template>
+  <div ref="vtkContainerRef"><slot></slot></div>
+</template>
diff --git a/src/components/vtk/context.ts b/src/components/vtk/context.ts
new file mode 100644
index 000000000..952cc96c6
--- /dev/null
+++ b/src/components/vtk/context.ts
@@ -0,0 +1,4 @@
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { InjectionKey } from 'vue';
+
+export const VtkViewContext: InjectionKey<VtkViewApi> = Symbol('VtkView');
diff --git a/src/composables/isViewAnimating.ts b/src/composables/isViewAnimating.ts
index fc93dfd86..dd29c938a 100644
--- a/src/composables/isViewAnimating.ts
+++ b/src/composables/isViewAnimating.ts
@@ -2,6 +2,7 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { computed, ref, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { View } from '@/src/core/vtk/useVtkView';
 
 export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
   const isAnimating = ref(false);
@@ -16,3 +17,15 @@ export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
 
   return isAnimating;
 }
+export function isViewAnimatingNew(view: View) {
+  const isAnimating = ref(false);
+
+  onVTKEvent(view.interactor, 'onStartAnimation', () => {
+    isAnimating.value = true;
+  });
+  onVTKEvent(view.interactor, 'onEndAnimation', () => {
+    isAnimating.value = false;
+  });
+
+  return isAnimating;
+}
diff --git a/src/composables/onPausableVTKEvent.ts b/src/composables/onPausableVTKEvent.ts
new file mode 100644
index 000000000..f600db172
--- /dev/null
+++ b/src/composables/onPausableVTKEvent.ts
@@ -0,0 +1,50 @@
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import { MaybeRef } from 'vue';
+import {
+  OnVTKEventOptions,
+  VTKEventHandler,
+  VTKEventListener,
+  onVTKEvent,
+} from './onVTKEvent';
+
+export function onPausableVTKEvent<T extends vtkObject, K extends keyof T>(
+  vtkObj: MaybeRef<T | undefined | null>,
+  eventHookName: T[K] extends VTKEventListener ? K : never,
+  callback: VTKEventHandler,
+  options?: OnVTKEventOptions
+) {
+  let paused = false;
+
+  const pause = () => {
+    paused = true;
+  };
+
+  const resume = () => {
+    paused = false;
+  };
+
+  const withPaused = (fn: () => void) => {
+    pause();
+    try {
+      fn();
+    } finally {
+      resume();
+    }
+  };
+
+  const { stop } = onVTKEvent(
+    vtkObj,
+    eventHookName,
+    (obj) => {
+      if (!paused) callback(obj);
+    },
+    options
+  );
+
+  return {
+    stop,
+    pause,
+    resume,
+    withPaused,
+  };
+}
diff --git a/src/composables/onVTKEvent.ts b/src/composables/onVTKEvent.ts
index 1d08a0a7a..32cad9c1c 100644
--- a/src/composables/onVTKEvent.ts
+++ b/src/composables/onVTKEvent.ts
@@ -1,6 +1,6 @@
 import { Maybe } from '@/src/types';
 import { vtkObject, vtkSubscription } from '@kitware/vtk.js/interfaces';
-import { MaybeRef, computed, onBeforeUnmount, unref, watch } from 'vue';
+import { MaybeRef, computed, onScopeDispose, unref, watch } from 'vue';
 
 export type VTKEventHandler = (ev?: any) => any;
 export type VTKEventListener = (
@@ -23,15 +23,16 @@ export function onVTKEvent<T extends vtkObject, K extends keyof T>(
   });
 
   let subscription: Maybe<vtkSubscription> = null;
-  const stop = () => {
+
+  const cleanup = () => {
     subscription?.unsubscribe();
     subscription = null;
   };
 
-  watch(
+  const stop = watch(
     listenerRef,
     (listener) => {
-      stop();
+      cleanup();
       if (listener) {
         subscription = listener(callback, options?.priority ?? 0);
       }
@@ -39,7 +40,14 @@ export function onVTKEvent<T extends vtkObject, K extends keyof T>(
     { immediate: true }
   );
 
-  onBeforeUnmount(() => {
-    stop();
+  onScopeDispose(() => {
+    cleanup();
   });
+
+  return {
+    stop: () => {
+      cleanup();
+      stop();
+    },
+  };
 }
diff --git a/src/composables/useAutoFitState.ts b/src/composables/useAutoFitState.ts
new file mode 100644
index 000000000..5a11ead06
--- /dev/null
+++ b/src/composables/useAutoFitState.ts
@@ -0,0 +1,13 @@
+import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { MaybeRef, ref } from 'vue';
+
+export function useAutoFitState(camera: MaybeRef<vtkCamera>) {
+  const autoFit = ref(true);
+
+  const { withPaused } = onPausableVTKEvent(camera, 'onModified', () => {
+    autoFit.value = false;
+  });
+
+  return { autoFit, withoutAutoFitEffect: withPaused };
+}
diff --git a/src/composables/useCameraOrientation.ts b/src/composables/useCameraOrientation.ts
index ff5c2e407..ab9b66341 100644
--- a/src/composables/useCameraOrientation.ts
+++ b/src/composables/useCameraOrientation.ts
@@ -1,9 +1,10 @@
+import { Vector3 } from '@kitware/vtk.js/types';
 import { computed, Ref, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { mat3 } from 'gl-matrix';
-import { ImageMetadata } from '../types/image';
-import { LPSAxisDir } from '../types/lps';
-import { getLPSDirections } from '../utils/lps';
+import { ImageMetadata } from '@/src/types/image';
+import { LPSAxisDir } from '@/src/types/lps';
+import { getLPSDirections } from '@/src/utils/lps';
 
 /**
  *
@@ -23,9 +24,11 @@ export function useCameraOrientation(
     getLPSDirections(orientationMatrix.value)
   );
   const cameraDirVec = computed(
-    () => lpsDirections.value[unref(viewDirection)]
+    () => lpsDirections.value[unref(viewDirection)] as Vector3
+  );
+  const cameraUpVec = computed(
+    () => lpsDirections.value[unref(viewUp)] as Vector3
   );
-  const cameraUpVec = computed(() => lpsDirections.value[unref(viewUp)]);
 
   return {
     cameraDirVec,
diff --git a/src/composables/useColoringEffectNew.ts b/src/composables/useColoringEffectNew.ts
new file mode 100644
index 000000000..544e70212
--- /dev/null
+++ b/src/composables/useColoringEffectNew.ts
@@ -0,0 +1,103 @@
+import { Maybe } from '@/src/types';
+import {
+  ColorTransferFunction,
+  ColoringConfig,
+  OpacityFunction,
+} from '@/src/types/views';
+import { MaybeRef, computed, unref, watchEffect } from 'vue';
+import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import {
+  applyNodesToPiecewiseFunction,
+  applyPointsToPiecewiseFunction,
+  getShiftedOpacityFromPreset,
+} from '@/src/utils/vtk-helpers';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import vtkPiecewiseGaussianWidget from '@kitware/vtk.js/Interaction/Widgets/PiecewiseGaussianWidget';
+
+export interface ApplyColoringParams {
+  props: {
+    colorFunction: ColorTransferFunction;
+    opacityFunction: OpacityFunction;
+  };
+  cfun: vtkColorTransferFunction;
+  ofun: vtkPiecewiseFunction;
+  componentIndex?: number;
+}
+
+export function applyColoring({
+  props: { colorFunction, opacityFunction },
+  cfun,
+  ofun,
+  componentIndex = -1,
+}: ApplyColoringParams) {
+  if (componentIndex === -1) {
+    cfun.setVectorModeToMagnitude();
+  } else {
+    cfun.setVectorModeToComponent();
+    cfun.setVectorComponent(componentIndex);
+  }
+
+  cfun.setMappingRange(...colorFunction.mappingRange);
+  const preset = vtkColorMaps.getPresetByName(colorFunction.preset);
+  if (preset) {
+    cfun.applyColorMap(preset);
+  }
+
+  const { mappingRange } = opacityFunction;
+  ofun.setRange(...opacityFunction.mappingRange);
+
+  switch (opacityFunction.mode) {
+    case vtkPiecewiseFunctionProxy.Mode.Gaussians:
+      vtkPiecewiseGaussianWidget.applyGaussianToPiecewiseFunction(
+        opacityFunction.gaussians,
+        256,
+        opacityFunction.mappingRange,
+        ofun
+      );
+      break;
+    case vtkPiecewiseFunctionProxy.Mode.Points: {
+      const opacityPoints = getShiftedOpacityFromPreset(
+        opacityFunction.preset,
+        opacityFunction.mappingRange,
+        opacityFunction.shift,
+        opacityFunction.shiftAlpha
+      );
+      if (opacityPoints) {
+        applyPointsToPiecewiseFunction(ofun, opacityPoints, mappingRange);
+      }
+      break;
+    }
+    case vtkPiecewiseFunctionProxy.Mode.Nodes: {
+      applyNodesToPiecewiseFunction(ofun, opacityFunction.nodes, mappingRange);
+      break;
+    }
+    default:
+      throw new Error('Invalid opacity function mode encountered');
+  }
+}
+
+export function useColoringEffect(
+  config: MaybeRef<Maybe<ColoringConfig>>,
+  cfun: MaybeRef<vtkColorTransferFunction>,
+  ofun: MaybeRef<vtkPiecewiseFunction>
+) {
+  const colorTransferFunction = computed(() => unref(config)?.transferFunction);
+  const opacityFunction = computed(() => unref(config)?.opacityFunction);
+
+  watchEffect(() => {
+    const colorFunc = colorTransferFunction.value;
+    const opacityFunc = opacityFunction.value;
+    if (!colorFunc || !opacityFunc) return;
+
+    applyColoring({
+      props: {
+        colorFunction: colorFunc,
+        opacityFunction: opacityFunc,
+      },
+      cfun: unref(cfun),
+      ofun: unref(ofun),
+    });
+  });
+}
diff --git a/src/composables/useLayerConfigInitializer.ts b/src/composables/useLayerConfigInitializer.ts
new file mode 100644
index 000000000..08bb84b38
--- /dev/null
+++ b/src/composables/useLayerConfigInitializer.ts
@@ -0,0 +1,22 @@
+import { LayerID } from '@/src/store/datasets-layers';
+import useLayerColoringStore from '@/src/store/view-configs/layers';
+import { watchImmediate } from '@vueuse/core';
+import { MaybeRef, computed, unref } from 'vue';
+
+export function useLayerConfigInitializer(
+  viewId: MaybeRef<string>,
+  layerId: MaybeRef<LayerID>
+) {
+  const coloringStore = useLayerColoringStore();
+  const colorConfig = computed(() =>
+    coloringStore.getConfig(unref(viewId), unref(layerId))
+  );
+
+  watchImmediate(colorConfig, (config) => {
+    if (config) return;
+
+    const viewIdVal = unref(viewId);
+    const layerIdVal = unref(layerId);
+    coloringStore.resetColorPreset(viewIdVal, layerIdVal);
+  });
+}
diff --git a/src/composables/usePersistCameraConfigNew.ts b/src/composables/usePersistCameraConfigNew.ts
new file mode 100644
index 000000000..424eeb219
--- /dev/null
+++ b/src/composables/usePersistCameraConfigNew.ts
@@ -0,0 +1,62 @@
+import { MaybeRef, Ref, computed, unref } from 'vue';
+import { Maybe } from '@/src/types';
+import { CameraConfig } from '@/src/store/view-configs/types';
+import useViewCameraStore from '@/src/store/view-configs/camera';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { syncRef } from '@vueuse/core';
+import { guardedWritableRef } from '@/src/utils/guardedWritableRef';
+
+export function usePersistCameraConfig(
+  viewID: MaybeRef<string>,
+  dataID: MaybeRef<Maybe<string>>,
+  camera: MaybeRef<vtkCamera>
+) {
+  const viewCameraStore = useViewCameraStore();
+
+  type KeyType = keyof CameraConfig;
+  const keys: KeyType[] = [
+    'position',
+    'focalPoint',
+    'viewUp',
+    'parallelScale',
+    'directionOfProjection',
+  ];
+
+  const cameraRefs = keys.reduce(
+    (refs, key) => ({
+      ...refs,
+      [key]: guardedWritableRef(
+        vtkFieldRef(camera, key),
+        (incoming) => !!incoming
+      ),
+    }),
+    {} as Record<KeyType, Ref<any>>
+  );
+
+  const config = computed(() =>
+    viewCameraStore.getConfig(unref(viewID), unref(dataID))
+  );
+
+  const configRefs = keys.reduce(
+    (refs, key) => ({
+      ...refs,
+      [key]: computed({
+        get: () => config.value?.[key],
+        set: (v) => {
+          const viewIDVal = unref(viewID);
+          const dataIDVal = unref(dataID);
+          if (!viewIDVal || !dataIDVal) return;
+          viewCameraStore.updateConfig(viewIDVal, dataIDVal, {
+            [key]: v,
+          });
+        },
+      }),
+    }),
+    {} as Record<KeyType, Ref<any>>
+  );
+
+  keys.forEach((key) => {
+    syncRef(configRefs[key], cameraRefs[key]);
+  });
+}
diff --git a/src/composables/useSliceConfigInitializer.ts b/src/composables/useSliceConfigInitializer.ts
index e3fbcbaa4..283e2a3c9 100644
--- a/src/composables/useSliceConfigInitializer.ts
+++ b/src/composables/useSliceConfigInitializer.ts
@@ -1,40 +1,50 @@
+import { useImage } from '@/src/composables/useCurrentImage';
 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';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { watchImmediate } from '@vueuse/core';
+import { MaybeRef, computed, toRef, unref } from 'vue';
 
 export function useSliceConfigInitializer(
   viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>,
   viewDirection: MaybeRef<LPSAxisDir>,
-  sliceDomain: MaybeRef<{ min: number; max: number }>
+  slicingDomain?: MaybeRef<{ min: number; max: number }>
 ) {
   const store = useViewSliceStore();
   const { config: sliceConfig } = useSliceConfig(viewID, imageID);
+  const { metadata } = useImage(imageID);
 
-  watch(
-    toRef(sliceDomain),
-    (domain) => {
-      const imageIdVal = unref(imageID);
-      if (!imageIdVal) return;
-      store.updateConfig(unref(viewID), imageIdVal, domain);
-    },
-    { immediate: true }
-  );
+  const viewAxis = computed(() => getLPSAxisFromDir(unref(viewDirection)));
+  const sliceDomain = computed(() => {
+    const domainArg = unref(slicingDomain);
+    if (domainArg) return domainArg;
+    const { lpsOrientation, dimensions } = metadata.value;
+    const ijkIndex = lpsOrientation[viewAxis.value];
+    const dimMax = dimensions[ijkIndex];
 
-  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 }
-  );
+    return {
+      min: 0,
+      max: dimMax - 1,
+    };
+  });
+
+  watchImmediate(toRef(sliceDomain), (domain) => {
+    const imageIdVal = unref(imageID);
+    if (!imageIdVal) return;
+    store.updateConfig(unref(viewID), imageIdVal, domain);
+  });
+
+  watchImmediate(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);
+  });
 }
diff --git a/src/composables/useViewAnimationListener.ts b/src/composables/useViewAnimationListener.ts
new file mode 100644
index 000000000..27e40fbc3
--- /dev/null
+++ b/src/composables/useViewAnimationListener.ts
@@ -0,0 +1,30 @@
+import { View } from '@/src/core/vtk/useVtkView';
+import useViewAnimationStore, {
+  matchesViewFilter,
+} from '@/src/store/view-animation';
+import { storeToRefs } from 'pinia';
+import { MaybeRef, computed, unref, watchEffect } from 'vue';
+
+export function useViewAnimationListener(
+  view: View,
+  viewId: MaybeRef<string>,
+  viewType: MaybeRef<string>
+) {
+  const store = useViewAnimationStore();
+  const { animating, viewFilter } = storeToRefs(store);
+  const canAnimate = computed(() =>
+    matchesViewFilter(unref(viewId), unref(viewType), viewFilter.value)
+  );
+
+  let requested = false;
+
+  watchEffect(() => {
+    if (!animating.value) {
+      view.interactor.cancelAnimation(store);
+      requested = false;
+    } else if (!requested && canAnimate.value) {
+      view.interactor.requestAnimation(store);
+      requested = true;
+    }
+  });
+}
diff --git a/src/composables/useVolumeColoringInitializer.ts b/src/composables/useVolumeColoringInitializer.ts
new file mode 100644
index 000000000..4c176893f
--- /dev/null
+++ b/src/composables/useVolumeColoringInitializer.ts
@@ -0,0 +1,27 @@
+import { useImage } from '@/src/composables/useCurrentImage';
+import useVolumeColoringStore from '@/src/store/view-configs/volume-coloring';
+import { Maybe } from '@/src/types';
+import { watchImmediate } from '@vueuse/core';
+import { MaybeRef, computed, unref } from 'vue';
+
+export function useVolumeColoringInitializer(
+  viewId: MaybeRef<string>,
+  imageId: MaybeRef<Maybe<string>>
+) {
+  const store = useVolumeColoringStore();
+  const coloringConfig = computed(() =>
+    store.getConfig(unref(viewId), unref(imageId))
+  );
+
+  const { imageData } = useImage(imageId);
+
+  watchImmediate(coloringConfig, (config) => {
+    if (config) return;
+
+    const viewIdVal = unref(viewId);
+    const imageIdVal = unref(imageId);
+    if (!imageIdVal || !imageData.value) return;
+
+    store.resetToDefaultColoring(viewIdVal, imageIdVal, imageData.value);
+  });
+}
diff --git a/src/composables/useWindowingConfig.ts b/src/composables/useWindowingConfig.ts
index c3586bb0b..f7654dc8d 100644
--- a/src/composables/useWindowingConfig.ts
+++ b/src/composables/useWindowingConfig.ts
@@ -12,7 +12,7 @@ export function useWindowingConfig(
 
   const generateComputed = (prop: 'width' | 'level') => {
     return computed({
-      get: () => config.value?.[prop],
+      get: () => config.value?.[prop] ?? 0,
       set: (val) => {
         const imageIdVal = unref(imageID);
         if (!imageIdVal || val == null) return;
diff --git a/src/composables/useWindowingConfigInitializer.ts b/src/composables/useWindowingConfigInitializer.ts
index 79cfee1aa..b4f8d8f29 100644
--- a/src/composables/useWindowingConfigInitializer.ts
+++ b/src/composables/useWindowingConfigInitializer.ts
@@ -5,6 +5,7 @@ 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 { watchImmediate } from '@vueuse/core';
 import { MaybeRef, computed, unref, watch } from 'vue';
 
 function useAutoRangeValues(imageID: MaybeRef<Maybe<string>>) {
@@ -83,50 +84,40 @@ export function useWindowingConfigInitializer(
     return {};
   });
 
-  watch(
-    windowConfig,
-    (config) => {
-      const image = imageData.value;
-      const imageIdVal = unref(imageID);
-      const viewIdVal = unref(viewID);
-      if (config || !image || !imageIdVal) return;
+  watchImmediate(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 }
-  );
+    const [min, max] = image.getPointData().getScalars().getRange();
+    store.updateConfig(viewIdVal, imageIdVal, { min, max });
+    store.resetWindowLevel(viewIdVal, imageIdVal);
+  });
 
-  watch(
-    imageData,
-    (image) => {
-      const imageIdVal = unref(imageID);
-      const config = unref(windowConfig);
-      const viewIdVal = unref(viewID);
-      if (imageIdVal == null || config != null || !image) {
-        return;
-      }
+  watchImmediate(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];
+    const range = autoRangeValues.value[autoRange.value];
+    store.updateConfig(viewIdVal, imageIdVal, {
+      min: range[0],
+      max: range[1],
+    });
+    if (firstTag.value?.width) {
       store.updateConfig(viewIdVal, imageIdVal, {
-        min: range[0],
-        max: range[1],
+        preset: {
+          width: parseFloat(firstTag.value.width),
+          level: parseFloat(firstTag.value.level),
+        },
       });
-      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,
     }
-  );
+    store.resetWindowLevel(viewIdVal, imageIdVal);
+  });
 
   watch(autoRange, (percentile) => {
     const image = imageData.value;
diff --git a/src/core/vtk/types.ts b/src/core/vtk/types.ts
new file mode 100644
index 000000000..73082dcff
--- /dev/null
+++ b/src/core/vtk/types.ts
@@ -0,0 +1,3 @@
+export type VtkObjectConstructor<T> = {
+  newInstance(props?: any): T;
+};
diff --git a/src/core/vtk/useMouseRangeManipulatorListener.ts b/src/core/vtk/useMouseRangeManipulatorListener.ts
new file mode 100644
index 000000000..99a7444c8
--- /dev/null
+++ b/src/core/vtk/useMouseRangeManipulatorListener.ts
@@ -0,0 +1,54 @@
+import { Maybe } from '@/src/types';
+import { watchCompare } from '@/src/utils/watchCompare';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import { capitalize } from '@kitware/vtk.js/macros';
+import { MaybeRef, ref, toRef, unref } from 'vue';
+import deepEqual from 'fast-deep-equal';
+
+type ListenerType = 'vertical' | 'horizontal' | 'scroll';
+
+const DEFAULT_STEP = 1;
+
+export function useMouseRangeManipulatorListener(
+  manipulator: MaybeRef<vtkMouseRangeManipulator>,
+  type: ListenerType,
+  range: MaybeRef<Maybe<[number, number]>>,
+  step: MaybeRef<Maybe<number>>,
+  initialValue?: number
+) {
+  const internalValue = ref(initialValue ?? 0);
+
+  watchCompare(
+    [toRef(range), toRef(step), toRef(manipulator)],
+    ([newRange, , manip], _, onCleanup) => {
+      if (!newRange) return;
+
+      const setterName = `set${
+        capitalize(type) as Capitalize<ListenerType>
+      }Listener` as const;
+      const removerName = `remove${
+        capitalize(type) as Capitalize<ListenerType>
+      }Listener` as const;
+
+      manip[setterName](
+        newRange[0],
+        newRange[1],
+        unref(step) ?? DEFAULT_STEP,
+        () => internalValue.value,
+        (val) => {
+          internalValue.value = val;
+        }
+      );
+
+      onCleanup(() => {
+        manip[removerName]();
+      });
+    },
+    {
+      immediate: true,
+      compare: deepEqual,
+    }
+  );
+
+  return internalValue;
+}
diff --git a/src/core/vtk/useSliceRepresentation.ts b/src/core/vtk/useSliceRepresentation.ts
new file mode 100644
index 000000000..859284928
--- /dev/null
+++ b/src/core/vtk/useSliceRepresentation.ts
@@ -0,0 +1,21 @@
+import { MaybeRef } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
+import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
+import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
+import { Maybe } from '@/src/types';
+import { View } from '@/src/core/vtk/useVtkView';
+
+export function useSliceRepresentation(
+  view: View,
+  imageData: MaybeRef<Maybe<vtkImageData>>
+) {
+  const sliceRep = useVtkRepresentation({
+    view,
+    data: imageData,
+    vtkActorClass: vtkImageSlice,
+    vtkMapperClass: vtkImageMapper,
+  });
+
+  return sliceRep;
+}
diff --git a/src/core/vtk/useVolumeRepresentation.ts b/src/core/vtk/useVolumeRepresentation.ts
new file mode 100644
index 000000000..085736603
--- /dev/null
+++ b/src/core/vtk/useVolumeRepresentation.ts
@@ -0,0 +1,21 @@
+import { MaybeRef } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
+import { Maybe } from '@/src/types';
+import { View } from '@/src/core/vtk/useVtkView';
+import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
+import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
+
+export function useVolumeRepresentation(
+  view: View,
+  imageData: MaybeRef<Maybe<vtkImageData>>
+) {
+  const volRep = useVtkRepresentation({
+    view,
+    data: imageData,
+    vtkActorClass: vtkVolume,
+    vtkMapperClass: vtkVolumeMapper,
+  });
+
+  return volRep;
+}
diff --git a/src/core/vtk/useVtkInteractionManipulator.ts b/src/core/vtk/useVtkInteractionManipulator.ts
new file mode 100644
index 000000000..d8d26f295
--- /dev/null
+++ b/src/core/vtk/useVtkInteractionManipulator.ts
@@ -0,0 +1,57 @@
+import { MaybeRef, computed, ref, unref, watch, watchEffect } from 'vue';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { VtkObjectConstructor } from '@/src/core/vtk/types';
+import { FirstParam } from '@/src/types';
+
+function addManipulator(style: vtkInteractorStyleManipulator, manip: any) {
+  if (manip.isA('vtkCompositeMouseManipulator')) {
+    style.addMouseManipulator(manip);
+  } else if (manip.isA('vtkCompositeGestureManipulator')) {
+    style.addGestureManipulator(manip);
+  } else if (manip.isA('vtkCompositeKeyboardManipulator')) {
+    style.addKeyboardManipulator(manip);
+  }
+}
+
+function removeManipulator(style: vtkInteractorStyleManipulator, manip: any) {
+  if (manip.isA('vtkCompositeMouseManipulator')) {
+    style.removeMouseManipulator(manip);
+  } else if (manip.isA('vtkCompositeGestureManipulator')) {
+    style.removeGestureManipulator(manip);
+  } else if (manip.isA('vtkCompositeKeyboardManipulator')) {
+    style.removeKeyboardManipulator(manip);
+  }
+}
+
+export function useVtkInteractionManipulator<
+  T extends VtkObjectConstructor<any>
+>(
+  style: vtkInteractorStyleManipulator,
+  vtkCtor: T,
+  props: MaybeRef<FirstParam<T['newInstance']>>
+) {
+  const manipulator = computed(() => {
+    return vtkCtor.newInstance(unref(props));
+  });
+
+  const enabled = ref(true);
+
+  watch(manipulator, (_, oldManipulator) => {
+    oldManipulator?.delete();
+  });
+
+  watchEffect((onCleanup) => {
+    if (!enabled.value) return;
+
+    const manip = manipulator.value;
+    addManipulator(style, manip);
+    onCleanup(() => {
+      removeManipulator(style, manip);
+    });
+  });
+
+  return {
+    instance: manipulator,
+    enabled,
+  };
+}
diff --git a/src/core/vtk/useVtkInteractorStyle.ts b/src/core/vtk/useVtkInteractorStyle.ts
new file mode 100644
index 000000000..57c982a25
--- /dev/null
+++ b/src/core/vtk/useVtkInteractorStyle.ts
@@ -0,0 +1,25 @@
+import { VtkObjectConstructor } from '@/src/core/vtk/types';
+import vtkInteractorStyle from '@kitware/vtk.js/Rendering/Core/InteractorStyle';
+import { vtkWarningMacro } from '@kitware/vtk.js/macros';
+import { onScopeDispose } from 'vue';
+import type { View } from '@/src/core/vtk/useVtkView';
+
+export function useVtkInteractorStyle<T extends vtkInteractorStyle>(
+  vtkCtor: VtkObjectConstructor<T>,
+  view: View
+) {
+  const style = vtkCtor.newInstance();
+
+  if (view.interactor.getInteractorStyle()) {
+    vtkWarningMacro('Overwriting an already set interactor style');
+  }
+  view.interactor.setInteractorStyle(style);
+
+  onScopeDispose(() => {
+    if (view.interactor.getInteractorStyle() === style)
+      view.interactor.setInteractorStyle(null);
+    style.delete();
+  });
+
+  return { interactorStyle: style };
+}
diff --git a/src/core/vtk/useVtkRepresentation.ts b/src/core/vtk/useVtkRepresentation.ts
new file mode 100644
index 000000000..ba9ce65e9
--- /dev/null
+++ b/src/core/vtk/useVtkRepresentation.ts
@@ -0,0 +1,67 @@
+import { MaybeRef, onScopeDispose, unref, watchEffect } from 'vue';
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import vtkAbstractMapper from '@kitware/vtk.js/Rendering/Core/AbstractMapper';
+import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
+import { VtkObjectConstructor } from '@/src/core/vtk/types';
+import { View } from '@/src/core/vtk/useVtkView';
+import { Maybe } from '@/src/types';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+
+type vtkPropWithMapperProperty<
+  M extends vtkAbstractMapper = vtkAbstractMapper,
+  P extends vtkObject = vtkObject
+> = vtkProp & {
+  setMapper(m: M): void;
+  getProperty(): P;
+};
+
+export interface UseVtkRepresentationParameters<Actor, Mapper> {
+  view: View;
+  data: MaybeRef<Maybe<vtkObject>>;
+  vtkActorClass: VtkObjectConstructor<Actor>;
+  vtkMapperClass: VtkObjectConstructor<Mapper>;
+}
+
+export function useVtkRepresentation<
+  Actor extends vtkPropWithMapperProperty,
+  Mapper extends vtkAbstractMapper,
+  Property extends ReturnType<Actor['getProperty']>
+>({
+  view,
+  data: dataObject,
+  vtkActorClass,
+  vtkMapperClass,
+}: UseVtkRepresentationParameters<Actor, Mapper>) {
+  const actor = vtkActorClass.newInstance();
+  const mapper = vtkMapperClass.newInstance();
+  const property = actor.getProperty() as Property;
+
+  actor.setMapper(mapper);
+
+  watchEffect((onCleanup) => {
+    const data = unref(dataObject);
+    if (!data) return;
+
+    const { renderer } = view;
+    mapper.setInputData(data, 0);
+    renderer.addActor(actor);
+    view.requestRender();
+
+    onCleanup(() => {
+      renderer.removeActor(actor);
+    });
+  });
+
+  [actor, mapper, property].forEach((obj: vtkObject) => {
+    onVTKEvent(obj, 'onModified', () => {
+      view.requestRender();
+    });
+  });
+
+  onScopeDispose(() => {
+    actor.delete();
+    mapper.delete();
+  });
+
+  return { actor, mapper, property };
+}
diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
new file mode 100644
index 000000000..f3219e7eb
--- /dev/null
+++ b/src/core/vtk/useVtkView.ts
@@ -0,0 +1,130 @@
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { Maybe } from '@/src/types';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import { useElementSize } from '@vueuse/core';
+import {
+  MaybeRef,
+  onScopeDispose,
+  unref,
+  watchEffect,
+  watchPostEffect,
+} from 'vue';
+
+export interface RequestRenderOptions {
+  immediate?: boolean;
+}
+
+export interface View {
+  renderWindow: vtkRenderWindow;
+  renderer: vtkRenderer;
+  interactor: vtkRenderWindowInteractor;
+  renderWindowView: vtkOpenGLRenderWindow;
+  requestRender(opts?: RequestRenderOptions): void;
+}
+
+export function useWebGLRenderWindow(container: MaybeRef<Maybe<HTMLElement>>) {
+  const renderWindowView = vtkOpenGLRenderWindow.newInstance();
+
+  watchPostEffect((onCleanup) => {
+    const el = unref(container);
+    if (!el) return;
+
+    renderWindowView.setContainer(el);
+    onCleanup(() => {
+      renderWindowView.setContainer(null as unknown as HTMLElement);
+    });
+  });
+
+  onScopeDispose(() => {
+    renderWindowView.delete();
+  });
+
+  return renderWindowView;
+}
+
+export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
+  const renderer = vtkRenderer.newInstance();
+  const renderWindow = vtkRenderWindow.newInstance();
+  renderWindow.addRenderer(renderer);
+
+  // the render window view
+  const renderWindowView = useWebGLRenderWindow(container);
+  renderWindow.addView(renderWindowView);
+
+  onScopeDispose(() => {
+    renderWindow.removeView(renderWindowView);
+  });
+
+  // interactor
+  const interactor = vtkRenderWindowInteractor.newInstance();
+  renderWindow.setInteractor(interactor);
+
+  watchPostEffect((onCleanup) => {
+    const el = unref(container);
+    if (!el) return;
+
+    interactor.initialize();
+    interactor.setView(renderWindowView);
+    interactor.bindEvents(el);
+    onCleanup(() => {
+      if (interactor.getContainer()) interactor.unbindEvents();
+    });
+  });
+
+  // render API
+  const deferredRender = batchForNextTask(() => {
+    // don't need to re-render during animation
+    if (interactor.isAnimating()) return;
+    renderWindow.render();
+  });
+
+  const immediateRender = () => {
+    if (interactor.isAnimating()) return;
+    renderWindow.render();
+  };
+
+  const requestRender = ({ immediate } = { immediate: true }) => {
+    if (immediate) {
+      immediateRender();
+    }
+    deferredRender();
+  };
+
+  onVTKEvent(renderer, 'onModified', () => {
+    requestRender();
+  });
+
+  // set size
+  const setSize = (width: number, height: number) => {
+    const scaledWidth = width * globalThis.devicePixelRatio;
+    const scaledHeight = height * globalThis.devicePixelRatio;
+    renderWindowView.setSize(scaledWidth, scaledHeight);
+    requestRender({ immediate: true });
+  };
+
+  const { width, height } = useElementSize(container);
+  watchEffect(() => {
+    setSize(width.value, height.value);
+  });
+
+  // cleanup
+  onScopeDispose(() => {
+    renderWindow.removeRenderer(renderer);
+
+    renderer.delete();
+    renderWindow.delete();
+    interactor.delete();
+  });
+
+  return {
+    renderer,
+    renderWindow,
+    interactor,
+    renderWindowView,
+    requestRender,
+  };
+}
diff --git a/src/core/vtk/vtkFieldRef.ts b/src/core/vtk/vtkFieldRef.ts
new file mode 100644
index 000000000..d32a3d87b
--- /dev/null
+++ b/src/core/vtk/vtkFieldRef.ts
@@ -0,0 +1,71 @@
+import { MaybeRef, Ref, computed, customRef, triggerRef, unref } from 'vue';
+import { vtkObject } from '@kitware/vtk.js/interfaces';
+import { capitalize } from '@kitware/vtk.js/macros';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+
+type NonEmptyString<T extends string> = T extends '' ? never : T;
+
+type FilterGetters<T extends string> = T extends `get${infer R}`
+  ? NonEmptyString<Uncapitalize<R>>
+  : never;
+
+type GettableFields<T> = FilterGetters<string & keyof T>;
+
+type NameToGetter<T extends string> = `get${Capitalize<T>}`;
+
+type GetterReturnType<T, F extends string> = NameToGetter<F> extends keyof T
+  ? T[NameToGetter<F>] extends (...args: any[]) => infer R
+    ? R
+    : never
+  : never;
+
+type ArraySetter = (...args: any[]) => boolean;
+
+export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
+  obj: MaybeRef<T>,
+  fieldName: F
+): Ref<GetterReturnType<T, F>> {
+  const getterName = `get${capitalize(fieldName)}` as keyof T;
+  const setterName = `set${capitalize(fieldName)}` as keyof T;
+
+  const getter = computed(
+    () => unref(obj)[getterName] as () => GetterReturnType<T, F>
+  );
+  const setter = computed(
+    () => unref(obj)[setterName] as ((v: any) => boolean) | undefined
+  );
+
+  const ref = customRef<GetterReturnType<T, F>>((track, trigger) => {
+    return {
+      get: () => {
+        track();
+        return getter.value();
+      },
+      set: (v) => {
+        const set = setter.value;
+        if (!set) throw new Error(`No setter for field '${fieldName}'`);
+
+        let changed = false;
+        // handle certain array setters not accepting an array as input
+        if (Array.isArray(v) && set.length === v.length) {
+          changed = (set as ArraySetter)(...v);
+        } else {
+          changed = set(v);
+        }
+
+        // in the event a setter returns undefined, assume something changed.
+        if (changed === true || changed === undefined) {
+          trigger();
+        }
+      },
+    };
+  });
+
+  const onModified = () => {
+    triggerRef(ref);
+  };
+
+  onVTKEvent(obj as vtkObject, 'onModified', onModified);
+
+  return ref;
+}
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index f1ee4b343..c37cb30c3 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -276,3 +276,23 @@ declare module '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget' {
   // Just forwarding vtk-js's definition as default export:
   export default vtkResliceCursorWidget;
 }
+
+declare module '@kitware/vtk.js/Interaction/Widgets/PiecewiseGaussianWidget' {
+  import type { Vector2 } from '@kitware/vtk.js/types';
+  import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+
+  export interface vtkPiecewiseGaussianWidget {}
+
+  function applyGaussianToPiecewiseFunction(
+    gaussians: any,
+    sampling: number,
+    rangeToUse: Vector2,
+    piecewiseFunction: vtkPiecewiseFunction
+  ): void;
+
+  export declare const vtkPiecewiseGaussianWidget: {
+    applyGaussianToPiecewiseFunction: typeof applyGaussianToPiecewiseFunction;
+  };
+
+  export default vtkPiecewiseWidget;
+}
diff --git a/src/store/view-animation.ts b/src/store/view-animation.ts
new file mode 100644
index 000000000..4680b0779
--- /dev/null
+++ b/src/store/view-animation.ts
@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia';
+import { ref, shallowRef, triggerRef, computed } from 'vue';
+
+export interface ViewFilterSpec {
+  byViewType?: string[];
+  byViewIds?: string[];
+}
+
+export function matchesViewFilter(
+  viewID: string,
+  viewType: string,
+  filterSpec?: ViewFilterSpec
+) {
+  if (!filterSpec) return true;
+  const { byViewType, byViewIds } = filterSpec;
+  if (byViewType && !byViewType.includes(viewType)) return false;
+  if (byViewIds && !byViewIds.includes(viewID)) return false;
+  return true;
+}
+
+function mergeArrayFilters(arr1?: string[], arr2?: string[]) {
+  if (!arr1 || !arr2) return undefined;
+  return Array.from(new Set(arr1.concat(arr2)));
+}
+
+/**
+ * Merges view filter specs.
+ *
+ * An undefined filter spec means no filter.
+ * @param filterSpecs
+ * @returns
+ */
+export function mergeViewFilters(
+  filterSpecs: Array<ViewFilterSpec | undefined>
+) {
+  if (filterSpecs.length === 0) return undefined;
+  return filterSpecs.reduce((result, spec) => {
+    if (result === undefined) return undefined;
+    const byViewIds = mergeArrayFilters(result?.byViewIds, spec?.byViewIds);
+    const byViewType = mergeArrayFilters(result?.byViewType, spec?.byViewType);
+    return { byViewIds, byViewType };
+  }, filterSpecs[0] as ViewFilterSpec | undefined);
+}
+
+const useViewAnimationStore = defineStore('viewAnimation', () => {
+  const animating = ref(false);
+  const requestors = shallowRef(new Map<any, ViewFilterSpec | undefined>());
+  const viewFilter = computed(() => {
+    return mergeViewFilters(Array.from(requestors.value.values()));
+  });
+
+  const requestAnimation = (requestor: any, filter?: ViewFilterSpec) => {
+    if (requestors.value.has(requestor)) return;
+    requestors.value.set(requestor, filter);
+    animating.value = true;
+    triggerRef(requestors);
+  };
+
+  const cancelAnimation = (requestor: any) => {
+    requestors.value.delete(requestor);
+    if (requestors.value.size === 0) {
+      animating.value = false;
+    }
+    triggerRef(requestors);
+  };
+
+  return {
+    animating,
+    viewFilter,
+    requestAnimation,
+    cancelAnimation,
+  };
+});
+
+export default useViewAnimationStore;
diff --git a/src/store/view-configs/volume-coloring.ts b/src/store/view-configs/volume-coloring.ts
index e020e7236..24a8e749b 100644
--- a/src/store/view-configs/volume-coloring.ts
+++ b/src/store/view-configs/volume-coloring.ts
@@ -25,6 +25,8 @@ import { useImageStore } from '../datasets-images';
 export const DEFAULT_AMBIENT = 0.2;
 export const DEFAULT_DIFFUSE = 0.7;
 export const DEFAULT_SPECULAR = 0.3;
+export const DEFAULT_EDGE_GRADIENT = 0.2;
+export const DEFAULT_SAMPLING_DISTANCE = 0.2;
 
 function getPresetFromImageModality(imageID: string) {
   const dicomStore = useDICOMStore();
diff --git a/src/types/index.ts b/src/types/index.ts
index 500d1b7d6..ff53e745e 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -57,3 +57,7 @@ export type DeepPartial<T> = T extends object
       [P in keyof T]?: DeepPartial<T[P]>;
     }
   : T;
+
+export type FirstParam<T> = T extends (first: infer R, ...args: any[]) => any
+  ? R
+  : never;
diff --git a/src/types/vtk-types.ts b/src/types/vtk-types.ts
index 2d91bca40..197540959 100644
--- a/src/types/vtk-types.ts
+++ b/src/types/vtk-types.ts
@@ -1,5 +1,7 @@
 import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
 import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
+import { View } from '@/src/core/vtk/useVtkView';
+import vtkInteractorStyle from '@kitware/vtk.js/Rendering/Core/InteractorStyle';
 import vtkLPSView2DProxy from '../vtk/LPSView2DProxy';
 import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
 
@@ -18,3 +20,8 @@ export interface vtkWriter extends vtkObject {
 }
 
 export type vtkLPSViewProxy = vtkLPSView2DProxy | vtkLPSView3DProxy;
+
+export interface VtkViewApi extends View {
+  interactorStyle: vtkInteractorStyle;
+  resetCamera(): void;
+}
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
new file mode 100644
index 000000000..fda93f7db
--- /dev/null
+++ b/src/utils/camera.ts
@@ -0,0 +1,112 @@
+import { View } from '@/src/core/vtk/useVtkView';
+import { ImageMetadata } from '@/src/types/image';
+import { LPSAxisDir } from '@/src/types/lps';
+import { getLPSAxisFromDir, getLPSDirections } from '@/src/utils/lps';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import { vec3 } from 'gl-matrix';
+
+/**
+ * Given an eye frame, return the dimension indices corresponding to the horizontal and vertical dimensions.
+ * @param lookAxis
+ * @param eyeUpAxis
+ * @returns
+ */
+function eyeFrameDimIndices(lookAxis: 0 | 1 | 2, eyeUpAxis: 0 | 1 | 2) {
+  if (lookAxis === 0 && eyeUpAxis === 1) return [2, 1] as Vector2;
+  if (lookAxis === 0 && eyeUpAxis === 2) return [1, 2] as Vector2;
+  if (lookAxis === 1 && eyeUpAxis === 0) return [2, 0] as Vector2;
+  if (lookAxis === 1 && eyeUpAxis === 2) return [0, 2] as Vector2;
+  if (lookAxis === 2 && eyeUpAxis === 0) return [1, 0] as Vector2;
+  if (lookAxis === 2 && eyeUpAxis === 1) return [0, 1] as Vector2;
+  throw new Error(`Invalid lookAxis and eyeUpAxis: ${lookAxis}, ${eyeUpAxis}`);
+}
+
+function computeParallelScale(
+  lookAxis: 0 | 1 | 2,
+  viewUpAxis: 0 | 1 | 2,
+  dimensions: Vector3 | vec3,
+  viewSize: Vector2
+) {
+  const [widthIndex, heightIndex] = eyeFrameDimIndices(lookAxis, viewUpAxis);
+  const width = dimensions[widthIndex];
+  const height = dimensions[heightIndex];
+  const dimAspect = width / height;
+
+  const [viewWidth, viewHeight] = viewSize;
+  const viewAspect = viewWidth / viewHeight;
+
+  let scale = height / 2;
+  if (viewAspect < dimAspect) {
+    scale = width / 2 / viewAspect;
+  }
+
+  return scale;
+}
+
+export function resizeToFit(
+  view: View,
+  lookAxis: 0 | 1 | 2,
+  upAxis: 0 | 1 | 2,
+  dimensions: Vector3 | vec3
+) {
+  const camera = view.renderer.getActiveCamera();
+  camera.setParallelScale(
+    computeParallelScale(
+      lookAxis,
+      upAxis,
+      dimensions,
+      view.renderWindowView.getSize()
+    )
+  );
+}
+
+export function positionCamera(
+  camera: vtkCamera,
+  directionOfProjection: Vector3,
+  viewUp: Vector3,
+  focalPoint: Vector3
+) {
+  const position = vec3.clone(focalPoint) as Vector3;
+  vec3.sub(position, position, directionOfProjection);
+  camera.setFocalPoint(...focalPoint);
+  camera.setPosition(...position);
+  camera.setDirectionOfProjection(...directionOfProjection);
+  camera.setViewUp(...viewUp);
+}
+
+export function resetCameraToImage(
+  view: View,
+  metadata: ImageMetadata,
+  viewDirection: LPSAxisDir,
+  viewUp: LPSAxisDir
+) {
+  const { worldBounds, orientation } = metadata;
+  const lpsDirections = getLPSDirections(orientation);
+
+  const center = vtkBoundingBox.getCenter(worldBounds);
+  const camera = view.renderer.getActiveCamera();
+
+  const directionOfProjection = lpsDirections[viewDirection] as Vector3;
+  const camerViewUp = lpsDirections[viewUp] as Vector3;
+  positionCamera(camera, directionOfProjection, camerViewUp, center);
+
+  view.renderer.resetCamera(worldBounds);
+  view.requestRender();
+}
+export function resizeToFitImage(
+  view: View,
+  metadata: ImageMetadata,
+  viewDirection: LPSAxisDir,
+  viewUp: LPSAxisDir
+) {
+  const { lpsOrientation, dimensions } = metadata;
+  const viewDirAxis = getLPSAxisFromDir(viewDirection);
+  const viewUpAxis = getLPSAxisFromDir(viewUp);
+  const lookAxis = lpsOrientation[viewDirAxis];
+  const upAxis = lpsOrientation[viewUpAxis];
+
+  resizeToFit(view, lookAxis, upAxis, dimensions);
+  view.requestRender();
+}
diff --git a/src/utils/guardedWritableRef.ts b/src/utils/guardedWritableRef.ts
new file mode 100644
index 000000000..5384e67fd
--- /dev/null
+++ b/src/utils/guardedWritableRef.ts
@@ -0,0 +1,16 @@
+import { Ref, computed } from 'vue';
+
+export function guardedWritableRef<T>(
+  obj: Ref<T>,
+  accept: (incoming: T, current: T) => boolean
+) {
+  return computed({
+    get: () => obj.value,
+    set: (v) => {
+      if (accept(v, obj.value)) {
+        // eslint-disable-next-line no-param-reassign
+        obj.value = v;
+      }
+    },
+  });
+}
diff --git a/src/utils/volumeProperties.ts b/src/utils/volumeProperties.ts
new file mode 100644
index 000000000..105cf4345
--- /dev/null
+++ b/src/utils/volumeProperties.ts
@@ -0,0 +1,225 @@
+import {
+  DEFAULT_AMBIENT,
+  DEFAULT_DIFFUSE,
+  DEFAULT_SPECULAR,
+} from '@/src/store/view-configs/volume-coloring';
+import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
+import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
+import vtkVolumeProperty from '@kitware/vtk.js/Rendering/Core/VolumeProperty';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { vec3 } from 'gl-matrix';
+
+/**
+ * Sets the volume sampling distance.
+ * @param mapper
+ * @param distance A value betweeen 0 and 1.
+ * @param imageData
+ */
+export function setSamplingDistance(
+  mapper: vtkVolumeMapper,
+  distance: number,
+  imageData: vtkImageData
+) {
+  const sampleDistance =
+    0.7 *
+    Math.sqrt(
+      imageData
+        .getSpacing()
+        .map((v) => v * v)
+        .reduce((a, b) => a + b, 0)
+    );
+  mapper.setSampleDistance(sampleDistance * 2 ** (distance * 3.0 - 1.5));
+}
+
+/**
+ * Sets the edge gradient.
+ * @param property
+ * @param edgeGradient A value between 0 and 1.
+ * @param dataArray
+ */
+export function setEdgeGradient(
+  property: vtkVolumeProperty,
+  edgeGradient: number,
+  dataArray: vtkDataArray
+) {
+  const numberOfComponents = dataArray.getNumberOfComponents();
+  for (let component = 0; component < numberOfComponents; component++) {
+    if (edgeGradient === 0) {
+      property.setUseGradientOpacity(component, false);
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    property.setUseGradientOpacity(component, true);
+
+    const range = dataArray.getRange(component);
+    const width = range[1] - range[0];
+    const minV = Math.max(0.0, edgeGradient - 0.3) / 0.7;
+    const minGradOpacity =
+      minV > 0 ? Math.exp(Math.log(width * 0.2) * minV ** 2) : 0;
+    const maxGradOpacity = Math.exp(Math.log(width * edgeGradient ** 2));
+
+    property.setGradientOpacityMinimumValue(component, minGradOpacity);
+    property.setGradientOpacityMaximumValue(component, maxGradOpacity);
+  }
+}
+
+export interface SetCinematicLightingParameters {
+  renderer: vtkRenderer;
+  enabled: boolean;
+  center: Vector3;
+  lightFollowsCamera: boolean;
+}
+
+export function setCinematicLighting({
+  renderer,
+  enabled,
+  center,
+  lightFollowsCamera,
+}: SetCinematicLightingParameters) {
+  if (renderer.getLights().length === 0) {
+    renderer.createLight();
+  }
+  const light = renderer.getLights()[0];
+  if (enabled) {
+    light.setFocalPoint(...center);
+    light.setColor(1, 1, 1);
+    light.setIntensity(1);
+    light.setConeAngle(90);
+    light.setPositional(true);
+    renderer.setTwoSidedLighting(false);
+    if (lightFollowsCamera) {
+      light.setLightTypeToHeadLight();
+      renderer.updateLightsGeometryToFollowCamera();
+    } else {
+      light.setLightTypeToSceneLight();
+    }
+  } else {
+    light.setPositional(false);
+  }
+}
+
+export interface SetCinematicVolumeSamplingParameters {
+  enabled: boolean;
+  mapper: vtkVolumeMapper;
+  quality: number;
+  isAnimating: boolean;
+  image: vtkImageData;
+}
+
+export function setCinematicVolumeSampling({
+  enabled,
+  mapper,
+  quality,
+  isAnimating,
+  image,
+}: SetCinematicVolumeSamplingParameters) {
+  if (isAnimating) {
+    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 /= quality > 1 ? 0.5 * quality ** 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 * quality : 0);
+    mapper.setComputeNormalFromOpacity(!enabled && quality > 2);
+  }
+}
+
+export interface SetCinematicVolumeShadingParameters {
+  enabled: boolean;
+  image: vtkImageData;
+  property: vtkVolumeProperty;
+  ambient: number;
+  diffuse: number;
+  specular: number;
+}
+
+export function setCinematicVolumeShading({
+  enabled,
+  image,
+  property,
+  ambient,
+  diffuse,
+  specular,
+}: SetCinematicVolumeShadingParameters) {
+  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);
+}
+
+export interface SetCinematicVolumeScatterParameters {
+  enabled: boolean;
+  mapper: vtkVolumeMapper;
+  blending: number;
+}
+
+export function setCinematicVolumeScatter({
+  enabled,
+  mapper,
+  blending,
+}: SetCinematicVolumeScatterParameters) {
+  mapper.setVolumetricScatteringBlending(enabled ? blending : 0);
+}
+
+export interface SetCinematicLocalAmbientOcclusionParameters {
+  enabled: boolean;
+  mapper: vtkVolumeMapper;
+  kernelSize: number;
+  kernelRadius: number;
+}
+
+export function setCinematicLocalAmbientOcclusion({
+  enabled,
+  mapper,
+  kernelSize,
+  kernelRadius,
+}: SetCinematicLocalAmbientOcclusionParameters) {
+  if (enabled) {
+    mapper.setLocalAmbientOcclusion(true);
+    mapper.setLAOKernelSize(kernelSize);
+    mapper.setLAOKernelRadius(kernelRadius);
+  } else {
+    mapper.setLocalAmbientOcclusion(false);
+    mapper.setLAOKernelSize(0);
+    mapper.setLAOKernelRadius(0);
+  }
+}
diff --git a/src/utils/vtk-helpers.ts b/src/utils/vtk-helpers.ts
index bb4d86b9c..7d9b9c17b 100644
--- a/src/utils/vtk-helpers.ts
+++ b/src/utils/vtk-helpers.ts
@@ -1,10 +1,14 @@
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { vtkObject } from '@kitware/vtk.js/interfaces';
 import { intersectDisplayWithPlane } from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { OpacityFunction } from '../types/views';
+import { OpacityFunction } from '@/src/types/views';
+import vtkFieldData from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/FieldData';
+import { Maybe } from '@/src/types';
 
 export function computeWorldToDisplay(
   xyz: Vector3,
@@ -134,7 +138,7 @@ export function getShiftedOpacityFromPreset(
       // but preset values of zero should not
       const shifted = y && y - shiftAlpha;
       const yVal = Math.max(Math.min(shifted, 1), 0);
-      return [(x - xmin) / width + shift, yVal];
+      return [(x - xmin) / width + shift, yVal] as Vector2;
     });
   }
   return null;
@@ -220,3 +224,55 @@ export function getOpacityRangeFromPreset(presetName: string) {
   }
   return null;
 }
+
+/**
+ * Applies a set of points to a piecewise function.
+ * @param pwf
+ * @param points
+ * @param range
+ */
+export function applyPointsToPiecewiseFunction(
+  pwf: vtkPiecewiseFunction,
+  points: Vector2[],
+  range: Vector2
+) {
+  const width = range[1] - range[0];
+  const rescaled = points.map(([x, y]) => [x * width + range[0], y]);
+
+  pwf.removeAllPoints();
+  rescaled.forEach(([x, y]) => pwf.addPoint(x, y));
+}
+
+/**
+ * Applies a set of nodes to a piecewise function.
+ * @param nodes
+ * @param range
+ * @param pwf
+ */
+export function applyNodesToPiecewiseFunction(
+  pwf: vtkPiecewiseFunction,
+  nodes: any[],
+  range: Vector2
+) {
+  const width = range[1] - range[0];
+  const rescaled = nodes.map((n) => ({ ...n, x: n.x * width + range[0] }));
+
+  pwf.setNodes(rescaled);
+}
+
+/**
+ * Gets the data array given by the arrayName and arrayLocation.
+ * @param obj
+ * @param arrayName
+ * @param arrayLocation
+ * @returns
+ */
+export function getDataArray(
+  obj: vtkObject,
+  arrayName: string,
+  arrayLocation: 'pointData' | 'cellData'
+) {
+  const field: Maybe<vtkFieldData> = obj.getReferenceByName(arrayLocation);
+  const array = field?.getArrayByName(arrayName);
+  return array;
+}
diff --git a/src/utils/watchCompare.ts b/src/utils/watchCompare.ts
new file mode 100644
index 000000000..5b0c22a16
--- /dev/null
+++ b/src/utils/watchCompare.ts
@@ -0,0 +1,75 @@
+import {
+  WatchCallback,
+  WatchOptions,
+  WatchSource,
+  WatchStopHandle,
+  watch,
+} from "vue";
+
+export interface WatchCompareOptions<Immediate>
+  extends WatchOptions<Immediate> {
+  compare: (a: any, b: any) => boolean;
+}
+
+// Internal Types from vue
+export type MultiWatchSources = (WatchSource<unknown> | object)[];
+
+export type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
+};
+export type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true
+      ? V | undefined
+      : V
+    : never;
+};
+
+// overloads
+export function watchCompare<
+  T extends Readonly<WatchSource<unknown>[]>,
+  Immediate extends Readonly<boolean> = false
+>(
+  sources: [...T],
+  cb: WatchCallback<MapSources<T>, MapOldSources<T, Immediate>>,
+  options?: WatchCompareOptions<Immediate>
+): WatchStopHandle;
+export function watchCompare<T, Immediate extends Readonly<boolean> = false>(
+  source: WatchSource<T>,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchCompareOptions<Immediate>
+): WatchStopHandle;
+export function watchCompare<
+  T extends object,
+  Immediate extends Readonly<boolean> = false
+>(
+  source: T,
+  cb: WatchCallback<T, Immediate extends true ? T | undefined : T>,
+  options?: WatchCompareOptions<Immediate>
+): WatchStopHandle;
+
+export function watchCompare<Immediate extends Readonly<boolean> = false>(
+  sources: any,
+  callback: any,
+  options?: WatchCompareOptions<Immediate>
+): WatchStopHandle {
+  return watch(
+    sources,
+    (newData, oldData, onCleanup) => {
+      let cleanupFn: (() => void) | null = null;
+      const innerOnCleanup = (fn: () => void) => {
+        cleanupFn = fn;
+      };
+      const changed = options?.compare(newData, oldData);
+
+      onCleanup(() => {
+        if (!changed) return;
+        cleanupFn?.();
+      });
+
+      if (changed) return;
+      callback(newData, oldData, innerOnCleanup);
+    },
+    options
+  );
+}

From 02e8e520a2af0b824bd54a0abae9560af4d5e31f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 20 Feb 2024 17:42:54 -0500
Subject: [PATCH 064/113] feat: set shading on all components

---
 .../vtk/VtkBaseVolumeRepresentation.vue       | 40 +++++++++----------
 src/utils/volumeProperties.ts                 | 13 +++---
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index 1f73306d1..afdb0b79b 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -9,8 +9,6 @@ import useVolumeColoringStore, {
   DEFAULT_AMBIENT,
   DEFAULT_DIFFUSE,
   DEFAULT_SPECULAR,
-  DEFAULT_EDGE_GRADIENT,
-  DEFAULT_SAMPLING_DISTANCE,
 } from '@/src/store/view-configs/volume-coloring';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
@@ -18,8 +16,6 @@ import { useVolumeColoringInitializer } from '@/src/composables/useVolumeColorin
 import { isViewAnimatingNew as isViewAnimating } from '@/src/composables/isViewAnimating';
 import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/VolumeProperty/Constants';
 import {
-  setEdgeGradient,
-  setSamplingDistance,
   setCinematicLighting,
   setCinematicLocalAmbientOcclusion,
   setCinematicVolumeSampling,
@@ -67,14 +63,6 @@ rep.property.setSpecular(DEFAULT_SPECULAR);
   onVTKEvent(obj, 'onModified', view.requestRender);
 });
 
-// set initial edge gradient + sampling distance
-watchEffect(() => {
-  if (!imageData.value) return;
-  const dataArray = imageData.value.getPointData().getScalars();
-  setEdgeGradient(rep.property, DEFAULT_EDGE_GRADIENT, dataArray);
-  setSamplingDistance(rep.mapper, DEFAULT_SAMPLING_DISTANCE, imageData.value);
-});
-
 // cinematic volume rendering
 const cvrParams = computed(() => coloringConfig.value?.cvr);
 const center = computed(() =>
@@ -87,7 +75,7 @@ watchEffect(() => {
   if (!cvrParams.value || !image) return;
 
   const {
-    enabled,
+    enabled: cvrEnabled,
     lightFollowsCamera,
     ambient,
     diffuse,
@@ -101,25 +89,34 @@ watchEffect(() => {
   } = cvrParams.value;
   const { property, mapper } = rep;
 
+  const enabled = cvrEnabled && !isAnimating.value;
+  const dataArray = image.getPointData().getScalars();
+
   setCinematicLighting({
     enabled,
     renderer: view.renderer,
     lightFollowsCamera,
     center: center.value,
   });
-  setCinematicVolumeShading({
-    enabled,
-    image,
-    ambient,
-    diffuse,
-    specular,
-    property,
-  });
+
+  for (let comp = 0; comp < dataArray.getNumberOfComponents(); comp++) {
+    setCinematicVolumeShading({
+      enabled,
+      image,
+      ambient,
+      diffuse,
+      specular,
+      property,
+      component: comp,
+    });
+  }
+
   setCinematicVolumeScatter({
     enabled: enabled && useVolumetricScatteringBlending,
     mapper,
     blending: volumetricScatteringBlending,
   });
+
   setCinematicVolumeSampling({
     enabled,
     image,
@@ -127,6 +124,7 @@ watchEffect(() => {
     quality: volumeQuality,
     isAnimating: isAnimating.value,
   });
+
   setCinematicLocalAmbientOcclusion({
     enabled: enabled && useLocalAmbientOcclusion,
     kernelRadius: laoKernelRadius,
diff --git a/src/utils/volumeProperties.ts b/src/utils/volumeProperties.ts
index 105cf4345..34aa92e48 100644
--- a/src/utils/volumeProperties.ts
+++ b/src/utils/volumeProperties.ts
@@ -153,6 +153,7 @@ export interface SetCinematicVolumeShadingParameters {
   ambient: number;
   diffuse: number;
   specular: number;
+  component?: number;
 }
 
 export function setCinematicVolumeShading({
@@ -162,6 +163,7 @@ export function setCinematicVolumeShading({
   ambient,
   diffuse,
   specular,
+  component = 0,
 }: SetCinematicVolumeShadingParameters) {
   property.setScalarOpacityUnitDistance(
     0,
@@ -170,15 +172,15 @@ export function setCinematicVolumeShading({
   );
 
   property.setShade(true);
-  property.setUseGradientOpacity(0, !enabled);
-  property.setGradientOpacityMinimumValue(0, 0.0);
+  property.setUseGradientOpacity(component, !enabled);
+  property.setGradientOpacityMinimumValue(component, 0.0);
   const dataRange = image.getPointData().getScalars().getRange();
   property.setGradientOpacityMaximumValue(
-    0,
+    component,
     (dataRange[1] - dataRange[0]) * 0.01
   );
-  property.setGradientOpacityMinimumOpacity(0, 0.0);
-  property.setGradientOpacityMaximumOpacity(0, 1.0);
+  property.setGradientOpacityMinimumOpacity(component, 0.0);
+  property.setGradientOpacityMaximumOpacity(component, 1.0);
 
   // do not toggle these parameters when animating
   property.setAmbient(enabled ? ambient : DEFAULT_AMBIENT);
@@ -197,6 +199,7 @@ export function setCinematicVolumeScatter({
   mapper,
   blending,
 }: SetCinematicVolumeScatterParameters) {
+  (window as any).am = mapper;
   mapper.setVolumetricScatteringBlending(enabled ? blending : 0);
 }
 

From b1d2726d4758cafedc501ed58d9d4e64fd75152d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 20 Feb 2024 17:52:28 -0500
Subject: [PATCH 065/113] feat(VtkSliceView): zoom to mouse

---
 src/components/vtk/VtkSliceView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index b321ea3c4..1ca2dd022 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -2,7 +2,6 @@
 import { ref, toRefs, computed, provide, toRaw } from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
-import vtkMouseCameraTrackballZoomManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomManipulator';
 import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import { useVtkView } from '@/src/core/vtk/useVtkView';
 import { useImage } from '@/src/composables/useCurrentImage';
@@ -22,6 +21,7 @@ import { useAutoFitState } from '@/src/composables/useAutoFitState';
 import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
+import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
 
 interface Props {
   viewId: string;
@@ -59,7 +59,7 @@ useVtkInteractionManipulator(
 );
 useVtkInteractionManipulator(
   interactorStyle,
-  vtkMouseCameraTrackballZoomManipulator,
+  vtkMouseCameraTrackballZoomToMouseManipulator,
   { button: 3 }
 );
 const { instance: rangeManipulator } = useVtkInteractionManipulator(

From 0b63b71c2549a0dadac3408339e7951a1fdd2fe6 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 20 Feb 2024 22:11:11 -0500
Subject: [PATCH 066/113] fix(useVtkView): ensure non-zero size

---
 src/core/vtk/useVtkView.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index f3219e7eb..a4ad63ba4 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -100,8 +100,10 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
 
   // set size
   const setSize = (width: number, height: number) => {
-    const scaledWidth = width * globalThis.devicePixelRatio;
-    const scaledHeight = height * globalThis.devicePixelRatio;
+    // ensure we have a non-zero size, otherwise
+    // the framebuffers might not be populated correctly
+    const scaledWidth = Math.max(1, width * globalThis.devicePixelRatio);
+    const scaledHeight = Math.max(1, height * globalThis.devicePixelRatio);
     renderWindowView.setSize(scaledWidth, scaledHeight);
     requestRender({ immediate: true });
   };

From de5f8112423c4e9f5e40ef47a17fd3180b72764d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 21 Feb 2024 16:41:58 -0500
Subject: [PATCH 067/113] fix: animation listener should be at viewer level

Also unifies the viewer props via LayoutViewProps.
---
 src/components/SliceVolumeViewer.vue               | 10 ++++++----
 src/components/VolumeViewer.vue                    | 11 ++++++-----
 src/components/vtk/VtkBaseVolumeRepresentation.vue |  8 ++------
 src/composables/useViewAnimationListener.ts        | 10 +++++++---
 src/types/index.ts                                 |  8 ++++++++
 5 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/SliceVolumeViewer.vue b/src/components/SliceVolumeViewer.vue
index 6660569df..88bc73ffd 100644
--- a/src/components/SliceVolumeViewer.vue
+++ b/src/components/SliceVolumeViewer.vue
@@ -66,14 +66,14 @@ import { LPSAxisDir } from '@/src/types/lps';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
+import { LayoutViewProps } from '@/src/types';
 import VtkBaseSliceRepresentation from '@/src/components/vtk/VtkBaseSliceRepresentation.vue';
 import VtkSegmentationSliceRepresentation from '@/src/components/vtk/VtkSegmentationSliceRepresentation.vue';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import VtkLayerSliceRepresentation from '@/src/components/vtk/VtkLayerSliceRepresentation.vue';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 
-interface Props {
-  id: string;
-  viewType: string;
+interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
 }
@@ -82,7 +82,7 @@ const vtkView = ref<VtkViewApi>();
 
 const props = defineProps<Props>();
 
-const { viewDirection, viewUp } = toRefs(props);
+const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
 const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
 const hover = ref(false);
@@ -92,6 +92,8 @@ function resetCamera() {
   vtkView.value.resetCamera();
 }
 
+useViewAnimationListener(vtkView, viewId, viewType);
+
 // base image
 const { currentImageID, currentLayers } = useCurrentImage();
 
diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index 3f8688447..ef9b50db1 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -25,7 +25,6 @@
         >
           <vtk-base-volume-representation
             :view-id="id"
-            :view-type="type"
             :image-id="currentImageID"
           ></vtk-base-volume-representation>
           <slot></slot>
@@ -41,11 +40,11 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { LPSAxisDir } from '@/src/types/lps';
 import VtkVolumeView from '@/src/components/vtk/VtkVolumeView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
+import { LayoutViewProps } from '@/src/types';
 import VtkBaseVolumeRepresentation from '@/src/components/vtk/VtkBaseVolumeRepresentation.vue';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 
-interface Props {
-  id: string;
-  type: string;
+interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
 }
@@ -54,13 +53,15 @@ const vtkView = ref<VtkViewApi>();
 
 const props = defineProps<Props>();
 
-const { viewDirection, viewUp } = toRefs(props);
+const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
 
 function resetCamera() {
   if (!vtkView.value) return;
   vtkView.value.resetCamera();
 }
 
+useViewAnimationListener(vtkView, viewId, viewType);
+
 // base image
 const { currentImageID } = useCurrentImage();
 </script>
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index afdb0b79b..ae18b27fc 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -23,24 +23,20 @@ import {
   setCinematicVolumeShading,
 } from '@/src/utils/volumeProperties';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import { vtkObject } from '@kitware/vtk.js/interfaces';
+import type { vtkObject } from '@kitware/vtk.js/interfaces';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 
 interface Props {
   viewId: string;
-  viewType: string;
   imageId: Maybe<string>;
 }
 
 const props = defineProps<Props>();
-const { viewId: viewID, imageId: imageID, viewType } = toRefs(props);
+const { viewId: viewID, imageId: imageID } = toRefs(props);
 
 const view = inject(VtkViewContext);
 if (!view) throw new Error('No VtkView');
 
-useViewAnimationListener(view, viewID, viewType);
-
 const { imageData, metadata: imageMetadata } = useImage(imageID);
 const coloringConfig = computed(() =>
   useVolumeColoringStore().getConfig(viewID.value, imageID.value)
diff --git a/src/composables/useViewAnimationListener.ts b/src/composables/useViewAnimationListener.ts
index 27e40fbc3..680bf9472 100644
--- a/src/composables/useViewAnimationListener.ts
+++ b/src/composables/useViewAnimationListener.ts
@@ -2,11 +2,12 @@ import { View } from '@/src/core/vtk/useVtkView';
 import useViewAnimationStore, {
   matchesViewFilter,
 } from '@/src/store/view-animation';
+import { Maybe } from '@/src/types';
 import { storeToRefs } from 'pinia';
 import { MaybeRef, computed, unref, watchEffect } from 'vue';
 
 export function useViewAnimationListener(
-  view: View,
+  view: MaybeRef<Maybe<View>>,
   viewId: MaybeRef<string>,
   viewType: MaybeRef<string>
 ) {
@@ -19,11 +20,14 @@ export function useViewAnimationListener(
   let requested = false;
 
   watchEffect(() => {
+    const viewVal = unref(view);
+    if (!viewVal) return;
+
     if (!animating.value) {
-      view.interactor.cancelAnimation(store);
+      viewVal.interactor.cancelAnimation(store);
       requested = false;
     } else if (!requested && canAnimate.value) {
-      view.interactor.requestAnimation(store);
+      viewVal.interactor.requestAnimation(store);
       requested = true;
     }
   });
diff --git a/src/types/index.ts b/src/types/index.ts
index ff53e745e..9cf7311eb 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -61,3 +61,11 @@ export type DeepPartial<T> = T extends object
 export type FirstParam<T> = T extends (first: infer R, ...args: any[]) => any
   ? R
   : never;
+
+/**
+ * The props passed to components when used as part of the LayoutGrid.
+ */
+export interface LayoutViewProps {
+  id: string;
+  type: string;
+}

From cd6670c2bcd81d39082a99dbc854952bd964cbe3 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 21 Feb 2024 16:44:42 -0500
Subject: [PATCH 068/113] fix(VtkViewApi): interactorStyle is optional

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

diff --git a/src/types/vtk-types.ts b/src/types/vtk-types.ts
index 197540959..2cc05a9d4 100644
--- a/src/types/vtk-types.ts
+++ b/src/types/vtk-types.ts
@@ -22,6 +22,6 @@ export interface vtkWriter extends vtkObject {
 export type vtkLPSViewProxy = vtkLPSView2DProxy | vtkLPSView3DProxy;
 
 export interface VtkViewApi extends View {
-  interactorStyle: vtkInteractorStyle;
+  interactorStyle?: vtkInteractorStyle;
   resetCamera(): void;
 }

From 47183fddd217aaa2a3badd103ec5df39978002b6 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 21 Feb 2024 16:48:14 -0500
Subject: [PATCH 069/113] feat: support disabling auto camera reset

---
 src/components/vtk/VtkSliceView.vue  | 16 +++++++++++++---
 src/components/vtk/VtkVolumeView.vue | 11 +++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 1ca2dd022..0d0f1715f 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -28,14 +28,18 @@ interface Props {
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
+  disableAutoResetCamera?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  disableAutoResetCamera: false,
+});
 const {
   viewId: viewID,
   imageId: imageID,
   viewDirection,
   viewUp,
+  disableAutoResetCamera,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
@@ -125,7 +129,10 @@ function autoFitImage() {
   });
 }
 
-useResizeObserver(vtkContainerRef, autoFitImage);
+useResizeObserver(vtkContainerRef, () => {
+  if (disableAutoResetCamera.value) return;
+  autoFitImage();
+});
 
 function resetCamera() {
   autoFit.value = true;
@@ -140,7 +147,10 @@ function resetCamera() {
   });
 }
 
-watchImmediate([viewID, imageID], resetCamera);
+watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
+  if (noAutoReset) return;
+  resetCamera();
+});
 
 // persistent camera config
 usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
diff --git a/src/components/vtk/VtkVolumeView.vue b/src/components/vtk/VtkVolumeView.vue
index f4990a3bb..6ed2d8127 100644
--- a/src/components/vtk/VtkVolumeView.vue
+++ b/src/components/vtk/VtkVolumeView.vue
@@ -30,14 +30,18 @@ interface Props {
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
+  disableAutoResetCamera?: boolean;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  disableAutoResetCamera: false,
+});
 const {
   viewId: viewID,
   imageId: imageID,
   viewDirection,
   viewUp,
+  disableAutoResetCamera,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
@@ -91,7 +95,10 @@ function resetCamera() {
   );
 }
 
-watchImmediate([viewID, imageID], resetCamera);
+watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
+  if (noAutoReset) return;
+  resetCamera();
+});
 
 // persistent camera config
 usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());

From 39db5648a9ff3f7dcc34d92a14907535ccbbf646 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 23 Feb 2024 10:07:27 -0500
Subject: [PATCH 070/113] refactor: rename to VolumeSliceViewer

---
 src/components/{SliceVolumeViewer.vue => VolumeSliceViewer.vue} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{SliceVolumeViewer.vue => VolumeSliceViewer.vue} (100%)

diff --git a/src/components/SliceVolumeViewer.vue b/src/components/VolumeSliceViewer.vue
similarity index 100%
rename from src/components/SliceVolumeViewer.vue
rename to src/components/VolumeSliceViewer.vue

From 062e66a35eb9c30aa16e4a7f5eed64b845a76d3f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 23 Feb 2024 10:08:02 -0500
Subject: [PATCH 071/113] fix: markRaw instead of toRaw

---
 src/components/vtk/VtkSliceView.vue  | 4 ++--
 src/components/vtk/VtkVolumeView.vue | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 0d0f1715f..06fbc10b4 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs, computed, provide, toRaw } from 'vue';
+import { ref, toRefs, computed, provide, markRaw } from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
@@ -156,7 +156,7 @@ watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
 usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
 
 // exposed API
-const api: VtkViewApi = toRaw({
+const api: VtkViewApi = markRaw({
   ...view,
   interactorStyle,
   resetCamera,
diff --git a/src/components/vtk/VtkVolumeView.vue b/src/components/vtk/VtkVolumeView.vue
index 6ed2d8127..59f538b58 100644
--- a/src/components/vtk/VtkVolumeView.vue
+++ b/src/components/vtk/VtkVolumeView.vue
@@ -4,7 +4,7 @@ import {
   toRefs,
   provide,
   watchEffect,
-  toRaw,
+  markRaw,
   effectScope,
   onUnmounted,
 } from 'vue';
@@ -104,7 +104,7 @@ watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
 usePersistCameraConfig(viewID, imageID, view.renderer.getActiveCamera());
 
 // exposed API
-const api: VtkViewApi = toRaw({
+const api: VtkViewApi = markRaw({
   ...view,
   interactorStyle,
   resetCamera,

From fe2a320329dd3acfd2e46d53e618206d56b9dc5d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 23 Feb 2024 12:03:07 -0500
Subject: [PATCH 072/113] feat(VtkSliceView): accept optional slice range

---
 src/components/vtk/VtkSliceView.vue          | 5 ++++-
 src/composables/useSliceConfigInitializer.ts | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 06fbc10b4..acffe9c0a 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -22,6 +22,7 @@ import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
+import type { vtkRange } from '@kitware/vtk.js/interfaces';
 
 interface Props {
   viewId: string;
@@ -29,6 +30,7 @@ interface Props {
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
   disableAutoResetCamera?: boolean;
+  sliceRange?: vtkRange;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -40,6 +42,7 @@ const {
   viewDirection,
   viewUp,
   disableAutoResetCamera,
+  sliceRange,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
@@ -81,7 +84,7 @@ const computeStep = (range: Vector2) => {
 };
 const wlStep = computed(() => computeStep(wlConfig.range.value));
 
-useSliceConfigInitializer(viewID, imageID, viewDirection);
+useSliceConfigInitializer(viewID, imageID, viewDirection, sliceRange?.value);
 useWindowingConfigInitializer(viewID, imageID);
 
 const horiz = useMouseRangeManipulatorListener(
diff --git a/src/composables/useSliceConfigInitializer.ts b/src/composables/useSliceConfigInitializer.ts
index 283e2a3c9..b4db5d5c2 100644
--- a/src/composables/useSliceConfigInitializer.ts
+++ b/src/composables/useSliceConfigInitializer.ts
@@ -4,6 +4,7 @@ import useViewSliceStore from '@/src/store/view-configs/slicing';
 import { Maybe } from '@/src/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
+import type { vtkRange } from '@kitware/vtk.js/interfaces';
 import { watchImmediate } from '@vueuse/core';
 import { MaybeRef, computed, toRef, unref } from 'vue';
 
@@ -11,7 +12,7 @@ export function useSliceConfigInitializer(
   viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>,
   viewDirection: MaybeRef<LPSAxisDir>,
-  slicingDomain?: MaybeRef<{ min: number; max: number }>
+  slicingDomain?: MaybeRef<vtkRange>
 ) {
   const store = useViewSliceStore();
   const { config: sliceConfig } = useSliceConfig(viewID, imageID);

From e70f19bf860016214baf1b1fade03e58dd312477 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 23 Feb 2024 15:06:20 -0500
Subject: [PATCH 073/113] feat(useVtkView): add widget manager

---
 src/core/vtk/useVtkView.ts | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index a4ad63ba4..967759b1e 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -5,6 +5,7 @@ import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { useElementSize } from '@vueuse/core';
 import {
   MaybeRef,
@@ -23,6 +24,7 @@ export interface View {
   renderer: vtkRenderer;
   interactor: vtkRenderWindowInteractor;
   renderWindowView: vtkOpenGLRenderWindow;
+  widgetManager: vtkWidgetManager;
   requestRender(opts?: RequestRenderOptions): void;
 }
 
@@ -46,6 +48,21 @@ export function useWebGLRenderWindow(container: MaybeRef<Maybe<HTMLElement>>) {
   return renderWindowView;
 }
 
+export function useWidgetManager(renderer: vtkRenderer) {
+  const manager = vtkWidgetManager.newInstance();
+  manager.setRenderer(renderer);
+
+  onVTKEvent(manager, 'onModified', () => {
+    if (manager.getWidgets().length) {
+      manager.enablePicking();
+    } else {
+      manager.disablePicking();
+    }
+  });
+
+  return manager;
+}
+
 export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
   const renderer = vtkRenderer.newInstance();
   const renderWindow = vtkRenderWindow.newInstance();
@@ -75,6 +92,9 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
     });
   });
 
+  // widget manager
+  const widgetManager = useWidgetManager(renderer);
+
   // render API
   const deferredRender = batchForNextTask(() => {
     // don't need to re-render during animation
@@ -127,6 +147,7 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
     renderWindow,
     interactor,
     renderWindowView,
+    widgetManager,
     requestRender,
   };
 }

From 6816b6866d7ab135f812f51ed8df6594381c4081 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 26 Feb 2024 17:40:41 -0500
Subject: [PATCH 074/113] refactor(types): move View type

---
 src/composables/isViewAnimating.ts          |  2 +-
 src/composables/useViewAnimationListener.ts |  2 +-
 src/core/vtk/types.ts                       | 19 +++++++++++++++++++
 src/core/vtk/useSliceRepresentation.ts      |  2 +-
 src/core/vtk/useVolumeRepresentation.ts     |  2 +-
 src/core/vtk/useVtkInteractorStyle.ts       |  2 +-
 src/core/vtk/useVtkRepresentation.ts        |  3 +--
 src/core/vtk/useVtkView.ts                  | 14 +-------------
 src/types/vtk-types.ts                      |  2 +-
 src/utils/camera.ts                         |  2 +-
 10 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/composables/isViewAnimating.ts b/src/composables/isViewAnimating.ts
index dd29c938a..d6acdab3c 100644
--- a/src/composables/isViewAnimating.ts
+++ b/src/composables/isViewAnimating.ts
@@ -2,7 +2,7 @@ import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { computed, ref, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 
 export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
   const isAnimating = ref(false);
diff --git a/src/composables/useViewAnimationListener.ts b/src/composables/useViewAnimationListener.ts
index 680bf9472..3f49941a3 100644
--- a/src/composables/useViewAnimationListener.ts
+++ b/src/composables/useViewAnimationListener.ts
@@ -1,4 +1,4 @@
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 import useViewAnimationStore, {
   matchesViewFilter,
 } from '@/src/store/view-animation';
diff --git a/src/core/vtk/types.ts b/src/core/vtk/types.ts
index 73082dcff..8d6cf1342 100644
--- a/src/core/vtk/types.ts
+++ b/src/core/vtk/types.ts
@@ -1,3 +1,22 @@
+import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+
 export type VtkObjectConstructor<T> = {
   newInstance(props?: any): T;
 };
+
+export interface RequestRenderOptions {
+  immediate?: boolean;
+}
+
+export interface View {
+  renderWindow: vtkRenderWindow;
+  renderer: vtkRenderer;
+  interactor: vtkRenderWindowInteractor;
+  renderWindowView: vtkOpenGLRenderWindow;
+  widgetManager: vtkWidgetManager;
+  requestRender(opts?: RequestRenderOptions): void;
+}
diff --git a/src/core/vtk/useSliceRepresentation.ts b/src/core/vtk/useSliceRepresentation.ts
index 859284928..2ac5cc5a1 100644
--- a/src/core/vtk/useSliceRepresentation.ts
+++ b/src/core/vtk/useSliceRepresentation.ts
@@ -4,7 +4,7 @@ import vtkImageMapper from '@kitware/vtk.js/Rendering/Core/ImageMapper';
 import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
 import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
 import { Maybe } from '@/src/types';
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 
 export function useSliceRepresentation(
   view: View,
diff --git a/src/core/vtk/useVolumeRepresentation.ts b/src/core/vtk/useVolumeRepresentation.ts
index 085736603..2996aaa67 100644
--- a/src/core/vtk/useVolumeRepresentation.ts
+++ b/src/core/vtk/useVolumeRepresentation.ts
@@ -2,7 +2,7 @@ import { MaybeRef } from 'vue';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
 import { Maybe } from '@/src/types';
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 import vtkVolume from '@kitware/vtk.js/Rendering/Core/Volume';
 import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 
diff --git a/src/core/vtk/useVtkInteractorStyle.ts b/src/core/vtk/useVtkInteractorStyle.ts
index 57c982a25..54254f616 100644
--- a/src/core/vtk/useVtkInteractorStyle.ts
+++ b/src/core/vtk/useVtkInteractorStyle.ts
@@ -2,7 +2,7 @@ import { VtkObjectConstructor } from '@/src/core/vtk/types';
 import vtkInteractorStyle from '@kitware/vtk.js/Rendering/Core/InteractorStyle';
 import { vtkWarningMacro } from '@kitware/vtk.js/macros';
 import { onScopeDispose } from 'vue';
-import type { View } from '@/src/core/vtk/useVtkView';
+import type { View } from '@/src/core/vtk/types';
 
 export function useVtkInteractorStyle<T extends vtkInteractorStyle>(
   vtkCtor: VtkObjectConstructor<T>,
diff --git a/src/core/vtk/useVtkRepresentation.ts b/src/core/vtk/useVtkRepresentation.ts
index ba9ce65e9..65778cb67 100644
--- a/src/core/vtk/useVtkRepresentation.ts
+++ b/src/core/vtk/useVtkRepresentation.ts
@@ -2,8 +2,7 @@ import { MaybeRef, onScopeDispose, unref, watchEffect } from 'vue';
 import { vtkObject } from '@kitware/vtk.js/interfaces';
 import vtkAbstractMapper from '@kitware/vtk.js/Rendering/Core/AbstractMapper';
 import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
-import { VtkObjectConstructor } from '@/src/core/vtk/types';
-import { View } from '@/src/core/vtk/useVtkView';
+import type { View, VtkObjectConstructor } from '@/src/core/vtk/types';
 import { Maybe } from '@/src/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index 967759b1e..e37d3c113 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -1,4 +1,5 @@
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { View } from '@/src/core/vtk/types';
 import { Maybe } from '@/src/types';
 import { batchForNextTask } from '@/src/utils/batchForNextTask';
 import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
@@ -15,19 +16,6 @@ import {
   watchPostEffect,
 } from 'vue';
 
-export interface RequestRenderOptions {
-  immediate?: boolean;
-}
-
-export interface View {
-  renderWindow: vtkRenderWindow;
-  renderer: vtkRenderer;
-  interactor: vtkRenderWindowInteractor;
-  renderWindowView: vtkOpenGLRenderWindow;
-  widgetManager: vtkWidgetManager;
-  requestRender(opts?: RequestRenderOptions): void;
-}
-
 export function useWebGLRenderWindow(container: MaybeRef<Maybe<HTMLElement>>) {
   const renderWindowView = vtkOpenGLRenderWindow.newInstance();
 
diff --git a/src/types/vtk-types.ts b/src/types/vtk-types.ts
index 2cc05a9d4..77625a506 100644
--- a/src/types/vtk-types.ts
+++ b/src/types/vtk-types.ts
@@ -1,6 +1,6 @@
 import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
 import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 import vtkInteractorStyle from '@kitware/vtk.js/Rendering/Core/InteractorStyle';
 import vtkLPSView2DProxy from '../vtk/LPSView2DProxy';
 import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index fda93f7db..d04f3b442 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -1,4 +1,4 @@
-import { View } from '@/src/core/vtk/useVtkView';
+import { View } from '@/src/core/vtk/types';
 import { ImageMetadata } from '@/src/types/image';
 import { LPSAxisDir } from '@/src/types/lps';
 import { getLPSAxisFromDir, getLPSDirections } from '@/src/utils/lps';

From b9b6e7b2d2bde8044b0f99edb9860aa72260c726 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 26 Feb 2024 19:14:59 -0500
Subject: [PATCH 075/113] fix(vtkView): noAutoReset always truthy

---
 src/components/vtk/VtkSliceView.vue  | 2 +-
 src/components/vtk/VtkVolumeView.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index acffe9c0a..558d04a29 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -150,7 +150,7 @@ function resetCamera() {
   });
 }
 
-watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
+watchImmediate([disableAutoResetCamera, viewID, imageID], ([noAutoReset]) => {
   if (noAutoReset) return;
   resetCamera();
 });
diff --git a/src/components/vtk/VtkVolumeView.vue b/src/components/vtk/VtkVolumeView.vue
index 59f538b58..36746785b 100644
--- a/src/components/vtk/VtkVolumeView.vue
+++ b/src/components/vtk/VtkVolumeView.vue
@@ -95,7 +95,7 @@ function resetCamera() {
   );
 }
 
-watchImmediate([disableAutoResetCamera, viewID, imageID], (noAutoReset) => {
+watchImmediate([disableAutoResetCamera, viewID, imageID], ([noAutoReset]) => {
   if (noAutoReset) return;
   resetCamera();
 });

From ee1dbb55a8d75cf5273c454b2b30421e875d511e Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 26 Feb 2024 19:15:31 -0500
Subject: [PATCH 076/113] fix(SliceView): run useVtkView in effect scope

---
 src/components/vtk/VtkSliceView.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 558d04a29..68eb880b8 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { ref, toRefs, computed, provide, markRaw } from 'vue';
+import {
+  ref,
+  toRefs,
+  computed,
+  provide,
+  markRaw,
+  effectScope,
+  onUnmounted,
+} from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
@@ -49,7 +57,14 @@ const vtkContainerRef = ref<HTMLElement>();
 
 const { metadata: imageMetadata } = useImage(imageID);
 
-const view = useVtkView(vtkContainerRef);
+// use a detached scope so that actors can be removed from
+// the renderer before the renderer is deleted.
+const scope = effectScope(true);
+const view = scope.run(() => useVtkView(vtkContainerRef))!;
+onUnmounted(() => {
+  scope.stop();
+});
+
 view.renderer.setBackground(0, 0, 0);
 view.renderer.getActiveCamera().setParallelProjection(true);
 

From c976a3b3eeb73e1decb9e5702c8867261d97fc63 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 27 Feb 2024 00:45:45 -0500
Subject: [PATCH 077/113] fix(vtkFieldRef): batch onModified to next task

- Ensure that onModified does not immediately trigger a ref. This
  prevents triggerRef from being called as a result of a setter,
  potentially inside an effect scope.
- Pause calls to onModified when calling setters.
---
 src/core/vtk/vtkFieldRef.ts | 32 +++++++++++++++++++++++---------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/core/vtk/vtkFieldRef.ts b/src/core/vtk/vtkFieldRef.ts
index d32a3d87b..6bd4fafad 100644
--- a/src/core/vtk/vtkFieldRef.ts
+++ b/src/core/vtk/vtkFieldRef.ts
@@ -1,7 +1,8 @@
 import { MaybeRef, Ref, computed, customRef, triggerRef, unref } from 'vue';
 import { vtkObject } from '@kitware/vtk.js/interfaces';
 import { capitalize } from '@kitware/vtk.js/macros';
-import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
 
 type NonEmptyString<T extends string> = T extends '' ? never : T;
 
@@ -35,6 +36,9 @@ export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
     () => unref(obj)[setterName] as ((v: any) => boolean) | undefined
   );
 
+  let pause: () => void;
+  let resume: () => void;
+
   const ref = customRef<GetterReturnType<T, F>>((track, trigger) => {
     return {
       get: () => {
@@ -46,11 +50,17 @@ export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
         if (!set) throw new Error(`No setter for field '${fieldName}'`);
 
         let changed = false;
-        // handle certain array setters not accepting an array as input
-        if (Array.isArray(v) && set.length === v.length) {
-          changed = (set as ArraySetter)(...v);
-        } else {
-          changed = set(v);
+        pause();
+
+        try {
+          // handle certain array setters not accepting an array as input
+          if (Array.isArray(v) && set.length === v.length) {
+            changed = (set as ArraySetter)(...v);
+          } else {
+            changed = set(v);
+          }
+        } finally {
+          resume();
         }
 
         // in the event a setter returns undefined, assume something changed.
@@ -61,11 +71,15 @@ export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
     };
   });
 
-  const onModified = () => {
+  const onModified = batchForNextTask(() => {
     triggerRef(ref);
-  };
+  });
 
-  onVTKEvent(obj as vtkObject, 'onModified', onModified);
+  ({ pause, resume } = onPausableVTKEvent(
+    obj as vtkObject,
+    'onModified',
+    onModified
+  ));
 
   return ref;
 }

From 474e56007d4e3ea33014a9373dc2c6cb5f52c07f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 27 Feb 2024 11:00:10 -0500
Subject: [PATCH 078/113] feat(vtkFieldRef): support custom set/get

---
 src/core/vtk/vtkFieldRef.ts | 79 ++++++++++++++++++++++++++-----------
 1 file changed, 57 insertions(+), 22 deletions(-)

diff --git a/src/core/vtk/vtkFieldRef.ts b/src/core/vtk/vtkFieldRef.ts
index 6bd4fafad..ac5cbf95d 100644
--- a/src/core/vtk/vtkFieldRef.ts
+++ b/src/core/vtk/vtkFieldRef.ts
@@ -22,49 +22,84 @@ type GetterReturnType<T, F extends string> = NameToGetter<F> extends keyof T
 
 type ArraySetter = (...args: any[]) => boolean;
 
+export type GetterSetterFactory<T> = {
+  get(): T;
+  set(v: T): boolean | undefined;
+};
+
+/**
+ * A custom set/get vtk object ref that operates based on the given field name.
+ * @param obj
+ * @param fieldName
+ */
 export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
   obj: MaybeRef<T>,
   fieldName: F
-): Ref<GetterReturnType<T, F>> {
-  const getterName = `get${capitalize(fieldName)}` as keyof T;
-  const setterName = `set${capitalize(fieldName)}` as keyof T;
+): Ref<GetterReturnType<T, F>>;
+
+/**
+ * A customRef wrapper that triggers the ref based on a vtk object modification event.
+ * @param obj
+ * @param factory
+ */
+export function vtkFieldRef<T extends vtkObject, R>(
+  obj: MaybeRef<T>,
+  factory: GetterSetterFactory<R>
+): Ref<R>;
 
-  const getter = computed(
-    () => unref(obj)[getterName] as () => GetterReturnType<T, F>
-  );
-  const setter = computed(
-    () => unref(obj)[setterName] as ((v: any) => boolean) | undefined
-  );
+export function vtkFieldRef<T extends vtkObject>(
+  obj: MaybeRef<T>,
+  fieldNameOrFactory: string | GetterSetterFactory<any>
+): any {
+  let getter: () => any;
+  let setter: (v: any) => boolean | undefined;
+
+  if (typeof fieldNameOrFactory === 'string') {
+    const getterName = `get${capitalize(fieldNameOrFactory)}` as keyof T;
+    const setterName = `set${capitalize(fieldNameOrFactory)}` as keyof T;
+
+    const _getter = computed(() => unref(obj)[getterName] as () => any);
+    const _setter = computed(
+      () => unref(obj)[setterName] as ((...args: any[]) => boolean) | undefined
+    );
+
+    getter = () => _getter.value();
+    setter = (v: any) => {
+      const set = _setter.value;
+      if (!set) throw new Error(`No setter for field '${fieldNameOrFactory}'`);
+      // handle certain array setters not accepting an array as input
+      if (Array.isArray(v) && set.length === v.length) {
+        return (set as ArraySetter)(...v);
+      }
+      return set(v);
+    };
+  } else {
+    getter = fieldNameOrFactory.get;
+    setter = fieldNameOrFactory.set;
+  }
 
   let pause: () => void;
   let resume: () => void;
 
-  const ref = customRef<GetterReturnType<T, F>>((track, trigger) => {
+  const ref = customRef<any>((track, trigger) => {
     return {
       get: () => {
         track();
-        return getter.value();
+        return getter();
       },
       set: (v) => {
-        const set = setter.value;
-        if (!set) throw new Error(`No setter for field '${fieldName}'`);
-
         let changed = false;
         pause();
 
         try {
-          // handle certain array setters not accepting an array as input
-          if (Array.isArray(v) && set.length === v.length) {
-            changed = (set as ArraySetter)(...v);
-          } else {
-            changed = set(v);
-          }
+          const ret = setter(v);
+          // in the event a setter returns undefined, assume something changed.
+          changed = ret === undefined ? true : ret;
         } finally {
           resume();
         }
 
-        // in the event a setter returns undefined, assume something changed.
-        if (changed === true || changed === undefined) {
+        if (changed) {
           trigger();
         }
       },

From e61f3c3f870277fec57b01508922a03a068c39c5 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 27 Feb 2024 11:05:15 -0500
Subject: [PATCH 079/113] fix(useVtkView): incorrect widgetmanager handling

---
 src/core/vtk/useVtkView.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index e37d3c113..216ae3235 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -40,13 +40,18 @@ export function useWidgetManager(renderer: vtkRenderer) {
   const manager = vtkWidgetManager.newInstance();
   manager.setRenderer(renderer);
 
-  onVTKEvent(manager, 'onModified', () => {
-    if (manager.getWidgets().length) {
+  const updatePickingState = () => {
+    const enabled = manager.getPickingEnabled();
+    const widgetCount = manager.getWidgets().length;
+    if (!enabled && widgetCount) {
       manager.enablePicking();
-    } else {
+    } else if (enabled && !widgetCount) {
       manager.disablePicking();
     }
-  });
+  };
+
+  onVTKEvent(manager, 'onModified', updatePickingState);
+  updatePickingState();
 
   return manager;
 }
@@ -67,13 +72,13 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
   // interactor
   const interactor = vtkRenderWindowInteractor.newInstance();
   renderWindow.setInteractor(interactor);
+  interactor.setView(renderWindowView);
 
   watchPostEffect((onCleanup) => {
     const el = unref(container);
     if (!el) return;
 
     interactor.initialize();
-    interactor.setView(renderWindowView);
     interactor.bindEvents(el);
     onCleanup(() => {
       if (interactor.getContainer()) interactor.unbindEvents();
@@ -87,6 +92,7 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
   const deferredRender = batchForNextTask(() => {
     // don't need to re-render during animation
     if (interactor.isAnimating()) return;
+    widgetManager.renderWidgets();
     renderWindow.render();
   });
 

From 16b11ed41e7e0ec31382cc3fcba111c0f53d82bf Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 27 Feb 2024 11:27:08 -0500
Subject: [PATCH 080/113] feat(ObliqueSliceViewer): migrate oblique 2D view

---
 src/components/ObliqueSliceViewer.vue         | 223 ++++++++++++++++++
 src/components/tools/ResliceCursorToolNew.vue | 104 ++++++++
 .../vtk/VtkBaseObliqueSliceRepresentation.vue |  78 ++++++
 src/core/vtk/onViewMounted.ts                 |  36 +++
 src/core/vtk/useResliceRepresentation.ts      |  21 ++
 src/shims-vtk.d.ts                            |   2 +
 src/store/reslice-cursor.ts                   |  72 ++++++
 7 files changed, 536 insertions(+)
 create mode 100644 src/components/ObliqueSliceViewer.vue
 create mode 100644 src/components/tools/ResliceCursorToolNew.vue
 create mode 100644 src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
 create mode 100644 src/core/vtk/onViewMounted.ts
 create mode 100644 src/core/vtk/useResliceRepresentation.ts
 create mode 100644 src/store/reslice-cursor.ts

diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
new file mode 100644
index 000000000..3ad97a863
--- /dev/null
+++ b/src/components/ObliqueSliceViewer.vue
@@ -0,0 +1,223 @@
+<template>
+  <div
+    class="vtk-container-wrapper"
+    tabindex="0"
+    @pointerenter="hover = true"
+    @pointerleave="hover = false"
+    @focusin="hover = true"
+    @focusout="hover = false"
+  >
+    <div class="vtk-gutter"></div>
+    <div class="vtk-container">
+      <div class="vtk-sub-container">
+        <vtk-slice-view
+          class="vtk-view"
+          ref="vtkView"
+          data-testid="vtk-view"
+          :view-id="id"
+          :image-id="currentImageID"
+          :view-direction="viewDirection"
+          :view-up="viewUp"
+          :slice-range="sliceDomain"
+        >
+          <vtk-base-oblique-slice-representation
+            :view-id="id"
+            :image-id="currentImageID"
+            :plane-normal="planeNormal"
+            :plane-origin="planeOrigin"
+          ></vtk-base-oblique-slice-representation>
+          <reslice-cursor-tool
+            :view-id="id"
+            :view-direction="viewDirection"
+          ></reslice-cursor-tool>
+          <slot></slot>
+        </vtk-slice-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed, watchEffect } from 'vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { LPSAxisDir } from '@/src/types/lps';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { LayoutViewProps } from '@/src/types';
+import VtkBaseObliqueSliceRepresentation from '@/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import useResliceCursorStore from '@/src/store/reslice-cursor';
+import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { watchImmediate } from '@vueuse/core';
+import { vec3 } from 'gl-matrix';
+import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import ResliceCursorTool from '@/src/components/tools/ResliceCursorToolNew.vue';
+import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+
+interface Props extends LayoutViewProps {
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+}
+
+const vtkView = ref<VtkViewApi>();
+
+const props = defineProps<Props>();
+
+const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
+const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+
+const hover = ref(false);
+
+useViewAnimationListener(vtkView, viewId, viewType);
+
+// base image
+const { currentImageID, currentImageData, currentImageMetadata } =
+  useCurrentImage();
+
+// reslice cursor
+const resliceStore = useResliceCursorStore();
+const { resliceCursor, resliceCursorState } = resliceStore;
+
+const widgetViewType = computed(() => {
+  switch (viewAxis.value) {
+    case 'Coronal':
+      return ViewTypes.XZ_PLANE;
+    case 'Sagittal':
+      return ViewTypes.YZ_PLANE;
+    case 'Axial':
+      return ViewTypes.XY_PLANE;
+    default:
+      throw new Error(`Invalid view axis: ${viewAxis.value}`);
+  }
+});
+
+watchEffect(() => {
+  if (currentImageData.value) {
+    resliceCursor.setImage(currentImageData.value);
+  }
+});
+
+// setup plane origin/normal
+const planeOrigin = vtkFieldRef(resliceCursorState, {
+  get: () => resliceCursorState.getCenter(),
+  set: (v) => resliceCursor.setCenter(v),
+});
+const planes = vtkFieldRef(resliceCursorState, 'planes');
+const planeNormal = computed(() => planes.value[widgetViewType.value].normal);
+
+// slicing domain/range
+
+// 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(
+  cornerPoints: number[][],
+  sliceNormal: number[]
+): [number, number] {
+  if (!cornerPoints || !sliceNormal) return [0, 1];
+
+  // Get rotation matrix from normal to +X (since bounds is aligned to XYZ)
+  const transform = vtkMatrixBuilder
+    .buildFromDegree()
+    .identity()
+    .rotateFromDirections(sliceNormal, [1, 0, 0]);
+
+  const corners = cornerPoints.map((x) => x.slice());
+  corners.forEach((pt) => transform.apply(pt));
+
+  // range is now maximum X distance
+  let minX = Infinity;
+  let maxX = -Infinity;
+  for (let i = 0; i < 8; i++) {
+    const x = corners[i][0];
+    if (x > maxX) {
+      maxX = x;
+    }
+    if (x < minX) {
+      minX = x;
+    }
+  }
+
+  return [minX, maxX];
+}
+
+const imageCorners = computed(() => {
+  const image = currentImageData.value;
+  const [xmin, xmax, ymin, ymax, zmin, zmax] = image?.getExtent() ?? [
+    0, 1, 0, 1, 0, 1,
+  ];
+  const corners = [
+    [xmin, ymin, zmin],
+    [xmax, ymin, zmin],
+    [xmin, ymax, zmin],
+    [xmax, ymax, zmin],
+    [xmin, ymin, zmax],
+    [xmax, ymin, zmax],
+    [xmin, ymax, zmax],
+    [xmax, ymax, zmax],
+  ];
+  corners.forEach((p) => image?.indexToWorld(p as vec3, p as vec3));
+  return corners;
+});
+
+const sliceDomain = computed(() => {
+  const [...sliceNormal] = planeNormal.value;
+  const range = slicePlaneRange(imageCorners?.value, sliceNormal);
+  return {
+    min: range[0],
+    max: range[1],
+  };
+});
+
+// the core update camera function
+const updateResliceCamera = (resetFocalPoint: boolean) => {
+  if (!vtkView.value || !resliceCursorState.getImage()) return;
+  resliceCursor.updateCameraPoints(
+    vtkView.value.renderer,
+    widgetViewType.value,
+    resetFocalPoint,
+    false,
+    true
+  );
+};
+
+// reset camera logic
+function resetCamera() {
+  if (!vtkView.value) return;
+
+  const metadata = currentImageMetadata.value;
+  resliceStore.resetReslicePlanes(metadata);
+
+  const { worldBounds } = metadata;
+  planeOrigin.value = vtkBoundingBox.getCenter(worldBounds);
+  console.log('center', planeOrigin.value);
+  resliceCursorState.placeWidget(worldBounds);
+
+  vtkView.value.resetCamera();
+  updateResliceCamera(false);
+
+  vtkView.value.requestRender();
+}
+
+useResetViewsEvents().onClick(resetCamera);
+
+// update the camera
+onVTKEvent(
+  resliceCursorState,
+  'onModified',
+  batchForNextTask(() => {
+    updateResliceCamera(false);
+  })
+);
+
+watchImmediate(currentImageID, () => {
+  updateResliceCamera(true);
+});
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
+<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/tools/ResliceCursorToolNew.vue b/src/components/tools/ResliceCursorToolNew.vue
new file mode 100644
index 000000000..eeb4258c4
--- /dev/null
+++ b/src/components/tools/ResliceCursorToolNew.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { computed, inject, ref, toRefs } from 'vue';
+import {
+  vtkResliceCursorViewWidget,
+  ResliceCursorWidgetState,
+} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
+import { getLPSAxisFromDir, getVTKViewTypeFromLPSAxis } from '@/src/utils/lps';
+import { LPSAxisDir } from '@/src/types/lps';
+import useResliceCursorStore from '@/src/store/reslice-cursor';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { onViewMounted, onViewUnmounted } from '@/src/core/vtk/onViewMounted';
+import { InitViewIDs } from '@/src/config';
+
+interface Props {
+  viewId: string;
+  viewDirection: LPSAxisDir;
+}
+
+const props = defineProps<Props>();
+const { viewDirection } = toRefs(props);
+const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No vtk view');
+
+const resliceCursorStore = useResliceCursorStore();
+const { resliceCursor, resliceCursorState } = resliceCursorStore;
+
+const widget = ref<vtkResliceCursorViewWidget>();
+const vtkViewType = computed(() => getVTKViewTypeFromLPSAxis(viewAxis.value));
+
+onViewMounted(view.renderWindowView, () => {
+  widget.value = view.widgetManager.addWidget(
+    resliceCursor,
+    vtkViewType.value
+  ) as vtkResliceCursorViewWidget;
+
+  widget.value.setKeepOrthogonality(true);
+  // reset mouse cursor styles
+  widget.value.setCursorStyles({
+    translateCenter: 'default',
+    rotateLine: 'default',
+    translateAxis: 'default',
+  });
+
+  resliceCursorState.getStatesWithLabel('sphere').forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setScale1(10);
+    h.setOpacity(128);
+  });
+
+  resliceCursorState.getStatesWithLabel('line').forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setScale3(1, 1, 1);
+    h.setOpacity(100);
+  });
+
+  const xLines = [
+    ...resliceCursorState.getStatesWithLabel('XinZ'),
+    ...resliceCursorState.getStatesWithLabel('XinY'),
+  ];
+  xLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueSagittal]);
+  });
+
+  const yLines = [
+    ...resliceCursorState.getStatesWithLabel('YinZ'),
+    ...resliceCursorState.getStatesWithLabel('YinX'),
+  ];
+  yLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueCoronal]);
+  });
+
+  const zLines = [
+    ...resliceCursorState.getStatesWithLabel('ZinX'),
+    ...resliceCursorState.getStatesWithLabel('ZinY'),
+  ];
+  zLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueAxial]);
+  });
+
+  // update representation to not be as 3D
+  widget.value.getRepresentations().forEach((rep) => {
+    rep.getActors().forEach((actor) => {
+      actor.getProperty().setAmbient(1);
+    });
+  });
+
+  view.requestRender();
+});
+
+onViewUnmounted(view.renderWindowView, () => {
+  widget.value = undefined;
+  view.widgetManager.removeWidget(resliceCursor);
+});
+</script>
+
+<template>
+  <div></div>
+</template>
diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
new file mode 100644
index 000000000..659b97100
--- /dev/null
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { toRefs, watchEffect, inject } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useResliceRepresentation } from '@/src/core/vtk/useResliceRepresentation';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { SlabTypes } from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper/Constants';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { watchImmediate } from '@vueuse/core';
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  planeNormal: Vector3;
+  planeOrigin: Vector3;
+}
+
+const props = defineProps<Props>();
+const {
+  viewId: viewID,
+  imageId: imageID,
+  planeNormal,
+  planeOrigin,
+} = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const { imageData } = useImage(imageID);
+
+// bind slice and window configs
+const sliceConfig = useSliceConfig(viewID, imageID);
+const wlConfig = useWindowingConfig(viewID, imageID);
+
+// setup base image
+const sliceRep = useResliceRepresentation(view, imageData);
+
+// set slice ordering to be in the back
+sliceRep.mapper.setResolveCoincidentTopologyToPolygonOffset();
+sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
+
+// create slicing plane
+const slicePlane = vtkPlane.newInstance();
+sliceRep.mapper.setSlicePlane(slicePlane);
+
+// TODO initialize visual properties
+// outlineRep.actor.setVisibility(true);
+// outlineRep.actor.setLineWidth(4.0);
+// outlineRep.actor.setColor(outlineColor);
+sliceRep.mapper.setSlabType(SlabTypes.MAX);
+sliceRep.mapper.setSlabThickness(1);
+
+// set plane normal
+watchImmediate([planeNormal, planeOrigin], ([normal, origin]) => {
+  const plane = sliceRep.mapper.getSlicePlane();
+  if (!plane) return;
+  plane.setNormal(normal);
+  plane.setOrigin(origin);
+});
+
+// sync slicing
+watchEffect(() => {
+  sliceRep.mapper.setSlice(sliceConfig.slice.value);
+});
+
+// sync windowing
+watchEffect(() => {
+  sliceRep.property.setColorLevel(wlConfig.level.value);
+  sliceRep.property.setColorWindow(wlConfig.width.value);
+});
+</script>
+
+<template>
+  <slot></slot>
+</template>
diff --git a/src/core/vtk/onViewMounted.ts b/src/core/vtk/onViewMounted.ts
new file mode 100644
index 000000000..e36431fb4
--- /dev/null
+++ b/src/core/vtk/onViewMounted.ts
@@ -0,0 +1,36 @@
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
+import { whenever } from '@vueuse/core';
+import { computed, onUnmounted } from 'vue';
+
+function isViewMounted(renderWindowView: vtkOpenGLRenderWindow) {
+  const container = vtkFieldRef(renderWindowView, 'container');
+  return computed(() => !!container.value);
+}
+
+export function onViewMounted(
+  renderWindowView: vtkOpenGLRenderWindow,
+  callback: () => void
+) {
+  const isMounted = isViewMounted(renderWindowView);
+  whenever(isMounted, () => {
+    callback();
+  });
+}
+
+export function onViewUnmounted(
+  renderWindowView: vtkOpenGLRenderWindow,
+  callback: () => void
+) {
+  const isMounted = isViewMounted(renderWindowView);
+  whenever(
+    computed(() => !isMounted.value),
+    () => {
+      callback();
+    }
+  );
+
+  onUnmounted(() => {
+    callback();
+  });
+}
diff --git a/src/core/vtk/useResliceRepresentation.ts b/src/core/vtk/useResliceRepresentation.ts
new file mode 100644
index 000000000..21413d409
--- /dev/null
+++ b/src/core/vtk/useResliceRepresentation.ts
@@ -0,0 +1,21 @@
+import { MaybeRef } from 'vue';
+import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
+import vtkImageSlice from '@kitware/vtk.js/Rendering/Core/ImageSlice';
+import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
+import { Maybe } from '@/src/types';
+import { View } from '@/src/core/vtk/types';
+import vtkImageResliceMapper from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper';
+
+export function useResliceRepresentation(
+  view: View,
+  imageData: MaybeRef<Maybe<vtkImageData>>
+) {
+  const sliceRep = useVtkRepresentation({
+    view,
+    data: imageData,
+    vtkActorClass: vtkImageSlice,
+    vtkMapperClass: vtkImageResliceMapper,
+  });
+
+  return sliceRep;
+}
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index c37cb30c3..08fe4347a 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -271,6 +271,8 @@ declare module '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget' {
     getCenter(): Vector3;
     setScrollingMethod(mode: number): boolean;
     setOpacity(opacity: number): boolean;
+    setImage(image: vtkImageData): boolean;
+    getImage(): vtkImageData;
   }
 
   // Just forwarding vtk-js's definition as default export:
diff --git a/src/store/reslice-cursor.ts b/src/store/reslice-cursor.ts
new file mode 100644
index 000000000..5ce098757
--- /dev/null
+++ b/src/store/reslice-cursor.ts
@@ -0,0 +1,72 @@
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { ImageMetadata } from '@/src/types/image';
+import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
+import vtkResliceCursorWidget, {
+  ResliceCursorWidgetState,
+} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
+import type { Vector3 } from '@kitware/vtk.js/types';
+import { defineStore } from 'pinia';
+import { toRaw, watchEffect } from 'vue';
+
+function resetReslicePlanes(
+  resliceCursorState: ResliceCursorWidgetState,
+  imageMetadata: ImageMetadata
+) {
+  const { Inferior, Anterior, Superior, Left } = toRaw(
+    imageMetadata.lpsOrientation
+  );
+  const planes = {
+    [ViewTypes.YZ_PLANE]: {
+      normal: Left as Vector3,
+      viewUp: Superior as Vector3,
+    },
+    [ViewTypes.XZ_PLANE]: {
+      normal: Anterior as Vector3,
+      viewUp: Superior as Vector3,
+    },
+    [ViewTypes.XY_PLANE]: {
+      normal: Inferior as Vector3,
+      viewUp: Anterior as Vector3,
+    },
+  };
+
+  resliceCursorState.setPlanes(planes);
+}
+
+function useResliceInit(
+  resliceCursor: vtkResliceCursorWidget,
+  resliceCursorState: ResliceCursorWidgetState
+) {
+  const { currentImageData, currentImageMetadata } = useCurrentImage();
+
+  watchEffect(() => {
+    const image = currentImageData.value;
+    if (!image) return;
+    // TODO just do syncRefs on vtkFieldRefs
+    resliceCursor.setImage(image);
+    // Reset to default plane values before transforming based on current image-data.
+    resetReslicePlanes(resliceCursorState, currentImageMetadata.value);
+  });
+}
+
+const useResliceCursorStore = defineStore('resliceCursor', () => {
+  const resliceCursor = vtkResliceCursorWidget.newInstance({
+    scaleInPixels: true,
+    rotationHandlePosition: 0.75,
+  }) as vtkResliceCursorWidget;
+
+  const widgetState =
+    resliceCursor.getWidgetState() as ResliceCursorWidgetState;
+
+  useResliceInit(resliceCursor, widgetState);
+
+  return {
+    resliceCursor,
+    resliceCursorState: widgetState,
+    resetReslicePlanes: (imageMetadata: ImageMetadata) => {
+      resetReslicePlanes(widgetState, imageMetadata);
+    },
+  };
+});
+
+export default useResliceCursorStore;

From 301932a1a86938d8ead14a7f0be33f6b37801acd Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 29 Feb 2024 15:45:15 -0500
Subject: [PATCH 081/113] feat(ObliqueSliceViewer): slice outlines

---
 src/components/ObliqueSliceViewer.vue         | 49 +++++++++----
 .../vtk/VtkBaseObliqueSliceRepresentation.vue |  5 +-
 .../vtk/VtkImageOutlineRepresentation.vue     | 72 +++++++++++++++++++
 src/core/vtk/useVtkFilter.ts                  | 41 +++++++++++
 src/shims-vtk.d.ts                            |  6 ++
 5 files changed, 155 insertions(+), 18 deletions(-)
 create mode 100644 src/components/vtk/VtkImageOutlineRepresentation.vue
 create mode 100644 src/core/vtk/useVtkFilter.ts

diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index 3ad97a863..ff21b5f13 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -26,6 +26,14 @@
             :plane-normal="planeNormal"
             :plane-origin="planeOrigin"
           ></vtk-base-oblique-slice-representation>
+          <vtk-image-outline-representation
+            :view-id="id"
+            :image-id="currentImageID"
+            :plane-normal="planeNormal"
+            :plane-origin="planeOrigin"
+            :thickness="4"
+            :color="outlineColor"
+          ></vtk-image-outline-representation>
           <reslice-cursor-tool
             :view-id="id"
             :view-direction="viewDirection"
@@ -38,26 +46,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs, computed, watchEffect } from 'vue';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { LPSAxisDir } from '@/src/types/lps';
-import { getLPSAxisFromDir } from '@/src/utils/lps';
-import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
-import { VtkViewApi } from '@/src/types/vtk-types';
-import { LayoutViewProps } from '@/src/types';
+import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
+import ResliceCursorTool from '@/src/components/tools/ResliceCursorToolNew.vue';
 import VtkBaseObliqueSliceRepresentation from '@/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue';
+import VtkImageOutlineRepresentation from '@/src/components/vtk/VtkImageOutlineRepresentation.vue';
+import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import useResliceCursorStore from '@/src/store/reslice-cursor';
+import { LayoutViewProps } from '@/src/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
+import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
-import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
-import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { RGBColor } from '@kitware/vtk.js/types';
 import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
-import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
-import { batchForNextTask } from '@/src/utils/batchForNextTask';
-import ResliceCursorTool from '@/src/components/tools/ResliceCursorToolNew.vue';
-import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
-import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
+import { computed, ref, toRefs, watchEffect } from 'vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -217,6 +228,16 @@ onVTKEvent(
 watchImmediate(currentImageID, () => {
   updateResliceCamera(true);
 });
+
+// slicing plane colors
+const outlineColor = computed(
+  () =>
+    vec3.scale(
+      [0, 0, 0],
+      OBLIQUE_OUTLINE_COLORS[viewId.value],
+      1 / 255
+    ) as RGBColor
+);
 </script>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>
diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
index 659b97100..d59641c82 100644
--- a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -46,10 +46,7 @@ sliceRep.mapper.setResolveCoincidentTopologyPolygonOffsetParameters(1, 1);
 const slicePlane = vtkPlane.newInstance();
 sliceRep.mapper.setSlicePlane(slicePlane);
 
-// TODO initialize visual properties
-// outlineRep.actor.setVisibility(true);
-// outlineRep.actor.setLineWidth(4.0);
-// outlineRep.actor.setColor(outlineColor);
+// initialize visual properties
 sliceRep.mapper.setSlabType(SlabTypes.MAX);
 sliceRep.mapper.setSlabThickness(1);
 
diff --git a/src/components/vtk/VtkImageOutlineRepresentation.vue b/src/components/vtk/VtkImageOutlineRepresentation.vue
new file mode 100644
index 000000000..ca700ef2f
--- /dev/null
+++ b/src/components/vtk/VtkImageOutlineRepresentation.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useVtkFilter } from '@/src/core/vtk/useVtkFilter';
+import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { Maybe } from '@/src/types';
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+import vtkPolyData from '@kitware/vtk.js/Common/DataModel/PolyData';
+import vtkCutter from '@kitware/vtk.js/Filters/Core/Cutter';
+import vtkImageDataOutlineFilter from '@kitware/vtk.js/Filters/General/ImageDataOutlineFilter';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+import { Vector3 } from '@kitware/vtk.js/types';
+import { syncRefs, watchImmediate } from '@vueuse/core';
+import { inject, toRefs, watchEffect } from 'vue';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  planeNormal: Vector3;
+  planeOrigin: Vector3;
+  color?: Vector3;
+  thickness?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  thickness: 1,
+  color: () => [1, 1, 1] as Vector3,
+});
+const { imageId, planeNormal, planeOrigin, color, thickness } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+// outline filter
+const { imageData } = useImage(imageId);
+const outlineFilter = useVtkFilter(vtkImageDataOutlineFilter, imageData);
+const outline = outlineFilter.getOutputData<vtkPolyData>(0);
+
+// slicing plane
+const slicePlane = vtkPlane.newInstance();
+const cutterFilter = useVtkFilter(vtkCutter, outline);
+(cutterFilter.filter as any).setCutFunction(slicePlane);
+
+// representation
+const rep = useVtkRepresentation({
+  view,
+  data: cutterFilter.getOutputData(0),
+  vtkActorClass: vtkActor,
+  vtkMapperClass: vtkMapper,
+});
+
+// set representation properties
+watchEffect(() => {
+  rep.property.setLineWidth(thickness.value);
+  rep.property.setColor(color.value);
+});
+
+// sync input plane to slice plane
+const slicePlaneNormal = vtkFieldRef(slicePlane, 'normal');
+const slicePlaneOrigin = vtkFieldRef(slicePlane, 'origin');
+syncRefs(planeNormal, slicePlaneNormal);
+syncRefs(planeOrigin, slicePlaneOrigin);
+
+// update filter
+watchImmediate([slicePlaneNormal, slicePlaneOrigin], () => {
+  cutterFilter.filter.modified();
+});
+</script>
+
+<template><slot></slot></template>
diff --git a/src/core/vtk/useVtkFilter.ts b/src/core/vtk/useVtkFilter.ts
new file mode 100644
index 000000000..0c50fbe45
--- /dev/null
+++ b/src/core/vtk/useVtkFilter.ts
@@ -0,0 +1,41 @@
+import { VtkObjectConstructor } from '@/src/core/vtk/types';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { Maybe } from '@/src/types';
+import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
+import { computedWithControl } from '@vueuse/core';
+import { ComputedRef, MaybeRef, onScopeDispose, unref, watchEffect } from 'vue';
+
+export function useVtkFilter<T extends vtkAlgorithm & vtkObject>(
+  filterClass: VtkObjectConstructor<T>,
+  ...inputData: MaybeRef<Maybe<vtkObject>>[]
+) {
+  const filter = filterClass.newInstance();
+  const mtime = vtkFieldRef(filter as vtkObject, 'mTime');
+
+  watchEffect(() => {
+    inputData
+      .map((input) => unref(input))
+      .forEach((input, port) => {
+        if (input) filter.setInputData(unref(input), port);
+      });
+  });
+
+  let cache: Record<number, ComputedRef<any>> = {};
+
+  const getOutputData = <D>(port = 0) => {
+    if (!(port in cache)) {
+      cache[port] = computedWithControl(mtime, () => {
+        if (!filter.getInputData(port)) return null;
+        return filter.getOutputData(port) as D;
+      });
+    }
+    return cache[port] as ComputedRef<D>;
+  };
+
+  onScopeDispose(() => {
+    cache = {};
+    filter.delete();
+  });
+
+  return { filter, getOutputData };
+}
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index 08fe4347a..a618b3d60 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -298,3 +298,9 @@ declare module '@kitware/vtk.js/Interaction/Widgets/PiecewiseGaussianWidget' {
 
   export default vtkPiecewiseWidget;
 }
+
+declare module '@kitware/vtk.js/Filters/Core/Cutter' {
+  export type vtkCutter = any;
+  export declare const vtkCutter: any;
+  export default vtkCutter;
+}

From 9e6b5d143115c41cfea08f667ff7f084270eef80 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 29 Feb 2024 15:57:01 -0500
Subject: [PATCH 082/113] fix(vtkFieldRef): guard against deleted objects

---
 src/core/vtk/vtkFieldRef.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/core/vtk/vtkFieldRef.ts b/src/core/vtk/vtkFieldRef.ts
index ac5cbf95d..fb9d40e73 100644
--- a/src/core/vtk/vtkFieldRef.ts
+++ b/src/core/vtk/vtkFieldRef.ts
@@ -107,6 +107,7 @@ export function vtkFieldRef<T extends vtkObject>(
   });
 
   const onModified = batchForNextTask(() => {
+    if (unref(obj).isDeleted()) return;
     triggerRef(ref);
   });
 

From 2c4166431e10f70ec871298f6400af1ce5da94da Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 29 Feb 2024 16:13:48 -0500
Subject: [PATCH 083/113] style: remove old TODO

---
 src/store/reslice-cursor.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/reslice-cursor.ts b/src/store/reslice-cursor.ts
index 5ce098757..f6d01b331 100644
--- a/src/store/reslice-cursor.ts
+++ b/src/store/reslice-cursor.ts
@@ -42,7 +42,6 @@ function useResliceInit(
   watchEffect(() => {
     const image = currentImageData.value;
     if (!image) return;
-    // TODO just do syncRefs on vtkFieldRefs
     resliceCursor.setImage(image);
     // Reset to default plane values before transforming based on current image-data.
     resetReslicePlanes(resliceCursorState, currentImageMetadata.value);

From 3e9ab503eaa0a3d42703cce49c58112e8ab9bf52 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Sun, 17 Mar 2024 00:12:50 -0400
Subject: [PATCH 084/113] feat(vtkFieldRef): support Maybe inputs

If the input is null|undefined, then the getter returns undefined and
the setter is a no-op.
---
 src/core/vtk/vtkFieldRef.ts | 41 ++++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/core/vtk/vtkFieldRef.ts b/src/core/vtk/vtkFieldRef.ts
index fb9d40e73..0597e02fe 100644
--- a/src/core/vtk/vtkFieldRef.ts
+++ b/src/core/vtk/vtkFieldRef.ts
@@ -3,6 +3,7 @@ import { vtkObject } from '@kitware/vtk.js/interfaces';
 import { capitalize } from '@kitware/vtk.js/macros';
 import { onPausableVTKEvent } from '@/src/composables/onPausableVTKEvent';
 import { batchForNextTask } from '@/src/utils/batchForNextTask';
+import { Maybe } from '@/src/types';
 
 type NonEmptyString<T extends string> = T extends '' ? never : T;
 
@@ -14,7 +15,11 @@ type GettableFields<T> = FilterGetters<string & keyof T>;
 
 type NameToGetter<T extends string> = `get${Capitalize<T>}`;
 
-type GetterReturnType<T, F extends string> = NameToGetter<F> extends keyof T
+type Just<T> = Exclude<T, null | undefined>;
+
+type GetterReturnType<T, F extends string> = T extends null | undefined
+  ? undefined
+  : NameToGetter<F> extends keyof T
   ? T[NameToGetter<F>] extends (...args: any[]) => infer R
     ? R
     : never
@@ -32,22 +37,22 @@ export type GetterSetterFactory<T> = {
  * @param obj
  * @param fieldName
  */
-export function vtkFieldRef<T extends vtkObject, F extends GettableFields<T>>(
-  obj: MaybeRef<T>,
-  fieldName: F
-): Ref<GetterReturnType<T, F>>;
+export function vtkFieldRef<
+  T extends Maybe<vtkObject>,
+  F extends GettableFields<Just<T>>
+>(obj: MaybeRef<T>, fieldName: F): Ref<GetterReturnType<T, F>>;
 
 /**
  * A customRef wrapper that triggers the ref based on a vtk object modification event.
  * @param obj
  * @param factory
  */
-export function vtkFieldRef<T extends vtkObject, R>(
+export function vtkFieldRef<T extends Maybe<vtkObject>, R>(
   obj: MaybeRef<T>,
   factory: GetterSetterFactory<R>
 ): Ref<R>;
 
-export function vtkFieldRef<T extends vtkObject>(
+export function vtkFieldRef<T extends Maybe<vtkObject>>(
   obj: MaybeRef<T>,
   fieldNameOrFactory: string | GetterSetterFactory<any>
 ): any {
@@ -58,15 +63,27 @@ export function vtkFieldRef<T extends vtkObject>(
     const getterName = `get${capitalize(fieldNameOrFactory)}` as keyof T;
     const setterName = `set${capitalize(fieldNameOrFactory)}` as keyof T;
 
-    const _getter = computed(() => unref(obj)[getterName] as () => any);
+    const _getter = computed(
+      () => unref(obj)?.[getterName] as (() => any) | undefined
+    );
     const _setter = computed(
-      () => unref(obj)[setterName] as ((...args: any[]) => boolean) | undefined
+      () =>
+        unref(obj)?.[setterName] as ((...args: any[]) => boolean) | undefined
     );
 
-    getter = () => _getter.value();
+    const notNull = computed(() => !!unref(obj));
+    const hasSetter = computed(() => {
+      const val = unref(obj);
+      return val ? setterName in val : false;
+    });
+
+    getter = () => _getter.value?.();
     setter = (v: any) => {
       const set = _setter.value;
-      if (!set) throw new Error(`No setter for field '${fieldNameOrFactory}'`);
+      if (!notNull.value) return false;
+      if (!hasSetter.value || !set)
+        throw new Error(`No setter for field '${fieldNameOrFactory}'`);
+
       // handle certain array setters not accepting an array as input
       if (Array.isArray(v) && set.length === v.length) {
         return (set as ArraySetter)(...v);
@@ -107,7 +124,7 @@ export function vtkFieldRef<T extends vtkObject>(
   });
 
   const onModified = batchForNextTask(() => {
-    if (unref(obj).isDeleted()) return;
+    if (unref(obj)?.isDeleted()) return;
     triggerRef(ref);
   });
 

From 8259f6bd76b4807273ada0eafb9ad2494a3059d7 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Sun, 17 Mar 2024 00:26:16 -0400
Subject: [PATCH 085/113] refactor(VolumeSliceViewer): rename to SliceViewer

---
 src/components/{VolumeSliceViewer.vue => SliceViewer.vue} | 3 +++
 1 file changed, 3 insertions(+)
 rename src/components/{VolumeSliceViewer.vue => SliceViewer.vue} (96%)

diff --git a/src/components/VolumeSliceViewer.vue b/src/components/SliceViewer.vue
similarity index 96%
rename from src/components/VolumeSliceViewer.vue
rename to src/components/SliceViewer.vue
index 88bc73ffd..94f613b41 100644
--- a/src/components/VolumeSliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -30,6 +30,9 @@
           :view-direction="viewDirection"
           :view-up="viewUp"
         >
+          <div class="overlay-no-events tool-layer">
+            <svg class="overlay-no-events"></svg>
+          </div>
           <vtk-base-slice-representation
             :view-id="id"
             :image-id="currentImageID"

From 7bddcb9dd3d37c42023576be9eedf0ca1b3a92a3 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 18 Mar 2024 19:28:42 -0400
Subject: [PATCH 086/113] feat: migrate crop tool

---
 src/components/SliceViewer.vue                |   5 +-
 src/components/VolumeViewer.vue               |   2 +
 src/components/tools/crop/Crop2D.vue          | 113 ++++++++++-------
 src/components/tools/crop/Crop3D.vue          | 117 +++++++-----------
 src/components/tools/crop/CropTool.vue        |  35 +++---
 .../vtk/VtkBaseVolumeRepresentation.vue       |   7 ++
 src/composables/useCroppingEffect.ts          |  20 +++
 .../{useCurrentSlice.ts => useSliceInfo.ts}   |  23 ++--
 8 files changed, 171 insertions(+), 151 deletions(-)
 create mode 100644 src/composables/useCroppingEffect.ts
 rename src/composables/{useCurrentSlice.ts => useSliceInfo.ts} (61%)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 94f613b41..a4306308e 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -30,9 +30,6 @@
           :view-direction="viewDirection"
           :view-up="viewUp"
         >
-          <div class="overlay-no-events tool-layer">
-            <svg class="overlay-no-events"></svg>
-          </div>
           <vtk-base-slice-representation
             :view-id="id"
             :image-id="currentImageID"
@@ -55,6 +52,7 @@
               :axis="viewAxis"
             ></vtk-layer-slice-representation>
           </template>
+          <crop-tool :view-id="viewId" :image-id="currentImageID" />
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -75,6 +73,7 @@ import VtkSegmentationSliceRepresentation from '@/src/components/vtk/VtkSegmenta
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import VtkLayerSliceRepresentation from '@/src/components/vtk/VtkLayerSliceRepresentation.vue';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import CropTool from '@/src/components/tools/crop/CropTool.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index ef9b50db1..454df0fcd 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -27,6 +27,7 @@
             :view-id="id"
             :image-id="currentImageID"
           ></vtk-base-volume-representation>
+          <crop-tool :view-id="viewId" :image-id="currentImageID"></crop-tool>
           <slot></slot>
         </vtk-volume-view>
       </div>
@@ -43,6 +44,7 @@ import { VtkViewApi } from '@/src/types/vtk-types';
 import { LayoutViewProps } from '@/src/types';
 import VtkBaseVolumeRepresentation from '@/src/components/vtk/VtkBaseVolumeRepresentation.vue';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import CropTool from '@/src/components/tools/crop/CropTool.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/tools/crop/Crop2D.vue b/src/components/tools/crop/Crop2D.vue
index aa90aed88..294ca2fdf 100644
--- a/src/components/tools/crop/Crop2D.vue
+++ b/src/components/tools/crop/Crop2D.vue
@@ -1,14 +1,12 @@
 <script lang="ts">
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { useCurrentSlice } from '@/src/composables/useCurrentSlice';
+import { useImage } from '@/src/composables/useCurrentImage';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { useVTKMultiWorldToSVG } from '@/src/composables/useVTKWorldToDisplay';
 import { ImageMetadata } from '@/src/types/image';
 import { useCropStore } from '@/src/store/tools/crop';
-import { useViewStore } from '@/src/store/views';
 import { LPSAxis, LPSBounds, LPSPoint } from '@/src/types/lps';
 import { createLPSBounds, createLPSPoint, LPSAxes } from '@/src/utils/lps';
 import { intersectMouseEventWithPlane } from '@/src/utils/vtk-helpers';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import {
@@ -16,21 +14,28 @@ import {
   ComputedRef,
   DeepReadonly,
   defineComponent,
+  inject,
+  MaybeRef,
+  PropType,
   ref,
   Ref,
   toRefs,
 } from 'vue';
 import { vec3 } from 'gl-matrix';
+import useViewAnimationStore from '@/src/store/view-animation';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
 import Crop2DLineHandle from './Crop2DLineHandle.vue';
 import { CropLines } from './types';
 
 function computeCropLines(
   viewID: Ref<string | null>,
+  imageID: MaybeRef<Maybe<string>>,
   cropAxis: Ref<LPSAxis | null>,
   cropPlanes: DeepReadonly<Ref<Record<LPSAxis, number[]>>>,
   boundary: Ref<Record<LPSAxis, number[]>>
 ): ComputedRef<CropLines<LPSPoint> | null> {
-  const currentSlice = useCurrentSlice(viewID);
+  const currentSlice = useSliceInfo(viewID, imageID);
 
   return computed(() => {
     // pre-check reactivity
@@ -53,7 +58,7 @@ function computeCropLines(
     const perpBoundary = boundaryVal[perpAxis];
 
     const sliceCropRange = cropPlanesVal[sliceAxis];
-    const slice = sliceInfo.number;
+    const slice = sliceInfo.slice;
     const outOfBounds = slice < sliceCropRange[0] || sliceCropRange[1] < slice;
 
     const getLineSegments = (index: number) => {
@@ -84,7 +89,7 @@ function computeCropLines(
 function cropLinesToSVGDisplay(
   cropLines: Ref<CropLines<LPSPoint> | null>,
   imageMetadata: Ref<ImageMetadata>,
-  renderer: Ref<vtkRenderer>
+  renderer: vtkRenderer
 ): ComputedRef<CropLines<number[]> | null> {
   // gather points
   const worldPoints = computed(() => {
@@ -157,6 +162,9 @@ function useDragging({
   const initialPointerIndex = ref<LPSPoint>(createLPSPoint());
   const initialCrop = ref<number>(0);
 
+  const viewAnimationStore = useViewAnimationStore();
+  const requestor = Symbol('Crop2DRequestor');
+
   const onPointerDown = (
     ax: LPSAxis,
     selectedCropEdge: 0 | 1,
@@ -171,6 +179,10 @@ function useDragging({
     initialCrop.value = getCropEdgePos(ax, selectedCropEdge);
     activeAxis.value = ax;
     activeEdge.value = selectedCropEdge;
+
+    viewAnimationStore.requestAnimation(requestor, {
+      byViewType: ['3D'],
+    });
   };
 
   const onPointerMove = (ev: PointerEvent) => {
@@ -191,6 +203,7 @@ function useDragging({
   const onPointerUp = () => {
     activeAxis.value = null;
     activeEdge.value = null;
+    viewAnimationStore.cancelAnimation(requestor);
   };
 
   return {
@@ -206,34 +219,28 @@ export default defineComponent({
       required: true,
       type: String,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     Crop2DLineHandle,
   },
   setup(props) {
-    const { viewId: viewID } = toRefs(props);
+    const { viewId: viewID, imageId } = toRefs(props);
 
-    const viewStore = useViewStore();
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
-    const renderer = computed(() => viewProxy.value?.getRenderer());
-
-    const {
-      currentImageExtent: imageExtent,
-      currentImageID,
-      currentImageMetadata,
-    } = useCurrentImage();
-    const currentSlice = useCurrentSlice(viewID);
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const { extent: imageExtent, metadata: imageMetadata } = useImage(imageId);
+    const currentSlice = useSliceInfo(viewID, imageId);
     const currentSlicingAxis = computed(
       () => currentSlice.value?.axisName ?? null
     );
 
     const cropStore = useCropStore();
     const cropPlanes = computed((): DeepReadonly<LPSBounds> => {
-      const imageID = currentImageID.value;
-      if (imageID && imageID in cropStore.croppingByImageID) {
-        return cropStore.croppingByImageID[imageID];
+      const id = imageId.value;
+      if (id && id in cropStore.croppingByImageID) {
+        return cropStore.croppingByImageID[id];
       }
       return createLPSBounds();
     });
@@ -247,33 +254,42 @@ export default defineComponent({
     const ax2 = computed(() => inPlaneAxes.value[1] ?? null);
 
     // crop lines in image space
-    const ax1Lines = computeCropLines(viewID, ax1, cropPlanes, imageExtent);
-    const ax2Lines = computeCropLines(viewID, ax2, cropPlanes, imageExtent);
+    const ax1Lines = computeCropLines(
+      viewID,
+      imageId,
+      ax1,
+      cropPlanes,
+      imageExtent
+    );
+    const ax2Lines = computeCropLines(
+      viewID,
+      imageId,
+      ax2,
+      cropPlanes,
+      imageExtent
+    );
 
     // crop lines in display space
     const ax1SVGLines = cropLinesToSVGDisplay(
       ax1Lines,
-      currentImageMetadata,
-      renderer
+      imageMetadata,
+      view.renderer
     );
     const ax2SVGLines = cropLinesToSVGDisplay(
       ax2Lines,
-      currentImageMetadata,
-      renderer
+      imageMetadata,
+      view.renderer
     );
 
     const { onPointerDown, onPointerMove, onPointerUp } = useDragging({
       mouseEventToLPSPoint(ev: PointerEvent) {
-        const ren = renderer.value;
-        if (!ren) return null;
-
         const sliceInfo = currentSlice.value;
         if (!sliceInfo) return null;
 
-        const { lpsOrientation, worldToIndex } = currentImageMetadata.value;
+        const { lpsOrientation, worldToIndex } = imageMetadata.value;
         const coord = intersectMouseEventWithPlane(
           ev,
-          ren,
+          view.renderer,
           sliceInfo.planeOrigin,
           sliceInfo.planeNormal
         );
@@ -293,7 +309,7 @@ export default defineComponent({
         return cropPlanes.value[axis][lowerUpper];
       },
       setCropEdgePos(axis: LPSAxis, lowerUpper: 0 | 1, pos: number) {
-        if (!currentImageID.value) return;
+        if (!imageId.value) return;
 
         // enforce cropping edge bounds
         const planes = cropPlanes.value;
@@ -306,7 +322,7 @@ export default defineComponent({
           newPlanes[1] = Math.max(lower, Math.min(pos, max));
         }
 
-        cropStore.setCroppingForAxis(currentImageID.value, axis, newPlanes);
+        cropStore.setCroppingForAxis(imageId.value, axis, newPlanes);
       },
     });
 
@@ -333,35 +349,36 @@ export default defineComponent({
       <crop-2D-line-handle
         :line="ax1.lines.lowerLine"
         :out-of-bounds="ax1.lines.outOfBounds"
-        @pointerdown="onPointerDown(ax1.name, 0, $event)"
-        @pointermove="onPointerMove"
-        @pointerup="onPointerUp"
+        @pointerdown.stop="onPointerDown(ax1.name, 0, $event)"
+        @pointermove.stop="onPointerMove"
+        @pointerup.stop="onPointerUp"
       />
       <crop-2D-line-handle
         :line="ax1.lines.upperLine"
         :out-of-bounds="ax1.lines.outOfBounds"
-        @pointerdown="onPointerDown(ax1.name, 1, $event)"
-        @pointermove="onPointerMove"
-        @pointerup="onPointerUp"
+        @pointerdown.stop="onPointerDown(ax1.name, 1, $event)"
+        @pointermove.stop="onPointerMove"
+        @pointerup.stop="onPointerUp"
       />
     </template>
     <template v-if="ax2.lines != null">
       <crop-2D-line-handle
         :line="ax2.lines.lowerLine"
         :out-of-bounds="ax2.lines.outOfBounds"
-        @pointerdown="onPointerDown(ax2.name, 0, $event)"
-        @pointermove="onPointerMove"
-        @pointerup="onPointerUp"
+        @pointerdown.stop="onPointerDown(ax2.name, 0, $event)"
+        @pointermove.stop="onPointerMove"
+        @pointerup.stop="onPointerUp"
       />
       <crop-2D-line-handle
         :line="ax2.lines.upperLine"
         :out-of-bounds="ax2.lines.outOfBounds"
-        @pointerdown="onPointerDown(ax2.name, 1, $event)"
-        @pointermove="onPointerMove"
-        @pointerup="onPointerUp"
+        @pointerdown.stop="onPointerDown(ax2.name, 1, $event)"
+        @pointermove.stop="onPointerMove"
+        @pointerup.stop="onPointerUp"
       />
     </template>
   </g>
 </template>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>
+@/src/composables/useSliceInfo
diff --git a/src/components/tools/crop/Crop3D.vue b/src/components/tools/crop/Crop3D.vue
index 3f6390d4c..4d7e05685 100644
--- a/src/components/tools/crop/Crop3D.vue
+++ b/src/components/tools/crop/Crop3D.vue
@@ -1,12 +1,10 @@
 <script lang="ts">
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useCropStore } from '@/src/store/tools/crop';
 import { LPSCroppingPlanes } from '@/src/types/crop';
-import { useViewStore } from '@/src/store/views';
 import { arrayEquals } from '@/src/utils';
 import { getAxisBounds, LPSAxes } from '@/src/utils/lps';
-import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
 import type { Bounds } from '@kitware/vtk.js/types';
 import vtkImageCroppingWidget, {
   ImageCroppingWidgetState,
@@ -16,12 +14,14 @@ import {
   computed,
   DeepReadonly,
   defineComponent,
+  inject,
   onBeforeUnmount,
-  ref,
+  PropType,
   toRefs,
-  watch,
 } from 'vue';
-import { onViewProxyMounted } from '@/src/composables/useViewProxy';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { Maybe } from '@/src/types';
+import { watchImmediate } from '@vueuse/core';
 
 function isValidCroppingPlanes(planes: LPSCroppingPlanes) {
   return (
@@ -44,27 +44,23 @@ function lpsPlanesEqual(a: LPSCroppingPlanes, b: LPSCroppingPlanes) {
 
 export default defineComponent({
   props: {
-    viewId: {
-      type: String,
-      required: true,
-    },
+    imageId: String as PropType<Maybe<string>>,
   },
-
   setup(props) {
-    const { viewId: viewID } = toRefs(props);
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    console.log('whee');
 
-    const viewStore = useViewStore();
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView3DProxy>(viewID.value)!
-    );
-    const widgetManager = computed(() => viewProxy.value.getWidgetManager());
+    const { widgetManager } = view;
+
+    const { imageId } = toRefs(props);
 
     const cropStore = useCropStore();
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
     const croppingPlanes = computed(() => {
-      const imageID = currentImageID.value;
-      if (imageID && imageID in cropStore.croppingByImageID) {
-        return cropStore.croppingByImageID[imageID];
+      const id = imageId.value;
+      if (id && id in cropStore.croppingByImageID) {
+        return cropStore.croppingByImageID[id];
       }
       return null;
     });
@@ -76,53 +72,30 @@ export default defineComponent({
     factory.setFaceHandlesEnabled(true);
     factory.setCornerHandlesEnabled(true);
 
-    const widget = ref<vtkImageCroppingViewWidget>();
-
-    watch(widgetManager, (wm, oldWm) => {
-      if (oldWm) {
-        oldWm.removeWidget(factory);
-      }
-      if (wm) {
-        widget.value = wm.addWidget(factory) as vtkImageCroppingViewWidget;
-      }
-    });
+    const widget = widgetManager.addWidget(
+      factory
+    ) as vtkImageCroppingViewWidget;
 
-    onViewProxyMounted(viewProxy, () => {
-      if (widgetManager.value) {
-        widget.value = widgetManager.value.addWidget(
-          factory
-        ) as vtkImageCroppingViewWidget;
-
-        // update representation to not be as 3D
-        widget.value.getRepresentations().forEach((rep) => {
-          rep.getActors().forEach((actor) => {
-            actor.getProperty().setAmbient(1);
-          });
-        });
-
-        // show widget
-        viewProxy.value.renderLater();
-      }
+    // update representation to not be as 3D
+    widget.getRepresentations().forEach((rep) => {
+      rep.getActors().forEach((actor) => {
+        actor.getProperty().setAmbient(1);
+      });
     });
 
     onBeforeUnmount(() => {
-      if (widgetManager.value) {
-        widgetManager.value.removeWidget(factory);
-      }
+      widgetManager.removeWidget(factory);
     });
 
-    watch(
-      currentImageMetadata,
-      (metadata) => {
-        state.setWorldToIndexT(metadata.worldToIndex);
-        state.setIndexToWorldT(metadata.indexToWorld);
-        state.placeWidget(metadata.worldBounds);
-      },
-      { immediate: true }
-    );
+    const { metadata: imageMetadata } = useImage(imageId);
+    watchImmediate(imageMetadata, (metadata) => {
+      state.setWorldToIndexT(metadata.worldToIndex);
+      state.setIndexToWorldT(metadata.indexToWorld);
+      state.placeWidget(metadata.worldBounds);
+    });
 
     const applyPlanes = (lpsPlanes: DeepReadonly<LPSCroppingPlanes>) => {
-      const { lpsOrientation: dirs } = currentImageMetadata.value;
+      const { lpsOrientation: dirs } = imageMetadata.value;
       // LPSCroppingPlanes -> Bounds
       const planes = [0, 0, 0, 0, 0, 0] as Bounds;
       LPSAxes.forEach((axis) => {
@@ -132,27 +105,23 @@ export default defineComponent({
       // prevent infinite loops
       if (!arrayEquals(planes, state.getCroppingPlanes().getPlanes())) {
         state.getCroppingPlanes().setPlanes(planes);
-        viewProxy.value.renderLater();
+        view.requestRender();
       }
     };
 
-    watch(
-      croppingPlanes,
-      (lpsPlanes) => {
-        if (lpsPlanes) {
-          applyPlanes(lpsPlanes);
-        }
-      },
-      { immediate: true }
-    );
+    watchImmediate(croppingPlanes, (lpsPlanes) => {
+      if (lpsPlanes) {
+        applyPlanes(lpsPlanes);
+      }
+    });
 
     onVTKEvent(state.getCroppingPlanes(), 'onModified', () => {
-      const imageID = currentImageID.value;
-      if (!imageID) return;
+      const id = imageId.value;
+      if (!id) return;
 
       // Bounds -> LPSCroppingPlanes
       const planes = state.getCroppingPlanes().getPlanes();
-      const { lpsOrientation } = currentImageMetadata.value;
+      const { lpsOrientation } = imageMetadata.value;
       const lpsPlanes: LPSCroppingPlanes = {
         Sagittal: getAxisBounds(planes, 'Sagittal', lpsOrientation),
         Coronal: getAxisBounds(planes, 'Coronal', lpsOrientation),
@@ -169,7 +138,7 @@ export default defineComponent({
       }
 
       if (isValidCroppingPlanes(lpsPlanes)) {
-        cropStore.setCropping(imageID, lpsPlanes);
+        cropStore.setCropping(id, lpsPlanes);
       } else if (planesFromStore) {
         applyPlanes(planesFromStore);
       }
diff --git a/src/components/tools/crop/CropTool.vue b/src/components/tools/crop/CropTool.vue
index 7950f3216..9a6ffa2de 100644
--- a/src/components/tools/crop/CropTool.vue
+++ b/src/components/tools/crop/CropTool.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
 import { useViewStore } from '@/src/store/views';
-import { computed, defineComponent, toRefs, watch } from 'vue';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { PropType, computed, defineComponent, toRefs } from 'vue';
+import { watchImmediate } from '@vueuse/core';
 import { useCropStore } from '@/src/store/tools/crop';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
+import { Maybe } from '@/src/types';
 import Crop2D from './Crop2D.vue';
 import Crop3D from './Crop3D.vue';
 
@@ -14,29 +15,25 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     Crop2D,
     Crop3D,
   },
   setup(props) {
-    const { viewId: viewID } = toRefs(props);
+    const { viewId: viewID, imageId } = toRefs(props);
 
-    const { currentImageID } = useCurrentImage();
     const cropStore = useCropStore();
     const toolStore = useToolStore();
 
     const active = computed(() => toolStore.currentTool === Tools.Crop);
 
-    watch(
-      currentImageID,
-      (imageID) => {
-        if (imageID && !(imageID in cropStore.croppingByImageID)) {
-          cropStore.resetCropping(imageID);
-        }
-      },
-      { immediate: true }
-    );
+    watchImmediate(imageId, (id) => {
+      if (id && !(id in cropStore.croppingByImageID)) {
+        cropStore.resetCropping(id);
+      }
+    });
 
     const viewType = computed(() => {
       const viewStore = useViewStore();
@@ -53,8 +50,16 @@ export default defineComponent({
 
 <template>
   <svg class="overlay-no-events">
-    <crop-2D v-if="active && viewType === '2D'" :view-id="viewId" />
-    <crop-3D v-if="active && viewType === '3D'" :view-id="viewId" />
+    <crop-2D
+      v-if="active && viewType === '2D'"
+      :view-id="viewId"
+      :image-id="imageId"
+    />
+    <crop-3D
+      v-if="active && viewType === '3D'"
+      :view-id="viewId"
+      :image-id="imageId"
+    />
   </svg>
 </template>
 
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index ae18b27fc..972d51d90 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -25,6 +25,8 @@ import {
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { vtkObject } from '@kitware/vtk.js/interfaces';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { useCroppingEffect } from '@/src/composables/useCroppingEffect';
+import { useCropStore } from '@/src/store/tools/crop';
 
 interface Props {
   viewId: string;
@@ -135,6 +137,11 @@ watchEffect(() => {
 useVolumeColoringInitializer(viewID, imageID);
 
 useColoringEffect(coloringConfig, cfun, ofun);
+
+// cropping
+const cropStore = useCropStore();
+const croppingPlanes = cropStore.getComputedVTKPlanes(imageID);
+useCroppingEffect(rep.mapper, croppingPlanes);
 </script>
 
 <template>
diff --git a/src/composables/useCroppingEffect.ts b/src/composables/useCroppingEffect.ts
new file mode 100644
index 000000000..134b24726
--- /dev/null
+++ b/src/composables/useCroppingEffect.ts
@@ -0,0 +1,20 @@
+import { croppingPlanesEqual } from '@/src/store/tools/crop';
+import { Maybe } from '@/src/types';
+import vtkPlane from '@kitware/vtk.js/Common/DataModel/Plane';
+import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
+import { watchImmediate } from '@vueuse/core';
+import { MaybeRef, toRef } from 'vue';
+
+export function useCroppingEffect(
+  mapper: vtkVolumeMapper,
+  planes: MaybeRef<Maybe<vtkPlane[]>>
+) {
+  // TODO make sure that the default planes are based off of spatial extent
+  watchImmediate(toRef(planes), (newPlanes, oldPlanes) => {
+    if (!newPlanes) return;
+    if (oldPlanes && croppingPlanesEqual(newPlanes, oldPlanes)) return;
+
+    mapper.removeAllClippingPlanes();
+    newPlanes.forEach((plane) => mapper.addClippingPlane(plane));
+  });
+}
diff --git a/src/composables/useCurrentSlice.ts b/src/composables/useSliceInfo.ts
similarity index 61%
rename from src/composables/useCurrentSlice.ts
rename to src/composables/useSliceInfo.ts
index ec9c42634..adccca023 100644
--- a/src/composables/useCurrentSlice.ts
+++ b/src/composables/useSliceInfo.ts
@@ -1,9 +1,10 @@
 import type { Vector3 } from '@kitware/vtk.js/types';
 import { computed, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
-import { getLPSAxisFromDir } from '../utils/lps';
-import { useCurrentImage } from './useCurrentImage';
-import useViewSliceStore from '../store/view-configs/slicing';
+import { getLPSAxisFromDir } from '@/src/utils/lps';
+import { useImage } from '@/src/composables/useCurrentImage';
+import useViewSliceStore from '@/src/store/view-configs/slicing';
+import { Maybe } from '@/src/types';
 
 /**
  * Returns information about the current slice.
@@ -15,26 +16,26 @@ import useViewSliceStore from '../store/view-configs/slicing';
  * planeOrigin: slice plane origin
  * @param viewID
  */
-export function useCurrentSlice(viewID: MaybeRef<string | null>) {
+export function useSliceInfo(
+  viewID: MaybeRef<string | null>,
+  imageID: MaybeRef<Maybe<string>>
+) {
   const viewSliceStore = useViewSliceStore();
-  const { currentImageMetadata, currentImageID } = useCurrentImage();
+  const { metadata: imageMetadata } = useImage(imageID);
   return computed(() => {
-    const config = viewSliceStore.getConfig(
-      unref(viewID),
-      currentImageID.value
-    );
+    const config = viewSliceStore.getConfig(unref(viewID), unref(imageID));
     if (!config) {
       return null;
     }
 
-    const { lpsOrientation } = currentImageMetadata.value;
+    const { lpsOrientation } = imageMetadata.value;
     const axis = getLPSAxisFromDir(config.axisDirection);
     const planeOrigin = [0, 0, 0] as Vector3;
     planeOrigin[lpsOrientation[axis]] = config.slice;
     return {
       axisName: axis,
       axisIndex: lpsOrientation[axis],
-      number: config.slice,
+      slice: config.slice,
       planeNormal: lpsOrientation[config.axisDirection] as Vector3,
       planeOrigin,
     };

From 4b9d6754e0805c91e17359e60a003cd44cc43830 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Mar 2024 16:32:36 -0400
Subject: [PATCH 087/113] feat: migrate crosshairs tool

---
 src/components/SliceViewer.vue                |  6 ++
 .../tools/crosshairs/CrosshairSVG2D.vue       | 21 ++----
 .../tools/crosshairs/CrosshairsTool.vue       | 23 ++++---
 .../tools/crosshairs/CrosshairsWidget2D.vue   | 65 +++++++------------
 4 files changed, 48 insertions(+), 67 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index a4306308e..23ab44dee 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -53,6 +53,11 @@
             ></vtk-layer-slice-representation>
           </template>
           <crop-tool :view-id="viewId" :image-id="currentImageID" />
+          <crosshairs-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          />
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -74,6 +79,7 @@ import { useSegmentGroupStore } from '@/src/store/segmentGroups';
 import VtkLayerSliceRepresentation from '@/src/components/vtk/VtkLayerSliceRepresentation.vue';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
+import CrosshairsTool from '@/src/components/tools/crosshairs/CrosshairsTool.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/tools/crosshairs/CrosshairSVG2D.vue b/src/components/tools/crosshairs/CrosshairSVG2D.vue
index 04b99f557..0ca172b4d 100644
--- a/src/components/tools/crosshairs/CrosshairSVG2D.vue
+++ b/src/components/tools/crosshairs/CrosshairSVG2D.vue
@@ -43,9 +43,7 @@
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { ToolContainer } from '@/src/constants';
-import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import {
   PropType,
@@ -57,6 +55,7 @@ import {
   computed,
   inject,
 } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
 
 type SVGPoint = {
   x: number;
@@ -66,23 +65,16 @@ type SVGPoint = {
 export default defineComponent({
   props: {
     position: Array as PropType<Array<number>>,
-    viewId: {
-      type: String,
-      required: true,
-    },
   },
   setup(props) {
-    const { viewId: viewID, position } = toRefs(props);
+    const { position } = toRefs(props);
     const position2D = ref<SVGPoint>();
 
-    const viewStore = useViewStore();
-
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
 
     const updatePoints = () => {
-      const viewRenderer = viewProxy.value.getRenderer();
+      const viewRenderer = view.renderer;
       const pt = unref(position) as Vector3 | undefined;
       if (pt) {
         const point2D = worldToSVG(pt, viewRenderer);
@@ -95,8 +87,7 @@ export default defineComponent({
       }
     };
 
-    const camera = computed(() => viewProxy.value.getCamera());
-    onVTKEvent(camera, 'onModified', updatePoints);
+    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
 
     watchEffect(updatePoints);
 
diff --git a/src/components/tools/crosshairs/CrosshairsTool.vue b/src/components/tools/crosshairs/CrosshairsTool.vue
index 69eb3d9e4..4f1b73778 100644
--- a/src/components/tools/crosshairs/CrosshairsTool.vue
+++ b/src/components/tools/crosshairs/CrosshairsTool.vue
@@ -1,14 +1,10 @@
 <template>
   <div v-if="active" class="overlay-no-events">
     <svg class="overlay-no-events">
-      <CrosshairSVG2D
-        v-show="isVisible"
-        :view-id="viewId"
-        :position="position"
-      />
+      <CrosshairSVG2D v-show="isVisible" :position="position" />
     </svg>
     <CrosshairsWidget2D
-      :slice="slice"
+      :image-id="imageId"
       :view-id="viewId"
       :view-direction="viewDirection"
     />
@@ -25,6 +21,8 @@ import { Tools } from '@/src/store/tools/types';
 import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { clampValue } from '@/src/utils';
+import { Maybe } from '@/src/types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import CrosshairsWidget2D from './CrosshairsWidget2D.vue';
 import CrosshairSVG2D from './CrosshairSVG2D.vue';
 
@@ -35,28 +33,29 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    slice: {
-      type: Number,
-      required: true,
-    },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     CrosshairsWidget2D,
     CrosshairSVG2D,
   },
   setup(props) {
-    const { viewDirection, slice } = toRefs(props);
+    const { viewId, imageId, viewDirection } = toRefs(props);
 
     const toolStore = useToolStore();
     const { position, imagePosition } = storeToRefs(useCrosshairsToolStore());
 
+    const sliceInfo = useSliceInfo(viewId, imageId);
+
     const { currentImageMetadata } = useCurrentImage();
     const active = computed(() => toolStore.currentTool === Tools.Crosshairs);
     const isVisible = computed(() => {
+      if (!sliceInfo.value) return false;
+
       const { lpsOrientation, dimensions } = currentImageMetadata.value;
       const axis = getLPSAxisFromDir(viewDirection.value);
       const index = lpsOrientation[axis];
@@ -67,7 +66,7 @@ export default defineComponent({
         0,
         dimensions[index] - 1
       );
-      return Math.round(crosshairsSlice) === slice.value;
+      return Math.round(crosshairsSlice) === sliceInfo.value.slice;
     });
 
     return {
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index 1a96db12a..4de081807 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -1,12 +1,13 @@
 <script lang="ts">
 import {
   defineComponent,
-  onBeforeUnmount,
   PropType,
-  ref,
   toRefs,
   watchEffect,
   computed,
+  inject,
+  onUnmounted,
+  onMounted,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
@@ -14,9 +15,9 @@ import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 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';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
 
 export default defineComponent({
   name: 'CrosshairsWidget2D',
@@ -29,46 +30,37 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    slice: {
-      type: Number,
-      required: true,
-    },
+    imageId: String as PropType<Maybe<string>>,
   },
   setup(props) {
-    const { viewDirection, slice, viewId } = toRefs(props);
+    const { viewDirection, imageId, viewId } = toRefs(props);
 
-    const widgetRef = ref<vtkCrosshairsViewWidget>();
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => {
+      return sliceInfo.value?.slice;
+    });
 
     const crosshairsStore = useCrosshairsToolStore();
     const factory = crosshairsStore.getWidgetFactory();
-    const viewProxy = computed(() =>
-      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-    );
-    const widgetManagerRef = computed(() =>
-      viewProxy.value?.getWidgetManager()
-    );
-
-    onViewProxyMounted(viewProxy, () => {
-      const widgetManager = widgetManagerRef.value;
-      widgetRef.value = widgetManager?.addWidget(
-        factory
-      ) as vtkCrosshairsViewWidget;
+    const widget = view.widgetManager.addWidget(
+      factory
+    ) as vtkCrosshairsViewWidget;
 
-      if (!widgetRef.value) {
-        throw new Error('CrosshairsWidget2D failed to create view widget');
-      }
+    onUnmounted(() => {
+      view.widgetManager.removeWidget(factory);
     });
 
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
-
-    onViewProxyMounted(viewProxy, () => {
-      widgetRef.value!.setManipulator(manipulator);
-    });
+    widget.setManipulator(manipulator);
 
     const { currentImageMetadata } = useCurrentImage();
     watchEffect(() => {
+      if (slice.value == null) return;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
@@ -79,19 +71,12 @@ export default defineComponent({
 
     // --- visibility --- //
 
-    onViewProxyMounted(viewProxy, () => {
-      widgetRef.value!.setVisibility(true);
-    });
+    widget.setVisibility(true);
 
     // --- focus and rendering --- //
 
-    onViewProxyMounted(viewProxy, () => {
-      const widgetManager = widgetManagerRef.value;
-      widgetManager?.renderWidgets();
-    });
-
-    onBeforeUnmount(() => {
-      widgetManagerRef.value?.removeWidget(widgetRef.value!);
+    onMounted(() => {
+      view.widgetManager.renderWidgets();
     });
 
     return () => null;

From e3e2926d478946004e77cdefe425d0f4ed07b9b1 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Mar 2024 16:40:48 -0400
Subject: [PATCH 088/113] feat: migrate paint tool

---
 src/components/SliceViewer.vue               |   6 +
 src/components/tools/paint/PaintTool.vue     |   8 +-
 src/components/tools/paint/PaintWidget2D.vue | 118 ++++++++-----------
 3 files changed, 55 insertions(+), 77 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 23ab44dee..0bc8f6aa6 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -58,6 +58,11 @@
             :image-id="currentImageID"
             :view-direction="viewDirection"
           />
+          <paint-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          />
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -80,6 +85,7 @@ import VtkLayerSliceRepresentation from '@/src/components/vtk/VtkLayerSliceRepre
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
 import CrosshairsTool from '@/src/components/tools/crosshairs/CrosshairsTool.vue';
+import PaintTool from '@/src/components/tools/paint/PaintTool.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/tools/paint/PaintTool.vue b/src/components/tools/paint/PaintTool.vue
index 15b7e7316..6a6a707c4 100644
--- a/src/components/tools/paint/PaintTool.vue
+++ b/src/components/tools/paint/PaintTool.vue
@@ -2,8 +2,8 @@
   <div class="overlay-no-events">
     <PaintWidget2D
       v-if="active"
-      :slice="slice"
       :view-id="viewId"
+      :image-id="imageId"
       :view-direction="viewDirection"
     />
   </div>
@@ -13,6 +13,7 @@
 import { computed, defineComponent, PropType } from 'vue';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { LPSAxisDir } from '@/src/types/lps';
+import { Maybe } from '@/src/types';
 import PaintWidget2D from './PaintWidget2D.vue';
 
 export default defineComponent({
@@ -22,14 +23,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    slice: {
-      type: Number,
-      required: true,
-    },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     PaintWidget2D,
diff --git a/src/components/tools/paint/PaintWidget2D.vue b/src/components/tools/paint/PaintWidget2D.vue
index eec247d20..ea70f56f7 100644
--- a/src/components/tools/paint/PaintWidget2D.vue
+++ b/src/components/tools/paint/PaintWidget2D.vue
@@ -1,28 +1,26 @@
 <script lang="ts">
 import {
   computed,
+  onMounted,
+  onUnmounted,
   defineComponent,
   PropType,
-  ref,
   toRefs,
   watchEffect,
+  inject,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { vtkPaintViewWidget } from '@/src/vtk/PaintWidget';
-import { useViewStore } from '@/src/store/views';
-import { PaintWidgetState } from '@/src/vtk/PaintWidget/state';
 import { vec3 } from 'gl-matrix';
 import { LPSAxisDir } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import {
-  onViewProxyMounted,
-  onViewProxyUnmounted,
-} from '@/src/composables/useViewProxy';
-import { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { Maybe } from '@/src/types';
 
 export default defineComponent({
   name: 'PaintWidget2D',
@@ -35,62 +33,51 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    slice: {
-      type: Number,
-      required: true,
-    },
+    imageId: String as PropType<Maybe<string>>,
   },
   setup(props) {
-    const { viewDirection, slice, viewId } = toRefs(props);
+    const { viewDirection, viewId, imageId } = toRefs(props);
+
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice);
 
     const paintStore = usePaintToolStore();
     const widgetFactory = paintStore.getWidgetFactory();
+    const widgetState = widgetFactory.getWidgetState();
 
-    const widgetRef = ref<vtkPaintViewWidget>();
-
-    const { currentImageMetadata } = useCurrentImage();
+    const { metadata: imageMetadata } = useImage(imageId);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
     const viewAxisIndex = computed(
-      () => currentImageMetadata.value.lpsOrientation[viewAxis.value]
+      () => imageMetadata.value.lpsOrientation[viewAxis.value]
     );
 
     const worldPointToIndex = (worldPoint: vec3) => {
-      const { worldToIndex } = currentImageMetadata.value;
+      const { worldToIndex } = imageMetadata.value;
       const indexPoint = vec3.create();
       vec3.transformMat4(indexPoint, worldPoint, worldToIndex);
       return indexPoint;
     };
 
-    const viewProxy = computed(() =>
-      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-    );
-    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
-
-    onViewProxyMounted(viewProxy, () => {
-      widgetRef.value = widgetManager.value?.addWidget(
-        widgetFactory
-      ) as vtkPaintViewWidget;
-
-      if (!widgetRef.value) {
-        throw new Error('PaintWidget2D failed to create view widget');
-      }
+    const widget = view.widgetManager.addWidget(
+      widgetFactory
+    ) as vtkPaintViewWidget;
 
-      widgetManager.value?.renderWidgets();
-      widgetManager.value?.grabFocus(widgetRef.value);
+    onMounted(() => {
+      view.widgetManager.renderWidgets();
+      view.widgetManager.grabFocus(widget);
     });
 
-    onViewProxyUnmounted(viewProxy, () => {
-      if (!widgetRef.value) {
-        return;
-      }
-      widgetManager.value?.removeWidget(widgetRef.value);
+    onUnmounted(() => {
+      view.widgetManager.removeWidget(widgetFactory);
     });
 
     // --- widget representation config --- //
 
     watchEffect(() => {
-      const widget = widgetRef.value!;
-      const metadata = currentImageMetadata.value;
+      const metadata = imageMetadata.value;
       const slicingIndex = metadata.lpsOrientation[viewAxis.value];
       if (widget) {
         widget.setSlicingIndex(slicingIndex);
@@ -101,40 +88,35 @@ export default defineComponent({
 
     // --- interaction --- //
 
-    onVTKEvent(widgetRef, 'onStartInteractionEvent', () => {
-      const state = widgetRef.value!.getWidgetState() as PaintWidgetState;
+    onVTKEvent(widget, 'onStartInteractionEvent', () => {
       // StartInteraction cannot occur if origin is null.
-      const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+      const indexPoint = worldPointToIndex(widgetState.getBrush().getOrigin()!);
       paintStore.startStroke(indexPoint, viewAxisIndex.value);
     });
 
-    onVTKEvent(widgetRef, 'onInteractionEvent', () => {
-      const state = widgetRef.value!.getWidgetState() as PaintWidgetState;
-      const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+    onVTKEvent(widget, 'onInteractionEvent', () => {
+      const indexPoint = worldPointToIndex(widgetState.getBrush().getOrigin()!);
       paintStore.placeStrokePoint(indexPoint, viewAxisIndex.value);
     });
 
-    onVTKEvent(widgetRef, 'onEndInteractionEvent', () => {
+    onVTKEvent(widget, 'onEndInteractionEvent', () => {
       // end stroke
-      const state = widgetRef.value!.getWidgetState() as PaintWidgetState;
-      const indexPoint = worldPointToIndex(state.getBrush().getOrigin()!);
+      const indexPoint = worldPointToIndex(widgetState.getBrush().getOrigin()!);
       paintStore.endStroke(indexPoint, viewAxisIndex.value);
     });
 
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
-
-    onViewProxyMounted(viewProxy, () => {
-      widgetRef.value!.setManipulator(manipulator);
-    });
+    widget.setManipulator(manipulator);
 
     watchEffect(() => {
+      if (slice.value == null) return;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
         slice.value,
-        currentImageMetadata.value
+        imageMetadata.value
       );
     });
 
@@ -142,38 +124,30 @@ export default defineComponent({
 
     let checkIfPointerInView = false;
 
-    onViewProxyMounted(viewProxy, () => {
-      widgetRef.value!.setVisibility(false);
+    onMounted(() => {
+      widget.setVisibility(false);
       checkIfPointerInView = true;
     });
 
-    const viewInteractor = computed(() => viewProxy.value!.getInteractor());
-
     // Turn on widget visibility and update stencil
     // if mouse starts within view
-    onVTKEvent(viewInteractor, 'onMouseMove', () => {
+    onVTKEvent(view.interactor, 'onMouseMove', () => {
       if (!checkIfPointerInView) {
         return;
       }
       checkIfPointerInView = false;
 
-      widgetRef.value!.setVisibility(true);
+      widget.setVisibility(true);
       paintStore.setSliceAxis(viewAxisIndex.value);
     });
 
-    onVTKEvent(viewInteractor, 'onMouseEnter', () => {
-      const widget = widgetRef.value;
-      if (widget) {
-        paintStore.setSliceAxis(viewAxisIndex.value);
-        widget.setVisibility(true);
-      }
+    onVTKEvent(view.interactor, 'onMouseEnter', () => {
+      paintStore.setSliceAxis(viewAxisIndex.value);
+      widget.setVisibility(true);
     });
 
-    onVTKEvent(viewInteractor, 'onMouseLeave', () => {
-      const widget = widgetRef.value;
-      if (widget) {
-        widget.setVisibility(false);
-      }
+    onVTKEvent(view.interactor, 'onMouseLeave', () => {
+      widget.setVisibility(false);
     });
 
     return () => null;

From fa3f2bd8c8ec251f2b6e8817b2ba3e10cfdb7ad1 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Mar 2024 20:35:09 -0400
Subject: [PATCH 089/113] fix(useVtkView): do not render immediately

The default for requestRender should be the batched deferred render
routine.
---
 src/core/vtk/useVtkView.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/vtk/useVtkView.ts b/src/core/vtk/useVtkView.ts
index 216ae3235..6a8f6f8df 100644
--- a/src/core/vtk/useVtkView.ts
+++ b/src/core/vtk/useVtkView.ts
@@ -101,7 +101,7 @@ export function useVtkView(container: MaybeRef<Maybe<HTMLElement>>): View {
     renderWindow.render();
   };
 
-  const requestRender = ({ immediate } = { immediate: true }) => {
+  const requestRender = ({ immediate } = { immediate: false }) => {
     if (immediate) {
       immediateRender();
     }

From cade1a88328f55a34d9f8cd7f83a66dd87914ea3 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Mar 2024 20:47:27 -0400
Subject: [PATCH 090/113] feat: migrate polygon + ruler tools

---
 src/components/SliceViewer.vue                | 12 +++
 src/components/tools/polygon/PolygonSVG2D.vue | 46 +++------
 src/components/tools/polygon/PolygonTool.vue  | 58 +++++------
 .../tools/polygon/PolygonWidget2D.vue         | 77 ++++++---------
 src/components/tools/ruler/RulerSVG2D.vue     | 37 ++------
 src/components/tools/ruler/RulerTool.vue      | 58 +++++------
 src/components/tools/ruler/RulerWidget2D.vue  | 95 ++++++++-----------
 src/composables/annotationTool.ts             | 37 +++-----
 8 files changed, 163 insertions(+), 257 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 0bc8f6aa6..23b650c5e 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -63,6 +63,16 @@
             :image-id="currentImageID"
             :view-direction="viewDirection"
           />
+          <polygon-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          />
+          <ruler-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          />
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -86,6 +96,8 @@ import { useViewAnimationListener } from '@/src/composables/useViewAnimationList
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
 import CrosshairsTool from '@/src/components/tools/crosshairs/CrosshairsTool.vue';
 import PaintTool from '@/src/components/tools/paint/PaintTool.vue';
+import PolygonTool from '@/src/components/tools/polygon/PolygonTool.vue';
+import RulerTool from '@/src/components/tools/ruler/RulerTool.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index 90541d108..26f160d3f 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -20,23 +20,14 @@
 </template>
 
 <script lang="ts">
-import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ANNOTATION_TOOL_HANDLE_RADIUS, ToolContainer } from '@/src/constants';
-import { useViewStore } from '@/src/store/views';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
-import {
-  PropType,
-  computed,
-  defineComponent,
-  toRefs,
-  ref,
-  watch,
-  inject,
-} from 'vue';
+import { PropType, defineComponent, toRefs, ref, watch, inject } from 'vue';
 import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useResizeObserver } from '@vueuse/core';
 
 const POINT_RADIUS = ANNOTATION_TOOL_HANDLE_RADIUS;
 const FINISHABLE_POINT_RADIUS = POINT_RADIUS + 6;
@@ -49,10 +40,6 @@ export default defineComponent({
     },
     color: String,
     strokeWidth: Number,
-    viewId: {
-      type: String,
-      required: true,
-    },
     movePoint: {
       type: Array as unknown as PropType<Maybe<Vector3>>,
     },
@@ -66,25 +53,17 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      viewId: viewID,
-      points,
-      movePoint,
-      placing,
-      finishable,
-    } = toRefs(props);
+    const { points, movePoint, placing, finishable } = toRefs(props);
 
-    const viewStore = useViewStore();
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
 
     type SVGPoint = { point: Vector2; radius: number };
     const handlePoints = ref<Array<SVGPoint>>([]);
     const linePoints = ref<string>('');
 
     const updatePoints = () => {
-      const viewRenderer = viewProxy.value.getRenderer();
+      const viewRenderer = view.renderer;
       const svgPoints = points.value.map((point) => {
         const point2D = worldToSVG(point, viewRenderer);
         return {
@@ -118,19 +97,16 @@ export default defineComponent({
       linePoints.value = lines.join(' ');
     };
 
-    const camera = computed(() => viewProxy.value.getCamera());
-    onVTKEvent(camera, 'onModified', updatePoints);
+    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
 
-    watch([viewProxy, points, movePoint, placing], updatePoints, {
+    watch([points, movePoint, placing], updatePoints, {
       deep: true,
       immediate: true,
     });
 
     // --- resize --- //
 
-    const containerEl = inject(ToolContainer)!;
-
-    useResizeObserver(containerEl, () => {
+    useResizeObserver(view.renderWindowView.getContainer(), () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/polygon/PolygonTool.vue b/src/components/tools/polygon/PolygonTool.vue
index 55c399d16..0ddcc565f 100644
--- a/src/components/tools/polygon/PolygonTool.vue
+++ b/src/components/tools/polygon/PolygonTool.vue
@@ -6,7 +6,7 @@
         :key="tool.id"
         :tool-id="tool.id"
         :is-placing="tool.id === placingToolID"
-        :current-slice="currentSlice"
+        :image-id="imageId"
         :view-id="viewId"
         :view-direction="viewDirection"
         @contextmenu="openContextMenu(tool.id, $event)"
@@ -20,16 +20,9 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, onUnmounted, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
@@ -44,6 +37,9 @@ import {
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import { Maybe } from '@/src/types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { watchImmediate } from '@vueuse/core';
 import PolygonWidget2D from './PolygonWidget2D.vue';
 
 const useActiveToolStore = usePolygonStore;
@@ -56,14 +52,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     PolygonWidget2D,
@@ -71,12 +64,15 @@ export default defineComponent({
     AnnotationInfo,
   },
   setup(props) {
-    const { viewDirection, currentSlice } = toRefs(props);
+    const { viewDirection, imageId, viewId } = toRefs(props);
     const toolStore = useToolStore();
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+
+    const { metadata: imageMetadata } = useImage(imageId);
     const isToolActive = computed(() => toolStore.currentTool === toolType);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
@@ -84,41 +80,37 @@ export default defineComponent({
 
     const frameOfReference = useFrameOfReference(
       viewDirection,
-      currentSlice,
-      currentImageMetadata
+      slice,
+      imageMetadata
     );
 
     const placingTool = usePlacingAnnotationTool(
       activeToolStore,
       computed(() => {
-        if (!currentImageID.value) return {};
+        if (!imageId.value) return {};
         return {
-          imageID: currentImageID.value,
+          imageID: imageId.value,
           frameOfReference: frameOfReference.value,
-          slice: currentSlice.value,
+          slice: slice.value,
           label: activeLabel.value,
           ...(activeLabel.value && activeToolStore.labels[activeLabel.value]),
         };
       })
     );
 
-    watch(
-      [isToolActive, currentImageID] as const,
-      ([active, imageID]) => {
-        placingTool.remove();
-        if (active && imageID) {
-          placingTool.add();
-        }
-      },
-      { immediate: true }
-    );
+    watchImmediate([isToolActive, imageId] as const, ([active, imageID]) => {
+      placingTool.remove();
+      if (active && imageID) {
+        placingTool.add();
+      }
+    });
 
     onUnmounted(() => {
       placingTool.remove();
     });
 
     const onToolPlaced = () => {
-      if (currentImageID.value) {
+      if (imageId.value) {
         placingTool.commit();
         placingTool.add();
       }
@@ -130,7 +122,7 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
-    const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
+    const { onHover, overlayInfo } = useHover(currentTools, slice);
 
     return {
       tools: currentTools,
diff --git a/src/components/tools/polygon/PolygonWidget2D.vue b/src/components/tools/polygon/PolygonWidget2D.vue
index 526b34027..8bb82c6a3 100644
--- a/src/components/tools/polygon/PolygonWidget2D.vue
+++ b/src/components/tools/polygon/PolygonWidget2D.vue
@@ -4,13 +4,14 @@ import {
   computed,
   defineComponent,
   PropType,
-  ref,
   toRefs,
   watch,
   watchEffect,
+  inject,
+  onUnmounted,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
@@ -25,13 +26,9 @@ import vtkWidgetFactory, {
 } from '@/src/vtk/PolygonWidget';
 import { Maybe } from '@/src/types';
 import type { Vector3 } from '@kitware/vtk.js/types';
-import { useViewStore } from '@/src/store/views';
-import {
-  onViewProxyMounted,
-  onViewProxyUnmounted,
-} from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import SVG2DComponent from './PolygonSVG2D.vue';
 
 export default defineComponent({
@@ -50,56 +47,44 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     isPlacing: {
       type: Boolean,
       default: false,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
-      toRefs(props);
+    const { toolId, viewId, viewDirection, imageId, isPlacing } = toRefs(props);
+
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() =>
-      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-    );
-    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
+    const { metadata: imageMetadata } = useImage(imageId);
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
     });
-    const widget = ref<WidgetView | null>(null);
+    const widget = view.widgetManager.addWidget(widgetFactory) as WidgetView;
 
-    onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value?.addWidget(
-        widgetFactory
-      ) as WidgetView;
-    });
-
-    onViewProxyUnmounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
-      }
-      // widgetManager calls widget.delete()
-      widgetManager.value?.removeWidget(widget.value);
+    onUnmounted(() => {
+      view.widgetManager.removeWidget(widget);
       widgetFactory.delete();
     });
 
     // --- reset on slice/image changes --- //
 
-    watch([currentSlice, currentImageID, widget], () => {
-      if (widget.value && isPlacing.value) {
-        widget.value.resetInteractions();
-        widget.value.getWidgetState().clearHandles();
+    watch([slice, imageId], () => {
+      if (isPlacing.value) {
+        widget.resetInteractions();
+        widget.getWidgetState().clearHandles();
       }
     });
 
@@ -116,27 +101,21 @@ export default defineComponent({
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
-
-    onViewProxyMounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
-      }
-      widget.value.setManipulator(manipulator);
-    });
+    widget.setManipulator(manipulator);
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? currentSlice.value,
-        currentImageMetadata.value
+        tool.value?.slice ?? slice.value ?? 0,
+        imageMetadata.value
       );
     });
 
     // --- visibility --- //
 
-    const isVisible = computed(() => tool.value?.slice === currentSlice.value);
-    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
+    const isVisible = computed(() => tool.value?.slice === slice.value);
+    useWidgetVisibility(widget, isVisible, view);
 
     // --- //
 
@@ -152,6 +131,7 @@ export default defineComponent({
     });
 
     return {
+      slice,
       tool,
       editState,
     };
@@ -161,8 +141,7 @@ export default defineComponent({
 
 <template>
   <SVG2DComponent
-    v-show="currentSlice === tool.slice"
-    :view-id="viewId"
+    v-show="slice === tool.slice"
     :points="tool.points"
     :color="tool.color"
     :stroke-width="tool.strokeWidth"
diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/src/components/tools/ruler/RulerSVG2D.vue
index 2fe456d22..49f546f7e 100644
--- a/src/components/tools/ruler/RulerSVG2D.vue
+++ b/src/components/tools/ruler/RulerSVG2D.vue
@@ -47,12 +47,9 @@
 </template>
 
 <script lang="ts">
-import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer, ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
-import { useViewStore } from '@/src/store/views';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import {
   PropType,
@@ -64,6 +61,8 @@ import {
   watch,
   inject,
 } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useResizeObserver } from '@vueuse/core';
 
 type SVGPoint = {
   x: number;
@@ -77,10 +76,6 @@ export default defineComponent({
     color: String,
     strokeWidth: Number,
     length: Number,
-    viewId: {
-      type: String,
-      required: true,
-    },
     textOffset: {
       type: Number,
       default: 8,
@@ -91,24 +86,15 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const {
-      viewId: viewID,
-      point1,
-      point2,
-      textOffset,
-      length,
-    } = toRefs(props);
+    const { point1, point2, textOffset, length } = toRefs(props);
     const firstPoint = ref<SVGPoint | null>();
     const secondPoint = ref<SVGPoint | null>();
 
-    const viewStore = useViewStore();
-
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
 
     const updatePoints = () => {
-      const viewRenderer = viewProxy.value.getRenderer();
+      const viewRenderer = view.renderer;
       const pt1 = unref(point1) as Vector3 | undefined;
       const pt2 = unref(point2) as Vector3 | undefined;
       if (pt1) {
@@ -136,10 +122,9 @@ export default defineComponent({
       }
     };
 
-    const camera = computed(() => viewProxy.value.getCamera());
-    onVTKEvent(camera, 'onModified', updatePoints);
+    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
 
-    watch([viewProxy, point1, point2], updatePoints, {
+    watch([point1, point2], updatePoints, {
       deep: true,
       immediate: true,
     });
@@ -159,9 +144,7 @@ export default defineComponent({
 
     // --- resize --- //
 
-    const containerEl = inject(ToolContainer)!;
-
-    useResizeObserver(containerEl, () => {
+    useResizeObserver(view.renderWindowView.getContainer(), () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/ruler/RulerTool.vue b/src/components/tools/ruler/RulerTool.vue
index 7815e7aad..7e54c0073 100644
--- a/src/components/tools/ruler/RulerTool.vue
+++ b/src/components/tools/ruler/RulerTool.vue
@@ -6,7 +6,7 @@
         :key="ruler.id"
         :tool-id="ruler.id"
         :is-placing="ruler.id === placingRulerID"
-        :current-slice="currentSlice"
+        :image-id="imageId"
         :view-id="viewId"
         :view-direction="viewDirection"
         @contextmenu="openContextMenu(ruler.id, $event)"
@@ -20,15 +20,8 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  toRefs,
-  watch,
-} from 'vue';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { computed, defineComponent, onUnmounted, PropType, toRefs } from 'vue';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
 import { Tools } from '@/src/store/tools/types';
 import { useRulerStore } from '@/src/store/tools/rulers';
@@ -45,6 +38,9 @@ import {
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import { Maybe } from '@/src/types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { watchImmediate } from '@vueuse/core';
 
 export default defineComponent({
   name: 'RulerTool',
@@ -53,14 +49,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     RulerWidget2D,
@@ -68,12 +61,15 @@ export default defineComponent({
     AnnotationInfo,
   },
   setup(props) {
-    const { viewDirection, currentSlice } = toRefs(props);
+    const { viewDirection, imageId, viewId } = toRefs(props);
     const toolStore = useToolStore();
     const rulerStore = useRulerStore();
     const { activeLabel } = storeToRefs(rulerStore);
 
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+
+    const { metadata: imageMetadata } = useImage(imageId);
     const isToolActive = computed(() => toolStore.currentTool === Tools.Ruler);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
@@ -81,41 +77,37 @@ export default defineComponent({
 
     const frameOfReference = useFrameOfReference(
       viewDirection,
-      currentSlice,
-      currentImageMetadata
+      slice,
+      imageMetadata
     );
 
     const placingTool = usePlacingAnnotationTool(
       rulerStore,
       computed(() => {
-        if (!currentImageID.value) return {};
+        if (!imageId.value) return {};
         return {
-          imageID: currentImageID.value,
+          imageID: imageId.value,
           frameOfReference: frameOfReference.value,
-          slice: currentSlice.value,
+          slice: slice.value,
           label: activeLabel.value,
           ...(activeLabel.value && rulerStore.labels[activeLabel.value]),
         };
       })
     );
 
-    watch(
-      [isToolActive, currentImageID] as const,
-      ([active, imageID]) => {
-        placingTool.remove();
-        if (active && imageID) {
-          placingTool.add();
-        }
-      },
-      { immediate: true }
-    );
+    watchImmediate([isToolActive, imageId] as const, ([active, imageID]) => {
+      placingTool.remove();
+      if (active && imageID) {
+        placingTool.add();
+      }
+    });
 
     onUnmounted(() => {
       placingTool.remove();
     });
 
     const onRulerPlaced = () => {
-      if (currentImageID.value) {
+      if (imageId.value) {
         placingTool.commit();
         placingTool.add();
       }
@@ -137,7 +129,7 @@ export default defineComponent({
       }));
     });
 
-    const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
+    const { onHover, overlayInfo } = useHover(currentTools, slice);
 
     return {
       rulers: currentRulers,
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index b44b91830..6439a3151 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -9,13 +9,14 @@ import {
   computed,
   defineComponent,
   PropType,
-  ref,
   toRefs,
   watch,
   watchEffect,
+  inject,
+  onUnmounted,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRulerStore } from '@/src/store/tools/rulers';
@@ -26,13 +27,11 @@ import {
   useHoverEvent,
   useWidgetVisibility,
 } from '@/src/composables/annotationTool';
-import { useViewStore } from '@/src/store/views';
-import {
-  onViewProxyMounted,
-  onViewProxyUnmounted,
-} from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import { Maybe } from '@/src/types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { watchImmediate } from '@vueuse/core';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -50,68 +49,54 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     isPlacing: {
       type: Boolean,
       default: false,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     RulerSVG2D,
   },
   setup(props, { emit }) {
-    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
-      toRefs(props);
+    const { toolId, viewId, viewDirection, imageId, isPlacing } = toRefs(props);
+
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice ?? 0);
 
     const rulerStore = useRulerStore();
     const ruler = computed(() => rulerStore.rulerByID[toolId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() =>
-      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-    );
-    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
+    const { metadata: imageMetadata } = useImage(imageId);
 
     const widgetFactory = vtkRulerWidget.newInstance({
       id: toolId.value,
       isPlaced: !isPlacing.value,
     });
-    const widget = ref<vtkRulerViewWidget | null>(null);
+    const widget = view.widgetManager.addWidget(
+      widgetFactory
+    ) as vtkRulerViewWidget;
 
-    onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value?.addWidget(
-        widgetFactory
-      ) as vtkRulerViewWidget;
+    onUnmounted(() => {
+      view.widgetManager.removeWidget(widget);
+      widgetFactory.delete();
     });
 
-    onViewProxyUnmounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
+    watchImmediate(isPlacing, (placing) => {
+      if (placing) {
+        widget.setInteractionState(InteractionState.PlacingFirst);
       }
-      // widgetManager calls widget.delete()
-      widgetManager.value?.removeWidget(widget.value);
-      widgetFactory.delete();
     });
 
-    watch(
-      [isPlacing, widget],
-      ([placing, widget_]) => {
-        if (placing && widget_) {
-          widget_.setInteractionState(InteractionState.PlacingFirst);
-        }
-      },
-      { immediate: true }
-    );
-
     // --- reset on slice/image changes --- //
 
-    watch([currentSlice, currentImageID, widget], () => {
-      const isPlaced = widget.value?.getWidgetState().getIsPlaced();
-      if (widget.value && !isPlaced) {
-        widget.value.resetInteractions();
-        widget.value.setInteractionState(InteractionState.PlacingFirst);
+    watch([slice, imageId], () => {
+      const isPlaced = widget.getWidgetState().getIsPlaced();
+      if (!isPlaced) {
+        widget.resetInteractions();
+        widget.setInteractionState(InteractionState.PlacingFirst);
       }
     });
 
@@ -130,27 +115,21 @@ export default defineComponent({
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
-
-    onViewProxyMounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
-      }
-      widget.value.setManipulator(manipulator);
-    });
+    widget.setManipulator(manipulator);
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        ruler.value?.slice ?? currentSlice.value,
-        currentImageMetadata.value
+        ruler.value?.slice ?? slice.value,
+        imageMetadata.value
       );
     });
 
     // --- visibility --- //
 
-    const isVisible = computed(() => ruler.value?.slice === currentSlice.value);
-    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
+    const isVisible = computed(() => ruler.value?.slice === slice.value);
+    useWidgetVisibility(widget, isVisible, view);
 
     // --- handle pick visibility --- //
 
@@ -172,6 +151,7 @@ export default defineComponent({
 
     return {
       ruler,
+      slice,
       firstPoint: computed(() => {
         return visibleStates.firstPoint ? ruler.value?.firstPoint : undefined;
       }),
@@ -186,8 +166,7 @@ export default defineComponent({
 
 <template>
   <RulerSVG2D
-    v-show="currentSlice === ruler.slice"
-    :view-id="viewId"
+    v-show="slice === ruler.slice"
     :point1="firstPoint"
     :point2="secondPoint"
     :color="ruler.color"
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 295a18aec..3f1a44457 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -3,6 +3,7 @@ import {
   Ref,
   UnwrapRef,
   computed,
+  onMounted,
   readonly,
   ref,
   unref,
@@ -20,15 +21,14 @@ import { getCSSCoordinatesFromEvent } from '@/src//utils/vtk-helpers';
 import { LPSAxis } from '@/src/types/lps';
 import { AnnotationTool, ToolID } from '@/src/types/annotation-tool';
 import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
-import { useViewStore } from '@/src/store/views';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
 import { usePopperState } from '@/src/composables/usePopperState';
-import { onViewProxyMounted } from '@/src/composables/useViewProxy';
 import {
   ContextMenuEvent,
   vtkAnnotationToolWidget,
 } from '@/src/vtk/ToolWidgetUtils/types';
 import { ImageMetadata } from '@/src/types/image';
+import { View } from '@/src/core/vtk/types';
+import { watchImmediate } from '@vueuse/core';
 
 const SHOW_OVERLAY_DELAY = 250; // milliseconds
 
@@ -89,7 +89,7 @@ export const useContextMenu = () => {
 
 export const useRightClickContextMenu = (
   emit: (event: 'contextmenu', ...args: any[]) => void,
-  widget: Ref<vtkAnnotationToolWidget | null>
+  widget: MaybeRef<vtkAnnotationToolWidget | null>
 ) => {
   onVTKEvent(widget, 'onRightClickEvent', (eventData) => {
     const displayXY = getCSSCoordinatesFromEvent(eventData);
@@ -106,7 +106,7 @@ export const useRightClickContextMenu = (
 
 export const useHoverEvent = (
   emit: (event: 'widgetHover', ...args: any[]) => void,
-  widget: Ref<vtkAnnotationToolWidget | null>
+  widget: MaybeRef<vtkAnnotationToolWidget | null>
 ) => {
   onVTKEvent(widget, 'onHoverEvent', (eventData: any) => {
     const displayXY = getCSSCoordinatesFromEvent(eventData);
@@ -244,30 +244,23 @@ export const usePlacingAnnotationTool = (
 };
 
 export const useWidgetVisibility = <T extends vtkAbstractWidget>(
-  widget: Ref<Maybe<T>>,
+  widget: T,
   visible: Ref<boolean>,
-  widgetManager: Ref<Maybe<vtkWidgetManager>>,
-  viewId: Ref<string>
+  view: View
 ) => {
   // toggles the pickability of the ruler handles,
   // since the 3D ruler parts are visually hidden.
-  watch(
-    () => !!widget.value && visible.value,
+  watchImmediate(
+    () => visible.value,
     (visibility) => {
-      widget.value?.setVisibility(visibility);
-    },
-    { immediate: true }
+      widget.setVisibility(visibility);
+    }
   );
 
-  const viewProxy = computed(() => useViewStore().getViewProxy(viewId.value));
-
-  onViewProxyMounted(viewProxy, () => {
-    if (!widget.value) {
-      return;
-    }
+  onMounted(() => {
     // hide handle visibility, but not picking visibility
-    widget.value.setHandleVisibility(false);
-    widgetManager.value?.renderWidgets();
-    viewProxy.value?.renderLater();
+    widget.setHandleVisibility(false);
+    view.widgetManager.renderWidgets();
+    view.requestRender();
   });
 };

From 4b2c90bcfd48218ab209cfe6ecf611d686c22b46 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Wed, 20 Mar 2024 21:03:26 -0400
Subject: [PATCH 091/113] feat(tools): finalize tool migration

---
 src/components/SliceViewer.vue                | 39 +++++++-
 src/components/tools/BoundingRectangle.vue    | 15 ++--
 src/components/tools/SelectTool.vue           | 22 ++---
 .../tools/crosshairs/CrosshairSVG2D.vue       | 12 +--
 .../tools/crosshairs/CrosshairsWidget2D.vue   |  6 +-
 src/components/tools/polygon/PolygonSVG2D.vue |  7 +-
 .../tools/rectangle/RectangleSVG2D.vue        | 32 +++----
 .../tools/rectangle/RectangleTool.vue         | 35 ++++----
 .../tools/rectangle/RectangleWidget2D.vue     | 89 ++++++++-----------
 src/components/tools/ruler/RulerSVG2D.vue     |  7 +-
 src/components/tools/ruler/RulerWidget2D.vue  | 12 +--
 src/composables/useSliceInfo.ts               | 23 +++--
 12 files changed, 147 insertions(+), 152 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 23b650c5e..f4558d34a 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -73,6 +73,16 @@
             :image-id="currentImageID"
             :view-direction="viewDirection"
           />
+          <rectangle-tool
+            :view-id="viewId"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          />
+          <select-tool />
+          <svg class="overlay-no-events">
+            <bounding-rectangle :points="selectionPoints" />
+          </svg>
+
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -98,6 +108,13 @@ import CrosshairsTool from '@/src/components/tools/crosshairs/CrosshairsTool.vue
 import PaintTool from '@/src/components/tools/paint/PaintTool.vue';
 import PolygonTool from '@/src/components/tools/polygon/PolygonTool.vue';
 import RulerTool from '@/src/components/tools/ruler/RulerTool.vue';
+import RectangleTool from '@/src/components/tools/rectangle/RectangleTool.vue';
+import SelectTool from '@/src/components/tools/SelectTool.vue';
+import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
+import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
+import { useAnnotationToolStore } from '@/src/store/tools';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -121,7 +138,10 @@ function resetCamera() {
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
-const { currentImageID, currentLayers } = useCurrentImage();
+const { currentImageID, currentLayers, currentImageMetadata } =
+  useCurrentImage();
+const sliceInfo = useSliceInfo(viewId, currentImageID);
+const currentSlice = computed(() => sliceInfo.value?.slice);
 
 // segmentations
 const segmentations = computed(() => {
@@ -130,7 +150,22 @@ const segmentations = computed(() => {
   return store.orderByParent[currentImageID.value];
 });
 
-// TODO selection points to bounding box
+// --- selection points --- //
+
+const selectionStore = useToolSelectionStore();
+const selectionPoints = computed(() => {
+  return selectionStore.selection
+    .map((sel) => {
+      const store = useAnnotationToolStore(sel.type);
+      return { store, tool: store.toolByID[sel.id] };
+    })
+    .filter(
+      ({ tool }) =>
+        tool.slice === currentSlice.value &&
+        doesToolFrameMatchViewAxis(viewAxis, tool, currentImageMetadata)
+    )
+    .flatMap(({ store, tool }) => store.getPoints(tool.id));
+});
 </script>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>
diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index 5c01369c0..b98f7be34 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRefs, toRaw, inject } from 'vue';
 import { ANNOTATION_TOOL_HANDLE_RADIUS, ToolContainer } from '@/src/constants';
-import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import { nonNullable } from '@/src/utils/index';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { Bounds, Vector3 } from '@kitware/vtk.js/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useResizeObserver } from '@/src/composables/useResizeObserver';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 const DEFAULT_PADDING = 2;
 
 const props = withDefaults(
   defineProps<{
     points: Array<Vector3>;
-    viewId: string;
     padding?: number;
   }>(),
   {
@@ -23,10 +22,8 @@ const props = withDefaults(
   }
 );
 
-const viewStore = useViewStore();
-const viewProxy = computed(
-  () => viewStore.getViewProxy<vtkLPSView2DProxy>(props.viewId)!
-);
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
 
 const visible = computed(() => {
   return props.points.length > 0;
@@ -40,7 +37,7 @@ const rectangle = ref({
 });
 
 const updateRectangle = () => {
-  const viewRenderer = viewProxy.value.getRenderer();
+  const viewRenderer = view.renderer;
 
   const screenBounds = [...vtkBoundingBox.INIT_BOUNDS] as Bounds;
   toRaw(props.points)
@@ -70,7 +67,7 @@ const updateRectangle = () => {
 const { points } = toRefs(props);
 watch(points, updateRectangle, { immediate: true, deep: true });
 
-const camera = computed(() => viewProxy.value.getCamera());
+const camera = vtkFieldRef(view.renderer, 'activeCamera');
 onVTKEvent(camera, 'onModified', updateRectangle);
 
 const containerEl = inject(ToolContainer)!;
diff --git a/src/components/tools/SelectTool.vue b/src/components/tools/SelectTool.vue
index 5f8bc3809..f54d6d305 100644
--- a/src/components/tools/SelectTool.vue
+++ b/src/components/tools/SelectTool.vue
@@ -1,32 +1,22 @@
 <script setup lang="ts">
 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 { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { vtkAnnotationToolWidget } from '@/src/vtk/ToolWidgetUtils/types';
-import type { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import { inject } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
 
-const props = defineProps<{
-  viewId: string;
-}>();
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
 
-const { viewId } = toRefs(props);
-
-const viewProxy = computed(() =>
-  useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-);
-const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
-const interactor = computed(() => viewProxy.value?.getInteractor());
 const selectionStore = useToolSelectionStore();
 
 onVTKEvent(
-  interactor,
+  view.interactor,
   'onLeftButtonPress',
   (event: any) => {
-    if (!widgetManager.value) return;
     const withModifiers = !!(event.shiftKey || event.controlKey);
-    const selectedData = widgetManager.value.getSelectedData();
+    const selectedData = view.widgetManager.getSelectedData();
     if ('widget' in selectedData) {
       // clicked in empty space.
       const widget = selectedData.widget as vtkAnnotationToolWidget;
diff --git a/src/components/tools/crosshairs/CrosshairSVG2D.vue b/src/components/tools/crosshairs/CrosshairSVG2D.vue
index 0ca172b4d..8ca952443 100644
--- a/src/components/tools/crosshairs/CrosshairSVG2D.vue
+++ b/src/components/tools/crosshairs/CrosshairSVG2D.vue
@@ -40,9 +40,7 @@
 </template>
 
 <script lang="ts">
-import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import type { Vector3 } from '@kitware/vtk.js/types';
 import {
@@ -56,6 +54,8 @@ import {
   inject,
 } from 'vue';
 import { VtkViewContext } from '@/src/components/vtk/context';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { useResizeObserver } from '@vueuse/core';
 
 type SVGPoint = {
   x: number;
@@ -87,15 +87,15 @@ export default defineComponent({
       }
     };
 
-    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
+    const camera = vtkFieldRef(view.renderer, 'activeCamera');
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watchEffect(updatePoints);
 
     // --- resize --- //
 
-    const containerEl = inject(ToolContainer)!;
-
-    useResizeObserver(containerEl, () => {
+    const container = vtkFieldRef(view.renderWindowView, 'container');
+    useResizeObserver(container, () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/crosshairs/CrosshairsWidget2D.vue b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
index 4de081807..435c37149 100644
--- a/src/components/tools/crosshairs/CrosshairsWidget2D.vue
+++ b/src/components/tools/crosshairs/CrosshairsWidget2D.vue
@@ -11,7 +11,7 @@ import {
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { vtkCrosshairsViewWidget } from '@/src/vtk/CrosshairsWidget';
 import { useCrosshairsToolStore } from '@/src/store/tools/crosshairs';
@@ -58,14 +58,14 @@ export default defineComponent({
     const manipulator = vtkPlaneManipulator.newInstance();
     widget.setManipulator(manipulator);
 
-    const { currentImageMetadata } = useCurrentImage();
+    const { metadata: imageMetadata } = useImage(imageId);
     watchEffect(() => {
       if (slice.value == null) return;
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
         slice.value,
-        currentImageMetadata.value
+        imageMetadata.value
       );
     });
 
diff --git a/src/components/tools/polygon/PolygonSVG2D.vue b/src/components/tools/polygon/PolygonSVG2D.vue
index 26f160d3f..5d8054145 100644
--- a/src/components/tools/polygon/PolygonSVG2D.vue
+++ b/src/components/tools/polygon/PolygonSVG2D.vue
@@ -28,6 +28,7 @@ import { PropType, defineComponent, toRefs, ref, watch, inject } from 'vue';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useResizeObserver } from '@vueuse/core';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 const POINT_RADIUS = ANNOTATION_TOOL_HANDLE_RADIUS;
 const FINISHABLE_POINT_RADIUS = POINT_RADIUS + 6;
@@ -97,7 +98,8 @@ export default defineComponent({
       linePoints.value = lines.join(' ');
     };
 
-    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
+    const camera = vtkFieldRef(view.renderer, 'activeCamera');
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watch([points, movePoint, placing], updatePoints, {
       deep: true,
@@ -106,7 +108,8 @@ export default defineComponent({
 
     // --- resize --- //
 
-    useResizeObserver(view.renderWindowView.getContainer(), () => {
+    const container = vtkFieldRef(view.renderWindowView, 'container');
+    useResizeObserver(container, () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/rectangle/RectangleSVG2D.vue b/src/components/tools/rectangle/RectangleSVG2D.vue
index 2a01d9fa6..b895ce394 100644
--- a/src/components/tools/rectangle/RectangleSVG2D.vue
+++ b/src/components/tools/rectangle/RectangleSVG2D.vue
@@ -31,12 +31,9 @@
 </template>
 
 <script lang="ts">
-import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { ToolContainer, ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
-import { useViewStore } from '@/src/store/views';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import type { Vector3 } from '@kitware/vtk.js/types';
 
 import {
@@ -49,6 +46,9 @@ import {
   watch,
   inject,
 } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { useResizeObserver } from '@vueuse/core';
 
 type SVGPoint = {
   x: number;
@@ -62,24 +62,17 @@ export default defineComponent({
     color: String,
     fillColor: String,
     strokeWidth: Number,
-    viewId: {
-      type: String,
-      required: true,
-    },
   },
   setup(props) {
-    const { viewId: viewID, point1, point2 } = toRefs(props);
+    const { point1, point2 } = toRefs(props);
     const firstPoint = ref<SVGPoint | null>();
     const secondPoint = ref<SVGPoint | null>();
 
-    const viewStore = useViewStore();
-
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
 
     const updatePoints = () => {
-      const viewRenderer = viewProxy.value.getRenderer();
+      const viewRenderer = view.renderer;
       const pt1 = unref(point1) as Vector3 | undefined;
       const pt2 = unref(point2) as Vector3 | undefined;
       if (pt1) {
@@ -124,19 +117,18 @@ export default defineComponent({
       };
     });
 
-    const camera = computed(() => viewProxy.value.getCamera());
+    const camera = vtkFieldRef(view.renderer, 'activeCamera');
     onVTKEvent(camera, 'onModified', updatePoints);
 
-    watch([viewProxy, point1, point2], updatePoints, {
+    watch([point1, point2], updatePoints, {
       deep: true,
       immediate: true,
     });
 
     // --- resize --- //
 
-    const containerEl = inject(ToolContainer)!;
-
-    useResizeObserver(containerEl, () => {
+    const container = vtkFieldRef(view.renderWindowView, 'container');
+    useResizeObserver(container, () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/rectangle/RectangleTool.vue b/src/components/tools/rectangle/RectangleTool.vue
index f2520a80e..bf6d2fc04 100644
--- a/src/components/tools/rectangle/RectangleTool.vue
+++ b/src/components/tools/rectangle/RectangleTool.vue
@@ -6,7 +6,7 @@
         :key="tool.id"
         :tool-id="tool.id"
         :is-placing="tool.id === placingToolID"
-        :current-slice="currentSlice"
+        :image-id="imageId"
         :view-id="viewId"
         :view-direction="viewDirection"
         @contextmenu="openContextMenu(tool.id, $event)"
@@ -20,14 +20,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onUnmounted,
-  PropType,
-  toRefs,
-  watch,
-} from 'vue';
+import { computed, defineComponent, onUnmounted, PropType, toRefs } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useToolStore } from '@/src/store/tools';
@@ -44,6 +37,9 @@ import {
 import AnnotationContextMenu from '@/src/components/tools/AnnotationContextMenu.vue';
 import AnnotationInfo from '@/src/components/tools/AnnotationInfo.vue';
 import { useFrameOfReference } from '@/src/composables/useFrameOfReference';
+import { Maybe } from '@/src/types';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { watchImmediate } from '@vueuse/core';
 import RectangleWidget2D from './RectangleWidget2D.vue';
 
 const useActiveToolStore = useRectangleStore;
@@ -56,14 +52,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     viewDirection: {
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     RectangleWidget2D,
@@ -71,11 +64,14 @@ export default defineComponent({
     AnnotationInfo,
   },
   setup(props) {
-    const { viewDirection, currentSlice } = toRefs(props);
+    const { viewDirection, imageId, viewId } = toRefs(props);
     const toolStore = useToolStore();
     const activeToolStore = useActiveToolStore();
     const { activeLabel } = storeToRefs(activeToolStore);
 
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice ?? 0);
+
     const { currentImageID, currentImageMetadata } = useCurrentImage();
     const isToolActive = computed(() => toolStore.currentTool === toolType);
     const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
@@ -84,7 +80,7 @@ export default defineComponent({
 
     const frameOfReference = useFrameOfReference(
       viewDirection,
-      currentSlice,
+      slice,
       currentImageMetadata
     );
 
@@ -95,22 +91,21 @@ export default defineComponent({
         return {
           imageID: currentImageID.value,
           frameOfReference: frameOfReference.value,
-          slice: currentSlice.value,
+          slice: slice.value,
           label: activeLabel.value,
           ...(activeLabel.value && activeToolStore.labels[activeLabel.value]),
         };
       })
     );
 
-    watch(
+    watchImmediate(
       [isToolActive, currentImageID] as const,
       ([active, imageID]) => {
         placingTool.remove();
         if (active && imageID) {
           placingTool.add();
         }
-      },
-      { immediate: true }
+      }
     );
 
     onUnmounted(() => {
@@ -130,7 +125,7 @@ export default defineComponent({
 
     const currentTools = useCurrentTools(activeToolStore, viewAxis);
 
-    const { onHover, overlayInfo } = useHover(currentTools, currentSlice);
+    const { onHover, overlayInfo } = useHover(currentTools, slice);
 
     return {
       tools: currentTools,
diff --git a/src/components/tools/rectangle/RectangleWidget2D.vue b/src/components/tools/rectangle/RectangleWidget2D.vue
index fdc0feaca..a41f28b54 100644
--- a/src/components/tools/rectangle/RectangleWidget2D.vue
+++ b/src/components/tools/rectangle/RectangleWidget2D.vue
@@ -3,14 +3,15 @@ import {
   computed,
   defineComponent,
   PropType,
-  ref,
   toRefs,
   watch,
   watchEffect,
   reactive,
+  inject,
+  onUnmounted,
 } from 'vue';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { useImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
 import { LPSAxisDir } from '@/src/types/lps';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
@@ -26,13 +27,11 @@ import {
   useWidgetVisibility,
 } from '@/src/composables/annotationTool';
 import { vtkRulerWidgetState } from '@/src/vtk/RulerWidget';
-import { useViewStore } from '@/src/store/views';
-import {
-  onViewProxyMounted,
-  onViewProxyUnmounted,
-} from '@/src/composables/useViewProxy';
 import { ToolID } from '@/src/types/annotation-tool';
-import { vtkLPSViewProxy } from '@/src/types/vtk-types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSliceInfo } from '@/src/composables/useSliceInfo';
+import { Maybe } from '@/src/types';
+import { whenever } from '@vueuse/core';
 
 const useStore = useRectangleStore;
 const vtkWidgetFactory = vtkRectangleWidget;
@@ -55,68 +54,55 @@ export default defineComponent({
       type: String as PropType<LPSAxisDir>,
       required: true,
     },
-    currentSlice: {
-      type: Number,
-      required: true,
-    },
     isPlacing: {
       type: Boolean,
       default: false,
     },
+    imageId: String as PropType<Maybe<string>>,
   },
   components: {
     SVG2DComponent,
   },
   setup(props, { emit }) {
-    const { toolId, viewId, viewDirection, currentSlice, isPlacing } =
-      toRefs(props);
+    const { toolId, viewId, viewDirection, imageId, isPlacing } = toRefs(props);
+
+    const view = inject(VtkViewContext);
+    if (!view) throw new Error('No VtkView');
+
+    const sliceInfo = useSliceInfo(viewId, imageId);
+    const slice = computed(() => sliceInfo.value?.slice);
 
     const toolStore = useStore();
     const tool = computed(() => toolStore.toolByID[toolId.value]);
-    const { currentImageID, currentImageMetadata } = useCurrentImage();
-    const viewProxy = computed(() =>
-      useViewStore().getViewProxy<vtkLPSViewProxy>(viewId.value)
-    );
-    const widgetManager = computed(() => viewProxy.value?.getWidgetManager());
+    const { metadata: imageMetadata } = useImage(imageId);
 
     const widgetFactory = vtkWidgetFactory.newInstance({
       id: toolId.value,
       isPlaced: !isPlacing.value,
     });
-    const widget = ref<WidgetView | null>(null);
 
-    onViewProxyMounted(viewProxy, () => {
-      widget.value = widgetManager.value?.addWidget(
-        widgetFactory
-      ) as WidgetView;
-    });
+    const widget = view.widgetManager.addWidget(widgetFactory) as WidgetView;
 
-    onViewProxyUnmounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
-      }
-      // widgetManager calls widget.delete()
-      widgetManager.value?.removeWidget(widget.value);
+    onUnmounted(() => {
+      view.widgetManager.removeWidget(widget);
       widgetFactory.delete();
     });
 
-    watch(
-      [isPlacing, widget],
-      ([placing, widget_]) => {
-        if (placing && widget_) {
-          widget_.setInteractionState(InteractionState.PlacingFirst);
-        }
+    whenever(
+      isPlacing,
+      () => {
+        widget.setInteractionState(InteractionState.PlacingFirst);
       },
       { immediate: true }
     );
 
     // --- reset on slice/image changes --- //
 
-    watch([currentSlice, currentImageID, widget], () => {
-      const isPlaced = widget.value?.getWidgetState().getIsPlaced();
-      if (widget.value && !isPlaced) {
-        widget.value.resetInteractions();
-        widget.value.setInteractionState(InteractionState.PlacingFirst);
+    watch([slice, imageId], () => {
+      const isPlaced = widget.getWidgetState().getIsPlaced();
+      if (!isPlaced) {
+        widget.resetInteractions();
+        widget.setInteractionState(InteractionState.PlacingFirst);
       }
     });
 
@@ -133,27 +119,21 @@ export default defineComponent({
     // --- manipulator --- //
 
     const manipulator = vtkPlaneManipulator.newInstance();
-
-    onViewProxyMounted(viewProxy, () => {
-      if (!widget.value) {
-        return;
-      }
-      widget.value.setManipulator(manipulator);
-    });
+    widget.setManipulator(manipulator);
 
     watchEffect(() => {
       updatePlaneManipulatorFor2DView(
         manipulator,
         viewDirection.value,
-        tool.value?.slice ?? currentSlice.value,
-        currentImageMetadata.value
+        tool.value?.slice ?? slice.value,
+        imageMetadata.value
       );
     });
 
     // --- visibility --- //
 
-    const isVisible = computed(() => tool.value?.slice === currentSlice.value);
-    useWidgetVisibility(widget, isVisible, widgetManager, viewId);
+    const isVisible = computed(() => tool.value?.slice === slice.value);
+    useWidgetVisibility(widget, isVisible, view);
 
     // --- handle pick visibility --- //
 
@@ -175,6 +155,7 @@ export default defineComponent({
 
     return {
       tool,
+      slice,
       firstPoint: computed(() => {
         return visibleStates.firstPoint ? tool.value?.firstPoint : undefined;
       }),
@@ -188,7 +169,7 @@ export default defineComponent({
 
 <template>
   <SVG2DComponent
-    v-show="currentSlice === tool.slice"
+    v-show="slice === tool.slice"
     :view-id="viewId"
     :point1="firstPoint"
     :point2="secondPoint"
diff --git a/src/components/tools/ruler/RulerSVG2D.vue b/src/components/tools/ruler/RulerSVG2D.vue
index 49f546f7e..1f6cb1a0b 100644
--- a/src/components/tools/ruler/RulerSVG2D.vue
+++ b/src/components/tools/ruler/RulerSVG2D.vue
@@ -63,6 +63,7 @@ import {
 } from 'vue';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { useResizeObserver } from '@vueuse/core';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 type SVGPoint = {
   x: number;
@@ -122,7 +123,8 @@ export default defineComponent({
       }
     };
 
-    onVTKEvent(view.renderer.getActiveCamera(), 'onModified', updatePoints);
+    const camera = vtkFieldRef(view.renderer, 'activeCamera');
+    onVTKEvent(camera, 'onModified', updatePoints);
 
     watch([point1, point2], updatePoints, {
       deep: true,
@@ -144,7 +146,8 @@ export default defineComponent({
 
     // --- resize --- //
 
-    useResizeObserver(view.renderWindowView.getContainer(), () => {
+    const container = vtkFieldRef(view.renderWindowView, 'container');
+    useResizeObserver(container, () => {
       updatePoints();
     });
 
diff --git a/src/components/tools/ruler/RulerWidget2D.vue b/src/components/tools/ruler/RulerWidget2D.vue
index 6439a3151..9074d95b7 100644
--- a/src/components/tools/ruler/RulerWidget2D.vue
+++ b/src/components/tools/ruler/RulerWidget2D.vue
@@ -31,7 +31,7 @@ import { ToolID } from '@/src/types/annotation-tool';
 import { Maybe } from '@/src/types';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { VtkViewContext } from '@/src/components/vtk/context';
-import { watchImmediate } from '@vueuse/core';
+import { whenever } from '@vueuse/core';
 
 export default defineComponent({
   name: 'RulerWidget2D',
@@ -84,11 +84,13 @@ export default defineComponent({
       widgetFactory.delete();
     });
 
-    watchImmediate(isPlacing, (placing) => {
-      if (placing) {
+    whenever(
+      isPlacing,
+      () => {
         widget.setInteractionState(InteractionState.PlacingFirst);
-      }
-    });
+      },
+      { immediate: true }
+    );
 
     // --- reset on slice/image changes --- //
 
diff --git a/src/composables/useSliceInfo.ts b/src/composables/useSliceInfo.ts
index adccca023..3a42fe1fc 100644
--- a/src/composables/useSliceInfo.ts
+++ b/src/composables/useSliceInfo.ts
@@ -1,10 +1,10 @@
 import type { Vector3 } from '@kitware/vtk.js/types';
-import { computed, unref } from 'vue';
+import { computed } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { useImage } from '@/src/composables/useCurrentImage';
-import useViewSliceStore from '@/src/store/view-configs/slicing';
 import { Maybe } from '@/src/types';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
 
 /**
  * Returns information about the current slice.
@@ -17,26 +17,23 @@ import { Maybe } from '@/src/types';
  * @param viewID
  */
 export function useSliceInfo(
-  viewID: MaybeRef<string | null>,
+  viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>
 ) {
-  const viewSliceStore = useViewSliceStore();
   const { metadata: imageMetadata } = useImage(imageID);
+  const { slice, config } = useSliceConfig(viewID, imageID);
   return computed(() => {
-    const config = viewSliceStore.getConfig(unref(viewID), unref(imageID));
-    if (!config) {
-      return null;
-    }
-
+    if (!config.value) return null;
     const { lpsOrientation } = imageMetadata.value;
-    const axis = getLPSAxisFromDir(config.axisDirection);
+    const { axisDirection } = config.value;
+    const axis = getLPSAxisFromDir(axisDirection);
     const planeOrigin = [0, 0, 0] as Vector3;
-    planeOrigin[lpsOrientation[axis]] = config.slice;
+    planeOrigin[lpsOrientation[axis]] = slice.value;
     return {
       axisName: axis,
       axisIndex: lpsOrientation[axis],
-      slice: config.slice,
-      planeNormal: lpsOrientation[config.axisDirection] as Vector3,
+      slice: slice.value,
+      planeNormal: lpsOrientation[axisDirection] as Vector3,
       planeOrigin,
     };
   });

From b50b25cd85a9b1897eafc6c293aec283e1382b4f Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 12:58:42 -0400
Subject: [PATCH 092/113] feat(useWebGLWatchdog): migrate from proxies

---
 src/components/ObliqueSliceViewer.vue |  2 +
 src/components/SliceViewer.vue        |  2 +
 src/components/VolumeViewer.vue       |  2 +
 src/composables/useWebGLWatchdog.ts   | 62 +++++++++------------------
 4 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index ff21b5f13..01ccfdc71 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -54,6 +54,7 @@ import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import useResliceCursorStore from '@/src/store/reslice-cursor';
@@ -84,6 +85,7 @@ const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
 const hover = ref(false);
 
+useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index f4558d34a..3f1cee202 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -115,6 +115,7 @@ import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore } from '@/src/store/tools';
 import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
+import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -135,6 +136,7 @@ function resetCamera() {
   vtkView.value.resetCamera();
 }
 
+useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index 454df0fcd..f13ad4e27 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -45,6 +45,7 @@ import { LayoutViewProps } from '@/src/types';
 import VtkBaseVolumeRepresentation from '@/src/components/vtk/VtkBaseVolumeRepresentation.vue';
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
+import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -62,6 +63,7 @@ function resetCamera() {
   vtkView.value.resetCamera();
 }
 
+useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
diff --git a/src/composables/useWebGLWatchdog.ts b/src/composables/useWebGLWatchdog.ts
index 6142be663..d7e242f15 100644
--- a/src/composables/useWebGLWatchdog.ts
+++ b/src/composables/useWebGLWatchdog.ts
@@ -1,24 +1,20 @@
 import { captureMessage } from '@sentry/vue';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
 import { useEventListener, useThrottleFn } from '@vueuse/core';
+import { Messages } from '@/src/constants';
+import { useMessageStore } from '@/src/store/messages';
+import { View } from '@/src/core/vtk/types';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { MaybeRef, computed, unref } from 'vue';
 import { Maybe } from '@/src/types';
-import { useProxyManager } from '@/src/composables/useProxyManager';
-import { Messages } from '../constants';
-import { useMessageStore } from '../store/messages';
-import { onProxyManagerEvent } from './onProxyManagerEvent';
+
+const THROTTLE_THRESHOLD = 250; // ms
 
 /**
  * Collects relevant context for debugging 3D crashes.
  * @returns
  */
-function getVolumeMapperContext(pxm: Maybe<vtkProxyManager>) {
-  if (!pxm) return null;
-
-  const view3d = pxm.getViews().find((view) => view.isA('vtkLPSView3DProxy'));
-  if (!view3d) return null;
-
-  const ren = view3d.getRenderer();
+function getVolumeMapperContext(view: View) {
+  const ren = view.renderer;
   const vol = ren.getVolumes()[0];
   if (!vol) return null;
 
@@ -34,39 +30,21 @@ function getVolumeMapperContext(pxm: Maybe<vtkProxyManager>) {
   );
 }
 
-export function useWebGLWatchdog() {
-  const watchdogs = new Map<string, () => void>();
-  const pxm = useProxyManager();
-
+export function useWebGLWatchdog(view: MaybeRef<Maybe<View>>) {
   const reportError = useThrottleFn(() => {
     const messageStore = useMessageStore();
     messageStore.addError(Messages.WebGLLost.title, Messages.WebGLLost.details);
-    captureMessage('WebGL2 context was lost', {
-      contexts: {
-        vtk: {
-          volumeMapper: getVolumeMapperContext(pxm),
-        },
-      },
-    });
-  }, 150);
 
-  onProxyManagerEvent('ProxyCreated', (id, obj) => {
-    if (!obj || !obj.isA('vtkViewProxy')) return;
-    const view = obj as vtkViewProxy;
-    // TODO getCanvas() typing
-    const canvas = view
-      .getRenderWindow()
-      .getViews()[0]
-      .getCanvas() as HTMLCanvasElement;
+    const contexts: Record<string, any> = {};
+    const viewVal = unref(view);
+    if (viewVal) {
+      contexts.vtk = getVolumeMapperContext(viewVal);
+    }
 
-    const cleanup = useEventListener(canvas, 'webglcontextlost', reportError);
-    watchdogs.set(id, cleanup);
-  });
+    captureMessage('WebGL2 context was lost', { contexts });
+  }, THROTTLE_THRESHOLD);
 
-  onProxyManagerEvent('ProxyDeleted', (id) => {
-    if (watchdogs.has(id)) {
-      watchdogs.get(id)!();
-      watchdogs.delete(id);
-    }
-  });
+  const renWinView = computed(() => unref(view)?.renderWindowView);
+  const canvas = vtkFieldRef(renWinView, 'canvas');
+  useEventListener(canvas, 'webglcontextlost', reportError);
 }

From 0fc7e11eea580329e792a24615030449f2eadd42 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 14:57:39 -0400
Subject: [PATCH 093/113] feat: show multi-slice view

---
 src/components/MultiObliqueSliceViewer.vue    | 122 ++++++++++++++++++
 src/components/ObliqueSliceViewer.vue         |  30 +----
 .../vtk/VtkBaseObliqueSliceRepresentation.vue |   9 +-
 .../vtk/VtkImageOutlineRepresentation.vue     |   2 +-
 src/constants.ts                              |   2 +-
 src/core/vtk/useResliceRepresentation.ts      |   7 +
 src/store/reslice-cursor.ts                   |  14 ++
 7 files changed, 151 insertions(+), 35 deletions(-)
 create mode 100644 src/components/MultiObliqueSliceViewer.vue

diff --git a/src/components/MultiObliqueSliceViewer.vue b/src/components/MultiObliqueSliceViewer.vue
new file mode 100644
index 000000000..4f951b542
--- /dev/null
+++ b/src/components/MultiObliqueSliceViewer.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="vtk-container-wrapper" tabindex="0">
+    <div class="vtk-gutter"></div>
+    <div class="vtk-container">
+      <div class="vtk-sub-container">
+        <vtk-volume-view
+          class="vtk-view"
+          ref="vtkView"
+          data-testid="vtk-view"
+          :view-id="id"
+          :image-id="currentImageID"
+          :view-direction="viewDirection"
+          :view-up="viewUp"
+        >
+          <template v-for="(sliceProps, idx) in obliqueSliceProps" :key="idx">
+            <vtk-base-oblique-slice-representation
+              :view-id="sliceProps.viewId"
+              :image-id="currentImageID"
+              :plane-normal="sliceProps.planeNormal"
+              :plane-origin="sliceProps.planeOrigin"
+            ></vtk-base-oblique-slice-representation>
+            <vtk-image-outline-representation
+              :view-id="sliceProps.viewId"
+              :image-id="currentImageID"
+              :plane-normal="sliceProps.planeNormal"
+              :plane-origin="sliceProps.planeOrigin"
+              :thickness="4"
+              :color="sliceProps.outlineColor"
+            ></vtk-image-outline-representation>
+          </template>
+          <slot></slot>
+        </vtk-volume-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, computed } from 'vue';
+import { useCurrentImage } from '@/src/composables/useCurrentImage';
+import { LPSAxis, LPSAxisDir } from '@/src/types/lps';
+import VtkVolumeView from '@/src/components/vtk/VtkVolumeView.vue';
+import { VtkViewApi } from '@/src/types/vtk-types';
+import { LayoutViewProps } from '@/src/types';
+import VtkBaseObliqueSliceRepresentation from '@/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue';
+import VtkImageOutlineRepresentation from '@/src/components/vtk/VtkImageOutlineRepresentation.vue';
+import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
+import useResliceCursorStore, {
+  mapAxisToViewType,
+} from '@/src/store/reslice-cursor';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
+import { vec3 } from 'gl-matrix';
+import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
+import { RGBColor } from '@kitware/vtk.js/types';
+
+interface SliceSpec {
+  viewID: string;
+  axis: LPSAxis;
+}
+
+interface Props extends LayoutViewProps {
+  viewDirection: LPSAxisDir;
+  viewUp: LPSAxisDir;
+  slices: SliceSpec[];
+}
+
+const vtkView = ref<VtkViewApi>();
+
+const props = defineProps<Props>();
+
+const {
+  id: viewId,
+  type: viewType,
+  viewDirection,
+  viewUp,
+  slices,
+} = toRefs(props);
+
+useViewAnimationListener(vtkView, viewId, viewType);
+
+// base image
+const { currentImageID } = useCurrentImage();
+
+// reslice cursor
+const resliceStore = useResliceCursorStore();
+const { resliceCursor, resliceCursorState } = resliceStore;
+
+// -----
+
+const resliceCenter = vtkFieldRef(resliceCursorState, 'center');
+const obliqueSliceProps = computed(() => {
+  return slices.value.map((sliceSpec) => {
+    const planeNormal = resliceCursor.getPlaneNormalFromViewType(
+      mapAxisToViewType(sliceSpec.axis)
+    );
+    const outlineColor = vec3.scale(
+      [0, 0, 0],
+      OBLIQUE_OUTLINE_COLORS[sliceSpec.viewID],
+      1 / 255
+    ) as RGBColor;
+    return {
+      viewId: sliceSpec.viewID,
+      planeNormal,
+      planeOrigin: resliceCenter.value,
+      outlineColor,
+    };
+  });
+});
+
+// reset camera logic
+function resetCamera() {
+  if (!vtkView.value) return;
+  vtkView.value.resetCamera();
+  vtkView.value.requestRender();
+}
+
+useResetViewsEvents().onClick(resetCamera);
+</script>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
+<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index 01ccfdc71..3be122c87 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -1,12 +1,5 @@
 <template>
-  <div
-    class="vtk-container-wrapper"
-    tabindex="0"
-    @pointerenter="hover = true"
-    @pointerleave="hover = false"
-    @focusin="hover = true"
-    @focusout="hover = false"
-  >
+  <div class="vtk-container-wrapper" tabindex="0">
     <div class="vtk-gutter"></div>
     <div class="vtk-container">
       <div class="vtk-sub-container">
@@ -57,7 +50,9 @@ import { useViewAnimationListener } from '@/src/composables/useViewAnimationList
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
-import useResliceCursorStore from '@/src/store/reslice-cursor';
+import useResliceCursorStore, {
+  mapAxisToViewType,
+} from '@/src/store/reslice-cursor';
 import { LayoutViewProps } from '@/src/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import { VtkViewApi } from '@/src/types/vtk-types';
@@ -65,7 +60,6 @@ import { batchForNextTask } from '@/src/utils/batchForNextTask';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import { RGBColor } from '@kitware/vtk.js/types';
 import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
@@ -83,8 +77,6 @@ const props = defineProps<Props>();
 const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
 const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 
-const hover = ref(false);
-
 useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
@@ -96,18 +88,7 @@ const { currentImageID, currentImageData, currentImageMetadata } =
 const resliceStore = useResliceCursorStore();
 const { resliceCursor, resliceCursorState } = resliceStore;
 
-const widgetViewType = computed(() => {
-  switch (viewAxis.value) {
-    case 'Coronal':
-      return ViewTypes.XZ_PLANE;
-    case 'Sagittal':
-      return ViewTypes.YZ_PLANE;
-    case 'Axial':
-      return ViewTypes.XY_PLANE;
-    default:
-      throw new Error(`Invalid view axis: ${viewAxis.value}`);
-  }
-});
+const widgetViewType = computed(() => mapAxisToViewType(viewAxis.value));
 
 watchEffect(() => {
   if (currentImageData.value) {
@@ -207,7 +188,6 @@ function resetCamera() {
 
   const { worldBounds } = metadata;
   planeOrigin.value = vtkBoundingBox.getCenter(worldBounds);
-  console.log('center', planeOrigin.value);
   resliceCursorState.placeWidget(worldBounds);
 
   vtkView.value.resetCamera();
diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
index d59641c82..053843966 100644
--- a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -2,7 +2,6 @@
 import { toRefs, watchEffect, inject } from 'vue';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useResliceRepresentation } from '@/src/core/vtk/useResliceRepresentation';
-import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
@@ -31,8 +30,7 @@ if (!view) throw new Error('No VtkView');
 
 const { imageData } = useImage(imageID);
 
-// bind slice and window configs
-const sliceConfig = useSliceConfig(viewID, imageID);
+// bind window configs
 const wlConfig = useWindowingConfig(viewID, imageID);
 
 // setup base image
@@ -58,11 +56,6 @@ watchImmediate([planeNormal, planeOrigin], ([normal, origin]) => {
   plane.setOrigin(origin);
 });
 
-// sync slicing
-watchEffect(() => {
-  sliceRep.mapper.setSlice(sliceConfig.slice.value);
-});
-
 // sync windowing
 watchEffect(() => {
   sliceRep.property.setColorLevel(wlConfig.level.value);
diff --git a/src/components/vtk/VtkImageOutlineRepresentation.vue b/src/components/vtk/VtkImageOutlineRepresentation.vue
index ca700ef2f..27a032eda 100644
--- a/src/components/vtk/VtkImageOutlineRepresentation.vue
+++ b/src/components/vtk/VtkImageOutlineRepresentation.vue
@@ -11,7 +11,7 @@ import vtkCutter from '@kitware/vtk.js/Filters/Core/Cutter';
 import vtkImageDataOutlineFilter from '@kitware/vtk.js/Filters/General/ImageDataOutlineFilter';
 import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import { syncRefs, watchImmediate } from '@vueuse/core';
 import { inject, toRefs, watchEffect } from 'vue';
 
diff --git a/src/constants.ts b/src/constants.ts
index 20a0229a5..65352e453 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -154,7 +154,7 @@ export const WLPresetsCT = {
 };
 
 export const OBLIQUE_OUTLINE_COLORS: Record<string, RGBColor> = {
-  ObliqueAxial: [51, 255, 51], // Green
+  ObliqueAxial: [0, 128, 255], // Blue
   ObliqueSagittal: [255, 255, 0], // Yellow
   ObliqueCoronal: [255, 51, 51], // Red
 };
diff --git a/src/core/vtk/useResliceRepresentation.ts b/src/core/vtk/useResliceRepresentation.ts
index 21413d409..b755ea89e 100644
--- a/src/core/vtk/useResliceRepresentation.ts
+++ b/src/core/vtk/useResliceRepresentation.ts
@@ -5,6 +5,8 @@ import { useVtkRepresentation } from '@/src/core/vtk/useVtkRepresentation';
 import { Maybe } from '@/src/types';
 import { View } from '@/src/core/vtk/types';
 import vtkImageResliceMapper from '@kitware/vtk.js/Rendering/Core/ImageResliceMapper';
+import { onVTKEvent } from '@/src/composables/onVTKEvent';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 export function useResliceRepresentation(
   view: View,
@@ -17,5 +19,10 @@ export function useResliceRepresentation(
     vtkMapperClass: vtkImageResliceMapper,
   });
 
+  const plane = vtkFieldRef(sliceRep.mapper, 'slicePlane');
+  onVTKEvent(plane, 'onModified', () => {
+    view.requestRender();
+  });
+
   return sliceRep;
 }
diff --git a/src/store/reslice-cursor.ts b/src/store/reslice-cursor.ts
index f6d01b331..d03b716c8 100644
--- a/src/store/reslice-cursor.ts
+++ b/src/store/reslice-cursor.ts
@@ -1,5 +1,6 @@
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { ImageMetadata } from '@/src/types/image';
+import { LPSAxis } from '@/src/types/lps';
 import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import vtkResliceCursorWidget, {
   ResliceCursorWidgetState,
@@ -8,6 +9,19 @@ import type { Vector3 } from '@kitware/vtk.js/types';
 import { defineStore } from 'pinia';
 import { toRaw, watchEffect } from 'vue';
 
+export function mapAxisToViewType(axis: LPSAxis) {
+  switch (axis) {
+    case 'Coronal':
+      return ViewTypes.XZ_PLANE;
+    case 'Sagittal':
+      return ViewTypes.YZ_PLANE;
+    case 'Axial':
+      return ViewTypes.XY_PLANE;
+    default:
+      throw new Error(`Invalid view axis: ${axis}`);
+  }
+}
+
 function resetReslicePlanes(
   resliceCursorState: ResliceCursorWidgetState,
   imageMetadata: ImageMetadata

From 725cb867df012bfae0745f84b1846edaa43ba8a2 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 15:19:16 -0400
Subject: [PATCH 094/113] refactor: drop proxies

---
 src/components/App.vue                        |  69 +----
 src/components/ObliqueSliceViewer.vue         |   2 +-
 src/components/tools/BoundingRectangle.vue    |   8 +-
 src/components/tools/ResliceCursorTool.vue    | 251 +++++++-----------
 src/components/tools/ResliceCursorToolNew.vue | 104 --------
 .../vtk/VtkBaseVolumeRepresentation.vue       |   4 +-
 .../vtk/VtkLayerSliceRepresentation.vue       |   2 +-
 src/components/vtk/VtkSliceView.vue           |   2 +-
 src/components/vtk/VtkVolumeView.vue          |   2 +-
 src/composables/isViewAnimating.ts            |  19 +-
 src/composables/useColoringEffect.ts          | 123 ++++-----
 src/composables/useColoringEffectNew.ts       | 103 -------
 src/composables/usePersistCameraConfig.ts     | 177 ++++--------
 src/composables/usePersistCameraConfigNew.ts  |  62 -----
 src/config.ts                                 |  16 ++
 src/constants.ts                              |  21 --
 src/core/provider.ts                          |   4 -
 src/core/viewTypes.ts                         |  16 +-
 src/global.d.ts                               |   2 -
 src/main.js                                   |  10 -
 src/store/datasets-images.ts                  |   5 -
 src/store/datasets-layers.ts                  |   7 -
 src/store/datasets-models.ts                  |   1 -
 src/store/datasets.ts                         |   8 -
 src/store/segmentGroups.ts                    |   3 -
 src/store/views.ts                            |  27 --
 src/types/vtk-types.ts                        |   4 -
 27 files changed, 238 insertions(+), 814 deletions(-)
 delete mode 100644 src/components/tools/ResliceCursorToolNew.vue
 delete mode 100644 src/composables/useColoringEffectNew.ts
 delete mode 100644 src/composables/usePersistCameraConfigNew.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index 1ee1462b3..8414e41fc 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+import { computed, defineComponent, onMounted, ref } from 'vue';
 import { storeToRefs } from 'pinia';
 import { UrlParams } from '@vueuse/core';
 import vtkURLExtract from '@kitware/vtk.js/Common/Core/URLExtract';
@@ -64,12 +64,6 @@ import {
   loadUserPromptedFiles,
   loadUrls,
 } from '@/src/actions/loadUserFiles';
-import vtkResliceCursorWidget, {
-  ResliceCursorWidgetState,
-} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import type { Vector3 } from '@kitware/vtk.js/types';
-import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
 import WelcomePage from '@/src/components/WelcomePage.vue';
 import { useDICOMStore } from '@/src/store/datasets-dicom';
 import LayoutGrid from '@/src/components/LayoutGrid.vue';
@@ -80,9 +74,7 @@ import KeyboardShortcuts from '@/src/components/KeyboardShortcuts.vue';
 import { useImageStore } from '@/src/store/datasets-images';
 import { useServerStore } from '@/src/store/server';
 import { useGlobalErrorHook } from '@/src/composables/useGlobalErrorHook';
-import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useKeyboardShortcuts } from '@/src/composables/useKeyboardShortcuts';
-import { VTKResliceCursor } from '@/src/constants';
 
 export default defineComponent({
   name: 'App',
@@ -103,67 +95,8 @@ export default defineComponent({
     const dicomStore = useDICOMStore();
 
     useGlobalErrorHook();
-    useWebGLWatchdog();
     useKeyboardShortcuts();
 
-    const { currentImageData, currentImageMetadata } = useCurrentImage();
-
-    // --- ResliceCursorWidget --- //
-    // Construct the common instance of vtkResliceCursorWidget and provide it
-    // to all the child ObliqueView components.
-    const resliceCursor = vtkResliceCursorWidget.newInstance({
-      scaleInPixels: true,
-      rotationHandlePosition: 0.75,
-    }) as vtkResliceCursorWidget;
-    provide(VTKResliceCursor, resliceCursor);
-
-    // TODO: Move this to a store/global-state for reslicing.
-    // Orient the planes of the vtkResliceCursorWidget to the orientation
-    // of the currently set image.
-    const resliceCursorState =
-      resliceCursor.getWidgetState() as ResliceCursorWidgetState;
-
-    // Temporary fix to disable race between PanTool and ResliceCursorWidget
-    resliceCursorState.setScrollingMethod(-1);
-
-    watch(currentImageData, (image) => {
-      if (image && resliceCursor) {
-        resliceCursor.setImage(image);
-        // Reset to default plane values before transforming based on current image-data.
-        resliceCursorState.setPlanes({
-          [ViewTypes.YZ_PLANE]: {
-            normal: [1, 0, 0],
-            viewUp: [0, 0, 1],
-          },
-          [ViewTypes.XZ_PLANE]: {
-            normal: [0, -1, 0],
-            viewUp: [0, 0, 1],
-          },
-          [ViewTypes.XY_PLANE]: {
-            normal: [0, 0, -1],
-            viewUp: [0, -1, 0],
-          },
-        });
-        const planes = resliceCursorState.getPlanes();
-        if (currentImageMetadata.value) {
-          planes[ViewTypes.XY_PLANE].normal = currentImageMetadata.value
-            .lpsOrientation.Inferior as Vector3;
-          planes[ViewTypes.XY_PLANE].viewUp = currentImageMetadata.value
-            .lpsOrientation.Anterior as Vector3;
-
-          planes[ViewTypes.XZ_PLANE].normal = currentImageMetadata.value
-            .lpsOrientation.Anterior as Vector3;
-          planes[ViewTypes.XZ_PLANE].viewUp = currentImageMetadata.value
-            .lpsOrientation.Superior as Vector3;
-
-          planes[ViewTypes.YZ_PLANE].normal = currentImageMetadata.value
-            .lpsOrientation.Left as Vector3;
-          planes[ViewTypes.YZ_PLANE].viewUp = currentImageMetadata.value
-            .lpsOrientation.Superior as Vector3;
-        }
-      }
-    });
-
     // --- file handling --- //
 
     const loadDataStore = useLoadDataStore();
diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index 3be122c87..b6aa53048 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -40,7 +40,7 @@
 
 <script setup lang="ts">
 import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
-import ResliceCursorTool from '@/src/components/tools/ResliceCursorToolNew.vue';
+import ResliceCursorTool from '@/src/components/tools/ResliceCursorTool.vue';
 import VtkBaseObliqueSliceRepresentation from '@/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue';
 import VtkImageOutlineRepresentation from '@/src/components/vtk/VtkImageOutlineRepresentation.vue';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
diff --git a/src/components/tools/BoundingRectangle.vue b/src/components/tools/BoundingRectangle.vue
index b98f7be34..234fe9368 100644
--- a/src/components/tools/BoundingRectangle.vue
+++ b/src/components/tools/BoundingRectangle.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { computed, ref, watch, toRefs, toRaw, inject } from 'vue';
-import { ANNOTATION_TOOL_HANDLE_RADIUS, ToolContainer } from '@/src/constants';
+import { ANNOTATION_TOOL_HANDLE_RADIUS } from '@/src/constants';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import { nonNullable } from '@/src/utils/index';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 import type { Bounds, Vector3 } from '@kitware/vtk.js/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { useResizeObserver } from '@/src/composables/useResizeObserver';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { useResizeObserver } from '@vueuse/core';
 
 const DEFAULT_PADDING = 2;
 
@@ -70,8 +70,8 @@ watch(points, updateRectangle, { immediate: true, deep: true });
 const camera = vtkFieldRef(view.renderer, 'activeCamera');
 onVTKEvent(camera, 'onModified', updateRectangle);
 
-const containerEl = inject(ToolContainer)!;
-useResizeObserver(containerEl, () => {
+const container = vtkFieldRef(view.renderWindowView, 'container');
+useResizeObserver(container, () => {
   updateRectangle();
 });
 </script>
diff --git a/src/components/tools/ResliceCursorTool.vue b/src/components/tools/ResliceCursorTool.vue
index a8ad12f51..eeb4258c4 100644
--- a/src/components/tools/ResliceCursorTool.vue
+++ b/src/components/tools/ResliceCursorTool.vue
@@ -1,174 +1,101 @@
-<script lang="ts">
-import { useViewStore } from '@/src/store/views';
-import {
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
+<script setup lang="ts">
+import { computed, inject, ref, toRefs } from 'vue';
 import {
   vtkResliceCursorViewWidget,
   ResliceCursorWidgetState,
 } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import { OBLIQUE_OUTLINE_COLORS, VTKResliceCursor } from '@/src/constants';
-import { onViewProxyMounted } from '@/src/composables/useViewProxy';
+import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
 import { getLPSAxisFromDir, getVTKViewTypeFromLPSAxis } from '@/src/utils/lps';
 import { LPSAxisDir } from '@/src/types/lps';
-import { InitViewIDs } from '../../config';
-
-export default defineComponent({
-  props: {
-    viewId: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const active = true;
-    const { viewId: viewID, viewDirection } = toRefs(props);
-
-    const { currentImageMetadata: curImageMetadata, currentImageData } =
-      useCurrentImage();
-
-    const viewStore = useViewStore();
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
-    const widgetManager = computed(() => viewProxy.value.getWidgetManager());
-
-    const viewType = computed(() => {
-      return viewStore.viewSpecs[viewID.value].viewType;
-    });
-
-    const resliceCursor = inject(VTKResliceCursor);
-    if (!resliceCursor) {
-      throw new Error('Cannot fetch global instance of ResliceCursor');
-    }
-
-    const state = resliceCursor.getWidgetState() as ResliceCursorWidgetState;
-    const widget = ref<vtkResliceCursorViewWidget>();
-
-    const VTKViewType = computed(() => {
-      const viewAxis = getLPSAxisFromDir(viewDirection.value as LPSAxisDir);
-      return getVTKViewTypeFromLPSAxis(viewAxis);
+import useResliceCursorStore from '@/src/store/reslice-cursor';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { onViewMounted, onViewUnmounted } from '@/src/core/vtk/onViewMounted';
+import { InitViewIDs } from '@/src/config';
+
+interface Props {
+  viewId: string;
+  viewDirection: LPSAxisDir;
+}
+
+const props = defineProps<Props>();
+const { viewDirection } = toRefs(props);
+const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No vtk view');
+
+const resliceCursorStore = useResliceCursorStore();
+const { resliceCursor, resliceCursorState } = resliceCursorStore;
+
+const widget = ref<vtkResliceCursorViewWidget>();
+const vtkViewType = computed(() => getVTKViewTypeFromLPSAxis(viewAxis.value));
+
+onViewMounted(view.renderWindowView, () => {
+  widget.value = view.widgetManager.addWidget(
+    resliceCursor,
+    vtkViewType.value
+  ) as vtkResliceCursorViewWidget;
+
+  widget.value.setKeepOrthogonality(true);
+  // reset mouse cursor styles
+  widget.value.setCursorStyles({
+    translateCenter: 'default',
+    rotateLine: 'default',
+    translateAxis: 'default',
+  });
+
+  resliceCursorState.getStatesWithLabel('sphere').forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setScale1(10);
+    h.setOpacity(128);
+  });
+
+  resliceCursorState.getStatesWithLabel('line').forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setScale3(1, 1, 1);
+    h.setOpacity(100);
+  });
+
+  const xLines = [
+    ...resliceCursorState.getStatesWithLabel('XinZ'),
+    ...resliceCursorState.getStatesWithLabel('XinY'),
+  ];
+  xLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueSagittal]);
+  });
+
+  const yLines = [
+    ...resliceCursorState.getStatesWithLabel('YinZ'),
+    ...resliceCursorState.getStatesWithLabel('YinX'),
+  ];
+  yLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueCoronal]);
+  });
+
+  const zLines = [
+    ...resliceCursorState.getStatesWithLabel('ZinX'),
+    ...resliceCursorState.getStatesWithLabel('ZinY'),
+  ];
+  zLines.forEach((handle) => {
+    const h = handle as ResliceCursorWidgetState;
+    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueAxial]);
+  });
+
+  // update representation to not be as 3D
+  widget.value.getRepresentations().forEach((rep) => {
+    rep.getActors().forEach((actor) => {
+      actor.getProperty().setAmbient(1);
     });
+  });
 
-    watch(widgetManager, (wm, oldWm) => {
-      if (oldWm) {
-        oldWm.removeWidget(resliceCursor);
-      }
-      if (wm) {
-        widget.value = wm.addWidget(
-          resliceCursor,
-          VTKViewType.value
-        ) as vtkResliceCursorViewWidget;
-      }
-    });
-
-    onViewProxyMounted(viewProxy, () => {
-      if (widgetManager?.value) {
-        widget.value = widgetManager.value.addWidget(
-          resliceCursor,
-          VTKViewType.value
-        ) as vtkResliceCursorViewWidget;
-
-        widget.value.setKeepOrthogonality(true);
-        // reset mouse cursor styles
-        widget.value.setCursorStyles({
-          translateCenter: 'default',
-          rotateLine: 'default',
-          translateAxis: 'default',
-        });
-
-        state.getStatesWithLabel('sphere').forEach((handle) => {
-          const h = handle as ResliceCursorWidgetState;
-          h.setScale1(10);
-          h.setOpacity(128);
-        });
-
-        state.getStatesWithLabel('line').forEach((handle) => {
-          const h = handle as ResliceCursorWidgetState;
-          h.setScale3(1, 1, 1);
-          h.setOpacity(100);
-        });
-
-        const xLines = [
-          ...state.getStatesWithLabel('XinZ'),
-          ...state.getStatesWithLabel('XinY'),
-        ];
-        xLines.forEach((handle) => {
-          const h = handle as ResliceCursorWidgetState;
-          h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueSagittal]);
-        });
-
-        const yLines = [
-          ...state.getStatesWithLabel('YinZ'),
-          ...state.getStatesWithLabel('YinX'),
-        ];
-        yLines.forEach((handle) => {
-          const h = handle as ResliceCursorWidgetState;
-          h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueCoronal]);
-        });
-
-        const zLines = [
-          ...state.getStatesWithLabel('ZinX'),
-          ...state.getStatesWithLabel('ZinY'),
-        ];
-        zLines.forEach((handle) => {
-          const h = handle as ResliceCursorWidgetState;
-          h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueAxial]);
-        });
-
-        // update representation to not be as 3D
-        widget.value.getRepresentations().forEach((rep) => {
-          rep.getActors().forEach((actor) => {
-            actor.getProperty().setAmbient(1);
-          });
-        });
-
-        // show widget
-        viewProxy.value.renderLater();
-      }
-    });
-
-    onBeforeUnmount(() => {
-      if (widgetManager?.value) {
-        widgetManager.value.removeWidget(resliceCursor);
-      }
-    });
+  view.requestRender();
+});
 
-    watch(
-      curImageMetadata,
-      (metadata) => {
-        state.placeWidget(metadata.worldBounds);
-      },
-      { immediate: true }
-    );
-
-    watch(
-      currentImageData,
-      (currImage) => {
-        if (resliceCursor && currImage) {
-          resliceCursor.setImage(currImage);
-        }
-      },
-      { immediate: true }
-    );
-
-    return {
-      active,
-      viewType,
-    };
-  },
+onViewUnmounted(view.renderWindowView, () => {
+  widget.value = undefined;
+  view.widgetManager.removeWidget(resliceCursor);
 });
 </script>
 
diff --git a/src/components/tools/ResliceCursorToolNew.vue b/src/components/tools/ResliceCursorToolNew.vue
deleted file mode 100644
index eeb4258c4..000000000
--- a/src/components/tools/ResliceCursorToolNew.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { computed, inject, ref, toRefs } from 'vue';
-import {
-  vtkResliceCursorViewWidget,
-  ResliceCursorWidgetState,
-} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
-import { getLPSAxisFromDir, getVTKViewTypeFromLPSAxis } from '@/src/utils/lps';
-import { LPSAxisDir } from '@/src/types/lps';
-import useResliceCursorStore from '@/src/store/reslice-cursor';
-import { VtkViewContext } from '@/src/components/vtk/context';
-import { onViewMounted, onViewUnmounted } from '@/src/core/vtk/onViewMounted';
-import { InitViewIDs } from '@/src/config';
-
-interface Props {
-  viewId: string;
-  viewDirection: LPSAxisDir;
-}
-
-const props = defineProps<Props>();
-const { viewDirection } = toRefs(props);
-const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
-
-const view = inject(VtkViewContext);
-if (!view) throw new Error('No vtk view');
-
-const resliceCursorStore = useResliceCursorStore();
-const { resliceCursor, resliceCursorState } = resliceCursorStore;
-
-const widget = ref<vtkResliceCursorViewWidget>();
-const vtkViewType = computed(() => getVTKViewTypeFromLPSAxis(viewAxis.value));
-
-onViewMounted(view.renderWindowView, () => {
-  widget.value = view.widgetManager.addWidget(
-    resliceCursor,
-    vtkViewType.value
-  ) as vtkResliceCursorViewWidget;
-
-  widget.value.setKeepOrthogonality(true);
-  // reset mouse cursor styles
-  widget.value.setCursorStyles({
-    translateCenter: 'default',
-    rotateLine: 'default',
-    translateAxis: 'default',
-  });
-
-  resliceCursorState.getStatesWithLabel('sphere').forEach((handle) => {
-    const h = handle as ResliceCursorWidgetState;
-    h.setScale1(10);
-    h.setOpacity(128);
-  });
-
-  resliceCursorState.getStatesWithLabel('line').forEach((handle) => {
-    const h = handle as ResliceCursorWidgetState;
-    h.setScale3(1, 1, 1);
-    h.setOpacity(100);
-  });
-
-  const xLines = [
-    ...resliceCursorState.getStatesWithLabel('XinZ'),
-    ...resliceCursorState.getStatesWithLabel('XinY'),
-  ];
-  xLines.forEach((handle) => {
-    const h = handle as ResliceCursorWidgetState;
-    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueSagittal]);
-  });
-
-  const yLines = [
-    ...resliceCursorState.getStatesWithLabel('YinZ'),
-    ...resliceCursorState.getStatesWithLabel('YinX'),
-  ];
-  yLines.forEach((handle) => {
-    const h = handle as ResliceCursorWidgetState;
-    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueCoronal]);
-  });
-
-  const zLines = [
-    ...resliceCursorState.getStatesWithLabel('ZinX'),
-    ...resliceCursorState.getStatesWithLabel('ZinY'),
-  ];
-  zLines.forEach((handle) => {
-    const h = handle as ResliceCursorWidgetState;
-    h.setColor3(OBLIQUE_OUTLINE_COLORS[InitViewIDs.ObliqueAxial]);
-  });
-
-  // update representation to not be as 3D
-  widget.value.getRepresentations().forEach((rep) => {
-    rep.getActors().forEach((actor) => {
-      actor.getProperty().setAmbient(1);
-    });
-  });
-
-  view.requestRender();
-});
-
-onViewUnmounted(view.renderWindowView, () => {
-  widget.value = undefined;
-  view.widgetManager.removeWidget(resliceCursor);
-});
-</script>
-
-<template>
-  <div></div>
-</template>
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index 972d51d90..3d0455f80 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -4,7 +4,7 @@ import { useImage } from '@/src/composables/useCurrentImage';
 import { useVolumeRepresentation } from '@/src/core/vtk/useVolumeRepresentation';
 import { Maybe } from '@/src/types';
 import { VtkViewContext } from '@/src/components/vtk/context';
-import { useColoringEffect } from '@/src/composables/useColoringEffectNew';
+import { useColoringEffect } from '@/src/composables/useColoringEffect';
 import useVolumeColoringStore, {
   DEFAULT_AMBIENT,
   DEFAULT_DIFFUSE,
@@ -13,7 +13,7 @@ import useVolumeColoringStore, {
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
 import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
 import { useVolumeColoringInitializer } from '@/src/composables/useVolumeColoringInitializer';
-import { isViewAnimatingNew as isViewAnimating } from '@/src/composables/isViewAnimating';
+import { isViewAnimating } from '@/src/composables/isViewAnimating';
 import { InterpolationType } from '@kitware/vtk.js/Rendering/Core/VolumeProperty/Constants';
 import {
   setCinematicLighting,
diff --git a/src/components/vtk/VtkLayerSliceRepresentation.vue b/src/components/vtk/VtkLayerSliceRepresentation.vue
index 882981dcf..4dad8ee39 100644
--- a/src/components/vtk/VtkLayerSliceRepresentation.vue
+++ b/src/components/vtk/VtkLayerSliceRepresentation.vue
@@ -13,7 +13,7 @@ import { useSliceConfig } from '@/src/composables/useSliceConfig';
 import { LayerID, useLayersStore } from '@/src/store/datasets-layers';
 import useLayerColoringStore from '@/src/store/view-configs/layers';
 import { useLayerConfigInitializer } from '@/src/composables/useLayerConfigInitializer';
-import { applyColoring } from '@/src/composables/useColoringEffectNew';
+import { applyColoring } from '@/src/composables/useColoringEffect';
 
 interface Props {
   viewId: string;
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 68eb880b8..e7746a61e 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -24,7 +24,7 @@ import { LPSAxisDir } from '@/src/types/lps';
 import type { Vector2 } from '@kitware/vtk.js/types';
 import { syncRef, useResizeObserver, watchImmediate } from '@vueuse/core';
 import { resetCameraToImage, resizeToFitImage } from '@/src/utils/camera';
-import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfigNew';
+import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfig';
 import { useAutoFitState } from '@/src/composables/useAutoFitState';
 import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
diff --git a/src/components/vtk/VtkVolumeView.vue b/src/components/vtk/VtkVolumeView.vue
index 36746785b..04a2cb146 100644
--- a/src/components/vtk/VtkVolumeView.vue
+++ b/src/components/vtk/VtkVolumeView.vue
@@ -18,7 +18,7 @@ import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionMa
 import { LPSAxisDir } from '@/src/types/lps';
 import { watchImmediate } from '@vueuse/core';
 import { resetCameraToImage } from '@/src/utils/camera';
-import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfigNew';
+import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfig';
 import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
diff --git a/src/composables/isViewAnimating.ts b/src/composables/isViewAnimating.ts
index d6acdab3c..ddc052335 100644
--- a/src/composables/isViewAnimating.ts
+++ b/src/composables/isViewAnimating.ts
@@ -1,23 +1,8 @@
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import { computed, ref, unref } from 'vue';
-import { MaybeRef } from '@vueuse/core';
+import { ref } from 'vue';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 import { View } from '@/src/core/vtk/types';
 
-export function isViewAnimating(viewProxy: MaybeRef<vtkViewProxy>) {
-  const isAnimating = ref(false);
-  const interactor = computed(() => unref(viewProxy).getInteractor());
-
-  onVTKEvent(interactor, 'onStartAnimation', () => {
-    isAnimating.value = true;
-  });
-  onVTKEvent(interactor, 'onEndAnimation', () => {
-    isAnimating.value = false;
-  });
-
-  return isAnimating;
-}
-export function isViewAnimatingNew(view: View) {
+export function isViewAnimating(view: View) {
   const isAnimating = ref(false);
 
   onVTKEvent(view.interactor, 'onStartAnimation', () => {
diff --git a/src/composables/useColoringEffect.ts b/src/composables/useColoringEffect.ts
index 6b2ea42d3..544e70212 100644
--- a/src/composables/useColoringEffect.ts
+++ b/src/composables/useColoringEffect.ts
@@ -1,102 +1,103 @@
-import { useProxyManager } from '@/src/composables/useProxyManager';
 import { Maybe } from '@/src/types';
 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, watchEffect } from 'vue';
+import { MaybeRef, computed, unref, 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';
+import {
+  applyNodesToPiecewiseFunction,
+  applyPointsToPiecewiseFunction,
+  getShiftedOpacityFromPreset,
+} from '@/src/utils/vtk-helpers';
+import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
+import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
+import vtkPiecewiseGaussianWidget from '@kitware/vtk.js/Interaction/Widgets/PiecewiseGaussianWidget';
 
 export interface ApplyColoringParams {
-  colorBy: ColorBy;
-  colorFunc: ColorTransferFunction;
-  opacityFunc: OpacityFunction;
-  rep: vtkAbstractRepresentationProxy;
-  proxyManager: vtkProxyManager;
+  props: {
+    colorFunction: ColorTransferFunction;
+    opacityFunction: OpacityFunction;
+  };
+  cfun: vtkColorTransferFunction;
+  ofun: vtkPiecewiseFunction;
+  componentIndex?: number;
 }
 
 export function applyColoring({
-  colorBy,
-  colorFunc,
-  opacityFunc,
-  rep,
-  proxyManager,
+  props: { colorFunction, opacityFunction },
+  cfun,
+  ofun,
+  componentIndex = -1,
 }: ApplyColoringParams) {
-  const { arrayName, location } = colorBy;
+  if (componentIndex === -1) {
+    cfun.setVectorModeToMagnitude();
+  } else {
+    cfun.setVectorModeToComponent();
+    cfun.setVectorComponent(componentIndex);
+  }
 
-  const lut = proxyManager.getLookupTable(arrayName);
-  lut.setMode(LookupTableProxyMode.Preset);
-  lut.setPresetName(colorFunc.preset);
-  lut.setDataRange(...colorFunc.mappingRange);
+  cfun.setMappingRange(...colorFunction.mappingRange);
+  const preset = vtkColorMaps.getPresetByName(colorFunction.preset);
+  if (preset) {
+    cfun.applyColorMap(preset);
+  }
 
-  const pwf = proxyManager.getPiecewiseFunction(arrayName);
-  pwf.setMode(opacityFunc.mode);
-  pwf.setDataRange(...opacityFunc.mappingRange);
+  const { mappingRange } = opacityFunction;
+  ofun.setRange(...opacityFunction.mappingRange);
 
-  switch (opacityFunc.mode) {
+  switch (opacityFunction.mode) {
     case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-      pwf.setGaussians(opacityFunc.gaussians);
+      vtkPiecewiseGaussianWidget.applyGaussianToPiecewiseFunction(
+        opacityFunction.gaussians,
+        256,
+        opacityFunction.mappingRange,
+        ofun
+      );
       break;
     case vtkPiecewiseFunctionProxy.Mode.Points: {
       const opacityPoints = getShiftedOpacityFromPreset(
-        opacityFunc.preset,
-        opacityFunc.mappingRange,
-        opacityFunc.shift,
-        opacityFunc.shiftAlpha
+        opacityFunction.preset,
+        opacityFunction.mappingRange,
+        opacityFunction.shift,
+        opacityFunction.shiftAlpha
       );
       if (opacityPoints) {
-        pwf.setPoints(opacityPoints);
+        applyPointsToPiecewiseFunction(ofun, opacityPoints, mappingRange);
       }
       break;
     }
-    case vtkPiecewiseFunctionProxy.Mode.Nodes:
-      pwf.setNodes(opacityFunc.nodes);
+    case vtkPiecewiseFunctionProxy.Mode.Nodes: {
+      applyNodesToPiecewiseFunction(ofun, opacityFunction.nodes, mappingRange);
       break;
+    }
     default:
+      throw new Error('Invalid opacity function mode encountered');
   }
-
-  // control color range manually
-  rep.setRescaleOnColorBy(false);
-  rep.setColorBy(arrayName, location);
 }
 
 export function useColoringEffect(
-  config: Ref<Maybe<ColoringConfig>>,
-  imageRep: Ref<Maybe<vtkVolumeRepresentationProxy>>,
-  viewProxy: Ref<vtkLPSView3DProxy>
+  config: MaybeRef<Maybe<ColoringConfig>>,
+  cfun: MaybeRef<vtkColorTransferFunction>,
+  ofun: MaybeRef<vtkPiecewiseFunction>
 ) {
-  const colorBy = computed(() => config.value?.colorBy);
-  const colorTransferFunction = computed(() => config.value?.transferFunction);
-  const opacityFunction = computed(() => config.value?.opacityFunction);
-
-  const proxyManager = useProxyManager();
+  const colorTransferFunction = computed(() => unref(config)?.transferFunction);
+  const opacityFunction = computed(() => unref(config)?.opacityFunction);
 
   watchEffect(() => {
-    const rep = imageRep.value;
-    const colorBy_ = colorBy.value;
     const colorFunc = colorTransferFunction.value;
     const opacityFunc = opacityFunction.value;
-    if (!rep || !colorBy_ || !colorFunc || !opacityFunc || !proxyManager) {
-      return;
-    }
+    if (!colorFunc || !opacityFunc) return;
 
     applyColoring({
-      colorBy: colorBy_,
-      colorFunc,
-      opacityFunc,
-      rep,
-      proxyManager,
+      props: {
+        colorFunction: colorFunc,
+        opacityFunction: opacityFunc,
+      },
+      cfun: unref(cfun),
+      ofun: unref(ofun),
     });
-
-    // Need to trigger a render for when we are restoring from a state file
-    viewProxy.value.renderLater();
   });
 }
diff --git a/src/composables/useColoringEffectNew.ts b/src/composables/useColoringEffectNew.ts
deleted file mode 100644
index 544e70212..000000000
--- a/src/composables/useColoringEffectNew.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Maybe } from '@/src/types';
-import {
-  ColorTransferFunction,
-  ColoringConfig,
-  OpacityFunction,
-} from '@/src/types/views';
-import { MaybeRef, computed, unref, watchEffect } from 'vue';
-import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
-import {
-  applyNodesToPiecewiseFunction,
-  applyPointsToPiecewiseFunction,
-  getShiftedOpacityFromPreset,
-} from '@/src/utils/vtk-helpers';
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
-import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
-import vtkPiecewiseGaussianWidget from '@kitware/vtk.js/Interaction/Widgets/PiecewiseGaussianWidget';
-
-export interface ApplyColoringParams {
-  props: {
-    colorFunction: ColorTransferFunction;
-    opacityFunction: OpacityFunction;
-  };
-  cfun: vtkColorTransferFunction;
-  ofun: vtkPiecewiseFunction;
-  componentIndex?: number;
-}
-
-export function applyColoring({
-  props: { colorFunction, opacityFunction },
-  cfun,
-  ofun,
-  componentIndex = -1,
-}: ApplyColoringParams) {
-  if (componentIndex === -1) {
-    cfun.setVectorModeToMagnitude();
-  } else {
-    cfun.setVectorModeToComponent();
-    cfun.setVectorComponent(componentIndex);
-  }
-
-  cfun.setMappingRange(...colorFunction.mappingRange);
-  const preset = vtkColorMaps.getPresetByName(colorFunction.preset);
-  if (preset) {
-    cfun.applyColorMap(preset);
-  }
-
-  const { mappingRange } = opacityFunction;
-  ofun.setRange(...opacityFunction.mappingRange);
-
-  switch (opacityFunction.mode) {
-    case vtkPiecewiseFunctionProxy.Mode.Gaussians:
-      vtkPiecewiseGaussianWidget.applyGaussianToPiecewiseFunction(
-        opacityFunction.gaussians,
-        256,
-        opacityFunction.mappingRange,
-        ofun
-      );
-      break;
-    case vtkPiecewiseFunctionProxy.Mode.Points: {
-      const opacityPoints = getShiftedOpacityFromPreset(
-        opacityFunction.preset,
-        opacityFunction.mappingRange,
-        opacityFunction.shift,
-        opacityFunction.shiftAlpha
-      );
-      if (opacityPoints) {
-        applyPointsToPiecewiseFunction(ofun, opacityPoints, mappingRange);
-      }
-      break;
-    }
-    case vtkPiecewiseFunctionProxy.Mode.Nodes: {
-      applyNodesToPiecewiseFunction(ofun, opacityFunction.nodes, mappingRange);
-      break;
-    }
-    default:
-      throw new Error('Invalid opacity function mode encountered');
-  }
-}
-
-export function useColoringEffect(
-  config: MaybeRef<Maybe<ColoringConfig>>,
-  cfun: MaybeRef<vtkColorTransferFunction>,
-  ofun: MaybeRef<vtkPiecewiseFunction>
-) {
-  const colorTransferFunction = computed(() => unref(config)?.transferFunction);
-  const opacityFunction = computed(() => unref(config)?.opacityFunction);
-
-  watchEffect(() => {
-    const colorFunc = colorTransferFunction.value;
-    const opacityFunc = opacityFunction.value;
-    if (!colorFunc || !opacityFunc) return;
-
-    applyColoring({
-      props: {
-        colorFunction: colorFunc,
-        opacityFunction: opacityFunc,
-      },
-      cfun: unref(cfun),
-      ofun: unref(ofun),
-    });
-  });
-}
diff --git a/src/composables/usePersistCameraConfig.ts b/src/composables/usePersistCameraConfig.ts
index 5bddbe127..424eeb219 100644
--- a/src/composables/usePersistCameraConfig.ts
+++ b/src/composables/usePersistCameraConfig.ts
@@ -1,139 +1,62 @@
-import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
-import { Ref } from 'vue';
+import { MaybeRef, Ref, computed, unref } from 'vue';
 import { Maybe } from '@/src/types';
-import { CameraConfig } from '../store/view-configs/types';
-import { vtkLPSViewProxy } from '../types/vtk-types';
-import useViewCameraStore from '../store/view-configs/camera';
+import { CameraConfig } from '@/src/store/view-configs/types';
+import useViewCameraStore from '@/src/store/view-configs/camera';
+import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
+import { syncRef } from '@vueuse/core';
+import { guardedWritableRef } from '@/src/utils/guardedWritableRef';
 
 export function usePersistCameraConfig(
-  viewID: Ref<string>,
-  dataID: Ref<Maybe<string>>,
-  viewProxy: Ref<vtkLPSViewProxy>,
-  ...toPersist: (keyof CameraConfig)[]
+  viewID: MaybeRef<string>,
+  dataID: MaybeRef<Maybe<string>>,
+  camera: MaybeRef<vtkCamera>
 ) {
   const viewCameraStore = useViewCameraStore();
-  let persistCameraConfig = true;
 
-  // We setup this list of functions to avoid if and indexOf in the onModified
-  // call.
-  const persist: (() => void)[] = [];
+  type KeyType = keyof CameraConfig;
+  const keys: KeyType[] = [
+    'position',
+    'focalPoint',
+    'viewUp',
+    'parallelScale',
+    'directionOfProjection',
+  ];
 
-  if (toPersist.indexOf('position') > -1) {
-    persist.push(() => {
-      if (dataID.value != null && persistCameraConfig) {
-        viewCameraStore.updateConfig(viewID.value, dataID.value, {
-          position: viewProxy.value.getCamera().getPosition(),
-        });
-      }
-    });
-  }
-  if (toPersist.indexOf('viewUp') > -1) {
-    persist.push(() => {
-      if (dataID.value != null && persistCameraConfig) {
-        viewCameraStore.updateConfig(viewID.value, dataID.value, {
-          viewUp: viewProxy.value.getCamera().getViewUp(),
-        });
-      }
-    });
-  }
-  if (toPersist.indexOf('focalPoint') > -1) {
-    persist.push(() => {
-      if (dataID.value != null && persistCameraConfig) {
-        viewCameraStore.updateConfig(viewID.value, dataID.value, {
-          focalPoint: viewProxy.value.getCamera().getFocalPoint(),
-        });
-      }
-    });
-  }
-  if (toPersist.indexOf('directionOfProjection') > -1) {
-    persist.push(() => {
-      if (dataID.value != null && persistCameraConfig) {
-        viewCameraStore.updateConfig(viewID.value, dataID.value, {
-          directionOfProjection: viewProxy.value
-            .getCamera()
-            .getDirectionOfProjection(),
-        });
-      }
-    });
-  }
-  if (toPersist.indexOf('parallelScale') > -1) {
-    persist.push(() => {
-      if (dataID.value != null && persistCameraConfig) {
-        viewCameraStore.updateConfig(viewID.value, dataID.value, {
-          parallelScale: viewProxy.value.getCamera().getParallelScale(),
-        });
-      }
-    });
-  }
-
-  manageVTKSubscription(
-    viewProxy.value.getCamera().onModified(() => {
-      persist.forEach((persistFunc) => persistFunc());
-    })
+  const cameraRefs = keys.reduce(
+    (refs, key) => ({
+      ...refs,
+      [key]: guardedWritableRef(
+        vtkFieldRef(camera, key),
+        (incoming) => !!incoming
+      ),
+    }),
+    {} as Record<KeyType, Ref<any>>
   );
 
-  function blockPersistingCameraConfig(func: () => void) {
-    persistCameraConfig = false;
-    try {
-      func();
-    } finally {
-      persistCameraConfig = true;
-    }
-  }
+  const config = computed(() =>
+    viewCameraStore.getConfig(unref(viewID), unref(dataID))
+  );
 
-  function restoreCameraConfig(cameraConfig: CameraConfig) {
-    blockPersistingCameraConfig(() => {
-      toPersist.forEach((key: keyof CameraConfig) => {
-        // Parallel scale
-        if (key === 'parallelScale' && cameraConfig.parallelScale) {
-          viewProxy.value
-            .getCamera()
-            .setParallelScale(cameraConfig.parallelScale);
-        }
-        // Position
-        else if (key === 'position' && cameraConfig.position) {
-          const { position } = cameraConfig;
-          viewProxy.value
-            .getCamera()
-            .setPosition(position[0], position[1], position[2]);
-        }
-        // Focal point
-        else if (key === 'focalPoint' && cameraConfig.focalPoint) {
-          const { focalPoint } = cameraConfig;
-          viewProxy.value
-            .getCamera()
-            .setFocalPoint(focalPoint[0], focalPoint[1], focalPoint[2]);
-          viewProxy.value
-            .getInteractorStyle2D()
-            .setCenterOfRotation([...focalPoint]);
-          viewProxy.value
-            .getInteractorStyle3D()
-            .setCenterOfRotation([...focalPoint]);
-        }
-        // Direction of projection
-        else if (
-          key === 'directionOfProjection' &&
-          cameraConfig.directionOfProjection
-        ) {
-          const { directionOfProjection } = cameraConfig;
-          viewProxy.value
-            .getCamera()
-            .setDirectionOfProjection(
-              directionOfProjection[0],
-              directionOfProjection[1],
-              directionOfProjection[2]
-            );
-        }
-        // View up
-        else if (key === 'viewUp' && cameraConfig.viewUp) {
-          const { viewUp } = cameraConfig;
-          viewProxy.value
-            .getCamera()
-            .setViewUp(viewUp[0], viewUp[1], viewUp[2]);
-        }
-      });
-    });
-  }
+  const configRefs = keys.reduce(
+    (refs, key) => ({
+      ...refs,
+      [key]: computed({
+        get: () => config.value?.[key],
+        set: (v) => {
+          const viewIDVal = unref(viewID);
+          const dataIDVal = unref(dataID);
+          if (!viewIDVal || !dataIDVal) return;
+          viewCameraStore.updateConfig(viewIDVal, dataIDVal, {
+            [key]: v,
+          });
+        },
+      }),
+    }),
+    {} as Record<KeyType, Ref<any>>
+  );
 
-  return { restoreCameraConfig };
+  keys.forEach((key) => {
+    syncRef(configRefs[key], cameraRefs[key]);
+  });
 }
diff --git a/src/composables/usePersistCameraConfigNew.ts b/src/composables/usePersistCameraConfigNew.ts
deleted file mode 100644
index 424eeb219..000000000
--- a/src/composables/usePersistCameraConfigNew.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { MaybeRef, Ref, computed, unref } from 'vue';
-import { Maybe } from '@/src/types';
-import { CameraConfig } from '@/src/store/view-configs/types';
-import useViewCameraStore from '@/src/store/view-configs/camera';
-import vtkCamera from '@kitware/vtk.js/Rendering/Core/Camera';
-import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
-import { syncRef } from '@vueuse/core';
-import { guardedWritableRef } from '@/src/utils/guardedWritableRef';
-
-export function usePersistCameraConfig(
-  viewID: MaybeRef<string>,
-  dataID: MaybeRef<Maybe<string>>,
-  camera: MaybeRef<vtkCamera>
-) {
-  const viewCameraStore = useViewCameraStore();
-
-  type KeyType = keyof CameraConfig;
-  const keys: KeyType[] = [
-    'position',
-    'focalPoint',
-    'viewUp',
-    'parallelScale',
-    'directionOfProjection',
-  ];
-
-  const cameraRefs = keys.reduce(
-    (refs, key) => ({
-      ...refs,
-      [key]: guardedWritableRef(
-        vtkFieldRef(camera, key),
-        (incoming) => !!incoming
-      ),
-    }),
-    {} as Record<KeyType, Ref<any>>
-  );
-
-  const config = computed(() =>
-    viewCameraStore.getConfig(unref(viewID), unref(dataID))
-  );
-
-  const configRefs = keys.reduce(
-    (refs, key) => ({
-      ...refs,
-      [key]: computed({
-        get: () => config.value?.[key],
-        set: (v) => {
-          const viewIDVal = unref(viewID);
-          const dataIDVal = unref(dataID);
-          if (!viewIDVal || !dataIDVal) return;
-          viewCameraStore.updateConfig(viewIDVal, dataIDVal, {
-            [key]: v,
-          });
-        },
-      }),
-    }),
-    {} as Record<KeyType, Ref<any>>
-  );
-
-  keys.forEach((key) => {
-    syncRef(configRefs[key], cameraRefs[key]);
-  });
-}
diff --git a/src/config.ts b/src/config.ts
index e98485bee..fb564eeee 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -11,6 +11,8 @@ import { Action } from './constants';
 
 /**
  * These are the initial view IDs.
+ *
+ * These view IDs get mapped to components in core/viewTypes.ts.
  */
 export const InitViewIDs: Record<string, string> = {
   Coronal: 'Coronal',
@@ -81,6 +83,20 @@ export const InitViewSpecs: Record<string, ViewSpec> = {
     props: {
       viewDirection: 'Posterior',
       viewUp: 'Superior',
+      slices: [
+        {
+          viewID: InitViewIDs.ObliqueSagittal,
+          axis: 'Sagittal',
+        },
+        {
+          viewID: InitViewIDs.ObliqueCoronal,
+          axis: 'Coronal',
+        },
+        {
+          viewID: InitViewIDs.ObliqueAxial,
+          axis: 'Axial',
+        },
+      ],
     },
   },
 };
diff --git a/src/constants.ts b/src/constants.ts
index 65352e453..8212207b9 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,9 +1,4 @@
-import { Maybe } from '@/src/types';
 import type { RGBColor } from '@kitware/vtk.js/types';
-import vtkResliceCursorWidget, {
-  vtkResliceCursorViewWidget,
-} from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import { ComputedRef, InjectionKey, Ref } from 'vue';
 
 export const EPSILON = 10e-6;
 export const NOOP = () => {};
@@ -14,22 +9,6 @@ export const DarkTheme = 'kw-dark';
 export const LightTheme = 'kw-light';
 export const DefaultTheme = DarkTheme;
 
-/**
- * Retrieves the global ResliceCursorWidget instance.
- */
-export const VTKResliceCursor: InjectionKey<vtkResliceCursorWidget> =
-  Symbol('VTKResliceCursor');
-
-export const VTKResliceCursorViewWidget: InjectionKey<
-  ComputedRef<vtkResliceCursorViewWidget>
-> = Symbol('VTKResliceCursorViewWidget');
-
-/**
- * Retrieves the parent tool HTML element.
- */
-export const ToolContainer: InjectionKey<Ref<Maybe<HTMLElement>>> =
-  Symbol('ToolContainer');
-
 export const Messages = {
   WebGLLost: {
     title: 'Viewer Error',
diff --git a/src/core/provider.ts b/src/core/provider.ts
index c74e18393..8b64a53d8 100644
--- a/src/core/provider.ts
+++ b/src/core/provider.ts
@@ -1,5 +1,4 @@
 import { DICOMIO } from '../io/dicom';
-import ProxyWrapper from './proxies';
 import PaintTool from './tools/paint';
 
 /**
@@ -7,16 +6,13 @@ import PaintTool from './tools/paint';
  */
 export function CorePiniaProviderPlugin({
   paint,
-  proxies,
   dicomIO,
 }: {
   paint?: PaintTool;
-  proxies?: ProxyWrapper;
   dicomIO?: DICOMIO;
 } = {}) {
   const dependencies = {
     $paint: paint ?? new PaintTool(),
-    $proxies: proxies,
     $dicomIO: dicomIO ?? new DICOMIO(),
   };
   return () => dependencies;
diff --git a/src/core/viewTypes.ts b/src/core/viewTypes.ts
index 2646b080c..f66d2f6cb 100644
--- a/src/core/viewTypes.ts
+++ b/src/core/viewTypes.ts
@@ -1,12 +1,12 @@
-import VtkObliqueThreeView from '@/src/components/VtkObliqueThreeView.vue';
-import VtkObliqueView from '@/src/components/VtkObliqueView.vue';
-import VtkThreeView from '@/src/components/VtkThreeView.vue';
-import VtkTwoView from '@/src/components/VtkTwoView.vue';
 import { Component } from 'vue';
+import MultiObliqueSliceViewer from '@/src/components/MultiObliqueSliceViewer.vue';
+import ObliqueSliceViewer from '@/src/components/ObliqueSliceViewer.vue';
+import SliceViewer from '@/src/components/SliceViewer.vue';
+import VolumeViewer from '@/src/components/VolumeViewer.vue';
 
 export const ViewTypeToComponent: Record<string, Component> = {
-  '2D': VtkTwoView,
-  '3D': VtkThreeView,
-  Oblique: VtkObliqueView,
-  Oblique3D: VtkObliqueThreeView,
+  '2D': SliceViewer,
+  '3D': VolumeViewer,
+  Oblique: ObliqueSliceViewer,
+  Oblique3D: MultiObliqueSliceViewer,
 };
diff --git a/src/global.d.ts b/src/global.d.ts
index 55a9bad5b..5739ed7e9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,6 +1,5 @@
 import 'pinia';
 import type { Framework } from 'vuetify/types';
-import ProxyWrapper from './core/proxies';
 import PaintTool from './core/tools/paint';
 import { DICOMIO } from './io/dicom';
 
@@ -8,7 +7,6 @@ declare module 'pinia' {
   export interface PiniaCustomProperties {
     // from CorePiniaProviderPlugin
     $paint: PaintTool;
-    $proxies: ProxyWrapper;
     $dicomIO: DICOMIO;
   }
 }
diff --git a/src/main.js b/src/main.js
index 74ba7ec18..73d9c7175 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,6 @@ import '@kitware/vtk.js/Rendering/OpenGL/Profiles/Glyph';
 import { createApp } from 'vue';
 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 { setPipelinesBaseUrl, setPipelineWorkerUrl } from '@itk-wasm/image-io';
 
@@ -19,13 +18,10 @@ import vuetify from './plugins/vuetify';
 import { DICOMIO } from './io/dicom';
 import { FILE_READERS } from './io';
 import { registerAllReaders } from './io/readers';
-import proxyConfiguration from './vtk/proxy';
 import { CorePiniaProviderPlugin } from './core/provider';
-import ProxyManagerWrapper from './core/proxies';
 import { patchExitPointerLock } from './utils/hacks';
 import { init as initErrorReporting } from './utils/errorReporting';
 import { StoreRegistry } from './plugins/storeRegistry';
-import { PROXY_MANAGER_WRAPPER_INJECT_KEY } from './composables/useProxyManager';
 
 // patches
 patchExitPointerLock();
@@ -38,10 +34,6 @@ vtkMapper.setResolveCoincidentTopologyLineOffsetParameters(-3, -3);
 
 registerAllReaders(FILE_READERS);
 
-const proxyManagerWrapper = new ProxyManagerWrapper(
-  vtkProxyManager.newInstance({ proxyConfiguration })
-);
-
 const dicomIO = new DICOMIO();
 dicomIO.initialize();
 
@@ -52,7 +44,6 @@ setPipelinesBaseUrl(itkConfig.imageIOUrl);
 const pinia = createPinia();
 pinia.use(
   CorePiniaProviderPlugin({
-    proxies: proxyManagerWrapper,
     dicomIO,
   })
 );
@@ -62,7 +53,6 @@ const app = createApp(App);
 
 initErrorReporting(app);
 
-app.provide(PROXY_MANAGER_WRAPPER_INJECT_KEY, proxyManagerWrapper);
 app.use(pinia);
 app.use(VueToast);
 app.use(vuetify);
diff --git a/src/store/datasets-images.ts b/src/store/datasets-images.ts
index d40d336d7..5d18ea739 100644
--- a/src/store/datasets-images.ts
+++ b/src/store/datasets-images.ts
@@ -42,8 +42,6 @@ export const useImageStore = defineStore('images', {
       this.idList.push(id);
       this.dataIndex[id] = imageData;
 
-      this.$proxies.addData(id, imageData);
-
       this.metadata[id] = { ...defaultImageMetadata(), name };
       this.updateData(id, imageData);
       return id;
@@ -65,10 +63,7 @@ export const useImageStore = defineStore('images', {
 
         this.metadata[id] = metadata;
         this.dataIndex[id] = imageData;
-
-        this.$proxies.updateData(id, imageData);
       }
-      this.$proxies.updateData(id, imageData);
       this.dataIndex[id] = imageData;
     },
 
diff --git a/src/store/datasets-layers.ts b/src/store/datasets-layers.ts
index a76256294..54442a5d2 100644
--- a/src/store/datasets-layers.ts
+++ b/src/store/datasets-layers.ts
@@ -102,9 +102,6 @@ export const useLayersStore = defineStore('layer', () => {
       image = vtkITKHelper.convertItkToVtkImage(itkImage);
     }
 
-    this.$proxies.addData(id, image);
-
-    // calling after adding data to proxy manager delays enabling deletion, thus avoiding error
     this.layerImages[id] = image;
   }
 
@@ -149,10 +146,6 @@ export const useLayersStore = defineStore('layer', () => {
     );
 
     delete this.layerImages[layerToDelete.id];
-
-    // May have errored creating data, so check before delete
-    if (this.$proxies.getData(layerToDelete.id))
-      this.$proxies.deleteData(layerToDelete.id);
   }
 
   function getLayers(key: DataSelection | null | undefined) {
diff --git a/src/store/datasets-models.ts b/src/store/datasets-models.ts
index b764b46e2..1a32a1d0e 100644
--- a/src/store/datasets-models.ts
+++ b/src/store/datasets-models.ts
@@ -18,7 +18,6 @@ export const useModelStore = defineStore('models', {
       const id = useIdStore().nextId();
       this.idList.push(id);
       this.dataIndex[id] = polyData;
-      this.$proxies.addData(id, polyData);
       return id;
     },
   },
diff --git a/src/store/datasets.ts b/src/store/datasets.ts
index 1eec010a6..355bd7e17 100644
--- a/src/store/datasets.ts
+++ b/src/store/datasets.ts
@@ -1,5 +1,4 @@
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { vtkObject } from '@kitware/vtk.js/interfaces';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { useDICOMStore } from './datasets-dicom';
@@ -89,8 +88,6 @@ export function selectionEquals(s1: DataSelection, s2: DataSelection) {
 }
 
 export const useDatasetStore = defineStore('dataset', () => {
-  type _This = ReturnType<typeof useDatasetStore>;
-
   const imageStore = useImageStore();
   const modelStore = useModelStore();
   const dicomStore = useDICOMStore();
@@ -116,10 +113,6 @@ export const useDatasetStore = defineStore('dataset', () => {
     return [...imageStore.idList, ...modelStore.idList];
   });
 
-  function getDataProxyByID<T extends vtkObject>(this: _This, id: string) {
-    return this.$proxies.getData<T>(id);
-  }
-
   // --- actions --- //
 
   function setPrimarySelection(sel: DataSelection | null) {
@@ -192,7 +185,6 @@ export const useDatasetStore = defineStore('dataset', () => {
     primarySelection,
     primaryDataset,
     allDataIDs,
-    getDataProxyByID,
     setPrimarySelection,
     serialize,
   };
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index 97ef0645a..c9f039fa7 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -143,8 +143,6 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
     orderByParent.value[metadata.parentImage] ??= [];
     orderByParent.value[metadata.parentImage].push(id);
 
-    this.$proxies.addData(id, labelmap);
-
     return id;
   }
 
@@ -402,7 +400,6 @@ export const useSegmentGroupStore = defineStore('segmentGroup', () => {
 
         const id = useIdStore().nextId();
         dataIndex[id] = labelmapImage;
-        this.$proxies.addData(id, labelmapImage);
         return id;
       })
     );
diff --git a/src/store/views.ts b/src/store/views.ts
index 03fb81fb0..d4513e73a 100644
--- a/src/store/views.ts
+++ b/src/store/views.ts
@@ -1,8 +1,5 @@
-import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { defineStore } from 'pinia';
 import { DefaultViewSpec, InitViewSpecs } from '../config';
-import { ViewProxyType } from '../core/proxies';
 import { Layout, LayoutDirection } from '../types/layout';
 import { useViewConfigStore } from './view-configs';
 import { ViewSpec } from '../types/views';
@@ -29,31 +26,8 @@ export const useViewStore = defineStore('view', {
     viewIDs(state) {
       return Object.keys(state.viewSpecs);
     },
-    getViewProxy() {
-      return <T extends vtkViewProxy>(id: string) => {
-        return this.$proxies.getView<T>(id);
-      };
-    },
-    getDataRepresentationForView() {
-      return <T extends vtkAbstractRepresentationProxy>(
-        dataID: string,
-        viewID: string
-      ) => {
-        return <T | null>(
-          this.$proxies.getDataRepresentationForView(dataID, viewID)
-        );
-      };
-    },
   },
   actions: {
-    createOrGetViewProxy<T extends vtkViewProxy = vtkViewProxy>(
-      id: string,
-      type: ViewProxyType
-    ) {
-      return (
-        this.$proxies.getView<T>(id) ?? <T>this.$proxies.createView(id, type)
-      );
-    },
     addView(id: string) {
       if (!(id in this.viewSpecs)) {
         this.viewSpecs[id] = structuredClone(DefaultViewSpec);
@@ -62,7 +36,6 @@ export const useViewStore = defineStore('view', {
     removeView(id: string) {
       if (id in this.viewSpecs) {
         delete this.viewSpecs[id];
-        this.$proxies.deleteView(id);
       }
     },
     setLayout(layout: Layout) {
diff --git a/src/types/vtk-types.ts b/src/types/vtk-types.ts
index 77625a506..7f6a27682 100644
--- a/src/types/vtk-types.ts
+++ b/src/types/vtk-types.ts
@@ -2,8 +2,6 @@ import { vtkAlgorithm, vtkObject } from '@kitware/vtk.js/interfaces';
 import vtkDataSet from '@kitware/vtk.js/Common/DataModel/DataSet';
 import { View } from '@/src/core/vtk/types';
 import vtkInteractorStyle from '@kitware/vtk.js/Rendering/Core/InteractorStyle';
-import vtkLPSView2DProxy from '../vtk/LPSView2DProxy';
-import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
 
 export interface vtkClass {
   newInstance: () => vtkObject;
@@ -19,8 +17,6 @@ export interface vtkWriter extends vtkObject {
   write: (data: vtkDataSet) => any;
 }
 
-export type vtkLPSViewProxy = vtkLPSView2DProxy | vtkLPSView3DProxy;
-
 export interface VtkViewApi extends View {
   interactorStyle?: vtkInteractorStyle;
   resetCamera(): void;

From 7fb562697d95f26f660159070c27bef2315fea92 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 15:22:26 -0400
Subject: [PATCH 095/113] fix(SliceViewer): add back slice slider

---
 src/components/SliceSlider.vue |  6 +++---
 src/components/SliceViewer.vue | 17 ++++++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/SliceSlider.vue b/src/components/SliceSlider.vue
index d87f131c6..7708633a5 100644
--- a/src/components/SliceSlider.vue
+++ b/src/components/SliceSlider.vue
@@ -120,7 +120,7 @@ export default {
           Math.min(this.maxHandlePos, ev.pageY - y - this.handleHeight / 2)
         );
         const newSlice = this.getNearestSlice(this.initialHandlePos);
-        this.$emit('modelValue', newSlice);
+        this.$emit('update:modelValue', newSlice);
       }
 
       this.yOffset = 0;
@@ -134,7 +134,7 @@ export default {
 
       this.yOffset = ev.pageY - this.initialMousePosY;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('modelValue', slice);
+      this.$emit('update:modelValue', slice);
     },
 
     onDragEnd(ev) {
@@ -144,7 +144,7 @@ export default {
 
       this.dragging = false;
       const slice = this.getNearestSlice(this.handlePosition);
-      this.$emit('modelValue', slice);
+      this.$emit('update:modelValue', slice);
     },
 
     getNearestSlice(pos) {
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 3f1cee202..ebfe66da4 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -18,6 +18,14 @@
           Reset Camera
         </v-tooltip>
       </v-btn>
+      <slice-slider
+        v-model="currentSlice"
+        class="slice-slider"
+        :min="sliceRange[0]"
+        :max="sliceRange[1]"
+        :step="1"
+        :handle-height="20"
+      />
     </div>
     <div class="vtk-container" data-testid="two-view-container">
       <div class="vtk-sub-container">
@@ -111,11 +119,12 @@ import RulerTool from '@/src/components/tools/ruler/RulerTool.vue';
 import RectangleTool from '@/src/components/tools/rectangle/RectangleTool.vue';
 import SelectTool from '@/src/components/tools/SelectTool.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
+import SliceSlider from '@/src/components/SliceSlider.vue';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore } from '@/src/store/tools';
-import { useSliceInfo } from '@/src/composables/useSliceInfo';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -142,8 +151,10 @@ useViewAnimationListener(vtkView, viewId, viewType);
 // base image
 const { currentImageID, currentLayers, currentImageMetadata } =
   useCurrentImage();
-const sliceInfo = useSliceInfo(viewId, currentImageID);
-const currentSlice = computed(() => sliceInfo.value?.slice);
+const { slice: currentSlice, range: sliceRange } = useSliceConfig(
+  viewId,
+  currentImageID
+);
 
 // segmentations
 const segmentations = computed(() => {

From b2e383dc9e5acb6f7283f870a79ccd3b88c23624 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 15:37:06 -0400
Subject: [PATCH 096/113] feat(SliceViewer): add back overlay

---
 src/components/SliceViewer.vue          |  6 ++-
 src/components/SliceViewerOverlay.vue   | 59 +++++++++++++++++++++++++
 src/composables/useOrientationLabels.ts | 12 ++---
 3 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 src/components/SliceViewerOverlay.vue

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index ebfe66da4..41c6da0a4 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -38,6 +38,10 @@
           :view-direction="viewDirection"
           :view-up="viewUp"
         >
+          <slice-viewer-overlay
+            :view-id="id"
+            :image-id="currentImageID"
+          ></slice-viewer-overlay>
           <vtk-base-slice-representation
             :view-id="id"
             :image-id="currentImageID"
@@ -90,7 +94,6 @@
           <svg class="overlay-no-events">
             <bounding-rectangle :points="selectionPoints" />
           </svg>
-
           <slot></slot>
         </vtk-slice-view>
       </div>
@@ -120,6 +123,7 @@ import RectangleTool from '@/src/components/tools/rectangle/RectangleTool.vue';
 import SelectTool from '@/src/components/tools/SelectTool.vue';
 import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import SliceSlider from '@/src/components/SliceSlider.vue';
+import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
 import { useAnnotationToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
new file mode 100644
index 000000000..a9fd211ed
--- /dev/null
+++ b/src/components/SliceViewerOverlay.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { inject, toRefs } from 'vue';
+import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { Maybe } from '@/src/types';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { useOrientationLabels } from '@/src/composables/useOrientationLabels';
+import DicomQuickInfoButton from '@/src/components/DicomQuickInfoButton.vue';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+}
+
+const props = defineProps<Props>();
+const { viewId, imageId } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const { top: topLabel, left: leftLabel } = useOrientationLabels(view);
+
+const { slice, range: sliceRange } = useSliceConfig(viewId, imageId);
+const { width: windowWidth, level: windowLevel } = useWindowingConfig(
+  viewId,
+  imageId
+);
+</script>
+
+<template>
+  <view-overlay-grid class="overlay-no-events view-annotations">
+    <template v-slot:top-center>
+      <div class="annotation-cell">
+        <span>{{ topLabel }}</span>
+      </div>
+    </template>
+    <template v-slot:middle-left>
+      <div class="annotation-cell">
+        <span>{{ leftLabel }}</span>
+      </div>
+    </template>
+    <template v-slot:bottom-left>
+      <div class="annotation-cell">
+        <div>Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}</div>
+        <div>
+          W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
+        </div>
+      </div>
+    </template>
+    <template v-slot:top-right>
+      <div class="annotation-cell">
+        <dicom-quick-info-button :image-id="imageId"></dicom-quick-info-button>
+      </div>
+    </template>
+  </view-overlay-grid>
+</template>
+
+<style scoped src="@/src/components/styles/vtk-view.css"></style>
diff --git a/src/composables/useOrientationLabels.ts b/src/composables/useOrientationLabels.ts
index 13737b490..c52cf1100 100644
--- a/src/composables/useOrientationLabels.ts
+++ b/src/composables/useOrientationLabels.ts
@@ -1,9 +1,10 @@
-import { computed, Ref, ref } from 'vue';
+import { computed, MaybeRef, ref, unref } from 'vue';
 import { vec3 } from 'gl-matrix';
 import type { Vector3 } from '@kitware/vtk.js/types';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { EPSILON } from '../constants';
+import { EPSILON } from '@/src/constants';
+import { View } from '@/src/core/vtk/types';
+import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 
 export function toOrderedLabels(vec: Vector3) {
   return (
@@ -27,8 +28,9 @@ export function toOrderedLabels(vec: Vector3) {
  * vtk.js coordinate coordinate is implied to be LPS, so orientation labels
  * are determined solely from the camera' direction and view-up.
  */
-export function useOrientationLabels(view: Ref<vtkViewProxy>) {
-  const camera = computed(() => view.value.getCamera());
+export function useOrientationLabels(view: MaybeRef<View>) {
+  const renderer = computed(() => unref(view).renderer);
+  const camera = vtkFieldRef(renderer, 'activeCamera');
 
   const top = ref('');
   const left = ref('');

From 678df6c2c3cedb2e565f342b41c220b84deac901 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 15:40:36 -0400
Subject: [PATCH 097/113] feat(Viewer): add back loading states

---
 src/components/SliceViewer.vue  | 10 +++++++++-
 src/components/VolumeViewer.vue | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 41c6da0a4..04430e54a 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -97,6 +97,14 @@
           <slot></slot>
         </vtk-slice-view>
       </div>
+      <transition name="loading">
+        <div v-if="isImageLoading" class="overlay-no-events loading">
+          <div>Loading the image</div>
+          <div>
+            <v-progress-circular indeterminate color="blue" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -153,7 +161,7 @@ useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
-const { currentImageID, currentLayers, currentImageMetadata } =
+const { currentImageID, currentLayers, currentImageMetadata, isImageLoading } =
   useCurrentImage();
 const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   viewId,
diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index f13ad4e27..d2d5e3b24 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -31,6 +31,14 @@
           <slot></slot>
         </vtk-volume-view>
       </div>
+      <transition name="loading">
+        <div v-if="isImageLoading" class="overlay-no-events loading">
+          <div>Loading the image</div>
+          <div>
+            <v-progress-circular indeterminate color="blue" />
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -67,7 +75,7 @@ useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
-const { currentImageID } = useCurrentImage();
+const { currentImageID, isImageLoading } = useCurrentImage();
 </script>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>

From 556f0e29747e3d4059e302a9e9d9f8ec7e0cca00 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 16:29:57 -0400
Subject: [PATCH 098/113] refactor: separate out manipulators

Fix showing incorrect slicing information in the oblique views.
---
 src/components/ObliqueSliceViewer.vue         | 10 +++
 src/components/SliceViewer.vue                | 15 ++++
 src/components/SliceViewerOverlay.vue         | 21 ++++--
 src/components/vtk/VtkSliceView.vue           | 68 +------------------
 .../vtk/VtkSliceViewSlicingManipulator.vue    | 52 ++++++++++++++
 .../vtk/VtkSliceViewWindowManipulator.vue     | 65 ++++++++++++++++++
 src/composables/useSliceConfigInitializer.ts  | 31 ++++-----
 .../vtk/useMouseRangeManipulatorListener.ts   |  4 +-
 src/core/vtk/useVtkInteractionManipulator.ts  |  2 +-
 9 files changed, 177 insertions(+), 91 deletions(-)
 create mode 100644 src/components/vtk/VtkSliceViewSlicingManipulator.vue
 create mode 100644 src/components/vtk/VtkSliceViewWindowManipulator.vue

diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index b6aa53048..275ec508b 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -13,6 +13,14 @@
           :view-up="viewUp"
           :slice-range="sliceDomain"
         >
+          <vtk-slice-view-window-manipulator
+            :view-id="id"
+            :image-id="currentImageID"
+          ></vtk-slice-view-window-manipulator>
+          <slice-viewer-overlay
+            :view-id="id"
+            :image-id="currentImageID"
+          ></slice-viewer-overlay>
           <vtk-base-oblique-slice-representation
             :view-id="id"
             :image-id="currentImageID"
@@ -64,6 +72,8 @@ import { RGBColor } from '@kitware/vtk.js/types';
 import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { computed, ref, toRefs, watchEffect } from 'vue';
+import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
+import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 04430e54a..357ce3b0a 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -38,6 +38,15 @@
           :view-direction="viewDirection"
           :view-up="viewUp"
         >
+          <vtk-slice-view-slicing-manipulator
+            :view-id="id"
+            :image-id="currentImageID"
+            :view-direction="viewDirection"
+          ></vtk-slice-view-slicing-manipulator>
+          <vtk-slice-view-window-manipulator
+            :view-id="id"
+            :image-id="currentImageID"
+          ></vtk-slice-view-window-manipulator>
           <slice-viewer-overlay
             :view-id="id"
             :image-id="currentImageID"
@@ -137,6 +146,9 @@ import { useAnnotationToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
+import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
+import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -168,6 +180,9 @@ const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   currentImageID
 );
 
+// initialize configs
+useSliceConfigInitializer(viewId, currentImageID, viewDirection);
+
 // segmentations
 const segmentations = computed(() => {
   if (!currentImageID.value) return [];
diff --git a/src/components/SliceViewerOverlay.vue b/src/components/SliceViewerOverlay.vue
index a9fd211ed..822d54e95 100644
--- a/src/components/SliceViewerOverlay.vue
+++ b/src/components/SliceViewerOverlay.vue
@@ -21,11 +21,16 @@ if (!view) throw new Error('No VtkView');
 
 const { top: topLabel, left: leftLabel } = useOrientationLabels(view);
 
-const { slice, range: sliceRange } = useSliceConfig(viewId, imageId);
-const { width: windowWidth, level: windowLevel } = useWindowingConfig(
-  viewId,
-  imageId
-);
+const {
+  config: sliceConfig,
+  slice,
+  range: sliceRange,
+} = useSliceConfig(viewId, imageId);
+const {
+  config: wlConfig,
+  width: windowWidth,
+  level: windowLevel,
+} = useWindowingConfig(viewId, imageId);
 </script>
 
 <template>
@@ -42,8 +47,10 @@ const { width: windowWidth, level: windowLevel } = useWindowingConfig(
     </template>
     <template v-slot:bottom-left>
       <div class="annotation-cell">
-        <div>Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}</div>
-        <div>
+        <div v-if="sliceConfig">
+          Slice: {{ slice + 1 }}/{{ sliceRange[1] + 1 }}
+        </div>
+        <div v-if="wlConfig">
           W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
         </div>
       </div>
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index e7746a61e..4d60d8570 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -1,28 +1,13 @@
 <script setup lang="ts">
-import {
-  ref,
-  toRefs,
-  computed,
-  provide,
-  markRaw,
-  effectScope,
-  onUnmounted,
-} from 'vue';
+import { ref, toRefs, provide, markRaw, effectScope, onUnmounted } from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
-import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import { useVtkView } from '@/src/core/vtk/useVtkView';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useVtkInteractorStyle } from '@/src/core/vtk/useVtkInteractorStyle';
 import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
-import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
-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 { LPSAxisDir } from '@/src/types/lps';
-import type { Vector2 } from '@kitware/vtk.js/types';
-import { syncRef, useResizeObserver, watchImmediate } from '@vueuse/core';
+import { useResizeObserver, watchImmediate } from '@vueuse/core';
 import { resetCameraToImage, resizeToFitImage } from '@/src/utils/camera';
 import { usePersistCameraConfig } from '@/src/composables/usePersistCameraConfig';
 import { useAutoFitState } from '@/src/composables/useAutoFitState';
@@ -30,7 +15,6 @@ import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
 import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
-import type { vtkRange } from '@kitware/vtk.js/interfaces';
 
 interface Props {
   viewId: string;
@@ -38,7 +22,6 @@ interface Props {
   viewDirection: LPSAxisDir;
   viewUp: LPSAxisDir;
   disableAutoResetCamera?: boolean;
-  sliceRange?: vtkRange;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -50,7 +33,6 @@ const {
   viewDirection,
   viewUp,
   disableAutoResetCamera,
-  sliceRange,
 } = toRefs(props);
 
 const vtkContainerRef = ref<HTMLElement>();
@@ -84,52 +66,8 @@ useVtkInteractionManipulator(
   vtkMouseCameraTrackballZoomToMouseManipulator,
   { button: 3 }
 );
-const { instance: rangeManipulator } = useVtkInteractionManipulator(
-  interactorStyle,
-  vtkMouseRangeManipulator,
-  { button: 1, dragEnabled: true, scrollEnabled: true }
-);
-
-// initialize and bind slice and window configs
-const sliceConfig = useSliceConfig(viewID, imageID);
-const wlConfig = useWindowingConfig(viewID, imageID);
-
-const computeStep = (range: Vector2) => {
-  return Math.min(range[1] - range[0], 1) / 256;
-};
-const wlStep = computed(() => computeStep(wlConfig.range.value));
-
-useSliceConfigInitializer(viewID, imageID, viewDirection, sliceRange?.value);
-useWindowingConfigInitializer(viewID, imageID);
-
-const horiz = useMouseRangeManipulatorListener(
-  rangeManipulator,
-  'horizontal',
-  wlConfig.range,
-  wlStep,
-  wlConfig.level.value
-);
-
-const vert = useMouseRangeManipulatorListener(
-  rangeManipulator,
-  'vertical',
-  computed(() => [1e-12, wlConfig.range.value[1] - wlConfig.range.value[0]]),
-  wlStep,
-  wlConfig.width.value
-);
-
-const scroll = useMouseRangeManipulatorListener(
-  rangeManipulator,
-  'scroll',
-  sliceConfig.range,
-  1,
-  sliceConfig.slice.value
-);
-
-syncRef(horiz, wlConfig.level, { immediate: true });
-syncRef(vert, wlConfig.width, { immediate: true });
-syncRef(scroll, sliceConfig.slice, { immediate: true });
 
+// bind slice and window configs
 // resizeToFit camera controls
 const { autoFit, withoutAutoFitEffect } = useAutoFitState(
   view.renderer.getActiveCamera()
diff --git a/src/components/vtk/VtkSliceViewSlicingManipulator.vue b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
new file mode 100644
index 000000000..38afe3307
--- /dev/null
+++ b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useSliceConfig } from '@/src/composables/useSliceConfig';
+import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { Maybe } from '@/src/types';
+import { LPSAxisDir } from '@/src/types/lps';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { syncRef } from '@vueuse/core';
+import { inject, toRefs } from 'vue';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+  viewDirection: LPSAxisDir;
+}
+
+const props = defineProps<Props>();
+const { viewId, imageId, viewDirection } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseRangeManipulator,
+  { button: 1, dragEnabled: false, scrollEnabled: true }
+);
+
+const sliceConfig = useSliceConfig(viewId, imageId);
+useSliceConfigInitializer(viewId, imageId, viewDirection);
+
+const scroll = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'scroll',
+  sliceConfig.range,
+  1,
+  sliceConfig.slice.value
+);
+
+syncRef(scroll, sliceConfig.slice, { immediate: true });
+</script>
+
+<template><slot></slot></template>
diff --git a/src/components/vtk/VtkSliceViewWindowManipulator.vue b/src/components/vtk/VtkSliceViewWindowManipulator.vue
new file mode 100644
index 000000000..2e8534ff4
--- /dev/null
+++ b/src/components/vtk/VtkSliceViewWindowManipulator.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useWindowingConfig } from '@/src/composables/useWindowingConfig';
+import { useWindowingConfigInitializer } from '@/src/composables/useWindowingConfigInitializer';
+import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { Maybe } from '@/src/types';
+import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import { Vector2 } from '@kitware/vtk.js/types';
+import { syncRef } from '@vueuse/core';
+import { inject, toRefs, computed } from 'vue';
+
+interface Props {
+  viewId: string;
+  imageId: Maybe<string>;
+}
+
+const props = defineProps<Props>();
+const { viewId, imageId } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const { instance: rangeManipulator } = useVtkInteractionManipulator(
+  interactorStyle,
+  vtkMouseRangeManipulator,
+  { button: 1, dragEnabled: true, scrollEnabled: false }
+);
+
+const wlConfig = useWindowingConfig(viewId, imageId);
+useWindowingConfigInitializer(viewId, imageId);
+
+const computeStep = (range: Vector2) => {
+  return Math.min(range[1] - range[0], 1) / 256;
+};
+const wlStep = computed(() => computeStep(wlConfig.range.value));
+
+const horiz = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'horizontal',
+  wlConfig.range,
+  wlStep,
+  wlConfig.level.value
+);
+
+const vert = useMouseRangeManipulatorListener(
+  rangeManipulator,
+  'vertical',
+  computed(() => [1e-12, wlConfig.range.value[1] - wlConfig.range.value[0]]),
+  wlStep,
+  wlConfig.width.value
+);
+
+syncRef(horiz, wlConfig.level, { immediate: true });
+syncRef(vert, wlConfig.width, { immediate: true });
+</script>
+
+<template><slot></slot></template>
diff --git a/src/composables/useSliceConfigInitializer.ts b/src/composables/useSliceConfigInitializer.ts
index b4db5d5c2..590070b56 100644
--- a/src/composables/useSliceConfigInitializer.ts
+++ b/src/composables/useSliceConfigInitializer.ts
@@ -32,20 +32,19 @@ export function useSliceConfigInitializer(
     };
   });
 
-  watchImmediate(toRef(sliceDomain), (domain) => {
-    const imageIdVal = unref(imageID);
-    if (!imageIdVal) return;
-    store.updateConfig(unref(viewID), imageIdVal, domain);
-  });
-
-  watchImmediate(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);
-  });
+  watchImmediate(
+    [toRef(sliceDomain), toRef(viewDirection)] as const,
+    ([domain, axisDirection]) => {
+      const configExisted = !!sliceConfig.value;
+      const imageIdVal = unref(imageID);
+      if (!imageIdVal) return;
+      store.updateConfig(unref(viewID), imageIdVal, {
+        ...domain,
+        axisDirection,
+      });
+      if (!configExisted) {
+        store.resetSlice(unref(viewID), imageIdVal);
+      }
+    }
+  );
 }
diff --git a/src/core/vtk/useMouseRangeManipulatorListener.ts b/src/core/vtk/useMouseRangeManipulatorListener.ts
index 99a7444c8..439fd1672 100644
--- a/src/core/vtk/useMouseRangeManipulatorListener.ts
+++ b/src/core/vtk/useMouseRangeManipulatorListener.ts
@@ -10,7 +10,7 @@ type ListenerType = 'vertical' | 'horizontal' | 'scroll';
 const DEFAULT_STEP = 1;
 
 export function useMouseRangeManipulatorListener(
-  manipulator: MaybeRef<vtkMouseRangeManipulator>,
+  manipulator: MaybeRef<Maybe<vtkMouseRangeManipulator>>,
   type: ListenerType,
   range: MaybeRef<Maybe<[number, number]>>,
   step: MaybeRef<Maybe<number>>,
@@ -21,7 +21,7 @@ export function useMouseRangeManipulatorListener(
   watchCompare(
     [toRef(range), toRef(step), toRef(manipulator)],
     ([newRange, , manip], _, onCleanup) => {
-      if (!newRange) return;
+      if (!newRange || !manip) return;
 
       const setterName = `set${
         capitalize(type) as Capitalize<ListenerType>
diff --git a/src/core/vtk/useVtkInteractionManipulator.ts b/src/core/vtk/useVtkInteractionManipulator.ts
index d8d26f295..a49e719cc 100644
--- a/src/core/vtk/useVtkInteractionManipulator.ts
+++ b/src/core/vtk/useVtkInteractionManipulator.ts
@@ -46,7 +46,7 @@ export function useVtkInteractionManipulator<
     const manip = manipulator.value;
     addManipulator(style, manip);
     onCleanup(() => {
-      removeManipulator(style, manip);
+      if (!style.isDeleted()) removeManipulator(style, manip);
     });
   });
 

From 01509e19deea94b53ce8fb59170b96015b65116d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 16:58:09 -0400
Subject: [PATCH 099/113] feat(VolumeViewer): add back annotation cube

---
 src/components/VolumeViewer.vue             |  2 +
 src/components/vtk/VtkOrientationMarker.vue | 18 +++++++
 src/core/vtk/useOrientationMarker.ts        | 52 +++++++++++++++++++++
 src/shims-vtk.d.ts                          |  4 ++
 4 files changed, 76 insertions(+)
 create mode 100644 src/components/vtk/VtkOrientationMarker.vue
 create mode 100644 src/core/vtk/useOrientationMarker.ts

diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index d2d5e3b24..52af6d1ce 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -27,6 +27,7 @@
             :view-id="id"
             :image-id="currentImageID"
           ></vtk-base-volume-representation>
+          <vtk-orientation-marker></vtk-orientation-marker>
           <crop-tool :view-id="viewId" :image-id="currentImageID"></crop-tool>
           <slot></slot>
         </vtk-volume-view>
@@ -54,6 +55,7 @@ import VtkBaseVolumeRepresentation from '@/src/components/vtk/VtkBaseVolumeRepre
 import { useViewAnimationListener } from '@/src/composables/useViewAnimationListener';
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
+import VtkOrientationMarker from '@/src/components/vtk/VtkOrientationMarker.vue';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
diff --git a/src/components/vtk/VtkOrientationMarker.vue b/src/components/vtk/VtkOrientationMarker.vue
new file mode 100644
index 000000000..7bdf9fa13
--- /dev/null
+++ b/src/components/vtk/VtkOrientationMarker.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import { useOrientationMarker } from '@/src/core/vtk/useOrientationMarker';
+import vtkAnnotatedCubeActor from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor';
+import AnnotatedCubePresets from '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor/Presets';
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const actor = vtkAnnotatedCubeActor.newInstance();
+AnnotatedCubePresets.applyPreset('default', actor); // applies color
+AnnotatedCubePresets.applyPreset('lps', actor);
+
+useOrientationMarker(actor, view.interactor);
+</script>
+
+<template><slot></slot></template>
diff --git a/src/core/vtk/useOrientationMarker.ts b/src/core/vtk/useOrientationMarker.ts
new file mode 100644
index 000000000..aa76b8217
--- /dev/null
+++ b/src/core/vtk/useOrientationMarker.ts
@@ -0,0 +1,52 @@
+import { Maybe } from '@/src/types';
+import vtkOrientationMarkerWidget from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget';
+import { Corners } from '@kitware/vtk.js/Interaction/Widgets/OrientationMarkerWidget/Constants';
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
+import { MaybeRef, computed, onScopeDispose, unref, watchEffect } from 'vue';
+
+export const DEFAULT_CORNER = Corners.BOTTOM_LEFT;
+export const DEFAULT_VIEWPORT_SIZE = 0.1;
+
+export interface UseOrientationMarkerOptions {
+  corner?: Corners;
+  size?: number;
+}
+
+export function useOrientationMarker(
+  actor: MaybeRef<Maybe<vtkActor>>,
+  interactor: vtkRenderWindowInteractor,
+  options?: MaybeRef<Maybe<UseOrientationMarkerOptions>>
+) {
+  const widget = vtkOrientationMarkerWidget.newInstance({
+    interactor,
+  });
+
+  watchEffect(() => {
+    const actorVal = unref(actor);
+    if (actorVal) {
+      widget.setActor(actorVal);
+      widget.setEnabled(true);
+    } else {
+      widget.setEnabled(false);
+    }
+  });
+
+  onScopeDispose(() => {
+    widget.setEnabled(false);
+  });
+
+  const corner = computed(() => unref(options)?.corner ?? DEFAULT_CORNER);
+  watchEffect(() => {
+    widget.setViewportCorner(corner.value);
+  });
+
+  const viewportSize = computed(
+    () => unref(options)?.size ?? DEFAULT_VIEWPORT_SIZE
+  );
+  watchEffect(() => {
+    widget.setViewportSize(viewportSize.value);
+  });
+
+  return { widget };
+}
diff --git a/src/shims-vtk.d.ts b/src/shims-vtk.d.ts
index a618b3d60..37bed7f20 100644
--- a/src/shims-vtk.d.ts
+++ b/src/shims-vtk.d.ts
@@ -304,3 +304,7 @@ declare module '@kitware/vtk.js/Filters/Core/Cutter' {
   export declare const vtkCutter: any;
   export default vtkCutter;
 }
+
+declare module '@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor/Presets' {
+  export default {} as any;
+}

From e2c936a7a323af420afc39ce0ce72861f9295363 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 17:12:34 -0400
Subject: [PATCH 100/113] feat(VolumeViewer): show preset name

---
 src/components/VolumeViewer.vue | 61 +++++++++++++++++++++++++--------
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index 52af6d1ce..a12cdf3ba 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -1,17 +1,5 @@
 <template>
-  <div class="vtk-container-wrapper" tabindex="0">
-    <div class="vtk-gutter">
-      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
-        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
-        <v-tooltip
-          location="right"
-          activator="parent"
-          transition="slide-x-transition"
-        >
-          Reset Camera
-        </v-tooltip>
-      </v-btn>
-    </div>
+  <div class="vtk-container-wrapper volume-viewer-container" tabindex="0">
     <div class="vtk-container" data-testid="two-view-container">
       <div class="vtk-sub-container">
         <vtk-volume-view
@@ -32,6 +20,33 @@
           <slot></slot>
         </vtk-volume-view>
       </div>
+      <view-overlay-grid class="overlay-no-events view-annotations">
+        <template v-slot:top-left>
+          <div class="annotation-cell">
+            <v-btn
+              class="pointer-events-all"
+              dark
+              icon
+              size="medium"
+              variant="text"
+              @click="resetCamera"
+            >
+              <v-icon size="medium" class="py-1">
+                mdi-camera-flip-outline
+              </v-icon>
+              <v-tooltip
+                location="right"
+                activator="parent"
+                transition="slide-x-transition"
+              >
+                Reset Camera
+              </v-tooltip>
+            </v-btn>
+            <span class="ml-3">{{ presetName }}</span>
+          </div>
+        </template>
+      </view-overlay-grid>
+
       <transition name="loading">
         <div v-if="isImageLoading" class="overlay-no-events loading">
           <div>Loading the image</div>
@@ -45,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue';
+import { ref, toRefs, computed } from 'vue';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { LPSAxisDir } from '@/src/types/lps';
 import VtkVolumeView from '@/src/components/vtk/VtkVolumeView.vue';
@@ -56,6 +71,8 @@ import { useViewAnimationListener } from '@/src/composables/useViewAnimationList
 import CropTool from '@/src/components/tools/crop/CropTool.vue';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import VtkOrientationMarker from '@/src/components/vtk/VtkOrientationMarker.vue';
+import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
+import useVolumeColoringStore from '@/src/store/view-configs/volume-coloring';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -78,7 +95,23 @@ useViewAnimationListener(vtkView, viewId, viewType);
 
 // base image
 const { currentImageID, isImageLoading } = useCurrentImage();
+
+// color preset
+const coloringStore = useVolumeColoringStore();
+const coloringConfig = computed(() =>
+  coloringStore.getConfig(viewId.value, currentImageID.value)
+);
+const presetName = computed(
+  () => coloringConfig.value?.transferFunction.preset.replace(/-/g, ' ') ?? ''
+);
 </script>
 
 <style scoped src="@/src/components/styles/vtk-view.css"></style>
 <style scoped src="@/src/components/styles/utils.css"></style>
+
+<style scoped>
+.volume-viewer-container {
+  background-color: black;
+  grid-template-columns: auto;
+}
+</style>

From 2f73cb8a001e1f5f8b1393236cf27e55f4207401 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 21 Mar 2024 17:14:28 -0400
Subject: [PATCH 101/113] fix(VolumeViewer): reset lights geometry

---
 src/components/VolumeViewer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/VolumeViewer.vue b/src/components/VolumeViewer.vue
index a12cdf3ba..4357cba9e 100644
--- a/src/components/VolumeViewer.vue
+++ b/src/components/VolumeViewer.vue
@@ -88,6 +88,7 @@ const { id: viewId, type: viewType, viewDirection, viewUp } = toRefs(props);
 function resetCamera() {
   if (!vtkView.value) return;
   vtkView.value.resetCamera();
+  vtkView.value.renderer.updateLightsGeometryToFollowCamera();
 }
 
 useWebGLWatchdog(vtkView);

From 6ef6df64418f1b01ad47f7118544f62c9e661985 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 22 Mar 2024 14:03:05 -0400
Subject: [PATCH 102/113] chore(vtk.js): update to v29

---
 package-lock.json | 26 +++++++++++++++++++-------
 package.json      |  4 ++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a71959e89..221882d3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@aws-sdk/client-s3": "^3.435.0",
         "@itk-wasm/dicom": "^5.0.0",
         "@itk-wasm/image-io": "^0.5.0",
-        "@kitware/vtk.js": "^28.13.0",
+        "@kitware/vtk.js": "^29.0.0",
         "@netlify/edge-functions": "^2.0.0",
         "@sentry/vue": "^7.54.0",
         "@vueuse/core": "^10.7.0",
@@ -3234,11 +3234,12 @@
       }
     },
     "node_modules/@kitware/vtk.js": {
-      "version": "28.13.0",
-      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-28.13.0.tgz",
-      "integrity": "sha512-ZwJJ3Hp4SLssBd0yFJ04RVWutdqYfLHamBGt8uWs2j1SBAtZ75XPZ9c2PBqTGUAZKbmtRvucNpOKM8cFNQI1Eg==",
+      "version": "29.11.2",
+      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-29.11.2.tgz",
+      "integrity": "sha512-SMYz7E5QlnMxg/iuNLYlae993EFG+eHjcQkGwWpGtPS2ANSnJdGiS0tCdc1LJz6gQ5LK01yZzObIHW472BybLQ==",
       "dependencies": {
         "@babel/runtime": "7.22.11",
+        "@types/webxr": "^0.5.5",
         "commander": "9.2.0",
         "d3-scale": "4.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -4809,6 +4810,11 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
+      "integrity": "sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA=="
+    },
     "node_modules/@types/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/which/-/which-2.0.2.tgz",
@@ -24596,11 +24602,12 @@
       }
     },
     "@kitware/vtk.js": {
-      "version": "28.13.0",
-      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-28.13.0.tgz",
-      "integrity": "sha512-ZwJJ3Hp4SLssBd0yFJ04RVWutdqYfLHamBGt8uWs2j1SBAtZ75XPZ9c2PBqTGUAZKbmtRvucNpOKM8cFNQI1Eg==",
+      "version": "29.11.2",
+      "resolved": "https://registry.npmjs.org/@kitware/vtk.js/-/vtk.js-29.11.2.tgz",
+      "integrity": "sha512-SMYz7E5QlnMxg/iuNLYlae993EFG+eHjcQkGwWpGtPS2ANSnJdGiS0tCdc1LJz6gQ5LK01yZzObIHW472BybLQ==",
       "requires": {
         "@babel/runtime": "7.22.11",
+        "@types/webxr": "^0.5.5",
         "commander": "9.2.0",
         "d3-scale": "4.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -25899,6 +25906,11 @@
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
       "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
     },
+    "@types/webxr": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
+      "integrity": "sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA=="
+    },
     "@types/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@types/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 50fea5e98..8aaf7b253 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "@aws-sdk/client-s3": "^3.435.0",
     "@itk-wasm/dicom": "^5.0.0",
     "@itk-wasm/image-io": "^0.5.0",
-    "@kitware/vtk.js": "^28.13.0",
+    "@kitware/vtk.js": "^29.0.0",
     "@netlify/edge-functions": "^2.0.0",
     "@sentry/vue": "^7.54.0",
     "@vueuse/core": "^10.7.0",
@@ -126,4 +126,4 @@
       "eslint"
     ]
   }
-}
+}
\ No newline at end of file

From b190c5b52a5f5be748a1e0ae465da2f84ed68fe2 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 25 Mar 2024 14:59:28 -0400
Subject: [PATCH 103/113] fix(resizeToFitImage): use dims with spacing

---
 src/utils/camera.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/utils/camera.ts b/src/utils/camera.ts
index d04f3b442..874950621 100644
--- a/src/utils/camera.ts
+++ b/src/utils/camera.ts
@@ -101,12 +101,17 @@ export function resizeToFitImage(
   viewDirection: LPSAxisDir,
   viewUp: LPSAxisDir
 ) {
-  const { lpsOrientation, dimensions } = metadata;
+  const { lpsOrientation, dimensions, spacing } = metadata;
   const viewDirAxis = getLPSAxisFromDir(viewDirection);
   const viewUpAxis = getLPSAxisFromDir(viewUp);
   const lookAxis = lpsOrientation[viewDirAxis];
   const upAxis = lpsOrientation[viewUpAxis];
+  const dimsWithSpacing: Vector3 = [
+    dimensions[0] * spacing[0],
+    dimensions[1] * spacing[1],
+    dimensions[2] * spacing[2],
+  ];
 
-  resizeToFit(view, lookAxis, upAxis, dimensions);
+  resizeToFit(view, lookAxis, upAxis, dimsWithSpacing);
   view.requestRender();
 }

From 5e5dbe2d9010e379375d4ab173c94a7a4772cebf Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 25 Mar 2024 15:01:57 -0400
Subject: [PATCH 104/113] refactor: type-import from vtk.js

---
 src/components/MultiObliqueSliceViewer.vue           | 2 +-
 src/components/ObliqueSliceViewer.vue                | 2 +-
 src/components/vtk/VtkSliceViewWindowManipulator.vue | 2 +-
 src/composables/annotationTool.ts                    | 2 +-
 src/composables/useCameraOrientation.ts              | 2 +-
 src/composables/useFrameOfReference.ts               | 2 +-
 src/composables/useSliceConfig.ts                    | 2 +-
 src/composables/useWindowingConfig.ts                | 2 +-
 src/composables/useWindowingConfigInitializer.ts     | 2 +-
 src/store/segmentGroups.ts                           | 2 +-
 src/utils/color.ts                                   | 2 +-
 src/vtk/PolygonWidget/behavior.ts                    | 2 +-
 src/vtk/ToolWidgetUtils/types.ts                     | 2 +-
 13 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/MultiObliqueSliceViewer.vue b/src/components/MultiObliqueSliceViewer.vue
index 4f951b542..9b990a877 100644
--- a/src/components/MultiObliqueSliceViewer.vue
+++ b/src/components/MultiObliqueSliceViewer.vue
@@ -52,7 +52,7 @@ import { vtkFieldRef } from '@/src/core/vtk/vtkFieldRef';
 import { useResetViewsEvents } from '@/src/components/tools/ResetViews.vue';
 import { vec3 } from 'gl-matrix';
 import { OBLIQUE_OUTLINE_COLORS } from '@/src/constants';
-import { RGBColor } from '@kitware/vtk.js/types';
+import type { RGBColor } from '@kitware/vtk.js/types';
 
 interface SliceSpec {
   viewID: string;
diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index 275ec508b..88eb075cb 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -68,7 +68,7 @@ import { batchForNextTask } from '@/src/utils/batchForNextTask';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import vtkMatrixBuilder from '@kitware/vtk.js/Common/Core/MatrixBuilder';
 import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import { RGBColor } from '@kitware/vtk.js/types';
+import type { RGBColor } from '@kitware/vtk.js/types';
 import { watchImmediate } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';
 import { computed, ref, toRefs, watchEffect } from 'vue';
diff --git a/src/components/vtk/VtkSliceViewWindowManipulator.vue b/src/components/vtk/VtkSliceViewWindowManipulator.vue
index 2e8534ff4..72699b90e 100644
--- a/src/components/vtk/VtkSliceViewWindowManipulator.vue
+++ b/src/components/vtk/VtkSliceViewWindowManipulator.vue
@@ -7,7 +7,7 @@ import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionMa
 import { Maybe } from '@/src/types';
 import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
-import { Vector2 } from '@kitware/vtk.js/types';
+import type { Vector2 } from '@kitware/vtk.js/types';
 import { syncRef } from '@vueuse/core';
 import { inject, toRefs, computed } from 'vue';
 
diff --git a/src/composables/annotationTool.ts b/src/composables/annotationTool.ts
index 3f1a44457..81e903585 100644
--- a/src/composables/annotationTool.ts
+++ b/src/composables/annotationTool.ts
@@ -9,7 +9,7 @@ import {
   unref,
   watch,
 } from 'vue';
-import { Vector2 } from '@kitware/vtk.js/types';
+import type { Vector2 } from '@kitware/vtk.js/types';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { frameOfReferenceToImageSliceAndAxis } from '@/src/utils/frameOfReference';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
diff --git a/src/composables/useCameraOrientation.ts b/src/composables/useCameraOrientation.ts
index ab9b66341..41ddf9baa 100644
--- a/src/composables/useCameraOrientation.ts
+++ b/src/composables/useCameraOrientation.ts
@@ -1,4 +1,4 @@
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import { computed, Ref, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { mat3 } from 'gl-matrix';
diff --git a/src/composables/useFrameOfReference.ts b/src/composables/useFrameOfReference.ts
index e16237e46..bfff6b30c 100644
--- a/src/composables/useFrameOfReference.ts
+++ b/src/composables/useFrameOfReference.ts
@@ -2,7 +2,7 @@ import { ImageMetadata } from '@/src/types/image';
 import { LPSAxisDir } from '@/src/types/lps';
 import { FrameOfReference } from '@/src/utils/frameOfReference';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import { vec3 } from 'gl-matrix';
 import { computed, unref } from 'vue';
 import type { ComputedRef, MaybeRef } from 'vue';
diff --git a/src/composables/useSliceConfig.ts b/src/composables/useSliceConfig.ts
index 7e21d9c35..be82b526a 100644
--- a/src/composables/useSliceConfig.ts
+++ b/src/composables/useSliceConfig.ts
@@ -2,7 +2,7 @@ import useViewSliceStore, {
   defaultSliceConfig,
 } from '@/src/store/view-configs/slicing';
 import { Maybe } from '@/src/types';
-import { Vector2 } from '@kitware/vtk.js/types';
+import type { Vector2 } from '@kitware/vtk.js/types';
 import { unref, MaybeRef, computed } from 'vue';
 
 export function useSliceConfig(
diff --git a/src/composables/useWindowingConfig.ts b/src/composables/useWindowingConfig.ts
index f7654dc8d..91733f15b 100644
--- a/src/composables/useWindowingConfig.ts
+++ b/src/composables/useWindowingConfig.ts
@@ -1,6 +1,6 @@
 import useWindowingStore from '@/src/store/view-configs/windowing';
 import { Maybe } from '@/src/types';
-import { Vector2 } from '@kitware/vtk.js/types';
+import type { Vector2 } from '@kitware/vtk.js/types';
 import { MaybeRef, unref, computed } from 'vue';
 
 export function useWindowingConfig(
diff --git a/src/composables/useWindowingConfigInitializer.ts b/src/composables/useWindowingConfigInitializer.ts
index b4f8d8f29..7174e9802 100644
--- a/src/composables/useWindowingConfigInitializer.ts
+++ b/src/composables/useWindowingConfigInitializer.ts
@@ -4,7 +4,7 @@ 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 type { TypedArray } from '@kitware/vtk.js/types';
 import { watchImmediate } from '@vueuse/core';
 import { MaybeRef, computed, unref, watch } from 'vue';
 
diff --git a/src/store/segmentGroups.ts b/src/store/segmentGroups.ts
index c9f039fa7..e2602545c 100644
--- a/src/store/segmentGroups.ts
+++ b/src/store/segmentGroups.ts
@@ -1,7 +1,6 @@
 import { computed, reactive, ref, toRaw, watch } from 'vue';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { RGBAColor } from '@kitware/vtk.js/types';
 import { defineStore } from 'pinia';
 import { useImageStore } from '@/src/store/datasets-images';
 import { join, normalize } from '@/src/utils/path';
@@ -12,6 +11,7 @@ import { compareImageSpaces } from '@/src/utils/imageSpace';
 import { SegmentMask } from '@/src/types/segment';
 import { DEFAULT_SEGMENT_MASKS } from '@/src/config';
 import { readImage, writeImage } from '@/src/io/readWriteImage';
+import type { RGBAColor } from '@kitware/vtk.js/types';
 import vtkLabelMap from '../vtk/LabelMap';
 import {
   StateFile,
diff --git a/src/utils/color.ts b/src/utils/color.ts
index b4b7454f0..e71f644ea 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -1,4 +1,4 @@
-import { RGBAColor } from '@kitware/vtk.js/types';
+import type { RGBAColor } from '@kitware/vtk.js/types';
 
 /**
  * Converts an RGBA tuple to a hex string with alpha.
diff --git a/src/vtk/PolygonWidget/behavior.ts b/src/vtk/PolygonWidget/behavior.ts
index ad61e3b0b..6d4c80f02 100644
--- a/src/vtk/PolygonWidget/behavior.ts
+++ b/src/vtk/PolygonWidget/behavior.ts
@@ -1,6 +1,6 @@
 import { distance2BetweenPoints } from '@kitware/vtk.js/Common/Core/Math';
 import macro from '@kitware/vtk.js/macros';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 
 import { WidgetAction } from '@/src/vtk/ToolWidgetUtils/types';
diff --git a/src/vtk/ToolWidgetUtils/types.ts b/src/vtk/ToolWidgetUtils/types.ts
index 6ff4b3e6b..bc44a16b6 100644
--- a/src/vtk/ToolWidgetUtils/types.ts
+++ b/src/vtk/ToolWidgetUtils/types.ts
@@ -5,7 +5,7 @@ import vtkAbstractWidget from '@kitware/vtk.js/Widgets/Core/AbstractWidget';
 import vtkWidgetState from '@kitware/vtk.js/Widgets/Core/WidgetState';
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { vtkSubscription } from '@kitware/vtk.js/interfaces';
-import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 
 export type WidgetAction = {
   name: string;

From f9e935976ce3f9f04bf10ac824ddf5ab8467102d Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 25 Mar 2024 15:03:32 -0400
Subject: [PATCH 105/113] refactor: delete proxy-related files

---
 src/components/VtkObliqueThreeView.vue        | 254 --------
 src/components/VtkObliqueView.vue             | 576 -----------------
 src/components/VtkThreeView.vue               | 318 ---------
 src/components/VtkTwoView.vue                 | 610 ------------------
 src/components/tools/MouseManipulatorTool.vue | 111 ----
 src/components/tools/PanTool.vue              |  31 -
 src/components/tools/SliceScrollTool.vue      | 120 ----
 src/components/tools/ZoomTool.vue             |  31 -
 .../tools/windowing/WindowLevelTool.vue       | 165 -----
 src/composables/onProxyManagerEvent.ts        |  61 --
 src/composables/useBaseSliceRepresentation.ts |  22 -
 src/composables/useCvrEffect.ts               | 224 -------
 src/composables/useLabelMapRepresentations.ts |  10 -
 src/composables/useLayerRepresentations.ts    |  10 -
 src/composables/useProxyManager.ts            |  40 --
 src/composables/useProxyRepresentations.ts    |  60 --
 src/composables/useViewProxy.ts               |  82 ---
 src/composables/useWidgetManager.ts           |  41 --
 src/core/proxies.ts                           | 110 ----
 .../IJKSliceRepresentationProxy/index.d.ts    |  15 -
 src/vtk/IJKSliceRepresentationProxy/index.js  |  56 --
 src/vtk/LPSView2DProxy/index.d.ts             |  22 -
 src/vtk/LPSView2DProxy/index.js               |  94 ---
 src/vtk/LPSView3DProxy/index.d.ts             |  13 -
 src/vtk/LPSView3DProxy/index.js               |  20 -
 src/vtk/LPSViewProxyBase/index.d.ts           |  14 -
 src/vtk/LPSViewProxyBase/index.js             |  79 ---
 src/vtk/LabelMapSliceRepProxy/index.d.ts      |  12 -
 src/vtk/LabelMapSliceRepProxy/index.js        | 119 ----
 .../MultiSliceRepresentationProxy/index.d.ts  |  19 -
 .../MultiSliceRepresentationProxy/index.js    | 106 ---
 src/vtk/proxy.js                              |  78 ---
 src/vtk/proxyUtils.js                         |  16 -
 33 files changed, 3539 deletions(-)
 delete mode 100644 src/components/VtkObliqueThreeView.vue
 delete mode 100644 src/components/VtkObliqueView.vue
 delete mode 100644 src/components/VtkThreeView.vue
 delete mode 100644 src/components/VtkTwoView.vue
 delete mode 100644 src/components/tools/MouseManipulatorTool.vue
 delete mode 100644 src/components/tools/PanTool.vue
 delete mode 100644 src/components/tools/SliceScrollTool.vue
 delete mode 100644 src/components/tools/ZoomTool.vue
 delete mode 100644 src/components/tools/windowing/WindowLevelTool.vue
 delete mode 100644 src/composables/onProxyManagerEvent.ts
 delete mode 100644 src/composables/useBaseSliceRepresentation.ts
 delete mode 100644 src/composables/useCvrEffect.ts
 delete mode 100644 src/composables/useLabelMapRepresentations.ts
 delete mode 100644 src/composables/useLayerRepresentations.ts
 delete mode 100644 src/composables/useProxyManager.ts
 delete mode 100644 src/composables/useProxyRepresentations.ts
 delete mode 100644 src/composables/useViewProxy.ts
 delete mode 100644 src/composables/useWidgetManager.ts
 delete mode 100644 src/core/proxies.ts
 delete mode 100644 src/vtk/IJKSliceRepresentationProxy/index.d.ts
 delete mode 100644 src/vtk/IJKSliceRepresentationProxy/index.js
 delete mode 100644 src/vtk/LPSView2DProxy/index.d.ts
 delete mode 100644 src/vtk/LPSView2DProxy/index.js
 delete mode 100644 src/vtk/LPSView3DProxy/index.d.ts
 delete mode 100644 src/vtk/LPSView3DProxy/index.js
 delete mode 100644 src/vtk/LPSViewProxyBase/index.d.ts
 delete mode 100644 src/vtk/LPSViewProxyBase/index.js
 delete mode 100644 src/vtk/LabelMapSliceRepProxy/index.d.ts
 delete mode 100644 src/vtk/LabelMapSliceRepProxy/index.js
 delete mode 100644 src/vtk/MultiSliceRepresentationProxy/index.d.ts
 delete mode 100644 src/vtk/MultiSliceRepresentationProxy/index.js
 delete mode 100644 src/vtk/proxy.js
 delete mode 100644 src/vtk/proxyUtils.js

diff --git a/src/components/VtkObliqueThreeView.vue b/src/components/VtkObliqueThreeView.vue
deleted file mode 100644
index a0fea0e60..000000000
--- a/src/components/VtkObliqueThreeView.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<template>
-  <div class="vtk-container-wrapper vtk-three-container">
-    <div class="vtk-container" :class="active ? 'active' : ''">
-      <div class="vtk-sub-container">
-        <div
-          class="vtk-view"
-          ref="vtkContainerRef"
-          data-testid="vtk-view vtk-three-view"
-        />
-      </div>
-      <div class="overlay-no-events tool-layer">
-        <pan-tool :viewId="viewID" />
-      </div>
-      <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:top-left>
-          <div class="annotation-cell">
-            <v-btn
-              class="pointer-events-all"
-              dark
-              icon
-              size="medium"
-              variant="text"
-              @click="resetCamera"
-            >
-              <v-icon size="medium" class="py-1">
-                mdi-camera-flip-outline
-              </v-icon>
-              <v-tooltip
-                location="right"
-                activator="parent"
-                transition="slide-x-transition"
-              >
-                Reset Camera
-              </v-tooltip>
-            </v-btn>
-          </div>
-        </template>
-      </view-overlay-grid>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
-
-import { vec3 } from 'gl-matrix';
-import vtkBoundingBox from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import { ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
-
-import vtkMultiSliceRepresentationProxy, {
-  OutlineProperties,
-} 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';
-import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
-import { ViewProxyType } from '../core/proxies';
-import { useCurrentImage } from '../composables/useCurrentImage';
-import { useCameraOrientation } from '../composables/useCameraOrientation';
-import { InitViewIDs } from '../config';
-import { useResizeObserver } from '../composables/useResizeObserver';
-import { useResetViewsEvents } from './tools/ResetViews.vue';
-import { VTKResliceCursor, OBLIQUE_OUTLINE_COLORS } from '../constants';
-import useWindowingStore from '../store/view-configs/windowing';
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    viewUp: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-  },
-  components: {
-    ViewOverlayGrid,
-    PanTool,
-  },
-  setup(props) {
-    const { id: viewID, viewDirection, viewUp } = toRefs(props);
-    const vtkContainerRef = ref<HTMLElement>();
-
-    // --- computed vars --- //
-    const { currentImageData, currentImageID, currentImageMetadata } =
-      useCurrentImage();
-
-    // --- view proxy setup --- //
-
-    const { viewProxy } = useViewProxy<vtkLPSView3DProxy>(
-      viewID,
-      ViewProxyType.Oblique3D
-    );
-
-    const { representation: baseImageRep } =
-      useProxyRepresentation<vtkMultiSliceRepresentationProxy>(
-        currentImageID,
-        viewID
-      );
-
-    // --- Set the data and slice outline properties --- //
-    const setOutlineProperties = () => {
-      const outlineColors = [
-        InitViewIDs.ObliqueSagittal,
-        InitViewIDs.ObliqueCoronal,
-        InitViewIDs.ObliqueAxial,
-      ].map((v) => vec3.scale([0, 0, 0], OBLIQUE_OUTLINE_COLORS[v], 1 / 255));
-
-      const outlineProperties = outlineColors.map(
-        (color) => ({ color, lineWidth: 4, opacity: 1.0 } as OutlineProperties)
-      );
-      baseImageRep.value?.setSliceOutlineProperties(outlineProperties);
-      baseImageRep.value?.setDataOutlineProperties({
-        lineWidth: 1,
-        opacity: 0.3,
-      } as OutlineProperties);
-    };
-
-    onBeforeUnmount(() => {
-      viewProxy.value.setContainer(null);
-    });
-
-    onMounted(() => {
-      viewProxy.value.setOrientationAxesVisibility(true);
-      viewProxy.value.setOrientationAxesType('cube');
-      viewProxy.value.setBackground([0, 0, 0, 0]);
-      viewProxy.value.getCamera().setParallelProjection(true);
-      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
-    });
-
-    const resliceCursor = inject(VTKResliceCursor);
-    if (!resliceCursor) {
-      throw Error('Cannot access global ResliceCursor instance.');
-    }
-
-    const updateViewFromResliceCursor = () => {
-      const rep = baseImageRep?.value;
-      const state = resliceCursor?.getWidgetState() as ResliceCursorWidgetState;
-      const planeOrigin = state?.getCenter();
-      if (resliceCursor && rep && planeOrigin) {
-        const planeNormalYZ = resliceCursor.getPlaneNormalFromViewType(
-          ViewTypes.YZ_PLANE
-        );
-        const planeNormalXZ = resliceCursor.getPlaneNormalFromViewType(
-          ViewTypes.XZ_PLANE
-        );
-        const planeNormalXY = resliceCursor.getPlaneNormalFromViewType(
-          ViewTypes.XY_PLANE
-        );
-        const planesForSlices = [
-          { origin: planeOrigin, normal: planeNormalYZ },
-          { origin: planeOrigin, normal: planeNormalXZ },
-          { origin: planeOrigin, normal: planeNormalXY },
-        ];
-        rep.setPlanes(planesForSlices);
-      }
-    };
-
-    const onPlanesUpdated = () => {
-      updateViewFromResliceCursor();
-      viewProxy.value.renderLater();
-    };
-
-    onVTKEvent(resliceCursor.getWidgetState(), 'onModified', onPlanesUpdated);
-
-    // --- camera setup --- //
-
-    const { cameraUpVec, cameraDirVec } = useCameraOrientation(
-      viewDirection,
-      viewUp,
-      currentImageMetadata
-    );
-
-    useResizeObserver(vtkContainerRef, () => viewProxy.value.resize());
-
-    const resetCamera = () => {
-      const bounds = currentImageMetadata.value.worldBounds;
-      const center = vtkBoundingBox.getCenter(bounds);
-
-      viewProxy.value.updateCamera(
-        cameraDirVec.value,
-        cameraUpVec.value,
-        center
-      );
-      viewProxy.value.resetCamera();
-      viewProxy.value.renderLater();
-    };
-
-    // Listen to ResetViews event.
-    const events = useResetViewsEvents();
-    events.onClick(() => resetCamera());
-
-    watch(
-      [baseImageRep, currentImageData],
-      () => {
-        setOutlineProperties();
-        resetCamera();
-      },
-      { immediate: true }
-    );
-
-    // Track window-level setting of one of the oblique views:
-    const windowingStore = useWindowingStore();
-    const wlConfig = computed(() =>
-      windowingStore.getConfig(InitViewIDs.ObliqueAxial, currentImageID.value)
-    );
-
-    watch([wlConfig, baseImageRep], ([newConfigValue, newRep]) => {
-      if (newConfigValue && newRep) {
-        const { width, level } = newConfigValue;
-        newRep.setWindowWidth(width);
-        newRep.setWindowLevel(level);
-        viewProxy.value.renderLater();
-      }
-    });
-
-    return {
-      vtkContainerRef,
-      viewID,
-      active: false,
-      resetCamera,
-    };
-  },
-});
-</script>
-
-<style scoped src="@/src/components/styles/vtk-view.css"></style>
-<style scoped src="@/src/components/styles/utils.css"></style>
-
-<style scoped>
-.vtk-three-container {
-  background-color: black;
-  grid-template-columns: auto;
-}
-</style>
diff --git a/src/components/VtkObliqueView.vue b/src/components/VtkObliqueView.vue
deleted file mode 100644
index cf07da675..000000000
--- a/src/components/VtkObliqueView.vue
+++ /dev/null
@@ -1,576 +0,0 @@
-<template>
-  <div
-    class="vtk-container-wrapper-oblique"
-    tabindex="0"
-    @pointerenter="hover = true"
-    @pointerleave="hover = false"
-    @focusin="hover = true"
-    @focusout="hover = false"
-  >
-    <div class="vtk-container" :class="active ? 'active' : ''">
-      <div class="vtk-sub-container">
-        <div class="vtk-view" ref="vtkContainerRef" />
-      </div>
-      <div class="overlay-no-events tool-layer" ref="toolContainer">
-        <pan-tool :view-id="viewID" />
-        <zoom-tool :view-id="viewID" />
-        <reslice-cursor-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-        />
-        <window-level-tool :view-id="viewID" />
-      </div>
-      <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:bottom-left>
-          <div class="annotation-cell">
-            <div v-if="windowWidth != null && windowLevel != null">
-              W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
-            </div>
-          </div>
-        </template>
-        <template v-slot:top-right>
-          <div class="annotation-cell">
-            <dicom-quick-info-button
-              :image-id="curImageID"
-            ></dicom-quick-info-button>
-          </div>
-        </template>
-      </view-overlay-grid>
-      <transition name="loading">
-        <div v-if="isImageLoading" class="overlay-no-events loading">
-          <div>Loading the image</div>
-          <div>
-            <v-progress-circular indeterminate color="blue" />
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  provide,
-  ref,
-  toRefs,
-  watch,
-  watchEffect,
-} from 'vue';
-import { vec3 } from 'gl-matrix';
-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 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';
-import { ViewTypes } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
-import { ResliceCursorWidgetState } from '@kitware/vtk.js/Widgets/Widgets3D/ResliceCursorWidget';
-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 { 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';
-import { useCameraOrientation } from '../composables/useCameraOrientation';
-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 { useResetViewsEvents } from './tools/ResetViews.vue';
-import { LPSAxisDir } from '../types/lps';
-import { ViewProxyType } from '../core/proxies';
-import { useViewProxy } from '../composables/useViewProxy';
-import useViewSliceStore from '../store/view-configs/slicing';
-import {
-  OBLIQUE_OUTLINE_COLORS,
-  ToolContainer,
-  VTKResliceCursor,
-} from '../constants';
-
-const SLICE_OFFSET_KEYS: Record<string, number> = {
-  ArrowLeft: -1,
-  ArrowRight: 1,
-  ArrowUp: -1,
-  ArrowDown: 1,
-} as const;
-
-export default defineComponent({
-  name: 'VtkObliqueView',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    viewUp: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-  },
-  components: {
-    ViewOverlayGrid,
-    WindowLevelTool,
-    PanTool,
-    ZoomTool,
-    ResliceCursorTool,
-    DicomQuickInfoButton,
-  },
-  setup(props) {
-    const viewSliceStore = useViewSliceStore();
-
-    const { id: viewID, viewDirection, viewUp } = toRefs(props);
-
-    const vtkContainerRef = ref<HTMLElement>();
-
-    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
-
-    // --- computed vars --- //
-
-    const {
-      currentImageData: curImageData,
-      currentImageID: curImageID,
-      currentImageMetadata: curImageMetadata,
-      isImageLoading,
-    } = useCurrentImage();
-
-    const { slice: currentSlice, config: sliceConfig } = useSliceConfig(
-      viewID,
-      curImageID
-    );
-    const {
-      width: windowWidth,
-      level: windowLevel,
-      config: wlConfig,
-    } = useWindowingConfig(viewID, curImageID);
-
-    // --- view proxy setup --- //
-
-    const { viewProxy } = useViewProxy<vtkLPSView2DProxy>(
-      viewID,
-      ViewProxyType.Oblique
-    );
-
-    const resliceCursor = inject(VTKResliceCursor);
-    if (!resliceCursor) {
-      throw Error('Cannot access global ResliceCursor instance.');
-    }
-
-    const VTKViewType = computed(() => {
-      const viewAxisValue = viewAxis?.value;
-      switch (viewAxisValue) {
-        case 'Coronal':
-          return ViewTypes.XZ_PLANE;
-        case 'Sagittal':
-          return ViewTypes.YZ_PLANE;
-        default:
-          return ViewTypes.XY_PLANE;
-      }
-    });
-
-    const { representation: baseImageRep } =
-      useProxyRepresentation<vtkResliceRepresentationProxy>(curImageID, viewID);
-
-    onBeforeMount(() => {
-      // do this before mount, as the ManipulatorTools run onMounted
-      // before this component does.
-      viewProxy.value.getInteractorStyle2D().removeAllManipulators();
-    });
-
-    const updateViewFromResliceCursor = () => {
-      const rep = baseImageRep?.value;
-      const state = resliceCursor?.getWidgetState() as ResliceCursorWidgetState;
-      if (resliceCursor && rep) {
-        const planeOrigin = state.getCenter();
-        const planeNormal = resliceCursor.getPlaneNormalFromViewType(
-          VTKViewType.value
-        );
-        rep.getSlicePlane().setNormal(planeNormal);
-        rep.getSlicePlane().setOrigin(planeOrigin);
-        if (curImageData.value) {
-          resliceCursor.updateCameraPoints(
-            viewProxy.value.getRenderer(),
-            VTKViewType.value,
-            false,
-            false,
-            true
-          );
-        }
-      }
-    };
-
-    onVTKEvent(
-      resliceCursor.getWidgetState(),
-      'onModified',
-      updateViewFromResliceCursor
-    );
-
-    onMounted(() => {
-      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
-      viewProxy.value.setOrientationAxesVisibility(false);
-
-      // Initialize camera points during construction
-      if (curImageData.value) {
-        resliceCursor.updateCameraPoints(
-          viewProxy.value.getRenderer(),
-          VTKViewType.value,
-          true,
-          false,
-          true
-        );
-      }
-    });
-
-    onBeforeUnmount(() => {
-      viewProxy.value.setContainer(null);
-    });
-
-    // 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(
-      cornerPoints: number[][],
-      sliceNormal: number[]
-    ): [number, number] {
-      if (!cornerPoints || !sliceNormal) return [0, 1];
-
-      // Get rotation matrix from normal to +X (since bounds is aligned to XYZ)
-      const transform = vtkMatrixBuilder
-        .buildFromDegree()
-        .identity()
-        .rotateFromDirections(sliceNormal, [1, 0, 0]);
-
-      const corners = cornerPoints.map((x) => x.slice());
-      corners.forEach((pt) => transform.apply(pt));
-
-      // range is now maximum X distance
-      let minX = Infinity;
-      let maxX = -Infinity;
-      for (let i = 0; i < 8; i++) {
-        const x = corners[i][0];
-        if (x > maxX) {
-          maxX = x;
-        }
-        if (x < minX) {
-          minX = x;
-        }
-      }
-
-      return [minX, maxX];
-    }
-
-    // --- arrows change slice --- //
-
-    const hover = ref(false);
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!curImageID.value || !hover.value) return;
-
-      const sliceOffset = SLICE_OFFSET_KEYS[event.key] ?? 0;
-      if (sliceOffset) {
-        viewSliceStore.updateConfig(viewID.value, curImageID.value, {
-          slice: currentSlice.value + sliceOffset,
-        });
-
-        event.stopPropagation();
-      }
-    };
-    onKeyStroke(Object.keys(SLICE_OFFSET_KEYS), onKeyDown);
-
-    // --- resizing --- //
-
-    useResizeObserver(vtkContainerRef, () => viewProxy.value.resize());
-
-    // Used by SVG tool widgets for resizeCallback
-    const toolContainer = ref<HTMLElement>();
-    provide(ToolContainer, toolContainer);
-
-    // --- window/level setup --- //
-
-    watch(
-      curImageData,
-      (imageData) => {
-        if (curImageID.value == null || wlConfig.value != null || !imageData) {
-          return;
-        }
-
-        updateViewFromResliceCursor();
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    // --- scene setup --- //
-
-    const { cameraDirVec, cameraUpVec } = useCameraOrientation(
-      viewDirection,
-      viewUp,
-      curImageMetadata
-    );
-
-    const imageCorners = computed(() => {
-      const image = curImageData.value;
-      const [xmin, xmax, ymin, ymax, zmin, zmax] = image?.getExtent() ?? [
-        0, 1, 0, 1, 0, 1,
-      ];
-      const corners = [
-        [xmin, ymin, zmin],
-        [xmax, ymin, zmin],
-        [xmin, ymax, zmin],
-        [xmax, ymax, zmin],
-        [xmin, ymin, zmax],
-        [xmax, ymin, zmax],
-        [xmin, ymax, zmax],
-        [xmax, ymax, zmax],
-      ];
-      corners.forEach((p) => image?.indexToWorld(p as vec3, p as vec3));
-      return corners;
-    });
-
-    const sliceDomain = computed(() => {
-      const [...sliceNormal] = cameraDirVec?.value ?? [0, 0, 1];
-      const range = slicePlaneRange(imageCorners?.value, sliceNormal);
-      return {
-        min: range[0],
-        max: range[1],
-      };
-    });
-
-    // --- apply windowing and slice configs --- //
-
-    useSliceConfigInitializer(viewID, curImageID, viewDirection, sliceDomain);
-    useWindowingConfigInitializer(viewID, curImageID);
-
-    watch(
-      baseImageRep,
-      (obliqueRep) => {
-        if (obliqueRep) {
-          obliqueRep.setOutlineVisibility(true);
-          obliqueRep.setOutlineLineWidth(4.0);
-          if (viewID.value) {
-            const outlineColor = vec3.scale(
-              [0, 0, 0],
-              OBLIQUE_OUTLINE_COLORS[viewID.value],
-              1 / 255
-            ) as RGBColor;
-            obliqueRep.setOutlineColor(outlineColor);
-          }
-        }
-      },
-      { immediate: true }
-    );
-
-    // Set default cutting plane parameters.
-
-    watch([baseImageRep, cameraDirVec], () => {
-      const rep = baseImageRep?.value;
-      if (rep) {
-        if (cameraDirVec) {
-          const planeNormal: Vector3 = [
-            cameraDirVec.value[0],
-            cameraDirVec.value[1],
-            cameraDirVec.value[2],
-          ];
-          rep.getSlicePlane().setNormal(planeNormal);
-        }
-        rep.setSlabType(SlabTypes.MAX);
-        rep.setSlabThickness(1);
-      }
-    });
-
-    // --- camera setup --- //
-
-    const { resizeToFit, ignoreResizeToFitTracking, resetResizeToFitTracking } =
-      useResizeToFit(viewProxy.value.getCamera(), false);
-
-    const resizeToFitScene = () =>
-      ignoreResizeToFitTracking(() => {
-        // resize to fit
-        const lookAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewDirection.value)
-          ];
-        const upAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewUp.value)
-          ];
-        const dimsWithSpacing = curImageMetadata.value.dimensions.map(
-          (d, i) => d * curImageMetadata.value.spacing[i]
-        );
-        viewProxy.value.resizeToFit(lookAxis, upAxis, dimsWithSpacing);
-        resetResizeToFitTracking();
-      });
-
-    const resetCamera = () => {
-      const bounds = curImageMetadata.value.worldBounds;
-      const center = vtkBoundingBox.getCenter(bounds);
-
-      // do not track resizeToFit state
-      ignoreResizeToFitTracking(() => {
-        viewProxy.value.updateCamera(
-          cameraDirVec.value,
-          cameraUpVec.value,
-          center
-        );
-        viewProxy.value.resetCamera(bounds);
-        // reset cursor widget
-        const state =
-          resliceCursor?.getWidgetState() as ResliceCursorWidgetState;
-        // Reset to default plane values before transforming based on current image-data.
-        state.setPlanes({
-          [ViewTypes.YZ_PLANE]: {
-            normal: [1, 0, 0],
-            viewUp: [0, 0, 1],
-          },
-          [ViewTypes.XZ_PLANE]: {
-            normal: [0, -1, 0],
-            viewUp: [0, 0, 1],
-          },
-          [ViewTypes.XY_PLANE]: {
-            normal: [0, 0, -1],
-            viewUp: [0, -1, 0],
-          },
-        });
-        const planes = state.getPlanes();
-
-        if (curImageMetadata.value) {
-          planes[ViewTypes.XY_PLANE].normal = curImageMetadata.value
-            .lpsOrientation.Inferior as Vector3;
-          planes[ViewTypes.XY_PLANE].viewUp = curImageMetadata.value
-            .lpsOrientation.Anterior as Vector3;
-
-          planes[ViewTypes.XZ_PLANE].normal = curImageMetadata.value
-            .lpsOrientation.Anterior as Vector3;
-          planes[ViewTypes.XZ_PLANE].viewUp = curImageMetadata.value
-            .lpsOrientation.Superior as Vector3;
-
-          planes[ViewTypes.YZ_PLANE].normal = curImageMetadata.value
-            .lpsOrientation.Left as Vector3;
-          planes[ViewTypes.YZ_PLANE].viewUp = curImageMetadata.value
-            .lpsOrientation.Superior as Vector3;
-
-          resliceCursor.setCenter(center);
-        }
-        if (curImageMetadata) {
-          state.placeWidget(bounds);
-        }
-        viewProxy.value.renderLater();
-      });
-
-      resizeToFitScene();
-
-      updateViewFromResliceCursor();
-
-      viewProxy.value.renderLater();
-    };
-
-    manageVTKSubscription(
-      viewProxy.value.onResize(() => {
-        if (resizeToFit.value) {
-          resizeToFitScene();
-        }
-      })
-    );
-
-    // if we re-enable resizeToFit, reset the camera
-    watch(resizeToFit, () => {
-      if (resizeToFit.value) {
-        resetCamera();
-      }
-    });
-
-    watch(
-      [curImageID, cameraDirVec, cameraUpVec],
-      () => {
-        // If we have a saved camera configuration restore it
-        if (resizeToFit.value) {
-          resetCamera();
-        } else {
-          // this will trigger a resetCamera() call
-          resizeToFit.value = true;
-        }
-      },
-      { immediate: true, deep: true }
-    );
-
-    // --- viewport orientation/camera labels --- //
-
-    watchEffect(() => {
-      if (sliceConfig.value == null || wlConfig.value == null) {
-        return;
-      }
-
-      const { width, level } = wlConfig.value;
-
-      if (baseImageRep.value) {
-        baseImageRep.value.setWindowWidth(width);
-        baseImageRep.value.setWindowLevel(level);
-      }
-
-      viewProxy.value.renderLater();
-    });
-
-    // Listen to ResetViews event.
-    const events = useResetViewsEvents();
-    events.onClick(() => resetCamera());
-
-    const enableResizeToFit = () => {
-      resizeToFit.value = true;
-      resetCamera();
-    };
-
-    return {
-      vtkContainerRef,
-      toolContainer,
-      viewID,
-      viewProxy,
-      viewAxis,
-      active: true,
-      curImageID,
-      currentSlice,
-      windowWidth,
-      windowLevel,
-      isImageLoading,
-      enableResizeToFit,
-      hover,
-    };
-  },
-  mounted() {
-    this.enableResizeToFit();
-  },
-});
-</script>
-
-<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;
-}
-.vtk-container-wrapper-oblique {
-  flex: 1;
-  display: grid;
-  grid-template-columns: auto;
-  grid-template-rows: auto;
-  z-index: 0; /* avoids partial obscuring of focus outline */
-}
-</style>
diff --git a/src/components/VtkThreeView.vue b/src/components/VtkThreeView.vue
deleted file mode 100644
index 0e3b71f00..000000000
--- a/src/components/VtkThreeView.vue
+++ /dev/null
@@ -1,318 +0,0 @@
-<template>
-  <div class="vtk-container-wrapper vtk-three-container">
-    <div class="vtk-container" :class="active ? 'active' : ''">
-      <div class="vtk-sub-container">
-        <div
-          class="vtk-view"
-          ref="vtkContainerRef"
-          data-testid="vtk-view vtk-three-view"
-        />
-      </div>
-      <div class="overlay-no-events tool-layer">
-        <crop-tool :view-id="viewID" />
-        <pan-tool :viewId="viewID" />
-      </div>
-      <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:top-left>
-          <div class="annotation-cell">
-            <v-btn
-              class="pointer-events-all"
-              dark
-              icon
-              size="medium"
-              variant="text"
-              @click="resetCamera"
-            >
-              <v-icon size="medium" class="py-1">
-                mdi-camera-flip-outline
-              </v-icon>
-              <v-tooltip
-                location="right"
-                activator="parent"
-                transition="slide-x-transition"
-              >
-                Reset Camera
-              </v-tooltip>
-            </v-btn>
-            <span class="ml-3">{{ topLeftLabel }}</span>
-          </div>
-        </template>
-      </view-overlay-grid>
-      <transition name="loading">
-        <div v-if="isImageLoading" class="overlay-no-events loading">
-          <div>Loading the image</div>
-          <div>
-            <v-progress-circular indeterminate color="blue" />
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  ref,
-  toRefs,
-  watch,
-  nextTick,
-} from 'vue';
-import { vec3 } from 'gl-matrix';
-
-import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
-import { useProxyRepresentation } from '@/src/composables/useProxyRepresentations';
-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';
-import vtkLPSView3DProxy from '../vtk/LPSView3DProxy';
-import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
-import { LPSAxisDir } from '../types/lps';
-import { useViewProxy } from '../composables/useViewProxy';
-import { ViewProxyType } from '../core/proxies';
-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 useViewCameraStore from '../store/view-configs/camera';
-import { useResetViewsEvents } from './tools/ResetViews.vue';
-
-export default defineComponent({
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    viewUp: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-  },
-  components: {
-    ViewOverlayGrid,
-    CropTool,
-    PanTool,
-  },
-  setup(props) {
-    const volumeColoringStore = useVolumeColoringStore();
-    const viewCameraStore = useViewCameraStore();
-
-    const { id: viewID, viewDirection, viewUp } = toRefs(props);
-
-    const vtkContainerRef = ref<HTMLElement>();
-
-    // --- computed vars --- //
-
-    const {
-      currentImageID: curImageID,
-      currentImageMetadata: curImageMetadata,
-      currentImageData,
-      isImageLoading,
-    } = useCurrentImage();
-
-    // --- view proxy setup --- //
-
-    const { viewProxy } = useViewProxy<vtkLPSView3DProxy>(
-      viewID,
-      ViewProxyType.Volume
-    );
-
-    onMounted(() => {
-      viewProxy.value.setOrientationAxesVisibility(true);
-      viewProxy.value.setOrientationAxesType('cube');
-      viewProxy.value.setBackground([0, 0, 0, 0]);
-      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
-    });
-
-    onBeforeUnmount(() => {
-      viewProxy.value.setContainer(null);
-    });
-
-    useResizeObserver(vtkContainerRef, () => viewProxy.value.resize());
-
-    // --- scene setup --- //
-
-    const { representation: baseImageRep } =
-      useProxyRepresentation<vtkVolumeRepresentationProxy>(curImageID, viewID);
-
-    // --- picking --- //
-
-    // disables picking for crop control and more
-    watch(
-      baseImageRep,
-      (rep) => {
-        if (rep) {
-          rep.getVolumes().forEach((volume) => volume.setPickable(false));
-        }
-      },
-      { immediate: true }
-    );
-
-    // --- camera setup --- //
-
-    const { cameraUpVec, cameraDirVec } = useCameraOrientation(
-      viewDirection,
-      viewUp,
-      curImageMetadata
-    );
-
-    const resetCamera = () => {
-      const bounds = curImageMetadata.value.worldBounds;
-      const center = [
-        (bounds[0] + bounds[1]) / 2,
-        (bounds[2] + bounds[3]) / 2,
-        (bounds[4] + bounds[5]) / 2,
-      ] as vec3;
-
-      viewProxy.value.updateCamera(
-        cameraDirVec.value,
-        cameraUpVec.value,
-        center
-      );
-      viewProxy.value.resetCamera();
-      viewProxy.value.renderLater();
-    };
-
-    watch(
-      [baseImageRep, cameraDirVec, cameraUpVec],
-      () => {
-        const cameraConfig = viewCameraStore.getConfig(
-          viewID.value,
-          curImageID.value
-        );
-
-        // We don't want to reset the camera if we have a config we are restoring
-        if (!cameraConfig) {
-          // nextTick ensures resetCamera gets called after
-          // useSceneBuilder refreshes the scene.
-          nextTick(resetCamera);
-        }
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    const { restoreCameraConfig } = usePersistCameraConfig(
-      viewID,
-      curImageID,
-      viewProxy,
-      'position',
-      'focalPoint',
-      'directionOfProjection',
-      'viewUp'
-    );
-
-    watch(curImageID, () => {
-      // See if we have a camera configuration to restore
-      const cameraConfig = viewCameraStore.getConfig(
-        viewID.value,
-        curImageID.value
-      );
-
-      if (cameraConfig) {
-        restoreCameraConfig(cameraConfig);
-
-        viewProxy.value.getRenderer().resetCameraClippingRange();
-        viewProxy.value.renderLater();
-      }
-    });
-
-    // --- coloring setup --- //
-
-    const volumeColorConfig = computed(() =>
-      volumeColoringStore.getConfig(viewID.value, curImageID.value)
-    );
-
-    watch(
-      [viewID, curImageID],
-      () => {
-        if (
-          curImageID.value &&
-          currentImageData.value &&
-          !volumeColorConfig.value
-        ) {
-          volumeColoringStore.resetToDefaultColoring(
-            viewID.value,
-            curImageID.value,
-            currentImageData.value
-          );
-        }
-      },
-      { immediate: true }
-    );
-
-    // --- CVR parameters --- //
-
-    useCvrEffect(volumeColorConfig, baseImageRep, viewProxy);
-
-    // --- coloring --- //
-
-    useColoringEffect(volumeColorConfig, baseImageRep, viewProxy);
-
-    // --- cropping planes --- //
-
-    const cropStore = useCropStore();
-    const croppingPlanes = cropStore.getComputedVTKPlanes(curImageID);
-
-    watch(
-      croppingPlanes,
-      (planes, oldPlanes) => {
-        const mapper = baseImageRep.value?.getMapper();
-        if (
-          !mapper ||
-          !planes ||
-          (oldPlanes && croppingPlanesEqual(planes, oldPlanes))
-        )
-          return;
-
-        mapper.removeAllClippingPlanes();
-        planes.forEach((plane) => mapper.addClippingPlane(plane));
-        mapper.modified();
-        viewProxy.value.renderLater();
-      },
-      { immediate: true }
-    );
-
-    // --- Listen to ResetViews event --- //
-    const events = useResetViewsEvents();
-    events.onClick(() => resetCamera());
-
-    // --- template vars --- //
-
-    return {
-      vtkContainerRef,
-      viewID,
-      active: false,
-      topLeftLabel: computed(
-        () =>
-          volumeColorConfig.value?.transferFunction.preset.replace(/-/g, ' ') ??
-          ''
-      ),
-      isImageLoading,
-      resetCamera,
-    };
-  },
-});
-</script>
-
-<style scoped src="@/src/components/styles/vtk-view.css"></style>
-<style scoped src="@/src/components/styles/utils.css"></style>
-
-<style scoped>
-.vtk-three-container {
-  background-color: black;
-  grid-template-columns: auto;
-}
-</style>
diff --git a/src/components/VtkTwoView.vue b/src/components/VtkTwoView.vue
deleted file mode 100644
index fb21677cd..000000000
--- a/src/components/VtkTwoView.vue
+++ /dev/null
@@ -1,610 +0,0 @@
-<template>
-  <div
-    class="vtk-container-wrapper"
-    tabindex="0"
-    @pointerenter="hover = true"
-    @pointerleave="hover = false"
-    @focusin="hover = true"
-    @focusout="hover = false"
-  >
-    <div class="vtk-gutter">
-      <v-btn dark icon size="medium" variant="text" @click="enableResizeToFit">
-        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
-        <v-tooltip
-          location="right"
-          activator="parent"
-          transition="slide-x-transition"
-        >
-          Reset Camera
-        </v-tooltip>
-      </v-btn>
-      <slice-slider
-        v-model="currentSlice"
-        class="slice-slider"
-        :min="sliceRange[0]"
-        :max="sliceRange[1]"
-        :step="1"
-        :handle-height="20"
-      />
-    </div>
-    <div
-      class="vtk-container"
-      :class="active ? 'active' : ''"
-      data-testid="two-view-container"
-    >
-      <div class="vtk-sub-container">
-        <div
-          class="vtk-view"
-          ref="vtkContainerRef"
-          data-testid="vtk-view vtk-two-view"
-        />
-      </div>
-      <div class="overlay-no-events tool-layer" ref="toolContainer">
-        <svg class="overlay-no-events">
-          <bounding-rectangle :points="selectionPoints" :view-id="viewID" />
-        </svg>
-        <pan-tool :view-id="viewID" />
-        <zoom-tool :view-id="viewID" />
-        <slice-scroll-tool :view-id="viewID" />
-        <window-level-tool :view-id="viewID" />
-        <select-tool :view-id="viewID" />
-        <ruler-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :current-slice="currentSlice"
-        />
-        <rectangle-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :current-slice="currentSlice"
-        />
-        <polygon-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :current-slice="currentSlice"
-        />
-        <paint-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :slice="currentSlice"
-        />
-        <crosshairs-tool
-          :view-id="viewID"
-          :view-direction="viewDirection"
-          :slice="currentSlice"
-        />
-        <crop-tool :view-id="viewID" />
-      </div>
-      <view-overlay-grid class="overlay-no-events view-annotations">
-        <template v-slot:top-center>
-          <div class="annotation-cell">
-            <span>{{ topLabel }}</span>
-          </div>
-        </template>
-        <template v-slot:middle-left>
-          <div class="annotation-cell">
-            <span>{{ leftLabel }}</span>
-          </div>
-        </template>
-        <template v-slot:bottom-left>
-          <div class="annotation-cell">
-            <div>Slice: {{ currentSlice + 1 }}/{{ sliceRange[1] + 1 }}</div>
-            <div
-              v-if="
-                typeof windowWidth === 'number' &&
-                typeof windowLevel === 'number'
-              "
-            >
-              W/L: {{ windowWidth.toFixed(2) }} / {{ windowLevel.toFixed(2) }}
-            </div>
-          </div>
-        </template>
-        <template v-slot:top-right>
-          <div class="annotation-cell">
-            <dicom-quick-info-button
-              :image-id="curImageID"
-            ></dicom-quick-info-button>
-          </div>
-        </template>
-      </view-overlay-grid>
-      <transition name="loading">
-        <div v-if="isImageLoading" class="overlay-no-events loading">
-          <div>Loading the image</div>
-          <div>
-            <v-progress-circular indeterminate color="blue" />
-          </div>
-        </div>
-      </transition>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  PropType,
-  provide,
-  ref,
-  toRefs,
-  watch,
-  watchEffect,
-} from 'vue';
-import { vec3 } from 'gl-matrix';
-import { onKeyStroke } from '@vueuse/core';
-import { useResizeToFit } from '@/src/composables/useResizeToFit';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import vtkIJKSliceRepresentationProxy from '@/src/vtk/IJKSliceRepresentationProxy';
-import { manageVTKSubscription } from '@/src/composables/manageVTKSubscription';
-import SliceSlider from '@/src/components/SliceSlider.vue';
-import ViewOverlayGrid from '@/src/components/ViewOverlayGrid.vue';
-import SelectTool from '@/src/components/tools/SelectTool.vue';
-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 { 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 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';
-import { useCurrentImage } from '../composables/useCurrentImage';
-import { useCameraOrientation } from '../composables/useCameraOrientation';
-import WindowLevelTool from './tools/windowing/WindowLevelTool.vue';
-import SliceScrollTool from './tools/SliceScrollTool.vue';
-import PanTool from './tools/PanTool.vue';
-import ZoomTool from './tools/ZoomTool.vue';
-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 { useSegmentGroupStore } from '../store/segmentGroups';
-import { usePaintToolStore } from '../store/tools/paint';
-import { usePersistCameraConfig } from '../composables/usePersistCameraConfig';
-import CrosshairsTool from './tools/crosshairs/CrosshairsTool.vue';
-import { LPSAxisDir } from '../types/lps';
-import { ViewProxyType } from '../core/proxies';
-import { useViewProxy } from '../composables/useViewProxy';
-import useViewSliceStore from '../store/view-configs/slicing';
-import CropTool from './tools/crop/CropTool.vue';
-import { ToolContainer } from '../constants';
-import { useProxyManager } from '../composables/useProxyManager';
-import { useLayersStore } from '../store/datasets-layers';
-import { useViewCameraStore } from '../store/view-configs/camera';
-import useLayerColoringStore from '../store/view-configs/layers';
-import { useResetViewsEvents } from './tools/ResetViews.vue';
-
-const SLICE_OFFSET_KEYS: Record<string, number> = {
-  ArrowLeft: -1,
-  ArrowRight: 1,
-  ArrowUp: -1,
-  ArrowDown: 1,
-} as const;
-
-export default defineComponent({
-  name: 'VtkTwoView',
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    viewDirection: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-    viewUp: {
-      type: String as PropType<LPSAxisDir>,
-      required: true,
-    },
-  },
-  components: {
-    SliceSlider,
-    ViewOverlayGrid,
-    BoundingRectangle,
-    WindowLevelTool,
-    SliceScrollTool,
-    PanTool,
-    ZoomTool,
-    RulerTool,
-    RectangleTool,
-    PolygonTool,
-    PaintTool,
-    CrosshairsTool,
-    CropTool,
-    SelectTool,
-    DicomQuickInfoButton,
-  },
-  setup(props) {
-    const viewSliceStore = useViewSliceStore();
-    const viewCameraStore = useViewCameraStore();
-    const layerColoringStore = useLayerColoringStore();
-    const paintStore = usePaintToolStore();
-
-    const { id: viewID, viewDirection, viewUp } = toRefs(props);
-
-    const vtkContainerRef = ref<HTMLElement>();
-
-    const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
-
-    // --- computed vars --- //
-
-    const {
-      currentImageID: curImageID,
-      currentImageMetadata: curImageMetadata,
-      isImageLoading,
-      currentLayers,
-    } = useCurrentImage();
-
-    const {
-      config: sliceConfig,
-      slice: currentSlice,
-      range: sliceRange,
-    } = useSliceConfig(viewID, curImageID);
-    const {
-      config: wlConfig,
-      width: windowWidth,
-      level: windowLevel,
-    } = useWindowingConfig(viewID, curImageID);
-
-    // --- initializers --- //
-
-    useSliceConfigInitializer(viewID, curImageID, viewDirection);
-    useWindowingConfigInitializer(viewID, curImageID);
-
-    // --- view proxy setup --- //
-
-    const { viewProxy } = useViewProxy<vtkLPSView2DProxy>(
-      viewID,
-      ViewProxyType.Slice
-    );
-
-    onBeforeMount(() => {
-      // do this before mount, as the ManipulatorTools run onMounted
-      // before this component does.
-      viewProxy.value.getInteractorStyle2D().removeAllManipulators();
-    });
-
-    onMounted(() => {
-      viewProxy.value.setContainer(vtkContainerRef.value ?? null);
-      viewProxy.value.setOrientationAxesVisibility(false);
-    });
-
-    onBeforeUnmount(() => {
-      viewProxy.value.setContainer(null);
-    });
-
-    // --- Slicing setup --- //
-
-    watchEffect(() => {
-      const ijkIndex = curImageMetadata.value.lpsOrientation[viewAxis.value];
-      viewProxy.value.setSlicingMode('IJK'[ijkIndex]);
-    });
-
-    // --- arrows change slice --- //
-
-    const hover = ref(false);
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!curImageID.value || !hover.value) return;
-
-      const sliceOffset = SLICE_OFFSET_KEYS[event.key] ?? 0;
-      if (sliceOffset) {
-        viewSliceStore.updateConfig(viewID.value, curImageID.value, {
-          slice: currentSlice.value + sliceOffset,
-        });
-
-        event.stopPropagation();
-      }
-    };
-    onKeyStroke(Object.keys(SLICE_OFFSET_KEYS), onKeyDown);
-
-    // --- resizing --- //
-
-    useResizeObserver(vtkContainerRef, () => viewProxy.value.resize());
-
-    // Used by SVG tool widgets for resizeCallback
-    const toolContainer = ref<HTMLElement>();
-    provide(ToolContainer, toolContainer);
-
-    // --- scene setup --- //
-
-    const segmentGroupStore = useSegmentGroupStore();
-
-    const segmentGroupIDs = computed(() =>
-      curImageID.value ? segmentGroupStore.orderByParent[curImageID.value] : []
-    );
-
-    const layerIDs = computed(() => currentLayers.value.map(({ id }) => id));
-
-    const { representation: baseImageRep } =
-      useBaseSliceRepresentation<vtkIJKSliceRepresentationProxy>(
-        curImageID,
-        viewID
-      );
-
-    const { representations: labelmapReps } = useLabelMapRepresentations(
-      segmentGroupIDs,
-      viewID
-    );
-
-    const { representations: layerReps } =
-      useLayerRepresentations<vtkIJKSliceRepresentationProxy>(layerIDs, viewID);
-
-    // --- camera setup --- //
-
-    const { cameraDirVec, cameraUpVec } = useCameraOrientation(
-      viewDirection,
-      viewUp,
-      curImageMetadata
-    );
-    const { resizeToFit, ignoreResizeToFitTracking, resetResizeToFitTracking } =
-      useResizeToFit(viewProxy.value.getCamera(), false);
-
-    const resizeToFitScene = () =>
-      ignoreResizeToFitTracking(() => {
-        // resize to fit
-        const lookAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewDirection.value)
-          ];
-        const upAxis =
-          curImageMetadata.value.lpsOrientation[
-            getLPSAxisFromDir(viewUp.value)
-          ];
-        const dimsWithSpacing = curImageMetadata.value.dimensions.map(
-          (d, i) => d * curImageMetadata.value.spacing[i]
-        );
-        viewProxy.value.resizeToFit(lookAxis, upAxis, dimsWithSpacing);
-        resetResizeToFitTracking();
-      });
-
-    const resetCamera = () => {
-      const bounds = curImageMetadata.value.worldBounds;
-      const center = [
-        (bounds[0] + bounds[1]) / 2,
-        (bounds[2] + bounds[3]) / 2,
-        (bounds[4] + bounds[5]) / 2,
-      ] as vec3;
-
-      // do not track resizeToFit state
-      ignoreResizeToFitTracking(() => {
-        viewProxy.value.updateCamera(
-          cameraDirVec.value,
-          cameraUpVec.value,
-          center
-        );
-        viewProxy.value.resetCamera(bounds);
-      });
-
-      resizeToFitScene();
-
-      viewProxy.value.renderLater();
-    };
-
-    manageVTKSubscription(
-      viewProxy.value.onResize(() => {
-        if (resizeToFit.value) {
-          resizeToFitScene();
-        }
-      })
-    );
-
-    // if we re-enable resizeToFit, reset the camera
-    watch(resizeToFit, () => {
-      if (resizeToFit.value) {
-        resetCamera();
-      }
-    });
-
-    const { restoreCameraConfig } = usePersistCameraConfig(
-      viewID,
-      curImageID,
-      viewProxy,
-      'parallelScale',
-      'position',
-      'focalPoint',
-      'viewUp'
-    );
-
-    watch(
-      [curImageID, cameraDirVec, cameraUpVec],
-      () => {
-        const cameraConfig = viewCameraStore.getConfig(
-          viewID.value,
-          curImageID.value
-        );
-
-        // If we have a saved camera configuration restore it
-        if (cameraConfig) {
-          restoreCameraConfig(cameraConfig);
-
-          viewProxy.value.getRenderer().resetCameraClippingRange();
-          viewProxy.value.renderLater();
-
-          // Prevent resize
-          resizeToFit.value = false;
-        } else if (resizeToFit.value) {
-          resetCamera();
-        } else {
-          // this will trigger a resetCamera() call
-          resizeToFit.value = true;
-        }
-      },
-      { immediate: true, deep: true }
-    );
-
-    // --- viewport orientation/camera labels --- //
-
-    const { top: topLabel, left: leftLabel } = useOrientationLabels(viewProxy);
-
-    // --- apply windowing and slice configs --- //
-
-    watchEffect(() => {
-      if (sliceConfig.value == null || wlConfig.value == null) {
-        return;
-      }
-
-      const { slice } = sliceConfig.value;
-      const { width, level } = wlConfig.value;
-      const rep = baseImageRep.value;
-      if (rep) {
-        rep.setSlice(slice);
-        rep.setWindowWidth(width);
-        rep.setWindowLevel(level);
-      }
-      [...layerReps.value, ...labelmapReps.value].forEach((lRep) => {
-        lRep.setSlice(slice);
-      });
-
-      viewProxy.value.renderLater();
-    });
-
-    // --- apply labelmap opacity --- //
-
-    watchEffect(() => {
-      const { labelmapOpacity } = paintStore;
-      labelmapReps.value.forEach((lmRep) => {
-        lmRep.setOpacity(labelmapOpacity);
-      });
-    });
-
-    // --- layers setup --- //
-
-    const layersConfigs = computed(() =>
-      layerIDs.value.map((id) => layerColoringStore.getConfig(viewID.value, id))
-    );
-
-    const layersStore = useLayersStore();
-    watch(
-      [viewID, currentLayers],
-      ([view, layers]) => {
-        layers.forEach(({ id }) => {
-          const image = layersStore.layerImages[id];
-          layerColoringStore.updateColorBy(view, id, {
-            arrayName: image.getPointData().getScalars().getName() + id,
-            location: 'pointData',
-          });
-          const layerConfig = layerColoringStore.getConfig(view, id);
-          if (!layerConfig!.transferFunction.preset) {
-            layerColoringStore.resetColorPreset(view, id);
-          }
-        });
-      },
-      { immediate: true }
-    );
-
-    // --- layer coloring --- //
-
-    const proxyManager = useProxyManager()!;
-
-    const colorBys = computed(() =>
-      layersConfigs.value.map((config) => config?.colorBy)
-    );
-    const transferFunctions = computed(() =>
-      layersConfigs.value.map((config) => config?.transferFunction)
-    );
-    const opacityFunctions = computed(() =>
-      layersConfigs.value.map((config) => config?.opacityFunction)
-    );
-    const blendConfigs = computed(() =>
-      layersConfigs.value.map((config) => config?.blendConfig)
-    );
-
-    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;
-            }
-
-            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 --- //
-
-    const selectionStore = useToolSelectionStore();
-    const selectionPoints = computed(() => {
-      return selectionStore.selection
-        .map((sel) => {
-          const store = useAnnotationToolStore(sel.type);
-          return { store, tool: store.toolByID[sel.id] };
-        })
-        .filter(
-          ({ tool }) =>
-            tool.slice === currentSlice.value &&
-            doesToolFrameMatchViewAxis(viewAxis, tool, curImageMetadata)
-        )
-        .flatMap(({ store, tool }) => store.getPoints(tool.id));
-    });
-
-    // --- //
-
-    // Listen to ResetViews event.
-    const events = useResetViewsEvents();
-    events.onClick(() => resetCamera());
-
-    return {
-      vtkContainerRef,
-      toolContainer,
-      viewID,
-      viewProxy,
-      viewAxis,
-      active: true,
-      curImageID,
-      currentSlice,
-      sliceRange,
-      windowWidth,
-      windowLevel,
-      topLabel,
-      leftLabel,
-      isImageLoading,
-      enableResizeToFit() {
-        resizeToFit.value = true;
-      },
-      hover,
-      selectionPoints,
-    };
-  },
-});
-</script>
-
-<style scoped src="@/src/components/styles/vtk-view.css"></style>
-<style scoped src="@/src/components/styles/utils.css"></style>
diff --git a/src/components/tools/MouseManipulatorTool.vue b/src/components/tools/MouseManipulatorTool.vue
deleted file mode 100644
index 31d8f135d..000000000
--- a/src/components/tools/MouseManipulatorTool.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  PropType,
-  onBeforeUnmount,
-  toRefs,
-  watch,
-} from 'vue';
-import { useViewStore } from '@/src/store/views';
-import { vtkLPSViewProxy } from '@/src/types/vtk-types';
-
-export default defineComponent({
-  name: 'MouseManipulatorTool',
-  props: {
-    // only useful for determining the kind of manipulator
-    name: String,
-    viewId: {
-      type: String,
-      required: true,
-    },
-    manipulatorClass: {
-      type: Object,
-      required: true,
-    },
-    options: {
-      type: Array as PropType<Array<any>>,
-      default: () => [],
-    },
-  },
-  setup(props) {
-    const { viewId: viewID, options } = toRefs(props);
-
-    const viewStore = useViewStore();
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSViewProxy>(viewID.value)!
-    );
-
-    const intStyle = computed(() => {
-      return viewProxy.value.isA('vtkView2DProxy')
-        ? viewProxy.value.getInteractorStyle2D()
-        : viewProxy.value.getInteractorStyle3D();
-    });
-
-    const manipulators: any[] = [];
-
-    function updateStyle(
-      style: any,
-      newManipulators: any[],
-      oldManipulators: any[]
-    ) {
-      if (style !== null) {
-        oldManipulators.forEach((m) => style.removeMouseManipulator(m));
-        newManipulators.forEach((m) => style.addMouseManipulator(m));
-      }
-    }
-
-    watch(
-      options,
-      (newOptions) => {
-        // Maintain the size of manipulators array equal to options array.
-        while (manipulators.length > newOptions.length) {
-          const m = manipulators.pop();
-          intStyle.value.removeMouseManipulator(m);
-          m.delete();
-        }
-
-        const oldManipulators = Array.from(manipulators);
-
-        for (let i = manipulators.length; i < newOptions.length; ++i) {
-          manipulators.push(props.manipulatorClass.newInstance(newOptions[i]));
-        }
-
-        newOptions.forEach((opt, idx) => {
-          if ('button' in opt) {
-            manipulators[idx].setButton(opt.button);
-          }
-          manipulators[idx].setShift(!!opt.shift);
-          manipulators[idx].setControl(!!opt.control);
-        });
-
-        updateStyle(intStyle.value, manipulators, oldManipulators);
-      },
-      { immediate: true }
-    );
-
-    watch(
-      intStyle,
-      (curIntStyle, oldIntStyle) => {
-        manipulators.forEach((m) => {
-          if (oldIntStyle) {
-            oldIntStyle.removeMouseManipulator(m);
-          }
-          if (curIntStyle) {
-            curIntStyle.addMouseManipulator(m);
-          }
-        });
-      },
-      { immediate: true }
-    );
-
-    onBeforeUnmount(() => {
-      if (!viewProxy.value.isDeleted()) {
-        manipulators.forEach((m) => intStyle.value.removeMouseManipulator(m));
-      }
-    });
-
-    return () => null;
-  },
-});
-</script>
diff --git a/src/components/tools/PanTool.vue b/src/components/tools/PanTool.vue
deleted file mode 100644
index dd31ff2a8..000000000
--- a/src/components/tools/PanTool.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-import { h } from 'vue';
-import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
-import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
-import MouseManipulatorTool from './MouseManipulatorTool.vue';
-
-interface Props {
-  viewId: string;
-  // workaround for vue not detecting kebab-transformed props
-  'view-id'?: string;
-}
-
-export default function PanTool(props: Props) {
-  const toolStore = useToolStore();
-  const toolOptions = [];
-  toolOptions.push({ button: 2 });
-  toolOptions.push({ button: 1, shift: true });
-  if (toolStore.currentTool === Tools.Pan) {
-    // Additionally enable left-button-only action if Pan tool is active
-    toolOptions.push({ button: 1 });
-  }
-
-  return h(MouseManipulatorTool, {
-    ...props,
-    name: 'PanTool',
-    manipulatorClass: vtkMouseCameraTrackballPanManipulator,
-    options: toolOptions,
-  });
-}
-</script>
diff --git a/src/components/tools/SliceScrollTool.vue b/src/components/tools/SliceScrollTool.vue
deleted file mode 100644
index 0feaf6c51..000000000
--- a/src/components/tools/SliceScrollTool.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  ref,
-  toRefs,
-  watch,
-} from 'vue';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import { useViewStore } from '@/src/store/views';
-import useViewSliceStore, {
-  defaultSliceConfig,
-} from '@/src/store/view-configs/slicing';
-
-export default defineComponent({
-  name: 'SliceScrollTool',
-  props: {
-    viewId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { viewId: viewID } = toRefs(props);
-    const viewSliceStore = useViewSliceStore();
-    const viewStore = useViewStore();
-    const { currentImageID } = useCurrentImage();
-
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
-
-    const sliceConfigDefault = defaultSliceConfig();
-    const sliceConfig = computed(() =>
-      viewSliceStore.getConfig(viewID.value, currentImageID.value)
-    );
-    const sliceRange = computed(() => ({
-      min:
-        sliceConfig.value != null
-          ? sliceConfig.value.min
-          : sliceConfigDefault.min,
-      max:
-        sliceConfig.value != null
-          ? sliceConfig.value.max
-          : sliceConfigDefault.max,
-      step: 1,
-      default:
-        sliceConfig.value != null
-          ? sliceConfig.value.slice
-          : sliceConfigDefault.slice,
-    }));
-
-    const scrollVal = ref(0);
-
-    const rangeManipulator = vtkMouseRangeManipulator.newInstance({
-      button: -1, // don't bind to any buttons
-      scrollEnabled: true,
-    });
-
-    watch(
-      viewProxy,
-      (curViewProxy, oldViewProxy) => {
-        if (oldViewProxy) {
-          const istyle = oldViewProxy.getInteractorStyle2D();
-          istyle.removeMouseManipulator(rangeManipulator);
-        }
-
-        if (curViewProxy) {
-          // assumed to be vtkInteractorStyleManipulator
-          const istyle = viewProxy.value.getInteractorStyle2D();
-          istyle.addMouseManipulator(rangeManipulator);
-        }
-      },
-      { immediate: true }
-    );
-
-    onBeforeUnmount(() => {
-      // for some reason, VtkTwoView.onBeforeUnmount is being
-      // invoked before this onBeforeUnmount during HMR.
-      if (!viewProxy.value.isDeleted()) {
-        const istyle = viewProxy.value.getInteractorStyle2D();
-        istyle.removeMouseManipulator(rangeManipulator);
-      }
-    });
-
-    function updateManipulator() {
-      rangeManipulator.removeAllListeners();
-      const range = sliceRange.value;
-
-      rangeManipulator.setScrollListener(
-        range.min,
-        range.max,
-        range.step,
-        () => scrollVal.value,
-        (slice) => {
-          if (currentImageID.value != null) {
-            viewSliceStore.updateConfig(viewID.value, currentImageID.value, {
-              slice,
-            });
-          }
-        }
-      );
-    }
-
-    watch(
-      sliceRange,
-      (range) => {
-        scrollVal.value = range.default;
-        updateManipulator();
-      },
-      { immediate: true }
-    );
-
-    return () => null;
-  },
-});
-</script>
diff --git a/src/components/tools/ZoomTool.vue b/src/components/tools/ZoomTool.vue
deleted file mode 100644
index c3abe4697..000000000
--- a/src/components/tools/ZoomTool.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-import { h } from 'vue';
-import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
-import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
-import MouseManipulatorTool from './MouseManipulatorTool.vue';
-
-interface Props {
-  viewId: string;
-  // workaround for vue not detecting kebab-transformed props
-  'view-id'?: string;
-}
-
-export default function ZoomTool(props: Props) {
-  const toolStore = useToolStore();
-  const toolOptions = [];
-  toolOptions.push({ button: 3, flipDirection: true });
-  toolOptions.push({ button: 1, control: true, flipDirection: true });
-  if (toolStore.currentTool === Tools.Zoom) {
-    // Additionally enable left-button-only action if Zoom tool is active
-    toolOptions.push({ button: 1, flipDirection: true });
-  }
-
-  return h(MouseManipulatorTool, {
-    ...props,
-    name: 'ZoomTool',
-    manipulatorClass: vtkMouseCameraTrackballZoomToMouseManipulator,
-    options: toolOptions,
-  });
-}
-</script>
diff --git a/src/components/tools/windowing/WindowLevelTool.vue b/src/components/tools/windowing/WindowLevelTool.vue
deleted file mode 100644
index 8326e068e..000000000
--- a/src/components/tools/windowing/WindowLevelTool.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  toRefs,
-  watch,
-  h,
-} from 'vue';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import { useToolStore } from '@/src/store/tools';
-import { Tools } from '@/src/store/tools/types';
-import useWindowingStore, {
-  defaultWindowLevelConfig,
-} from '@/src/store/view-configs/windowing';
-import { useCurrentImage } from '@/src/composables/useCurrentImage';
-import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
-import { useViewStore } from '@/src/store/views';
-
-function computeStep(min: number, max: number) {
-  return Math.min(max - min, 1) / 256;
-}
-
-const WindowLevelToolComponent = defineComponent({
-  name: 'WindowLevelTool',
-  props: {
-    viewId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { viewId: viewID } = toRefs(props);
-    const windowingStore = useWindowingStore();
-    const viewStore = useViewStore();
-    const { currentImageID } = useCurrentImage();
-
-    const viewProxy = computed(
-      () => viewStore.getViewProxy<vtkLPSView2DProxy>(viewID.value)!
-    );
-
-    const windowConfigDefaults = defaultWindowLevelConfig();
-    const wlConfig = computed(() =>
-      windowingStore.getConfig(viewID.value, currentImageID.value)
-    );
-
-    const wwRange = computed(() => ({
-      min: 1e-12, // ensure we don't hit zero and jump to white
-      max:
-        wlConfig.value != null
-          ? wlConfig.value.max - wlConfig.value.min
-          : windowConfigDefaults.max,
-      step:
-        wlConfig.value != null
-          ? computeStep(wlConfig.value.min, wlConfig.value.max)
-          : computeStep(windowConfigDefaults.min, windowConfigDefaults.max),
-    }));
-    const wlRange = computed(() => ({
-      min:
-        wlConfig.value != null ? wlConfig.value.min : windowConfigDefaults.min,
-      max:
-        wlConfig.value != null ? wlConfig.value.max : windowConfigDefaults.max,
-      step:
-        wlConfig.value != null
-          ? computeStep(wlConfig.value.min, wlConfig.value.max)
-          : computeStep(windowConfigDefaults.min, windowConfigDefaults.max),
-    }));
-
-    const vertVal = computed(() =>
-      wlConfig.value != null ? wlConfig.value.width : windowConfigDefaults.width
-    );
-
-    const horizVal = computed(() =>
-      wlConfig.value != null ? wlConfig.value.level : windowConfigDefaults.level
-    );
-
-    const rangeManipulator = vtkMouseRangeManipulator.newInstance({
-      button: 1,
-      scrollEnabled: false,
-    });
-
-    watch(
-      viewProxy,
-      (curViewProxy, oldViewProxy) => {
-        if (oldViewProxy) {
-          const istyle = oldViewProxy.getInteractorStyle2D();
-          istyle.removeMouseManipulator(rangeManipulator);
-        }
-
-        if (curViewProxy) {
-          // assumed to be vtkInteractorStyleManipulator
-          const istyle = viewProxy.value.getInteractorStyle2D();
-          istyle.addMouseManipulator(rangeManipulator);
-        }
-      },
-      { immediate: true }
-    );
-
-    onBeforeUnmount(() => {
-      // for some reason, VtkTwoView.onBeforeUnmount is being
-      // invoked before this onBeforeUnmount during HMR.
-      if (!viewProxy.value.isDeleted()) {
-        const istyle = viewProxy.value.getInteractorStyle2D();
-        istyle.removeMouseManipulator(rangeManipulator);
-      }
-    });
-
-    function updateManipulator() {
-      rangeManipulator.removeAllListeners();
-      const vertRange = wwRange.value;
-      const horizRange = wlRange.value;
-
-      rangeManipulator.setVerticalListener(
-        vertRange.min,
-        vertRange.max,
-        vertRange.step,
-        () => vertVal.value,
-        (v) => {
-          if (currentImageID.value != null) {
-            windowingStore.updateConfig(viewID.value, currentImageID.value, {
-              width: v,
-            });
-          }
-        }
-      );
-
-      rangeManipulator.setHorizontalListener(
-        horizRange.min,
-        horizRange.max,
-        horizRange.step,
-        () => horizVal.value,
-        (v) => {
-          if (currentImageID.value != null) {
-            windowingStore.updateConfig(viewID.value, currentImageID.value, {
-              level: v,
-            });
-          }
-        }
-      );
-    }
-
-    watch(
-      // Computed wwRange and wlRange are new objects with every mouse movement.
-      // So only updateManipulator() if min/max/step change by comparing with deep equals.
-      () => JSON.stringify({ w: wwRange.value, l: wlRange.value }),
-      updateManipulator,
-      { immediate: true }
-    );
-
-    return () => null;
-  },
-});
-
-interface Props {
-  viewId: string;
-  // workaround for vue not detecting kebab-transformed props
-  'view-id'?: string;
-}
-
-export default function WindowLevelTool(props: Props) {
-  const toolStore = useToolStore();
-  const active = computed(() => toolStore.currentTool === Tools.WindowLevel);
-  return active.value ? h(WindowLevelToolComponent, props) : [];
-}
-</script>
diff --git a/src/composables/onProxyManagerEvent.ts b/src/composables/onProxyManagerEvent.ts
deleted file mode 100644
index dd0d743b8..000000000
--- a/src/composables/onProxyManagerEvent.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
-import { VtkProxy } from '@kitware/vtk.js/macros';
-import { onBeforeUnmount } from 'vue';
-import { requireProxyManager } from './useProxyManager';
-
-export type ProxyManagerEvent =
-  | 'ProxyCreated'
-  | 'ProxyModified'
-  | 'ProxyDeleted'
-  | 'ProxyRegistrationChange';
-
-export function onProxyManagerEvent(
-  event: ProxyManagerEvent,
-  cb: (
-    proxyID: string,
-    obj: VtkProxy | null,
-    action: 'register' | 'unregister' | 'modified'
-  ) => void
-) {
-  const subs: vtkSubscription[] = [];
-  const proxyManager = requireProxyManager();
-
-  const proxySubs: Record<string, vtkSubscription> = Object.create(null);
-
-  subs.push(
-    proxyManager.onProxyRegistrationChange((info) => {
-      const { action, proxyId, proxy } = info;
-      if (action === 'register') {
-        if (event === 'ProxyCreated') {
-          cb(proxyId, proxy, 'register');
-        }
-        if (event === 'ProxyModified') {
-          proxySubs[proxyId] = proxy.onModified(() =>
-            cb(proxyId, proxy, 'modified')
-          );
-        }
-      } else if (action === 'unregister') {
-        if (proxyId in proxySubs) {
-          proxySubs[proxyId].unsubscribe();
-          delete proxySubs[proxyId];
-        }
-        if (event === 'ProxyDeleted') {
-          cb(proxyId, null, 'unregister');
-        }
-      }
-      if (event === 'ProxyRegistrationChange') {
-        cb(proxyId, proxy, action);
-      }
-    })
-  );
-
-  onBeforeUnmount(() => {
-    while (subs.length) {
-      subs.pop()!.unsubscribe();
-    }
-    Object.entries(proxySubs).forEach(([id, sub]) => {
-      sub.unsubscribe();
-      delete proxySubs[id];
-    });
-  });
-}
diff --git a/src/composables/useBaseSliceRepresentation.ts b/src/composables/useBaseSliceRepresentation.ts
deleted file mode 100644
index b61705dac..000000000
--- a/src/composables/useBaseSliceRepresentation.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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/useCvrEffect.ts b/src/composables/useCvrEffect.ts
deleted file mode 100644
index 2da1aded3..000000000
--- a/src/composables/useCvrEffect.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-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/composables/useLabelMapRepresentations.ts b/src/composables/useLabelMapRepresentations.ts
deleted file mode 100644
index 32e84433c..000000000
--- a/src/composables/useLabelMapRepresentations.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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
deleted file mode 100644
index be1226e82..000000000
--- a/src/composables/useLayerRepresentations.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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/useProxyManager.ts b/src/composables/useProxyManager.ts
deleted file mode 100644
index 640ca4a02..000000000
--- a/src/composables/useProxyManager.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { inject } from 'vue';
-import ProxyManagerWrapper from '@/src/core/proxies';
-
-export const PROXY_MANAGER_WRAPPER_INJECT_KEY = Symbol('ProxyManagerWrapper');
-
-/**
- * Injects a provided ProxyManagerWrapper instance if available.
- */
-export function useProxyManagerWrapper() {
-  return inject<ProxyManagerWrapper>(PROXY_MANAGER_WRAPPER_INJECT_KEY);
-}
-
-/**
- * Injects a provided ProxyManagerWrapper instance.
- *
- * Throws an error if none is available.
- */
-export function requireProxyManagerWrapper() {
-  const pxm = useProxyManagerWrapper();
-  if (!pxm) throw new Error('No ProxyManagerWrapper provided');
-  return pxm;
-}
-
-/**
- * Obtains the underlying vtkProxyManager.
- */
-export function useProxyManager() {
-  return useProxyManagerWrapper()?.proxyManager;
-}
-
-/**
- * Obtains the underlying vtkProxyManager.
- *
- * Throws an error if none is available.
- */
-export function requireProxyManager() {
-  const pxm = useProxyManager();
-  if (!pxm) throw new Error('No ProxyManager provided');
-  return pxm;
-}
diff --git a/src/composables/useProxyRepresentations.ts b/src/composables/useProxyRepresentations.ts
deleted file mode 100644
index 95ec64364..000000000
--- a/src/composables/useProxyRepresentations.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-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, watchPostEffect } 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);
-  });
-
-  // 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);
-    });
-    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/useViewProxy.ts b/src/composables/useViewProxy.ts
deleted file mode 100644
index 0b25af4f3..000000000
--- a/src/composables/useViewProxy.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import { computed, onUnmounted, ref, unref, watch, watchEffect } from 'vue';
-import { MaybeRef, useElementSize } from '@vueuse/core';
-import { onVTKEvent } from '@/src/composables/onVTKEvent';
-import { Maybe } from '@/src/types';
-import { ViewProxyType } from '../core/proxies';
-import { useViewStore } from '../store/views';
-
-export function useViewProxy<T extends vtkViewProxy = vtkViewProxy>(
-  id: MaybeRef<string>,
-  type: MaybeRef<ViewProxyType>
-) {
-  const viewStore = useViewStore();
-
-  const viewProxy = computed<T>(() =>
-    viewStore.createOrGetViewProxy(unref(id), unref(type))
-  );
-
-  return {
-    viewProxy,
-  };
-}
-
-function isViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<Maybe<T>>
-) {
-  const mounted = ref(false);
-
-  const container = ref<Maybe<HTMLElement>>(unref(viewProxy)?.getContainer());
-  onVTKEvent<vtkViewProxy, 'onModified'>(viewProxy, 'onModified', () => {
-    container.value = unref(viewProxy)?.getContainer();
-  });
-
-  const { width, height } = useElementSize(container);
-
-  const updateMounted = () => {
-    // view is considered mounted when the container has a non-zero size
-    mounted.value = !!(width.value && height.value);
-  };
-
-  watchEffect(() => updateMounted());
-
-  return mounted;
-}
-
-export function onViewProxyMounted<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<Maybe<T>>,
-  callback: () => void
-) {
-  const mounted = isViewProxyMounted(viewProxy);
-
-  watch(
-    mounted,
-    (m) => {
-      if (m) callback();
-    },
-    { immediate: true }
-  );
-}
-
-export function onViewProxyUnmounted<T extends vtkViewProxy = vtkViewProxy>(
-  viewProxy: MaybeRef<Maybe<T>>,
-  callback: () => void
-) {
-  const mounted = isViewProxyMounted(viewProxy);
-  let invoked = false;
-  const invokeCallback = () => {
-    if (invoked) return;
-    callback();
-    invoked = true;
-  };
-
-  onUnmounted(() => invokeCallback());
-
-  watch(
-    mounted,
-    (m, prev) => {
-      if (prev && !m) invokeCallback();
-    },
-    { immediate: true }
-  );
-}
diff --git a/src/composables/useWidgetManager.ts b/src/composables/useWidgetManager.ts
deleted file mode 100644
index f27bb17ab..000000000
--- a/src/composables/useWidgetManager.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import { CaptureOn } from '@kitware/vtk.js/Widgets/Core/WidgetManager/Constants';
-import { computed, onUnmounted, Ref, watch } from 'vue';
-import { onViewProxyMounted, onViewProxyUnmounted } from './useViewProxy';
-
-export function useWidgetManager(viewProxy: Ref<vtkViewProxy>) {
-  const widgetManager = computed(() => {
-    const wm = vtkWidgetManager.newInstance({
-      pickingEnabled: false,
-      useSvgLayer: false,
-      captureOn: CaptureOn.MOUSE_MOVE,
-    });
-    return wm;
-  });
-
-  onViewProxyMounted(viewProxy, () => {
-    widgetManager.value.setRenderer(viewProxy.value.getRenderer());
-    widgetManager.value.enablePicking();
-  });
-
-  onViewProxyUnmounted(viewProxy, () => {
-    widgetManager.value.disablePicking();
-  });
-
-  watch(widgetManager, (curWM, oldWM) => {
-    if (curWM) {
-      curWM.setRenderer(viewProxy.value.getRenderer());
-      curWM.enablePicking();
-    }
-    if (oldWM) {
-      oldWM.delete();
-    }
-  });
-
-  onUnmounted(() => {
-    widgetManager.value.delete();
-  });
-
-  return { widgetManager };
-}
diff --git a/src/core/proxies.ts b/src/core/proxies.ts
deleted file mode 100644
index 60e13cb84..000000000
--- a/src/core/proxies.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { vtkObject } from '@kitware/vtk.js/interfaces';
-import { VtkProxy } from '@kitware/vtk.js/macros';
-import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
-import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';
-import vtkSourceProxy from '@kitware/vtk.js/Proxy/Core/SourceProxy';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-
-// mapped in proxy.js
-export enum ViewProxyType {
-  Volume = 'View3D',
-  Slice = 'View2D',
-  Oblique = 'Oblique',
-  Oblique3D = 'Oblique3D',
-}
-
-/**
- * Wrapper around the vtkProxyManager, since we don't need some of
- * its complexities.
- */
-export default class ProxyManagerWrapper {
-  private viewProxies: Map<string, vtkViewProxy>;
-  private dataProxies: Map<string, vtkSourceProxy<vtkObject>>;
-  public readonly proxyManager: vtkProxyManager;
-
-  constructor(proxyManager: vtkProxyManager) {
-    this.viewProxies = new Map();
-    this.dataProxies = new Map();
-    this.proxyManager = proxyManager;
-  }
-
-  clearAll() {
-    const deleteProxy = (proxy: VtkProxy) =>
-      this.proxyManager.deleteProxy(proxy);
-
-    this.viewProxies.forEach(deleteProxy);
-    this.dataProxies.forEach(deleteProxy);
-
-    this.viewProxies.clear();
-    this.dataProxies.clear();
-  }
-
-  createView(id: string, type: ViewProxyType) {
-    if (this.viewProxies.has(id)) {
-      throw new Error(`Cannot create a view with the same ID "${id}"`);
-    }
-
-    const proxy = this.proxyManager.createProxy<vtkViewProxy>('Views', type, {
-      name: type,
-    });
-
-    this.viewProxies.set(id, proxy);
-    return proxy;
-  }
-
-  getView<T extends vtkViewProxy>(id: string) {
-    return <T | null>this.viewProxies.get(id);
-  }
-
-  deleteView(id: string) {
-    const proxy = this.viewProxies.get(id);
-    if (proxy) {
-      this.proxyManager.deleteProxy(proxy);
-      this.viewProxies.delete(id);
-    }
-  }
-
-  addData<T extends vtkObject>(id: string, data: T) {
-    if (this.dataProxies.has(id)) {
-      return;
-    }
-    const proxy = this.proxyManager.createProxy<vtkSourceProxy<T>>(
-      'Sources',
-      'TrivialProducer'
-    );
-    proxy.setInputData(data);
-    this.dataProxies.set(id, proxy);
-  }
-
-  getData<T extends vtkObject>(id: string) {
-    return <vtkSourceProxy<T> | null>(this.dataProxies.get(id) ?? null);
-  }
-
-  updateData<T extends vtkObject>(id: string, data: T) {
-    const proxy = this.dataProxies.get(id);
-    if (!proxy) {
-      return;
-    }
-    proxy.setInputData(data);
-  }
-
-  deleteData(id: string) {
-    const proxy = this.dataProxies.get(id);
-    this.dataProxies.delete(id);
-    if (proxy) this.proxyManager.deleteProxy(proxy);
-    else throw new Error('Did not find proxy for ID');
-  }
-
-  getDataRepresentationForView<T extends vtkAbstractRepresentationProxy>(
-    dataID: string,
-    viewID: string
-  ): T | null {
-    const dataProxy = this.dataProxies.get(dataID);
-    const viewProxy = this.viewProxies.get(viewID);
-    if (!dataProxy || !viewProxy) {
-      return null;
-    }
-
-    return this.proxyManager.getRepresentation(dataProxy, viewProxy);
-  }
-}
diff --git a/src/vtk/IJKSliceRepresentationProxy/index.d.ts b/src/vtk/IJKSliceRepresentationProxy/index.d.ts
deleted file mode 100644
index ffb83670c..000000000
--- a/src/vtk/IJKSliceRepresentationProxy/index.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import vtkSliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/SliceRepresentationProxy';
-
-export interface vtkIJKSliceRepresentationProxy
-  extends vtkSliceRepresentationProxy {
-  setOpacity(opacity: number): boolean;
-  getOpacity(): number;
-}
-
-export function extend(publicAPI: any, model: any): void;
-
-export declare const vtkIJKSliceRepresentationProxy: {
-  extend: typeof extend;
-};
-
-export default vtkIJKSliceRepresentationProxy;
diff --git a/src/vtk/IJKSliceRepresentationProxy/index.js b/src/vtk/IJKSliceRepresentationProxy/index.js
deleted file mode 100644
index abe598e52..000000000
--- a/src/vtk/IJKSliceRepresentationProxy/index.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import macro from '@kitware/vtk.js/macro';
-
-import vtkSliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/SliceRepresentationProxy';
-
-const SLICE_MODE_MAP = {
-  X: 'I',
-  Y: 'J',
-  Z: 'K',
-  I: 'I',
-  J: 'J',
-  K: 'K',
-};
-
-function vtkIJKSliceRepresentationProxy(publicAPI, model) {
-  model.classHierarchy.push('vtkIJKSliceRepresentationProxy');
-
-  const superClass = { ...publicAPI };
-
-  // pretend XYZ slicing is actually just IJK.
-  publicAPI.setSlicingMode = (modeString) => {
-    return superClass.setSlicingMode(SLICE_MODE_MAP[modeString]);
-  };
-}
-
-// ----------------------------------------------------------------------------
-// Object factory
-// ----------------------------------------------------------------------------
-
-const DEFAULT_VALUES = {};
-
-// ----------------------------------------------------------------------------
-
-export function extend(publicAPI, model, initialValues = {}) {
-  Object.assign(model, DEFAULT_VALUES, initialValues);
-
-  // Object methods
-  vtkSliceRepresentationProxy.extend(publicAPI, model);
-
-  macro.proxyPropertyMapping(publicAPI, model, {
-    opacity: { modelKey: 'property', property: 'opacity' },
-  });
-
-  // Object specific methods
-  vtkIJKSliceRepresentationProxy(publicAPI, model);
-}
-
-// ----------------------------------------------------------------------------
-
-export const newInstance = macro.newInstance(
-  extend,
-  'vtkIJKSliceRepresentationProxy'
-);
-
-// ----------------------------------------------------------------------------
-
-export default { newInstance, extend };
diff --git a/src/vtk/LPSView2DProxy/index.d.ts b/src/vtk/LPSView2DProxy/index.d.ts
deleted file mode 100644
index 283df555d..000000000
--- a/src/vtk/LPSView2DProxy/index.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-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';
-
-// 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);
-}
-
-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
deleted file mode 100644
index a119806d0..000000000
--- a/src/vtk/LPSView2DProxy/index.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import macro from '@kitware/vtk.js/macro';
-import vtkView2DProxy from '@kitware/vtk.js/Proxy/Core/View2DProxy';
-import { applyLPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
-
-function vtkLPSView2DProxy(publicAPI, model) {
-  model.classHierarchy.push('vtkLPSView2DProxy');
-  const superClass = { ...publicAPI };
-
-  // override; we will set the manipulator ourselves
-  publicAPI.bindRepresentationToManipulator = () => {};
-
-  // override reset camera to /just/ reset the camera
-  publicAPI.resetCamera = (boundsToUse = null) => {
-    model.renderer.resetCamera(boundsToUse);
-  };
-
-  // override addRepresentation
-  publicAPI.addRepresentation = (rep) => {
-    if (!rep) {
-      return;
-    }
-    if (model.representations.indexOf(rep) === -1) {
-      model.representations.push(rep);
-      model.renderer.addViewProp(rep);
-    }
-
-    if (rep.setSlicingMode && model.slicingMode) {
-      rep.setSlicingMode(model.slicingMode);
-    }
-  };
-
-  publicAPI.setSlicingMode = (mode) => {
-    model.axis = 'IJK'.indexOf(mode);
-    if (superClass.setSlicingMode(mode) && mode) {
-      let count = model.representations.length;
-      while (count--) {
-        const rep = model.representations[count];
-        if (rep.setSlicingMode) {
-          rep.setSlicingMode(mode);
-        }
-      }
-    }
-  };
-
-  publicAPI.resizeToFit = (lookAxis, viewUpAxis, dims) => {
-    const [w, h] = model.renderWindow.getViews()[0].getSize();
-    let bw;
-    let bh;
-    if (lookAxis === 0 && viewUpAxis === 1) {
-      [, bh, bw] = dims;
-    } else if (lookAxis === 0 && viewUpAxis === 2) {
-      [, bw, bh] = dims;
-    } else if (lookAxis === 1 && viewUpAxis === 0) {
-      [bh, , bw] = dims;
-    } else if (lookAxis === 1 && viewUpAxis === 2) {
-      [bw, , bh] = dims;
-    } else if (lookAxis === 2 && viewUpAxis === 0) {
-      [bh, bw] = dims;
-    } else if (lookAxis === 2 && viewUpAxis === 1) {
-      [bw, bh] = dims;
-    }
-
-    const viewAspect = w / h;
-    const boundsAspect = bw / bh;
-    let scale = 0;
-    if (viewAspect >= boundsAspect) {
-      scale = bh / 2;
-    } else {
-      scale = bw / 2 / viewAspect;
-    }
-
-    model.camera.setParallelScale(scale);
-  };
-}
-
-const DEFAULT_VALUES = {
-  slicingMode: null, // XYZIJK. Null means fallback to model.axis.
-};
-
-export function extend(publicAPI, model, initialValues = {}) {
-  Object.assign(model, initialValues, DEFAULT_VALUES);
-
-  // slicing mode overrides axis
-  macro.setGet(publicAPI, model, ['slicingMode']);
-
-  vtkView2DProxy.extend(publicAPI, model, initialValues);
-  applyLPSViewProxyBase(publicAPI, model);
-
-  vtkLPSView2DProxy(publicAPI, model);
-}
-
-export const newInstance = macro.newInstance(extend, 'vtkLPSView2DProxy');
-
-export default { newInstance, extend };
diff --git a/src/vtk/LPSView3DProxy/index.d.ts b/src/vtk/LPSView3DProxy/index.d.ts
deleted file mode 100644
index 3cf841a61..000000000
--- a/src/vtk/LPSView3DProxy/index.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { vec3 } from 'gl-matrix';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import { LPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
-
-export interface vtkLPSView3DProxy extends LPSViewProxyBase, vtkViewProxy {}
-
-export function extend(publicAPI: object, model: object): void;
-
-export declare const vtkLPSView3DProxy: {
-  extend: typeof extend;
-};
-
-export default vtkLPSView3DProxy;
diff --git a/src/vtk/LPSView3DProxy/index.js b/src/vtk/LPSView3DProxy/index.js
deleted file mode 100644
index 666566cad..000000000
--- a/src/vtk/LPSView3DProxy/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import macro from '@kitware/vtk.js/macro';
-import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
-import { applyLPSViewProxyBase } from '@/src/vtk/LPSViewProxyBase';
-
-function vtkLPSView3DProxy(publicAPI, model) {
-  model.classHierarchy.push('vtkLPSView3DProxy');
-}
-
-export function extend(publicAPI, model, initialValues = {}) {
-  Object.assign(model, initialValues);
-
-  vtkViewProxy.extend(publicAPI, model, initialValues);
-  applyLPSViewProxyBase(publicAPI, model);
-
-  vtkLPSView3DProxy(publicAPI, model);
-}
-
-export const newInstance = macro.newInstance(extend, 'vtkLPSView3DProxy');
-
-export default { newInstance, extend };
diff --git a/src/vtk/LPSViewProxyBase/index.d.ts b/src/vtk/LPSViewProxyBase/index.d.ts
deleted file mode 100644
index 61ddbde25..000000000
--- a/src/vtk/LPSViewProxyBase/index.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-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
deleted file mode 100644
index ca30e70db..000000000
--- a/src/vtk/LPSViewProxyBase/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-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 and to not render during animation
-  publicAPI.render = () => {
-    if (model.interactor.isAnimating()) return;
-    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();
-  };
-}
diff --git a/src/vtk/LabelMapSliceRepProxy/index.d.ts b/src/vtk/LabelMapSliceRepProxy/index.d.ts
deleted file mode 100644
index 9e1f163ca..000000000
--- a/src/vtk/LabelMapSliceRepProxy/index.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import vtkIJKSliceRepresentationProxy from '../IJKSliceRepresentationProxy';
-
-export interface vtkLabelMapSliceRepProxy
-  extends vtkIJKSliceRepresentationProxy {}
-
-export function extend(publicAPI: object, model: object): void;
-
-export declare const vtkLabelMapSliceRepProxy: {
-  extend: typeof extend;
-};
-
-export default vtkLabelMapSliceRepProxy;
diff --git a/src/vtk/LabelMapSliceRepProxy/index.js b/src/vtk/LabelMapSliceRepProxy/index.js
deleted file mode 100644
index 59a08c87f..000000000
--- a/src/vtk/LabelMapSliceRepProxy/index.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import macro from '@kitware/vtk.js/macro';
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
-import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction';
-import ImagePropertyConstants from '@kitware/vtk.js/Rendering/Core/ImageProperty/Constants';
-
-import vtkIJKSliceRepresentationProxy from '../IJKSliceRepresentationProxy';
-
-const { InterpolationType } = ImagePropertyConstants;
-
-// ----------------------------------------------------------------------------
-// vtkLabelMapSliceRepProxy methods
-// ----------------------------------------------------------------------------
-
-function vtkLabelMapSliceRepProxy(publicAPI, model) {
-  // Set our className
-  model.classHierarchy.push('vtkLabelMapSliceRepProxy');
-
-  let labelMapSub = null;
-
-  // needed for vtk.js >= 23.0.0
-  model.property.setUseLookupTableScalarRange(true);
-  model.property.setInterpolationType(InterpolationType.NEAREST);
-  model.mapper.setRelativeCoincidentTopologyPolygonOffsetParameters(-2, -2);
-
-  let cachedSegments = null;
-
-  function updateTransferFunctions(labelmap) {
-    const segments = labelmap.getSegments();
-    if (segments === cachedSegments) {
-      return;
-    }
-    // Cache the colormap using ref equality. This will
-    // avoid updating the colormap unnecessarily.
-    cachedSegments = segments;
-
-    const cfun = vtkColorTransferFunction.newInstance();
-    const ofun = vtkPiecewiseFunction.newInstance();
-
-    let maxValue = 0;
-
-    segments.forEach((segment) => {
-      const r = segment.color[0] || 0;
-      const g = segment.color[1] || 0;
-      const b = segment.color[2] || 0;
-      const a = segment.color[3] || 0;
-      cfun.addRGBPoint(segment.value, r / 255, g / 255, b / 255);
-      ofun.addPoint(segment.value, a / 255);
-
-      if (segment.value > maxValue) {
-        maxValue = segment.value;
-      }
-    });
-
-    // add min/max values of the colormap range
-    cfun.addRGBPoint(0, 0, 0, 0);
-    ofun.addPoint(0, 0);
-    cfun.addRGBPoint(maxValue + 1, 0, 0, 0);
-    ofun.addPoint(maxValue + 1, 0);
-
-    model.property.setRGBTransferFunction(cfun);
-    model.property.setScalarOpacity(ofun);
-  }
-
-  function setInputData(labelmap) {
-    if (labelMapSub) {
-      labelMapSub.unsubscribe();
-      labelMapSub = null;
-    }
-
-    if (labelmap) {
-      labelMapSub = labelmap.onModified(() =>
-        updateTransferFunctions(labelmap)
-      );
-      updateTransferFunctions(labelmap);
-    }
-  }
-
-  // override because we manage our own color/opacity functions
-  publicAPI.setColorBy = () => {};
-
-  publicAPI.delete = macro.chain(publicAPI.delete, () => {
-    if (labelMapSub) {
-      labelMapSub.unsubscribe();
-      labelMapSub = null;
-    }
-  });
-
-  // Keep things updated
-  model.sourceDependencies.push({ setInputData });
-}
-
-// ----------------------------------------------------------------------------
-// Object factory
-// ----------------------------------------------------------------------------
-
-const DEFAULT_VALUES = {};
-
-// ----------------------------------------------------------------------------
-
-export function extend(publicAPI, model, initialValues = {}) {
-  Object.assign(model, DEFAULT_VALUES, initialValues);
-
-  // Object methods
-  vtkIJKSliceRepresentationProxy.extend(publicAPI, model);
-
-  // Object specific methods
-  vtkLabelMapSliceRepProxy(publicAPI, model);
-}
-
-// ----------------------------------------------------------------------------
-
-export const newInstance = macro.newInstance(
-  extend,
-  'vtkLabelMapSliceRepProxy'
-);
-
-// ----------------------------------------------------------------------------
-
-export default { newInstance, extend };
diff --git a/src/vtk/MultiSliceRepresentationProxy/index.d.ts b/src/vtk/MultiSliceRepresentationProxy/index.d.ts
deleted file mode 100644
index 14f9e9cc6..000000000
--- a/src/vtk/MultiSliceRepresentationProxy/index.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import vtkGeometryRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/GeometryRepresentationProxy';
-import { RGBColor } from '@kitware/vtk.js/types';
-
-export type OutlineProperties = {
-  lineWidth: number | undefined;
-  color: RGBColor | undefined;
-  opacity: number | undefined;
-};
-
-export interface vtkMultiSliceRepresentationProxy
-  extends vtkGeometryRepresentationProxy {
-  setDataOutlineProperties(props: OutlineProperties): void;
-  setSliceOutlineProperties(props: OutlineProperties[]): void;
-  setPlanes(planes: { origin: vec3; normal: vec3 }[]): void;
-  setWindowWidth(width: number): boolean;
-  setWindowLevel(level: number): boolean;
-}
-
-export default vtkMultiSliceRepresentationProxy;
diff --git a/src/vtk/MultiSliceRepresentationProxy/index.js b/src/vtk/MultiSliceRepresentationProxy/index.js
deleted file mode 100644
index 81a40e414..000000000
--- a/src/vtk/MultiSliceRepresentationProxy/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import macro from '@kitware/vtk.js/macro';
-
-import vtkGeometryRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/GeometryRepresentationProxy';
-import vtkResliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/ResliceRepresentationProxy';
-import vtkImageDataOutlineFilter from '@kitware/vtk.js/Filters/General/ImageDataOutlineFilter';
-
-function vtkMultiSliceRepresentationProxy(publicAPI, model) {
-  model.classHierarchy.push('vtkMultiSliceRepresentationProxy');
-
-  // setup image outline
-  model.outlineFilter = vtkImageDataOutlineFilter.newInstance();
-  model.outlineFilter.setGenerateFaces(false);
-  model.outlineFilter.setGenerateLines(true);
-
-  // clear previous dependencies (mapper)
-  model.sourceDependencies.length = 0;
-  model.sourceDependencies.push(model.outlineFilter);
-  publicAPI.getMapper().setInputConnection(model.outlineFilter.getOutputPort());
-
-  // array of slices
-  model.slices = [
-    vtkResliceRepresentationProxy.newInstance(),
-    vtkResliceRepresentationProxy.newInstance(),
-    vtkResliceRepresentationProxy.newInstance(),
-  ];
-
-  model.slices.forEach((sliceRep) => {
-    // add all actors to the composite representation:
-    sliceRep.getActors().forEach((sliceRepActor) => {
-      model.actors.push(sliceRepActor);
-    });
-  });
-
-  publicAPI.setDataOutlineProperties = (props) => {
-    if (props.lineWidth) {
-      publicAPI.setLineWidth(props.lineWidth);
-    }
-
-    if (props.color) {
-      publicAPI.setColor(props.color);
-    }
-
-    if (props.opacity) {
-      publicAPI.setOpacity(props.opacity);
-    }
-  };
-
-  publicAPI.setSliceOutlineProperties = (props) => {
-    if (props.length === model.slices.length) {
-      model.slices.forEach((rep, idx) => {
-        if (props[idx].lineWidth) {
-          rep.setOutlineLineWidth(props[idx].lineWidth);
-        }
-        if (props[idx].color) {
-          rep.setOutlineColor(props[idx].color);
-        }
-        rep.setOutlineVisibility(true);
-      });
-    }
-  };
-
-  publicAPI.setPlanes = (planes) => {
-    if (planes.length === model.slices.length) {
-      for (let i = 0; i < planes.length; ++i) {
-        model.slices[i].getSlicePlane().setNormal(planes[i].normal);
-        model.slices[i].getSlicePlane().setOrigin(planes[i].origin);
-      }
-    }
-  };
-
-  const _setInput = publicAPI.setInput;
-  publicAPI.setInput = (source) => {
-    _setInput(source);
-    model.slices.forEach((sliceRep) => sliceRep.setInput(source));
-  };
-
-  publicAPI.setWindowWidth = (width) =>
-    model.slices.forEach((r) => r.setWindowWidth(width));
-  publicAPI.setWindowLevel = (level) =>
-    model.slices.forEach((r) => r.setWindowLevel(level));
-}
-
-// ----------------------------------------------------------------------------
-// Object factory
-// ----------------------------------------------------------------------------
-
-const DEFAULT_VALUES = {};
-
-// ----------------------------------------------------------------------------
-
-export function extend(publicAPI, model, initialValues = {}) {
-  Object.assign(model, DEFAULT_VALUES, initialValues);
-  vtkGeometryRepresentationProxy.extend(publicAPI, model);
-  vtkMultiSliceRepresentationProxy(publicAPI, model);
-}
-
-// ----------------------------------------------------------------------------
-
-export const newInstance = macro.newInstance(
-  extend,
-  'vtkMultiSliceRepresentationProxy'
-);
-
-// ----------------------------------------------------------------------------
-
-export default { newInstance, extend };
diff --git a/src/vtk/proxy.js b/src/vtk/proxy.js
deleted file mode 100644
index bf0a7d335..000000000
--- a/src/vtk/proxy.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import vtkLookupTableProxy from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
-import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
-
-import vtkSourceProxy from '@kitware/vtk.js/Proxy/Core/SourceProxy';
-
-import vtkGeometryRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/GeometryRepresentationProxy';
-import vtkResliceRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/ResliceRepresentationProxy';
-import vtkVolumeRepresentationProxy from '@kitware/vtk.js/Proxy/Representations/VolumeRepresentationProxy';
-import vtkMultiSliceRepresentationProxy from '@/src/vtk/MultiSliceRepresentationProxy';
-
-import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
-import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import vtkIJKSliceRepresentationProxy from '@/src/vtk/IJKSliceRepresentationProxy';
-import vtkLabelMapSliceRepProxy from '@/src/vtk/LabelMapSliceRepProxy';
-
-function createProxyDefinition(
-  classFactory,
-  ui = [],
-  links = [],
-  definitionOptions = {},
-  props = {}
-) {
-  return {
-    class: classFactory,
-    options: { links, ui, ...definitionOptions },
-    props,
-  };
-}
-
-function createDefaultView(classFactory, options = [], props = {}) {
-  return createProxyDefinition(classFactory, [], [], options, props);
-}
-
-// ----------------------------------------------------------------------------
-
-export default {
-  definitions: {
-    Proxy: {
-      LookupTable: createProxyDefinition(vtkLookupTableProxy, [], [], {
-        presetName: 'Default (Cool to Warm)',
-      }),
-      PiecewiseFunction: createProxyDefinition(vtkPiecewiseFunctionProxy),
-    },
-    Sources: {
-      TrivialProducer: createProxyDefinition(vtkSourceProxy),
-    },
-    Representations: {
-      ImageReslice: createProxyDefinition(vtkResliceRepresentationProxy),
-      ImageSlice: createProxyDefinition(vtkIJKSliceRepresentationProxy),
-      LabelMapSlice: createProxyDefinition(vtkLabelMapSliceRepProxy),
-      Volume: createProxyDefinition(vtkVolumeRepresentationProxy),
-      Geometry: createProxyDefinition(vtkGeometryRepresentationProxy),
-      ImageMultiSlice: createProxyDefinition(vtkMultiSliceRepresentationProxy),
-    },
-    Views: {
-      View3D: createDefaultView(vtkLPSView3DProxy),
-      View2D: createDefaultView(vtkLPSView2DProxy),
-      Oblique: createDefaultView(vtkLPSView2DProxy),
-      Oblique3D: createDefaultView(vtkLPSView3DProxy),
-    },
-  },
-  representations: {
-    View3D: {
-      vtkImageData: { name: 'Volume' },
-      vtkPolyData: { name: 'Geometry' },
-    },
-    View2D: {
-      vtkImageData: { name: 'ImageSlice' },
-      vtkLabelMap: { name: 'LabelMapSlice' },
-    },
-    Oblique: {
-      vtkImageData: { name: 'ImageReslice' },
-    },
-    Oblique3D: {
-      vtkImageData: { name: 'ImageMultiSlice' },
-    },
-  },
-};
diff --git a/src/vtk/proxyUtils.js b/src/vtk/proxyUtils.js
deleted file mode 100644
index f85213115..000000000
--- a/src/vtk/proxyUtils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function createOrGetView(proxyManager, viewType, name) {
-  const views = proxyManager.getViews();
-  const view = views.find((v) => v.getName() === name);
-  if (view) {
-    return view;
-  }
-
-  return proxyManager.createProxy('Views', viewType, { name });
-}
-
-export function createFourUpViews(proxyManager) {
-  createOrGetView(proxyManager, 'ViewX', 'X:1');
-  createOrGetView(proxyManager, 'ViewY', 'Y:1');
-  createOrGetView(proxyManager, 'ViewZ', 'Z:1');
-  createOrGetView(proxyManager, 'View3D', '3D:1');
-}

From 149a34c309a20808ca6c1011e6d169ebc6cced42 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 25 Mar 2024 15:10:59 -0400
Subject: [PATCH 106/113] fix(Crop2D): build fails from types

---
 src/components/tools/crop/Crop2D.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/tools/crop/Crop2D.vue b/src/components/tools/crop/Crop2D.vue
index 294ca2fdf..495edcfd8 100644
--- a/src/components/tools/crop/Crop2D.vue
+++ b/src/components/tools/crop/Crop2D.vue
@@ -20,6 +20,7 @@ import {
   ref,
   Ref,
   toRefs,
+  unref,
 } from 'vue';
 import { vec3 } from 'gl-matrix';
 import useViewAnimationStore from '@/src/store/view-animation';
@@ -29,7 +30,7 @@ import Crop2DLineHandle from './Crop2DLineHandle.vue';
 import { CropLines } from './types';
 
 function computeCropLines(
-  viewID: Ref<string | null>,
+  viewID: MaybeRef<string>,
   imageID: MaybeRef<Maybe<string>>,
   cropAxis: Ref<LPSAxis | null>,
   cropPlanes: DeepReadonly<Ref<Record<LPSAxis, number[]>>>,
@@ -39,7 +40,7 @@ function computeCropLines(
 
   return computed(() => {
     // pre-check reactivity
-    const viewIDVal = viewID.value;
+    const viewIDVal = unref(viewID);
     const cropAxisVal = cropAxis.value;
     const cropPlanesVal = cropPlanes.value;
     const boundaryVal = boundary.value;

From 53678666cc2ca89da86d21b7c5e638ab68737563 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Mon, 25 Mar 2024 15:11:36 -0400
Subject: [PATCH 107/113] fix(build): tool widget types

---
 src/vtk/PolygonWidget/index.d.ts | 3 ++-
 src/vtk/RulerWidget/index.d.ts   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/vtk/PolygonWidget/index.d.ts b/src/vtk/PolygonWidget/index.d.ts
index e91832340..0c793a841 100644
--- a/src/vtk/PolygonWidget/index.d.ts
+++ b/src/vtk/PolygonWidget/index.d.ts
@@ -30,7 +30,8 @@ export interface vtkPolygonViewWidget extends vtkAnnotationToolWidget {
 export interface IPolygonWidgetInitialValues
   extends IAnnotationToolWidgetInitialValues {}
 
-export interface vtkPolygonWidget extends vtkAbstractWidgetFactory {
+export interface vtkPolygonWidget
+  extends vtkAbstractWidgetFactory<vtkPolygonViewWidget> {
   getLength(): number;
   getWidgetState(): vtkPolygonWidgetState;
 }
diff --git a/src/vtk/RulerWidget/index.d.ts b/src/vtk/RulerWidget/index.d.ts
index 7ecd171f5..b2c68b756 100644
--- a/src/vtk/RulerWidget/index.d.ts
+++ b/src/vtk/RulerWidget/index.d.ts
@@ -36,7 +36,8 @@ export interface IRulerWidgetInitialValues
   isPlaced: boolean;
 }
 
-export interface vtkRulerWidget extends vtkAbstractWidgetFactory {
+export interface vtkRulerWidget
+  extends vtkAbstractWidgetFactory<vtkRulerViewWidget> {
   getLength(): number;
   getWidgetState(): vtkRulerWidgetState;
 }

From ca7928ee9358a9dde041cfd02f6a51315a910bb7 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Tue, 26 Mar 2024 10:22:14 -0400
Subject: [PATCH 108/113] fix(SliceView): wl/pan/zoom tool switching

---
 src/components/ObliqueSliceViewer.vue         | 35 +++++++++++++++
 src/components/SliceViewer.vue                | 42 ++++++++++++++---
 .../vtk/VtkMouseInteractionManipulator.vue    | 45 +++++++++++++++++++
 src/components/vtk/VtkSliceView.vue           | 14 ------
 .../vtk/VtkSliceViewSlicingManipulator.vue    | 20 +++++++--
 .../vtk/VtkSliceViewWindowManipulator.vue     | 18 ++++++--
 src/composables/stableDeepRef.ts              | 27 +++++++++++
 src/core/vtk/useVtkInteractionManipulator.ts  |  8 ++--
 8 files changed, 179 insertions(+), 30 deletions(-)
 create mode 100644 src/components/vtk/VtkMouseInteractionManipulator.vue
 create mode 100644 src/composables/stableDeepRef.ts

diff --git a/src/components/ObliqueSliceViewer.vue b/src/components/ObliqueSliceViewer.vue
index 88eb075cb..07433beb3 100644
--- a/src/components/ObliqueSliceViewer.vue
+++ b/src/components/ObliqueSliceViewer.vue
@@ -13,9 +13,32 @@
           :view-up="viewUp"
           :slice-range="sliceDomain"
         >
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Pan"
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1, shift: true }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Zoom"
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 3 }"
+          ></vtk-mouse-interaction-manipulator>
           <vtk-slice-view-window-manipulator
             :view-id="id"
             :image-id="currentImageID"
+            :manipulator-config="windowingManipulatorProps"
           ></vtk-slice-view-window-manipulator>
           <slice-viewer-overlay
             :view-id="id"
@@ -74,6 +97,12 @@ import { vec3 } from 'gl-matrix';
 import { computed, ref, toRefs, watchEffect } from 'vue';
 import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
+import VtkMouseInteractionManipulator from '@/src/components/vtk/VtkMouseInteractionManipulator.vue';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
+import { storeToRefs } from 'pinia';
+import { useToolStore } from '@/src/store/tools';
+import { Tools } from '@/src/store/tools/types';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -90,6 +119,12 @@ const viewAxis = computed(() => getLPSAxisFromDir(viewDirection.value));
 useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
+// active tool
+const { currentTool } = storeToRefs(useToolStore());
+const windowingManipulatorProps = computed(() =>
+  currentTool.value === Tools.WindowLevel ? { button: 1 } : { button: -1 }
+);
+
 // base image
 const { currentImageID, currentImageData, currentImageMetadata } =
   useCurrentImage();
diff --git a/src/components/SliceViewer.vue b/src/components/SliceViewer.vue
index 357ce3b0a..87086efe8 100644
--- a/src/components/SliceViewer.vue
+++ b/src/components/SliceViewer.vue
@@ -38,6 +38,28 @@
           :view-direction="viewDirection"
           :view-up="viewUp"
         >
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Pan"
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="vtkMouseCameraTrackballPanManipulator"
+            :manipulator-props="{ button: 1, shift: true }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            v-if="currentTool === Tools.Zoom"
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 1 }"
+          ></vtk-mouse-interaction-manipulator>
+          <vtk-mouse-interaction-manipulator
+            :manipulator-constructor="
+              vtkMouseCameraTrackballZoomToMouseManipulator
+            "
+            :manipulator-props="{ button: 3 }"
+          ></vtk-mouse-interaction-manipulator>
           <vtk-slice-view-slicing-manipulator
             :view-id="id"
             :image-id="currentImageID"
@@ -46,6 +68,7 @@
           <vtk-slice-view-window-manipulator
             :view-id="id"
             :image-id="currentImageID"
+            :manipulator-config="windowingManipulatorProps"
           ></vtk-slice-view-window-manipulator>
           <slice-viewer-overlay
             :view-id="id"
@@ -125,7 +148,8 @@ import { LPSAxisDir } from '@/src/types/lps';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import VtkSliceView from '@/src/components/vtk/VtkSliceView.vue';
 import { VtkViewApi } from '@/src/types/vtk-types';
-import { LayoutViewProps } from '@/src/types';
+import type { LayoutViewProps } from '@/src/types';
+import { Tools } from '@/src/store/tools/types';
 import VtkBaseSliceRepresentation from '@/src/components/vtk/VtkBaseSliceRepresentation.vue';
 import VtkSegmentationSliceRepresentation from '@/src/components/vtk/VtkSegmentationSliceRepresentation.vue';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
@@ -142,13 +166,16 @@ import BoundingRectangle from '@/src/components/tools/BoundingRectangle.vue';
 import SliceSlider from '@/src/components/SliceSlider.vue';
 import SliceViewerOverlay from '@/src/components/SliceViewerOverlay.vue';
 import { useToolSelectionStore } from '@/src/store/tools/toolSelection';
-import { useAnnotationToolStore } from '@/src/store/tools';
+import { useAnnotationToolStore, useToolStore } from '@/src/store/tools';
 import { doesToolFrameMatchViewAxis } from '@/src/composables/annotationTool';
 import { useWebGLWatchdog } from '@/src/composables/useWebGLWatchdog';
 import { useSliceConfig } from '@/src/composables/useSliceConfig';
-import { useSliceConfigInitializer } from '@/src/composables/useSliceConfigInitializer';
 import VtkSliceViewWindowManipulator from '@/src/components/vtk/VtkSliceViewWindowManipulator.vue';
 import VtkSliceViewSlicingManipulator from '@/src/components/vtk/VtkSliceViewSlicingManipulator.vue';
+import VtkMouseInteractionManipulator from '@/src/components/vtk/VtkMouseInteractionManipulator.vue';
+import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
+import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
+import { storeToRefs } from 'pinia';
 
 interface Props extends LayoutViewProps {
   viewDirection: LPSAxisDir;
@@ -172,6 +199,12 @@ function resetCamera() {
 useWebGLWatchdog(vtkView);
 useViewAnimationListener(vtkView, viewId, viewType);
 
+// active tool
+const { currentTool } = storeToRefs(useToolStore());
+const windowingManipulatorProps = computed(() =>
+  currentTool.value === Tools.WindowLevel ? { button: 1 } : { button: -1 }
+);
+
 // base image
 const { currentImageID, currentLayers, currentImageMetadata, isImageLoading } =
   useCurrentImage();
@@ -180,9 +213,6 @@ const { slice: currentSlice, range: sliceRange } = useSliceConfig(
   currentImageID
 );
 
-// initialize configs
-useSliceConfigInitializer(viewId, currentImageID, viewDirection);
-
 // segmentations
 const segmentations = computed(() => {
   if (!currentImageID.value) return [];
diff --git a/src/components/vtk/VtkMouseInteractionManipulator.vue b/src/components/vtk/VtkMouseInteractionManipulator.vue
new file mode 100644
index 000000000..de7b5c7e0
--- /dev/null
+++ b/src/components/vtk/VtkMouseInteractionManipulator.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import vtkCompositeMouseManipulator, {
+  type ICompositeMouseManipulatorInitialValues,
+} from '@kitware/vtk.js/Interaction/Manipulators/CompositeMouseManipulator';
+import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
+import { toRefs, inject, computed } from 'vue';
+import { VtkViewContext } from '@/src/components/vtk/context';
+import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
+import type { Maybe } from '@/src/types';
+import type { VtkObjectConstructor } from '@/src/core/vtk/types';
+
+interface Props {
+  manipulatorConstructor: VtkObjectConstructor<vtkCompositeMouseManipulator>;
+  manipulatorProps?: ICompositeMouseManipulatorInitialValues;
+}
+
+const props = defineProps<Props>();
+const { manipulatorConstructor, manipulatorProps } = toRefs(props);
+
+const view = inject(VtkViewContext);
+if (!view) throw new Error('No VtkView');
+
+const interactorStyle =
+  view.interactorStyle as Maybe<vtkInteractorStyleManipulator>;
+if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
+  throw new Error('No vtkInteractorStyleManipulator');
+}
+
+const draggableManipulatorProps = computed(() => ({
+  dragEnabled: true,
+  ...manipulatorProps?.value,
+}));
+
+const { instance } = useVtkInteractionManipulator(
+  interactorStyle,
+  manipulatorConstructor,
+  draggableManipulatorProps
+);
+
+defineExpose({
+  manipulator: instance,
+});
+</script>
+
+<template><slot></slot></template>
diff --git a/src/components/vtk/VtkSliceView.vue b/src/components/vtk/VtkSliceView.vue
index 4d60d8570..2a0a2f54c 100644
--- a/src/components/vtk/VtkSliceView.vue
+++ b/src/components/vtk/VtkSliceView.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { ref, toRefs, provide, markRaw, effectScope, onUnmounted } from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
-import vtkMouseCameraTrackballPanManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballPanManipulator';
 import { useVtkView } from '@/src/core/vtk/useVtkView';
 import { useImage } from '@/src/composables/useCurrentImage';
 import { useVtkInteractorStyle } from '@/src/core/vtk/useVtkInteractorStyle';
-import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useResizeObserver, watchImmediate } from '@vueuse/core';
 import { resetCameraToImage, resizeToFitImage } from '@/src/utils/camera';
@@ -14,7 +12,6 @@ import { useAutoFitState } from '@/src/composables/useAutoFitState';
 import { Maybe } from '@/src/types';
 import { VtkViewApi } from '@/src/types/vtk-types';
 import { VtkViewContext } from '@/src/components/vtk/context';
-import vtkMouseCameraTrackballZoomToMouseManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseCameraTrackballZoomToMouseManipulator';
 
 interface Props {
   viewId: string;
@@ -56,17 +53,6 @@ const { interactorStyle } = useVtkInteractorStyle(
   view
 );
 
-useVtkInteractionManipulator(
-  interactorStyle,
-  vtkMouseCameraTrackballPanManipulator,
-  { button: 1, shift: true }
-);
-useVtkInteractionManipulator(
-  interactorStyle,
-  vtkMouseCameraTrackballZoomToMouseManipulator,
-  { button: 3 }
-);
-
 // bind slice and window configs
 // resizeToFit camera controls
 const { autoFit, withoutAutoFitEffect } = useAutoFitState(
diff --git a/src/components/vtk/VtkSliceViewSlicingManipulator.vue b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
index 38afe3307..11c8fb910 100644
--- a/src/components/vtk/VtkSliceViewSlicingManipulator.vue
+++ b/src/components/vtk/VtkSliceViewSlicingManipulator.vue
@@ -6,19 +6,22 @@ import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeMa
 import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
 import { Maybe } from '@/src/types';
 import { LPSAxisDir } from '@/src/types/lps';
-import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkMouseRangeManipulator, {
+  IMouseRangeManipulatorInitialValues,
+} from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import { syncRef } from '@vueuse/core';
-import { inject, toRefs } from 'vue';
+import { inject, toRefs, computed } from 'vue';
 
 interface Props {
   viewId: string;
   imageId: Maybe<string>;
   viewDirection: LPSAxisDir;
+  manipulatorConfig?: IMouseRangeManipulatorInitialValues;
 }
 
 const props = defineProps<Props>();
-const { viewId, imageId, viewDirection } = toRefs(props);
+const { viewId, imageId, viewDirection, manipulatorConfig } = toRefs(props);
 
 const view = inject(VtkViewContext);
 if (!view) throw new Error('No VtkView');
@@ -29,10 +32,19 @@ if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
   throw new Error('No vtkInteractorStyleManipulator');
 }
 
+const config = computed(() => {
+  return {
+    button: 1,
+    dragEnabled: false,
+    scrollEnabled: true,
+    ...manipulatorConfig?.value,
+  };
+});
+
 const { instance: rangeManipulator } = useVtkInteractionManipulator(
   interactorStyle,
   vtkMouseRangeManipulator,
-  { button: 1, dragEnabled: false, scrollEnabled: true }
+  config
 );
 
 const sliceConfig = useSliceConfig(viewId, imageId);
diff --git a/src/components/vtk/VtkSliceViewWindowManipulator.vue b/src/components/vtk/VtkSliceViewWindowManipulator.vue
index 72699b90e..e546f8174 100644
--- a/src/components/vtk/VtkSliceViewWindowManipulator.vue
+++ b/src/components/vtk/VtkSliceViewWindowManipulator.vue
@@ -5,7 +5,9 @@ import { useWindowingConfigInitializer } from '@/src/composables/useWindowingCon
 import { useMouseRangeManipulatorListener } from '@/src/core/vtk/useMouseRangeManipulatorListener';
 import { useVtkInteractionManipulator } from '@/src/core/vtk/useVtkInteractionManipulator';
 import { Maybe } from '@/src/types';
-import vtkMouseRangeManipulator from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
+import vtkMouseRangeManipulator, {
+  IMouseRangeManipulatorInitialValues,
+} from '@kitware/vtk.js/Interaction/Manipulators/MouseRangeManipulator';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import type { Vector2 } from '@kitware/vtk.js/types';
 import { syncRef } from '@vueuse/core';
@@ -14,10 +16,11 @@ import { inject, toRefs, computed } from 'vue';
 interface Props {
   viewId: string;
   imageId: Maybe<string>;
+  manipulatorConfig?: IMouseRangeManipulatorInitialValues;
 }
 
 const props = defineProps<Props>();
-const { viewId, imageId } = toRefs(props);
+const { viewId, imageId, manipulatorConfig } = toRefs(props);
 
 const view = inject(VtkViewContext);
 if (!view) throw new Error('No VtkView');
@@ -28,10 +31,19 @@ if (!interactorStyle?.isA('vtkInteractorStyleManipulator')) {
   throw new Error('No vtkInteractorStyleManipulator');
 }
 
+const config = computed(() => {
+  return {
+    button: 1,
+    dragEnabled: true,
+    scrollEnabled: false,
+    ...manipulatorConfig?.value,
+  };
+});
+
 const { instance: rangeManipulator } = useVtkInteractionManipulator(
   interactorStyle,
   vtkMouseRangeManipulator,
-  { button: 1, dragEnabled: true, scrollEnabled: false }
+  config
 );
 
 const wlConfig = useWindowingConfig(viewId, imageId);
diff --git a/src/composables/stableDeepRef.ts b/src/composables/stableDeepRef.ts
new file mode 100644
index 000000000..b8024d9ea
--- /dev/null
+++ b/src/composables/stableDeepRef.ts
@@ -0,0 +1,27 @@
+import { Ref, computed, ref } from 'vue';
+import { watchCompare } from '@/src/utils/watchCompare';
+import deepEqual from 'fast-deep-equal';
+
+/**
+ * Ensures that a Ref holds a stable reference by deep comparison.
+ * @param sourceRef
+ * @returns
+ */
+export function stableDeepRef<T>(sourceRef: Ref<T>) {
+  const stableRef = ref<T>(sourceRef.value) as Ref<T>;
+  watchCompare(
+    sourceRef,
+    (result) => {
+      stableRef.value = result;
+    },
+    { compare: deepEqual }
+  );
+
+  return computed({
+    get: () => stableRef.value,
+    set: (v) => {
+      // eslint-disable-next-line no-param-reassign
+      sourceRef.value = v;
+    },
+  });
+}
diff --git a/src/core/vtk/useVtkInteractionManipulator.ts b/src/core/vtk/useVtkInteractionManipulator.ts
index a49e719cc..8ac93ddde 100644
--- a/src/core/vtk/useVtkInteractionManipulator.ts
+++ b/src/core/vtk/useVtkInteractionManipulator.ts
@@ -1,7 +1,8 @@
-import { MaybeRef, computed, ref, unref, watch, watchEffect } from 'vue';
+import { MaybeRef, computed, ref, toRef, unref, watch, watchEffect } from 'vue';
 import vtkInteractorStyleManipulator from '@kitware/vtk.js/Interaction/Style/InteractorStyleManipulator';
 import { VtkObjectConstructor } from '@/src/core/vtk/types';
 import { FirstParam } from '@/src/types';
+import { stableDeepRef } from '@/src/composables/stableDeepRef';
 
 function addManipulator(style: vtkInteractorStyleManipulator, manip: any) {
   if (manip.isA('vtkCompositeMouseManipulator')) {
@@ -27,11 +28,12 @@ export function useVtkInteractionManipulator<
   T extends VtkObjectConstructor<any>
 >(
   style: vtkInteractorStyleManipulator,
-  vtkCtor: T,
+  vtkCtor: MaybeRef<T>,
   props: MaybeRef<FirstParam<T['newInstance']>>
 ) {
+  const stableProps = stableDeepRef(toRef(props));
   const manipulator = computed(() => {
-    return vtkCtor.newInstance(unref(props));
+    return unref(vtkCtor).newInstance(stableProps.value);
   });
 
   const enabled = ref(true);

From a42a5bb73a84484c02229b12e3d62e00a93b7dbc Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 28 Mar 2024 17:24:15 -0400
Subject: [PATCH 109/113] feat(representation): expose representations

---
 .../vtk/VtkBaseObliqueSliceRepresentation.vue |  2 ++
 .../vtk/VtkBaseSliceRepresentation.vue        |  2 ++
 .../vtk/VtkBaseVolumeRepresentation.vue       |  2 ++
 .../vtk/VtkImageOutlineRepresentation.vue     |  2 ++
 .../vtk/VtkLayerSliceRepresentation.vue       |  2 ++
 .../VtkSegmentationSliceRepresentation.vue    |  2 ++
 src/core/vtk/types.ts                         | 20 +++++++++++++++++++
 src/core/vtk/useVtkRepresentation.ts          | 15 +++++---------
 8 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
index 053843966..61eade9ba 100644
--- a/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseObliqueSliceRepresentation.vue
@@ -61,6 +61,8 @@ watchEffect(() => {
   sliceRep.property.setColorLevel(wlConfig.level.value);
   sliceRep.property.setColorWindow(wlConfig.width.value);
 });
+
+defineExpose(sliceRep);
 </script>
 
 <template>
diff --git a/src/components/vtk/VtkBaseSliceRepresentation.vue b/src/components/vtk/VtkBaseSliceRepresentation.vue
index 9d89667a1..1c98811c8 100644
--- a/src/components/vtk/VtkBaseSliceRepresentation.vue
+++ b/src/components/vtk/VtkBaseSliceRepresentation.vue
@@ -53,6 +53,8 @@ const colorLevel = vtkFieldRef(sliceRep.property, 'colorLevel');
 const colorWindow = vtkFieldRef(sliceRep.property, 'colorWindow');
 syncRefs(wlConfig.level, colorLevel, { immediate: true });
 syncRefs(wlConfig.width, colorWindow, { immediate: true });
+
+defineExpose(sliceRep);
 </script>
 
 <template>
diff --git a/src/components/vtk/VtkBaseVolumeRepresentation.vue b/src/components/vtk/VtkBaseVolumeRepresentation.vue
index 3d0455f80..599156838 100644
--- a/src/components/vtk/VtkBaseVolumeRepresentation.vue
+++ b/src/components/vtk/VtkBaseVolumeRepresentation.vue
@@ -142,6 +142,8 @@ useColoringEffect(coloringConfig, cfun, ofun);
 const cropStore = useCropStore();
 const croppingPlanes = cropStore.getComputedVTKPlanes(imageID);
 useCroppingEffect(rep.mapper, croppingPlanes);
+
+defineExpose(rep);
 </script>
 
 <template>
diff --git a/src/components/vtk/VtkImageOutlineRepresentation.vue b/src/components/vtk/VtkImageOutlineRepresentation.vue
index 27a032eda..7a8a78da3 100644
--- a/src/components/vtk/VtkImageOutlineRepresentation.vue
+++ b/src/components/vtk/VtkImageOutlineRepresentation.vue
@@ -67,6 +67,8 @@ syncRefs(planeOrigin, slicePlaneOrigin);
 watchImmediate([slicePlaneNormal, slicePlaneOrigin], () => {
   cutterFilter.filter.modified();
 });
+
+defineExpose(rep);
 </script>
 
 <template><slot></slot></template>
diff --git a/src/components/vtk/VtkLayerSliceRepresentation.vue b/src/components/vtk/VtkLayerSliceRepresentation.vue
index 4dad8ee39..0eb6ce844 100644
--- a/src/components/vtk/VtkLayerSliceRepresentation.vue
+++ b/src/components/vtk/VtkLayerSliceRepresentation.vue
@@ -96,6 +96,8 @@ const applyLayerColoring = () => {
 };
 
 watchEffect(applyLayerColoring);
+
+defineExpose(sliceRep);
 </script>
 
 <template>
diff --git a/src/components/vtk/VtkSegmentationSliceRepresentation.vue b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
index ad5251142..ab9807389 100644
--- a/src/components/vtk/VtkSegmentationSliceRepresentation.vue
+++ b/src/components/vtk/VtkSegmentationSliceRepresentation.vue
@@ -112,6 +112,8 @@ const applySegmentColoring = () => {
 };
 
 watchEffect(applySegmentColoring);
+
+defineExpose(sliceRep);
 </script>
 
 <template>
diff --git a/src/core/vtk/types.ts b/src/core/vtk/types.ts
index 8d6cf1342..527029932 100644
--- a/src/core/vtk/types.ts
+++ b/src/core/vtk/types.ts
@@ -1,8 +1,11 @@
+import vtkAbstractMapper from '@kitware/vtk.js/Rendering/Core/AbstractMapper';
+import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
 import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
 import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
+import { vtkObject } from '@kitware/vtk.js/interfaces';
 
 export type VtkObjectConstructor<T> = {
   newInstance(props?: any): T;
@@ -20,3 +23,20 @@ export interface View {
   widgetManager: vtkWidgetManager;
   requestRender(opts?: RequestRenderOptions): void;
 }
+
+export type vtkPropWithMapperProperty<
+  M extends vtkAbstractMapper = vtkAbstractMapper,
+  P extends vtkObject = vtkObject
+> = vtkProp & {
+  setMapper(m: M): void;
+  getProperty(): P;
+};
+
+export interface Representation<
+  Actor extends vtkPropWithMapperProperty,
+  Mapper extends vtkAbstractMapper
+> {
+  actor: Actor;
+  mapper: Mapper;
+  property: ReturnType<Actor['getProperty']>;
+}
diff --git a/src/core/vtk/useVtkRepresentation.ts b/src/core/vtk/useVtkRepresentation.ts
index 65778cb67..70310bf2c 100644
--- a/src/core/vtk/useVtkRepresentation.ts
+++ b/src/core/vtk/useVtkRepresentation.ts
@@ -1,19 +1,14 @@
 import { MaybeRef, onScopeDispose, unref, watchEffect } from 'vue';
 import { vtkObject } from '@kitware/vtk.js/interfaces';
 import vtkAbstractMapper from '@kitware/vtk.js/Rendering/Core/AbstractMapper';
-import vtkProp from '@kitware/vtk.js/Rendering/Core/Prop';
-import type { View, VtkObjectConstructor } from '@/src/core/vtk/types';
+import type {
+  View,
+  VtkObjectConstructor,
+  vtkPropWithMapperProperty,
+} from '@/src/core/vtk/types';
 import { Maybe } from '@/src/types';
 import { onVTKEvent } from '@/src/composables/onVTKEvent';
 
-type vtkPropWithMapperProperty<
-  M extends vtkAbstractMapper = vtkAbstractMapper,
-  P extends vtkObject = vtkObject
-> = vtkProp & {
-  setMapper(m: M): void;
-  getProperty(): P;
-};
-
 export interface UseVtkRepresentationParameters<Actor, Mapper> {
   view: View;
   data: MaybeRef<Maybe<vtkObject>>;

From b4b603b20be9afe9639fb14ce6ad1604cafe52ca Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Fri, 29 Mar 2024 13:07:02 -0400
Subject: [PATCH 110/113] fix(vite): use absolute copy paths

---
 vite.config.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 3da1114f7..92273f57e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -29,7 +29,7 @@ function resolveNodeModulePath(moduleName: string) {
   return modulePath;
 }
 
-function resolvePath(...args) {
+function resolvePath(...args: string[]) {
   return normalizePath(path.resolve(...args));
 }
 
@@ -164,11 +164,17 @@ export default defineConfig({
           dest: 'itk/pipelines',
         },
         {
-          src: 'src/io/itk-dicom/emscripten-build/**/dicom*',
+          src: resolvePath(
+            rootDir,
+            'src/io/itk-dicom/emscripten-build/**/dicom*'
+          ),
           dest: 'itk/pipelines',
         },
         {
-          src: 'src/io/resample/emscripten-build/**/resample*',
+          src: resolvePath(
+            rootDir,
+            'src/io/resample/emscripten-build/**/resample*'
+          ),
           dest: 'itk/pipelines',
         },
       ],

From 2fa8ceaa03e1d092c6bb5c762b106a1f39d96103 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 4 Apr 2024 16:56:57 -0400
Subject: [PATCH 111/113] style(watchCompare): prettier

---
 src/utils/watchCompare.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/watchCompare.ts b/src/utils/watchCompare.ts
index 5b0c22a16..6b521c268 100644
--- a/src/utils/watchCompare.ts
+++ b/src/utils/watchCompare.ts
@@ -4,7 +4,7 @@ import {
   WatchSource,
   WatchStopHandle,
   watch,
-} from "vue";
+} from 'vue';
 
 export interface WatchCompareOptions<Immediate>
   extends WatchOptions<Immediate> {

From 3241ac1f03427d9f370f3f9c65b9b271b1232380 Mon Sep 17 00:00:00 2001
From: Forrest <forrest.li@kitware.com>
Date: Thu, 4 Apr 2024 17:03:35 -0400
Subject: [PATCH 112/113] fix(useColoringEffect): mapping range after preset

---
 src/composables/useColoringEffect.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/composables/useColoringEffect.ts b/src/composables/useColoringEffect.ts
index 544e70212..17ff87c00 100644
--- a/src/composables/useColoringEffect.ts
+++ b/src/composables/useColoringEffect.ts
@@ -39,11 +39,11 @@ export function applyColoring({
     cfun.setVectorComponent(componentIndex);
   }
 
-  cfun.setMappingRange(...colorFunction.mappingRange);
   const preset = vtkColorMaps.getPresetByName(colorFunction.preset);
   if (preset) {
     cfun.applyColorMap(preset);
   }
+  cfun.setMappingRange(...colorFunction.mappingRange);
 
   const { mappingRange } = opacityFunction;
   ofun.setRange(...opacityFunction.mappingRange);

From 671a19cb16fac42efcce6d35d24132cfbf5bb536 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Tue, 23 Apr 2024 17:52:52 -0400
Subject: [PATCH 113/113] bump checkout version

---
 .github/workflows/e2e.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
index 687ffe9a8..799466ac1 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -10,7 +10,7 @@ jobs:
     name: E2E Testing on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     env:
-      DOWNLOAD_TIMEOUT: 60000
+      DOWNLOAD_TIMEOUT: 60001
     steps:
       - uses: actions/checkout@v3
         with: