From deef72326bea6e3d4dc457797fb645a599e4cf75 Mon Sep 17 00:00:00 2001
From: deep1401 <gandhi0869@gmail.com>
Date: Thu, 27 Feb 2025 13:10:53 -0800
Subject: [PATCH] Add compare evals showing, currently outputs raw data into
 the ChartModal

---
 .../Experiment/Eval/EvalJobsTable.tsx         | 28 +++++++++++++++----
 .../Experiment/Eval/ViewPlotModal.tsx         | 12 +++++---
 src/renderer/lib/transformerlab-api-sdk.ts    | 16 +++++++++++
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
index ba8444fa..846b637c 100644
--- a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
+++ b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
@@ -91,13 +91,15 @@ function RenderScore({ score }) {
   ));
 }
 
+
 const EvalJobsTable = () => {
   const [selected, setSelected] = useState<readonly string[]>([]);
   const [viewOutputFromJob, setViewOutputFromJob] = useState(-1);
   const [openCSVModal, setOpenCSVModal] = useState(false);
   const [openPlotModal, setOpenPlotModal] = useState(false);
   const [currentJobId, setCurrentJobId] = useState('');
-  const [currentScore, setCurrentScore] = useState('');
+  const [currentData, setCurrentData] = useState('');
+  const [chart, setChart] = useState(true);
   const [currentTensorboardForModal, setCurrentTensorboardForModal] = useState(-1);
   const [fileNameForDetailedReport, setFileNameForDetailedReport] = useState('');
 
@@ -119,14 +121,27 @@ const EvalJobsTable = () => {
     fallbackData: [],
   });
 
+    // New function to call CombinedReports via SDK and send data to ViewPlotModal
+    const handleCombinedReports = async () => {
+      try {
+        const data = await chatAPI.COMPARE_EVALS(selected);
+        setCurrentData(JSON.stringify(data));
+        setOpenPlotModal(true);
+        setChart(false);
+        setCurrentJobId('-1');
+      } catch (error) {
+        console.error('Failed to fetch combined reports:', error);
+      }
+    };
+
+
   const handleOpenCSVModal = (jobId) => {
     setCurrentJobId(jobId);
     setOpenCSVModal(true);
   };
 
-  const handleOpenPlotModal = (jobId, score) => {
-    setCurrentJobId(jobId);
-    setCurrentScore(score);
+  const handleOpenPlotModal = (score) => {
+    setCurrentData(score);
     setOpenPlotModal(true);
   };
 
@@ -145,8 +160,9 @@ const EvalJobsTable = () => {
       <ViewPlotModal
         open={openPlotModal}
         onClose={() => setOpenPlotModal(false)}
+        data={currentData}
         jobId={currentJobId}
-        score={currentScore}
+        chart={chart}
       />
       <ViewOutputModalStreaming
         jobId={viewOutputFromJob}
@@ -170,6 +186,8 @@ const EvalJobsTable = () => {
           <Typography
             level="body-sm"
             startDecorator={<ChartColumnIncreasingIcon size="20px" />}
+            // Uncomment this line to enable the combined reports feature
+            // onClick={handleCombinedReports}
             onClick={() => {
               alert('this feature coming soon');
             }}
diff --git a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
index 9ffb898e..2623586c 100644
--- a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
+++ b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
@@ -3,15 +3,15 @@ import { Modal, ModalDialog, ModalClose, Box, Typography } from '@mui/joy';
 import Chart from './Chart';
 import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
 
-function parseJSON(score) {
+function parseJSON(data) {
   try {
-    return JSON.parse(score);
+    return JSON.parse(data);
   } catch {
     return [];
   }
 }
 
-export default function ViewPlotModal({ open, onClose, jobId, score }) {
+export default function ViewPlotModal({ open, onClose, data, jobId, chart = true}) {
   if (!jobId) {
     return <></>;
   }
@@ -46,7 +46,11 @@ export default function ViewPlotModal({ open, onClose, jobId, score }) {
               p: 2,
             }}
           >
-            <Chart metrics={parseJSON(score)} />
+           {chart ? (
+    <Chart metrics={parseJSON(data)} />
+  ) : (
+    <div>{JSON.stringify(parseJSON(data))}</div>
+  )}
           </Box>
         </Box>
       </ModalDialog>
diff --git a/src/renderer/lib/transformerlab-api-sdk.ts b/src/renderer/lib/transformerlab-api-sdk.ts
index f7f936a1..10566166 100644
--- a/src/renderer/lib/transformerlab-api-sdk.ts
+++ b/src/renderer/lib/transformerlab-api-sdk.ts
@@ -1551,6 +1551,22 @@ export async function EXPERIMENT_EDIT_EVALUATION(
   return result;
 }
 
+export async function COMPARE_EVALS(jobIds: string[]) {
+  const jobIdsParam = jobIds.join(',');
+  const url = API_URL() + 'evals/compare_evals?job_list=' + jobIdsParam;
+  console.log('url', url);
+  console.log('jobIds', jobIds);
+  const response = await fetch(url, {
+    method: 'GET'
+  });
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+  const data = await response.json();
+  console.log('data', data);
+  return data;
+}
+
 export async function EXPERIMENT_ADD_GENERATION(
   id: string,
   name: string,
-- 
GitLab