mirror of
https://github.com/farcasclaudiu/Flowise.git
synced 2026-06-28 17:01:00 +03:00
fix namings, update description, show badge and node info
This commit is contained in:
Henry
@@ -106,6 +106,32 @@ const NodeInfoDialog = ({ show, dialogProps, onCancel }) => {
|
||||
<span style={{ color: '#606c38', fontSize: '0.825rem' }}>version {dialogProps.data.version}</span>
|
||||
</div>
|
||||
)}
|
||||
{dialogProps.data.badge && (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
width: 'max-content',
|
||||
borderRadius: 15,
|
||||
background: dialogProps.data.badge === 'DEPRECATING' ? '#ffe57f' : '#52b69a',
|
||||
padding: 5,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
marginTop: 5,
|
||||
marginLeft: 10,
|
||||
marginBottom: 5
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
color: dialogProps.data.badge !== 'DEPRECATING' ? 'white' : 'inherit',
|
||||
fontSize: '0.825rem'
|
||||
}}
|
||||
>
|
||||
{dialogProps.data.badge}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,6 +57,22 @@ const AddNodes = ({ nodesData, node }) => {
|
||||
const prevOpen = useRef(open)
|
||||
const ps = useRef()
|
||||
|
||||
// Temporary method to handle Deprecating Vector Store and New ones
|
||||
const categorizeVectorStores = (nodes) => {
|
||||
const obj = { ...nodes }
|
||||
const vsNodes = obj['Vector Stores'] ?? []
|
||||
const deprecatingNodes = []
|
||||
const newNodes = []
|
||||
for (const vsNode of vsNodes) {
|
||||
if (vsNode.badge === 'DEPRECATING') deprecatingNodes.push(vsNode)
|
||||
else newNodes.push(vsNode)
|
||||
}
|
||||
delete obj['Vector Stores']
|
||||
obj['Vector Stores;DEPRECATING'] = deprecatingNodes
|
||||
obj['Vector Stores;NEW'] = newNodes
|
||||
setNodes(obj)
|
||||
}
|
||||
|
||||
const scrollTop = () => {
|
||||
const curr = ps.current
|
||||
if (curr) {
|
||||
@@ -96,6 +112,7 @@ const AddNodes = ({ nodesData, node }) => {
|
||||
return r
|
||||
}, Object.create(null))
|
||||
setNodes(result)
|
||||
categorizeVectorStores(result)
|
||||
setCategoryExpanded(accordianCategories)
|
||||
}
|
||||
|
||||
@@ -138,6 +155,8 @@ const AddNodes = ({ nodesData, node }) => {
|
||||
groupByCategory(nodesData)
|
||||
dispatch({ type: SET_COMPONENT_NODES, componentNodes: nodesData })
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [nodesData, dispatch])
|
||||
|
||||
return (
|
||||
@@ -250,99 +269,135 @@ const AddNodes = ({ nodesData, node }) => {
|
||||
>
|
||||
{Object.keys(nodes)
|
||||
.sort()
|
||||
.map((category) => (
|
||||
<Accordion
|
||||
expanded={categoryExpanded[category] || false}
|
||||
onChange={handleAccordionChange(category)}
|
||||
key={category}
|
||||
disableGutters
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls={`nodes-accordian-${category}`}
|
||||
id={`nodes-accordian-header-${category}`}
|
||||
.map((category) =>
|
||||
category === 'Vector Stores' ? (
|
||||
<></>
|
||||
) : (
|
||||
<Accordion
|
||||
expanded={categoryExpanded[category] || false}
|
||||
onChange={handleAccordionChange(category)}
|
||||
key={category}
|
||||
disableGutters
|
||||
>
|
||||
<Typography variant='h5'>{category}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{nodes[category].map((node, index) => (
|
||||
<div
|
||||
key={node.name}
|
||||
onDragStart={(event) => onDragStart(event, node)}
|
||||
draggable
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
p: 0,
|
||||
borderRadius: `${customization.borderRadius}px`,
|
||||
cursor: 'move'
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls={`nodes-accordian-${category}`}
|
||||
id={`nodes-accordian-header-${category}`}
|
||||
>
|
||||
{category.split(';').length > 1 ? (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<ListItem alignItems='center'>
|
||||
<ListItemAvatar>
|
||||
<div
|
||||
style={{
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: 10,
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
alt={node.name}
|
||||
src={`${baseURL}/api/v1/node-icon/${node.name}`}
|
||||
/>
|
||||
</div>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
sx={{ ml: 1 }}
|
||||
primary={
|
||||
<Typography variant='h5'>{category.split(';')[0]}</Typography>
|
||||
|
||||
<Chip
|
||||
sx={{
|
||||
width: 'max-content',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.65rem',
|
||||
background:
|
||||
category.split(';')[1] === 'DEPRECATING'
|
||||
? theme.palette.warning.main
|
||||
: theme.palette.teal.main,
|
||||
color:
|
||||
category.split(';')[1] !== 'DEPRECATING'
|
||||
? 'white'
|
||||
: 'inherit'
|
||||
}}
|
||||
size='small'
|
||||
label={category.split(';')[1]}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Typography variant='h5'>{category}</Typography>
|
||||
)}
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{nodes[category].map((node, index) => (
|
||||
<div
|
||||
key={node.name}
|
||||
onDragStart={(event) => onDragStart(event, node)}
|
||||
draggable
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{
|
||||
p: 0,
|
||||
borderRadius: `${customization.borderRadius}px`,
|
||||
cursor: 'move'
|
||||
}}
|
||||
>
|
||||
<ListItem alignItems='center'>
|
||||
<ListItemAvatar>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: 'white'
|
||||
}}
|
||||
>
|
||||
<span>{node.label}</span>
|
||||
|
||||
{node.badge && (
|
||||
<Chip
|
||||
sx={{
|
||||
width: 'max-content',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.65rem',
|
||||
background:
|
||||
node.badge === 'DEPRECATING'
|
||||
? theme.palette.warning.main
|
||||
: theme.palette.teal.main,
|
||||
color:
|
||||
node.badge !== 'DEPRECATING'
|
||||
? 'white'
|
||||
: 'inherit'
|
||||
}}
|
||||
size='small'
|
||||
label={node.badge}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
padding: 10,
|
||||
objectFit: 'contain'
|
||||
}}
|
||||
alt={node.name}
|
||||
src={`${baseURL}/api/v1/node-icon/${node.name}`}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
secondary={node.description}
|
||||
/>
|
||||
</ListItem>
|
||||
</ListItemButton>
|
||||
{index === nodes[category].length - 1 ? null : <Divider />}
|
||||
</div>
|
||||
))}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
))}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
sx={{ ml: 1 }}
|
||||
primary={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<span>{node.label}</span>
|
||||
|
||||
{node.badge && (
|
||||
<Chip
|
||||
sx={{
|
||||
width: 'max-content',
|
||||
fontWeight: 700,
|
||||
fontSize: '0.65rem',
|
||||
background:
|
||||
node.badge === 'DEPRECATING'
|
||||
? theme.palette.warning
|
||||
.main
|
||||
: theme.palette.teal
|
||||
.main,
|
||||
color:
|
||||
node.badge !== 'DEPRECATING'
|
||||
? 'white'
|
||||
: 'inherit'
|
||||
}}
|
||||
size='small'
|
||||
label={node.badge}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
secondary={node.description}
|
||||
/>
|
||||
</ListItem>
|
||||
</ListItemButton>
|
||||
{index === nodes[category].length - 1 ? null : <Divider />}
|
||||
</div>
|
||||
))}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
)
|
||||
)}
|
||||
</List>
|
||||
</Box>
|
||||
</PerfectScrollbar>
|
||||
|
||||
@@ -83,8 +83,10 @@ const CanvasNode = ({ data }) => {
|
||||
if (componentNode) {
|
||||
if (!data.version) {
|
||||
setWarningMessage(nodeVersionEmptyMessage(componentNode.version))
|
||||
} else {
|
||||
if (componentNode.version > data.version) setWarningMessage(nodeOutdatedMessage(data.version, componentNode.version))
|
||||
} else if (data.version && componentNode.version > data.version) {
|
||||
setWarningMessage(nodeOutdatedMessage(data.version, componentNode.version))
|
||||
} else if (componentNode.badge === 'DEPRECATING') {
|
||||
setWarningMessage('This node will be deprecated in the next release. Change to a new node tagged with NEW')
|
||||
}
|
||||
}
|
||||
}, [canvas.componentNodes, data.name, data.version])
|
||||
|
||||
Reference in New Issue
Block a user