Skip to content

Commit

Permalink
Add progress bar to Evaluation Management
Browse files Browse the repository at this point in the history
  • Loading branch information
@DominikRemo
DominikRemo committed Oct 27, 2024
1 parent 141ec5d commit 77f8432
Show file tree
Hide file tree
Showing 6 changed files with 562 additions and 446 deletions.
2 changes: 1 addition & 1 deletion ...ound/src/components/view_mode/evaluation_mode/expert_evaluation/evaluation_management.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export default function EvaluationManagement() {
});

const startEvaluation = () => {
if (confirm("Are you sure you want to start the evaluation? Once started, no further changes can be made to the configuration!")) {
if (confirm("Are you sure you want to start the evaluation? Once started, you can add new expert links but no other changes can be made to the configuration!")) {
updateSelectedConfig({ started: true });
}
};
Expand Down
156 changes: 100 additions & 56 deletions playground/src/components/view_mode/evaluation_mode/expert_evaluation/expert_links.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCopy, faTrash, faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import baseUrl from "@/helpers/base_url"; // Import the base URL
import React, { useEffect, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck, faCopy, faPlus, faSyncAlt, faTrash } from '@fortawesome/free-solid-svg-icons';
import baseUrl from '@/helpers/base_url';
import { fetchExpertEvaluationProgressStats } from '@/hooks/playground/expert_evaluation_progress_stats';

type ExpertLinksProps = {
expertIds: string[];
Expand All @@ -11,79 +12,122 @@ type ExpertLinksProps = {
configId: string;
};

export default function ExpertLinks({ expertIds, setExpertIds, started, configId }: ExpertLinksProps) {
export default function ExpertLinks(props: ExpertLinksProps) {
const { expertIds, setExpertIds, started, configId } = props;
const [copiedLink, setCopiedLink] = useState<string | null>(null);
const [progressStats, setProgressStats] = useState<Record<string, number> | null>(null);
const [loading, setLoading] = useState(false);

// Add a new expert ID
const addExpertId = () => {
const newExpertId = uuidv4();
setExpertIds([...expertIds, newExpertId]);
// Fetch progress stats with a minimum delay for feedback
const updateProgressStats = async () => {
setLoading(true);
const minimumDelay = new Promise((resolve) => setTimeout(resolve, 1000));
try {
const statsPromise = fetchExpertEvaluationProgressStats(configId);
const [stats] = await Promise.all([statsPromise, minimumDelay]);
setProgressStats(stats);
} catch (error) {
console.error('Failed to fetch progress stats:', error);
} finally {
setLoading(false);
}
};

// Copy the link to the clipboard
useEffect(() => {
if (started) updateProgressStats();
}, [configId, started]);

const addExpertId = () => setExpertIds([...expertIds, uuidv4()]);

const copyLink = (link: string) => {
navigator.clipboard.writeText(link);
setCopiedLink(link);
setTimeout(() => setCopiedLink(null), 2000);
};

// Delete an expert ID
const deleteExpertId = (id: string) => {
setExpertIds(expertIds.filter((expertId) => expertId !== id));
};
const deleteExpertId = (id: string) => setExpertIds(expertIds.filter((expertId) => expertId !== id));

return (
<section className="flex flex-col">
<div className="flex justify-between items-center mb-2">
<span className="text-lg font-bold">Expert Links</span>

{/* Add New Expert Button */}
<button
className="bg-green-500 text-white rounded-md p-2 hover:bg-green-600 flex items-center gap-2"
onClick={addExpertId}
>
<FontAwesomeIcon icon={faPlus}/>
Add New Expert
</button>
{/* Add New Expert and Conditional Update Stats Button */}
<div className="flex gap-2">
<button
className="bg-green-500 text-white rounded-md p-2 hover:bg-green-600 flex items-center gap-2"
onClick={addExpertId}
>
<FontAwesomeIcon icon={faPlus} />
Add New Expert
</button>
{started && (
<button
className="bg-blue-500 text-white rounded-md p-2 hover:bg-blue-600 flex items-center gap-2"
onClick={updateProgressStats}
disabled={loading}
>
<FontAwesomeIcon icon={faSyncAlt} spin={loading} />
Update Progress
</button>
)}
</div>
</div>

{/* List of Expert Links */}
<ul className="space-y-2">
{expertIds.map((expertId) => {
const expertLink = `${window.location.origin}${baseUrl}/${configId}/${expertId}/expert_view`;

return (
<li key={expertId} className="flex justify-between items-center border p-2 rounded-md shadow-sm">
<a href={expertLink} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
{expertLink}
</a>
{expertIds.length ? (
expertIds.map((expertId) => {
const expertLink = `${window.location.origin}${baseUrl}/${configId}/${expertId}/expert_view`;
const completed = progressStats?.[expertId] ?? 0;
const total = progressStats?.totalSubmissions ?? 0;
const progressPercentage = total ? (completed / total) * 100 : 0;

<div className="flex space-x-2">
{/* Copy Link Button */}
<button
className="bg-blue-500 text-white rounded-md p-2 hover:bg-blue-600"
onClick={() => copyLink(expertLink)}
title="Copy Link"
>
<FontAwesomeIcon icon={copiedLink === expertLink ? faCheck : faCopy} />
</button>
return (
<li key={expertId} className="flex flex-col border p-2 rounded-md shadow-sm space-y-1">
<div className="flex justify-between items-center">
<a href={expertLink} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
{expertLink}
</a>
<div className="flex space-x-2">
{/* Copy Link Button */}
<button
className="bg-blue-500 text-white rounded-md p-2 hover:bg-blue-600"
onClick={() => copyLink(expertLink)}
title="Copy Link"
>
<FontAwesomeIcon icon={copiedLink === expertLink ? faCheck : faCopy} />
</button>
{/* Delete Button */}
{!started && (
<button
className="bg-red-500 text-white rounded-md p-2 hover:bg-red-600"
onClick={() => deleteExpertId(expertId)}
title="Delete Link"
>
<FontAwesomeIcon icon={faTrash} />
</button>
)}
</div>
</div>

{/* Delete Button */}
{!started && (
<button
className="bg-red-500 text-white rounded-md p-2 hover:bg-red-600"
onClick={() => deleteExpertId(expertId)}
title="Delete Link"
>
<FontAwesomeIcon icon={faTrash} />
</button>
{/* Progress Bar */}
{started && (
<>
<div className="relative w-full bg-gray-300 h-2 rounded mt-1">
<div className="bg-blue-500 h-2 rounded" style={{ width: `${progressPercentage}%` }} />
</div>
<span className="text-sm text-gray-700">
{completed} / {total} completed
</span>
</>
)}
</div>
</li>
);
})}
{expertIds.length === 0 && <li className="border p-2 rounded-md shadow-sm bg-gray-50 text-center">No expert links added</li>}
</li>
);
})
) : (
<li className="border p-2 rounded-md shadow-sm bg-gray-50 text-center">No expert links added</li>
)}
</ul>
</section>
);
}
}
Loading

0 comments on commit 77f8432

Please sign in to comment.