1215 | UI/UX improvements in evaluations

agenta-web/dev.Dockerfile

@@ -1,37 +1,37 @@
 FROM node:18-alpine
 
-WORKDIR /app
+# WORKDIR /app
 
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN \
-    if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-    elif [ -f package-lock.json ]; then npm i; \
-    elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
-    # Allow install without lockfile, so example works even without Node.js installed locally
-    else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
-    fi
+# # Install dependencies based on the preferred package manager
+# COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+# RUN \
+#     if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+#     elif [ -f package-lock.json ]; then npm i; \
+#     elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
+#     # Allow install without lockfile, so example works even without Node.js installed locally
+#     else echo "Warning: Lockfile not found. It is recommended to commit lockfiles to version control." && yarn install; \
+#     fi
 
-COPY src ./src
-COPY public ./public
-COPY next.config.js .
-COPY tsconfig.json .
-COPY postcss.config.js .
-COPY .env .
-RUN if [ -f .env.local ]; then cp .env.local .; fi
-# # used in cloud
-COPY sentry.* .
-# Next.js collects completely anonymous telemetry data about general usage. Learn more here: https://nextjs.org/telemetry
-# Uncomment the following line to disable telemetry at run time
-# ENV NEXT_TELEMETRY_DISABLED 1
+# COPY src ./src
+# COPY public ./public
+# COPY next.config.js .
+# COPY tsconfig.json .
+# COPY postcss.config.js .
+# COPY .env .
+# RUN if [ -f .env.local ]; then cp .env.local .; fi
+# # # used in cloud
+# COPY sentry.* .
+# # Next.js collects completely anonymous telemetry data about general usage. Learn more here: https://nextjs.org/telemetry
+# # Uncomment the following line to disable telemetry at run time
+# # ENV NEXT_TELEMETRY_DISABLED 1
 
-# Note: Don't expose ports here, Compose will handle that for us
+# # Note: Don't expose ports here, Compose will handle that for us
 
-# Start Next.js in development mode based on the preferred package manager
-CMD \
-    if [ -f yarn.lock ]; then yarn dev; \
-    elif [ -f package-lock.json ]; then npm run dev; \
-    elif [ -f pnpm-lock.yaml ]; then pnpm dev; \
-    else yarn dev; \
-    fi
+# # Start Next.js in development mode based on the preferred package manager
+# CMD \
+#     if [ -f yarn.lock ]; then yarn dev; \
+#     elif [ -f package-lock.json ]; then npm run dev; \
+#     elif [ -f pnpm-lock.yaml ]; then pnpm dev; \
+#     else yarn dev; \
+#     fi
 

agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx

@@ -3,9 +3,14 @@ import {EvaluationStatus, JSSTheme, _Evaluation} from "@/lib/Types"
 import {CopyOutlined, FullscreenExitOutlined, FullscreenOutlined} from "@ant-design/icons"
 import {ICellRendererParams} from "ag-grid-community"
 import {GlobalToken, Space, Typography, message, theme} from "antd"
+import dayjs from "dayjs"
+import relativeTime from "dayjs/plugin/relativeTime"
+import duration from "dayjs/plugin/duration"
 import Link from "next/link"
 import React, {useCallback, useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
+dayjs.extend(relativeTime)
+dayjs.extend(duration)
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     statusCell: {
@@ -71,7 +76,27 @@ export function LongTextCellRenderer(params: ICellRendererParams) {
     }, [])
 
     const onExpand = useCallback(() => {
-        node.setRowHeight(api.getSizesForCurrentTheme().rowHeight * (expanded ? 1 : 5))
+        const cells = document.querySelectorAll(`[row-id='${node.id}'] .ag-cell > *`)
+        const cellsArr = Array.from(cells || [])
+        const defaultHeight = api.getSizesForCurrentTheme().rowHeight
+        if (!expanded) {
+            cellsArr.forEach((cell) => {
+                cell.setAttribute(
+                    "style",
+                    "overflow: visible; white-space: pre-wrap; text-overflow: unset;",
+                )
+            })
+            const height = Math.max(...cellsArr.map((cell) => cell.scrollHeight))
+            node.setRowHeight(height <= defaultHeight ? defaultHeight * 2 : height)
+        } else {
+            cellsArr.forEach((cell) => {
+                cell.setAttribute(
+                    "style",
+                    "overflow: hidden; white-space: nowrap; text-overflow: ellipsis;",
+                )
+            })
+            node.setRowHeight(defaultHeight)
+        }
         api.onRowHeightChanged()
     }, [expanded])
 
@@ -147,3 +172,19 @@ export const LinkCellRenderer = React.memo(
     },
     (prev, next) => prev.value === next.value && prev.href === next.href,
 )
+
+export const DateFromNowRenderer = React.memo(
+    (params: ICellRendererParams) => {
+        const [date, setDate] = useState(params.value)
+
+        useEffect(() => {
+            const interval = setInterval(() => {
+                setDate((date: any) => dayjs(date).add(1, "second").valueOf())
+            }, 60000)
+            return () => clearInterval(interval)
+        }, [])
+
+        return <Typography.Text>{dayjs(date).fromNow()}</Typography.Text>
+    },
+    (prev, next) => prev.value === next.value,
+)

agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx

@@ -14,7 +14,7 @@ import {AgGridReact} from "ag-grid-react"
 import {Space, Spin, Tag, Tooltip, Typography} from "antd"
 import React, {useEffect, useMemo, useRef, useState} from "react"
 import {createUseStyles} from "react-jss"
-import {getFilterParams, getTypedValue} from "../evaluationResults/EvaluationResults"
+import {getFilterParams, getTypedValue} from "@/lib/helpers/evaluate"
 import {getColorFromStr, getRandomColors} from "@/lib/helpers/colors"
 import {DownloadOutlined} from "@ant-design/icons"
 import {getAppValues} from "@/contexts/app.context"
@@ -209,8 +209,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         fetcher()
     }, [appId, evaluationIdsStr])
 
-    // useAgGridCustomHeaders(gridRef.current?.api)
-
     const handleDeleteVariant = (evalId: string) => {
         setEvaluationIdsStr(evaluationIds.filter((item) => item !== evalId).join(","))
     }

agenta-web/src/components/pages/evaluations/evaluationResults/EmptyEvaluations.tsx

@@ -0,0 +1,89 @@
+import {JSSTheme} from "@/lib/Types"
+import {PlusCircleOutlined, SlidersOutlined} from "@ant-design/icons"
+import {Button, Empty, Space, Tooltip, Typography} from "antd"
+import Image from "next/image"
+import React from "react"
+import {createUseStyles} from "react-jss"
+import evaluationIllustration from "@/media/eval-illustration.png"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    emptyRoot: {
+        height: "calc(100vh - 260px)",
+        display: "grid",
+        placeItems: "center",
+    },
+    empty: {
+        "& .ant-empty-description": {
+            fontSize: 18,
+            marginTop: "0.75rem",
+            marginBottom: "1.5rem",
+        },
+    },
+    emptyImg: {
+        width: 120,
+        height: 120,
+        objectFit: "contain",
+        filter: theme.isDark ? "invert(1)" : "none",
+        opacity: 0.85,
+    },
+}))
+
+interface Props {
+    onConfigureEvaluators?: () => void
+    onBeginEvaluation?: () => void
+}
+
+const EmptyEvaluations: React.FC<Props> = ({onConfigureEvaluators, onBeginEvaluation}) => {
+    const classes = useStyles()
+
+    return (
+        <div className={classes.emptyRoot}>
+            <Empty
+                className={classes.empty}
+                description={
+                    <span>
+                        Welcome to the evaluation setup!
+                        <br />
+                        Are you ready to get started?
+                    </span>
+                }
+                image={
+                    <Image
+                        className={classes.emptyImg}
+                        alt="no evaluation illustration"
+                        src={evaluationIllustration}
+                    />
+                }
+            >
+                <Space direction="vertical">
+                    <Tooltip title="Select and customize evaluators such as custom code or regex evaluators.">
+                        <Button
+                            size="large"
+                            icon={<SlidersOutlined />}
+                            type="primary"
+                            onClick={onConfigureEvaluators}
+                        >
+                            Configure Your Evaluators
+                        </Button>
+                    </Tooltip>
+                    <Typography.Text>Or</Typography.Text>
+                    <Tooltip
+                        title="Choose your variants and evaluators to start the evaluation process."
+                        placement="bottom"
+                    >
+                        <Button
+                            size="large"
+                            icon={<PlusCircleOutlined />}
+                            type="default"
+                            onClick={onBeginEvaluation}
+                        >
+                            Begin Evaluation Now
+                        </Button>
+                    </Tooltip>
+                </Space>
+            </Empty>
+        </div>
+    )
+}
+
+export default EmptyEvaluations