From c9f48d36e2f601cb0ef184cf6a4e4b34ff941cc7 Mon Sep 17 00:00:00 2001 From: Vidyoot Senthil Date: Sat, 21 Sep 2024 17:05:20 -0700 Subject: [PATCH] feature: add refresh chunk count button to dashboard --- .../src/components/DatasetOverview.tsx | 88 +++++++++++++++++-- .../src/pages/dataset/DatasetHomepage.tsx | 72 ++++++++++++++- 2 files changed, 151 insertions(+), 9 deletions(-) diff --git a/frontends/dashboard/src/components/DatasetOverview.tsx b/frontends/dashboard/src/components/DatasetOverview.tsx index aa4055314..2ee20e0be 100644 --- a/frontends/dashboard/src/components/DatasetOverview.tsx +++ b/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(); export const DatasetOverview = () => { const [newDatasetModalOpen, setNewDatasetModalOpen] = createSignal(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,7 +114,22 @@ 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 ( +
+ {curUsage[datasetId]?.chunk_count ?? 0}{" "} + +
+ ); }, }), @@ -66,9 +137,16 @@ export const DatasetOverview = () => { header: "ID", cell(props) { return ( -
+
{props.row.original.dataset.id} - +
); }, diff --git a/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx b/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx index 462fb7ff1..7d816e03c 100644 --- a/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx +++ b/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 (
@@ -71,9 +119,25 @@ export const DatasetHomepage = () => {
<> -
Dataset ID: {datasetId()}
-
Created At: {datasetQuery.data?.created_at}
-
Chunk Count: {chunkCountQuery.data?.chunk_count}
+
+ Dataset ID: {datasetId()} +
+
+ Created At:{" "} + {datasetQuery.data?.created_at} +
+
+ Chunk Count:{" "} + {chunkCountQuery.data?.chunk_count} + +