From f35c96d653a61b5460d8e6b7a990546b776a6e00 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 14:10:09 +0000
Subject: [PATCH] Conditionally render tabs based on available Things

---
 webapp/src/components/appContent.vue          | 78 +++++++++++--------
 .../controlComponents/paneControl.vue         |  5 +-
 .../tabContentComponents/slideScanContent.vue |  7 +-
 webapp/src/mixins/labThingsMixins.js          |  3 +
 4 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index d23b29ef..d2460eba 100644
--- a/webapp/src/components/appContent.vue
+++ b/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 = [
-        {
-          id: "view",
-          title: "View",
-          icon: "visibility",
-          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;
+      // Filter core top tabs based on available Things. Once Things can specify a
+      // custom tab those will need to be added here
+      return this.coreTopTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
     },
     allTabs() {
       return [...this.topTabs, ...this.bottomTabs];
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index 6122db74..34c4776a 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/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)
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 21d3ce2a..0fdf6e1f 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/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>
-  <!-- Grid managing tab content -->
-  <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+  <div 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");
     },
diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js
index 84938d70..30e54a14 100644
--- a/webapp/src/mixins/labThingsMixins.js
+++ b/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);
     },