5 min readUpdated Mar 2, 2026

InsightBoxElement Documentation

Overview

The InsightBoxElement is a feature designed for the "Vantage" analytics & data platform. It serves as a versatile display box capable of showcasing various types of insights, warnings, recommendations, and AI-generated content. This component is crucial for presenting analytical results in a visually appealing and organized manner that enhances user understanding and engagement.

Purpose

The primary purpose of the InsightBoxElement is to provide a container for displaying categorized information related to data analytics. Depending on the configuration, it can render summaries, warnings, recommendations, or AI-powered insights, which can assist users in making informed decisions based on the underlying data.

Settings

The InsightBoxElement offers several configurable settings. Below is a detailed explanation of each setting:

1. `theme`

Input Type: Dropdown (string)
Description: The theme setting determines the visual styling of the InsightBoxElement. This setting affects the background color, border, icon, and text color based on the selected theme.
Options:
- summary: Default theme with a calm blue styling.
- ai: Theme intended for AI-related content with a specific blue hue.
- warning: Indicates caution with a red color palette.
- recommendation: Suggestive tone with yellow hues.
Default Value: summary
Effect of Change: Changing the theme alters the appearance of the box, including background color and associated text/icon colors, enhancing clarity around the type of message presented.

2. `content`

Input Type: String
Description: This setting specifies the main content to be displayed inside the InsightBoxElement. It can include any text string, making it highly adaptable to various messaging requirements.
Default Value: 'Content goes here...'
Effect of Change: Modifying the content will directly change the displayed text, allowing for real-time updates based on analytics or user inputs.

3. `workflowId`

Input Type: String (optional)
Description: When provided, this ID is used to fetch workflow-related data that takes precedence over the standard content. It allows the component to dynamically display output from a workflow associated with the specified ID.
Default Value: null
Effect of Change: If a valid workflowId is passed, the content will display workflow output instead of the default content, enabling richer data integration.

4. `label`

Input Type: String (optional)
Description: This setting is used to define a label for the InsightBoxElement, which appears prominently at the top of the box. It's meant to categorize or provide context for the displayed content.
Default Value: theme (the current theme name)
Effect of Change: A custom label will override the default theme name, allowing for better context-specific naming.

5. `style`

Input Type: Object (optional)
Description: This setting allows for custom inline styles, enabling users to modify the appearance of the container beyond the themes. This could include changes to padding, margin, border-radius, etc.
Default Value: null
Effect of Change: Easing further customization, this allows for personalized layout or aesthetic adjustments without modifying the component’s core styles.

How It Works

The InsightBoxElement component dynamically renders based on the input props passed to it. Initially, it retrieves the configuration settings from the element prop. It then selects the appropriate styling based on the theme. The component proceeds to determine the content by checking if a workflowId is provided; if so, it displays associated workflow output, else it shows the provided content. Finally, it renders an icon that corresponds with the selected theme, ensuring a visually cohesive presentation.

Expected Data

The InsightBoxElement expects an element object containing at least the following properties:

config: An object containing theme, content, workflowId, label, and style.

Example Input Structure:

json

{
    "element": {
        "config": {
            "theme": "summary",
            "content": "Performance metrics are above average.",
            "workflowId": "12345",
            "label": "Performance Overview",
            "style": { "padding": "10px" }
        }
    }
}

AI Integrations

The InsightBoxElement can display AI-generated insights by selecting the ai theme and inputting relevant content that has been processed by an AI engine. Utilizing the workflowId, it can directly present analyzed results from AI workflows, significantly enhancing decision-making capabilities for users.

Billing Impact

The InsightBoxElement generally does not have direct billing implications on its own. However, usage of workflows or AI integration may invoke additional costs depending on the pricing model of data operations or API calls made to retrieve AI-driven data. Businesses should evaluate their expected usage to understand potential billing impacts when utilizing these features.

Use Cases & Examples

Use Case 1: Performance Monitoring

The InsightBoxElement can be used in a dashboard to monitor key performance indicators (KPIs). For example, if the metrics indicate a positive trend, the InsightBoxElement could show a summary theme with encouraging content.

Use Case 2: Risk Alerts

Enterprises can use the warning theme to proactively notify users about significant risks, such as potential data breaches or compliance issues, ensuring timely intervention.

Use Case 3: AI-Driven Recommendations

Firms leveraging predictive analytics can use the InsightBoxElement to display recommendations generated from an AI model, thus improving business intelligence efforts.

Detailed Example Configuration

For the use case of Risk Alerts, consider the following configuration: