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 <karthik@scale3labs.com>
Scale3-Labs · karthikscale3 · Apr 2, 2024 · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024
commit 343cb43aa72287f7067eda89c4728584e5f269e4
diff --git a/.DS_Store b/.DS_Store
diff --git a/.env b/.env
@@ -26,4 +26,4 @@ CLICK_HOUSE_DATABASE_NAME="langtrace_dev"
 # Admin login
 ADMIN_EMAIL="admin@langtrace.ai"
 ADMIN_PASSWORD="langtraceadminpw"
-NEXT_PUBLIC_ENABLE_ADMIN_LOGIN="true"
+NEXT_PUBLIC_ENABLE_ADMIN_LOGIN="true"
diff --git a/.gitignore b/.gitignore
@@ -41,4 +41,4 @@ cli/config*.ini
 cli/build/*
 cli/dist/*
 
-.env
+.env
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
@@ -7,22 +7,54 @@ import { Separator } from "@/components/ui/separator";
 import { ChevronLeft } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useQuery } from "react-query";
+import { useState } from "react";
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+import { Spinner } from '@/components/shared/spinner';
 
 export default function Promptset() {
   const promptset_id = useParams()?.promptset_id as string;
+  const [page, setPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(2);
+  const pageSize = 15;
+  const [showLoader, setShowLoader] = useState(false);
+  const [data, setData] = useState<any>(null);
+
+  useBottomScrollListener(() => {
+    if (fetchPromptset.isRefetching) {
+      return;
+    }
+    if (page <= totalPages) {
+      setShowLoader(true);
+      fetchPromptset.refetch();
+    }
+  });
 
   const fetchPromptset = useQuery({
     queryKey: [promptset_id],
     queryFn: async () => {
       const response = await fetch(
-        `/api/promptset?promptset_id=${promptset_id}`
+        `/api/promptset?promptset_id=${promptset_id}&page=${page}&pageSize=${pageSize}`
       );
       const result = await response.json();
       return result;
     },
+    onSuccess: (result) => {
+      if (totalPages !== result.metadata.total_pages) {
+        setTotalPages(result.metadata.total_pages);
+      }
+      if (result) {
+        if (data) {
+          setData((prevData: any) => [...prevData, ...result.promptsets.Prompt]);
+        } else {
+          setData(result.promptsets.Prompt);
+        }
+      }
+      setPage((currentPage) => currentPage + 1);
+      setShowLoader(false);
+    }
   });
 
-  if (fetchPromptset.isLoading || !fetchPromptset.data) {
+  if (fetchPromptset.isLoading || !fetchPromptset.data || !data) {
     return <div>Loading...</div>;
   } else {
     return (
@@ -50,7 +82,7 @@ export default function Promptset() {
               </div>
             )}
           {fetchPromptset.data?.promptsets &&
-            fetchPromptset.data?.promptsets?.Prompt?.map(
+            data.map(
               (prompt: any, i: number) => {
                 return (
                   <div className="flex flex-col" key={i}>
@@ -70,6 +102,11 @@ export default function Promptset() {
                 );
               }
             )}
+            {showLoader && (
+            <div className='flex justify-center py-8'>
+              <Spinner className='h-8 w-8 text-center' />
+            </div>
+          )}
         </div>
       </div>
     );

diff --git a/app/api/prompt/route.ts b/app/api/prompt/route.ts
@@ -3,12 +3,7 @@ import { TraceService } from "@/lib/services/trace_service";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { NextRequest, NextResponse } from "next/server";
-
-//curl "http://localhost:3000/api/trace?projectId=dylan_test_table&traceId=15132931e76a38ffcff2707b38e75e20"
-// example curl for getting specific trace from a project
-
-// curl "http://localhost:3000/api/trace?projectId=dylan_test_table&attribute=llm.model"
-// example curl for getting traces with specific attribute from a project
+import prisma from "@/lib/prisma";
 
 export async function GET(req: NextRequest) {
   const session = await getServerSession(authOptions);
@@ -50,3 +45,22 @@ export async function GET(req: NextRequest) {
     });
   }
 }
+
+export async function DELETE(req: NextRequest) {
+  const session = await getServerSession(authOptions);
+
+  if (!session || !session.user) {
+    redirect("/login");
+  }
+
+  const data = await req.json();
+  const { id } = data;
+
+  const prompt = await prisma.prompt.delete({
+    where: {
+      id,
+    },
+  });
+
+  return NextResponse.json({});
+}
diff --git a/app/api/promptset/route.ts b/app/api/promptset/route.ts
@@ -12,6 +12,11 @@ export async function GET(req: NextRequest) {
 
   const id = req.nextUrl.searchParams.get("id") as string;
   const promptsetId = req.nextUrl.searchParams.get("promptset_id") as string;
+  const pageParam = req.nextUrl.searchParams.get("page");
+  const page = pageParam ? parseInt(pageParam, 10) : 1;
+  const pageSizeParam = req.nextUrl.searchParams.get("pageSize");
+  const pageSize = pageSizeParam ? parseInt(pageSizeParam, 10) : 10;
+
   if (!promptsetId && !id) {
     return NextResponse.json(
       {
@@ -41,14 +46,28 @@ export async function GET(req: NextRequest) {
       );
     }
 
-    // If dataset exists, fetch related Data records ordered by createdAt
+    const totalLen = await prisma.prompt.count({
+      where: {
+        promptsetId: promptset.id,
+      },
+    });
+
+    const totalPages = Math.ceil(totalLen / pageSize) === 0 ? 1 : Math.ceil(totalLen / pageSize);
+    const md = { page, page_size: pageSize, total_pages: totalPages };
+
+    if (page! > totalPages) {
+      throw Error("Page number is greater than total pages");
+    }
+
     const relatedPrompt = await prisma.prompt.findMany({
       where: {
         promptsetId: promptset.id,
       },
       orderBy: {
-        createdAt: "desc",
+        createdAt: 'desc',
       },
+      take: pageSize,
+      skip: (page - 1) * pageSize,
     });
 
     // Combine dataset with its related, ordered Data
@@ -59,6 +78,7 @@ export async function GET(req: NextRequest) {
 
     return NextResponse.json({
       promptsets: promptsetWithOrderedData,
+      metadata: md,
     });
   }
 

diff --git a/components/project/dataset/edit-data.tsx b/components/project/dataset/edit-data.tsx
@@ -33,6 +33,8 @@ import { useForm } from "react-hook-form";
 import { useQueryClient } from "react-query";
 import { toast } from "sonner";
 import { z } from "zod";
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+import { Spinner } from '@/components/shared/spinner';
 
 export function EditData({
   idata,

diff --git a/components/project/eval/eval.tsx b/components/project/eval/eval.tsx
@@ -20,6 +20,8 @@ import { useQuery, useQueryClient } from "react-query";
 import SetupInstructions from "../../shared/setup-instructions";
 import { Button } from "../../ui/button";
 import { Separator } from "../../ui/separator";
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+import { Spinner } from '../../shared/spinner';
 
 interface CheckedData {
   input: string;
@@ -30,6 +32,11 @@ interface CheckedData {
 export default function Eval({ email }: { email: string }) {
   const project_id = useParams()?.project_id as string;
   const [selectedData, setSelectedData] = useState<CheckedData[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(2);
+  const pageSize = 15;
+  const [showLoader, setShowLoader] = useState(false);
+  const [data, setData] = useState<any>(null);
 
   const onCheckedChange = (data: CheckedData, checked: boolean) => {
     if (checked) {
@@ -42,13 +49,38 @@ export default function Eval({ email }: { email: string }) {
   const fetchPrompts = useQuery({
     queryKey: ["fetch-prompts-query"],
     queryFn: async () => {
-      const response = await fetch(`/api/prompt?projectId=${project_id}`);
+      const response = await fetch(`/api/prompt?projectId=${project_id}&page=${page}&pageSize=${pageSize}`);
       const result = await response.json();
       return result;
     },
+    onSuccess: (result) => {
+      // Only update data if result.result is not empty
+      if (totalPages !== result.prompts.metadata.total_pages) {
+        setTotalPages(result.prompts.metadata.total_pages);
+      }
+      if (result) {
+        if (data) {
+          setData((prevData: any) => [...prevData, ...result.prompts.result]);
+        } else {
+          setData(result.prompts.result);
+        }
+      }
+      setPage((currentPage) => currentPage + 1);
+      setShowLoader(false);
+    },
   });
 
-  if (fetchPrompts.isLoading || !fetchPrompts.data) {
+  useBottomScrollListener(() => {
+    if (fetchPrompts.isRefetching) {
+      return;
+    }
+    if (page < totalPages) {
+      setShowLoader(true);
+      fetchPrompts.refetch();
+    }
+  });
+
+  if (fetchPrompts.isLoading || !fetchPrompts.data || !data) {
     return <div>Loading...</div>;
   }
 
@@ -74,7 +106,7 @@ export default function Eval({ email }: { email: string }) {
         </div>
         {!fetchPrompts.isLoading &&
           fetchPrompts.data &&
-          fetchPrompts.data?.prompts?.result?.map((prompt: any, i: number) => {
+          data.map((prompt: any, i: number) => {
             return (
               <div className="flex flex-col" key={i}>
                 <EvalRow
@@ -87,6 +119,11 @@ export default function Eval({ email }: { email: string }) {
               </div>
             );
           })}
+          {showLoader && (
+            <div className='flex justify-center py-8'>
+              <Spinner className='h-8 w-8 text-center' />
+            </div>
+          )}
         {!fetchPrompts.isLoading &&
           fetchPrompts.data &&
           !fetchPrompts.data?.prompts?.result && (
@@ -126,7 +163,6 @@ const EvalRow = ({
     queryFn: async () => {
       const response = await fetch(`/api/evaluation?spanId=${prompt.span_id}`);
       const result = await response.json();
-      console.log(result);
       setEvaluation(result.evaluations.length > 0 ? result.evaluations[0] : {});
       setScore(
         result.evaluations.length > 0 ? result.evaluations[0].score : -100

diff --git a/components/project/eval/prompts.tsx b/components/project/eval/prompts.tsx
@@ -11,6 +11,8 @@ import Markdown from "react-markdown";
 import { useQuery } from "react-query";
 import { Button } from "../../ui/button";
 import { Separator } from "../../ui/separator";
+import { useBottomScrollListener } from 'react-bottom-scroll-listener';
+import { Spinner } from '../../shared/spinner';
 
 interface CheckedData {
   value: string;
@@ -20,6 +22,11 @@ interface CheckedData {
 export default function Prompts({ email }: { email: string }) {
   const project_id = useParams()?.project_id as string;
   const [selectedData, setSelectedData] = useState<CheckedData[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(2);
+  const pageSize = 15;
+  const [showLoader, setShowLoader] = useState(false);
+  const [data, setData] = useState<any>(null);
 
   const onCheckedChange = (data: CheckedData, checked: boolean) => {
     if (checked) {
@@ -32,18 +39,43 @@ export default function Prompts({ email }: { email: string }) {
   const fetchPrompts = useQuery({
     queryKey: ["fetch-prompts-query"],
     queryFn: async () => {
-      const response = await fetch(`/api/prompt?projectId=${project_id}`);
+      const response = await fetch(`/api/prompt?projectId=${project_id}&page=${page}&pageSize=${pageSize}`);
       const result = await response.json();
       return result;
     },
+    onSuccess: (result) => {
+      // Only update data if result.result is not empty
+      if (totalPages !== result.prompts.metadata.total_pages) {
+        setTotalPages(result.prompts.metadata.total_pages);
+      }
+      if (result) {
+        if (data) {
+          setData((prevData: any) => [...prevData, ...result.prompts.result]);
+        } else {
+          setData(result.prompts.result);
+        }
+      }
+      setPage((currentPage) => currentPage + 1);
+      setShowLoader(false);
+    },
+  });
+
+  useBottomScrollListener(() => {
+    if (fetchPrompts.isRefetching) {
+      return;
+    }
+    if (page < totalPages) {
+      setShowLoader(true);
+      fetchPrompts.refetch();
+    }
   });
 
-  if (fetchPrompts.isLoading || !fetchPrompts.data) {
+  if (fetchPrompts.isLoading || !fetchPrompts.data || !data) {
     return <div>Loading...</div>;
   } else {
     // Deduplicate prompts
     const seenPrompts: string[] = [];
-    const prompts = fetchPrompts.data?.prompts?.result || [];
+    const prompts = data || [];
     const dedupedPrompts = prompts.filter((prompt: any) => {
       const attributes = prompt.attributes ? JSON.parse(prompt.attributes) : {};
       const prompts: any[] = JSON.parse(attributes["llm.prompts"]) || "[]";
@@ -89,6 +121,11 @@ export default function Prompts({ email }: { email: string }) {
               />
             );
           })}
+          {showLoader && (
+            <div className='flex justify-center py-8'>
+              <Spinner className='h-8 w-8 text-center' />
+            </div>
+          )}
           {dedupedPrompts?.length === 0 && (
             <div className="flex flex-col gap-3 items-center justify-center p-4">
               <p className="text-muted-foreground font-semibold text-md mb-3">
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,4 +41,4 @@ cli/config*.ini @@
     cli/build/*
     cli/dist/*
-    .env
+    .env