Skip to content
Snippets Groups Projects
Commit a1bd286c authored by ali asaria's avatar ali asaria
Browse files

Add checkboxes to the Evals page -- will be used for compare

We add checkboxes to the Eval page. Later on we can use this feature to allow us to select multiple evals and compare them.
parent 0aec5542
Branches add/checkboxes-in-evals-page
Tags
No related merge requests found
...@@ -8,6 +8,7 @@ import { ...@@ -8,6 +8,7 @@ import {
Table, Table,
Typography, Typography,
Link, Link,
Checkbox,
} from '@mui/joy'; } from '@mui/joy';
import { import {
ChartColumnBigIcon, ChartColumnBigIcon,
...@@ -89,6 +90,7 @@ function RenderScore({ score }) { ...@@ -89,6 +90,7 @@ function RenderScore({ score }) {
} }
const EvalJobsTable = () => { const EvalJobsTable = () => {
const [selected, setSelected] = useState<readonly string[]>([]);
const [viewOutputFromJob, setViewOutputFromJob] = useState(-1); const [viewOutputFromJob, setViewOutputFromJob] = useState(-1);
const [openCSVModal, setOpenCSVModal] = useState(false); const [openCSVModal, setOpenCSVModal] = useState(false);
const [openPlotModal, setOpenPlotModal] = useState(false); const [openPlotModal, setOpenPlotModal] = useState(false);
...@@ -149,11 +151,53 @@ const EvalJobsTable = () => { ...@@ -149,11 +151,53 @@ const EvalJobsTable = () => {
setFileName={setFileNameForDetailedReport} setFileName={setFileNameForDetailedReport}
fileName={fileNameForDetailedReport} fileName={fileNameForDetailedReport}
/> />
<Typography level="h3">Executions</Typography> <Box
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'baseline',
}}
>
<Typography level="h3">Executions</Typography>
{selected.length > 1 && (
<Typography
level="body-sm"
startDecorator={<ChartColumnIncreasingIcon size="20px" />}
onClick={() => {
alert('this feature coming soon');
}}
sx={{ cursor: 'pointer' }}
>
<>Compare Selected Evals</>
</Typography>
)}
</Box>
<Sheet sx={{ overflowY: 'scroll' }}> <Sheet sx={{ overflowY: 'scroll' }}>
<Table stickyHeader> <Table stickyHeader>
<thead> <thead>
<tr> <tr>
<th
style={{ width: 48, textAlign: 'center', padding: '6px 6px' }}
>
<Checkbox
size="sm"
indeterminate={
selected.length > 0 && selected.length !== jobs.length
}
checked={selected.length === jobs.length}
onChange={(event) => {
setSelected(
event.target.checked ? jobs.map((row) => row.id) : []
);
}}
color={
selected.length > 0 || selected.length === jobs.length
? 'primary'
: undefined
}
sx={{ verticalAlign: 'text-bottom' }}
/>
</th>
<th width="50px">Id</th> <th width="50px">Id</th>
<th>Eval</th> <th>Eval</th>
<th>Progress</th> <th>Progress</th>
...@@ -164,6 +208,24 @@ const EvalJobsTable = () => { ...@@ -164,6 +208,24 @@ const EvalJobsTable = () => {
<tbody> <tbody>
{jobs?.map((job) => ( {jobs?.map((job) => (
<tr key={job.id}> <tr key={job.id}>
<td style={{ textAlign: 'center', width: 120 }}>
<Checkbox
size="sm"
checked={selected.includes(job?.id)}
color={selected.includes(job?.id) ? 'primary' : undefined}
onChange={(event) => {
setSelected((ids) =>
event.target.checked
? ids.concat(job?.id)
: ids.filter((itemId) => itemId !== job?.id)
);
}}
slotProps={{
checkbox: { sx: { textAlign: 'left' } },
}}
sx={{ verticalAlign: 'text-bottom' }}
/>
</td>
<td>{job.id}</td> <td>{job.id}</td>
<td> <td>
<Typography level="title-md"> <Typography level="title-md">
...@@ -179,7 +241,6 @@ const EvalJobsTable = () => { ...@@ -179,7 +241,6 @@ const EvalJobsTable = () => {
<td> <td>
<JobProgress job={job} /> <JobProgress job={job} />
</td> </td>
<td> <td>
<RenderScore score={job?.job_data?.score} /> <RenderScore score={job?.job_data?.score} />
{job?.job_data?.additional_output_path && {job?.job_data?.additional_output_path &&
...@@ -219,7 +280,6 @@ const EvalJobsTable = () => { ...@@ -219,7 +280,6 @@ const EvalJobsTable = () => {
</Link> </Link>
)} )}
</td> </td>
<td> <td>
<ButtonGroup <ButtonGroup
variant="soft" variant="soft"
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment