From 401c10eba0eab2b72e2863771fac0acac7d1f4b4 Mon Sep 17 00:00:00 2001
From: andrmaz <60042277+andrmaz@users.noreply.github.com>
Date: Tue, 13 Sep 2022 22:28:17 +0200
Subject: [PATCH] feat(edge): attach groups hierarchy arrows to the right side
 of their parent boxes

Signed-off-by: andrmaz <60042277+andrmaz@users.noreply.github.com>
---
 .../src/components/DependencyGraph/Edge.tsx         | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/core-components/src/components/DependencyGraph/Edge.tsx b/packages/core-components/src/components/DependencyGraph/Edge.tsx
index cc6a044beb..72a7547cda 100644
--- a/packages/core-components/src/components/DependencyGraph/Edge.tsx
+++ b/packages/core-components/src/components/DependencyGraph/Edge.tsx
@@ -25,7 +25,7 @@ import {
   DependencyEdge,
   LabelPosition,
 } from './types';
-import { ARROW_MARKER_ID, EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
+import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
 import { DefaultLabel } from './DefaultLabel';
 import dagre from 'dagre';
 
@@ -47,7 +47,7 @@ export type DependencyGraphEdgeClassKey = 'path' | 'label';
 const useStyles = makeStyles(
   (theme: BackstageTheme) => ({
     path: {
-      strokeWidth: 2,
+      strokeWidth: 1,
       stroke: theme.palette.textSubtle,
       fill: 'none',
       transition: `${theme.transitions.duration.shortest}ms`,
@@ -80,7 +80,7 @@ const createPath = d3Shape
   .line<EdgePoint>()
   .x(d => d.x)
   .y(d => d.y)
-  .curve(d3Shape.curveMonotoneX);
+  .curve(d3Shape.curveStepBefore);
 
 export function Edge<EdgeData>({
   render = renderDefault,
@@ -124,12 +124,7 @@ export function Edge<EdgeData>({
   return (
     <>
       {path && (
-        <path
-          data-testid={EDGE_TEST_ID}
-          className={classes.path}
-          markerEnd={`url(#${ARROW_MARKER_ID})`}
-          d={path}
-        />
+        <path data-testid={EDGE_TEST_ID} className={classes.path} d={path} />
       )}
       {labelProps.label ? (
         <g