refactored comparison view and added diff feature to eval result view

Agenta-AI · Feb 16, 2024 · 4f70981 · 4f70981
1 parent 78aad83
commit 4f70981
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 51 deletions.
diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -24,7 +24,7 @@ import Link from "next/link"
 import AgCustomHeader from "@/components/AgCustomHeader/AgCustomHeader"
 import {useAtom} from "jotai"
 import {evaluatorsAtom} from "@/lib/atoms/evaluation"
-import {diffWords} from "diff"
+import CompareOutputDiff from "@/components/CompareOutputDiff/CompareOutputDiff"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     table: {
@@ -83,47 +83,6 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         [evaluationIdsStr],
     )
 
-    const compareStrings = (variantOutput1: any, variantOutput2: any) => {
-        const results = diffWords(variantOutput1, variantOutput2)
-
-        const display = results.map((part, index) => {
-            if (part.removed) {
-                return (
-                    <span
-                        key={index}
-                        style={{
-                            backgroundColor: "#ccffd8",
-                            color: "#000",
-                        }}
-                    >
-                        {part.value}
-                    </span>
-                )
-            } else if (!part.added) {
-                return <span key={index}>{part.value}</span>
-            } else if (part.added) {
-                return (
-                    <>
-                        {" "}
-                        <span
-                            key={index}
-                            style={{
-                                backgroundColor: "#ff818266",
-                                textDecoration: "line-through",
-                                color: appTheme === "dark" ? "#fff" : "#000",
-                            }}
-                        >
-                            {part.value}
-                        </span>
-                    </>
-                )
-            }
-            return null
-        })
-
-        return <span>{display}</span>
-    }
-
     const colDefs = useMemo(() => {
         const colDefs: ColDef<ComparisonResultRow>[] = []
         const {inputs, variants} = rows[0] || {}
@@ -171,15 +130,15 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                         <>
                             {showDiff === "show" ? (
                                 <span>
-                                    {compareStrings(
-                                        getTypedValue(
+                                    <CompareOutputDiff
+                                        variantOutput={getTypedValue(
                                             params.data?.variants.find(
                                                 (item) =>
                                                     item.evaluationId === variant.evaluationId,
                                             )?.output?.result,
-                                        ),
-                                        params.data?.correctAnswer,
-                                    )}
+                                        )}
+                                        expectedOutput={params.data?.correctAnswer}
+                                    />
                                 </span>
                             ) : (
                                 getTypedValue(
@@ -243,7 +202,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
         })
 
         return colDefs
-    }, [rows, showDiff, appTheme])
+    }, [rows, showDiff])
 
     const fetcher = () => {
         setFetching(true)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx b/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx
@@ -9,7 +9,7 @@ import {
 import {DeleteOutlined, DownloadOutlined} from "@ant-design/icons"
 import {ColDef} from "ag-grid-community"
 import {AgGridReact} from "ag-grid-react"
-import {Space, Spin, Tag, Tooltip, Typography} from "antd"
+import {Space, Spin, Switch, Tag, Tooltip, Typography} from "antd"
 import {useRouter} from "next/router"
 import React, {useEffect, useMemo, useRef, useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -21,6 +21,8 @@ import {LongTextCellRenderer, ResultRenderer} from "../cellRenderers/cellRendere
 import AgCustomHeader from "@/components/AgCustomHeader/AgCustomHeader"
 import {useAtom} from "jotai"
 import {evaluatorsAtom} from "@/lib/atoms/evaluation"
+import CompareOutputDiff from "@/components/CompareOutputDiff/CompareOutputDiff"
+import {useQueryParam} from "@/hooks/useQuery"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     infoRow: {
@@ -53,6 +55,7 @@ const EvaluationScenarios: React.FC<Props> = () => {
     const [evaluators, setEvaluators] = useAtom(evaluatorsAtom)
     const gridRef = useRef<AgGridReact<_EvaluationScenario>>()
     const evalaution = scenarios[0]?.evaluation
+    const [showDiff, setShowDiff] = useQueryParam("showDiff", "show")
 
     const colDefs = useMemo(() => {
         const colDefs: ColDef<_EvaluationScenario>[] = []
@@ -94,7 +97,18 @@ const EvaluationScenarios: React.FC<Props> = () => {
                     if (result && result.type == "error") {
                         return `${result?.error?.message}\n${result?.error?.stacktrace}`
                     }
-                    return result?.value
+                    return (
+                        <>
+                            {showDiff === "show" ? (
+                                <CompareOutputDiff
+                                    variantOutput={result?.value}
+                                    expectedOutput={params.data?.correct_answer}
+                                />
+                            ) : (
+                                result?.value
+                            )}
+                        </>
+                    )
                 },
                 cellRenderer: LongTextCellRenderer,
             })
@@ -126,7 +140,7 @@ const EvaluationScenarios: React.FC<Props> = () => {
             })
         })
         return colDefs
-    }, [evalaution, scenarios])
+    }, [evalaution, scenarios, showDiff])
 
     const fetcher = () => {
         setFetching(true)
@@ -200,6 +214,13 @@ const EvaluationScenarios: React.FC<Props> = () => {
                     </Space>
                 </Space>
                 <Space size="middle" align="center">
+                    <Space>
+                        <Typography.Text>Show Difference: </Typography.Text>
+                        <Switch
+                            value={showDiff === "show"}
+                            onClick={() => setShowDiff(showDiff === "show" ? "hide" : "show")}
+                        />
+                    </Space>
                     <Tooltip title="Export as CSV">
                         <DownloadOutlined onClick={onExport} style={{fontSize: 16}} />
                     </Tooltip>