diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx
index 2bf303bb92..5d9e9b18a6 100644
--- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx
+++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.test.tsx
@@ -21,6 +21,7 @@ import {
RELATION_OWNER_OF,
RELATION_PART_OF,
} from '@backstage/catalog-model';
+import { DependencyGraphTypes } from '@backstage/core-components';
import { CatalogApi, catalogApiRef } from '@backstage/plugin-catalog-react';
import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
import userEvent from '@testing-library/user-event';
@@ -30,6 +31,7 @@ import { EntityRelationsGraph } from './EntityRelationsGraph';
describe('', () => {
let Wrapper: FunctionComponent;
let catalog: jest.Mocked;
+ const CUSTOM_TEST_ID = 'custom-test-id';
beforeAll(() => {
Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
@@ -378,4 +380,49 @@ describe('', () => {
userEvent.click(await findByText('k:d/a1'));
expect(onNodeClick).toBeCalledTimes(1);
});
+
+ test('render custom node', async () => {
+ const renderNode = (props: DependencyGraphTypes.RenderNodeProps) => (
+
+ {props.node.id}
+
+
+ );
+
+ const { findAllByTestId, container } = await renderInTestApp(
+
+
+ ,
+ );
+
+ const node = await findAllByTestId(CUSTOM_TEST_ID);
+ expect(node[0]).toBeInTheDocument();
+ expect(container.querySelector('circle')).toBeInTheDocument();
+ });
+
+ test('render custom label', async () => {
+ const renderLabel = (props: DependencyGraphTypes.RenderLabelProps) => (
+
+ {`Test-Label${props.edge.label}`}
+
+
+ );
+
+ const { findAllByTestId, findAllByText, container } = await renderInTestApp(
+
+
+ ,
+ );
+ const node = await findAllByTestId(CUSTOM_TEST_ID);
+ expect(node[0]).toBeInTheDocument();
+ expect(container.querySelector('circle')).toBeInTheDocument();
+ const labels = await findAllByText('Test-Labelvisible');
+ expect(labels[0]).toBeInTheDocument();
+ });
});
diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
index 19ca5398a6..bf3fbf8f3a 100644
--- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
+++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx
@@ -28,7 +28,7 @@ import React, { MouseEvent, useEffect, useMemo } from 'react';
import { CustomLabel } from './CustomLabel';
import { CustomNode } from './CustomNode';
import { ALL_RELATION_PAIRS, RelationPairs } from './relations';
-import { Direction, EntityNode } from './types';
+import { Direction, EntityEdge, EntityNode } from './types';
import { useEntityRelationNodesAndEdges } from './useEntityRelationNodesAndEdges';
const useStyles = makeStyles(theme => ({
@@ -93,8 +93,8 @@ export const EntityRelationsGraph = ({
relationPairs?: RelationPairs;
className?: string;
zoom?: 'enabled' | 'disabled' | 'enable-on-click';
- renderNode?: any;
- renderLabel?: any;
+ renderNode?: DependencyGraphTypes.RenderNodeFunction;
+ renderLabel?: DependencyGraphTypes.RenderLabelFunction;
}) => {
const theme = useTheme();
const classes = useStyles();