From 7a4e8d1da22ec44e0ebb239a542ee5b4222880f4 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 12 Apr 2024 23:34:28 +0100
Subject: [PATCH 1/5] hide latency and cost columns on filter

---
 .../pages/evaluations/evaluationCompare/EvaluationCompare.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
index 6e7607f41b..a613825a09 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -221,6 +221,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         variants.forEach((variant, vi) => {
+            const isHidden = evalIds.includes(variant.evaluationId)
             colDefs.push({
                 headerComponent: (props: any) => (
                     <AgCustomHeader {...props}>
@@ -230,6 +231,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
+                hide: !isHidden,
                 minWidth: 120,
                 flex: 1,
                 valueGetter: (params) => {
@@ -243,6 +245,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         variants.forEach((variant, vi) => {
+            const isHidden = evalIds.includes(variant.evaluationId)
             colDefs.push({
                 headerComponent: (props: any) => (
                     <AgCustomHeader {...props}>
@@ -253,6 +256,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                     </AgCustomHeader>
                 ),
                 minWidth: 120,
+                hide: !isHidden,
                 flex: 1,
                 valueGetter: (params) => {
                     const cost = params.data?.variants.find(

From 5fcc65e0e189bd597aca15dcf20a8ad909290074 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 14 Apr 2024 11:34:57 +0100
Subject: [PATCH 2/5] added icon to dropdown, fixed cost and latency filters
 and improved dropdown triggers

---
 .../evaluationResults/EvaluationResults.tsx   | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
index ddca3a2bf3..4280f9a2bf 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
@@ -3,10 +3,11 @@ import {AgGridReact} from "ag-grid-react"
 import {useAppTheme} from "@/components/Layout/ThemeContextProvider"
 import {ColDef} from "ag-grid-community"
 import {createUseStyles} from "react-jss"
-import {Button, Dropdown, Space, Spin, Tag, Tooltip, theme} from "antd"
+import {Button, Dropdown, DropdownProps, Space, Spin, Tag, Tooltip, theme} from "antd"
 import {
     CheckOutlined,
     DeleteOutlined,
+    DownOutlined,
     PlusCircleOutlined,
     SlidersOutlined,
     SwapOutlined,
@@ -85,6 +86,7 @@ const EvaluationResults: React.FC<Props> = () => {
     const {token} = theme.useToken()
     const gridRef = useRef<AgGridReact>()
     const [hiddenCols, setHiddenCols] = useState<string[]>([])
+    const [filterColsDropdown, setFilterColsDropdown] = useState(false)
 
     const runningEvaluationIds = useMemo(
         () =>
@@ -279,6 +281,7 @@ const EvaluationResults: React.FC<Props> = () => {
                 flex: 1,
                 field: "average_latency",
                 headerName: "Latency",
+                hide: hiddenCols.includes("Latency"),
                 minWidth: 120,
                 ...getFilterParams("number"),
                 valueGetter: (params) => getTypedValue(params?.data?.average_latency),
@@ -287,6 +290,7 @@ const EvaluationResults: React.FC<Props> = () => {
                 flex: 1,
                 field: "average_cost",
                 headerName: "Cost",
+                hide: hiddenCols.includes("Cost"),
                 minWidth: 120,
                 ...getFilterParams("number"),
                 valueGetter: (params) => getTypedValue(params?.data?.average_cost),
@@ -338,6 +342,12 @@ const EvaluationResults: React.FC<Props> = () => {
         [colDefs],
     )
 
+    const handleOpenChange: DropdownProps["onOpenChange"] = (nextOpen, info) => {
+        if (info.source === "trigger" || nextOpen) {
+            setFilterColsDropdown(nextOpen)
+        }
+    }
+
     return (
         <>
             {!fetching && !evaluations.length ? (
@@ -384,6 +394,8 @@ const EvaluationResults: React.FC<Props> = () => {
                     <Space className={classes.buttonsGroup}>
                         <Dropdown
                             trigger={["click"]}
+                            open={filterColsDropdown}
+                            onOpenChange={handleOpenChange}
                             menu={{
                                 selectedKeys: shownCols,
                                 items: colDefs.map((configs) => ({
@@ -395,11 +407,16 @@ const EvaluationResults: React.FC<Props> = () => {
                                         </Space>
                                     ),
                                 })),
-                                onClick: ({key}) => onToggleEvaluatorVisibility(key),
+                                onClick: ({key}) => {
+                                    onToggleEvaluatorVisibility(key)
+                                    setFilterColsDropdown(true)
+                                },
                                 className: classes.dropdownMenu,
                             }}
                         >
-                            <Button>Filter Columns</Button>
+                            <Button>
+                                Filter Columns <DownOutlined />
+                            </Button>
                         </Dropdown>
                     </Space>
 

From a085846aefdb68abddf8c1b6fee57716d459bf2a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 16 Apr 2024 14:59:07 +0100
Subject: [PATCH 3/5] added multiselect filtering in comparison view

---
 .../evaluationCompare/EvaluationCompare.tsx   | 109 +++++++++++-------
 1 file changed, 67 insertions(+), 42 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
index a613825a09..cc180c2161 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -11,12 +11,12 @@ import {
 import {fetchAllComparisonResults} from "@/services/evaluations"
 import {ColDef} from "ag-grid-community"
 import {AgGridReact} from "ag-grid-react"
-import {Button, Space, Spin, Switch, Tag, Tooltip, Typography} from "antd"
+import {Button, Dropdown, DropdownProps, Space, Spin, Switch, Tag, Tooltip, Typography} from "antd"
 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 {CloseCircleOutlined, DownloadOutlined, UndoOutlined} from "@ant-design/icons"
+import {CheckOutlined, DownOutlined, DownloadOutlined} from "@ant-design/icons"
 import {getAppValues} from "@/contexts/app.context"
 import {useQueryParam} from "@/hooks/useQuery"
 import {LongTextCellRenderer} from "../cellRenderers/cellRenderers"
@@ -49,6 +49,21 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
+    dropdownMenu: {
+        "&>.ant-dropdown-menu-item": {
+            "& .anticon-check": {
+                display: "none",
+            },
+        },
+        "&>.ant-dropdown-menu-item-selected": {
+            "&:not(:hover)": {
+                backgroundColor: "transparent !important",
+            },
+            "& .anticon-check": {
+                display: "inline-flex !important",
+            },
+        },
+    },
 }))
 
 interface Props {}
@@ -58,7 +73,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
     const classes = useStyles()
     const {appTheme} = useAppTheme()
     const [evaluationIdsStr = ""] = useQueryParam("evaluations")
-    const [evalIds, setEvalIds] = useState(evaluationIdsStr.split(",").filter((item) => !!item))
+    const [evalIds] = useState(evaluationIdsStr.split(",").filter((item) => !!item))
     const [hiddenVariants, setHiddenVariants] = useState<string[]>([])
     const [showDiff, setShowDiff] = useLocalStorage("showDiff", "show")
     const [fetching, setFetching] = useState(false)
@@ -66,6 +81,13 @@ const EvaluationCompareMode: React.FC<Props> = () => {
     const [testset, setTestset] = useState<TestSet>()
     const [evaluators] = useAtom(evaluatorsAtom)
     const gridRef = useRef<AgGridReact<_EvaluationScenario>>()
+    const [filterColsDropdown, setFilterColsDropdown] = useState(false)
+
+    const handleOpenChange: DropdownProps["onOpenChange"] = (nextOpen, info) => {
+        if (info.source === "trigger" || nextOpen) {
+            setFilterColsDropdown(nextOpen)
+        }
+    }
 
     const variants = useMemo(() => {
         return rows[0]?.variants || []
@@ -116,8 +138,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         variants.forEach((variant, vi) => {
-            const isHidden = evalIds.includes(variant.evaluationId)
-
             colDefs.push({
                 headerComponent: (props: any) => (
                     <AgCustomHeader {...props}>
@@ -131,7 +151,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                 flex: 1,
                 field: `variants.${vi}.output` as any,
                 ...getFilterParams("text"),
-                hide: !isHidden,
+                hide: hiddenVariants.includes(variant.evaluationId),
                 cellRenderer: (params: any) => {
                     return (
                         <>
@@ -183,7 +203,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
 
         Object.entries(confgisMap).forEach(([_, configs]) => {
             configs.forEach(({config, variant, color}) => {
-                const isHidden = evalIds.includes(variant.evaluationId)
                 colDefs.push({
                     flex: 1,
                     minWidth: 200,
@@ -206,7 +225,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                     },
                     field: "variants.0.evaluatorConfigs.0.result" as any,
                     ...getFilterParams("text"),
-                    hide: !isHidden,
+                    hide: hiddenVariants.includes(variant.evaluationId),
                     valueGetter: (params) => {
                         return getTypedValue(
                             params.data?.variants
@@ -221,7 +240,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         variants.forEach((variant, vi) => {
-            const isHidden = evalIds.includes(variant.evaluationId)
             colDefs.push({
                 headerComponent: (props: any) => (
                     <AgCustomHeader {...props}>
@@ -231,7 +249,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
-                hide: !isHidden,
+                hide: hiddenVariants.includes(variant.evaluationId),
                 minWidth: 120,
                 flex: 1,
                 valueGetter: (params) => {
@@ -245,7 +263,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         variants.forEach((variant, vi) => {
-            const isHidden = evalIds.includes(variant.evaluationId)
             colDefs.push({
                 headerComponent: (props: any) => (
                     <AgCustomHeader {...props}>
@@ -256,7 +273,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                     </AgCustomHeader>
                 ),
                 minWidth: 120,
-                hide: !isHidden,
+                hide: hiddenVariants.includes(variant.evaluationId),
                 flex: 1,
                 valueGetter: (params) => {
                     const cost = params.data?.variants.find(
@@ -269,7 +286,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         return colDefs
-    }, [rows, showDiff, evalIds])
+    }, [rows, showDiff, hiddenVariants])
 
     const fetcher = () => {
         setFetching(true)
@@ -297,15 +314,21 @@ const EvaluationCompareMode: React.FC<Props> = () => {
     }, [appId, evaluationIdsStr])
 
     const handleToggleVariantVisibility = (evalId: string) => {
-        if (hiddenVariants.includes(evalId)) {
-            setHiddenVariants(hiddenVariants.filter((item) => item !== evalId))
-            setEvalIds([...evalIds, evalId])
-        } else {
+        if (!hiddenVariants.includes(evalId)) {
             setHiddenVariants([...hiddenVariants, evalId])
-            setEvalIds(evalIds.filter((val) => val !== evalId))
+        } else {
+            setHiddenVariants(hiddenVariants.filter((item) => item !== evalId))
         }
     }
 
+    const shownCols = useMemo(
+        () =>
+            evalIds
+                .map((item) => item)
+                .filter((item) => item !== undefined && !hiddenVariants.includes(item)) as string[],
+        [hiddenVariants],
+    )
+
     const onExport = () => {
         if (!gridRef.current) return
         const {currentApp} = getAppValues()
@@ -341,30 +364,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                                                 ? 0.4
                                                 : 1,
                                         }}
-                                        icon={
-                                            evalIds.length < 2 &&
-                                            evalIds.includes(
-                                                v.evaluationId,
-                                            ) ? null : evalIds.includes(v.evaluationId) ? (
-                                                <CloseCircleOutlined
-                                                    onClick={() =>
-                                                        handleToggleVariantVisibility(
-                                                            v.evaluationId,
-                                                        )
-                                                    }
-                                                    style={{cursor: "pointer"}}
-                                                />
-                                            ) : (
-                                                <UndoOutlined
-                                                    onClick={() =>
-                                                        handleToggleVariantVisibility(
-                                                            v.evaluationId,
-                                                        )
-                                                    }
-                                                    style={{cursor: "pointer"}}
-                                                />
-                                            )
-                                        }
                                     >
                                         <Link
                                             href={`/apps/${appId}/playground/?variant=${v.variantName}`}
@@ -385,6 +384,32 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                             onClick={() => setShowDiff(showDiff === "show" ? "hide" : "show")}
                         />
                     </Space>
+                    <Dropdown
+                        trigger={["click"]}
+                        open={filterColsDropdown}
+                        onOpenChange={handleOpenChange}
+                        menu={{
+                            selectedKeys: shownCols,
+                            items: variants.map((configs) => ({
+                                key: configs.evaluationId as string,
+                                label: (
+                                    <Space>
+                                        <CheckOutlined />
+                                        <>{configs.variantName}</>
+                                    </Space>
+                                ),
+                            })),
+                            onClick: ({key}) => {
+                                handleToggleVariantVisibility(key)
+                                setFilterColsDropdown(true)
+                            },
+                            className: classes.dropdownMenu,
+                        }}
+                    >
+                        <Button>
+                            Filter Columns <DownOutlined />
+                        </Button>
+                    </Dropdown>
                     <Tooltip title="Export as CSV">
                         <Button icon={<DownloadOutlined />} onClick={onExport}>
                             Export

From fa5dafc174bdf08b3657621e2a061f8d560a0d7e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 17 Apr 2024 05:38:10 +0100
Subject: [PATCH 4/5] filter list of evaluators in comparison view

---
 .../evaluationCompare/EvaluationCompare.tsx   | 43 +++++++++++--------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
index cc180c2161..c03818e12f 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -147,11 +147,12 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
+                headerName: `${variant.variantName}-output`,
                 minWidth: 280,
                 flex: 1,
                 field: `variants.${vi}.output` as any,
                 ...getFilterParams("text"),
-                hide: hiddenVariants.includes(variant.evaluationId),
+                hide: hiddenVariants.includes(`${variant.variantName}-output`),
                 cellRenderer: (params: any) => {
                     return (
                         <>
@@ -206,7 +207,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                 colDefs.push({
                     flex: 1,
                     minWidth: 200,
-                    headerName: config.name,
                     headerComponent: (props: any) => {
                         const evaluator = evaluators.find(
                             (item) => item.key === config.evaluator_key,
@@ -223,9 +223,10 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                             </AgCustomHeader>
                         )
                     },
+                    headerName: `${variant.variantName}-${config.name}`,
                     field: "variants.0.evaluatorConfigs.0.result" as any,
                     ...getFilterParams("text"),
-                    hide: hiddenVariants.includes(variant.evaluationId),
+                    hide: hiddenVariants.includes(`${variant.variantName}-${config.name}`),
                     valueGetter: (params) => {
                         return getTypedValue(
                             params.data?.variants
@@ -249,8 +250,9 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
-                hide: hiddenVariants.includes(variant.evaluationId),
+                hide: hiddenVariants.includes(`${variant.variantName}-latency`),
                 minWidth: 120,
+                headerName: `${variant.variantName}-latency`,
                 flex: 1,
                 valueGetter: (params) => {
                     const latency = params.data?.variants.find(
@@ -272,8 +274,9 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
+                headerName: `${variant.variantName}-cost`,
                 minWidth: 120,
-                hide: hiddenVariants.includes(variant.evaluationId),
+                hide: hiddenVariants.includes(`${variant.variantName}-cost`),
                 flex: 1,
                 valueGetter: (params) => {
                     const cost = params.data?.variants.find(
@@ -323,10 +326,10 @@ const EvaluationCompareMode: React.FC<Props> = () => {
 
     const shownCols = useMemo(
         () =>
-            evalIds
-                .map((item) => item)
+            colDefs
+                .map((item) => item.headerName)
                 .filter((item) => item !== undefined && !hiddenVariants.includes(item)) as string[],
-        [hiddenVariants],
+        [colDefs],
     )
 
     const onExport = () => {
@@ -390,15 +393,21 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         onOpenChange={handleOpenChange}
                         menu={{
                             selectedKeys: shownCols,
-                            items: variants.map((configs) => ({
-                                key: configs.evaluationId as string,
-                                label: (
-                                    <Space>
-                                        <CheckOutlined />
-                                        <>{configs.variantName}</>
-                                    </Space>
-                                ),
-                            })),
+                            items: colDefs
+                                .filter(
+                                    (item) =>
+                                        !item.headerName?.includes("Input") &&
+                                        !item.headerName?.includes("Expected Output"),
+                                )
+                                .map((configs) => ({
+                                    key: configs.headerName as string,
+                                    label: (
+                                        <Space>
+                                            <CheckOutlined />
+                                            <>{configs.headerName}</>
+                                        </Space>
+                                    ),
+                                })),
                             onClick: ({key}) => {
                                 handleToggleVariantVisibility(key)
                                 setFilterColsDropdown(true)

From ad58829bafb56bd46cdf077d9d1bf0b774495bd1 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 17 Apr 2024 12:34:30 +0100
Subject: [PATCH 5/5] modified comparison filters

---
 .../evaluationCompare/EvaluationCompare.tsx   | 71 +++++++++++++++----
 1 file changed, 57 insertions(+), 14 deletions(-)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
index c03818e12f..6fe925c66e 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -16,7 +16,13 @@ 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 {CheckOutlined, DownOutlined, DownloadOutlined} from "@ant-design/icons"
+import {
+    CheckOutlined,
+    CloseCircleOutlined,
+    DownOutlined,
+    DownloadOutlined,
+    UndoOutlined,
+} from "@ant-design/icons"
 import {getAppValues} from "@/contexts/app.context"
 import {useQueryParam} from "@/hooks/useQuery"
 import {LongTextCellRenderer} from "../cellRenderers/cellRenderers"
@@ -73,7 +79,8 @@ const EvaluationCompareMode: React.FC<Props> = () => {
     const classes = useStyles()
     const {appTheme} = useAppTheme()
     const [evaluationIdsStr = ""] = useQueryParam("evaluations")
-    const [evalIds] = useState(evaluationIdsStr.split(",").filter((item) => !!item))
+    const evaluationIdsArray = evaluationIdsStr.split(",").filter((item) => !!item)
+    const [evalIds, setEvalIds] = useState(evaluationIdsArray)
     const [hiddenVariants, setHiddenVariants] = useState<string[]>([])
     const [showDiff, setShowDiff] = useLocalStorage("showDiff", "show")
     const [fetching, setFetching] = useState(false)
@@ -147,12 +154,12 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
-                headerName: `${variant.variantName}-output`,
+                headerName: "Output",
                 minWidth: 280,
                 flex: 1,
                 field: `variants.${vi}.output` as any,
                 ...getFilterParams("text"),
-                hide: hiddenVariants.includes(`${variant.variantName}-output`),
+                hide: !evalIds.includes(variant.evaluationId) || hiddenVariants.includes("Output"),
                 cellRenderer: (params: any) => {
                     return (
                         <>
@@ -223,10 +230,12 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                             </AgCustomHeader>
                         )
                     },
-                    headerName: `${variant.variantName}-${config.name}`,
+                    headerName: config.name,
                     field: "variants.0.evaluatorConfigs.0.result" as any,
                     ...getFilterParams("text"),
-                    hide: hiddenVariants.includes(`${variant.variantName}-${config.name}`),
+                    hide:
+                        !evalIds.includes(variant.evaluationId) ||
+                        hiddenVariants.includes(config.name),
                     valueGetter: (params) => {
                         return getTypedValue(
                             params.data?.variants
@@ -250,9 +259,9 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
-                hide: hiddenVariants.includes(`${variant.variantName}-latency`),
+                hide: !evalIds.includes(variant.evaluationId) || hiddenVariants.includes("Latency"),
                 minWidth: 120,
-                headerName: `${variant.variantName}-latency`,
+                headerName: "Latency",
                 flex: 1,
                 valueGetter: (params) => {
                     const latency = params.data?.variants.find(
@@ -274,9 +283,9 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         </Space>
                     </AgCustomHeader>
                 ),
-                headerName: `${variant.variantName}-cost`,
+                headerName: "Cost",
                 minWidth: 120,
-                hide: hiddenVariants.includes(`${variant.variantName}-cost`),
+                hide: !evalIds.includes(variant.evaluationId) || hiddenVariants.includes("Cost"),
                 flex: 1,
                 valueGetter: (params) => {
                     const cost = params.data?.variants.find(
@@ -289,7 +298,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         return colDefs
-    }, [rows, showDiff, hiddenVariants])
+    }, [rows, showDiff, hiddenVariants, evalIds])
 
     const fetcher = () => {
         setFetching(true)
@@ -319,8 +328,12 @@ const EvaluationCompareMode: React.FC<Props> = () => {
     const handleToggleVariantVisibility = (evalId: string) => {
         if (!hiddenVariants.includes(evalId)) {
             setHiddenVariants([...hiddenVariants, evalId])
+            setEvalIds(evalIds.filter((val) => val !== evalId))
         } else {
             setHiddenVariants(hiddenVariants.filter((item) => item !== evalId))
+            if (evaluationIdsArray.includes(evalId)) {
+                setEvalIds([...evalIds, evalId])
+            }
         }
     }
 
@@ -367,6 +380,30 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                                                 ? 0.4
                                                 : 1,
                                         }}
+                                        icon={
+                                            evalIds.length < 2 &&
+                                            evalIds.includes(
+                                                v.evaluationId,
+                                            ) ? null : evalIds.includes(v.evaluationId) ? (
+                                                <CloseCircleOutlined
+                                                    onClick={() =>
+                                                        handleToggleVariantVisibility(
+                                                            v.evaluationId,
+                                                        )
+                                                    }
+                                                    style={{cursor: "pointer"}}
+                                                />
+                                            ) : (
+                                                <UndoOutlined
+                                                    onClick={() =>
+                                                        handleToggleVariantVisibility(
+                                                            v.evaluationId,
+                                                        )
+                                                    }
+                                                    style={{cursor: "pointer"}}
+                                                />
+                                            )
+                                        }
                                     >
                                         <Link
                                             href={`/apps/${appId}/playground/?variant=${v.variantName}`}
@@ -396,15 +433,21 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                             items: colDefs
                                 .filter(
                                     (item) =>
-                                        !item.headerName?.includes("Input") &&
+                                        !item.headerName?.startsWith("Input") &&
                                         !item.headerName?.includes("Expected Output"),
                                 )
+                                .reduce((acc, curr) => {
+                                    if (curr.headerName && !acc.includes(curr.headerName)) {
+                                        acc.push(curr.headerName)
+                                    }
+                                    return acc
+                                }, [] as string[])
                                 .map((configs) => ({
-                                    key: configs.headerName as string,
+                                    key: configs as string,
                                     label: (
                                         <Space>
                                             <CheckOutlined />
-                                            <>{configs.headerName}</>
+                                            <>{configs}</>
                                         </Space>
                                     ),
                                 })),