DataPreviewPanel Documentation

Overview

The DataPreviewPanel is a component designed for the Vantage analytics platform, providing a slide-up panel anchored at the bottom of the workflow editor. This panel allows users to view real-time data previews of the outputs generated by the workflow. Users can run previews while interacting with the workflow's canvas, NodeLibrary, and PropertiesPanel. This functionality is critical for verifying data transformations and ensuring the workflow operates as intended.

Settings

1. workflowId

• Input Type: String
• Description: The identifier for the current workflow being visualized. This ID is essential for fetching the correct preview data specific to the workflow.
• Default Value: None; it must be provided when the component is instantiated.

2. leftOffset

• Input Type: String (CSS units)
• Description: This setting determines the horizontal left offset of the panel from the viewport. It controls the alignment of the panel against the left edge of the screen.
• Default Value: '0rem'

3. rightOffset

• Input Type: String (CSS units)
• Description: Similar to leftOffset, this setting specifies the horizontal right offset of the panel. Adjusting this affects the panel's positioning along the right side of the viewport.
• Default Value: '0rem'

4. isCompact

• Input Type: Boolean
• Description: This setting toggles between a compact and a standard view for the panel. When set to true, it reduces the panel's initial height, providing a more condensed view.
• Default Value: false

5. expanded

• Input Type: Boolean (managed internally)
• Description: Indicates whether the panel is currently expanded or collapsed. This affects the height and visibility of the panel contents.
• Default Value: Inferred from isCompact (false when isCompact is true).

6. loading

• Input Type: Boolean (managed internally)
• Description: Indicates whether the panel is currently in a loading state, which occurs while fetching preview data.
• Default Value: false

7. previewData

• Input Type: Object (managed internally)
• Description: Holds the data received from the backend for the current preview result. This object is updated each time a new preview run is executed.
• Default Value: null

8. error

• Input Type: String (managed internally)
• Description: Contains error messages related to the data preview process, which may arise due to fetch failures or invalid responses.
• Default Value: null

9. panelHeight

• Input Type: Numeric (in pixels)
• Description: Specifies the height of the preview panel. Allows for dynamic resizing of the panel based on user interactions.
• Default Value: 320 if isCompact is false, otherwise 220.

10. resizing

• Input Type: Boolean (managed internally)
• Description: Indicates whether the panel is currently being resized by the user through drag-and-drop actions.
• Default Value: false

11. activeTab

• Input Type: String (enum: 'data' | 'node')
• Description: Determines the currently active tab within the panel, which can either be the data view or a node-specific view.
• Default Value: 'data'

12. viewMode

• Input Type: String (enum: 'table' | 'json')
• Description: Specifies how the data is presented within the panel, either in table format or as raw JSON.
• Default Value: 'table'

13. selectedRowIdx

• Input Type: Numeric
• Description: Tracks the index of the currently selected row in the data preview, facilitating interaction with table data.
• Default Value: null

14. expandedCell

• Input Type: Object (managed internally)
• Description: Contains information on which cell in the data preview table is currently expanded for detailed viewing. It is an object with rowIdx and col.
• Default Value: null

15. progress

• Input Type: Numeric (0 to 100)
• Description: Represents the current progress of data loading within the panel, displayed as a progress bar.
• Default Value: 0

How It Works

The DataPreviewPanel manages state, handles the fetching of preview data from the backend, and provides an interactive interface for users. Key functionalities include:

• Live Data Preview: Automatically fetches and displays live data based on the workflow's current nodes and edges.
• Error Handling: Manages user-facing error messages to provide feedback if data fetching fails.
• Dynamic Resizing: Users can resize the panel to view more or less data as per their needs.
• Tab Switching: Users can toggle between different presentation styles of the data (table and JSON).
• Flattering Experience: Users can still interact with workflow components while a data preview is being generated.

Data Expectations

The DataPreviewPanel expects data in a structured format, typically from the backend API. The expected data should include:

• Node Data: Potentially structured data extracted from the nodes in the workflow, organized either as a flat array or within an object with data and totalRows fields.
• Schema Information: Information about the data structure (column names, types) for rendering the data appropriately.
• Error Responses: Should be properly handled to inform users of any issues during data retrieval.

Use Cases & Examples

Use Case 1: Data Transformation Verification

When building a data pipeline that involves multiple transformations, a user can leverage the DataPreviewPanel to ensure that the transformations yield expected results at each node.

Use Case 2: Debugging Workflow Issues

In scenarios where a workflow is not outputting expected results, developers can utilize DataPreviewPanel to quickly iterate over each step in the workflow to identify where data may be incorrectly processed.

Use Case 3: Collaborative Data Analysis

In a team setting, multiple stakeholders can explore the complex data outputs generated by different nodes in real-time, leading to more efficient collaborative efforts in data analysis.

Detailed Example Configuration

For a scenario where a user is constructing a data pipeline to process customer data and requires validation of the results after each node:

<DataPreviewPanel
    workflowId="customerDataPipeline"
    leftOffset="1rem"
    rightOffset="1rem"
    isCompact={false}
/>

In this configuration:

• The workflowId is set to ensure that the correct workflow is referenced.
• leftOffset and rightOffset are adjusted for aesthetic purposes, ensuring sufficient space from the edges of the viewport.
• The isCompact mode is set to false to provide a more extensive view of data, facilitating easier review of customer data outputs.