Conditionally render tabs based on available Things

webapp/src/components/appContent.vue

@@ -135,6 +135,45 @@ export default {
           component: powerContent,
         },
       ],
+      coreTopTabs: [
+        {
+          id: "view",
+          title: "View",
+          icon: "visibility",
+          component: viewContent,
+          requiredThings: [],
+        },
+        {
+          id: "control",
+          title: "Control",
+          icon: "gamepad",
+          component: controlContent,
+          requiredThings: [],
+        },
+        {
+          id: "background-detect",
+          title: "Background Detect",
+          icon: "background_replace",
+          component: backgroundDetectContent,
+          // While stage isn't needed; automatic background detect has little function
+          // for a manual microscope.
+          requiredThings: ["stage"],
+        },
+        {
+          id: "slide-scan",
+          title: "Slide Scan",
+          icon: "settings_overscan",
+          component: slideScanContent,
+          requiredThings: ["smart_scan"],
+        },
+        {
+          id: "scan-list",
+          title: "Scan List",
+          icon: "photo_library",
+          component: scanListContent,
+          requiredThings: ["smart_scan"],
+        },
+      ],
     };
   },
 
@@ -151,39 +190,12 @@ export default {
     },
 
     topTabs: function () {
-      let tabs = [
+      // Filter core top tabs based on available Things. Once Things can specify a
-        {
+      // custom tab those will need to be added here
-          id: "view",
+      return this.coreTopTabs.filter((tab) => {
-          title: "View",
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
-          icon: "visibility",
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
-          component: viewContent,
+      });
-        },
-        {
-          id: "control",
-          title: "Control",
-          icon: "gamepad",
-          component: controlContent,
-        },
-        {
-          id: "background-detect",
-          title: "Background Detect",
-          icon: "background_replace",
-          component: backgroundDetectContent,
-        },
-        {
-          id: "slide-scan",
-          title: "Slide Scan",
-          icon: "settings_overscan",
-          component: slideScanContent,
-        },
-        {
-          id: "scan-list",
-          title: "Scan List",
-          icon: "photo_library",
-          component: scanListContent,
-        },
-      ];
-      return tabs;
     },
     allTabs() {
       return [...this.topTabs, ...this.bottomTabs];

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="paneControl" class="uk-padding-small">
-    <div v-if="setPosition">
+    <div v-if="stageAvailable">
       <ul uk-accordion="multiple: true">
         <li>
           <a class="uk-accordion-title" href="#">Configure</a>
@@ -167,6 +167,9 @@ export default {
   },
 
   computed: {
+    stageAvailable() {
+      return this.thingAvailable("stage");
+    },
     // Note that as stepSize and invert are set based on internals we can use
     // get() and set() to interact with the store. Instead use a deep watcher to
     // update the store (see ``watch:`` below)

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -1,7 +1,5 @@
 <template>
-  <div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
+  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
-  <!-- Grid managing tab content -->
-  <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component uk-padding-small">
       <div v-show="!scanning" class="uk-padding-small">
         <ul uk-accordion="multiple: true">
@@ -183,9 +181,6 @@ export default {
   },
 
   computed: {
-    backendOK() {
-      return this.thingAvailable("smart_scan");
-    },
     cancellable() {
       return (this.taskStatus == "running") | (this.taskStatus == "pending");
     },

webapp/src/mixins/labThingsMixins.js

@@ -13,6 +13,9 @@ export default {
     thingDescription(thing) {
       return this.$store.getters["wot/thingDescription"](thing);
     },
+    thingList() {
+      return this.$store.getters["wot/thingList"];
+    },
     thingAvailable(thing) {
       return this.$store.getters["wot/thingAvailable"](thing);
     },