fix: show all info in the no results table

devflowinc · Sep 17, 2024 · 36c948e · 36c948e
1 parent 8d78f6b
commit 36c948e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 50 deletions.
diff --git a/frontends/analytics/src/components/charts/NoResultQueries.tsx b/frontends/analytics/src/components/charts/NoResultQueries.tsx
@@ -1,9 +1,11 @@
 import { AnalyticsFilter, SearchQueryEvent } from "shared/types";
-import { createSignal, Show } from "solid-js";
-import { FullScreenModal, SortableColumnDef, TanStackTable } from "shared/ui";
-import { SearchQueryEventModal } from "../../pages/TrendExplorer";
+import { Show } from "solid-js";
+import { SortableColumnDef, TanStackTable } from "shared/ui";
 import { useNoResultsQueries } from "../../hooks/data/useNoResultsQuery";
 import { createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
+import { format } from "date-fns";
+import { parseCustomDateString } from "../../utils/formatDate";
+import { formatSearchMethod } from "../../utils/searchType";
 
 interface NoResultQueriesProps {
   params: {
@@ -12,15 +14,28 @@ interface NoResultQueriesProps {
 }
 
 const columns: SortableColumnDef<SearchQueryEvent>[] = [
+  {
+    accessorKey: "created_at",
+    header: "Searched At",
+    sortable: true,
+    cell(props) {
+      return format(
+        parseCustomDateString(props.getValue<string>()),
+        "M/d/yy h:mm a",
+      );
+    },
+  },
   {
     accessorKey: "query",
     header: "Query",
+  },
+  {
+    accessorKey: "search_type",
+    header: "Search Type",
     cell(props) {
-      return (
-        <span class="block max-w-[400px] truncate">
-          {props.getValue<string>()}
-        </span>
-      );
+      return typeof props.getValue<unknown>() === "string"
+        ? formatSearchMethod(props.getValue<string>())
+        : "All";
     },
   },
   {
@@ -30,11 +45,13 @@ const columns: SortableColumnDef<SearchQueryEvent>[] = [
       return props.getValue<number>() + "ms";
     },
   },
+  {
+    accessorKey: "top_score",
+    header: "Top Score",
+  },
 ];
 
 export const NoResultQueries = (props: NoResultQueriesProps) => {
-  const [open, setOpen] = createSignal(false);
-  const [current, setCurrent] = createSignal<SearchQueryEvent | null>(null);
   const { notResultQuery, pages } = useNoResultsQueries({
     params: props.params,
   });
@@ -52,6 +69,7 @@ export const NoResultQueries = (props: NoResultQueriesProps) => {
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
   });
+  console.log(notResultQuery.data);
 
   return (
     <>
@@ -63,27 +81,7 @@ export const NoResultQueries = (props: NoResultQueriesProps) => {
           fallback={<div class="py-8 text-center">Loading...</div>}
           when={notResultQuery.data}
         >
-          <Show when={current()}>
-            {(data) => (
-              <FullScreenModal
-                title={data().query}
-                show={open}
-                setShow={setOpen}
-              >
-                <SearchQueryEventModal searchEvent={data()} />
-              </FullScreenModal>
-            )}
-          </Show>
-          <TanStackTable
-            table={table}
-            pages={pages}
-            perPage={10}
-            small
-            onRowClick={(row) => {
-              setCurrent(row);
-              setOpen(true);
-            }}
-          />
+          <TanStackTable table={table} pages={pages} perPage={10} />
         </Show>
       </div>
     </>

diff --git a/frontends/analytics/src/pages/SearchAnalyticsPage.tsx b/frontends/analytics/src/pages/SearchAnalyticsPage.tsx
@@ -47,7 +47,7 @@ export const SearchAnalyticsPage = () => {
           class="flex flex-col justify-between px-4"
           title="No Result Queries"
           subtitle="Searches with no results"
-          width={5}
+          width={12}
         >
           <NoResultQueries params={analyticsFilters} />
         </Card>

diff --git a/frontends/analytics/src/pages/tablePages/SearchTablePage.tsx b/frontends/analytics/src/pages/tablePages/SearchTablePage.tsx
@@ -15,6 +15,7 @@ import {
   SortingState,
 } from "@tanstack/solid-table";
 import { Card } from "../../components/charts/Card";
+import { formatSearchMethod } from "../../utils/searchType";
 
 const columns: SortableColumnDef<SearchQueryEvent>[] = [
   {
@@ -127,16 +128,3 @@ export const SearchTablePage = () => {
     </div>
   );
 };
-
-const formatSearchMethod = (searchMethod: string) => {
-  switch (searchMethod) {
-    case "hybrid":
-      return "Hybrid";
-    case "fulltext":
-      return "Fulltext";
-    case "semantic":
-      return "Semantic";
-    default:
-      return "All";
-  }
-};
diff --git a/frontends/analytics/src/utils/searchType.ts b/frontends/analytics/src/utils/searchType.ts
@@ -0,0 +1,14 @@
+export const formatSearchMethod = (searchMethod: string) => {
+  switch (searchMethod) {
+    case "hybrid":
+      return "Hybrid";
+    case "fulltext":
+      return "Fulltext";
+    case "semantic":
+      return "Semantic";
+    case "autocomplete":
+      return "Autocomplete";
+    default:
+      return "All";
+  }
+};
diff --git a/frontends/shared/ui/FullscreenModal.tsx b/frontends/shared/ui/FullscreenModal.tsx
@@ -80,7 +80,7 @@ export const FullScreenModal = (props: FullScreenModalProps) => {
                     <div class="flex items-center justify-between">
                       <DialogTitle
                         as="h3"
-                        class="text-lg font-medium leading-6 text-neutral-900 mb-4"
+                        class="text-lg font-medium leading-6 text-neutral-900 mb-4 max-w-[80%] text-ellipsis truncate"
                       >
                         {title()}
                       </DialogTitle>

diff --git a/frontends/shared/ui/TanStackTable.tsx b/frontends/shared/ui/TanStackTable.tsx
@@ -109,10 +109,13 @@ export const TanStackTable = (props: TableProps) => {
                         "whitespace-nowrap text-sm font-medium text-neutral-900"
                       )}
                     >
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
+                      <span class="max-w-[300px] truncate 2xl:max-w-full text-ellipsis block">
+                        {" "}
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </span>
                     </td>
                   )}
                 </For>