Skip to content

Commit 270a91e

Browse files
dphuang2dphuang2
authored
misc UI fixes (#274)
* Implement drag detection in TableRowInteractive to prevent click events during text selection * Refactor EvaluationRow and EvaluationTable components for improved layout and data display - Moved Model and Score columns in EvaluationRow for better visibility of evaluation metrics. - Sticky table headers * vite build
1 parent a101b3f commit 270a91e

File tree

8 files changed

+100
-66
lines changed

8 files changed

+100
-66
lines changed

‎vite-app/dist/assets/index-34WaHH5W.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎vite-app/dist/assets/index-BGlGI2LH.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

vite-app/dist/assets/index-DOPsfOMT.js renamed to vite-app/dist/assets/index-zf20-zFD.js

Lines changed: 25 additions & 25 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

vite-app/dist/assets/index-DOPsfOMT.js.map renamed to vite-app/dist/assets/index-zf20-zFD.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vite-app/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>EP | Log Viewer</title>
77
<link rel="icon" href="/assets/favicon-BkAAWQga.png" />
8-
<script type="module" crossorigin src="/assets/index-DOPsfOMT.js"></script>
9-
<link rel="stylesheet" crossorigin href="/assets/index-34WaHH5W.css">
8+
<script type="module" crossorigin src="/assets/index-zf20-zFD.js"></script>
9+
<link rel="stylesheet" crossorigin href="/assets/index-BGlGI2LH.css">
1010
</head>
1111
<body>
1212
<div id="root"></div>

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,16 @@ export const EvaluationRow = observer(
432432
/>
433433
</TableCell>
434434

435+
{/* Model */}
436+
<TableCell className="py-3 text-xs">
437+
<RowModel model={row.input_metadata.completion_params.model} />
438+
</TableCell>
439+
440+
{/* Score */}
441+
<TableCell className="py-3 text-xs">
442+
<RowScore score={row.evaluation_result?.score} />
443+
</TableCell>
444+
435445
{/* Invocation ID */}
436446
<TableCell className="py-3 text-xs">
437447
<InvocationId
@@ -460,16 +470,6 @@ export const EvaluationRow = observer(
460470
<TableCell className="py-3 text-xs">
461471
<RolloutId rolloutId={row.execution_metadata?.rollout_id} />
462472
</TableCell>
463-
464-
{/* Model */}
465-
<TableCell className="py-3 text-xs">
466-
<RowModel model={row.input_metadata.completion_params.model} />
467-
</TableCell>
468-
469-
{/* Score */}
470-
<TableCell className="py-3 text-xs">
471-
<RowScore score={row.evaluation_result?.score} />
472-
</TableCell>
473473
</TableRowInteractive>
474474

475475
{/* Expanded Content Row */}

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

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Select from "./Select";
66
import FilterSelector from "./FilterSelector";
77
import {
88
TableHeader,
9-
TableHead,
109
TableBody as TableBodyBase,
1110
SortableTableHeader,
1211
} from "./TableContainer";
@@ -159,11 +158,11 @@ export const EvaluationTable = observer(() => {
159158
</Button>
160159
</div>
161160
) : (
162-
<div className="overflow-x-auto">
163-
<table className="w-full min-w-max">
161+
<div className="max-h-[calc(100vh-80px)] overflow-auto">
162+
<table className="text-nowrap">
164163
{/* Table Header */}
165-
<TableHead>
166-
<tr>
164+
<thead>
165+
<tr className="bg-gray-50 sticky top-0 z-10">
167166
<TableHeader className="w-8">&nbsp;</TableHeader>
168167
<SortableTableHeader
169168
sortField="created_at"
@@ -198,63 +197,63 @@ export const EvaluationTable = observer(() => {
198197
Rollout Status
199198
</SortableTableHeader>
200199
<SortableTableHeader
201-
sortField="$.execution_metadata.invocation_id"
200+
sortField="$.input_metadata.completion_params.model"
202201
currentSortField={state.sortField}
203202
currentSortDirection={state.sortDirection}
204203
onSort={handleSort}
205204
>
206-
Invocation ID
205+
Model
207206
</SortableTableHeader>
208207
<SortableTableHeader
209-
sortField="$.execution_metadata.experiment_id"
208+
sortField="$.evaluation_result.score"
210209
currentSortField={state.sortField}
211210
currentSortDirection={state.sortDirection}
212211
onSort={handleSort}
213212
>
214-
Experiment ID
213+
Score
215214
</SortableTableHeader>
216215
<SortableTableHeader
217-
sortField="$.execution_metadata.run_id"
216+
sortField="$.execution_metadata.invocation_id"
218217
currentSortField={state.sortField}
219218
currentSortDirection={state.sortDirection}
220219
onSort={handleSort}
221220
>
222-
Run ID
221+
Invocation ID
223222
</SortableTableHeader>
224223
<SortableTableHeader
225-
sortField="$.input_metadata.row_id"
224+
sortField="$.execution_metadata.experiment_id"
226225
currentSortField={state.sortField}
227226
currentSortDirection={state.sortDirection}
228227
onSort={handleSort}
229228
>
230-
Row ID
229+
Experiment ID
231230
</SortableTableHeader>
232231
<SortableTableHeader
233-
sortField="$.execution_metadata.rollout_id"
232+
sortField="$.execution_metadata.run_id"
234233
currentSortField={state.sortField}
235234
currentSortDirection={state.sortDirection}
236235
onSort={handleSort}
237236
>
238-
Rollout ID
237+
Run ID
239238
</SortableTableHeader>
240239
<SortableTableHeader
241-
sortField="$.input_metadata.completion_params.model"
240+
sortField="$.input_metadata.row_id"
242241
currentSortField={state.sortField}
243242
currentSortDirection={state.sortDirection}
244243
onSort={handleSort}
245244
>
246-
Model
245+
Row ID
247246
</SortableTableHeader>
248247
<SortableTableHeader
249-
sortField="$.evaluation_result.score"
248+
sortField="$.execution_metadata.rollout_id"
250249
currentSortField={state.sortField}
251250
currentSortDirection={state.sortDirection}
252251
onSort={handleSort}
253252
>
254-
Score
253+
Rollout ID
255254
</SortableTableHeader>
256255
</tr>
257-
</TableHead>
256+
</thead>
258257

259258
{/* Table Body */}
260259
<TableBody

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

Lines changed: 42 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -197,11 +197,13 @@ export function TableHeader({
197197

198198
return (
199199
<th
200-
className={`px-3 py-2 text-xs font-semibold text-gray-700 ${
201-
alignClasses[align]
202-
} ${nowrap ? "whitespace-nowrap" : ""} ${className}`}
200+
className={`text-xs font-semibold text-gray-700 ${alignClasses[align]} ${
201+
nowrap ? "whitespace-nowrap" : ""
202+
} ${className}`}
203203
>
204-
{children}
204+
<div className="bg-gray-50 px-3 py-2 border-b border-gray-200">
205+
{children}
206+
</div>
205207
</th>
206208
);
207209
}
@@ -274,13 +276,13 @@ export function SortableTableHeader({
274276

275277
return (
276278
<th
277-
className={`px-3 py-2 text-xs font-semibold text-gray-700 cursor-pointer hover:bg-gray-100 transition-colors ${
279+
className={`text-xs font-semibold text-gray-700 cursor-pointer transition-colors ${
278280
alignClasses[align]
279281
} ${nowrap ? "whitespace-nowrap" : ""} ${className}`}
280282
onClick={() => onSort(sortField)}
281283
style={{ cursor: "pointer" }}
282284
>
283-
<div className="flex items-center">
285+
<div className="flex items-center px-3 py-2 bg-gray-50 border-b border-gray-200 hover:bg-gray-100 transition-colors">
284286
{children}
285287
{sortIcon}
286288
</div>
@@ -314,10 +316,43 @@ export function TableRowInteractive({
314316
? "hover:bg-gray-100 cursor-pointer"
315317
: "";
316318

319+
// Track simple drag to prevent triggering click (expand/collapse) when selecting text
320+
const mouseDownPos = React.useRef<{ x: number; y: number } | null>(null);
321+
const didDrag = React.useRef(false);
322+
323+
function handleMouseDown(e: React.MouseEvent<HTMLTableRowElement>) {
324+
mouseDownPos.current = { x: e.clientX, y: e.clientY };
325+
didDrag.current = false;
326+
}
327+
328+
function handleMouseMove(e: React.MouseEvent<HTMLTableRowElement>) {
329+
if (!mouseDownPos.current || e.buttons === 0) return;
330+
const dx = Math.abs(e.clientX - mouseDownPos.current.x);
331+
const dy = Math.abs(e.clientY - mouseDownPos.current.y);
332+
if (dx > 3 || dy > 3) didDrag.current = true;
333+
}
334+
335+
function handleMouseUp() {
336+
mouseDownPos.current = null;
337+
}
338+
339+
function handleClick(e: React.MouseEvent<HTMLTableRowElement>) {
340+
if (didDrag.current) {
341+
e.preventDefault();
342+
e.stopPropagation();
343+
didDrag.current = false;
344+
return;
345+
}
346+
onClick?.();
347+
}
348+
317349
return (
318350
<tr
319351
className={`text-sm ${interactiveClasses} ${className}`}
320-
onClick={onClick}
352+
onMouseDown={handleMouseDown}
353+
onMouseMove={handleMouseMove}
354+
onMouseUp={handleMouseUp}
355+
onClick={handleClick}
321356
>
322357
{children}
323358
</tr>

0 commit comments

Comments
 (0)