Merge branch 'action-modal-w-stream' into 'v3'

CSM modal shows stream

Closes #678

See merge request openflexure/openflexure-microscope-server!483

src/openflexure_microscope_server/ui.py

@@ -40,6 +40,13 @@ class ActionButton(BaseModel):
     modal_progress: bool = False
     """Specify whether to show a progress modal."""
 
+    stream_with_modal: bool = False
+    """Specify whether to show a mini stream preview in the progress modal.
+
+    This option only has an effect if `modal_progress` is True.
+    If `modal_progress` is False, no modal (and therefore no stream preview) is shown.
+    """
+
     notify_on_success: bool = False
     """Specify whether to a notification on successful completion."""
 

webapp/src/components/labThingsComponents/actionButton.vue

@@ -21,6 +21,7 @@
       :task-running="taskRunning"
       :task-started="taskStarted"
       :task-status="taskStatus"
+      :display-stream="modalProgress && streamWithModal"
       @terminate-task="terminateTask"
     />
   </div>
@@ -99,6 +100,11 @@ export default {
       required: false,
       default: false,
     },
+    streamWithModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
 
   emits: [

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -2,6 +2,10 @@
   <div ref="modal" class="" uk-modal="bg-close: false; esc-close: false; stack: true;">
     <div id="status-modal" class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
       <h2>{{ title }}</h2>
+      <mini-stream-display
+        v-if="displayStream"
+        class="uk-margin-small-bottom"
+      />
       <action-log-display :log="log" :task-status="taskStatus" />
       <div id="progress-and-cancel-row">
         <div class="stretchy">
@@ -29,12 +33,14 @@ import UIkit from "uikit";
 import ActionProgressBar from "./actionProgressBar.vue";
 import ActionLogDisplay from "./actionLogDisplay.vue";
 import { eventBus } from "../../eventBus.js";
+import miniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
 
 export default {
   name: "ActionStatusModal",
   components: {
     ActionProgressBar,
     ActionLogDisplay,
+    miniStreamDisplay,
   },
 
   props: {
@@ -67,6 +73,11 @@ export default {
       type: String,
       required: true,
     },
+    displayStream: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 
   emits: ["terminateTask"],
@@ -104,7 +115,11 @@ export default {
   margin-left: 5px;
   margin-right: 5px;
 }
-
+#status-modal {
+  max-height: 90vh;   // never exceed 90% of viewport height
+  display: flex;
+  flex-direction: column;
+}
 #status-modal .log-container {
   height: 10em;
 }

webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue

@@ -9,6 +9,7 @@
     :confirmation-message="actionData.confirmation_message"
     :button-primary="actionData.button_primary"
     :modal-progress="actionData.modal_progress"
+    :stream-with-modal="actionData.stream_with_modal"
     @response="actionResponse"
     @error="modalError"
     @finished="actionFinished"

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -13,6 +13,7 @@
         :modal-progress="true"
         @response="onRecalibrateResponse"
         @error="modalError"
+        :streamWithModal="true"
       />
     </div>
     <button