Fixed global state and scrolltotop

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;
         }

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",

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/captureComponents/paneCapture.vue

@@ -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
     };

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"
       >

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,7 +341,10 @@ export default {
 
   methods: {
     scrollToTop() {
-      document.querySelector("#container-left").scrollTop = 0;
+      const el = document.querySelector("#container-left");
+      if (el) {
+        el.scrollTop = 0;
+      }
     },
 
     updateCaptures: function() {

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) {

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

@@ -26,7 +26,7 @@ export default {
   computed: {
     appTheme: {
       get() {
-        return this.$store.state.globalSettings.appTheme;
+        return this.$store.state.appTheme;
       },
       set(value) {
         this.$store.commit("changeAppTheme", value);

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

@@ -29,7 +29,7 @@ export default {
   computed: {
     IHIEnabled: {
       get() {
-        return this.$store.state.globalSettings.IHIEnabled;
+        return this.$store.state.IHIEnabled;
       },
       set(value) {
         this.$store.commit("changeIHIEnabled", value);

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

@@ -61,7 +61,7 @@ export default {
   computed: {
     disableStream: {
       get() {
-        return this.$store.state.globalSettings.disableStream;
+        return this.$store.state.disableStream;
       },
       set(value) {
         this.$store.commit("changeDisableStream", value);
@@ -70,7 +70,7 @@ export default {
 
     autoGpuPreview: {
       get() {
-        return this.$store.state.globalSettings.autoGpuPreview;
+        return this.$store.state.autoGpuPreview;
       },
       set(value) {
         this.$store.commit("changeAutoGpuPreview", value);
@@ -80,7 +80,7 @@ export default {
 
     trackWindow: {
       get() {
-        return this.$store.state.globalSettings.trackWindow;
+        return this.$store.state.trackWindow;
       },
       set(value) {
         this.$store.commit("changeTrackWindow", value);

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
@@ -52,10 +52,7 @@ export default {
 
   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
@@ -102,7 +99,7 @@ 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);
   },
 
   beforeDestroy: function() {
@@ -187,7 +184,7 @@ export default {
       } 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
@@ -258,7 +255,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
@@ -270,10 +267,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

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);
 
@@ -58,7 +54,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.globalSettings.autoGpuPreview) {
+            if (context.$store.state.autoGpuPreview) {
               console.log("Re-enabling preview");
               context.$root.$emit("globalTogglePreview", true);
             }

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: ""
-};