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

🔨 refactor(GenericNode/index.tsx): extract helper functions to improve code readability and maintainability

Browse source 
🐛 fix(GenericNode/index.tsx): fix incorrect class name in getNodeClassName function
✨ feat(GenericNode/index.tsx): add renderIconComponents function to render different icon components based on build and validation status
✨ feat(GenericNode/index.tsx): add getSpecificClass function to determine specific class based on build and validation status
✨ feat(GenericNode/index.tsx): add getStatusClassName function to determine status class based on validation status and build status
✨ feat(GenericNode/index.tsx): add getIconComponent function to render icon component with name and class name
✨ feat(GenericNode/index.tsx): add getNodeClassName function to determine node class name based on selected, showNode, build status, and validation status
✨ feat(GenericNode/index.tsx): add getBaseBorderClass function to determine base border class based on selected state
✨ feat(GenericNode/index.tsx): add getNodeSizeClass function to determine node size class based on showNode state
This commit is contained in:
cristhianzl 2024-02-20 10:48:19 -03:00
commit a32c3a3730
1 changed files with 81 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -157,6 +157,78 @@ export default function GenericNode({
);
};
const getIconComponent = (name, className) => (
<IconComponent
name={name}
className={`absolute h-5 stroke-2 ${className} ml-0.5`}
/>
);
const getStatusClassName = (
validationStatus: validationStatusType | null,
isBuilding: boolean
) => {
if (validationStatus && validationStatus.valid) {
return "green-status";
} else if (validationStatus && !validationStatus.valid) {
return "red-status";
} else if (!validationStatus || isBuilding) {
return "yellow-status";
} else {
return "status-build-animation";
}
};
const renderIconComponents = (
buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null,
isBuilding: boolean
) => {
if (buildStatus === BuildStatus.BUILDING) {
return getIconComponent("Square", "red-status");
} else {
const className = getStatusClassName(validationStatus, isBuilding);
return <>{getIconComponent("Play", className)}</>;
}
};
const getSpecificClass = (
buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null
) => {
if (
buildStatus === BuildStatus.BUILDED &&
validationStatus &&
!validationStatus.valid
) {
return "border-none ring ring-red-300";
} else if (buildStatus === BuildStatus.BUILDING) {
return "border-none ring";
} else {
return "";
}
};
const getNodeClassName = (
selected: boolean,
showNode: boolean,
buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null
) => {
return classNames(
getBaseBorderClass(selected),
getNodeSizeClass(showNode),
"generic-node-div",
getSpecificClass(buildStatus, validationStatus)
);
};
const getBaseBorderClass = (selected) =>
selected ? "border border-ring" : "border";
const getNodeSizeClass = (showNode) =>
showNode ? "w-96 rounded-lg" : "w-26 h-26 rounded-full";
return (
<>
<NodeToolbar>
@ -181,18 +253,11 @@ export default function GenericNode({
</NodeToolbar>
<div
className={classNames(
selected ? "border border-ring" : "border",
showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full",
"generic-node-div",
data?.build_status === BuildStatus.BUILDED &&
validationStatus &&
!validationStatus.valid
? "border-none ring ring-red-300"
: "",
data?.build_status === BuildStatus.BUILDING
? " border-none ring"
: ""
className={getNodeClassName(
selected,
showNode,
data?.build_status,
validationStatus
)}
>
{data.node?.beta && showNode && (
@ -430,43 +495,10 @@ export default function GenericNode({
}
>
<div className="generic-node-status-position flex items-center justify-center">
{data?.build_status === BuildStatus.BUILDING ? (
<>
<IconComponent
name="Square"
className="red-status absolute h-5 stroke-1"
/>
</>
) : (
<>
<IconComponent
name="Play"
className={classNames(
validationStatus && validationStatus.valid
? "green-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
validationStatus && !validationStatus.valid
? "red-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
!validationStatus || isBuilding
? "yellow-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
</>
{renderIconComponents(
data?.build_status,
validationStatus,
isBuilding
)}
</div>
</Tooltip>