Better Style Designed by Gemini

frontend/src/components/dag/useDAGLayout.ts

@@ -72,7 +72,7 @@ export function useDAGLayout(
       nodesByCategory[node.category].push(node);
     }
 
-    // Sort nodes within each category by order, then re-index locally
+    // Sort nodes within each category by order
     for (const cat of Object.keys(nodesByCategory)) {
       nodesByCategory[cat].sort((a, b) => a.order - b.order);
     }
@@ -83,24 +83,66 @@ export function useDAGLayout(
       1
     );
     const maxTotalHeight = maxNodesInColumn * (nodeHeight + nodeSpacing) - nodeSpacing;
-    const contentStartY = headerHeight + headerGap;
+    const contentStartY = headerHeight + headerGap + 20; // Added extra top padding
 
-    // Layout constants - UNIFORM spacing for all columns
-    const colStep = 160; // Distance between column left edges (uniform for all)
+    // Layout constants - INCREASED spacing
+    const colStep = 340; // Reduced from 400
+    const nodeWidth = 240;
+    const headerWidth = 260;
+    const groupWidth = 300; // Reduced from 360 to be less "too wide"
 
-    // Helper function for column X position
+    // Helper function for column X position (Center of the column)
     const getColumnX = (colIndex: number) => colIndex * colStep;
 
+    // 0. Add Group Nodes (Backgrounds) - Rendered first
+    sortedCategories.forEach((cat, colIndex) => {
+      const categoryNodes = nodesByCategory[cat.name] || [];
+      const columnX = getColumnX(colIndex + 1); // +1 because column 0 is query
+
+      // Calculate group height to include header and attributes
+      const nodesCount = categoryNodes.length;
+      const nodesHeight = Math.max(
+        nodesCount * (nodeHeight + nodeSpacing) - nodeSpacing,
+        0
+      );
+
+      // Start group above the header (header is at y=0)
+      const groupStartY = -20;
+      const groupPaddingBottom = 20;
+
+      // Total height = distance from startY to contentStart + nodes height + bottom padding
+      const groupHeight = (contentStartY - groupStartY) + nodesHeight + groupPaddingBottom;
+
+      nodes.push({
+        id: `group-${cat.name}`,
+        type: 'group',
+        position: {
+          x: columnX - groupWidth / 2, // Centered
+          y: groupStartY
+        },
+        data: {
+          label: '', // Label is handled by header node
+          color: categoryColors[cat.name]?.fill || '#666',
+          width: groupWidth,
+          height: Math.max(groupHeight, 100), // Ensure min height
+          isDark,
+        },
+        draggable: false,
+        selectable: false,
+        zIndex: -1,
+      });
+    });
+
     // 1. Add Query Node (column 0, centered vertically)
     const queryY = contentStartY + (maxTotalHeight - nodeHeight) / 2;
     nodes.push({
       id: 'query-node',
       type: 'query',
-      position: { x: getColumnX(0), y: queryY },
+      position: { x: getColumnX(0) - 60, y: queryY }, // Assuming query node width ~120
       data: {
         label: data.query,
         isDark,
-        fontSize,
+        fontSize: fontSize + 2,
       },
       draggable: false,
       selectable: false,
@@ -108,11 +150,11 @@ export function useDAGLayout(
 
     // 2. Add Category Headers (starting from column 1)
     sortedCategories.forEach((cat, colIndex) => {
-      const columnX = getColumnX(colIndex + 1); // +1 because column 0 is query
+      const columnX = getColumnX(colIndex + 1);
       nodes.push({
         id: `header-${cat.name}`,
         type: 'categoryHeader',
-        position: { x: columnX, y: 0 },
+        position: { x: columnX - headerWidth / 2, y: 0 }, // Centered
         data: {
           label: cat.name,
           color: categoryColors[cat.name]?.fill || '#666',
@@ -121,20 +163,21 @@ export function useDAGLayout(
         },
         draggable: false,
         selectable: false,
+        zIndex: 10,
       });
     });
 
     // 3. Add Attribute Nodes
     sortedCategories.forEach((cat, colIndex) => {
       const categoryNodes = nodesByCategory[cat.name] || [];
-      const columnX = getColumnX(colIndex + 1); // +1 because column 0 is query
+      const columnX = getColumnX(colIndex + 1);
 
       categoryNodes.forEach((node, rowIndex) => {
         const y = contentStartY + rowIndex * (nodeHeight + nodeSpacing);
         nodes.push({
           id: node.id,
           type: 'attribute',
-          position: { x: columnX, y },
+          position: { x: columnX - nodeWidth / 2, y }, // Centered
           data: {
             label: node.name,
             fillColor: categoryColors[node.category]?.fill || '#666',
@@ -143,6 +186,7 @@ export function useDAGLayout(
           },
           draggable: false,
           selectable: false,
+          zIndex: 5,
         });
       });
     });