feat: add created at sort in rag

frontends/analytics/src/components/charts/RagQueries.tsx

@@ -1,175 +1,118 @@
-import {
-  AnalyticsParams,
-  RAGAnalyticsFilter,
-  RagQueryEvent,
-  SortOrder,
-} from "shared/types";
+import { RagQueryEvent } from "shared/types";
 import {
   getCoreRowModel,
-  ColumnDef,
   createSolidTable,
+  SortingState,
 } from "@tanstack/solid-table";
-import { createQuery, useQueryClient } from "@tanstack/solid-query";
 import {
   Accessor,
   createEffect,
   createMemo,
   createSignal,
   Show,
-  useContext,
 } from "solid-js";
-import { getRAGQueries, getRAGUsage } from "../../api/analytics";
-import { DatasetContext } from "../../layouts/TopBarLayout";
-import { usePagination } from "../../hooks/usePagination";
 import { Card } from "./Card";
-import { Select, TanStackTable } from "shared/ui";
+import { SortableColumnDef, TanStackTable } from "shared/ui";
 import { ALL_FAKE_RAG_OPTIONS } from "../../pages/RagAnalyticsPage";
 import { FullScreenModal, JSONMetadata } from "shared/ui";
 import { IoOpenOutline } from "solid-icons/io";
-
-interface RagQueriesProps {
-  filter: RAGAnalyticsFilter;
-  granularity: AnalyticsParams["granularity"];
-}
-
-const ALL_SORT_ORDER: SortOrder[] = ["asc", "desc"];
+import { RagQueriesProps, useRagData } from "../../hooks/data/useRagData";
 
 export const RagQueries = (props: RagQueriesProps) => {
-  const dataset = useContext(DatasetContext);
-  const pages = usePagination();
-  const queryClient = useQueryClient();
+  const { ragQueriesQuery, pages, sortOrder, setSortOrder, usage } =
+    useRagData(props);
   const [open, setOpen] = createSignal<boolean>(false);
   const [current, setCurrent] = createSignal<number>(0);
-
-  const [sortOrder, setSortOrder] = createSignal<SortOrder>("asc");
+  const [sorting, setSorting] = createSignal<SortingState>([
+    {
+      id: "created_at",
+      desc: sortOrder() === "desc",
+    },
+  ]);
 
   createEffect(() => {
-    const datasetId = dataset()?.dataset.id;
-    const curPage = pages.page();
-    void queryClient.prefetchQuery({
-      queryKey: [
-        "rag-queries",
-        {
-          page: curPage + 1,
-          filter: props.filter,
-          sortOrder: sortOrder(),
-        },
-      ],
-      queryFn: async () => {
-        const results = await getRAGQueries({
-          datasetId,
-          page: curPage + 1,
-          filter: props.filter,
-          sort_order: sortOrder(),
-        });
-        if (results.length === 0) {
-          pages.setMaxPageDiscovered(curPage);
-        }
-        return results;
-      },
-    });
+    setSortOrder(sorting()[0].desc ? "desc" : "asc");
   });
 
-  const ragQueriesQuery = createQuery(() => ({
-    queryKey: [
-      "rag-queries",
+  const columns: Accessor<SortableColumnDef<RagQueryEvent>[]> = createMemo(
+    () => [
       {
-        page: pages.page(),
-        filter: props.filter,
-        sortOrder: sortOrder(),
+        accessorKey: "user_message",
+        header: "User Message",
       },
-    ],
-    queryFn: () => {
-      return getRAGQueries({
-        datasetId: dataset().dataset.id,
-        page: pages.page(),
-        filter: props.filter,
-      });
-    },
-  }));
-
-  const columns: Accessor<ColumnDef<RagQueryEvent>[]> = createMemo(() => [
-    {
-      accessorKey: "user_message",
-      header: "User Message",
-    },
-    {
-      accessorKey: "rag_type",
-      header: "Rag Type",
-      cell(props) {
-        return (
-          <>
-            {ALL_FAKE_RAG_OPTIONS.find(
-              (rag) => rag.value === props.getValue<string>(),
-            )?.label || props.getValue<string>()}
-          </>
-        );
+      {
+        accessorKey: "created_at",
+        header: "Searched At",
+        sortable: true,
       },
-    },
-    {
-      accessorKey: "results",
-      id: "results",
-      header: "Results",
-      cell(props) {
-        return (
-          <Show
-            when={props.getValue<RagQueryEvent["results"]>().length}
-            fallback={props.getValue<RagQueryEvent["results"]>().length}
-          >
-            <button
-              class="flex items-center gap-2 text-left"
-              onClick={() => {
-                setOpen(true);
-                setCurrent(props.row.index);
-              }}
+      {
+        accessorKey: "rag_type",
+        header: "Rag Type",
+        cell(props) {
+          return (
+            <>
+              {ALL_FAKE_RAG_OPTIONS.find(
+                (rag) => rag.value === props.getValue<string>(),
+              )?.label || props.getValue<string>()}
+            </>
+          );
+        },
+      },
+      {
+        accessorKey: "results",
+        id: "results",
+        header: "Results",
+        cell(props) {
+          return (
+            <Show
+              when={props.getValue<RagQueryEvent["results"]>().length}
+              fallback={props.getValue<RagQueryEvent["results"]>().length}
             >
-              {props.getValue<RagQueryEvent["results"]>().length}
-              <IoOpenOutline />
-            </button>
-          </Show>
-        );
+              <button
+                class="flex items-center gap-2 text-left"
+                onClick={() => {
+                  setOpen(true);
+                  setCurrent(props.row.index);
+                }}
+              >
+                {props.getValue<RagQueryEvent["results"]>().length}
+                <IoOpenOutline />
+              </button>
+            </Show>
+          );
+        },
       },
-    },
-  ]);
+    ],
+  );
 
   const table = createSolidTable({
     get data() {
       return ragQueriesQuery.data || [];
     },
+
     state: {
       pagination: {
         pageIndex: pages.page(),
         pageSize: 10,
       },
+      get sorting() {
+        return sorting();
+      },
     },
     columns: columns(),
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
+    manualSorting: true,
+    enableSortingRemoval: false,
+    onSortingChange: setSorting,
   });
-  const usage = createQuery(() => ({
-    queryKey: ["rag-usage", { filter: props }],
-    queryFn: () => {
-      return getRAGUsage(dataset().dataset.id, props.filter);
-    },
-  }));
 
   return (
     <Card
       title="RAG Queries"
       subtitle={"All RAG messages (topic/message and generate_from_chunk)."}
       class="flex flex-col justify-between px-4"
       width={2}
-      controller={
-        <div class="flex gap-2">
-          <Select
-            class="min-w-[110px] bg-neutral-100/90"
-            options={ALL_SORT_ORDER}
-            display={formatSortOrder}
-            selected={sortOrder()}
-            onSelected={(e) => setSortOrder(e)}
-          />
-        </div>
-      }
     >
       <Show
         fallback={<div class="py-8 text-center">Loading...</div>}
@@ -203,14 +146,3 @@ export const RagQueries = (props: RagQueriesProps) => {
     </Card>
   );
 };
-
-const formatSortOrder = (sortOrder: SortOrder) => {
-  switch (sortOrder) {
-    case "asc":
-      return "Ascending";
-    case "desc":
-      return "Descending";
-    default:
-      return sortOrder;
-  }
-};

frontends/analytics/src/hooks/useDataExplorerSearch.ts → frontends/analytics/src/hooks/data/useDataExplorerSearch.ts

@@ -1,10 +1,10 @@
 import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import { getSearchQueries } from "../api/tables";
+import { getSearchQueries } from "../../api/tables";
 import { createEffect, createSignal, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { subDays } from "date-fns";
-import { usePagination } from "./usePagination";
-import { DatasetContext } from "../layouts/TopBarLayout";
+import { usePagination } from "./../usePagination";
+import { DatasetContext } from "../../layouts/TopBarLayout";
 import { AnalyticsParams } from "shared/types";
 
 export type sortByCols = "created_at" | "latency" | "top_score";

frontends/analytics/src/hooks/data/useRagData.ts

@@ -0,0 +1,79 @@
+import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { createEffect, createSignal, useContext } from "solid-js";
+import { DatasetContext } from "../../layouts/TopBarLayout";
+import { RAGAnalyticsFilter, SortOrder } from "trieve-ts-sdk";
+import { usePagination } from "../usePagination";
+import { getRAGQueries, getRAGUsage } from "../../api/analytics";
+import { AnalyticsParams } from "shared/types";
+
+export interface RagQueriesProps {
+  filter: RAGAnalyticsFilter;
+  granularity: AnalyticsParams["granularity"];
+}
+
+export const useRagData = (props: RagQueriesProps) => {
+  const dataset = useContext(DatasetContext);
+  const queryClient = useQueryClient();
+  const [sortOrder, setSortOrder] = createSignal<SortOrder>("asc");
+  const pages = usePagination();
+
+  createEffect(() => {
+    const datasetId = dataset()?.dataset.id;
+    const curPage = pages.page();
+    void queryClient.prefetchQuery({
+      queryKey: [
+        "rag-queries",
+        {
+          page: curPage + 1,
+          filter: props.filter,
+          sortOrder: sortOrder(),
+        },
+      ],
+      queryFn: async () => {
+        const results = await getRAGQueries({
+          datasetId,
+          page: curPage + 1,
+          filter: props.filter,
+          sort_order: sortOrder(),
+        });
+        if (results.length === 0) {
+          pages.setMaxPageDiscovered(curPage);
+        }
+        return results;
+      },
+    });
+  });
+
+  const ragQueriesQuery = createQuery(() => ({
+    queryKey: [
+      "rag-queries",
+      {
+        page: pages.page(),
+        sortOrder: sortOrder(),
+        filter: props.filter,
+      },
+    ],
+    queryFn: () => {
+      return getRAGQueries({
+        datasetId: dataset().dataset.id,
+        page: pages.page(),
+        sort_order: sortOrder(),
+        filter: props.filter,
+      });
+    },
+  }));
+  const usage = createQuery(() => ({
+    queryKey: ["rag-usage", { filter: props }],
+    queryFn: () => {
+      return getRAGUsage(dataset().dataset.id, props.filter);
+    },
+  }));
+
+  return {
+    ragQueriesQuery,
+    pages,
+    sortOrder,
+    setSortOrder,
+    usage,
+  };
+};

frontends/analytics/src/pages/tablePages/SearchTablePage.tsx

@@ -8,7 +8,7 @@ import { useBetterNav } from "../../utils/useBetterNav";
 import {
   sortByCols,
   useDataExplorerSearch,
-} from "../../hooks/useDataExplorerSearch";
+} from "../../hooks/data/useDataExplorerSearch";
 import {
   createSolidTable,
   getCoreRowModel,
@@ -24,7 +24,6 @@ const columns: SortableColumnDef<SearchQueryEvent>[] = [
   {
     accessorKey: "created_at",
     header: "Searched At",
-
     sortable: true,
     cell(props) {
       return format(
@@ -80,7 +79,6 @@ export const SearchTablePage = () => {
   ]);
 
   createEffect(() => {
-    console.log(sorting());
     setSortBy(sorting()[0].id as sortByCols);
     setSortOrder(sorting()[0].desc ? "desc" : "asc");
   });
@@ -100,9 +98,9 @@ export const SearchTablePage = () => {
     },
     columns,
     getCoreRowModel: getCoreRowModel(),
-    enableSortingRemoval: false,
     manualPagination: true,
     manualSorting: true,
+    enableSortingRemoval: false,
     onSortingChange: setSorting,
   });