Search All Component

Structure and Workflow

The SearchAllComponent is the main component responsible for rendering the search results page in Mint. It orchestrates the display of search results, filters, sorting, AI assistant, and feedback, adapting its UI based on the current search state.

Architecture

The diagram illustrates the main UI regions of the Search All Component:

• navbar-tabs: The top navigation bar allows users to switch between different content types (e.g., All, Web, Word, Excel, PowerPoint, Text).
• filters-bar: Below the tabs, the filters bar provides quick access to filter options such as Size, Concepts, Languages, Document Type, Modified, Treepath, and a "More filters" menu.
• sort-selector: Positioned to the right, this dropdown lets users change the sorting order of the results (e.g., by Relevance).
• record-card: Each search result is displayed as a card, showing the document title, date, and a content preview.

These regions work together to provide a flexible and interactive search experience, allowing users to refine, sort, and browse results efficiently.

Component Composition

• Imports and Dependencies:
  The component imports various UI and utility modules, including Angular signals, routing, state management, and custom components such as filters, tabs, assistant, and skeleton loaders.

• Signals and State:

  • Uses Angular signals to manage local state (e.g., query parameters, drawer state, assistant visibility).
  • Subscribes to stores for application-wide state (e.g., user settings, aggregations, principal).

• Query Handling:

  • Uses injectInfiniteQuery to fetch paginated search results based on current query parameters.
  • Updates the query parameters and triggers new searches when filters, sorting, or tabs change.

• UI Structure:
  The template is structured to show different UI states:

  • Loading State:
    Displays skeleton loaders for tabs, filters, and result cards while the query is pending.
  • Results State:
    • Shows tabs (if enabled), filters, "Did you mean" suggestions, sponsored results, sort selector, and the AI assistant (if allowed).
    • Renders a list of result cards using dynamic component outlets based on the document type.
    • Includes infinite scroll for loading more results and a floating feedback button.
  • No Results State:
    • Shows tabs and filters, and a "NoResult" panel if no results are found.

• Assistant Integration:

  • The AI assistant is conditionally displayed based on feature flags and user settings.
  • Supports collapsing/expanding, streaming state, and interaction with search context.

• Event Handling:

  • Handles sorting, filter clearing, feedback closing, and drawer state changes.
  • Updates the URL and internal state in response to user actions.

How It Works

1. Initialization:
   On component creation, effects are set up to synchronize query parameters, update the aggregations store, and manage UI state (e.g., assistant collapse).

2. Query Execution:
   When query parameters change, a new search is triggered. The results are paginated and managed by the infinite query.

3. Rendering:

   • If the query is loading, skeletons are shown.
   • If results are found, the full UI is rendered: tabs, filters, assistant, results, and feedback.
   • If no results, a "NoResult" message is displayed.

4. User Interaction:

   • Users can change tabs, filters, and sorting, which updates the query and re-renders results.
   • The assistant can be toggled and interacts with the current search context.
   • Feedback can be submitted for the current search.
   • shift+T toggles passages view, allowing users to see more detailed information about results.

5. State Synchronization:

   • The component keeps the URL, query parameters, and internal state in sync, ensuring browser navigation and deep linking work as expected.

Summary Table

Feature	Description
Tabs	Switch between different search contexts or result types
Filters	Refine search results using aggregations
Sort Selector	Change the order of results
AI Assistant	Provides an overview or assistance based on search context when available
Infinite Scroll	Loads more results as the user scrolls
Feedback	Allows users to submit feedback on search results
Skeletons	Placeholder UI while loading
No Results	Informs the user when no results are found

Related Files

• search-all.component.ts: Component logic and state management
• search-all.component.html: Template structure and UI composition