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

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>