WorkflowEdge Documentation

Overview

The WorkflowEdge is a feature designed to provide a flexible and visually engaging representation of connections between nodes in a workflow diagram. Utilizing Bezier paths for smooth curves, this component allows users to define the visual flow of processes and relationships effectively.

Purpose

The primary purpose of the WorkflowEdge component is to draw connections (edges) between two points (nodes) within a workflow. It enhances the user interface by making the relationships between various workflow components clear, enabling better understanding and interaction.

Settings

This section outlines the configuration settings available for the WorkflowEdge component, detailing each aspect that can be tailored to customize its behavior and appearance.

1. id

• Input Type: String
• Description: A unique identifier for the edge. This ID is used to reference the edge in various operations or visualizations within the workflow.
• Default Value: None (must be provided when creating the edge).

2. sourceX

• Input Type: Numeric
• Description: The x-coordinate of the source node where the edge begins. Adjusting this value will move the starting point of the edge horizontally.
• Default Value: None (must be provided).

3. sourceY

• Input Type: Numeric
• Description: The y-coordinate of the source node. Changing this value affects the vertical position of the edge's starting point.
• Default Value: None (must be provided).

4. targetX

• Input Type: Numeric
• Description: The x-coordinate of the target node where the edge ends. Modifying this value alters the horizontal end point of the edge.
• Default Value: None (must be provided).

5. targetY

• Input Type: Numeric
• Description: The y-coordinate of the target node. This controls the vertical position of the edge's endpoint.
• Default Value: None (must be provided).

6. sourcePosition

• Input Type: String (Enum)
• Description: Defines the position of the source node that affects how the edge is drawn. Possible values are 'top', 'bottom', 'left', 'right'. Changing the value will affect the curvature and the direction from which the edge originates.
• Default Value: None (must be provided).

7. targetPosition

• Input Type: String (Enum)
• Description: Specifies the position of the target node similar to sourcePosition. It influences the endpoint's approach direction and curvature.
• Default Value: None (must be provided).

8. markerEnd

• Input Type: String
• Description: This property specifies the marker that appears at the end of the edge (arrowhead, custom marker, etc.). Changes to this setting alter how the connection's conclusion is visually represented.
• Default Value: None (if no marker is required).

How it Works

The WorkflowEdge component employs the getBezierPath function from the reactflow library to calculate smooth curves between two coordinates defined by the source and target positions. It dynamically generates the path element in SVG format based on the coordinates provided as props.

Data Expectations

The WorkflowEdge expects the following data inputs:

• Numeric values for source and target coordinates (X and Y).
• String values for positions (top, bottom, left, right).
• A unique string identifier for the edge.
• An optional string value for the marker design.

Use Cases & Examples

Use Case 1: Project Management Tool

In a project management tool, WorkflowEdge can visually connect tasks and dependencies, allowing users to understand project progress and interrelations at a glance.

Use Case 2: Data Flow Diagram

In a data engineering application, the WorkflowEdge can represent how data flows between various data processing nodes, making it easier to diagnose bottlenecks in data pipelines.

Use Case 3: API Workflow Representation

In API orchestration, WorkflowEdge can illustrate how different API calls relate to each other, helping developers visualize and optimize API interactions.

Example Configuration

To configure the WorkflowEdge for a project management tool that connects two tasks, you might set it up as follows:

<WorkflowEdge
    id="edge-1"
    sourceX={100}
    sourceY={200}
    targetX={300}
    targetY={400}
    sourcePosition="right"
    targetPosition="left"
    markerEnd="arrowhead"
/>

In this example:

• The edge connects a task located at coordinates (100, 200) to another task at (300, 400).
• The arrowhead marker indicates the direction of task dependency. The source task is aligned to the right, while the target task is to the left, providing visual clarity on the workflow process.