@luxonis/visualizer-protobuf 2.25.0 → 2.27.0

package/dist/{index-CpNfgd1w.js → index-BuRQ7ljn.js}

@@ -447,42 +447,139 @@ class Condvar {
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
+
+const MAX_SAMPLE_SIZE = 100;
+function bytesToMegabits(bytes) {
+  return bytes / (1024 * 1024) * 8;
+}
+class EventMetricsManager {
+  metrics = {};
+  registerEvent(topic) {
+    const currentTime = performance.now();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    this.metrics[topic] ??= [];
+    this.metrics[topic].unshift(currentTime);
+    if (this.metrics[topic].length > MAX_SAMPLE_SIZE) {
+      this.metrics[topic].length = MAX_SAMPLE_SIZE;
+    }
+  }
+  calculate(topic) {
+    const topicMetrics = this.metrics[topic];
+    if (!topicMetrics) {
+      return 0;
+    }
+    let totalInterval = 0;
+    for (let i = 1; i < topicMetrics.length; ++i) {
+      totalInterval += topicMetrics[i - 1] - topicMetrics[i];
+    }
+    if (isNaN(totalInterval)) {
+      return 0;
+    }
+    const fps = 1_000 / (totalInterval / (topicMetrics.length - 1));
+    return Math.round(fps);
+  }
+}
+class ThroughputMetricsManager {
+  metrics = {};
+  registerEvent(topic, value) {
+    const timestamp = performance.now();
+    this.metrics[topic] ??= [];
+    this.metrics[topic].unshift({
+      timestamp,
+      value
+    });
+    if (this.metrics[topic].length > MAX_SAMPLE_SIZE) {
+      this.metrics[topic].length = MAX_SAMPLE_SIZE;
+    }
+  }
+  calculate(topic) {
+    const topicMetrics = this.metrics[topic];
+    if (!topicMetrics || topicMetrics.length < 2 || !topicMetrics.at(0) || !topicMetrics.at(-1)) {
+      return 0;
+    }
+
+    // Get time span in seconds
+    // biome-ignore lint/style/noNonNullAssertion: <explanation>
+    const timeSpanMs = topicMetrics.at(0).timestamp - topicMetrics.at(-1).timestamp;
+    const timeSpanSec = timeSpanMs / 1000;
+    if (timeSpanSec === 0) {
+      return 0;
+    }
+
+    // Sum up all values (bytes)
+    const totalBytes = topicMetrics.reduce((sum, metric) => sum + metric.value, 0);
+
+    // Calculate bytes per second
+    const bytesPerSecond = totalBytes / timeSpanSec;
+
+    // Return rounded value
+    return Number(bytesToMegabits(bytesPerSecond).toFixed(2));
+  }
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+/* eslint-disable @foxglove/strict-equality */
 const WORKER_COUNT = 4;
+const DEFAULT_TARGET_FPS = 9;
+const DEFAULT_MAX_PROCESSED_QUEUE_SIZE = 100;
 class DepthToPointcloudWorkerPool {
   lastUsedWorkerIndex = 0;
   #frameQueue = [];
+  #processedFrameQueue = [];
   #isWebGpuSupported = false;
+  #metrics;
   #FRAME_BATCH_SIZE;
+  #targetDispatchIntervalMs;
+  #maxProcessedQueueSize;
+  #dispatchCallback;
   #isProcessing = false;
-  constructor(callback, batchSize = 10) {
+  #dispatchTimeoutId = undefined;
+  constructor(callback, batchSize = 10, targetFps = DEFAULT_TARGET_FPS, maxProcessedQueueSize = DEFAULT_MAX_PROCESSED_QUEUE_SIZE) {
     if (typeof navigator.gpu !== "undefined") {
       void navigator.gpu.requestAdapter().then(gpuAdapter => {
         if (!gpuAdapter) {
           this.#isWebGpuSupported = false;
-          console.warn("WebGPU not supported. Falling back to CPU for all frames.");
-          return;
+          console.warn("WebGPU adapter not found. Falling back to CPU for all frames.");
+        } else {
+          this.#isWebGpuSupported = true;
+          console.info("WebGPU potentially supported. Will attempt GPU processing.");
         }
-        this.#isWebGpuSupported = true;
+      }).catch(err => {
+        console.warn("Error requesting WebGPU adapter. Falling back to CPU.", err);
+        this.#isWebGpuSupported = false;
       });
     } else {
-      console.warn("WebGPU not supported. Falling back to CPU for all frames.");
+      console.warn("navigator.gpu is undefined. WebGPU not supported. Falling back to CPU for all frames.");
+      this.#isWebGpuSupported = false;
     }
-    this.sumbmitCallback = callback;
+    this.#dispatchCallback = callback;
     this.#FRAME_BATCH_SIZE = Math.max(1, batchSize);
+    this.#targetDispatchIntervalMs = 1000 / Math.max(1, targetFps);
+    this.#maxProcessedQueueSize = Math.max(1, maxProcessedQueueSize);
     this.workerApis = new Array(WORKER_COUNT).fill(undefined).map(() => wrap$3(new Worker(new URL("pointcloudFromDepth.worker-JVTJ-r5q.js", import.meta.url), {
       type: "module"
     })));
+    this.#metrics = new EventMetricsManager();
+    this.#metrics.registerEvent("pcl-pool.frameInput");
   }
   async queueDepthFrame(data) {
-    // @ts-expect-error - ITS unknow
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-    if (!(data.colorFrame.message.data instanceof Uint8Array)) {
+    // @ts-expect-error
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    if (!(data.colorFrame.message?.data instanceof Uint8Array)) {
+      console.warn("Skipping frame: colorFrame.message.data is not a Uint8Array", data.colorFrame);
       return;
     }
     this.#frameQueue.push(data);
     this.tryProcessBatch();
   }
   tryProcessBatch() {
+    this.#metrics?.registerEvent("pcl-pool.batchSent");
+    const fps = this.#metrics?.calculate("pcl-pool.batchSent");
+    if (fps && fps > 0) {
+      this.#targetDispatchIntervalMs = 1000 / Math.max(4, fps);
+    }
     if (this.#isProcessing || this.#frameQueue.length < this.#FRAME_BATCH_SIZE) {
       return;
     }
@@ -492,6 +589,7 @@ class DepthToPointcloudWorkerPool {
       this.#isProcessing = false;
       return;
     }
+
     // biome-ignore lint/style/noNonNullAssertion: <explanation>
     const firstFrame = batchToProcess[0];
     const width = firstFrame.width;
@@ -502,47 +600,115 @@ class DepthToPointcloudWorkerPool {
     const cy = firstFrame.cy;
     const i420Width = firstFrame.i420Width;
     const i420Height = firstFrame.i420Height;
-    const depthDataArray = batchToProcess.map(f => uint8ArrayToUint16Array(f.depthFrame.data));
-    const timestampsArray = batchToProcess.map(f => f.colorFrame.receiveTime.nsec);
-    // @ts-expect-error - ITS unknow
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
-    const i420DataArray = batchToProcess.map(f => f.colorFrame.message.data);
-    const workerIndex = this.lastUsedWorkerIndex;
-    // biome-ignore lint/style/noNonNullAssertion: <explanation>
-    const workerApi = this.workerApis[workerIndex];
-    this.lastUsedWorkerIndex = (this.lastUsedWorkerIndex + 1) % WORKER_COUNT;
-    workerApi.depthToPointcloudGPU(depthDataArray, width, height, fx, fy, cx, cy, i420DataArray, i420Width, i420Height, {
-      hasGPU: this.#isWebGpuSupported
-    }).then(results => {
-      if (results.length === batchToProcess.length) {
-        const firtFrame = batchToProcess[0];
-        if (!firtFrame) {
-          return;
-        }
-        for (let i = 0; i < results.length; i++) {
-          // biome-ignore lint/style/noNonNullAssertion: <explanation>
-          const originalFrame = batchToProcess[i];
-          const pointCloudResult = results[i];
-          if (!pointCloudResult) {
-            console.error(`Worker ${workerIndex}: Result ${i} is null!`);
-            continue;
+    try {
+      const depthDataArray = batchToProcess.map(f => uint8ArrayToUint16Array(f.depthFrame.data));
+      // @ts-expect-error
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+      const i420DataArray = batchToProcess.map(f => f.colorFrame.message.data);
+      const workerIndex = this.lastUsedWorkerIndex;
+      // biome-ignore lint/style/noNonNullAssertion: <explanation>
+      const workerApi = this.workerApis[workerIndex];
+      this.lastUsedWorkerIndex = (this.lastUsedWorkerIndex + 1) % WORKER_COUNT;
+      workerApi.depthToPointcloudGPU(depthDataArray, width, height, fx, fy, cx, cy, i420DataArray, i420Width, i420Height, {
+        hasGPU: this.#isWebGpuSupported
+      }).then(results => {
+        if (results.length === batchToProcess.length) {
+          for (let i = 0; i < results.length; i++) {
+            // biome-ignore lint/style/noNonNullAssertion: <explanation>
+            const originalFrame = batchToProcess[i];
+            const pointCloudResult = results[i];
+            if (!pointCloudResult) {
+              console.warn(`Worker ${workerIndex}: Result ${i} is null or undefined. Passing null to callback.`);
+              this.#addToProcessedQueue({
+                originalColorEvent: originalFrame.colorFrame,
+                originalDepthFrame: originalFrame.depthFrame,
+                processedPointCloud: null
+              });
+            } else {
+              this.#addToProcessedQueue({
+                originalColorEvent: originalFrame.colorFrame,
+                originalDepthFrame: originalFrame.depthFrame,
+                processedPointCloud: pointCloudResult
+              });
+            }
+          }
+        } else {
+          console.error(`Worker ${workerIndex}: Mismatch in result count (${results.length}) and batch size (${batchToProcess.length}). Discarding results for this batch.`);
+          for (const originalFrame of batchToProcess) {
+            this.#addToProcessedQueue({
+              originalColorEvent: originalFrame.colorFrame,
+              originalDepthFrame: originalFrame.depthFrame,
+              processedPointCloud: null
+            });
           }
-          // biome-ignore lint/style/noNonNullAssertion: Workaround
-          const delay = Math.min(500, Math.abs((firstFrame.colorFrame.receiveTime.nsec - timestampsArray[i]) / 10 ** 6));
-          setTimeout(() => {
-            this.sumbmitCallback(originalFrame.colorFrame, originalFrame.depthFrame, pointCloudResult);
-          }, delay);
         }
-      }
-    }).catch(error => {
-      console.error(`Worker ${workerIndex}: Error processing batch:`, error);
+      }).catch(error => {
+        console.error(`Worker ${workerIndex}: Error processing batch:`, error);
+        for (const originalFrame of batchToProcess) {
+          this.#addToProcessedQueue({
+            originalColorEvent: originalFrame.colorFrame,
+            originalDepthFrame: originalFrame.depthFrame,
+            processedPointCloud: null
+          });
+        }
+      }).finally(() => {
+        this.#isProcessing = false;
+        this.tryProcessBatch();
+      });
+    } catch (error) {
+      console.error("Error preparing data for worker:", error);
       for (const originalFrame of batchToProcess) {
-        this.sumbmitCallback(originalFrame.colorFrame, originalFrame.depthFrame, null);
+        this.#addToProcessedQueue({
+          originalColorEvent: originalFrame.colorFrame,
+          originalDepthFrame: originalFrame.depthFrame,
+          processedPointCloud: null
+        });
       }
-    }).finally(() => {
       this.#isProcessing = false;
       this.tryProcessBatch();
-    });
+    }
+  }
+  #addToProcessedQueue(processedFrame) {
+    if (this.#processedFrameQueue.length >= this.#maxProcessedQueueSize) {
+      this.#processedFrameQueue.shift();
+      console.warn(`Processed frame queue full (>= ${this.#maxProcessedQueueSize}). Dropping oldest frame.`);
+    }
+    this.#processedFrameQueue.push(processedFrame);
+    if (this.#dispatchTimeoutId === undefined) {
+      this.#scheduleNextDispatch();
+    }
+  }
+  #scheduleNextDispatch() {
+    if (this.#dispatchTimeoutId !== undefined) {
+      clearTimeout(this.#dispatchTimeoutId);
+    }
+    if (this.#processedFrameQueue.length > 0) {
+      this.#dispatchTimeoutId = setTimeout(this.#dispatchNextFrame, this.#targetDispatchIntervalMs);
+    } else {
+      this.#dispatchTimeoutId = undefined;
+    }
+  }
+  #dispatchNextFrame = () => {
+    const frameToDispatch = this.#processedFrameQueue.shift();
+    if (frameToDispatch) {
+      try {
+        this.#dispatchCallback(frameToDispatch.originalColorEvent, frameToDispatch.originalDepthFrame, frameToDispatch.processedPointCloud);
+      } catch (error) {
+        console.error("Error in dispatchCallback:", error);
+      }
+    } else {
+      console.warn("Dispatch timer fired but processed queue was empty.");
+    }
+    this.#scheduleNextDispatch();
+  };
+  destroy() {
+    if (this.#dispatchTimeoutId !== undefined) {
+      clearTimeout(this.#dispatchTimeoutId);
+      this.#dispatchTimeoutId = undefined;
+    }
+    this.#frameQueue = [];
+    this.#processedFrameQueue = [];
+    this.workerApis = [];
   }
 }
 
@@ -587,75 +753,6 @@ function createMessageHandler(callback) {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const MAX_SAMPLE_SIZE = 100;
-function bytesToMegabits(bytes) {
-  return bytes / (1024 * 1024) * 8;
-}
-class EventMetricsManager {
-  metrics = {};
-  registerEvent(topic) {
-    const currentTime = performance.now();
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    this.metrics[topic] ??= [];
-    this.metrics[topic].unshift(currentTime);
-    this.metrics[topic].length = MAX_SAMPLE_SIZE;
-  }
-  calculate(topic) {
-    const topicMetrics = this.metrics[topic];
-    if (!topicMetrics) {
-      return 0;
-    }
-    let totalInterval = 0;
-    for (let i = 1; i < topicMetrics.length; ++i) {
-      totalInterval += topicMetrics[i - 1] - topicMetrics[i];
-    }
-    if (isNaN(totalInterval)) {
-      return 0;
-    }
-    const fps = 1_000 / (totalInterval / (topicMetrics.length - 1));
-    return Math.round(fps);
-  }
-}
-class ThroughputMetricsManager {
-  metrics = {};
-  registerEvent(topic, value) {
-    const timestamp = performance.now();
-    this.metrics[topic] ??= [];
-    this.metrics[topic].unshift({
-      timestamp,
-      value
-    });
-    this.metrics[topic].length = MAX_SAMPLE_SIZE;
-  }
-  calculate(topic) {
-    const topicMetrics = this.metrics[topic];
-    if (!topicMetrics || topicMetrics.length < 2 || !topicMetrics.at(0) || !topicMetrics.at(-1)) {
-      return 0;
-    }
-
-    // Get time span in seconds
-    // biome-ignore lint/style/noNonNullAssertion: <explanation>
-    const timeSpanMs = topicMetrics.at(0).timestamp - topicMetrics.at(-1).timestamp;
-    const timeSpanSec = timeSpanMs / 1000;
-    if (timeSpanSec === 0) {
-      return 0;
-    }
-
-    // Sum up all values (bytes)
-    const totalBytes = topicMetrics.reduce((sum, metric) => sum + metric.value, 0);
-
-    // Calculate bytes per second
-    const bytesPerSecond = totalBytes / timeSpanSec;
-
-    // Return rounded value
-    return Number(bytesToMegabits(bytesPerSecond).toFixed(2));
-  }
-}
-
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/
-
 class PoitCloudSyncFramework {
   #binarySearch(arr, targetKey) {
     let left = 0;
@@ -709,7 +806,7 @@ class PoitCloudSyncFramework {
     };
   }
   storedFrames = [];
-  #MAX_DELAY_SEC = 0.01;
+  #MAX_DELAY_SEC = 0.075;
   #MAX_STORED_FRAMES = 100;
   getFrame(nsec) {
     const {
@@ -85313,7 +85410,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-DeEImmkI.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-DZgY6A3h.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -85324,7 +85421,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-BhITngB2.js').then(m => m.cpp());
+            return import('./index-I0XgHBlj.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85332,7 +85429,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-BhITngB2.js').then(m => m.cpp());
+            return import('./index-I0XgHBlj.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85352,7 +85449,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-jxrL_e5O.js').then(m => m.go());
+            return import('./index-pwNtzQuf.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85367,7 +85464,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-2PbGVouo.js').then(m => m.java());
+            return import('./index-DE0_tKGA.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85383,7 +85480,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-BlPNVFW_.js').then(m => m.json());
+            return import('./index-BZ8z044k.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85397,14 +85494,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-D3DkLyZA.js').then(m => m.less());
+            return import('./index-B1pNpslP.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-BshEtuHO.js').then(m => m.liquid());
+            return import('./index-CLPc3bUH.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85430,7 +85527,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-F42wp6uI.js').then(m => m.php());
+            return import('./index-DsO3GPWF.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85447,28 +85544,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-DFjClLW-.js').then(m => m.python());
+            return import('./index-BNXdmaeO.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-DWrX4gRf.js').then(m => m.rust());
+            return import('./index-B5_Aa-W3.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-9gGX6Zvk.js').then(m => m.sass({ indented: true }));
+            return import('./index-CGXxFWjz.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-9gGX6Zvk.js').then(m => m.sass());
+            return import('./index-CGXxFWjz.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85499,7 +85596,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-3GQM86WK.js').then(m => m.wast());
+            return import('./index-CIHmVsn2.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85507,7 +85604,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-Yd8mYo4X.js').then(m => m.xml());
+            return import('./index-B4d7dS8a.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -85515,7 +85612,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-XeyUYY6F.js').then(m => m.yaml());
+            return import('./index-DbT8vr6l.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -86311,13 +86408,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-DuCWx5b9.js').then(m => m.vue());
+            return import('./index-CXdNn-IZ.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-CHN-su-T.js').then(m => m.angular());
+            return import('./index-LmBY2nOo.js').then(m => m.angular());
         }
     })
 ];
@@ -162087,6 +162184,7 @@ function RiNumbersFill (props) {
 
 function PanelToolbarMetrics({
   renderedFps,
+  annotationsFps,
   targetFps,
   metrics
 }) {
@@ -162108,7 +162206,7 @@ function PanelToolbarMetrics({
     ref: descriptionRef,
     width: "full"
   }, variant === "compact" ? /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "Camera: ", targetFps === 0 ? "-" : targetFps, " FPS"), /*#__PURE__*/React__default.createElement("li", null, "Network:", " ", !metrics || metrics?.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps, " ", "FPS"), /*#__PURE__*/React__default.createElement("li", null, "Decoding:", " ", !metrics || metrics?.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps, " ", "FPS"), /*#__PURE__*/React__default.createElement("li", null, "Rendering: ", renderedFps === 0 ? "-" : renderedFps, " FPS"), /*#__PURE__*/React__default.createElement("li", null, "Throughput:", " ", !metrics || metrics?.messageThroughput === 0 ? "-" : metrics.messageThroughput, " ", "Mbps"), /*#__PURE__*/React__default.createElement("li", null, "Frontend Delay: ", eventLoopDelay.toFixed(2), " ms")),
+    content: /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "Camera: ", !targetFps || targetFps === 0 ? "-" : targetFps, " FPS"), /*#__PURE__*/React__default.createElement("li", null, "Network:", " ", !metrics || metrics?.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps, " ", "FPS"), /*#__PURE__*/React__default.createElement("li", null, "Decoding:", " ", !metrics || metrics?.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps, " ", "FPS"), /*#__PURE__*/React__default.createElement("li", null, "Rendering: ", !renderedFps || renderedFps === 0 ? "-" : renderedFps, " FPS"), /*#__PURE__*/React__default.createElement("li", null, "Annotations:", " ", !annotationsFps || annotationsFps === 0 || !Number.isFinite(annotationsFps) ? "-" : annotationsFps, " ", "FPS"), /*#__PURE__*/React__default.createElement("li", null, "Throughput:", " ", !metrics || metrics?.messageThroughput === 0 ? "-" : metrics.messageThroughput, " ", "Mbps"), /*#__PURE__*/React__default.createElement("li", null, "Frontend Delay: ", eventLoopDelay.toFixed(2), " ms")),
     direction: "bottom",
     className: "ml-auto"
   }, /*#__PURE__*/React__default.createElement(Button, {
@@ -162125,6 +162223,8 @@ function PanelToolbarMetrics({
     text: `Decoding: ${metrics.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps} FPS`
   }), renderedFps !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Rendering: ${renderedFps === 0 ? "-" : renderedFps} FPS`
+  }), annotationsFps !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Annotations: ${annotationsFps === 0 || !Number.isFinite(annotationsFps) ? "-" : annotationsFps} FPS`
   }), metrics?.messageThroughput !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Throughput: ${metrics.messageThroughput === 0 ? "-" : metrics.messageThroughput} Mbps`
   }), eventLoopDelay !== undefined && /*#__PURE__*/React__default.createElement(Label$3, {
@@ -162159,6 +162259,7 @@ const PanelToolbar = ({
   targetFps,
   triggerToast,
   renderedFps,
+  annotationsFps,
   toggleTopic
 }) => {
   const [metrics, setMetrics] = React__default.useState();
@@ -162238,6 +162339,7 @@ const PanelToolbar = ({
     className: "text-[14px]/[14px] xl:pb-[2px]"
   })), /*#__PURE__*/React__default.createElement(PanelToolbarMetrics, {
     renderedFps: renderedFps,
+    annotationsFps: annotationsFps,
     targetFps: targetFps,
     metrics: metrics
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -162306,10 +162408,10 @@ const useDetections = () => {
 };
 const rawToAnnotations = (rawAnnotations, kind, current) => rawAnnotations.map(annotationTopic => ({
   name: annotationTopic,
-  extra: kind === 'extra',
+  extra: kind === "extra",
   enabled: current.find(({
     name
-  }) => name === annotationTopic)?.enabled ?? kind === 'main'
+  }) => name === annotationTopic)?.enabled ?? kind === "main"
 }));
 const Panel = ({
   children,
@@ -162320,6 +162422,7 @@ const Panel = ({
   extraAnnotationTopics = [],
   targetFps,
   renderedFps,
+  annotationsFps,
   renderDelay,
   toggleTopic,
   triggerToast
@@ -162327,7 +162430,7 @@ const Panel = ({
   const [detections, setDetections] = React__default.useState([]);
   React__default.useEffect(() => {
     if (!disableAnnotations) {
-      setDetections(current => [...rawToAnnotations(annotationTopics, 'main', current), ...rawToAnnotations(extraAnnotationTopics, 'extra', current)]);
+      setDetections(current => [...rawToAnnotations(annotationTopics, "main", current), ...rawToAnnotations(extraAnnotationTopics, "extra", current)]);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(annotationTopics), JSON.stringify(extraAnnotationTopics)]);
@@ -162351,6 +162454,7 @@ const Panel = ({
     disableAnnotations: disableAnnotations,
     targetFps: targetFps,
     renderedFps: renderedFps,
+    annotationsFps: annotationsFps,
     renderDelay: renderDelay,
     toggleTopic: toggleTopic,
     triggerToast: triggerToast
@@ -162387,10 +162491,11 @@ function createRenderDelaySampler() {
   };
 }
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-C4kNkDQc.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CJSOG1CX.js'));
 const ImagePanelBody = ({
   topic,
-  frameRenderedEvent
+  frameRenderedEvent,
+  annotationsFpsUpdateHandler
 }) => {
   const {
     detections
@@ -162409,12 +162514,14 @@ const ImagePanelBody = ({
   }), [detections, topic]);
   return /*#__PURE__*/React__default.createElement(ImagePanelComponent, {
     overrideConfig: defaultConfig,
-    frameRenderedEvent: frameRenderedEvent
+    frameRenderedEvent: frameRenderedEvent,
+    annotationsFpsUpdateHandler: annotationsFpsUpdateHandler
   });
 };
 const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
   const renderedFpsMetricsManagerRef = React__default.useRef(null);
   const [renderedFps, setRenderedFps] = React__default.useState(undefined);
+  const [annotationsFps, setAnnotationsFps] = React__default.useState(undefined);
   const {
     averageFrameDelay,
     addFrameTime
@@ -162440,15 +162547,20 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
     renderedFpsMetricsManagerRef.current?.registerEvent('render');
     addFrameTime(frameTime);
   }, [addFrameTime]);
+  const handleAnnotationsFpsUpdate = React__default.useCallback(fps => {
+    setAnnotationsFps(fps);
+  }, []);
   return /*#__PURE__*/React__default.createElement(Panel, _extends$3({
     kind: "image"
   }, props, {
     toggleTopic: props.toggleTopic,
     renderedFps: renderedFps,
+    annotationsFps: annotationsFps,
     renderDelay: averageFrameDelay
   }), /*#__PURE__*/React__default.createElement(ImagePanelBody, {
     topic: props.topic,
-    frameRenderedEvent: handleFrameRendered
+    frameRenderedEvent: handleFrameRendered,
+    annotationsFpsUpdateHandler: handleAnnotationsFpsUpdate
   }));
 });
 
@@ -162456,7 +162568,7 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CWe6_z0e.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CdXrBVPC.js'));
 const PointCloudPanelBody = ({
   topic,
   frameRenderedEvent
@@ -162494,7 +162606,7 @@ const PointCloudPanelBody = ({
       thetaOffset: 180,
       fovy: getFovy(),
       near: 5,
-      far: 10000
+      far: 20000
     },
     imageMode: {
       colorMode: "rgba-fields"
@@ -162551,4 +162663,4 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   }));
 });
 
-export { flatIndent as $, AnalyticsContext as A, PlayerCapabilities as B, assertNever as C, PlayerPresence as D, ErrorDisplay as E, isEqual as F, isDesktopApp as G, createTheme$1 as H, propTypesExports as I, indentNodeProp as J, continuedIndent as K, LeftSidebarItemKeys as L, foldNodeProp as M, styleTags as N, tags$1 as O, PropTypes as P, LRLanguage as Q, RightSidebarItemKeys as R, Stack$1 as S, LanguageSupport as T, ExternalTokenizer as U, LRParser as V, WorkspaceContext as W, ifNotIn as X, completeFromList as Y, syntaxTree as Z, _extends$3 as _, AppEvent as a, delimitedIndent as a0, foldInside as a1, ContextTracker as a2, LocalTokenGroup as a3, snippetCompletion as a4, IterMode as a5, NodeWeakMap as a6, defineCSSCompletionSource as a7, EditorView as a8, EditorSelection as a9, html$4 as aa, parseMixed as ab, bracketMatchingHandle as ac, javascriptLanguage as ad, VisualizerConnection as ae, VisualizerContext as af, PanelLayout as ag, ImagePanel as ah, PointCloudPanel as ai, baseSet as b, createAggregator as c, useTranslation as d, usePanelCatalog as e, flatRest as f, generateUtilityClass as g, EmptyState as h, isEmpty as i, PanelContext as j, PanelCatalogContext as k, usePanelStateStore as l, makeStyles as m, useDefaultPanelTitle as n, useWorkspaceStore as o, WorkspaceStoreSelectors as p, difference as q, usePanelContext as r, useMessagePipeline as s, useHoverValue as t, useAnalytics as u, v4 as v, useSetHoverValue as w, useClearHoverValue as x, useMessagePipelineGetter as y, usePanelSettingsTreeUpdate as z };
+export { flatIndent as $, AnalyticsContext as A, PlayerCapabilities as B, assertNever as C, PlayerPresence as D, ErrorDisplay as E, isEqual as F, isDesktopApp as G, createTheme$1 as H, propTypesExports as I, indentNodeProp as J, continuedIndent as K, LeftSidebarItemKeys as L, foldNodeProp as M, styleTags as N, tags$1 as O, PropTypes as P, LRLanguage as Q, RightSidebarItemKeys as R, Stack$1 as S, LanguageSupport as T, ExternalTokenizer as U, LRParser as V, WorkspaceContext as W, ifNotIn as X, completeFromList as Y, syntaxTree as Z, _extends$3 as _, AppEvent as a, delimitedIndent as a0, foldInside as a1, ContextTracker as a2, LocalTokenGroup as a3, snippetCompletion as a4, IterMode as a5, NodeWeakMap as a6, defineCSSCompletionSource as a7, EditorView as a8, EditorSelection as a9, html$4 as aa, parseMixed as ab, bracketMatchingHandle as ac, javascriptLanguage as ad, VisualizerConnection as ae, VisualizerContext as af, PanelLayout as ag, ImagePanel as ah, PointCloudPanel as ai, EventMetricsManager as aj, ThroughputMetricsManager as ak, baseSet as b, createAggregator as c, useTranslation as d, usePanelCatalog as e, flatRest as f, generateUtilityClass as g, EmptyState as h, isEmpty as i, PanelContext as j, PanelCatalogContext as k, usePanelStateStore as l, makeStyles as m, useDefaultPanelTitle as n, useWorkspaceStore as o, WorkspaceStoreSelectors as p, difference as q, usePanelContext as r, useMessagePipeline as s, useHoverValue as t, useAnalytics as u, v4 as v, useSetHoverValue as w, useClearHoverValue as x, useMessagePipelineGetter as y, usePanelSettingsTreeUpdate as z };