From 77b4008347875003efea500529cc7efe3e0b390f Mon Sep 17 00:00:00 2001
From: deep1401 <gandhi0869@gmail.com>
Date: Wed, 12 Feb 2025 08:43:10 -0800
Subject: [PATCH] Download Reports button for detailed reports in Evals
---
.../components/Experiment/Eval/EvalModal.tsx | 2 +-
.../Experiment/Eval/ViewCSVModal.tsx | 63 ++++++++++++++++++-
2 files changed, 63 insertions(+), 2 deletions(-)
diff --git a/src/renderer/components/Experiment/Eval/EvalModal.tsx b/src/renderer/components/Experiment/Eval/EvalModal.tsx
index ca661288..ff5a4841 100644
--- a/src/renderer/components/Experiment/Eval/EvalModal.tsx
+++ b/src/renderer/components/Experiment/Eval/EvalModal.tsx
@@ -330,7 +330,7 @@ export default function EvalModal({
return (
<Stack spacing={2}>
- <FormLabel>Evaluation Tasks</FormLabel>
+ <FormLabel>Select Evaluation Tasks</FormLabel>
<Input
placeholder="Search tasks..."
value={searchText}
diff --git a/src/renderer/components/Experiment/Eval/ViewCSVModal.tsx b/src/renderer/components/Experiment/Eval/ViewCSVModal.tsx
index 50910e44..30c2af13 100644
--- a/src/renderer/components/Experiment/Eval/ViewCSVModal.tsx
+++ b/src/renderer/components/Experiment/Eval/ViewCSVModal.tsx
@@ -7,6 +7,7 @@ import {
ModalClose,
ModalDialog,
Table,
+ Button,
} from '@mui/joy';
function formatColumnNames(name) {
@@ -21,6 +22,7 @@ function heatedColor(value) {
return `hsla(${h}, 100%, 50%, 0.3)`;
}
+
const ViewCSVModal = ({ open, onClose, jobId, fetchCSV }) => {
const [report, setReport] = useState({});
@@ -36,13 +38,72 @@ const ViewCSVModal = ({ open, onClose, jobId, fetchCSV }) => {
}
}, [open, jobId, fetchCSV]);
+ const generateHTMLContent = () => {
+ let html = `<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>Report for Job: ${jobId}</title>
+ <style>
+ table { border-collapse: collapse; width: 100%; }
+ th, td { border: 1px solid #999; padding: 0.5rem; text-align: left; }
+ </style>
+ </head>
+ <body>
+ <h4>Additional Output from Job: ${jobId}</h4>`;
+ if (report?.header) {
+ html += `<table>
+ <thead>
+ <tr>`;
+ report.header.forEach((header) => {
+ html += `<th>${formatColumnNames(header)}</th>`;
+ });
+ html += `</tr>
+ </thead>`;
+ }
+ if (report?.body) {
+ html += `<tbody>`;
+ report.body.forEach((row) => {
+ html += `<tr>`;
+ row.forEach((col, j) => {
+ if (report.header[j] === 'score') {
+ html += `<td style="background-color: ${heatedColor(col)}; font-weight: bold;">${parseFloat(col).toFixed(6)}</td>`;
+ } else {
+ html += `<td>${col}</td>`;
+ }
+ });
+ html += `</tr>`;
+ });
+ html += `</tbody></table>`;
+ }
+ html += `</body></html>`;
+ return html;
+ };
+
+ const handleDownload = () => {
+ const htmlContent = generateHTMLContent();
+ const blob = new Blob([htmlContent], { type: 'text/html' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `report_${jobId}.html`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ URL.revokeObjectURL(url);
+ };
+
return (
<Modal open={open} onClose={onClose}>
- <ModalDialog sx={{ width: '90vw', height: '90vh' }}>
+ <ModalDialog sx={{ width: '90vw', height: '90vh' , pt: 5}}>
<ModalClose />
+ <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
<Typography level="h4" mb={2}>
Additional Output from Job: {jobId}
</Typography>
+ <Button onClick={handleDownload} variant="outlined">
+ Download Report
+ </Button>
+ </Box>
{/* {JSON.stringify(report)} */}
<Box sx={{ overflow: 'auto' }}>
<Table stickyHeader>
--
GitLab