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 1/3] 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',

From c7cb8c222fc2fc9373ba7e024be08dcfaf8605e9 Mon Sep 17 00:00:00 2001
From: amit <amit63390@gmail.com>
Date: Tue, 12 Nov 2024 10:35:49 +0530
Subject: [PATCH 2/3] csv button changed

---
 src/components/molecules/RunContent.tsx | 119 ++++++++++++------------
 1 file changed, 61 insertions(+), 58 deletions(-)

diff --git a/src/components/molecules/RunContent.tsx b/src/components/molecules/RunContent.tsx
index 8c32fcc6..42f68a0d 100644
--- a/src/components/molecules/RunContent.tsx
+++ b/src/components/molecules/RunContent.tsx
@@ -1,14 +1,11 @@
-import { Box, Tabs, Typography, Tab, Paper } from "@mui/material";
+import { Box, Tabs, Typography, Tab, Paper, Button } from "@mui/material";
 import Highlight from "react-highlight";
-import Button from "@mui/material/Button";
 import * as React from "react";
 import { Data } from "./RunsTable";
 import { TabPanel, TabContext } from "@mui/lab";
-import SettingsIcon from '@mui/icons-material/Settings';
-import ImageIcon from '@mui/icons-material/Image';
 import ArticleIcon from '@mui/icons-material/Article';
+import ImageIcon from '@mui/icons-material/Image';
 import { useEffect, useState } from "react";
-import AssignmentIcon from '@mui/icons-material/Assignment';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -32,7 +29,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
   useEffect(() => {
     setTab(tab);
-  }, [interpretationInProgress])
+  }, [interpretationInProgress]);
 
   useEffect(() => {
     if (row.serializableOutput && Object.keys(row.serializableOutput).length > 0) {
@@ -49,27 +46,26 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
 
   // 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 => 
+    const header = columns.join(',');
+    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
-  }
+    );
+    return [header, ...rows].join('\n');
+  };
 
   // 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
+    const csvContent = convertToCSV(tableData, columns);
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(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
+    link.setAttribute("download", "data.csv");
     document.body.appendChild(link);
-    link.click(); // Programmatically click the link to trigger the download
-    document.body.removeChild(link); // Remove the link element after download
-  }
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <Box sx={{ width: '100%' }}>
@@ -78,7 +74,6 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
           <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs">
             <Tab label="Output Data" value='output' />
             <Tab label="Log" value='log' />
-            {/* <Tab label="Input" value='input' /> */}
           </Tabs>
         </Box>
         <TabPanel value='log'>
@@ -118,42 +113,50 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                 <ArticleIcon sx={{ marginRight: '15px' }} />
                 Captured Data
               </Typography>
-              {Object.keys(row.serializableOutput).map((key) => {
-                return (
-                  <div key={`number-of-serializable-output-${key}`}>
-                    <Typography sx={{ margin: '20px 0px 20px 0px' }}>
-                      <a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput[key], null, 2)}`}
-                        download={key}>Download as JSON</a>
-                    </Typography>
-                  </div>
-                )
-              })}
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mt: 2 }}>
+                <Typography>
+                  <a style={{ textDecoration: 'none' }} href={`data:application/json;utf8,${JSON.stringify(row.serializableOutput, null, 2)}`}
+                    download="data.json">
+                    Download as JSON
+                  </a>
+                </Typography>
+                <Button
+                  onClick={downloadCSV}
+                  sx={{
+                    textTransform: 'none',
+                    color: 'primary.main',
+                    padding: 0,
+                    background: 'none',
+                    '&:hover': {
+                      background: 'none',
+                      textDecoration: 'underline',
+                    },
+                  }}
+                >
+                  Download as CSV
+                </Button>
+              </Box>
               {tableData.length > 0 ? (
-                <>
-                  <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>
+                <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}>
                           {columns.map((column) => (
-                            <TableCell key={column}>{column}</TableCell>
+                            <TableCell key={column}>{row[column]}</TableCell>
                           ))}
                         </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {tableData.map((row, index) => (
-                          <TableRow key={index}>
-                            {columns.map((column) => (
-                              <TableCell key={column}>{row[column]}</TableCell>
-                            ))}
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
-                </>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
               ) : (
                 <Box sx={{
                   width: 'fit-content',
@@ -168,12 +171,12 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
               )}
             </div>
           }
-          {row.binaryOutput
-            && Object.keys(row.binaryOutput).length !== 0 &&
+          {row.binaryOutput && Object.keys(row.binaryOutput).length !== 0 &&
             <div>
               <Typography variant='h6' sx={{ display: 'flex', alignItems: 'center' }}>
                 <ImageIcon sx={{ marginRight: '15px' }} />
-                Captured Screenshot</Typography>
+                Captured Screenshot
+              </Typography>
               {Object.keys(row.binaryOutput).map((key) => {
                 try {
                   const imageUrl = row.binaryOutput[key];
@@ -181,10 +184,10 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                     <Box key={`number-of-binary-output-${key}`} sx={{
                       width: 'max-content',
                     }}>
-                      <Typography key={`binary-output-key-${key}`} sx={{ margin: '20px 0px 20px 0px' }}>
+                      <Typography sx={{ margin: '20px 0px' }}>
                         <a href={imageUrl} download={key} style={{ textDecoration: 'none' }}>Download Screenshot</a>
                       </Typography>
-                      <img key={`image-${key}`} src={imageUrl} alt={key} height='auto' width='700px' />
+                      <img src={imageUrl} alt={key} height='auto' width='700px' />
                     </Box>
                   )
                 } catch (e) {
@@ -200,4 +203,4 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
       </TabContext>
     </Box>
   );
-}
+};

From ca28135962f3ebd837965295ac2e0a88b75b590e Mon Sep 17 00:00:00 2001
From: amit <amit63390@gmail.com>
Date: Tue, 12 Nov 2024 10:42:40 +0530
Subject: [PATCH 3/3] changed button tag to typography

---
 src/components/molecules/RunContent.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/molecules/RunContent.tsx b/src/components/molecules/RunContent.tsx
index 42f68a0d..5b041525 100644
--- a/src/components/molecules/RunContent.tsx
+++ b/src/components/molecules/RunContent.tsx
@@ -120,7 +120,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                     Download as JSON
                   </a>
                 </Typography>
-                <Button
+                <Typography
                   onClick={downloadCSV}
                   sx={{
                     textTransform: 'none',
@@ -129,12 +129,13 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                     background: 'none',
                     '&:hover': {
                       background: 'none',
-                      textDecoration: 'underline',
+                      
                     },
+                    cursor: 'pointer',
                   }}
                 >
                   Download as CSV
-                </Button>
+                </Typography>
               </Box>
               {tableData.length > 0 ? (
                 <TableContainer component={Paper} sx={{ maxHeight: 440, marginTop: 2 }}>