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 ? (