RecentItems Component Documentation

Overview

The RecentItems component in the Vantage analytics & data platform allows users to view and filter their recently accessed items, such as dashboards and workflows. It provides a streamlined interface for navigating through recent files, utilizing efficient state management and responsive design elements. The component manages state and item retrieval efficiently.

Purpose

The primary purpose of the RecentItems component is to enhance user productivity by making recently used dashboards and workflows easily accessible. It enables users to filter items based on type, search through them, and paginate through large lists.

Settings

The component exposes several settings that influence its behavior and appearance. Below are the detailed explanations of each setting:

1. filterText

• Input Type: String
• Description: Allows users to filter the list of recent items by typing in a search query. The filtering is case-insensitive and checks against the title of each item.
• Default Value: undefined

2. activeFilter

• Input Type: String
• Description: Manages the current filter state for the items displayed. It can be set to 'all', 'dashboard', or 'workflow'. Changing this value will update the displayed items accordingly.
• Default Value: 'all'

3. showAllModal

• Input Type: Boolean
• Description: Toggles the visibility of the modal that displays all recent items. When set to true, the modal is shown, allowing users to view items beyond the initial display limit.
• Default Value: false

4. currentPage

• Input Type: Numeric
• Description: Represents the current page number when viewing all items in the modal. It controls pagination and can be set manually through the pagination controls.
• Default Value: 1

5. ITEMS_PER_PAGE

• Input Type: Numeric (constant)
• Description: Defines how many items are displayed per page within the modal. This value controls pagination and affects how many items the user can scroll through at once.
• Default Value: 10

How It Works

1. Data Fetching: The component utilizes the useRecentItems hook to fetch the list of recent items. This hook returns an object containing items (the fetched list) and loading status.

2. Filtering Logic: The component implements filtering based on filterText and activeFilter. Items are filtered based on the title (case-insensitive search) and item type (dashboard or workflow).

3. Pagination: The modal supports pagination, allowing users to navigate through a larger set of items organized by pages. Pagination buttons enable users to move between pages.

4. Rendering: The component renders a table with recent items, dynamically populating it with filtered data. If no items match the criteria, a "No matching files found" message is displayed.

5. Modal Interaction: Users can open a modal to see all recent items if the total items exceed the limit displayed in the main area. The modal provides pagination controls to navigate through items.

Data Expectations

The RecentItems component expects the following data structure for the items array:

[
  {
    "id": "unique-id",
    "title": "Item Title",
    "type": "dashboard | workflow",
    "modified": "ISO Date String",
    "is_shared": true | false
  }
]

• id: Unique identifier for the item.
• title: Title to be displayed.
• type: Specifies whether the item is a dashboard or workflow.
• modified: Timestamp of the last update, used for displaying the time ago the item was modified.
• is_shared: A boolean indicating if the item is shared with other users.

AI Integrations

As of the latest update, the RecentItems component does not have direct integrations with AI functionalities. However, there is potential for future enhancements that could utilize AI capabilities for improved item recommendations or smart filtering based on user behavior.

Billing Impacts

While the RecentItems component itself does not directly incur any billing impacts, the underlying usage of resources (such as API calls for fetching items) could influence overall system usage costs, depending on the data plan or service tier being utilized.

Use Cases & Examples

Use Case 1: Quick Access to Frequently Used Dashboards

A business analyst frequently revisits certain dashboards for reporting purposes. They can utilize the RecentItems component to quickly access their most recently utilized dashboards without navigating through multiple menus, significantly enhancing their workflow.

Use Case 2: Filtering Workflow Items

A project manager works with various workflows in the platform. By using the filter functionality, they can easily view and access recent workflows relevant to a specific project, saving time during the review process.

Configuration Example

To configure the RecentItems component to address the first use case, an analyst may set the filterText input to “2023 Sales Report” to quickly locate this dashboard.

<RecentItems filterText="2023 Sales Report" />

In this scenario, when the component renders, it will filter the recent items to show only those that include "2023 Sales Report" in their titles, providing a focused view for the analyst.