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

Refactor code for parameterComponent and nodeToolbarComponent

Browse source
This commit is contained in:
anovazzi1 2024-03-04 12:58:12 -03:00
commit 537337ed7f
4 changed files with 38 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -253,15 +253,15 @@ export default function ParameterComponent({
{item.display_name === "" ? "" : " - "} {item.display_name === "" ? "" : " - "}
{item.display_name.split(", ").length > 2 {item.display_name.split(", ").length > 2
? item.display_name.split(", ").map((el, index) => ( ? item.display_name.split(", ").map((el, index) => (
<React.Fragment key={el + name}> <React.Fragment key={el + name}>
<span> <span>
{index === {index ===
item.display_name.split(", ").length - 1 item.display_name.split(", ").length - 1
? el ? el
: (el += `, `)} : (el += `, `)}
</span> </span>
</React.Fragment> </React.Fragment>
)) ))
: item.display_name} : item.display_name}
</span> </span>
) : ( ) : (
@ -270,14 +270,14 @@ export default function ParameterComponent({
{item.type === "" ? "" : " - "} {item.type === "" ? "" : " - "}
{item.type.split(", ").length > 2 {item.type.split(", ").length > 2
? item.type.split(", ").map((el, index) => ( ? item.type.split(", ").map((el, index) => (
<React.Fragment key={el + name}> <React.Fragment key={el + name}>
<span> <span>
{index === item.type.split(", ").length - 1 {index === item.type.split(", ").length - 1
? el ? el
: (el += `, `)} : (el += `, `)}
</span> </span>
</React.Fragment> </React.Fragment>
)) ))
: item.type} : item.type}
</span> </span>
)} )}
@ -346,7 +346,7 @@ export default function ParameterComponent({
className={ className={
"relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" + "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
((name === "code" && type === "code") || ((name === "code" && type === "code") ||
(name.includes("code") && proxy) (name.includes("code") && proxy)
? " hidden " ? " hidden "
: "") : "")
} }
@ -355,10 +355,14 @@ export default function ParameterComponent({
<div <div
className={ className={
"w-full truncate text-sm" + "w-full truncate text-sm" +
(left ? "" : " text-end") + (left ? "" : " gap-2 flex justify-end items-center") +
(info !== "" ? " flex items-center" : "") (info !== "" ? " flex items-center" : "")
} }
> >
{!left && data.node?.pinned &&
<div>
<IconComponent className="w-5 h-5 text-blue-400" name={"Snowflake"} />
</div>}
{proxy ? ( {proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}> <ShadTooltip content={<span>{proxy.id}</span>}>
<span>{title}</span> <span>{title}</span>
@ -427,8 +431,8 @@ export default function ParameterComponent({
)} )}
{left === true && {left === true &&
type === "str" && type === "str" &&
!data.node?.template[name].options ? ( !data.node?.template[name].options ? (
<div className="mt-2 w-full"> <div className="mt-2 w-full">
{data.node?.template[name].list ? ( {data.node?.template[name].list ? (
<div className="w-5/6 flex-grow"> <div className="w-5/6 flex-grow">
@ -436,7 +440,7 @@ export default function ParameterComponent({
disabled={disabled} disabled={disabled}
value={ value={
!data.node.template[name].value || !data.node.template[name].value ||
data.node.template[name].value === "" data.node.template[name].value === ""
? [""] ? [""]
: data.node.template[name].value : data.node.template[name].value
} }
@ -599,10 +603,10 @@ export default function ParameterComponent({
editNode={false} editNode={false}
value={ value={
!data.node!.template[name].value || !data.node!.template[name].value ||
data.node!.template[name].value?.toString() === "{}" data.node!.template[name].value?.toString() === "{}"
? { ? {
yourkey: "value", yourkey: "value",
} }
: data.node!.template[name].value : data.node!.template[name].value
} }
onChange={handleOnNewValue} onChange={handleOnNewValue}
@ -616,7 +620,7 @@ export default function ParameterComponent({
editNode={false} editNode={false}
value={ value={
data.node!.template[name].value?.length === 0 || data.node!.template[name].value?.length === 0 ||
!data.node!.template[name].value !data.node!.template[name].value
? [{ "": "" }] ? [{ "": "" }]
: convertObjToArray(data.node!.template[name].value) : convertObjToArray(data.node!.template[name].value)
} }

7
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -267,7 +267,7 @@ export default function NodeToolbarComponent({
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip content="Pin" side="top"> <ShadTooltip content="Freeze" side="top">
<button <button
className={classNames( className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
@ -287,10 +287,11 @@ export default function NodeToolbarComponent({
}} }}
> >
<IconComponent <IconComponent
name="Pin" name="Snowflake"
className={cn( className={cn(
"h-4 w-4 transition-all", "h-4 w-4 transition-all",
pinned ? "animate-wiggle fill-current" : "" // TODO UPDATE THIS COLOR TO BE A VARIABLE
pinned ? "animate-wiggle text-blue-400" : ""
)} )}
/> />
</button> </button>

4
src/frontend/src/stores/flowStore.ts
View file

@ -187,10 +187,12 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
typeof change === "function" typeof change === "function"
? change(get().nodes.find((node) => node.id === id)!) ? change(get().nodes.find((node) => node.id === id)!)
: change; : change;
get().setNodes((oldNodes) => get().setNodes((oldNodes) =>
oldNodes.map((node) => { oldNodes.map((node) => {
if (node.id === id) { if (node.id === id) {
if((node.data as NodeDataType).node?.pinned){
(newChange.data as NodeDataType).node!.pinned = false;
}
return newChange; return newChange;
} }
return node; return node;

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

@ -6,6 +6,7 @@ import {
BookMarked, BookMarked,
BookmarkPlus, BookmarkPlus,
Bot, Bot,
Snowflake,
Boxes, Boxes,
Braces, Braces,
Cable, Cable,
@ -383,6 +384,7 @@ export const nodeIconsLucide: iconsType = {
Clipboard, Clipboard,
Code2, Code2,
Variable, Variable,
Snowflake,
Store, Store,
Download, Download,
Eraser, Eraser,