Merge pull request #1241 from Agenta-AI/issue-874/-Live-results-in-A/…

…B-evaluation-view-not-updating Live results in a/b evaluation view not updating
Agenta-AI · Jan 22, 2024 · e276a07 · e276a07
2 parents 06597af + a449108
commit e276a07
Showing 1 changed file with 61 additions and 60 deletions.
diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -174,6 +174,66 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
         setRows(newRows)
     }
 
+    const setRowValue = useCallback(
+        (rowIndex: number, columnKey: keyof ABTestingEvaluationTableRow, value: any) => {
+            const newRows = [...rows]
+            newRows[rowIndex][columnKey] = value as never
+            setRows(newRows)
+        },
+        [rows],
+    )
+
+    const updateEvaluationScenarioData = useCallback(
+        async (id: string, data: Partial<EvaluationScenario>, showNotification: boolean = true) => {
+            await updateEvaluationScenario(
+                evaluation.id,
+                id,
+                Object.keys(data).reduce(
+                    (acc, key) => ({
+                        ...acc,
+                        [camelToSnake(key)]: data[key as keyof EvaluationScenario],
+                    }),
+                    {},
+                ),
+                evaluation.evaluationType,
+            )
+                .then(() => {
+                    Object.keys(data).forEach((key) => {
+                        setRowValue(
+                            evaluationScenarios.findIndex((item) => item.id === id),
+                            key,
+                            data[key as keyof EvaluationScenario],
+                        )
+                    })
+                    if (showNotification) message.success("Evaluation Updated!")
+                })
+                .catch(console.error)
+        },
+        [evaluation.evaluationType, evaluation.id, evaluationScenarios, setRowValue],
+    )
+
+    const handleVoteClick = useCallback(
+        (id: string, vote: string) => {
+            const rowIndex = rows.findIndex((row) => row.id === id)
+            const evaluation_scenario_id = rows[rowIndex].id
+
+            if (evaluation_scenario_id) {
+                setRowValue(rowIndex, "vote", "loading")
+                const data = {
+                    vote: vote,
+                    outputs: variants.map((v: Variant) => ({
+                        variant_id: v.variantId,
+                        variant_output: rows[rowIndex][v.variantId],
+                    })),
+                    inputs: rows[rowIndex].inputs,
+                }
+
+                updateEvaluationScenarioData(evaluation_scenario_id, data)
+            }
+        },
+        [rows, setRowValue, updateEvaluationScenarioData, variants],
+    )
+
     useEffect(() => {
         if (evaluationStatus === EvaluationFlow.EVALUATION_FINISHED) {
             fetchEvaluationResults(evaluation.id)
@@ -184,56 +244,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 })
                 .catch((err) => console.error("Failed to fetch results:", err))
         }
-    }, [evaluationStatus, evaluation.id])
-
-    const handleVoteClick = (id: string, vote: string) => {
-        const rowIndex = rows.findIndex((row) => row.id === id)
-        const evaluation_scenario_id = rows[rowIndex].id
-
-        if (evaluation_scenario_id) {
-            setRowValue(rowIndex, "vote", "loading")
-            const data = {
-                vote: vote,
-                outputs: variants.map((v: Variant) => ({
-                    variant_id: v.variantId,
-                    variant_output: rows[rowIndex][v.variantId],
-                })),
-                inputs: rows[rowIndex].inputs,
-            }
-
-            updateEvaluationScenarioData(evaluation_scenario_id, data)
-        }
-    }
-
-    const updateEvaluationScenarioData = async (
-        id: string,
-        data: Partial<EvaluationScenario>,
-        showNotification: boolean = true,
-    ) => {
-        await updateEvaluationScenario(
-            evaluation.id,
-            id,
-            Object.keys(data).reduce(
-                (acc, key) => ({
-                    ...acc,
-                    [camelToSnake(key)]: data[key as keyof EvaluationScenario],
-                }),
-                {},
-            ),
-            evaluation.evaluationType,
-        )
-            .then(() => {
-                Object.keys(data).forEach((key) => {
-                    setRowValue(
-                        evaluationScenarios.findIndex((item) => item.id === id),
-                        key,
-                        data[key as keyof EvaluationScenario],
-                    )
-                })
-                if (showNotification) message.success("Evaluation Updated!")
-            })
-            .catch(console.error)
-    }
+    }, [evaluationStatus, evaluation.id, handleVoteClick])
 
     const runAllEvaluations = async () => {
         setEvaluationStatus(EvaluationFlow.EVALUATION_STARTED)
@@ -307,16 +318,6 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
         )
     }
 
-    const setRowValue = (
-        rowIndex: number,
-        columnKey: keyof ABTestingEvaluationTableRow,
-        value: any,
-    ) => {
-        const newRows = [...rows]
-        newRows[rowIndex][columnKey] = value as never
-        setRows(newRows)
-    }
-
     const dynamicColumns: ColumnType<ABTestingEvaluationTableRow>[] = variants.map(
         (variant: Variant, ix) => {
             const columnKey = variant.variantId