Merge branch 'bugfix/streamContent_leaks' into 'v3'

ui_migration bugfix(MJPEG) fix logic and lifecycle leaks at StreamDisplay, MiniStreamDisplay keeping request open in the background.

Closes #550

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

webapp/src/components/genericComponents/miniStreamDisplay.vue

@@ -5,7 +5,7 @@
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
-      v-if="isVisible"
+      v-show="isVisible && streamEnabled"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
       :src="streamImgUri"
@@ -19,33 +19,87 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { useSettingsStore } from "@/stores/settings.js";
 import { mapState } from "pinia";
 
+const ONE_PIXEL_FALLBACK = "data:image/PNG;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+
 // Export main app
 export default {
   name: "MiniStreamDisplay",
 
+  props: {
+    streamId: {
+      type: [String],
+      required: true,
+    },
+  },
+  setup() {
+    const store = useSettingsStore();
+    return {
+      store,
+    };
+  },
   data: function () {
     return {
       isVisible: false,
+      observerTimeout: null,
     };
   },
 
   computed: {
-    ...mapState(useSettingsStore, ["baseUri"]),
-    streamImgUri() {
-      return `${this.baseUri}/camera/mjpeg_stream`;
+    ...mapState(useSettingsStore, ["baseUri", "disableStream", "ready"]),
+    streamEnabled: function () {
+      return this.ready && !this.disableStream;
+    },
+    streamImgUri: function () {
+      // Require BOTH visibility AND the enabled state
+      if (this.isVisible && this.streamEnabled) {
+        const url = new URL(`${this.baseUri}/camera/mjpeg_stream`);
+        url.searchParams.append("streamId", this.streamId);
+        return url.toString();
+      }
+
+      // Force the browser to kill the connection by loading a 1 pixel image
+      return ONE_PIXEL_FALLBACK;
     },
   },
 
   mounted() {
-    useIntersectionObserver(
+    const { stop } = useIntersectionObserver(
       this.$refs.streamDisplay,
       ([{ isIntersecting }]) => {
+        // Always update local visibility instantly
         this.isVisible = isIntersecting;
+
+        // Clear any previous pending timers to prevent ghost fires
+        clearTimeout(this.observerTimeout);
+
+        if (isIntersecting) {
+          // If it's TRUE, we don't want to wait! Turn the stream on immediately.
+          this.store.addStream(this.streamId);
+        } else {
+          // If it's FALSE, wait 50ms before telling the store.
+          // If a TRUE event fires in the next 50ms (like during a tab switch),
+          // this timeout will be cancelled and the stream will never flicker off!
+          this.observerTimeout = setTimeout(() => {
+            this.store.removeStream(this.streamId);
+          }, 50);
+        }
       },
-      {
-        threshold: 0.0,
-      },
+      { threshold: 0.0 },
     );
+    this.stopIntersectionObserver = stop;
+  },
+
+  beforeUnmount() {
+    clearTimeout(this.observerTimeout); // Clean up the timer!
+    if (this.stopIntersectionObserver) {
+      this.stopIntersectionObserver();
+    }
+    this.store.removeStream(this.streamId);
+    // Override img source to single pixel and drop MJPEG stream
+    const imgElement = this.$refs["click-frame"];
+    if (imgElement) {
+      imgElement.src = ONE_PIXEL_FALLBACK;
+    }
   },
 };
 </script>

webapp/src/components/labThingsComponents/actionStatusModal.vue

@@ -2,7 +2,11 @@
   <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" />
+      <mini-stream-display
+        v-if="displayStream"
+        :stream-id="setStreamId"
+        class="uk-margin-small-bottom"
+      />
       <action-log-display :log="log" :task-status="taskStatus" />
       <div id="progress-and-cancel-row">
         <div class="stretchy">
@@ -79,6 +83,13 @@ export default {
 
   emits: ["terminateTask"],
 
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
+
   methods: {
     show() {
       UIkit.modal(this.$refs.modal).show();

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -68,8 +68,8 @@ export default {
     this.$refs["calibrationModalEl"].addEventListener("hidden", this.onHide);
     // Check which Things are available on mount.
     const allCalibrationTasks = {
-      camera: cameraCalibrationTask,
-      camera_stage_mapping: cameraStageMappingTask,
+      camera: markRaw(cameraCalibrationTask),
+      camera_stage_mapping: markRaw(cameraStageMappingTask),
     };
     this.availableCalibrationTasks = Object.fromEntries(
       Object.entries(allCalibrationTasks).filter(([thing]) => this.thingAvailable(thing)),

webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue

@@ -18,7 +18,7 @@ import runCsmStep from "./csmSteps/runCsmStep.vue";
 import { markRaw } from "vue";
 
 export default {
-  name: "CameraCalibrationTask",
+  name: "CameraStageMappingTask",
   components: {
     calibrationWizardTask,
   },

webapp/src/components/modalComponents/calibrationWizardComponents/stepTemplateWithStream.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <slot></slot>
-    <miniStreamDisplay class="mini-preview" />
+    <miniStreamDisplay class="mini-preview" :stream-id="setStreamId" />
     <slot name="below-stream"></slot>
   </div>
 </template>
@@ -15,6 +15,13 @@ export default {
   components: {
     miniStreamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>
 

webapp/src/components/tabContentComponents/actionTab.vue

@@ -53,7 +53,7 @@ mode.
       </div>
       <div v-if="taskStarted">
         <h2 v-if="taskInfoTitle" style="text-align: center">{{ taskInfoTitle }}</h2>
-        <mini-stream-display v-if="taskInfoStream" />
+        <mini-stream-display v-if="taskInfoStream" :stream-id="setStreamId" />
         <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
         <div class="uk-width-1-1 uk-flex uk-flex-center">
           <div class="uk-width-2-3">
@@ -141,6 +141,7 @@ export default {
       progress: null,
       log: [],
       pollTimer: null,
+      setStreamId: this.$options.name,
     };
   },
 

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

@@ -34,6 +34,7 @@ import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 import positionControl from "./positionControl.vue";
 import autofocusControl from "./autofocusControl.vue";
+import { eventBus } from "../../../eventBus.js";
 
 export default {
   name: "PaneControl",
@@ -61,8 +62,12 @@ export default {
         this.modalError("No image URI returned from capture task.");
         return;
       }
+      // Emit flash capture stream animation
+      eventBus.emit("globalFlashStream");
+
       // To save the returned data, we make a virtual link and click it
       let imageResponse = await axios.get(imageUri, { responseType: "blob" });
+
       const url = window.URL.createObjectURL(new Blob([imageResponse.data]));
       const link = document.createElement("a");
       link.href = url;

webapp/src/components/tabContentComponents/controlContent.vue

@@ -5,7 +5,7 @@
       <paneControl />
     </div>
     <div class="view-component uk-width-expand">
-      <streamDisplay />
+      <streamDisplay :stream-id="setStreamId" />
     </div>
   </div>
 </template>
@@ -21,6 +21,13 @@ export default {
     paneControl,
     streamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>
 

webapp/src/components/tabContentComponents/settingsComponents/CSMSettings.vue

@@ -10,7 +10,7 @@
         <CSMCalibrationSettings />
       </div>
       <div id="mini-stream">
-        <miniStreamDisplay />
+        <miniStreamDisplay :stream-id="setStreamId" />
       </div>
     </div>
   </div>
@@ -28,6 +28,13 @@ export default {
     CSMCalibrationSettings,
     miniStreamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>
 

webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue

@@ -15,7 +15,7 @@
       </div>
 
       <div id="mini-stream">
-        <miniStreamDisplay />
+        <miniStreamDisplay :stream-id="setStreamId" />
       </div>
     </div>
   </div>
@@ -41,6 +41,8 @@ export default {
   data() {
     return {
       manualCameraSettings: [],
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
     };
   },
 

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -17,7 +17,7 @@
       class="image-fit"
       :src="lastStitchedImage"
     />
-    <streamDisplay v-else />
+    <streamDisplay v-else :stream-id="setStreamId" />
     <template #controls>
       <slideScanControls />
       <label class="uk-form-label" for="form-stacked-text">Sample ID</label>
@@ -81,6 +81,8 @@ export default {
       lastStitchedImage: null,
       scanComplete: false,
       scan_name: "",
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
     };
   },
 

webapp/src/components/tabContentComponents/streamContent.vue

@@ -5,10 +5,9 @@
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
-      v-if="isVisible"
+      v-show="isVisible && streamEnabled"
       ref="click-frame"
       class="uk-align-center uk-margin-remove-bottom"
-      :hidden="!streamEnabled"
       :src="streamImgUri"
       alt="Stream"
       @dblclick="clickMonitor"
@@ -36,10 +35,19 @@ import { useIntersectionObserver } from "@vueuse/core";
 import { useSettingsStore } from "@/stores/settings.js";
 import { mapState } from "pinia";
 
+const ONE_PIXEL_FALLBACK = "data:image/PNG;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=";
+
 // Export main app
 export default {
   name: "StreamDisplay",
 
+  props: {
+    streamId: {
+      type: [String],
+      required: true,
+    },
+  },
+
   setup() {
     const store = useSettingsStore();
     return {
@@ -52,7 +60,7 @@ export default {
       isVisible: false,
       displaySize: [0, 0],
       displayPosition: [0, 0],
-      resizeTimeoutId: setTimeout(this.doneResizing, 500),
+      resizeTimeoutId: null,
     };
   },
 
@@ -61,42 +69,47 @@ export default {
     streamEnabled: function () {
       return this.ready && !this.disableStream;
     },
-    thisStreamOpen: function () {
-      // Only a single MJPEG connection should be open at a time
-      return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
-    },
     streamImgUri: function () {
-      return `${this.baseUri}/camera/mjpeg_stream`;
+      // Only request the real stream if it's enabled AND currently visible on screen
+      if (this.isVisible && this.streamEnabled) {
+        const url = new URL(`${this.baseUri}/camera/mjpeg_stream`);
+        url.searchParams.append("streamId", this.streamId);
+        return url.toString();
+      }
+
+      // Force the browser to kill the connection by loading a 1 pixel image
+      return ONE_PIXEL_FALLBACK;
     },
   },
 
   mounted() {
-    //set up an intersection observer
-    useIntersectionObserver(
+    // Initial Timeout
+    this.resizeTimeoutId = setTimeout(this.handleDoneResize, 500);
+
+    // set up an intersection observer
+    // We capture the 'stop' function returned by VueUse so we can kill it later
+    const { stop } = useIntersectionObserver(
       this.$refs.streamDisplay,
       ([{ isIntersecting }]) => {
         this.isVisible = isIntersecting;
       },
-      {
-        threshold: 0.0,
-      },
+      { threshold: 0.0 },
     );
+    this.stopIntersectionObserver = stop;
     // A global signal listener to flash the stream element
-    this.onFlashStream = () => {
-      this.flashStream();
-    };
-
-    eventBus.on("globalFlashStream", this.onFlashStream);
+    eventBus.on("globalFlashStream", this.flashStream);
 
     // Mutation observer
     this.sizeObserver = new ResizeObserver(() => {
       this.handleResize(); // For any element attached to the observer, run handleResize() on change
     });
-    // Fetch streamDisplay component by ref
-    if (this.$refs.streamDisplay && this.$refs.streamDisplay.parentNode) {
-      const streamDisplayElement = this.$refs.streamDisplay.parentNode;
+
+    // Safely fetch the DOM element (handles both native HTML and Vue components)
+    const streamElement = this.$refs.streamDisplay?.$el || this.$refs.streamDisplay;
+
+    if (streamElement && streamElement.parentNode) {
       // Attach streamDisplay to the size observer
-      this.sizeObserver.observe(streamDisplayElement);
+      this.sizeObserver.observe(streamElement.parentNode);
     }
   },
 
@@ -104,24 +117,58 @@ export default {
     // Do nothing: preview stream now runs all the time
   },
 
-  beforeUnmount: function () {
-    // Disconnect the size observer
-    this.sizeObserver.disconnect();
-    // Remove from the array of active streams
-    this.store.removeStream(this.$.uid);
-    // close signal
-    eventBus.off("globalFlashStream", this.onFlashStream);
+  beforeUnmount() {
+    // Kill the resize timeout
+    clearTimeout(this.resizeTimeoutId);
+
+    // Kill the flash animation timeout (Fixes Beth's MR comment)
+    if (this.flashTimeoutId) {
+      clearTimeout(this.flashTimeoutId);
+    }
+
+    // Kill the Intersection Observer
+    if (this.stopIntersectionObserver) {
+      this.stopIntersectionObserver();
+    }
+
+    // Unregister the event bus listener
+    eventBus.off("globalFlashStream", this.flashStream);
+
+    // Disconnect the size Observer
+    if (this.sizeObserver) {
+      this.sizeObserver.disconnect();
+      this.store.removeStream(this.streamId);
+    }
+    const imgElement = this.$refs["click-frame"];
+    if (imgElement) {
+      imgElement.src = ONE_PIXEL_FALLBACK;
+    }
   },
 
   methods: {
     flashStream: function () {
       // Run an animation that flashes the stream (for capture feedback)
       let element = this.$refs.streamDisplay;
+
+      // Defensive check in case the ref isn't available
+      if (!element) return;
+
       element.classList.remove("uk-animation-fade");
-      element.offsetHeight; /* trigger reflow */
+      /* trigger reflow */
+      element.offsetHeight;
       element.classList.add("uk-animation-fade");
-      setTimeout(function () {
-        element.classList.remove("uk-animation-fade");
+
+      // Clear the timer if flashStream is called again before the 800ms is up
+      if (this.flashTimeoutId) {
+        clearTimeout(this.flashTimeoutId);
+      }
+
+      // Track the timeout ID
+      this.flashTimeoutId = setTimeout(() => {
+        // Extra defensive check just in case
+        if (element && element.classList) {
+          element.classList.remove("uk-animation-fade");
+        }
       }, 800);
     },
 
@@ -158,17 +205,16 @@ export default {
 
     handleDoneResize: function () {
       // Recalculate size
-
       this.recalculateSize();
       // Handle closed stream
       if (this.displaySize[0] == 0 && this.displaySize[1] == 0) {
         // If this stream was previously active
-        if (this.store.activeStreams[this.$.uid] == true) {
-          this.store.removeStream(this.$.uid);
+        if (this.store.activeStreams[this.streamId] == true) {
+          this.store.removeStream(this.streamId);
         }
         // If resized to anything other than zero
       } else {
-        this.store.addStream(this.$.uid);
+        this.store.addStream(this.streamId);
       }
     },
 

webapp/src/components/tabContentComponents/viewContent.vue

@@ -2,7 +2,7 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="view-component uk-width-expand">
-      <streamDisplay />
+      <streamDisplay :stream-id="setStreamId" />
     </div>
   </div>
 </template>
@@ -16,5 +16,12 @@ export default {
   components: {
     streamDisplay,
   },
+
+  data() {
+    return {
+      // This adds the parent name as value for prop streamId
+      setStreamId: this.$options.name,
+    };
+  },
 };
 </script>