diff --git a/.changeset/catalog-graph-use-presentation-api.md b/.changeset/catalog-graph-use-presentation-api.md
new file mode 100644
index 0000000000..b0d73629b4
--- /dev/null
+++ b/.changeset/catalog-graph-use-presentation-api.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-graph': patch
+---
+
+Replaced `humanizeEntityRef` with the Catalog Presentation API in `CatalogGraphCard` and `CatalogGraphPage` components for consistent entity display.
diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
index 3ae8310280..706fafa177 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.test.tsx
@@ -241,7 +241,7 @@ describe('', () => {
expect(analyticsApi.captureEvent).toHaveBeenCalledWith(
expect.objectContaining({
action: 'click',
- subject: 'b:d/c',
+ subject: 'd/c',
attributes: {
to: '/entity/{kind}/{namespace}/{name}',
},
diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
index 10ba73e2b6..0510adb53a 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx
@@ -22,7 +22,7 @@ import {
import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
import {
EntityInfoCard,
- humanizeEntityRef,
+ entityPresentationSnapshot,
useEntity,
entityRouteRef,
} from '@backstage/plugin-catalog-react';
@@ -100,7 +100,7 @@ export const CatalogGraphCard = (
});
analytics.captureEvent(
'click',
- node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),
+ entityPresentationSnapshot(node.entity).primaryTitle,
{ attributes: { to: path } },
);
navigate(path);
diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx
index 93bdc94860..16b54e2717 100644
--- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx
+++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx
@@ -24,8 +24,8 @@ import {
} from '@backstage/core-components';
import { useAnalytics, useRouteRef } from '@backstage/core-plugin-api';
import {
+ entityPresentationSnapshot,
entityRouteRef,
- humanizeEntityRef,
} from '@backstage/plugin-catalog-react';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
@@ -160,6 +160,7 @@ export const CatalogGraphPage = (
const onNodeClick = useCallback(
(node: EntityNode, event: MouseEvent) => {
const nodeEntityName = parseEntityRef(node.id);
+ const nodeTitle = entityPresentationSnapshot(node.entity).primaryTitle;
if (event.shiftKey) {
const path = catalogEntityRoute({
@@ -168,17 +169,12 @@ export const CatalogGraphPage = (
name: nodeEntityName.name,
});
- analytics.captureEvent(
- 'click',
- node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),
- { attributes: { to: path } },
- );
+ analytics.captureEvent('click', nodeTitle, {
+ attributes: { to: path },
+ });
navigate(path);
} else {
- analytics.captureEvent(
- 'click',
- node.entity.metadata.title ?? humanizeEntityRef(nodeEntityName),
- );
+ analytics.captureEvent('click', nodeTitle);
setRootEntityNames([nodeEntityName]);
}
},
@@ -189,7 +185,9 @@ export const CatalogGraphPage = (
humanizeEntityRef(e)).join(', ')}
+ subtitle={rootEntityNames
+ .map(e => entityPresentationSnapshot(e).primaryTitle)
+ .join(', ')}
/>