From 32c646af01b5deb3b64fb24cf018a54122ddc164 Mon Sep 17 00:00:00 2001
From: amit <amit63390@gmail.com>
Date: Mon, 11 Nov 2024 23:56:56 +0530
Subject: [PATCH] save as csv feature added

---
 esbuild.config.js                       |  0
 src/components/molecules/RunContent.tsx | 63 ++++++++++++++++++-------
 2 files changed, 46 insertions(+), 17 deletions(-)
 create mode 100644 esbuild.config.js

diff --git a/esbuild.config.js b/esbuild.config.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/molecules/RunContent.tsx b/src/components/molecules/RunContent.tsx
index ea51bd03..8c32fcc6 100644
--- a/src/components/molecules/RunContent.tsx
+++ b/src/components/molecules/RunContent.tsx
@@ -47,6 +47,30 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
     }
   }, [row.serializableOutput]);
 
+  // Function to convert table data to CSV format
+  const convertToCSV = (data: any[], columns: string[]): string => {
+    const header = columns.join(','); // Create CSV header row
+    const rows = data.map(row => 
+      columns.map(col => JSON.stringify(row[col], null, 2)).join(',')
+    ); // Map each row of data to a CSV row
+    return [header, ...rows].join('\n'); // Combine header and rows with newline characters
+  }
+
+  // Function to download CSV file when called
+  const downloadCSV = () => {
+    const csvContent = convertToCSV(tableData, columns); // Convert data to CSV format
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); // Create a Blob object with CSV content
+    const url = URL.createObjectURL(blob); // Create a temporary URL for the Blob
+
+    // Create a temporary link to download the CSV file
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", "data.csv"); // Set the download filename
+    document.body.appendChild(link);
+    link.click(); // Programmatically click the link to trigger the download
+    document.body.removeChild(link); // Remove the link element after download
+  }
+
   return (
     <Box sx={{ width: '100%' }}>
       <TabContext value={tab}>
@@ -105,26 +129,31 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 )
               })}
               {tableData.length > 0 ? (
-                <TableContainer component={Paper} sx={{ maxHeight: 440, marginTop: 2 }}>
-                  <Table stickyHeader aria-label="sticky table">
-                    <TableHead>
-                      <TableRow>
-                        {columns.map((column) => (
-                          <TableCell key={column}>{column}</TableCell>
-                        ))}
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {tableData.map((row, index) => (
-                        <TableRow key={index}>
+                <>
+                  <Button variant="contained" color="primary" onClick={downloadCSV}>
+                    Download as CSV
+                  </Button>
+                  <TableContainer component={Paper} sx={{ maxHeight: 440, marginTop: 2 }}>
+                    <Table stickyHeader aria-label="sticky table">
+                      <TableHead>
+                        <TableRow>
                           {columns.map((column) => (
-                            <TableCell key={column}>{row[column]}</TableCell>
+                            <TableCell key={column}>{column}</TableCell>
                           ))}
                         </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </TableContainer>
+                      </TableHead>
+                      <TableBody>
+                        {tableData.map((row, index) => (
+                          <TableRow key={index}>
+                            {columns.map((column) => (
+                              <TableCell key={column}>{row[column]}</TableCell>
+                            ))}
+                          </TableRow>
+                        ))}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+                </>
               ) : (
                 <Box sx={{
                   width: 'fit-content',