From 1a6b9347efec7ab43485ddb1507b576ef27eff5f Mon Sep 17 00:00:00 2001
From: Drew Harris <harrisd@smu.edu>
Date: Tue, 17 Sep 2024 14:57:16 -0500
Subject: [PATCH] feat: more on dataset homepage

---
 .../dashboard/src/components/MagicBox.tsx     |  5 ++-
 .../LegacySettingsWrapper.tsx                 |  1 -
 frontends/dashboard/src/hooks/useTrieve.ts    |  7 ++++
 .../src/pages/dataset/DatasetHomepage.tsx     | 34 +++++++++++++++++--
 4 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 frontends/dashboard/src/hooks/useTrieve.ts

diff --git a/frontends/dashboard/src/components/MagicBox.tsx b/frontends/dashboard/src/components/MagicBox.tsx
index f0b8201d69..6e08831480 100644
--- a/frontends/dashboard/src/components/MagicBox.tsx
+++ b/frontends/dashboard/src/components/MagicBox.tsx
@@ -39,7 +39,10 @@ export const MagicBox = <D extends CreateQueryResult>(
   props: MagicBoxProps<D>,
 ) => {
   const children = createMemo(() => {
-    return props.children(props.query.data as NonNullable<D["data"]>);
+    if (props.query.data) {
+      return props.children(props.query.data as NonNullable<D["data"]>);
+    }
+    return <></>;
   });
 
   const skeletonHeight = createMemo(() => {
diff --git a/frontends/dashboard/src/components/dataset-settings/LegacySettingsWrapper.tsx b/frontends/dashboard/src/components/dataset-settings/LegacySettingsWrapper.tsx
index 8a7b21121c..6134aac999 100644
--- a/frontends/dashboard/src/components/dataset-settings/LegacySettingsWrapper.tsx
+++ b/frontends/dashboard/src/components/dataset-settings/LegacySettingsWrapper.tsx
@@ -12,7 +12,6 @@ import {
   useContext,
 } from "solid-js";
 import { ApiContext } from "../..";
-import { GeneralServerSettings } from "./GeneralSettings";
 
 export type DatasetConfig = DatasetConfigurationDTO & {
   LLM_API_KEY?: string | null;
diff --git a/frontends/dashboard/src/hooks/useTrieve.ts b/frontends/dashboard/src/hooks/useTrieve.ts
new file mode 100644
index 0000000000..70a14a773c
--- /dev/null
+++ b/frontends/dashboard/src/hooks/useTrieve.ts
@@ -0,0 +1,7 @@
+import { useContext } from "solid-js";
+import { ApiContext } from "..";
+
+export const useTrieve = () => {
+  const trieve = useContext(ApiContext);
+  return trieve;
+};
diff --git a/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx b/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx
index 0c626cdc27..7efa08179c 100644
--- a/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx
+++ b/frontends/dashboard/src/pages/dataset/DatasetHomepage.tsx
@@ -1,13 +1,43 @@
 import { useContext } from "solid-js";
 import { DatasetContext } from "../../contexts/DatasetContext";
+import { createQuery } from "@tanstack/solid-query";
+import { useTrieve } from "../../hooks/useTrieve";
+import { MagicBox, MagicSuspense } from "../../components/MagicBox";
 
 export const DatasetHomepage = () => {
   const { datasetId } = useContext(DatasetContext);
+  const trieve = useTrieve();
+
+  const datasetQuery = createQuery(() => ({
+    queryKey: ["dataset", datasetId()],
+    queryFn: async () => {
+      return trieve.fetch("/api/dataset/{dataset_id}", "get", {
+        datasetId: datasetId(),
+      });
+    },
+  }));
+
+  const chunkCountQuery = createQuery(() => ({
+    queryKey: ["dataset-chunk-count", datasetId()],
+    queryFn: async () => {
+      return trieve.fetch("/api/dataset/usage/{dataset_id}", "get", {
+        datasetId: datasetId(),
+      });
+    },
+  }));
 
   return (
     <div class="p-4">
-      <div>Dataset Homepage</div>
-      <div class="m-3 bg-orange-700">ID: {datasetId()}</div>
+      <MagicSuspense skeletonHeight="36px" unstyled>
+        <div class="pb-2 text-lg font-medium">{datasetQuery.data?.name}</div>
+      </MagicSuspense>
+      <MagicSuspense>
+        <>
+          <div>Dataset ID: {datasetId()}</div>
+          <div>Created At: {datasetQuery.data?.created_at}</div>
+          <div>Chunk Count: {chunkCountQuery.data?.chunk_count}</div>
+        </>
+      </MagicSuspense>
     </div>
   );
 };