feature: add page_size and date_recency options to Search UI | feature: add description to events tab in dashboard for what events are

skeptrunedev · skeptrunedev · commit 43f9a372cb7e · 2024-05-16T18:34:35.000-07:00
diff --git a/dashboard/src/pages/Dashboard/Dataset/DatasetEvents.tsx b/dashboard/src/pages/Dashboard/Dataset/DatasetEvents.tsx
@@ -14,6 +14,7 @@ import {
   BiRegularChevronRight,
 } from "solid-icons/bi";
 import { MultiSelect } from "../../../components/MultiSelect";
+import { FiInfo } from "solid-icons/fi";
 
 export const DatasetEvents = () => {
   const api_host = import.meta.env.VITE_API_HOST as unknown as string;
@@ -78,6 +79,16 @@ export const DatasetEvents = () => {
   return (
     <div class="mb-3">
       <main class="mx-auto">
+        <div class="rounded-md bg-blue-50 p-4 dark:bg-blue-900">
+          <div class="flex space-x-2">
+            <FiInfo class="h-5 w-5 text-blue-400 dark:text-blue-50" />
+            <p class="text-sm text-blue-700 dark:text-blue-50">
+              Events are logged by the server and displayed here for chunk and
+              file CRUD operations. You can filter by event type. The list
+              refreshes every 5 seconds.
+            </p>
+          </div>
+        </div>
         <div class="mx-auto mt-8 pb-8">
           <div class="">
             <div class="sm:flex sm:items-center">
diff --git a/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx b/dashboard/src/pages/Dashboard/Dataset/DatasetSettingsPage.tsx
@@ -5,7 +5,6 @@ import {
   ClientEnvsConfiguration,
   ServerEnvsConfiguration,
   availableEmbeddingModels,
-  isComboboxValues,
 } from "../../../types/apiTypes";
 import { UserContext } from "../../../contexts/UserContext";
 import { createToast } from "../../../components/ShowToasts";
@@ -155,174 +154,6 @@ export const FrontendSettingsForm = () => {
               />
             </div>
 
-            <div class="col-span-4 flex items-center space-x-2 sm:col-span-2">
-              <input
-                type="checkbox"
-                name="documentUploadFeatureClient"
-                id="documentUploadFeatureClient"
-                checked={clientConfig().DOCUMENT_UPLOAD_FEATURE}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      DOCUMENT_UPLOAD_FEATURE: e.currentTarget.checked,
-                    };
-                  })
-                }
-              />
-              <label
-                for="documentUploadFeature"
-                class="block text-sm font-medium"
-              >
-                Document upload feature
-              </label>
-            </div>
-
-            <div class="col-span-4 flex items-center space-x-2 sm:col-span-2">
-              <input
-                type="checkbox"
-                name="documentUploadFeatureClient"
-                id="documentUploadFeatureClient"
-                checked={clientConfig().CREATE_CHUNK_FEATURE}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      CREATE_CHUNK_FEATURE: e.currentTarget.checked,
-                    };
-                  })
-                }
-              />
-              <label
-                for="documentUploadFeature"
-                class="block text-sm font-medium"
-              >
-                Create chunk feature
-              </label>
-            </div>
-
-            <div class="col-span-4 sm:col-span-2">
-              <label
-                for="dateRangeValue"
-                class="block text-sm font-medium leading-6"
-              >
-                Date range value
-              </label>
-              <input
-                type="text"
-                name="dateRangeValue"
-                id="dateRangeValue"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={clientConfig().DATE_RANGE_VALUE}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      DATE_RANGE_VALUE: e.target.value,
-                    };
-                  })
-                }
-              />
-            </div>
-
-            <div class="col-span-4">
-              <label
-                for="searchQueries"
-                class="block text-sm font-medium leading-6"
-              >
-                Search Queries
-              </label>
-              <input
-                type="text"
-                name="searchQueries"
-                id="searchQueries"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={clientConfig().SEARCH_QUERIES}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      SEARCH_QUERIES: e.target.value,
-                    };
-                  })
-                }
-              />
-            </div>
-
-            <div class="col-span-4">
-              <label
-                for="frontmatterVals"
-                class="block text-sm font-medium leading-6"
-              >
-                Frontmatter Values
-              </label>
-              <input
-                type="text"
-                name="frontmatterVals"
-                id="frontmatterVals"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={clientConfig().FRONTMATTER_VALS}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      FRONTMATTER_VALS: e.target.value,
-                    };
-                  })
-                }
-              />
-            </div>
-            {/** TODO: change to a modal to set filters and generate json from that */}
-            <div class="col-span-4">
-              <label
-                for="filterItems"
-                class="block text-sm font-medium leading-6"
-              >
-                Filter Items
-              </label>
-              <input
-                type="text"
-                name="filterItems"
-                id="filterItems"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={JSON.stringify(clientConfig().FILTER_ITEMS)}
-                onInput={(e) => {
-                  const value = JSON.parse(e.target.value) as object[];
-                  if (isComboboxValues(value)) {
-                    setClientConfig((prev) => {
-                      return {
-                        ...prev,
-                        FILTER_ITEMS: value,
-                      };
-                    });
-                  }
-                }}
-              />
-            </div>
-
-            <div class="col-span-4">
-              <label
-                for="suggestedQueries"
-                class="block text-sm font-medium leading-6"
-              >
-                Suggested Queries
-              </label>
-              <input
-                type="text"
-                name="suggestedQueries"
-                id="suggestedQueries"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={clientConfig().SUGGESTED_QUERIES}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      SUGGESTED_QUERIES: e.target.value,
-                    };
-                  })
-                }
-              />
-            </div>
             <div class="col-span-4">
               <label
                 for="imageRangeStartKey"
@@ -370,30 +201,6 @@ export const FrontendSettingsForm = () => {
                 }
               />
             </div>
-
-            <div class="col-span-4">
-              <label
-                for="fileNameKey"
-                class="block text-sm font-medium leading-6"
-              >
-                File Name Key
-              </label>
-              <input
-                type="text"
-                name="suggestedQueries"
-                id="suggestedQueries"
-                class="mt-2 block w-full rounded-md border-[0.5px] border-neutral-300 px-3 py-1.5 shadow-sm placeholder:text-neutral-400 focus:outline-magenta-500 sm:text-sm sm:leading-6"
-                value={clientConfig().FILE_NAME_KEY}
-                onInput={(e) =>
-                  setClientConfig((prev) => {
-                    return {
-                      ...prev,
-                      FILE_NAME_KEY: e.target.value,
-                    };
-                  })
-                }
-              />
-            </div>
           </div>
         </div>
         <div class="bg-neutral-50 px-4 py-3 text-right sm:px-6">
@@ -905,12 +712,12 @@ export const DangerZoneForm = () => {
 
 export const DatasetSettingsPage = () => {
   return (
-    <div class="grid grid-cols-1 gap-3 lg:grid-cols-2">
+    <div class="grid grid-cols-1 gap-3">
       <div>
-        <FrontendSettingsForm />
+        <ServerSettingsForm />
       </div>
       <div>
-        <ServerSettingsForm />
+        <FrontendSettingsForm />
       </div>
       <div>
         <DangerZoneForm />
diff --git a/dashboard/src/pages/Dashboard/UserManagment.tsx b/dashboard/src/pages/Dashboard/UserManagment.tsx
@@ -177,7 +177,7 @@ export const UserManagement = () => {
   });
 
   return (
-    <div class="mt-10 px-4 sm:px-6 lg:px-8">
+    <div class="mt-10">
       <div class="mt-10 sm:flex sm:items-center">
         <div class="sm:flex-auto">
           <Show when={!showInvitations()}>
diff --git a/search/src/HomeSearch.tsx b/search/src/HomeSearch.tsx
@@ -21,12 +21,14 @@ export const HomeSearch = () => {
   const searchType: string = params.get("searchType") ?? "search";
   const groupUnique = params.get("groupUnique") === "true" || false;
   const slimChunks = params.get("slimChunks") === "true" || false;
+  const pageSize = Number(params.get("pageSize")) || 10;
   const getTotalPages = params.get("getTotalPages") === "true" || false;
   const highlightResults = params.get("highlightResults") === "true" || true;
   const highlightDelimiters = params
     .get("highlightDelimiters")
     ?.split(",")
     .filter((delimiter) => delimiter !== "") ?? ["?", ".", "!"];
+  const recencyBias = Number(params.get("recencyBias")) || 0.0;
 
   return (
     <div class="flex min-h-screen flex-col bg-white dark:bg-shark-800 dark:text-white">
@@ -55,9 +57,11 @@ export const HomeSearch = () => {
             searchType={searchType}
             groupUniqueSearch={groupUnique}
             slimChunks={slimChunks}
+            pageSize={pageSize}
             getTotalPages={getTotalPages}
             highlightDelimiters={highlightDelimiters}
             highlightResults={highlightResults}
+            recencyBias={recencyBias}
           />
         </div>
       </div>
diff --git a/search/src/components/GroupPage.tsx b/search/src/components/GroupPage.tsx
@@ -52,6 +52,7 @@ export const GroupPage = (props: GroupPageProps) => {
   const [page, setPage] = createSignal<number>(1);
   const [searchType, setSearchType] = createSignal<string>("hybrid");
   const [slimChunks, setSlimChunks] = createSignal(false);
+  const [pageSize, setPageSize] = createSignal<number>(10);
   const [getTotalPages, setGetTotalPages] = createSignal(false);
   const [highlightResults, setHighlightResults] = createSignal(true);
   const [highlightDelimiters, setHighlightDelimiters] = createSignal<string[]>([
@@ -60,6 +61,7 @@ export const GroupPage = (props: GroupPageProps) => {
     ".",
     "!",
   ]);
+  const [recencyBias, setRecencyBias] = createSignal<number>(0.0);
   const [searchLoading, setSearchLoading] = createSignal(false);
   const [chunkMetadatas, setChunkMetadatas] = createSignal<ChunkMetadata[]>([]);
   const [searchMetadatasWithVotes, setSearchMetadatasWithVotes] = createSignal<
@@ -109,11 +111,13 @@ export const GroupPage = (props: GroupPageProps) => {
     setPage(Number(location.query.page) || 1);
     setSearchType(location.query.searchType ?? "hybrid");
     setSlimChunks(location.query.slimChunks === "true");
+    setPageSize(Number(location.query.pageSize) || 10);
     setGetTotalPages(location.query.getTotalPages === "true");
     setHighlightResults(location.query.highlightResults === "true");
     setHighlightDelimiters(
       location.query.highlightDelimiters?.split(",") ?? ["?", ".", "!"],
     );
+    setRecencyBias(Number(location.query.recencyBias) || 0.0);
   });
 
   createEffect(() => {
@@ -166,9 +170,11 @@ export const GroupPage = (props: GroupPageProps) => {
           group_id: props.groupID,
           search_type: searchType(),
           slim_chunks: slimChunks(),
+          page_size: pageSize(),
           get_total_pages: getTotalPages(),
           highlight_results: highlightResults(),
           highlight_delimiters: highlightDelimiters(),
+          recency_bias: recencyBias(),
         }),
       }).then((response) => {
         if (response.ok) {
@@ -503,7 +509,11 @@ export const GroupPage = (props: GroupPageProps) => {
                   <SearchForm
                     query={query()}
                     searchType={searchType()}
+                    pageSize={pageSize()}
                     getTotalPages={getTotalPages()}
+                    highlightResults={highlightResults()}
+                    highlightDelimiters={highlightDelimiters()}
+                    recencyBias={recencyBias()}
                     groupID={props.groupID}
                     slimChunks={slimChunks()}
                   />
diff --git a/search/src/components/ResultsPage.tsx b/search/src/components/ResultsPage.tsx
@@ -38,9 +38,11 @@ export interface ResultsPageProps {
   searchType: string;
   groupUnique?: boolean;
   slimChunks?: boolean;
+  pageSize?: number;
   getTotalPages?: boolean;
   highlightResults?: boolean;
   highlightDelimiters?: string[];
+  recencyBias?: number;
   loading: Accessor<boolean>;
   setLoading: Setter<boolean>;
 }
@@ -143,9 +145,11 @@ const ResultsPage = (props: ResultsPageProps) => {
         : props.searchType,
       get_collisions: true,
       slim_chunks: props.slimChunks ?? false,
+      page_size: props.pageSize ?? 10,
       get_total_pages: props.getTotalPages ?? false,
       highlight_results: props.highlightResults ?? true,
       highlight_delimiters: props.highlightDelimiters ?? ["?", ".", "!"],
+      recency_bias: props.recencyBias ?? 0.0,
     };
 
     let searchRoute = "chunk/search";
diff --git a/search/src/components/SearchForm.tsx b/search/src/components/SearchForm.tsx
diff --git a/search/src/pages/Search.tsx b/search/src/pages/Search.tsx
