From 13ec9e1cd512b5b35f2f38ceb5a10feeab31777b Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 19 Oct 2024 10:00:26 +0530
Subject: [PATCH] feat: empty table

---
 .../molecules/InterpretationLog.tsx           | 150 ++++++++++--------
 1 file changed, 80 insertions(+), 70 deletions(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index d4cdaa3d..08c2c60b 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -107,76 +107,86 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
 
   return (
     <Grid container>
-      <Grid item xs={12} md={9} lg={9}>
-        <button
-          onClick={toggleDrawer(true)}
-          style={{
-            color: 'white',
-            position: 'fixed',
-            background: '#ff00c3',
-            border: 'none',
-            padding: '30px 20px',
-            width: 'calc(100% - 25%)',
-            textAlign: 'left',
-            bottom: 0,
-            overflow: 'hidden',
-          }}>
-          Interpretation Log
-        </button>
-        <SwipeableDrawer
-          anchor="bottom"
-          open={isOpen}
-          onClose={toggleDrawer(false)}
-          onOpen={toggleDrawer(true)}
-          PaperProps={{
-            sx: {
-              background: 'white',
-              color: 'black',
-              padding: '10px',
-              height: 500,
-              width: width - 10,
-              display: 'flex'
-            }
-          }}
-        >
-          <Typography variant="h6" gutterBottom>
-            <StorageIcon /> Output Data Preview
-          </Typography>
-          <div style={{
-            height: '50vh',
-            overflow: 'none',
-            padding: '10px',
-          }}>
-            {/* <Highlight className="javascript">
-            {log}
-          </Highlight> */}
-            {tableData.length > 0 && (
-              <TableContainer component={Paper}>
-                <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data 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}>{row[column]}</TableCell>
-                        ))}
-                      </TableRow>
+  <Grid item xs={12} md={9} lg={9}>
+    <button
+      onClick={toggleDrawer(true)}
+      style={{
+        color: 'white',
+        position: 'fixed',
+        background: '#ff00c3',
+        border: 'none',
+        padding: '30px 20px',
+        width: 'calc(100% - 25%)',
+        textAlign: 'left',
+        bottom: 0,
+        overflow: 'hidden',
+      }}
+    >
+      Interpretation Log
+    </button>
+    <SwipeableDrawer
+      anchor="bottom"
+      open={isOpen}
+      onClose={toggleDrawer(false)}
+      onOpen={toggleDrawer(true)}
+      PaperProps={{
+        sx: {
+          background: 'white',
+          color: 'black',
+          padding: '10px',
+          height: 500,
+          width: width - 10,
+          display: 'flex',
+        },
+      }}
+    >
+      <Typography variant="h6" gutterBottom>
+        <StorageIcon /> Output Data Preview
+      </Typography>
+      <div
+        style={{
+          height: '50vh',
+          overflow: 'none',
+          padding: '10px',
+        }}
+      >
+        <TableContainer component={Paper}>
+          <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
+            <TableHead>
+              <TableRow>
+                {columns.length > 0 ? (
+                  columns.map((column) => (
+                    <TableCell key={column}>{column}</TableCell>
+                  ))
+                ) : (
+                  <TableCell align="center">No Data</TableCell>
+                )}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {tableData.length > 0 ? (
+                tableData.map((row, index) => (
+                  <TableRow key={index}>
+                    {columns.map((column) => (
+                      <TableCell key={column}>{row[column]}</TableCell>
                     ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-            )}
-            <div style={{ float: "left", clear: "both" }}
-              ref={logEndRef} />
-          </div>
-        </SwipeableDrawer>
-      </Grid>
-    </Grid>
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell colSpan={columns.length || 1} align="center">
+                    It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
+      </div>
+    </SwipeableDrawer>
+  </Grid>
+</Grid>
+
   );
 }
\ No newline at end of file