feat(monitor): add monitoring and resize throttling

Author: jourdain

trame_rca/widgets/rca.py

@@ -1,8 +1,11 @@
 """RCA Widgets support both vue2 and vue3."""
 
-from trame_client.widgets.core import AbstractElement
-from trame_rca.utils import RcaViewAdapter, RcaRenderScheduler
 import warnings
+
+from trame_client.widgets.core import AbstractElement
+
+from trame_rca.utils import RcaRenderScheduler, RcaViewAdapter
+
 from .. import module
 
 __all__ = [
@@ -40,6 +43,11 @@ def __init__(self, **kwargs):
             ("image_style", "imageStyle"),
             ("send_mouse_move", "sendMouseMove"),
             ("event_throttle_ms", "eventThrottleMs"),
+            "monitor",
+            ("resize_throttle_ms", "resizeThrottleMs"),
+        ]
+        self._event_names += [
+            "stats",
         ]
 
         self.name = kwargs.get("name") or f"trame_rca_{RemoteControlledArea._next_id}"
@@ -111,6 +119,10 @@ def __init__(self, **kwargs):
             "origin",
             "display",
             ("image_style", "imageStyle"),
+            "monitor",
+        ]
+        self._event_names += [
+            "stats",
         ]
 
 
@@ -142,6 +154,10 @@ def __init__(self, **kwargs):
             "origin",
             ("pool_size", "poolSize"),
             ("image_style", "imageStyle"),
+            "monitor",
+        ]
+        self._event_names += [
+            "stats",
         ]
 
 

vue-components/package-lock.json

@@ -27,10 +27,14 @@ export default {
       type: Object,
       default: () => ({ width: '100%' }),
     },
+    monitor: {
+      type: Number,
+      default: 0,
+    },
   },
   template: `
     <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
-      <image-display-area v-if="display === 'image'" :name="name" :origin="origin" :poolSize="4" :imageStyle="imageStyle" />
+      <image-display-area v-if="display === 'image'" :name="name" :origin="origin" :poolSize="4" :imageStyle="imageStyle" :monitor="monitor" @stats="$emit('stats', $event)" />
       <media-source-display-area v-if="display === 'media-source'" :name="name" :origin="origin" />
       <video-decoder-display-area v-if="display === 'video-decoder'" :name="name" :origin="origin" />
       <raw-image-display-area v-if="display === 'raw-image'" :name="name" :origin="origin" :imageStyle="imageStyle" />

vue-components/src/components/DisplayArea.js

@@ -1,3 +1,5 @@
+import { FPSMonitor } from '../utils/FpsMonitor';
+
 class ImageFrame {
   constructor(vueComponent) {
     this.vueComponent = vueComponent;
@@ -37,11 +39,18 @@ export default {
       type: Object,
       default: () => ({ width: '100%' }),
     },
+    monitor: {
+      type: Number,
+      default: 0,
+    },
   },
   watch: {
     poolSize() {
       this.updatePoolSize();
     },
+    monitor() {
+      this.updateMonitorWindow();
+    },
   },
   data() {
     return {
@@ -74,7 +83,14 @@ export default {
       }
     },
   },
+  updateMonitorWindow() {
+    const bufferSize = Math.max(10, this.monitor);
+    this.fpsMonitor.windowSize = bufferSize;
+    this.fpsMonitor.windowStatSize = bufferSize;
+  },
   created() {
+    // Monitoring
+    this.fpsMonitor = new FPSMonitor(10, 10);
     // Image decoding
     this.frames = [];
     this.nextFrameIndex = 0;
@@ -97,6 +113,19 @@ export default {
           this.nextFrameIndex = (this.nextFrameIndex + 1) % this.frames.length;
           const frame = this.frames[this.nextFrameIndex];
           frame.update(meta.type, content);
+          if (this.monitor) {
+            const serverTime = meta.st;
+            const contentSize = content.length;
+            const stats = this.fpsMonitor.addEntry(serverTime, contentSize);
+            if (stats) {
+              const { avgFps, totalSize } = stats;
+              this.$emit('stats', {
+                fps: Math.round(avgFps),
+                bps: Math.floor(totalSize),
+                st: serverTime,
+              });
+            }
+          }
         } else {
           this.hasContent = false;
         }

vue-components/src/components/ImageDisplayArea.js

@@ -1,8 +1,9 @@
 import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
 import vtkInteractorStyleRemoteMouse from '../utils/interactorStyle';
 
-const { inject, provide, ref, toRefs, onMounted, onBeforeUnmount } = window.Vue;
-import { EventThrottle } from '../utils/EventThrottle';
+const { inject, provide, ref, toRefs, onMounted, onBeforeUnmount, watch } =
+  window.Vue;
+import { FunctionThrottle, EventThrottle } from '../utils/EventThrottle';
 
 const RESOLVED_PROMISED = Promise.resolve(true);
 
@@ -28,15 +29,30 @@ export default {
       type: Number,
       default: 25,
     },
+    resizeThrottleMs: {
+      type: Number,
+      default: 100,
+    },
     imageStyle: {
       type: Object,
       default: () => ({ width: '100%' }),
     },
+    monitor: {
+      type: Number,
+      default: 0,
+    },
   },
   setup(props) {
     const rootElem = ref(null);
     const trame = inject('trame');
 
+    // Resizing throttle
+    const throttleSize = new FunctionThrottle(
+      _pushSize,
+      props.resizeThrottleMs
+    );
+    watch(props.resizeThrottleMs, (v) => (throttleSize.delay = v));
+
     // Event throttle
     const throttle = new EventThrottle((event) => {
       return trame.client
@@ -147,6 +163,10 @@ export default {
     });
 
     function pushSize(addOn) {
+      throttleSize.run(addOn);
+    }
+
+    function _pushSize(addOn) {
       if (trame) {
         if (readySizeUpdate) {
           readySizeUpdate = false;
@@ -194,7 +214,7 @@ export default {
   template: `
     <div ref="rootElem" style="margin: 0; padding: 0; position: relative; width: 100%; height: 100%;">
       <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
-        <display-area :display="display" :name="name" :origin="origin" :imageStyle="imageStyle" />
+        <display-area :display="display" :name="name" :origin="origin" :imageStyle="imageStyle" :monitor="monitor" @stats="$emit('stats', $event)" />
         <slot></slot>
       </div>
     </div>