Skip to content

Commit 81fc0fc

Browse files
dphuang2dphuang2
committed
use table
1 parent 50e9967 commit 81fc0fc

File tree

2 files changed

+263
-228
lines changed

2 files changed

+263
-228
lines changed

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

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -53,50 +53,72 @@ const Dashboard = observer(({ onRefresh }: DashboardProps) => {
5353
<h2 className="text-sm font-semibold text-gray-900 mb-2">
5454
Dataset Summary
5555
</h2>
56-
<div className="grid grid-cols-4 gap-4 text-xs">
57-
<div>
58-
<span className="font-semibold text-gray-700">Total Rows:</span>{" "}
59-
{state.dataset.length}
60-
</div>
61-
<div>
62-
<span className="font-semibold text-gray-700">Avg Score:</span>{" "}
63-
{state.dataset.length > 0
64-
? (
65-
state.dataset.reduce(
66-
(sum, row) => sum + (row.evaluation_result?.score || 0),
67-
0
68-
) / state.dataset.length
69-
).toFixed(3)
70-
: "N/A"}
71-
</div>
72-
<div>
73-
<span className="font-semibold text-gray-700">Total Messages:</span>{" "}
74-
{state.dataset.reduce((sum, row) => sum + row.messages.length, 0)}
75-
</div>
76-
</div>
56+
<table className="w-full text-xs">
57+
<tbody>
58+
<tr>
59+
<td className="pr-4">
60+
<span className="font-semibold text-gray-700">Total Rows:</span>{" "}
61+
{state.dataset.length}
62+
</td>
63+
<td className="pr-4">
64+
<span className="font-semibold text-gray-700">Avg Score:</span>{" "}
65+
{state.dataset.length > 0
66+
? (
67+
state.dataset.reduce(
68+
(sum, row) => sum + (row.evaluation_result?.score || 0),
69+
0
70+
) / state.dataset.length
71+
).toFixed(3)
72+
: "N/A"}
73+
</td>
74+
<td>
75+
<span className="font-semibold text-gray-700">
76+
Total Messages:
77+
</span>{" "}
78+
{state.dataset.reduce(
79+
(sum, row) => sum + row.messages.length,
80+
0
81+
)}
82+
</td>
83+
</tr>
84+
</tbody>
85+
</table>
7786
</div>
7887

7988
{/* Show empty state or main table */}
8089
{state.dataset.length === 0 ? (
8190
<EmptyState onRefresh={onRefresh} />
8291
) : (
8392
<div className="bg-white border border-gray-200">
84-
{/* Table Header */}
85-
<div className="bg-gray-50 px-3 py-2 border-b border-gray-200">
86-
<div className="grid grid-cols-4 gap-4 text-xs font-semibold text-gray-700">
87-
<div>Row ID</div>
88-
<div>Model</div>
89-
<div>Score</div>
90-
<div>Messages</div>
91-
</div>
92-
</div>
93+
<table className="w-full">
94+
{/* Table Header */}
95+
<thead className="bg-gray-50 border-b border-gray-200">
96+
<tr>
97+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700 w-8">
98+
{/* Expand/Collapse column */}
99+
</th>
100+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
101+
Row ID
102+
</th>
103+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
104+
Model
105+
</th>
106+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
107+
Score
108+
</th>
109+
<th className="px-3 py-2 text-left text-xs font-semibold text-gray-700">
110+
Messages
111+
</th>
112+
</tr>
113+
</thead>
93114

94-
{/* Table Rows */}
95-
<div className="divide-y divide-gray-200">
96-
{state.dataset.map((row, index) => (
97-
<Row key={index} row={row} index={index} />
98-
))}
99-
</div>
115+
{/* Table Body */}
116+
<tbody className="divide-y divide-gray-200">
117+
{state.dataset.map((row, index) => (
118+
<Row key={index} row={row} index={index} />
119+
))}
120+
</tbody>
121+
</table>
100122
</div>
101123
)}
102124
</div>

0 commit comments

Comments
 (0)