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}
/>
)}