Skip to content

Commit

Permalink
updated test run interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivankacker
shivankacker committed Oct 20, 2023
1 parent d0394b6 commit a8e21c2
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 100 deletions.
35 changes: 21 additions & 14 deletions src/app/admin/tests/[testsuite_id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,16 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
const { testsuite_id } = params;

const testSuiteQuery = useQuery(["testsuite", testsuite_id], () =>
API.tests.suites.get(testsuite_id)
API.tests.suites.get(testsuite_id),
{
refetchOnWindowFocus: false,
}
);
const testSuite: TestSuite | undefined = testSuiteQuery.data || undefined;

const TestQuestionsQuery = useQuery(["testsuitequestion", testsuite_id], () =>
API.tests.questions.list(testsuite_id, { ordering: "created_at" })
);
, { refetchOnWindowFocus: false });
const testQuestions: TestQuestion[] | undefined =
TestQuestionsQuery.data?.results || undefined;

Expand Down Expand Up @@ -511,17 +514,22 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
className="flex items-center mb-2 border border-gray-300 rounded-lg bg-white"
key={document.external_id}
>
<a
<Link
href={document.file}
target="_blank"
key={document.external_id}
className="flex-grow flex items-center hover:bg-slate-200 py-1 px-3 rounded-md"
className="flex-grow flex items-center hover:bg-slate-200 py-1 px-3 rounded-md justify-between"
>
<i className="fas fa-paperclip mr-2 text-gray-600"></i>
<span className="text-gray-700">
{document.title}
</span>
</a>
<div className="flex items-center justify-center">
<i className="fas fa-paperclip mr-2 text-gray-600"></i>
<div className="text-gray-700">
{document.title}
</div>
</div>
<div className="w-1/2">
<img src={document.file} alt="File" className="w-full" />
</div>
</Link>

<Button
className="h-8 w-8 text-red-600 hover:bg-slate-200"
Expand Down Expand Up @@ -578,11 +586,10 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
>
{has_new_document ? (
<div
className={`text-sm text-gray-700 flex justify-center items-center ${
document.state === "selected"
? "cursor-pointer"
: "cursor-not-allowed"
}`}
className={`text-sm text-gray-700 flex justify-center items-center ${document.state === "selected"
? "cursor-pointer"
: "cursor-not-allowed"
}`}
onClick={async () => {
if (document.state === "uploading") return;
setDocument({
Expand Down
120 changes: 73 additions & 47 deletions src/app/admin/tests/[testsuite_id]/runs/[testrun_id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client"

import Modal from "@/components/modal";
import Rating, { ratingOptions } from "@/components/rating";
import Rating, { RatingLabel, ratingOptions } from "@/components/rating";
import ScrollToTop from "@/components/scrolltotop";
import { Button, TextArea } from "@/components/ui/interactive";
import Loading from "@/components/ui/loading";
Expand All @@ -14,6 +14,7 @@ import { Toaster, toast } from "react-hot-toast";
import jsPDF from "jspdf";
import json2csv from 'json2csv';
import { DocumentType } from "@/types/project";
import Link from "next/link";

export default function Page({ params }: { params: { testsuite_id: string, testrun_id: string } }) {
const router = useRouter();
Expand Down Expand Up @@ -52,25 +53,25 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
const testResults = testRun?.test_results || [];

const fields = ['question', 'human_answer', 'answer', 'cosine_sim', 'bleu_score', 'feedback', 'documents']

const total_cosine = testResults.reduce((acc: number, test: TestResult) => acc + (test.cosine_sim || 0), 0);
const total_bleu = testResults.reduce((acc: number, test: TestResult) => acc + (test.bleu_score || 0), 0);

const data = testResults.map((test) => ({
question: test.question,
human_answer: test.human_answer,
answer: test.answer,
documents: test.test_question?.documents
?.map((document) => document.title + " : " + document.file)
.join(" ; "),
cosine_sim: test.cosine_sim,
bleu_score: test.bleu_score,
feedback: test.feedback
?.map(
(feedback) =>
`(${feedback.created_at}) ${feedback.user_object.username}: [${feedback.rating}] ${feedback.notes}`
)
.join(" , "),
question: test.question,
human_answer: test.human_answer,
answer: test.answer,
documents: test.test_question?.documents
?.map((document) => document.title + " : " + document.file)
.join(" ; "),
cosine_sim: test.cosine_sim,
bleu_score: test.bleu_score,
feedback: test.feedback
?.map(
(feedback) =>
`(${feedback.created_at}) ${feedback.user_object.username}: [${feedback.rating}] ${feedback.notes}`
)
.join(" , "),
}));

let csv = json2csv.parse(data, { fields });
Expand Down Expand Up @@ -235,22 +236,33 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
<Button variant="secondary" className="bg-gray-100" onClick={() => { router.push(`/admin/tests/${testsuite_id}/`) }}>Back</Button>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 border border-gray-300 bg-white p-4 rounded-lg my-4">
<div>
<div className="flex flex-col justify-end">
<div>Project: <span className="font-bold">{testRun?.project_object.title}</span></div>
<div>References: <span className={`font-bold ${testRun?.references ? "text-green-500" : "text-red-500"}`}>{testRun?.references ? "ENABLED" : "DISABLED"}</span></div>
<div>Total Questions: <span className="font-bold">{testRun?.test_results?.length}</span></div>
<div>Failed Questions: <span className="font-bold">{testRun?.test_results?.filter((test: TestResult) => test.answer.length === 0).length}</span></div>
<div>Average Cosine Similarity: <span className={`font-bold ${avgCosineSim < 0.5 ? 'text-red-500' : 'text-green-500'}`}>{avgCosineSim.toFixed(3)}</span></div>
<div className="border border-gray-300 bg-white p-4 rounded-lg my-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<div className="flex flex-col justify-end">
<div>Project: <span className="font-bold">{testRun?.project_object.title}</span></div>
<div>References: <span className={`font-bold ${testRun?.references ? "text-green-500" : "text-red-500"}`}>{testRun?.references ? "ENABLED" : "DISABLED"}</span></div>
<div>Total Questions: <span className="font-bold">{testRun?.test_results?.length}</span></div>
<div>Failed Questions: <span className="font-bold">{testRun?.test_results?.filter((test: TestResult) => test.answer.length === 0).length}</span></div>
<div>Average Cosine Similarity: <span className={`font-bold ${avgCosineSim < 0.5 ? 'text-red-500' : 'text-green-500'}`}>{avgCosineSim.toFixed(3)}</span></div>
</div>
</div>
<div>
<div className="flex flex-col justify-end">
<div>Start Time: <span className="font-bold">{formatDate(testRun?.created_at)}</span></div>
<div>End Time: <span className="font-bold">{formatDate(testRun?.modified_at)}</span></div>
<div>Total Time: <span className="font-bold">{dateDifferenceInHHMMSS(testRun?.created_at, testRun?.modified_at)}</span></div>
<div>Average BLEU Score: <span className={`font-bold ${avgBleu < 0.5 ? 'text-red-500' : 'text-green-500'}`}>{avgBleu.toFixed(3)}</span></div>
</div>
</div>
</div>
<div>
<div className="flex flex-col justify-end">
<div>Start Time: <span className="font-bold">{formatDate(testRun?.created_at)}</span></div>
<div>End Time: <span className="font-bold">{formatDate(testRun?.modified_at)}</span></div>
<div>Total Time: <span className="font-bold">{dateDifferenceInHHMMSS(testRun?.created_at, testRun?.modified_at)}</span></div>
<div>Average BLEU Score: <span className={`font-bold ${avgBleu < 0.5 ? 'text-red-500' : 'text-green-500'}`}>{avgBleu.toFixed(3)}</span></div>
<div className="mt-4">
<b className="text-xs text-gray-500">
Prompt:
</b>
<br />
<div className="whitespace-pre-line">
{testRun?.project_object.prompt}
</div>
</div>
</div>
Expand Down Expand Up @@ -298,9 +310,9 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
</div>
</div></>) : (<div className="sm:col-span-5 justify-center items-center flex"><Loading /></div>)}
</div>
{testRun?.test_results?.map((test: TestResult) => (
{testRun?.test_results?.map((test: TestResult, index) => (
<div key={test.external_id} className="bg-white rounded-lg border-gray-200 border p-6 my-4">
<h3 className="text-lg font-bold text-center mb-2">{test.question}</h3>
<h3 className="text-lg font-bold text-center mb-2">Q{index + 1}. {test.question}</h3>
<div className="border-b border-gray-200 my-4"></div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
Expand Down Expand Up @@ -340,22 +352,27 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
</div>
<div className="border-b border-gray-200 my-4"></div>
{test.test_question?.documents?.map((document) => (
<div
className="flex items-center mb-2 border border-gray-300 rounded-lg bg-white"
key={document.external_id}
>
<a
href={document.file}
target="_blank"
key={document.external_id}
className="flex-grow flex items-center hover:bg-slate-200 py-1 px-3 rounded-md"
<div
className="flex items-center mb-2 border border-gray-300 rounded-lg bg-white"
key={document.external_id}
>
<i className="fas fa-paperclip mr-2 text-gray-600" data-html2canvas-ignore="true"></i>
<span className="text-gray-700">
{document.title}
</span>
</a>
</div>
<Link
href={document.file}
target="_blank"
key={document.external_id}
className="flex-grow flex items-center hover:bg-slate-200 py-1 px-3 rounded-md justify-between"
>
<div className="flex items-center justify-center">
<i className="fas fa-paperclip mr-2 text-gray-600"></i>
<div className="text-gray-700">
{document.title}
</div>
</div>
<div className="w-1/2">
<img src={document.file.split("?")[0] + '?r=' + Math.floor(Math.random() * 100000)} alt="File" className="w-full" crossOrigin="anonymous" />
</div>
</Link>
</div>
))}
<div className="border-b border-gray-200 my-4"></div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2">
Expand Down Expand Up @@ -406,6 +423,15 @@ export default function Page({ params }: { params: { testsuite_id: string, testr
</div>
</div>
</div>
<div className="mt-4">
{test.feedback && test.feedback.map((feedback, i) => (
<div key={i} className="p-4 border border-gray-200 rounded-lg">
<b>{feedback.user_object.username}</b> <RatingLabel rating={feedback.rating} className="py-1 px-2 text-xs" />
<br />
{feedback.notes}
</div>
))}
</div>
</div>
))}
{feedbackTestResult && (
Expand Down
31 changes: 22 additions & 9 deletions src/components/rating.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { twMerge } from 'tailwind-merge';

interface RatingOption {
id: number;
Expand Down Expand Up @@ -26,18 +27,30 @@ const Rating = (props: { setRating: (rating: number) => void }) => {

return (
<div className="flex flex-col sm:flex-row items-center my-2 ml-2 justify-center">
{ratingOptions.map((option) => (
<span
{ratingOptions.map((option) =>
<RatingLabel
key={option.id}
className={`mt-2 sm:mt-0 inline-block rounded-full px-3 py-1 mr-2 font-semibold ${option.hovercolor} hover:text-white cursor-pointer ${selectedRating === option.id ? `${option.bgcolor} border border-2 border-black text-white` : 'bg-slate-200 text-gray-700'
}`}
rating={option.id}
onClick={() => handleSelectRating(option.id)}
>
{option.label}
</span>
))}
deselected={selectedRating !== option.id}
/>)}
</div>
);
};

export default Rating;
export default Rating;

export function RatingLabel(props: { rating: number, onClick?: () => void, deselected?: boolean, className?: string }) {

const { rating, onClick, deselected, className } = props;
const option = ratingOptions.find((option) => option.id === rating);

return (
<button
className={twMerge(`mt-2 sm:mt-0 inline-block rounded-full px-3 py-1 mr-2 font-semibold ${option?.hovercolor} hover:text-white cursor-pointer ${option?.bgcolor} text-white ${deselected ? "opacity-20" : ""}`, className)}
onClick={onClick}
>
{option?.label}
</button>
)
}
Loading

1 comment on commit a8e21c2

@vercel
Copy link

@vercel vercel bot commented on a8e21c2 Oct 20, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ayushma-fe – ./

ayushma-fe-ohcnetwork.vercel.app
ayushma-fe-git-master-ohcnetwork.vercel.app
ayushma.ohc.network
ayushma-fe.vercel.app

Please sign in to comment.