DependencyGraphProps

Home > @backstage/core-components > DependencyGraphProps

Properties of DependencyGraph()

Signature:

export interface DependencyGraphProps<NodeData, EdgeData> extends React.SVGProps<SVGSVGElement> 

Extends: React.SVGProps<SVGSVGElement>

Remarks

<NodeData> and <EdgeData> are useful when rendering custom or edge labels

Properties

Property	Modifiers	Type	Description
acyclicer?		'greedy'	(Optional) Heuristic used to find set of edges that will make graph acyclic
align?		Types.Alignment	(Optional) Node alignment
curve?		'curveStepBefore' | 'curveMonotoneX'	(Optional) A factory for curve generators addressing both lines and areas.
defs?		JSX.Element | JSX.Element[]	(Optional) Defs shared by rendered SVG to be used by DependencyGraphProps.renderNode and/or DependencyGraphProps.renderLabel
direction?		Types.Direction	(Optional) Graph direction
edgeMargin?		number	(Optional) Margin between edges
edgeRanks?		number	(Optional) Minimum number of ranks to keep between connected nodes
edges		Types.DependencyEdge<EdgeData>[]	Edges of graph
edgeWeight?		number	(Optional) Weight applied to edges in graph
fit?		'grow' | 'contain'	(Optional) Controls if the graph should be contained or grow
labelOffset?		number	(Optional) How much to move label away from edge
labelPosition?		Types.LabelPosition	(Optional) Position of label in relation to edge
nodeMargin?		number	(Optional) Margin between nodes on each rank
nodes		Types.DependencyNode<NodeData>[]	Nodes of Graph
paddingX?		number	(Optional) Margin on left and right of whole graph
paddingY?		number	(Optional) Margin on top and bottom of whole graph
ranker?		Types.Ranker	(Optional) Algorithm used to rank nodes
rankMargin?		number	(Optional) Margin between each rank
renderLabel?		Types.RenderLabelFunction<EdgeData>	(Optional) Custom label rendering component
renderNode?		Types.RenderNodeFunction<NodeData>	(Optional) Custom node rendering component
showArrowHeads?		boolean	(Optional) Controls if the arrow heads should be rendered or not. Default: false
zoom?		'enabled' | 'disabled' | 'enable-on-click'	(Optional) Controls zoom behavior of graph