From 5fe3d563f539218042ac60e23e31b9bc4f556d8e Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Fri, 13 Feb 2026 01:58:32 -0600
Subject: [PATCH] ui_migration fix(deps): --preliminary-- fixed replaced
 v-observe-visibility by vueuse useIntersectionObserver

---
 .../genericComponents/miniStreamDisplay.vue   | 19 ++++++---
 .../labThingsComponents/actionButton.vue      | 22 +++++++----
 .../labThingsComponents/actionStatusModal.vue |  1 -
 .../labThingsComponents/inputFromSchema.vue   |  3 --
 .../labThingsComponents/propertyControl.vue   |  2 +-
 .../serverSpecifiedActionButton.vue           |  1 -
 .../serverSpecifiedPropertyControl.vue        |  1 -
 .../modalComponents/calibrationWizard.vue     |  8 +++-
 .../cameraMainCalibrationStep.vue             |  1 -
 .../csmSteps/focusStep.vue                    |  1 -
 .../csmSteps/runCsmStep.vue                   |  1 -
 .../stepTemplateWithStream.vue                |  1 -
 .../aboutComponents/statusPane.vue            |  1 -
 .../tabContentComponents/aboutContent.vue     |  1 -
 .../paneBackgroundDetect.vue                  | 16 +++++++-
 .../backgroundDetectContent.vue               |  1 -
 .../controlComponents/autofocusControl.vue    |  1 -
 .../controlComponents/paneControl.vue         |  1 -
 .../controlComponents/positionControl.vue     |  1 -
 .../tabContentComponents/controlContent.vue   |  1 -
 .../tabContentComponents/loggingContent.vue   | 16 +++++++-
 .../openSeadragonViewer.vue                   | 30 +++++++++++---
 .../scanListComponents/scanCard.vue           |  1 -
 .../scanListComponents/scanViewer.vue         |  1 -
 .../tabContentComponents/scanListContent.vue  | 13 ++++++-
 .../settingsComponents/CSMSettings.vue        |  1 -
 .../CSMCalibrationSettings.vue                | 14 ++++++-
 .../settingsComponents/cameraSettings.vue     |  1 -
 .../cameraCalibrationSettings.vue             |  2 +-
 .../settingsComponents/displaySettings.vue    |  1 -
 .../settingsComponents/stageSettings.vue      | 14 ++++++-
 .../tabContentComponents/slideScanContent.vue | 17 +++++++-
 .../tabContentComponents/streamContent.vue    | 39 +++++++------------
 33 files changed, 154 insertions(+), 80 deletions(-)

diff --git a/webapp/src/components/genericComponents/miniStreamDisplay.vue b/webapp/src/components/genericComponents/miniStreamDisplay.vue
index d2623334..1f9cafc9 100644
--- a/webapp/src/components/genericComponents/miniStreamDisplay.vue
+++ b/webapp/src/components/genericComponents/miniStreamDisplay.vue
@@ -2,7 +2,6 @@
   <div
     id="stream-display"
     ref="streamDisplay"
-    v-observe-visibility="visibilityChanged"
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
@@ -16,6 +15,9 @@
 </template>
 
 <script>
+//vue3 migration
+import { useIntersectionObserver } from '@vueuse/core';
+
 // Export main app
 export default {
   name: "MiniStreamDisplay",
@@ -31,10 +33,17 @@ export default {
       return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
     },
   },
-  methods: {
-    visibilityChanged(isVisible) {
-      this.isVisible = isVisible;
-    },
+
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.streamDisplay,
+      ([{ isIntersecting }]) => {
+        this.isVisible = isIntersecting;
+      },
+      {
+        threshold: 0.0,
+      }
+    );
   },
 };
 </script>
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index e19e4d8d..38ea5874 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <div v-observe-visibility="visibilityChanged" class="uk-margin-remove uk-padding-remove">
+  <div class="uk-margin-remove uk-padding-remove">
     <button
+      ref="actionButton"
       type="button"
       :disabled="buttonDisabled"
       class="uk-button uk-width-1-1 uk-position-relative"
@@ -28,8 +29,10 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
-import { markRaw } from "vue";
+//vue3 migration 
 import { eventBus } from "../../eventBus.js";
+import { useIntersectionObserver } from "@vueuse/core";
+
 
 export default {
   name: "ActionButton",
@@ -155,20 +158,16 @@ export default {
       handler(newval) {
         this.$emit("update:progress", newval);
       },
-      //deep: true,
-      immediate: true // Optional: triggers immediately on component load
     },
     taskStarted: {
       handler(newval) {
         this.$emit("update:taskStarted", newval);
       },
-      //deep: true
     },
     taskRunning: {
       handler(newval) {
         this.$emit("update:taskRunning", newval);
       },
-      deep: true
     },
     log: {
       handler(newval) {
@@ -180,11 +179,20 @@ export default {
       handler(newval) {
         this.$emit("update:taskStatus", newval);
       },
-      //deep: true
     }
 },
 
   mounted() {
+    useIntersectionObserver(
+      this.$refs.actionButton,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0, // Adjust as needed
+      },
+    );
+
     // Check for already running tasks
     if (this.taskStarted != true) {
       this.checkExistingTasks();
diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue
index 90619196..b7fe4f63 100644
--- a/webapp/src/components/labThingsComponents/actionStatusModal.vue
+++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue
@@ -29,7 +29,6 @@ import UIkit from "uikit";
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionLogDisplay from "./actionLogDisplay.vue";
 // vue3 migration
-import { markRaw } from "vue";
 import { eventBus } from "../../eventBus.js";
 
 export default {
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 87bf97c8..ff4c9fef 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -101,7 +101,6 @@
 <script>
 import syncPropertyButton from "./syncPropertyButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "InputFromSchema",
@@ -216,13 +215,11 @@ export default {
         this.updateIsEdited();
         this.resetInternalValue();
       },
-      //deep: true,
     },
     internalValue: {
       handler() {
         this.updateIsEdited();
       },
-      //deep: true,
     },
     animate(updated) {
       if (updated) {
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index b8b58cb5..d0b1b953 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -14,7 +14,7 @@
 import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
 // vue3 migration
-import { markRaw } from "vue";
+
 
 export default {
   name: "PropertyControl",
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
index 143606be..b1b4cae9 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
@@ -18,7 +18,6 @@
 <script>
 import ActionButton from "./actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
index 0b204f9e..652b7aed 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
@@ -12,7 +12,6 @@
 <script>
 import PropertyControl from "./propertyControl.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index dcad990f..6223caf4 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -28,7 +28,13 @@ import finalStep from "./calibrationWizardComponents/finalStep.vue";
 export default {
   name: "CalibrationWizard",
 
-  components: {},
+  components: {  
+    singleStepTask,
+    welcomeStep,
+    cameraCalibrationTask,
+    cameraStageMappingTask,
+    finalStep
+  },
 
   data: function () {
     return {
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
index fd16ccad..f4ba06d3 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
@@ -20,7 +20,6 @@
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import cameraCalibrationSettings from "../../../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index b4d183b8..e481b644 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -31,7 +31,6 @@
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import ActionButton from "../../../labThingsComponents/actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
index 5f5db3cb..92e77f89 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
@@ -19,7 +19,6 @@
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
index 0b9adc8b..010fe489 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
@@ -9,7 +9,6 @@
 <script>
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "StepTemplateWithStream",
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index f16db7eb..a41decc4 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -58,7 +58,6 @@
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "StatusPane",
diff --git a/webapp/src/components/tabContentComponents/aboutContent.vue b/webapp/src/components/tabContentComponents/aboutContent.vue
index bd07af73..ba3b4b38 100644
--- a/webapp/src/components/tabContentComponents/aboutContent.vue
+++ b/webapp/src/components/tabContentComponents/aboutContent.vue
@@ -25,7 +25,6 @@
 import devTools from "./aboutComponents/devTools.vue";
 import statusPane from "./aboutComponents/statusPane.vue";
 //vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "AboutContent",
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 11d442ad..36745ac1 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-observe-visibility="visibilityChanged" class="uk-padding-small">
+  <div ref="backgroundDetectContent" class="uk-padding-small">
     <div>
       <ul uk-accordion="multiple: true">
         <li>
@@ -48,7 +48,7 @@
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
 // vue3 migration
-import { markRaw } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   components: {
@@ -107,6 +107,18 @@ export default {
       }
     },
   },
+
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.backgroundDetectContent,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0,
+      },
+    );
+  },
 };
 </script>
 <style scoped lang="less">
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectContent.vue b/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
index d15bc1c6..a88ec07a 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
@@ -14,7 +14,6 @@
 import paneBackgroundDetect from "./backgroundDetectComponents/paneBackgroundDetect";
 import streamDisplay from "./streamContent.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "BackgroundDetectContent",
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
index eebfd0d3..039553a4 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
@@ -19,7 +19,6 @@
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 import { eventBus } from "../../../eventBus.js";
 
 export default {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 269984e3..f0b07666 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -35,7 +35,6 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
 import autofocusControl from "./autofocusControl.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "PaneControl",
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index e1cd507c..04c6b9c2 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -62,7 +62,6 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 import stageControlButtons from "./stageControlButtons.vue";
 // vue3 migration
-import { markRaw } from "vue";
 import { eventBus } from "../../../eventBus.js";
 
 export default {
diff --git a/webapp/src/components/tabContentComponents/controlContent.vue b/webapp/src/components/tabContentComponents/controlContent.vue
index 1226e205..208ad53f 100644
--- a/webapp/src/components/tabContentComponents/controlContent.vue
+++ b/webapp/src/components/tabContentComponents/controlContent.vue
@@ -14,7 +14,6 @@
 import paneControl from "./controlComponents/paneControl.vue";
 import streamDisplay from "./streamContent.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "ControlContent",
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 626cc723..70640dd1 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-observe-visibility="visibilityChanged" class="uk-padding uk-padding-remove-top">
+  <div ref="loggingDisplay" class="uk-padding uk-padding-remove-top">
     <!-- Logging nav bar -->
     <nav class="logging-navbar uk-navbar-container uk-navbar-transparent" uk-navbar="mode: click">
       <!-- Left side controls -->
@@ -84,7 +84,7 @@ import axios from "axios";
 import Paginate from "vuejs-paginate";
 import EndpointButton from "../labThingsComponents/endpointButton.vue";
 //vue3 migration
-import { markRaw } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   name: "LoggingContent",
@@ -135,6 +135,18 @@ export default {
     },
   },
 
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.loggingDisplay,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0,
+      },
+    );
+  },
+
   methods: {
     scrollToTop() {
       this.$emit("scrollTop");
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index 6cdfb24b..67126b16 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -1,11 +1,13 @@
 <template>
-  <div v-observe-visibility="visibilityChanged">
+  <div ref="osdViewerContainer" class="osd-viewer-container uk-height-1-1">
     <div id="openseadragon" ref="osdContainer"></div>
   </div>
 </template>
 
 <script>
 import OpenSeaDragon from "openseadragon";
+// vue3 migration
+import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   name: "OpenSeadragonViewer",
@@ -37,7 +39,6 @@ export default {
 
   watch: {
     src: {
-      deep: true,
       immediate: true,
       handler(newVal) {
         this.loadOpenSeaDragon(newVal);
@@ -55,6 +56,14 @@ export default {
   },
 
   async mounted() {
+    useIntersectionObserver(
+      this.$refs.osdViewerContainer,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      { threshold: 0.0 }
+    );
+
     if (this.src) {
       this.loadOpenSeaDragon(this.src);
     }
@@ -62,17 +71,28 @@ export default {
 
   beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
-    this.osdViewer.destroy();
+    if (this.osdViewer) {
+      this.osdViewer.destroy();
+    }
   },
 
   methods: {
     visibilityChanged(isVisible) {
+      // adding this check to avoid error when the viewer is not yet initialized.
       if (isVisible) {
-        this.loadOpenSeaDragon();
+        
+        if (!this.osdViewer && this.src) {
+          this.loadOpenSeaDragon(this.src);
+        }
       } else {
-        this.osdViewer.destroy();
+        
+        if (this.osdViewer) {
+          this.osdViewer.destroy();
+          this.osdViewer = null;
+        }
       }
     },
+    
     async loadOpenSeaDragon() {
       if (this.osdViewer) {
         this.osdViewer.destroy();
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
index 98d228d1..af495022 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -83,7 +83,6 @@ import axios from "axios";
 import actionButton from "../../labThingsComponents/actionButton.vue";
 import EndpointButton from "../../labThingsComponents/endpointButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
index e86bd766..2a47848b 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -56,7 +56,6 @@
 import UIkit from "uikit";
 import OpenSeadragonViewer from "./openSeadragonViewer.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "ScanViewerModal",
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 0515aaf8..17b3f7f7 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-observe-visibility="visibilityChanged"
+    ref="galleryDisplay"
     class="galleryDisplay uk-padding uk-padding-remove-top"
   >
     <!-- Gallery nav bar -->
@@ -101,8 +101,8 @@ import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
 import ScanViewerModal from "./scanListComponents/scanViewer.vue";
 // vue3 migration
-import { markRaw } from "vue";
 import { eventBus } from "../../eventBus.js";
+import { useIntersectionObserver } from "@vueuse/core";
 
 // Export main app
 export default {
@@ -148,6 +148,15 @@ export default {
   },
 
   async mounted() {
+    useIntersectionObserver(
+      this.$refs.galleryDisplay,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0, // Adjust as needed
+      },
+    );
     // Update on mount (does nothing if not connected)
     await this.updateScans();
     // A global signal listener to perform a gallery refresh
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index 3f21e026..ce024020 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -18,7 +18,6 @@
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index d6f0e648..1f388ab9 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="CSMCalibrationSettings" v-observe-visibility="visibilityChanged">
+  <div id="CSMCalibrationSettings" ref="CSMCalibrationSettingsContainer" class="uk-width-large">
     <!--Show auto calibrate if default plugin is enabled-->
     <div v-if="'calibrate_xy' in actions" class="uk-margin-small">
       <action-button
@@ -58,7 +58,7 @@
 import ActionButton from "@/components/labThingsComponents/actionButton.vue";
 import matrixDisplay from "@/components/ui/matrixDisplay.vue";
 // vue3 migration
-import { markRaw } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 // Export main app
 export default {
@@ -95,6 +95,16 @@ export default {
     },
   },
 
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.CSMCalibrationSettingsContainer,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      { threshold: 0.0 }
+    );
+  },
+
   methods: {
     visibilityChanged(isVisible) {
       if (isVisible) {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 054fc139..34d33d76 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -26,7 +26,6 @@ import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrat
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index 32848411..d3679e80 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -30,7 +30,7 @@ export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton,
+    ServerSpecifiedActionButton
   },
 
   props: {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
index f9dc6654..c591f4de 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -8,7 +8,6 @@
 <script>
 import appSettings from "./displaySetttingsComponents/appSettings.vue";
 import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
-import { markRaw } from "vue";
 
 // Export main app
 export default {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index 59ede7e1..d896a528 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="stageSettings" v-observe-visibility="visibilityChanged" class="uk-width-large">
+  <div id="stageSettings" ref="stageSettingsContainer" class="uk-width-large">
     The microscope stage is a <b>{{ stageType }}</b>
     <div>
       <div class="uk-margin">
@@ -30,7 +30,7 @@
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   name: "StageSettings",
@@ -51,6 +51,16 @@ export default {
     },
   },
 
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.stageSettingsContainer,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      { threshold: 0.0 }
+    );
+  },
+
   methods: {
     visibilityChanged(isVisible) {
       if (isVisible) {
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 546b734f..1200b60f 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component uk-padding-small">
-      <div v-show="!scanning" v-observe-visibility="visibilityChanged" class="uk-padding-small">
+      <div v-show="!scanning" ref="slideScanContent" class="uk-padding-small">
         <h4 v-if="workflowDisplayName" class="workflow-name">
           {{ workflowDisplayName }}
         </h4>
@@ -117,7 +117,7 @@ import actionProgressBar from "../labThingsComponents/actionProgressBar.vue";
 import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 import ActionButton from "../labThingsComponents/actionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   name: "SlideScanContent",
@@ -129,6 +129,7 @@ export default {
     actionProgressBar,
     MiniStreamDisplay,
     ActionButton,
+    ServerSpecifiedPropertyControl
   },
 
   data() {
@@ -162,6 +163,18 @@ export default {
     this.readSettings();
   },
 
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.slideScanContent,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0, // Adjust as needed
+      },
+    );
+  },
+
   methods: {
     visibilityChanged(isVisible) {
       if (isVisible) {
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index c6ba533d..c9e9a6c5 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -36,42 +36,21 @@
 <script>
 // vue3 migration
 import { eventBus } from "../../eventBus.js";
-import { ref } from "vue";
 import { useIntersectionObserver } from "@vueuse/core";
 
 // Export main app
 export default {
   name: "StreamDisplay",
 
-  setup() {
-
-    const streamDisplay = ref(null);
-    const isVisible = ref(false);
-
-    useIntersectionObserver(
-      streamDisplay,
-      ([{ isIntersecting }]) => {
-        isVisible.value = isIntersecting;
-      },
-      {
-        threshold: 0.1,
-      }
-    );
-
-    return {
-      streamDisplay,
-      isVisible,
-    };
-},
-
   data: function () {
     return {
+      isVisible: false,
       displaySize: [0, 0],
       displayPosition: [0, 0],
       resizeTimeoutId: setTimeout(this.doneResizing, 500),
     };
   },
-
+    
   computed: {
     streamEnabled: function () {
       return this.$store.getters.ready && !this.$store.state.disableStream;
@@ -86,12 +65,23 @@ export default {
   },
 
   mounted() {
+    //set up an intersection observer 
+    useIntersectionObserver(
+      this.$refs.streamDisplay,
+      ([{ isIntersecting }]) => {
+        this.isVisible = isIntersecting;
+      },
+      {
+        threshold: 0.0,
+      }
+    );
     // A global signal listener to flash the stream element
     this.onFlashStream = () => {
       this.flashStream();
     };
 
     eventBus.on("globalFlashStream", this.onFlashStream);
+    
     // Mutation observer
     this.sizeObserver = new ResizeObserver(() => {
       this.handleResize(); // For any element attached to the observer, run handleResize() on change
@@ -120,9 +110,6 @@ export default {
   },
 
   methods: {
-    visibilityChanged(isVisible) {
-      this.isVisible = isVisible;
-    },
     flashStream: function () {
       // Run an animation that flashes the stream (for capture feedback)
       let element = this.$refs.streamDisplay;