feature: new tables on Search Analytics

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

@@ -1,99 +1,51 @@
-import { AnalyticsFilter } from "shared/types";
-import { createQuery, useQueryClient } from "@tanstack/solid-query";
-import { createEffect, Show, useContext } from "solid-js";
-import { getHeadQueries } from "../../api/analytics";
-import { DatasetContext } from "../../layouts/TopBarLayout";
-import { usePagination } from "../../hooks/usePagination";
-import { PaginationButtons } from "../PaginationButtons";
-import { Table, Td, Th, Tr } from "shared/ui";
-import { QueryStringDisplay } from "../QueryStringDisplay";
+import { AnalyticsFilter, HeadQuery } from "shared/types";
+import { Show } from "solid-js";
+import { SortableColumnDef, TanStackTable } from "shared/ui";
+import { useHeadQueries } from "../../hooks/data/useHeadQueries";
+import { createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
 
 interface HeadQueriesProps {
   params: { filter: AnalyticsFilter };
 }
 
-export const HeadQueries = (props: HeadQueriesProps) => {
-  const dataset = useContext(DatasetContext);
-  const pages = usePagination();
-  const queryClient = useQueryClient();
-
-  createEffect((prevDatasetId) => {
-    const datasetId = dataset().dataset.id;
-    if (prevDatasetId !== undefined && prevDatasetId !== datasetId) {
-      void queryClient.invalidateQueries();
-    }
-
-    return datasetId;
-  }, dataset().dataset.id);
+const columns: SortableColumnDef<HeadQuery>[] = [
+  {
+    accessorKey: "query",
+    header: "Query",
+  },
+  {
+    accessorKey: "count",
+    header: "Frequency",
+  },
+];
 
-  createEffect(() => {
-    // Preload the next page
-    const params = props.params;
-    const datasetId = dataset().dataset.id;
-    const curPage = pages.page();
-    void queryClient.prefetchQuery({
-      queryKey: [
-        "head-queries",
-        { filter: params.filter, page: curPage + 1, dataset: datasetId },
-      ],
-      queryFn: async () => {
-        const results = await getHeadQueries(
-          params.filter,
-          datasetId,
-          curPage + 1,
-        );
-        if (results.length === 0) {
-          pages.setMaxPageDiscovered(curPage);
-        }
-        return results;
-      },
-    });
+export const HeadQueries = (props: HeadQueriesProps) => {
+  const { headQueriesQuery, pages } = useHeadQueries({
+    params: props.params,
   });
-
-  const headQueriesQuery = createQuery(() => ({
-    queryKey: ["head-queries", { filters: props.params, page: pages.page() }],
-    queryFn: () => {
-      return getHeadQueries(
-        props.params.filter,
-        dataset().dataset.id,
-        pages.page(),
-      );
+  const table = createSolidTable({
+    get data() {
+      return headQueriesQuery.data || [];
+    },
+    state: {
+      pagination: {
+        pageIndex: pages.page(),
+        pageSize: 10,
+      },
     },
-  }));
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
 
   return (
     <>
       <Show
         fallback={<div class="py-8">Loading...</div>}
         when={headQueriesQuery.data}
       >
-        {(data) => (
-          <Table
-            fallback={<div class="py-8 text-center">No Data</div>}
-            data={data()}
-            headers={
-              <Tr>
-                <Th>Query</Th>
-                <Th class="text-right">Frequency</Th>
-              </Tr>
-            }
-            // headerz={["Query", "Count"]}
-            class="my-2"
-          >
-            {(row) => (
-              <Tr>
-                <Td>
-                  <QueryStringDisplay>{row.query}</QueryStringDisplay>
-                </Td>
-                <Td class="text-right">{row.count}</Td>
-              </Tr>
-            )}
-          </Table>
-        )}
+        <TanStackTable small pages={pages} perPage={10} table={table} />
       </Show>
-      <div class="flex justify-end">
-        <PaginationButtons size={18} pages={pages} />
-      </div>
     </>
   );
 };

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

@@ -8,7 +8,7 @@ import { getLatency } from "../../api/analytics";
 import { Chart } from "chart.js";
 
 import "chartjs-adapter-date-fns";
-import { parseCustomDateString } from "../../utils/formatDate";
+import { fillDate } from "../../utils/graphDatesFiller";
 
 interface LatencyGraphProps {
   params: {
@@ -110,14 +110,16 @@ export const LatencyGraph = (props: LatencyGraphProps) => {
       // @ts-expect-error library types not updated
       chartInstance.options.scales["x"].offset = true;
     }
+    const info = fillDate({
+      data,
+      date_range: props.params.filter.date_range,
+      key: "average_latency",
+      defaultValue: null,
+    });
 
     // Update the chart data
-    chartInstance.data.labels = data.map(
-      (point) => new Date(parseCustomDateString(point.time_stamp)),
-    );
-    chartInstance.data.datasets[0].data = data.map(
-      (point) => point.average_latency,
-    );
+    chartInstance.data.labels = info.map((point) => point.time);
+    chartInstance.data.datasets[0].data = info.map((point) => point.value);
     chartInstance.update();
   });