From 9879bdbe602e181ac1a628aa287b9781e8dc3221 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Tue, 12 Mar 2024 23:13:48 +0100 Subject: [PATCH 1/3] feat: toggle visibility in comparison view --- .../evaluationCompare/EvaluationCompare.tsx | 45 ++++++++++++++++--- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx index 3536bd508f..1d0e6088ca 100644 --- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx +++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx @@ -16,7 +16,12 @@ import React, {useEffect, useMemo, useRef, useState} from "react" import {createUseStyles} from "react-jss" import {getFilterParams, getTypedValue} from "@/lib/helpers/evaluate" import {getColorFromStr, getRandomColors} from "@/lib/helpers/colors" -import {DownloadOutlined} from "@ant-design/icons" +import { + CloseCircleFilled, + CloseCircleOutlined, + DownloadOutlined, + UndoOutlined, +} from "@ant-design/icons" import {getAppValues} from "@/contexts/app.context" import {useQueryParam} from "@/hooks/useQuery" import {LongTextCellRenderer} from "../cellRenderers/cellRenderers" @@ -55,7 +60,9 @@ const EvaluationCompareMode: React.FC = () => { const appId = useAppId() const classes = useStyles() const {appTheme} = useAppTheme() - const [evaluationIdsStr = "", setEvaluationIdsStr] = useQueryParam("evaluations") + const [evaluationIdsStr = ""] = useQueryParam("evaluations") + const [evalIds, setEvalIds] = useState(evaluationIdsStr.split(",").filter((item) => !!item)) + const [hiddenVariants, setHiddenVariants] = useState([]) const [showDiff, setShowDiff] = useQueryParam("showDiff", "show") const [fetching, setFetching] = useState(false) const [rows, setRows] = useState([]) @@ -112,6 +119,8 @@ const EvaluationCompareMode: React.FC = () => { }) variants.forEach((variant, vi) => { + const isHidden = evalIds.includes(variant.evaluationId) + colDefs.push({ headerComponent: (props: any) => ( @@ -125,6 +134,7 @@ const EvaluationCompareMode: React.FC = () => { flex: 1, field: `variants.${vi}.output` as any, ...getFilterParams("text"), + hide: !isHidden, valueGetter: (params) => { return ( <> @@ -167,6 +177,7 @@ const EvaluationCompareMode: React.FC = () => { Object.entries(confgisMap).forEach(([_, configs]) => { configs.forEach(({config, variant, color}) => { + const isHidden = evalIds.includes(variant.evaluationId) colDefs.push({ flex: 1, headerName: config.name, @@ -188,6 +199,7 @@ const EvaluationCompareMode: React.FC = () => { }, field: "variants.0.evaluatorConfigs.0.result" as any, ...getFilterParams("text"), + hide: !isHidden, valueGetter: (params) => { return getTypedValue( params.data?.variants @@ -202,7 +214,7 @@ const EvaluationCompareMode: React.FC = () => { }) return colDefs - }, [rows, showDiff]) + }, [rows, showDiff, evalIds]) const fetcher = () => { setFetching(true) @@ -229,8 +241,14 @@ const EvaluationCompareMode: React.FC = () => { fetcher() }, [appId, evaluationIdsStr]) - const handleDeleteVariant = (evalId: string) => { - setEvaluationIdsStr(evaluationIds.filter((item) => item !== evalId).join(",")) + const handleToggleVariantVisibility = (evalId: string) => { + if (hiddenVariants.includes(evalId)) { + setHiddenVariants(hiddenVariants.filter((item) => item !== evalId)) + setEvalIds([...evalIds, evalId]) + } else { + setHiddenVariants([...hiddenVariants, evalId]) + setEvalIds(evalIds.filter((val) => val !== evalId)) + } } const onExport = () => { @@ -262,9 +280,22 @@ const EvaluationCompareMode: React.FC = () => { handleDeleteVariant(v.evaluationId)} - closable={evaluationIds.length > 1} + onClick={() => + handleToggleVariantVisibility(v.evaluationId) + } className={classes.tag} + style={{ + opacity: hiddenVariants.includes(v.evaluationId) + ? 0.4 + : 1, + }} + icon={ + evalIds.includes(v.evaluationId) ? ( + + ) : ( + + ) + } > Date: Fri, 15 Mar 2024 13:14:31 +0100 Subject: [PATCH 2/3] prevent visibility feat when only 1 eval left --- .../evaluations/evaluationCompare/EvaluationCompare.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx index 51dc86104a..0894b9d74a 100644 --- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx +++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx @@ -297,7 +297,10 @@ const EvaluationCompareMode: React.FC = () => { : 1, }} icon={ - evalIds.includes(v.evaluationId) ? ( + evalIds.length < 2 && + evalIds.includes( + v.evaluationId, + ) ? null : evalIds.includes(v.evaluationId) ? ( ) : ( From 525eacfdf92e1506d95d1077b4e29ec3329922ea Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Wed, 20 Mar 2024 00:22:47 +0100 Subject: [PATCH 3/3] bug fix --- .../evaluationCompare/EvaluationCompare.tsx | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx index 0894b9d74a..52a9b498eb 100644 --- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx +++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx @@ -16,12 +16,7 @@ import React, {useEffect, useMemo, useRef, useState} from "react" import {createUseStyles} from "react-jss" import {getFilterParams, getTypedValue} from "@/lib/helpers/evaluate" import {getColorFromStr, getRandomColors} from "@/lib/helpers/colors" -import { - CloseCircleFilled, - CloseCircleOutlined, - DownloadOutlined, - UndoOutlined, -} from "@ant-design/icons" +import {CloseCircleOutlined, DownloadOutlined, UndoOutlined} from "@ant-design/icons" import {getAppValues} from "@/contexts/app.context" import {useQueryParam} from "@/hooks/useQuery" import {LongTextCellRenderer} from "../cellRenderers/cellRenderers" @@ -287,9 +282,6 @@ const EvaluationCompareMode: React.FC = () => { - handleToggleVariantVisibility(v.evaluationId) - } className={classes.tag} style={{ opacity: hiddenVariants.includes(v.evaluationId) @@ -301,9 +293,23 @@ const EvaluationCompareMode: React.FC = () => { evalIds.includes( v.evaluationId, ) ? null : evalIds.includes(v.evaluationId) ? ( - + + handleToggleVariantVisibility( + v.evaluationId, + ) + } + style={{cursor: "pointer"}} + /> ) : ( - + + handleToggleVariantVisibility( + v.evaluationId, + ) + } + style={{cursor: "pointer"}} + /> ) } >