ui_migration fix(deps): --preliminary-- fixed replaced v-observe-visibility by vueuse useIntersectionObserver

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",

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",

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">

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",

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 {

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",

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 {

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",

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");

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();

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 {

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",

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

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 {

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) {

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 {

webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -30,7 +30,7 @@ export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton,
+    ServerSpecifiedActionButton
   },
 
   props: {

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 {

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) {

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) {

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;