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

feat: ui alignment for table & text

Browse Source
This commit is contained in:
karishmas6
2024-10-19 19:38:25 +05:30
parent a6fcf31f4b
commit ff1c7ebd22
1 changed files with 87 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -127,6 +127,7 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
width: 'calc(100% - 25%)', width: 'calc(100% - 25%)',
bottom: 0, bottom: 0,
overflow: 'hidden', overflow: 'hidden',
textAlign: 'left',
justifyContent: 'flex-start', justifyContent: 'flex-start',
'&:hover': { '&:hover': {
backgroundColor: '#ff00c3', backgroundColor: '#ff00c3',
@@ -161,48 +162,49 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
padding: '10px', 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>
<TableRow> <TableRow>
{columns.length > 0 ? ( {columns.map((column) => (
columns.map((column) => (
<TableCell key={column}>{column}</TableCell> <TableCell key={column}>{column}</TableCell>
)) ))}
) : ""}
</TableRow> </TableRow>
</TableHead> </TableHead>
{tableData.length > 0 ? (
tableData.map((row, index) => (
<TableBody> <TableBody>
{tableData.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>
))} ))}
</TableRow> </TableRow>
))}
</TableBody> </TableBody>
)) </Table>
</TableContainer>
) : ( ) : (
hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? ( <Grid container justifyContent="center" alignItems="center" style={{ height: '100%' }}>
<Grid item>
{hasScrapeListAction || hasScrapeSchemaAction || hasScreenshotAction ? (
<> <>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom align="center">
You've successfully trained the robot to perform actions! Click on the button below to get a preview of data your robot will extract. 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 /> <SidePanelHeader />
</> </>
) : ( ) : (
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom 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. 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> </Typography>
)
)} )}
</Table> </Grid>
</TableContainer> </Grid>
)}
<div style={{ float: 'left', clear: 'both' }} ref={logEndRef} /> <div style={{ float: 'left', clear: 'both' }} ref={logEndRef} />
</div> </div>
</SwipeableDrawer> </SwipeableDrawer>
</Grid> </Grid>
</Grid> </Grid>
); );
} }