Merge pull request #22607 from mhitkaohp/dependency-graph-arrows

core-components: show arrow heads in dependency graph

.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
+- <CatalogGraphPage />
++ <CatalogGraphPage showArrowHeads />
+```
+
+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
+- <EntityCatalogGraphCard variant="gridItem" height={400} />
++ <EntityCatalogGraphCard variant="gridItem" height={400} showArrowHeads />
+```

packages/core-components/api-report.md

@@ -265,6 +265,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
   rankMargin?: number;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EdgeData>;
   renderNode?: DependencyGraphTypes.RenderNodeFunction<NodeData>;
+  showArrowHeads?: boolean;
   zoom?: 'enabled' | 'disabled' | 'enable-on-click';
 }
 

packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx

@@ -160,6 +160,12 @@ export interface DependencyGraphProps<NodeData, EdgeData>
    * 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<NodeData, EdgeData>(
     defs,
     zoom = 'enabled',
     curve = 'curveMonotoneX',
+    showArrowHeads = false,
     fit = 'grow',
     ...svgProps
   } = props;
@@ -436,6 +443,7 @@ export function DependencyGraph<NodeData, EdgeData>(
                 render={renderLabel}
                 edge={edge}
                 curve={curve}
+                showArrowHeads={showArrowHeads}
               />
             );
           })}

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<T = unknown> = {
     edge: Types.DependencyEdge<T>,
   ) => dagre.graphlib.Graph<{}>;
   curve: 'curveStepBefore' | 'curveMonotoneX';
+  showArrowHeads?: boolean;
 };
 
 const renderDefault = (props: Types.RenderLabelProps<unknown>) => (
@@ -79,6 +80,7 @@ export function Edge<EdgeData>({
   id,
   edge,
   curve,
+  showArrowHeads,
 }: EdgeComponentProps<EdgeData>) {
   const { x = 0, y = 0, width, height, points } = edge;
   const labelProps: Types.DependencyEdge<EdgeData> = edge;
@@ -126,7 +128,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={showArrowHeads ? `url(#${ARROW_MARKER_ID})` : undefined}
+          d={path}
+        />
       )}
       {labelProps.label ? (
         <g

plugins/catalog-graph/api-report.md

@@ -123,6 +123,7 @@ export type EntityRelationsGraphProps = {
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
   curve?: 'curveStepBefore' | 'curveMonotoneX';
+  showArrowHeads?: boolean;
 };
 
 // @public

plugins/catalog-graph/src/components/EntityRelationsGraph/EntityRelationsGraph.tsx

@@ -84,6 +84,7 @@ export type EntityRelationsGraphProps = {
   renderNode?: DependencyGraphTypes.RenderNodeFunction<EntityNode>;
   renderLabel?: DependencyGraphTypes.RenderLabelFunction<EntityEdge>;
   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}
         />
       )}
     </div>