update compare table columns for no reference (#116)

Co-authored-by: Rowan Cheung <[email protected]>

Author: cheungrowan

arthur_bench/server/js/package.json

@@ -4,8 +4,8 @@
     "private": true,
     "overrides": {
         "@babel/preset-typescript": "7.21.4",
-        "@types/react": "18.0.17",
-        "@types/react-dom": "18.0.6",
+        "@types/react": "^18.0.17",
+        "@types/react-dom": "^18.0.6",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-fela": "12.2.0",
@@ -30,8 +30,8 @@
         "react-redux": "8.0.2",
         "react-router-dom": "6.3.0",
         "resources": "file:packages/resources",
-        "tsconfig": "file:packages/tsconfig",
         "ts-node": "10.9.1",
+        "tsconfig": "file:packages/tsconfig",
         "ui": "file:packages/components",
         "utils": "file:packages/utils"
     },
@@ -40,8 +40,7 @@
     },
     "devDependencies": {
         "@babel/core": "7.20.2",
-        "@types/react": "18.0.17",
-        "@types/react-dom": "18.0.6",
+        "html-webpack-plugin": "^5.6.0",
         "ts-loader": "9.3.1",
         "webpack": "^5.73.0",
         "webpack-cli": "^5.1.4"

arthur_bench/server/js/packages/components/compound/TestRunDeepDive/CompareTable.tsx

@@ -62,13 +62,24 @@ const CompareTable = () => {
         pagination: state.testSuites.currentTestRun?.pagination,
         runs: state.testSuites.currentTestRun?.data,
     }));
-    const data = formatTestRunData(runs);
-    const columns = runs?.map((run: TTestRunData) => run.name);
 
     useEffect(() => {
         testSuiteId && testRunIdsArray && fetchMultipleTestRunDetails(testSuiteId, testRunIdsArray, page, 5);
     }, [page]);
 
+    const data = formatTestRunData(runs);
+    const columns = runs?.map((run: TTestRunData) => run.name);
+
+    const { hasReference } = (data || []).reduce(
+        (acc, data) => {
+            if (data.referenceOutput) {
+                acc.hasReference = true;
+            }
+            return acc;
+        },
+        { hasReference: false }
+    );
+
     const setNewPage = useCallback(
         (propsPage: number) => {
             const newPage = propsPage + 1;
@@ -87,7 +98,9 @@ const CompareTable = () => {
             <Table className={css(styles.table)}>
                 <TableHeader>
                     <TableCell className={css(styles.headerCell(primary.white))}>{t("testSuite.inputPrompts")}</TableCell>
-                    <TableCell className={css(styles.headerCell(primary.white))}>{t("testSuite.referenceOutputs")}</TableCell>
+                    {hasReference && (
+                        <TableCell className={css(styles.headerCell(primary.white))}>{t("testSuite.referenceOutputs")}</TableCell>
+                    )}
                     {columns.map((column: string) => (
                         <TableCell className={css(styles.headerCell(primary.white))}>{column}</TableCell>
                     ))}

arthur_bench/server/js/packages/components/package.json

@@ -21,9 +21,9 @@
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
     "@types/lodash.merge": "^4.6.7",
-    "@types/react": "18.0.17",
+    "@types/react": "^18.0.17",
     "@types/react-datepicker": "^4.4.2",
-    "@types/react-dom": "18.0.6",
+    "@types/react-dom": "^18.0.6",
     "@types/uuid": "^8.3.4",
     "babel-loader": "^8.2.5",
     "eslint": "^8.18.0",

arthur_bench/server/js/src/Bench/CompareTestRuns.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, ReactElement } from "react";
 import SummaryVisualizations from "@compound/SummaryVisualizations/SummaryVisualizations";
 import CompareTable from "@compound/TestRunDeepDive/CompareTable";
 import TestSuiteHeader from "../Bench/TestSuiteHeader";
@@ -18,10 +18,10 @@ const CompareTestRuns = () => {
 
     useEffect(() => {
         if (testSuiteId) {
-            fetchTestSuiteData(testSuiteId);
+            fetchTestSuiteData(testSuiteId, 1 , 5);
             fetchTestRunSummary(testSuiteId, testRunIdsArray);
         }
-    }, []);
+    }, [testSuiteId]);
 
     const data = useSelector((state: State) => state.testSuites?.currentTestSuite?.data?.data);
 

arthur_bench/server/js/src/Bench/TestRun.tsx

@@ -27,11 +27,11 @@ const TestRun = () => {
     useEffect(() => {
         if (testSuiteId && testRunId) {
             fetchTestRunDetail(testSuiteId, testRunId, 1, 10, sort);
-            fetchTestSuiteData(testSuiteId);
+            fetchTestSuiteData(testSuiteId, 1, 5);
             fetchTestRunSummary(testSuiteId);
             fetchTestRunSummary(testSuiteId, [testRunId]);
         }
-    }, []);
+    }, [testSuiteId]);
 
     const { currentTestRun, name } = useSelector((state: State) => ({
         currentTestRun: state.testSuites.currentTestRun?.data,