add fuzzy search

saisandeepvaddi · May 23, 2020 · eeecbff · eeecbff
1 parent 9b93f34
commit eeecbff
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 26 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -36,6 +36,7 @@
     "axios": "^0.19.2",
     "chalk": "^3.0.0",
     "formik": "^2.1.4",
+    "fuse.js": "^6.0.0",
     "localforage": "^1.7.3",
     "lodash": "^4.17.15",
     "react": "^16.12.0",

diff --git a/ui/src/components/Search/Search.tsx b/ui/src/components/Search/Search.tsx
@@ -72,4 +72,4 @@ const Search: React.FC<ISearchProps> = ({
   );
 };
 
-export default Search;
+export default React.memo(Search);
diff --git a/ui/src/components/Search/task-search.tsx b/ui/src/components/Search/task-search.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { ItemPredicate, ItemRenderer } from "@blueprintjs/select";
+import { ItemRenderer, ItemListPredicate } from "@blueprintjs/select";
 import { MenuItem } from "@blueprintjs/core";
-
+import Fuse from "fuse.js";
+import { throttle } from "lodash";
 function highlightText(text: string, query: string) {
   let lastIndex = 0;
   const words = query
@@ -24,7 +25,11 @@ function highlightText(text: string, query: string) {
       tokens.push(before);
     }
     lastIndex = regexp.lastIndex;
-    tokens.push(<strong key={lastIndex}>{match[0]}</strong>);
+    tokens.push(
+      <strong key={lastIndex} style={{ color: "goldenrod" }}>
+        {match[0]}
+      </strong>
+    );
   }
   const rest = text.slice(lastIndex);
   if (rest.length > 0) {
@@ -59,22 +64,14 @@ export const renderCommand: ItemRenderer<ISearchProjectCommand> = (
   );
 };
 
-export const filterCommand: ItemPredicate<ISearchProjectCommand> = (
-  query,
-  command,
-  _index,
-  exactMatch
-) => {
-  const normalizedName =
-    command.name.toLowerCase() + "-" + command.cmd.toLowerCase();
-  const normalizedQuery = query.toLowerCase();
+const getSearchResults = throttle(function(fuse, query) {
+  const results = fuse.search(query);
+  return results.map((result) => result.item);
+}, 100);
 
-  return normalizedName.indexOf(normalizedQuery) >= 0;
-  // if (exactMatch) {
-  //   return normalizedName === normalizedQuery;
-  // } else {
-  //   return normalizedName.indexOf(normalizedQuery) >= 0;
-  // }
+export const filterCommands = (fuse, query: string) => {
+  const results = getSearchResults(fuse, query);
+  return results;
 };
 
 export function areCommandsEqual(
@@ -84,8 +81,20 @@ export function areCommandsEqual(
   return commandA._id === commandB._id;
 }
 
-export const getCommandSelectProps = (commands: ISearchProjectCommand[]) => ({
-  itemPredicate: filterCommand,
-  itemRenderer: renderCommand,
-  items: commands,
-});
+export const getCommandSelectProps = (commands: ISearchProjectCommand[]) => {
+  const fuse = new Fuse(commands, {
+    keys: [
+      { name: "projectName", weight: 1 },
+      { name: "name", weight: 2 },
+      { name: "cmd", weight: 2 },
+    ],
+    includeMatches: true,
+  });
+
+  return {
+    itemListPredicate: (query: string, commands: ISearchProjectCommand[]) =>
+      filterCommands(fuse, query),
+    itemRenderer: renderCommand,
+    items: commands,
+  };
+};
diff --git a/ui/src/components/shared/stores/ProjectStore.tsx b/ui/src/components/shared/stores/ProjectStore.tsx
@@ -201,7 +201,7 @@ function ProjectsProvider(props: IProjectsProviderProps) {
       try {
         setLoadingProjects(true);
         const receivedProjects: IProject[] = await getProjects(config);
-        if (receivedProjects.length > 0) {
+        if (receivedProjects?.length > 0) {
           setProjects(receivedProjects);
           if (activeProject._id === "") {
             setActiveProject(receivedProjects[0]);
@@ -450,7 +450,7 @@ function ProjectsProvider(props: IProjectsProviderProps) {
           (x: IProject) => x._id !== projectId
         );
         setProjects(newProjects);
-        if (newProjects && newProjects.length > 0) {
+        if (newProjects && newProjects?.length > 0) {
           setActiveProject(newProjects[0]);
         } else {
           setActiveProject(initialProject);

diff --git a/yarn.lock b/yarn.lock
@@ -8364,6 +8364,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+fuse.js@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.0.0.tgz#6fc16cd7555648deda392892402d4188553552b2"
+  integrity sha512-e5Ap6mhF/WQ9bKqsMFTTR5/DS9qbYab4VXHtMdxCanH+VZkdUV2LqcgMO31etSQv53NXsguQF1bdqkrrPAM2HQ==
+
 gatsby-cli@^2.8.22:
   version "2.8.22"
   resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-2.8.22.tgz#3c3ccb228767f329ff29047935595a1a1414ef96"
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,4 +72,4 @@ const Search: React.FC<ISearchProps> = ({ @@
       );
     };
-    export default Search;
+    export default React.memo(Search);