From cd9c0ce830eb1bb3cb86d5f4c65355dccd035bab Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Fri, 8 Nov 2024 22:37:14 +0600 Subject: [PATCH 1/3] fix(frontend): testset overlaping issue --- .../cypress/e2e/ab-testing-evaluation.cy.ts | 21 +-- .../e2e/single-model-test-evaluation.cy.ts | 6 +- .../HumanEvaluationModal.tsx | 136 +++++++----------- .../NewEvaluation/NewEvaluationModal.tsx | 6 +- 4 files changed, 60 insertions(+), 109 deletions(-) diff --git a/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts b/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts index 6e85f00a94..fab3aaf1bc 100644 --- a/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts +++ b/agenta-web/cypress/e2e/ab-testing-evaluation.cy.ts @@ -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") diff --git a/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts b/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts index 9414bb71d6..5a702215d0 100644 --- a/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts +++ b/agenta-web/cypress/e2e/single-model-test-evaluation.cy.ts @@ -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") diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx index 084bf22fbc..ca9e4b1e83 100644 --- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx +++ b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx @@ -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" @@ -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: { @@ -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": { @@ -96,10 +92,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ paddingLeft: 10, paddingRight: 10, }, - variantDropdown: { - marginRight: 10, - width: "100%", - }, newCodeEval: { display: "flex", alignItems: "center", @@ -226,28 +218,12 @@ const HumanEvaluationModal = ({ setSelectedTestset(testsetsList[selectedTestsetIndexInTestsetsList]) } - const getTestsetDropdownMenu = (): MenuProps => { - const items: MenuProps["items"] = testsetsList.map((testset, index) => { - return { - label: ( - <> -
{testset.name}
- - ), - 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:
{testset.name}
, + value: `${testset.name}-${testset._id}`, } - - return menuProps - } + }) const handleAppVariantsMenuClick = (dropdownIndex: number) => @@ -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: ( - <> -
- {variant.variantName} - - #{variant.variantId.split("-")[0]} - -
- - ), - 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, index) => ({ + label: ( +
+ {variant.variantName} + + #{variant.variantId.split("-")[0]} + +
+ ), + value: variant.variantName, + })) } const onStartEvaluation = async () => { @@ -379,17 +339,19 @@ const HumanEvaluationModal = ({

Which testset you want to use?

- - - + + handleAppVariantsMenuClick(index)({key: value}) + } + /> ))}
diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx index 3ed4d5b8b5..80e4c2f6bd 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx @@ -156,7 +156,11 @@ const NewEvaluationModal: React.FC = ({onSuccess, ...props}) => { label="Which testset do you want to use?" rules={[{required: true, message: "This field is required"}]} > - {testSets.map((testSet) => ( Date: Tue, 12 Nov 2024 13:45:02 +0600 Subject: [PATCH 2/3] fix(cypress): ab evaluation failing tests --- .../components/HumanEvaluationModal/HumanEvaluationModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx index ca9e4b1e83..b106f7bdd2 100644 --- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx +++ b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx @@ -256,7 +256,7 @@ const HumanEvaluationModal = ({ return variants .filter((variant) => !selectedVariantNames.includes(variant.variantName)) - .map((variant, index) => ({ + .map((variant) => ({ label: (
{variant.variantName} From 2b76319de67ad2dc24f9aa46ba60c877f279e135 Mon Sep 17 00:00:00 2001 From: ashrafchowdury Date: Tue, 12 Nov 2024 14:13:25 +0600 Subject: [PATCH 3/3] fix(frontend): auto create evaluation model items search issue --- .../NewEvaluation/NewEvaluationModal.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx index 80e4c2f6bd..58b18e3582 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx @@ -160,11 +160,18 @@ const NewEvaluationModal: React.FC = ({onSuccess, ...props}) => { showSearch placeholder="Select testset" data-cy="select-testset-group" + filterOption={(input, option) => + (option?.label ?? "") + .toString() + .toLowerCase() + .includes(input.toLowerCase()) + } > {testSets.map((testSet) => ( {testSet.name} @@ -182,11 +189,18 @@ const NewEvaluationModal: React.FC = ({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) => ( {variant.variantName}