From a804f8d31ad9a3f5e55779e78d068143e0b888ff Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 21 Oct 2024 15:20:57 +0530
Subject: [PATCH 1/5] feat: show only 5 rows of data when previewing

---
 src/components/molecules/InterpretationLog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 0d660e5e..2883233c 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -173,7 +173,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                       </TableRow>
                     </TableHead>
                     <TableBody>
-                      {tableData.map((row, index) => (
+                      {tableData.slice(0, Math.min(5, tableData.length)).map((row, index) => (
                         <TableRow key={index}>
                           {columns.map((column) => (
                             <TableCell key={column}>{row[column]}</TableCell>

From 13ca1155b247303f443fa2fdb30d78830a64da01 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 21 Oct 2024 15:21:12 +0530
Subject: [PATCH 2/5] chore: lint

---
 .../molecules/InterpretationLog.tsx           | 172 +++++++++---------
 1 file changed, 86 insertions(+), 86 deletions(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 2883233c..717eab56 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -112,99 +112,99 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
   }, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
 
   return (
-      <Grid container>
-        <Grid item xs={12} md={9} lg={9}>
-          <Button
-            onClick={toggleDrawer(true)}
-            variant="contained"
-            color="primary"
-            sx={{
-              marginTop: '10px',
-              color: 'white',
-              position: 'absolute',
-              background: '#ff00c3',
-              border: 'none',
-              padding: '10px 20px',
-              width: '900px',
-              overflow: 'hidden',
-              textAlign: 'left',
-              justifyContent: 'flex-start',
-              '&:hover': {
-                backgroundColor: '#ff00c3',
-              },
+    <Grid container>
+      <Grid item xs={12} md={9} lg={9}>
+        <Button
+          onClick={toggleDrawer(true)}
+          variant="contained"
+          color="primary"
+          sx={{
+            marginTop: '10px',
+            color: 'white',
+            position: 'absolute',
+            background: '#ff00c3',
+            border: 'none',
+            padding: '10px 20px',
+            width: '900px',
+            overflow: 'hidden',
+            textAlign: 'left',
+            justifyContent: 'flex-start',
+            '&:hover': {
+              backgroundColor: '#ff00c3',
+            },
+          }}
+        >
+          Output Data Preview
+        </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',
             }}
           >
-            Output Data Preview
-          </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',
-              }}
-            >
-              {tableData.length > 0 ? (
-                <TableContainer component={Paper}>
-                  <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
-                    <TableHead>
-                      <TableRow>
+            {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.slice(0, Math.min(5, tableData.length)).map((row, index) => (
+                      <TableRow key={index}>
                         {columns.map((column) => (
-                          <TableCell key={column}>{column}</TableCell>
+                          <TableCell key={column}>{row[column]}</TableCell>
                         ))}
                       </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {tableData.slice(0, Math.min(5, tableData.length)).map((row, index) => (
-                        <TableRow key={index}>
-                          {columns.map((column) => (
-                            <TableCell key={column}>{row[column]}</TableCell>
-                          ))}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                </TableContainer>
-              ) : (
-                <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
-                  <Grid item>
-                    {hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
-                      <>
-                        <Typography variant="h6" gutterBottom align="left">
-                          You've successfully trained the robot to perform actions! Click on the button below to get a preview of the data your robot will extract.
-                        </Typography>
-                        <SidePanelHeader />
-                      </>
-                    ) : (
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            ) : (
+              <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
+                <Grid item>
+                  {hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
+                    <>
                       <Typography variant="h6" gutterBottom align="left">
-                        It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
+                        You've successfully trained the robot to perform actions! Click on the button below to get a preview of the data your robot will extract.
                       </Typography>
-                    )}
-                  </Grid>
+                      <SidePanelHeader />
+                    </>
+                  ) : (
+                    <Typography variant="h6" gutterBottom align="left">
+                      It looks like you have not selected anything for extraction yet. Once you do, the robot will show a preview of your selections here.
+                    </Typography>
+                  )}
                 </Grid>
-              )}
-              <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
-            </div>
-          </SwipeableDrawer>
-        </Grid>
+              </Grid>
+            )}
+            <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
+          </div>
+        </SwipeableDrawer>
       </Grid>
-    );
+    </Grid>
+  );
 }
\ No newline at end of file

From ba253430bbc1364377ff1f6f259c3027198ff551 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 21 Oct 2024 15:57:23 +0530
Subject: [PATCH 3/5] feat: show additional row text

---
 src/components/molecules/InterpretationLog.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 717eab56..0e8b5e98 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -163,6 +163,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
             }}
           >
             {tableData.length > 0 ? (
+              <>
               <TableContainer component={Paper}>
                 <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
                   <TableHead>
@@ -183,6 +184,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                   </TableBody>
                 </Table>
               </TableContainer>
+                        <span >Additional rows of data will be extracted once you finish recording. </span>
+                </>
             ) : (
               <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
                 <Grid item>

From 8ddcfb9c6932e28554c8f949f0051d16a48b714e Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 21 Oct 2024 15:57:35 +0530
Subject: [PATCH 4/5] feat: style additional row text

---
 src/components/molecules/InterpretationLog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 0e8b5e98..d0cdec7d 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -184,7 +184,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                   </TableBody>
                 </Table>
               </TableContainer>
-                        <span >Additional rows of data will be extracted once you finish recording. </span>
+                        <span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px'}}>Additional rows of data will be extracted once you finish recording. </span>
                 </>
             ) : (
               <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>

From bda63a14bc2f1f99ecfac755a683e2e394ce9292 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Mon, 21 Oct 2024 15:57:51 +0530
Subject: [PATCH 5/5] chore: lint

---
 .../molecules/InterpretationLog.tsx           | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index d0cdec7d..83803271 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -164,28 +164,28 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           >
             {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.slice(0, Math.min(5, tableData.length)).map((row, index) => (
-                      <TableRow key={index}>
+                <TableContainer component={Paper}>
+                  <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
+                    <TableHead>
+                      <TableRow>
                         {columns.map((column) => (
-                          <TableCell key={column}>{row[column]}</TableCell>
+                          <TableCell key={column}>{column}</TableCell>
                         ))}
                       </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </TableContainer>
-                        <span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px'}}>Additional rows of data will be extracted once you finish recording. </span>
-                </>
+                    </TableHead>
+                    <TableBody>
+                      {tableData.slice(0, Math.min(5, tableData.length)).map((row, index) => (
+                        <TableRow key={index}>
+                          {columns.map((column) => (
+                            <TableCell key={column}>{row[column]}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+                <span style={{ marginLeft: '15px', marginTop: '10px', fontSize: '12px' }}>Additional rows of data will be extracted once you finish recording. </span>
+              </>
             ) : (
               <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
                 <Grid item>