ui_migration fix(deps): --Preliminary-- Define reactivity, with markRaw function wrapper for components.

webapp/src/App.vue

@@ -26,6 +26,8 @@
 import appContent from "./components/appContent.vue";
 import loadingContent from "./components/loadingContent.vue";
 import MouseTrap from "mousetrap";
+// vue3 migration
+import { markRaw } from "vue";
 
 MouseTrap.prototype.stopCallback = function (e, element) {
   // if the element has the class "mousetrap" then no need to stop
@@ -52,8 +54,8 @@ export default {
   name: "App",
 
   components: {
-    appContent,
-    loadingContent,
+    appContent: markRaw(appContent),
+    loadingContent: markRaw(loadingContent),
   },
 
   data: function () {
@@ -192,7 +194,7 @@ export default {
     });
   },
 
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     // Disconnect the theme observer
     if (this.themeObserver) {
       this.themeObserver.disconnect();

webapp/src/components/appContent.vue

@@ -77,8 +77,8 @@
 
 <script>
 // Import generic components
-import tabIcon from "./genericComponents/tabIcon";
-import tabContent from "./genericComponents/tabContent";
+import tabIcon from "./genericComponents/tabIcon.vue";
+import tabContent from "./genericComponents/tabContent.vue";
 
 // Import new content components
 import aboutContent from "./tabContentComponents/aboutContent.vue";
@@ -90,6 +90,8 @@ import scanListContent from "./tabContentComponents/scanListContent.vue";
 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 modal components for device initialisation
 import calibrationWizard from "./modalComponents/calibrationWizard.vue";
@@ -99,9 +101,9 @@ export default {
   name: "AppContent",
 
   components: {
-    tabIcon,
-    tabContent,
-    calibrationWizard,
+    tabIcon: markRaw(tabIcon),
+    tabContent: markRaw(tabContent),
+    calibrationWizard: markRaw(calibrationWizard),
   },
   data: function () {
     return {
@@ -111,26 +113,26 @@ export default {
           id: "settings",
           title: "Settings",
           icon: "settings",
-          component: settingsContent,
+          component: markRaw(settingsContent),
           class: "uk-margin-auto-top",
         },
         {
           id: "logging",
           title: "Logging",
           icon: "assignment_late",
-          component: loggingContent,
+          component: markRaw(loggingContent),
         },
         {
           id: "about",
           title: "About",
           icon: "info",
-          component: aboutContent,
+          component: markRaw(aboutContent),
         },
         {
           id: "power",
           title: "Power",
           icon: "power_settings_new",
-          component: powerContent,
+          component: markRaw(powerContent),
         },
       ],
       coreTopTabs: [
@@ -138,21 +140,21 @@ export default {
           id: "view",
           title: "View",
           icon: "visibility",
-          component: viewContent,
+          component: markRaw(viewContent),
           requiredThings: [],
         },
         {
           id: "control",
           title: "Control",
           icon: "gamepad",
-          component: controlContent,
+          component: markRaw(controlContent),
           requiredThings: [],
         },
         {
           id: "background-detect",
           title: "Background Detect",
           icon: "background_replace",
-          component: backgroundDetectContent,
+          component: markRaw(backgroundDetectContent),
           // While stage isn't needed; automatic background detect has little function
           // for a manual microscope.
           requiredThings: ["stage"],
@@ -161,14 +163,14 @@ export default {
           id: "slide-scan",
           title: "Slide Scan",
           icon: "settings_overscan",
-          component: slideScanContent,
+          component: markRaw(slideScanContent),
           requiredThings: ["smart_scan"],
         },
         {
           id: "scan-list",
           title: "Scan List",
           icon: "photo_library",
-          component: scanListContent,
+          component: markRaw(scanListContent),
           requiredThings: ["smart_scan"],
         },
       ],

webapp/src/components/labThingsComponents/actionButton.vue

@@ -28,10 +28,14 @@
 <script>
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionStatusModal from "./actionStatusModal.vue";
+import { markRaw } from "vue";
 
 export default {
   name: "ActionButton",
-  components: { ActionProgressBar, ActionStatusModal },
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionStatusModal: markRaw(ActionStatusModal)
+  },
 
   props: {
     action: {
@@ -161,7 +165,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.submitOnEvent) {
       this.$root.$off(this.submitOnEvent);
     }

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -28,11 +28,15 @@
 import UIkit from "uikit";
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionLogDisplay from "./actionLogDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ActionStatusModal",
-  components: { ActionProgressBar, ActionLogDisplay },
-
+  components: { 
+    ActionProgressBar: markRaw(ActionProgressBar),
+    ActionLogDisplay: markRaw(ActionLogDisplay)
+  },
   props: {
     title: {
       type: String,

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -100,12 +100,14 @@
 
 <script>
 import syncPropertyButton from "./syncPropertyButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "InputFromSchema",
 
   components: {
-    syncPropertyButton,
+    syncPropertyButton: markRaw(syncPropertyButton),
   },
 
   props: {

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -13,12 +13,14 @@
 <script>
 import { formatValue } from "@/js_utils/formatter.mjs";
 import InputFromSchema from "./inputFromSchema.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "PropertyControl",
 
   components: {
-    InputFromSchema,
+    InputFromSchema: markRaw(InputFromSchema),
   },
 
   props: {

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

@@ -17,13 +17,15 @@
 
 <script>
 import ActionButton from "./actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ServerSpecifiedActionButton",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   props: {

webapp/src/components/labThingsComponents/serverSpecifiedPropertyControl.vue

@@ -11,13 +11,15 @@
 
 <script>
 import PropertyControl from "./propertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ServerSpecifiedPropertyControl",
 
   components: {
-    PropertyControl,
+    PropertyControl: markRaw(PropertyControl),
   },
 
   props: {

webapp/src/components/loadingContent.vue

@@ -14,12 +14,16 @@
 
 <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: markRaw(devTools) 
+  },
 
   data: function () {
     return {};

webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue

@@ -19,13 +19,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import cameraCalibrationSettings from "../../../tabContentComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    cameraCalibrationSettings,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    cameraCalibrationSettings: markRaw(cameraCalibrationSettings),
   },
 
   computed: {

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

@@ -14,10 +14,13 @@
 import calibrationWizardTask from "./calibrationWizardTask.vue";
 import camCalibrationExplanation from "./cameraCalibrationSteps/camCalibrationExplanation.vue";
 import cameraMainCalibrationStep from "./cameraCalibrationSteps/cameraMainCalibrationStep.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) },
   props: {
     // Standard calibrationWizardTask props below:
     first: Boolean,
@@ -30,7 +33,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }],
+      steps: [{ component: markRaw(camCalibrationExplanation) }, { component: markRaw(cameraMainCalibrationStep)}],
     };
   },
 };

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

@@ -15,10 +15,14 @@ import calibrationWizardTask from "./calibrationWizardTask.vue";
 import csmExplanation from "./csmSteps/csmExplanation.vue";
 import focusStep from "./csmSteps/focusStep.vue";
 import runCsmStep from "./csmSteps/runCsmStep.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraCalibrationTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) 
+  },
   props: {
     // Standard calibrationWizardTask props below:
     first: Boolean,
@@ -31,7 +35,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }],
+      steps: [{ component: markRaw(csmExplanation) }, { component: markRaw(focusStep) }, { component: markRaw(runCsmStep) }],
     };
   },
 };

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

@@ -30,12 +30,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import ActionButton from "../../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    ActionButton,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    ActionButton: markRaw(ActionButton),
   },
 };
 </script>

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

@@ -18,13 +18,15 @@
 <script>
 import stepTemplateWithStream from "../stepTemplateWithStream.vue";
 import CSMCalibrationSettings from "../../../tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CameraMainCalibrationStep",
 
   components: {
-    stepTemplateWithStream,
-    CSMCalibrationSettings,
+    stepTemplateWithStream: markRaw(stepTemplateWithStream),
+    CSMCalibrationSettings: markRaw(CSMCalibrationSettings),
   },
 
   mounted() {

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

@@ -24,10 +24,14 @@ supplied by the wizard.
 
 <script>
 import calibrationWizardTask from "./calibrationWizardTask.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "SingleStepTask",
-  components: { calibrationWizardTask },
+  components: { 
+    calibrationWizardTask: markRaw(calibrationWizardTask) 
+  },
   props: {
     // This must be sent
     stepComponent: {
@@ -54,7 +58,7 @@ export default {
 
   data: function () {
     return {
-      steps: [{ component: this.stepComponent, props: this.stepProps }],
+      steps: [{ component: markRaw(this.stepComponent), props: this.stepProps }],
     };
   },
 };

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

@@ -8,12 +8,14 @@
 
 <script>
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StepTemplateWithStream",
 
   components: {
-    miniStreamDisplay,
+    miniStreamDisplay: markRaw(miniStreamDisplay),
   },
 };
 </script>

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

@@ -57,10 +57,14 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StatusPane",
-  components: { ActionButton },
+  components: { 
+    ActionButton: markRaw(ActionButton) 
+  },
 
   data: function () {
     return {

webapp/src/components/tabContentComponents/aboutContent.vue

@@ -24,13 +24,15 @@
 <script>
 import devTools from "./aboutComponents/devTools.vue";
 import statusPane from "./aboutComponents/statusPane.vue";
+//vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "AboutContent",
 
   components: {
-    devTools,
-    statusPane,
+    devTools: markRaw(devTools),
+    statusPane: markRaw(statusPane),
   },
 };
 </script>

webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue

@@ -47,11 +47,13 @@
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   components: {
-    ActionButton,
-    ServerSpecifiedPropertyControl,
+    ActionButton: markRaw(ActionButton),
+    ServerSpecifiedPropertyControl: markRaw(ServerSpecifiedPropertyControl),
   },
 
   data() {

webapp/src/components/tabContentComponents/backgroundDetectContent.vue

@@ -13,13 +13,15 @@
 <script>
 import paneBackgroundDetect from "./backgroundDetectComponents/paneBackgroundDetect";
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "BackgroundDetectContent",
 
   components: {
-    paneBackgroundDetect,
-    streamDisplay,
+    paneBackgroundDetect: markRaw(paneBackgroundDetect),
+    streamDisplay: markRaw(streamDisplay),
   },
 };
 </script>

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

@@ -18,12 +18,14 @@
 </template>
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "AutofocusControl",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   data: function () {

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

@@ -34,14 +34,16 @@ import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
 import autofocusControl from "./autofocusControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton,
-    positionControl,
-    autofocusControl,
+    ActionButton: markRaw(ActionButton),
+    positionControl: markRaw(positionControl),
+    autofocusControl: markRaw(autofocusControl),
   },
 
   computed: {

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

@@ -61,13 +61,16 @@ and zero position buttons. It also includes the d-pad.
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 import stageControlButtons from "./stageControlButtons.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton,
-    syncPropertyButton,
-    stageControlButtons,
+    ActionButton: markRaw(ActionButton),
+    syncPropertyButton: markRaw(syncPropertyButton),
+    stageControlButtons: markRaw(stageControlButtons),
   },
 
   data: function () {
@@ -105,7 +108,7 @@ export default {
     await this.updatePosition();
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a move action
     this.$root.$off("globalMoveEvent");
     this.$root.$off("globalMoveInImageCoordinatesEvent");

webapp/src/components/tabContentComponents/controlContent.vue

@@ -11,15 +11,17 @@
 </template>
 
 <script>
-import paneControl from "./controlComponents/paneControl";
+import paneControl from "./controlComponents/paneControl.vue";
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ControlContent",
 
   components: {
-    paneControl,
-    streamDisplay,
+    paneControl: markRaw(paneControl),
+    streamDisplay: markRaw(streamDisplay) ,
   },
 };
 </script>

webapp/src/components/tabContentComponents/loggingContent.vue

@@ -83,13 +83,15 @@
 import axios from "axios";
 import Paginate from "vuejs-paginate";
 import EndpointButton from "../labThingsComponents/endpointButton.vue";
+//vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "LoggingContent",
 
   components: {
-    Paginate,
-    EndpointButton,
+    Paginate: markRaw(Paginate),
+    EndpointButton: markRaw(EndpointButton),
   },
 
   data: function () {

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

@@ -59,7 +59,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
     this.osdViewer.destroy();
   },

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

@@ -82,11 +82,16 @@
 import axios from "axios";
 import actionButton from "../../labThingsComponents/actionButton.vue";
 import EndpointButton from "../../labThingsComponents/endpointButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ScanCard",
-  components: { actionButton, EndpointButton },
+  components: { 
+    actionButton: markRaw(actionButton), 
+    EndpointButton: markRaw(EndpointButton) 
+  },
 
   props: {
     scanData: {

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

@@ -55,10 +55,14 @@
 <script>
 import UIkit from "uikit";
 import OpenSeadragonViewer from "./openSeadragonViewer.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ScanViewerModal",
-  components: { OpenSeadragonViewer },
+  components: { 
+    OpenSeadragonViewer: markRaw(OpenSeadragonViewer) 
+  },
   props: {
     selectedScan: {
       type: Object,

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -100,11 +100,17 @@ import axios from "axios";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
 import ScanViewerModal from "./scanListComponents/scanViewer.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, scanCard, ScanViewerModal },
+  components: { 
+    actionButton: markRaw(actionButton), 
+    scanCard: markRaw(scanCard), 
+    ScanViewerModal: markRaw(ScanViewerModal) 
+  },
 
   data: function () {
     return {
@@ -171,7 +177,7 @@ export default {
     );
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
     this.$root.$off("globalUpdateScans");
     // Then we call that function here to unwatch

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

@@ -17,14 +17,16 @@
 <script>
 import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMSettings",
 
   components: {
-    CSMCalibrationSettings,
-    miniStreamDisplay,
+    CSMCalibrationSettings: markRaw(CSMCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
   },
 };
 </script>

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -57,14 +57,16 @@
 <script>
 import ActionButton from "@/components/labThingsComponents/actionButton.vue";
 import matrixDisplay from "@/components/ui/matrixDisplay.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CSMCalibrationSettings",
 
   components: {
-    ActionButton,
-    matrixDisplay,
+    ActionButton: markRaw(ActionButton),
+    matrixDisplay: markRaw(matrixDisplay),
   },
 
   props: {

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

@@ -25,15 +25,17 @@
 import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../../genericComponents/miniStreamDisplay.vue";
 import ServerSpecifiedPropertyControl from "../../labThingsComponents/serverSpecifiedPropertyControl.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraSettings",
 
   components: {
-    cameraCalibrationSettings,
-    miniStreamDisplay,
-    ServerSpecifiedPropertyControl,
+    cameraCalibrationSettings: markRaw(cameraCalibrationSettings),
+    miniStreamDisplay: markRaw(miniStreamDisplay),
+    ServerSpecifiedPropertyControl: markRaw(ServerSpecifiedPropertyControl),
   },
 
   data() {

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

@@ -22,13 +22,15 @@
 
 <script>
 import ServerSpecifiedActionButton from "../../../labThingsComponents/serverSpecifiedActionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "CameraCalibrationSettings",
 
   components: {
-    ServerSpecifiedActionButton,
+    ServerSpecifiedActionButton: markRaw(ServerSpecifiedActionButton),
   },
 
   props: {

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

@@ -8,14 +8,15 @@
 <script>
 import appSettings from "./displaySetttingsComponents/appSettings.vue";
 import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+import { markRaw } from "vue";
 
 // Export main app
 export default {
   name: "DisplaySettings",
 
   components: {
-    streamSettings,
-    appSettings,
+    streamSettings: markRaw(streamSettings),
+    appSettings: markRaw(appSettings),
   },
 };
 </script>

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

@@ -29,12 +29,14 @@
 
 <script>
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "StageSettings",
 
   components: {
-    ActionButton,
+    ActionButton: markRaw(ActionButton),
   },
 
   data: function () {

webapp/src/components/tabContentComponents/settingsContent.vue

@@ -65,17 +65,20 @@ import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
-import tabIcon from "../genericComponents/tabIcon";
-import tabContent from "../genericComponents/tabContent";
+import tabIcon from "../genericComponents/tabIcon.vue";
+import tabContent from "../genericComponents/tabContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
+
 
 // Export main app
 export default {
   name: "SettingsContent",
 
   components: {
-    tabIcon,
-    tabContent,
-    calibrationWizard,
+    tabIcon: markRaw(tabIcon),
+    tabContent: markRaw(tabContent),
+    calibrationWizard: markRaw(calibrationWizard),
   },
 
   data: function () {
@@ -87,14 +90,14 @@ export default {
           id: "display",
           title: "Display",
           requireConnection: false,
-          component: displaySettings,
+          component: markRaw(displaySettings),
           requiredThings: [],
         },
         {
           id: "stage-control",
           title: "Stage Control Preferences",
           requireConnection: false,
-          component: stageControlSettings,
+          component: markRaw(stageControlSettings),
           requiredThings: ["stage"],
         },
       ],
@@ -103,21 +106,21 @@ export default {
           id: "camera",
           title: "Camera",
           requireConnection: true,
-          component: cameraSettings,
+          component: markRaw(cameraSettings),
           requiredThings: [],
         },
         {
           id: "stage",
           title: "Stage",
           requireConnection: true,
-          component: stageSettings,
+          component: markRaw(stageSettings),
           requiredThings: ["stage"],
         },
         {
           id: "mapping",
           title: "Camera to Stage Mapping",
           requireConnection: true,
-          component: CSMSettings,
+          component: markRaw(CSMSettings),
           requiredThings: ["camera_stage_mapping"],
         },
       ],

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -153,17 +153,19 @@ import actionLogDisplay from "../labThingsComponents/actionLogDisplay.vue";
 import actionProgressBar from "../labThingsComponents/actionProgressBar.vue";
 import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 import ActionButton from "../labThingsComponents/actionButton.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "SlideScanContent",
 
   components: {
-    streamDisplay,
-    propertyControl,
-    actionLogDisplay,
-    actionProgressBar,
-    MiniStreamDisplay,
-    ActionButton,
+    streamDisplay: markRaw(streamDisplay),
+    propertyControl: markRaw(propertyControl),
+    actionLogDisplay: markRaw(actionLogDisplay),
+    actionProgressBar: markRaw(actionProgressBar),
+    MiniStreamDisplay: markRaw(MiniStreamDisplay),
+    ActionButton: markRaw(ActionButton),
   },
 
   data() {

webapp/src/components/tabContentComponents/streamContent.vue

@@ -81,7 +81,7 @@ export default {
     // Do nothing: preview stream now runs all the time
   },
 
-  beforeDestroy: function () {
+  beforeUnmount: function () {
     // Remove global signal listener to change the GPU preview state
     this.$root.$off("globalTogglePreview");
     // Remove global signal listener to flash the stream element

webapp/src/components/tabContentComponents/viewContent.vue

@@ -9,12 +9,14 @@
 
 <script>
 import streamDisplay from "./streamContent.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "ViewContent",
 
   components: {
-    streamDisplay,
+    streamDisplay: markRaw(streamDisplay),
   },
 };
 </script>

webapp/src/main.js

@@ -27,9 +27,6 @@ const app = createApp(App);
 // Use visibility observer
 app.use(VueObserveVisibility);
 
-// Disable production tip for Vue
-app.config.productionTip = false;
-
 // Use global mixins
 app.mixin(queryMixin);
 app.mixin(modalMixin);