Merge pull request #1453 from Agenta-AI/issue-1450/-expand-evaluation…

…-output-on-result-overflow We can't see the full output value in evaluations scenarios
Agenta-AI · Mar 25, 2024 · c313cb9 · c313cb9
2 parents a567db7 + f77f150
commit c313cb9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 36 deletions.
diff --git a/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx b/agenta-web/src/components/pages/evaluations/cellRenderers/cellRenderers.tsx
@@ -71,7 +71,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-export function LongTextCellRenderer(params: ICellRendererParams) {
+export function LongTextCellRenderer(params: ICellRendererParams, output?: any) {
     const {value, api, node} = params
     const [expanded, setExpanded] = useState(
         node.rowHeight !== api.getSizesForCurrentTheme().rowHeight,
@@ -95,11 +95,11 @@ export function LongTextCellRenderer(params: ICellRendererParams) {
             cellsArr.forEach((cell) => {
                 cell.setAttribute(
                     "style",
-                    "overflow: visible; white-space: pre-wrap; text-overflow: unset;",
+                    "overflow: visible; white-space: pre-wrap; text-overflow: unset; line-height: 2.5em;",
                 )
             })
             const height = Math.max(...cellsArr.map((cell) => cell.scrollHeight))
-            node.setRowHeight(height <= defaultHeight ? defaultHeight * 2 : height)
+            node.setRowHeight(height <= defaultHeight ? defaultHeight * 2 : height + 10)
         } else {
             cellsArr.forEach((cell) => {
                 cell.setAttribute(
@@ -121,9 +121,9 @@ export function LongTextCellRenderer(params: ICellRendererParams) {
     return (
         <div
             className={classes.longCell}
-            style={expanded ? {textWrap: "wrap", lineHeight: "2em", paddingTop: 6.5} : undefined}
+            style={expanded ? {textWrap: "wrap", paddingTop: 6.5} : undefined}
         >
-            {value}
+            {output ? output : value}
             <Space align="center" size="middle">
                 {expanded ? (
                     <FullscreenExitOutlined onClick={onExpand} />

diff --git a/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx b/agenta-web/src/components/pages/evaluations/evaluationCompare/EvaluationCompare.tsx
@@ -97,7 +97,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                 field: `inputs.${ix}.value` as any,
                 ...getFilterParams("text"),
                 pinned: "left",
-                cellRenderer: LongTextCellRenderer,
+                cellRenderer: (params: any) => LongTextCellRenderer(params),
             })
         })
 
@@ -108,7 +108,7 @@ const EvaluationCompareMode: React.FC<Props> = () => {
             field: "correctAnswer",
             ...getFilterParams("text"),
             pinned: "left",
-            cellRenderer: LongTextCellRenderer,
+            cellRenderer: (params: any) => LongTextCellRenderer(params),
         })
 
         variants.forEach((variant, vi) => {
@@ -128,25 +128,28 @@ const EvaluationCompareMode: React.FC<Props> = () => {
                 cellRenderer: (params: any) => {
                     return (
                         <>
-                            {showDiff === "show" ? (
-                                <span>
-                                    <CompareOutputDiff
-                                        variantOutput={getTypedValue(
-                                            params.data?.variants.find(
-                                                (item: any) =>
-                                                    item.evaluationId === variant.evaluationId,
-                                            )?.output?.result,
-                                        )}
-                                        expectedOutput={params.data?.correctAnswer}
-                                    />
-                                </span>
-                            ) : (
-                                getTypedValue(
-                                    params.data?.variants.find(
-                                        (item: any) => item.evaluationId === variant.evaluationId,
-                                    )?.output?.result,
-                                )
-                            )}
+                            {showDiff === "show"
+                                ? LongTextCellRenderer(
+                                      params,
+                                      <CompareOutputDiff
+                                          variantOutput={getTypedValue(
+                                              params.data?.variants.find(
+                                                  (item: any) =>
+                                                      item.evaluationId === variant.evaluationId,
+                                              )?.output?.result,
+                                          )}
+                                          expectedOutput={params.data?.correctAnswer}
+                                      />,
+                                  )
+                                : LongTextCellRenderer(
+                                      params,
+                                      getTypedValue(
+                                          params.data?.variants.find(
+                                              (item: any) =>
+                                                  item.evaluationId === variant.evaluationId,
+                                          )?.output?.result,
+                                      ),
+                                  )}
                         </>
                     )
                 },

diff --git a/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx b/agenta-web/src/components/pages/evaluations/evaluationScenarios/EvaluationScenarios.tsx
@@ -71,7 +71,7 @@ const EvaluationScenarios: React.FC<Props> = () => {
                 valueGetter: (params) => {
                     return getTypedValue(params.data?.inputs[index])
                 },
-                cellRenderer: LongTextCellRenderer,
+                cellRenderer: (params: any) => LongTextCellRenderer(params),
             })
         })
         colDefs.push({
@@ -83,7 +83,7 @@ const EvaluationScenarios: React.FC<Props> = () => {
             valueGetter: (params) => {
                 return params.data?.correct_answer?.toString() || ""
             },
-            cellRenderer: LongTextCellRenderer,
+            cellRenderer: (params: any) => LongTextCellRenderer(params),
         })
         evalaution?.variants.forEach((_, index) => {
             colDefs.push({
@@ -97,14 +97,15 @@ const EvaluationScenarios: React.FC<Props> = () => {
                     if (result && result.type == "error") {
                         return `${result?.error?.message}\n${result?.error?.stacktrace}`
                     }
-                    return showDiff === "show" ? (
-                        <CompareOutputDiff
-                            variantOutput={result?.value}
-                            expectedOutput={params.data?.correct_answer}
-                        />
-                    ) : (
-                        result?.value
-                    )
+                    return showDiff === "show"
+                        ? LongTextCellRenderer(
+                              params,
+                              <CompareOutputDiff
+                                  variantOutput={result?.value}
+                                  expectedOutput={params.data?.correct_answer}
+                              />,
+                          )
+                        : LongTextCellRenderer(params)
                 },
                 valueGetter: (params) => {
                     const result = params.data?.outputs[index].result