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

implemented boolean node and wrote if it is a list

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-16 13:00:06 -03:00
commit 590b9bdc09
8 changed files with 135 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

45
space_flow/src/CustomNodes/BooleanNode/index.tsx Normal file
View file

@ -0,0 +1,45 @@
import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Input } from "@mui/material";
import { Handle, Position } from "reactflow";
import { nodeColors } from "../../utils";
import ToggleComponent from "../../components/toggleComponent";
import { useEffect, useState } from "react";
export default function BooleanNode({ data }) {
const [enabled, setEnabled] = useState(false);
return (
<div className="prompt-node relative bg-white rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between gap-8 p-4 bg-gray-50 border-b ">
<div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon
className="w-10 h-10 p-1 text-white rounded"
style={{ background: nodeColors[data.type] }}
/>
Boolean
</div>
<button
onClick={() => {
data.onDelete(data);
}}
>
<TrashIcon className="text-gray-600 w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
</div>
<div className="w-full flex justify-center p-5 h-full">
<ToggleComponent enabled={enabled} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
isValidConnection={({ sourceHandle, targetHandle }) =>
targetHandle === sourceHandle ||
data.types[targetHandle] === sourceHandle ||
sourceHandle === "str"
}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: nodeColors[data.type] }}
></Handle>
</div>
);
}

17
space_flow/src/CustomNodes/GenericNode/index.tsx
View file

@ -13,7 +13,7 @@ export default function GenericNode({ data }) {
const Icon = nodeIcons[data.type];
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="flex items-center gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 text-white rounded"
@ -21,15 +21,18 @@ export default function GenericNode({ data }) {
/>
{data.name}
</div>
<button onClick={data.onDelete}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
</div>
<div className="w-full p-5 h-full">
<div className="w-full text-gray-500 text-sm truncate">
<div className="w-full text-gray-500 text-sm">
{data.node.description}
</div>
{Object.keys(data.node.template).map((t, idx) => (
<div key={idx} className="w-full mt-5">
<Tooltip title={t + ": " + data.node.template[t].type}>
<Tooltip title={t + ": " + data.node.template[t].type + (data.node.template[t].list ? " list" : "") + (data.node.template[t].required ? " (required)" : "")}>
<Handle
type="source"
position={Position.Left}
@ -41,7 +44,7 @@ export default function GenericNode({ data }) {
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{
borderLeftColor: nodeColors[data.type],
borderLeftColor: (nodeColors[(data.types[data.node.template[t].type] ?? data.node.template[t].type)]) ?? "gray",
marginTop: idx * 30 - 50 + "px",
}}
></Handle>
@ -50,12 +53,6 @@ export default function GenericNode({ data }) {
))}
<div className="w-full mt-5"></div>
</div>
<div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
<button onClick={data.onDelete}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
</div>
<Tooltip title={"Output: " + data.name}>
<Handle
type="target"

17
space_flow/src/CustomNodes/InputNode/index.tsx
View file

@ -2,11 +2,12 @@ import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
import Input from "../../components/inputComponent";
import { nodeColors, nodeIcons, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
import { useEffect } from "react";
export default function InputNode({ data }) {
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<div className="w-full flex items-center justify-between p-4 bg-gray-50 border-b ">
<div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">
<div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon
className="w-10 h-10 p-1 text-white rounded"
@ -14,6 +15,13 @@ export default function InputNode({ data }) {
/>
String
</div>
<button
onClick={() => {
data.onDelete(data);
}}
>
<TrashIcon className="text-gray-600 w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
</div>
<div className="w-full p-5 h-full">
<Input
@ -22,13 +30,6 @@ export default function InputNode({ data }) {
}}
/>
</div>
<div className="flex w-full justify-between items-center bg-gray-50 gap-2 border-t text-gray-600 p-4 text-sm">
<button onClick={() => {data.onDelete(data)}}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
</button>
<button onClick={data.onRun}></button>
</div>
<Handle
type="target"
position={Position.Right}