@luxonis/visualizer-protobuf 1.9.0 → 1.11.0

package/dist/{index-CNWGMhCW.js → index-bn5rOf_P.js}

@@ -1,4 +1,5 @@
-import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs, T as Type$1, P as PointsAnnotationType$2, b as Profile, p as protobufsBySchema } from './worker-utils-Jii8lIsy.js';
+import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs } from './worker-utils-C5uhht5r.js';
+import { T as Type$1, P as PointsAnnotationType$2, a as Profile, p as protobufsBySchema } from './communicator-DgLGCQSf.js';
 import * as React$1 from 'react';
 import React__default, { useContext, useRef, useLayoutEffect, createContext, useReducer, useState, useCallback, useMemo, forwardRef, createElement, Component, useEffect, Children, isValidElement, cloneElement, Fragment, useImperativeHandle, Suspense } from 'react';
 import { createStore, useStore } from 'zustand';
@@ -90,9 +91,10 @@ const PlayerCapabilities = {
 // 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 REQUEST_RESPONSE_TIMEOUT = 10_000;
-class Adapter extends EventTarget {
+class FoxgloveWebSocketAdapter extends EventTarget {
   #worker;
   #connectionClosed = false;
   binaryType = "arraybuffer";
@@ -122,7 +124,9 @@ class Adapter extends EventTarget {
     this.#worker.postMessage(message, transferable);
   }
   #handleMessageEvents() {
-    const onWorkerError = error => console.error(`WebWorker error:`, error);
+    const onWorkerError = error => {
+      console.error(`WebWorker error:`, error);
+    };
     this.#worker.addEventListener("error", onWorkerError);
     this.#worker.addEventListener("messageerror", onWorkerError);
     const onClose = () => {
@@ -175,22 +179,19 @@ class Adapter extends EventTarget {
         case 'custom':
           {
             this.dispatchEvent(new MessageEvent('custom', event.data));
+            break;
           }
       }
     });
   }
-  constructor(wsUrl, worker) {
+  constructor(data, worker) {
     super();
-    this.url = wsUrl;
-    this.#worker = worker ?? new Worker(new URL("worker-D2k1TTky.js", import.meta.url), {
-      type: "module"
-    });
+    this.url = 'wsUrl' in data ? data.wsUrl : '';
+    this.#worker = worker;
     this.#handleMessageEvents();
     this.#sendToWorker({
       type: "open",
-      data: {
-        wsUrl
-      }
+      data
     });
   }
   on = (name, listener) => {
@@ -204,7 +205,9 @@ class Adapter extends EventTarget {
       }
     }
   };
-  off = (name, listener) => this.removeEventListener(name, listener);
+  off = (name, listener) => {
+    this.removeEventListener(name, listener);
+  };
   close() {
     if (!this.#connectionClosed) {
       this.#connectionClosed = true;
@@ -215,13 +218,13 @@ class Adapter extends EventTarget {
       this.dispatchEvent(new Event("close"));
     }
   }
-  request({
+  async request({
     name,
     timeout = REQUEST_RESPONSE_TIMEOUT,
     ignoreResponse = false,
     body = {}
   }) {
-    return new Promise(resolve => {
+    return await new Promise(resolve => {
       const serviceCallId = ++this.#serviceCallId;
       const listener = ({
         data: message
@@ -229,7 +232,7 @@ class Adapter extends EventTarget {
         if (message.type !== 'service_response') {
           return;
         }
-        if (message.data && message.data.serviceCallId === serviceCallId) {
+        if (message.data.serviceCallId === serviceCallId) {
           clearTimeout(rejectionTimer);
           if (!message.data.ok) {
             console.error(`Service "${name}" response failed`, message.data.error);
@@ -261,10 +264,12 @@ class Adapter extends EventTarget {
       }
     });
   }
+
+  // @ts-expect-error TODO: WebRTC hack
   send(data) {
     this.#sendToWorker({
       type: "send",
-      data
+      data: data
     });
   }
 }
@@ -1821,6 +1826,10 @@ var require$$44 = /*@__PURE__*/getAugmentedNamespace(Vector3);
 	
 } (typescript$1));
 
+// 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 glColor = (r, g, b, a) => ({
   r: r / 255,
   g: g / 255,
@@ -1840,9 +1849,9 @@ const DEFAULT_THICKNESS = 10;
 const getTextSize = (width, height) => interpolate(width, height, DEFAULT_SIZE);
 const getBorderThickness = (width, height) => interpolate(width, height, DEFAULT_THICKNESS);
 
-// 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/
+// 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 GROUP_COLORS = {
   entity: {
@@ -10976,6 +10985,92 @@ function parseMessage(message) {
 // 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/
 
+function deserializeImgDetectionsCustom({
+  topic,
+  message,
+  callback,
+  topicSizes
+}) {
+  const {
+    receiveTime
+  } = parseMessage(message);
+  const {
+    width,
+    height
+  } = topicSizes.values().next().value ?? {
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT
+  };
+  const xMultiplier = width >= height ? 1 : height / width;
+  const yMultiplier = height >= width ? 1 : width / height;
+  for (const annotations of message.annotations) {
+    const points = [];
+    const circles = [];
+    for (const annotation of annotations.points) {
+      if (annotation.type === PointsAnnotationType$2.POINTS) {
+        circles.push(...annotation.points.map(point => ({
+          timestamp: receiveTime,
+          position: point,
+          xMultiplier,
+          yMultiplier,
+          diameter: annotation.thickness / 200,
+          thickness: annotation.thickness,
+          fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
+          outline_color: annotation.outlineColor ?? DEFAULT_STYLE.fill
+        })));
+      } else {
+        points.push({
+          timestamp: receiveTime,
+          type: annotation.type === PointsAnnotationType$2.UNRECOGNIZED ? typescript$1.PointsAnnotationType.UNKNOWN : Number(annotation.type),
+          points: annotation.points,
+          outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline,
+          outline_colors: [],
+          fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
+          thickness: annotation.thickness
+        });
+      }
+    }
+    const texts = annotations.texts.map(annotation => ({
+      timestamp: receiveTime,
+      position: annotation.position ?? {
+        x: 0,
+        y: 0
+      },
+      text: annotation.text,
+      font_size: annotation.fontSize ?? getTextSize(width, height),
+      text_color: annotation.textColor ?? DEFAULT_TEXT_COLOR,
+      background_color: annotation.backgroundColor ?? DEFAULT_BACKGROUND_COLOR
+    }));
+    circles.push(...annotations.circles.map(annotation => ({
+      timestamp: receiveTime,
+      position: annotation.position ?? {
+        x: 0,
+        y: 0
+      },
+      diameter: annotation.diameter,
+      thickness: annotation.thickness,
+      fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
+      outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline
+    })));
+    const foxgloveMessage = {
+      points,
+      texts,
+      circles
+    };
+    callback({
+      topic,
+      receiveTime,
+      message: foxgloveMessage,
+      sizeInBytes: estimateObjectSize(foxgloveMessage),
+      schemaName: "foxglove.ImageAnnotations"
+    });
+  }
+}
+
+// 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/
+
 function deserializeImgDetections({
   topic,
   message,
@@ -11141,6 +11236,73 @@ function deserializeImgDetections({
 // 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/
 
+function deserializePointCloudData({
+  topic,
+  message,
+  callback
+}) {
+  const receiveTime = fromMillis(Date.now());
+  const foxgloveMessage = {
+    timestamp: receiveTime,
+    frame_id: `pointcloud-${topic}-frame`,
+    point_stride: 12,
+    pose: {
+      position: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      orientation: {
+        x: 0,
+        y: 0,
+        z: 1,
+        w: 0
+      }
+    },
+    fields: [{
+      name: "x",
+      offset: 0,
+      type: typescript$1.NumericType.FLOAT32
+    }, {
+      name: "y",
+      offset: 4,
+      type: typescript$1.NumericType.FLOAT32
+    }, {
+      name: "z",
+      offset: 8,
+      type: typescript$1.NumericType.FLOAT32
+    }],
+    data: message.data
+  };
+  if (message.color) {
+    foxgloveMessage.fields.push({
+      name: "red",
+      offset: 12,
+      type: typescript$1.NumericType.UINT8
+    }, {
+      name: "green",
+      offset: 13,
+      type: typescript$1.NumericType.UINT8
+    }, {
+      name: "blue",
+      offset: 14,
+      type: typescript$1.NumericType.UINT8
+    });
+    foxgloveMessage.point_stride = 15;
+  }
+  callback({
+    topic,
+    receiveTime,
+    message: foxgloveMessage,
+    sizeInBytes: estimateObjectSize(foxgloveMessage),
+    schemaName: "foxglove.PointCloud"
+  });
+}
+
+// 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/
+
 function deserializeColorFrame({
   topic,
   message,
@@ -11209,6 +11371,10 @@ function deserializeDepthFrame({
   });
 }
 
+// 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/
+
 function ensureWebCodecsSupported(target) {
   const supported = typeof target !== "undefined";
   if (!supported) {
@@ -11357,124 +11523,6 @@ async function deserializeMJPEGFrame({
 // 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/
 
-function deserializePointCloudData({
-  topic,
-  message,
-  callback
-}) {
-  const receiveTime = fromMillis(Date.now());
-  const foxgloveMessage = {
-    timestamp: receiveTime,
-    frame_id: `pointcloud-${topic}-frame`,
-    point_stride: 12,
-    pose: {
-      position: {
-        x: 0,
-        y: 0,
-        z: 0
-      },
-      orientation: {
-        x: 0,
-        y: 0,
-        z: 1,
-        w: 0
-      }
-    },
-    fields: [{
-      name: "x",
-      offset: 0,
-      type: typescript$1.NumericType.FLOAT32
-    }, {
-      name: "y",
-      offset: 4,
-      type: typescript$1.NumericType.FLOAT32
-    }, {
-      name: "z",
-      offset: 8,
-      type: typescript$1.NumericType.FLOAT32
-    }],
-    data: message.data
-  };
-  callback({
-    topic,
-    receiveTime,
-    message: foxgloveMessage,
-    sizeInBytes: estimateObjectSize(foxgloveMessage),
-    schemaName: "foxglove.PointCloud"
-  });
-}
-
-// 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/
-
-function deserializeImgDetectionsCustom({
-  topic,
-  message,
-  callback,
-  topicSizes
-}) {
-  const {
-    receiveTime
-  } = parseMessage(message);
-  const {
-    width,
-    height
-  } = topicSizes.values().next().value ?? {
-    width: DEFAULT_WIDTH,
-    height: DEFAULT_HEIGHT
-  };
-  for (const annotation of message.annotations) {
-    const points = annotation.points.map(annotation => ({
-      timestamp: receiveTime,
-      type: annotation.type === PointsAnnotationType$2.UNRECOGNIZED ? typescript$1.PointsAnnotationType.UNKNOWN : Number(annotation.type),
-      points: annotation.points,
-      outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline,
-      outline_colors: [],
-      fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
-      thickness: annotation.thickness
-    }));
-    const texts = annotation.texts.map(annotation => ({
-      timestamp: receiveTime,
-      position: annotation.position ?? {
-        x: 0,
-        y: 0
-      },
-      text: annotation.text,
-      font_size: annotation.fontSize ?? getTextSize(width, height),
-      text_color: annotation.textColor ?? DEFAULT_TEXT_COLOR,
-      background_color: annotation.backgroundColor ?? DEFAULT_BACKGROUND_COLOR
-    }));
-    const circles = annotation.circles.map(annotation => ({
-      timestamp: receiveTime,
-      position: annotation.position ?? {
-        x: 0,
-        y: 0
-      },
-      diameter: annotation.diameter,
-      thickness: annotation.thickness,
-      fill_color: annotation.fillColor ?? DEFAULT_STYLE.fill,
-      outline_color: annotation.outlineColor ?? DEFAULT_STYLE.outline
-    }));
-    const foxgloveMessage = {
-      points,
-      texts,
-      circles
-    };
-    callback({
-      topic,
-      receiveTime,
-      message: foxgloveMessage,
-      sizeInBytes: estimateObjectSize(foxgloveMessage),
-      schemaName: "foxglove.ImageAnnotations"
-    });
-  }
-}
-
-// 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/
-
 async function deserializeDepthAiMessage(args) {
   const {
     topicDecoders,
@@ -11632,6 +11680,10 @@ function createMessageHandler(callback) {
   };
 }
 
+// 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 MetricsManager {
   metrics = {};
   registerEvent(topic) {
@@ -11771,35 +11823,64 @@ class FoxgloveConnection {
     await this.listener(newPlayerState);
   });
 }
-class BaseConnection extends FoxgloveConnection {}
 
 // 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 WebSocketConnection extends BaseConnection {
-  #url;
+class VisualizerConnection extends FoxgloveConnection {
+  #url = null;
+  #config = null;
   #adapter;
-  constructor(url, worker) {
-    super(url);
-    this.#url = url;
-    this.#open(worker);
-  }
-  on = (...args) => this.#adapter?.on(...args);
-  off = (...args) => this.#adapter?.off(...args);
-  request = async (...args) => (await this.#adapter?.request(...args)) ?? null;
-  close = () => this.#adapter?.close();
+  constructor({
+    type,
+    data,
+    worker
+  }) {
+    super(type === 'ws' ? data.connectionUrl : data.config.clientId);
+    let finalWorker = worker;
+    if (type === 'ws') {
+      this.#url = data.connectionUrl;
+      finalWorker ??= new Worker(new URL("worker-Cu4hHmBC.js", import.meta.url), {
+        type: "module"
+      });
+    } else {
+      this.#config = data.config;
+      finalWorker ??= new Worker(new URL("worker-Bm-XMTrA.js", import.meta.url), {
+        type: "module"
+      });
+    }
+    this.#open(finalWorker);
+  }
+  close() {
+    this.#adapter?.close();
+  }
+  on(name, listener) {
+    this.#adapter?.on(name, listener);
+  }
+  off(name, listener) {
+    this.#adapter?.off(name, listener);
+  }
+  async request(args) {
+    const response = await this.#adapter?.request(args);
+    return response ?? null;
+  }
+
+  // eslint-disable-next-line no-restricted-syntax
   get connected() {
     return Boolean(this.#adapter?.readyState === WebSocket.OPEN);
   }
   #open = worker => {
-    this.#adapter = new Adapter(this.#url, worker);
+    this.#adapter = new FoxgloveWebSocketAdapter({
+      wsUrl: this.#url,
+      config: this.#config
+    }, worker);
     this.#adapter.addEventListener("open", this.#onOpen.bind(this));
     this.#adapter.addEventListener("message", event => {
       this.onMessagePacket.bind(this)(event);
     });
     this.#adapter.addEventListener("close", this.#onClose.bind(this));
-    this.#adapter.onerror = this.#onError.bind(this);
+    this.#adapter.addEventListener("error", this.#onClose.bind(this));
   };
   #onOpen = () => {
     this.playerPresence = PlayerPresence.PRESENT;
@@ -19184,6 +19265,10 @@ function WorkspaceContextProvider(props) {
   }, children);
 }
 
+// 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 Context$2 = React__default.createContext([]);
 const ConnectionsProvider = Context$2.Provider;
 const useConnections = () => React__default.useContext(Context$2);
@@ -82983,7 +83068,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-Dn-E1-20.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-tlh8GrAK.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -82994,7 +83079,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-Bay9MnxH.js').then(m => m.cpp());
+            return import('./index-DbK2elHW.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83002,7 +83087,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-Bay9MnxH.js').then(m => m.cpp());
+            return import('./index-DbK2elHW.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83022,7 +83107,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-B8FQDMoh.js').then(m => m.go());
+            return import('./index-BrQv_AiM.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83037,7 +83122,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-BvNZUlo_.js').then(m => m.java());
+            return import('./index-B87UUXCH.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83053,7 +83138,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-otpYhpPx.js').then(m => m.json());
+            return import('./index-CGeW-0k7.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83067,14 +83152,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-GbwWdY6w.js').then(m => m.less());
+            return import('./index-DTdRI7_c.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-2SFix7KY.js').then(m => m.liquid());
+            return import('./index-B2MkEOI4.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83100,7 +83185,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-ChQWCJEj.js').then(m => m.php());
+            return import('./index-C3ZNlxlw.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83117,28 +83202,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-B8t-Gi4x.js').then(m => m.python());
+            return import('./index-WsLy6WgG.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-DSLjhjen.js').then(m => m.rust());
+            return import('./index-BdouEs9u.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-txFQeh8N.js').then(m => m.sass({ indented: true }));
+            return import('./index-DRTtwocb.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-txFQeh8N.js').then(m => m.sass());
+            return import('./index-DRTtwocb.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83169,7 +83254,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-Bk6p8-al.js').then(m => m.wast());
+            return import('./index-aNtIoK9f.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83177,7 +83262,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-B8Cado6g.js').then(m => m.xml());
+            return import('./index-CNUN2zja.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -83185,7 +83270,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-BkQgkjmO.js').then(m => m.yaml());
+            return import('./index-DdoU22pT.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -83981,13 +84066,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-DKfQ_S8i.js').then(m => m.vue());
+            return import('./index-BjH4XfIl.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-7n6fnp2B.js').then(m => m.angular());
+            return import('./index-dWg1V1OC.js').then(m => m.angular());
         }
     })
 ];
@@ -154056,7 +154141,9 @@ const PanelToolbar = ({
     const interval = setInterval(() => {
       setMetrics(connections[0]?.getTopicMetrics(topic));
     }, 500);
-    return () => clearInterval(interval);
+    return () => {
+      clearInterval(interval);
+    };
   }, []);
   const [annotationsOpened, setAnnotationsOpened] = React__default.useState(false);
   const hasExtra = React__default.useMemo(() => detections.some(topic => topic.extra && !topic.enabled), [detections]);
@@ -154104,13 +154191,17 @@ const PanelToolbar = ({
   })), /*#__PURE__*/React__default.createElement(DropdownMenuContent, null, detections.map(topic => (!topic.extra || topic.enabled) && /*#__PURE__*/React__default.createElement(PanelAnnotationButton, {
     key: topic.name,
     topic: topic,
-    onClick: () => onToggleTopic(topic.name)
+    onClick: () => {
+      onToggleTopic(topic.name);
+    }
   })), hasExtra && /*#__PURE__*/React__default.createElement(Button, {
     width: "full",
     paddingY: "xs",
     variant: "ghost",
     "aria-expanded": extraVisible ? "true" : undefined,
-    onClick: () => setExtraVisible(current => !current),
+    onClick: () => {
+      setExtraVisible(current => !current);
+    },
     icon: extraVisible ? MdKeyboardArrowUp : MdKeyboardArrowDown,
     style: {
       borderRadius: 4
@@ -154118,7 +154209,9 @@ const PanelToolbar = ({
   }, extraVisible ? "Less" : "More"), extraVisible && detections.map(topic => topic.extra && !topic.enabled && /*#__PURE__*/React__default.createElement(PanelAnnotationButton, {
     key: topic.name,
     topic: topic,
-    onClick: () => onToggleTopic(topic.name)
+    onClick: () => {
+      onToggleTopic(topic.name);
+    }
   })))), kind === 'pointCloud' && /*#__PURE__*/React__default.createElement(Tooltip, {
     content: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Label$3, {
       text: "To move camera:"
@@ -154144,12 +154237,12 @@ const DetectionContext = React__default.createContext({
 const useDetections = () => {
   return React__default.useContext(DetectionContext);
 };
-const rawToAnnotations = (rawAnnotations, extra, current) => rawAnnotations.map(annotationTopic => ({
+const rawToAnnotations = (rawAnnotations, kind, current) => rawAnnotations.map(annotationTopic => ({
   name: annotationTopic,
-  extra,
+  extra: kind === 'extra',
   enabled: current.find(({
     name
-  }) => name === annotationTopic)?.enabled ?? !extra
+  }) => name === annotationTopic)?.enabled ?? kind === 'main'
 }));
 const Panel = ({
   children,
@@ -154162,8 +154255,9 @@ const Panel = ({
   const [detections, setDetections] = React__default.useState([]);
   React__default.useEffect(() => {
     if (!disableAnnotations) {
-      setDetections(current => [...rawToAnnotations(annotationTopics, false, current), ...rawToAnnotations(extraAnnotationTopics, true, 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 /*#__PURE__*/React__default.createElement(RemountOnValueChange, {
     value: "internal-player"
@@ -154190,7 +154284,7 @@ const Panel = ({
   }, children))))));
 };
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-Cp3omW6p.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-D2coYWoA.js'));
 const ImagePanelBody = ({
   topic
 }) => {
@@ -154225,7 +154319,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-BEcWpcB1.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-YeBvcQ1n.js'));
 const PointCloudPanelBody = ({
   topic
 }) => {
@@ -154268,4 +154362,4 @@ const PointCloudPanel = /*#__PURE__*/React__default.memo(function PointCloudPane
   }));
 });
 
-export { TAB_PANEL_TYPE as $, AnalyticsContext as A, useGuaranteedContext as B, useAnalytics as C, AppEvent as D, ErrorDisplay as E, LeftSidebarItemKeys as F, usePanelMosaicId as G, useTranslation as H, usePanelCatalog as I, EmptyState as J, isEmpty as K, Logger$1 as L, PanelContext as M, PanelCatalogContext as N, useSelectedPanels as O, PropTypes as P, usePanelStateStore as Q, RightSidebarItemKeys as R, Stack$1 as S, useDefaultPanelTitle as T, PANEL_TITLE_CONFIG_KEY as U, noop as V, WorkspaceContext as W, getPanelTypeFromId as X, useWorkspaceStore as Y, useShallowMemo as Z, _extends$5 as _, arrayPush as a, WorkspaceStoreSelectors as a0, difference as a1, filterMap as a2, dist$1 as a3, usePanelContext as a4, useMessagePipeline as a5, v4 as a6, useHoverValue as a7, useSetHoverValue as a8, useClearHoverValue as a9, delimitedIndent as aA, foldInside as aB, ContextTracker as aC, LocalTokenGroup as aD, snippetCompletion as aE, IterMode as aF, NodeWeakMap as aG, defineCSSCompletionSource as aH, EditorView as aI, EditorSelection as aJ, html$4 as aK, parseMixed as aL, bracketMatchingHandle as aM, javascriptLanguage as aN, WebSocketConnection as aO, VisualizerContext as aP, PanelLayout as aQ, ImagePanel as aR, PointCloudPanel as aS, useAppConfiguration as aa, useMessagePipelineGetter as ab, usePanelSettingsTreeUpdate as ac, PlayerCapabilities as ad, useValueChangedDebugLog as ae, assertNever as af, PlayerPresence as ag, typescript$1 as ah, isEqual as ai, isDesktopApp as aj, createTheme$1 as ak, propTypesExports as al, useJsonTreeTheme as am, indentNodeProp as an, continuedIndent as ao, foldNodeProp as ap, styleTags as aq, tags$1 as ar, LRLanguage as as, LanguageSupport as at, ExternalTokenizer as au, LRParser as av, ifNotIn as aw, completeFromList as ax, syntaxTree as ay, flatIndent as az, baseGetAllKeys as b, getTag as c, getAllKeys as d, createAggregator as e, baseGet as f, getSymbols as g, baseIteratee as h, isSymbol as i, castPath as j, keys$4 as k, toKey as l, flatRest as m, arrayMap as n, baseSet as o, baseUniq as p, baseFlatten as q, generateUtilityClass as r, stubArray as s, toString$5 as t, useMustNotChange as u, useCurrentLayoutActions as v, useCurrentLayoutSelector as w, reportError as x, AppError as y, makeStyles as z };
+export { TAB_PANEL_TYPE as $, AnalyticsContext as A, useGuaranteedContext as B, useAnalytics as C, AppEvent as D, ErrorDisplay as E, LeftSidebarItemKeys as F, usePanelMosaicId as G, useTranslation as H, usePanelCatalog as I, EmptyState as J, isEmpty as K, Logger$1 as L, PanelContext as M, PanelCatalogContext as N, useSelectedPanels as O, PropTypes as P, usePanelStateStore as Q, RightSidebarItemKeys as R, Stack$1 as S, useDefaultPanelTitle as T, PANEL_TITLE_CONFIG_KEY as U, noop as V, WorkspaceContext as W, getPanelTypeFromId as X, useWorkspaceStore as Y, useShallowMemo as Z, _extends$5 as _, arrayPush as a, WorkspaceStoreSelectors as a0, difference as a1, filterMap as a2, dist$1 as a3, usePanelContext as a4, useMessagePipeline as a5, v4 as a6, useHoverValue as a7, useSetHoverValue as a8, useClearHoverValue as a9, delimitedIndent as aA, foldInside as aB, ContextTracker as aC, LocalTokenGroup as aD, snippetCompletion as aE, IterMode as aF, NodeWeakMap as aG, defineCSSCompletionSource as aH, EditorView as aI, EditorSelection as aJ, html$4 as aK, parseMixed as aL, bracketMatchingHandle as aM, javascriptLanguage as aN, VisualizerConnection as aO, VisualizerContext as aP, PanelLayout as aQ, ImagePanel as aR, PointCloudPanel as aS, useAppConfiguration as aa, useMessagePipelineGetter as ab, usePanelSettingsTreeUpdate as ac, PlayerCapabilities as ad, useValueChangedDebugLog as ae, assertNever as af, PlayerPresence as ag, typescript$1 as ah, isEqual as ai, isDesktopApp as aj, createTheme$1 as ak, propTypesExports as al, useJsonTreeTheme as am, indentNodeProp as an, continuedIndent as ao, foldNodeProp as ap, styleTags as aq, tags$1 as ar, LRLanguage as as, LanguageSupport as at, ExternalTokenizer as au, LRParser as av, ifNotIn as aw, completeFromList as ax, syntaxTree as ay, flatIndent as az, baseGetAllKeys as b, getTag as c, getAllKeys as d, createAggregator as e, baseGet as f, getSymbols as g, baseIteratee as h, isSymbol as i, castPath as j, keys$4 as k, toKey as l, flatRest as m, arrayMap as n, baseSet as o, baseUniq as p, baseFlatten as q, generateUtilityClass as r, stubArray as s, toString$5 as t, useMustNotChange as u, useCurrentLayoutActions as v, useCurrentLayoutSelector as w, reportError as x, AppError as y, makeStyles as z };