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

Formated code

Browse source
This commit is contained in:
igorrCarvalho 2023-09-18 19:52:27 -03:00
commit 1796d1aca0
7 changed files with 403 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { cloneDeep, divide } from "lodash";
import { cloneDeep } from "lodash";
import React, {
ReactNode,
useContext,
@ -122,10 +122,11 @@ export default function ParameterComponent({
<>
{index === 0 && (
<span>
{left ? "Components to connect into:" : "Components to connect to:"}
{left
? "Components to connect into:"
: "Components to connect to:"}
</span>
)
}
)}
<span
key={index}
className={classNames(
@ -147,8 +148,7 @@ export default function ParameterComponent({
/>
</div>
<span className="ps-2 text-xs text-foreground">
{nodeNames[item.family] ?? "Other"}
{" "}
{nodeNames[item.family] ?? "Other"}{" "}
<span className="text-xs">
{" "}
{item.type === "" ? "" : " - "}
@ -179,8 +179,7 @@ export default function ParameterComponent({
renderTooltips();
}, [tooltipTitle, flow]);
return (
!showNode ? (
return !showNode ? (
left &&
(type === "str" ||
type === "bool" ||
@ -206,7 +205,7 @@ export default function ParameterComponent({
isValidConnection(connection, reactFlowInstance!)
}
className={classNames(
left ? "-ml-0.5 my-12 " : " -mr-0.5 my-12 ",
left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background"
)}
style={{
@ -393,6 +392,5 @@ export default function ParameterComponent({
)}
</>
</div>
)
);
}

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

@ -35,10 +35,11 @@ export default function GenericNode({
function countHandles(): void {
numberOfInputs = Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => {
.filter((templateField) => templateField.charAt(0) !== "_")
.map((templateCamp) => {
const { template } = data.node!;
if (template[templateCamp].input_types) return true
if (!template[templateCamp].show) return false
if (template[templateCamp].input_types) return true;
if (!template[templateCamp].show) return false;
switch (template[templateCamp].type) {
case "str":
return false;
@ -55,15 +56,15 @@ export default function GenericNode({
case "int":
return false;
default:
return true
return true;
}
});
setHandles(numberOfInputs);
}
})
setHandles(numberOfInputs)
};
useEffect(() => {
countHandles();
}, [])
}, []);
// State for outline color
const { sseData, isBuilding } = useSSE();
@ -91,10 +92,9 @@ export default function GenericNode({
useEffect(() => {
setTimeout(() => {
updateNodeInternals(data.id)
}, 400)
}, [showNode])
updateNodeInternals(data.id);
}, 300);
}, [showNode]);
// New useEffect to watch for changes in sseData and update validation status
useEffect(() => {
@ -124,8 +124,10 @@ export default function GenericNode({
className={classNames(
selected ? "border border-ring" : "border",
" transition-transform ",
showNode ? " rounded-lg transform w-96 duration-500 ease-in-out scale-100 " : " rounded-full transform transform-width duration-500 w-26 h-26 scale-90 ",
"generic-node-div",
showNode
? " w-96 scale-100 transform rounded-lg duration-500 ease-in-out "
: " transform-width w-26 h-26 scale-90 transform rounded-full duration-500 ",
"generic-node-div"
)}
>
{data.node?.beta && showNode && (
@ -134,11 +136,26 @@ export default function GenericNode({
</div>
)}
<div>
<div className={"generic-node-div-title " + (!showNode ? " relative rounded-full w-24 h-24 " : " justify-between rounded-t-lg ")}>
<div className={"generic-node-title-arrangement rounded-full" + (!showNode && "justify-center")}>
<div
className={
"generic-node-div-title " +
(!showNode
? " relative h-24 w-24 rounded-full "
: " justify-between rounded-t-lg ")
}
>
<div
className={
"generic-node-title-arrangement rounded-full" +
(!showNode && "justify-center")
}
>
<IconComponent
name={name}
className={"generic-node-icon " + (!showNode && "absolute inset-x-6 h-12 w-12")}
className={
"generic-node-icon " +
(!showNode && "absolute inset-x-6 h-12 w-12")
}
iconColor={`${nodeColors[types[data.type]]}`}
/>
{showNode && (
@ -156,14 +173,16 @@ export default function GenericNode({
<>
{Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_")
.map((templateField: string, idx) => (
.map(
(templateField: string, idx) =>
data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced && (
<ParameterComponent
key={
(data.node!.template[templateField].input_types?.join(
";"
) ?? data.node!.template[templateField].type) +
(data.node!.template[
templateField
].input_types?.join(";") ??
data.node!.template[templateField].type) +
"|" +
templateField +
"|" +
@ -175,28 +194,36 @@ export default function GenericNode({
nodeColors[
types[data.node?.template[templateField].type!]
] ??
nodeColors[data.node?.template[templateField].type!] ??
nodeColors[
data.node?.template[templateField].type!
] ??
nodeColors.unknown
}
title={
data.node?.template[templateField].display_name
? data.node.template[templateField].display_name
: data.node?.template[templateField].name
? toTitleCase(data.node.template[templateField].name)
? toTitleCase(
data.node.template[templateField].name
)
: toTitleCase(templateField)
}
info={data.node?.template[templateField].info}
name={templateField}
tooltipTitle={
data.node?.template[templateField].input_types?.join(
"\n"
) ?? data.node?.template[templateField].type
data.node?.template[
templateField
].input_types?.join("\n") ??
data.node?.template[templateField].type
}
required={
data.node?.template[templateField].required
}
required={data.node?.template[templateField].required}
id={
(data.node?.template[templateField].input_types?.join(
";"
) ?? data.node?.template[templateField].type) +
(data.node?.template[
templateField
].input_types?.join(";") ??
data.node?.template[templateField].type) +
"|" +
templateField +
"|" +
@ -209,30 +236,33 @@ export default function GenericNode({
}
showNode={showNode}
/>
)))}
)
)}
<ParameterComponent
key={[data.type, data.id, ...data.node!.base_classes].join("|")}
key={[data.type, data.id, ...data.node!.base_classes].join(
"|"
)}
data={data}
setData={setData}
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
title={
data.node?.output_types && data.node.output_types.length > 0
data.node?.output_types &&
data.node.output_types.length > 0
? data.node.output_types.join("|")
: data.type
}
tooltipTitle={data.node?.base_classes.join("\n")}
id={[data.type, data.id, ...data.node!.base_classes].join("|")}
id={[data.type, data.id, ...data.node!.base_classes].join(
"|"
)}
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
</>
)}
</div>
{showNode && (
<div className="round-button-div">
<div>
@ -296,9 +326,18 @@ export default function GenericNode({
</div>
{showNode && (
<div className={(showNode ? "generic-node-desc " + (data.node?.description !== "" && showNode ? "py-5" : "pb-5") : "")}>
<div
className={
showNode
? "generic-node-desc " +
(data.node?.description !== "" && showNode ? "py-5" : "pb-5")
: ""
}
>
{data.node?.description !== "" && showNode && (
<div className="generic-node-desc-text">{data.node?.description}</div>
<div className="generic-node-desc-text">
{data.node?.description}
</div>
)}
<>
@ -324,14 +363,18 @@ export default function GenericNode({
nodeColors[
types[data.node?.template[templateField].type!]
] ??
nodeColors[data.node?.template[templateField].type!] ??
nodeColors[
data.node?.template[templateField].type!
] ??
nodeColors.unknown
}
title={
data.node?.template[templateField].display_name
? data.node.template[templateField].display_name
: data.node?.template[templateField].name
? toTitleCase(data.node.template[templateField].name)
? toTitleCase(
data.node.template[templateField].name
)
: toTitleCase(templateField)
}
info={data.node?.template[templateField].info}

13
src/frontend/src/icons/GradientSparkles/index.tsx
View file

@ -1,7 +1,9 @@
import { forwardRef } from "react";
export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => {
export const GradientSparkles = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return (
<>
<svg width="0" height="0" style={{ position: "absolute" }}>
@ -27,12 +29,11 @@ export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildre
stroke-linecap="round"
stroke-linejoin="round"
stroke="url(#grad1)"
ref={ref} {...props}
ref={ref}
{...props}
>
<path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z" />
</svg>
</>
);
}
);
});

2
src/frontend/src/pages/AdminPage/index.tsx
View file

@ -190,7 +190,7 @@ export default function AdminPage() {
setSuccessData({
title: "Success! New user added!",
});
})
});
})
.catch((error) => {
setErrorData({

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

@ -119,7 +119,8 @@ export default function NodeToolbarComponent({
>
<div
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" + (!canMinimize() && " rounded-r-md ") +
"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" +
(!canMinimize() && " rounded-r-md ") +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
@ -136,11 +137,14 @@ export default function NodeToolbarComponent({
<button
className="relative inline-flex items-center rounded-r-md 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"
onClick={(event) => {
setShowNode(prev => !prev);
updateNodeInternals(data.id)
setShowNode((prev) => !prev);
updateNodeInternals(data.id);
}}
>
<IconComponent name={showNode ? "Minus" : "Square"} className="h-4 w-4" />
<IconComponent
name={showNode ? "Minus" : "Square"}
className="h-4 w-4"
/>
</button>
</ShadTooltip>
)}

2
src/frontend/src/types/components/index.ts
View file

@ -174,7 +174,7 @@ export type IconComponentProps = {
name: string;
className?: string;
iconColor?: string;
onClick?: () => void
onClick?: () => void;
};
export type InputProps = {

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

@ -48,6 +48,7 @@ import {
MessageCircle,
MessageSquare,
MessagesSquare,
Minus,
MoonIcon,
MoreHorizontal,
Paperclip,
@ -61,6 +62,7 @@ import {
Settings2,
Shield,
Sparkles,
Square,
SunIcon,
TerminalSquare,
Trash2,
@ -78,8 +80,6 @@ import {
X,
XCircle,
Zap,
Minus,
Square,
} from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte";