Frontend ‐ Search

The search functionality for the napari hub is built using a three stage process: search, filter, and sort. This all happens on the browser-side in-memory since our dataset of plugins is not huge and doing it on the frontend in-memory would be way faster and more reliable than backend search. However, we do have plans to move search to the backend in the future so that we may integrate it with napari or napari.org.

Search

[Image: image.png]Plugin search is handled entirely in the browser, using Fuse.js for our search engine. The frontend fetches the index data from the backend and uses it to create the Fuse.js index. This index is then used for searching for plugins given a particular user query.

Creating the index

Creating the search engine index for querying is a multi-step process:

1. The user loads https://napari-hub.org.
2. The frontend server from the hub backend: https://api.napari-hub.org/plugins/index
3. The plugin index data is server side rendered with the home page
4. After React hydration, the the plugin index data is used to create the search engine index

User Queries

When a user submits a new query, it executes a query on the search engine and updates the search result state. The process for this looks like:

1. User enters query video and hits enter.
2. Query state and parameter gets set
3. Change to query state is detected, and search result state gets updated

Filtering

[Image: image.png][Image: image.png] [Image: image.png]After searching, the plugins are then filtered based on the filter UI form state. Each filter function is implemented as a hook with the following signature:

declare function useFilterFunction(
  state: FilterFormState,
  results: SearchResult[],
): SearchResult[];

Each filter function is stored in an array and called sequentially using the result of the last execution for the input of the current function:

const FILTERS = [
  useFilterFunction1,
  useFilterFunction2,
  ...,
];

Implementing the filter functions this way makes it easier to extend the filter functionality by implementing a new function and adding it to the array.

Sorting

[Image: image.png] After the plugin list has been narrowed by search and filtering, we perform a sort on the plugin list based on the selected sort function:

• Relevance: Sorted by Fuse.js score
• Plugin name: Sorted by plugin name alphabetically
• Recently updated: Sorted by most recent release date of the plugin
• Newest: Sorted by most recent first release of the plugin.