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

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

@ -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>

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,