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

Refactor parameter component in GenericNode

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2024-03-01 08:00:30 -03:00
commit 3fcedc8a07
3 changed files with 72 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -162,6 +162,56 @@ export default function GenericNode({
); );
}; };
const buildParameterComponent = ({
data,
conditionalPath,
showNode,
left,
}: {
data: NodeDataType;
conditionalPath: string | null;
showNode: boolean;
left: boolean;
}) => {
return (
<ParameterComponent
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
conditionalPath: conditionalPath,
})}
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={conditionalPath}
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: conditionalPath,
}}
// 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={left}
showNode={showNode}
/>
);
};
const isDark = useDarkStore((state) => state.dark); const isDark = useDarkStore((state) => state.dark);
const renderIconStatus = ( const renderIconStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
@ -665,83 +715,27 @@ export default function GenericNode({
{" "} {" "}
</div> </div>
<div> <div>
{data.node!.base_classes.length > 0 && ( {data.node!.base_classes.length > 0 &&
<ParameterComponent // if conditionalPaths in data.node.conditionalPaths
key={scapedJSONStringfy({ // then buildParameterComponent for each conditionalPath
baseClasses: data.node!.base_classes, // else buildParameterComponent for each data.node.base_classes
id: data.id, // first we check
dataType: data.type, data.node!.conditionalPaths &&
conditionalPath: data.node!.is_conditional ? true : null, data.node!.conditionalPaths.length > 1
? data.node!.conditionalPaths.map((conditionalPath) =>
buildParameterComponent({
data,
conditionalPath,
showNode,
left: false,
})
)
: buildParameterComponent({
data,
conditionalPath: null,
showNode,
left: false,
})} })}
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>
</> </>
</div> </div>

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

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

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

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