Skip to content

Commit

Permalink
feat(frontend): implemented create new evaluator in New evaluation modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@bekossy
bekossy committed Dec 5, 2024
1 parent 3664d26 commit 7b5fe6c
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 89 deletions.
8 changes: 1 addition & 7 deletions agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,14 +49,9 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({

type Props = {
onSuccess?: () => void
setIsConfigEvaluatorModalOpen?: (val: string) => void
} & React.ComponentProps<typeof Modal>

const NewEvaluationModal: React.FC<Props> = ({
onSuccess,
setIsConfigEvaluatorModalOpen,
...props
}) => {
const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
const classes = useStyles()
const appId = useAppId()
const [fetching, setFetching] = useState(false)
Expand Down Expand Up @@ -204,7 +199,6 @@ const NewEvaluationModal: React.FC<Props> = ({
selectedEvalConfigs={selectedEvalConfigs}
setSelectedEvalConfigs={setSelectedEvalConfigs}
className={classes.collapseContainer}
setIsConfigEvaluatorModalOpen={setIsConfigEvaluatorModalOpen}
/>
</Space>
</Spin>
Expand Down
187 changes: 113 additions & 74 deletions agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,44 @@ import {Evaluator, EvaluatorConfig} from "@/lib/Types"
import {CloseCircleOutlined, PlusOutlined} from "@ant-design/icons"
import {Button, Collapse, Input, Table, Tag} from "antd"
import {ColumnsType} from "antd/es/table"
import React, {useMemo, useState} from "react"
import React, {useEffect, useMemo, useRef, useState} from "react"
import EvaluatorsModal from "../autoEvaluation/EvaluatorsModal/EvaluatorsModal"

type SelectEvaluatorSectionProps = {
evaluatorConfigs: EvaluatorConfig[]
evaluators: Evaluator[]
selectedEvalConfigs: string[]
setSelectedEvalConfigs: React.Dispatch<React.SetStateAction<string[]>>
setIsConfigEvaluatorModalOpen?: (val: string) => void
} & React.ComponentProps<typeof Collapse>

const SelectEvaluatorSection = ({
evaluatorConfigs,
evaluators,
selectedEvalConfigs,
setSelectedEvalConfigs,
setIsConfigEvaluatorModalOpen,
...props
}: SelectEvaluatorSectionProps) => {
const [searchTerm, setSearchTerm] = useState("")
const [isEvaluatorsModalOpen, setIsEvaluatorsModalOpen] = useState(false)
const [current, setCurrent] = useState(0)

const prevEvaluatorConfigsRef = useRef<EvaluatorConfig[]>(evaluatorConfigs)

useEffect(() => {
const prevConfigs = prevEvaluatorConfigsRef.current
const newConfigs = evaluatorConfigs.filter(
(config) => !prevConfigs.some((prevConfig) => prevConfig.id === config.id),
)

if (newConfigs.length > 0) {
setSelectedEvalConfigs((prevSelected) => [
...prevSelected,
...newConfigs.map((config) => config.id),
])
}

prevEvaluatorConfigsRef.current = evaluatorConfigs
}, [evaluatorConfigs, setSelectedEvalConfigs])

const columns: ColumnsType<EvaluatorConfig> = [
// {
Expand Down Expand Up @@ -50,7 +69,7 @@ const SelectEvaluatorSection = ({
},
]

const filteredVariant = useMemo(() => {
const filteredEvalConfigs = useMemo(() => {
if (!searchTerm) return evaluatorConfigs
return evaluatorConfigs.filter((item) =>
item.name.toLowerCase().includes(searchTerm.toLowerCase()),
Expand All @@ -68,77 +87,97 @@ const SelectEvaluatorSection = ({
}

return (
<Collapse
defaultActiveKey={["1"]}
{...props}
items={[
{
key: "1",
label: (
<div className="flex items-center gap-2">
<div>Select Evaluator</div>
<div className="flex items-center gap-2 flex-1 flex-wrap">
{selectedEvalConfig.length
? selectedEvalConfig.map((config) => (
<Tag
key={config.id}
closeIcon={<CloseCircleOutlined />}
onClose={() => handleRemoveEvalConfig(config.id)}
color={config.color}
className="mr-0"
>
{config.name}
</Tag>
))
: null}

<Button
icon={<PlusOutlined />}
size="small"
onClick={(e) => {
e.stopPropagation()
setIsConfigEvaluatorModalOpen?.("open")
}}
>
Create new
</Button>
<>
<Collapse
defaultActiveKey={["1"]}
{...props}
items={[
{
key: "1",
label: (
<div className="flex items-center gap-2">
<div>Select Evaluator</div>
<div className="flex items-center gap-2 flex-1 flex-wrap">
{selectedEvalConfig.length
? selectedEvalConfig.map((config) => (
<Tag
key={config.id}
closeIcon={<CloseCircleOutlined />}
onClose={() => handleRemoveEvalConfig(config.id)}
color={config.color}
className="mr-0"
>
{config.name}
</Tag>
))
: null}

<Button
icon={<PlusOutlined />}
size="small"
onClick={(e) => {
e.stopPropagation()
setCurrent(1)
setIsEvaluatorsModalOpen(true)
}}
>
Create new
</Button>
</div>
</div>
</div>
),
extra: (
<Input.Search
placeholder="Search"
className="w-[300px] mx-6"
allowClear
onClick={(event) => {
event.stopPropagation()
}}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
),
children: (
<Table
rowSelection={{
type: "checkbox",
columnWidth: 48,
selectedRowKeys: selectedEvalConfigs,
onChange: (selectedRowKeys) => {
setSelectedEvalConfigs(selectedRowKeys as string[])
},
}}
className="ph-no-capture"
columns={columns}
rowKey={"id"}
dataSource={filteredVariant}
scroll={{x: true}}
bordered
pagination={false}
/>
),
},
]}
/>
),
extra: (
<Input.Search
placeholder="Search"
className="w-[300px] mx-6"
onClick={(event) => {
event.stopPropagation()
}}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
),
children: (
<Table
rowSelection={{
type: "checkbox",
columnWidth: 48,
selectedRowKeys: selectedEvalConfigs,
onChange: (selectedRowKeys) => {
const currentSelected = new Set(selectedEvalConfigs)

filteredEvalConfigs.forEach((item) => {
if (selectedRowKeys.includes(item.id)) {
currentSelected.add(item.id)
} else {
currentSelected.delete(item.id)
}
})

setSelectedEvalConfigs(Array.from(currentSelected))
},
}}
className="ph-no-capture"
columns={columns}
rowKey={"id"}
dataSource={filteredEvalConfigs}
scroll={{x: true}}
bordered
pagination={false}
/>
),
},
]}
/>

<EvaluatorsModal
open={isEvaluatorsModalOpen}
onCancel={() => setIsEvaluatorsModalOpen(false)}
current={current}
setCurrent={setCurrent}
fromNewEvaluationModalFlag={true}
/>
</>
)
}

Expand Down
1 change: 0 additions & 1 deletion agenta-web/src/components/pages/evaluations/NewEvaluation/SelectTestsetSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,6 @@ const SelectTestsetSection = ({
<Input.Search
placeholder="Search"
className="w-[300px] mx-6"
allowClear
onClick={(event) => {
event.stopPropagation()
}}
Expand Down
13 changes: 11 additions & 2 deletions agenta-web/src/components/pages/evaluations/NewEvaluation/SelectVariantSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,6 @@ const SelectVariantSection = ({
<Input.Search
placeholder="Search"
className="w-[300px] mx-6"
allowClear
onClick={(event) => {
event.stopPropagation()
}}
Expand All @@ -157,7 +156,17 @@ const SelectVariantSection = ({
columnWidth: 48,
selectedRowKeys: selectedVariantIds,
onChange: (selectedRowKeys) => {
setSelectedVariantIds(selectedRowKeys as string[])
const currentSelected = new Set(selectedVariantIds)

filteredVariant.forEach((item) => {
if (selectedRowKeys.includes(item.variantId)) {
currentSelected.add(item.variantId)
} else {
currentSelected.delete(item.variantId)
}
})

setSelectedVariantIds(Array.from(currentSelected))
},
}}
className="ph-no-capture"
Expand Down
4 changes: 3 additions & 1 deletion agenta-web/src/components/pages/evaluations/autoEvaluation/AutoEvaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const AutoEvaluation = () => {
"",
)
const stoppers = useRef<Function>()
const [current, setCurrent] = useState(0)

const runningEvaluationIds = useMemo(
() =>
Expand Down Expand Up @@ -631,13 +632,14 @@ const AutoEvaluation = () => {
setNewEvalModalOpen(false)
fetchEvaluations()
}}
setIsConfigEvaluatorModalOpen={setIsConfigEvaluatorModalOpen}
/>

{isConfigEvaluatorModalOpen === "open" && (
<EvaluatorsModal
open={isConfigEvaluatorModalOpen === "open"}
onCancel={() => setIsConfigEvaluatorModalOpen("")}
current={current}
setCurrent={setCurrent}
/>
)}

Expand Down
20 changes: 16 additions & 4 deletions ...a-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,11 @@ import NewEvaluator from "./NewEvaluator"
import Evaluators from "./Evaluators"
import {useLocalStorage} from "usehooks-ts"

type EvaluatorsModalProps = {} & React.ComponentProps<typeof Modal>
type EvaluatorsModalProps = {
current: number
setCurrent: React.Dispatch<React.SetStateAction<number>>
fromNewEvaluationModalFlag?: boolean
} & React.ComponentProps<typeof Modal>

const useStyles = createUseStyles(() => ({
modalWrapper: ({current, debugEvaluator}: {current: number; debugEvaluator: boolean}) => ({
Expand All @@ -36,9 +40,13 @@ const useStyles = createUseStyles(() => ({
}),
}))

const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
const EvaluatorsModal = ({
current,
setCurrent,
fromNewEvaluationModalFlag = false,
...props
}: EvaluatorsModalProps) => {
const appId = useAppId()
const [current, setCurrent] = useState(0)
const [debugEvaluator, setDebugEvaluator] = useLocalStorage("isDebugSelectionOpen", false)
const classes = useStyles({current, debugEvaluator})
const [evaluators, setEvaluators] = useAtom(evaluatorsAtom)
Expand Down Expand Up @@ -143,8 +151,12 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
testsets={testsets}
onSuccess={() => {
evalConfigFetcher()
setCurrent(0)
setEditMode(false)
if (fromNewEvaluationModalFlag) {
props.onCancel?.({} as any)
} else {
setCurrent(0)
}
}}
selectedTestcase={selectedTestcase}
selectedVariant={selectedVariant}
Expand Down

0 comments on commit 7b5fe6c

Please sign in to comment.