fix(frontend): implemented evaluator config selection logic

Agenta-AI · Dec 4, 2024 · 4b75642 · 4b75642
1 parent 8b2478e
commit 4b75642
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 80 deletions.
diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
@@ -1,37 +1,13 @@
 import {useAppId} from "@/hooks/useAppId"
-import {
-    JSSTheme,
-    LLMRunRateLimit,
-    TestSet,
-    testset,
-    TestsetCreationMode,
-    Variant,
-} from "@/lib/Types"
+import {JSSTheme, LLMRunRateLimit, testset, Variant} from "@/lib/Types"
 import {evaluatorConfigsAtom, evaluatorsAtom} from "@/lib/atoms/evaluation"
 import {apiKeyObject, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
 import {fetchSingleProfile, fetchVariants} from "@/services/api"
-import {CreateEvaluationData, createEvalutaiton} from "@/services/evaluations/api"
+import {createEvalutaiton} from "@/services/evaluations/api"
 import {fetchTestsets} from "@/services/testsets/api"
-import {PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons"
-import {
-    Divider,
-    Form,
-    Modal,
-    Select,
-    Spin,
-    Tag,
-    Typography,
-    InputNumber,
-    Input,
-    Row,
-    Col,
-    Switch,
-    Tooltip,
-    Space,
-} from "antd"
-import dayjs from "dayjs"
+import {PlusOutlined} from "@ant-design/icons"
+import {Form, Modal, Spin, Space, message} from "antd"
 import {useAtom} from "jotai"
-import Image from "next/image"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import SelectTestsetSection from "./SelectTestsetSection"
@@ -47,48 +23,16 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
         "& .ant-modal-content": {
             height: "100%",
+            display: "flex",
+            flexDirection: "column",
             "& .ant-modal-body": {
-                height: "100%",
                 overflowY: "auto",
+                flex: 1,
                 paddingTop: theme.padding,
                 paddingBottom: theme.padding,
             },
         },
     },
-    spinContainer: {
-        display: "grid",
-        placeItems: "center",
-        height: "100%",
-    },
-    selector: {
-        width: 300,
-    },
-    evaluationImg: {
-        width: 20,
-        height: 20,
-        marginRight: 12,
-        filter: theme.isDark ? "invert(1)" : "none",
-    },
-    configRow: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-    },
-    configRowContent: {
-        display: "flex",
-        alignItems: "center",
-    },
-    date: {
-        fontSize: "0.75rem",
-        color: "#8c8c8c",
-    },
-    tag: {
-        transform: "scale(0.8)",
-    },
-    divider: {
-        margin: "1rem -1.5rem",
-        width: "unset",
-    },
     collapseContainer: {
         "& .ant-collapse-header": {
             alignItems: "center !important",
@@ -178,17 +122,36 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
         setCorrectAnswerColumn(value)
     }
 
-    const onSubmit = () => {
-        // redirect if no llm keys and an AI Critique config is selected
+    const validateForm = () => {
+        if (!selectedTestsetId) {
+            message.error("Please select a test set")
+            return false
+        }
+        if (selectedVariantIds.length === 0) {
+            message.error("Please select app variant")
+            return false
+        }
+        if (selectedEvalConfigs.length === 0) {
+            message.error("Please select evaluator configuration")
+            return false
+        }
         if (
             selectedEvalConfigs.some(
                 (id) =>
                     evaluatorConfigs.find((config) => config.id === id)?.evaluator_key ===
                     "auto_ai_critique",
             ) &&
             redirectIfNoLLMKeys()
-        )
-            return
+        ) {
+            message.error("LLM keys are required for AI Critique configuration")
+            return false
+        }
+        return true
+    }
+
+    const onSubmit = () => {
+        if (!validateForm()) return
+
         setSubmitLoading(true)
         createEvalutaiton(appId, {
             testset_id: selectedTestsetId,
@@ -206,7 +169,7 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
     return (
         <Modal
             title="New Evaluation"
-            onOk={form.submit}
+            onOk={onSubmit}
             okText="Create"
             centered
             width={1200}
@@ -231,6 +194,8 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
                     <SelectEvaluatorSection
                         evaluators={evaluators}
                         evaluatorConfigs={evaluatorConfigs}
+                        selectedEvalConfigs={selectedEvalConfigs}
+                        setSelectedEvalConfigs={setSelectedEvalConfigs}
                         className={classes.collapseContainer}
                     />
                 </Space>

diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx
@@ -1,21 +1,25 @@
 import {Evaluator, EvaluatorConfig} from "@/lib/Types"
 import {CloseCircleOutlined, PlusOutlined} from "@ant-design/icons"
-import {Button, Collapse, Input, Space, Table, Tag} from "antd"
+import {Button, Collapse, Input, Table, Tag} from "antd"
 import {ColumnsType} from "antd/es/table"
 import React, {useMemo, useState} from "react"
 
 type SelectEvaluatorSectionProps = {
     evaluatorConfigs: EvaluatorConfig[]
     evaluators: Evaluator[]
+    selectedEvalConfigs: string[]
+    setSelectedEvalConfigs: React.Dispatch<React.SetStateAction<string[]>>
 } & React.ComponentProps<typeof Collapse>
 
 const SelectEvaluatorSection = ({
     evaluatorConfigs,
     evaluators,
+    selectedEvalConfigs,
+    setSelectedEvalConfigs,
     ...props
 }: SelectEvaluatorSectionProps) => {
     const [searchTerm, setSearchTerm] = useState("")
-    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+    const [selectedRows, setSelectedRows] = useState<EvaluatorConfig[]>([])
 
     const columns: ColumnsType<EvaluatorConfig> = [
         // {
@@ -52,6 +56,13 @@ const SelectEvaluatorSection = ({
         )
     }, [searchTerm, evaluatorConfigs])
 
+    const handleRemoveEvalConfig = (configId: string) => {
+        const filterEvalConfig = selectedRows.filter((config) => configId !== config.id)
+
+        setSelectedEvalConfigs(filterEvalConfig.map((e) => e.id))
+        setSelectedRows(filterEvalConfig)
+    }
+
     return (
         <Collapse
             defaultActiveKey={["1"]}
@@ -60,15 +71,34 @@ const SelectEvaluatorSection = ({
                 {
                     key: "1",
                     label: (
-                        <Space>
+                        <div className="flex items-center gap-2">
                             <div>Select Evaluator</div>
-                            <Tag closeIcon={<CloseCircleOutlined />} onClose={() => {}}>
-                                {"<evaluator_name>"}
-                            </Tag>
-                            <Button icon={<PlusOutlined />} size="small">
-                                Create new
-                            </Button>
-                        </Space>
+                            <div className="flex items-center gap-2 flex-1 flex-wrap">
+                                {selectedRows.length
+                                    ? selectedRows.map((config) => (
+                                          <Tag
+                                              key={config.id}
+                                              closeIcon={<CloseCircleOutlined />}
+                                              onClose={() => handleRemoveEvalConfig(config.id)}
+                                              color={config.color}
+                                              className="mr-0"
+                                          >
+                                              {config.name}
+                                          </Tag>
+                                      ))
+                                    : null}
+
+                                <Button
+                                    icon={<PlusOutlined />}
+                                    size="small"
+                                    onClick={(e) => {
+                                        e.stopPropagation()
+                                    }}
+                                >
+                                    Create new
+                                </Button>
+                            </div>
+                        </div>
                     ),
                     extra: (
                         <Input.Search
@@ -87,8 +117,10 @@ const SelectEvaluatorSection = ({
                             rowSelection={{
                                 type: "checkbox",
                                 columnWidth: 48,
-                                onChange: (selectedRowKeys: React.Key[]) => {
-                                    setSelectedRowKeys(selectedRowKeys)
+                                selectedRowKeys: selectedEvalConfigs,
+                                onChange: (selectedRowKeys, selectedRows) => {
+                                    setSelectedRows(selectedRows)
+                                    setSelectedEvalConfigs(selectedRowKeys as string[])
                                 },
                             }}
                             className="ph-no-capture"