squash: Another change to search package and some UI polishing

radicle-dev · Jun 20, 2024 · f2c4a7f · f2c4a7f
1 parent cbb06ee
commit f2c4a7f
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 88 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,14 +64,14 @@
     "buffer": "^6.0.3",
     "compare-versions": "^6.1.0",
     "dompurify": "^3.0.11",
+    "fuzzysort": "^3.0.2",
     "hast-util-to-dom": "^4.0.0",
     "hast-util-to-html": "^9.0.0",
     "lodash": "^4.17.21",
     "marked": "^12.0.1",
     "marked-katex-extension": "^5.0.1",
     "marked-linkify-it": "^3.1.9",
     "md5": "^2.3.0",
-    "minisearch": "^6.3.0",
     "plausible-tracker": "^0.3.8",
     "svelte": "^4.2.12",
     "twemoji": "^14.0.2",

diff --git a/src/components/Id.svelte b/src/components/Id.svelte
@@ -54,7 +54,7 @@
     flex-direction: row;
     gap: 0.5rem;
     justify-content: center;
-    z-index: 10;
+    z-index: 20;
     background: var(--color-background-float);
     color: var(--color-foreground-default);
     border: 1px solid var(--color-border-hint);

diff --git a/src/components/NodeId.svelte b/src/components/NodeId.svelte
@@ -6,6 +6,7 @@
 
   export let nodeId: string;
   export let alias: string | undefined = undefined;
+  export let subject: string = formatNodeId(nodeId);
 </script>
 
 <style>
@@ -24,11 +25,13 @@
   }
 </style>
 
-<Id id={nodeId} subject={formatNodeId(nodeId)} style="none">
+<Id id={nodeId} {subject} style="none">
   <div class="avatar-alias">
     <Avatar {nodeId} />
     {#if alias}
-      {alias}
+      <span class="txt-overflow">
+        {alias}
+      </span>
     {:else}
       <span class="no-alias global-hide-on-mobile-down">
         {formatNodeId(nodeId)}

diff --git a/src/views/projects/Source/PeerBranchSelector.svelte b/src/views/projects/Source/PeerBranchSelector.svelte
@@ -2,7 +2,7 @@
   import type { ProjectRoute } from "@app/views/projects/router";
   import type { Project, Remote } from "@http-client";
 
-  import MiniSearch, { type SearchResult } from "minisearch";
+  import fuzzysort from "fuzzysort";
   import { formatCommit, formatNodeId } from "@app/lib/utils";
   import { orderBy } from "lodash";
 
@@ -28,60 +28,36 @@
 
   const subgridStyle =
     "display: grid; grid-template-columns: subgrid; grid-column: span 2;";
-  const highlightSearchStyle =
-    "background: var(--color-fill-yellow-iconic); color: var(--color-foreground-black);";
+  const highlightSearchStyle = [
+    '<span style="background: var(--color-fill-yellow-iconic); color: var(--color-foreground-black);">',
+    "</span>",
+  ];
   let searchInput = "";
 
-  function markHints(result: SearchResult) {
-    const hints: Record<string, string> = {};
-    result.queryTerms.forEach(queryTerm => {
-      const regexp = new RegExp(`(${queryTerm})`, "gi");
-      Object.values(result.match).forEach(fields => {
-        fields.forEach(field => {
-          hints[field] = result[field].replace(
-            regexp,
-            `<span style="${highlightSearchStyle}">$1</span>`,
-          );
-        });
-      });
-    });
-
-    return hints;
-  }
-
-  const fuzzy = new MiniSearch({
-    fields: ["revision", "peer.alias", "peer.id"],
-    storeFields: ["peer.delegate", "peer.alias", "peer.id", "revision", "head"],
-    extractField: (document, fieldName) =>
-      fieldName.split(".").reduce((doc, key) => doc && doc[key], document),
-  });
-  fuzzy.addAll(
-    [
-      {
-        peer: undefined,
-        revision: project.defaultBranch,
-        head: project.head,
-      },
-      ...peers.flatMap(peer =>
-        Object.entries(peer.heads).map(([name, head]) => ({
-          peer: { id: peer.id, alias: peer.alias, delegate: peer.delegate },
-          revision: name,
-          head,
-        })),
-      ),
-    ].map((s, id) => ({ ...s, id })),
-  );
+  const searchElements = [
+    {
+      peer: undefined,
+      revision: project.defaultBranch,
+      head: project.head,
+    },
+    ...peers.flatMap(peer =>
+      Object.entries(peer.heads).map(([name, head]) => ({
+        peer: { id: peer.id, alias: peer.alias, delegate: peer.delegate },
+        revision: name,
+        head,
+      })),
+    ),
+  ];
 
   $: selectedPeer = peers.find(p => p.id === peer);
-  $: searchResults = fuzzy
-    .search(searchInput, {
-      fuzzy: 0.5,
-      prefix: true,
-    })
-    .map(result => {
-      result.hints = markHints(result);
-      return result;
-    });
+  $: searchResults = fuzzysort.go(searchInput, searchElements, {
+    keys: ["peer.alias", "revision"],
+    scoreFn: r =>
+      r.score *
+      (r.obj.peer?.delegate ? 2 : 1) *
+      (r.obj.peer === undefined ? 10 : 1) *
+      (r.obj.peer?.alias ? 2 : 1),
+  });
 </script>
 
 <style>
@@ -190,61 +166,56 @@
 
         {#if searchInput}
           {#each searchResults as result}
+            {@const { revision, peer, head } = result.obj}
             <Link
               style={subgridStyle}
               route={{
                 ...baseRoute,
-                peer: result["peer.id"],
-                revision: peer ? result.revision : undefined,
+                peer: peer?.id,
+                revision: peer ? revision : undefined,
               }}
               on:afterNavigate={() => {
                 searchInput = "";
                 toggle();
               }}>
               <DropdownListItem
-                selected={selectedPeer?.id === result["peer.id"] &&
-                  selectedBranch === result.revision}
+                selected={selectedPeer?.id === peer?.id &&
+                  selectedBranch === revision}
                 style={`${subgridStyle} gap: inherit;`}>
                 <div class="global-flex-item">
                   <IconSmall name="branch" />
                   <span class="txt-overflow">
-                    {#if result["peer.id"]}
+                    {#if peer?.id}
                       <span class="global-flex-item">
-                        {#if result.hints["peer.alias"]}
+                        {#if result[0].target}
                           <span>
-                            {@html result.hints["peer.alias"]}
-                          </span>
-                        {:else if result["peer.alias"]}
-                          {result["peer.alias"]}
-                        {:else if result.hints["peer.id"]}
-                          <span>
-                            {@html result.hints["peer.id"]}
+                            {@html result[0].highlight(...highlightSearchStyle)}
                           </span>
+                        {:else if peer.alias}
+                          {peer.alias}
                         {:else}
-                          {formatNodeId(result["peer.id"])}
+                          {formatNodeId(peer.id)}
                         {/if}
-                        {#if result["peer.delegate"]}
+                        {#if peer.delegate}
                           <Badge variant="delegate" round>
                             <IconSmall name="badge" />
                           </Badge>
                         {/if} /
                         <span class="txt-overflow">
-                          {#if result.hints.revision}
-                            {@html result.hints.revision}
+                          {#if result[1].target}
+                            <span>
+                              {@html result[1].highlight(
+                                ...highlightSearchStyle,
+                              )}
+                            </span>
                           {:else}
-                            {result.revision}
+                            {revision}
                           {/if}
                         </span>
                       </span>
                     {:else}
                       <div class="global-flex-item">
-                        {#if result.hints.revision}
-                          <span>
-                            {@html result.hints.revision}
-                          </span>
-                        {:else}
-                          {result.revision}
-                        {/if}
+                        {revision}
                         <Badge
                           title="Canonical branch"
                           variant="foreground-emphasized">
@@ -257,7 +228,7 @@
                 <div
                   class="txt-monospace"
                   style="color: var(--color-foreground-dim);">
-                  {formatCommit(result.head)}
+                  {formatCommit(head)}
                 </div>
               </DropdownListItem>
             </Link>

diff --git a/src/views/projects/Source/PeerBranchSelector/Peer.svelte b/src/views/projects/Source/PeerBranchSelector/Peer.svelte
@@ -38,7 +38,10 @@
     <IconButton title="Expand peer" on:click={() => (expanded = !expanded)}>
       <IconSmall name={expanded ? "chevron-down" : "chevron-right"} />
     </IconButton>
-    <NodeId nodeId={peer.remote.id} alias={peer.remote.alias} />
+    <NodeId
+      subject="Node Id"
+      nodeId={peer.remote.id}
+      alias={peer.remote.alias} />
     {#if peer.remote.delegate}
       <Badge size="tiny" variant="delegate">
         <IconSmall name="badge" />