Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fea: Modify the A/B testing evaluation UI to look like the other evaluation views #600

Merged
merged 9 commits into from
Sep 14, 2023
Merged

Fea: Modify the A/B testing evaluation UI to look like the other evaluation views #600

Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5b21e0a
Fix: Update A/B Testing UI and Add Evaluation Results Feature
bekossy Sep 13, 2023
f984cda
Merge branch 'Agenta-AI:main' into issue-566/feature-modify-the-a/b-t…
bekossy Sep 13, 2023
4b5e3b3
Merge branch 'Agenta-AI:main' into issue-566/feature-modify-the-a/b-t…
bekossy Sep 13, 2023
83f0bdd
add Statistic values of Evaluation result
bekossy Sep 13, 2023
c4ba693
Fix Evaluation status for individual runs
bekossy Sep 13, 2023
b54be15
Merge branch 'Agenta-AI:main' into issue-566/feature-modify-the-a/b-t…
bekossy Sep 13, 2023
a81cbc8
Merge branch 'issue-566/feature-modify-the-a/b-testing-evaluation-ui'…
bekossy Sep 13, 2023
412a4a4
Modified button label
bekossy Sep 14, 2023
2f9bca3
removes button icon
bekossy Sep 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 80 additions & 11 deletions agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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> = ({
Expand All @@ -93,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) {
Expand Down Expand Up @@ -120,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
Expand Down Expand Up @@ -192,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) {
Expand Down Expand Up @@ -250,9 +284,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",
Expand Down Expand Up @@ -341,12 +372,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={`${appVariant1} out of ${num_of_rows}`}
className={classes.statCorrect}
/>
</Col>
<Col span={10}>
<Statistic
title={`${evaluation.variants[1].variantName} is better:`}
value={`${appVariant2} out of ${num_of_rows}`}
className={classes.statCorrect}
/>
</Col>
<Col span={4}>
<Statistic
title="Both are bad:"
value={`${flag_votes} out of ${num_of_rows}`}
className={classes.statWrong}
/>
</Col>
</Row>
</Card>
</Col>
</Row>
</div>
Expand Down