fix: move table code to the top of component

devflowinc · Sep 13, 2024 · 21aae65 · 21aae65
1 parent bdf2587
commit 21aae65
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 36 deletions.
diff --git a/frontends/analytics/src/components/charts/RagQueries.tsx b/frontends/analytics/src/components/charts/RagQueries.tsx
@@ -2,7 +2,6 @@ import {
   AnalyticsParams,
   RAGAnalyticsFilter,
   RagQueryEvent,
-  RAGUsageResponse,
   SortOrder,
 } from "shared/types";
 import {
@@ -19,7 +18,7 @@ import {
   Show,
   useContext,
 } from "solid-js";
-import { getRAGQueries } from "../../api/analytics";
+import { getRAGQueries, getRAGUsage } from "../../api/analytics";
 import { DatasetContext } from "../../layouts/TopBarLayout";
 import { usePagination } from "../../hooks/usePagination";
 import { ChartCard } from "./ChartCard";
@@ -133,6 +132,13 @@ export const RagQueries = (props: RagQueriesProps) => {
     },
   ]);
 
+  const usage = createQuery(() => ({
+    queryKey: ["rag-usage", { filter: props }],
+    queryFn: () => {
+      return getRAGUsage(dataset().dataset.id, props.filter);
+    },
+  }));
+
   return (
     <ChartCard
       title="RAG Queries"
@@ -156,24 +162,6 @@ export const RagQueries = (props: RagQueriesProps) => {
         when={ragQueriesQuery.data}
       >
         {(data) => {
-          const table = createSolidTable({
-            get data() {
-              return data();
-            },
-            state: {
-              pagination: {
-                pageIndex: pages.page(),
-                pageSize: 10,
-              },
-            },
-            columns: columns(),
-            getCoreRowModel: getCoreRowModel(),
-            manualPagination: true,
-          });
-          const usage = queryClient.getQueryData<RAGUsageResponse>([
-            "rag-usage",
-            { filter: props },
-          ]);
           return (
             <>
               <FullScreenModal
@@ -191,8 +179,21 @@ export const RagQueries = (props: RagQueriesProps) => {
               <TanStackTable
                 pages={pages}
                 perPage={10}
-                total={usage?.total_queries}
-                table={table}
+                total={usage?.data?.total_queries}
+                table={createSolidTable({
+                  get data() {
+                    return ragQueriesQuery.data || [];
+                  },
+                  state: {
+                    pagination: {
+                      pageIndex: pages.page(),
+                      pageSize: 10,
+                    },
+                  },
+                  columns: columns(),
+                  getCoreRowModel: getCoreRowModel(),
+                  manualPagination: true,
+                })}
               />
             </>
           );

diff --git a/frontends/shared/ui/Pagination.tsx b/frontends/shared/ui/Pagination.tsx
@@ -11,40 +11,40 @@ interface PaginationProps {
   total?: number;
   perPage?: number;
 }
-export const Pagination = (props: PaginationProps) => {
+export const Pagination = ({ pages, perPage, total }: PaginationProps) => {
   return (
     <nav
       class="flex items-center justify-between border-t border-gray-200 bg-white py-3 sm:px-6"
       aria-label="Pagination"
     >
-      {props.perPage && props.total ? (
+      {perPage && total ? (
         <div class="hidden sm:block">
           <p class="text-sm text-gray-700">
             Showing
             <span class="px-1 font-medium">
-              {(props.pages.page() - 1) * props.perPage}
+              {(pages.page() - 1) * perPage || 1}
             </span>
             to
             <span class="px-1 font-medium">
-              {(props.pages.page() - 1) * props.perPage + props.perPage}
+              {(pages.page() - 1) * perPage + perPage}
             </span>
             of
-            <span class="px-1 font-medium">{props.total}</span>
+            <span class="px-1 font-medium">{total}</span>
             results
           </p>
         </div>
       ) : null}
       <div class="flex flex-1 justify-between gap-3 sm:justify-end">
         <button
-          onClick={() => props.pages.prevPage()}
-          disabled={props.pages.page() === 1}
+          onClick={() => pages.prevPage()}
+          disabled={pages.page() === 1}
           class="relative inline-flex items-center gap-1 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:cursor-default disabled:opacity-70 disabled:hover:bg-white"
         >
           <IoChevronBack /> Previous
         </button>
         <button
-          onClick={() => props.pages.nextPage()}
-          disabled={!props.pages.canGoNext()}
+          onClick={() => pages.nextPage()}
+          disabled={!pages.canGoNext()}
           class="relative inline-flex items-center gap-1 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 disabled:cursor-default disabled:opacity-70 disabled:hover:bg-white"
         >
           Next

diff --git a/frontends/shared/ui/TanStackTable.tsx b/frontends/shared/ui/TanStackTable.tsx
@@ -66,11 +66,13 @@ export const TanStackTable = (props: TableProps) => {
           </For>
         </tbody>
       </table>
-      <Pagination
-        pages={props.pages}
-        perPage={props.perPage}
-        total={props.total}
-      />
+      {props.pages.canGoNext() || props.pages.page() !== 1 ? (
+        <Pagination
+          pages={props.pages}
+          perPage={props.perPage}
+          total={props.total}
+        />
+      ) : null}
     </>
   );
 };