From 0296cef089d073ce6901365eb6b755342069813c Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Sun, 25 Jan 2026 02:07:46 -0600
Subject: [PATCH] ui_migration fix(deps): --preliminary-- Replace value to
 modelvalue, and global emitters. BUG:keys-arrows-wont-move

---
 webapp/package-lock.json                      | 45 ++++++++++++++++++
 webapp/package.json                           |  1 +
 .../components/genericComponents/tabIcon.vue  |  8 +++-
 .../labThingsComponents/actionButton.vue      | 10 ++--
 .../labThingsComponents/inputFromSchema.vue   | 41 +++++++++-------
 .../labThingsComponents/propertyControl.vue   | 10 ++--
 .../paneBackgroundDetect.vue                  | 16 +++++--
 .../controlComponents/positionControl.vue     | 37 +++++++++------
 .../controlComponents/stageControlButtons.vue |  2 +
 .../tabContentComponents/scanListContent.vue  |  4 +-
 .../tabContentComponents/slideScanContent.vue |  6 +--
 .../tabContentComponents/streamContent.vue    | 47 +++++++++++++++----
 12 files changed, 165 insertions(+), 62 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 43086618..c14a7e3f 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "@vitejs/plugin-vue": "^5.0.0",
         "@vue/compat": "^3.2.0",
+        "@vueuse/core": "^14.1.0",
         "axios": "^1.7.7",
         "material-design-icons": "^3.0",
         "mitt": "^3.0.1",
@@ -1393,6 +1394,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -1592,6 +1599,44 @@
         "vue-component-type-helpers": "^2.0.0"
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.1.0.tgz",
+      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.1.0",
+        "@vueuse/shared": "14.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.1.0.tgz",
+      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.1.0.tgz",
+      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index f3b8f83d..3394d56e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/compat": "^3.2.0",
+    "@vueuse/core": "^14.1.0",
     "axios": "^1.7.7",
     "material-design-icons": "^3.0",
     "mitt": "^3.0.1",
diff --git a/webapp/src/components/genericComponents/tabIcon.vue b/webapp/src/components/genericComponents/tabIcon.vue
index 538496fc..b2f6d61e 100644
--- a/webapp/src/components/genericComponents/tabIcon.vue
+++ b/webapp/src/components/genericComponents/tabIcon.vue
@@ -1,5 +1,11 @@
 <template>
-  <a href="#" class="uk-link" :class="classObject" :uk-tooltip="tooltipOptions" @click="setThisTab">
+  <a 
+  href="#" 
+  class="uk-link" 
+  :class="classObject" 
+  :uk-tooltip="tooltipOptions ? tooltipOptions : null"
+  @click="setThisTab"
+  >
     <slot></slot>
     <div v-if="showTitle" class="tabtitle">
       {{ computedTitle }}
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index 3067aa3b..0abb5eb4 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -135,19 +135,19 @@ export default {
 
   watch: {
     progress(newval) {
-      eventBus.emit("update:progress", newval);
+      eventBus.emit("beforeUpdate:progress", newval);
     },
     taskStarted(newval) {
-      eventBus.emit("update:taskStarted", newval);
+      eventBus.emit("beforeUpdate:taskStarted", newval);
     },
     taskRunning(newval) {
-      eventBus.emit("update:taskRunning", newval);
+      eventBus.emit("beforeUpdate:taskRunning", newval);
     },
     log(newval) {
-      eventBus.emit("update:log", newval);
+      eventBus.emit("beforeUpdate:log", newval);
     },
     taskStatus(newval) {
-      eventBus.emit("update:taskStatus", newval);
+      eventBus.emit("beforeUpdate:taskStatus", newval);
     },
   },
 
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index a8da55c4..be5fe947 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -115,9 +115,10 @@ export default {
       type: Object,
       required: true,
     },
-    value: {
+    modelValue: {
       type: null,
-      required: true,
+      required: false,
+      default: undefined,
     },
     label: {
       type: String,
@@ -135,11 +136,11 @@ export default {
       // the value is an array or object. For future updates we stringify and parse
       // (see resetInternalValue). If we do this here there is a chance we get errors
       // as internalValue is still null when rendering starts.
-      internalValue: Array.isArray(this.value)
-        ? [...this.value]
-        : typeof this.value === "object"
-        ? { ...this.value }
-        : this.value,
+      internalValue: Array.isArray(this.modelValue)
+        ? [...this.modelValue]
+        : typeof this.modelValue === "object"
+        ? { ...this.modelValue }
+        : this.modelValue,
       // Is edited can't be computed as we mutate internalValue
       isEdited: false,
       animateUpdate: false,
@@ -208,14 +209,20 @@ export default {
   },
 
   watch: {
-    value() {
-      // Fire updateIsEdited on both value and internal value change,
-      // as change in value may not causse internalValue to change.
-      this.updateIsEdited();
-      this.resetInternalValue();
+    modelValue: {
+      handler() {
+        // Fire updateIsEdited on both value and internal value change,
+        // as change in value may not causse internalValue to change.
+        this.updateIsEdited();
+        this.resetInternalValue();
+      },
+      deep: true,
     },
-    internalValue() {
-      this.updateIsEdited();
+    internalValue: {
+      handler() {
+        this.updateIsEdited();
+      },
+      deep: true,
     },
     animate(updated) {
       if (updated) {
@@ -225,7 +232,7 @@ export default {
   },
 
   mounted() {
-    if (this.value !== undefined) {
+    if (this.modelValue !== undefined) {
       this.resetInternalValue();
     }
   },
@@ -235,7 +242,7 @@ export default {
       // Whenever updatirng th internal value stringify and parse as a form of deepcopy.
       // This ensure that the this.value prop is not mutated for when elements of arrays
       // or objects are updated.
-      this.internalValue = JSON.parse(JSON.stringify(this.value));
+      this.internalValue = JSON.parse(JSON.stringify(this.modelValue));
     },
     requestUpdate: async function () {
       this.$emit("requestUpdate");
@@ -264,7 +271,7 @@ export default {
       }
     },
     updateIsEdited: function () {
-      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
+      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
     },
     animationEnd: function () {
       this.animateUpdate = false;
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index fd691ab0..b16cd63c 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -1,6 +1,6 @@
 <template>
   <input-from-schema
-    v-model="value"
+    v-model="modelValue"
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
@@ -50,7 +50,7 @@ export default {
 
   data() {
     return {
-      value: undefined,
+      modelValue: undefined,
       animate: false,
     };
   },
@@ -76,7 +76,7 @@ export default {
     // Read the property when we're mounted - usually this won't
     // work because the URL isn't set yet. However, it's helpful if
     // the app is reloaded (e.g. from a dev server).
-    if (this.value == undefined) {
+    if (this.modelValue == undefined) {
       this.readProperty();
     }
   },
@@ -84,12 +84,12 @@ export default {
   methods: {
     readProperty: async function () {
       let data = await this.readThingProperty(this.thingName, this.propertyName);
-      this.value = data;
+      this.modelValue = data;
       return data;
     },
     writeProperty: async function (requestedValue) {
       try {
-        this.value = requestedValue;
+        this.modelValue = requestedValue;
         await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
         if (this.readBack) {
           await new Promise((r) => setTimeout(r, this.readBackDelay));
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 2546ad87..ff6a16b4 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -66,14 +66,20 @@ export default {
     };
   },
 
-  async created() {
-    this.readSettings();
-  },
-
   methods: {
+    async safeReadSettings() {
+      if (!this.$store.state.connected) return;
+      
+      try {
+        await this.readSettings();
+      } catch (error) {
+        console.error("Error reading background detector settings:", error);
+      }
+    },
+
     visibilityChanged(isVisible) {
       if (isVisible) {
-        this.readSettings();
+        this.safeReadSettings();
       }
     },
     alertBackgroundSet() {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 1165f71a..f04b7553 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -88,40 +88,49 @@ export default {
   },
 
   async mounted() {
-    let self = this;
     // A global signal listener to perform a move action
-    eventBus.on("globalMoveEvent", self.move);
-    eventBus.on("globalUpdatePositionEvent", self.updatePosition);
+    eventBus.on("globalMoveEvent", this.move);
+    
+    eventBus.on("globalUpdatePositionEvent", this.updatePosition);
     // A global signal listener to perform a move action in pixels
-    eventBus.on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
-      this.moveInImageCoordinatesRequest(x, y, absolute);
-    });
+    
+    this.onMoveImage = (payload) => {
+      const { x, y, absolute } = payload;
+      this.moveInImageCoordinatesRequest(payload.x, payload.y, payload.absolute);
+    };
+
+    eventBus.on("globalMoveInImageCoordinatesEvent", this.onMoveImage);
     // A global signal listener to perform a move in multiples of a step size
-    eventBus.on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
+    
+    this.onMoveStep = (payload) => {
+      const { x_steps, y_steps, z_steps } = payload;
       const navigationStepSize = this.$store.state.navigationStepSize;
       const navigationInvert = this.$store.state.navigationInvert;
       const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
       const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
       const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
-      eventBus.emit("globalMoveEvent", x, y, z, false);
-    });
+      eventBus.emit("globalMoveEvent", {x, y, z, absolute: false});
+    };
+    
+    eventBus.on("globalMoveStepEvent", this.onMoveStep);
     // Update the current position in text boxes
     await this.updatePosition();
   },
 
   beforeUnmount() {
     // Remove global signal listener to perform a move action
-    eventBus.off("globalMoveEvent");
-    eventBus.off("globalMoveInImageCoordinatesEvent");
-    eventBus.off("globalMoveStepEvent");
-    eventBus.off("globalUpdatePositionEvent");
+    eventBus.off("globalMoveEvent", this.move);
+    eventBus.off("globalMoveInImageCoordinatesEvent", this.onMoveImage);
+    eventBus.off("globalMoveStepEvent", this.onMoveStep);
+    eventBus.off("globalUpdatePositionEvent", this.updatePosition);
   },
 
   methods: {
     timeout(ms) {
       return new Promise((resolve) => setTimeout(resolve, ms));
     },
-    async move(x, y, z, absolute) {
+    async move(payload) {
+      const { x, y, z, absolute } = payload;
       // Move the stage, by updating the controls and starting a move task
       // This is equivalent to clicking the "move" button.
       if (this.moveLock) return; // Discard move requests if we're already moving
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index a1920295..4ea04b8c 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import { eventBus } from "../../../eventBus.js";
+
 export default {
   name: "StageControlButtons",
   methods: {
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index c7412e47..d5e532b8 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -180,13 +180,13 @@ export default {
 
   beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
-    eventBus.off("globalUpdateScans");
+    eventBus.off("globalUpdateScans", this.updateScans);
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {
       this.unwatchStoreFunction();
       this.unwatchStoreFunction = null;
     }
-    eventBus.off("modalClosed"); // Clean up event listener
+    eventBus.off("modalClosed", this.updateScans); // Clean up event listener
   },
 
   methods: {
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 67684d85..beba5c72 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -90,9 +90,9 @@
             submit-label="Start Smart Scan"
             :can-terminate="true"
             @taskStarted="startScanning"
-            @update:taskStatus="taskStatus = $event"
-            @update:progress="progress = $event"
-            @update:log="log = $event"
+            @beforeUpdate:taskStatus="taskStatus = $event"
+            @beforeUpdate:progress="progress = $event"
+            @beforeUpdate:log="log = $event"
           />
         </div>
       </div>
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index f6f001b7..c6ba533d 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.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
@@ -37,14 +36,36 @@
 <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),
@@ -66,18 +87,21 @@ export default {
 
   mounted() {
     // A global signal listener to flash the stream element
-    eventBus.on("globalFlashStream", () => {
+    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
     });
     // Fetch streamDisplay component by ref
-    const streamDisplayElement = this.$refs.streamDisplay.parentNode;
-    // Attach streamDisplay to the size observer
-    this.sizeObserver.observe(streamDisplayElement);
+    if (this.$refs.streamDisplay && this.$refs.streamDisplay.parentNode) {
+      const streamDisplayElement = this.$refs.streamDisplay.parentNode;
+      // Attach streamDisplay to the size observer
+      this.sizeObserver.observe(streamDisplayElement);
+    }
   },
 
   created: function () {
@@ -86,9 +110,9 @@ export default {
 
   beforeUnmount: function () {
     // Remove global signal listener to change the GPU preview state
-    eventBus.off("globalTogglePreview");
+    //eventBus.off("globalTogglePreview", true);
     // Remove global signal listener to flash the stream element
-    eventBus.off("globalFlashStream");
+    eventBus.off("globalFlashStream", this.onFlashStream);
     // Disconnect the size observer
     this.sizeObserver.disconnect();
     // Remove from the array of active streams
@@ -129,7 +153,10 @@ export default {
       let yRelative = (0.5 * event.target.offsetHeight - yCoordinate) * scale;
 
       // Emit a signal to move, acted on by paneControl.vue
-      eventBus.emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
+      eventBus.emit("globalMoveInImageCoordinatesEvent", {
+        x:-xRelative,
+        y:-yRelative
+      });
     },
 
     handleResize: function () {