Merge pull request #1298 from Agenta-AI/issue-1230/-Improve-human-eva…

…l-loading-state Improve human evaluation loading state
Agenta-AI · Jan 29, 2024 · dd81133 · dd81133
2 parents 3a51601 + 531f87f
commit dd81133
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 14 deletions.
diff --git a/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/ABTestingEvaluationTable.tsx
@@ -42,6 +42,7 @@ interface EvaluationTableProps {
     evaluation: Evaluation
     columnsCount: number
     evaluationScenarios: ABTestingEvaluationTableRow[]
+    isLoading: boolean
 }
 
 export type ABTestingEvaluationTableRow = EvaluationScenario & {
@@ -129,6 +130,7 @@ const useStyles = createUseStyles({
 const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
     evaluation,
     evaluationScenarios,
+    isLoading,
 }) => {
     const classes = useStyles()
     const router = useRouter()
@@ -560,6 +562,7 @@ const ABTestingEvaluationTable: React.FC<EvaluationTableProps> = ({
                     updateEvaluationScenarioData={updateEvaluationScenarioData}
                     evaluation={evaluation}
                     variantData={variantData}
+                    isLoading={isLoading}
                 />
             )}
         </div>

diff --git a/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx b/agenta-web/src/components/EvaluationTable/SingleModelEvaluationTable.tsx
@@ -36,6 +36,7 @@ const {Title} = Typography
 interface EvaluationTableProps {
     evaluation: Evaluation
     evaluationScenarios: SingleModelEvaluationRow[]
+    isLoading: boolean
 }
 
 export type SingleModelEvaluationRow = EvaluationScenario & {
@@ -170,6 +171,7 @@ export const ParamsFormWithRun = ({
 const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
     evaluation,
     evaluationScenarios,
+    isLoading,
 }) => {
     const classes = useStyles()
     const router = useRouter()
@@ -580,6 +582,7 @@ const SingleModelEvaluationTable: React.FC<EvaluationTableProps> = ({
                     updateEvaluationScenarioData={updateEvaluationScenarioData}
                     evaluation={evaluation}
                     variantData={variantData}
+                    isLoading={isLoading}
                 />
             )}
         </div>

diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/index.tsx
@@ -2,13 +2,14 @@ import {useQueryParam} from "@/hooks/useQuery"
 import {ChatMessage, Evaluation, EvaluationScenario, Variant} from "@/lib/Types"
 import {
     LeftOutlined,
+    LoadingOutlined,
     PlayCircleOutlined,
     PushpinFilled,
     PushpinOutlined,
     QuestionCircleOutlined,
     RightOutlined,
 } from "@ant-design/icons"
-import {Button, Empty, Form, Input, Space, Tooltip, Typography, theme} from "antd"
+import {Button, Empty, Form, Input, Result, Space, Tooltip, Typography, theme} from "antd"
 import React, {useCallback, useEffect, useMemo, useRef} from "react"
 import {createUseStyles} from "react-jss"
 import EvaluationVotePanel from "./EvaluationVotePanel"
@@ -123,6 +124,11 @@ const useStyles = createUseStyles({
         minWidth: 240,
         maxWidth: 500,
     },
+    centeredItem: {
+        display: "grid",
+        placeItems: "center",
+        width: "100%",
+    },
 })
 
 interface Props {
@@ -134,6 +140,7 @@ interface Props {
     updateEvaluationScenarioData: (id: string, data: Partial<EvaluationScenario>) => void
     evaluation: Evaluation
     variantData: ReturnType<typeof useVariants>
+    isLoading: boolean
 }
 
 const EvaluationCardView: React.FC<Props> = ({
@@ -145,6 +152,7 @@ const EvaluationCardView: React.FC<Props> = ({
     updateEvaluationScenarioData,
     evaluation,
     variantData,
+    isLoading,
 }) => {
     const classes = useStyles()
     const {token} = theme.useToken()
@@ -163,6 +171,8 @@ const EvaluationCardView: React.FC<Props> = ({
         return {scenario: evaluationScenarios[scenarioIndex], scenarioIndex}
     }, [scenarioId, evaluationScenarios])
 
+    // console.log(evaluationScenarios, isLoading)
+
     const rootRef = useRef<HTMLDivElement>(null)
     const opened = useRef(false)
     const callbacks = useRef({
@@ -316,7 +326,9 @@ const EvaluationCardView: React.FC<Props> = ({
 
     return (
         <div className={classes.root} tabIndex={1} ref={rootRef}>
-            {scenario ? (
+            {isLoading ? (
+                <Result className={classes.centeredItem} icon={<LoadingOutlined />} />
+            ) : scenario ? (
                 <>
                     <div className={classes.evaluation}>
                         <div className={classes.heading}>
@@ -492,7 +504,7 @@ const EvaluationCardView: React.FC<Props> = ({
                     </div>
                 </>
             ) : (
-                <Empty description="Evaluation not found" />
+                <Empty description="Evaluation not found" className={classes.centeredItem} />
             )}
         </div>
     )

diff --git a/agenta-web/src/components/Evaluations/Evaluations.tsx b/agenta-web/src/components/Evaluations/Evaluations.tsx
@@ -189,6 +189,10 @@ export default function Evaluations() {
         fetchData()
     }, [appId])
 
+    useEffect(() => {
+        getAllProviderLlmKeys()
+    }, [])
+
     useEffect(() => {
         if (variants.length > 0) {
             const fetchAndSetSchema = async () => {

diff --git a/agenta-web/src/components/pages/evaluations/evaluationResults/NewEvaluationModal.tsx b/agenta-web/src/components/pages/evaluations/evaluationResults/NewEvaluationModal.tsx
@@ -1,7 +1,7 @@
 import {useAppId} from "@/hooks/useAppId"
 import {JSSTheme, Variant, LLMRunRateLimit, testset} from "@/lib/Types"
 import {evaluatorConfigsAtom, evaluatorsAtom} from "@/lib/atoms/evaluation"
-import {apiKeyObject, getAllProviderLlmKeys, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
+import {getAllProviderLlmKeys, apiKeyObject, redirectIfNoLLMKeys} from "@/lib/helpers/utils"
 import {fetchTestsets, fetchVariants} from "@/lib/services/api"
 import {CreateEvaluationData, createEvalutaiton} from "@/services/evaluations"
 import {PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons"
@@ -78,6 +78,10 @@ const NewEvaluationModal: React.FC<Props> = ({onSuccess, ...props}) => {
     const [showRateLimitInputs, setShowRateLimitInputs] = useState(false)
     const [form] = Form.useForm()
 
+    useEffect(() => {
+        getAllProviderLlmKeys()
+    }, [])
+
     useEffect(() => {
         setFetching(true)
         form.resetFields()

diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/[evaluation_id]/human_a_b_testing.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/[evaluation_id]/human_a_b_testing.tsx
@@ -2,7 +2,7 @@ import ABTestingEvaluationTable from "@/components/EvaluationTable/ABTestingEval
 import {Evaluation} from "@/lib/Types"
 import {loadEvaluation, loadEvaluationsScenarios, loadTestset} from "@/lib/services/api"
 import {useRouter} from "next/router"
-import {useEffect} from "react"
+import {useEffect, useState} from "react"
 import {fetchVariants} from "@/lib/services/api"
 import {useAtom} from "jotai"
 import {evaluationAtom, evaluationScenariosAtom} from "@/lib/atoms/evaluation"
@@ -15,6 +15,7 @@ export default function Evaluation() {
         : ""
     const [evaluationScenarios, setEvaluationScenarios] = useAtom(evaluationScenariosAtom)
     const [evaluation, setEvaluation] = useAtom(evaluationAtom)
+    const [isLoading, setIsLoading] = useState(true)
     const appId = router.query.app_id as string
     const columnsCount = 2
 
@@ -23,8 +24,13 @@ export default function Evaluation() {
             return
         }
         const init = async () => {
-            const data = await loadEvaluationsScenarios(evaluationTableId, evaluation)
-            setEvaluationScenarios(data)
+            setIsLoading(true)
+            try {
+                const data = await loadEvaluationsScenarios(evaluationTableId, evaluation)
+                setEvaluationScenarios(data)
+            } finally {
+                setTimeout(() => setIsLoading(false), 1000)
+            }
         }
         init()
     }, [evaluation])
@@ -64,6 +70,7 @@ export default function Evaluation() {
                     columnsCount={columnsCount}
                     evaluationScenarios={evaluationScenarios as any[]}
                     evaluation={evaluation}
+                    isLoading={isLoading}
                 />
             )}
         </div>

diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/[evaluation_id]/single_model_test.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/[evaluation_id]/single_model_test.tsx
@@ -12,6 +12,7 @@ export default function Evaluation() {
         ? router.query.evaluation_id.toString()
         : ""
     const [evaluationScenarios, setEvaluationScenarios] = useState<EvaluationScenario[]>([])
+    const [isLoading, setIsLoading] = useState(true)
     const [evaluation, setEvaluation] = useState<Evaluation>()
     const appId = router.query.app_id as string
 
@@ -20,13 +21,18 @@ export default function Evaluation() {
             return
         }
         const init = async () => {
-            const data = await loadEvaluationsScenarios(evaluationTableId, evaluation)
-            setEvaluationScenarios(
-                data.map((item: GenericObject) => {
-                    const numericScore = parseInt(item.score)
-                    return {...item, score: isNaN(numericScore) ? null : numericScore}
-                }),
-            )
+            setIsLoading(true)
+            try {
+                const data = await loadEvaluationsScenarios(evaluationTableId, evaluation)
+                setEvaluationScenarios(
+                    data.map((item: GenericObject) => {
+                        const numericScore = parseInt(item.score)
+                        return {...item, score: isNaN(numericScore) ? null : numericScore}
+                    }),
+                )
+            } finally {
+                setTimeout(() => setIsLoading(false), 1000)
+            }
         }
         init()
     }, [evaluation])
@@ -65,6 +71,7 @@ export default function Evaluation() {
                 <SingleModelEvaluationTable
                     evaluationScenarios={evaluationScenarios as any[]}
                     evaluation={evaluation}
+                    isLoading={isLoading}
                 />
             )}
         </div>