@luxonis/visualizer-protobuf 2.0.2 → 2.2.0

package/dist/{index-B68UDyAv.js → index-B3F-eA-i.js}

@@ -1,5 +1,5 @@
-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 } from './worker-utils-BuUq1bP1.js';
+import { T as Type$1, P as PointsAnnotationType$2, a as Profile, p as protobufsBySchema } from './communicator-DKKKAI0H.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';
@@ -219,6 +219,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,
@@ -11859,22 +11875,74 @@ class EventEmitter {
     }
 }
 
+function makeChunks(data, chunkSize = 16 * 1024) {
+    const chunks = [];
+    const payloadSize = chunkSize - 4 - 4;
+    const totalChunks = Math.ceil(data.byteLength / payloadSize);
+    for (let i = 0; i < totalChunks; ++i) {
+        const array = new Uint8Array(chunkSize);
+        const view = new DataView(array.buffer);
+        view.setInt32(0, totalChunks);
+        view.setInt32(4, i);
+        const sourceChunkLength = Math.min(payloadSize, data.byteLength - i * payloadSize);
+        array.set(new Uint8Array(data.buffer, i * payloadSize, sourceChunkLength));
+        chunks.push(view);
+    }
+    return chunks;
+}
 class WebRtcDataChannel {
     channel;
+    withFragmentation;
     events = new EventEmitter();
     oldMessages = [];
-    constructor(channel) {
+    buffer = new Uint8Array(0);
+    constructor(channel, withFragmentation = false) {
         this.channel = channel;
-        this.channel.onerror = event => this.events.emit('error', [event]);
-        this.channel.onmessage = event => this.events.emit('message', [event]);
-        this.channel.onclose = event => this.events.emit('close', [event]);
-        this.channel.onopen = event => {
+        this.withFragmentation = withFragmentation;
+        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 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 : this.buffer;
+            this.events.emit('message', [
+                new MessageEvent('message', {
+                    data: completeData.buffer,
+                }),
+            ]);
+            if (totalChunks !== 1) {
+                this.buffer = new Uint8Array(0);
+            }
+        });
+        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.byteLength + bytes.byteLength);
+        newBuffer.set(this.buffer, 0);
+        newBuffer.set(bytes, this.buffer.byteLength);
+        this.buffer = newBuffer;
     }
     get raw() {
         return this.channel;
@@ -11884,24 +11952,50 @@ class WebRtcDataChannel {
     }
     sendMessage(message) {
         if (this.channel.readyState === 'open') {
-            this.channel.send(message);
+            const chunks = message instanceof DataView && this.withFragmentation ? makeChunks(message) : [message];
+            for (const chunk of chunks) {
+                this.channel.send(chunk);
+            }
         }
         else {
             this.oldMessages.push(message);
         }
     }
     /**
+     * @deprecated Use `on` with `decode: true`
+     *
      * This method does **not** filter messages. Use this method instead of {@link on}
      * **only** if you are sure that all messages sent over this channel will contain text.
      */
     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 = this.events.on.bind(this.events);
+    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) => {
+            const buffer = rawEvent.data instanceof ArrayBuffer ? rawEvent.data : await rawEvent.data.arrayBuffer();
+            if (event === 'message:binary') {
+                const view = new DataView(buffer);
+                callback(view);
+            }
+            else {
+                const message = new TextDecoder('utf-8').decode(buffer);
+                if (event === 'message:string') {
+                    callback(message);
+                }
+                else if (event === 'message:json') {
+                    callback(JSON.parse(message));
+                }
+            }
+        });
+    }
 }
 
 class WebRtcConnection {
@@ -11911,13 +12005,13 @@ 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() {
+    createPeerConnection(withFragmentation = false) {
         const config = {
             iceServers: this.iceServers ?? [],
         };
@@ -11945,13 +12039,10 @@ class WebRtcConnection {
                 this.onIceCandidate(event.candidate);
             }
         };
-        connection.ondatachannel = event => {
-            const channel = new WebRtcDataChannel(event.channel);
-            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() {
@@ -11959,7 +12050,7 @@ class WebRtcConnection {
     }
     createDataChannel(label, options) {
         const channel = this.#peerConnection.createDataChannel(label, options);
-        return new WebRtcDataChannel(channel);
+        return new WebRtcDataChannel(channel, options?.withFragmentation);
     }
     setRemoteDescription(type, sdp) {
         return this.#peerConnection.setRemoteDescription({ type, sdp });
@@ -12087,9 +12178,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') {
@@ -12139,6 +12230,7 @@ class WebRtcClient {
                 });
             },
             onConnectionEstablished: () => this.disconnectSignalingServer('P2P connection established'),
+            withFragmentation: this.config.withFragmentation,
         });
         this.events.emit('connection_established', [this.connection]);
     }
@@ -12154,14 +12246,29 @@ class WebRtcClient {
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
 class ArtificialWorker extends EventTarget {
+  #selfTarget = new EventTarget();
+
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   postMessage(data, _transferable) {
+    const event = new MessageEvent('message', {
+      data
+    });
+    this.#selfTarget.dispatchEvent(event);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  selfPostMessage(data, _transferable) {
     const event = new MessageEvent('message', {
       data
     });
     super.dispatchEvent(event);
   }
 
+  // @ts-expect-error Make it typed
+  selfAddEventListener(type, callback) {
+    this.#selfTarget.addEventListener(type, callback);
+  }
+
   // @ts-expect-error Make it typed
   addEventListener(type, callback) {
     super.addEventListener(type, callback);
@@ -12182,7 +12289,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-CMZIJlQN.js", import.meta.url), {
       type: "module"
     });
     this.#setupArtificialWorker();
@@ -12191,15 +12298,57 @@ class WebRtcBridge extends ArtificialWorker {
     this.#worker.terminate();
   }
   #setupArtificialWorker() {
-    this.addEventListener('message', event => {
+    this.selfAddEventListener("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 "send":
+          {
+            this.#worker.postMessage({
+              kind: "rawSend",
+              data: {
+                message: event.data.data
+              }
+            });
+            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;
+          }
       }
     });
   }
@@ -12209,30 +12358,32 @@ 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.selfPostMessage({
+            type: "close"
+          });
         });
         if (channel.label === MESSAGE_CHANNEL_NAME) {
           this.#messageChannel = channel;
-          channel.on("message", async ({
-            data
-          }) => {
-            const operation = data.getUint8(0);
-            const action = operation === 0x01 ? 'message' : operation === 0x03 ? 'service_response' : 'other';
-            if (action === 'message') {
-              const subscriptionId = data.getUint32(1);
-              const payload = new DataView(data.buffer, data.byteOffset + 1 + 4 + 8);
+          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);
               this.#worker.postMessage({
                 kind: "genericMessage",
                 data: {
@@ -12243,14 +12394,14 @@ class WebRtcBridge extends ArtificialWorker {
                 }
               }, [payload.buffer]);
             } else {
-              const callId = data.getUint32(1 + 4); // op-code + service-id
-              const encodingLength = data.getUint32(1 + 4 + 4); // op-code + service-id + call-id
-              const payload = new DataView(data.buffer, data.byteOffset + 1 + 4 + 4 + 4 + encodingLength); // op-code + service-id + call-id + encoding-length
+              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',
+                    op: "serviceResponse",
                     callId,
                     data: payload
                   }
@@ -12260,12 +12411,11 @@ class WebRtcBridge extends ArtificialWorker {
           });
         } else if (channel.label === SYSTEM_CHANNEL_NAME) {
           this.#systemChannel = channel;
-          channel.on("message", async event => {
-            const message = JSON.parse(event.data);
+          channel.on("message:json", async data => {
             this.#worker.postMessage({
               kind: "systemMessage",
               data: {
-                message
+                message: data
               }
             });
           });
@@ -12273,10 +12423,15 @@ class WebRtcBridge extends ArtificialWorker {
         this.#worker.postMessage({
           kind: "connection",
           data: {
-            channel: channel.label === MESSAGE_CHANNEL_NAME ? 'message' : 'system',
+            channel: channel.label === MESSAGE_CHANNEL_NAME ? "message" : "system",
             ready: true
           }
         });
+        if (this.#systemChannel?.raw.readyState === "open" && this.#messageChannel?.raw.readyState === "open") {
+          this.selfPostMessage({
+            type: "open"
+          });
+        }
       });
       connection.on("connection_closed", () => {
         this.#worker.postMessage({
@@ -12286,15 +12441,18 @@ class WebRtcBridge extends ArtificialWorker {
             ready: false
           }
         });
+        this.selfPostMessage({
+          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);
             }
@@ -12302,7 +12460,7 @@ class WebRtcBridge extends ArtificialWorker {
           }
         default:
           {
-            this.postMessage(event.data);
+            this.selfPostMessage(event.data);
           }
       }
     });
@@ -12326,12 +12484,12 @@ class VisualizerConnection extends FoxgloveConnection {
     let finalWorker = worker;
     if (type === 'ws') {
       this.#url = data.connectionUrl;
-      finalWorker ??= new Worker(new URL("worker-DlZ2xp8p.js", import.meta.url), {
+      finalWorker ??= new Worker(new URL("worker-DtDgSl3T.js", import.meta.url), {
         type: "module"
       });
     } else {
       this.#config = data.config;
-      finalWorker ??= new WebRtcBridge();
+      finalWorker = new WebRtcBridge();
     }
     this.#open(finalWorker);
   }
@@ -12348,6 +12506,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() {
@@ -89511,7 +89675,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-CsyZMo6w.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-D_AhdZqi.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -89522,7 +89686,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-T_ckFaRN.js').then(m => m.cpp());
+            return import('./index-DkDTcHOl.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89530,7 +89694,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-T_ckFaRN.js').then(m => m.cpp());
+            return import('./index-DkDTcHOl.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89550,7 +89714,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-B7v9Ptl2.js').then(m => m.go());
+            return import('./index-B4j3EVf8.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89565,7 +89729,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-WSNQlHZC.js').then(m => m.java());
+            return import('./index-1yvlF6NH.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89581,7 +89745,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-BHmiJ5Qk.js').then(m => m.json());
+            return import('./index-FdS8KlrP.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89595,14 +89759,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-9D6nsmX0.js').then(m => m.less());
+            return import('./index-MOg_zBJW.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-SWsY2eOm.js').then(m => m.liquid());
+            return import('./index-BsdqQ862.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89628,7 +89792,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-D502DL2z.js').then(m => m.php());
+            return import('./index-CE1LH59a.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89645,28 +89809,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-CLESgVaD.js').then(m => m.python());
+            return import('./index-SZgAiOi4.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-C04gVVoP.js').then(m => m.rust());
+            return import('./index-D0g7yNKD.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-CXwbrQKL.js').then(m => m.sass({ indented: true }));
+            return import('./index-D7I7neMi.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-CXwbrQKL.js').then(m => m.sass());
+            return import('./index-D7I7neMi.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89697,7 +89861,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-ByP7YJPY.js').then(m => m.wast());
+            return import('./index-DbIgJEn4.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89705,7 +89869,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-Ddm491YR.js').then(m => m.xml());
+            return import('./index-Dai0K-_7.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -89713,7 +89877,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-CX_Do7kl.js').then(m => m.yaml());
+            return import('./index-Cqzhj8jS.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -90509,13 +90673,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-By6lF-Xz.js').then(m => m.vue());
+            return import('./index-DleEaqya.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-CsJJiZos.js').then(m => m.angular());
+            return import('./index-C6m30paN.js').then(m => m.angular());
         }
     })
 ];
@@ -161245,7 +161409,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, {
@@ -161276,6 +161440,7 @@ 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]);
@@ -161287,7 +161452,7 @@ const PanelToolbar = ({
         enabled: !topic.enabled
       })
     })));
-  }, [detections, setDetections]);
+  }, [setDetections]);
 
   // TODO: show only when debug mode is ON
   const name = React__default.useMemo(() => {
@@ -161384,10 +161549,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)]);
@@ -161416,7 +161593,7 @@ const Panel = ({
   }, children))))));
 };
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-qrTNSyOQ.js'));
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-Cmp_Tjng.js'));
 const ImagePanelBody = ({
   topic
 }) => {
@@ -161451,7 +161628,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-uD6dIRaN.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BZjzIIuE.js'));
 const PointCloudPanelBody = ({
   topic
 }) => {