AiBuildTileModal Documentation

Overview

The AiBuildTileModal is a feature that allows users to generate configurations for data tiles through natural language processing enabled by AI. Users can select an existing workflow, provide a description of what they want, and the AI will generate a tile configuration accordingly. This component integrates seamlessly into the Vantage platform, providing an intuitive interface to facilitate efficient data visualization.

Purpose

The primary purpose of the AiBuildTileModal is to empower users to create visual data representations easily by leveraging artificial intelligence to interpret user descriptions and generate the necessary configurations. This component simplifies the complexity of traditional data configuration processes, making it more accessible to users regardless of their technical background.

Settings

The AiBuildTileModal component incorporates several settings that govern its behavior and appearance. Below is an exhaustive explanation of each setting:

1. close

• Input Type: Function
• Description: This is a callback function that is called when the modal is requested to close. It typically handles the cleanup or state reset in the parent component when the modal is dismissed.
• Default Value: undefined

2. onConfigGenerated

• Input Type: Function
• Description: A callback function that is invoked when the AI has generated the tile configuration successfully. This function receives the enriched configuration object to be used elsewhere in the application.
• Default Value: undefined

State Variables

The following state variables are managed within the component:

• workflows

  • Input Type: Array of Objects
  • Description: This stores the list of workflows fetched from the API. It is used to populate the dropdown for workflow selection.
  • Default Value: []

• selectedWorkflow

  • Input Type: Object or null
  • Description: Keeps track of the currently selected workflow from the dropdown. This is critical for determining the context for the AI-generated configuration.
  • Default Value: null

• workflowData

  • Input Type: Object or null
  • Description: Holds the data returned from running the selected workflow. This data is essential for the AI to generate the tile configuration.
  • Default Value: null

• prompt

  • Input Type: String
  • Description: Contains the text input from the user that describes what kind of tile they wish to create. The AI uses this text to generate the configuration.
  • Default Value: ''

• loading

  • Input Type: Boolean
  • Description: A flag indicating whether the AI configuration generation is in progress. It is used to show loading indicators in the UI.
  • Default Value: false

• runningWorkflow

  • Input Type: Boolean
  • Description: Indicates if the selected workflow is currently being executed. It affects the button state UI during the operation.
  • Default Value: false

• error

  • Input Type: String or null
  • Description: Stores any error messages encountered during the fetching and processing of workflows and tile configurations. If an error occurs, this state will trigger a UI message to inform the user.
  • Default Value: null

• generatedConfig

  • Input Type: Object or null
  • Description: Holds the configuration returned by the AI after processing the user prompt and workflow data.
  • Default Value: null

• explanation

  • Input Type: String
  • Description: Contains a textual explanation generated along with the AI configuration. This may help users understand how the configuration was derived.
  • Default Value: ''

• dropdownOpen

  • Input Type: Boolean
  • Description: A flag to control the visibility of the workflow selection dropdown.
  • Default Value: false

How It Works

1. Fetching Workflows: On component mount, a request is made to /api/workflow/list to fetch all available workflows. This information populates the workflow selection dropdown.

2. Selecting a Workflow: Users can select a workflow from the dropdown. Upon selection, the associated workflow data can be fetched through another API call initiated by the user clicking the "Run" button.

3. User Input for Tile Generation: Users enter a descriptive prompt in a text area outlining their desired tile configuration.

4. Running the Workflow: The user clicks "Run" to execute the selected workflow, which loads the necessary data for generating the tile configuration.

5. Generating Configuration: By clicking the "Generate Tile Configuration" button, an API request is sent to /api/ai/build-tile using the input prompt, the selected workflow ID, and the workflow data. The AI processes this information and responds with the generated configuration along with an explanation.

6. Using the Configuration: If the configuration generation is successful, the component can pass this enriched configuration back to the parent component through the onConfigGenerated callback, allowing it to be utilized in further applications or visualizations.

Use Cases & Examples

Use Case 1: Business Intelligence Dashboard Creation

Organizations may need to quickly create dashboards for visualizing real-time business data, such as sales performance or customer analytics. Using AiBuildTileModal, users can specify the type of visualizations they need (e.g., bar charts or pie charts) and leverage AI to generate those configurations.

Use Case 2: Rapid Prototyping for Data Analysis

Data analysts may want to prototype data visualizations based on rapidly changing requirements. With this component, they can describe complex visualizations in plain language and immediately get a configuration ready for implementation.

Example Configuration

Assume a data analyst wants to visualize quarterly sales figures as a line chart, comparing the sales performance between regions. Here’s how they might configure the AiBuildTileModal:

1. Select Workflow: Choose "Sales Data Workflow"

2. Describe the Tile:

   • Input prompt: "Create a line chart comparing quarterly sales performance across different regions for the last year."

3. Expected Configuration Data Output:

{
  "title": "Quarterly Sales Performance",
  "subtitle": "Comparative Analysis Across Regions",
  "visualizationType": "lineChart",
  "fieldMapping": {
    "_series": [
      {
        "id": "Q1",
        "label": "Quarter 1 Sales",
        "data": "salesData.Q1"
      },
      {
        "id": "Q2",
        "label": "Quarter 2 Sales",
        "data": "salesData.Q2"
      },
      {
        "id": "Q3",
        "label": "Quarter 3 Sales",
        "data": "salesData.Q3"
      },
      {
        "id": "Q4",
        "label": "Quarter 4 Sales",
        "data": "salesData.Q4"
      }
    ]
  }
}

This example illustrates how the AiBuildTileModal can streamline the generation of necessary configurations for business intelligence purposes while providing users with the flexibility to describe their exact visualization needs.