feat(edge): show arrow heads for relation edges

- reverts part of https://github.com/backstage/backstage/pull/13673/

Signed-off-by: Michal Hitka <mhitka@ohpen.com>

.changeset/forty-beers-sniff.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added arrow heads for graph edges in `DependencyGraph` for better understandability.

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<EdgeData>({
   return (
     <>
       {path && (
-        <path data-testid={EDGE_TEST_ID} className={classes.path} d={path} />
+        <path
+          data-testid={EDGE_TEST_ID}
+          className={classes.path}
+          markerEnd={`url(#${ARROW_MARKER_ID})`}
+          d={path}
+        />
       )}
       {labelProps.label ? (
         <g