Merge pull request #13673 from andrmaz/feature/core-components

pr(core-components): edit dependency graph edge

packages/core-components/api-report.md

@@ -242,6 +242,7 @@ export interface DependencyGraphProps<NodeData, EdgeData>
   acyclicer?: 'greedy';
   // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
   align?: Alignment;
+  curve?: 'curveStepBefore' | 'curveMonotoneX';
   defs?: SVGDefsElement | SVGDefsElement[];
   // Warning: (ae-unresolved-link) The @link reference could not be resolved: This type of declaration is not supported yet by the resolver
   direction?: Direction;

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

@@ -162,6 +162,14 @@ export interface DependencyGraphProps<NodeData, EdgeData>
    * Default: `enabled`
    */
   zoom?: 'enabled' | 'disabled' | 'enable-on-click';
+  /**
+   * A factory for curve generators addressing both lines and areas.
+   *
+   * @remarks
+   *
+   * Default: 'curveMonotoneX'
+   */
+  curve?: 'curveStepBefore' | 'curveMonotoneX';
 }
 
 const WORKSPACE_ID = 'workspace';
@@ -194,6 +202,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     renderLabel,
     defs,
     zoom = 'enabled',
+    curve = 'curveMonotoneX',
     ...svgProps
   } = props;
   const theme: BackstageTheme = useTheme();
@@ -424,6 +433,7 @@ export function DependencyGraph<NodeData, EdgeData>(
                 setEdge={setEdge}
                 render={renderLabel}
                 edge={edge}
+                curve={curve}
               />
             );
           })}

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

@@ -21,6 +21,7 @@ import { RenderLabelProps } from './types';
 
 const fromNode = 'node';
 const toNode = 'other-node';
+const curve: 'curveStepBefore' | 'curveMonotoneX' = 'curveMonotoneX';
 
 const edge = {
   points: [
@@ -46,6 +47,7 @@ const minProps = {
   setEdge,
   renderElement,
   edge,
+  curve,
 };
 
 const label = 'label';

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`,
@@ -70,23 +70,19 @@ export type EdgeComponentProps<T = unknown> = {
     id: dagre.Edge,
     edge: DependencyEdge<T>,
   ) => dagre.graphlib.Graph<{}>;
+  curve: 'curveStepBefore' | 'curveMonotoneX';
 };
 
 const renderDefault = (props: RenderLabelProps<unknown>) => (
   <DefaultLabel {...props} />
 );
 
-const createPath = d3Shape
-  .line<EdgePoint>()
-  .x(d => d.x)
-  .y(d => d.y)
-  .curve(d3Shape.curveMonotoneX);
-
 export function Edge<EdgeData>({
   render = renderDefault,
   setEdge,
   id,
   edge,
+  curve,
 }: EdgeComponentProps<EdgeData>) {
   const { x = 0, y = 0, width, height, points } = edge;
   const labelProps: DependencyEdge<EdgeData> = edge;
@@ -114,6 +110,16 @@ export function Edge<EdgeData>({
 
   let path: string = '';
 
+  const createPath = React.useMemo(
+    () =>
+      d3Shape
+        .line<EdgePoint>()
+        .x(d => d.x)
+        .y(d => d.y)
+        .curve(d3Shape[curve]),
+    [curve],
+  );
+
   if (points) {
     const finitePoints = points.filter(
       (point: EdgePoint) => isFinite(point.x) && isFinite(point.y),
@@ -124,12 +130,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