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

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>