Sultan
/
Flowise
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UX Changes: limiting display of node icons to 5 and with label to indicate additional.

This commit is contained in:
vinodkiran 2023-11-14 15:48:14 +05:30
parent 77994ce217
commit 7ef817bc99
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/src/ui-component/table/FlowListTable.js
View File

@ -37,6 +37,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
const goToCanvas = (selectedChatflow) => { const goToCanvas = (selectedChatflow) => {
navigate(`/canvas/${selectedChatflow.id}`) navigate(`/canvas/${selectedChatflow.id}`)
} }
let nodeCount = 0
return ( return (
<> <>
<TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}> <TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
@ -53,7 +54,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
Name Name
</StyledTableCell> </StyledTableCell>
<StyledTableCell style={{ width: '35%' }} key='1'> <StyledTableCell style={{ width: '35%' }} key='1'>
Nodes Nodes (Showing first 5)
</StyledTableCell> </StyledTableCell>
<StyledTableCell style={{ width: '30%' }} key='2'> <StyledTableCell style={{ width: '30%' }} key='2'>
Last Modified Date Last Modified Date
@ -84,7 +85,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
marginTop: 5 marginTop: 5
}} }}
> >
{images[row.id].map((img) => ( {images[row.id].slice(0, images[row.id].length > 5 ? 5 : images[row.id].length).map((img) => (
<div <div
key={img} key={img}
style={{ style={{
@ -103,6 +104,13 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
/> />
</div> </div>
))} ))}
{images[row.id].length > 5 && (
<Typography
sx={{ alignItems: 'center', display: 'flex', fontSize: '.8rem', fontWeight: 200 }}
>
+ {images[row.id].length - 5} More
</Typography>
)}
</div> </div>
)} )}
</TableCell> </TableCell>