From 3e341b5745144af5639c277622b02e0995d2814a Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 14 Feb 2024 10:26:55 -0300 Subject: [PATCH 1/7] add icon regex --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index b8d8f5a9d..a1f011aff 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -107,6 +107,9 @@ export default function GenericNode({ const nameEditable = data.node?.flow || data.type === "CustomComponent"; + const emojiRegex = /\p{Emoji}/u; + const isEmoji = emojiRegex.test(data?.node?.icon!); + return ( <> From 865f147c2a8cd6d87367990bb0077422f8f4270b Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 14 Feb 2024 10:30:00 -0300 Subject: [PATCH 2/7] add isEmoji --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index a1f011aff..e9f6711ae 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -160,7 +160,18 @@ export default function GenericNode({ } > {data?.node?.icon ? ( - {data?.node?.icon} + isEmoji ? ( + {data?.node?.icon} + ) : ( + + ) ) : ( Date: Wed, 14 Feb 2024 10:31:12 -0300 Subject: [PATCH 3/7] Fix invalid emoji error handling --- .../interface/custom/custom_component/component.py | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/interface/custom/custom_component/component.py b/src/backend/langflow/interface/custom/custom_component/component.py index e2d84ed70..fc479e068 100644 --- a/src/backend/langflow/interface/custom/custom_component/component.py +++ b/src/backend/langflow/interface/custom/custom_component/component.py @@ -6,6 +6,7 @@ from typing import Any, ClassVar, Optional import emoji from cachetools import TTLCache, cachedmethod from fastapi import HTTPException + from langflow.interface.custom.code_parser import CodeParser from langflow.utils import validate @@ -20,7 +21,9 @@ class ComponentFunctionEntrypointNameNullError(HTTPException): class Component: ERROR_CODE_NULL: ClassVar[str] = "Python code must be provided." - ERROR_FUNCTION_ENTRYPOINT_NAME_NULL: ClassVar[str] = "The name of the entrypoint function must be provided." + ERROR_FUNCTION_ENTRYPOINT_NAME_NULL: ClassVar[str] = ( + "The name of the entrypoint function must be provided." + ) code: Optional[str] = None _function_entrypoint_name: str = "build" @@ -100,7 +103,8 @@ class Component: emoji_value = emoji.emojize(value, variant="emoji_type") if value == emoji_value: - raise ValueError(f"Invalid emoji. {value} is not a valid emoji.") + warnings.warn(f"Invalid emoji. {value} is not a valid emoji.") + return value return emoji_value def build(self, *args: Any, **kwargs: Any) -> Any: From c99e67110ac1c7ec3f26f4aab3540421627808af Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Wed, 14 Feb 2024 10:33:48 -0300 Subject: [PATCH 4/7] Fix invalid emoji validation in Component class --- .../langflow/interface/custom/custom_component/component.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/backend/langflow/interface/custom/custom_component/component.py b/src/backend/langflow/interface/custom/custom_component/component.py index fc479e068..30a5a45d2 100644 --- a/src/backend/langflow/interface/custom/custom_component/component.py +++ b/src/backend/langflow/interface/custom/custom_component/component.py @@ -99,8 +99,8 @@ class Component: # we are going to use the emoji library to validate the emoji # emojis can be defined using the :emoji_name: syntax if not value.startswith(":") or not value.endswith(":"): - raise ValueError("Invalid emoji. Please use the :emoji_name: syntax.") - + warnings.warn("Invalid emoji. Please use the :emoji_name: syntax.") + return value emoji_value = emoji.emojize(value, variant="emoji_type") if value == emoji_value: warnings.warn(f"Invalid emoji. {value} is not a valid emoji.") From 9d2ffc130d1ea03cb52d78435cb1c5386fc4e3ab Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Wed, 14 Feb 2024 10:36:14 -0300 Subject: [PATCH 5/7] add logic to icon name --- src/frontend/src/CustomNodes/GenericNode/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index e9f6711ae..988b9b964 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -164,7 +164,7 @@ export default function GenericNode({ {data?.node?.icon} ) : ( Date: Wed, 14 Feb 2024 10:40:27 -0300 Subject: [PATCH 6/7] changing to useCallback function --- .../src/CustomNodes/GenericNode/index.tsx | 64 +++++++++++-------- 1 file changed, 39 insertions(+), 25 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 988b9b964..0d88b1156 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { NodeToolbar } from "reactflow"; import ShadTooltip from "../../components/ShadTooltipComponent"; import Tooltip from "../../components/TooltipComponent"; @@ -110,6 +110,43 @@ export default function GenericNode({ const emojiRegex = /\p{Emoji}/u; const isEmoji = emojiRegex.test(data?.node?.icon!); + const iconNodeRender = useCallback(() => { + if (data?.node?.icon) { + if (isEmoji) { + return {data.node.icon}; + } else { + const iconName = + data.node.icon || (data.node?.flow ? "group_components" : name); + const iconClassName = `generic-node-icon ${ + !showNode ? "absolute inset-x-6 h-12 w-12" : "" + }`; + const iconColor = nodeColors[types[data.type]]; + + return ( + + ); + } + } else { + const iconName = data.node?.flow ? "group_components" : name; + const iconClassName = `generic-node-icon ${ + !showNode ? "absolute inset-x-6 h-12 w-12" : "" + }`; + const iconColor = nodeColors[types[data.type]]; + + return ( + + ); + } + }, [data, isEmoji, name, showNode]); + return ( <> @@ -159,30 +196,7 @@ export default function GenericNode({ (!showNode && "justify-center") } > - {data?.node?.icon ? ( - isEmoji ? ( - {data?.node?.icon} - ) : ( - - ) - ) : ( - - )} - + {iconNodeRender()} {showNode && (
{nameEditable && inputName ? ( From 4d750c2180734c3ed0ea42d8d67c7513916ae2a0 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 16 Feb 2024 00:38:58 -0300 Subject: [PATCH 7/7] refactor: icon fragments functions --- .../src/CustomNodes/GenericNode/index.tsx | 55 ++++++++----------- 1 file changed, 24 insertions(+), 31 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 0d88b1156..2ddd49b8f 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -111,42 +111,35 @@ export default function GenericNode({ const isEmoji = emojiRegex.test(data?.node?.icon!); const iconNodeRender = useCallback(() => { - if (data?.node?.icon) { - if (isEmoji) { - return {data.node.icon}; - } else { - const iconName = - data.node.icon || (data.node?.flow ? "group_components" : name); - const iconClassName = `generic-node-icon ${ - !showNode ? "absolute inset-x-6 h-12 w-12" : "" - }`; - const iconColor = nodeColors[types[data.type]]; + const iconElement = data?.node?.icon; + const iconColor = nodeColors[types[data.type]]; + const iconName = + iconElement || (data.node?.flow ? "group_components" : name); + const iconClassName = `generic-node-icon ${ + !showNode ? "absolute inset-x-6 h-12 w-12" : "" + }`; - return ( - - ); - } + if (iconElement && isEmoji) { + return nodeIconFragment(iconElement); } else { - const iconName = data.node?.flow ? "group_components" : name; - const iconClassName = `generic-node-icon ${ - !showNode ? "absolute inset-x-6 h-12 w-12" : "" - }`; - const iconColor = nodeColors[types[data.type]]; - - return ( - - ); + return checkNodeIconFragment(iconColor, iconName, iconClassName); } }, [data, isEmoji, name, showNode]); + const nodeIconFragment = (icon) => { + return {icon}; + }; + + const checkNodeIconFragment = (iconColor, iconName, iconClassName) => { + return ( + + ); + }; + return ( <>