BiInsightDetailsModal Documentation

Purpose

The BiInsightDetailsModal component is designed to present detailed information about a business intelligence insight. This component displays various elements including the AI reasoning behind the insight, implementation details, projected impacts on KPIs, and an action plan. Additionally, it includes interactive buttons that facilitate user actions based on the insight provided.

Settings

The BiInsightDetailsModal component accepts the following settings:

1. insight

• Input Type: Object
• Description: This is a required prop that contains the core data of the insight to be displayed in the modal. The structure of this object includes fields such as title, description, priority, reasoning, implementationDetails, kpiImpact, and actionPlan.
• Default Value: None (Must be provided).

2. config

• Input Type: Object
• Description: This optional prop allows the customization of the modal behavior and action button. It can dictate what actions can be taken from within the modal.
• Default Value: An empty object {}.

Sub-settings for config:

- actionButton

• Input Type: Object
• Description: Defines the configuration for an action button that may be displayed at the bottom of the modal. This can include types of actions users can take based on the insight provided.

Sub-properties:

1. label

   • Input Type: String
   • Description: The text displayed on the action button. Changing this will update what the button says.
   • Default Value: 'Take Action'.

2. actionType

   • Input Type: String
   • Description: Defines the type of action to be performed when the button is clicked. Options include 'openUrl' (to open a specified URL) or 'executeWorkflow' (to run a defined workflow).
   • Default Value: 'none'.

3. actionConfig

   • Input Type: Object
   • Description: Further configuration settings based on the selected actionType.

Sub-properties of actionConfig:

• If actionType is openUrl:

  1. url

     • Input Type: String
     • Description: The URL to open when the button is clicked. Altering this will change where users navigate.
     • Default Value: None (Must be provided if actionType is openUrl).

  2. newTab

     • Input Type: Boolean
     • Description: Determines whether the URL should open in a new tab. Setting it to true opens the URL in a new tab, while false opens it in the same tab.
     • Default Value: false.

• If actionType is executeWorkflow:

  1. workflowId
     • Input Type: String
     • Description: The ID of the workflow to be executed. This ID determines which workflow will run on button click.
     • Default Value: None (Must be provided if actionType is executeWorkflow).

How It Works

1. The component checks for the presence of the required insight prop and will not render if it’s missing.

2. It utilizes a modal layout with a dark overlay to focus the user’s attention on the displayed insight details.

3. The component contains sections that render information dynamically based on the provided insight data:

   • An AI reasoning section.
   • Implementation details presenting timeline, risk level, and dependencies.
   • Expected KPI impact presenting a list of key performance indicators.
   • Action plan detailing steps related to the insight.

4. The action button’s visibility is determined through the showActionButton logic based on the configuration provided in the config prop.

5. When the action button is clicked, it handles the specified action type—either opening a URL or executing a workflow—based on the configuration.

Data It Expects

• The insight object must adhere to the following structure:

  jsonCopy

  {
      "title": "String",
      "description": "String",
      "priority": "String", // e.g., "high", "medium", "low"
      "reasoning": "String",
      "implementationDetails": {
          "timeline": "String",
          "riskLevel": "String",
          "dependencies": ["Array of Strings"]
      },
      "kpiImpact": [
          {
              "icon": "String", // icon key for iconMap
              "metric": "String",
              "projected": "Number or String"
          }
      ],
      "actionPlan": ["Array of Strings"]
  }

• The config object can potentially contain the properties outlined above for customizing modal behavior.

AI Integrations

The BiInsightDetailsModal leverages AI integrations by providing a dedicated section that explains the AI reasoning behind the insight, enhancing user comprehension of the analytical results generated by the platform.

Billing Impacts

Although the BiInsightDetailsModal itself does not directly influence billing, the actions taken through the action button—such as executing workflows—may lead to cost implications depending on the usage of the workflow service and the underlying data processing. Users should be aware of these potential impacts and may want to track usage separately.

Use Cases & Examples

Use Case 1: KPI Dashboard Insights

A business analyst utilizes the BiInsightDetailsModal to present insights derived from the latest sales figures. The modal can display AI-generated reasoning detailing why sales dipped, potential risks, and actionable plans to recover the loss.

Use Case 2: Project Management Planning

In a project management tool, project managers can employ the modal to communicate details of risk levels concerning project deadlines and implementation timelines, allowing for better decision-making based on insights derived from ongoing project analysis.

Detailed Example Configuration

To demonstrate a specific use case configuration for a project management scenario, consider the following sample setup:

{
    "insight": {
        "title": "Project A Risk Assessment",
        "description": "Analysis indicates potential risks leading to delayed deadlines.",
        "priority": "high",
        "reasoning": "AI predicts a 30% chance of a delay based on current resource allocation.",
        "implementationDetails": {
            "timeline": "Expected completion in Q4 2023.",
            "riskLevel": "High",
            "dependencies": ["Resource A", "Budget Approval"]
        },
        "kpiImpact": [
            {
                "icon": "Target",
                "metric": "Projected Completion Rate",
                "projected": "70%"
            }
        ],
        "actionPlan": [
            "Reassess resource allocation",
            "Schedule a team meeting",
            "Discuss budget adjustments"
        ]
    },
    "config": {
        "actionButton": {
            "label": "Execute Action Plan",
            "actionType": "executeWorkflow",
            "actionConfig": {
                "workflowId": "12345"
            }
        }
    }
}

In this configuration, a project manager can utilize the modal to understand the potential risks and click on the action button to trigger a workflow that addresses the outlined action plan.