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

code format

Browse source
This commit is contained in:
anovazzi1 2023-09-18 20:37:01 -03:00
commit fda2047fec
24 changed files with 204 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -33,7 +33,7 @@ import {
nodeIconsLucide,
nodeNames,
} from "../../../../utils/styleUtils";
import { classNames, extractIdFromLongId, groupByFamily } from "../../../../utils/utils";
import { classNames, groupByFamily } from "../../../../utils/utils";
export default function ParameterComponent({
left,
@ -48,7 +48,7 @@ export default function ParameterComponent({
required = false,
optionalHandle = null,
info = "",
proxy
proxy,
}: ParameterComponentType): JSX.Element {
const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef<HTMLDivElement & ReactNode>(null);
@ -185,10 +185,13 @@ export default function ParameterComponent({
(info !== "" ? " flex items-center" : "")
}
>
{proxy ? (<ShadTooltip content={<span>{proxy.id}</span>}>
{proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}>
<span>{title}</span>
</ShadTooltip>):title}
</ShadTooltip>
) : (
title
)}
<span className="text-status-red">{required ? " *" : ""}</span>
<div className="">
{info !== "" && (
@ -302,7 +305,11 @@ export default function ParameterComponent({
) : left === true && type === "code" ? (
<div className="mt-2 w-full">
<CodeAreaComponent
readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
readonly={
data.node?.flow && data.node.template[name].dynamic
? true
: false
}
dynamic={data.node?.template[name].dynamic ?? false}
setNodeClass={(nodeClass) => {
data.node = nodeClass;
@ -338,7 +345,11 @@ export default function ParameterComponent({
) : left === true && type === "prompt" ? (
<div className="mt-2 w-full">
<PromptAreaComponent
readonly={data.node?.flow && data.node.template[name].dynamic?true:false}
readonly={
data.node?.flow && data.node.template[name].dynamic
? true
: false
}
field_name={name}
setNodeClass={(nodeClass) => {
data.node = nodeClass;

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

@ -1,21 +1,26 @@
import { cloneDeep, get } from "lodash";
import { cloneDeep } from "lodash";
import { useContext, useEffect, useState } from "react";
import { NodeToolbar, XYPosition, useUpdateNodeInternals } from "reactflow";
import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
import ShadTooltip from "../../components/ShadTooltipComponent";
import Tooltip from "../../components/TooltipComponent";
import IconComponent from "../../components/genericIconComponent";
import InputComponent from "../../components/inputComponent";
import { Textarea } from "../../components/ui/textarea";
import { useSSE } from "../../contexts/SSEContext";
import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { validationStatusType } from "../../types/components";
import { NodeDataType } from "../../types/flow";
import { cleanEdges, getGroupStatus, handleKeyDown, scapedJSONStringfy } from "../../utils/reactflowUtils";
import {
cleanEdges,
getGroupStatus,
handleKeyDown,
scapedJSONStringfy,
} from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, toTitleCase } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent";
import InputComponent from "../../components/inputComponent";
import { Textarea } from "../../components/ui/textarea";
export default function GenericNode({
data: olddata,
@ -66,7 +71,9 @@ export default function GenericNode({
// New useEffect to watch for changes in sseData and update validation status
useEffect(() => {
const relevantData = data.node?.flow ? getGroupStatus(data.node.flow, sseData) : sseData[data.id];
const relevantData = data.node?.flow
? getGroupStatus(data.node.flow, sseData)
: sseData[data.id];
if (relevantData) {
// Extract validation information from relevantData and update the validationStatus state
setValidationStatus(relevantData);
@ -105,7 +112,7 @@ export default function GenericNode({
iconColor={`${nodeColors[types[data.type]]}`}
/>
<div className="generic-node-tooltip-div">
{data.node?.flow && inputName ?
{data.node?.flow && inputName ? (
<div>
<InputComponent
autoFocus
@ -123,13 +130,17 @@ export default function GenericNode({
password={false}
blurOnEnter={true}
/>
</div> : <ShadTooltip content={data.node?.display_name}>
<div className="generic-node-tooltip-div text-primary" onDoubleClick={() => setInputName(true)}>
</div>
) : (
<ShadTooltip content={data.node?.display_name}>
<div
className="generic-node-tooltip-div text-primary"
onDoubleClick={() => setInputName(true)}
>
{data.node?.display_name}
</div>
</ShadTooltip>
}
)}
</div>
</div>
<div className="round-button-div">
@ -192,7 +203,7 @@ export default function GenericNode({
</div>
<div className="generic-node-desc">
{data.node?.flow && inputDescription ?
{data.node?.flow && inputDescription ? (
<Textarea
autoFocus
onBlur={() => {
@ -208,7 +219,12 @@ export default function GenericNode({
onChange={(e) => setNodeDescription(e.target.value)}
onKeyDown={(e) => {
handleKeyDown(e, nodeDescription, "");
if(e.key === "Enter" && e.shiftKey === false && e.ctrlKey === false && e.altKey === false){
if (
e.key === "Enter" &&
e.shiftKey === false &&
e.ctrlKey === false &&
e.altKey === false
) {
setInputDescription(false);
if (nodeDescription.trim() !== "") {
setNodeDescription(nodeDescription);
@ -218,9 +234,15 @@ export default function GenericNode({
}
}
}}
/> :
<div className="generic-node-desc-text" onDoubleClick={() => setInputDescription(true)}>{data.node?.description}</div>
}
/>
) : (
<div
className="generic-node-desc-text"
onDoubleClick={() => setInputDescription(true)}
>
{data.node?.description}
</div>
)}
<>
{Object.keys(data.node!.template)

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -12,7 +12,7 @@ export default function CodeAreaComponent({
nodeClass,
dynamic,
setNodeClass,
readonly=false
readonly = false,
}: CodeAreaComponentType) {
const [myValue, setMyValue] = useState(
typeof value == "string" ? value : JSON.stringify(value)

20
src/frontend/src/components/codeTabsComponent/index.tsx
View file

@ -180,7 +180,7 @@ export default function CodeTabsComponent({
key={idx} // Remember to add a unique key prop
>
{idx < 4 ? (
<div className="w-full h-full flex flex-col">
<div className="flex h-full w-full flex-col">
{tab.description && (
<div
className="mb-2 w-full text-left text-sm"
@ -633,7 +633,14 @@ export default function CodeTabsComponent({
>
<div className="mx-auto">
<PromptAreaComponent
readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
readonly={
node.data.node?.flow &&
node.data.node.template[
templateField
].dynamic
? true
: false
}
editNode={true}
disabled={false}
value={
@ -689,7 +696,14 @@ export default function CodeTabsComponent({
>
<div className="mx-auto">
<CodeAreaComponent
readonly={node.data.node?.flow && node.data.node.template[templateField].dynamic? true : false}
readonly={
node.data.node?.flow &&
node.data.node.template[
templateField
].dynamic
? true
: false
}
disabled={false}
editNode={true}
value={

4
src/frontend/src/components/headerComponent/index.tsx
View file

@ -139,9 +139,7 @@ export default function Header(): JSX.Element {
<button
className={
"h-7 w-7 rounded-full focus-visible:outline-0 " +
gradients[
gradientIndex
]
gradients[gradientIndex]
}
/>
</DropdownMenuTrigger>

2
src/frontend/src/components/inputComponent/index.tsx
View file

@ -17,7 +17,7 @@ export default function InputComponent({
editNode = false,
placeholder = "Type something...",
className,
blurOnEnter=false
blurOnEnter = false,
}: InputComponentType): JSX.Element {
const [pwdVisible, setPwdVisible] = useState(false);
const refInput = useRef<HTMLInputElement>(null);

2
src/frontend/src/components/promptComponent/index.tsx
View file

@ -14,7 +14,7 @@ export default function PromptAreaComponent({
onChange,
disabled,
editNode = false,
readonly=false
readonly = false,
}: TextAreaComponentType): JSX.Element {
useEffect(() => {
if (disabled) {

4
src/frontend/src/components/ui/dialog.tsx
View file

@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed top-0 right-0 left-0 bottom-0 overflow-auto inset-0 z-50 bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"noundo nocopy flex text-start overflow-auto z-50 justify-center items-left flex-col w-full max-w-lg gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-bottom-[48%] sm:rounded-lg md:w-full",
"noundo nocopy items-left z-50 flex w-full max-w-lg flex-col justify-center gap-4 overflow-auto border bg-background p-6 text-start shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-bottom-[48%] sm:rounded-lg md:w-full",
className
)}
{...props}

4
src/frontend/src/contexts/darkContext.tsx
View file

@ -28,9 +28,7 @@ export function DarkProvider({ children }) {
fetchStars();
const min = 0;
const max = 30;
setGradientIndex(
Math.floor(Math.random() * (max - min + 1)) + min
)
setGradientIndex(Math.floor(Math.random() * (max - min + 1)) + min);
}, []);
useEffect(() => {

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -486,7 +486,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const addFlow = async (
newProject?: Boolean,
flow?: FlowType,
flow?: FlowType
): Promise<String | undefined> => {
if (newProject) {
let flowData = extractDataFromFlow(flow!);

22
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -140,9 +140,9 @@ const EditNodeModal = forwardRef(
<TableRow key={index} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.node?.template[templateParam].display_name
? myData.node.template[templateParam].display_name
: myData.node?.template[templateParam]
.name}
? myData.node.template[templateParam]
.display_name
: myData.node?.template[templateParam].name}
</TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.node?.template[templateParam].type ===
@ -297,7 +297,13 @@ const EditNodeModal = forwardRef(
"prompt" ? (
<div className="mx-auto">
<PromptAreaComponent
readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
readonly={
myData.node?.flow &&
myData.node.template[templateParam]
.dynamic
? true
: false
}
field_name={templateParam}
editNode={true}
disabled={disabled}
@ -318,7 +324,13 @@ const EditNodeModal = forwardRef(
"code" ? (
<div className="mx-auto">
<CodeAreaComponent
readonly={myData.node?.flow && myData.node.template[templateParam].dynamic? true : false}
readonly={
myData.node?.flow &&
myData.node.template[templateParam]
.dynamic
? true
: false
}
dynamic={
data.node!.template[templateParam]
.dynamic ?? false

12
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -23,14 +23,13 @@ export default function CodeAreaModal({
setNodeClass,
children,
dynamic,
readonly=false
readonly = false,
}: codeAreaModalPropsType): JSX.Element {
const [code, setCode] = useState(value);
const { dark } = useContext(darkContext);
const { reactFlowInstance } = useContext(typesContext);
const [height, setHeight] = useState<string | null>(null);
const { setErrorData, setSuccessData } =
useContext(alertContext);
const { setErrorData, setSuccessData } = useContext(alertContext);
const [error, setError] = useState<{
detail: { error: string | undefined; traceback: string | undefined };
} | null>(null);
@ -183,7 +182,12 @@ export default function CodeAreaModal({
</div>
</div>
<div className="flex h-fit w-full justify-end">
<Button disabled={readonly} className="mt-3" onClick={handleClick} type="submit">
<Button
disabled={readonly}
className="mt-3"
onClick={handleClick}
type="submit"
>
Check & Save
</Button>
</div>

2
src/frontend/src/modals/formModal/index.tsx
View file

@ -27,7 +27,7 @@ import { AuthContext } from "../../contexts/authContext";
import { TabsContext } from "../../contexts/tabsContext";
import { getBuildStatus } from "../../controllers/API";
import { TabsState } from "../../types/tabs";
import { validateNodes,processFlow } from "../../utils/reactflowUtils";
import { processFlow, validateNodes } from "../../utils/reactflowUtils";
export default function FormModal({
flow,

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

@ -44,8 +44,8 @@ import {
} from "../../../../utils/reactflowUtils";
import { getRandomName, isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent";
import ExtraSidebar from "../extraSidebarComponent";
import SelectionMenu from "../SelectionMenuComponent";
import ExtraSidebar from "../extraSidebarComponent";
const nodeTypes = {
genericNode: GenericNode,
@ -444,12 +444,29 @@ export default function Page({
[&>button]:border-b-border hover:[&>button]:bg-border"
></Controls>
)}
<SelectionMenu isVisible={selectionMenuVisible} nodes={lastSelection?.nodes}
<SelectionMenu
isVisible={selectionMenuVisible}
nodes={lastSelection?.nodes}
onClick={() => {
if(validateSelection(lastSelection!,edges).length===0){
const {newFlow} = generateFlow(lastSelection!,reactFlowInstance!,getRandomName());
const newGroupNode = generateNodeFromFlow(newFlow)
setNodes((oldNodes)=>[...oldNodes.filter((oldNodes)=>!lastSelection?.nodes.some((selectionNode)=>selectionNode.id===oldNodes.id)),newGroupNode])
if (
validateSelection(lastSelection!, edges).length === 0
) {
const { newFlow } = generateFlow(
lastSelection!,
reactFlowInstance!,
getRandomName()
);
const newGroupNode = generateNodeFromFlow(newFlow);
setNodes((oldNodes) => [
...oldNodes.filter(
(oldNodes) =>
!lastSelection?.nodes.some(
(selectionNode) =>
selectionNode.id === oldNodes.id
)
),
newGroupNode,
]);
setEdges((oldEdges) =>
oldEdges.filter(
(oldEdge) =>
@ -460,14 +477,14 @@ export default function Page({
)
)
);
}
else{
} else {
setErrorData({
title: "Invalid selection",
list: validateSelection(lastSelection!, edges),
});
}
}}/>
}}
/>
</ReactFlow>
{!view && (
<Chat flow={flow} reactFlowInstance={reactFlowInstance!} />

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

@ -5,8 +5,11 @@ import IconComponent from "../../../../components/genericIconComponent";
import { TabsContext } from "../../../../contexts/tabsContext";
import EditNodeModal from "../../../../modals/EditNodeModal";
import { nodeToolbarPropsType } from "../../../../types/components";
import {
expandGroupNode,
updateFlowPosition,
} from "../../../../utils/reactflowUtils";
import { classNames } from "../../../../utils/utils";
import { expandGroupNode, ungroupNode, updateFlowPosition } from "../../../../utils/reactflowUtils";
export default function NodeToolbarComponent({
data,
@ -112,7 +115,8 @@ export default function NodeToolbarComponent({
"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" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground") +(isGroup?"":" rounded-r-md")
: " text-foreground") +
(isGroup ? "" : " rounded-r-md")
)}
>
<IconComponent name="Settings2" className="h-4 w-4 " />
@ -128,8 +132,8 @@ export default function NodeToolbarComponent({
)}
onClick={(event) => {
event.preventDefault();
updateFlowPosition(position,data.node?.flow!)
expandGroupNode(data,reactFlowInstance)
updateFlowPosition(position, data.node?.flow!);
expandGroupNode(data, reactFlowInstance);
}}
>
<IconComponent name="Ungroup" className="h-4 w-4" />

10
src/frontend/src/types/api/index.ts
View file

@ -18,7 +18,13 @@ export type APIClassType = {
documentation: string;
error?: string;
flow?: FlowType;
[key: string]: Array<string> | string | APITemplateType | boolean | FlowType | undefined;
[key: string]:
| Array<string>
| string
| APITemplateType
| boolean
| FlowType
| undefined;
};
export type TemplateVariableType = {
@ -31,7 +37,7 @@ export type TemplateVariableType = {
multiline?: boolean;
value?: any;
dynamic?: boolean;
proxy?:{id:string,field:string}
proxy?: { id: string; field: string };
input_types?: Array<string>;
[key: string]: any;
};

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

@ -49,7 +49,7 @@ export type ParameterComponentType = {
dataContext?: typesContextType;
optionalHandle?: Array<String> | null;
info?: string;
proxy?: {field: string, id: string};
proxy?: { field: string; id: string };
};
export type InputListComponentType = {
value: string[];

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

@ -50,5 +50,5 @@ export type targetHandleType = {
type: string;
fieldName: string;
id: string;
proxy?:{field:string, id:string}
proxy?: { field: string; id: string };
};

5
src/frontend/src/types/utils/reactflowUtils.ts
View file

@ -1,6 +1,5 @@
import { Edge, Node } from "reactflow";
import { FlowType, NodeType } from "../flow";
import { generateFlow } from "../../utils/reactflowUtils";
export type cleanEdgesType = {
flow: {
@ -20,9 +19,9 @@ export type updateEdgesHandleIdsType = {
edges: Edge[];
};
export type generateFlowType = { newFlow: FlowType; removedEdges: Edge[] }
export type generateFlowType = { newFlow: FlowType; removedEdges: Edge[] };
export type findLastNodeType = {
nodes: NodeType[];
edges: Edge[];
}
};

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

@ -32,6 +32,7 @@ import {
Gift,
GitFork,
GithubIcon,
Group,
Hammer,
HelpCircle,
Home,
@ -63,6 +64,7 @@ import {
TerminalSquare,
Trash2,
Undo,
Ungroup,
Unplug,
Upload,
UserCog2,
@ -75,8 +77,6 @@ import {
X,
XCircle,
Zap,
Group,
Ungroup
} from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte";
@ -305,5 +305,5 @@ export const nodeIconsLucide: iconsType = {
Unplug,
Group,
ChevronUp,
Ungroup
Ungroup,
};