Merge pull request #1002 from Agenta-AI/issue-189/-improve-human-eval…

…uation-views Improve Human evaluation views
Agenta-AI · Dec 6, 2023 · 02d8a85 · 02d8a85
2 parents 1ab7fc5 + f8b6897
commit 02d8a85
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -140,7 +140,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
     }, [evaluationScenarios])
 
     const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
+        e: React.ChangeEvent<HTMLTextAreaElement>,
         id: string,
         inputIndex: number,
     ) => {
@@ -306,7 +306,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 ),
                 dataIndex: columnKey,
                 key: columnKey,
-                width: "20%",
+                width: "25%",
                 render: (text: any, record: ABTestingEvaluationTableRow, rowIndex: number) => {
                     if (text) return text
                     if (record.outputs && record.outputs.length > 0) {
@@ -345,7 +345,8 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                           record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
                           record.inputs.map((input: any, index: number) => (
                               <div className={classes.recordInput} key={index}>
-                                  <Input
+                                  <Input.TextArea
+                                      rows={2}
                                       placeholder={input.input_name}
                                       value={input.input_value}
                                       onChange={(e) => handleInputChange(e, record.id, index)}

diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -147,7 +147,7 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
     }, [evaluationStatus, evaluation.id])
 
     const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement>,
+        e: React.ChangeEvent<HTMLTextAreaElement>,
         id: string,
         inputIndex: number,
     ) => {
@@ -307,7 +307,7 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                 ),
                 dataIndex: columnKey,
                 key: columnKey,
-                width: "20%",
+                width: "25%",
                 render: (text: any, record: SingleModelEvaluationRow, rowIndex: number) => {
                     if (text) return text
                     if (record.outputs && record.outputs.length > 0) {
@@ -346,7 +346,8 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                           record.inputs.length && // initial value of inputs is array with 1 element and variantInputs could contain more than 1 element
                           record.inputs.map((input: any, index: number) => (
                               <div className={classes.recordInput} key={index}>
-                                  <Input
+                                  <Input.TextArea
+                                      rows={2}
                                       placeholder={input.input_name}
                                       value={input.input_value}
                                       onChange={(e) => handleInputChange(e, record.id, index)}

diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationInputs.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationInputs.tsx
@@ -7,7 +7,7 @@ const useStyles = createUseStyles({
     root: {
         display: "flex",
         gap: "1rem",
-        flexWrap: "wrap",
+        flexDirection: "column",
     },
     inputRow: {
         display: "flex",
@@ -16,8 +16,8 @@ const useStyles = createUseStyles({
         "& .ant-typography": {
             textTransform: "capitalize",
         },
-        "& input": {
-            width: 200,
+        "& textarea": {
+            width: "100%",
         },
     },
 })
@@ -35,7 +35,8 @@ const EvaluationInputs: React.FC<Props> = ({evaluationScenario, onInputChange})
             {evaluationScenario.inputs.map((ip, ix) => (
                 <div key={ip.input_name} className={classes.inputRow}>
                     <Typography.Text>{ip.input_name}:</Typography.Text>
-                    <Input
+                    <Input.TextArea
+                        rows={2}
                         placeholder={ip.input_name}
                         defaultValue={ip.input_value}
                         onChange={(e) => onInputChange(e, evaluationScenario.id, ix)}