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

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

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

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

@ -1,7 +1,9 @@
import { forwardRef } from "react"; import { forwardRef } from "react";
export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>( export const GradientSparkles = forwardRef<
(props, ref) => { SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return ( return (
<> <>
<svg width="0" height="0" style={{ position: "absolute" }}> <svg width="0" height="0" style={{ position: "absolute" }}>
@ -27,12 +29,11 @@ export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildre
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
stroke="url(#grad1)" 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" /> <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> </svg>
</> </>
); );
} });
);

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

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

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

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

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

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

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

@ -48,6 +48,7 @@ import {
MessageCircle, MessageCircle,
MessageSquare, MessageSquare,
MessagesSquare, MessagesSquare,
Minus,
MoonIcon, MoonIcon,
MoreHorizontal, MoreHorizontal,
Paperclip, Paperclip,
@ -61,6 +62,7 @@ import {
Settings2, Settings2,
Shield, Shield,
Sparkles, Sparkles,
Square,
SunIcon, SunIcon,
TerminalSquare, TerminalSquare,
Trash2, Trash2,
@ -78,8 +80,6 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
Minus,
Square,
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte"; import { AirbyteIcon } from "../icons/Airbyte";
@ -91,7 +91,7 @@ import { EvernoteIcon } from "../icons/Evernote";
import { FBIcon } from "../icons/FacebookMessenger"; import { FBIcon } from "../icons/FacebookMessenger";
import { GitBookIcon } from "../icons/GitBook"; import { GitBookIcon } from "../icons/GitBook";
import { GoogleIcon } from "../icons/Google"; import { GoogleIcon } from "../icons/Google";
import {GradientSparkles} from "../icons/GradientSparkles"; import { GradientSparkles } from "../icons/GradientSparkles";
import { HuggingFaceIcon } from "../icons/HuggingFace"; import { HuggingFaceIcon } from "../icons/HuggingFace";
import { IFixIcon } from "../icons/IFixIt"; import { IFixIcon } from "../icons/IFixIt";
import { MetaIcon } from "../icons/Meta"; import { MetaIcon } from "../icons/Meta";