Release 1.0.4 (#59)

* Bug fix * signup bug fix * user invite * docs: add local setup instructions, cleanup files (#10) * Update README.md (#11) * Update README.md * Update README.md * Update README.md * Bugfix auth (#12) * Update README.md * Update favicon (#17) * Release 1.0.3 (#8) * Bug fix * signup bug fix * user invite * favicon * Adding pagination to traces (#16) * Adding pagination to traces * installing scroller * query function bug * fix * Bug fix pagination --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * Dylan/s3en 2060 adding more frontend pagination (#18) * Adding pagination to traces * installing scroller * bug fixes for trace pagination * adding delete prompt api * adding pagination to evaluate * adding pagination to evals * adding pagination to prompset, bug fixes * adding .env * fix --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * updating prompt dialog (#19) * Show API key warning message (#20) * Show API key warning message * Update instructions * Fix null dereference checks (#21) * adding check for missing table (#22) * adding check for missing table * adding docs button * Check empty table --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * Check length of data (#24) * flicker issue (#26) * Flicker issue (#27) * flicker issue * Fixes * Fix (#30) * Fix header (#32) * updating gitignore * Rohit/s3 en 2064 fix api key not showing (#29) * fix api key bug * final fixes * fix scroll bar issue * adjust readme * Pagination bug * Pagination bug (#37) * removing form reset on edit (#39) * removing form reset on edit * bug fixes: * fix * fix page number bug --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * Dylan/s3en 2079 thumbs up duplication bug (#40) * refetch/duplicate bug fix * Prevent stale data in forms * fix * linting * fixing duplication bug * removing console * Fix eval * Fix pagination for promp eval * Fix promptsets pagination --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * Bug fixes for Traces Pagination (#42) * Pagination bug * Fix pagination for traces * Bug fix * Fix invalid model (#43) * Pagination bug * Bug fix * Bug fixes (#45) * Pagination bug * Bug fix * fix pricing * fix the pii function * Bugfixes * adding pagination to dataset * Trace page improvements (#49) * Pagination bug * Bug fix * Fix scrolling pagination * Filters * Add model * utc - local time switch * Bugfixes and Evaluation Dashboard (#50) * Pagination bug * Bug fix * minor fix * Evaluations dashboard refresh * Move prompts as a tab * UI improvements * round values * Add migration script * Minor bug fixes (#51) * Pagination bug * Bug fix * Bug fix * Disable LLM view for framework and vector db requests * Minor bug fixes (#52) * Pagination bug * Bug fix * Bug fix * Disable LLM view for framework and vector db requests * adding projects page loading * deleting * fix * adding perplexity cost calculator: * Dylan/s3en 2127 loading states for all pages (#57) * loading for data set * adding loading page for promptset * dataset loading * prompts loading * prompts loading * metrics loading, chart loading * evaluations loading * refactor traces * trace row loading * more loading * Rename loading to skeleton * Minor fix --------- Co-authored-by: Karthik Kalyanaraman <[email protected]> * Bugfixes and cleanups (#58) * Pagination bug * Bug fix * Make /projects endpoint response cleaner * Better error handling for projects page * Cleanup metrics page * Cleanup metrics and better error handling * better error handling for traces * Error handling for evaluations page * Error handle evaluations * Error handling for datasets * Minor fixes * hover fixes * Minor fix * minor fix --------- Co-authored-by: darshit-s3 <[email protected]> Co-authored-by: Rohit Kadhe <[email protected]> Co-authored-by: dylanzuber-scale3 <[email protected]> Co-authored-by: dylan <[email protected]> Co-authored-by: Ali Waleed <[email protected]>
Scale3-Labs · Apr 14, 2024 · 553ecca · 553ecca
1 parent 56fc157
commit 553ecca
Show file tree

Hide file tree

Showing 55 changed files with 2,623 additions and 1,797 deletions.
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
@@ -1,9 +1,11 @@
 import { Header } from "@/components/shared/header";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { authOptions } from "@/lib/auth/options";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
+import { PageSkeleton } from "./projects/page-client";
 
 export default async function Layout({
   children,
@@ -16,7 +18,7 @@ export default async function Layout({
   }
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<PageLoading />}>
       <main className="min-h-screen w-full">
         <Header email={session?.user?.email as string} />
         <Separator />
@@ -25,3 +27,28 @@ export default async function Layout({
     </Suspense>
   );
 }
+
+function PageLoading() {
+  return (
+    <main className="min-h-screen w-full">
+      <header className="flex flex-col gap-2 w-full px-12 z-30 sticky top-0 bg-primary-foreground">
+        <div className="flex justify-between items-center w-full pt-3">
+          <div className="text-xl font-bold flex items-center gap-0">
+            Langtrace AI
+          </div>
+          <div className="flex items-end gap-3">
+            <Skeleton className="w-20 h-16" />
+            <div className="flex flex-col mr-4">
+              <p className="text-sm text-muted-foreground">
+                <Skeleton className="w-20 h-16" />
+              </p>
+            </div>
+            <Skeleton className="w-20 h-16" />
+          </div>
+        </div>
+        <Skeleton className="w-full h-0.5" />
+      </header>
+      <PageSkeleton />
+    </main>
+  );
+}
diff --git a/app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx b/app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { CreateData } from "@/components/project/dataset/create-data";
+import DatasetRowSkeleton from "@/components/project/dataset/dataset-row-skeleton";
 import { EditData } from "@/components/project/dataset/edit-data";
 import { Spinner } from "@/components/shared/spinner";
 import { Button } from "@/components/ui/button";
@@ -12,6 +13,7 @@ import { useParams } from "next/navigation";
 import { useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
+import { toast } from "sonner";
 
 export default function Dataset() {
   const dataset_id = useParams()?.dataset_id as string;
@@ -36,6 +38,10 @@ export default function Dataset() {
       const response = await fetch(
         `/api/dataset?dataset_id=${dataset_id}&page=${page}&pageSize=${PAGE_SIZE}`
       );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch dataset");
+      }
       const result = await response.json();
       return result;
     },
@@ -66,10 +72,16 @@ export default function Dataset() {
       }
       setShowLoader(false);
     },
+    onError: (error) => {
+      setShowLoader(false);
+      toast.error("Failed to fetch dataset", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
   });
 
   if (fetchDataset.isLoading || !fetchDataset.data || !currentData) {
-    return <div>Loading...</div>;
+    return <PageSkeleton />;
   } else {
     return (
       <div className="w-full py-6 px-6 flex flex-col gap-4">
@@ -130,3 +142,32 @@ export default function Dataset() {
     );
   }
 }
+
+function PageSkeleton() {
+  return (
+    <div className="w-full py-6 px-6 flex flex-col gap-4">
+      <div className="flex gap-4 items-center w-fit">
+        <Button
+          disabled={true}
+          variant="secondary"
+          onClick={() => window.history.back()}
+        >
+          <ChevronLeft className="mr-1" />
+          Back
+        </Button>
+        <CreateData disabled={true} />
+      </div>
+      <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen overflow-y-scroll">
+        <div className="grid grid-cols-5 items-center justify-stretch gap-3 py-3 px-4 bg-muted">
+          <p className="text-xs font-medium">Created at</p>
+          <p className="text-xs font-medium">Input</p>
+          <p className="text-xs font-medium">Output</p>
+          <p className="text-xs font-medium text-end">Note</p>
+        </div>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <DatasetRowSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx b/app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx
@@ -5,13 +5,15 @@ import { EditPrompt } from "@/components/project/dataset/edit-data";
 import { Spinner } from "@/components/shared/spinner";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { PAGE_SIZE } from "@/lib/constants";
 import { Prompt } from "@prisma/client";
 import { ChevronLeft } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
+import { toast } from "sonner";
 
 export default function Promptset() {
   const promptset_id = useParams()?.promptset_id as string;
@@ -36,6 +38,10 @@ export default function Promptset() {
       const response = await fetch(
         `/api/promptset?promptset_id=${promptset_id}&page=${page}&pageSize=${PAGE_SIZE}`
       );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch promptset");
+      }
       const result = await response.json();
       return result;
     },
@@ -66,10 +72,16 @@ export default function Promptset() {
       }
       setShowLoader(false);
     },
+    onError: (error) => {
+      setShowLoader(false);
+      toast.error("Failed to fetch promptset", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
   });
 
   if (fetchPromptset.isLoading || !fetchPromptset.data || !currentData) {
-    return <div>Loading...</div>;
+    return <PageSkeleton />;
   } else {
     return (
       <div className="w-full py-6 px-6 flex flex-col gap-4">
@@ -121,3 +133,51 @@ export default function Promptset() {
     );
   }
 }
+
+function PageSkeleton() {
+  return (
+    <div className="w-full py-6 px-6 flex flex-col gap-4">
+      <div className="flex gap-4 items-center w-fit">
+        <Button
+          disabled={true}
+          variant="secondary"
+          onClick={() => window.history.back()}
+        >
+          <ChevronLeft className="mr-1" />
+          Back
+        </Button>
+        <CreatePrompt disabled={true} />
+      </div>
+      <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen overflow-y-scroll">
+        <div className="grid grid-cols-4 items-center justify-stretch gap-3 py-3 px-4 bg-muted">
+          <p className="text-xs font-medium">Created at</p>
+          <p className="text-xs font-medium">Value</p>
+          <p className="text-xs font-medium text-left">Note</p>
+          <p className="text-xs font-medium text-end"></p>
+        </div>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <PromptsetRowSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function PromptsetRowSkeleton() {
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-5 items-start justify-stretch gap-3 py-3 px-4">
+        <div className="text-xs">
+          <Skeleton className="w-full h-6" />
+        </div>
+        <div className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </div>
+        <div className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </div>
+      </div>
+      <Separator orientation="horizontal" />
+    </div>
+  );
+}