feature: add refresh chunk count button

frontends/dashboard/src/components/DatasetOverview.tsx

@@ -22,17 +22,21 @@ import {
   createSolidTable,
   getCoreRowModel,
 } from "@tanstack/solid-table";
-import { DatasetAndUsage } from "trieve-ts-sdk";
+import { DatasetAndUsage, DatasetUsageCount } from "trieve-ts-sdk";
 import { TanStackTable } from "shared/ui";
 import { CopyButton } from "./CopyButton";
 import { formatDate } from "../utils/formatters";
+import { TbReload } from "solid-icons/tb";
+import { createToast } from "../components/ShowToasts";
 
 const colHelp = createColumnHelper<DatasetAndUsage>();
 
 export const DatasetOverview = () => {
   const [newDatasetModalOpen, setNewDatasetModalOpen] =
     createSignal<boolean>(false);
-  const userContext = useContext(UserContext);
+  const userContext = useContext(UserContext) as {
+    selectedOrg: () => { id: string };
+  };
 
   const navigate = useNavigate();
   const [page, setPage] = createSignal(0);
@@ -48,6 +52,58 @@ export const DatasetOverview = () => {
       setPage,
     });
 
+  const refetchChunks = async (datasetId: string) => {
+    try {
+      const api_host = import.meta.env.VITE_API_HOST as unknown as string;
+      const currentUsage = usage();
+      const prevCount = currentUsage[datasetId]?.chunk_count || 0;
+
+      const response = await fetch(`${api_host}/dataset/usage/${datasetId}`, {
+        method: "GET",
+        headers: {
+          "TR-Dataset": datasetId,
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to fetch dataset usage");
+      }
+
+      const newData = (await response.json()) as DatasetUsageCount;
+      const newCount = newData.chunk_count;
+
+      const countDifference = newCount - prevCount;
+
+      setUsage((prevUsage) => ({
+        ...prevUsage,
+        [datasetId]: { chunk_count: newCount },
+      }));
+
+      createToast({
+        title: "Updated",
+        type: "success",
+        message: `Successfully updated chunk count: ${countDifference} chunk${
+          Math.abs(countDifference) === 1 ? " has" : "s have"
+        } been ${
+          countDifference > 0
+            ? "added"
+            : countDifference < 0
+              ? "removed"
+              : "added or removed"
+        } since last update.`,
+        timeout: 3000,
+      });
+    } catch (_) {
+      createToast({
+        title: "Error",
+        type: "error",
+        message: `Failed to reload chunk count.`,
+      });
+    }
+  };
+
   const table = createMemo(() => {
     const curUsage = usage();
 
@@ -58,17 +114,39 @@ export const DatasetOverview = () => {
       colHelp.display({
         header: "Chunk Count",
         cell(info) {
-          return curUsage[info.row.original.dataset.id]?.chunk_count ?? 0;
+          const datasetId = info.row.original.dataset.id;
+
+          return (
+            <div class="flex flex-row content-center items-center gap-1">
+              {curUsage[datasetId]?.chunk_count ?? 0}{" "}
+              <button
+                class="text-sm opacity-80 hover:text-fuchsia-500"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void refetchChunks(datasetId);
+                }}
+              >
+                <TbReload />
+              </button>
+            </div>
+          );
         },
       }),
 
       colHelp.accessor("dataset.id", {
         header: "ID",
         cell(props) {
           return (
-            <div class="flex gap-1">
+            <div class="flex gap-2">
               {props.row.original.dataset.id}
-              <CopyButton text={props.row.original.dataset.id} />
+              <button
+                class="flex flex-row content-center text-sm opacity-80"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                <CopyButton text={props.row.original.dataset.id} />
+              </button>
             </div>
           );
         },

frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx

@@ -1,4 +1,4 @@
-import { createSignal, useContext } from "solid-js";
+import { createEffect, createSignal, onCleanup, useContext } from "solid-js";
 import { DatasetContext } from "../../contexts/DatasetContext";
 import { createQuery } from "@tanstack/solid-query";
 import { useTrieve } from "../../hooks/useTrieve";
@@ -9,6 +9,8 @@ import { UserContext } from "../../contexts/UserContext";
 import { CodeExamples } from "../../components/CodeExamples";
 import { Spacer } from "../../components/Spacer";
 import { BuildingSomething } from "../../components/BuildingSomething";
+import { TbReload } from "solid-icons/tb";
+import { createToast } from "../../components/ShowToasts";
 
 const searchUiURL = import.meta.env.VITE_SEARCH_UI_URL as string;
 
@@ -44,6 +46,52 @@ export const DatasetHomepage = () => {
       : "";
   };
 
+  const refetchChunkCount = async (showForDeltaZero: boolean) => {
+    try {
+      const currentUsage = chunkCountQuery.data;
+      const prevCount = currentUsage?.chunk_count || 0;
+
+      const newData = await chunkCountQuery.refetch();
+
+      const newCount: number = newData.data?.chunk_count as number;
+      const countDifference = newCount - prevCount;
+
+      if (countDifference == 0 && !showForDeltaZero) {
+        return;
+      }
+
+      createToast({
+        title: "Updated",
+        type: "success",
+        message: `Successfully updated chunk count: ${countDifference} chunk${
+          Math.abs(countDifference) === 1 ? " has" : "s have"
+        } been ${
+          countDifference > 0
+            ? "added"
+            : countDifference < 0
+              ? "removed"
+              : "added or removed"
+        } since last update.`,
+        timeout: 3000,
+      });
+    } catch (error) {
+      createToast({
+        title: "Error",
+        type: "error",
+        message: `Failed to reload chunk count: ${(error as Error).message}`,
+      });
+    }
+  };
+
+  createEffect(() => {
+    const refreshChunkCountId = setInterval(
+      () => void refetchChunkCount(false),
+      30000,
+    );
+
+    onCleanup(() => clearInterval(refreshChunkCountId));
+  });
+
   return (
     <div>
       <div class="flex items-end justify-between pb-2">
@@ -71,9 +119,25 @@ export const DatasetHomepage = () => {
       </div>
       <MagicSuspense>
         <>
-          <div>Dataset ID: {datasetId()}</div>
-          <div>Created At: {datasetQuery.data?.created_at}</div>
-          <div>Chunk Count: {chunkCountQuery.data?.chunk_count}</div>
+          <div>
+            <span class="font-semibold">Dataset ID:</span> {datasetId()}
+          </div>
+          <div>
+            <span class="font-semibold">Created At:</span>{" "}
+            {datasetQuery.data?.created_at}
+          </div>
+          <div class="flex flex-row content-center items-center gap-1">
+            <span class="font-semibold">Chunk Count:</span>{" "}
+            {chunkCountQuery.data?.chunk_count}
+            <button
+              class="text-sm opacity-80 hover:text-fuchsia-500"
+              onClick={() => {
+                void refetchChunkCount(true);
+              }}
+            >
+              <TbReload />
+            </button>
+          </div>
         </>
       </MagicSuspense>
       <Spacer h={12} />