getDagreGraphLayout() — supabase Function Reference

Architecture documentation for the getDagreGraphLayout() function in ReplicationDiagram.utils.ts from the supabase codebase.

Function typescript ContentManagement Migrations called by 1

Entity Profile

ContentManagement→ Migrations→ getDagreGraphLayout() — supabase Function Reference

Dependency Diagram

graph TD
  67c84f4d_4c44_07f8_75c0_67c73b169bf4["getDagreGraphLayout()"]
  c81d881a_d811_1ac3_9fe7_4fc0ada32665["ReplicationDiagramContent()"]
  c81d881a_d811_1ac3_9fe7_4fc0ada32665 -->|calls| 67c84f4d_4c44_07f8_75c0_67c73b169bf4
  style 67c84f4d_4c44_07f8_75c0_67c73b169bf4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/ReplicationDiagram.utils.ts lines 9–45

export const getDagreGraphLayout = (nodes: Node[], edges: Edge[]) => {
  const dagreGraph = new dagre.graphlib.Graph()
  dagreGraph.setDefaultEdgeLabel(() => ({}))
  dagreGraph.setGraph({
    rankdir: 'LR',
    ranksep: 200,
    nodesep: NODE_SEP,
    align: nodes.length <= 2 ? 'UL' : undefined,
  })

  nodes.forEach((node) => {
    dagreGraph.setNode(node.id, {
      width: NODE_WIDTH / 2,
      height: NODE_ROW_HEIGHT / 2,
    })
  })

  edges.forEach((edge) => dagreGraph.setEdge(edge.source, edge.target))

  dagre.layout(dagreGraph)

  nodes.forEach((node) => {
    const nodeWithPosition = dagreGraph.node(node.id)
    node.sourcePosition = Position.Right
    node.targetPosition = Position.Left
    // We are shifting the dagre node position (anchor=center center) to the top left
    // so it matches the React Flow node anchor point (top left).
    node.position = {
      x: nodeWithPosition.x - nodeWithPosition.width / 2,
      y: nodeWithPosition.y - nodeWithPosition.height / 2,
    }

    return node
  })

  return { nodes, edges }
}