Skip to content

Commit 75934d2

Browse files
author
Dylan Huang
committed
save
1 parent 332f25b commit 75934d2

File tree

2 files changed

+61
-55
lines changed

2 files changed

+61
-55
lines changed

‎vite-app/src/components/Dashboard.tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
7171
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700 w-8">
7272
{/* Expand/Collapse column */}
7373
</th>
74+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
75+
Name
76+
</th>
77+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
78+
Status
79+
</th>
7480
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
7581
Row ID
7682
</th>
@@ -81,16 +87,23 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
8187
Score
8288
</th>
8389
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
84-
Messages
90+
Created
8591
</th>
8692
</tr>
8793
</thead>
8894

8995
{/* Table Body */}
9096
<tbody className="divide-y divide-gray-200">
91-
{state.dataset.map((row, index) => (
92-
<Row key={index} row={row} index={index} />
93-
))}
97+
{state.dataset
98+
.slice()
99+
.sort(
100+
(a, b) =>
101+
new Date(b.created_at).getTime() -
102+
new Date(a.created_at).getTime()
103+
)
104+
.map((row, index) => (
105+
<Row key={index} row={row} index={index} />
106+
))}
94107
</tbody>
95108
</table>
96109
</div>

‎vite-app/src/components/Row.tsx‎

Lines changed: 44 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { ChatInterface } from "./ChatInterface";
55
import { MetadataSection } from "./MetadataSection";
66

77
export const Row = observer(
8-
({ row, index }: { row: EvaluationRow; index: number }) => {
8+
({ row }: { row: EvaluationRow; index: number }) => {
99
const [isExpanded, setIsExpanded] = useState(false);
1010

1111
const toggleExpanded = () => setIsExpanded(!isExpanded);
@@ -50,6 +50,30 @@ export const Row = observer(
5050
)}
5151
</td>
5252

53+
{/* Name */}
54+
<td className="px-3 py-3 text-xs">
55+
<span className="text-gray-900">
56+
{row.eval_metadata?.name || "N/A"}
57+
</span>
58+
</td>
59+
60+
{/* Status */}
61+
<td className="px-3 py-3 text-xs">
62+
<span
63+
className={`px-2 py-1 rounded text-xs font-medium ${
64+
row.eval_metadata?.status === "finished"
65+
? "bg-green-100 text-green-800"
66+
: row.eval_metadata?.status === "running"
67+
? "bg-blue-100 text-blue-800"
68+
: row.eval_metadata?.status === "error"
69+
? "bg-red-100 text-red-800"
70+
: "bg-gray-100 text-gray-800"
71+
}`}
72+
>
73+
{row.eval_metadata?.status || "N/A"}
74+
</span>
75+
</td>
76+
5377
{/* Row ID */}
5478
<td className="px-3 py-3 text-xs">
5579
<span className="font-mono text-gray-900">
@@ -81,16 +105,24 @@ export const Row = observer(
81105
</span>
82106
</td>
83107

84-
{/* Messages */}
108+
{/* Created */}
85109
<td className="px-3 py-3 text-xs">
86-
<span className="text-gray-900">{row.messages.length}</span>
110+
<span className="text-gray-900">
111+
{row.created_at instanceof Date
112+
? row.created_at.toLocaleDateString() +
113+
" " +
114+
row.created_at.toLocaleTimeString()
115+
: new Date(row.created_at).toLocaleDateString() +
116+
" " +
117+
new Date(row.created_at).toLocaleTimeString()}
118+
</span>
87119
</td>
88120
</tr>
89121

90122
{/* Expanded Content Row */}
91123
{isExpanded && (
92124
<tr>
93-
<td colSpan={5} className="p-0">
125+
<td colSpan={8} className="p-0">
94126
<div className="p-4 bg-gray-50 border-t border-gray-200">
95127
<div className="flex gap-6">
96128
{/* Left Column - Chat Interface */}
@@ -102,6 +134,12 @@ export const Row = observer(
102134
Metadata
103135
</h4>
104136

137+
{/* Eval Metadata */}
138+
<MetadataSection
139+
title="Eval Metadata"
140+
data={row.eval_metadata}
141+
/>
142+
105143
{/* Evaluation Result */}
106144
<MetadataSection
107145
title="Evaluation Result"
@@ -115,41 +153,7 @@ export const Row = observer(
115153
/>
116154

117155
{/* Usage Stats - Compact */}
118-
{row.usage && (
119-
<div className="mb-2">
120-
<h5 className="font-semibold text-xs text-gray-700 mb-1">
121-
Token Usage
122-
</h5>
123-
<div className="bg-gray-50 border border-gray-200 p-2 text-xs">
124-
<div className="grid grid-cols-3 gap-2">
125-
<div>
126-
<span className="font-semibold text-gray-600">
127-
Prompt:
128-
</span>{" "}
129-
<span className="font-mono text-gray-900">
130-
{row.usage.prompt_tokens}
131-
</span>
132-
</div>
133-
<div>
134-
<span className="font-semibold text-gray-600">
135-
Completion:
136-
</span>{" "}
137-
<span className="font-mono text-gray-900">
138-
{row.usage.completion_tokens}
139-
</span>
140-
</div>
141-
<div>
142-
<span className="font-semibold text-gray-600">
143-
Total:
144-
</span>{" "}
145-
<span className="font-mono text-gray-900">
146-
{row.usage.total_tokens}
147-
</span>
148-
</div>
149-
</div>
150-
</div>
151-
</div>
152-
)}
156+
<MetadataSection title="Usage Stats" data={row.usage} />
153157

154158
{/* Input Metadata - Less Important */}
155159
<MetadataSection
@@ -158,18 +162,7 @@ export const Row = observer(
158162
/>
159163

160164
{/* Tools - Least Important */}
161-
{row.tools && row.tools.length > 0 && (
162-
<div className="mb-2">
163-
<h5 className="font-semibold text-xs text-gray-700 mb-1">
164-
Available Tools
165-
</h5>
166-
<div className="bg-gray-50 border border-gray-200 p-2 text-xs">
167-
<pre className="whitespace-pre-wrap overflow-x-auto text-gray-900">
168-
{JSON.stringify(row.tools, null, 1)}
169-
</pre>
170-
</div>
171-
</div>
172-
)}
165+
<MetadataSection title="Tools" data={row.tools} />
173166
</div>
174167
</div>
175168
</div>

0 commit comments

Comments
 (0)