Merge pull request #2058 from Agenta-AI/enhance/automatic-tab-functio…

…nalitis

Feat: automatic evaluation functionalities

agenta-web/cypress/e2e/eval.comparison.cy.ts

@@ -39,20 +39,16 @@ describe("Evaluation Comparison Test", function () {
 
     context("Executing Evaluation Comparison Workflow", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations/results`)
-            cy.location("pathname").should("include", "/evaluations/results")
+            cy.visit(`/apps/${app_id}/evaluations`)
+            cy.location("pathname").should("include", "/evaluations")
         })
 
         it("Should create 2 new Evaluations", () => {
             cy.request({
                 url: `${Cypress.env().baseApiURL}/evaluations/?app_id=${app_id}`,
                 method: "GET",
             }).then((resp) => {
-                if (resp.body.length) {
-                    cy.get('[data-cy="new-evaluation-button"]').click()
-                } else {
-                    cy.get('[data-cy="new-evaluation-button__no_variants"]').click()
-                }
+                cy.get('[data-cy="new-evaluation-button"]').click()
             })
             cy.get(".ant-modal-content").should("exist")
 
@@ -73,19 +69,19 @@ describe("Evaluation Comparison Test", function () {
         })
 
         it("Should verify that there are completed evaluations in the list", () => {
-            cy.get('.ag-row[row-index="0"]').should("exist")
-            cy.get('.ag-row[row-index="1"]').should("exist")
-            cy.get('.ag-cell[col-id="status"]', {timeout: 60000})
+            cy.get(".ant-table-row").eq(0).should("exist")
+            cy.get(".ant-table-row").eq(1).should("exist")
+            cy.get('[data-cy="evaluation-status-cell"]', {timeout: 60000})
                 .eq(0)
                 .should("contain.text", "Completed")
-            cy.get('.ag-cell[col-id="status"]', {timeout: 60000})
+            cy.get('[data-cy="evaluation-status-cell"]', {timeout: 60000})
                 .eq(1)
                 .should("contain.text", "Completed")
         })
 
         it("Should select 2 evaluations, click on the compare button, and successfully navigate to the comparison page", () => {
-            cy.get("div.ag-selection-checkbox input").eq(0).check()
-            cy.get("div.ag-selection-checkbox input").eq(1).check()
+            cy.get(".ant-checkbox-input").eq(0).check()
+
             cy.get('[data-cy="evaluation-results-compare-button"]').should("not.be.disabled")
             cy.get('[data-cy="evaluation-results-compare-button"]').click()
             cy.location("pathname").should("include", "/evaluations/results/compare")

agenta-web/cypress/e2e/eval.evaluations.cy.ts

@@ -9,8 +9,8 @@ describe("Evaluations CRUD Operations Test", function () {
 
     context("Executing Evaluations CRUD operations", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations/results`)
-            cy.location("pathname").should("include", "/evaluations/results")
+            cy.visit(`/apps/${app_id}/evaluations`)
+            cy.location("pathname").should("include", "/evaluations")
         })
 
         it("Should successfully create an Evaluation", () => {
@@ -26,15 +26,17 @@ describe("Evaluations CRUD Operations Test", function () {
         })
 
         it("Should verify the successful creation and completion of the evaluation", () => {
-            cy.get('.ag-row[row-index="0"]').should("exist")
-            cy.get('.ag-cell[col-id="status"]').should("contain.text", "Completed")
+            cy.get(".ant-table-row").eq(0).should("exist")
+            cy.get('[data-cy="evaluation-status-cell"]').should("contain.text", "Completed")
         })
 
         it("Should select evaluation and successfully delete it", () => {
-            cy.get(".ag-root-wrapper").should("exist")
-            cy.get("div.ag-selection-checkbox input").eq(0).check()
-            cy.get(":nth-child(1) > .ant-btn > .ant-btn-icon > .anticon > svg").click()
-            cy.get(".ant-modal-confirm-btns > :nth-child(2) > span").click()
+            cy.get(".ant-checkbox-wrapper").should("exist")
+            cy.get(".ant-checkbox-input").eq(0).check()
+            cy.get('[data-cy="delete-evaluation-button"]').click()
+
+            cy.get(".ant-modal-content").should("exist")
+            cy.get(".ant-modal-footer > .ant-btn-primary").click()
         })
     })
 

agenta-web/cypress/e2e/eval.evaluators.cy.ts

@@ -2,6 +2,7 @@ import {randString} from "../../src/lib/helpers/utils"
 
 describe("Evaluators CRUD Operations Test", function () {
     let newEvalName = randString(5)
+    let editedEvalName = randString(5)
     let app_id
     before(() => {
         cy.createVariant()
@@ -12,30 +13,38 @@ describe("Evaluators CRUD Operations Test", function () {
 
     context("Executing Evaluators CRUD operations", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations/new-evaluator`)
-            cy.location("pathname").should("include", "/evaluations/new-evaluator")
+            cy.visit(`/apps/${app_id}/evaluations?configureEvaluatorModal=open`)
+            cy.url().should("include", "/evaluations?configureEvaluatorModal=open")
         })
 
-        it("Should successfully create an Evaluator", () => {
-            cy.get('[data-cy="evaluator-card"]').should("exist")
-            cy.get(".ant-space > :nth-child(2) > .ant-btn").click()
-            cy.get('[data-cy="new-evaluator-modal"]').should("exist")
-            cy.get('[data-cy^="select-new-evaluator"]').eq(0).click()
-            cy.get('[data-cy="configure-new-evaluator-modal"]').should("exist")
+        it("Should successfully create an evaluator", () => {
+            cy.get(".ant-modal-content").should("exist")
+            cy.get('[data-cy="create-new-evaluator-button"]').click()
+            cy.get('[data-cy="new-evaluator-list"]').eq(0).click()
+            cy.contains(/configure new evaluator/i)
             cy.get('[data-cy="configure-new-evaluator-modal-input"]').type(newEvalName)
             cy.get('[data-cy="configure-new-evaluator-modal-save-btn"]').click()
-            cy.get('[data-cy="evaluator-card"]').should("have.length", 2)
+            cy.get('[data-cy="evaluator-list"]').should("have.length.gt", 2)
         })
 
-        it("Should click on the edit button and successfully edit an evaluator", () => {
-            cy.get('[data-cy^="evaluator-card-edit-button"]').eq(0).click()
-            cy.get('[data-cy="configure-new-evaluator-modal-input"]').type("edit")
+        it("Should successfully edit an evaluator", () => {
+            cy.get(".ant-modal-content").should("exist")
+            cy.get('[data-cy="evaluator-menu-button"]').eq(0).trigger("mouseover")
+            cy.get(".ant-dropdown-menu").should("be.visible")
+            cy.get(".ant-dropdown-menu-item").eq(0).click()
+            cy.get('[data-cy="configure-new-evaluator-modal-input"]').clear()
+            cy.get('[data-cy="configure-new-evaluator-modal-input"]').type(editedEvalName)
             cy.get('[data-cy="configure-new-evaluator-modal-save-btn"]').click()
         })
 
-        it("Should click on the delete button and successfully delete an evaluator", () => {
-            cy.get('[data-cy^="evaluator-card-delete-button"]').eq(0).click()
-            cy.get(".ant-modal-confirm-btns > :nth-child(2) > span").click()
+        it("Should successfully delete an evaluator", () => {
+            cy.get(".ant-modal-content").should("exist")
+            cy.get('[data-cy="evaluator-menu-button"]').eq(0).trigger("mouseover")
+            cy.get(".ant-dropdown-menu").should("be.visible")
+            cy.get(".ant-dropdown-menu-item")
+                .contains(/delete/i)
+                .click()
+            cy.get(".ant-modal-footer > .ant-btn-primary").click()
         })
     })
 

agenta-web/cypress/e2e/eval.scenarios.cy.ts

@@ -9,24 +9,23 @@ describe("Evaluation Scenarios Test", function () {
 
     context("Executing Evaluation Scenarios Workflow", () => {
         beforeEach(() => {
-            cy.visit(`/apps/${app_id}/evaluations/results`)
-            cy.location("pathname").should("include", "/evaluations/results")
+            cy.visit(`/apps/${app_id}/evaluations`)
+            cy.location("pathname").should("include", "/evaluations")
         })
 
         it("Should successfully create an Evaluation", () => {
             cy.createNewEvaluation()
         })
 
         it("Should verify that evalaution was created and completed successfully", () => {
-            cy.get('.ag-row[row-index="0"]').should("exist")
-            cy.get('.ag-cell[col-id="status"]').should("contain.text", "Completed")
+            cy.get(".ant-table-row").eq(0).should("exist")
+            cy.get('[data-cy="evaluation-status-cell"]').should("contain.text", "Completed")
         })
 
         it("Should double click on the Evaluation and successfully navigate to the evalaution results page", () => {
-            cy.get(".ag-root-wrapper").should("exist")
-            cy.get('.ag-row-first > [col-id="aggregated_results"]').click()
+            cy.get(".ant-table-row").eq(0).should("exist")
+            cy.get(".ant-table-row").click()
             cy.wait(1000)
-            cy.get(".ag-cell-focus").dblclick()
             cy.contains(/Evaluation Results/i)
             cy.get('[data-cy="evalaution-scenarios-table"]').should("exist")
         })

agenta-web/cypress/support/commands/evaluations.ts

@@ -105,11 +105,7 @@ Cypress.Commands.add("createNewEvaluation", () => {
         url: `${Cypress.env().baseApiURL}/evaluations/?app_id=${app_id}`,
         method: "GET",
     }).then((resp) => {
-        if (resp.body.length) {
-            cy.get('[data-cy="new-evaluation-button"]').click()
-        } else {
-            cy.get('[data-cy="new-evaluation-button__no_variants"]').click()
-        }
+        cy.get('[data-cy="new-evaluation-button"]').click()
     })
     cy.get(".ant-modal-content").should("exist")
 

agenta-web/src/components/HumanEvaluations/AbTestingEvaluation.tsx

@@ -414,7 +414,10 @@ const AbTestingEvaluation = ({viewType}: {viewType: "evaluation" | "overview"})
                 <div className="flex items-center justify-between">
                     <Space>
                         <Title>A/B Testing Evaluations</Title>
-                        <Button size="small" href={`/apps/${appId}/evaluations/human_a_b_testing`}>
+                        <Button
+                            size="small"
+                            href={`/apps/${appId}/evaluations?selectedEvaluation=ab_testing_evaluation`}
+                        >
                             View all
                         </Button>
                     </Space>

agenta-web/src/components/HumanEvaluations/SingleModelEvaluation.tsx

@@ -311,7 +311,10 @@ const SingleModelEvaluation = ({viewType}: {viewType: "evaluation" | "overview"}
                     <Space>
                         <Title>Single Model Evaluations</Title>
 
-                        <Button size="small" href={`/apps/${appId}/evaluations/single_model_test`}>
+                        <Button
+                            size="small"
+                            href={`/apps/${appId}/evaluations?selectedEvaluation=single_model_evaluation`}
+                        >
                             View all
                         </Button>
                     </Space>

agenta-web/src/components/pages/evaluations/EvaluationErrorProps/EvaluationErrorPopover.tsx

@@ -0,0 +1,43 @@
+import {EvaluationError, JSSTheme, TypedValue} from "@/lib/Types"
+import {InfoCircleOutlined} from "@ant-design/icons"
+import {Button, Popover, Typography} from "antd"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    errModalStackTrace: {
+        maxWidth: 300,
+        "& code": {
+            display: "block",
+            width: "100%",
+        },
+    },
+}))
+
+const EvaluationErrorPopover = (result: {
+    result: TypedValue & {
+        error: null | EvaluationError
+    }
+}) => {
+    const classes = useStyles()
+
+    return (
+        <Popover
+            placement="bottom"
+            trigger={"click"}
+            arrow={false}
+            content={
+                <Typography.Paragraph code className={classes.errModalStackTrace}>
+                    {result.result.error?.stacktrace}
+                </Typography.Paragraph>
+            }
+            title={result.result.error?.message}
+        >
+            <Button onClick={(e) => e.stopPropagation()} icon={<InfoCircleOutlined />} type="link">
+                Read more
+            </Button>
+        </Popover>
+    )
+}
+
+export default EvaluationErrorPopover