updated visualization panel ui and added outer click

app/src/utils/outerClick.ts

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface OuterClickProps {
-  contextClassName: string;
+  contextClassName: string[]; // Make sure this is an array of strings
   setMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -11,8 +11,12 @@ export default function OuterClick({
 }: OuterClickProps) {
   const handleClick = (event: MouseEvent) => {
     const targets = event.target as HTMLElement;
-    // Check if the click is outside the selectable-dropdown-wrapper
-    if (!targets.closest(`.${contextClassName}`)) {
+    // Check if the click is outside of any of the provided class names
+    const isOutside = contextClassName.every(
+      (className) => !targets.closest(`.${className}`)
+    );
+
+    if (isOutside) {
       setMenuVisible(false); // Close the menu by updating the state
     }
   };
@@ -23,7 +27,7 @@ export default function OuterClick({
     return () => {
       document.removeEventListener("click", handleClick);
     };
-  }, []);
+  }, [contextClassName]); // Add contextClassName to dependency array to handle any changes
 
   return null; // This component doesn't render anything
 }