feat: more on dataset homepage

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(() => {

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;

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;
+};

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>
   );
 };