diff --git a/.changeset/forty-beers-sniff.md b/.changeset/forty-beers-sniff.md new file mode 100644 index 0000000000..130726f94f --- /dev/null +++ b/.changeset/forty-beers-sniff.md @@ -0,0 +1,22 @@ +--- +'@backstage/core-components': patch +'@backstage/plugin-catalog-graph': patch +--- + +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 +- ++ +``` 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..ee6b74f97a 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: false + */ + showArrowHeads?: boolean; /** * Controls if the graph should be contained or grow * @@ -201,6 +207,7 @@ export function DependencyGraph( defs, zoom = 'enabled', curve = 'curveMonotoneX', + showArrowHeads = false, 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 05e068eca4..6a1f8861bf 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`, @@ -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; @@ -126,7 +128,12 @@ export function Edge({ return ( <> {path && ( - + )} {labelProps.label ? ( ; 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} /> )}