fix: disable user interaction with popups during dragging

This fixes an issue that the users' pan/zoom interaction was interrupted due to user selection

libs/shared/lib/components/tooltip/Tooltip.tsx

@@ -26,6 +26,7 @@ interface TooltipOptions {
   onOpenChange?: (open: boolean) => void;
   boundaryElement?: React.RefObject<HTMLElement> | null;
   showArrow?: boolean;
+  interactive?: boolean;
 }
 
 export function useTooltip({
@@ -34,12 +35,14 @@ export function useTooltip({
   open: controlledOpen,
   onOpenChange: setControlledOpen,
   boundaryElement = null,
-  showArrow = false
+  showArrow = false,
+  interactive = true,
 }: TooltipOptions = {}): {
   open: boolean;
   setOpen: (open: boolean) => void;
   interactions: ReturnType<typeof useInteractions>;
   data: ReturnType<typeof useFloating>;
+  interactive: boolean;
 } {
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
 
@@ -97,8 +100,9 @@ export function useTooltip({
       setOpen,
       interactions: interactions,
       data: data,
+      interactive: interactive,
     }),
-    [open, setOpen, interactions, data],
+    [open, setOpen, interactions, data, interactive],
   );
 }
 
@@ -207,6 +211,7 @@ export const TooltipContent = React.forwardRef<
           ...context.data.floatingStyles,
           ...style,
           display: context.data.middlewareData.hide?.referenceHidden ? 'none' : 'block',
+          pointerEvents: context.interactive ? 'auto' : 'none',
         }}
         {...context.interactions.getFloatingProps(props)}
       >

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

@@ -69,6 +69,7 @@ export const NLPixi = (props: Props) => {
   const layoutStoppedCount = useRef(0);
   const ref = useRef<HTMLDivElement>(null);
   const mouseInCanvas = useRef<boolean>(false);
+  const [dragging, setDragging] = useState<boolean>(false);
   const isSetup = useRef(false);
   const ml = useML();
   const searchResults = useSearchResultData();
@@ -130,6 +131,7 @@ export const NLPixi = (props: Props) => {
       if (props.configuration.showPopUpOnHover) return;
 
       (event as any).mouseDownTimeStamp = event.timeStamp;
+      setDragging(true);
     },
 
     onMouseUpNode(event: FederatedPointerEvent) {
@@ -591,6 +593,9 @@ export const NLPixi = (props: Props) => {
     viewport.current.on('moved', (event) => {
       imperative.current.onMoved(event);
     });
+    viewport.current.on('drag-end', (event) => {
+      setDragging(false);
+    });
 
     app.stage.eventMode = 'dynamic';
     app.stage.on('mousedown', (e) => imperative.current.onMouseDown(e));
@@ -629,7 +634,7 @@ export const NLPixi = (props: Props) => {
   return (
     <>
       {popups.map((popup) => (
-        <Tooltip key={popup.node._id} open={true} boundaryElement={ref} showArrow={true}>
+        <Tooltip key={popup.node._id} open={true} interactive={!dragging} boundaryElement={ref} showArrow={true}>
           <TooltipTrigger x={popup.pos.x} y={popup.pos.y} />
           <TooltipContent>
             <NLPopup onClose={() => {}} data={{node: props.graph.nodes[popup.node._id], pos: popup.pos}} key={popup.node._id} />