feature: highlight strategy in search UI

devflowinc · Jul 26, 2024 · 85cbb08 · 85cbb08
1 parent bfb0292
commit 85cbb08
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 0 deletions.
diff --git a/frontends/search/src/components/GroupPage.tsx b/frontends/search/src/components/GroupPage.tsx
@@ -225,6 +225,7 @@ export const GroupPage = (props: GroupPageProps) => {
             page_size: search.debounced.pageSize,
             get_total_pages: search.debounced.getTotalPages,
             highlight_results: search.debounced.highlightResults,
+            highlight_strategy: search.debounced.highlightStrategy,
             highlight_threshold: search.debounced.highlightThreshold,
             highlight_delimiters: search.debounced.highlightDelimiters,
             highlight_max_length: search.debounced.highlightMaxLength,

diff --git a/frontends/search/src/components/ResultsPage.tsx b/frontends/search/src/components/ResultsPage.tsx
@@ -186,6 +186,7 @@ const ResultsPage = (props: ResultsPageProps) => {
         page_size: props.search.debounced.pageSize ?? 10,
         get_total_pages: props.search.debounced.getTotalPages ?? false,
         highlight_results: props.search.debounced.highlightResults ?? true,
+        highlight_strategy: props.search.debounced.highlightStrategy ?? false,
         highlight_threshold: props.search.debounced.highlightThreshold,
         highlight_delimiters: props.search.debounced.highlightDelimiters ?? [
           "?",

diff --git a/frontends/search/src/components/SearchForm.tsx b/frontends/search/src/components/SearchForm.tsx
@@ -22,6 +22,7 @@ import { DatasetAndUserContext } from "./Contexts/DatasetAndUserContext";
 import { Filter, FilterItem, Filters } from "./FilterModal";
 import { FiChevronDown, FiChevronUp } from "solid-icons/fi";
 import {
+  HighlightStrategy,
   isSortByField,
   isSortBySearchType,
   SearchOptions,
@@ -854,6 +855,7 @@ const SearchForm = (props: { search: SearchStore; groupID?: string }) => {
                                   getTotalPages: false,
                                   highlightResults: true,
                                   highlightDelimiters: ["?", ".", "!"],
+                                  highlightStrategy: "v1",
                                   highlightMaxLength: 8,
                                   highlightMaxNum: 3,
                                   highlightWindow: 0,
@@ -884,6 +886,25 @@ const SearchForm = (props: { search: SearchStore; groupID?: string }) => {
                             }}
                           />
                         </div>
+                        <div class="flex items-center justify-between space-x-2 p-1">
+                          <label>Highlight exact match</label>
+                          <select
+                            class="h-fit rounded-md border border-neutral-400 bg-neutral-100 p-1 dark:border-neutral-900 dark:bg-neutral-800"
+                            onChange={(s) => {
+                              setTempSearchValues((prev) => {
+                                return {
+                                  ...prev,
+                                  highlightStrategy: s.target
+                                    .value as HighlightStrategy,
+                                };
+                              });
+                            }}
+                            value={tempSearchValues().highlightStrategy}
+                          >
+                            <option value="v1">V1</option>
+                            <option value="exactmatch">Exact match</option>
+                          </select>
+                        </div>
                         <Show
                           when={
                             searchTypes().find((type) => type.isSelected)

diff --git a/frontends/search/src/hooks/useSearch.ts b/frontends/search/src/hooks/useSearch.ts
@@ -23,6 +23,14 @@ export function isSortBySearchType(
   return (sortBy as SortBySearchType).rerank_type !== undefined;
 }
 
+export type HighlightStrategy = "v1" | "exactmatch";
+
+export function isHighlightStrategy(
+  value: string | undefined,
+): value is HighlightStrategy {
+  return value === "v1" || value === "exactmatch";
+}
+
 export interface SearchOptions {
   version: number;
   query: string;
@@ -35,6 +43,7 @@ export interface SearchOptions {
   pageSize: number;
   getTotalPages: boolean;
   highlightResults: boolean;
+  highlightStrategy: HighlightStrategy;
   highlightThreshold: number;
   highlightDelimiters: string[];
   highlightMaxLength: number;
@@ -58,6 +67,7 @@ const initalState: SearchOptions = {
   pageSize: 10,
   getTotalPages: false,
   highlightResults: true,
+  highlightStrategy: "v1",
   highlightThreshold: 0.8,
   highlightDelimiters: ["?", ".", "!"],
   highlightMaxLength: 8,
@@ -106,6 +116,9 @@ const fromParamsToState = (
     pageSize: parseInt(params.pageSize ?? "10"),
     getTotalPages: (params.getTotalPages ?? "false") === "true",
     highlightResults: (params.highlightResults ?? "true") === "true",
+    highlightStrategy: isHighlightStrategy(params.highlightStrategy)
+      ? params.highlightStrategy
+      : "v1",
     highlightThreshold: parseFloat(params.highlightThreshold ?? "0.8"),
     highlightDelimiters:
       params.highlightDelimiters?.split(",") ?? initalState.highlightDelimiters,