fixed bugs with run button | improved param validations

agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx

@@ -1,20 +1,6 @@
 import {useState, useEffect} from "react"
 import type {ColumnType} from "antd/es/table"
-import {CaretRightOutlined} from "@ant-design/icons"
-import {
-    Button,
-    Card,
-    Col,
-    Input,
-    Radio,
-    Row,
-    Space,
-    Spin,
-    Statistic,
-    Table,
-    Typography,
-    message,
-} from "antd"
+import {Button, Card, Col, Radio, Row, Space, Statistic, Table, Typography, message} from "antd"
 import {
     updateEvaluationScenario,
     callVariant,
@@ -34,7 +20,7 @@ import {EvaluationTypeLabels, camelToSnake} from "@/lib/helpers/utils"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import EvaluationVotePanel from "../Evaluations/EvaluationCardView/EvaluationVotePanel"
 import VariantAlphabet from "../Evaluations/EvaluationCardView/VariantAlphabet"
-import ParamsForm from "../Playground/ParamsForm/ParamsForm"
+import {ParamsFormWithRun} from "./SingleModelEvaluationTable"
 
 const {Title} = Typography
 
@@ -335,42 +321,24 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 </div>
             ),
             dataIndex: "inputs",
-            render: (text: any, record: ABTestingEvaluationTableRow, rowIndex: number) => (
-                <div>
-                    {evaluation.testset.testsetChatColumn ? (
-                        evaluation.testset.csvdata[rowIndex][
-                            evaluation.testset.testsetChatColumn
-                        ] || " - "
-                    ) : (
-                        <ParamsForm
-                            isChatVariant={false}
-                            onParamChange={(name, value) =>
-                                handleInputChange(
-                                    {target: {value}} as any,
-                                    record.id,
-                                    record?.inputs.findIndex((ip) => ip.input_name === name),
-                                )
-                            }
-                            inputParams={
-                                variantData[0].inputParams?.map((item) => ({
-                                    ...item,
-                                    value: record.inputs.find((ip) => ip.input_name === item.name)
-                                        ?.input_value,
-                                })) || []
-                            }
-                        />
-                    )}
-
-                    <div className={classes.inputTestBtn}>
-                        <Button
-                            onClick={() => runEvaluation(record.id!)}
-                            icon={<CaretRightOutlined />}
-                        >
-                            Run
-                        </Button>
-                    </div>
-                </div>
-            ),
+            render: (_: any, record: ABTestingEvaluationTableRow, rowIndex: number) => {
+                return (
+                    <ParamsFormWithRun
+                        evaluation={evaluation}
+                        record={record}
+                        rowIndex={rowIndex}
+                        onRun={() => runEvaluation(record.id!)}
+                        onParamChange={(name, value) =>
+                            handleInputChange(
+                                {target: {value}} as any,
+                                record.id,
+                                record?.inputs.findIndex((ip) => ip.input_name === name),
+                            )
+                        }
+                        variantData={variantData}
+                    />
+                )
+            },
         },
         ...dynamicColumns,
         {

agenta-web/src/components/EvaluationTable/SimilarityMatchEvaluationTable.tsx

@@ -6,7 +6,6 @@ import {
     Card,
     Col,
     Form,
-    Input,
     Row,
     Slider,
     Space,

agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx

@@ -5,8 +5,7 @@ import {
     Button,
     Card,
     Col,
-    Input,
-    InputNumber,
+    Form,
     Radio,
     Row,
     Space,
@@ -16,12 +15,7 @@ import {
     Typography,
     message,
 } from "antd"
-import {
-    updateEvaluationScenario,
-    callVariant,
-    fetchEvaluationResults,
-    updateEvaluation,
-} from "@/lib/services/api"
+import {updateEvaluationScenario, callVariant, updateEvaluation} from "@/lib/services/api"
 import {useVariants} from "@/lib/hooks/useVariant"
 import {useRouter} from "next/router"
 import {EvaluationFlow} from "@/lib/enums"
@@ -107,6 +101,56 @@ const useStyles = createUseStyles({
     },
 })
 
+export const ParamsFormWithRun = ({
+    evaluation,
+    record,
+    rowIndex,
+    onRun,
+    onParamChange,
+    variantData,
+}: {
+    record: SingleModelEvaluationRow
+    rowIndex: number
+    evaluation: Evaluation
+    onRun: () => void
+    onParamChange: (name: string, value: any) => void
+    variantData: ReturnType<typeof useVariants>
+}) => {
+    const classes = useStyles()
+    const [form] = Form.useForm()
+
+    return (
+        <div>
+            {evaluation.testset.testsetChatColumn ? (
+                evaluation.testset.csvdata[rowIndex][evaluation.testset.testsetChatColumn] || " - "
+            ) : (
+                <ParamsForm
+                    isChatVariant={false}
+                    onParamChange={onParamChange}
+                    inputParams={
+                        variantData[0].inputParams?.map((item) => ({
+                            ...item,
+                            value: record.inputs.find((ip) => ip.input_name === item.name)
+                                ?.input_value,
+                        })) || []
+                    }
+                    onFinish={onRun}
+                    form={form}
+                />
+            )}
+
+            <div className={classes.inputTestBtn}>
+                <Button
+                    onClick={evaluation.testset.testsetChatColumn ? onRun : form.submit}
+                    icon={<CaretRightOutlined />}
+                >
+                    Run
+                </Button>
+            </div>
+        </div>
+    )
+}
+
 const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
     evaluation,
     evaluationScenarios,
@@ -337,42 +381,24 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                 </div>
             ),
             dataIndex: "inputs",
-            render: (text: any, record: SingleModelEvaluationRow, rowIndex: number) => (
-                <div>
-                    {evaluation.testset.testsetChatColumn ? (
-                        evaluation.testset.csvdata[rowIndex][
-                            evaluation.testset.testsetChatColumn
-                        ] || " - "
-                    ) : (
-                        <ParamsForm
-                            isChatVariant={false}
-                            onParamChange={(name, value) =>
-                                handleInputChange(
-                                    {target: {value}} as any,
-                                    record.id,
-                                    record?.inputs.findIndex((ip) => ip.input_name === name),
-                                )
-                            }
-                            inputParams={
-                                variantData[0].inputParams?.map((item) => ({
-                                    ...item,
-                                    value: record.inputs.find((ip) => ip.input_name === item.name)
-                                        ?.input_value,
-                                })) || []
-                            }
-                        />
-                    )}
-
-                    <div className={classes.inputTestBtn}>
-                        <Button
-                            onClick={() => runEvaluation(record.id!)}
-                            icon={<CaretRightOutlined />}
-                        >
-                            Run
-                        </Button>
-                    </div>
-                </div>
-            ),
+            render: (_: any, record: SingleModelEvaluationRow, rowIndex: number) => {
+                return (
+                    <ParamsFormWithRun
+                        evaluation={evaluation}
+                        record={record}
+                        rowIndex={rowIndex}
+                        onRun={() => runEvaluation(record.id!)}
+                        onParamChange={(name, value) =>
+                            handleInputChange(
+                                {target: {value}} as any,
+                                record.id,
+                                record?.inputs.findIndex((ip) => ip.input_name === name),
+                            )
+                        }
+                        variantData={variantData}
+                    />
+                )
+            },
         },
         ...dynamicColumns,
         {

agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx

@@ -8,16 +8,14 @@ import {
     QuestionCircleOutlined,
     RightOutlined,
 } from "@ant-design/icons"
-import {Button, Empty, Input, Space, Tooltip, Typography, theme} from "antd"
+import {Button, Empty, Form, Input, Space, Tooltip, Typography, theme} from "antd"
 import React, {useCallback, useEffect, useMemo, useRef} from "react"
 import {createUseStyles} from "react-jss"
 import EvaluationVotePanel from "./EvaluationVotePanel"
 import EvaluationCard from "./EvaluationCard"
-import EvaluationInputs from "./EvaluationInputs"
 import {ABTestingEvaluationTableRow} from "@/components/EvaluationTable/ABTestingEvaluationTable"
 import AlertPopup from "@/components/AlertPopup/AlertPopup"
 import {useLocalStorage} from "usehooks-ts"
-import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {testsetRowToChatMessages} from "@/lib/helpers/testset"
 import {safeParse} from "@/lib/helpers/utils"
 import {debounce} from "lodash"
@@ -174,6 +172,7 @@ const EvaluationCardView: React.FC<Props> = ({
     const isChat = !!evaluation.testset.testsetChatColumn
     const testsetRow = evaluation.testset.csvdata[scenarioIndex]
     const isAbTesting = evaluation.evaluationType === EvaluationType.human_a_b_testing
+    const [form] = Form.useForm()
 
     const loadPrevious = () => {
         if (scenarioIndex === 0) return
@@ -365,6 +364,8 @@ const EvaluationCardView: React.FC<Props> = ({
                             }
                             key={scenarioId}
                             useChatDefaultValue
+                            form={form}
+                            onFinish={() => onRun(scenarioId)}
                         />
 
                         <div className={classes.toolBar}>
@@ -400,7 +401,7 @@ const EvaluationCardView: React.FC<Props> = ({
                             <Tooltip title="Run (Enter ↵)">
                                 <PlayCircleOutlined
                                     style={{color: token.colorSuccessActive}}
-                                    onClick={() => onRun(scenarioId)}
+                                    onClick={form.submit}
                                 />
                             </Tooltip>
                         </div>

agenta-web/src/components/Playground/ParamsForm/ParamsForm.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import ChatInputs from "@/components/ChatInputs/ChatInputs"
 import {GenericObject, Parameter} from "@/lib/Types"
 import {renameVariables} from "@/lib/helpers/utils"
-import {Form, Image, Input} from "antd"
+import {Form, FormInstance, Image, Input} from "antd"
 import {createUseStyles} from "react-jss"
 
 const useStyles = createUseStyles({
@@ -34,6 +34,7 @@ interface Props {
     onParamChange?: (name: string, value: any) => void
     isChatVariant?: boolean
     useChatDefaultValue?: boolean
+    form?: FormInstance<GenericObject>
 }
 
 const ParamsForm: React.FC<Props> = ({
@@ -42,9 +43,9 @@ const ParamsForm: React.FC<Props> = ({
     onParamChange,
     isChatVariant,
     useChatDefaultValue,
+    form,
 }) => {
     const classes = useStyles()
-    const [form] = Form.useForm()
 
     const chat = inputParams.find((param) => param.name === "chat")?.value
 
@@ -57,8 +58,8 @@ const ParamsForm: React.FC<Props> = ({
     ) : (
         <Form form={form} className={classes.form} onFinish={onFinish}>
             {/*@ts-ignore*/}
-            {(_, formInstance) =>
-                inputParams.map((param, index) => {
+            {(_, formInstance) => {
+                return inputParams.map((param, index) => {
                     const type = param.type === "file_url" ? "url" : param.type
                     return (
                         <Form.Item
@@ -74,6 +75,7 @@ const ParamsForm: React.FC<Props> = ({
                                     message: `Must be a valid ${type}`,
                                 },
                             ]}
+                            initialValue={param.value}
                         >
                             <div className={classes.formItemRow}>
                                 {type === "url" &&
@@ -99,7 +101,7 @@ const ParamsForm: React.FC<Props> = ({
                         </Form.Item>
                     )
                 })
-            }
+            }}
         </Form>
     )
 }

agenta-web/src/components/Playground/Views/TestView.tsx

@@ -151,6 +151,7 @@ const BoxComponent: React.FC<BoxComponentProps> = ({
                     }
                     onFinish={onRun}
                     onParamChange={onInputParamChange}
+                    form={form}
                 />
             </Row>
             <Row className={classes.row2} style={{marginBottom: isChatVariant ? 12 : 0}}>
@@ -203,6 +204,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     const [resultsList, setResultsList] = useState<string[]>(testList.map(() => ""))
     const [params, setParams] = useState<Record<string, string> | null>(null)
     const classes = useStylesApp()
+    const rootRef = React.useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         setResultsList((prevResultsList) => {
@@ -275,7 +277,9 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     }
 
     const handleRunAll = () => {
-        testList.forEach((_, index) => handleRun(index))
+        rootRef.current
+            ?.querySelectorAll("[data-cy=testview-input-parameters-run-button]")
+            .forEach((btn) => (btn as HTMLButtonElement).click())
     }
 
     const handleAddRow = () => {
@@ -312,7 +316,7 @@ const App: React.FC<TestViewProps> = ({inputParams, optParams, variant, isChatVa
     }
 
     return (
-        <div>
+        <div ref={rootRef}>
             <div className={classes.testView}>
                 <h2>2. Preview and test</h2>
                 <Space size={10}>