PropertiesPanel Component Documentation

Overview

The PropertiesPanel component is a critical part of Vantage's workflow management system, responsible for facilitating the configuration of selected nodes within a workflow. This component integrates various node types, enabling users to manage node-specific settings and interact with connected services or integrations efficiently. It captures user inputs, manages dynamic node configurations, and provides both visual and functional organization to workflow efforts.

Settings

Workflow Name

1. Setting Name: workflowName
2. Input Type: String
3. Description: This setting captures the name of the workflow. It is essential for identification and management purposes within the Vantage platform. If left empty, it triggers a validation error, preventing users from saving the workflow.
4. Default Value: None (requires user input)

Workflow Description

1. Setting Name: workflowDescription
2. Input Type: String (Multiline)
3. Description: This setting allows users to provide a detailed description of the workflow, helping to clarify its purpose and functionality. This is optional and serves as additional contextual information for users and contributors.
4. Default Value: None (optional input)

Custom Integration

1. Setting Name: selectedServiceId
2. Input Type: Dropdown
3. Description: This dropdown allows users to select a specific service integration for the API builder. It's particularly useful for defining the endpoint settings that relate to a particular service. The dropdown is disabled if a workflow is being edited or if there are no available services.
4. Default Value: None (initially empty)

Workflow Editing State

1. Setting Name: isWorkflowEditing
2. Input Type: Boolean
3. Description: This flag determines if the workflow is currently in an editing mode. If true, it restricts certain functionalities, such as changing the source integration.
4. Default Value: False (indicating that the workflow is not in edit mode by default)

List of Available Credentials

1. Setting Name: availableCredentials
2. Input Type: Array
3. Description: This array holds the credentials available for the selected integration node. It is populated through an API call that retrieves credentials based on the selected service key. It remains empty if no integration node is selected or no credentials exist for the node type.
4. Default Value: Empty array ([])

Credential Loading State

1. Setting Name: credentialsLoading
2. Input Type: Boolean
3. Description: This state indicates whether the application is currently fetching available credentials for a selected integration node. It is important for providing feedback to the user, such as loading spinners or disabling inputs while loading.
4. Default Value: False

How it Works

The PropertiesPanel functions by getting the current node selection from the global workflow store context, triggering UI updates based on user interactions. The component will re-render whenever the selected node changes, reflecting the specific configuration options available for that node type, which may include custom node editors based on the type of node (e.g., aggregation, AI enrichment, etc.).

1. Node Selection: When a node is selected in the workflow editor, its configuration settings are displayed within the PropertiesPanel.
2. Dynamic Integration Loading: If the selected node is an integration node (like Google Drive or OneDrive), it will make an API call to load the corresponding credentials.
3. Field Updating: The component allows updating multiple fields within a node’s configuration, reflecting instant changes on the workflow state.
4. Rendering Conditional Editors: The component can render different editors based on the node type, facilitating a customized input experience.

Data Expectations

The PropertiesPanel expects the following data from the workflow context:

• The currently selected node ID and its associated data, including configuration schemas, types, and inputs/outputs.
• Global workflow state properties such as workflowName, workflowDescription, and the selected service ID if applicable.

Data Structures Expected

• A list of nodes with each node containing:
  • id: Unique identifier
  • data: An object that includes:
    • node_type: Type of the node (e.g., queryoperators/aggregation)
    • config: Configuration parameters for the node
    • inputs: Array of input definitions
    • outputs: Array of output definitions
• A service integration keys set indicating applicable service integrations.

Use Cases & Examples

Use Case 1: Workflow Creation

A data analyst needs to create a new automated report by integrating Vantage with Google Drive. The PropertiesPanel is used to define the report’s name and description while selecting Google Drive as the service to store the output.

Use Case 2: API Integration Setup

A developer is working on setting up a process that fetches data from an external API. The PropertiesPanel can be configured to choose the appropriate service link, select credentials, and configure node-specific properties that define how data should be processed.

Detailed Example Configuration

Use Case: Setting Up a Reporting Workflow

Scenario: A business analyst needs to create a daily sales report workflow that aggregates data, enriches it with AI insights, and exports it as a CSV.

Configuration Steps:

1. Set Workflow Name and Description:

   • Workflow Name: Daily Sales Report
   • Workflow Description: Aggregated data of daily sales performance including AI insights.

2. Select Custom Integration:

   • Choose Google Drive from the available services dropdown.

3. Configure Node Settings:

   • For the Aggregation Node:

     • Set aggregation fields to ["Sales", "Region", "Product"]

   • For the AI Enrichment Node:

     • Select specific enrichment algorithms based on input data.

4. Export Configuration:

   • Configure CSV export settings to specify the filename as sales-report.csv upon successful execution.

With the PropertiesPanel, users can seamlessly adjust configurations, ensuring their workflows are tailored precisely to their operational needs while leveraging a wide range of integrations and enhancements offered by the Vantage platform.