refactor(pathways): simplify graph to clean top-down tree layout

- Simplified dagre layout to pure top-down tree (TB)
- Increased spacing: 60px horizontal, 120px vertical
- Removed complex connected component handling
- Use fitView for better initial centering
- Cleaner visual hierarchy: Resume → Jobs → Secondary Jobs

Author: thomasdavis

apps/registry/app/[username]/jobs-graph/utils/graphLayout.js

@@ -2,105 +2,41 @@ import dagre from '@dagrejs/dagre';
 
 // Node dimensions - must match actual rendered sizes
 const NODE_WIDTH = 200;
-const NODE_HEIGHT = 100;
+const NODE_HEIGHT = 120;
 const RESUME_WIDTH = 140;
-const RESUME_HEIGHT = 70;
+const RESUME_HEIGHT = 80;
+
+// Spacing - generous to avoid overlap
+const HORIZONTAL_SPACING = 60; // Space between sibling nodes
+const VERTICAL_SPACING = 120; // Space between levels (ranks)
 
 /**
- * Applies Dagre graph layout algorithm to React Flow nodes and edges
- * Handles disconnected components by laying them out in a grid
+ * Applies a clean top-down tree layout
+ * Resume at top, primary jobs below, secondary jobs below those
  * @param {Array} nodes - React Flow nodes
  * @param {Array} edges - React Flow edges
- * @param {string} direction - Layout direction ('TB', 'LR', etc.)
+ * @param {string} direction - Layout direction ('TB' = top-bottom)
  * @returns {Object} Layouted nodes and edges
  */
 export const getLayoutedElements = (nodes, edges, direction = 'TB') => {
   if (nodes.length === 0) return { nodes: [], edges };
 
-  // Find connected components
-  const components = findConnectedComponents(nodes, edges);
-
-  // Layout each component separately
-  const layoutedComponents = components.map((component) =>
-    layoutComponent(component.nodes, component.edges, direction)
-  );
-
-  // Arrange components in a compact grid layout
-  const finalNodes = arrangeComponents(layoutedComponents);
-
-  return { nodes: finalNodes, edges };
-};
-
-/**
- * Find connected components in the graph
- */
-function findConnectedComponents(nodes, edges) {
-  const visited = new Set();
-  const components = [];
-
-  // Build adjacency list (undirected)
-  const adj = new Map();
-  nodes.forEach((n) => adj.set(n.id, new Set()));
-  edges.forEach((e) => {
-    if (adj.has(e.source) && adj.has(e.target)) {
-      adj.get(e.source).add(e.target);
-      adj.get(e.target).add(e.source);
-    }
-  });
-
-  // DFS to find components
-  function dfs(nodeId, component) {
-    if (visited.has(nodeId)) return;
-    visited.add(nodeId);
-    component.add(nodeId);
-    for (const neighbor of adj.get(nodeId) || []) {
-      dfs(neighbor, component);
-    }
-  }
-
-  for (const node of nodes) {
-    if (!visited.has(node.id)) {
-      const component = new Set();
-      dfs(node.id, component);
-      const componentNodes = nodes.filter((n) => component.has(n.id));
-      const componentEdges = edges.filter(
-        (e) => component.has(e.source) && component.has(e.target)
-      );
-      components.push({ nodes: componentNodes, edges: componentEdges });
-    }
-  }
-
-  // Sort components: main tree (with resume) first, then by size
-  components.sort((a, b) => {
-    const aHasResume = a.nodes.some((n) => n.data?.isResume);
-    const bHasResume = b.nodes.some((n) => n.data?.isResume);
-    if (aHasResume && !bHasResume) return -1;
-    if (!aHasResume && bHasResume) return 1;
-    return b.nodes.length - a.nodes.length;
-  });
-
-  return components;
-}
-
-/**
- * Layout a single connected component using dagre
- */
-function layoutComponent(nodes, edges, direction) {
   const dagreGraph = new dagre.graphlib.Graph();
   dagreGraph.setDefaultEdgeLabel(() => ({}));
 
+  // Configure for a clean top-down tree
   dagreGraph.setGraph({
     rankdir: direction,
     align: 'UL',
-    nodesep: 20, // Horizontal spacing between nodes
-    ranksep: 60, // Vertical spacing between ranks
-    edgesep: 10,
-    marginx: 20,
-    marginy: 20,
-    acyclicer: 'greedy',
-    ranker: 'tight-tree', // More compact than network-simplex
+    nodesep: HORIZONTAL_SPACING,
+    ranksep: VERTICAL_SPACING,
+    edgesep: 20,
+    marginx: 50,
+    marginy: 50,
+    ranker: 'tight-tree',
   });
 
+  // Add nodes to dagre
   nodes.forEach((node) => {
     const isResume = node.data?.isResume;
     dagreGraph.setNode(node.id, {
@@ -109,94 +45,29 @@ function layoutComponent(nodes, edges, direction) {
     });
   });
 
+  // Add edges to dagre
   edges.forEach((edge) => {
     dagreGraph.setEdge(edge.source, edge.target);
   });
 
+  // Run layout
   dagre.layout(dagreGraph);
 
-  // Calculate bounding box
-  let minX = Infinity,
-    minY = Infinity,
-    maxX = -Infinity,
-    maxY = -Infinity;
-
+  // Apply positions
   const layoutedNodes = nodes.map((node) => {
     const pos = dagreGraph.node(node.id);
     const isResume = node.data?.isResume;
     const width = isResume ? RESUME_WIDTH : NODE_WIDTH;
     const height = isResume ? RESUME_HEIGHT : NODE_HEIGHT;
 
-    // Dagre returns center position, convert to top-left
-    const x = pos.x - width / 2;
-    const y = pos.y - height / 2;
-
-    minX = Math.min(minX, x);
-    minY = Math.min(minY, y);
-    maxX = Math.max(maxX, x + width);
-    maxY = Math.max(maxY, y + height);
-
     return {
       ...node,
-      position: { x, y },
-    };
-  });
-
-  return {
-    nodes: layoutedNodes,
-    width: maxX - minX,
-    height: maxY - minY,
-    minX,
-    minY,
-  };
-}
-
-/**
- * Arrange multiple components in a grid to avoid overlap
- */
-function arrangeComponents(components) {
-  if (components.length === 0) return [];
-  if (components.length === 1) {
-    // Single component - normalize to origin
-    const comp = components[0];
-    return comp.nodes.map((n) => ({
-      ...n,
       position: {
-        x: n.position.x - comp.minX,
-        y: n.position.y - comp.minY,
+        x: pos.x - width / 2,
+        y: pos.y - height / 2,
       },
-    }));
-  }
-
-  const allNodes = [];
-  let currentX = 0;
-  let currentY = 0;
-  let rowHeight = 0;
-  const maxRowWidth = 2000; // Max width before wrapping to next row
-  const gap = 80; // Gap between components
-
-  for (const comp of components) {
-    // Check if we need to wrap to next row
-    if (currentX + comp.width > maxRowWidth && currentX > 0) {
-      currentX = 0;
-      currentY += rowHeight + gap;
-      rowHeight = 0;
-    }
-
-    // Add nodes with offset
-    for (const node of comp.nodes) {
-      allNodes.push({
-        ...node,
-        position: {
-          x: node.position.x - comp.minX + currentX,
-          y: node.position.y - comp.minY + currentY,
-        },
-      });
-    }
-
-    currentX += comp.width + gap;
-    rowHeight = Math.max(rowHeight, comp.height);
-  }
+    };
+  });
 
-  return allNodes;
-}
+  return { nodes: layoutedNodes, edges };
+};

apps/registry/app/pathways/components/PathwaysGraph.js

@@ -116,26 +116,19 @@ export default function PathwaysGraph() {
           onEdgesChange={onEdgesChange}
           onNodeClick={handleNodeClick}
           onMoveEnd={handleMoveEnd}
-          fitView={false}
+          fitView
+          fitViewOptions={{ padding: 0.2, maxZoom: 1.5 }}
           minZoom={0.05}
           maxZoom={4}
-          defaultViewport={initialViewport || { x: 0, y: 0, zoom: 1.2 }}
+          defaultViewport={initialViewport || { x: 0, y: 0, zoom: 1 }}
           onInit={(instance) => {
             setReactFlowInstance(instance);
-            // If we have saved viewport, use it; otherwise center on resume
+            // If we have saved viewport, use it; otherwise fit view
             if (initialViewport) {
               instance.setViewport(initialViewport, { duration: 0 });
             } else {
-              setTimeout(() => {
-                const resumeNode = nodes.find((node) => node.data?.isResume);
-                if (resumeNode) {
-                  instance.setCenter(
-                    resumeNode.position.x,
-                    resumeNode.position.y,
-                    { zoom: 1.2, duration: 800 }
-                  );
-                }
-              }, 100);
+              // Fit view to show all nodes
+              setTimeout(() => instance.fitView({ padding: 0.2 }), 100);
             }
           }}
           proOptions={{ hideAttribution: true }}