fix(frontend): renamed helper func to get first index of variant id, …

…fixed ab test button colors, updated Variant types

agenta-web/cypress/support/commands/evaluations.ts

@@ -45,9 +45,9 @@ Cypress.Commands.add("createVariant", () => {
 
     cy.get('[data-cy="enter-app-name-modal-button"]').click()
 
-    cy.url().should("include", "/overview")
+    cy.url().should("include", "/playground")
     cy.url().then((url) => {
-        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/overview/)[1]
+        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/playground/)[1]
 
         cy.wrap(app_id).as("app_id")
     })

agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx

@@ -75,7 +75,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
             onTimeoutRetry?.()
         } else if (isSuccess) {
             props.onCancel?.(e)
-            if (appId) router.push(`/apps/${appId}/overview`)
+            if (appId) router.push(`/apps/${appId}/playground`)
         }
     }
 
@@ -112,7 +112,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
                         },
                     }
                     if (obj.starting_app?.type === "loading") obj.starting_app.type = "success"
-                    if (appId) router.push(`/apps/${appId}/overview`)
+                    if (appId) router.push(`/apps/${appId}/playground`)
                     return obj
                 case "bad_request":
                 case "error":

agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVotePanel.tsx

@@ -95,7 +95,16 @@ const ComparisonVote: React.FC<ComparisonVoteProps> = ({
             {variants.map((variant, ix) => (
                 <ConfigProvider
                     key={variant.variantId}
-                    theme={{token: {colorError: VARIANT_COLORS[ix]}}}
+                    theme={{
+                        components: {
+                            Button: {
+                                colorError: VARIANT_COLORS[ix],
+                                colorErrorHover: VARIANT_COLORS[ix],
+                                colorErrorBorderHover: VARIANT_COLORS[ix],
+                                colorErrorActive: VARIANT_COLORS[ix],
+                            },
+                        },
+                    }}
                 >
                     <Button
                         onClick={getOnClick(variant.variantId)}
@@ -112,7 +121,18 @@ const ComparisonVote: React.FC<ComparisonVoteProps> = ({
                 className={vertical ? classes.btnsDividerVertical : classes.btnsDividerHorizontal}
                 style={{borderColor: token.colorBorder}}
             />
-            <ConfigProvider theme={{token: {colorError: VARIANT_COLORS[2]}}}>
+            <ConfigProvider
+                theme={{
+                    components: {
+                        Button: {
+                            colorError: VARIANT_COLORS[2],
+                            colorErrorBorderHover: VARIANT_COLORS[2],
+                            colorErrorHover: VARIANT_COLORS[2],
+                            colorErrorActive: VARIANT_COLORS[2],
+                        },
+                    },
+                }}
+            >
                 <Button
                     danger
                     type={value === goodId ? "primary" : undefined}

agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx

@@ -186,7 +186,7 @@ const AbTestingEvalOverview = () => {
             title: "Results",
             key: "results",
             onHeaderCell: () => ({
-                style: {minWidth: 160},
+                style: {minWidth: 240},
             }),
             render: (_, record: HumanEvaluationListTableDataType) => {
                 const stat1 = getVotesPercentage(record, 0)

agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx

@@ -238,7 +238,7 @@ const AutomaticEvalOverview = () => {
             dataIndex: "aggregated_results",
             key: "results",
             onHeaderCell: () => ({
-                style: {minWidth: 160},
+                style: {minWidth: 240},
             }),
             render: (_, record) => {
                 if (!evaluators?.length) return

agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx

@@ -4,7 +4,7 @@ import {Badge, Input, Modal, Table, Tag, theme, Typography} from "antd"
 import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentModal from "./DeploymentModal"
-import {splitVariantId} from "@/lib/helpers/utils"
+import {formatVariantIdWithHash} from "@/lib/helpers/utils"
 
 const {Search} = Input
 
@@ -91,7 +91,9 @@ const ChangeVariantModal = ({
                                                     <Tag>
                                                         <Badge
                                                             color={token.colorPrimary}
-                                                            text={splitVariantId(record.variantId)}
+                                                            text={formatVariantIdWithHash(
+                                                                record.variantId,
+                                                            )}
                                                         />
                                                     </Tag>
                                                     <CaretRight />

agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx

@@ -1,5 +1,5 @@
 import {useAppId} from "@/hooks/useAppId"
-import {filterVariantParameters, splitVariantId} from "@/lib/helpers/utils"
+import {filterVariantParameters, formatVariantIdWithHash} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CloseOutlined, MoreOutlined} from "@ant-design/icons"
@@ -101,7 +101,7 @@ const VariantDrawer = ({
                                     revision: selectedVariant.revision,
                                 })}
                             </Title>
-                            <Tag>{splitVariantId(selectedVariant.variantId)}</Tag>
+                            <Tag>{formatVariantIdWithHash(selectedVariant.variantId)}</Tag>
                         </div>
                     </div>
 

agenta-web/src/components/pages/overview/variants/VariantPopover.tsx

@@ -1,9 +1,10 @@
-import {isDemo, splitVariantId} from "@/lib/helpers/utils"
+import {isDemo, formatVariantIdWithHash} from "@/lib/helpers/utils"
 import {Environment, Variant} from "@/lib/Types"
+import {fetchSingleProfile} from "@/services/api"
 import {ArrowSquareOut} from "@phosphor-icons/react"
 import {Badge, Button, Popover, Tag, theme, Typography} from "antd"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 
 const {useToken} = theme
 
@@ -16,6 +17,22 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
     const router = useRouter()
     const {token} = useToken()
     const appId = router.query.app_id as string
+    const [variantUsername, setVariantUsername] = useState<string>()
+
+    useEffect(() => {
+        const handleFetchVariantProfile = async () => {
+            try {
+                if (!selectedDeployedVariant) return
+                const data = await fetchSingleProfile(selectedDeployedVariant.modifiedById)
+                setVariantUsername(data.username)
+            } catch (error) {
+                console.error(error)
+            }
+        }
+
+        handleFetchVariantProfile()
+    }, [selectedDeployedVariant])
+
     return (
         <Popover
             {...props}
@@ -35,18 +52,16 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
                             href={`/apps/${appId}/playground?variant=${env.deployed_variant_name}`}
                         />
                     </div>
-                    {selectedDeployedVariant && isDemo() && (
-                        <Typography.Text className="font-normal">
-                            {selectedDeployedVariant.modifiedBy.username}
-                        </Typography.Text>
+                    {selectedDeployedVariant && (
+                        <Typography.Text className="font-normal">{variantUsername}</Typography.Text>
                     )}
                 </div>
             }
         >
             <Tag className="w-fit cursor-pointer" onClick={(e) => e.stopPropagation()}>
                 <Badge
                     color={token.colorPrimary}
-                    text={splitVariantId(env.deployed_app_variant_id as string)}
+                    text={formatVariantIdWithHash(env.deployed_app_variant_id as string)}
                 />
             </Tag>
         </Popover>

agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx

@@ -6,7 +6,7 @@ import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "an
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React, {useMemo, useState} from "react"
+import React, {useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import VariantDrawer from "./VariantDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -16,6 +16,7 @@ import {deleteSingleVariant} from "@/services/playground/api"
 import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import DeployVariantModal from "./DeployVariantModal"
 import VariantComparisonModal from "./VariantComparisonModal"
+import {fetchSingleProfile} from "@/services/api"
 
 const {Title} = Typography
 
@@ -68,6 +69,24 @@ const VariantsOverview = ({
     const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
     const [isDeployVariantModalOpen, setIsDeployVariantModalOpen] = useState(false)
     const [isComparisonModalOpen, setIsComparisonModalOpen] = useState(false)
+    const [usernames, setUsernames] = useState<Record<string, string>>({})
+
+    useEffect(() => {
+        const fetchUsernames = async () => {
+            const usernameMap: Record<string, string> = {}
+            await Promise.all(
+                variantList.map(async (variant) => {
+                    if (!usernameMap[variant.modifiedById]) {
+                        const userProfile = await fetchSingleProfile(variant.modifiedById)
+                        usernameMap[variant.modifiedById] = userProfile?.username || "-"
+                    }
+                }),
+            )
+            setUsernames(usernameMap)
+        }
+
+        fetchUsernames()
+    }, [variantList])
 
     const selectedVariantsToCompare = useMemo(() => {
         const variants = variantList.filter((variant) =>
@@ -122,27 +141,27 @@ const VariantsOverview = ({
         },
         {
             title: "Last modified",
-            dataIndex: "lastModified",
-            key: "lastModified",
+            dataIndex: "updatedAt",
+            key: "updatedAt",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return <div>{record.lastModified}</div>
+                return <div>{record.updatedAt}</div>
             },
         },
     ]
 
-    if (isDemo()) {
+    if (!isDemo()) {
         columns.push({
             title: "Modified by",
-            dataIndex: "modifiedBy",
-            key: "modifiedBy",
+            dataIndex: "modifiedById",
+            key: "modifiedById",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return <div>{record.modifiedBy.username}</div>
+                return <div>{usernames[record.modifiedById] || <Spin />}</div>
             },
         })
     }

agenta-web/src/lib/Types.ts

@@ -40,14 +40,9 @@ export interface Variant {
     baseName: string
     configName: string
     revision: number
-    lastModified: string
+    updatedAt: string
     createdAt: string
-    modifiedBy: {
-        id: string
-        uid: string
-        username: string
-        profilePicture: string | null
-    }
+    modifiedById: string
 }
 
 // Define the interface for the tabs item in playground page

agenta-web/src/lib/helpers/utils.ts

@@ -366,6 +366,6 @@ export const filterVariantParameters = ({
     )
 }
 
-export const splitVariantId = (variantId: string) => {
+export const formatVariantIdWithHash = (variantId: string) => {
     return `# ${variantId.split("-")[0]}`
 }

agenta-web/src/services/api.ts

@@ -12,6 +12,7 @@ import {
     KeyValuePair,
     FuncResponse,
     BaseResponse,
+    User,
 } from "@/lib/Types"
 
 //Prefix convention:
@@ -48,9 +49,9 @@ export async function fetchVariants(
                 baseName: variant.base_name,
                 configName: variant.config_name,
                 revision: variant.revision,
-                lastModified: formatDay(variant.date_modified),
-                modifiedBy: variant.modified_by,
-                createdAt: formatDay(variant.date_created),
+                updatedAt: formatDay(variant.updated_at),
+                modifiedById: variant.modified_by_id,
+                createdAt: formatDay(variant.created_at),
             }
             return v
         })
@@ -204,6 +205,17 @@ export const fetchProfile = async (ignoreAxiosError: boolean = false) => {
     } as any)
 }
 
+export const fetchSingleProfile = async (
+    userId: string,
+    ignoreAxiosError: boolean = false,
+): Promise<User> => {
+    const {data} = await axios.get(`${getAgentaApiUrl()}/api/profile?user_id=${userId}`, {
+        _ignoreError: ignoreAxiosError,
+    } as any)
+
+    return data
+}
+
 export const fetchData = async (url: string): Promise<any> => {
     const response = await fetch(url)
     return response.json()