From 53644a691b3b8e463de40d5d1c0499a05493b366 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 12:53:14 +0000
Subject: [PATCH 1/7] Refactored taskSubmitter to enable bits to be re-used

---
 .../genericComponents/actionLogDisplay.vue    |  53 +++++
 .../genericComponents/actionProgressBar.vue   | 161 +++++++++++++
 .../genericComponents/taskSubmitter.vue       | 214 ++----------------
 .../slideScanComponents/paneSlideScan.vue     |  83 -------
 .../tabContentComponents/slideScanContent.vue |  98 +++++++-
 5 files changed, 329 insertions(+), 280 deletions(-)
 create mode 100644 webapp/src/components/genericComponents/actionLogDisplay.vue
 create mode 100644 webapp/src/components/genericComponents/actionProgressBar.vue
 delete mode 100644 webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue

diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
new file mode 100644
index 00000000..43a3a457
--- /dev/null
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -0,0 +1,53 @@
+<template>
+  <div id="log-container" ref="logContainer">
+    <div v-if="log">
+      <div v-for="(item, index) in log" :key="`log_entry_${index}`">
+        {{ item.message }}
+      </div>
+    </div>
+    <div v-if="taskStatus == 'error'" class="uk-alert uk-alert-danger">
+      The task failed due to an error. There may be more information in the log.
+    </div>
+    <div v-if="taskStatus == 'cancelled'" class="uk-alert uk-alert-warning">
+      The task was cancelled.
+    </div>
+    <div v-if="taskStatus == 'completed'" class="uk-alert uk-alert-success">
+      The task completed successfully.
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionLogDisplay",
+
+  props: {
+    taskStatus: {
+      type: String,
+      required: true
+    },
+    log: {
+      type: Array,
+      required: true
+    }
+  },
+
+  watch: {
+    log: function() {
+      this.$nextTick(function() {
+        let viewer = this.$refs.logContainer;
+        viewer.scrollTop = viewer.scrollHeight;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+#log-container {
+  position: relative;
+  height: 6em;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+</style>
diff --git a/webapp/src/components/genericComponents/actionProgressBar.vue b/webapp/src/components/genericComponents/actionProgressBar.vue
new file mode 100644
index 00000000..ae2c838c
--- /dev/null
+++ b/webapp/src/components/genericComponents/actionProgressBar.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="progress uk-margin-small">
+    <div v-if="indeterminateProgressBar" class="indeterminate"></div>
+    <div v-else class="determinate" :style="barWidthFromProgress"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ActionProgressBar",
+
+  props: {
+    progress: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    taskStatus: {
+      type: String,
+      required: true
+    }
+  },
+
+  computed: {
+    barWidthFromProgress: function() {
+      var progress = this.progress <= 100 ? this.progress : 100;
+      var styleString = `width: ${progress}%`;
+      return styleString;
+    },
+    indeterminateProgressBar: function() {
+      if (this.taskStatus == "pending") return true;
+      if ((this.taskStatus == "running") & !this.progress) {
+        return true;
+      }
+      return false;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../assets/less/theme.less";
+
+.progress {
+  position: relative;
+  height: 5px;
+  display: block;
+  width: 100%;
+  background-color: rgba(180, 180, 180, 0.15);
+  border-radius: 2px;
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+}
+
+.progress .determinate {
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  bottom: 0;
+  transition: width 0.3s linear;
+}
+
+.progress .indeterminate,
+.progress .determinate {
+  background-color: @global-primary-background;
+}
+
+.hook-inverse() {
+  .progress .indeterminate,
+  .progress .determinate {
+    background-color: @inverse-primary-muted-color;
+  }
+}
+
+.progress .indeterminate:before {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
+    infinite;
+  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.progress .indeterminate:after {
+  content: "";
+  position: absolute;
+  background-color: inherit;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  will-change: left, right;
+  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+    infinite;
+  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
+    infinite;
+  -webkit-animation-delay: 1.15s;
+  animation-delay: 1.15s;
+}
+
+@-webkit-keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes indeterminate {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@-webkit-keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes indeterminate-short {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+</style>
diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 1c235982..4ee591b3 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -4,30 +4,7 @@
     class="uk-margin-remove uk-padding-remove"
   >
     <div v-if="taskStarted" ref="isPollingElement">
-      <div class="progress uk-margin-small">
-        <div
-          v-if="progress & (taskStatus == 'running')"
-          class="determinate"
-          :style="barWidthFromProgress"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'cancelled'"
-          class="determinate"
-          :style="barWidthFromProgress"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'completed'"
-          class="determinate"
-          style="width:100%"
-        ></div>
-        <div
-          v-else-if="taskStatus == 'error'"
-          class="determinate"
-          style="width:0%"
-        ></div>
-        <div v-else class="indeterminate"></div>
-      </div>
-
+      <action-progress-bar :progress="progress" :task-status="taskStatus" />
       <button
         v-if="canTerminate && taskRunning"
         type="button"
@@ -58,31 +35,13 @@
     >
       <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
         <h2>{{ submitLabel }}</h2>
-        <div id="log-container" ref="logContainer">
-          <div v-for="(item, index) in log" :key="`log_entry_${index}`">
-            {{ item.message }}
-          </div>
-          <div v-if="taskStatus == 'error'" class="uk-alert-danger">
-            The task failed due to an error. There may be more information in
-            the log.
-          </div>
-          <div v-if="taskStatus == 'cancelled'" class="uk-alert-warning">
-            The task was cancelled.
-          </div>
-          <div v-if="taskStatus == 'completed'" class="uk-alert-success">
-            The task completed successfully.
-          </div>
-        </div>
+        <action-log-display :log="log" :task-status="taskStatus" />
         <div id="progress-and-cancel-row">
           <div class="stretchy">
-            <div class="progress uk-margin-small">
-              <div v-if="indeterminateProgressBar" class="indeterminate"></div>
-              <div
-                v-else
-                class="determinate"
-                :style="barWidthFromProgress"
-              ></div>
-            </div>
+            <action-progress-bar
+              :progress="progress"
+              :task-status="taskStatus"
+            />
           </div>
 
           <button
@@ -110,9 +69,12 @@
 <script>
 import axios from "axios";
 import UIkit from "uikit";
+import actionProgressBar from "./actionProgressBar.vue";
+import ActionLogDisplay from "./actionLogDisplay.vue";
 
 export default {
   name: "TaskSubmitter",
+  components: { actionProgressBar, ActionLogDisplay },
 
   props: {
     submitUrl: {
@@ -177,27 +139,21 @@ export default {
     };
   },
 
-  computed: {
-    barWidthFromProgress: function() {
-      var progress = this.progress <= 100 ? this.progress : 100;
-      var styleString = `width: ${progress}%`;
-      return styleString;
-    },
-    indeterminateProgressBar: function() {
-      if (this.taskStatus == "pending") return true;
-      if ((this.taskStatus == "running") & !this.progress) {
-        return true;
-      }
-      return false;
-    }
-  },
-
   watch: {
-    log: function() {
-      this.$nextTick(function() {
-        let viewer = this.$refs.logContainer;
-        viewer.scrollTop = viewer.scrollHeight;
-      });
+    progress(newval) {
+      this.$emit("update:progress", newval);
+    },
+    taskStarted(newval) {
+      this.$emit("update:taskStarted", newval);
+    },
+    taskRunning(newval) {
+      this.$emit("update:taskRunning", newval);
+    },
+    log(newval) {
+      this.$emit("update:log", newval);
+    },
+    taskStatus(newval) {
+      this.$emit("update:taskStatus", newval);
     }
   },
 
@@ -361,13 +317,6 @@ export default {
 <style lang="less" scoped>
 @import "../../assets/less/theme.less";
 
-#log-container {
-  position: relative;
-  height: 6em;
-  overflow-y: auto;
-  overflow-x: auto;
-}
-
 #progress-and-cancel-row {
   display: flex;
   flex-flow: row wrap;
@@ -387,121 +336,4 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
-.progress {
-  position: relative;
-  height: 5px;
-  display: block;
-  width: 100%;
-  background-color: rgba(180, 180, 180, 0.15);
-  border-radius: 2px;
-  background-clip: padding-box;
-  margin: 0.5rem 0 1rem 0;
-  overflow: hidden;
-}
-
-.progress .determinate {
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  bottom: 0;
-  transition: width 0.3s linear;
-}
-
-.progress .indeterminate,
-.progress .determinate {
-  background-color: @global-primary-background;
-}
-
-.hook-inverse() {
-  .progress .indeterminate,
-  .progress .determinate {
-    background-color: @inverse-primary-muted-color;
-  }
-}
-
-.progress .indeterminate:before {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
-    infinite;
-  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.progress .indeterminate:after {
-  content: "";
-  position: absolute;
-  background-color: inherit;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  will-change: left, right;
-  -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
-    infinite;
-  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
-    infinite;
-  -webkit-animation-delay: 1.15s;
-  animation-delay: 1.15s;
-}
-
-@-webkit-keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-@keyframes indeterminate {
-  0% {
-    left: -35%;
-    right: 100%;
-  }
-  60% {
-    left: 100%;
-    right: -90%;
-  }
-  100% {
-    left: 100%;
-    right: -90%;
-  }
-}
-@-webkit-keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
-@keyframes indeterminate-short {
-  0% {
-    left: -200%;
-    right: 100%;
-  }
-  60% {
-    left: 107%;
-    right: -8%;
-  }
-  100% {
-    left: 107%;
-    right: -8%;
-  }
-}
 </style>
diff --git a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue b/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
deleted file mode 100644
index 14c1eedb..00000000
--- a/webapp/src/components/tabContentComponents/slideScanComponents/paneSlideScan.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="uk-padding-small">
-    <div v-show="!backendOK" class="uk-alert-danger">
-      No scan back-end found.
-    </div>
-    <div v-show="backendOK">
-      <ul uk-accordion="multiple: true">
-        <li>
-          <a class="uk-accordion-title" href="#">Configure</a>
-            <div class="uk-accordion-content">
-                <div class="uk-margin">
-                  <propertyControl
-                    thing-name="smart_scan"
-                    property-name="max_range"
-                    label="Maximum Distance (steps)"
-                  />
-                  <div class="uk-margin">
-                    <propertyControl
-                      thing-name="smart_scan"
-                      property-name="autofocus_dz"
-                      label="Autofocus range (steps)"
-                    />
-                </div>
-                  <div class="uk-margin">
-                      <propertyControl
-                        thing-name="smart_scan"
-                        property-name="overlap"
-                        label="Image overlap (0-1)"
-                      />
-                  </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-        <div class="uk-margin">
-          <taskSubmitter
-          :submit-url="smartScanUri"
-          :submit-data="{ sample_check: true }"
-          submit-label="Start smart scan"
-          :can-terminate="true"
-          :modal-progress="true"
-          />
-        </div>
-        <div class="uk-margin">
-          <taskSubmitter
-          :submit-url="smartScanUri"
-          :submit-data="{ sample_check: false }"
-          submit-label="Start manual scan"
-          :can-terminate="true"
-          :modal-progress="true"
-          />
-        </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import taskSubmitter from "../../genericComponents/taskSubmitter";
-import propertyControl from "../../labThingsComponents/propertyControl.vue";
-
-export default {
-  components: {
-    taskSubmitter,
-    propertyControl
-  },
-
-  computed: {
-    backendOK() {
-      return this.thingAvailable("smart_scan");
-    },
-    smartScanUri() {
-      return this.thingActionUrl("smart_scan", "sample_scan");
-    }
-  },
-
-  methods: {
-    onScanError: function(error) {
-      this.scanRunning = false;
-      this.modalError(error);
-    }
-  }
-};
-</script>
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 53f3c3fa..f36547eb 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,8 +1,66 @@
 <template>
+  <div v-if="!backendOK" class="uk-alert-danger">
+    No scan back-end found.
+  </div>
   <!-- Grid managing tab content -->
-  <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
-    <div class="control-component">
-      <paneSlideScan />
+  <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">
+        <ul uk-accordion="multiple: true">
+          <li>
+            <a class="uk-accordion-title" href="#">Configure</a>
+            <div class="uk-accordion-content">
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="smart_scan"
+                  property-name="max_range"
+                  label="Maximum Distance (steps)"
+                />
+                <div class="uk-margin">
+                  <propertyControl
+                    thing-name="smart_scan"
+                    property-name="autofocus_dz"
+                    label="Autofocus range (steps)"
+                  />
+                </div>
+                <div class="uk-margin">
+                  <propertyControl
+                    thing-name="smart_scan"
+                    property-name="overlap"
+                    label="Image overlap (0-1)"
+                  />
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+        <div class="uk-margin">
+          <taskSubmitter
+            :submit-url="smartScanUri"
+            submit-label="Start smart scan"
+            :can-terminate="true"
+            :modal-progress="true"
+            :submit-data="{ sample_check: false }"
+            @update:taskRunning="scanning = $event"
+            @update:taskStatus="taskStatus = $event"
+            @update:progress="progress = $event"
+            @update:log="log = $event"
+          />
+        </div>
+        <div class="uk-margin">
+          <taskSubmitter
+            :submit-url="smartScanUri"
+            submit-label="Start manual scan"
+            :can-terminate="true"
+            :modal-progress="true"
+            :submit-data="{ sample_check: false }"
+            @update:taskRunning="scanning = $event"
+            @update:taskStatus="taskStatus = $event"
+            @update:progress="progress = $event"
+            @update:log="log = $event"
+          />
+        </div>
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <streamDisplay />
@@ -11,15 +69,43 @@
 </template>
 
 <script>
-import paneSlideScan from "./slideScanComponents/paneSlideScan";
 import streamDisplay from "./streamContent.vue";
+import taskSubmitter from "../genericComponents/taskSubmitter";
+import propertyControl from "../labThingsComponents/propertyControl.vue";
 
 export default {
   name: "SlideScanContent",
 
   components: {
-    paneSlideScan,
-    streamDisplay
+    streamDisplay,
+    taskSubmitter,
+    propertyControl
+  },
+
+  data() {
+    return {
+      lastScanName: null,
+      scanning: false,
+      taskStatus: null,
+      progress: null,
+      log: []
+    };
+  },
+
+  computed: {
+    backendOK() {
+      return this.thingAvailable("smart_scan");
+    },
+    smartScanUri() {
+      return this.thingActionUrl("smart_scan", "sample_scan");
+    }
+  },
+
+  methods: {
+    onScanError: function(error) {
+      this.scanRunning = false;
+      this.modalError(error);
+    }
   }
 };
 </script>

From 46444770f3c7b6678d73abcd5e723be9f7ae2495 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 13:24:01 +0000
Subject: [PATCH 2/7] Improved styling and synchronisation

---
 .../genericComponents/actionLogDisplay.vue    |  5 +--
 .../genericComponents/taskSubmitter.vue       |  7 +++-
 .../tabContentComponents/slideScanContent.vue | 38 ++++++++++++++++---
 3 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
index 43a3a457..bbd2b616 100644
--- a/webapp/src/components/genericComponents/actionLogDisplay.vue
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="log-container" ref="logContainer">
+  <div class="log-container" ref="logContainer">
     <div v-if="log">
       <div v-for="(item, index) in log" :key="`log_entry_${index}`">
         {{ item.message }}
@@ -44,9 +44,8 @@ export default {
 </script>
 
 <style scoped>
-#log-container {
+.log-container {
   position: relative;
-  height: 6em;
   overflow-y: scroll;
   overflow-x: auto;
 }
diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 4ee591b3..ee289cd4 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -33,7 +33,7 @@
       class=""
       uk-modal="bg-close: false; esc-close: false; stack: true;"
     >
-      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" id="status-modal">
         <h2>{{ submitLabel }}</h2>
         <action-log-display :log="log" :task-status="taskStatus" />
         <div id="progress-and-cancel-row">
@@ -308,6 +308,7 @@ export default {
     },
 
     terminateTask: function() {
+      console.log(`deleting task at ${this.taskUrl}`);
       axios.delete(this.taskUrl);
     }
   }
@@ -336,4 +337,8 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
+
+#status-modal .log-container {
+  height:10em;
+}
 </style>
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index f36547eb..6d5f591c 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -39,12 +39,12 @@
             :submit-url="smartScanUri"
             submit-label="Start smart scan"
             :can-terminate="true"
-            :modal-progress="true"
-            :submit-data="{ sample_check: false }"
+            :submit-data="{ sample_check: true }"
             @update:taskRunning="scanning = $event"
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
             @update:log="log = $event"
+            ref="smartScanTaskSubmitter"
           />
         </div>
         <div class="uk-margin">
@@ -52,7 +52,6 @@
             :submit-url="smartScanUri"
             submit-label="Start manual scan"
             :can-terminate="true"
-            :modal-progress="true"
             :submit-data="{ sample_check: false }"
             @update:taskRunning="scanning = $event"
             @update:taskStatus="taskStatus = $event"
@@ -61,6 +60,22 @@
           />
         </div>
       </div>
+      <div v-show="scanning">
+        <action-log-display
+          id="log-display"
+          :log="log"
+          :task-status="taskStatus"
+        />
+        <action-progress-bar :progress="progress" :task-status="taskStatus" />
+        <button
+          v-if="scanning"
+          type="button"
+          class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
+          @click="$refs.smartScanTaskSubmitter.terminateTask()"
+        >
+          Cancel
+        </button>
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <streamDisplay />
@@ -72,6 +87,8 @@
 import streamDisplay from "./streamContent.vue";
 import taskSubmitter from "../genericComponents/taskSubmitter";
 import propertyControl from "../labThingsComponents/propertyControl.vue";
+import actionLogDisplay from "../genericComponents/actionLogDisplay.vue";
+import actionProgressBar from "../genericComponents/actionProgressBar.vue";
 
 export default {
   name: "SlideScanContent",
@@ -79,14 +96,16 @@ export default {
   components: {
     streamDisplay,
     taskSubmitter,
-    propertyControl
+    propertyControl,
+    actionLogDisplay,
+    actionProgressBar
   },
 
   data() {
     return {
       lastScanName: null,
       scanning: false,
-      taskStatus: null,
+      taskStatus: "pending",
       progress: null,
       log: []
     };
@@ -109,3 +128,12 @@ export default {
   }
 };
 </script>
+
+<style scoped>
+#log-display {
+  height: 20em;
+}
+.control-component {
+  width: 33%;
+}
+</style>

From 29177d72143963e71f82f9a83713623cac9b530e Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 20:13:10 +0000
Subject: [PATCH 3/7] Scroll to the bottom when status messages appear

The log viewer was scrolling to the bottom when new logs
appeared, but not when the status updated. This meant that the status update may have been invisible. I now scroll
when the status changes too, which should fix the problem.
---
 .../components/genericComponents/actionLogDisplay.vue    | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
index bbd2b616..0fb81c2a 100644
--- a/webapp/src/components/genericComponents/actionLogDisplay.vue
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -34,6 +34,15 @@ export default {
 
   watch: {
     log: function() {
+      this.scrollToBottom();
+    },
+    taskStatus: function() {
+      this.scrollToBottom();
+    }
+  },
+
+  methods: {
+    scrollToBottom() {
       this.$nextTick(function() {
         let viewer = this.$refs.logContainer;
         viewer.scrollTop = viewer.scrollHeight;

From 81540ebc451c31b6586947bdde3f0bfe618c3413 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 20:13:39 +0000
Subject: [PATCH 4/7] Linter fixes

---
 .../src/components/genericComponents/actionLogDisplay.vue  | 2 +-
 webapp/src/components/genericComponents/taskSubmitter.vue  | 7 +++++--
 .../components/tabContentComponents/slideScanContent.vue   | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
index 0fb81c2a..4e557c6c 100644
--- a/webapp/src/components/genericComponents/actionLogDisplay.vue
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="log-container" ref="logContainer">
+  <div ref="logContainer" class="log-container">
     <div v-if="log">
       <div v-for="(item, index) in log" :key="`log_entry_${index}`">
         {{ item.message }}
diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index ee289cd4..105af6c8 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -33,7 +33,10 @@
       class=""
       uk-modal="bg-close: false; esc-close: false; stack: true;"
     >
-      <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical" id="status-modal">
+      <div
+        id="status-modal"
+        class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical"
+      >
         <h2>{{ submitLabel }}</h2>
         <action-log-display :log="log" :task-status="taskStatus" />
         <div id="progress-and-cancel-row">
@@ -339,6 +342,6 @@ export default {
 }
 
 #status-modal .log-container {
-  height:10em;
+  height: 10em;
 }
 </style>
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 6d5f591c..d4a62866 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -36,6 +36,7 @@
         </ul>
         <div class="uk-margin">
           <taskSubmitter
+            ref="smartScanTaskSubmitter"
             :submit-url="smartScanUri"
             submit-label="Start smart scan"
             :can-terminate="true"
@@ -44,7 +45,6 @@
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
             @update:log="log = $event"
-            ref="smartScanTaskSubmitter"
           />
         </div>
         <div class="uk-margin">

From f03e0188e479e9fc5e19e7a4216f1fe4adc4fa16 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 20:19:08 +0000
Subject: [PATCH 5/7] Fix a typo when reacting to an existing invocation

checkExistingTasks was looking up the task's `self` link by
checking for `rel=self`, which failed. I have corrected this
to `rel="self"` - `self` would have evaluated to `undefined`.
---
 webapp/src/components/genericComponents/taskSubmitter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/genericComponents/taskSubmitter.vue b/webapp/src/components/genericComponents/taskSubmitter.vue
index 105af6c8..8ebc1bf0 100644
--- a/webapp/src/components/genericComponents/taskSubmitter.vue
+++ b/webapp/src/components/genericComponents/taskSubmitter.vue
@@ -194,7 +194,7 @@ export default {
             this.$emit("taskStarted");
             this.startPolling(
               task.id,
-              task.links.find(t => t.rel == self).href
+              task.links.find(t => t.rel == "self").href
             );
           }
         }

From 215bfb51213dc6e839d77b972a6febd15fb0be27 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 20:33:49 +0000
Subject: [PATCH 6/7] Leave scan log open until closed

The log/progress view is now closed explicitly, rather than disappearing as soon as the scan is over.
---
 .../tabContentComponents/slideScanContent.vue    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index d4a62866..de827dbd 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -41,7 +41,7 @@
             submit-label="Start smart scan"
             :can-terminate="true"
             :submit-data="{ sample_check: true }"
-            @update:taskRunning="scanning = $event"
+            @taskStarted="scanning = true"
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
             @update:log="log = $event"
@@ -53,7 +53,6 @@
             submit-label="Start manual scan"
             :can-terminate="true"
             :submit-data="{ sample_check: false }"
-            @update:taskRunning="scanning = $event"
             @update:taskStatus="taskStatus = $event"
             @update:progress="progress = $event"
             @update:log="log = $event"
@@ -68,13 +67,21 @@
         />
         <action-progress-bar :progress="progress" :task-status="taskStatus" />
         <button
-          v-if="scanning"
+          v-if="cancellable"
           type="button"
           class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
           @click="$refs.smartScanTaskSubmitter.terminateTask()"
         >
           Cancel
         </button>
+        <button
+          v-if="!cancellable"
+          type="button"
+          class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
+          @click="scanning = false"
+        >
+          Close
+        </button>
       </div>
     </div>
     <div class="view-component uk-width-expand">
@@ -117,6 +124,9 @@ export default {
     },
     smartScanUri() {
       return this.thingActionUrl("smart_scan", "sample_scan");
+    },
+    cancellable() {
+      return (this.taskStatus == "running") | (this.taskStatus == "pending");
     }
   },
 

From 7c887040595bb426eac3785b59af87d865b2937f Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 10 Jan 2024 20:48:22 +0000
Subject: [PATCH 7/7] Only show scrollbar if needed

---
 webapp/src/components/genericComponents/actionLogDisplay.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/genericComponents/actionLogDisplay.vue b/webapp/src/components/genericComponents/actionLogDisplay.vue
index 4e557c6c..f805cf4e 100644
--- a/webapp/src/components/genericComponents/actionLogDisplay.vue
+++ b/webapp/src/components/genericComponents/actionLogDisplay.vue
@@ -55,7 +55,7 @@ export default {
 <style scoped>
 .log-container {
   position: relative;
-  overflow-y: scroll;
+  overflow-y: auto;
   overflow-x: auto;
 }
 </style>