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

Jump to bottom

Feat: implemented human evaluations #2047

Merged
merged 8 commits into from
Sep 3, 2024
Merged

Feat: implemented human evaluations #2047

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
35d5eb3
ui(frontend): implemented human evaluations
ashrafchowdury Aug 30, 2024
704ef9b
fix: resolved merge conflict
ashrafchowdury Sep 2, 2024
c8bc24e
refactor: improved structure
ashrafchowdury Sep 2, 2024
fe0bc46
refactor(frontend): removed unused codes
ashrafchowdury Sep 3, 2024
0a02a48
fix(frontend): failing cypress tests
ashrafchowdury Sep 3, 2024
4732b7b
Merge branch 'AGE-587/-implement-evaluation-main-page' into feat/impl…
bekossy Sep 3, 2024
959e773
test(frontend): tests for eval tabs
ashrafchowdury Sep 3, 2024
538b852
fix(frontend): prettier error
ashrafchowdury Sep 3, 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
10 changes: 6 additions & 4 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 @@ -5,7 +5,6 @@ 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 {getErrorMessage} from "@/lib/helpers/errorHandler"
import {DownOutlined} from "@ant-design/icons"
import {EvaluationType} from "@/lib/enums"
import {PERMISSION_ERR_MSG} from "@/lib/helpers/axiosConfig"
import {getAllVariantParameters} from "@/lib/helpers/variantHelper"
Expand All @@ -15,6 +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"

const useStyles = createUseStyles((theme: JSSTheme) => ({
evaluationContainer: {
Expand Down Expand Up @@ -356,7 +356,7 @@ const HumanEvaluationModal = ({
setSelectedTestset({name: "Select a Test set"})
setSelectedVariants(new Array(1).fill({variantName: "Select a variant"}))
}}
title="Start a New Evaluation"
title="New Evaluation"
footer={null}
>
<Spin spinning={areAppVariantsLoading}>
Expand All @@ -373,7 +373,7 @@ const HumanEvaluationModal = ({
>
<div className={classes.dropdownStyles}>
{selectedTestset.name}
<DownOutlined />
<CaretDown size={16} />
</div>
</Button>
</Dropdown>
Expand All @@ -393,7 +393,7 @@ const HumanEvaluationModal = ({
<div className={classes.dropdownStyles}>
{selectedVariants[index]?.variantName ||
"Select a variant"}
<DownOutlined />
<CaretDown size={16} />
</div>
</Button>
</Dropdown>
Expand Down Expand Up @@ -430,6 +430,8 @@ const HumanEvaluationModal = ({
onClick={onStartEvaluation}
type="primary"
data-cy="start-new-evaluation-button"
icon={<Play size={14} />}
className="flex items-center"
>
Start
</Button>
Expand Down
115 changes: 96 additions & 19 deletions ...stingEvaluation/AbTestingEvalOverview.tsx → .../HumanEvaluations/AbTestingEvaluation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
fetchEvaluationResults,
} from "@/services/human-evaluations/api"
import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
import {Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
import {Database, GearSix, Note, Plus, Rocket, Trash} from "@phosphor-icons/react"
import {Avatar, Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
import {ColumnsType} from "antd/es/table"
import {useRouter} from "next/router"
Expand Down Expand Up @@ -62,9 +62,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
color: theme.colorSuccess,
},
},
button: {
display: "flex",
alignItems: "center",
},
}))

const AbTestingEvalOverview = () => {
const AbTestingEvaluation = ({viewType}: {viewType: "evaluation" | "overview"}) => {
const classes = useStyles()
const router = useRouter()
const appId = router.query.app_id as string
Expand All @@ -74,6 +78,8 @@ const AbTestingEvalOverview = () => {
const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
const [selectedEvalRecord, setSelectedEvalRecord] = useState<HumanEvaluationListTableDataType>()
const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
const [isDeleteMultipleEvalModalOpen, setIsDeleteMultipleEvalModalOpen] = useState(false)
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])

useEffect(() => {
if (!appId) return
Expand Down Expand Up @@ -102,9 +108,8 @@ const AbTestingEvalOverview = () => {
new Date(b.createdAt || 0).getTime() -
new Date(a.createdAt || 0).getTime(),
)
.slice(0, 5)

setEvaluationsList(results)
setEvaluationsList(viewType === "overview" ? results.slice(0, 5) : results)
} catch (error) {
console.error(error)
} finally {
Expand All @@ -119,6 +124,31 @@ const AbTestingEvalOverview = () => {
router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
}

const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys)
},
}

const handleDeleteMultipleEvaluations = async () => {
const evaluationsIds = selectedRowKeys.map((key) => key.toString())
try {
setFetchingEvaluations(true)
await deleteEvaluations(evaluationsIds)
setEvaluationsList((prevEvaluationsList) =>
prevEvaluationsList.filter(
(evaluation) => !evaluationsIds.includes(evaluation.key),
),
)
setSelectedRowKeys([])
message.success("Evaluations Deleted")
} catch (error) {
console.error(error)
} finally {
setFetchingEvaluations(false)
}
}

const handleDeleteEvaluation = async (record: HumanEvaluationListTableDataType) => {
try {
setFetchingEvaluations(true)
Expand Down Expand Up @@ -381,25 +411,60 @@ const AbTestingEvalOverview = () => {

return (
<div className={classes.container}>
<div className="flex items-center justify-between">
<Space>
<Title>A/B Testing Evaluations</Title>
<Button size="small" href={`/apps/${appId}/annotations/human_a_b_testing`}>
View all
{viewType === "overview" ? (
<div className="flex items-center justify-between">
<Space>
<Title>A/B Testing Evaluations</Title>
<Button size="small" href={`/apps/${appId}/annotations/human_a_b_testing`}>
View all
</Button>
</Space>

<Button
icon={<PlusOutlined />}
size="small"
onClick={() => setIsEvalModalOpen(true)}
>
Create new
</Button>
</div>
) : (
<div className="flex items-center justify-between">
<Button
type="primary"
icon={<Plus size={14} />}
className={classes.button}
onClick={() => setIsEvalModalOpen(true)}
>
Start new evaluation
</Button>
</Space>

<Button
icon={<PlusOutlined />}
size="small"
onClick={() => setIsEvalModalOpen(true)}
>
Create new
</Button>
</div>
<Space>
<Button
danger
type="text"
icon={<Trash size={14} />}
className={classes.button}
onClick={() => setIsDeleteMultipleEvalModalOpen(true)}
disabled={selectedRowKeys.length == 0}
>
Delete
</Button>
</Space>
</div>
)}

<Spin spinning={fetchingEvaluations}>
<Table
rowSelection={
viewType === "evaluation"
? {
type: "checkbox",
columnWidth: 48,
...rowSelection,
}
: undefined
}
className="ph-no-capture"
columns={columns}
dataSource={evaluationsList}
Expand Down Expand Up @@ -433,8 +498,20 @@ const AbTestingEvalOverview = () => {
evaluationType={"a/b testing evaluation"}
/>
)}

{isDeleteMultipleEvalModalOpen && (
<DeleteEvaluationModal
open={isDeleteMultipleEvalModalOpen}
onCancel={() => setIsDeleteMultipleEvalModalOpen(false)}
onOk={async () => {
await handleDeleteMultipleEvaluations()
setIsDeleteMultipleEvalModalOpen(false)
}}
evaluationType={"a/b testing evaluation"}
/>
)}
</div>
)
}

export default AbTestingEvalOverview
export default AbTestingEvaluation
116 changes: 97 additions & 19 deletions ...delEvaluation/SingleModelEvalOverview.tsx → ...umanEvaluations/SingleModelEvaluation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
fetchEvaluationResults,
} from "@/services/human-evaluations/api"
import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
import {Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
import {Database, GearSix, Note, Plus, Rocket, Trash} from "@phosphor-icons/react"
import {Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
import {ColumnsType} from "antd/es/table"
import {useRouter} from "next/router"
Expand Down Expand Up @@ -42,9 +42,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
color: theme.colorPrimary,
},
},
button: {
display: "flex",
alignItems: "center",
},
}))

const SingleModelEvalOverview = () => {
const SingleModelEvaluation = ({viewType}: {viewType: "evaluation" | "overview"}) => {
const classes = useStyles()
const router = useRouter()
const appId = router.query.app_id as string
Expand All @@ -57,6 +61,8 @@ const SingleModelEvalOverview = () => {
const [selectedEvalRecord, setSelectedEvalRecord] =
useState<SingleModelEvaluationListTableDataType>()
const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
const [isDeleteEvalMultipleModalOpen, setIsDeleteEvalMultipleModalOpen] = useState(false)
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])

useEffect(() => {
if (!appId) return
Expand Down Expand Up @@ -88,9 +94,10 @@ const SingleModelEvalOverview = () => {
new Date(b?.createdAt ?? 0).getTime() -
new Date(a?.createdAt ?? 0).getTime(),
)
.slice(0, 5)

setEvaluationsList(newEvalResults as any)
setEvaluationsList(
viewType === "overview" ? newEvalResults.slice(0, 5) : (newEvalResults as any),
)
} catch (error) {
console.error(error)
} finally {
Expand All @@ -101,6 +108,31 @@ const SingleModelEvalOverview = () => {
fetchEvaluations()
}, [appId])

const rowSelection = {
onChange: (selectedRowKeys: React.Key[]) => {
setSelectedRowKeys(selectedRowKeys)
},
}

const handleDeleteMultipleEvaluations = async () => {
const evaluationsIds = selectedRowKeys.map((key) => key.toString())
try {
setFetchingEvaluations(true)
await deleteEvaluations(evaluationsIds)
setEvaluationsList((prevEvaluationsList) =>
prevEvaluationsList.filter(
(evaluation) => !evaluationsIds.includes(evaluation.key),
),
)
setSelectedRowKeys([])
message.success("Evaluations Deleted")
} catch (error) {
console.error(error)
} finally {
setFetchingEvaluations(false)
}
}

const handleNavigation = (variantName: string, revisionNum: string) => {
router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
}
Expand Down Expand Up @@ -274,26 +306,61 @@ const SingleModelEvalOverview = () => {

return (
<div className={classes.container}>
<div className="flex items-center justify-between">
<Space>
<Title>Single Model Evaluations</Title>
{viewType === "overview" ? (
<div className="flex items-center justify-between">
<Space>
<Title>Single Model Evaluations</Title>

<Button size="small" href={`/apps/${appId}/annotations/single_model_test`}>
View all
</Button>
</Space>

<Button size="small" href={`/apps/${appId}/annotations/single_model_test`}>
View all
<Button
icon={<PlusOutlined />}
size="small"
onClick={() => setIsEvalModalOpen(true)}
>
Create new
</Button>
</div>
) : (
<div className="flex items-center justify-between">
<Button
type="primary"
icon={<Plus size={14} />}
className={classes.button}
onClick={() => setIsEvalModalOpen(true)}
>
Start new evaluation
</Button>
</Space>

<Button
icon={<PlusOutlined />}
size="small"
onClick={() => setIsEvalModalOpen(true)}
>
Create new
</Button>
</div>
<Space>
<Button
danger
type="text"
icon={<Trash size={14} />}
className={classes.button}
onClick={() => setIsDeleteEvalMultipleModalOpen(true)}
disabled={selectedRowKeys.length == 0}
>
Delete
</Button>
</Space>
</div>
)}

<Spin spinning={fetchingEvaluations}>
<Table
rowSelection={
viewType === "evaluation"
? {
type: "checkbox",
columnWidth: 48,
...rowSelection,
}
: undefined
}
className="ph-no-capture"
columns={columns}
dataSource={evaluationsList}
Expand Down Expand Up @@ -327,8 +394,19 @@ const SingleModelEvalOverview = () => {
evaluationType={"single model evaluation"}
/>
)}
{isDeleteEvalMultipleModalOpen && (
<DeleteEvaluationModal
open={isDeleteEvalMultipleModalOpen}
onCancel={() => setIsDeleteEvalMultipleModalOpen(false)}
onOk={async () => {
await handleDeleteMultipleEvaluations()
setIsDeleteEvalMultipleModalOpen(false)
}}
evaluationType={"single model evaluation"}
/>
)}
</div>
)
}

export default SingleModelEvalOverview
export default SingleModelEvaluation
Loading
Loading