ui_migration lint(fix): changes fixed with lint ecmaversion & es2021

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: [
+  extends: ["plugin:vue/vue3-recommended", "eslint:recommended", "@vue/prettier"],
-    "plugin:vue/vue3-recommended",  // ✅ Changed from vue/recommended to 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/require-explicit-emits": "warn",  // Require emits declaration
+    "vue/multi-word-component-names": "warn", // Component naming
-    "vue/multi-word-component-names": "warn",  // Component naming
+    "vue/no-v-for-template-key-on-child": "error", // Key placement
-    "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-v-model-argument": "off",  // Allow v-model arguments (Vue 3 feature)
+
-    
-    // ✅ Relaxed for migration period (can be stricter later)
     "vue/no-unused-components": "warn",
     "vue/no-unused-vars": "warn",
   },
-};
+};

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 });
     },
   },
 };

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 {

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,
-      }
+      },
     );
   },
 };

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

webapp/src/components/genericComponents/tabIcon.vue

@@ -1,10 +1,10 @@
 <template>
-  <a 
+  <a
-  href="#" 
+    href="#"
-  class="uk-link" 
+    class="uk-link"
-  :class="classObject" 
+    :class="classObject"
-  :uk-tooltip="tooltipOptions ? tooltipOptions : null"
+    :uk-tooltip="tooltipOptions ? tooltipOptions : null"
-  @click="setThisTab"
+    @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) {

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: [
+  components: {
-    'update:progress',
-    'update:taskStarted', 
-    'update:taskRunning',
-    'update:log',
-    'update:taskStatus',
-    'submit',
-    'taskStarted',
-    'taskRunning',
-    'response',
-    'completed',
-    'cancelled',
-    'finished',
-    'error'
-  ],
-
-  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(

webapp/src/components/labThingsComponents/actionLogDisplay.vue

@@ -69,7 +69,7 @@ export default {
     taskStatus: {
       handler() {
         this.scrollToBottom();
-      }
+      },
     },
   },
 

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

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;

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -4,9 +4,9 @@
     :data-schema="propertyDescription"
     :label="label"
     :animate="animate"
-    @requestUpdate="readProperty"
+    @request-update="readProperty"
-    @sendValue="writeProperty"
+    @send-value="writeProperty"
-    @animationShown="resetAnimate"
+    @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: {

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.

webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue

@@ -18,7 +18,7 @@ export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl
+    PropertyControl,
   },
 
   props: {

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 {

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: { 
+  components: {
-    devTools 
+    devTools,
   },
 
   data: function () {

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -30,6 +30,8 @@ export default {
 
   components: {},
 
+  emits: ["onClose"],
+
   data: function () {
     return {
       isNeeded: undefined,

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,

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/`;

webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue

@@ -19,8 +19,10 @@ import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { 
+  components: {
-    calibrationWizardTask},
+    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) },
+      ],
     };
   },
 };

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) },
+      ],
     };
   },
 };

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue

@@ -37,7 +37,7 @@ export default {
 
   components: {
     stepTemplateWithStream,
-    ActionButton
+    ActionButton,
   },
 };
 </script>

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

webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue

@@ -29,9 +29,10 @@ import { markRaw } from "vue";
 
 export default {
   name: "SingleStepTask",
-  components: { 
+  components: {
-    calibrationWizardTask
+    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 }],

webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue

@@ -14,7 +14,7 @@ export default {
   name: "StepTemplateWithStream",
 
   components: {
-    miniStreamDisplay
+    miniStreamDisplay,
   },
 };
 </script>

webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue

@@ -68,8 +68,8 @@ import ActionButton from "../../labThingsComponents/actionButton.vue";
 
 export default {
   name: "StatusPane",
-  components: { 
+  components: {
-    ActionButton
+    ActionButton,
   },
 
   data: function () {

webapp/src/components/tabContentComponents/aboutContent.vue

@@ -31,7 +31,7 @@ export default {
 
   components: {
     devTools,
-    statusPane
+    statusPane,
   },
 };
 </script>

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

webapp/src/components/tabContentComponents/backgroundDetectContent.vue

@@ -20,7 +20,7 @@ export default {
 
   components: {
     paneBackgroundDetect,
-    streamDisplay
+    streamDisplay,
   },
 };
 </script>

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

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -42,7 +42,7 @@ export default {
   components: {
     ActionButton,
     positionControl,
-    autofocusControl
+    autofocusControl,
   },
 
   computed: {

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

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 });
     },
   },
 };

webapp/src/components/tabContentComponents/controlContent.vue

@@ -20,7 +20,7 @@ export default {
 
   components: {
     paneControl,
-    streamDisplay
+    streamDisplay,
   },
 };
 </script>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -91,9 +91,11 @@ export default {
 
   components: {
     Paginate,
-    EndpointButton
+    EndpointButton,
   },
 
+  emits: ["scrollTop"],
+
   data: function () {
     return {
       maxitems: 20,

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

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}`;

webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue

@@ -59,8 +59,8 @@ import OpenSeadragonViewer from "./openSeadragonViewer.vue";
 
 export default {
   name: "ScanViewerModal",
-  components: { 
+  components: {
-    OpenSeadragonViewer
+    OpenSeadragonViewer,
   },
   props: {
     selectedScan: {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
+  <div ref="galleryDisplay" class="galleryDisplay uk-padding uk-padding-remove-top">
-    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: [],

webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue

@@ -25,7 +25,7 @@ export default {
 
   components: {
     CSMCalibrationSettings,
-    miniStreamDisplay
+    miniStreamDisplay,
   },
 };
 </script>

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 },
     );
   },
 

webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue

@@ -34,7 +34,7 @@ export default {
   components: {
     cameraCalibrationSettings,
     miniStreamDisplay,
-    ServerSpecifiedPropertyControl
+    ServerSpecifiedPropertyControl,
   },
 
   data() {

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: [],

webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue

@@ -15,7 +15,7 @@ export default {
 
   components: {
     streamSettings,
-    appSettings
+    appSettings,
   },
 };
 </script>

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 },
     );
   },
 

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

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"
+            @task-started="startScanning"
-            @beforeUpdate:taskStatus="taskStatus = $event"
+            @before-update:task-status="taskStatus = $event"
-            @beforeUpdate:progress="progress = $event"
+            @before-update:progress="progress = $event"
-            @beforeUpdate:log="log = $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");
+        console.warn("Could not read workflow_name, using default");
-          this.workflowName = "histo_scan_workflow";
+        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);
 

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,
+        x: -xRelative,
-        y:-yRelative
+        y: -yRelative,
       });
     },
 

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

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;
-}
+}

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(

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

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 { fileURLToPath, URL } from "node:url";
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import vue from '@vitejs/plugin-vue'
+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,
-      }
+      },
-    }
+    },
-  }
+  },
-})
+});