diff --git a/.changeset/flat-peas-run.md b/.changeset/flat-peas-run.md
new file mode 100644
index 0000000000..bb075ce910
--- /dev/null
+++ b/.changeset/flat-peas-run.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog-graph': patch
+---
+
+Added `renderEdge` prop to `` component in `@backstage/core-components` to allow custom rendering of graph edges.
diff --git a/packages/core-components/report.api.md b/packages/core-components/report.api.md
index b89b61ac77..9c9992deff 100644
--- a/packages/core-components/report.api.md
+++ b/packages/core-components/report.api.md
@@ -274,6 +274,7 @@ export interface DependencyGraphProps
paddingY?: number;
ranker?: DependencyGraphTypes.Ranker;
rankMargin?: number;
+ renderEdge?: DependencyGraphTypes.RenderEdgeFunction;
renderLabel?: DependencyGraphTypes.RenderLabelFunction;
renderNode?: DependencyGraphTypes.RenderNodeFunction;
showArrowHeads?: boolean;
@@ -316,6 +317,33 @@ export namespace DependencyGraphTypes {
NETWORK_SIMPLEX = 'network-simplex',
TIGHT_TREE = 'tight-tree',
}
+ export type RenderEdgeFunction = (
+ props: RenderEdgeProps,
+ ) => ReactNode;
+ export type RenderEdgeProps = {
+ edge: T & {
+ points: {
+ x: number;
+ y: number;
+ }[];
+ label?: string;
+ labeloffset?: number;
+ labelpos?: string;
+ width?: number;
+ height?: number;
+ weight?: number;
+ minlen?: number;
+ showArrowHeads?: boolean;
+ from?: string;
+ to?: string;
+ relations?: string[];
+ };
+ id: {
+ v: string;
+ w: string;
+ name?: string | undefined;
+ };
+ };
export type RenderLabelFunction = (
props: RenderLabelProps,
) => ReactNode;
diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
index 88cb6ab5e8..4b99402c3a 100644
--- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
+++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx
@@ -167,6 +167,10 @@ export interface DependencyGraphProps
* Weight applied to edges in graph
*/
edgeWeight?: number;
+ /**
+ * Custom edge rendering component
+ */
+ renderEdge?: Types.RenderEdgeFunction;
/**
* Custom node rendering component
*/
@@ -248,6 +252,7 @@ export function DependencyGraph(
labelOffset = 10,
edgeRanks = 1,
edgeWeight = 1,
+ renderEdge,
renderLabel,
defs,
zoom = 'enabled',
@@ -533,6 +538,8 @@ export function DependencyGraph(
{graphEdges.map(e => {
const edge = graph.current.edge(e) as GraphEdge;
if (!edge) return null;
+ if (renderEdge) return renderEdge({ edge, id: e });
+
return (
,
) => ReactNode;
+ /**
+ * Properties of {@link DependencyGraphTypes.RenderEdgeFunction} for {@link DependencyGraphTypes.DependencyEdge}
+ *
+ * @public
+ */
+ export type RenderEdgeProps = {
+ edge: T & {
+ points: { x: number; y: number }[];
+ label?: string;
+ labeloffset?: number;
+ labelpos?: string;
+ width?: number;
+ height?: number;
+ weight?: number;
+ minlen?: number;
+ showArrowHeads?: boolean;
+ from?: string;
+ to?: string;
+ relations?: string[];
+ };
+ id: {
+ v: string;
+ w: string;
+ name?: string | undefined;
+ };
+ };
+
+ /**
+ * Custom React component for graph {@link DependencyGraphTypes.DependencyEdge}
+ *
+ * @public
+ */
+ export type RenderEdgeFunction = (
+ props: RenderEdgeProps,
+ ) => ReactNode;
+
/**
* Graph direction
*
diff --git a/plugins/catalog-graph/report.api.md b/plugins/catalog-graph/report.api.md
index 8194209cf5..b7621d05ef 100644
--- a/plugins/catalog-graph/report.api.md
+++ b/plugins/catalog-graph/report.api.md
@@ -179,6 +179,7 @@ export type EntityRelationsGraphProps = {
zoom?: 'enabled' | 'disabled' | 'enable-on-click';
renderNode?: DependencyGraphTypes.RenderNodeFunction;
renderLabel?: DependencyGraphTypes.RenderLabelFunction;
+ renderEdge?: DependencyGraphTypes.RenderEdgeFunction;
curve?: 'curveStepBefore' | 'curveMonotoneX';
showArrowHeads?: boolean;
};
diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
index 17b5861173..e71f928c15 100644
--- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
+++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
@@ -89,6 +89,7 @@ export type EntityRelationsGraphProps = {
zoom?: 'enabled' | 'disabled' | 'enable-on-click';
renderNode?: DependencyGraphTypes.RenderNodeFunction;
renderLabel?: DependencyGraphTypes.RenderLabelFunction;
+ renderEdge?: DependencyGraphTypes.RenderEdgeFunction;
curve?: 'curveStepBefore' | 'curveMonotoneX';
showArrowHeads?: boolean;
};
@@ -114,6 +115,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
zoom = 'enabled',
renderNode,
renderLabel,
+ renderEdge,
curve,
showArrowHeads,
} = props;
@@ -156,6 +158,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => {
edges={edges}
renderNode={renderNode || DefaultRenderNode}
renderLabel={renderLabel || DefaultRenderLabel}
+ renderEdge={renderEdge}
direction={direction}
className={classes.graph}
fit="contain"