refactor(events): remove querySelectors for duplicates toggling

Avoid using querySelectors in EventsTab for better maintainability.

Author: soyacz

frontend/TestRun/EventsTab.svelte

@@ -27,6 +27,19 @@
     let isLoading = $state(true);
     let eventContainer: HTMLDivElement;
 
+    // Registry of event DOM elements keyed by `event-<SEVERITY>-<INDEX>` for scrolling after toggling duplicates
+    let eventElements: Map<string, HTMLElement> = new Map();
+
+    // register anchors for scrolling back to parent event after toggling duplicates
+    const registerEventAnchor = (node: HTMLElement, key: string) => {
+        eventElements.set(key, node);
+        return {
+            destroy() {
+                eventElements.delete(key);
+            }
+        };
+    };
+
     const displayCategories = $state({
         CRITICAL: {
             show: true,
@@ -286,7 +299,7 @@
         let relativeOffset: number | null = null;
 
         if (eventContainer) {
-            const target = eventContainer.querySelector<HTMLElement>(`[data-event-key="${anchorKey}"]`);
+            const target = eventElements.get(anchorKey);
             if (target) {
                 const containerScrollTop = eventContainer.scrollTop;
                 relativeOffset = target.offsetTop - containerScrollTop;
@@ -324,7 +337,7 @@
 
         if (relativeOffset !== null && eventContainer) {
             await tick();
-            const updatedTarget = eventContainer.querySelector<HTMLElement>(`[data-event-key="${anchorKey}"]`);
+            const updatedTarget = eventElements.get(anchorKey);
             if (updatedTarget) {
                 eventContainer.scrollTop = Math.max(updatedTarget.offsetTop - relativeOffset, 0);
             }
@@ -371,7 +384,7 @@
             return;
         }
         const anchorKey = `event-${target.severity}-${target.index}`;
-        const targetElement = eventContainer.querySelector<HTMLElement>(`[data-event-key="${anchorKey}"]`);
+        const targetElement = eventElements.get(anchorKey);
         if (targetElement) {
             targetElement.scrollIntoView({ behavior: "smooth", block: "center" });
         }
@@ -543,6 +556,7 @@
                     duplicateParent={event.duplicateParent}
                     {toggleDuplicates}
                     {scrollToEvent}
+                    registerAnchor={registerEventAnchor}
                     on:issueAttach
                 />
             {:else}

frontend/TestRun/StructuredEvent.svelte

@@ -18,6 +18,7 @@
         display?: boolean;
         filterString?: string;
         scrollToEvent?: (target: { severity: string; index: number }) => void;
+        registerAnchor?: (node: HTMLElement, key: string) => { destroy?: () => void } | void;
     }
 
     let {
@@ -29,7 +30,8 @@
         duplicateParent = null,
         display = true,
         filterString = "",
-        scrollToEvent = () => {}
+        scrollToEvent = () => {},
+        registerAnchor = (node: HTMLElement, _key: string) => ({ destroy() {} })
     }: Props = $props();
 
     const dispatch = createEventDispatcher();
@@ -89,6 +91,7 @@
 </script>
 
 <div
+    use:registerAnchor={`event-${event.severity}-${event.index}`}
     data-event-key={`event-${event.severity}-${event.index}`}
     class:d-none={!display || shouldFilter(filterString)}
     class="mb-2 p-2 shadow rounded font-monospace"