From d5899c2362a94f27342148ad41fd2ebe8eccf9cf Mon Sep 17 00:00:00 2001 From: Riley Martine Date: Fri, 3 Apr 2026 06:34:45 -0600 Subject: [PATCH] Allow passing showArrowHeads to entity-card:catalog-graph/relations and /catalog-graph page (#33706) * Allow passing showArrowHeads to entity-card:catalog-graph/relations and /catalog-graph page Signed-off-by: Riley Martine * Update .changeset/nine-signs-end.md Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --------- Signed-off-by: Riley Martine Signed-off-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> Co-authored-by: Aramis Sennyey <159921952+aramissennyeydd@users.noreply.github.com> --- .changeset/nine-signs-end.md | 5 +++++ plugins/catalog-graph/README-alpha.md | 2 ++ plugins/catalog-graph/report-alpha.api.md | 4 ++++ plugins/catalog-graph/src/alpha.tsx | 2 ++ .../src/components/CatalogGraphCard/CatalogGraphCard.tsx | 2 ++ .../src/components/CatalogGraphPage/CatalogGraphPage.tsx | 3 ++- 6 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 .changeset/nine-signs-end.md diff --git a/.changeset/nine-signs-end.md b/.changeset/nine-signs-end.md new file mode 100644 index 0000000000..544b0bb231 --- /dev/null +++ b/.changeset/nine-signs-end.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog-graph': patch +--- + +Support configuring `showArrowHeads` on `page:catalog-graph` and `entity-card:catalog-graph/relations`. diff --git a/plugins/catalog-graph/README-alpha.md b/plugins/catalog-graph/README-alpha.md index 90481caca6..b7cd5f65be 100644 --- a/plugins/catalog-graph/README-alpha.md +++ b/plugins/catalog-graph/README-alpha.md @@ -165,6 +165,7 @@ See below the complete list of available configs: | `maxDepth` | A maximum number of levels of relations to display in the graph. | `number` | yes | `1` | | `unidirectional` | Shows only relations that are from the source to the target entity. | `boolean` | yes | `true` | | `mergeRelations` | Merge the relations line into a single one. | `boolean` | yes | `true` | +| `showArrowHeads` | Show arrowheads on the relation lines | `boolean` | yes | `false` | | `direction` | Render direction of the graph. | `TB` \| `BT` \| `LR` \| `RL` | yes | `'LR'` | | `relationPairs` | A list of [pairs of entity relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations), used to define which relations are merged together and which the primary relation is. | `[string[], string[]]` | yes | Show all entity [relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations). | | `zoom` | Controls zoom behavior of graph. | `enabled` \| `disabled` \| `enable-on-click` | yes | `'enabled'` | @@ -265,6 +266,7 @@ See below the complete list of available configs: | `maxDepth` | A maximum number of levels of relations to display in the graph. | `number` | yes | `1` | | `unidirectional` | Shows only relations that are from the source to the target entity. | `boolean` | yes | `true` | | `mergeRelations` | Merge the relations line into a single one. | `boolean` | yes | `true` | +| `showArrowHeads` | Show arrowheads on the relation lines | `boolean` | yes | `false` | | `direction` | Render direction of the graph. | `TB` \| `BT` \| `LR` \| `RL` | yes | `'LR'` | | `relationPairs` | A list of [pairs of entity relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations), used to define which relations are merged together and which the primary relation is. | `[string[], string[]]` | yes | Show all entity [relations](https://backstage.io/docs/features/software-catalog/well-known-relations#relations). | | `zoom` | Controls zoom behavior of graph. | `enabled` \| `disabled` \| `enable-on-click` | yes | `'enabled'` | diff --git a/plugins/catalog-graph/report-alpha.api.md b/plugins/catalog-graph/report-alpha.api.md index 8bfbe17e9b..44a9bbfb61 100644 --- a/plugins/catalog-graph/report-alpha.api.md +++ b/plugins/catalog-graph/report-alpha.api.md @@ -88,6 +88,7 @@ const _default: OverridableFrontendPlugin< maxDepth: number | undefined; unidirectional: boolean | undefined; mergeRelations: boolean | undefined; + showArrowHeads: boolean | undefined; direction: 'TB' | 'BT' | 'LR' | 'RL' | undefined; relationPairs: [string, string][] | undefined; zoom: 'disabled' | 'enabled' | 'enable-on-click' | undefined; @@ -103,6 +104,7 @@ const _default: OverridableFrontendPlugin< direction?: 'TB' | 'BT' | 'LR' | 'RL' | undefined; zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined; title?: string | undefined; + showArrowHeads?: boolean | undefined; relations?: string[] | undefined; maxDepth?: number | undefined; kinds?: string[] | undefined; @@ -152,6 +154,7 @@ const _default: OverridableFrontendPlugin< maxDepth: number | undefined; unidirectional: boolean | undefined; mergeRelations: boolean | undefined; + showArrowHeads: boolean | undefined; direction: 'TB' | 'BT' | 'LR' | 'RL' | undefined; showFilters: boolean | undefined; curve: 'curveStepBefore' | 'curveMonotoneX' | undefined; @@ -166,6 +169,7 @@ const _default: OverridableFrontendPlugin< curve?: 'curveStepBefore' | 'curveMonotoneX' | undefined; direction?: 'TB' | 'BT' | 'LR' | 'RL' | undefined; zoom?: 'disabled' | 'enabled' | 'enable-on-click' | undefined; + showArrowHeads?: boolean | undefined; relations?: string[] | undefined; maxDepth?: number | undefined; rootEntityRefs?: string[] | undefined; diff --git a/plugins/catalog-graph/src/alpha.tsx b/plugins/catalog-graph/src/alpha.tsx index f1b4dbc6d0..9d77c35020 100644 --- a/plugins/catalog-graph/src/alpha.tsx +++ b/plugins/catalog-graph/src/alpha.tsx @@ -37,6 +37,7 @@ const CatalogGraphEntityCard = EntityCardBlueprint.makeWithOverrides({ maxDepth: z => z.number().optional(), unidirectional: z => z.boolean().optional(), mergeRelations: z => z.boolean().optional(), + showArrowHeads: z => z.boolean().optional(), direction: z => z.nativeEnum(Direction).optional(), relationPairs: z => z.array(z.tuple([z.string(), z.string()])).optional(), zoom: z => z.enum(['enabled', 'disabled', 'enable-on-click']).optional(), @@ -66,6 +67,7 @@ const CatalogGraphPage = PageBlueprint.makeWithOverrides({ maxDepth: z => z.number().optional(), unidirectional: z => z.boolean().optional(), mergeRelations: z => z.boolean().optional(), + showArrowHeads: z => z.boolean().optional(), direction: z => z.nativeEnum(Direction).optional(), showFilters: z => z.boolean().optional(), curve: z => z.enum(['curveStepBefore', 'curveMonotoneX']).optional(), diff --git a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx index 20b4074f79..10ba73e2b6 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphCard/CatalogGraphCard.tsx @@ -68,6 +68,7 @@ export const CatalogGraphCard = ( maxDepth = 1, unidirectional = true, mergeRelations = true, + showArrowHeads, direction = Direction.LEFT_RIGHT, kinds, relations, @@ -147,6 +148,7 @@ export const CatalogGraphCard = ( relationPairs={relationPairs} entityFilter={entityFilter} zoom={zoom} + showArrowHeads={showArrowHeads} /> ); diff --git a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx index 7e6420da1f..93bdc94860 100644 --- a/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx +++ b/plugins/catalog-graph/src/components/CatalogGraphPage/CatalogGraphPage.tsx @@ -131,7 +131,7 @@ export const CatalogGraphPage = ( }; } & Partial, ) => { - const { relationPairs, initialState, entityFilter } = props; + const { relationPairs, initialState, entityFilter, showArrowHeads } = props; const { t } = useTranslationRef(catalogGraphTranslationRef); const navigate = useNavigate(); const classes = useStyles(); @@ -260,6 +260,7 @@ export const CatalogGraphPage = ( } mergeRelations={mergeRelations} unidirectional={unidirectional} + showArrowHeads={showArrowHeads} onNodeClick={onNodeClick} direction={direction} relationPairs={relationPairs}