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

Add branching to GenericNode

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-02-29 23:07:10 -03:00
commit ca514e579f
5 changed files with 90 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -15,6 +15,7 @@ import KeypairListComponent from "../../../../components/keypairListComponent";
import PromptAreaComponent from "../../../../components/promptComponent";
import TextAreaComponent from "../../../../components/textAreaComponent";
import ToggleShadComponent from "../../../../components/toggleShadComponent";
import { Badge } from "../../../../components/ui/badge";
import { Button } from "../../../../components/ui/button";
import {
LANGFLOW_SUPPORTED_TYPES,
@ -50,6 +51,7 @@ export default function ParameterComponent({
data,
tooltipTitle,
title,
conditionPath,
color,
type,
name = "",
@ -315,6 +317,12 @@ export default function ParameterComponent({
(info !== "" ? " flex items-center" : "")
}
>
{" "}
{conditionPath && (
<Badge variant="gray" size="md" className="mr-2">
{conditionPath}
</Badge>
)}
{proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}>
<span>{title}</span>

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

@ -664,37 +664,85 @@ export default function GenericNode({
>
{" "}
</div>
{data.node!.base_classes.length > 0 && (
<ParameterComponent
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
})}
data={data}
color={
(data.node?.output_types &&
data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown
}
title={
data.node?.output_types && data.node.output_types.length > 0
? data.node.output_types.join(" | ")
: data.type
}
tooltipTitle={data.node?.base_classes.join("\n")}
id={{
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
}}
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
)}
<div>
{data.node!.base_classes.length > 0 && (
<ParameterComponent
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
conditionalPath: data.node!.is_conditional ? true : null,
})}
data={data}
color={
(data.node?.output_types &&
data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown
}
title={
data.node?.output_types &&
data.node.output_types.length > 0
? data.node.output_types.join(" | ")
: data.type
}
conditionPath={data.node?.is_conditional ? "True" : null}
tooltipTitle={data.node?.base_classes.join("\n")}
id={{
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
// First parameter component should be true
// Second should be false
conditionalPath: data.node!.is_conditional ? true : null,
}}
// Type should be base_classes if it's not a conditional node
// else it should be true in the first parameter component
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
)}
{data.node!.is_conditional && (
<ParameterComponent
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
conditionalPath: data.node!.is_conditional ? true : null,
})}
data={data}
color={
(data.node?.output_types &&
data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown
}
title={
data.node?.output_types &&
data.node.output_types.length > 0
? data.node.output_types.join(" | ")
: data.type
}
conditionPath={data.node?.is_conditional ? "False" : null}
tooltipTitle={data.node?.base_classes.join("\n")}
id={{
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
// condition should be null if it's not a conditional node
// false if it's a conditional node and the condition is false
// so we should check if it's a conditional node.
conditionalPath: data.node!.is_conditional ? false : null,
}}
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
)}
</div>
</>
</div>
)}

1
src/frontend/src/types/api/index.ts
View file

@ -20,6 +20,7 @@ export type APIClassType = {
icon?: string;
is_input?: boolean;
is_output?: boolean;
is_conditional?: boolean;
input_types?: Array<string>;
output_types?: Array<string>;
custom_fields?: CustomFieldsType;

1
src/frontend/src/types/components/index.ts
View file

@ -40,6 +40,7 @@ export type DropDownComponentType = {
export type ParameterComponentType = {
data: NodeDataType;
title: string;
conditionPath?: string | null;
id: sourceHandleType | targetHandleType;
color: string;
left: boolean;

1
src/frontend/src/types/flow/index.ts
View file

@ -52,6 +52,7 @@ export type sourceHandleType = {
dataType: string;
id: string;
baseClasses: string[];
conditionalPath?: boolean | null;
};
//left side
export type targetHandleType = {