From 7b5fe6c7d7042ff702d4b01a5bac1b09f2f962eb Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Thu, 5 Dec 2024 03:39:50 +0100 Subject: [PATCH] feat(frontend): implemented create new evaluator in New evaluation modal --- .../NewEvaluation/NewEvaluationModal.tsx | 8 +- .../NewEvaluation/SelectEvaluatorSection.tsx | 187 +++++++++++------- .../NewEvaluation/SelectTestsetSection.tsx | 1 - .../NewEvaluation/SelectVariantSection.tsx | 13 +- .../autoEvaluation/AutoEvaluation.tsx | 4 +- .../EvaluatorsModal/EvaluatorsModal.tsx | 20 +- 6 files changed, 144 insertions(+), 89 deletions(-) diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx index dbe48eb1de..1a4703a22c 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/NewEvaluationModal.tsx @@ -49,14 +49,9 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({ type Props = { onSuccess?: () => void - setIsConfigEvaluatorModalOpen?: (val: string) => void } & React.ComponentProps -const NewEvaluationModal: React.FC = ({ - onSuccess, - setIsConfigEvaluatorModalOpen, - ...props -}) => { +const NewEvaluationModal: React.FC = ({onSuccess, ...props}) => { const classes = useStyles() const appId = useAppId() const [fetching, setFetching] = useState(false) @@ -204,7 +199,6 @@ const NewEvaluationModal: React.FC = ({ selectedEvalConfigs={selectedEvalConfigs} setSelectedEvalConfigs={setSelectedEvalConfigs} className={classes.collapseContainer} - setIsConfigEvaluatorModalOpen={setIsConfigEvaluatorModalOpen} /> diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx index b1e67717bd..56ee8c9920 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectEvaluatorSection.tsx @@ -2,14 +2,14 @@ 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> - setIsConfigEvaluatorModalOpen?: (val: string) => void } & React.ComponentProps const SelectEvaluatorSection = ({ @@ -17,10 +17,29 @@ const SelectEvaluatorSection = ({ evaluators, selectedEvalConfigs, setSelectedEvalConfigs, - setIsConfigEvaluatorModalOpen, ...props }: SelectEvaluatorSectionProps) => { const [searchTerm, setSearchTerm] = useState("") + const [isEvaluatorsModalOpen, setIsEvaluatorsModalOpen] = useState(false) + const [current, setCurrent] = useState(0) + + const prevEvaluatorConfigsRef = useRef(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 = [ // { @@ -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()), @@ -68,77 +87,97 @@ const SelectEvaluatorSection = ({ } return ( - -
Select Evaluator
-
- {selectedEvalConfig.length - ? selectedEvalConfig.map((config) => ( - } - onClose={() => handleRemoveEvalConfig(config.id)} - color={config.color} - className="mr-0" - > - {config.name} - - )) - : null} - - + <> + +
Select Evaluator
+
+ {selectedEvalConfig.length + ? selectedEvalConfig.map((config) => ( + } + onClose={() => handleRemoveEvalConfig(config.id)} + color={config.color} + className="mr-0" + > + {config.name} + + )) + : null} + + +
- - ), - extra: ( - { - event.stopPropagation() - }} - value={searchTerm} - onChange={(e) => setSearchTerm(e.target.value)} - /> - ), - children: ( - { - setSelectedEvalConfigs(selectedRowKeys as string[]) - }, - }} - className="ph-no-capture" - columns={columns} - rowKey={"id"} - dataSource={filteredVariant} - scroll={{x: true}} - bordered - pagination={false} - /> - ), - }, - ]} - /> + ), + extra: ( + { + event.stopPropagation() + }} + value={searchTerm} + onChange={(e) => setSearchTerm(e.target.value)} + /> + ), + children: ( +
{ + 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} + /> + ), + }, + ]} + /> + + setIsEvaluatorsModalOpen(false)} + current={current} + setCurrent={setCurrent} + fromNewEvaluationModalFlag={true} + /> + ) } diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectTestsetSection.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectTestsetSection.tsx index ef0822329f..1692314bb7 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectTestsetSection.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectTestsetSection.tsx @@ -100,7 +100,6 @@ const SelectTestsetSection = ({ { event.stopPropagation() }} diff --git a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectVariantSection.tsx b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectVariantSection.tsx index d5a6796719..51a49f74bf 100644 --- a/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectVariantSection.tsx +++ b/agenta-web/src/components/pages/evaluations/NewEvaluation/SelectVariantSection.tsx @@ -142,7 +142,6 @@ const SelectVariantSection = ({ { event.stopPropagation() }} @@ -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" diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/AutoEvaluation.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/AutoEvaluation.tsx index d1e131eeb3..e4fb88d856 100644 --- a/agenta-web/src/components/pages/evaluations/autoEvaluation/AutoEvaluation.tsx +++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/AutoEvaluation.tsx @@ -75,6 +75,7 @@ const AutoEvaluation = () => { "", ) const stoppers = useRef() + const [current, setCurrent] = useState(0) const runningEvaluationIds = useMemo( () => @@ -631,13 +632,14 @@ const AutoEvaluation = () => { setNewEvalModalOpen(false) fetchEvaluations() }} - setIsConfigEvaluatorModalOpen={setIsConfigEvaluatorModalOpen} /> {isConfigEvaluatorModalOpen === "open" && ( setIsConfigEvaluatorModalOpen("")} + current={current} + setCurrent={setCurrent} /> )} diff --git a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx index dfe43f6c1b..a70cc93559 100644 --- a/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx +++ b/agenta-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx @@ -13,7 +13,11 @@ import NewEvaluator from "./NewEvaluator" import Evaluators from "./Evaluators" import {useLocalStorage} from "usehooks-ts" -type EvaluatorsModalProps = {} & React.ComponentProps +type EvaluatorsModalProps = { + current: number + setCurrent: React.Dispatch> + fromNewEvaluationModalFlag?: boolean +} & React.ComponentProps const useStyles = createUseStyles(() => ({ modalWrapper: ({current, debugEvaluator}: {current: number; debugEvaluator: boolean}) => ({ @@ -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) @@ -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}