Skip to content

Commit 1159eae

Browse files
author
Dylan Huang
committed
Refactor Row component to use MetadataSection for displaying Evaluation Result and Ground Truth, improving code readability and maintainability.
1 parent 6a04326 commit 1159eae

File tree

1 file changed

+10
-83
lines changed

1 file changed

+10
-83
lines changed

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

Lines changed: 10 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -102,90 +102,17 @@ export const Row = observer(
102102
Metadata
103103
</h4>
104104

105-
{/* Evaluation Result - Most Important */}
106-
{row.evaluation_result && (
107-
<div className="mb-4">
108-
<h5 className="font-semibold text-sm text-gray-700 mb-2">
109-
Evaluation Result
110-
</h5>
111-
<div className="bg-gray-50 border border-gray-200 p-3 text-xs">
112-
<div className="grid grid-cols-2 gap-3 mb-3">
113-
<div>
114-
<span className="font-semibold text-gray-600">
115-
Score:
116-
</span>{" "}
117-
<span
118-
className={`font-mono text-sm ${
119-
row.evaluation_result.score >= 0.8
120-
? "text-green-700"
121-
: row.evaluation_result.score >= 0.6
122-
? "text-yellow-700"
123-
: "text-red-700"
124-
}`}
125-
>
126-
{row.evaluation_result.score}
127-
</span>
128-
</div>
129-
<div>
130-
<span className="font-semibold text-gray-600">
131-
Valid:
132-
</span>{" "}
133-
<span
134-
className={
135-
row.evaluation_result.is_score_valid
136-
? "text-green-700"
137-
: "text-red-700"
138-
}
139-
>
140-
{row.evaluation_result.is_score_valid
141-
? "Yes"
142-
: "No"}
143-
</span>
144-
</div>
145-
</div>
146-
{row.evaluation_result.reason && (
147-
<div className="mb-3 p-3 bg-white border border-gray-200">
148-
<span className="font-semibold text-gray-600">
149-
Reason:
150-
</span>{" "}
151-
<span className="text-gray-900">
152-
{row.evaluation_result.reason}
153-
</span>
154-
</div>
155-
)}
156-
{row.evaluation_result.metrics &&
157-
Object.keys(row.evaluation_result.metrics).length >
158-
0 && (
159-
<div>
160-
<span className="font-semibold text-gray-600">
161-
Metrics:
162-
</span>
163-
<pre className="mt-2 p-3 bg-white border border-gray-200 whitespace-pre-wrap overflow-x-auto text-xs">
164-
{JSON.stringify(
165-
row.evaluation_result.metrics,
166-
null,
167-
1
168-
)}
169-
</pre>
170-
</div>
171-
)}
172-
</div>
173-
</div>
174-
)}
105+
{/* Evaluation Result */}
106+
<MetadataSection
107+
title="Evaluation Result"
108+
data={row.evaluation_result}
109+
/>
175110

176-
{/* Ground Truth - Secondary Importance */}
177-
{row.ground_truth && (
178-
<div className="mb-3">
179-
<h5 className="font-semibold text-xs text-gray-700 mb-1">
180-
Ground Truth
181-
</h5>
182-
<div className="bg-gray-50 border border-gray-200 p-2 text-xs">
183-
<div className="whitespace-pre-wrap text-gray-900">
184-
{row.ground_truth}
185-
</div>
186-
</div>
187-
</div>
188-
)}
111+
{/* Ground Truth */}
112+
<MetadataSection
113+
title="Ground Truth"
114+
data={row.ground_truth}
115+
/>
189116

190117
{/* Usage Stats - Compact */}
191118
{row.usage && (

0 commit comments

Comments
 (0)