From e68762e2fc1ebf80f2f10d962d93310c6b6749a3 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Tue, 4 Feb 2025 11:15:49 -0500
Subject: [PATCH] split out eval tasks into separate component
---
.../components/Experiment/Eval/Eval.tsx | 125 ++----------------
.../Experiment/Eval/EvalTasksTable.tsx | 114 ++++++++++++++++
2 files changed, 122 insertions(+), 117 deletions(-)
create mode 100644 src/renderer/components/Experiment/Eval/EvalTasksTable.tsx
diff --git a/src/renderer/components/Experiment/Eval/Eval.tsx b/src/renderer/components/Experiment/Eval/Eval.tsx
index a18e7959..bc4b55bd 100644
--- a/src/renderer/components/Experiment/Eval/Eval.tsx
+++ b/src/renderer/components/Experiment/Eval/Eval.tsx
@@ -1,5 +1,5 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
-import { useRef, useState } from 'react';
+import { useState } from 'react';
import useSWR from 'swr';
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
@@ -8,67 +8,27 @@ import Sheet from '@mui/joy/Sheet';
import {
Button,
- Table,
Typography,
Modal,
ModalDialog,
ModalClose,
- DialogTitle,
- DialogContent,
Stack,
FormControl,
FormLabel,
Input,
Option,
- Box,
- IconButton,
Dropdown,
MenuButton,
Menu,
MenuItem,
Alert,
} from '@mui/joy';
-import {
- FileTextIcon,
- PlayIcon,
- PlusCircleIcon,
- Trash2Icon,
- XSquareIcon,
-} from 'lucide-react';
+import { PlusCircleIcon } from 'lucide-react';
import { generateFriendlyName } from 'renderer/lib/utils';
import DynamicPluginForm from '../DynamicPluginForm';
import EvalJobsTable from './EvalJobsTable.tsx';
-const parseTmTheme = require('monaco-themes').parseTmTheme;
-
-function listEvals(evalString) {
- let result = [];
- if (evalString) {
- result = JSON.parse(evalString);
- }
- return result;
-}
-
-async function evaluationRun(
- experimentId: string,
- plugin: string,
- evaluator: string
-) {
- // fetch(
- // chatAPI.Endpoints.Experiment.RunEvaluation(experimentId, plugin, evaluator)
- // );
- await fetch(
- chatAPI.Endpoints.Jobs.Create(
- experimentId,
- 'EVAL',
- 'QUEUED',
- JSON.stringify({
- plugin: plugin,
- evaluator: evaluator,
- })
- )
- );
-}
+import EvalTasksTable from './EvalTasksTable';
function getTemplateParametersForPlugin(pluginName, plugins) {
if (!pluginName || !plugins) {
@@ -206,7 +166,7 @@ export default function Eval({
<Dropdown>
<MenuButton
startDecorator={<PlusCircleIcon />}
- variant="soft"
+ variant="outlined"
color="success"
sx={{ width: 'fit-content', mb: 1 }}
>
@@ -235,79 +195,10 @@ export default function Eval({
flex: 1,
}}
>
- <Table aria-label="basic table" stickyHeader>
- <thead>
- <tr>
- <th>Evaluator</th>
- <th style={{ width: '80px' }}> </th>
- <th>Tasks</th>
- <th>Plugin</th>
- <th style={{ textAlign: 'right' }}> </th>
- <th style={{ textAlign: 'right' }}> </th>
- </tr>
- </thead>
- <tbody>
- {listEvals(experimentInfo?.config?.evaluations) &&
- listEvals(experimentInfo?.config?.evaluations)?.map(
- (evaluations) => (
- <tr key={evaluations.name}>
- <td style={{ overflow: 'hidden' }}>{evaluations.name}</td>
- <td>
- {/* <Button
- variant="soft"
- onClick={() => {
- setSelectedPlugin(evaluations.plugin);
- setCurrentEvaluator(evaluations.name);
- setEditModalOpen(true);
- }}
- >
- Edit
- </Button> */}
- </td>
- <td style={{ overflow: 'hidden' }}>
- {evaluations?.script_parameters?.task}
- <FileTextIcon size={14} />
- </td>
- <td>{evaluations.plugin}</td>
- <td style={{ textAlign: 'right' }}>
- {' '}
- <Button
- startDecorator={<PlayIcon />}
- variant="soft"
- color="success"
- onClick={async () =>
- await evaluationRun(
- experimentInfo.id,
- evaluations.plugin,
- evaluations.name
- )
- }
- >
- Queue
- </Button>
- </td>
- <td style={{ textAlign: 'right' }}>
- <Stack direction="row">
- <IconButton
- onClick={async () => {
- await fetch(
- chatAPI.Endpoints.Experiment.DeleteEval(
- experimentInfo.id,
- evaluations.name
- )
- );
- experimentInfoMutate();
- }}
- >
- <Trash2Icon />
- </IconButton>
- </Stack>
- </td>
- </tr>
- )
- )}
- </tbody>
- </Table>
+ <EvalTasksTable
+ experimentInfo={experimentInfo}
+ experimentInfoMutate={experimentInfoMutate}
+ />
</Sheet>
<Sheet
sx={{
diff --git a/src/renderer/components/Experiment/Eval/EvalTasksTable.tsx b/src/renderer/components/Experiment/Eval/EvalTasksTable.tsx
new file mode 100644
index 00000000..2a493a3f
--- /dev/null
+++ b/src/renderer/components/Experiment/Eval/EvalTasksTable.tsx
@@ -0,0 +1,114 @@
+import { Button, IconButton, Stack, Table } from '@mui/joy';
+import { FileTextIcon, PlayIcon, Trash2Icon } from 'lucide-react';
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+function listEvals(evalString) {
+ let result = [];
+ if (evalString) {
+ result = JSON.parse(evalString);
+ }
+ return result;
+}
+
+async function evaluationRun(
+ experimentId: string,
+ plugin: string,
+ evaluator: string
+) {
+ // fetch(
+ // chatAPI.Endpoints.Experiment.RunEvaluation(experimentId, plugin, evaluator)
+ // );
+ await fetch(
+ chatAPI.Endpoints.Jobs.Create(
+ experimentId,
+ 'EVAL',
+ 'QUEUED',
+ JSON.stringify({
+ plugin: plugin,
+ evaluator: evaluator,
+ })
+ )
+ );
+}
+
+export default function EvalTasksTable({
+ experimentInfo,
+ experimentInfoMutate,
+}) {
+ return (
+ <>
+ <Table aria-label="basic table" stickyHeader>
+ <thead>
+ <tr>
+ <th>Evaluator</th>
+ <th style={{ width: '80px' }}> </th>
+ <th>Tasks</th>
+ <th>Plugin</th>
+ <th style={{ textAlign: 'right' }}> </th>
+ <th style={{ textAlign: 'right' }}> </th>
+ </tr>
+ </thead>
+ <tbody>
+ {listEvals(experimentInfo?.config?.evaluations) &&
+ listEvals(experimentInfo?.config?.evaluations)?.map(
+ (evaluations) => (
+ <tr key={evaluations.name}>
+ <td style={{ overflow: 'hidden' }}>{evaluations.name}</td>
+ <td>
+ {/* <Button
+ variant="soft"
+ onClick={() => {
+ setSelectedPlugin(evaluations.plugin);
+ setCurrentEvaluator(evaluations.name);
+ setEditModalOpen(true);
+ }}
+ >
+ Edit
+ </Button> */}
+ </td>
+ <td style={{ overflow: 'hidden' }}>
+ {evaluations?.script_parameters?.task}
+ <FileTextIcon size={14} />
+ </td>
+ <td>{evaluations.plugin}</td>
+ <td style={{ textAlign: 'right' }}>
+ <Button
+ startDecorator={<PlayIcon />}
+ variant="soft"
+ color="success"
+ onClick={async () =>
+ await evaluationRun(
+ experimentInfo.id,
+ evaluations.plugin,
+ evaluations.name
+ )
+ }
+ >
+ Queue
+ </Button>
+ </td>
+ <td style={{ textAlign: 'right' }}>
+ <Stack direction="row">
+ <IconButton
+ onClick={async () => {
+ await fetch(
+ chatAPI.Endpoints.Experiment.DeleteEval(
+ experimentInfo.id,
+ evaluations.name
+ )
+ );
+ experimentInfoMutate();
+ }}
+ >
+ <Trash2Icon />
+ </IconButton>
+ </Stack>
+ </td>
+ </tr>
+ )
+ )}
+ </tbody>
+ </Table>
+ </>
+ );
+}
--
GitLab