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

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

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 {

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

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

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 {

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 {