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

fix(GenericNode/index.tsx): fix initial state of inputName to be false instead of true for better user experience

Browse source 
refactor(GenericNode/index.tsx): refactor tooltip div structure to improve readability and add pencil icon if node has flow
refactor(GenericNode/index.tsx): refactor color logic to use typesContext instead of accessing types directly
refactor(GenericNode/index.tsx): refactor output type title logic to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor validation status params rendering to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor generic node description rendering to use ternary operator for better readability
refactor(GenericNode/index.tsx): refactor template field rendering to use ternary operator for better readability
refactor(PageComponent/index.tsx): remove unnecessary empty line
This commit is contained in:
anovazzi1 2023-11-24 12:43:29 -03:00
commit 2438a8c658
2 changed files with 23 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -38,7 +38,7 @@ export default function GenericNode({
const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } = const { types, deleteNode, reactFlowInstance, setFilterEdge, getFilterEdge } =
useContext(typesContext); useContext(typesContext);
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
const [inputName, setInputName] = useState(true); const [inputName, setInputName] = useState(false);
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
@ -198,11 +198,14 @@ export default function GenericNode({
</div> </div>
) : ( ) : (
<ShadTooltip content={data.node?.display_name}> <ShadTooltip content={data.node?.display_name}>
<div <div className="flex" onDoubleClick={() => setInputName(true)}>
className="generic-node-tooltip-div text-primary" <div
onDoubleClick={() => setInputName(true)} className="generic-node-tooltip-div text-primary pr-3"
>
{data.node?.display_name} >
{data.node?.display_name}
</div>
{data.node?.flow&& <IconComponent name="Pencil" className="w-5 h-5 text-primary-content" />}
</div> </div>
</ShadTooltip> </ShadTooltip>
)} )}
@ -232,10 +235,10 @@ export default function GenericNode({
setData={setData} setData={setData}
color={ color={
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors[ nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }
@ -282,7 +285,7 @@ export default function GenericNode({
color={nodeColors[types[data.type]] ?? nodeColors.unknown} color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={ title={
data.node?.output_types && data.node?.output_types &&
data.node.output_types.length > 0 data.node.output_types.length > 0
? data.node.output_types.join("|") ? data.node.output_types.join("|")
: data.type : data.type
} }
@ -320,10 +323,10 @@ export default function GenericNode({
<div className="max-h-96 overflow-auto"> <div className="max-h-96 overflow-auto">
{typeof validationStatus.params === "string" {typeof validationStatus.params === "string"
? validationStatus.params ? validationStatus.params
.split("\n") .split("\n")
.map((line: string, index: number) => ( .map((line: string, index: number) => (
<div key={index}>{line}</div> <div key={index}>{line}</div>
)) ))
: ""} : ""}
</div> </div>
) )
@ -367,14 +370,14 @@ export default function GenericNode({
className={ className={
showNode showNode
? "generic-node-desc " + ? "generic-node-desc " +
(data.node?.description !== "" ? "py-5" : "pb-5") (data.node?.description !== "" ? "py-5" : "pb-5")
: "" : ""
} }
> >
{data.node?.description !== "" && {data.node?.description !== "" &&
showNode && showNode &&
data.node?.flow && data.node?.flow &&
inputDescription ? ( inputDescription ? (
<Textarea <Textarea
autoFocus autoFocus
onBlur={() => { onBlur={() => {
@ -429,7 +432,7 @@ export default function GenericNode({
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField].advanced ? (
<ParameterComponent <ParameterComponent
index={idx.toString()} index={idx.toString()}
key={scapedJSONStringfy({ key={scapedJSONStringfy({
@ -444,10 +447,10 @@ export default function GenericNode({
setData={setData} setData={setData}
color={ color={
nodeColors[ nodeColors[
types[data.node?.template[templateField].type!] types[data.node?.template[templateField].type!]
] ?? ] ??
nodeColors[ nodeColors[
data.node?.template[templateField].type! data.node?.template[templateField].type!
] ?? ] ??
nodeColors.unknown nodeColors.unknown
} }

1
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -145,7 +145,6 @@ export default function Page({
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mousemove", handleMouseMove);
}; };
}, [position, lastCopiedSelection, lastSelection]); }, [position, lastCopiedSelection, lastSelection]);
const [selectionMenuVisible, setSelectionMenuVisible] = useState(false); const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
const { setExtraComponent, setExtraNavigation } = useContext(locationContext); const { setExtraComponent, setExtraNavigation } = useContext(locationContext);