feat: use floating ui for node link tooltips

Additional features:

• Shift-click for multi select
• Click anywhere in the stage to deselect
• Panning and zooming does not deselect

Preview

Screen_Recording_2024-06-26_at_17.55.05

libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx

@@ -127,10 +127,14 @@ export const NLPixi = (props: Props) => {
 
   useImperativeHandle(imperative, () => ({
     onMouseDown(event: FederatedPointerEvent) {
+      if (props.configuration.showPopUpOnHover) return;
+
       (event as any).mouseDownTimeStamp = event.timeStamp;
     },
 
     onMouseUpNode(event: FederatedPointerEvent) {
+      if (props.configuration.showPopUpOnHover) return;
+
       // If its a short click (not a drag) on the stage but not on a node: clear the selection and remove all popups.
       const holdDownTime = event.timeStamp - (event as any).mouseDownTimeStamp;
       if (holdDownTime > mouseClickThreshold) {
@@ -158,6 +162,8 @@ export const NLPixi = (props: Props) => {
     },
 
     onMouseUpStage(event: FederatedPointerEvent) {
+      if (props.configuration.showPopUpOnHover) return;
+      
       // If its a short click (not a drag) on the stage but not on a node: clear the selection and remove all popups.
       const holdDownTime = event.timeStamp - (event as any).mouseDownTimeStamp;
       if (holdDownTime < mouseClickThreshold) {
@@ -171,6 +177,8 @@ export const NLPixi = (props: Props) => {
     },
 
     onHover(event: FederatedPointerEvent) {
+      if (!props.configuration.showPopUpOnHover) return;
+
       const sprite = event.target as Sprite;
       const node = (sprite as any).node as NodeTypeD3;
       if (
@@ -184,9 +192,13 @@ export const NLPixi = (props: Props) => {
       }
     },
     onUnHover() {
+      if (!props.configuration.showPopUpOnHover) return;
+
       setQuickPopup(undefined);
     },
     onMoved(event: MovedEvent) {
+      if (props.configuration.showPopUpOnHover) return;
+      
       for (const popup of popups) {
         if (popup.node.x == null || popup.node.y == null) continue;
         popup.pos.x = event.viewport.transform.position.x + popup.node.x * event.viewport.scale.x;
@@ -616,7 +628,7 @@ export const NLPixi = (props: Props) => {
 
   return (
     <>
-      {popups.map((popup, index) => (
+      {popups.map((popup) => (
         <Tooltip key={popup.node._id} open={true} boundaryElement={ref} showArrow={true}>
           <TooltipTrigger x={popup.pos.x} y={popup.pos.y} />
           <TooltipContent>
@@ -624,6 +636,14 @@ export const NLPixi = (props: Props) => {
           </TooltipContent>
         </Tooltip>
       ))}
+      {quickPopup != null && 
+        <Tooltip key={quickPopup.node._id} open={true} boundaryElement={ref} showArrow={true}>
+          <TooltipTrigger x={quickPopup.pos.x} y={quickPopup.pos.y} />
+          <TooltipContent>
+            <NLPopup onClose={() => {}} data={{node: props.graph.nodes[quickPopup.node._id], pos: quickPopup.pos}} key={quickPopup.node._id} />
+          </TooltipContent>
+        </Tooltip>
+      }
       <div
         className="h-full w-full overflow-hidden"
         ref={ref}