From 3e1c6e2318f32bbb16c506d0ed8c125460d93461 Mon Sep 17 00:00:00 2001 From: Michal Hitka Date: Tue, 30 Jan 2024 14:26:10 +0100 Subject: [PATCH 1/5] feat(edge): show arrow heads for relation edges - reverts part of https://github.com/backstage/backstage/pull/13673/ Signed-off-by: Michal Hitka --- .changeset/forty-beers-sniff.md | 5 +++++ .../src/components/DependencyGraph/Edge.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/forty-beers-sniff.md diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md new file mode 100644 index 0000000000..aa7c2faa52 --- /dev/null +++ b/.changeset/forty-beers-sniff.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added arrow heads for graph edges in `DependencyGraph` for better understandability. diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index 05e068eca4..57aaa38727 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -19,7 +19,7 @@ import * as d3Shape from 'd3-shape'; import isFinite from 'lodash/isFinite'; import makeStyles from '@material-ui/core/styles/makeStyles'; import { DependencyGraphTypes as Types } from './types'; -import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants'; +import { ARROW_MARKER_ID, EDGE_TEST_ID, LABEL_TEST_ID } from './constants'; import { DefaultLabel } from './DefaultLabel'; import dagre from 'dagre'; @@ -43,7 +43,7 @@ export type DependencyGraphEdgeClassKey = 'path' | 'label'; const useStyles = makeStyles( theme => ({ path: { - strokeWidth: 1, + strokeWidth: 1.3, stroke: theme.palette.textSubtle, fill: 'none', transition: `${theme.transitions.duration.shortest}ms`, @@ -126,7 +126,12 @@ export function Edge({ return ( <> {path && ( - + )} {labelProps.label ? ( Date: Wed, 31 Jan 2024 10:10:54 +0100 Subject: [PATCH 2/5] feat(catalog-graph): allow showing arrow heads for relation edges Signed-off-by: Michal Hitka --- .changeset/forty-beers-sniff.md | 3 ++- packages/core-components/api-report.md | 1 + .../src/components/DependencyGraph/DependencyGraph.tsx | 8 ++++++++ .../src/components/DependencyGraph/Edge.tsx | 4 +++- plugins/catalog-graph/api-report.md | 1 + .../EntityRelationsGraph/EntityRelationsGraph.tsx | 3 +++ 6 files changed, 18 insertions(+), 2 deletions(-) diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md index aa7c2faa52..6adb7e98b4 100644 --- a/.changeset/forty-beers-sniff.md +++ b/.changeset/forty-beers-sniff.md @@ -1,5 +1,6 @@ --- '@backstage/core-components': patch +'@backstage/plugin-catalog-graph': patch --- -Added arrow heads for graph edges in `DependencyGraph` for better understandability. +Added possibility to show arrow heads for graph edges in `DependencyGraph` for better understandability. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index b5d54dd606..27b9c62653 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -265,6 +265,7 @@ export interface DependencyGraphProps rankMargin?: number; renderLabel?: DependencyGraphTypes.RenderLabelFunction; renderNode?: DependencyGraphTypes.RenderNodeFunction; + showArrowHeads?: boolean; zoom?: 'enabled' | 'disabled' | 'enable-on-click'; } diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index d4907d2a18..b1449d1b70 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -160,6 +160,12 @@ export interface DependencyGraphProps * Default: 'curveMonotoneX' */ curve?: 'curveStepBefore' | 'curveMonotoneX'; + /** + * Controls if the arrow heads should be rendered or not. + * + * Default: true + */ + showArrowHeads?: boolean; /** * Controls if the graph should be contained or grow * @@ -201,6 +207,7 @@ export function DependencyGraph( defs, zoom = 'enabled', curve = 'curveMonotoneX', + showArrowHeads = true, fit = 'grow', ...svgProps } = props; @@ -436,6 +443,7 @@ export function DependencyGraph( render={renderLabel} edge={edge} curve={curve} + showArrowHeads={showArrowHeads} /> ); })} diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx index 57aaa38727..6a1f8861bf 100644 --- a/packages/core-components/src/components/DependencyGraph/Edge.tsx +++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx @@ -67,6 +67,7 @@ export type EdgeComponentProps = { edge: Types.DependencyEdge, ) => dagre.graphlib.Graph<{}>; curve: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; const renderDefault = (props: Types.RenderLabelProps) => ( @@ -79,6 +80,7 @@ export function Edge({ id, edge, curve, + showArrowHeads, }: EdgeComponentProps) { const { x = 0, y = 0, width, height, points } = edge; const labelProps: Types.DependencyEdge = edge; @@ -129,7 +131,7 @@ export function Edge({ )} diff --git a/plugins/catalog-graph/api-report.md b/plugins/catalog-graph/api-report.md index ba75943843..8f75e52289 100644 --- a/plugins/catalog-graph/api-report.md +++ b/plugins/catalog-graph/api-report.md @@ -123,6 +123,7 @@ export type EntityRelationsGraphProps = { renderNode?: DependencyGraphTypes.RenderNodeFunction; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; // @public diff --git a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx index 654aaff969..35f76a7de0 100644 --- a/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx +++ b/plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx @@ -84,6 +84,7 @@ export type EntityRelationsGraphProps = { renderNode?: DependencyGraphTypes.RenderNodeFunction; renderLabel?: DependencyGraphTypes.RenderLabelFunction; curve?: 'curveStepBefore' | 'curveMonotoneX'; + showArrowHeads?: boolean; }; /** @@ -107,6 +108,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { renderNode, renderLabel, curve, + showArrowHeads, } = props; const theme = useTheme(); @@ -154,6 +156,7 @@ export const EntityRelationsGraph = (props: EntityRelationsGraphProps) => { labelOffset={theme.spacing(1)} zoom={zoom} curve={curve} + showArrowHeads={showArrowHeads} /> )} From 84b2d781e26e66de70b333903d412f83bfb6f9e7 Mon Sep 17 00:00:00 2001 From: Michal Hitka Date: Wed, 31 Jan 2024 10:17:46 +0100 Subject: [PATCH 3/5] feat(catalog-graph): hide arrow heads for relation edges by default Signed-off-by: Michal Hitka --- .../src/components/DependencyGraph/DependencyGraph.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index b1449d1b70..ee6b74f97a 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -163,7 +163,7 @@ export interface DependencyGraphProps /** * Controls if the arrow heads should be rendered or not. * - * Default: true + * Default: false */ showArrowHeads?: boolean; /** @@ -207,7 +207,7 @@ export function DependencyGraph( defs, zoom = 'enabled', curve = 'curveMonotoneX', - showArrowHeads = true, + showArrowHeads = false, fit = 'grow', ...svgProps } = props; From 96655af9eeb0984fc0fc5078ac55e8a788d176a2 Mon Sep 17 00:00:00 2001 From: Michal Hitka Date: Wed, 31 Jan 2024 14:16:57 +0100 Subject: [PATCH 4/5] chore: document showArrowHeads in changeset Signed-off-by: Michal Hitka --- .changeset/forty-beers-sniff.md | 34 ++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md index 6adb7e98b4..e1f478c1e1 100644 --- a/.changeset/forty-beers-sniff.md +++ b/.changeset/forty-beers-sniff.md @@ -3,4 +3,36 @@ '@backstage/plugin-catalog-graph': patch --- -Added possibility to show arrow heads for graph edges in `DependencyGraph` for better understandability. +Added possibility to show arrow heads for graph edges for better understandability. + +In order to show arrow heads in the catalog graph page, add `showArrowHeads` attribute to `CatalogGraphPage` component +(typically in `packages/app/src/App.tsx`): + +```diff + +``` + +In order to show arrow heads in entity graphs, add `showArrowHeads` attribute to `EntityCatalogGraphCard` components +(typically multiple occurrences in `packages/app/src/components/catalog/EntityPage.tsx`): + +```diff +- ++ +``` From 7f4062f91360a7bca8d5239d1780d0c30ab7e76d Mon Sep 17 00:00:00 2001 From: Michal Hitka Date: Wed, 31 Jan 2024 14:32:30 +0100 Subject: [PATCH 5/5] chore: simplify showArrowHeads example in changeset Signed-off-by: Michal Hitka --- .changeset/forty-beers-sniff.md | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md index e1f478c1e1..130726f94f 100644 --- a/.changeset/forty-beers-sniff.md +++ b/.changeset/forty-beers-sniff.md @@ -9,24 +9,8 @@ In order to show arrow heads in the catalog graph page, add `showArrowHeads` att (typically in `packages/app/src/App.tsx`): ```diff - +- ++ ``` In order to show arrow heads in entity graphs, add `showArrowHeads` attribute to `EntityCatalogGraphCard` components