From 7ef817bc996200d89c4d5f11d4a556f2ac5a16df Mon Sep 17 00:00:00 2001
From: vinodkiran <vinodkiran@usa.net>
Date: Tue, 14 Nov 2023 15:48:14 +0530
Subject: [PATCH] UX Changes: limiting display of node icons to 5 and with
 label to indicate additional.

---
 packages/ui/src/ui-component/table/FlowListTable.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/ui-component/table/FlowListTable.js b/packages/ui/src/ui-component/table/FlowListTable.js
index 819a49cb..896ce3ea 100644
--- a/packages/ui/src/ui-component/table/FlowListTable.js
+++ b/packages/ui/src/ui-component/table/FlowListTable.js
@@ -37,6 +37,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
     const goToCanvas = (selectedChatflow) => {
         navigate(`/canvas/${selectedChatflow.id}`)
     }
+    let nodeCount = 0
     return (
         <>
             <TableContainer style={{ marginTop: '30', border: 1 }} component={Paper}>
@@ -53,7 +54,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                 Name
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '35%' }} key='1'>
-                                Nodes
+                                Nodes (Showing first 5)
                             </StyledTableCell>
                             <StyledTableCell style={{ width: '30%' }} key='2'>
                                 Last Modified Date
@@ -84,7 +85,7 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                                 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
                                                     key={img}
                                                     style={{
@@ -103,6 +104,13 @@ export const FlowListTable = ({ data, images, filterFunction }) => {
                                                     />
                                                 </div>
                                             ))}
+                                            {images[row.id].length > 5 && (
+                                                <Typography
+                                                    sx={{ alignItems: 'center', display: 'flex', fontSize: '.8rem', fontWeight: 200 }}
+                                                >
+                                                    + {images[row.id].length - 5} More
+                                                </Typography>
+                                            )}
                                         </div>
                                     )}
                                 </TableCell>