Fixed duplicated mini previews in settings

openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue

@@ -92,9 +92,9 @@
 
           <p>Once you're ready, click auto-calibrate.</p>
 
-          <cameraStageMappingSettings
+          <CSMCalibrationSettings
             :show-extra-settings="false"
-          ></cameraStageMappingSettings>
+          ></CSMCalibrationSettings>
         </div>
       </div>
 
@@ -148,8 +148,8 @@
 <script>
 import axios from "axios";
 
-import cameraCalibrationSettings from "../viewComponents/settingsComponents/cameraCalibrationSettings.vue";
+import cameraCalibrationSettings from "../viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue";
-import cameraStageMappingSettings from "../viewComponents/settingsComponents/cameraStageMappingSettings.vue";
+import CSMCalibrationSettings from "../viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue";
 import miniStreamDisplay from "../viewComponents/miniStreamDisplay.vue";
 
 export default {
@@ -157,7 +157,7 @@ export default {
 
   components: {
     cameraCalibrationSettings,
-    cameraStageMappingSettings,
+    CSMCalibrationSettings,
     miniStreamDisplay
   },
 

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettings.vue

@@ -0,0 +1,156 @@
+<template>
+  <div id="CSMSettings">
+    <CSMCalibrationSettings />
+    <div id="mini-stream">
+      <miniStreamDisplay />
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import CSMCalibrationSettings from "./CSMSettingsComponents/CSMCalibrationSettings.vue";
+import miniStreamDisplay from "../miniStreamDisplay.vue";
+
+// Export main app
+export default {
+  name: "CSMSettings",
+
+  components: {
+    CSMCalibrationSettings,
+    miniStreamDisplay
+  },
+
+  props: {
+    showExtraSettings: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+
+  data: function() {
+    return {
+      settings: null,
+      recalibrationLinks: {},
+      isCalibrating: false,
+      dataAvailable: false
+    };
+  },
+
+  computed: {
+    settingsUri: function() {
+      return `${this.$store.getters.baseUri}/api/v2/instrument/settings`;
+    },
+    pluginsUri: function() {
+      return `${this.$store.getters.baseUri}/api/v2/extensions`;
+    }
+  },
+
+  mounted() {
+    this.updateSettings();
+    this.updateRecalibrationLinks();
+  },
+
+  methods: {
+    updateSettings: function() {
+      // Update links
+      axios
+        .get(this.settingsUri)
+        .then(response => {
+          this.settings =
+            response.data.extensions["org.openflexure.camera_stage_mapping"];
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+          this.settings = {};
+        });
+    },
+
+    updateCalibrationDataAvailability: function() {
+      if ("get_calibration" in this.recalibrationLinks) {
+        axios
+          .get(this.recalibrationLinks.get_calibration.href)
+          .then(response => {
+            console.log("CSM data:");
+            console.log(response.data);
+            if (Object.keys(response.data).length === 0) {
+              this.dataAvailable = false;
+            } else {
+              this.dataAvailable = true;
+            }
+          })
+          .catch(error => {
+            this.modalError(error); // Let mixin handle error
+          });
+      }
+    },
+
+    getCalibrationData: function() {
+      axios
+        .get(this.recalibrationLinks.get_calibration.href)
+        .then(response => {
+          if (response.data != {}) {
+            const data = JSON.stringify(response.data);
+            const url = window.URL.createObjectURL(new Blob([data]));
+            const link = document.createElement("a");
+            link.href = url;
+            link.setAttribute("download", "csm_calibration.json");
+            document.body.appendChild(link);
+            link.click();
+          }
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
+    },
+
+    updateRecalibrationLinks: function() {
+      axios
+        .get(this.pluginsUri) // Get a list of plugins
+        .then(response => {
+          var plugins = response.data;
+          var foundExtension = plugins.find(
+            e => e.title === "org.openflexure.camera_stage_mapping"
+          );
+          // if camera-stage mapping extension is enabled
+          if (foundExtension) {
+            // Get plugin action link
+            this.recalibrationLinks = foundExtension.links;
+            // Update whether calibration data is available
+            this.updateCalibrationDataAvailability();
+          } else {
+            this.recalibrationLinks = {};
+          }
+        })
+        .catch(error => {
+          this.modalError(error); // Let mixin handle error
+        });
+    },
+
+    onRecalibrateResponse: function() {
+      this.modalNotify("Finished stage-to-camera calibration.");
+      // Update local settings
+      this.updateSettings();
+    },
+
+    onRecalibrateError: function(error) {
+      this.modalError(error); // Let mixin handle error
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.center-spinner {
+  margin-left: auto;
+  margin-right: auto;
+}
+#mini-stream {
+  width: 500px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+}
+</style>

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="cameraStageMappingSettings">
+  <div id="CSMCalibrationSettings">
     <form @submit.prevent="applyConfigRequest">
       <!--Show auto calibrate if default plugin is enabled-->
       <div v-if="'calibrate_xy' in recalibrationLinks" class="uk-margin-small">
@@ -27,25 +27,19 @@
         Download calibration data
       </button>
     </form>
-
-    <div id="mini-stream">
-      <miniStreamDisplay />
-    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
-import taskSubmitter from "../../genericComponents/taskSubmitter";
+import taskSubmitter from "../../../genericComponents/taskSubmitter";
-import miniStreamDisplay from "../miniStreamDisplay.vue";
 
 // Export main app
 export default {
-  name: "CameraStageMappingSettings",
+  name: "CSMCalibrationSettings",
 
   components: {
-    taskSubmitter,
+    taskSubmitter
-    miniStreamDisplay
   },
 
   props: {

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue

@@ -68,7 +68,7 @@
 
 <script>
 import axios from "axios";
-import cameraCalibrationSettings from "./cameraCalibrationSettings.vue";
+import cameraCalibrationSettings from "./cameraSettingsComponents/cameraCalibrationSettings.vue";
 import miniStreamDisplay from "../miniStreamDisplay.vue";
 
 // Export main app

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettingsComponents/cameraCalibrationSettings.vue

@@ -40,7 +40,7 @@
 
 <script>
 import axios from "axios";
-import taskSubmitter from "../../genericComponents/taskSubmitter";
+import taskSubmitter from "../../../genericComponents/taskSubmitter";
 
 // Export main app
 export default {

openflexure_microscope/api/static/src/components/viewComponents/settingsDisplay.vue

@@ -139,7 +139,7 @@
             view. This enables functions like click-to-move, and more precise
             tile scans.
           </p>
-          <cameraStageMappingSettings />
+          <CSMSettings />
         </div>
       </tabContent>
 
@@ -163,7 +163,7 @@ import microscopeSettings from "./settingsComponents/microscopeSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
 import featuresSettings from "./settingsComponents/featuresSettings.vue";
-import cameraStageMappingSettings from "./settingsComponents/cameraStageMappingSettings.vue";
+import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
 import tabIcon from "../genericComponents/tabIcon";
@@ -178,7 +178,7 @@ export default {
     cameraSettings,
     stageSettings,
     microscopeSettings,
-    cameraStageMappingSettings,
+    CSMSettings,
     appSettings,
     featuresSettings,
     tabIcon,