Add changeset

Signed-off-by: TA31OU <kyle.opperman@ing.com>
(cherry picked from commit ce965429e38c3817432085b97a63447289586af3)

.changeset/flat-peas-run.md

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

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

@@ -138,6 +138,11 @@ 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
    */
@@ -210,6 +215,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     labelOffset = 10,
     edgeRanks = 1,
     edgeWeight = 1,
+    renderEdge,
     renderLabel,
     defs,
     zoom = 'enabled',
@@ -442,6 +448,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

@@ -21,6 +21,7 @@
  */
 
 import { ReactNode } from 'react';
+import dagre from '@dagrejs/dagre';
 
 /**
  * Types for the {@link DependencyGraph} component.
@@ -89,6 +90,39 @@ export namespace DependencyGraphTypes {
     props: RenderNodeProps<T>,
   ) => ReactNode;
 
+  /**
+   * Properties of {@link DependencyGraphTypes.RenderEdgeFunction} for {@link DependencyGraphTypes.DependencyEdge}
+   *
+   * @public
+   */
+  export type RenderEdgeProps<T = unknown> = {
+    edge: DependencyEdge<T>;
+    id: dagre.Edge;
+  };
+
+  /**
+   * Custom React component for graph {@link DependencyGraphTypes.DependencyEdge}
+   *
+   * @public
+   */
+  export type RenderEdgeFunction<T = {}> = (props: {
+    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 };
+  }) => ReactNode;
+
   /**
    * Graph direction
    *

plugins/catalog-graph/package.json

@@ -61,6 +61,7 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.61",
     "classnames": "^2.3.1",
+    "d3-shape": "^3.0.0",
     "lodash": "^4.17.15",
     "p-limit": "^3.1.0",
     "qs": "^6.9.4",
@@ -76,6 +77,7 @@
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
+    "@types/d3-shape": "^3.0.1",
     "@types/react": "^18.0.0",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",

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

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */

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}
           paddingX={theme.spacing(4)}

plugins/catalog-graph/src/components/EntityRelationsGraph/useEntityStore.ts

@@ -64,7 +64,7 @@ export function useEntityStore(): {
       return;
     }
 
-    const { items } = await catalogClient.getEntitiesByRefs({ entityRefs });
+    const { items } = await catalogClient.getEntities();
     items.forEach(ent => {
       if (ent) {
         const entityRef = stringifyEntityRef(ent);

yarn.lock

@@ -4771,8 +4771,10 @@ __metadata:
     "@testing-library/jest-dom": "npm:^6.0.0"
     "@testing-library/react": "npm:^16.0.0"
     "@testing-library/user-event": "npm:^14.0.0"
+    "@types/d3-shape": "npm:^3.0.1"
     "@types/react": "npm:^18.0.0"
     classnames: "npm:^2.3.1"
+    d3-shape: "npm:^3.0.0"
     lodash: "npm:^4.17.15"
     p-limit: "npm:^3.1.0"
     qs: "npm:^6.9.4"