Merge branch 'js-cleanup' into 'master'

JS app cleanup

See merge request openflexure/openflexure-microscope-server!91

.gitlab-ci.yml

@@ -1,27 +1,42 @@
 stages:
   - analysis
   - build
+  - package
   - deploy
 
-# Cache modules in between jobs
+# Re-usable block to install (and cache) Poetry and openflexure-microscope-server
-cache:
+.poetry-install-template: &poetry-install
-  key: ${CI_COMMIT_REF_SLUG}
+  before_script:
-  paths:
+    - curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
-    - node_modules/
+    - source $HOME/.poetry/env
+    - poetry config virtualenvs.in-project true
+    - poetry install -vv
+  cache:
+    key: "${CI_COMMIT_REF_SLUG}"
+    paths:
+      - .cache/pip
+      - .venv
 
+# Re-usable block to install (and cache) openflexure-microscope-server static app
+.node-install-template: &node-install
+  before_script:
+    - cd openflexure_microscope/api/static/
+    - npm install
+  cache:
+    key: "${CI_COMMIT_REF_SLUG}"
+    paths:
+      - openflexure_microscope/api/static/node_modules
+
+# Python static analysis with PyLint
 pylint:
   stage: analysis
   image: python:3.7
   retry: 1
 
-  before_script:
+  <<: *poetry-install
-    - curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
 
   script:
-    # Install server
+    - poetry run pylint ./openflexure_microscope/
-    - $HOME/.poetry/bin/poetry install
-    # Run static build script
-    - $HOME/.poetry/bin/poetry run pylint ./openflexure_microscope/
 
   only:
     - branches
@@ -29,19 +44,17 @@ pylint:
     - tags
     - web
 
+# Python style analysis with Black
 black:
   stage: analysis
   image: python:3.7
   retry: 1
 
-  before_script:
+  <<: *poetry-install
-    - curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
 
   script:
-    # Install server
-    - $HOME/.poetry/bin/poetry install
     # Run static build script
-    - $HOME/.poetry/bin/poetry run black --check .
+    - poetry run black --check .
 
   only:
     - branches
@@ -49,19 +62,53 @@ black:
     - tags
     - web
 
-# Electron app build
+# JavaScript linting with ESLint (via Vue CLI)
-build:
+eslint:
-  stage: build
+  stage: analysis
-  image: nikolaik/python-nodejs:python3.7-nodejs14
+  image: node:15
 
-  before_script:
+  <<: *node-install
-    - curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
+
+  script:
+    # Build JS application for production
+    - npm run lint
+
+  only:
+    - merge_requests
+    - tags
+    - web
+
+# Build JS app
+build:
+  stage: build
+  image: node:15
+
+  <<: *node-install
+
+  script:
+    # Build JS application for production
+    - npm run build
+
+  artifacts:
+    name: "dist"
+    expire_in: 1 week
+    paths:
+      - "./openflexure_microscope/api/static/dist/"
+
+  only:
+    - merge_requests
+    - tags
+    - web
+
+# Package application into distribution tarball
+package:
+  stage: package
+  dependencies:
+    - build
+
+  image: ubuntu:latest
 
   script:
-    # Install server
-    - $HOME/.poetry/bin/poetry install
-    # Run static build script
-    - $HOME/.poetry/bin/poetry run build_static
     # Build distribution archive
     - mkdir -p dist
     - tar -c --exclude-vcs --exclude-from .tarignore -vzf dist/openflexure-microscope-server-${CI_COMMIT_REF_NAME}.tar.gz .
@@ -72,7 +119,8 @@ build:
     name: "dist"
     expire_in: 1 week
     paths:
-      - "./dist/*"
+      - "./dist/openflexure-microscope-server-${CI_COMMIT_REF_NAME}.tar.gz"
+      - "./dist/openflexure-microscope-server-${CI_COMMIT_REF_NAME}.tar.gz.sha256"
 
   only:
     - merge_requests
@@ -83,7 +131,8 @@ build:
 deploy:
   stage: deploy
   dependencies:
-    - build
+    - package
+
   image: ubuntu:latest
 
   before_script:

.tarignore

@@ -1,10 +1,12 @@
-Distribution archive rules
 node_modules
 .gitlab-ci.yml
-.gitlab/
+.gitlab
 ./dist
 !openflexure_microscope/api/static/dist
 
+# VCS files
+.pre-commit-config.yaml
+
 # Pyenv files
 .python-version
 .venv*

openflexure_microscope/api/static/.eslintrc.js

@@ -5,26 +5,14 @@ module.exports = {
     node: true
   },
 
-  extends: [
+  parserOptions: {
-    "plugin:vue/recommended",
+    parser: "babel-eslint"
-    "eslint:recommended",
+  },
-    "prettier/vue",
-    "plugin:prettier/recommended",
-    "plugin:vue/essential",
-    "@vue/prettier"
-  ],
 
   rules: {
-    "vue/component-name-in-template-casing": ["error", "PascalCase"],
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
   },
 
-  globals: {
+  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"]
-    $nuxt: true
-  },
-
-  parserOptions: {
-    parser: "babel-eslint"
-  }
 };

openflexure_microscope/api/static/CONTRIBUTING.md

@@ -17,7 +17,7 @@ Please note we have a working flow, and a code of conduct. Please follow it in a
 
 * Once we've merged a few things in and want to make a release, we tag it on master.
 * Not every commit on master will get a tag, we'll accumulate a few changes before making a release, unless there's a reason to release straight away.
-* Once we're confident that the tagged release is building and stable, we merge it into the stable branch.
+* Once the tagged release passes checks, it is deployed to the build server.
 
 ## Code of Conduct
 

openflexure_microscope/api/static/package-lock.json

@@ -2613,12 +2613,12 @@
       }
     },
     "@vue/cli-plugin-eslint": {
-      "version": "4.5.8",
+      "version": "4.5.9",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.8.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-eslint/-/cli-plugin-eslint-4.5.9.tgz",
-      "integrity": "sha512-1lg3K2D/harXbN4FvRoA1b0X9947H+G4Ql/43rxJY39OqswfK/d1ck438Fo9M4l1+zhBSUNDmcjn7Q2EH6qWmA==",
+      "integrity": "sha512-wTsWRiRWPW5ik4bgtlh4P4h63Zgjsyvqx2FY0kcj+bSAnQGPJ3bKUOMU9KQP5EyNH6pAXMVGh2LEXK9WwJMf1w==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.8",
+        "@vue/cli-shared-utils": "^4.5.9",
         "eslint-loader": "^2.2.1",
         "globby": "^9.2.0",
         "inquirer": "^7.1.0",
@@ -2627,9 +2627,9 @@
       },
       "dependencies": {
         "@vue/cli-shared-utils": {
-          "version": "4.5.8",
+          "version": "4.5.9",
-          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.8.tgz",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.9.tgz",
-          "integrity": "sha512-pa6oenhBO/5HeDLRSokiwVN01gROACEDy3ESXWuPmragOREGNmmFKtkPHlqeYavGEX6LFp7f0VK3uMX6UYS5mQ==",
+          "integrity": "sha512-anvsrv+rkQC+hgxaT2nQQxnSWSsIzyysZ36LO7qPjXvDRBvcvKLAAviFlUkYbZ+ntbV8puzJ3zw+gUhQw4SEVA==",
           "dev": true,
           "requires": {
             "@hapi/joi": "^15.0.1",
@@ -13760,9 +13760,9 @@
       }
     },
     "vue-loader-v16": {
-      "version": "npm:vue-loader@16.0.0-rc.1",
+      "version": "npm:vue-loader@16.0.0-rc.2",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.2.tgz",
-      "integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==",
+      "integrity": "sha512-cz8GK4dgIf1UTC+do80pGvh8BHcCRHLIQVHV9ONVQ8wtoqS9t/+H02rKcQP+TVNg7khgLyQV2+8eHUq7/AFq3g==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -13862,12 +13862,6 @@
       "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
       "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
     },
-    "vue-plugin-load-script": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.3.2.tgz",
-      "integrity": "sha512-UQcFanuWBf72/339LxgsPZbMsT5LKUjBzkQfV3xf4ni5fc6Nnx5GNYclODFaQ9FHtOjWhu423bhHrlBHz4MIFg==",
-      "dev": true
-    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

openflexure_microscope/api/static/package.json

@@ -8,7 +8,7 @@
     "serve": "vue-cli-service serve --mode development",
     "build": "vue-cli-service build --mode production",
     "lint": "vue-cli-service lint",
-    "prettier": "vue-cli-service lint --fix"
+    "lint:fix": "vue-cli-service lint --fix"
   },
   "dependencies": {
     "material-design-icons": "^3.0.1",
@@ -17,14 +17,13 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",
-    "@vue/cli-plugin-eslint": "^4.5.8",
+    "@vue/cli-plugin-eslint": "^4.5.9",
     "@vue/cli-service": "^4.5.8",
     "@vue/eslint-config-prettier": "^6.0.0",
     "axios": "^0.19.2",
     "babel-eslint": "^10.1.0",
     "css-loader": "^3.6.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.12.2",
@@ -34,7 +33,6 @@
     "uikit": "^3.5.9",
     "vue": "^2.6.12",
     "vue-friendly-iframe": "^0.17.0",
-    "vue-plugin-load-script": "^1.3.2",
     "vue-template-compiler": "^2.6.12",
     "vue-tour": "^1.5.0",
     "vuejs-paginate": "^2.1.0",

openflexure_microscope/api/static/src/App.vue

@@ -102,9 +102,9 @@ export default {
     },
     handleTheme: function() {
       var isDark = false;
-      if (this.$store.state.globalSettings.appTheme == "dark") {
+      if (this.$store.state.appTheme == "dark") {
         isDark = true;
-      } else if (this.$store.state.globalSettings.appTheme == "system") {
+      } else if (this.$store.state.appTheme == "system") {
         if (this.systemDark) {
           isDark = true;
         }
@@ -199,15 +199,13 @@ export default {
       (state, getters) => {
         return getters.uriV2;
       },
-      uriV2 => {
+      () => {
         this.checkConnection();
-        console.log(uriV2);
       }
     );
 
     // Keyboard shortcuts
     Mousetrap.bind("?", () => {
-      console.log(this.keyboardManual);
       this.toggleModalElement(this.$refs["keyboardManualModal"]); // Calls the mixin
     });
 
@@ -290,7 +288,6 @@ export default {
     // Remove origin watcher
     this.unwatchOriginFunction();
     // Remove key listeners
-    console.log("Resetting Mousetrap");
     Mousetrap.reset();
   },
 
@@ -313,7 +310,6 @@ export default {
     },
 
     handleExit: function() {
-      console.log("Triggered beforeunload");
       this.$root.$emit("globalTogglePreview", false);
     },
 

openflexure_microscope/api/static/src/assets/less/app.less

@@ -1,18 +0,0 @@
-// Theming specific to the electron app
-
-.menubar-menu-container {
-    box-shadow: 0.5px 1px 4px 0px rgba(0, 0, 0, 0.3) !important;
-}
-
-.menubar-menu-container>* {
-    box-shadow: none !important;
-}
-
-.menubar-menu-container .action-menu-item,
-.menubar-menu-container .action-label {
-    cursor: default
-}
-
-.menubar-menu-container a:hover {
-    text-decoration: none;
-}

openflexure_microscope/api/static/src/assets/less/theme.less

@@ -4,9 +4,6 @@
 // Highlight.js
 @import "./highlight.less";
 
-// Electron app theming
-@import "./app.less";
-
 // Custom OpenFlexure theming
 
 //

openflexure_microscope/api/static/src/components/appContent.vue

@@ -214,7 +214,7 @@ export default {
   computed: {
     enabledTopTabs: function() {
       var enabledTabs = this.topTabs;
-      if (this.$store.state.globalSettings.IHIEnabled) {
+      if (this.$store.state.IHIEnabled) {
         enabledTabs.push({
           id: "slidescan",
           icon: "settings_overscan",
@@ -230,7 +230,6 @@ export default {
 
     pluginsGuiList: function() {
       // List of plugin GUIs, obtained from this.plugins values
-      console.log("Recalculating plugins");
       var pluginGuis = [];
       for (let plugin of Object.values(this.plugins)) {
         if (plugin.meta.gui) {
@@ -267,9 +266,9 @@ export default {
           window.location.hostname
         )
       ) {
-        this.$store.commit("changeSetting", ["disableStream", true]);
+        this.$store.commit("changeDisableStream", true);
-        this.$store.commit("changeSetting", ["autoGpuPreview", true]);
+        this.$store.commit("changeAutoGpuPreview", true);
-        this.$store.commit("changeSetting", ["trackWindow", true]);
+        this.$store.commit("changeTrackWindow", true);
       }
       // Update plugins
       this.updatePlugins().then(() => {
@@ -304,11 +303,9 @@ export default {
 
   methods: {
     updatePlugins: function() {
-      console.log("Updating plugin forms");
       return axios
         .get(this.pluginsUri)
         .then(response => {
-          console.log(response);
           this.plugins = response.data;
         })
         .catch(error => {
@@ -333,8 +330,6 @@ export default {
     },
     enterApp: function() {
       // Stuff to do once connected and all init modals are finished
-      console.log("Entering main application");
-      //this.currentTab = "view";
     }
   }
 };

openflexure_microscope/api/static/src/components/fieldComponents/keyvalList.vue

@@ -111,11 +111,6 @@ export default {
       this.$delete(newSelected, key);
 
       this.$emit("input", newSelected);
-    },
-
-    modifyValue: function(e, v) {
-      console.log(e);
-      console.log(v);
     }
   }
 };

openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue

@@ -138,7 +138,6 @@ export default {
 
     checkExistingTasks: function() {
       axios.get(this.submitUrl).then(response => {
-        console.log(response.data);
         for (const task of response.data) {
           if (task.status == "pending" || task.status == "running") {
             this.taskStarted = true;
@@ -165,10 +164,10 @@ export default {
 
     startTask: function() {
       // Starts a new Action task
-      console.log("Task start clicked");
+
       this.$emit("submit", this.submitData);
       // Send a request to start a task
-      console.log("Submitting to ", this.submitUrl);
+
       this.taskStarted = true;
       this.$emit("taskStarted", this.taskId);
       axios
@@ -191,7 +190,7 @@ export default {
         this.pollTask(this.taskId, this.pollInterval)
           .then(response => {
             // Do something with the final response
-            console.log("Emitting onResponse: ", response);
+
             this.$emit("response", response);
             this.$emit("finished");
           })
@@ -199,12 +198,11 @@ export default {
             if (!error) {
               error = Error("Unknown error");
             }
-            console.log("Emitting onError: ", error);
+
             this.$emit("error", error);
             this.$emit("finished");
           })
           .finally(() => {
-            console.log("Cleaning up after task.");
             // Reset taskRunning and taskId
             this.taskRunning = false;
             this.taskStarted = false;
@@ -223,7 +221,6 @@ export default {
       var checkCondition = (resolve, reject) => {
         // If the condition is met, we're done!
         axios.get(this.taskUrl).then(response => {
-          console.log(response.data.status);
           var result = response.data.status;
           // If the task ends with success
           if (result == "completed") {
@@ -232,13 +229,13 @@ export default {
           // If task ends with an error
           else if (result == "error") {
             // Pass the error string back with reject
-            console.log("Rejecting pollTask due to error");
+
             reject(new Error(response.data.output));
           }
           // If task ends with termination
           else if (result == "cancelled") {
             // Pass a generic termination error back with reject
-            console.log("Rejecting pollTask due to cancellation");
+
             reject(new Error("Task cancelled"));
           } else {
             // Since the task is still running, we can update the progress bar
@@ -253,19 +250,13 @@ export default {
     },
 
     pollProgress: function() {
-      console.log("Starting progress polling");
-
       axios.get(this.taskUrl).then(response => {
-        console.log("PROGRESS RESPONSE: ", response.data.progress);
         this.progress = response.data.progress;
       });
     },
 
     terminateTask: function() {
-      console.log("Terminating task...");
+      axios.delete(this.taskUrl);
-      axios.delete(this.taskUrl).then(response => {
-        console.log("TERMINATION RESPONSE: ", response.data);
-      });
     }
   }
 };

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

@@ -265,7 +265,6 @@ export default {
     },
 
     onHide: function() {
-      console.log("UIKit modal hidden");
       this.$emit("onClose");
     },
 

openflexure_microscope/api/static/src/components/pluginComponents/JsonForm.vue

@@ -201,8 +201,6 @@ export default {
     },
 
     updateForm() {
-      // Trigger a plugin form update
-      console.log("Emitting reloadForms");
       this.$emit("reloadForms");
     },
 
@@ -214,14 +212,10 @@ export default {
     },
 
     newQuickRequest: function(params) {
-      console.log(this.submitApiUri);
-      console.log(params);
       // Send a quick request
       axios
         .post(this.submitApiUri, params)
-        .then(response => {
+        .then(() => {
-          // Do something with the response
-          console.log(response);
           // Do all the finished request stuff
           this.onSubmissionCompleted();
         })
@@ -232,8 +226,7 @@ export default {
 
     onTaskSubmit: function() {},
 
-    onTaskResponse: function(responseData) {
+    onTaskResponse: function() {
-      console.log("Task finished with response data: ", responseData);
       // Do all the finished request stuff
       this.onSubmissionCompleted();
     },

openflexure_microscope/api/static/src/components/pluginComponents/WebComponentLoader.vue

@@ -1,61 +0,0 @@
-<template>
-  <div class="uk-padding-small">
-    <div v-if="error" class="uk-padding-small uk-text-danger">
-      <b>{{ error }}</b>
-    </div>
-    <component
-      :is="componentName"
-      v-if="ready"
-      :component-base-u-r-l="ApiRootURL"
-    ></component>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "WebComponentLoader",
-
-  props: {
-    componentURL: {
-      type: String,
-      required: true
-    },
-    componentName: {
-      type: String,
-      required: true
-    }
-  },
-
-  data: function() {
-    return {
-      ready: false,
-      error: null
-    };
-  },
-
-  computed: {
-    ApiRootURL: function() {
-      return `${this.$store.getters.baseUri}/api/v2`;
-    }
-  },
-
-  mounted() {
-    // Method 2
-    this.$loadScript(this.componentURL)
-      .then(() => {
-        const el = customElements.get(this.componentName);
-        if (el) {
-          this.ready = true;
-        } else {
-          this.error = `Error: No component ${this.componentName} found.`;
-        }
-        this.ready = true;
-      })
-      .catch(() => {
-        this.ready = false;
-      });
-  }
-};
-</script>
-
-<style scoped></style>

openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/devTools.vue

@@ -23,6 +23,12 @@ export default {
     };
   },
 
+  mounted() {
+    if (!this.$store.getters.ready) {
+      this.currentOrigin = "http://microscope.local:5000";
+    }
+  },
+
   methods: {
     overrideAPIHost: function() {
       this.$store.commit("changeOrigin", this.currentOrigin);

openflexure_microscope/api/static/src/components/tabContentComponents/aboutComponents/statusPane.vue

@@ -165,9 +165,8 @@ export default {
         () => {
           if ("shutdown" in this.systemActionLinks) {
             this.$store.commit("resetState");
-            axios.post(this.systemActionLinks.shutdown).catch(error => {
+            // Post and silence errors
-              console.log(error); // Be quiet when empty response is recieved
+            axios.post(this.systemActionLinks.shutdown).catch(() => {});
-            });
           }
         },
         () => {}
@@ -178,9 +177,8 @@ export default {
         () => {
           if ("reboot" in this.systemActionLinks) {
             this.$store.commit("resetState");
-            axios.post(this.systemActionLinks.reboot).catch(error => {
+            // Post and silence errors
-              console.log(error); // Be quiet when empty response is recieved
+            axios.post(this.systemActionLinks.reboot).catch(() => {});
-            });
           }
         },
         () => {}

openflexure_microscope/api/static/src/components/tabContentComponents/captureComponents/paneCapture.vue

@@ -242,7 +242,7 @@
       </li>
     </ul>
 
-    <div v-if="scanCapture" class="uk-margin uk-margin-remove-top ">
+    <div v-if="scanCapture" class="uk-margin uk-margin-remove-top">
       <taskSubmitter
         :submit-url="scanUri"
         :submit-data="scanPayload"
@@ -296,9 +296,9 @@ export default {
       scanStyle: "Raster",
       namingStyle: "Coordinates",
       scanStepSize: {
-        x: 0,
+        x: 800,
-        y: 0,
+        y: 640,
-        z: 0
+        z: 50
       },
       scanSteps: {
         x: 3,
@@ -308,7 +308,7 @@ export default {
       resizeDims: [640, 480],
       tags: [],
       annotations: {
-        Client: `${process.env.PACKAGE.name}.${process.env.PACKAGE.version}`
+        Client: "openflexure-microscope-jsclient:builtin"
       },
       scanUri: null
     };
@@ -326,9 +326,6 @@ export default {
     pluginsUri: function() {
       return `${this.$store.getters.baseUri}/api/v2/extensions`;
     },
-    settingsFovUri: function() {
-      return `${this.$store.getters.baseUri}/api/v2/instrument/settings/fov`;
-    },
     basePayload: function() {
       var payload = {};
 
@@ -359,8 +356,6 @@ export default {
         payload.annotations["Notes"] = this.captureNotes;
       }
 
-      console.log(payload);
-
       return payload;
     },
 
@@ -395,7 +390,6 @@ export default {
 
   mounted() {
     this.updateScanUri();
-    this.updateScanStepSize();
     // A global signal listener to perform a capture action
     this.$root.$on("globalCaptureEvent", () => {
       this.handleCapture();
@@ -439,25 +433,9 @@ export default {
         });
     },
 
-    updateScanStepSize: function() {
-      axios
-        .get(this.settingsFovUri) // Get the microscope FOV
-        .then(response => {
-          this.scanStepSize = {
-            x: parseInt(0.5 * response.data[0]),
-            y: parseInt(0.5 * response.data[1]),
-            z: 50
-          };
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
-    },
-
     onScanSubmit: function() {},
 
-    onScanResponse: function(responseData) {
+    onScanResponse: function() {
-      console.log("Scan finished with response data: ", responseData);
       this.modalNotify("Finished scan.");
     },
 

openflexure_microscope/api/static/src/components/tabContentComponents/extensionContent.vue

@@ -3,12 +3,6 @@
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
       <vue-friendly-iframe v-if="frame" :src="frame.href"></vue-friendly-iframe>
-      <div v-else-if="webComponent">
-        <WebComponentLoader
-          :component-u-r-l="webComponent.href"
-          :component-name="webComponent.name"
-        />
-      </div>
       <!-- Handle OpenFlexure Forms -->
       <div
         v-for="form in forms"
@@ -37,7 +31,6 @@
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
-import WebComponentLoader from "../pluginComponents/WebComponentLoader";
 import streamDisplay from "./streamContent.vue";
 import galleryContent from "../tabContentComponents/galleryContent.vue";
 import settingsContent from "../tabContentComponents/settingsContent.vue";
@@ -47,7 +40,6 @@ export default {
 
   components: {
     JsonForm,
-    WebComponentLoader,
     streamDisplay,
     galleryContent,
     settingsContent
@@ -59,11 +51,6 @@ export default {
       required: false,
       default: () => []
     },
-    webComponent: {
-      type: Object,
-      required: false,
-      default: null
-    },
     frame: {
       type: Object,
       required: false,

openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/captureCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="capture-card uk-card uk-card-default uk-padding-remove uk-width-medium"
-    :class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }"
+    :class="{ 'uk-card-secondary': $store.state.darkMode }"
   >
     <div class="uk-card-media-top">
       <a class="lightbox-link" :href="imgURL" :data-caption="name">
@@ -70,8 +70,7 @@
       <div
         class="uk-modal-dialog uk-modal-body"
         :class="{
-          'uk-light uk-background-secondary':
+          'uk-light uk-background-secondary': $store.state.darkMode
-            $store.state.globalSettings.darkMode
         }"
       >
         <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -112,8 +111,7 @@
       <form
         class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"
         :class="{
-          'uk-light uk-background-secondary':
+          'uk-light uk-background-secondary': $store.state.darkMode
-            $store.state.globalSettings.darkMode
         }"
         @submit.prevent="handleTagSubmit"
       >
@@ -243,7 +241,6 @@ export default {
   methods: {
     getMetadata: function() {
       // Send metadata request
-      console.log("Loading capture metadata...");
       axios
         .get(this.captureURL)
         .then(response => {
@@ -324,7 +321,6 @@ export default {
     },
 
     delTagRequest: function(tagString) {
-      console.log(tagString);
       // Send tag DELETE request
       axios
         .delete(this.tagsURL, { data: [tagString] })

openflexure_microscope/api/static/src/components/tabContentComponents/galleryComponents/zipDownloader.vue

@@ -17,7 +17,6 @@
         :submit-url="zipBuilderUri"
         :submit-label="'Create ZIP'"
         :submit-data="captureIds"
-        @submit="onSubmit"
         @response="onResponse"
         @error="onError"
       >
@@ -155,14 +154,9 @@ export default {
     },
 
     deleteLastZip() {
-      axios
+      axios.delete(this.downloadUrl).catch(error => {
-        .delete(this.downloadUrl)
+        this.modalError(error); // Let mixin handle error
-        .then(response => {
+      });
-          console.log(response);
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
     },
 
     onResponse: function(response) {
@@ -171,11 +165,6 @@ export default {
       this.downloadReady = true;
     },
 
-    onSubmit: function(submitData) {
-      console.log("SUBMITTED");
-      console.log(submitData);
-    },
-
     onError: function(error) {
       this.modalError(error); // Let mixin handle error
     }

openflexure_microscope/api/static/src/components/tabContentComponents/galleryContent.vue

@@ -24,8 +24,7 @@
             <a href="#">Filter</a>
             <div
               :class="{
-                'uk-light uk-background-secondary':
+                'uk-light uk-background-secondary': $store.state.darkMode
-                  $store.state.globalSettings.darkMode
               }"
               class="uk-navbar-dropdown"
             >
@@ -342,12 +341,14 @@ export default {
 
   methods: {
     scrollToTop() {
-      document.querySelector("#container-left").scrollTop = 0;
+      const el = document.querySelector("#container-left");
+      if (el) {
+        el.scrollTop = 0;
+      }
     },
 
     updateCaptures: function() {
       if (this.$store.state.available) {
-        console.log("Updating capture list...");
         axios
           .get(this.capturesUri)
           .then(response => {
@@ -356,8 +357,6 @@ export default {
           .catch(error => {
             this.modalError(error); // Let mixin handle error
           });
-      } else {
-        console.log("Delaying capture update until connection is available");
       }
     },
 

openflexure_microscope/api/static/src/components/tabContentComponents/loggingContent.vue

@@ -111,7 +111,10 @@ export default {
 
   methods: {
     scrollToTop() {
-      document.querySelector("#container-left").scrollTop = 0;
+      const el = document.querySelector("#container-left");
+      if (el) {
+        el.scrollTop = 0;
+      }
     },
     visibilityChanged(isVisible) {
       if (isVisible) {
@@ -119,7 +122,6 @@ export default {
       }
     },
     updateLogs: function() {
-      console.log("Updating logs...");
       axios
         .get(this.loggingUri)
         .then(response => {

openflexure_microscope/api/static/src/components/tabContentComponents/navigateComponents/paneNavigate.vue

@@ -239,7 +239,6 @@ export default {
     },
 
     moveRequest: function(x, y, z, absolute) {
-      console.log(`Sending move request of ${x}, ${y}, ${z}`);
       // If not movement-locked
       if (!this.moveLock) {
         // Lock move requests
@@ -266,7 +265,6 @@ export default {
     },
 
     moveInImageCoordinatesRequest: function(x, y) {
-      console.log(`Sending move request in image coordinates: ${x}, ${y}`);
       // If not movement-locked
       if (!this.moveLock) {
         // Lock move requests

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

@@ -84,8 +84,6 @@ export default {
         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 {

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

@@ -93,8 +93,6 @@ export default {
         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 {

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/appSettings.vue

@@ -26,17 +26,16 @@ export default {
   computed: {
     appTheme: {
       get() {
-        return this.$store.state.globalSettings.appTheme;
+        return this.$store.state.appTheme;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["appTheme", value]);
+        this.$store.commit("changeAppTheme", value);
       }
     }
   },
 
   watch: {
     appTheme() {
-      console.log("Saving appTheme setting");
       this.setLocalStorageObj("appTheme", this.appTheme);
     }
   },

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

@@ -110,7 +110,6 @@ export default {
     },
 
     applyConfigRequest: function() {
-      console.log("Applying config to the microscope");
       var payload = {
         camera: {
           picamera: {

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/featuresSettings.vue

@@ -29,10 +29,10 @@ export default {
   computed: {
     IHIEnabled: {
       get() {
-        return this.$store.state.globalSettings.IHIEnabled;
+        return this.$store.state.IHIEnabled;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["IHIEnabled", value]);
+        this.$store.commit("changeIHIEnabled", value);
         this.$root.$emit("globalSafeTogglePreview", value);
       }
     }
@@ -40,7 +40,6 @@ export default {
 
   watch: {
     IHIEnabled() {
-      console.log("Saving IHIEnabled setting");
       this.setLocalStorageObj("IHIEnabled", this.IHIEnabled);
     }
   },

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/microscopeSettings.vue

@@ -108,8 +108,6 @@ export default {
         }
       };
 
-      console.log(payload);
-
       // Send request to update config
       axios
         .put(this.settingsUri, payload)

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/stageSettings.vue

@@ -56,11 +56,9 @@ export default {
 
   methods: {
     getStageType: function() {
-      console.log("Getting stage type");
       axios
         .get(this.stageTypeUri)
         .then(response => {
-          console.log("Stage type is  " + response.data);
           this.stageType = response.data;
         })
         .catch(error => {
@@ -68,7 +66,6 @@ export default {
         });
     },
     setStageType: function() {
-      console.log("Setting stage type");
       axios
         .put(this.stageTypeUri, this.stageType, {
           headers: {
@@ -77,7 +74,7 @@ export default {
         })
         .then(response => {
           this.stageType = response.data;
-          console.log("Stage type set to " + this.stageType);
+
           this.modalNotify("Stage geometry changed.");
         })
         .catch(error => {

openflexure_microscope/api/static/src/components/tabContentComponents/settingsComponents/streamSettings.vue

@@ -61,29 +61,29 @@ export default {
   computed: {
     disableStream: {
       get() {
-        return this.$store.state.globalSettings.disableStream;
+        return this.$store.state.disableStream;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["disableStream", value]);
+        this.$store.commit("changeDisableStream", value);
       }
     },
 
     autoGpuPreview: {
       get() {
-        return this.$store.state.globalSettings.autoGpuPreview;
+        return this.$store.state.autoGpuPreview;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["autoGpuPreview", value]);
+        this.$store.commit("changeAutoGpuPreview", value);
         this.$root.$emit("globalSafeTogglePreview", value);
       }
     },
 
     trackWindow: {
       get() {
-        return this.$store.state.globalSettings.trackWindow;
+        return this.$store.state.trackWindow;
       },
       set(value) {
-        this.$store.commit("changeSetting", ["trackWindow", value]);
+        this.$store.commit("changeTrackWindow", value);
       }
     }
   }

openflexure_microscope/api/static/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue

@@ -174,7 +174,6 @@ export default {
         return this.currentTime.substr(0, 19);
       },
       set(val) {
-        console.log(val);
         // Get timezone
         var dt = new Date();
         var tzo = -dt.getTimezoneOffset(),

openflexure_microscope/api/static/src/components/tabContentComponents/streamContent.vue

@@ -21,7 +21,7 @@
       </div>
 
       <div
-        v-else-if="$store.state.globalSettings.disableStream"
+        v-else-if="$store.state.disableStream"
         class="uk-position-center position-relative text-center"
       >
         Stream preview disabled
@@ -46,17 +46,13 @@ export default {
       isVisible: false,
       displaySize: [0, 0],
       displayPosition: [0, 0],
-      fov: [0, 0],
       resizeTimeoutId: setTimeout(this.doneResizing, 500)
     };
   },
 
   computed: {
     streamEnabled: function() {
-      return (
+      return this.$store.getters.ready && !this.$store.state.disableStream;
-        this.$store.getters.ready &&
-        !this.$store.state.globalSettings.disableStream
-      );
     },
     thisStreamOpen: function() {
       // Only a single MJPEG connection should be open at a time
@@ -77,7 +73,6 @@ export default {
   },
 
   mounted() {
-    console.log(`${this._uid} mounted`);
     // A global signal listener to change the GPU preview state
     this.$root.$on("globalTogglePreview", state => {
       this.previewRequest(state);
@@ -101,15 +96,11 @@ export default {
   },
 
   created: function() {
-    console.log(`${this._uid} created`);
     // Send a request to start/stop GPU preview based on global setting
-    this.safePreviewRequest(this.$store.state.globalSettings.autoGpuPreview);
+    this.safePreviewRequest(this.$store.state.autoGpuPreview);
-    // Get FOV from settings
-    this.updateFov();
   },
 
   beforeDestroy: function() {
-    console.log(`${this._uid} being destroyed`);
     // Remove global signal listener to change the GPU preview state
     this.$root.$off("globalTogglePreview");
     // Remove global signal listener to flash the stream element
@@ -136,7 +127,7 @@ export default {
     },
 
     clickMonitor: function(event) {
-      // Calculate steps from event coordinates and store config FOV
+      // Calculate steps from event coordinates
       let xCoordinate = event.offsetX;
       let yCoordinate = event.offsetY;
 
@@ -169,15 +160,12 @@ export default {
 
     handleDoneResize: function() {
       // Recalculate size
-      console.log(`Recalculating frame size for ${this._uid}`);
+
       this.recalculateSize();
       // Handle closed stream
       if (this.displaySize[0] == 0 && this.displaySize[1] == 0) {
-        console.log(`${this._uid} is zero`);
         // If this stream was previously active
         if (this.$store.state.activeStreams[this._uid] == true) {
-          console.log(`${this._uid} was active`);
-          console.log(`STREAM ${this._uid} CLOSED`);
           this.$store.commit("removeStream", this._uid);
           // If all streams are closed, request the GPU preview close
           var a = Object.values(this.$store.state.activeStreams);
@@ -188,9 +176,8 @@ export default {
         }
         // If resized to anything other than zero
       } else {
-        console.log(`STREAM ${this._uid} OPEN`);
         this.$store.commit("addStream", this._uid);
-        if (this.$store.state.globalSettings.autoGpuPreview == true) {
+        if (this.$store.state.autoGpuPreview == true) {
           // Start the preview immediately
           this.safePreviewRequest(true);
           // Send another start preview request after a timeout
@@ -261,7 +248,7 @@ export default {
       // If requesting starting the stream, but this component is inactive, skip
       if (
         this.$store.getters.ready == true &&
-        this.$store.state.globalSettings.autoGpuPreview == true
+        this.$store.state.autoGpuPreview == true
       ) {
         var requestUri = null;
         // Create URI
@@ -273,10 +260,7 @@ export default {
 
         // Generate payload if tracking window position
         var payload = {};
-        if (
+        if (this.$store.state.trackWindow == true && state == true) {
-          this.$store.state.globalSettings.trackWindow == true &&
-          state == true
-        ) {
           // Recalculate frame dimensions and position
           this.recalculateSize();
           // Copy data into payload array
@@ -291,7 +275,7 @@ export default {
         }
 
         // Send preview request
-        console.log(`${this._uid} toggled preview to ${state}`);
+
         axios
           .post(requestUri, payload)
           .then(() => {})
@@ -299,21 +283,6 @@ export default {
             this.modalError(error); // Let mixin handle error
           });
       }
-    },
-
-    updateFov: function() {
-      console.log("Updating FOV");
-      // Get the current field-of-view setting from the server
-      axios
-        .get(`${this.settingsUri}/fov`)
-        .then(response => {
-          if (response.data) {
-            this.fov = response.data;
-          }
-        })
-        .catch(error => {
-          this.modalError(error); // Let mixin handle error
-        });
     }
   }
 };

openflexure_microscope/api/static/src/main.js

@@ -3,7 +3,6 @@ import App from "./App.vue";
 import store from "./store";
 import UIkit from "uikit";
 import VueTour from "vue-tour";
-import LoadScript from "vue-plugin-load-script";
 import VueFriendlyIframe from "vue-friendly-iframe";
 import VueObserveVisibility from "vue-observe-visibility";
 
@@ -22,9 +21,6 @@ UIkit.mixin(
   "accordion"
 );
 
-// Use load-script module
-Vue.use(LoadScript);
-
 // Use vue-tour module
 Vue.use(VueTour);
 
@@ -57,9 +53,7 @@ Vue.mixin({
           )
           .finally(function() {
             // Reenable the GPU preview, if it was active before the modal
-            console.log("Re-enabling GPU preview");
+            if (context.$store.state.autoGpuPreview) {
-            if (context.$store.state.globalSettings.autoGpuPreview) {
-              console.log("Re-enabling preview");
               context.$root.$emit("globalTogglePreview", true);
             }
           });
@@ -106,21 +100,17 @@ Vue.mixin({
         // If the response is a nicely formatted JSON response from the server
         if (error.response.data.message) {
           errormsg = `${error.response.status}: ${error.response.data.message}`;
-          console.log(errormsg);
         }
         // If the response is just some generic error response
         else {
           errormsg = `${error.response.status}: ${error.response.data}`;
-          console.log(errormsg);
         }
         // If the error occured during the request
       } else if (error.request) {
         errormsg = `${error.message}`;
-        console.log(errormsg);
         // Everything else
       } else {
         errormsg = `${error.message}`;
-        console.log(errormsg);
       }
       return errormsg;
     },
@@ -142,7 +132,6 @@ Vue.mixin({
         try {
           return JSON.parse(localStorage.getItem(keyName));
         } catch (e) {
-          console.log("Malformed entry. Removing from localStorage");
           localStorage.removeItem(keyName);
           return null;
         }

openflexure_microscope/api/static/src/store.js

@@ -9,13 +9,11 @@ export default new Vuex.Store({
     available: false,
     waiting: false,
     error: "",
-    globalSettings: {
+    disableStream: false,
-      disableStream: false,
+    autoGpuPreview: false,
-      autoGpuPreview: false,
+    trackWindow: true,
-      trackWindow: true,
+    IHIEnabled: false,
-      IHIEnabled: false,
+    appTheme: "system",
-      appTheme: "system"
-    },
     activeStreams: {}
   },
 
@@ -26,8 +24,20 @@ export default new Vuex.Store({
     changeWaiting(state, waiting) {
       state.waiting = waiting;
     },
-    changeSetting(state, [key, value]) {
+    changeDisableStream(state, disabled) {
-      state.globalSettings[key] = value;
+      state.disableStream = disabled;
+    },
+    changeAutoGpuPreview(state, enabled) {
+      state.autoGpuPreview = enabled;
+    },
+    changeTrackWindow(state, enabled) {
+      state.trackWindow = enabled;
+    },
+    changeAppTheme(state, theme) {
+      state.appTheme = theme;
+    },
+    changeIHIEnabled(state, enabled) {
+      state.IHIEnabled = enabled;
     },
     resetState(state) {
       state.waiting = false;

openflexure_microscope/api/static/vue.config.js

@@ -1,15 +0,0 @@
-var webpack = require("webpack");
-
-module.exports = {
-  configureWebpack: {
-    plugins: [
-      new webpack.DefinePlugin({
-        "process.env": {
-          PACKAGE: JSON.stringify(require("./package.json"))
-        }
-      })
-    ]
-  },
-
-  publicPath: ""
-};

openflexure_microscope/microscope.py

@@ -37,8 +37,6 @@ class Microscope:
 
         self.captures = CaptureManager()
 
-        self.fov = [0, 0]  #: Microscope field-of-view in stage motor steps
-
         # Store settings and configuration files
         self.settings_file = settings
         self.configuration_file = configuration
@@ -217,8 +215,6 @@ class Microscope:
                 self.id = settings.pop("id")
             if "name" in settings:
                 self.name = settings.pop("name")
-            if "fov" in settings:
-                self.fov = settings.pop("fov")
 
             # Extension settings
             if "extensions" in settings:
@@ -241,7 +237,6 @@ class Microscope:
         settings_current = {
             "id": self.id,
             "name": self.name,
-            "fov": self.fov,
             "extensions": self.extension_settings,
         }