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

Changed pencil on edit name

Browse source
This commit is contained in:
Lucas Oliveira 2024-03-03 23:36:23 +01:00
commit 4d730204a8
2 changed files with 76 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -138,7 +138,8 @@ export default function GenericNode({
const iconColor = nodeColors[types[data.type]]; const iconColor = nodeColors[types[data.type]];
const iconName = const iconName =
iconElement || (data.node?.flow ? "group_components" : name); iconElement || (data.node?.flow ? "group_components" : name);
const iconClassName = `generic-node-icon ${!showNode ? " absolute inset-x-6 h-12 w-12 " : "" const iconClassName = `generic-node-icon ${
!showNode ? " absolute inset-x-6 h-12 w-12 " : ""
}`; }`;
if (iconElement && isEmoji) { if (iconElement && isEmoji) {
return nodeIconFragment(iconElement); return nodeIconFragment(iconElement);
@ -331,8 +332,8 @@ export default function GenericNode({
/> />
</div> </div>
) : ( ) : (
<div className="group flex items-center gap-2.5"> <div className="group flex items-start gap-1.5">
<ShadTooltip content={data.id}> <ShadTooltip content={data.node?.display_name}>
<div <div
onDoubleClick={(event) => { onDoubleClick={(event) => {
if (nameEditable) { if (nameEditable) {
@ -358,8 +359,8 @@ export default function GenericNode({
}} }}
> >
<IconComponent <IconComponent
name="Pencil" name="PencilLine"
className="hidden h-4 w-4 animate-pulse text-status-blue group-hover:block" className="hidden h-3 w-3 text-status-blue group-hover:block"
/> />
</div> </div>
)} )}
@ -394,21 +395,27 @@ export default function GenericNode({
.length > 0 .length > 0
? nodeColors[ ? nodeColors[
data.node?.template[templateField] data.node?.template[templateField]
.input_types![data.node?.template[templateField] .input_types![
.input_types!.length - 1] data.node?.template[templateField]
.input_types!.length - 1
]
] ?? ] ??
nodeColors[ nodeColors[
types[ types[
data.node?.template[templateField] data.node?.template[templateField]
.input_types![data.node?.template[templateField] .input_types![
.input_types!.length - 1] data.node?.template[templateField]
.input_types!.length - 1
]
] ]
] ]
: nodeColors[ : nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[
data.node?.template[templateField].type!
]
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }
@ -472,10 +479,7 @@ export default function GenericNode({
)} )}
</div> </div>
{showNode && ( {showNode && (
<Button <Button variant="secondary" className={"group h-9 px-1.5"}>
variant="secondary"
className={"group h-9 px-1.5"}
>
<div> <div>
<ShadTooltip <ShadTooltip
content={ content={
@ -497,12 +501,15 @@ export default function GenericNode({
} }
side="bottom" side="bottom"
> >
<div onClick={() => { <div
onClick={() => {
if (buildStatus === BuildStatus.BUILDING || isBuilding) if (buildStatus === BuildStatus.BUILDING || isBuilding)
return; return;
setValidationStatus(null); setValidationStatus(null);
buildFlow({ nodeId: data.id }); buildFlow({ nodeId: data.id });
}} className="generic-node-status-position flex items-center justify-center"> }}
className="generic-node-status-position flex items-center justify-center"
>
{renderIconStatus(buildStatus, validationStatus)} {renderIconStatus(buildStatus, validationStatus)}
</div> </div>
</ShadTooltip> </ShadTooltip>
@ -620,15 +627,18 @@ export default function GenericNode({
data.node?.template[templateField].input_types! data.node?.template[templateField].input_types!
.length > 0 .length > 0
? nodeColors[ ? nodeColors[
data.node?.template[templateField].input_types![
data.node?.template[templateField] data.node?.template[templateField]
.input_types![data.node?.template[templateField] .input_types!.length - 1
.input_types!.length - 1] ]
] ?? ] ??
nodeColors[ nodeColors[
types[ types[
data.node?.template[templateField] data.node?.template[templateField]
.input_types![data.node?.template[templateField] .input_types![
.input_types!.length - 1] data.node?.template[templateField]
.input_types!.length - 1
]
] ]
] ]
: nodeColors[ : nodeColors[

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

@ -81,6 +81,7 @@ import {
Network, Network,
Paperclip, Paperclip,
Pencil, Pencil,
PencilLine,
Pin, Pin,
Play, Play,
Plus, Plus,
@ -418,6 +419,7 @@ export const nodeIconsLucide: iconsType = {
Group, Group,
LogIn, LogIn,
ChevronUp, ChevronUp,
PencilLine,
Ungroup, Ungroup,
BookMarked, BookMarked,
Minus, Minus,