refactor: simplify closing tooltips clicking outside pills

Reactflow already separates click and move events, mouseClickThreshold not needed

libs/shared/lib/schema/panel/Schema.tsx

@@ -54,8 +54,6 @@ export const Schema = (props: Props) => {
   const [hasLayoutBeenRun, setHasLayoutBeenRun] = useState(false);
 
   // Time threshold for distinguishing between a click and a drag
-  const mouseClickThreshold = 200;
-  const mouseDownTimestampRef = useRef<number | null>(null);
   const isPillClicked = useRef<boolean>(false);
 
   const reactFlowInstanceRef = useRef<ReactFlowInstance | null>(null);
@@ -204,52 +202,28 @@ export const Schema = (props: Props) => {
   }, [graphStats]);
 
   const handleOnClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const holdDownTime = event.timeStamp - (mouseDownTimestampRef.current || 0);
-    if (holdDownTime < mouseClickThreshold && isPillClicked.current === false) {
-      // Handle click on stage
+    const target = event.target as HTMLElement;
+    const clickedOutsideNode = target.classList.contains('react-flow__pane');
 
-      setNodes((nds) =>
-        nds.map((node) => ({
-          ...node,
-          data: {
-            ...node.data,
-            tooltipClose: true,
-          },
-        })),
-      );
-
-      setEdges((edg) =>
-        edg.map((edge) => ({
-          ...edge,
-          data: {
-            ...edge.data,
-            tooltipClose: true,
-          },
-        })),
-      );
-
-      isPillClicked.current = false;
-    } else {
-      setNodes((nds) =>
-        nds.map((node) => ({
-          ...node,
-          data: {
-            ...node.data,
-            tooltipClose: false,
-          },
-        })),
-      );
+    setNodes((nds) =>
+      nds.map((node) => ({
+        ...node,
+        data: {
+          ...node.data,
+          tooltipClose: clickedOutsideNode,
+        },
+      })),
+    );
 
-      setEdges((edg) =>
-        edg.map((edge) => ({
-          ...edge,
-          data: {
-            ...edge.data,
-            tooltipClose: false,
-          },
-        })),
-      );
-    }
+    setEdges((edg) =>
+      edg.map((edge) => ({
+        ...edge,
+        data: {
+          ...edge.data,
+          tooltipClose: clickedOutsideNode,
+        },
+      })),
+    );
   };
 
   return (
@@ -333,10 +307,6 @@ export const Schema = (props: Props) => {
       <div
         className="schema-panel w-full h-full flex flex-col justify-between"
         ref={reactFlowRef}
-        onMouseUpCapture={(event) => {
-          // this only fires when a pill is cliced, not in background
-          isPillClicked.current = true;
-        }}
       >
         {nodes.length === 0 ? (
           <p className="m-3 text-xl font-bold">No Elements</p>
@@ -352,11 +322,7 @@ export const Schema = (props: Props) => {
               connectionLineComponent={ConnectionDragLine}
               onNodesChange={onNodesChange}
               onEdgesChange={onEdgesChange}
-              onMouseDownCapture={(event) => {
-                mouseDownTimestampRef.current = event.timeStamp;
-                dispatch(resultSetFocus({ focusType: 'schema' }));
-                isPillClicked.current = false;
-              }}
+              onMouseDownCapture={() => dispatch(resultSetFocus({ focusType: 'schema' }))}
               nodes={nodes}
               edges={edges}
               onInit={(reactFlowInstance) => {