From 5b21e0af8046287d13b88c43eee8c294fef79dd3 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 13 Sep 2023 11:14:12 +0100
Subject: [PATCH 1/5] Fix: Update A/B Testing UI and Add Evaluation Results
 Feature

---
 .../ABTestingEvaluationTable.tsx              | 80 ++++++++++++++++---
 1 file changed, 70 insertions(+), 10 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index eb113d2633..7cd2ba09e0 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -1,7 +1,19 @@
 import {useState, useEffect} from "react"
 import type {ColumnType} from "antd/es/table"
 import {CaretRightOutlined, LineChartOutlined} from "@ant-design/icons"
-import {Button, Col, Input, Row, Space, Spin, Table, Typography, message} from "antd"
+import {
+    Button,
+    Card,
+    Col,
+    Input,
+    Row,
+    Space,
+    Spin,
+    Statistic,
+    Table,
+    Typography,
+    message,
+} from "antd"
 import {
     updateEvaluationScenario,
     callVariant,
@@ -74,6 +86,19 @@ const useStyles = createUseStyles({
     recordInput: {
         marginBottom: 10,
     },
+    card: {
+        marginBottom: 20,
+    },
+    statCorrect: {
+        "& .ant-statistic-content-value": {
+            color: "#3f8600",
+        },
+    },
+    statWrong: {
+        "& .ant-statistic-content-value": {
+            color: "#cf1322",
+        },
+    },
 })
 
 const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
@@ -250,9 +275,6 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                         <span className={classes.inputTest}>{evaluation.testset.name}</span>
                         <span> )</span>
                     </div>
-                    <Button size="small" onClick={runAllEvaluations} icon={<CaretRightOutlined />}>
-                        Run All
-                    </Button>
                 </div>
             ),
             dataIndex: "inputs",
@@ -341,12 +363,50 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
             <div>
                 <Row align="middle">
                     <Col span={12}>
-                        <SecondaryButton
-                            onClick={() => exportABTestingEvaluationData(evaluation, rows)}
-                            disabled={evaluationStatus !== EvaluationFlow.EVALUATION_FINISHED}
-                        >
-                            Export results
-                        </SecondaryButton>
+                        <Space>
+                            <Button
+                                type="primary"
+                                onClick={runAllEvaluations}
+                                icon={<LineChartOutlined />}
+                                size="large"
+                            >
+                                Run Evaluation
+                            </Button>
+                            <SecondaryButton
+                                onClick={() => exportABTestingEvaluationData(evaluation, rows)}
+                                disabled={evaluationStatus !== EvaluationFlow.EVALUATION_FINISHED}
+                            >
+                                Export results
+                            </SecondaryButton>
+                        </Space>
+                    </Col>
+
+                    <Col span={12}>
+                        <Card bordered={true} className={classes.card}>
+                            <Row justify="end">
+                                <Col span={10}>
+                                    <Statistic
+                                        title={`${evaluation.variants[0].variantName} is better:`}
+                                        // value={`${2} out of ${rows.length}`}
+                                        className={classes.statCorrect}
+                                    />
+                                </Col>
+                                <Col span={10}>
+                                    <Statistic
+                                        title={`${evaluation.variants[1].variantName} is better:`}
+                                        // value={`${1} out of ${rows.length}`}
+                                        className={classes.statCorrect}
+                                    />
+                                </Col>
+                                <Col span={4}>
+                                    <Statistic
+                                        title="Both are bad:"
+                                        // value={19}
+                                        className={classes.statWrong}
+                                    />
+                                </Col>
+                            </Row>
+                        </Card>
                     </Col>
                 </Row>
             </div>

From 83f0bddc410df97fb7cb5e2403c83b5a0d7734ac Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 13 Sep 2023 16:40:13 +0100
Subject: [PATCH 2/5] add Statistic values of Evaluation result

---
 .../EvaluationTable/ABTestingEvaluationTable.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index 7cd2ba09e0..3de982a522 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -118,6 +118,14 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
     const [rows, setRows] = useState<ABTestingEvaluationTableRow[]>([])
     const [evaluationStatus, setEvaluationStatus] = useState<EvaluationFlow>(evaluation.status)
     const [evaluationResults, setEvaluationResults] = useState<any>(null)
+    let num_of_rows = evaluationResults?.votes_data.nb_of_rows || 0
+    let flag_votes = evaluationResults?.votes_data.flag_votes?.number_of_votes || 0
+    let appVariant1 =
+        evaluationResults?.votes_data?.variants_votes_data?.[evaluation.variants[0]?.variantName]
+            ?.number_of_votes || 0
+    let appVariant2 =
+        evaluationResults?.votes_data?.variants_votes_data?.[evaluation.variants[1]?.variantName]
+            ?.number_of_votes || 0
 
     useEffect(() => {
         if (evaluationScenarios) {
@@ -145,7 +153,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 })
                 .catch((err) => console.error("Failed to fetch results:", err))
         }
-    }, [evaluationStatus, evaluation.id])
+    }, [evaluationStatus, evaluation.id, rows])
 
     const handleVoteClick = (rowIndex: number, vote: string) => {
         const evaluation_scenario_id = rows[rowIndex].id
@@ -387,21 +395,21 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                                 <Col span={10}>
                                     <Statistic
                                         title={`${evaluation.variants[0].variantName} is better:`}
-                                        // value={`${2} out of ${rows.length}`}
+                                        value={`${appVariant1} out of ${num_of_rows}`}
                                         className={classes.statCorrect}
                                     />
                                 </Col>
                                 <Col span={10}>
                                     <Statistic
                                         title={`${evaluation.variants[1].variantName} is better:`}
-                                        // value={`${1} out of ${rows.length}`}
+                                        value={`${appVariant2} out of ${num_of_rows}`}
                                         className={classes.statCorrect}
                                     />
                                 </Col>
                                 <Col span={4}>
                                     <Statistic
                                         title="Both are bad:"
-                                        // value={19}
+                                        value={`${flag_votes} out of ${num_of_rows}`}
                                         className={classes.statWrong}
                                     />
                                 </Col>

From c4ba693cc411675ac6f6a7dc60cccca06c74faca Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 14 Sep 2023 00:08:12 +0100
Subject: [PATCH 3/5] Fix Evaluation status for individual runs

---
 .../src/components/EvaluationTable/ABTestingEvaluationTable.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index 3de982a522..fb892b046c 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -225,6 +225,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 if (idx === columnsDataNames.length - 1) {
                     if (count === 1 || count === rowIndex) {
                         message.success("Evaluation Results Saved")
+                        setEvaluationStatus(EvaluationFlow.EVALUATION_FINISHED)
                     }
                 }
             } catch (e) {

From 412a4a4f85b15844027250db8b6660a8528ae704 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 14 Sep 2023 08:15:59 +0100
Subject: [PATCH 4/5] Modified button label

---
 .../src/components/EvaluationTable/ABTestingEvaluationTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index fb892b046c..ff7a3d5421 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -379,7 +379,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                                 icon={<LineChartOutlined />}
                                 size="large"
                             >
-                                Run Evaluation
+                                Run All
                             </Button>
                             <SecondaryButton
                                 onClick={() => exportABTestingEvaluationData(evaluation, rows)}

From 2f9bca3a091a54dd156d4f82744bfe39faf7fcd4 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 14 Sep 2023 08:19:38 +0100
Subject: [PATCH 5/5] removes button icon

---
 .../EvaluationTable/ABTestingEvaluationTable.tsx           | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
index ff7a3d5421..25688f7714 100644
--- a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
+++ b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -373,12 +373,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                 <Row align="middle">
                     <Col span={12}>
                         <Space>
-                            <Button
-                                type="primary"
-                                onClick={runAllEvaluations}
-                                icon={<LineChartOutlined />}
-                                size="large"
-                            >
+                            <Button type="primary" onClick={runAllEvaluations} size="large">
                                 Run All
                             </Button>
                             <SecondaryButton