WorkflowWrapper Component Documentation

Overview

The WorkflowWrapper component is a crucial part of the Vantage analytics and data platform, designed to allow users to create, edit, and manage workflows visually. It integrates various elements such as node libraries, workflow editors, and property panels to facilitate a comprehensive workflow-building experience. This component also includes functionality for saving workflows, managing state, and handling service selections within the context of data analytics.

Purpose

The main purpose of the WorkflowWrapper component is to provide users with an interactive interface to build data workflows efficiently. It integrates various supporting components, manages the workflow's state, and interacts with backend services for functionality like loading and deleting workflows.

How It Works

1. State Management: The component manages the state of the workflow, including nodes, edges, and selected nodes.
2. Responsive Design: The component adapts its layout based on the screen size, transitioning to a compact mode for smaller displays to enhance usability.
3. Service Management: Users can select services that the workflow will interact with, allowing for dynamic configurations based on available integrations.
4. Node and Edge Management: Users can add nodes and edges to their workflows, modify their properties, and see real-time updates in the UI.
5. Integrations: It is designed to integrate with various AI services and external data sources through dynamic service management capabilities.
6. Workflow Persistence: Functions for saving and loading workflows back to the server are included, ensuring that users can maintain their projects without data loss.

Settings

1. registryEndpoint

• Input Type: String
• Description: This setting is used to specify the endpoint for the workflow registry. Changing this setting alters where the component fetches node libraries and workflow data.
• Default Value: null

2. title

• Input Type: String
• Description: This title appears at the top of the WorkflowWrapper and is used to identify the workflow. Modifying this will change the header displayed on the UI.
• Default Value: "Workflow Builder"

3. description

• Input Type: String
• Description: This setting provides additional information about the workflow. It can help users understand the purpose of the workflow when they load it. Changing this modifies the descriptive text shown under the title.
• Default Value: null

4. apiBasePath

• Input Type: String
• Description: This path is used as the base URL for API calls related to workflows, including saving and deleting workflows. Adjusting this would redirect data fetches to different API endpoints.
• Default Value: "/api/workflow"

5. initialWorkflowId

• Input Type: String or null
• Description: This ID is used to load an existing workflow if provided. If this changes, the workflow editor will attempt to load the workflow associated with the new ID.
• Default Value: null

6. isCompact

• Input Type: Boolean (derived state)
• Description: This setting determines whether the component is displayed in a compact mode, which is used for better UI interaction on smaller screens.
• Default Value: Dynamically set based on screen size.

7. libraryCollapsed

• Input Type: Boolean
• Description: Controls whether the library panel (for adding nodes) is collapsed or expanded. Changing this directly affects the UI layout.
• Default Value: false

8. propertiesCollapsed

• Input Type: Boolean
• Description: Similar to libraryCollapsed, this setting determines if the properties panel (for configuring selected nodes) is visible or collapsed.
• Default Value: false

9. services

• Input Type: Array
• Description: An array tracking available services that can be utilized within workflows. It dynamically updates based on available integrations fetched from the backend.
• Default Value: []

10. selectedServiceId

• Input Type: String or null
• Description: Holds the ID of the currently selected service from the dropdown. It is crucial for determining which service the workflow will utilize.
• Default Value: null

Use Cases & Examples

Use Case 1: Automated Data Processing Workflow

In a scenario where a company needs to automate data processing tasks between various databases and data analytics tools, the WorkflowWrapper can be used to visually connect nodes representing each database and processing steps in a single workflow.

Use Case 2: ETL Pipeline Creation

When creating an ETL (Extract, Transform, Load) pipeline, users can leverage the WorkflowWrapper to design the flow of data from the source to the destination, adding transformations as required.

Example Configuration for ETL Pipeline

To set up an ETL pipeline using the WorkflowWrapper, users might configure the following:

• registryEndpoint: https://api.example.com/registry
• title: "ETL Pipeline"
• description: "Automated ETL from MySQL to Data Warehouse"
• apiBasePath: "/api/workflow"
• initialWorkflowId: "1234-5678-90ab-cdef"

The user would then add nodes corresponding to the MySQL source, transformation functions (like normalization), and the data warehouse destination, connecting them through edges to visualize the flow of data. This configuration would allow them to save the workflow and manage it for future use.

By properly adjusting these settings and adding the relevant nodes and edges, users can effectively handle the complexities of data transformations visually.