feat(catalog-graph): allow showing arrow heads for relation edges

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

.changeset/forty-beers-sniff.md

@@ -1,5 +1,6 @@
 ---
 '@backstage/core-components': patch
+'@backstage/plugin-catalog-graph': patch
 ---
 
-Added arrow heads for graph edges in `DependencyGraph` for better understandability.
+Added possibility to show arrow heads for graph edges in `DependencyGraph` for better understandability.

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: true
+   */
+  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 = true,
     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

@@ -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;
@@ -129,7 +131,7 @@ export function Edge<EdgeData>({
         <path
           data-testid={EDGE_TEST_ID}
           className={classes.path}
-          markerEnd={`url(#${ARROW_MARKER_ID})`}
+          markerEnd={showArrowHeads ? `url(#${ARROW_MARKER_ID})` : undefined}
           d={path}
         />
       )}

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>