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

Validation with multiple base classes done

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-17 16:59:41 -03:00
commit ddb648dcbf
8 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
space_flow/src/CustomNodes/BooleanNode/index.tsx
View file

@ -1,4 +1,4 @@
import { Bars3CenterLeftIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Bars3CenterLeftIcon, CheckCircleIcon, TrashIcon } from "@heroicons/react/24/outline";
import { Input } from "@mui/material";
import { Handle, Position } from "reactflow";
import { isValidConnection, nodeColors } from "../../utils";
@ -11,9 +11,9 @@ export default function BooleanNode({ data }) {
<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] }}
<CheckCircleIcon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
/>
Boolean
</div>

2
space_flow/src/CustomNodes/ChatInputNode/index.tsx
View file

@ -16,7 +16,7 @@ export default function ChatInputNode({ data }) {
isValidConnection(data, connection)
}
className="ml-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{ borderLeftColor: 'white' }}
style={{ borderLeftColor: nodeColors['chat'] }}
></Handle>
</Tooltip>
<Tooltip title={"Message: str"}>

6
space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -18,6 +18,7 @@ export default function ParameterComponent({
color,
type,
name = "",
required = false,
}) {
const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals();
@ -38,8 +39,8 @@ export default function ParameterComponent({
return (
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 mt-1 px-5 py-2">
<>
<div className="text-sm truncate">{title}</div>
<Tooltip title={tooltipTitle}>
<div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div>
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
<Handle
type={left ? "source" : "target"}
position={left ? Position.Left : Position.Right}
@ -60,6 +61,7 @@ export default function ParameterComponent({
{left === true && type === "str" ? (
<div className="mt-2 w-full">
<Input
value={data.node.template[name].value ?? ""}
onChange={(t) => {
data.node.template[name].value = t;
}}

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

@ -35,7 +35,7 @@ export default function GenericNode({ data }) {
{Object.keys(data.node.template)
.filter((t) => t.charAt(0) !== "_")
.map((t, idx) => (
<>
<div key={idx}>
{idx === 0 ? (
<div className="px-5 py-2 mt-2 text-center">Inputs:</div>
) : (
@ -43,23 +43,22 @@ export default function GenericNode({ data }) {
)}
{data.node.template[t].show ? (
<ParameterComponent
key={idx}
data={data}
color={
nodeColors[data.types[data.node.template[t].type]] ??
"black"
}
title={
snakeToNormalCase(t) +
(data.node.template[t].required ? " (required)" : "")
snakeToNormalCase(t)
}
name={t}
tooltipTitle={
"Type: " +
data.node.template[t].type +
(data.node.template[t].list ? " list" : "") +
(data.node.template[t].required ? " (required)" : "")
(data.node.template[t].list ? " list" : "")
}
required={data.node.template[t].required}
id={data.node.template[t].type + "|" + t + "|" + data.id}
left={true}
type={data.node.template[t].type}
@ -67,15 +66,15 @@ export default function GenericNode({ data }) {
) : (
<></>
)}
</>
</div>
))}
<div className="px-5 py-2 mt-2 text-center">Output:</div>
<ParameterComponent
data={data}
color={nodeColors[data.type]}
title={data.name + " | " + data.node.base_class}
title={data.name +" |" + data.node.base_classes.map((b) => (" " + b))}
tooltipTitle={"Type: str"}
id={data.name + "|" + data.node.base_class + "|" + data.id}
id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
type={'str'}
left={false}
/>

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

@ -29,8 +29,8 @@ export default function InputNode({ data }) {
<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"
style={{ background: nodeColors[data.type] }}
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
/>
String
</div>
@ -44,6 +44,7 @@ export default function InputNode({ data }) {
</div>
<div className="w-full p-5 h-full">
<Input
value=""
onChange={(e) => {
data.text = e;
}}

7
space_flow/src/components/inputComponent/index.tsx
View file

@ -1,11 +1,16 @@
export default function Input({onChange}){
import { useState } from "react";
export default function Input({value, onChange}){
const [myValue, setMyValue] = useState(value ?? "");
return (
<>
<input
type="text"
value={myValue}
className="block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder="Type a text"
onChange={(e) => {
setMyValue(e.target.value);
onChange(e.target.value);
}}
/>

2
space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -10,7 +10,7 @@ export default function ExtraSidebar() {
const types = Object.keys(data).reduce((acc, curr) => {
Object.keys(data[curr]).forEach((c) => {
acc[c] = curr;
acc[data[curr][c].base_class] = curr;
data[curr][c].base_classes?.forEach((b) => {acc[b] = curr;})
});
console.log(acc);
return acc;

2
space_flow/src/utils.ts
View file

@ -341,7 +341,7 @@ export function isValidConnection(
) {
if (
targetHandle.split('|')[0] === sourceHandle.split("|")[0] ||
targetHandle.split('|')[1] === sourceHandle.split("|")[0] ||
targetHandle.split('|').slice(2).some((t) => t === sourceHandle.split("|")[0]) ||
sourceHandle.split("|")[0] === "str"
) {
let sourceNode = data.reactFlowInstance.getNode(source).data.node;