feat: new dashboard experience

.vscode/settings.json

@@ -12,6 +12,7 @@
     "./frontends/dashboard",
     "./frontends/search",
     "./frontends/analytics",
+    "./frontends/shared",
     "./clients/ts-sdk",
     "./clients/search-component"
   ],

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

@@ -1,5 +1,5 @@
 import { AnalyticsFilter, HeadQuery } from "shared/types";
-import { Show } from "solid-js";
+import { createMemo, Show } from "solid-js";
 import { SortableColumnDef, TanStackTable } from "shared/ui";
 import { useHeadQueries } from "../../hooks/data/useHeadQueries";
 import { createSolidTable, getCoreRowModel } from "@tanstack/solid-table";
@@ -20,31 +20,44 @@ const columns: SortableColumnDef<HeadQuery>[] = [
 ];
 
 export const HeadQueries = (props: HeadQueriesProps) => {
-  const { headQueriesQuery, pages } = useHeadQueries({
-    params: props.params,
+  const headQueriesData = createMemo(() => {
+    return useHeadQueries({
+      params: props.params,
+    });
   });
-  const table = createSolidTable({
-    get data() {
-      return headQueriesQuery.data || [];
-    },
-    state: {
-      pagination: {
-        pageIndex: pages.page(),
-        pageSize: 10,
+
+  const tableMemo = createMemo(() => {
+    const { headQueriesQuery, pages } = headQueriesData();
+    const table = createSolidTable({
+      get data() {
+        return headQueriesQuery.data || [];
+      },
+      state: {
+        pagination: {
+          pageIndex: pages.page(),
+          pageSize: 10,
+        },
       },
-    },
-    columns,
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    });
+
+    return table;
   });
 
   return (
     <>
       <Show
         fallback={<div class="py-8">Loading...</div>}
-        when={headQueriesQuery.data}
+        when={headQueriesData().headQueriesQuery.data}
       >
-        <TanStackTable small pages={pages} perPage={10} table={table} />
+        <TanStackTable
+          small
+          pages={headQueriesData().pages}
+          perPage={10}
+          table={tableMemo()}
+        />
       </Show>
     </>
   );

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { AnalyticsParams, SearchQueryEvent } from "shared/types";
 import { createSignal, Show } from "solid-js";
 import { FullScreenModal, SortableColumnDef, TanStackTable } from "shared/ui";
@@ -21,6 +22,7 @@ const columns: SortableColumnDef<SearchQueryEvent>[] = [
     accessorKey: "top_score",
     header: "Score",
     cell(props) {
+      // eslint-disable-next-line solid/reactivity
       return props.getValue<number>().toFixed(5);
     },
   },
@@ -32,6 +34,7 @@ export const LowConfidenceQueries = (props: LowConfidenceQueriesProps) => {
   const [current, setCurrent] = createSignal<SearchQueryEvent | null>(null);
   const navigate = useBetterNav();
   const { pages, lowConfidenceQueriesQuery } = useLowConfidenceQueries({
+    // eslint-disable-next-line solid/reactivity
     params: props.params,
     thresholdText: thresholdText,
   });
@@ -99,7 +102,7 @@ export const LowConfidenceQueries = (props: LowConfidenceQueriesProps) => {
           perPage={10}
           table={table}
           onRowClick={(row) => {
-            setCurrent(row);
+            setCurrent(row as any);
             setOpen(true);
           }}
         />

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

@@ -1,3 +1,4 @@
+/* eslint-disable solid/reactivity */
 import { AnalyticsFilter, SearchQueryEvent } from "shared/types";
 import { Show } from "solid-js";
 import { SortableColumnDef, TanStackTable } from "shared/ui";

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

@@ -132,20 +132,27 @@ export const RagQueries = (props: RagQueriesProps) => {
     },
   ]);
 
-  const table = createSolidTable({
-    get data() {
-      return ragQueriesQuery.data || [];
-    },
-    state: {
-      pagination: {
-        pageIndex: pages.page(),
-        pageSize: 10,
+  const table = createMemo(() => {
+    const curColumns = columns();
+
+    const table = createSolidTable({
+      get data() {
+        return ragQueriesQuery.data || [];
       },
-    },
-    columns: columns(),
-    getCoreRowModel: getCoreRowModel(),
-    manualPagination: true,
+      state: {
+        pagination: {
+          pageIndex: pages.page(),
+          pageSize: 10,
+        },
+      },
+      columns: curColumns,
+      getCoreRowModel: getCoreRowModel(),
+      manualPagination: true,
+    });
+
+    return table;
   });
+
   const usage = createQuery(() => ({
     queryKey: ["rag-usage", { filter: props }],
     queryFn: () => {
@@ -194,7 +201,7 @@ export const RagQueries = (props: RagQueriesProps) => {
                 pages={pages}
                 perPage={10}
                 total={usage?.data?.total_queries}
-                table={table}
+                table={table()}
               />
             </>
           );

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

@@ -1,15 +1,24 @@
-import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import {
+  createQuery,
+  CreateQueryResult,
+  useQueryClient,
+} from "@tanstack/solid-query";
 import { createEffect, useContext } from "solid-js";
 import { getHeadQueries } from "../../api/analytics";
 import { DatasetContext } from "../../layouts/TopBarLayout";
 import { usePagination } from "../../hooks/usePagination";
-import { AnalyticsFilter } from "shared/types";
+import { AnalyticsFilter, HeadQuery } from "shared/types";
+
+export interface HeadQueriesData {
+  headQueriesQuery: CreateQueryResult<HeadQuery[], Error>;
+  pages: ReturnType<typeof usePagination>;
+}
 
 export const useHeadQueries = ({
   params,
 }: {
   params: { filter: AnalyticsFilter };
-}) => {
+}): HeadQueriesData => {
   const dataset = useContext(DatasetContext);
   const pages = usePagination();
   const queryClient = useQueryClient();

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

@@ -1,3 +1,4 @@
+/* eslint-disable solid/reactivity */
 import { format } from "date-fns";
 import { SearchQueryEvent } from "shared/types";
 import { FilterBar } from "../../components/FilterBar";
@@ -13,6 +14,7 @@ import {
   createSolidTable,
   getCoreRowModel,
   SortingState,
+  Table,
 } from "@tanstack/solid-table";
 import { Card } from "../../components/charts/Card";
 import { formatSearchMethod } from "../../utils/searchType";
@@ -117,7 +119,7 @@ export const SearchTablePage = () => {
             <TanStackTable
               pages={pages}
               perPage={10}
-              table={table}
+              table={table as unknown as Table<SearchQueryEvent>}
               onRowClick={(row: SearchQueryEvent) =>
                 navigate(`/query/${row.id}`)
               }

frontends/dashboard/package.json

@@ -16,6 +16,10 @@
     "@nozbe/microfuzz": "^1.0.0",
     "@sentry/browser": "^7.110.0",
     "@solidjs/router": "^0.10.1",
+    "@tanstack/solid-query": "^5.55.4",
+    "@tanstack/solid-query-devtools": "^5.55.4",
+    "@tanstack/solid-table": "^8.20.5",
+    "cva": "npm:class-variance-authority",
     "papaparse": "^5.4.1",
     "shared": "*",
     "shiki": "^1.10.0",
@@ -26,12 +30,12 @@
     "vite-plugin-runtime-env": "^0.1.1"
   },
   "devDependencies": {
-    "config": "*",
     "@tailwindcss/typography": "^0.5.10",
     "@types/papaparse": "^5.3.14",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "7.14.1",
     "autoprefixer": "^10.4.16",
+    "config": "*",
     "eslint": "^8.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-semistandard": "^17.0.0",

frontends/dashboard/src/api/createDataset.ts

@@ -1,4 +1,5 @@
-import { Dataset, DefaultError, ServerEnvsConfiguration } from "shared/types";
+import { Dataset, DefaultError } from "shared/types";
+import { DatasetConfigurationDTO } from "trieve-ts-sdk";
 
 const api_host = import.meta.env.VITE_API_HOST as unknown as string;
 
@@ -9,7 +10,7 @@ export const createNewDataset = async ({
 }: {
   name: string;
   organizationId: string;
-  serverConfig: ServerEnvsConfiguration;
+  serverConfig: DatasetConfigurationDTO;
 }) => {
   const response = await fetch(`${api_host}/dataset`, {
     method: "POST",

frontends/dashboard/src/components/ApiKeyGenerateModal.tsx

@@ -18,10 +18,8 @@ import {
   DisclosurePanel,
 } from "terracotta";
 import {
-  ApiKeyRespBody,
   DatasetAndUsage,
   fromI32ToUserRole,
-  Organization,
   SetUserApiKeyResponse,
 } from "shared/types";
 import { UserContext } from "../contexts/UserContext";
@@ -34,14 +32,13 @@ import {
 import { Item, MultiSelect } from "./MultiSelect";
 import { Tooltip } from "shared/ui";
 import { ApiRoutes, RouteScope } from "./Routes";
+import { Organization } from "trieve-ts-sdk";
 
 export const ApiKeyGenerateModal = (props: {
   openModal: Accessor<boolean>;
   closeModal: () => void;
 
-  refetch: (
-    info?: unknown,
-  ) => ApiKeyRespBody[] | Promise<ApiKeyRespBody[]> | null | undefined;
+  onCreated: () => void;
 }) => {
   const api_host = import.meta.env.VITE_API_HOST as unknown as string;
 
@@ -91,12 +88,6 @@ export const ApiKeyGenerateModal = (props: {
     { initialValue: [] },
   );
 
-  createEffect(() => {
-    if (generated()) {
-      void props.refetch();
-    }
-  });
-
   const generateApiKey = () => {
     if (role() !== 0 && !role()) return;
 
@@ -124,12 +115,14 @@ export const ApiKeyGenerateModal = (props: {
                 .flat()
             : undefined,
       }),
+      // eslint-disable-next-line solid/reactivity
     }).then((res) => {
       if (res.ok) {
         void res.json().then((data) => {
           setApiKey((data as SetUserApiKeyResponse).api_key);
         });
         setGenerated(true);
+        props.onCreated();
       } else {
         createToast({ type: "error", title: "Failed to generate API key" });
       }
@@ -150,7 +143,7 @@ export const ApiKeyGenerateModal = (props: {
   }, false);
 
   const currentUserRole = createMemo(() => {
-    const selectedOrgId = userContext.selectedOrganizationId?.();
+    const selectedOrgId = userContext.selectedOrg().id;
     if (!selectedOrgId) return 0;
     return (
       userContext