Skip to content

Commit 419b9e7

Browse files
Ayush8923Ayush8923
authored
Enhance Evaluation Detail Page with Scoring Status Indicators & Resync Warning (#94)
2 parents 5033825 + 76f7276 commit 419b9e7

File tree

11 files changed

+256
-148
lines changed

11 files changed

+256
-148
lines changed

‎app/(routes)/evaluations/[id]/page.tsx‎

Lines changed: 73 additions & 147 deletions
Large diffs are not rendered by default.

‎app/(routes)/evaluations/page.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ function SimplifiedEvalContent() {
5353

5454
// Stored datasets
5555
const [storedDatasets, setStoredDatasets] = useState<Dataset[]>([]);
56+
const [isDatasetsLoading, setIsDatasetsLoading] = useState(false);
5657

5758
// Evaluation config state
5859
const [selectedDatasetId, setSelectedDatasetId] = useState<string>(() => {
@@ -86,6 +87,7 @@ function SimplifiedEvalContent() {
8687
console.error("No selected API key found for loading datasets");
8788
return;
8889
}
90+
setIsDatasetsLoading(true);
8991
try {
9092
const response = await fetch("/api/evaluations/datasets", {
9193
method: "GET",
@@ -96,6 +98,8 @@ function SimplifiedEvalContent() {
9698
setStoredDatasets(Array.isArray(data) ? data : data.data || []);
9799
} catch (e) {
98100
console.error("Failed to load datasets:", e);
101+
} finally {
102+
setIsDatasetsLoading(false);
99103
}
100104
}, [apiKeys, selectedKeyId]);
101105

@@ -426,6 +430,7 @@ function SimplifiedEvalContent() {
426430
setUploadedFile(null);
427431
}}
428432
storedDatasets={storedDatasets}
433+
isDatasetsLoading={isDatasetsLoading}
429434
apiKeys={apiKeys}
430435
selectedKeyId={selectedKeyId}
431436
loadStoredDatasets={loadStoredDatasets}

‎app/components/evaluations/DatasetsTab.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { APIKey } from "@/app/lib/types/credentials";
66
import { Dataset } from "@/app/(routes)/datasets/page";
77
import { useToast } from "@/app/components/Toast";
88
import EvalDatasetDescription from "./EvalDatasetDescription";
9+
import Loader from "@/app/components/Loader";
910

1011
export interface DatasetsTabProps {
1112
leftPanelWidth: number;
@@ -22,6 +23,7 @@ export interface DatasetsTabProps {
2223
handleCreateDataset: () => void;
2324
resetForm: () => void;
2425
storedDatasets: Dataset[];
26+
isDatasetsLoading: boolean;
2527
apiKeys: APIKey[];
2628
selectedKeyId: string;
2729
loadStoredDatasets: () => void;
@@ -43,6 +45,7 @@ export default function DatasetsTab({
4345
handleCreateDataset,
4446
resetForm,
4547
storedDatasets,
48+
isDatasetsLoading,
4649
apiKeys,
4750
selectedKeyId,
4851
loadStoredDatasets,
@@ -559,7 +562,11 @@ export default function DatasetsTab({
559562
</h3>
560563
</div>
561564

562-
{storedDatasets.length === 0 ? (
565+
{isDatasetsLoading ? (
566+
<div className="p-16 flex justify-center">
567+
<Loader size="md" message="Loading datasets..." />
568+
</div>
569+
) : storedDatasets.length === 0 ? (
563570
<div className="p-16 text-center">
564571
<svg
565572
className="w-12 h-12 mx-auto mb-3"

‎app/components/icons/evaluations/ChevronLeftIcon.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function ChevronLeftIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={`w-5 h-5 ${className ?? ""}`}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
17+
</svg>
18+
);
19+
}

‎app/components/icons/evaluations/DatabaseIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function DatabaseIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={`w-3.5 h-3.5 ${className ?? ""}`}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
20+
/>
21+
</svg>
22+
);
23+
}

‎app/components/icons/evaluations/GroupIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function GroupIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={`w-3.5 h-3.5 ${className ?? ""}`}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
20+
/>
21+
</svg>
22+
);
23+
}

‎app/components/icons/evaluations/MenuIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function MenuIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={className ?? "w-5 h-5"}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
d="M4 6h16M4 12h16M4 18h16"
20+
/>
21+
</svg>
22+
);
23+
}

‎app/components/icons/evaluations/RefreshIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function RefreshIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={`w-3.5 h-3.5 ${className ?? ""}`}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
20+
/>
21+
</svg>
22+
);
23+
}

‎app/components/icons/evaluations/WarningTriangleIcon.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface IconProps {
2+
className?: string;
3+
style?: React.CSSProperties;
4+
}
5+
6+
export default function WarningTriangleIcon({ className, style }: IconProps) {
7+
return (
8+
<svg
9+
className={`w-3.5 h-3.5 ${className ?? ""}`}
10+
fill="none"
11+
viewBox="0 0 24 24"
12+
stroke="currentColor"
13+
strokeWidth={2}
14+
style={style}
15+
>
16+
<path
17+
strokeLinecap="round"
18+
strokeLinejoin="round"
19+
d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"
20+
/>
21+
</svg>
22+
);
23+
}

‎app/components/icons/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
// Evaluations Icons
22
export { default as ChevronUpIcon } from "./evaluations/ChevronUpIcon";
33
export { default as ChevronDownIcon } from "./evaluations/ChevronDownIcon";
4+
export { default as ChevronLeftIcon } from "./evaluations/ChevronLeftIcon";
45
export { default as EditIcon } from "./evaluations/EditIcon";
56
export { default as GearIcon } from "./evaluations/GearIcon";
67
export { default as CheckIcon } from "./evaluations/CheckIcon";
8+
export { default as WarningTriangleIcon } from "./evaluations/WarningTriangleIcon";
9+
export { default as MenuIcon } from "./evaluations/MenuIcon";
10+
export { default as DatabaseIcon } from "./evaluations/DatabaseIcon";
11+
export { default as GroupIcon } from "./evaluations/GroupIcon";
12+
export { default as RefreshIcon } from "./evaluations/RefreshIcon";

0 commit comments

Comments
 (0)