GlobalSearch Documentation

Overview

The GlobalSearch component is an interactive search feature designed for the Vantage analytics and data platform, allowing users to quickly search and navigate through various static and dynamic pages. The component integrates with recent items viewed by the user and provides search functionality through a text input interface that can be enhanced with keyboard shortcuts.

Key Features

• Efficiently filters through a predefined list of pages and recently accessed items.
• Allows navigation via keyboard shortcuts.
• Adjustable appearance based on user actions (e.g., opening and closing search).
• Displays search results in a dropdown format.

Settings

Below are the detailed settings for the GlobalSearch component, including their purpose, input types, effects of modification, and defaults.

onSearch

• Input Type: Function
• Description: This is a callback function that gets triggered each time the user modifies the search input. It receives the current search text as an argument. Implementing this function can allow developers to create custom search functionalities, like querying APIs, updating other parts of the application based on the new search text, or logging search activities.
• Default Value: undefined

How It Works

1. User Input and State Management: The component maintains local state variables to handle the search text and the currently selected item in the filtered results.
2. Filtering Logic: The component combines static pages with the recently accessed items and filters them based on the current user input. The results are limited to a maximum of ten items to enhance performance.
3. Keyboard Navigation: Users can navigate through the search results using keyboard arrow keys and can activate a selected item with the Enter key. The escape key can be used to close the search.
4. Click and Focus Management: The search input is focused automatically when opened. Click events outside the search box will also close it, ensuring a better user experience.
5. Visual Feedback: The component provides visual feedback for search results, including highlighting the selected item and showing appropriate icons based on the item type.

Data Expectations

The component expects the data in the following format for both static and dynamic items:

[
    {
        "title": "String",
        "path": "String", 
        "description": "String",
        "type": "String" // Expected values: page, dashboard, workflow
    }
]

• Dynamic Items: This data can come from a hook that retrieves recent items, designed for the user's last interaction with the platform, thereby improving the search relevance.

The static pages are hardcoded in the component, serving as the foundational elements users can always search for.

Use Cases & Examples

Use Cases

1. User Navigation Enhancement: Organizations utilizing Vantage can improve navigation efficiency through quick searches enabling users to find dashboards, reports, and settings without manually clicking through multiple layers of menus.

2. Dynamic Item Discovery: An analytics team might want to quickly locate specific recent reports or dashboard views that are not regularly accessed or bookmarked to ensure prompt data-driven decision-making.

3. Resource Management Integration: In a situation where users frequently access various resources, integrating the GlobalSearch with a system that logs recent items can provide data insights into frequently accessed reports and dashboards.

Configuration Example

Use Case: An admin wants to ensure that users can quickly access frequently updated reports.

Sample Configuration:

const handleSearch = (searchText) => {
    console.log("Searching for:", searchText);
    // Implement further logic to handle search such as API calls or state updates
};

// In rendering the component
<GlobalSearch onSearch={handleSearch} />

In this example, the developer defines a handleSearch function that logs the current search text to the console. In a production scenario, this function could be expanded to trigger searches against an API returning reports relevant to the user's query.

Conclusion

The GlobalSearch component provides a powerful interface for users to enhance their navigation and search capabilities within the Vantage platform. Employing this tool can enable users to streamline their information retrieval process while also benefiting from seamless integrations with existing workflows and data structures.