vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #79 from amhsirak/develop

Browse Source 
feat: limit number of rows shown in preview data
This commit is contained in:
Karishma Shukla
2024-10-21 15:59:32 +05:30
committed by GitHub
parent a577ce4446 bda63a14bc
commit 530d4ae51b
1 changed files with 73 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/components/molecules/InterpretationLog.tsx
View File

@@ -112,57 +112,58 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
}, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]); }, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
return ( return (
<Grid container> <Grid container>
<Grid item xs={12} md={9} lg={9}> <Grid item xs={12} md={9} lg={9}>
<Button <Button
onClick={toggleDrawer(true)} onClick={toggleDrawer(true)}
variant="contained" variant="contained"
color="primary" color="primary"
sx={{ sx={{
marginTop: '10px', marginTop: '10px',
color: 'white', color: 'white',
position: 'absolute', position: 'absolute',
background: '#ff00c3', background: '#ff00c3',
border: 'none', border: 'none',
padding: '10px 20px', padding: '10px 20px',
width: '900px', width: '900px',
overflow: 'hidden', overflow: 'hidden',
textAlign: 'left', textAlign: 'left',
justifyContent: 'flex-start', justifyContent: 'flex-start',
'&:hover': { '&:hover': {
backgroundColor: '#ff00c3', 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 {tableData.length > 0 ? (
</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}> <TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table"> <Table sx={{ minWidth: 650 }} stickyHeader aria-label="output data table">
<TableHead> <TableHead>
@@ -173,7 +174,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{tableData.map((row, index) => ( {tableData.slice(0, Math.min(5, tableData.length)).map((row, index) => (
<TableRow key={index}> <TableRow key={index}>
{columns.map((column) => ( {columns.map((column) => (
<TableCell key={column}>{row[column]}</TableCell> <TableCell key={column}>{row[column]}</TableCell>
@@ -183,28 +184,30 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </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> ) : (
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? ( <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
<> <Grid item>
<Typography variant="h6" gutterBottom align="left"> {hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
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 />
</>
) : (
<Typography variant="h6" gutterBottom align="left"> <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> </Typography>
)} <SidePanelHeader />
</Grid> </>
) : (
<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> </Grid>
)} </Grid>
<div style={{ float: 'left', clear: 'both' }} ref={logEndRef} /> )}
</div> <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
</SwipeableDrawer> </div>
</Grid> </SwipeableDrawer>
</Grid> </Grid>
); </Grid>
);
} }