fix: qp to show full node details (include condition and skip in fetch), modal to disable move canvas when open

Author: mskorokhodov

packages/libraries/laboratory/src/components/flow.tsx

@@ -199,13 +199,32 @@ export const Flow = (props: {
 
   const handleMouseDown = useCallback(
     (event: MouseEvent<HTMLDivElement>) => {
+      if (!containerRef.current) {
+        return;
+      }
+
+      if (!event.nativeEvent.composedPath().includes(containerRef.current)) {
+        return;
+      }
+
       if (props.disableGestures) {
         return;
       }
 
       event.preventDefault();
       setIsPanning(true);
       panStartRef.current = { x: event.clientX, y: event.clientY };
+
+      function handleMouseUp() {
+        stopPanning();
+        setIsCanvasActive(false);
+      }
+
+      document.addEventListener('mouseup', handleMouseUp);
+
+      return () => {
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
     },
     [props.disableGestures],
   );
@@ -312,7 +331,6 @@ export const Flow = (props: {
       onWheel={handleWheel}
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}
-      onMouseUp={stopPanning}
       onMouseLeave={() => {
         stopPanning();
         setIsCanvasActive(false);

packages/libraries/laboratory/src/components/ui/dialog.tsx

@@ -44,8 +44,10 @@ function DialogContent({
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
 }) {
+  const { container } = useLaboratory();
+
   return (
-    <DialogPortal data-slot="dialog-portal">
+    <DialogPortal data-slot="dialog-portal" container={container}>
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"

packages/libraries/laboratory/src/lib/query-plan/utils.tsx

@@ -165,7 +165,7 @@ export function renderFetchNode(node: FetchNodePlan, depth = 0): string {
   lines.push(`${indent(depth)}Fetch(service: "${node.serviceName}") {`);
 
   if (node.requires) {
-    lines.push(`${indent(depth + 1)} {`);
+    lines.push(`${indent(depth + 1)}{`);
     const requires = renderSelectionSet(node.requires, depth + 2);
     if (requires) lines.push(requires);
     lines.push(`${indent(depth + 1)}} =>`);
@@ -181,14 +181,16 @@ export function renderFetchNode(node: FetchNodePlan, depth = 0): string {
           .split('\n')
           .slice(slice, slice * -1)
           .join('\n'),
-        depth + 1,
+        depth + 2 - slice,
       ),
       `${indent(depth + 1)}}`,
     );
   } catch {
     lines.push(`${indent(depth + 1)}${node.operation}`);
   }
 
+  lines.push(`${indent(depth)}}`);
+
   return lines.join('\n');
 }
 
@@ -464,6 +466,7 @@ function visitNode(
   parentNode: QueryPlanNode | null,
   nodes: QueryPlanNode[],
   contentPrefix?: React.ReactNode,
+  detailsContent?: string,
 ): QueryPlanNode {
   let result: QueryPlanNode | null = {
     id: uuidv4(),
@@ -475,7 +478,6 @@ function visitNode(
     case 'Fetch':
       result.content = () => {
         const entity = (node.requires?.[0] as SelectionInlineFragment)?.typeCondition;
-
         return (
           <div className="flex flex-col gap-2">
             {contentPrefix}
@@ -505,7 +507,7 @@ function visitNode(
                     <DialogTitle>Fetch</DialogTitle>
                   </DialogHeader>
                   <div className="h-full overflow-hidden rounded-sm border">
-                    <Editor value={renderFetchNode(node)} language="graphql" />
+                    <Editor value={detailsContent ?? renderFetchNode(node)} language="graphql" />
                   </div>
                 </DialogContent>
               </Dialog>
@@ -585,7 +587,13 @@ function visitNode(
                     Show details
                   </Button>
                 </DialogTrigger>
-                <DialogContent className="max-w-2xl! max-h-150 h-full w-full">
+                <DialogContent
+                  className="max-w-2xl! max-h-150 h-full w-full"
+                  onMouseDown={e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  }}
+                >
                   <DialogHeader>
                     <DialogTitle>BatchFetch</DialogTitle>
                   </DialogHeader>
@@ -622,6 +630,7 @@ function visitNode(
             </Tooltip>
           </div>
         </>,
+        detailsContent ?? renderFlattenNode(node),
       );
       break;
 
@@ -633,7 +642,13 @@ function visitNode(
       for (let i = 0; i < node.nodes.length; i++) {
         const child = node.nodes[i];
 
-        const childNode = visitNode(child, prevChild, i === 0 ? [] : nodes);
+        const childNode = visitNode(
+          child,
+          prevChild,
+          i === 0 ? [] : nodes,
+          contentPrefix,
+          renderSequenceNode(node),
+        );
 
         if (i === 0) {
           result = childNode;
@@ -653,7 +668,7 @@ function visitNode(
       result.children = [];
 
       for (const child of node.nodes) {
-        visitNode(child, result, result.children);
+        visitNode(child, result, result.children, contentPrefix, renderParallelNode(node));
       }
 
       break;
@@ -672,6 +687,7 @@ function visitNode(
               if: ${node.condition}
             </span>
           </div>,
+          renderConditionNode(node),
         );
       }
       if (node.elseClause) {
@@ -685,21 +701,22 @@ function visitNode(
               if: ${node.condition}
             </span>
           </div>,
+          renderConditionNode(node),
         );
       }
       break;
 
     case 'Subscription':
-      visitNode(node.primary, result, nodes);
+      visitNode(node.primary, result, nodes, contentPrefix, renderSubscriptionNode(node));
       break;
 
     case 'Defer':
       if (node.primary.node) {
-        visitNode(node.primary.node, result, nodes);
+        visitNode(node.primary.node, result, nodes, contentPrefix, renderDeferNode(node));
       }
       for (const deferred of node.deferred) {
         if (deferred.node) {
-          visitNode(deferred.node, result, nodes);
+          visitNode(deferred.node, result, nodes, contentPrefix, renderDeferNode(node));
         }
       }
       break;