@luxonis/visualizer-protobuf 2.1.1 → 2.3.0

package/dist/{index-CKhCc5vm.js → index-Dx5rKk7S.js}

@@ -1,11 +1,11 @@
-import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs } from './worker-utils-BNThsbdN.js';
-import { T as Type$1, P as PointsAnnotationType$2, a as Profile, p as protobufsBySchema } from './communicator-ZAqNuwq6.js';
+import { c as commonjsGlobal, g as getAugmentedNamespace, a as getDefaultExportFromCjs, T as Type$1, P as PointsAnnotationType$2, b as Profile, p as protobufsBySchema, B as BinaryOpcode } from './FoxgloveServer-tJZcJH5-.js';
 import * as React$1 from 'react';
 import React__default, { useContext, useRef, useLayoutEffect, createContext, useReducer, useState, useCallback, useMemo, forwardRef, createElement, Component, useEffect, useImperativeHandle, Fragment as Fragment$1, Suspense } from 'react';
 import { createStore, useStore } from 'zustand';
 import { isParent as isParent$1, getLeaves, createRemoveUpdate, updateTree, getNodeAtPath, createHideUpdate, createDragToUpdates, MosaicContext, MosaicWindowContext } from 'react-mosaic-component';
 import { useTheme as useTheme$3, alpha, Typography, Divider, Link, Button as Button$1, GlobalStyles, Dialog as Dialog$2, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions, Stack as Stack$3 } from '@mui/material';
 import { i as isObjectLike, b as baseGetTag, S as Symbol$1, a as isArray, g as getNative, r as root$6, o as overArg, c as isPrototype, d as isArrayLike, e as arrayLikeKeys, M as MapCache, f as isArguments, s as setToString, h as overRest, t as toSource, j as Map$1, k as eq, U as Uint8Array$2, l as isBuffer, m as Stack$2, n as isTypedArray, p as isObject$2, q as isLength, u as isIndex, v as identity$1, w as baseFor, x as baseRest, y as isArrayLikeObject, z as baseAssignValue, A as assignValue, B as tinycolor, C as merge$2, D as instance } from './i18next-C5Qe4-E1.js';
+import { p as parseFoxgloveMessage } from './foxglove-protocol-RBwoTi12.js';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ThemeContext, __unsafe_useEmotionCache } from '@emotion/react';
@@ -177,11 +177,15 @@ class FoxgloveWebSocketAdapter extends EventTarget {
             this.dispatchEvent(new MessageEvent("services", event.data));
             break;
           }
-        case 'custom':
+        case "service_response":
           {
-            this.dispatchEvent(new MessageEvent('custom', event.data));
+            // Each service request has its own response listener
             break;
           }
+        default:
+          {
+            console.warn(`Foxglove Ws Adapter: Worker sent unexpected message`, event.data);
+          }
       }
     });
   }
@@ -219,6 +223,22 @@ class FoxgloveWebSocketAdapter extends EventTarget {
       this.dispatchEvent(new Event("close"));
     }
   }
+  subscribe({
+    topics
+  }) {
+    this.#sendToWorker({
+      type: 'subscribe',
+      data: topics
+    });
+  }
+  unsubscribe({
+    topics
+  }) {
+    this.#sendToWorker({
+      type: 'unsubscribe',
+      data: topics
+    });
+  }
   async request({
     name,
     timeout = REQUEST_RESPONSE_TIMEOUT,
@@ -265,13 +285,9 @@ class FoxgloveWebSocketAdapter extends EventTarget {
       }
     });
   }
-
-  // @ts-expect-error TODO: WebRTC hack
   send(data) {
-    this.#sendToWorker({
-      type: "send",
-      data: data
-    });
+    console.error('Foxglove Ws Aparter Error: raw send was requested', data);
+    // this.#sendToWorker({ type: "send", data: data as any });
   }
 }
 
@@ -10940,7 +10956,7 @@ function parseMessageType(type) {
     case Type$1.NV12:
       return ["nv12", 1];
     case Type$1.RGB888i:
-      return ["rgb8", 1];
+      return ["rgb8", 3];
     case Type$1.RGB888p:
       return ["rgb8p", 1];
     case Type$1.RGBA8888:
@@ -10963,7 +10979,7 @@ function parseMessage(message) {
   const stride = message.fb?.stride ?? message.sourceFb?.stride ?? null;
   const p2Offset = message.fb?.p2Offset ?? message.sourceFb?.p2Offset ?? null;
   const p1Offset = message.fb?.p1Offset ?? message.sourceFb?.p1Offset ?? null;
-  let planeStride = p1Offset !== null && p2Offset !== null ? p2Offset - p1Offset : 0;
+  let planeStride = p1Offset != null && p2Offset != null ? p2Offset - p1Offset : 0;
   if (planeStride <= 0) {
     planeStride = null;
   }
@@ -11541,14 +11557,14 @@ async function deserializeDepthAiMessage(args) {
           height: message.height
         });
         if (message.profile === Profile.AVC) {
-          deserializeEncodedFrameH264({
+          await deserializeEncodedFrameH264({
             topic,
             message,
             topicDecoders,
             callback
           });
         } else if (message.profile === Profile.JPEG) {
-          deserializeMJPEGFrame({
+          await deserializeMJPEGFrame({
             topic,
             message,
             callback
@@ -11561,16 +11577,16 @@ async function deserializeDepthAiMessage(args) {
         const {
           width,
           height,
-          type
+          type: messageType
         } = parseMessage(message);
         topicSizes.set(topic, {
           width,
           height
         });
-        switch (type) {
+        switch (messageType) {
           case Type$1.BITSTREAM:
             {
-              deserializeEncodedFrameH264({
+              await deserializeEncodedFrameH264({
                 topic,
                 message,
                 topicDecoders,
@@ -11689,6 +11705,7 @@ class MetricsManager {
   metrics = {};
   registerEvent(topic) {
     const currentTime = performance.now();
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     this.metrics[topic] ??= [];
     this.metrics[topic].unshift(currentTime);
     this.metrics[topic].length = 100;
@@ -11883,44 +11900,49 @@ class WebRtcDataChannel {
     constructor(channel, withFragmentation = false) {
         this.channel = channel;
         this.withFragmentation = withFragmentation;
-        this.channel.onerror = event => this.events.emit('error', [event]);
-        this.channel.onmessage = async (event) => {
+        this.channel.addEventListener('error', event => this.events.emit('error', [event]));
+        this.channel.addEventListener('message', async (event) => {
+            if (channel.label === 'ping-pong') {
+                this.sendMessage('pong');
+            }
             if (!this.withFragmentation) {
                 this.events.emit('message', [event]);
                 return;
             }
-            const arrayBuffer = await event.data.arrayBuffer();
-            const view = new DataView(arrayBuffer);
-            const totalChunks = view.getInt32(0);
-            const chunkIndex = view.getInt32(4);
-            const data = new Uint8Array(arrayBuffer, 8);
+            const buffer = event.data instanceof ArrayBuffer ? event.data : await event.data.arrayBuffer();
+            const view = new DataView(buffer);
+            const totalChunks = view.getUint32(0);
+            const chunkIndex = view.getUint32(4);
+            const data = new Uint8Array(buffer, 8).slice(0);
             if (totalChunks !== 1) {
                 this.appendChunk(data);
                 if (totalChunks - 1 !== chunkIndex) {
                     return;
                 }
             }
-            const completeData = totalChunks === 1 ? data : new Uint8Array(this.buffer);
+            const completeData = totalChunks === 1 ? data : this.buffer;
+            this.events.emit('message', [
+                new MessageEvent('message', {
+                    data: completeData.buffer,
+                }),
+            ]);
             if (totalChunks !== 1) {
                 this.buffer = new Uint8Array(0);
             }
-            this.events.emit('message', [new MessageEvent('message', {
-                    data: new Blob([completeData], { type: 'application/octet-stream' })
-                })]);
-        };
-        this.channel.onclose = event => this.events.emit('close', [event]);
-        this.channel.onopen = event => {
+        });
+        this.channel.addEventListener('close', event => this.events.emit('close', [event]));
+        this.channel.addEventListener('open', event => {
             this.events.emit('open', [event]);
             for (const message of this.oldMessages) {
                 this.sendMessage(message);
             }
             this.oldMessages = [];
-        };
+        });
     }
     appendChunk(bytes) {
-        const newBuffer = new Uint8Array(this.buffer.length + bytes.length);
+        const newBuffer = new Uint8Array(this.buffer.byteLength + bytes.byteLength);
         newBuffer.set(this.buffer, 0);
-        newBuffer.set(bytes, this.buffer.length);
+        newBuffer.set(bytes, this.buffer.byteLength);
         this.buffer = newBuffer;
     }
     get raw() {
@@ -11931,7 +11953,7 @@ class WebRtcDataChannel {
     }
     sendMessage(message) {
         if (this.channel.readyState === 'open') {
-            const chunks = (message instanceof DataView && this.withFragmentation) ? makeChunks(message) : [message];
+            const chunks = message instanceof DataView && this.withFragmentation ? makeChunks(message) : [message];
             for (const chunk of chunks) {
                 this.channel.send(chunk);
             }
@@ -11948,20 +11970,20 @@ class WebRtcDataChannel {
      */
     onTextMessage(callback) {
         return this.events.on('message', async (event) => {
-            const buffer = await event.data.arrayBuffer();
+            const buffer = event.data instanceof ArrayBuffer ? event.data : await event.data.arrayBuffer();
             const message = new TextDecoder('utf-8').decode(buffer);
             callback(message);
         });
     }
     on(event, callback) {
+        const specificMessageEvents = ['message:binary', 'message:string', 'message:json'];
+        if (!specificMessageEvents.includes(event)) {
+            return this.events.on(event, callback);
+        }
         return this.events.on('message', async (rawEvent) => {
-            if (!['message:binary', 'message:string', 'message:json'].includes(event)) {
-                callback(rawEvent);
-                return;
-            }
-            const buffer = await rawEvent.data.arrayBuffer();
-            const view = new DataView(buffer);
+            const buffer = rawEvent.data instanceof ArrayBuffer ? rawEvent.data : await rawEvent.data.arrayBuffer();
             if (event === 'message:binary') {
+                const view = new DataView(buffer);
                 callback(view);
             }
             else {
@@ -11984,11 +12006,11 @@ class WebRtcConnection {
     events = new EventEmitter();
     onIceCandidate;
     onConnectionEstablished;
-    constructor(props) {
-        this.iceServers = props.iceServers;
-        this.onIceCandidate = props.onCandidate;
-        this.onConnectionEstablished = props.onConnectionEstablished;
-        this.#peerConnection = this.createPeerConnection();
+    constructor(args) {
+        this.iceServers = args.iceServers;
+        this.onIceCandidate = args.onCandidate;
+        this.onConnectionEstablished = args.onConnectionEstablished;
+        this.#peerConnection = this.createPeerConnection(args.withFragmentation);
     }
     createPeerConnection(withFragmentation = false) {
         const config = {
@@ -12018,13 +12040,10 @@ class WebRtcConnection {
                 this.onIceCandidate(event.candidate);
             }
         };
-        connection.ondatachannel = event => {
-            const channel = new WebRtcDataChannel(event.channel, withFragmentation);
-            if (channel.label === 'ping-pong') {
-                channel.on('message', () => channel.sendMessage('pong'));
-            }
+        connection.addEventListener('datachannel', event => {
+            const channel = new WebRtcDataChannel(event.channel, event.channel.label !== 'ping-pong' && withFragmentation);
             this.events.emit('data_channel', [channel]);
-        };
+        });
         return connection;
     }
     get peerConnection() {
@@ -12160,9 +12179,9 @@ class WebRtcClient {
                 // console.debug('[WebRTC] Offer accepted. Setting remote description..');
                 await this.connection.setRemoteDescription(kind, candidate);
                 // console.debug('[WebRTC] Set remote description');
-                for (const candidate of this.iceCandidates) {
+                for (const iceCandidate of this.iceCandidates) {
                     // console.debug('[WebRTC] Adding stored ICE candidate');
-                    this.connection.addIceCandidate(JSON.parse(candidate));
+                    void this.connection.addIceCandidate(JSON.parse(iceCandidate));
                 }
                 this.iceCandidates = [];
                 if (kind === 'offer') {
@@ -12212,6 +12231,7 @@ class WebRtcClient {
                 });
             },
             onConnectionEstablished: () => this.disconnectSignalingServer('P2P connection established'),
+            withFragmentation: this.config.withFragmentation,
         });
         this.events.emit('connection_established', [this.connection]);
     }
@@ -12227,19 +12247,37 @@ class WebRtcClient {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 class ArtificialWorker extends EventTarget {
+  #selfTarget = new EventTarget();
+
+  // Post message from main to worker
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   postMessage(data, _transferable) {
     const event = new MessageEvent('message', {
       data
     });
-    super.dispatchEvent(event);
+    this.#selfTarget.dispatchEvent(event);
   }
 
+  // Listen for worker-to-main messages
   // @ts-expect-error Make it typed
   addEventListener(type, callback) {
     super.addEventListener(type, callback);
   }
-  terminate() {}
+
+  // Post message from worker to main
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  postMessageToMain(data, _transferable) {
+    const event = new MessageEvent('message', {
+      data
+    });
+    super.dispatchEvent(event);
+  }
+
+  // Listen for main-to-worker messages
+  // @ts-expect-error Make it typed
+  addEventListenerFromMain(type, callback) {
+    this.#selfTarget.addEventListener(type, callback);
+  }
 }
 
 // This Source Code Form is subject to the terms of the Mozilla Public
@@ -12255,7 +12293,7 @@ class WebRtcBridge extends ArtificialWorker {
   #systemChannel = null;
   constructor() {
     super();
-    this.#worker = new Worker(new URL("worker-ByVSTHSI.js", import.meta.url), {
+    this.#worker = new Worker(new URL("worker-BX0SIDt0.js", import.meta.url), {
       type: "module"
     });
     this.#setupArtificialWorker();
@@ -12264,15 +12302,47 @@ class WebRtcBridge extends ArtificialWorker {
     this.#worker.terminate();
   }
   #setupArtificialWorker() {
-    this.addEventListener('message', event => {
+    this.addEventListenerFromMain("message", event => {
       switch (event.data.type) {
-        case 'open':
+        case "open":
           {
-            if ('config' in event.data.data) {
-              this.#createWebRtc(event.data.data.config);
+            if ("config" in event.data.data) {
+              this.#createWebRtc({
+                withFragmentation: true,
+                ...event.data.data.config
+              });
             }
             break;
           }
+        case "close":
+          {
+            this.#webrtc?.dispose("Client requested connection close");
+            this.terminate();
+            break;
+          }
+        case "call_service":
+          {
+            this.#worker.postMessage({
+              kind: "serviceCall",
+              data: {
+                message: event.data.data
+              }
+            });
+            break;
+          }
+        case "unsubscribe":
+        case "subscribe":
+          {
+            this.#worker.postMessage({
+              kind: event.data.type,
+              data: {
+                message: {
+                  topics: event.data.data
+                }
+              }
+            });
+            break;
+          }
       }
     });
   }
@@ -12282,51 +12352,51 @@ class WebRtcBridge extends ArtificialWorker {
     this.#handleMessages();
   }
   #handleWebRtc(client) {
+    client.on("error", error => {
+      console.error("WebRtc Client Failed", error);
+    });
     client.on("connection_established", connection => {
       connection.on("data_channel", channel => {
-        channel.on('close', () => {
+        channel.on("close", () => {
           if (channel.label !== MESSAGE_CHANNEL_NAME && channel.label !== SYSTEM_CHANNEL_NAME) {
             return;
           }
           this.#worker.postMessage({
             kind: "connection",
             data: {
-              channel: channel.label === MESSAGE_CHANNEL_NAME ? 'message' : 'system',
+              channel: channel.label === MESSAGE_CHANNEL_NAME ? "message" : "system",
               ready: false
             }
           });
+          this.postMessageToMain({
+            type: "close"
+          });
         });
         if (channel.label === MESSAGE_CHANNEL_NAME) {
           this.#messageChannel = channel;
           channel.on("message:binary", async view => {
-            const operation = view.getUint8(0);
-            const action = operation === 0x01 ? 'message' : operation === 0x03 ? 'service_response' : 'other';
-            if (action === 'message') {
-              const subscriptionId = view.getUint32(1);
-              const payload = new DataView(view.buffer, view.byteOffset + 1 + 4 + 8);
+            const message = parseFoxgloveMessage(view);
+            if (!message) {
+              return;
+            }
+            if (message.op === BinaryOpcode.MESSAGE_DATA) {
               this.#worker.postMessage({
                 kind: "genericMessage",
                 data: {
-                  message: {
-                    subscriptionId,
-                    data: payload
-                  }
+                  message
                 }
-              }, [payload.buffer]);
+              }, [message.data.buffer]);
             } else {
-              const callId = view.getUint32(1 + 4); // op-code + service-id
-              const encodingLength = view.getUint32(1 + 4 + 4); // op-code + service-id + call-id
-              const payload = new DataView(view.buffer, view.byteOffset + 1 + 4 + 4 + 4 + encodingLength); // op-code + service-id + call-id + encoding-length
               this.#worker.postMessage({
                 kind: "systemMessage",
                 data: {
                   message: {
-                    op: 'serviceResponse',
-                    callId,
-                    data: payload
+                    op: "serviceResponse",
+                    callId: message.callId,
+                    data: message.data
                   }
                 }
-              }, [payload.buffer]);
+              }, [message.data.buffer]);
             }
           });
         } else if (channel.label === SYSTEM_CHANNEL_NAME) {
@@ -12340,13 +12410,20 @@ class WebRtcBridge extends ArtificialWorker {
             });
           });
         }
-        this.#worker.postMessage({
-          kind: "connection",
-          data: {
-            channel: channel.label === MESSAGE_CHANNEL_NAME ? 'message' : 'system',
-            ready: true
-          }
-        });
+        if (channel.label === MESSAGE_CHANNEL_NAME || channel.label === SYSTEM_CHANNEL_NAME) {
+          this.#worker.postMessage({
+            kind: "connection",
+            data: {
+              channel: channel.label === MESSAGE_CHANNEL_NAME ? "message" : "system",
+              ready: true
+            }
+          });
+        }
+        if (this.#systemChannel?.raw.readyState === "open" && this.#messageChannel?.raw.readyState === "open") {
+          this.postMessageToMain({
+            type: "open"
+          });
+        }
       });
       connection.on("connection_closed", () => {
         this.#worker.postMessage({
@@ -12356,15 +12433,18 @@ class WebRtcBridge extends ArtificialWorker {
             ready: false
           }
         });
+        this.postMessageToMain({
+          type: "close"
+        });
       });
     });
   }
   #handleMessages() {
-    this.#worker.addEventListener('message', event => {
+    this.#worker.addEventListener("message", event => {
       switch (event.data.type) {
-        case 'send':
+        case "send":
           {
-            const channel = event.data.data.channel === 'message' ? this.#messageChannel : this.#systemChannel;
+            const channel = event.data.data.channel === "message" ? this.#messageChannel : this.#systemChannel;
             if (channel) {
               channel.sendMessage(event.data.data.data);
             }
@@ -12372,7 +12452,7 @@ class WebRtcBridge extends ArtificialWorker {
           }
         default:
           {
-            this.postMessage(event.data);
+            this.postMessageToMain(event.data);
           }
       }
     });
@@ -12389,21 +12469,20 @@ class VisualizerConnection extends FoxgloveConnection {
   #adapter;
   constructor({
     type,
-    data,
-    worker
+    data
   }) {
     super(type === 'ws' ? data.connectionUrl : data.config.clientId);
-    let finalWorker = worker;
+    let worker;
     if (type === 'ws') {
       this.#url = data.connectionUrl;
-      finalWorker ??= new Worker(new URL("worker-DlZ2xp8p.js", import.meta.url), {
+      worker = new Worker(new URL("worker-C6ruK-iB.js", import.meta.url), {
         type: "module"
       });
     } else {
       this.#config = data.config;
-      finalWorker ??= new WebRtcBridge();
+      worker = new WebRtcBridge();
     }
-    this.#open(finalWorker);
+    this.#open(worker);
   }
   close() {
     this.#adapter?.close();
@@ -12418,6 +12497,12 @@ class VisualizerConnection extends FoxgloveConnection {
     const response = await this.#adapter?.request(args);
     return response ?? null;
   }
+  subscribe(args) {
+    this.#adapter?.subscribe(args);
+  }
+  unsubscribe(args) {
+    this.#adapter?.unsubscribe(args);
+  }
 
   // eslint-disable-next-line no-restricted-syntax
   get connected() {
@@ -12428,25 +12513,22 @@ class VisualizerConnection extends FoxgloveConnection {
       wsUrl: this.#url,
       config: this.#config
     }, worker);
-    this.#adapter.addEventListener("open", this.#onOpen.bind(this));
+    this.#adapter.addEventListener("open", () => {
+      this.playerPresence = PlayerPresence.PRESENT;
+      this.emitState();
+    });
+    this.#adapter.addEventListener("close", () => {
+      this.playerPresence = PlayerPresence.NOT_PRESENT;
+      this.emitState();
+    });
+    this.#adapter.addEventListener("error", _event => {
+      this.messageEvent = null;
+      this.playerPresence = PlayerPresence.ERROR;
+      this.emitState();
+    });
     this.#adapter.addEventListener("message", event => {
       this.onMessagePacket.bind(this)(event);
     });
-    this.#adapter.addEventListener("close", this.#onClose.bind(this));
-    this.#adapter.addEventListener("error", this.#onClose.bind(this));
-  };
-  #onOpen = () => {
-    this.playerPresence = PlayerPresence.PRESENT;
-    this.emitState();
-  };
-  #onClose = () => {
-    this.playerPresence = PlayerPresence.NOT_PRESENT;
-    this.emitState();
-  };
-  #onError = _event => {
-    this.messageEvent = null;
-    this.playerPresence = PlayerPresence.ERROR;
-    this.emitState();
   };
 }
 
@@ -89581,7 +89663,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-Djz0avqZ.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-LBWmbzab.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -89592,7 +89674,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-nxmrq-HQ.js').then(m => m.cpp());
+            return import('./index-JdSlhtdz.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89600,7 +89682,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-nxmrq-HQ.js').then(m => m.cpp());
+            return import('./index-JdSlhtdz.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89620,7 +89702,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-QYS2yYV7.js').then(m => m.go());
+            return import('./index-lcxcWrBB.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89635,7 +89717,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-DakMDXW9.js').then(m => m.java());
+            return import('./index-kO40p_fI.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89651,7 +89733,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-Cv9FekAD.js').then(m => m.json());
+            return import('./index-C38MwKQ5.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89665,14 +89747,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-2U-xZM02.js').then(m => m.less());
+            return import('./index-CTV8k4Ur.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-DszVVt5Z.js').then(m => m.liquid());
+            return import('./index-C4Xw5gJf.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89698,7 +89780,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-yfE-EHjv.js').then(m => m.php());
+            return import('./index-Bmv-vCsr.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89715,28 +89797,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-sbw9t8iK.js').then(m => m.python());
+            return import('./index-CzJG5yoW.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-Bk2FsKKi.js').then(m => m.rust());
+            return import('./index-CRzS8jhh.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-TgQ8-Lib.js').then(m => m.sass({ indented: true }));
+            return import('./index-fDKFJqYA.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-TgQ8-Lib.js').then(m => m.sass());
+            return import('./index-fDKFJqYA.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89767,7 +89849,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-DvdDp1CU.js').then(m => m.wast());
+            return import('./index-BatOjqHR.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89775,7 +89857,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-BNmANBei.js').then(m => m.xml());
+            return import('./index-Bpb1nLXX.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89783,7 +89865,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-BEeIqwPz.js').then(m => m.yaml());
+            return import('./index-Cjzn2Mk3.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -90579,13 +90661,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-lPEkwJ-1.js').then(m => m.vue());
+            return import('./index-D8PL1mUz.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-r3QAVuN1.js').then(m => m.angular());
+            return import('./index-CCjTYhIj.js').then(m => m.angular());
         }
     })
 ];
@@ -161315,7 +161397,7 @@ const PanelAnnotationButton = ({
   const handleClick = React__default.useCallback(event => {
     event.preventDefault();
     onClick();
-  }, []);
+  }, [onClick]);
   return /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
     onClick: handleClick
   }, /*#__PURE__*/React__default.createElement(Flex, {
@@ -161346,23 +161428,33 @@ const PanelToolbar = ({
     return () => {
       clearInterval(interval);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const [annotationsOpened, setAnnotationsOpened] = React__default.useState(false);
-  const hasExtra = React__default.useMemo(() => detections.some(topic => topic.extra && !topic.enabled), [detections]);
+  const hasExtra = React__default.useMemo(() => detections.some(detection => detection.extra && !detection.enabled), [detections]);
   const [extraVisible, setExtraVisible] = React__default.useState(false);
   const onToggleTopic = React__default.useCallback(toggleTopicName => {
-    setDetections?.(current => current.map(topic => ({
-      ...topic,
-      ...(toggleTopicName === topic.name && {
-        enabled: !topic.enabled
+    setDetections?.(current => current.map(detection => ({
+      ...detection,
+      ...(toggleTopicName === detection.name && {
+        enabled: !detection.enabled
       })
     })));
-  }, [detections, setDetections]);
+  }, [setDetections]);
 
   // TODO: show only when debug mode is ON
   const name = React__default.useMemo(() => {
-    return `${topic} - ${metrics?.inputFPS || 0}/${metrics?.postDecodeFPS || 0} FPS`;
+    return `${topic} - ${metrics?.inputFPS ?? 0}/${metrics?.postDecodeFPS ?? 0} FPS`;
   }, [topic, metrics]);
+  const makeDetection = React__default.useCallback((detection, {
+    extra
+  }) => (extra ? detection.extra && !detection.enabled : !detection.extra || detection.enabled) && /*#__PURE__*/React__default.createElement(PanelAnnotationButton, {
+    key: detection.name,
+    topic: detection,
+    onClick: () => {
+      onToggleTopic(detection.name);
+    }
+  }), [onToggleTopic]);
   return /*#__PURE__*/React__default.createElement(Flex, {
     direction: "row",
     gap: "sm",
@@ -161390,12 +161482,8 @@ const PanelToolbar = ({
       borderRadius: 0,
       borderTopRightRadius: 8
     }
-  })), /*#__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);
-    }
+  })), /*#__PURE__*/React__default.createElement(DropdownMenuContent, null, extraVisible && detections.map(detection => makeDetection(detection, {
+    extra: false
   })), hasExtra && /*#__PURE__*/React__default.createElement(Button, {
     width: "full",
     paddingY: "xs",
@@ -161408,16 +161496,12 @@ const PanelToolbar = ({
     style: {
       borderRadius: 4
     }
-  }, 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);
-    }
+  }, extraVisible ? "Less" : "More"), extraVisible && detections.map(detection => makeDetection(detection, {
+    extra: true
   })))), 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:"
-    }), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "w - Move camera forward"), /*#__PURE__*/React__default.createElement("li", null, "a - Move camera backward"), /*#__PURE__*/React__default.createElement("li", null, "s - Move camera to the left"), /*#__PURE__*/React__default.createElement("li", null, "d - Move camera to the right"), /*#__PURE__*/React__default.createElement("li", null, "Scroll \u2013 Zoom in and out"), /*#__PURE__*/React__default.createElement("li", null, "Drag \u2013 Move camera parallel to the ground"), /*#__PURE__*/React__default.createElement("li", null, "Right-click + Drag horizontally \u2013 Rotate the camera around the world's z-axis"), /*#__PURE__*/React__default.createElement("li", null, "Right-click + Drag vertically \u2013 Pan the camera around the world's x- and y- axes")))
+    }), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "w - Move camera forward"), /*#__PURE__*/React__default.createElement("li", null, "a - Move camera backward"), /*#__PURE__*/React__default.createElement("li", null, "s - Move camera to the left"), /*#__PURE__*/React__default.createElement("li", null, "d - Move camera to the right"), /*#__PURE__*/React__default.createElement("li", null, "Scroll \u2013 Zoom in and out"), /*#__PURE__*/React__default.createElement("li", null, "Drag \u2013 Move camera parallel to the ground"), /*#__PURE__*/React__default.createElement("li", null, `Right-click + Drag horizontally – Rotate the camera around the world's z-axis`), /*#__PURE__*/React__default.createElement("li", null, `Right-click + Drag vertically – Pan the camera around the world's x- and y- axes`)))
   }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "ghost",
     colorVariant: "white",
@@ -161454,10 +161538,22 @@ const Panel = ({
   annotationTopics = [],
   extraAnnotationTopics = []
 }) => {
+  const connections = useConnections();
   const [detections, setDetections] = React__default.useState([]);
   React__default.useEffect(() => {
     if (!disableAnnotations) {
-      setDetections(current => [...rawToAnnotations(annotationTopics, 'main', current), ...rawToAnnotations(extraAnnotationTopics, 'extra', current)]);
+      setDetections(current => {
+        const newAnnotations = [...rawToAnnotations(annotationTopics, 'main', current), ...rawToAnnotations(extraAnnotationTopics, 'extra', current)];
+        for (const connection of connections) {
+          connection.unsubscribe({
+            topics: current.map(c => c.name)
+          });
+          connection.subscribe({
+            topics: newAnnotations.filter(c => c.enabled).map(c => c.name)
+          });
+        }
+        return newAnnotations;
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(annotationTopics), JSON.stringify(extraAnnotationTopics)]);
@@ -161486,7 +161582,7 @@ const Panel = ({
   }, children))))));
 };
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-FWvVjhSv.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-D2tE4ai8.js'));
 const ImagePanelBody = ({
   topic
 }) => {
@@ -161521,7 +161617,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-fkPdppby.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BeMujwTx.js'));
 const PointCloudPanelBody = ({
   topic
 }) => {