Merge pull request #31035 from MrOpperman/master

Add `renderEdge` function to the `<DependencyGraph />`

.changeset/flat-peas-run.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog-graph': patch
+---
+
+Added `renderEdge` prop to `<DependencyGraph />` component in `@backstage/core-components` to allow custom rendering of graph edges.

packages/core-components/report.api.md

@@ -274,6 +274,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
   paddingY?: number;
   ranker?: DependencyGraphTypes.Ranker;
   rankMargin?: number;
+  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EdgeData>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EdgeData>;
   renderNode?: DependencyGraphTypes.RenderNodeFunction<NodeData>;
   showArrowHeads?: boolean;
@@ -316,6 +317,33 @@ export namespace DependencyGraphTypes {
     NETWORK_SIMPLEX = 'network-simplex',
     TIGHT_TREE = 'tight-tree',
   }
+  export type RenderEdgeFunction<T = {}> = (
+    props: RenderEdgeProps<T>,
+  ) => ReactNode;
+  export type RenderEdgeProps<T = {}> = {
+    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<T = {}> = (
     props: RenderLabelProps<T>,
   ) => ReactNode;

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -167,6 +167,10 @@ export interface DependencyGraphProps<NodeData, EdgeData>
    * Weight applied to edges in graph
    */
   edgeWeight?: number;
+  /**
+   * Custom edge rendering component
+   */
+  renderEdge?: Types.RenderEdgeFunction<EdgeData>;
   /**
    * Custom node rendering component
    */
@@ -248,6 +252,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     labelOffset = 10,
     edgeRanks = 1,
     edgeWeight = 1,
+    renderEdge,
     renderLabel,
     defs,
     zoom = 'enabled',
@@ -533,6 +538,8 @@ export function DependencyGraph<NodeData, EdgeData>(
               {graphEdges.map(e => {
                 const edge = graph.current.edge(e) as GraphEdge<EdgeData>;
                 if (!edge) return null;
+                if (renderEdge) return renderEdge({ edge, id: e });
+
                 return (
                   <Edge
                     key={`${e.v}-${e.w}`}

packages/core-components/src/components/DependencyGraph/types.ts

@@ -93,6 +93,42 @@ export namespace DependencyGraphTypes {
     props: RenderNodeProps<T>,
   ) => ReactNode;
 
+  /**
+   * Properties of {@link DependencyGraphTypes.RenderEdgeFunction} for {@link DependencyGraphTypes.DependencyEdge}
+   *
+   * @public
+   */
+  export type RenderEdgeProps<T = {}> = {
+    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<T = {}> = (
+    props: RenderEdgeProps<T>,
+  ) => ReactNode;
+
   /**
    * Graph direction
    *

plugins/catalog-graph/report.api.md

@@ -179,6 +179,7 @@ export type EntityRelationsGraphProps = {
   zoom?: 'enabled' | 'disabled' | 'enable-on-click';
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
+  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
   showArrowHeads?: boolean;
 };

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx

@@ -89,6 +89,7 @@ export type EntityRelationsGraphProps = {
   zoom?: 'enabled' | 'disabled' | 'enable-on-click';
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
+  renderEdge?: DependencyGraphTypes.RenderEdgeFunction<EntityEdge>;
   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"