jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'zustand/io/migration' into better_io

Browse source
This commit is contained in:
Lucas Oliveira 2024-03-03 23:36:49 +01:00
commit 0bb5aa316a
2 changed files with 76 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

138
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -141,8 +141,9 @@ export default function GenericNode({
const iconColor = nodeColors[types[data.type]]; const iconColor = nodeColors[types[data.type]];
const iconName = const iconName =
iconElement || (data.node?.flow ? "group_components" : name); iconElement || (data.node?.flow ? "group_components" : name);
const iconClassName = `generic-node-icon ${!showNode ? " absolute inset-x-6 h-12 w-12 " : "" const iconClassName = `generic-node-icon ${
}`; !showNode ? " absolute inset-x-6 h-12 w-12 " : ""
}`;
if (iconElement && isEmoji) { if (iconElement && isEmoji) {
return nodeIconFragment(iconElement); return nodeIconFragment(iconElement);
} else { } else {
@ -270,7 +271,7 @@ export default function GenericNode({
numberOfHandles={handles} numberOfHandles={handles}
showNode={showNode} showNode={showNode}
openAdvancedModal={false} openAdvancedModal={false}
onCloseAdvancedModal={() => { }} onCloseAdvancedModal={() => {}}
selected={selected} selected={selected}
></NodeToolbarComponent> ></NodeToolbarComponent>
</NodeToolbar> </NodeToolbar>
@ -334,8 +335,8 @@ export default function GenericNode({
/> />
</div> </div>
) : ( ) : (
<div className="group flex items-center gap-2.5"> <div className="group flex items-start gap-1.5">
<ShadTooltip content={data.id}> <ShadTooltip content={data.node?.display_name}>
<div <div
onDoubleClick={(event) => { onDoubleClick={(event) => {
if (nameEditable) { if (nameEditable) {
@ -361,8 +362,8 @@ export default function GenericNode({
}} }}
> >
<IconComponent <IconComponent
name="Pencil" name="PencilLine"
className="hidden h-4 w-4 animate-pulse text-status-blue group-hover:block" className="hidden h-3 w-3 text-status-blue group-hover:block"
/> />
</div> </div>
)} )}
@ -393,27 +394,33 @@ export default function GenericNode({
data={data} data={data}
color={ color={
data.node?.template[templateField].input_types && data.node?.template[templateField].input_types &&
data.node?.template[templateField].input_types! data.node?.template[templateField].input_types!
.length > 0 .length > 0
? nodeColors[ ? nodeColors[
data.node?.template[templateField] data.node?.template[templateField]
.input_types![data.node?.template[templateField] .input_types![
.input_types!.length - 1] data.node?.template[templateField]
] ?? .input_types!.length - 1
nodeColors[ ]
types[ ] ??
data.node?.template[templateField] nodeColors[
.input_types![data.node?.template[templateField] types[
.input_types!.length - 1] data.node?.template[templateField]
] .input_types![
] data.node?.template[templateField]
.input_types!.length - 1
]
]
]
: nodeColors[ : nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[
] ?? data.node?.template[templateField].type!
nodeColors.unknown ]
] ??
nodeColors.unknown
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
@ -457,7 +464,7 @@ export default function GenericNode({
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node?.output_types && data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? data.node.output_types.join(" | ") ? data.node.output_types.join(" | ")
: data.type : data.type
} }
@ -475,10 +482,7 @@ export default function GenericNode({
)} )}
</div> </div>
{showNode && ( {showNode && (
<Button <Button variant="secondary" className={"group h-9 px-1.5"}>
variant="secondary"
className={"group h-9 px-1.5"}
>
<div> <div>
<ShadTooltip <ShadTooltip
content={ content={
@ -490,22 +494,25 @@ export default function GenericNode({
<div className="max-h-96 overflow-auto"> <div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string" {typeof validationStatus.params === "string"
? `${durationString}\n${validationStatus.params}` ? `${durationString}\n${validationStatus.params}`
.split("\n") .split("\n")
.map((line, index) => ( .map((line, index) => (
<div key={index}>{line}</div> <div key={index}>{line}</div>
)) ))
: durationString} : durationString}
</div> </div>
) )
} }
side="bottom" side="bottom"
> >
<div onClick={() => { <div
if (buildStatus === BuildStatus.BUILDING || isBuilding) onClick={() => {
return; if (buildStatus === BuildStatus.BUILDING || isBuilding)
setValidationStatus(null); return;
buildFlow({ nodeId: data.id }); setValidationStatus(null);
}} className="generic-node-status-position flex items-center justify-center"> buildFlow({ nodeId: data.id });
}}
className="generic-node-status-position flex items-center justify-center"
>
{renderIconStatus(buildStatus, validationStatus)} {renderIconStatus(buildStatus, validationStatus)}
</div> </div>
</ShadTooltip> </ShadTooltip>
@ -585,7 +592,7 @@ export default function GenericNode({
}} }}
> >
{(data.node?.description === "" || !data.node?.description) && {(data.node?.description === "" || !data.node?.description) &&
nameEditable nameEditable
? "Double Click to Edit Description" ? "Double Click to Edit Description"
: data.node?.description} : data.node?.description}
</div> </div>
@ -606,7 +613,7 @@ export default function GenericNode({
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField].advanced ? (
<ParameterComponent <ParameterComponent
index={idx.toString()} index={idx.toString()}
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -620,27 +627,30 @@ export default function GenericNode({
data={data} data={data}
color={ color={
data.node?.template[templateField].input_types && data.node?.template[templateField].input_types &&
data.node?.template[templateField].input_types! data.node?.template[templateField].input_types!
.length > 0 .length > 0
? nodeColors[ ? nodeColors[
data.node?.template[templateField] data.node?.template[templateField].input_types![
.input_types![data.node?.template[templateField] data.node?.template[templateField]
.input_types!.length - 1] .input_types!.length - 1
] ?? ]
nodeColors[ ] ??
types[ nodeColors[
data.node?.template[templateField] types[
.input_types![data.node?.template[templateField] data.node?.template[templateField]
.input_types!.length - 1] .input_types![
] data.node?.template[templateField]
] .input_types!.length - 1
]
]
]
: nodeColors[ : nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
@ -692,9 +702,9 @@ export default function GenericNode({
data={data} data={data}
color={ color={
(data.node?.output_types && (data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ?? ? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]] nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown : nodeColors[types[data.type]]) ?? nodeColors.unknown
} }
title={ title={

2
src/frontend/src/utils/styleUtils.ts
View file

@ -81,6 +81,7 @@ import {
Network, Network,
Paperclip, Paperclip,
Pencil, Pencil,
PencilLine,
Pin, Pin,
Play, Play,
Plus, Plus,
@ -418,6 +419,7 @@ export const nodeIconsLucide: iconsType = {
Group, Group,
LogIn, LogIn,
ChevronUp, ChevronUp,
PencilLine,
Ungroup, Ungroup,
BookMarked, BookMarked,
Minus, Minus,