From ce19ea3fc0081dc66e67106bfcab5a5b8df73506 Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Sun, 15 Feb 2026 01:03:29 -0600
Subject: [PATCH] ui_migration lint(fix): changes fixed with lint ecmaversion &
 es2021

---
 webapp/.eslintrc.js                           | 29 +++++-------
 webapp/src/App.vue                            | 28 ++++++-----
 webapp/src/components/appContent.vue          |  8 ++--
 .../genericComponents/miniStreamDisplay.vue   |  4 +-
 .../genericComponents/progressBar.vue         |  2 +
 .../components/genericComponents/tabIcon.vue  | 14 +++---
 .../labThingsComponents/actionButton.vue      | 47 +++++++++----------
 .../labThingsComponents/actionLogDisplay.vue  |  2 +-
 .../labThingsComponents/actionStatusModal.vue |  7 ++-
 .../labThingsComponents/inputFromSchema.vue   | 15 +++---
 .../labThingsComponents/propertyControl.vue   |  9 ++--
 .../serverSpecifiedActionButton.vue           |  4 +-
 .../serverSpecifiedPropertyControl.vue        |  2 +-
 .../syncPropertyButton.vue                    |  6 ++-
 webapp/src/components/loadingContent.vue      |  5 +-
 .../modalComponents/calibrationWizard.vue     |  2 +
 .../calibrationWizardTask.vue                 |  2 +
 .../cameraMainCalibrationStep.vue             |  6 ++-
 .../cameraCalibrationTask.vue                 | 13 +++--
 .../cameraStageMappingTask.vue                |  9 +++-
 .../csmSteps/focusStep.vue                    |  2 +-
 .../csmSteps/runCsmStep.vue                   |  4 +-
 .../singleStepTask.vue                        |  7 ++-
 .../stepTemplateWithStream.vue                |  2 +-
 .../aboutComponents/statusPane.vue            |  4 +-
 .../tabContentComponents/aboutContent.vue     |  2 +-
 .../paneBackgroundDetect.vue                  | 28 +++++------
 .../backgroundDetectContent.vue               |  2 +-
 .../controlComponents/autofocusControl.vue    |  4 +-
 .../controlComponents/paneControl.vue         |  2 +-
 .../controlComponents/positionControl.vue     |  4 +-
 .../controlComponents/stageControlButtons.vue |  2 +-
 .../tabContentComponents/controlContent.vue   |  2 +-
 .../tabContentComponents/loggingContent.vue   |  4 +-
 .../openSeadragonViewer.vue                   |  6 +--
 .../scanListComponents/scanCard.vue           |  8 ++--
 .../scanListComponents/scanViewer.vue         |  4 +-
 .../tabContentComponents/scanListContent.vue  | 11 ++---
 .../settingsComponents/CSMSettings.vue        |  2 +-
 .../CSMCalibrationSettings.vue                |  6 ++-
 .../settingsComponents/cameraSettings.vue     |  2 +-
 .../cameraCalibrationSettings.vue             |  5 +-
 .../settingsComponents/displaySettings.vue    |  2 +-
 .../settingsComponents/stageSettings.vue      |  4 +-
 .../tabContentComponents/settingsContent.vue  |  3 +-
 .../tabContentComponents/slideScanContent.vue | 41 +++++++++++-----
 .../tabContentComponents/streamContent.vue    | 12 ++---
 .../tabContentComponents/viewContent.vue      |  1 -
 webapp/src/js_utils/formatter.mjs             |  5 +-
 webapp/src/main.js                            |  4 +-
 webapp/src/mixins/labThingsMixins.js          |  4 +-
 webapp/vite.config.mjs                        | 32 ++++++-------
 52 files changed, 242 insertions(+), 193 deletions(-)

diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index 72f9b826..4cce3865 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -2,25 +2,20 @@ module.exports = {
   root: true,
   env: {
     node: true,
-    es2021: true,  // ✅ Updated for modern JS
+    es2021: true,
   },
   parser: "vue-eslint-parser",
   parserOptions: {
     parser: "@babel/eslint-parser",
     requireConfigFile: false,
-    ecmaVersion: 2021,  // ✅ Updated
+    ecmaVersion: 2021,
     sourceType: "module",
   },
-  extends: [
-    "plugin:vue/vue3-recommended",  // ✅ Changed from vue/recommended to vue3-recommended
-    "eslint:recommended", 
-    "@vue/prettier"
-  ],
+  extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-    
-    // ✅ Vue 3 migration warnings - detect deprecated patterns
+
     "vue/no-deprecated-slot-attribute": "warn",
     "vue/no-deprecated-v-on-native-modifier": "warn",
     "vue/no-deprecated-dollar-listeners-api": "warn",
@@ -37,15 +32,13 @@ module.exports = {
     "vue/no-deprecated-v-is": "warn",
     "vue/no-lifecycle-after-await": "warn",
     "vue/no-watch-after-await": "warn",
-    
-    // ✅ Vue 3 best practices
-    "vue/require-explicit-emits": "warn",  // Require emits declaration
-    "vue/multi-word-component-names": "warn",  // Component naming
-    "vue/no-v-for-template-key-on-child": "error",  // Key placement
-    "vue/no-v-model-argument": "off",  // Allow v-model arguments (Vue 3 feature)
-    
-    // ✅ Relaxed for migration period (can be stricter later)
+
+    "vue/require-explicit-emits": "warn", // Require emits declaration
+    "vue/multi-word-component-names": "warn", // Component naming
+    "vue/no-v-for-template-key-on-child": "error", // Key placement
+    "vue/no-v-model-argument": "error", // Allow v-model arguments (Vue 3 feature)
+
     "vue/no-unused-components": "warn",
     "vue/no-unused-vars": "warn",
   },
-};
\ No newline at end of file
+};
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 2bac1622..0254039d 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,4 +1,4 @@
-<template :key="shortcut.shortcut">
+<template>
   <div id="app" class="uk-height-1-1 uk-margin-remove uk-padding-remove" :class="handleTheme">
     <!-- this stops the app loading until setConnected is committed in the store, this means
      other components will not load until we have Thing Descriptions. -->
@@ -10,6 +10,7 @@
         <button class="uk-modal-close-default" type="button" uk-close></button>
         <div
           v-for="shortcut in keyboardManual"
+          :key="shortcut.shortcut"
           class="uk-margin-small"
           uk-grid
         >
@@ -25,14 +26,13 @@
 // Import components
 import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
-import MouseTrap from "mousetrap";
+import Mousetrap from "mousetrap";
 // vue3 migration
-import { markRaw } from "vue";
 import { eventBus } from "./eventBus.js";
 
-MouseTrap.prototype.stopCallback = function (e, element) {
+Mousetrap.prototype.stopCallback = function (e, element) {
   // if the element has the class "mousetrap" then no need to stop
-  if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
+  if ((" " + element.className + " ").indexOf(" Mousetrap ") > -1) {
     return false;
   }
 
@@ -56,7 +56,7 @@ export default {
 
   components: {
     appContent,
-    loadingContent
+    loadingContent,
   },
 
   data: function () {
@@ -154,10 +154,10 @@ export default {
 
     // Focus keys
     Mousetrap.bind("pageup", () => {
-      eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: 1});
+      eventBus.emit("globalMoveStepEvent", { x: 0, y: 0, z: 1 });
     });
     Mousetrap.bind("pagedown", () => {
-      eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: -1});
+      eventBus.emit("globalMoveStepEvent", { x: 0, y: 0, z: -1 });
     });
     this.keyboardManual.push({
       shortcut: "pgup / pgdn",
@@ -248,9 +248,14 @@ export default {
         event.target.parentNode.classList.contains("scrollTarget") ||
         event.target.classList.contains("scrollTarget")
       ) {
-        var z_rel = event.deltaY / 100;
+        const z_steps = event.deltaY / 100;
         // Emit a signal to move, acted on by panelControl.vue
-        eventBus.emit("globalMoveStepEvent", {x: 0, y: 0, z: z_rel, absolute: false});
+        eventBus.emit("globalMoveStepEvent", {
+          x_steps: 0,
+          y_steps: 0,
+          z_steps: z_steps,
+          absolute: false,
+        });
       }
     },
 
@@ -258,7 +263,6 @@ export default {
       // Calculate movement array
       var x_rel = 0;
       var y_rel = 0;
-      var z_rel = 0;
       // 37 corresponds to the left key
       if (37 in this.arrowKeysDown) {
         x_rel = x_rel - 1;
@@ -277,7 +281,7 @@ export default {
       }
       // Make a position request
       // Emit a signal to move, acted on by panelControl.vue
-      eventBus.emit("globalMoveStepEvent", {x: x_rel, y: y_rel, z: 0});
+      eventBus.emit("globalMoveStepEvent", { x: x_rel, y: y_rel, z: 0 });
     },
   },
 };
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index df186fe9..b2f6960f 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app-content" class="uk-margin-remove uk-padding-remove uk-height-1-1" uk-grid>
     <!-- Initialisation modals -->
-    <calibrationWizard ref="calibrationWizard" @onClose="enterApp()"></calibrationWizard>
+    <calibrationWizard ref="calibrationWizard" @on-close="enterApp()"></calibrationWizard>
     <!-- Vertical tab bar -->
     <div id="switcher-left-container">
       <div
@@ -69,7 +69,7 @@
         :require-connection="true"
         :current-tab="currentTab"
       >
-        <component :is="item.component" @scrollTop="scrollToTop"></component>
+        <component :is="item.component" @scroll-top="scrollToTop"></component>
       </tabContent>
     </div>
   </div>
@@ -91,7 +91,7 @@ import settingsContent from "./tabContentComponents/settingsContent.vue";
 import slideScanContent from "./tabContentComponents/slideScanContent.vue";
 import viewContent from "./tabContentComponents/viewContent.vue";
 // vue3 migration
-import { shallowRef, markRaw, ref } from 'vue'
+import { markRaw } from "vue";
 import { eventBus } from "../eventBus.js";
 
 // Import modal components for device initialisation
@@ -104,7 +104,7 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    calibrationWizard
+    calibrationWizard,
   },
   data: function () {
     return {
diff --git a/webapp/src/components/genericComponents/miniStreamDisplay.vue b/webapp/src/components/genericComponents/miniStreamDisplay.vue
index 1f9cafc9..8b0ed499 100644
--- a/webapp/src/components/genericComponents/miniStreamDisplay.vue
+++ b/webapp/src/components/genericComponents/miniStreamDisplay.vue
@@ -16,7 +16,7 @@
 
 <script>
 //vue3 migration
-import { useIntersectionObserver } from '@vueuse/core';
+import { useIntersectionObserver } from "@vueuse/core";
 
 // Export main app
 export default {
@@ -42,7 +42,7 @@ export default {
       },
       {
         threshold: 0.0,
-      }
+      },
     );
   },
 };
diff --git a/webapp/src/components/genericComponents/progressBar.vue b/webapp/src/components/genericComponents/progressBar.vue
index f56655f1..9a3af4dc 100644
--- a/webapp/src/components/genericComponents/progressBar.vue
+++ b/webapp/src/components/genericComponents/progressBar.vue
@@ -10,6 +10,8 @@ export default {
 
   props: {},
 
+  emits: ["set-tab"],
+
   computed: {
     tooltipOptions: function () {
       var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
diff --git a/webapp/src/components/genericComponents/tabIcon.vue b/webapp/src/components/genericComponents/tabIcon.vue
index b2f6d61e..39742283 100644
--- a/webapp/src/components/genericComponents/tabIcon.vue
+++ b/webapp/src/components/genericComponents/tabIcon.vue
@@ -1,10 +1,10 @@
 <template>
-  <a 
-  href="#" 
-  class="uk-link" 
-  :class="classObject" 
-  :uk-tooltip="tooltipOptions ? tooltipOptions : null"
-  @click="setThisTab"
+  <a
+    href="#"
+    class="uk-link"
+    :class="classObject"
+    :uk-tooltip="tooltipOptions ? tooltipOptions : null"
+    @click="setThisTab"
   >
     <slot></slot>
     <div v-if="showTitle" class="tabtitle">
@@ -49,6 +49,8 @@ export default {
     requireConnection: Boolean,
   },
 
+  emits: ["set-tab"],
+
   computed: {
     computedTitle: function () {
       if (this.title !== undefined) {
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index cf2ec1a5..e3099a8a 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -21,7 +21,7 @@
       :task-running="taskRunning"
       :task-started="taskStarted"
       :task-status="taskStatus"
-      @terminateTask="terminateTask"
+      @terminate-task="terminateTask"
     />
   </div>
 </template>
@@ -29,33 +29,16 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
-//vue3 migration 
+//vue3 migration
 import { eventBus } from "../../eventBus.js";
 import { useIntersectionObserver } from "@vueuse/core";
 
-
 export default {
   name: "ActionButton",
 
-  emits: [
-    'update:progress',
-    'update:taskStarted', 
-    'update:taskRunning',
-    'update:log',
-    'update:taskStatus',
-    'submit',
-    'taskStarted',
-    'taskRunning',
-    'response',
-    'completed',
-    'cancelled',
-    'finished',
-    'error'
-  ],
-
-  components: { 
+  components: {
     ActionProgressBar,
-    ActionStatusModal
+    ActionStatusModal,
   },
 
   props: {
@@ -119,6 +102,22 @@ export default {
     },
   },
 
+  emits: [
+    "update:progress",
+    "update:taskStarted",
+    "update:taskRunning",
+    "update:log",
+    "update:taskStatus",
+    "submit",
+    "taskStarted",
+    "taskRunning",
+    "response",
+    "completed",
+    "cancelled",
+    "finished",
+    "error",
+  ],
+
   data: function () {
     return {
       taskUrl: null,
@@ -173,14 +172,14 @@ export default {
       handler(newval) {
         this.$emit("update:log", newval);
       },
-      deep: true
+      deep: true,
     },
     taskStatus: {
       handler(newval) {
         this.$emit("update:taskStatus", newval);
       },
-    }
-},
+    },
+  },
 
   mounted() {
     useIntersectionObserver(
diff --git a/webapp/src/components/labThingsComponents/actionLogDisplay.vue b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
index 897bd950..caef925f 100644
--- a/webapp/src/components/labThingsComponents/actionLogDisplay.vue
+++ b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
@@ -69,7 +69,7 @@ export default {
     taskStatus: {
       handler() {
         this.scrollToBottom();
-      }
+      },
     },
   },
 
diff --git a/webapp/src/components/labThingsComponents/actionStatusModal.vue b/webapp/src/components/labThingsComponents/actionStatusModal.vue
index b7fe4f63..3b9c4b1b 100644
--- a/webapp/src/components/labThingsComponents/actionStatusModal.vue
+++ b/webapp/src/components/labThingsComponents/actionStatusModal.vue
@@ -33,10 +33,11 @@ import { eventBus } from "../../eventBus.js";
 
 export default {
   name: "ActionStatusModal",
-  components: { 
+  components: {
     ActionProgressBar,
-    ActionLogDisplay
+    ActionLogDisplay,
   },
+
   props: {
     title: {
       type: String,
@@ -69,6 +70,8 @@ export default {
     },
   },
 
+  emits: ["terminateTask"],
+
   methods: {
     show() {
       UIkit.modal(this.$refs.modal).show();
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 227e3e1a..b8795312 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -106,10 +106,8 @@ export default {
   name: "InputFromSchema",
 
   components: {
-    syncPropertyButton
+    syncPropertyButton,
   },
-
-  compatConfig: { COMPONENT_V_MODEL: false },
   props: {
     dataSchema: {
       type: Object,
@@ -130,6 +128,10 @@ export default {
     },
   },
 
+  emits: ["requestUpdate", "sendValue", "animationShown"],
+
+  compatConfig: { COMPONENT_V_MODEL: false },
+
   data() {
     return {
       // Initialise with a copy to try to prevent the this.modelValue prop being mutated if
@@ -139,8 +141,8 @@ export default {
       internalValue: Array.isArray(this.modelValue)
         ? [...this.modelValue]
         : typeof this.modelValue === "object"
-        ? { ...this.modelValue }
-        : this.modelValue,
+          ? { ...this.modelValue }
+          : this.modelValue,
       // Is edited can't be computed as we mutate internalValue
       isEdited: false,
       animateUpdate: null,
@@ -270,7 +272,8 @@ export default {
       }
     },
     updateIsEdited: function () {
-      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
+      this.isEdited =
+        this.deepStringify(this.internalValue) !== this.deepStringify(this.modelValue);
     },
     animationEnd: function () {
       this.animateUpdate = null;
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index d0b1b953..675b0192 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -4,9 +4,9 @@
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
-    @requestUpdate="readProperty"
-    @sendValue="writeProperty"
-    @animationShown="resetAnimate"
+    @request-update="readProperty"
+    @send-value="writeProperty"
+    @animation-shown="resetAnimate"
   />
 </template>
 
@@ -15,12 +15,11 @@ import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
 // vue3 migration
 
-
 export default {
   name: "PropertyControl",
 
   components: {
-    InputFromSchema
+    InputFromSchema,
   },
 
   props: {
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
index b1b4cae9..cb2c625a 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
@@ -24,7 +24,7 @@ export default {
   name: "ServerSpecifiedActionButton",
 
   components: {
-    ActionButton
+    ActionButton,
   },
 
   props: {
@@ -34,6 +34,8 @@ export default {
     },
   },
 
+  emits: ["response", "finished"],
+
   methods: {
     /**
      * Runs when the ActionButton's action completes successfully.
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
index 652b7aed..d211d478 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue
@@ -18,7 +18,7 @@ export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl
+    PropertyControl,
   },
 
   props: {
diff --git a/webapp/src/components/labThingsComponents/syncPropertyButton.vue b/webapp/src/components/labThingsComponents/syncPropertyButton.vue
index 7fb7d186..f93f5d66 100644
--- a/webapp/src/components/labThingsComponents/syncPropertyButton.vue
+++ b/webapp/src/components/labThingsComponents/syncPropertyButton.vue
@@ -12,6 +12,8 @@
 <script>
 export default {
   name: "SyncPropertyButton",
+
+  emits: ["click"],
 };
 </script>
 
@@ -26,7 +28,9 @@ export default {
 
 .material-symbols-outlined.sync-icon {
   color: #888;
-  transition: transform 0.3s ease, color 0.3s ease;
+  transition:
+    transform 0.3s ease,
+    color 0.3s ease;
 }
 
 .material-symbols-outlined.sync-icon:hover {
diff --git a/webapp/src/components/loadingContent.vue b/webapp/src/components/loadingContent.vue
index 5b1d0994..8547f528 100644
--- a/webapp/src/components/loadingContent.vue
+++ b/webapp/src/components/loadingContent.vue
@@ -15,14 +15,13 @@
 <script>
 import devTools from "./tabContentComponents/aboutComponents/devTools.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "LoadingContent",
 
-  components: { 
-    devTools 
+  components: {
+    devTools,
   },
 
   data: function () {
diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index dcad990f..056c33d4 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -30,6 +30,8 @@ export default {
 
   components: {},
 
+  emits: ["onClose"],
+
   data: function () {
     return {
       isNeeded: undefined,
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
index 3a90c309..c00f514b 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
@@ -66,6 +66,8 @@ export default {
     },
   },
 
+  emits: ["back", "next"],
+
   data() {
     return {
       stepIndex: this.startOnLast ? this.steps.length - 1 : 0,
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
index f4ba06d3..df86027f 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
@@ -9,7 +9,7 @@
         <cameraCalibrationSettings
           :show-extra-settings="false"
           :camera-uri="cameraUri"
-          @actionFinished="checkCalibrationState"
+          @action-finished="checkCalibrationState"
         />
       </div>
     </template>
@@ -26,9 +26,11 @@ export default {
 
   components: {
     stepTemplateWithStream,
-    cameraCalibrationSettings
+    cameraCalibrationSettings,
   },
 
+  emits: ["awaiting-user"],
+
   computed: {
     cameraUri: function () {
       return `${this.$store.getters.baseUri}/camera/`;
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
index 1b148a39..13ab9135 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
@@ -19,8 +19,10 @@ import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { 
-    calibrationWizardTask},
+  components: {
+    calibrationWizardTask,
+  },
+
   props: {
     // Standard calibrationWizardTask props below:
     first: Boolean,
@@ -31,9 +33,14 @@ export default {
     },
   },
 
+  emits: ["next", "back"],
+
   data: function () {
     return {
-      steps: [{ component: markRaw(camCalibrationExplanation) }, { component: markRaw(cameraMainCalibrationStep)}],
+      steps: [
+        { component: markRaw(camCalibrationExplanation) },
+        { component: markRaw(cameraMainCalibrationStep) },
+      ],
     };
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
index 14f30b80..78fa59e6 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
@@ -21,7 +21,7 @@ import { markRaw } from "vue";
 export default {
   name: "CameraCalibrationTask",
   components: {
-    calibrationWizardTask
+    calibrationWizardTask,
   },
   props: {
     // Standard calibrationWizardTask props below:
@@ -32,10 +32,15 @@ export default {
       default: false,
     },
   },
+  emits: ["next", "back"],
 
   data: function () {
     return {
-      steps: [{ component: markRaw(csmExplanation) }, { component: markRaw(focusStep) }, { component: markRaw(runCsmStep) }],
+      steps: [
+        { component: markRaw(csmExplanation) },
+        { component: markRaw(focusStep) },
+        { component: markRaw(runCsmStep) },
+      ],
     };
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index e481b644..bc3e6ef8 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -37,7 +37,7 @@ export default {
 
   components: {
     stepTemplateWithStream,
-    ActionButton
+    ActionButton,
   },
 };
 </script>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
index 92e77f89..849c24c4 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue
@@ -8,7 +8,7 @@
       <div class="action-button-container">
         <CSMCalibrationSettings
           :show-extra-settings="false"
-          @recalibrateResponse="checkCalibrationState"
+          @recalibrate-response="checkCalibrationState"
         />
       </div>
     </template>
@@ -28,6 +28,8 @@ export default {
     CSMCalibrationSettings,
   },
 
+  emits: ["awaiting-user"],
+
   mounted() {
     this.checkCalibrationState();
   },
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
index b84f37d4..ab7f46ae 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
@@ -29,9 +29,10 @@ import { markRaw } from "vue";
 
 export default {
   name: "SingleStepTask",
-  components: { 
-    calibrationWizardTask
+  components: {
+    calibrationWizardTask,
   },
+
   props: {
     // This must be sent
     stepComponent: {
@@ -56,6 +57,8 @@ export default {
     },
   },
 
+  emits: ["next", "back"],
+
   data: function () {
     return {
       steps: [{ component: markRaw(this.stepComponent), props: this.stepProps }],
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
index 010fe489..5815dab3 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue
@@ -14,7 +14,7 @@ export default {
   name: "StepTemplateWithStream",
 
   components: {
-    miniStreamDisplay
+    miniStreamDisplay,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 90fdd0ba..689c413a 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -68,8 +68,8 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
 
 export default {
   name: "StatusPane",
-  components: { 
-    ActionButton
+  components: {
+    ActionButton,
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/aboutContent.vue b/webapp/src/components/tabContentComponents/aboutContent.vue
index ba3b4b38..5a487f83 100644
--- a/webapp/src/components/tabContentComponents/aboutContent.vue
+++ b/webapp/src/components/tabContentComponents/aboutContent.vue
@@ -31,7 +31,7 @@ export default {
 
   components: {
     devTools,
-    statusPane
+    statusPane,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 9f182789..4c3e356a 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -53,7 +53,7 @@ import { useIntersectionObserver } from "@vueuse/core";
 export default {
   components: {
     ActionButton,
-    ServerSpecifiedPropertyControl
+    ServerSpecifiedPropertyControl,
   },
 
   data() {
@@ -70,10 +70,22 @@ export default {
     await this.readSettings();
   },
 
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.backgroundDetectContent,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0,
+      },
+    );
+  },
+
   methods: {
     async safeReadSettings() {
       if (!this.$store.state.connected) return;
-      
+
       try {
         await this.readSettings();
       } catch (error) {
@@ -111,18 +123,6 @@ 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 a88ec07a..e433cca1 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectContent.vue
@@ -20,7 +20,7 @@ export default {
 
   components: {
     paneBackgroundDetect,
-    streamDisplay
+    streamDisplay,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
index 039553a4..946a20ea 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue
@@ -9,7 +9,7 @@
         :submit-label="'Autofocus'"
         :button-primary="true"
         :submit-on-event="'globalFastAutofocusEvent'"
-        @taskStarted="onAutofocus"
+        @task-started="onAutofocus"
         @finished="afterAutofocus"
         @error="modalError"
       />
@@ -25,7 +25,7 @@ export default {
   name: "AutofocusControl",
 
   components: {
-    ActionButton
+    ActionButton,
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index f0b07666..e2865a53 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -42,7 +42,7 @@ export default {
   components: {
     ActionButton,
     positionControl,
-    autofocusControl
+    autofocusControl,
   },
 
   computed: {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
index 04c6b9c2..97eebdcb 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/positionControl.vue
@@ -15,8 +15,8 @@ and zero position buttons. It also includes the d-pad.
             <!-- Text boxes to set and view position -->
             <div class="input-and-buttons-container">
               <input
-                :key="`setPosition_${key}`"
                 v-for="(_v, key) in setPosition"
+                :key="`setPosition_${key}`"
                 v-model="setPosition[key]"
                 class="uk-form-small numeric-setting-line-input"
                 type="number"
@@ -70,7 +70,7 @@ export default {
   components: {
     ActionButton,
     syncPropertyButton,
-    stageControlButtons
+    stageControlButtons,
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
index 306a39b2..775ce234 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue
@@ -43,7 +43,7 @@ export default {
   name: "StageControlButtons",
   methods: {
     move(x, y, z) {
-      eventBus.emit("globalMoveStepEvent", {x, y, z, absolute: false});
+      eventBus.emit("globalMoveStepEvent", { x, y, z, absolute: false });
     },
   },
 };
diff --git a/webapp/src/components/tabContentComponents/controlContent.vue b/webapp/src/components/tabContentComponents/controlContent.vue
index 208ad53f..d86aaebc 100644
--- a/webapp/src/components/tabContentComponents/controlContent.vue
+++ b/webapp/src/components/tabContentComponents/controlContent.vue
@@ -20,7 +20,7 @@ export default {
 
   components: {
     paneControl,
-    streamDisplay
+    streamDisplay,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 70640dd1..e2c8ee19 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -91,9 +91,11 @@ export default {
 
   components: {
     Paginate,
-    EndpointButton
+    EndpointButton,
   },
 
+  emits: ["scrollTop"],
+
   data: function () {
     return {
       maxitems: 20,
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index 67126b16..221c3350 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -61,7 +61,7 @@ export default {
       ([{ isIntersecting }]) => {
         this.visibilityChanged(isIntersecting);
       },
-      { threshold: 0.0 }
+      { threshold: 0.0 },
     );
 
     if (this.src) {
@@ -80,19 +80,17 @@ export default {
     visibilityChanged(isVisible) {
       // adding this check to avoid error when the viewer is not yet initialized.
       if (isVisible) {
-        
         if (!this.osdViewer && this.src) {
           this.loadOpenSeaDragon(this.src);
         }
       } else {
-        
         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 af495022..33370803 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -7,7 +7,7 @@
             id="thumbnail-stitched-image"
             class="thumbnail-fit"
             :src="thumbnailPath"
-            onerror="this.src='/titleiconpink.svg';"
+            onerror="this.src = '/titleiconpink.svg'"
             @click="requestViewer"
           />
         </div>
@@ -87,9 +87,9 @@ import EndpointButton from "../../labThingsComponents/endpointButton.vue";
 // Export main app
 export default {
   name: "ScanCard",
-  components: { 
+  components: {
     actionButton,
-    EndpointButton
+    EndpointButton,
   },
 
   props: {
@@ -107,6 +107,8 @@ export default {
     },
   },
 
+  emits: ["viewer-requested", "update-requested"],
+
   computed: {
     downloadStitchFile() {
       return `${this.$store.getters.baseUri}/smart_scan/get_stitch/${this.scanData.name}`;
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
index 2a47848b..16b39bb5 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -59,8 +59,8 @@ import OpenSeadragonViewer from "./openSeadragonViewer.vue";
 
 export default {
   name: "ScanViewerModal",
-  components: { 
-    OpenSeadragonViewer
+  components: {
+    OpenSeadragonViewer,
   },
   props: {
     selectedScan: {
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 17b3f7f7..3bdd5a95 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="galleryDisplay"
-    class="galleryDisplay uk-padding uk-padding-remove-top"
-  >
+  <div ref="galleryDisplay" class="galleryDisplay uk-padding uk-padding-remove-top">
     <!-- Gallery nav bar -->
     <nav class="gallery-navbar uk-navbar-container uk-navbar-transparent" uk-navbar="mode: click">
       <!-- Right side buttons -->
@@ -107,12 +104,14 @@ import { useIntersectionObserver } from "@vueuse/core";
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { 
+  components: {
     actionButton,
     scanCard,
-    ScanViewerModal
+    ScanViewerModal,
   },
 
+  emits: ["scrollTop"],
+
   data: function () {
     return {
       scans: [],
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
index ce024020..f8214f5d 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue
@@ -25,7 +25,7 @@ export default {
 
   components: {
     CSMCalibrationSettings,
-    miniStreamDisplay
+    miniStreamDisplay,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 1f388ab9..62e90b61 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -66,7 +66,7 @@ export default {
 
   components: {
     ActionButton,
-    matrixDisplay
+    matrixDisplay,
   },
 
   props: {
@@ -77,6 +77,8 @@ export default {
     },
   },
 
+  emits: ["recalibrateResponse"],
+
   data() {
     return {
       csmMatrix: undefined,
@@ -101,7 +103,7 @@ export default {
       ([{ isIntersecting }]) => {
         this.visibilityChanged(isIntersecting);
       },
-      { threshold: 0.0 }
+      { threshold: 0.0 },
     );
   },
 
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 34d33d76..79786911 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -34,7 +34,7 @@ export default {
   components: {
     cameraCalibrationSettings,
     miniStreamDisplay,
-    ServerSpecifiedPropertyControl
+    ServerSpecifiedPropertyControl,
   },
 
   data() {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
index d3679e80..7133aa33 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue
@@ -23,14 +23,13 @@
 <script>
 import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton
+    ServerSpecifiedActionButton,
   },
 
   props: {
@@ -45,6 +44,8 @@ export default {
     },
   },
 
+  emits: ["actionFinished"],
+
   data() {
     return {
       primaryCalibrationActions: [],
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
index c591f4de..4a5476ba 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue
@@ -15,7 +15,7 @@ export default {
 
   components: {
     streamSettings,
-    appSettings
+    appSettings,
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index d896a528..af03196c 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -36,7 +36,7 @@ export default {
   name: "StageSettings",
 
   components: {
-    ActionButton
+    ActionButton,
   },
 
   data: function () {
@@ -57,7 +57,7 @@ export default {
       ([{ isIntersecting }]) => {
         this.visibilityChanged(isIntersecting);
       },
-      { threshold: 0.0 }
+      { threshold: 0.0 },
     );
   },
 
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 656b3dbe..f17a2708 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -70,7 +70,6 @@ import tabContent from "../genericComponents/tabContent.vue";
 // vue3 migration
 import { markRaw } from "vue";
 
-
 // Export main app
 export default {
   name: "SettingsContent",
@@ -78,7 +77,7 @@ export default {
   components: {
     tabIcon,
     tabContent,
-    calibrationWizard
+    calibrationWizard,
   },
 
   data: function () {
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 037258f3..93cf3a51 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -65,10 +65,10 @@
             :submit-data="{ scan_name: scan_name }"
             submit-label="Start Smart Scan"
             :can-terminate="true"
-            @taskStarted="startScanning"
-            @beforeUpdate:taskStatus="taskStatus = $event"
-            @beforeUpdate:progress="progress = $event"
-            @beforeUpdate:log="log = $event"
+            @task-started="startScanning"
+            @before-update:task-status="taskStatus = $event"
+            @before-update:progress="progress = $event"
+            @before-update:log="log = $event"
           />
         </div>
       </div>
@@ -143,7 +143,7 @@ export default {
     actionProgressBar,
     MiniStreamDisplay,
     ActionButton,
-    ServerSpecifiedPropertyControl
+    ServerSpecifiedPropertyControl,
   },
 
   data() {
@@ -176,7 +176,11 @@ export default {
 
   async created() {
     this.readSettings();
-    this.workflowOptions = await this.readThingProperty("smart_scan", "workflow_display_names", true);
+    this.workflowOptions = await this.readThingProperty(
+      "smart_scan",
+      "workflow_display_names",
+      true,
+    );
   },
 
   mounted() {
@@ -203,16 +207,21 @@ export default {
       this.workflowName = await this.readThingProperty("smart_scan", "workflow_name");
 
       if (!this.workflowName) {
-          console.warn("Could not read workflow_name, using default");
-          this.workflowName = "histo_scan_workflow";
-        }
+        console.warn("Could not read workflow_name, using default");
+        this.workflowName = "histo_scan_workflow";
+      }
 
       if (this.workflowName) {
         console.log("Current workflow name: ", this.workflowName);
         this.ready = await this.readThingProperty(this.workflowName, "ready", true);
-        this.workflowSettings = await this.readThingProperty(this.workflowName, "settings_ui", true) || [];
+        this.workflowSettings =
+          (await this.readThingProperty(this.workflowName, "settings_ui", true)) || [];
         console.log(this.workflowSettings);
-        this.workflowDisplayName = await this.readThingProperty(this.workflowName, "display_name", true);
+        this.workflowDisplayName = await this.readThingProperty(
+          this.workflowName,
+          "display_name",
+          true,
+        );
         this.workflowBlurb = await this.readThingProperty(this.workflowName, "ui_blurb", true);
       }
     },
@@ -256,7 +265,7 @@ export default {
           this.lastStitchedImage = `${this.$store.getters.baseUri}/smart_scan/latest_preview_stitch.jpg?t=${mtime}`;
           console.log("Updated preview image URL: ", this.lastStitchedImage);
         }
-        
+
         this.lastScanName = await this.readThingProperty("smart_scan", "latest_scan_name", true);
         setTimeout(this.pollScan, 1000); // keep rescheduling until it's stopped
       }
@@ -270,7 +279,13 @@ export default {
 
         // refresh  UI
         await this.readSettings();
-        console.log("readsettings values: ", this.workflowName, this.workflowSettings, this.workflowDisplayName, this.workflowBlurb);
+        console.log(
+          "readsettings values: ",
+          this.workflowName,
+          this.workflowSettings,
+          this.workflowDisplayName,
+          this.workflowBlurb,
+        );
       } catch (err) {
         this.modalError(err);
 
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index c9e9a6c5..e9910dba 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -50,7 +50,7 @@ export default {
       resizeTimeoutId: setTimeout(this.doneResizing, 500),
     };
   },
-    
+
   computed: {
     streamEnabled: function () {
       return this.$store.getters.ready && !this.$store.state.disableStream;
@@ -65,7 +65,7 @@ export default {
   },
 
   mounted() {
-    //set up an intersection observer 
+    //set up an intersection observer
     useIntersectionObserver(
       this.$refs.streamDisplay,
       ([{ isIntersecting }]) => {
@@ -73,7 +73,7 @@ export default {
       },
       {
         threshold: 0.0,
-      }
+      },
     );
     // A global signal listener to flash the stream element
     this.onFlashStream = () => {
@@ -81,7 +81,7 @@ export default {
     };
 
     eventBus.on("globalFlashStream", this.onFlashStream);
-    
+
     // Mutation observer
     this.sizeObserver = new ResizeObserver(() => {
       this.handleResize(); // For any element attached to the observer, run handleResize() on change
@@ -141,8 +141,8 @@ export default {
 
       // Emit a signal to move, acted on by paneControl.vue
       eventBus.emit("globalMoveInImageCoordinatesEvent", {
-        x:-xRelative,
-        y:-yRelative
+        x: -xRelative,
+        y: -yRelative,
       });
     },
 
diff --git a/webapp/src/components/tabContentComponents/viewContent.vue b/webapp/src/components/tabContentComponents/viewContent.vue
index b3f5380f..81ed4951 100644
--- a/webapp/src/components/tabContentComponents/viewContent.vue
+++ b/webapp/src/components/tabContentComponents/viewContent.vue
@@ -10,7 +10,6 @@
 <script>
 import streamDisplay from "./streamContent.vue";
 // vue3 migration
-import { markRaw } from "vue";
 
 export default {
   name: "ViewContent",
diff --git a/webapp/src/js_utils/formatter.mjs b/webapp/src/js_utils/formatter.mjs
index c479695a..a271d551 100644
--- a/webapp/src/js_utils/formatter.mjs
+++ b/webapp/src/js_utils/formatter.mjs
@@ -1,6 +1,5 @@
 // Generic functions for formatting
 
-
 /**
  * Format a single number into a human-readable string.
  * Uses exponential notation for very large/small numbers.
@@ -30,7 +29,7 @@ export function formatNumber(num, maxDigits = 4) {
  */
 export function formatValue(value, maxDigits = 4) {
   if (Array.isArray(value)) {
-    const items = value.map(val => formatValue(val, maxDigits));
+    const items = value.map((val) => formatValue(val, maxDigits));
     return `[${items.join(", ")}]`;
   }
   if (typeof value === "object" && value !== null) {
@@ -47,4 +46,4 @@ export function formatValue(value, maxDigits = 4) {
   }
   // Only if the string will not coerce to a number do we output the value.
   return value;
-}
\ No newline at end of file
+}
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 078417a3..504a1258 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,4 +1,4 @@
-import { createApp } from 'vue';
+import { createApp } from "vue";
 import App from "./App.vue";
 import store from "./store";
 import UIkit from "uikit";
@@ -8,7 +8,7 @@ import "material-symbols/outlined.css";
 
 //import queryMixin from "@/mixins/labThingsMixins.js";
 import modalMixin from "@/mixins/modalMixins.js";
-import labThingsMixins from './mixins/labThingsMixins';
+import labThingsMixins from "./mixins/labThingsMixins";
 
 // UIKit overrides
 UIkit.mixin(
diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js
index 505703c8..2b935492 100644
--- a/webapp/src/mixins/labThingsMixins.js
+++ b/webapp/src/mixins/labThingsMixins.js
@@ -59,7 +59,7 @@ export default {
       // `false` fails because axios somehow eats it!
       // Other values should not be stringified or pydantic
       // can't parse them.
-      if ((value === false) || (value === true)) {
+      if (value === false || value === true) {
         value = JSON.stringify(value);
       }
       await axios.put(url, value);
@@ -91,7 +91,7 @@ export default {
         response = await axios.get(taskUrl, { baseURL: this.$store.getters.baseUri });
         const result = response.data.status;
 
-        if ((result === "running") || (result === "pending")) {
+        if (result === "running" || result === "pending") {
           ongoingMethod?.(response);
           this.pollTimers[taskUrl] = setTimeout(() => {
             this.pollUntilComplete(taskUrl, ongoingMethod, finalMethod, interval);
diff --git a/webapp/vite.config.mjs b/webapp/vite.config.mjs
index 2407af07..0d27d57f 100644
--- a/webapp/vite.config.mjs
+++ b/webapp/vite.config.mjs
@@ -5,9 +5,9 @@
 // Important: This is a preliminary setup, for vue2 to vue3 migration purposes.
 // Note: Comments are generated to explain relevant configuration options.
 
-import { fileURLToPath, URL } from 'node:url'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -17,27 +17,27 @@ export default defineConfig({
         compilerOptions: {
           // Enable Vue 2 compatibility mode.
           compatConfig: {
-            MODE: 2
-          }
-        }
-      }
+            MODE: 2,
+          },
+        },
+      },
     }),
   ],
   resolve: {
     alias: {
       // Use Vue 2 compatible build.
-      'vue': '@vue/compat',
+      vue: "@vue/compat",
       // Setup path alias for src directory.
       // This allows importing modules using '@/path/to/module'.
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
     // Recognize these file extensions for module resolution.
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
   },
   server: {
     host: true,
     // Set the development server port to 8080.
-    // OFM uses port 5000, so we avoid conflicts. run, and override by using the address: 
+    // OFM uses port 5000, so we avoid conflicts. run, and override by using the address:
     // http://microscope.local:8080/?overrideOrigin=http://microscope.local:5000#
     port: 8080,
     strictPort: true,
@@ -46,12 +46,12 @@ export default defineConfig({
     preprocessorOptions: {
       less: {
         // Always include math in Less files.
-        math: 'always',
+        math: "always",
         // Enable relative URLs in Less files.
         relativeUrls: true,
         // Enable JavaScript in Less files
         javascriptEnabled: true,
-      }
-    }
-  }
-})
\ No newline at end of file
+      },
+    },
+  },
+});