ReplicationNode() — supabase Function Reference

Architecture documentation for the ReplicationNode() function in Nodes.tsx from the supabase codebase.

Function tsx ContentManagement Migrations calls 1

Entity Profile

ContentManagement→ Migrations→ ReplicationNode() — supabase Function Reference

Dependency Diagram

graph TD
  10d2dd0e_c2c3_d89a_4ccc_2ff1ab5e73b5["ReplicationNode()"]
  956d5adf_cba4_5df0_318e_1cd418cb5f89["getStatusName()"]
  10d2dd0e_c2c3_d89a_4ccc_2ff1ab5e73b5 -->|calls| 956d5adf_cba4_5df0_318e_1cd418cb5f89
  style 10d2dd0e_c2c3_d89a_4ccc_2ff1ab5e73b5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Nodes.tsx lines 67–123

export const ReplicationNode = ({ id }: { id: string }) => {
  const { ref: projectRef } = useParams()

  const { data: destinationsData } = useReplicationDestinationsQuery({ projectRef })
  const destination = (destinationsData?.destinations ?? []).find((x) => x.id.toString() === id)

  const { data: pipelinesData } = useReplicationPipelinesQuery({
    projectRef,
  })
  const pipeline = (pipelinesData?.pipelines ?? []).find((x) => x.destination_id.toString() === id)
  const { data: pipelineStatusData } = useReplicationPipelineStatusQuery(
    { projectRef, pipelineId: pipeline?.id },
    { refetchInterval: STATUS_REFRESH_FREQUENCY_MS }
  )
  const statusName = getStatusName(pipelineStatusData?.status)

  const config = destination?.config ?? {}
  const type =
    'big_query' in config ? 'BigQuery' : 'iceberg' in config ? 'Analytics Bucket' : undefined

  return (
    <NodeContainer className="justify-start gap-x-3">
      {type === 'BigQuery' ? (
        <BigQuery size={20} className="text-foreground-light" />
      ) : type === 'Analytics Bucket' ? (
        <AnalyticsBucket size={20} className="text-foreground-light" />
      ) : null}
      <div className="text-sm flex flex-col gap-y-0.5">
        <div className="flex items-center">
          <p>{type}</p>
          <Tooltip>
            <TooltipTrigger>
              <div className="w-6 h-full flex items-center justify-center">
                <div
                  className={cn(
                    'w-2 h-2 rounded-full',
                    statusName === 'started'
                      ? 'bg-brand'
                      : statusName === 'failed'
                        ? 'bg-destructive'
                        : 'bg-selection'
                  )}
                />
              </div>
            </TooltipTrigger>
            <TooltipContent side="bottom" className="capitalize">
              {statusName}
            </TooltipContent>
          </Tooltip>
        </div>
        <p className="text-foreground-light">{destination?.name}</p>
        <p className="text-foreground-light">ID: {destination?.id}</p>
      </div>
      <Handle type="target" position={Position.Left} className="opacity-25" />
    </NodeContainer>
  )
}