From bad736cc4691351529f38f6f5666a867e33b73ba Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 10 Mar 2026 19:55:12 +0000
Subject: [PATCH] Split slide scan tab into action tab and seperate controls.

---
 .../tabContentComponents/actionTab.vue        | 173 +++++++++++
 .../slideScanComponents/slideScanControls.vue | 122 ++++++++
 .../tabContentComponents/slideScanContent.vue | 274 +++++-------------
 3 files changed, 373 insertions(+), 196 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/actionTab.vue
 create mode 100644 webapp/src/components/tabContentComponents/slideScanComponents/slideScanControls.vue

diff --git a/webapp/src/components/tabContentComponents/actionTab.vue b/webapp/src/components/tabContentComponents/actionTab.vue
new file mode 100644
index 00000000..bb7e166f
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/actionTab.vue
@@ -0,0 +1,173 @@
+<template>
+  <div ref="actionTab" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
+    <div class="control-component uk-padding-small">
+      <div v-if="!taskStarted" class="uk-padding-small">
+        <slot name="controls"></slot>
+      </div>
+      <div v-if="taskStarted">
+        <h2 v-if="taskInfoTitle" style="text-align: center">{{ taskInfoTitle }}</h2>
+        <mini-stream-display v-if="taskInfoStream" />
+        <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
+        <action-button
+          v-if="taskRunning"
+          :thing="thing"
+          :action="action"
+          :force-id="taskId"
+          :force-url="taskUrl"
+          submit-label=""
+          :can-terminate="true"
+          @completed="$emit('completed')"
+          @update:task-status="taskStatus = $event"
+          @update:progress="progress = $event"
+          @update:log="log = $event"
+        />
+        <button
+          v-if="!taskRunning"
+          type="button"
+          class="uk-button uk-width-1-1 uk-position-relative"
+          @click="closeTask"
+        >
+          Close
+        </button>
+        <slot name="task-info"></slot>
+      </div>
+    </div>
+    <div class="main-view uk-width-expand uk-height-1-1">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import actionLogDisplay from "../labThingsComponents/actionLogDisplay.vue";
+import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
+import ActionButton from "../labThingsComponents/actionButton.vue";
+import { useIntersectionObserver } from "@vueuse/core";
+
+export default {
+  name: "ActionTab",
+
+  components: {
+    actionLogDisplay,
+    MiniStreamDisplay,
+    ActionButton,
+  },
+
+  props: {
+    action: {
+      type: String,
+      required: true,
+    },
+    thing: {
+      type: String,
+      required: true,
+    },
+    taskId: {
+      type: [String, null],
+      required: true,
+    },
+    taskUrl: {
+      type: [String, null],
+      required: true,
+    },
+    taskInfoTitle: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    taskInfoStream: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  emits: ["closeTask", "completed", "actionStartedExternally"],
+
+  data() {
+    return {
+      taskStatus: "pending",
+      progress: null,
+      log: [],
+      pollTimer: null,
+    };
+  },
+
+  computed: {
+    taskStarted() {
+      return this.taskId && this.taskUrl;
+    },
+    taskRunning() {
+      return (this.taskStatus == "running") | (this.taskStatus == "pending");
+    },
+  },
+
+  mounted() {
+    useIntersectionObserver(
+      this.$refs.actionTab,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0, // Adjust as needed
+      },
+    );
+  },
+
+  methods: {
+    /**
+     * Reset the data needed for actions to be polled.
+     */
+    resetData() {
+      this.taskStatus = "pending";
+      this.log = [];
+    },
+    closeTask() {
+      // Reset task status to pending so that it is re-read next time an action starts.
+      this.resetData();
+      this.$emit("closeTask");
+    },
+    visibilityChanged(isVisible) {
+      this.isVisible = isVisible;
+
+      if (this.isVisible) {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    },
+    startTimer() {
+      if (this.pollTimer) return;
+
+      this.pollTimer = setInterval(() => {
+        this.checkIfStartedExternally();
+      }, 1000);
+    },
+    stopTimer() {
+      if (!this.pollTimer) return;
+
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    },
+    async checkIfStartedExternally() {
+      if (!this.taskStarted | !this.taskRunning) {
+        const ongoingTask = await this.getOngingAction(this.thing, this.action);
+        if (ongoingTask) {
+          this.resetData();
+          const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
+          this.$emit("actionStartedExternally", ongoingTask.id, taskUrl);
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.control-component {
+  width: 33%;
+}
+#log-display {
+  height: 20em;
+}
+</style>
diff --git a/webapp/src/components/tabContentComponents/slideScanComponents/slideScanControls.vue b/webapp/src/components/tabContentComponents/slideScanComponents/slideScanControls.vue
new file mode 100644
index 00000000..4ee79f5a
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/slideScanComponents/slideScanControls.vue
@@ -0,0 +1,122 @@
+<template>
+  <!-- Workflow Selection Dropdown -->
+  <div ref="slideScanControls" class="uk-margin">
+    <label class="uk-form-label">Workflow</label>
+
+    <select
+      class="uk-select uk-form-small"
+      :value="workflowName"
+      @change="setWorkflow($event.target.value)"
+    >
+      <option v-for="(label, name) in workflowOptions" :key="name" :value="name">
+        {{ label }}
+      </option>
+    </select>
+  </div>
+  <server-specified-interface :elements="workflowSettings" @request-update="readSettings" />
+  <ul uk-accordion="multiple: true">
+    <li class="uk-open">
+      <a class="uk-accordion-title" href="#">Stitching Settings</a>
+      <div class="uk-accordion-content">
+        <div class="uk-margin">
+          <propertyControl
+            thing-name="smart_scan"
+            property-name="stitch_automatically"
+            label="Automatically Stitch Images Together"
+          />
+        </div>
+        <div class="uk-margin">
+          <propertyControl
+            thing-name="smart_scan"
+            property-name="stitch_tiff"
+            label="When Stitching, Produce a Pyramidal TIFF"
+          />
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import propertyControl from "@/components/labThingsComponents/propertyControl.vue";
+import ServerSpecifiedInterface from "@/components/labThingsComponents/serverSpecifiedInterface.vue";
+import { useIntersectionObserver } from "@vueuse/core";
+
+export default {
+  name: "SlideScanControls",
+
+  components: {
+    propertyControl,
+    ServerSpecifiedInterface,
+  },
+
+  data() {
+    return {
+      workflowName: undefined,
+      workflowSettings: [],
+      workflowOptions: [],
+    };
+  },
+
+  async created() {
+    this.readSettings();
+    this.workflowOptions = await this.readThingProperty(
+      "smart_scan",
+      "workflow_display_names",
+      true,
+    );
+  },
+
+  mounted() {
+    // sets visibilityChanged to true or false, which can then update settings if needed
+    useIntersectionObserver(
+      this.$refs.slideScanControls,
+      ([{ isIntersecting }]) => {
+        this.visibilityChanged(isIntersecting);
+      },
+      {
+        threshold: 0.0,
+      },
+    );
+  },
+
+  methods: {
+    visibilityChanged(isVisible) {
+      if (isVisible) {
+        this.readSettings();
+      }
+    },
+    async readSettings() {
+      this.workflowName = await this.readThingProperty("smart_scan", "workflow_name");
+
+      if (!this.workflowName) {
+        console.warn("Could not read workflow_name, using default");
+        this.workflowName = "histo_scan_workflow";
+      }
+
+      if (this.workflowName) {
+        this.ready = await this.readThingProperty(this.workflowName, "ready", true);
+        this.workflowSettings =
+          (await this.getThingEndpoint(this.workflowName, "settings_ui")) || [];
+      }
+    },
+    async setWorkflow(name) {
+      try {
+        this.workflowName = name;
+
+        await this.writeThingProperty("smart_scan", "workflow_name", name);
+
+        // refresh  UI
+        await this.readSettings();
+      } catch (err) {
+        this.modalError(err);
+
+        // revert if server rejected
+        this.workflowName = await this.readThingProperty("smart_scan", "workflow_name", true);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index c74a739e..bff73108 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,206 +1,98 @@
 <template>
-  <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" ref="slideScanView" class="uk-padding-small">
-        <!-- Workflow Selection Dropdown -->
-        <div class="uk-margin">
-          <label class="uk-form-label">Workflow</label>
-
-          <select
-            class="uk-select uk-form-small"
-            :value="workflowName"
-            @change="setWorkflow($event.target.value)"
-          >
-            <option v-for="(label, name) in workflowOptions" :key="name" :value="name">
-              {{ label }}
-            </option>
-          </select>
-        </div>
-        <server-specified-interface :elements="workflowSettings" @request-update="readSettings" />
-        <ul uk-accordion="multiple: true">
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#">Stitching Settings</a>
-            <div class="uk-accordion-content">
-              <div class="uk-margin">
-                <propertyControl
-                  thing-name="smart_scan"
-                  property-name="stitch_automatically"
-                  label="Automatically Stitch Images Together"
-                />
-              </div>
-              <div class="uk-margin">
-                <propertyControl
-                  thing-name="smart_scan"
-                  property-name="stitch_tiff"
-                  label="When Stitching, Produce a Pyramidal TIFF"
-                />
-              </div>
-            </div>
-          </li>
-        </ul>
-        <label class="uk-form-label" for="form-stacked-text">Sample ID</label>
-        <div class="uk-form-controls">
-          <input v-model="scan_name" class="uk-input uk-form-small" type="text" name="Scan Name" />
-        </div>
-        <div class="uk-margin">
-          <action-button
-            ref="smartScanButton"
-            thing="smart_scan"
-            action="sample_scan"
-            :submit-data="{ scan_name: scan_name }"
-            submit-label="Start Smart Scan"
-            :can-terminate="true"
-            @task-started="startScanning"
-            @update:task-status="taskStatus = $event"
-            @update:progress="progress = $event"
-            @update:log="log = $event"
-          />
-        </div>
+  <actionTab
+    thing="smart_scan"
+    action="sample_scan"
+    :task-id="taskId"
+    :task-url="taskUrl"
+    :task-info-title="infoPaneTitle"
+    :task-info-stream="displayImageOnRight"
+    @completed="onScanCompleted"
+    @close-task="closeTask"
+    @action-started-externally="startScanning"
+  >
+    <!-- MainView -->
+    <img
+      v-if="displayImageOnRight"
+      id="last-stitched-image"
+      class="image-fit"
+      :src="lastStitchedImage"
+    />
+    <streamDisplay v-else />
+    <template #controls>
+      <slideScanControls />
+      <label class="uk-form-label" for="form-stacked-text">Sample ID</label>
+      <div class="uk-form-controls">
+        <input v-model="scan_name" class="uk-input uk-form-small" type="text" name="Scan Name" />
       </div>
-      <div v-show="scanning">
-        <h2 v-if="displayImageOnRight" style="text-align: center">Live stitching preview</h2>
-        <mini-stream-display v-if="displayImageOnRight" />
-        <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
-        <action-progress-bar :progress="progress" :task-status="taskStatus" />
-        <button
-          v-if="cancellable"
-          type="button"
-          class="uk-button uk-button-danger uk-width-1-1"
-          @click="$refs.smartScanButton.terminateTask()"
-        >
-          Cancel
-        </button>
-        <div v-if="!cancellable" class="uk-margin uk-grid-small uk-child-width-expand" uk-grid>
-          <button
-            type="button"
-            class="uk-button"
-            @click="
-              scanning = false;
-              lastStitchedImage = null;
-            "
-          >
-            Close
-          </button>
-          <action-button
-            thing="smart_scan"
-            action="download_zip"
-            submit-label="Download ZIP"
-            :can-terminate="false"
-            :submit-data="{ scan_name: lastScanName }"
-            :button-primary="true"
-            @response="downloadZipFile"
-            @error="modalError"
-          />
-        </div>
+      <div class="uk-margin">
+        <action-button
+          ref="smartScanButton"
+          thing="smart_scan"
+          action="sample_scan"
+          :submit-data="{ scan_name: scan_name }"
+          submit-label="Start Smart Scan"
+          @task-started="startScanning"
+        />
       </div>
-      <h3 v-if="scanning">Scan ID: {{ lastScanName }}</h3>
-    </div>
-    <div class="view-image uk-width-expand uk-height-1-1">
-      <img
-        v-if="displayImageOnRight"
-        id="last-stitched-image"
-        class="image-fit"
-        :src="lastStitchedImage"
+    </template>
+    <template #task-info>
+      <action-button
+        v-if="scanComplete"
+        thing="smart_scan"
+        action="download_zip"
+        submit-label="Download ZIP"
+        :can-terminate="false"
+        :submit-data="{ scan_name: lastScanName }"
+        :button-primary="true"
+        @response="downloadZipFile"
+        @error="modalError"
       />
-      <streamDisplay v-else />
-    </div>
-  </div>
+      <h3 v-if="scanning">Scan ID: {{ lastScanName }}</h3>
+    </template>
+  </actionTab>
 </template>
 
 <script>
+import actionTab from "./actionTab.vue";
+import slideScanControls from "./slideScanComponents/slideScanControls.vue";
 import streamDisplay from "./streamContent.vue";
-import propertyControl from "../labThingsComponents/propertyControl.vue";
-import ServerSpecifiedInterface from "../labThingsComponents/serverSpecifiedInterface.vue";
-import actionLogDisplay from "../labThingsComponents/actionLogDisplay.vue";
-import actionProgressBar from "../labThingsComponents/actionProgressBar.vue";
-import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 import ActionButton from "../labThingsComponents/actionButton.vue";
-import { useIntersectionObserver } from "@vueuse/core";
 
 export default {
   name: "SlideScanContent",
 
   components: {
+    actionTab,
+    slideScanControls,
     streamDisplay,
-    propertyControl,
-    actionLogDisplay,
-    actionProgressBar,
-    MiniStreamDisplay,
     ActionButton,
-    ServerSpecifiedInterface,
   },
 
   data() {
     return {
       lastScanName: null,
-      scanning: false,
-      taskStatus: "pending",
-      correlateStatus: "",
-      stitchFromStageStatus: "",
-      progress: null,
-      log: [],
+      taskId: null,
+      taskUrl: null,
       lastStitchedImage: null,
+      scanComplete: false,
       scan_name: "",
-      workflowName: undefined,
-      workflowSettings: [],
-      workflowOptions: [],
     };
   },
 
   computed: {
-    cancellable() {
-      return (this.taskStatus == "running") | (this.taskStatus == "pending");
+    scanning() {
+      return this.taskId && this.taskUrl;
     },
     displayImageOnRight() {
-      return this.scanning & (this.lastStitchedImage !== null);
+      return this.scanning && this.lastStitchedImage !== null;
+    },
+    infoPaneTitle() {
+      if (!this.displayImageOnRight) return null;
+      return "Live stitching preview";
     },
-  },
-
-  async created() {
-    this.readSettings();
-    this.workflowOptions = await this.readThingProperty(
-      "smart_scan",
-      "workflow_display_names",
-      true,
-    );
-  },
-
-  mounted() {
-    useIntersectionObserver(
-      this.$refs.slideScanView,
-      ([{ isIntersecting }]) => {
-        this.visibilityChanged(isIntersecting);
-      },
-      {
-        threshold: 0.0,
-      },
-    );
   },
 
   methods: {
-    visibilityChanged(isVisible) {
-      if (isVisible) {
-        this.readSettings();
-      }
-    },
-    async readSettings() {
-      this.workflowName = await this.readThingProperty("smart_scan", "workflow_name");
-
-      if (!this.workflowName) {
-        console.warn("Could not read workflow_name, using default");
-        this.workflowName = "histo_scan_workflow";
-      }
-
-      if (this.workflowName) {
-        this.ready = await this.readThingProperty(this.workflowName, "ready", true);
-        this.workflowSettings =
-          (await this.getThingEndpoint(this.workflowName, "settings_ui")) || [];
-      }
-    },
-    onScanError: function (error) {
-      this.scanRunning = false;
-      this.modalError(error);
-    },
     /**
      * Transition the UI into "scanning" mode and begin polling for scan updates.
      *
@@ -220,13 +112,25 @@ export default {
      *  - clears any previous preview image
      *  - starts the polling loop that fetches scan progress and preview images
      */
-    startScanning() {
+    startScanning(id, url) {
       this.lastStitchedImage = null;
-      this.scanning = true;
+      this.lastScanName = null;
+      this.taskId = id;
+      this.taskUrl = url;
+      this.scanComplete = false;
       setTimeout(this.pollScan, 1000);
     },
+    onScanCompleted() {
+      this.scanComplete = true;
+    },
+    closeTask() {
+      this.taskId = null;
+      this.taskUrl = null;
+      this.lastStitchedImage = null;
+      this.scanComplete = false;
+    },
     async pollScan() {
-      if (this.cancellable) {
+      if (!this.scanComplete) {
         // while the scan is running
         let mtime = await this.readThingProperty("smart_scan", "latest_preview_stitch_time", true);
         if (mtime !== null) {
@@ -237,21 +141,6 @@ export default {
         setTimeout(this.pollScan, 1000); // keep rescheduling until it's stopped
       }
     },
-    async setWorkflow(name) {
-      try {
-        this.workflowName = name;
-
-        await this.writeThingProperty("smart_scan", "workflow_name", name);
-
-        // refresh  UI
-        await this.readSettings();
-      } catch (err) {
-        this.modalError(err);
-
-        // revert if server rejected
-        this.workflowName = await this.readThingProperty("smart_scan", "workflow_name", true);
-      }
-    },
     async downloadZipFile(response) {
       const scan_name = response.input.scan_name;
       const filename = `${scan_name}_images.zip`;
@@ -266,11 +155,4 @@ export default {
 };
 </script>
 
-<style scoped>
-#log-display {
-  height: 20em;
-}
-.control-component {
-  width: 33%;
-}
-</style>
+<style scoped></style>