@luxonis/visualizer-protobuf 2.26.0 → 2.28.0

package/dist/{index-Cia95HmM.js → index-CdXrBVPC.js}

@@ -3,7 +3,7 @@ import React__default, { useReducer, useRef, useCallback, useLayoutEffect, Compo
 import ReactDOM__default from 'react-dom';
 import { S as isSymbol, U as toString, V as keys, W as getSymbols$1, X as stubArray, Y as arrayPush, Z as baseGetAllKeys, g as getTag, $ as getAllKeys, k as baseGet, c as baseIteratee, j as castPath, t as toKey, a0 as arrayMap$1, a1 as baseUniq, b as baseFlatten, a2 as useMustNotChange, a3 as useCurrentLayoutActions, a4 as useCurrentLayoutSelector, r as reportError, A as AppError, L as Logger, u as useGuaranteedContext, a5 as usePanelMosaicId, a6 as useSelectedPanels, a7 as PANEL_TITLE_CONFIG_KEY, a8 as noop$4, o as getPanelTypeFromId, M as useShallowMemo, T as TAB_PANEL_TYPE, J as filterMap, d as dist$3, a9 as useAppConfiguration, aa as useValueChangedDebugLog, ab as useJsonTreeTheme } from './tslib.es6-C73eoP_E.js';
 import { createStore, useStore } from 'zustand';
-import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports } from './index-CPTbtbj3.js';
+import { g as generateUtilityClass, c as createAggregator, f as flatRest, b as baseSet, A as AnalyticsContext, P as PropTypes, E as ErrorDisplay, S as Stack$1, m as makeStyles$1, _ as _extends$1, W as WorkspaceContext, u as useAnalytics, a as AppEvent, L as LeftSidebarItemKeys, R as RightSidebarItemKeys, d as useTranslation, e as usePanelCatalog, h as EmptyState, i as isEmpty, j as PanelContext, k as PanelCatalogContext, l as usePanelStateStore, n as useDefaultPanelTitle, o as useWorkspaceStore, p as WorkspaceStoreSelectors, q as difference, r as usePanelContext, s as useMessagePipeline, v as v4, t as useHoverValue, w as useSetHoverValue, x as useClearHoverValue, y as useMessagePipelineGetter, z as usePanelSettingsTreeUpdate, B as PlayerCapabilities, C as assertNever, D as PlayerPresence, F as isEqual, G as isDesktopApp, H as createTheme, I as propTypesExports } from './index-BuRQ7ljn.js';
 import { MosaicDragType, MosaicContext, MosaicWindowContext, getOtherBranch, getNodeAtPath } from 'react-mosaic-component';
 import { t as typescript } from './useMessageReducer-jNx5e6JW.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal, a as getAugmentedNamespace } from './_commonjsHelpers-E-ZsRS8r.js';
@@ -33240,12 +33240,69 @@ function getAnnotationAtPath(message, path) {
 // 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 TIMESTAMP_ERROR_NS = 15_000_000;
+const CLEANUP_EVENTS_OLDER_THAN_MS = 1_000 * 5; // 5 seconds
+const ANNOTATIONS_METRICS_KEY = "annotations";
+const ANNOTATIONS_EVENT_CAP = 100;
+
+// FIXME: Use the one from visualizer lib -> probably will have to refactor the whole thing to allow imports from lib which depends on this package :(
+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 > ANNOTATIONS_EVENT_CAP) {
+      this.metrics[topic].length = ANNOTATIONS_EVENT_CAP;
+    }
+  }
+  calculate(topic) {
+    this.removeOldEvents(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);
+  }
+
+  // Remove events which are older than CLEANUP_EVENTS_OLDER_THAN_MS
+  removeOldEvents(topic) {
+    const now = performance.now();
+    if (this.metrics[topic]) {
+      // biome-ignore lint/style/noNonNullAssertion: can't be null
+      this.metrics[topic] = this.metrics[topic].filter(event => {
+        const diff = now - event;
+        return diff < CLEANUP_EVENTS_OLDER_THAN_MS;
+      });
+    }
+  }
+}
+const TIMESTAMP_ERROR_NS = 100_000_000n; // 0.1 seconds
+
 function timeEqualWithError(left, right) {
-  const secDiff = Math.abs(left.sec - right.sec);
-  if (secDiff !== 0) return false;
-  const nsecDiff = Math.abs(left.nsec - right.nsec);
-  return nsecDiff <= TIMESTAMP_ERROR_NS;
+  // Convert both timestamps to nanoseconds
+  const leftNs = dist$3.toNanoSec({
+    sec: left.sec,
+    nsec: left.nsec
+  });
+  const rightNs = dist$3.toNanoSec({
+    sec: right.sec,
+    nsec: right.nsec
+  });
+
+  // Get absolute difference while staying in bigint
+  const diffNs = leftNs > rightNs ? leftNs - rightNs : rightNs - leftNs;
+
+  // Convert TIMESTAMP_ERROR_NS to bigint for comparison
+  return diffNs <= TIMESTAMP_ERROR_NS;
 }
 
 // Have constants for the HUD items so that they don't need to be recreated and GCed every message
@@ -33273,6 +33330,7 @@ const WAITING_FOR_IMAGE_EMPTY_HUD_ITEM = {
   getMessage: () => t3D("waitingForImages"),
   displayType: "empty"
 };
+
 /**
  * Processes and normalizes incoming messages and manages state of
  * messages to be rendered given the ImageMode config. A large part of this responsibility
@@ -33304,6 +33362,11 @@ class MessageHandler {
    * with no indication to the user that the annotation is not available.
    */
   #availableAnnotationTopics;
+  #onAnnotationsFpsUpdate;
+  #annotationsFpsMetrics = new EventMetricsManager();
+  #annotationsFpsRefreshInterval = null;
+  #averageAnnotationsFps = 0;
+  #ghostAnnotation = undefined;
 
   /**
    *
@@ -33317,10 +33380,25 @@ class MessageHandler {
     };
     this.#tree = new dist$1.AVLTree(dist$3.compare);
     this.#availableAnnotationTopics = new Set();
+    this.#annotationsFpsRefreshInterval = setInterval(() => {
+      const newAverageAnnotationsFps = this.#annotationsFpsMetrics.calculate(ANNOTATIONS_METRICS_KEY);
+      this.#averageAnnotationsFps = newAverageAnnotationsFps;
+      if (this.#onAnnotationsFpsUpdate) {
+        this.#onAnnotationsFpsUpdate(newAverageAnnotationsFps);
+      }
+    }, 500);
+  }
+  dispose() {
+    if (this.#annotationsFpsRefreshInterval) {
+      clearInterval(this.#annotationsFpsRefreshInterval);
+    }
   }
   addListener(listener) {
     this.#listeners.push(listener);
   }
+  addOnAnnotationsFpsUpdateListener(listener) {
+    this.#onAnnotationsFpsUpdate = listener;
+  }
   removeListener(listener) {
     this.#listeners = this.#listeners.filter(fn => fn !== listener);
   }
@@ -33392,6 +33470,11 @@ class MessageHandler {
   };
   handleAnnotations = messageEvent => {
     const annotations = normalizeAnnotations(messageEvent.message, messageEvent.schemaName);
+
+    // We only want to log Annotations event if the array is not empty
+    if (annotations.length > 0) {
+      this.#annotationsFpsMetrics.registerEvent(ANNOTATIONS_METRICS_KEY);
+    }
     const {
       topic
     } = messageEvent;
@@ -33404,6 +33487,8 @@ class MessageHandler {
       return;
     }
     const groups = new Map();
+
+    // Group annotation by timestamp
     for (const annotation of annotations) {
       const key = dist$3.toNanoSec(annotation.stamp);
       const arr = groups.get(key);
@@ -33430,6 +33515,9 @@ class MessageHandler {
         });
       }
     }
+
+    //console.error("Tree after adding annotations", [...this.#tree.entries()]);
+
     this.#emitState();
   };
   setConfig(newConfig) {
@@ -33519,24 +33607,37 @@ class MessageHandler {
     this.#hud.displayIfTrue(waitingForImage && calibrationRequired, WAITING_FOR_IMAGE_NOTICE_HUD_ITEM);
   }
   #getRenderState() {
-    if (this.#config.synchronize === true) {
-      const result = findSynchronizedSetAndRemoveOlderItems(this.#tree, this.#visibleAnnotations());
-      if (result.found) {
-        return {
-          cameraInfo: this.#lastReceivedMessages.cameraInfo,
-          image: result.messages.image,
-          annotationsByTopic: result.messages.annotationsByTopic
-        };
-      }
+    if (this.#config.synchronize !== true) {
       return {
-        cameraInfo: this.#lastReceivedMessages.cameraInfo,
-        presentAnnotationTopics: result.presentAnnotationTopics,
-        missingAnnotationTopics: result.missingAnnotationTopics
+        ...this.#lastReceivedMessages
       };
     }
-    return {
-      ...this.#lastReceivedMessages
+    const result = findSynchronizedSetAndRemoveOlderItems(this.#tree, this.#visibleAnnotations());
+
+    // If there were matching annotations we want to update Ghost annotation to last known annotations
+    const now = performance.now();
+    if (result.found && result.messages.annotationsByTopic.size > 0) {
+      //console.warn("Registering ghost annotation", result.messages.annotationsByTopic);
+      this.#ghostAnnotation = {
+        annotations: result.messages.annotationsByTopic,
+        createdAtMs: now
+      };
+    }
+    const renderState = result.found ? {
+      cameraInfo: this.#lastReceivedMessages.cameraInfo,
+      image: result.messages.image,
+      annotationsByTopic: result.messages.annotationsByTopic
+    } : {
+      cameraInfo: this.#lastReceivedMessages.cameraInfo,
+      presentAnnotationTopics: result.presentAnnotationTopics,
+      missingAnnotationTopics: result.missingAnnotationTopics
     };
+    const ghostTimeMs = annoationsFpsToGhostTimeMs(this.#averageAnnotationsFps);
+    if (result.found && [...result.messages.annotationsByTopic.values()].length === 0 && this.#ghostAnnotation && now - this.#ghostAnnotation.createdAtMs < ghostTimeMs) {
+      console.warn(`No annotations found for this frame but still in ghost period (diff = ${now - this.#ghostAnnotation.createdAtMs} ms, ghostTimeMs = ${ghostTimeMs} ms) - returning ghost annotation`);
+      renderState.annotationsByTopic = this.#ghostAnnotation.annotations;
+    }
+    return renderState;
   }
 }
 const ACCEPT_LAST_INDEX = 5;
@@ -33549,40 +33650,61 @@ const ACCEPT_LAST_INDEX = 5;
  */
 function findSynchronizedSetAndRemoveOlderItems(tree, visibleAnnotations) {
   let lastEntry = undefined;
-
-  // Find ACCEPT_LAST_INDEX frame from the end
+  let lastAnnotationsOrphanEntry = undefined;
+  let validEntry = undefined;
   let imageEntries = 0;
+
+  // Calculate number of entries that have images
   for (const entry of tree.entries()) {
     if (entry[1].image) {
       imageEntries += 1;
       lastEntry = entry;
+    } else if (entry[1].annotationsByTopic.size > 0) {
+      // If there are annotations we want to use the last entry with annotations
+      lastAnnotationsOrphanEntry = entry;
     }
   }
-  let validEntry = undefined;
-  if (visibleAnnotations.size !== 0) {
+
+  // If there are no annotations active we use the newest entry with image
+  if (visibleAnnotations.size === 0) {
+    validEntry = lastEntry;
+  } else {
+    // Else we try to find first
     let acceptableIndex = imageEntries - ACCEPT_LAST_INDEX + 1;
+    // console.warn("acceptableIndex", acceptableIndex);
+
     if (acceptableIndex < 0) {
       acceptableIndex = 0;
     }
     let index = 0;
+
+    // Go throught the tree in order and find first entry that has image and all annotations
     for (const entry of tree.entries()) {
+      // Skip entries with no images
       if (!entry[1].image) {
         continue;
       }
+
+      // When we encounter the first acceptable index we use that as the entry
       if (index === acceptableIndex) {
         validEntry = entry;
       } else if (index > acceptableIndex) {
+        // Any bigger index with all annotations which is newer than already used index is the better option
         const hasAllAnnotations = Array.from(visibleAnnotations).every(topic => entry[1].annotationsByTopic.has(topic));
         if (hasAllAnnotations) {
+          console.warn("upgrading to new valid entry", entry);
           validEntry = entry;
         }
       }
       index += 1;
     }
-  } else {
-    validEntry = lastEntry;
   }
   if (validEntry) {
+    if (validEntry[1].annotationsByTopic.size === 0 && lastAnnotationsOrphanEntry) {
+      console.warn("Using annotationsByTopic from lastAnnotationsEntry orphan");
+      validEntry[1].annotationsByTopic = lastAnnotationsOrphanEntry[1].annotationsByTopic;
+    }
+
     // Drop  older messages
     let minKey = tree.minKey();
     while (minKey && dist$3.isLessThan(minKey, validEntry[0])) {
@@ -33600,6 +33722,13 @@ function findSynchronizedSetAndRemoveOlderItems(tree, visibleAnnotations) {
     presentAnnotationTopics: []
   };
 }
+function annoationsFpsToGhostTimeMs(annotationsFps) {
+  if (annotationsFps === undefined || annotationsFps === 0 || !Number.isFinite(annotationsFps)) {
+    return 1_000; // If there is no annotations fps, we want set the ghost time to 1 second
+  }
+  const period = 1 / annotationsFps;
+  return period * 1_000 * 2; // To miliseconds times two
+}
 
 // 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
@@ -34952,6 +35081,7 @@ class ImageMode extends SceneExtension {
     this.renderer.off("topicsChanged", this.#handleTopicsChanged);
     this.#annotations.dispose();
     this.imageRenderable?.dispose();
+    this.messageHandler?.dispose?.();
     super.dispose();
   }
   removeAllRenderables() {
@@ -35590,6 +35720,9 @@ class ImageMode extends SceneExtension {
       disabled: this.imageRenderable?.getDecodedImage() == undefined
     }];
   }
+  addOnAnnotationsFpsUpdateListener(listener) {
+    this.messageHandler.addOnAnnotationsFpsUpdateListener(listener);
+  }
   setOnImageRendered(callback) {
     this.#onImageRendered = callback;
   }
@@ -60054,9 +60187,10 @@ class CameraStateSettings extends SceneExtension {
     this.#controls.dampingFactor = 0.05;
     this.#controls.mouseButtons.left = CameraControls.ACTION.NONE;
     this.#controls.mouseButtons.right = CameraControls.ACTION.TRUCK;
-    this.#controls.mouseButtons.wheel = CameraControls.ACTION.ZOOM;
+    this.#controls.mouseButtons.wheel = CameraControls.ACTION.DOLLY;
     this.#controls.touches.one = CameraControls.ACTION.TOUCH_SCREEN_PAN;
     this.#controls.infinityDolly = true;
+    this.#controls.dollySpeed = 0.25;
     this.#perspectiveCamera.rotation.set(0, Math.PI, Math.PI);
     this.#perspectiveCamera.up.set(0, 1, 0);
     this.#controls.update(0);
@@ -61128,6 +61262,9 @@ class Renderer extends EventEmitter {
           if (args.onFrameRendered) {
             this.#imageModeExtension.setOnImageRendered(args.onFrameRendered);
           }
+          if (args.annotationsFpsUpdateHandler) {
+            this.#imageModeExtension.addOnAnnotationsFpsUpdateListener(args.annotationsFpsUpdateHandler);
+          }
           this.cameraHandler = this.#imageModeExtension;
           this.#imageModeExtension.addEventListener("hasModifiedViewChanged", () => {
             this.emit("resetViewChanged", this);
@@ -78833,7 +78970,9 @@ function ThreeDeeRender(props) {
     context,
     interfaceMode,
     testOptions,
-    customSceneExtensions
+    customSceneExtensions,
+    frameRenderedEvent,
+    annotationsFpsUpdateHandler
   } = props;
   const {
     initialState,
@@ -78858,9 +78997,7 @@ function ThreeDeeRender(props) {
       scene: {
         ...(partialConfig?.scene ?? {}),
         transforms: {
-          showlabels: true,
-          editable: true,
-          axisScale: 500
+          editable: true
         }
       },
       transforms,
@@ -78897,7 +79034,8 @@ function ThreeDeeRender(props) {
       sceneExtensionConfig: merge$1({}, DEFAULT_SCENE_EXTENSION_CONFIG, customSceneExtensions ?? {}),
       displayTemporaryError,
       testOptions,
-      onFrameRendered: props.frameRenderedEvent
+      onFrameRendered: frameRenderedEvent,
+      annotationsFpsUpdateHandler: annotationsFpsUpdateHandler
     }) : undefined;
     setRenderer(newRenderer);
     rendererRef.current = newRenderer;
@@ -79477,7 +79615,8 @@ function initPanel(args, context) {
     interfaceMode,
     testOptions,
     customSceneExtensions,
-    frameRenderedEvent
+    frameRenderedEvent,
+    annotationsFpsUpdateHandler
   } = args;
   // eslint-disable-next-line react/no-deprecated
   ReactDOM__default.render( /*#__PURE__*/React__default.createElement(StrictMode, null, /*#__PURE__*/React__default.createElement(CaptureErrorBoundary, {
@@ -79489,7 +79628,8 @@ function initPanel(args, context) {
     interfaceMode: interfaceMode,
     testOptions: testOptions,
     customSceneExtensions: customSceneExtensions,
-    frameRenderedEvent: frameRenderedEvent ? () => frameRenderedEvent(0) : undefined
+    frameRenderedEvent: frameRenderedEvent ? () => frameRenderedEvent(0) : undefined,
+    annotationsFpsUpdateHandler: annotationsFpsUpdateHandler
   })))), context.panelElement);
   return () => {
     // eslint-disable-next-line react/no-deprecated
@@ -79518,8 +79658,9 @@ function ThreeDeeRenderAdapter(interfaceMode, props) {
       debugPicking: props.debugPicking
     },
     customSceneExtensions,
-    frameRenderedEvent: props.frameRenderedEvent
-  }), [crash, forwardedAnalytics, interfaceMode, props.onDownloadImage, props.debugPicking, props.frameRenderedEvent, customSceneExtensions]);
+    frameRenderedEvent: props.frameRenderedEvent,
+    annotationsFpsUpdateHandler: props.annotationsFpsUpdateHandler
+  }), [crash, forwardedAnalytics, interfaceMode, props.onDownloadImage, props.debugPicking, props.frameRenderedEvent, props.annotationsFpsUpdateHandler, customSceneExtensions]);
   return /*#__PURE__*/React__default.createElement(PanelExtensionAdapter, {
     config: props.config,
     highestSupportedConfigVersion: 1,

package/dist/{index-CqMDGXcF.js → index-DE0_tKGA.js}

@@ -1,4 +1,4 @@
-import { N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport } from './index-CPTbtbj3.js';
+import { N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-ttl4cqP0.js → index-DZgY6A3h.js}

@@ -1,4 +1,4 @@
-import { J as indentNodeProp, K as continuedIndent, M as foldNodeProp, N as styleTags, O as tags, Q as LRLanguage, T as LanguageSupport, U as ExternalTokenizer, V as LRParser, X as ifNotIn, Y as completeFromList, Z as syntaxTree } from './index-CPTbtbj3.js';
+import { J as indentNodeProp, K as continuedIndent, M as foldNodeProp, N as styleTags, O as tags, Q as LRLanguage, T as LanguageSupport, U as ExternalTokenizer, V as LRParser, X as ifNotIn, Y as completeFromList, Z as syntaxTree } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-B2-O30qH.js → index-DbT8vr6l.js}

@@ -1,4 +1,4 @@
-import { a2 as ContextTracker, U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport, ab as parseMixed } from './index-CPTbtbj3.js';
+import { a2 as ContextTracker, U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport, ab as parseMixed } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-DLRgXO8y.js → index-DsO3GPWF.js}

@@ -1,4 +1,4 @@
-import { U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, aa as html, T as LanguageSupport, ab as parseMixed } from './index-CPTbtbj3.js';
+import { U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, aa as html, T as LanguageSupport, ab as parseMixed } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-i-2ofHyT.js → index-I0XgHBlj.js}

@@ -1,4 +1,4 @@
-import { U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport } from './index-CPTbtbj3.js';
+import { U as ExternalTokenizer, N as styleTags, O as tags, V as LRParser, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-BGrTBljs.js → index-LmBY2nOo.js}

@@ -1,4 +1,4 @@
-import { N as styleTags, O as tags, ad as javascriptLanguage, Q as LRLanguage, T as LanguageSupport, V as LRParser, aa as html, ab as parseMixed, U as ExternalTokenizer } from './index-CPTbtbj3.js';
+import { N as styleTags, O as tags, ad as javascriptLanguage, Q as LRLanguage, T as LanguageSupport, V as LRParser, aa as html, ab as parseMixed, U as ExternalTokenizer } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/{index-AHg_yzKN.js → index-pwNtzQuf.js}

@@ -1,4 +1,4 @@
-import { U as ExternalTokenizer, a2 as ContextTracker, N as styleTags, O as tags, V as LRParser, a3 as LocalTokenGroup, a4 as snippetCompletion, Z as syntaxTree, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport, X as ifNotIn, Y as completeFromList, a5 as IterMode, a6 as NodeWeakMap } from './index-CPTbtbj3.js';
+import { U as ExternalTokenizer, a2 as ContextTracker, N as styleTags, O as tags, V as LRParser, a3 as LocalTokenGroup, a4 as snippetCompletion, Z as syntaxTree, Q as LRLanguage, J as indentNodeProp, K as continuedIndent, $ as flatIndent, a0 as delimitedIndent, M as foldNodeProp, a1 as foldInside, T as LanguageSupport, X as ifNotIn, Y as completeFromList, a5 as IterMode, a6 as NodeWeakMap } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ah as ImagePanel, ag as PanelLayout, ai as PointCloudPanel, ae as VisualizerConnection, af as VisualizerContext } from './index-CPTbtbj3.js';
+export { aj as EventMetricsManager, ah as ImagePanel, ag as PanelLayout, ai as PointCloudPanel, ak as ThroughputMetricsManager, ae as VisualizerConnection, af as VisualizerContext } from './index-BuRQ7ljn.js';
 import './tslib.es6-C73eoP_E.js';
 import 'react';
 import 'react-mosaic-component';

package/dist/lib/src/components/Panel.d.ts

@@ -1,5 +1,5 @@
 import type { ProtobufKind } from "../messaging/protobuf.js";
-import '../fonts/fonts.css';
+import "../fonts/fonts.css";
 export type PanelTopic = {
     name: string;
     extra: boolean;
@@ -14,6 +14,7 @@ export type PanelProps = React.PropsWithChildren<{
     targetFps?: number;
     triggerToast?: () => void;
     renderedFps?: number;
+    annotationsFps?: number;
     renderDelay?: number;
     toggleTopic?: (topic: string) => void;
 }>;

package/dist/lib/src/components/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC;AASF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4DtC,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,MAAM,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAEtD,MAAM,MAAM,aAAa,GAAG;IAC1B,UAAU,EAAE,UAAU,EAAE,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC;AAaF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA8DtC,CAAC"}

package/dist/lib/src/components/Panel.js

@@ -8,27 +8,27 @@ import EmptyState from "@foxglove/studio-base/components/EmptyState.js";
 import ErrorBoundary from "@foxglove/studio-base/components/ErrorBoundary.js";
 import RemountOnValueChange from "@foxglove/studio-base/components/RemountOnValueChange.js";
 import { PanelToolbar } from "./PanelToolbar.js";
-import '../fonts/fonts.css';
+import "../fonts/fonts.css";
 const DetectionContext = React.createContext({ detections: [] });
 export const useDetections = () => {
     return React.useContext(DetectionContext);
 };
 const rawToAnnotations = (rawAnnotations, kind, current) => rawAnnotations.map((annotationTopic) => ({
     name: annotationTopic,
-    extra: kind === 'extra',
-    enabled: current.find(({ name }) => name === annotationTopic)?.enabled ?? kind === 'main'
+    extra: kind === "extra",
+    enabled: current.find(({ name }) => name === annotationTopic)?.enabled ?? kind === "main",
 }));
-export const Panel = ({ children, kind, topic, disableAnnotations = false, annotationTopics = [], extraAnnotationTopics = [], targetFps, renderedFps, renderDelay, toggleTopic, triggerToast, }) => {
+export const Panel = ({ children, kind, topic, disableAnnotations = false, annotationTopics = [], extraAnnotationTopics = [], targetFps, renderedFps, annotationsFps, renderDelay, toggleTopic, triggerToast, }) => {
     const [detections, setDetections] = React.useState([]);
     React.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)]);
-    return (_jsx(RemountOnValueChange, { value: "internal-player", children: _jsx(ErrorBoundary, { children: _jsx(DetectionContext.Provider, { value: { detections }, children: _jsxs(Stack, { flexGrow: 1, overflow: "hidden", border: "1px solid #d3d3d3d9", style: { borderRadius: "8px" }, children: [_jsx(PanelToolbar, { kind: kind, topic: topic, setDetections: setDetections, disableAnnotations: disableAnnotations, targetFps: targetFps, renderedFps: renderedFps, renderDelay: renderDelay, toggleTopic: toggleTopic, triggerToast: triggerToast }), _jsx(Suspense, { fallback: _jsx(EmptyState, { children: _jsx("div", { children: "Loading..." }) }), children: _jsx(RemountOnValueChange, { value: detections, children: children }) })] }) }) }) }));
+    return (_jsx(RemountOnValueChange, { value: "internal-player", children: _jsx(ErrorBoundary, { children: _jsx(DetectionContext.Provider, { value: { detections }, children: _jsxs(Stack, { flexGrow: 1, overflow: "hidden", border: "1px solid #d3d3d3d9", style: { borderRadius: "8px" }, children: [_jsx(PanelToolbar, { kind: kind, topic: topic, setDetections: setDetections, disableAnnotations: disableAnnotations, targetFps: targetFps, renderedFps: renderedFps, annotationsFps: annotationsFps, renderDelay: renderDelay, toggleTopic: toggleTopic, triggerToast: triggerToast }), _jsx(Suspense, { fallback: _jsx(EmptyState, { children: _jsx("div", { children: "Loading..." }) }), children: _jsx(RemountOnValueChange, { value: detections, children: children }) })] }) }) }) }));
 };
 //# sourceMappingURL=Panel.js.map

package/dist/lib/src/components/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../../../src/components/Panel.tsx"],"names":[],"mappings":"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"}

package/dist/lib/src/components/PanelToolbar.d.ts

@@ -9,6 +9,7 @@ export type PanelToolbarProps = {
     setDetections?: (cb: (topics: PanelTopic[]) => PanelTopic[]) => void;
     targetFps?: number;
     renderedFps?: number;
+    annotationsFps?: number;
     renderDelay?: number;
     triggerToast?: () => void;
     toggleTopic?: (topic: string) => void;

package/dist/lib/src/components/PanelToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAuBvB,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAG5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,sCAAsC,CAAC;AAqI9C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgLpD,CAAC"}
+{"version":3,"file":"PanelToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelToolbar.tsx"],"names":[],"mappings":"AAGA,OAAO,eAAe,CAAC;AAuBvB,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAG5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,sCAAsC,CAAC;AA0J9C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,KAAK,IAAI,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuLpD,CAAC"}

package/dist/lib/src/components/PanelToolbar.js

@@ -11,7 +11,7 @@ import { useConnections } from "../context/ConnectionsProvider.js";
 import "@luxonis/common-fe-components/styles";
 import { createEventLoopDelaySampler } from "./measure-event-loop-delay";
 import { RiNumbersFill } from "react-icons/ri";
-function PanelToolbarMetrics({ renderedFps, targetFps, metrics }) {
+function PanelToolbarMetrics({ renderedFps, annotationsFps, targetFps, metrics, }) {
     const [variant, setVariant] = React.useState("full");
     const eventLoopDelay = createEventLoopDelaySampler();
     const descriptionRef = React.useRef(null);
@@ -23,7 +23,12 @@ function PanelToolbarMetrics({ renderedFps, targetFps, metrics }) {
             setVariant("full");
         }
     }, [descriptionRef.current?.offsetWidth]);
-    return (_jsx(Flex, { direction: "row", gap: "sm", align: "start", justify: "end", ref: descriptionRef, width: "full", children: variant === "compact" ? (_jsx(Tooltip, { content: _jsxs("ul", { children: [_jsxs("li", { children: ["Camera: ", targetFps === 0 ? "-" : targetFps, " FPS"] }), _jsxs("li", { children: ["Network:", " ", !metrics || metrics?.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps, " ", "FPS"] }), _jsxs("li", { children: ["Decoding:", " ", !metrics || metrics?.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps, " ", "FPS"] }), _jsxs("li", { children: ["Rendering: ", renderedFps === 0 ? "-" : renderedFps, " FPS"] }), _jsxs("li", { children: ["Throughput:", " ", !metrics || metrics?.messageThroughput === 0 ? "-" : metrics.messageThroughput, " ", "Mbps"] }), _jsxs("li", { children: ["Frontend Delay: ", eventLoopDelay.toFixed(2), " ms"] })] }), direction: "bottom", className: "ml-auto", children: _jsx(Button, { icon: RiNumbersFill, variant: "outline", colorVariant: "white", size: "sm", className: "text-gray-700" }) })) : (_jsxs(_Fragment, { children: [targetFps !== undefined && (_jsx(Label, { text: `Camera: ${targetFps === 0 ? "-" : targetFps} FPS` })), metrics?.incomingMessagesFps !== undefined && (_jsx(Label, { text: `Network: ${metrics.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps} FPS` })), metrics?.decodedMessagesFps !== undefined && (_jsx(Label, { text: `Decoding: ${metrics.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps} FPS` })), renderedFps !== undefined && (_jsx(Label, { text: `Rendering: ${renderedFps === 0 ? "-" : renderedFps} FPS` })), metrics?.messageThroughput !== undefined && (_jsx(Label, { text: `Throughput: ${metrics.messageThroughput === 0 ? "-" : metrics.messageThroughput} Mbps` })), eventLoopDelay !== undefined && (_jsx(Label, { text: `Frontend Delay: ${Math.ceil(eventLoopDelay)} ms` }))] })) }));
+    return (_jsx(Flex, { direction: "row", gap: "sm", align: "start", justify: "end", ref: descriptionRef, width: "full", children: variant === "compact" ? (_jsx(Tooltip, { content: _jsxs("ul", { children: [_jsxs("li", { children: ["Camera: ", !targetFps || targetFps === 0 ? "-" : targetFps, " FPS"] }), _jsxs("li", { children: ["Network:", " ", !metrics || metrics?.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps, " ", "FPS"] }), _jsxs("li", { children: ["Decoding:", " ", !metrics || metrics?.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps, " ", "FPS"] }), _jsxs("li", { children: ["Rendering: ", !renderedFps || renderedFps === 0 ? "-" : renderedFps, " FPS"] }), _jsxs("li", { children: ["Annotations:", " ", !annotationsFps ||
+                                annotationsFps === 0 ||
+                                !Number.isFinite(annotationsFps)
+                                ? "-"
+                                : annotationsFps, " ", "FPS"] }), _jsxs("li", { children: ["Throughput:", " ", !metrics || metrics?.messageThroughput === 0 ? "-" : metrics.messageThroughput, " ", "Mbps"] }), _jsxs("li", { children: ["Frontend Delay: ", eventLoopDelay.toFixed(2), " ms"] })] }), direction: "bottom", className: "ml-auto", children: _jsx(Button, { icon: RiNumbersFill, variant: "outline", colorVariant: "white", size: "sm", className: "text-gray-700" }) })) : (_jsxs(_Fragment, { children: [targetFps !== undefined && (_jsx(Label, { text: `Camera: ${targetFps === 0 ? "-" : targetFps} FPS` })), metrics?.incomingMessagesFps !== undefined && (_jsx(Label, { text: `Network: ${metrics.incomingMessagesFps === 0 ? "-" : metrics.incomingMessagesFps} FPS` })), metrics?.decodedMessagesFps !== undefined && (_jsx(Label, { text: `Decoding: ${metrics.decodedMessagesFps === 0 ? "-" : metrics.decodedMessagesFps} FPS` })), renderedFps !== undefined && (_jsx(Label, { text: `Rendering: ${renderedFps === 0 ? "-" : renderedFps} FPS` })), annotationsFps !== undefined && (_jsx(Label, { text: `Annotations: ${annotationsFps === 0 ||
+                        !Number.isFinite(annotationsFps) ? "-" : annotationsFps} FPS` })), metrics?.messageThroughput !== undefined && (_jsx(Label, { text: `Throughput: ${metrics.messageThroughput === 0 ? "-" : metrics.messageThroughput} Mbps` })), eventLoopDelay !== undefined && (_jsx(Label, { text: `Frontend Delay: ${Math.ceil(eventLoopDelay)} ms` }))] })) }));
 }
 const PanelAnnotationButton = ({ topic, onClick }) => {
     const handleClick = React.useCallback((event) => {
@@ -32,7 +37,7 @@ const PanelAnnotationButton = ({ topic, onClick }) => {
     }, [onClick]);
     return (_jsx(DropdownMenuItem, { onClick: handleClick, children: _jsxs(Flex, { align: "center", gap: "sm", children: [_jsx(Icon, { color: "active", icon: topic.enabled ? ImCheckboxChecked : ImCheckboxUnchecked }), _jsx(NormalText, { text: topic.name })] }) }));
 };
-export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations = false, targetFps, triggerToast, renderedFps, toggleTopic, }) => {
+export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations = false, targetFps, triggerToast, renderedFps, annotationsFps, toggleTopic, }) => {
     const [metrics, setMetrics] = React.useState();
     const { detections } = useDetections();
     const connections = useConnections();
@@ -77,7 +82,7 @@ export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations =
     const makeDetection = React.useCallback((detection, { extra }) => (extra ? detection.extra && !detection.enabled : !detection.extra || detection.enabled) && (_jsx(PanelAnnotationButton, { topic: detection, onClick: () => {
             onToggleTopic(detection.name);
         } }, detection.name)), [onToggleTopic]);
-    return (_jsx(Flex, { direction: "row", gap: "sm", align: "center", justify: "space-between", className: "px-4", children: _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", width: "full", paddingY: "xs", children: [_jsxs(Flex, { width: "fit", gap: "xxs", className: "flex-col xl:flex-row items-start xl:items-end", children: [_jsx(SubHeader, { text: name, className: "whitespace-nowrap text-[20px]/[20px]" }), resolution && _jsx(Label, { text: `(${resolution})`, className: "text-[14px]/[14px] xl:pb-[2px]" })] }), _jsx(PanelToolbarMetrics, { renderedFps: renderedFps, targetFps: targetFps, metrics: metrics }), _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", marginLeft: "auto", width: "fit", children: [!disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { children: [_jsx(Tooltip, { content: "Annotations", children: _jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", colorVariant: "white", size: "sm", icon: CiFilter, disabled: detections.length === 0 }) }) }), _jsxs(DropdownMenuContent, { children: [detections.map((detection) => makeDetection(detection, { extra: false })), hasExtra && (_jsx(Button, { width: "full", paddingY: "xs", variant: "ghost", "aria-expanded": extraVisible ? "true" : undefined, onClick: () => {
+    return (_jsx(Flex, { direction: "row", gap: "sm", align: "center", justify: "space-between", className: "px-4", children: _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", width: "full", paddingY: "xs", children: [_jsxs(Flex, { width: "fit", gap: "xxs", className: "flex-col xl:flex-row items-start xl:items-end", children: [_jsx(SubHeader, { text: name, className: "whitespace-nowrap text-[20px]/[20px]" }), resolution && (_jsx(Label, { text: `(${resolution})`, className: "text-[14px]/[14px] xl:pb-[2px]" }))] }), _jsx(PanelToolbarMetrics, { renderedFps: renderedFps, annotationsFps: annotationsFps, targetFps: targetFps, metrics: metrics }), _jsxs(Flex, { direction: "row", gap: "xs", align: "center", justify: "start", marginLeft: "auto", width: "fit", children: [!disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { children: [_jsx(Tooltip, { content: "Annotations", children: _jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", colorVariant: "white", size: "sm", icon: CiFilter, disabled: detections.length === 0 }) }) }), _jsxs(DropdownMenuContent, { children: [detections.map((detection) => makeDetection(detection, { extra: false })), hasExtra && (_jsx(Button, { width: "full", paddingY: "xs", variant: "ghost", "aria-expanded": extraVisible ? "true" : undefined, onClick: () => {
                                                 setExtraVisible((current) => !current);
                                             }, icon: extraVisible ? ArrowUpIcon : ArrowDownIcon, style: {
                                                 borderRadius: 4,