Added ellipsis to search matches if they are windowed

Author: ericallam

app/components/SearchPalette.tsx

@@ -312,13 +312,14 @@ function SearchResultValue({
 function createOutputForMatch(
   stringValue: string,
   isHighlighted: boolean,
-  match?: Fuse.FuseResultMatch
+  match?: Fuse.FuseResultMatch,
+  maxLength: number = 68
 ): JSX.Element {
   if (!match) {
-    return <>{truncate(stringValue, { length: 56 })}</>;
+    return <>{truncate(stringValue, { length: maxLength })}</>;
   }
 
-  const stringSlices = getStringSlices(stringValue, match.indices, 56);
+  const stringSlices = getStringSlices(stringValue, match.indices, maxLength);
 
   return (
     <>

app/utilities/search.ts

@@ -85,8 +85,6 @@ export function getRawValue(type: JSONValueType): string | undefined {
 }
 
 type StringSlice = {
-  start: number;
-  end: number;
   isMatch: boolean;
   slice: string;
 };
@@ -96,11 +94,13 @@ type StringSlice = {
 // and the matches are [[10, 15], [80, 90], [100, 105]]
 // then we should return slices:
 // [
-//   { start: 70, end: 80, isMatch: false, slice: "the string," },
-//   { start: 80, end: 90, isMatch: true, slice: ", we should" },
-//   { start: 90, end: 100, isMatch: false, slice: "d only retu" },
-//   { start: 100, end: 105, isMatch: true, slice: "urn sl" },
-//   { start: 105, end: 125, isMatch: false, slice: "lices that are within" },
+//   { isMatch: false, slice: "…" }
+//   { isMatch: false, slice: "the string," },
+//   { isMatch: true, slice: ", we should" },
+//   { isMatch: false, slice: "d only retu" },
+//   { isMatch: true, slice: "urn sl" },
+//   { isMatch: false, slice: "lices that are within" },
+//   { isMatch: false, slice: "…" },
 //
 // If stringValue length is less than the windowSize, then we should return all the string slices of the string
 export function getStringSlices(
@@ -110,13 +110,12 @@ export function getStringSlices(
 ): Array<StringSlice> {
   const slices: StringSlice[] = [];
 
-  const addSlice = (
-    start: number,
-    end: number,
-    isMatch: boolean,
-    slice: string
-  ) => {
-    slices.push({ start, end, isMatch, slice });
+  const addSlice = (isMatch: boolean, slice: string) => {
+    slices.push({ isMatch, slice });
+  };
+
+  const addEllipsis = () => {
+    addSlice(false, "…");
   };
 
   const calculateWindow = (): { start: number; end: number } => {
@@ -152,38 +151,31 @@ export function getStringSlices(
 
   let currentIndex = window.start;
 
+  if (window.start > 0) {
+    addEllipsis();
+  }
+
   for (const [start, end] of matchingIndices) {
     if (start < window.start && end <= window.start) {
       continue;
     } else if (start >= window.end) {
       continue;
     } else if (start < window.start && end > window.start) {
-      addSlice(
-        window.start,
-        end + 1,
-        true,
-        stringValue.slice(window.start, end + 1)
-      );
+      addSlice(true, stringValue.slice(window.start, end + 1));
 
       currentIndex = end + 1;
     } else if (start >= window.start && end <= window.end) {
-      addSlice(
-        currentIndex,
-        start,
-        false,
-        stringValue.slice(currentIndex, start)
-      );
-      addSlice(start, end + 1, true, stringValue.slice(start, end + 1));
+      addSlice(false, stringValue.slice(currentIndex, start));
+      addSlice(true, stringValue.slice(start, end + 1));
       currentIndex = end + 1;
     }
   }
 
-  addSlice(
-    currentIndex,
-    window.end,
-    false,
-    stringValue.slice(currentIndex, window.end + 1)
-  );
+  addSlice(false, stringValue.slice(currentIndex, window.end + 1).trimEnd());
+
+  if (window.end < stringValue.length - 1) {
+    addEllipsis();
+  }
 
   return slices;
 }

tests/search.test.ts

@@ -69,22 +69,16 @@ describe("getStringSlices", () => {
     expect(slices).toMatchInlineSnapshot(`
 Array [
   Object {
-    "end": 10,
     "isMatch": false,
     "slice": "This is a ",
-    "start": 0,
   },
   Object {
-    "end": 16,
     "isMatch": true,
     "slice": "really",
-    "start": 10,
   },
   Object {
-    "end": 37,
     "isMatch": false,
     "slice": " great (short) string",
-    "start": 16,
   },
 ]
 `);
@@ -104,34 +98,32 @@ Array [
     expect(slices).toMatchInlineSnapshot(`
 Array [
   Object {
-    "end": 80,
+    "isMatch": false,
+    "slice": "…",
+  },
+  Object {
     "isMatch": false,
     "slice": "e is outside of the windo",
-    "start": 55,
   },
   Object {
-    "end": 91,
     "isMatch": true,
     "slice": "w, so we sh",
-    "start": 80,
   },
   Object {
-    "end": 100,
     "isMatch": false,
     "slice": "ould try ",
-    "start": 91,
   },
   Object {
-    "end": 106,
     "isMatch": true,
     "slice": "and ge",
-    "start": 100,
   },
   Object {
-    "end": 115,
     "isMatch": false,
     "slice": "t only sli",
-    "start": 106,
+  },
+  Object {
+    "isMatch": false,
+    "slice": "…",
   },
 ]
 `);
@@ -150,22 +142,24 @@ Array [
     expect(slices2).toMatchInlineSnapshot(`
 Array [
   Object {
-    "end": 103,
+    "isMatch": false,
+    "slice": "…",
+  },
+  Object {
     "isMatch": false,
     "slice": " incididunt ut labore et ",
-    "start": 78,
   },
   Object {
-    "end": 109,
     "isMatch": true,
     "slice": "dolore",
-    "start": 103,
   },
   Object {
-    "end": 133,
     "isMatch": false,
     "slice": " magna aliqua. Ut enim ad",
-    "start": 109,
+  },
+  Object {
+    "isMatch": false,
+    "slice": "…",
   },
 ]
 `);