fix(node_diagram): improve highlight clearing logic by scoping to current SVG root

- Updated the clearHighlights method to use the current SVG root or container for querying highlighted elements, ensuring that highlights are cleared correctly within the intended scope.
- This change enhances the functionality and reliability of the highlight clearing process in the Node Diagram Module.

Signed-off-by: Taekjin LEE <taekjin.lee@tier4.jp>

Author: technolojin

autoware_system_designer/autoware_system_designer/visualization/js/node_diagram.js

@@ -352,26 +352,29 @@ class NodeDiagramModule extends DiagramBase {
   clearHighlights() {
     this.nodeConnectionDirections.clear();
 
-    document.querySelectorAll(".highlighted").forEach((el) => {
+    const scope = this.currentSvgRoot || this.container;
+    if (!scope) return;
+
+    scope.querySelectorAll(".highlighted").forEach((el) => {
       el.classList.remove("highlighted");
       if (el.tagName === "path") {
         el.setAttribute("marker-end", "url(#arrowhead)");
         el.style.stroke = "";
         el.style.strokeWidth = "";
       }
     });
-    document
+    scope
       .querySelectorAll(".module-highlighted")
       .forEach((el) => el.classList.remove("module-highlighted"));
-    document
+    scope
       .querySelectorAll(".child-highlighted")
       .forEach((el) => el.classList.remove("child-highlighted"));
-    document.querySelectorAll(".port-highlighted").forEach((el) => {
+    scope.querySelectorAll(".port-highlighted").forEach((el) => {
       el.classList.remove("port-highlighted");
       el.style.fill = "";
       el.style.stroke = "";
     });
-    document.querySelectorAll(".node-connection-highlight").forEach((el) => {
+    scope.querySelectorAll(".node-connection-highlight").forEach((el) => {
       el.classList.remove("node-connection-highlight");
       el.style.stroke = "";
       el.style.strokeWidth = "";