NodeLibrary Documentation

Overview

The NodeLibrary is a feature within the Vantage analytics and data platform that serves as a centralized interface to manage and interact with various workflow nodes. This component allows users to explore, search, and add different types of nodes to their workflows, thereby enhancing the platform's functionality and usability.

Purpose

The primary purpose of the NodeLibrary is to facilitate the selection and addition of nodes to a workflow, categorized for easier navigation and accessibility. It provides a user-friendly interface where nodes can be searched, filtered by categories, and visually managed.

Settings

1. setLibraryInstantResize

• Input Type: Function
• Description: A callback function that triggers a resize of the node library's layout instantly. This is useful for dynamically adjusting the UI in response to content changes, ensuring that the library maintains an optimal layout.
• Default Value: undefined

2. onContentHeightChange

• Input Type: Function
• Description: This callback function is called whenever the content height changes, allowing external components to adjust based on the height of the node library. This can enhance responsiveness in user interfaces by maintaining coherence between components.
• Default Value: undefined

3. selectedServiceId

• Input Type: String
• Description: This ID is used to filter the nodes displayed in the library based on the selected service. It enables conditional filtering to tailor the node options based on the user's current workflow context.
• Default Value: undefined

4. isApiBuilder

• Input Type: Boolean
• Description: A flag that indicates whether the current context is within an API builder environment. It modifies how nodes are filtered and what options are available, ensuring appropriate nodes are showcased depending on the environment.
• Default Value: false

How It Works

The NodeLibrary operates by utilizing several internal hooks for managing its state, handling effects, and optimizing performance through memoization. The main functionalities include:

• State Management: Manages search text, expanded categories, active super-category, and category heights.
• Effect Hooks: Implements lifecycle management to handle side effects like resizing and modifying the UI when the content changes.
• Context Usage: Utilizes the WorkflowContext to access the workflow store, allowing the component to interact with workflow data seamlessly.
• Events: Implements event listeners for managing clicks outside the category dropdown to close it and for managing state changes in response to user actions.

It expects a well-defined structure of nodes and categories from the workflow store, including properties for each node such as label, description, and category. The nodes are filtered based on search inputs and selected services to provide a dynamic library experience.

Data Expectations

The NodeLibrary expects the following data structure:

• Nodes: An array of node objects, each containing:

  • label: A string representing the name of the node.
  • description: A string providing additional information about the node.
  • category: A numeric identifier that links to a category.
  • inputPorts: Number of input connections the node supports.
  • outputPorts: Number of output connections the node supports.

• Categories: An array of category objects, containing:

  • id: A numeric or string identifier for the category.
  • category_name: A string displaying the name of the category.
  • color: A color code used for UI representation.

Use Cases & Examples

Use Cases

1. Data Management: Users can leverage the NodeLibrary to quickly find and insert nodes related to data transformation and manipulation in a workflow, streamlining their data processing tasks.

2. AI Integration: Developers working on AI solutions can easily access AI-related nodes through the library, making it simple to incorporate machine learning techniques into their workflows without extensive manual coding.

3. Social Media Automation: Marketers can use the NodeLibrary to integrate various social media nodes into their workflows, automating posts and data gathering from different platforms.

Example Configuration

Use Case: Data Management

A data analyst is tasked with creating a new workflow to process incoming data and apply transformations. They need to utilize specific nodes related to data filtering and statistics calculation. Here's how the NodeLibrary might be configured:

{
  "setLibraryInstantResize": (resize) => { /* handle resize */ },
  "onContentHeightChange": (height) => { /* update layout */ },
  "selectedServiceId": "data-management",
  "isApiBuilder": false
}

The data analyst can type "filter" into the search field to quickly locate nodes related to filtering operations. Once they find the desired nodes, they can easily add them to their workflow, positioning them in a user-friendly manner using the dynamic grid layout facilitated by NodeLibrary.

This concludes the detailed documentation for the NodeLibrary. All components have been described with sufficient detail to facilitate effective understanding and utilization as part of the Vantage analytics platform.