DataPreviewModal Component Documentation

Overview

The DataPreviewModal is a feature designed to provide a popup interface for users to preview workflow output and display error logs. It leverages a portal pattern to render itself at the document body level, ensuring proper centering and modal behavior. This component is primarily used in environments where workflows are executed and their outputs need to be reviewed quickly.

Purpose

The DataPreviewModal serves the following key purposes:

• Execute a data preview for a given workflow.
• Display the output data in a structured format, typically a table.
• Show error messages if the workflow execution fails.
• Allow users to view detailed information for individual rows in the data preview.

Settings

The DataPreviewModal accepts several props that control its behavior:

1. isOpen

   • Input Type: Boolean
   • Description: Determines whether the modal is currently open or closed. If true, the modal is rendered; if false, the modal is not rendered.
   • Default Value: false

2. onClose

   • Input Type: Function
   • Description: Callback function that is called when the modal is closed. This enables parent components to manage the state of the modal.
   • Default Value: () => {} (no-op function)

3. workflowId

   • Input Type: String
   • Description: Represents the unique identifier for the workflow that is being previewed. This ID is crucial for fetching the data to be displayed in the modal.
   • Default Value: undefined

Detailed Behavior of Each Setting

• isOpen: If true, the modal is active, presenting the user with the ability to run a workflow preview. If false, the component renders null and does not occupy any space in the DOM.

• onClose: This function is invoked upon the user's action to close the modal. It is essential for ensuring the parent component's state reflects the modal's visibility. If left undefined or not provided, it will not have any side effects, but closing functionality could be limited.

• workflowId: Without a valid workflowId, the component shows an error message indicating that the user must save the workflow first. It directly impacts whether the preview can be successfully executed and displayed. If this prop is not passed, the component cannot function correctly, as it will be unable to make the necessary API call to retrieve the data.

How It Works

1. Lifecycle Management: The modal uses lifecycle management to manage its mounting state, setting mounted to true when the component is first rendered.

2. Preview Execution: The runPreview function is invoked when the "Run Preview" button is clicked. It performs the following actions:

   • Checks if the workflowId is available. If not, it sets an error message.
   • Triggers an API call to fetch the workflow’s preview data.
   • Updates state variables for loading, previewData, and error based on the result of the API call.

3. Rendering Output: The component renders different UI elements based on the state of the modal:

   • It displays a loading state while fetching the preview data.
   • If there’s an error, an error panel is shown.
   • Upon successful data retrieval, a table of the data rows is displayed, with the ability to view detailed information per row.
   • Allows the user to toggle between viewing a limited number of rows or expanding to view all available rows.

4. Styling: CSS classes are applied for styling based on the user's theme (dark/light) and the component's state (loading/error).

Data Expectations

The DataPreviewModal expects the following data structure from the fetched API response:

• previewData: An object that contains:
  • data: An array of objects, each representing a row of data.
  • _schema: An object that defines the schema of the returned data fields.
  • _totalRows: A number that indicates the total number of rows returned.

The component includes basic handling for empty data, showing a different interface when no data is retrieved.

Use Cases & Examples

Use Case 1: Data Inspection during Development

When building workflows, developers often need to inspect the outputs to ensure that the workflow produces the expected results. The DataPreviewModal allows for quick verification of outputs against test inputs.

Use Case 2: Error Logging for Debugging

If a workflow fails to execute, displaying detailed error logs can help developers quickly identify issues. The modal can show these errors, allowing for efficient debugging.

Use Case 3: Data Review for Business Decisions

Data analysts can use the modal to review data outputs from automated workflows before presenting insights to stakeholders. This review ensures that decisions are based on accurate and reliable data.

Example Configuration

To configure the DataPreviewModal for the first use case, you can create a component that renders this modal as follows:

function MyComponent() {
    const [isModalOpen, setModalOpen] = initState(false);
    const [workflowId, setWorkflowId] = initState('12345'); // Example workflow ID

    const toggleModal = () => setModalOpen(prev => !prev);

    return (
        <>
            <button onClick={toggleModal}>Preview Workflow Output</button>
            <DataPreviewModal 
                isOpen={isModalOpen} 
                onClose={toggleModal} 
                workflowId={workflowId} 
            />
        </>
    );
}

In this example:

• The modal will open when the button is clicked.
• A predefined workflowId is set, allowing the modal to function correctly by retrieving data from the API.
• The modal will then execute a preview of the workflow data, displaying it to the user for immediate inspection.

AI Integrations

Currently, the DataPreviewModal does not include any specific AI integrations. However, future updates could consider enhanced data visualization or error prediction capabilities based on AI-driven analytics.

Billing Impacts

The DataPreviewModal itself does not directly impact billing. Any charges incurred would depend on the API calls made to execute the workflow preview, which may vary based on the pricing structure of the underlying backend services. Users should be aware of their data usage limits when fetching large datasets.