Tabbed Search

The Tabbed Search is a way to view and search the data of the YDS Platform in a different way. Instead of searching with just a search keyword and limiting the results to specific concepts, in Tabbed Search the user selects a concept from the ones that are available in order to view all the results available in it. They can search within that concept by using keywords and the Advanced Search, which is a way to create more complex queries with a graphical user interface. In the Advanced Search, multiple plugins are available to make the input of values easier for the user.

1. Search Tabs Component:

The 'Search Tabs' component combines all the components required for the tabbed search interface into one simple to use component:

• Basic Search component (search bar)
• Query Builder component (for advanced search)
• Concept Description component
• Grid Results component

When the component loads, it gets the available Search concepts from the API, then it creates tabs for each concept, which contain a search box with optional advanced filters, and a grid with the results. All the individual components and their functions are explained below.

Example Usage:

<yds-search-tabs
    lang="en">
</yds-search-tabs>

Input Values:

Screenshot:

2. Basic Search Component:

The Basic Search component is explained in the previous page, however in the tabs of Tabbed Search it is initialized a little differently in order to show the Advanced Search options. In the Example Usage below you can see how the Search Tabs component initializes the Basic Search for the "Trade Activities" tab.

Example Usage:

<yds-search
    tabbed="true"
    lang="en"
    max-suggestions="15"
    concept="TradeActivity"
    concept-id="http://linkedeconomy.org/ontology#TradeActivity">
</yds-search>

Screenshot:

3. Query Builder Component:

This component allows the user to create complex queries for search the data in the YDS Platform in an easy to understand way, with a graphical user interface. It is based on jQuery QueryBuilder, extending it in order to have submenus for filter selection using Selectivity.js. Included in the YDS Library are also some plugins used by the QueryBuilder in filters where they are applicable:

• YDS Country Selector: Allows the selection of countries from a list which includes flags, instead of typing the country name.
• YDS Currency Selector: Allows the selection of currencies from a list.
• YDS Map Selector: Allows the selection of a point on the map.
• YDS Year Selector: Allows the selection of years with a graphical user interface.

In fields where there is text input, suggestions are shown that are tailored to that specific field. In the Example Usage you can see how the Query Builder component is initialized for the "Trade Activities" tab.

Example Usage:

<query-builder
    lang="en"
    concept="TradeActivity"
    concept-id="http://linkedeconomy.org/ontology#TradeActivity"
    max-suggestions="10">
</query-builder>

Input Values:

Screenshot:

4. Concept Description Component:

The Concept Description component is a simple component used in the Tabbed Search interface to provide an easy to understand description for each concept of the data that the user can search. It displays the concept name and description.

Example Usage:

<yds-concept-description
    concept-id="http://linkedeconomy.org/ontology#TradeActivity"
    lang="en">
</yds-concept-description>

Input Values:

Screenshot:

5. Grid Results Component

The Grid Results component is based on ag-Grid and shows results in a grid format. It supports infinite scrolling and server-side sorting on the columns that the server allows it. In Tabbed Search it displays the search results, however it can also be used standalone. On every result, there is a "View" button, which will show more information about the result. The component also supports exporting up to 5.000 results to a CSV file.

Example Usage:

<yds-grid-results
    project-id="none"
    view-type="TradeActivity"
    sorting="true"
    lang="en"
    quick-filtering="true"
    col-resize="true"
    page-size="50"
    add-to-basket="true"
    exporting="true">
</yds-grid-results>

Input Values:

Screenshot: