@luxonis/visualizer-protobuf 2.13.0 → 2.14.0

package/dist/{index-CE0akFDh.js → index-BPWE58mB.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { useReducer, useRef, useCallback, useLayoutEffect, Component, useContext, useState, useEffect, createContext, forwardRef, createElement, cloneElement, useMemo, Profiler, StrictMode } from 'react';
 import ReactDOM__default from 'react-dom';
-import { i as isSymbol, t as toString, k as keys, g as getSymbols$1, s as stubArray, a as arrayPush, b as baseGetAllKeys, c as getTag, d as getAllKeys, e as createAggregator, f as baseGet, h as baseIteratee, j as castPath, l as toKey, m as flatRest, n as arrayMap$1, o as baseSet, p as baseUniq, q as baseFlatten, r as generateUtilityClass, A as AnalyticsContext, u as useMustNotChange, P as PropTypes, v as useCurrentLayoutActions, w as useCurrentLayoutSelector, x as reportError, y as AppError, E as ErrorDisplay, S as Stack$1, z as makeStyles$1, _ as _extends$1, L as Logger, B as useGuaranteedContext, W as WorkspaceContext, C as useAnalytics, D as AppEvent, F as LeftSidebarItemKeys, R as RightSidebarItemKeys, G as usePanelMosaicId, H as useTranslation, I as usePanelCatalog, J as EmptyState, K as isEmpty, M as PanelContext, N as PanelCatalogContext, O as useSelectedPanels, Q as usePanelStateStore, T as useDefaultPanelTitle, U as PANEL_TITLE_CONFIG_KEY, V as noop$4, X as getPanelTypeFromId, Y as useWorkspaceStore, Z as useShallowMemo, $ as TAB_PANEL_TYPE, a0 as WorkspaceStoreSelectors, a1 as difference, a2 as filterMap, a3 as dist$3, a4 as usePanelContext, a5 as useMessagePipeline, a6 as v4, a7 as useHoverValue, a8 as useSetHoverValue, a9 as useClearHoverValue, aa as useAppConfiguration, ab as useMessagePipelineGetter, ac as usePanelSettingsTreeUpdate, ad as PlayerCapabilities, ae as useValueChangedDebugLog, af as assertNever, ag as PlayerPresence, ah as typescript, ai as isEqual, aj as isDesktopApp, ak as createTheme, al as propTypesExports, am as useJsonTreeTheme } from './index-DFlpZwK1.js';
+import { i as isSymbol, t as toString, k as keys, g as getSymbols$1, s as stubArray, a as arrayPush, b as baseGetAllKeys, c as getTag, d as getAllKeys, e as createAggregator, f as baseGet, h as baseIteratee, j as castPath, l as toKey, m as flatRest, n as arrayMap$1, o as baseSet, p as baseUniq, q as baseFlatten, r as generateUtilityClass, A as AnalyticsContext, u as useMustNotChange, P as PropTypes, v as useCurrentLayoutActions, w as useCurrentLayoutSelector, x as reportError, y as AppError, E as ErrorDisplay, S as Stack$1, z as makeStyles$1, _ as _extends$1, L as Logger, B as useGuaranteedContext, W as WorkspaceContext, C as useAnalytics, D as AppEvent, F as LeftSidebarItemKeys, R as RightSidebarItemKeys, G as usePanelMosaicId, H as useTranslation, I as usePanelCatalog, J as EmptyState, K as isEmpty, M as PanelContext, N as PanelCatalogContext, O as useSelectedPanels, Q as usePanelStateStore, T as useDefaultPanelTitle, U as PANEL_TITLE_CONFIG_KEY, V as noop$4, X as getPanelTypeFromId, Y as useWorkspaceStore, Z as useShallowMemo, $ as TAB_PANEL_TYPE, a0 as WorkspaceStoreSelectors, a1 as difference, a2 as filterMap, a3 as dist$3, a4 as usePanelContext, a5 as useMessagePipeline, a6 as v4, a7 as useHoverValue, a8 as useSetHoverValue, a9 as useClearHoverValue, aa as useAppConfiguration, ab as useMessagePipelineGetter, ac as usePanelSettingsTreeUpdate, ad as PlayerCapabilities, ae as useValueChangedDebugLog, af as assertNever, ag as PlayerPresence, ah as typescript, ai as isEqual, aj as isDesktopApp, ak as createTheme, al as propTypesExports, am as useJsonTreeTheme } from './index-D8jKQuGu.js';
 import { createStore, useStore } from 'zustand';
 import { MosaicDragType, MosaicContext, MosaicWindowContext, getOtherBranch, getNodeAtPath } from 'react-mosaic-component';
 import { a as getDefaultExportFromCjs, c as commonjsGlobal, g as getAugmentedNamespace, E as EventEmitter } from './FoxgloveServer-DiLI7KZU.js';
@@ -14,7 +14,7 @@ import MoreVertIcon from '@mui/icons-material/MoreVert';
 import CancelIcon from '@mui/icons-material/Cancel';
 import SearchIcon from '@mui/icons-material/Search';
 import { useDrag, useDrop } from 'react-dnd';
-import { B as Box3, V as Vector3, I as InstancedBufferGeometry, F as Float32BufferAttribute, a as InstancedInterleavedBuffer, b as InterleavedBufferAttribute, W as WireframeGeometry, S as Sphere, U as UniformsLib, c as Vector2, f as ShaderLib, g as UniformsUtils, h as ShaderMaterial, i as Vector4, M as Matrix4, L as Line3, j as Mesh, k as MathUtils, O as Object3D, C as Color, r as rgbToThreeColor, s as stringToRgba, m as makeRgba, l as MeshStandardMaterial, R as ReplaceStencilOp, N as NotEqualStencilFunc, D as DoubleSide, P as PointsMaterial, n as rgbaToCssString, o as colorModeSettingsFields, p as autoSelectColorSettings, q as PlaneGeometry, u as DataTexture, v as UVMapping, w as ClampToEdgeWrapping, x as NearestFilter, y as LinearFilter, z as FS_SRGB_TO_LINEAR, A as SRGBColorSpace, E as LinearSRGBColorSpace, G as rgbaToLinear, H as RedFormat, J as RGBAFormat, K as getColorConverter, Q as FloatType, T as UnsignedByteType, X as NEEDS_MIN_MAX$1, Y as InstancedMesh, Z as CylinderGeometry, _ as ConeGeometry, $ as DataTextureLoader, a0 as LinearMipmapLinearFilter, a1 as Loader, a2 as LoaderUtils, a3 as FileLoader, a4 as MeshBasicMaterial, a5 as Scene, a6 as TextureLoader, a7 as AnimationClip, a8 as VectorKeyframeTrack, a9 as QuaternionKeyframeTrack, aa as MeshLambertMaterial, ab as MeshPhongMaterial, ac as FrontSide, ad as PerspectiveCamera, ae as OrthographicCamera, af as AmbientLight, ag as SpotLight, ah as PointLight, ai as DirectionalLight, aj as BufferGeometry, ak as Group, al as Quaternion, am as Bone, an as LineBasicMaterial, ao as SkinnedMesh, ap as Line, aq as LineSegments, ar as RepeatWrapping, as as Skeleton, at as BufferAttribute, au as TrianglesDrawMode, av as TriangleFanDrawMode, aw as TriangleStripDrawMode, ax as MeshPhysicalMaterial, ay as ImageBitmapLoader, az as InterleavedBuffer, aA as Material, aB as PropertyBinding, aC as LineLoop, aD as Points, aE as InterpolateLinear, aF as ColorManagement, aG as NearestMipmapNearestFilter, aH as LinearMipmapNearestFilter, aI as NearestMipmapLinearFilter, aJ as MirroredRepeatWrapping, aK as InterpolateDiscrete, aL as Texture, aM as NumberKeyframeTrack, aN as Interpolant, aO as EdgesGeometry, aP as LoadingManager, aQ as stringToRgb, aR as getLuminance, aS as Euler, aT as vec3TupleApproxEquals, aU as wrap, aV as releaseProxy, aW as decodeCompressedImageToBitmap, aX as CanvasTexture, aY as Shape, aZ as SRGBToLinear, a_ as ShapeGeometry, a$ as DynamicDrawUsage, b0 as ShaderChunk, b1 as IMAGE_DEFAULT_COLOR_MODE_SETTINGS, b2 as colorHasTransparency, b3 as StaticDrawUsage, b4 as RawShaderMaterial, b5 as GLSL3, b6 as colorFieldComputedPrefix, b7 as getRotationTo, b8 as SphereGeometry, b9 as rgbaGradient, ba as InstancedBufferAttribute, bb as BoxGeometry, bc as DARK_OUTLINE, bd as LIGHT_OUTLINE, be as CircleGeometry, bf as LineDashedMaterial, bg as GreaterDepth, bh as EventDispatcher, bi as Plane, bj as Raycaster, bk as WebGLRenderTarget, bl as Ray, bm as MOUSE, bn as TOUCH, bo as Spherical, bp as WebGLRenderer, bq as NoToneMapping, br as VSMShadowMap, bs as HemisphereLight } from './decodeImage-BBqnjJjE.js';
+import { B as Box3, V as Vector3, I as InstancedBufferGeometry, F as Float32BufferAttribute, a as InstancedInterleavedBuffer, b as InterleavedBufferAttribute, W as WireframeGeometry, S as Sphere, U as UniformsLib, c as Vector2, e as ShaderLib, f as UniformsUtils, g as ShaderMaterial, h as Vector4, M as Matrix4, L as Line3, i as Mesh, j as MathUtils, O as Object3D, C as Color, r as rgbToThreeColor, s as stringToRgba, m as makeRgba, k as MeshStandardMaterial, R as ReplaceStencilOp, N as NotEqualStencilFunc, D as DoubleSide, P as PointsMaterial, l as rgbaToCssString, n as colorModeSettingsFields, o as autoSelectColorSettings, p as PlaneGeometry, q as DataTexture, t as UVMapping, u as ClampToEdgeWrapping, v as NearestFilter, w as LinearFilter, x as FS_SRGB_TO_LINEAR, y as SRGBColorSpace, z as LinearSRGBColorSpace, A as rgbaToLinear, E as RedFormat, G as RGBAFormat, H as getColorConverter, J as FloatType, K as UnsignedByteType, Q as NEEDS_MIN_MAX$1, T as InstancedMesh, X as CylinderGeometry, Y as ConeGeometry, Z as DataTextureLoader, _ as LinearMipmapLinearFilter, $ as Loader, a0 as LoaderUtils, a1 as FileLoader, a2 as MeshBasicMaterial, a3 as Scene, a4 as TextureLoader, a5 as AnimationClip, a6 as VectorKeyframeTrack, a7 as QuaternionKeyframeTrack, a8 as MeshLambertMaterial, a9 as MeshPhongMaterial, aa as FrontSide, ab as PerspectiveCamera, ac as OrthographicCamera, ad as AmbientLight, ae as SpotLight, af as PointLight, ag as DirectionalLight, ah as BufferGeometry, ai as Group, aj as Quaternion, ak as Bone, al as LineBasicMaterial, am as SkinnedMesh, an as Line, ao as LineSegments, ap as RepeatWrapping, aq as Skeleton, ar as BufferAttribute, as as TrianglesDrawMode, at as TriangleFanDrawMode, au as TriangleStripDrawMode, av as MeshPhysicalMaterial, aw as ImageBitmapLoader, ax as InterleavedBuffer, ay as Material, az as PropertyBinding, aA as LineLoop, aB as Points, aC as InterpolateLinear, aD as ColorManagement, aE as NearestMipmapNearestFilter, aF as LinearMipmapNearestFilter, aG as NearestMipmapLinearFilter, aH as MirroredRepeatWrapping, aI as InterpolateDiscrete, aJ as Texture, aK as NumberKeyframeTrack, aL as Interpolant, aM as EdgesGeometry, aN as LoadingManager, aO as stringToRgb, aP as getLuminance, aQ as Euler, aR as vec3TupleApproxEquals, aS as decodeCompressedImageToBitmap, aT as CanvasTexture, aU as Shape, aV as SRGBToLinear, aW as ShapeGeometry, aX as DynamicDrawUsage, aY as ShaderChunk, aZ as IMAGE_DEFAULT_COLOR_MODE_SETTINGS, a_ as colorHasTransparency, a$ as StaticDrawUsage, b0 as RawShaderMaterial, b1 as GLSL3, b2 as colorFieldComputedPrefix, b3 as getRotationTo, b4 as SphereGeometry, b5 as rgbaGradient, b6 as InstancedBufferAttribute, b7 as BoxGeometry, b8 as DARK_OUTLINE, b9 as LIGHT_OUTLINE, ba as CircleGeometry, bb as LineDashedMaterial, bc as GreaterDepth, bd as EventDispatcher, be as Plane, bf as Raycaster, bg as WebGLRenderTarget, bh as Ray, bi as MOUSE, bj as TOUCH, bk as Spherical, bl as WebGLRenderer, bm as NoToneMapping, bn as VSMShadowMap, bo as HemisphereLight } from './decodeImage-NYPkamnK.js';
 import { CacheProvider } from '@emotion/react';
 import '@mui/material/styles/createTypography';
 import require$$1$3 from 'color';
@@ -31455,34 +31455,7 @@ Object.defineProperty(awaited, "__esModule", { value: true });
 // 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/
 
-
-/**
- * Wraps an instantiated `Worker` and exposes its API in the same way that `Comlink.wrap` does
- * but it also provides a `dispose` function to terminate the worker and release the comlink proxy.
- * This can help prevent memory leaks when the comlink proxy is unable to garbage collect itself due to
- * unresolved promises which can occur if the worker is terminated while processing a request.
- * This should be used instead of `Comlink.wrap` where possible.
- *
- * @param worker - worker to be wrapped by comlink
- * @returns remote - API for worker wrapped by comlink. What is normally received from Comlink.wrap
- * @returns dispose - function to release the comlink proxy and to terminate the worker
- */
-function ComlinkWrap(worker) {
-  const remote = wrap(worker);
-  const dispose = () => {
-    remote[releaseProxy]();
-    worker.terminate();
-  };
-  return {
-    remote,
-    dispose
-  };
-}
-
-// 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/
-
+//import init, { decode_i420_simd } from "./pkg/viewer_rust_decoder.js";
 
 /**
  * Provides a worker that can process RawImages on a background thread.
@@ -31494,27 +31467,82 @@ function ComlinkWrap(worker) {
  */
 
 class WorkerImageDecoder {
-  #remote;
-  #dispose;
+  //#wasmInitialized = false;
+  #worker; // have more workers
+  //#reusableBuffer: SharedArrayBuffer | null = null;
+
   constructor() {
-    const {
-      remote,
-      dispose
-    } = ComlinkWrap(new Worker(new URL("WorkerImageDecoder.worker-DjK2q36W.js", import.meta.url), {
-      type: 'module'
-    }));
-    this.#remote = remote;
-    this.#dispose = dispose;
+    this.#worker = new Worker(new URL("WorkerImageDecoder.worker-DCoSYoLL.js", import.meta.url), {
+      type: "module"
+    });
   }
 
   /**
    * Copies `image` to the worker, and transfers the decoded result back to the main thread.
    */
-  async decode(image, options) {
-    return await this.#remote.decode(image, options);
+  decode(image, options) {
+    return new Promise((resolve, reject) => {
+      image.width * image.height * 4;
+
+      // Create or resize buffer if needed
+      //if (!this.#reusableBuffer || this.#reusableBuffer.byteLength !== requiredSize) {
+      //  console.log("Resizing buffer", this.#reusableBuffer?.byteLength);
+      //  this.#reusableBuffer = new SharedArrayBuffer(requiredSize);
+      //}
+
+      this.#worker.onmessage = event => {
+        if (event.data.error) {
+          reject(new Error(event.data.error));
+        } else {
+          resolve(new ImageData(event.data.result, image.width, image.height));
+        }
+      };
+
+      // TODO: Try using shared buffer for input data as well
+      this.#worker.postMessage({
+        image,
+        options
+      }, [image.data.buffer]);
+    });
   }
+
+  //public async decodeOnMain(image: RosImage | RawImage, options: Partial<RawImageOptions>): Promise<ImageData | ImageBitmap> {
+  //    const requiredSize = image.width * image.height * 4;
+  //
+  //    // Create or resize buffer if needed
+  //    if (!this.#reusableBuffer || this.#reusableBuffer.length < requiredSize) {
+  //      console.log('Resizing buffer', this.#reusableBuffer?.length);
+  //      this.#reusableBuffer = new Uint8ClampedArray(requiredSize);
+  //    }
+  //
+  //    return decodeRawImage(image, options, this.#reusableBuffer).then(() => {
+  //      return new ImageData(this.#reusableBuffer!, image.width, image.height);
+  //    });
+  //}
+
+  //public async decodeRust(
+  //  image: RosImage | RawImage,
+  //  options: Partial<RawImageOptions>,
+  //): Promise<ImageData> {
+  //  if (!this.#wasmInitialized) {
+  //    console.log("Initializing wasm decoder");
+  //    await init();
+  //    this.#wasmInitialized = true;
+  //  }
+  //
+  //  // TODO: Potentially use async rs function to improve performance
+  //  const decodedBuffer: Uint8Array = decode_i420_simd(
+  //    image.data as Uint8Array,
+  //    image.width,
+  //    image.height,
+  //    0,
+  //  );
+  //
+  //  return new ImageData(new Uint8ClampedArray(decodedBuffer), image.width, image.height);
+  //}
+
   terminate() {
-    this.#dispose();
+    this.#worker.terminate();
   }
 }
 
@@ -31522,6 +31550,7 @@ class WorkerImageDecoder {
 // 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 WORKER_COUNT = 4;
 const log$4 = Logger.getLogger("src/index.ts");
 const DEFAULT_DISTANCE = 1;
 const DEFAULT_PLANAR_PROJECTION_FACTOR = 0;
@@ -31546,12 +31575,14 @@ class ImageRenderable extends Renderable {
   #renderBehindScene = false;
   #isUpdating = false;
   #decodedImage;
+  #lastUsedDecoderIndex = 0;
   #receivedImageSequenceNumber = 0;
   #displayedImageSequenceNumber = 0;
   #showingErrorImage = false;
   #disposed = false;
   constructor(topicName, renderer, userData) {
     super(topicName, renderer, userData);
+    this.decoderPool = new Array(WORKER_COUNT).fill(undefined).map(() => new WorkerImageDecoder());
   }
   isDisposed() {
     return this.#disposed;
@@ -31564,7 +31595,7 @@ class ImageRenderable extends Renderable {
     this.userData.texture?.dispose();
     this.userData.material?.dispose();
     this.userData.geometry?.dispose();
-    this.decoder?.terminate();
+    this.decoderPool?.forEach(decoder => decoder.terminate());
     super.dispose();
   }
   updateHeaderInfo() {
@@ -31675,7 +31706,9 @@ class ImageRenderable extends Renderable {
     if ("format" in image) {
       return await decodeCompressedImageToBitmap(image, resizeWidth);
     }
-    return await (this.decoder ??= new WorkerImageDecoder()).decode(image, this.userData.settings);
+    const decoder = this.decoderPool?.at(this.#lastUsedDecoderIndex);
+    this.#lastUsedDecoderIndex = (this.#lastUsedDecoderIndex + 1) % this.decoderPool.length;
+    return await decoder.decode(image, this.userData.settings);
   }
   update() {
     if (this.#isUpdating) {
@@ -59810,7 +59843,8 @@ class Renderer extends EventEmitter {
     this.gl = new WebGLRenderer({
       canvas,
       alpha: true,
-      antialias: true
+      antialias: true,
+      powerPreference: 'high-performance'
     });
     if (!this.gl.capabilities.isWebGL2) {
       throw new Error("WebGL2 is not supported");
@@ -59874,8 +59908,7 @@ class Renderer extends EventEmitter {
     switch (interfaceMode) {
       case "image":
         {
-          const imageMode = reserved.imageMode.init(this);
-          this.#imageModeExtension = imageMode;
+          this.#imageModeExtension = reserved.imageMode.init(this);
           this.cameraHandler = this.#imageModeExtension;
           this.#imageModeExtension.addEventListener("hasModifiedViewChanged", () => {
             this.emit("resetViewChanged", this);
@@ -59894,9 +59927,7 @@ class Renderer extends EventEmitter {
       extensionsById
     } = args.sceneExtensionConfig;
     for (const extensionItem of Object.values(extensionsById)) {
-      if (extensionItem.supportedInterfaceModes == undefined || extensionItem.supportedInterfaceModes.includes(interfaceMode)) {
-        this.#addSceneExtension(extensionItem.init(this));
-      }
+      if (extensionItem.supportedInterfaceModes == undefined || extensionItem.supportedInterfaceModes.includes(interfaceMode)) ;
     }
     log$1.debug(`Renderer initialized with scene extensions ${Array.from(this.sceneExtensions.keys()).join(", ")}`);
     if (interfaceMode === "image" && config.imageMode.calibrationTopic == undefined) {
@@ -59962,6 +59993,7 @@ class Renderer extends EventEmitter {
   setCurrentTime(newTimeNs) {
     this.currentTime = newTimeNs;
   }
+
   /**
    * Updates renderer state according to seek delta. Handles clearing of future state and resetting of allFrames cursor if seeked backwards
    * Should be called after `setCurrentTime` as been called
@@ -60561,8 +60593,6 @@ class Renderer extends EventEmitter {
       camera.layers.set(LAYER_SELECTED);
       this.gl.render(this.#scene, camera);
     }
-
-    // TODO - check that this isn't causing a memory leak!
     this.emit("endFrame", currentTime, this);
     this.gl.info.reset();
   };
@@ -77644,7 +77674,6 @@ function ThreeDeeRender(props) {
       displayTemporaryError,
       testOptions
     }) : undefined;
-    console.log('interface mode', merge$1({}, DEFAULT_SCENE_EXTENSION_CONFIG, customSceneExtensions ?? {}));
     setRenderer(newRenderer);
     rendererRef.current = newRenderer;
     return () => {
@@ -78023,8 +78052,8 @@ function ThreeDeeRender(props) {
   // Invoke the done callback once the render is complete
   useEffect(() => {
     renderDone?.();
-    if (currentFrameMessages?.at(0)?.publishTime?.nsec && props.frameRenderedEvent) {
-      props.frameRenderedEvent(currentFrameMessages.at(0).publishTime.nsec);
+    if (props.frameRenderedEvent) {
+      props.frameRenderedEvent(0);
     }
   }, [renderDone]);
 

package/dist/{index-DfgdvKhl.js → index-BTNGGXoa.js}

@@ -1,4 +1,4 @@
-import { aq as styleTags, ar as tags, as as LRLanguage, at as LanguageSupport, av as LRParser, aD as LocalTokenGroup, aK as html, aL as parseMixed, aN as javascriptLanguage } from './index-DFlpZwK1.js';
+import { aq as styleTags, ar as tags, as as LRLanguage, at as LanguageSupport, av as LRParser, aD as LocalTokenGroup, aK as html, aL as parseMixed, aN as javascriptLanguage } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-CbS2HMyR.js → index-BwoyZPjj.js}

@@ -1,4 +1,4 @@
-import { au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-DFlpZwK1.js';
+import { au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-DSIL_c41.js → index-C1eH0RCy.js}

@@ -1,4 +1,4 @@
-import { aC as ContextTracker, au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ap as foldNodeProp, aM as bracketMatchingHandle, at as LanguageSupport, aI as EditorView, ay as syntaxTree, aJ as EditorSelection } from './index-DFlpZwK1.js';
+import { aC as ContextTracker, au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ap as foldNodeProp, aM as bracketMatchingHandle, at as LanguageSupport, aI as EditorView, ay as syntaxTree, aJ as EditorSelection } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-PmNaQtc7.js → index-CIfIw1LQ.js}

@@ -1,4 +1,4 @@
-import { aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-DFlpZwK1.js';
+import { aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-nJgMRJTy.js → index-Cq7so9Q9.js}

@@ -1,4 +1,4 @@
-import { an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aq as styleTags, ar as tags, as as LRLanguage, at as LanguageSupport, au as ExternalTokenizer, av as LRParser, aw as ifNotIn, ax as completeFromList, ay as syntaxTree } from './index-DFlpZwK1.js';
+import { an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aq as styleTags, ar as tags, as as LRLanguage, at as LanguageSupport, au as ExternalTokenizer, av as LRParser, aw as ifNotIn, ax as completeFromList, ay as syntaxTree } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-CtKYoeeM.js → index-D7jNrXVP.js}

@@ -1,4 +1,4 @@
-import { aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-DFlpZwK1.js';
+import { aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-DFlpZwK1.js → index-D8jKQuGu.js}

@@ -90568,7 +90568,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-nJgMRJTy.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-Cq7so9Q9.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -90579,7 +90579,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-DyoCH5GH.js').then(m => m.cpp());
+            return import('./index-DI5QHg2x.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90587,7 +90587,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-DyoCH5GH.js').then(m => m.cpp());
+            return import('./index-DI5QHg2x.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90607,7 +90607,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-fN8Tpgww.js').then(m => m.go());
+            return import('./index-DM9oCkXH.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90622,7 +90622,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-PmNaQtc7.js').then(m => m.java());
+            return import('./index-CIfIw1LQ.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90638,7 +90638,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-CtKYoeeM.js').then(m => m.json());
+            return import('./index-D7jNrXVP.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90652,14 +90652,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-Do7UsSft.js').then(m => m.less());
+            return import('./index-d8vRrHr4.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-BbAm1fKU.js').then(m => m.liquid());
+            return import('./index-DCh-Eobo.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90685,7 +90685,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-CpLzYoX8.js').then(m => m.php());
+            return import('./index-BJofTpil.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90702,28 +90702,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-BK0O58zw.js').then(m => m.python());
+            return import('./index-Zivk6fee.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-CbS2HMyR.js').then(m => m.rust());
+            return import('./index-BwoyZPjj.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-DTZuXJ1A.js').then(m => m.sass({ indented: true }));
+            return import('./index-Di_-JfGf.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-DTZuXJ1A.js').then(m => m.sass());
+            return import('./index-Di_-JfGf.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90754,7 +90754,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-4msm-wtA.js').then(m => m.wast());
+            return import('./index-BHzFgL5N.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90762,7 +90762,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-DSIL_c41.js').then(m => m.xml());
+            return import('./index-C1eH0RCy.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90770,7 +90770,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-DFdQY59I.js').then(m => m.yaml());
+            return import('./index-DY6zQP_F.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -91566,13 +91566,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-DfgdvKhl.js').then(m => m.vue());
+            return import('./index-BTNGGXoa.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-BsQeBBzM.js').then(m => m.angular());
+            return import('./index-D9d5kqGf.js').then(m => m.angular());
         }
     })
 ];
@@ -162499,13 +162499,13 @@ const PanelToolbar = ({
     align: "start",
     justify: "start"
   }, /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Camera: ${targetFps ? `${targetFps} FPS` : "-"}`
+  }), /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Network: ${metrics?.incomingMessagesFps ? `${metrics.incomingMessagesFps} FPS` : "-"}`
   }), /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Decoding: ${metrics?.decodedMessagesFps ? `${metrics.decodedMessagesFps} FPS` : "-"}`
   }), /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Rendering: ${renderedFps ? `${Math.round(renderedFps / 2)} FPS` : "-"}`
-  }), /*#__PURE__*/React__default.createElement(Label$3, {
-    text: `Camera: ${targetFps ? `${targetFps} FPS` : "-"}`
   }), /*#__PURE__*/React__default.createElement(Label$3, {
     text: `Frontend Delay: ${eventLoopDelay ? `${Math.ceil(eventLoopDelay)} ms` : "-"}`
   }))), !disableAnnotations && kind === "image" && /*#__PURE__*/React__default.createElement(DropdownMenu, {
@@ -162644,7 +162644,7 @@ function createRenderDelaySampler() {
   };
 }
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BWakrawk.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-DAXpEznJ.js'));
 const ImagePanelBody = ({
   topic,
   frameRenderedEvent
@@ -162710,7 +162710,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-CE0akFDh.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BPWE58mB.js'));
 const PointCloudPanelBody = ({
   topic
 }) => {

package/dist/{index-BsQeBBzM.js → index-D9d5kqGf.js}

@@ -1,4 +1,4 @@
-import { aq as styleTags, ar as tags, aN as javascriptLanguage, as as LRLanguage, at as LanguageSupport, av as LRParser, aK as html, aL as parseMixed, au as ExternalTokenizer } from './index-DFlpZwK1.js';
+import { aq as styleTags, ar as tags, aN as javascriptLanguage, as as LRLanguage, at as LanguageSupport, av as LRParser, aK as html, aL as parseMixed, au as ExternalTokenizer } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-BWakrawk.js → index-DAXpEznJ.js}

@@ -1,7 +1,7 @@
-import { ImagePanel } from './index-CE0akFDh.js';
+import { ImagePanel } from './index-BPWE58mB.js';
 import 'react';
 import 'react-dom';
-import './index-DFlpZwK1.js';
+import './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';
@@ -27,7 +27,7 @@ import '@mui/icons-material/ChevronRight';
 import '@mui/icons-material/MoreVert';
 import '@mui/icons-material/Cancel';
 import '@mui/icons-material/Search';
-import './decodeImage-BBqnjJjE.js';
+import './decodeImage-NYPkamnK.js';
 import '@mui/material/styles/createTypography';
 import 'color';
 import 'lodash.curry';

package/dist/{index-BbAm1fKU.js → index-DCh-Eobo.js}

@@ -1,4 +1,4 @@
-import { aI as EditorView, aJ as EditorSelection, as as LRLanguage, aq as styleTags, ar as tags, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, at as LanguageSupport, av as LRParser, ay as syntaxTree, aK as html, aL as parseMixed, au as ExternalTokenizer } from './index-DFlpZwK1.js';
+import { aI as EditorView, aJ as EditorSelection, as as LRLanguage, aq as styleTags, ar as tags, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, at as LanguageSupport, av as LRParser, ay as syntaxTree, aK as html, aL as parseMixed, au as ExternalTokenizer } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-DyoCH5GH.js → index-DI5QHg2x.js}

@@ -1,4 +1,4 @@
-import { au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-DFlpZwK1.js';
+import { au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-fN8Tpgww.js → index-DM9oCkXH.js}

@@ -1,4 +1,4 @@
-import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, aD as LocalTokenGroup, aE as snippetCompletion, ay as syntaxTree, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aw as ifNotIn, ax as completeFromList, aF as IterMode, aG as NodeWeakMap } from './index-DFlpZwK1.js';
+import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, aD as LocalTokenGroup, aE as snippetCompletion, ay as syntaxTree, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, az as flatIndent, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aw as ifNotIn, ax as completeFromList, aF as IterMode, aG as NodeWeakMap } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-DFdQY59I.js → index-DY6zQP_F.js}

@@ -1,4 +1,4 @@
-import { aC as ContextTracker, au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aL as parseMixed } from './index-DFlpZwK1.js';
+import { aC as ContextTracker, au as ExternalTokenizer, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aL as parseMixed } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-DTZuXJ1A.js → index-Di_-JfGf.js}

@@ -1,4 +1,4 @@
-import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, ap as foldNodeProp, aB as foldInside, an as indentNodeProp, ao as continuedIndent, aH as defineCSSCompletionSource, at as LanguageSupport } from './index-DFlpZwK1.js';
+import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, as as LRLanguage, ap as foldNodeProp, aB as foldInside, an as indentNodeProp, ao as continuedIndent, aH as defineCSSCompletionSource, at as LanguageSupport } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-BK0O58zw.js → index-Zivk6fee.js}

@@ -1,4 +1,4 @@
-import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, ay as syntaxTree, aw as ifNotIn, as as LRLanguage, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aF as IterMode, ax as completeFromList, aG as NodeWeakMap, aE as snippetCompletion } from './index-DFlpZwK1.js';
+import { au as ExternalTokenizer, aC as ContextTracker, aq as styleTags, ar as tags, av as LRParser, ay as syntaxTree, aw as ifNotIn, as as LRLanguage, an as indentNodeProp, aA as delimitedIndent, ap as foldNodeProp, aB as foldInside, at as LanguageSupport, aF as IterMode, ax as completeFromList, aG as NodeWeakMap, aE as snippetCompletion } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/{index-Do7UsSft.js → index-d8vRrHr4.js}

@@ -1,4 +1,4 @@
-import { aq as styleTags, ar as tags, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, aH as defineCSSCompletionSource, at as LanguageSupport, av as LRParser, au as ExternalTokenizer } from './index-DFlpZwK1.js';
+import { aq as styleTags, ar as tags, as as LRLanguage, an as indentNodeProp, ao as continuedIndent, ap as foldNodeProp, aB as foldInside, aH as defineCSSCompletionSource, at as LanguageSupport, av as LRParser, au as ExternalTokenizer } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { aR as ImagePanel, aQ as PanelLayout, aS as PointCloudPanel, aO as VisualizerConnection, aP as VisualizerContext } from './index-DFlpZwK1.js';
+export { aR as ImagePanel, aQ as PanelLayout, aS as PointCloudPanel, aO as VisualizerConnection, aP as VisualizerContext } from './index-D8jKQuGu.js';
 import './FoxgloveServer-DiLI7KZU.js';
 import 'protobufjs/minimal';
 import 'ms';

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":"AAuBA,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,sCAAsC,CAAC;AA2B9C,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;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6LpD,CAAC"}
+{"version":3,"file":"PanelToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/PanelToolbar.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,KAAK,UAAU,EAAiB,MAAM,YAAY,CAAC;AAG5D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,sCAAsC,CAAC;AA2B9C,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;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiMpD,CAAC"}

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

@@ -62,7 +62,7 @@ export const PanelToolbar = ({ topic, kind, setDetections, disableAnnotations =
         } }, detection.name)), [onToggleTopic]);
     return (_jsxs(Flex, { direction: "row", gap: "sm", align: "center", justify: "space-between", style: {
             paddingLeft: 16,
-        }, children: [_jsxs(Flex, { direction: "column", gap: "xxs", align: "start", justify: "start", paddingY: "xs", children: [_jsx(SubHeader, { text: name }), _jsxs(Flex, { direction: "row", gap: "sm", align: "start", justify: "start", children: [_jsx(Label, { text: `Network: ${metrics?.incomingMessagesFps ? `${metrics.incomingMessagesFps} FPS` : "-"}` }), _jsx(Label, { text: `Decoding: ${metrics?.decodedMessagesFps ? `${metrics.decodedMessagesFps} FPS` : "-"}` }), _jsx(Label, { text: `Rendering: ${renderedFps ? `${Math.round(renderedFps / 2)} FPS` : "-"}` }), _jsx(Label, { text: `Camera: ${targetFps ? `${targetFps} FPS` : "-"}` }), _jsx(Label, { text: `Frontend Delay: ${eventLoopDelay ? `${Math.ceil(eventLoopDelay)} ms` : "-"}` })] })] }), !disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { onOpenChange: setAnnotationsOpened, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", label: "Annotations", "aria-controls": annotationsOpened ? "basic-menu" : undefined, "aria-haspopup": "true", "aria-expanded": annotationsOpened ? "true" : undefined, icon: annotationsOpened ? ArrowUpIcon : ArrowDownIcon, disabled: detections.length === 0, style: {
+        }, children: [_jsxs(Flex, { direction: "column", gap: "xxs", align: "start", justify: "start", paddingY: "xs", children: [_jsx(SubHeader, { text: name }), _jsxs(Flex, { direction: "row", gap: "sm", align: "start", justify: "start", children: [_jsx(Label, { text: `Camera: ${targetFps ? `${targetFps} FPS` : "-"}` }), _jsx(Label, { text: `Network: ${metrics?.incomingMessagesFps ? `${metrics.incomingMessagesFps} FPS` : "-"}` }), _jsx(Label, { text: `Decoding: ${metrics?.decodedMessagesFps ? `${metrics.decodedMessagesFps} FPS` : "-"}` }), _jsx(Label, { text: `Rendering: ${renderedFps ? `${Math.round(renderedFps / 2)} FPS` : "-"}` }), _jsx(Label, { text: `Frontend Delay: ${eventLoopDelay ? `${Math.ceil(eventLoopDelay)} ms` : "-"}` })] })] }), !disableAnnotations && kind === "image" && (_jsxs(DropdownMenu, { onOpenChange: setAnnotationsOpened, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: detections.length === 0, children: _jsx(Button, { variant: "outline", label: "Annotations", "aria-controls": annotationsOpened ? "basic-menu" : undefined, "aria-haspopup": "true", "aria-expanded": annotationsOpened ? "true" : undefined, icon: annotationsOpened ? ArrowUpIcon : ArrowDownIcon, disabled: detections.length === 0, style: {
                                 borderRadius: 0,
                                 borderTopRightRadius: 8,
                                 height: "100%",