Add fuzzy search hook to @automattic/search

[zaguiini]

Proposed Changes

Right now, our client-side searches are pretty limited: we have the searchSites HOC that exposes basic search functionality that's not very customizable and the results have to match the term exactly, bringing a subpar user experience.

This PR adds a useFuzzySearch hook that relies on the fuse.js package. That hook can be used anywhere search is needed. You can pass fields that are indexed and the search state is also handled.

Testing Instructions

Check out this branch, run yarn install then yarn build-packages so the @automattic/search package gets updated.

Once done, apply this diff to Calypso:

diff --git a/client/components/search-sites/index.js b/client/components/search-sites/index.js
index e17a05af82..f1fa99da83 100644
--- a/client/components/search-sites/index.js
+++ b/client/components/search-sites/index.js
@@ -1,3 +1,4 @@
+import { useFuzzySearch } from '@automattic/search';
 import { get } from 'lodash';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -16,27 +17,20 @@ const mapState = ( state ) => ( {
 export default function searchSites( WrappedComponent ) {
 	const componentName = WrappedComponent.displayName || WrappedComponent.name || '';
 
-	class Searcher extends Component {
-		state = { term: null };
-
-		setSearchTerm = ( term ) => this.setState( { term } );
-
-		getSearchResults() {
-			return this.state.term
-				? searchCollection( this.props.sites, this.state.term.toLowerCase(), [ 'name', 'URL' ] )
-				: null;
-		}
-
-		render() {
-			return (
-				<WrappedComponent
-					{ ...this.props }
-					searchSites={ this.setSearchTerm }
-					sitesFound={ this.getSearchResults() }
-				/>
-			);
-		}
-	}
+	const Searcher = ( props ) => {
+		const { query, setQuery, results } = useFuzzySearch( {
+			data: props.sites,
+			fields: [ 'name', 'URL' ],
+		} );
+
+		return (
+			<WrappedComponent
+				{ ...props }
+				searchSites={ setQuery }
+				sitesFound={ query ? results : null }
+			/>
+		);
+	};
 
 	const Connected = connect( mapState )( Searcher );
 	Connected.displayName = `SearchSites(${ componentName })`;

Open any site in Calypso, click Switch Site and start typing in the search bar. It no longer requires an exact match to return queried results.

This is an optional change to the searchSites HOC just to exemplify the usage. It does not necessarily need to be used there. I first implemented this hook in #65454 but I moved it here so I don't have a PR breaking the single-subject rule.

Related to #65169, first implemented in #65454.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-37793

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-37793&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~5237 bytes added 📈 [gzipped])

name                          parsed_size              gzip_size
async-load-automattic-search     +15933 B  (+6476.8%)    +5237 B  (+2877.5%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[danielbachhuber]

This PR adds a useFuzzySearch hook that relies on the fuse.js package. That hook can be used anywhere search is needed. You can pass fields that are indexed and the search state is also handled.

@zaguiini What are some examples where fuzzy search (and a separate library) are advantageous over the pure string match in #65505 ?

[vykes-mac]

I'm not sure what's performance impact but I think fuzzy can be beneficial especially as list of sites grow. I might want to find a site that i do not remember the exact name but entering partial string finds the site for me.

Is the search on cached results or any server call is made?

[vykes-mac]

I actually like this feature, there are particular sites I use at times but after I while it gets lost in recently used order, I often don't remember the name especially with the generated free domain names. Testing this out made it easy to find a site quickly that would otherwise take me sometime.

[zaguiini]

Thanks, @vykes-mac. That's exactly the case I think fuzzy search should be used for.

Furthermore, there's this great article here exemplifying use cases and why it's a good idea.

So @danielbachhuber, the difference is mostly subjective as there are no performance benefits of one over the other.

[danielbachhuber]

Works great!

I don't feel I have any qualified opinions on the JavaScript fanciness, so it'd be good to get a second pair of eyes in that regard.

Also worth noting: I had to add a newline in order for the patch to apply.

[zaguiini]

@tyxla: added some tests.

One enhancement is now that we're reusing the same Fuse instance whenever data changes, instead of throwing everything away. That improves performance A LOT: a 6x CPU slowdown allows removing debouncing on the <Search /> instance and it still queries very quickly. I'm honestly impressed!

Try it yourself:

diff --git a/client/components/site-selector/index.jsx b/client/components/site-selector/index.jsx
index e010714eb9..a085c03c9e 100644
--- a/client/components/site-selector/index.jsx
+++ b/client/components/site-selector/index.jsx
@@ -416,7 +416,6 @@ export class SiteSelector extends Component {
 			>
 				<SearchComponent
 					onSearch={ this.onSearch }
-					delaySearch={ true }
 					placeholder={ this.props.searchPlaceholder }
 					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus={ this.props.autoFocus }

Then open the sidebar > site search in Calypso.

Please, re-review the PR!

[danielbachhuber]

Works well in my testing! Left some non-blocking comments.

[p-jackson]

Looks like Fuse supports some powerful searching. Maybe in the future we'll want to expose the scores from the hook too, but we can do that when the need arises.

fuse.js seems solid enough from a maintenance point of view. Apache licensed.

[tyxla]

Looking good 👍

Left a few comments, nothing blocking, and this can be shipped with or without addressing them IMHO.

Nice work 🚀

[zaguiini]

@tyxla @danielbachhuber @vykes-mac @p-jackson would appreciate a review of the README changes before merging this PR!

[danielbachhuber]

README update looks great!

[tyxla]

Still looking great! Thanks for the thorough README and for the tests.

Just left a couple of little suggestions, but nothing blocking.

🚀