imrove multiuser sync support

dicom-viewer/src/main.tsx

@@ -49,7 +49,7 @@ type RootRecord = {
   signature: string;
 };
 
-const rootRegistry = new WeakMap<HTMLElement, RootRecord>();
+const rootRegistry = new Map<HTMLElement, RootRecord>();
 const mainLogger = logger.child("main");
 
 declare global {
@@ -176,13 +176,21 @@ const shouldMountContainer = (container: HTMLElement, options?: MountOptions): b
 };
 
 const getContainerLogConfig = (container: HTMLElement, options?: MountOptions) => {
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlDebug = urlParams.get("debug");
+  const localSyncDebug = typeof window !== "undefined" && window.localStorage ? window.localStorage.getItem("multiuser_sync_debug_mode") : null;
+
   const attrLevel = container.getAttribute("data-log-level");
   const attrDebug = container.getAttribute("data-log-debug");
   const attrFormat = container.getAttribute("data-log-format");
 
-  // Resolve minLevel: data-log-level > options.minLevel > data-log-debug (legacy) > options.debug (legacy)
+  // Resolve minLevel: LocalStorage debug > URL debug parameter > data-log-level > options.minLevel > data-log-debug (legacy)
   let minLevel: LogLevel;
-  if (attrLevel !== null) {
+  if (localSyncDebug === "true") {
+    minLevel = "debug";
+  } else if (urlDebug !== null) {
+    minLevel = parseDebugFlag(urlDebug);
+  } else if (attrLevel !== null) {
     minLevel = parseLogLevel(attrLevel);
   } else if (options?.logging?.minLevel) {
     minLevel = options.logging.minLevel;
@@ -223,6 +231,9 @@ const mountContainer = (container: HTMLElement, imageStacks: () => Promise<any[]
       annotationJson={container.getAttribute("data-annotationjson") || undefined}
       viewerState={container.getAttribute("data-viewerstate") || undefined}
       initialLoggerConfig={initialLoggerConfig}
+      multiuserRoom={container.getAttribute("data-multiuser-room") || undefined}
+      username={container.getAttribute("data-username") || undefined}
+      isStaff={container.getAttribute("data-is-staff") === "true"}
     />
   );
 
@@ -230,6 +241,19 @@ const mountContainer = (container: HTMLElement, imageStacks: () => Promise<any[]
 };
 
 export function mountDicomViewers(options?: MountOptions) {
+  // Clean up any stale roots from elements that have been removed from the DOM
+  for (const [container, entry] of rootRegistry.entries()) {
+    if (!document.body.contains(container)) {
+      try {
+        mainLogger.info("Unmounting stale React root for container that was removed from DOM:", container.id);
+        entry.root.unmount();
+      } catch (e) {
+        mainLogger.warn("Failed to unmount stale React root", e);
+      }
+      rootRegistry.delete(container);
+    }
+  }
+
   // Test containers
   const testContainers = document.querySelectorAll(".dicom-viewer-test-root");
   testContainers.forEach((container) => {