feat(curve): add curve filter to graph page

Signed-off-by: andrmaz <60042277+andrmaz@users.noreply.github.com>

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

@@ -30,6 +30,7 @@ import {
   RenderNodeFunction,
   RenderLabelFunction,
   LabelPosition,
+  Curve,
 } from './types';
 import { Node } from './Node';
 import { Edge, GraphEdge } from './Edge';
@@ -162,6 +163,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?: Curve;
 }
 
 const WORKSPACE_ID = 'workspace';
@@ -194,6 +203,7 @@ export function DependencyGraph<NodeData, EdgeData>(
     renderLabel,
     defs,
     zoom = 'enabled',
+    curve = 'curveMonotoneX',
     ...svgProps
   } = props;
   const theme: BackstageTheme = useTheme();
@@ -424,6 +434,7 @@ export function DependencyGraph<NodeData, EdgeData>(
                 setEdge={setEdge}
                 render={renderLabel}
                 edge={edge}
+                curve={curve}
               />
             );
           })}

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

@@ -24,6 +24,7 @@ import {
   RenderLabelFunction,
   DependencyEdge,
   LabelPosition,
+  Curve,
 } from './types';
 import { EDGE_TEST_ID, LABEL_TEST_ID } from './constants';
 import { DefaultLabel } from './DefaultLabel';
@@ -70,23 +71,19 @@ export type EdgeComponentProps<T = unknown> = {
     id: dagre.Edge,
     edge: DependencyEdge<T>,
   ) => dagre.graphlib.Graph<{}>;
+  curve: Curve;
 };
 
 const renderDefault = (props: RenderLabelProps<unknown>) => (
   <DefaultLabel {...props} />
 );
 
-const createPath = d3Shape
-  .line<EdgePoint>()
-  .x(d => d.x)
-  .y(d => d.y)
-  .curve(d3Shape.curveStepBefore);
-
 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 +111,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),

packages/core-components/src/components/DependencyGraph/types.ts

@@ -75,6 +75,12 @@ export type RenderNodeFunction<T = {}> = (
   props: RenderNodeProps<T>,
 ) => React.ReactNode;
 
+/**
+ * @see {@link @types/d3-shape/index.d.ts#curveMonotoneX}
+ * @see {@link @types/d3-shape/index.d.ts#curveStepBefore}
+ */
+export type Curve = 'curveStepBefore' | 'curveMonotoneX';
+
 /**
  * Graph direction
  *