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

fix(frontend): create evaluation model testset overlapping issue #2231

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

fix(frontend): create evaluation model testset overlapping issue #2231

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd9c0ce
fix(frontend): testset overlaping issue
ashrafchowdury Nov 8, 2024
596c6cd
fix(cypress): ab evaluation failing tests
ashrafchowdury Nov 12, 2024
29e4ad2
Merge branch 'main' of https://github.com/Agenta-AI/agenta into fix/c…
ashrafchowdury Nov 12, 2024
2b76319
fix(frontend): auto create evaluation model items search issue
ashrafchowdury Nov 12, 2024
13daf69
Merge branch 'main' into fix/create-evaluation-model-testset-issue
bekossy Nov 19, 2024
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
21 changes: 5 additions & 16 deletions agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,25 +48,14 @@ describe("A/B Testing Evaluation workflow", () => {
cy.clickLinkAndWait('[data-cy="new-human-eval-modal-button"]')

cy.get(".ant-modal-content").should("exist")
cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
cy.get(".ant-dropdown")
.eq(0)
.within(() => {
cy.get('[data-cy="variant-0"]').contains("app.default").click()
})
cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseout")
cy.get('[data-cy="variants-dropdown-0"]').click()
cy.get('[data-cy="variant-0"]').contains("app.default").click()

cy.get('[data-cy="variants-dropdown-1"]').trigger("mouseover")
cy.get(".ant-dropdown")
.eq(1)
.within(() => {
cy.get('[data-cy="variant-1"]').contains(`app.${app_v2}`).click()
})
cy.get('[data-cy="variants-dropdown-1"]').trigger("mouseout")
cy.get('[data-cy="variants-dropdown-1"]').click()
cy.get('[data-cy="variant-1"]').contains(`app.${app_v2}`).click()

cy.get('[data-cy="selected-testset"]').trigger("mouseover")
cy.get('[data-cy="selected-testset"]').click()
cy.get('[data-cy^="testset"]').contains(testset_name).click()
cy.get('[data-cy="selected-testset"]').trigger("mouseout")

cy.clickLinkAndWait('[data-cy="start-new-evaluation-button"]')
cy.url().should("include", "/human_a_b_testing")
Expand Down
6 changes: 2 additions & 4 deletions agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,11 @@ describe("Single Model Test workflow", () => {

cy.get(".ant-modal-content").should("exist")

cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseover")
cy.get('[data-cy="variants-dropdown-0"]').click()
cy.get('[data-cy="variant-0"]').click()
cy.get('[data-cy="variants-dropdown-0"]').trigger("mouseout")

cy.get('[data-cy="selected-testset"]').trigger("mouseover")
cy.get('[data-cy="selected-testset"]').click()
cy.get('[data-cy^="testset"]').contains(testset_name).click()
cy.get('[data-cy="selected-testset"]').trigger("mouseout")

cy.clickLinkAndWait('[data-cy="start-new-evaluation-button"]')
cy.url().should("include", "/single_model_test")
Expand Down
136 changes: 48 additions & 88 deletions agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {GenericObject, JSSTheme, Parameter, Variant, StyleProps} from "@/lib/Typ
import {fetchVariants} from "@/services/api"
import {createNewEvaluation} from "@/services/human-evaluations/api"
import {isDemo} from "@/lib/helpers/utils"
import {Button, Col, Dropdown, MenuProps, Modal, ModalProps, Row, Spin, message} from "antd"
import {Button, Col, Modal, ModalProps, Row, Select, Spin, message} from "antd"
import {getErrorMessage} from "@/lib/helpers/errorHandler"
import {EvaluationType} from "@/lib/enums"
import {PERMISSION_ERR_MSG} from "@/lib/helpers/axiosConfig"
Expand All @@ -14,7 +14,7 @@ import {createUseStyles} from "react-jss"
import EvaluationErrorModal from "../Evaluations/EvaluationErrorModal"
import {dynamicComponent} from "@/lib/helpers/dynamic"
import {useLoadTestsetsList} from "@/services/testsets/api"
import {CaretDown, Play} from "@phosphor-icons/react"
import {Play} from "@phosphor-icons/react"

const useStyles = createUseStyles((theme: JSSTheme) => ({
evaluationContainer: {
Expand Down Expand Up @@ -45,10 +45,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
alignItems: "center",
width: "100%",
},
dropdownBtn: {
marginRight: 10,
width: "100%",
},
optionSelected: {
border: "1px solid #1668dc",
"& .ant-select-selection-item": {
Expand Down Expand Up @@ -96,10 +92,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
paddingLeft: 10,
paddingRight: 10,
},
variantDropdown: {
marginRight: 10,
width: "100%",
},
newCodeEval: {
display: "flex",
alignItems: "center",
Expand Down Expand Up @@ -226,28 +218,12 @@ const HumanEvaluationModal = ({
setSelectedTestset(testsetsList[selectedTestsetIndexInTestsetsList])
}

const getTestsetDropdownMenu = (): MenuProps => {
const items: MenuProps["items"] = testsetsList.map((testset, index) => {
return {
label: (
<>
<div data-cy={`testset-${index}`}>{testset.name}</div>
</>
),
key: `${testset.name}-${testset._id}`,
}
})

const menuProps: MenuProps = {
items,
onClick: ({key}) => {
const index = items.findIndex((item) => item?.key === key)
onTestsetSelect(index)
},
const testsetOptions = testsetsList.map((testset, index) => {
return {
label: <div data-cy={`testset-${index}`}>{testset.name}</div>,
value: `${testset.name}-${testset._id}`,
}

return menuProps
}
})

const handleAppVariantsMenuClick =
(dropdownIndex: number) =>
Expand All @@ -273,40 +249,24 @@ const HumanEvaluationModal = ({
})
}

const getVariantsDropdownMenu = (index: number): MenuProps => {
const selectedVariantsNames = selectedVariants.map((variant) => variant.variantName)

const items = variants.reduce((filteredVariants, variant, idx) => {
const label = variant.variantName

if (!selectedVariantsNames.includes(label)) {
filteredVariants.push({
label: (
<>
<div
data-cy={`variant-${idx}`}
className="flex items-center justify-between"
>
<span>{variant.variantName}</span>
<span className={classes.dropdownItemLabels}>
#{variant.variantId.split("-")[0]}
</span>
</div>
</>
),
key: label,
})
}

return filteredVariants
}, [])

const menuProps: MenuProps = {
items,
onClick: handleAppVariantsMenuClick(index),
}
const getVariantsOptionsMenu = (index: number) => {
const selectedVariantNames = selectedVariants
.filter((_, idx) => idx !== index)
.map((variant) => variant?.variantName)

return menuProps
return variants
.filter((variant) => !selectedVariantNames.includes(variant.variantName))
.map((variant) => ({
label: (
<div data-cy={`variant-${index}`} className="flex items-center justify-between">
<span>{variant.variantName}</span>
<span className={classes.dropdownItemLabels}>
#{variant.variantId.split("-")[0]}
</span>
</div>
),
value: variant.variantName,
}))
}

const onStartEvaluation = async () => {
Expand Down Expand Up @@ -379,37 +339,37 @@ const HumanEvaluationModal = ({
<div style={{display: "flex", flexDirection: "column", gap: 10}}>
<div>
<p>Which testset you want to use?</p>
<Dropdown menu={getTestsetDropdownMenu()}>
<Button
className={classes.dropdownBtn}
data-cy="selected-testset"
>
<div className={classes.dropdownStyles}>
{selectedTestset.name}
<CaretDown size={16} />
</div>
</Button>
</Dropdown>
<Select
showSearch
placeholder="Select a Test set"
className="w-full mb-2.5"
data-cy="selected-testset"
options={testsetOptions}
onSelect={(value) => {
const index = testsetOptions.findIndex(
(item) => item?.value === value,
)
onTestsetSelect(index)
}}
/>
</div>

<div>
<p>Which variants would you like to evaluate</p>
{Array.from({
length: evaluationType === "human_a_b_testing" ? 2 : 1,
}).map((_, index) => (
<Dropdown key={index} menu={getVariantsDropdownMenu(index)}>
<Button
className={classes.variantDropdown}
data-cy={`variants-dropdown-${index}`}
style={{marginTop: index === 1 ? 8 : 0}}
>
<div className={classes.dropdownStyles}>
{selectedVariants[index]?.variantName ||
"Select a variant"}
<CaretDown size={16} />
</div>
</Button>
</Dropdown>
<Select
showSearch
key={index}
placeholder="Select a Variant"
className={`w-full ${index === 1 && "mt-2"}`}
data-cy={`variants-dropdown-${index}`}
options={getVariantsOptionsMenu(index)}
onSelect={(value) =>
handleAppVariantsMenuClick(index)({key: value})
}
/>
))}
</div>

Expand Down
20 changes: 19 additions & 1 deletion agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,22 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
label="Which testset do you want to use?"
rules={[{required: true, message: "This field is required"}]}
>
<Select placeholder="Select testset" data-cy="select-testset-group">
<Select
showSearch
placeholder="Select testset"
data-cy="select-testset-group"
filterOption={(input, option) =>
(option?.label ?? "")
.toString()
.toLowerCase()
.includes(input.toLowerCase())
}
>
{testSets.map((testSet) => (
<Select.Option
key={testSet._id}
value={testSet._id}
label={testSet.name}
data-cy="select-testset-option"
>
{testSet.name}
Expand All @@ -178,11 +189,18 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
mode="multiple"
placeholder="Select variants"
data-cy="select-variant-group"
filterOption={(input, option) =>
(option?.label ?? "")
.toString()
.toLowerCase()
.includes(input.toLowerCase())
}
>
{variants.map((variant) => (
<Select.Option
key={variant.variantId}
value={variant.variantId}
label={variant.variantName}
data-cy="select-variant-option"
>
{variant.variantName}
Expand Down