diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md index aa7c2faa52..6adb7e98b4 100644 --- a/.changeset/forty-beers-sniff.md +++ b/.changeset/forty-beers-sniff.md @@ -1,5 +1,6 @@ --- '@backstage/core-components': patch +'@backstage/plugin-catalog-graph': patch --- -Added arrow heads for graph edges in `DependencyGraph` for better understandability. +Added possibility to show arrow heads for graph edges in `DependencyGraph` for better understandability. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index b5d54dd606..27b9c62653 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -265,6 +265,7 @@ export interface DependencyGraphProps rankMargin?: number; renderLabel?: DependencyGraphTypes.RenderLabelFunction; renderNode?: DependencyGraphTypes.RenderNodeFunction; + showArrowHeads?: boolean; zoom?: 'enabled' | 'disabled' | 'enable-on-click'; } diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index d4907d2a18..b1449d1b70 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -160,6 +160,12 @@ export interface DependencyGraphProps * Default: 'curveMonotoneX' */ curve?: 'curveStepBefore' | 'curveMonotoneX'; + /** + * Controls if the arrow heads should be rendered or not. + * + * Default: true + */ + showArrowHeads?: boolean; /** * Controls if the graph should be contained or grow * @@ -201,6 +207,7 @@ export function DependencyGraph( defs, zoom = 'enabled', curve = 'curveMonotoneX', + showArrowHeads = true, fit = 'grow', ...svgProps } = props; @@ -436,6 +443,7 @@ export function DependencyGraph( render={renderLabel} edge={edge} curve={curve} + showArrowHeads={showArrowHeads} /> ); })} diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index 57aaa38727..6a1f8861bf 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -67,6 +67,7 @@ export type EdgeComponentProps = { edge: Types.DependencyEdge, ) => dagre.graphlib.Graph<{}>; curve: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; const renderDefault = (props: Types.RenderLabelProps) => ( @@ -79,6 +80,7 @@ export function Edge({ id, edge, curve, + showArrowHeads, }: EdgeComponentProps) { const { x = 0, y = 0, width, height, points } = edge; const labelProps: Types.DependencyEdge = edge; @@ -129,7 +131,7 @@ export function Edge({ )} diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index ba75943843..8f75e52289 100644 --- a/plugins/catalog-graph/api-report.md +++ b/plugins/catalog-graph/api-report.md @@ -123,6 +123,7 @@ export type EntityRelationsGraphProps = { renderNode?: DependencyGraphTypes.RenderNodeFunction; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; // @public diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index 654aaff969..35f76a7de0 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -84,6 +84,7 @@ export type EntityRelationsGraphProps = { renderNode?: DependencyGraphTypes.RenderNodeFunction; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; /** @@ -107,6 +108,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { renderNode, renderLabel, curve, + showArrowHeads, } = props; const theme = useTheme(); @@ -154,6 +156,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { labelOffset={theme.spacing(1)} zoom={zoom} curve={curve} + showArrowHeads={showArrowHeads} /> )}