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

refactoring data passed by the event

Browse source
This commit is contained in:
Lucas Oliveira 2023-02-19 23:26:41 -03:00
commit 5ead7c4c32
7 changed files with 57 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,17 +3,19 @@ import { Input } from "@mui/material";
import { Handle, Position } from "reactflow";
import { isValidConnection, nodeColors } from "../../utils";
import ToggleComponent from "../../components/toggleComponent";
import { useEffect, useState } from "react";
import { useContext, useEffect, useState } from "react";
import { typesContext } from "../../contexts/typesContext";
export default function BooleanNode({ data }) {
const [enabled, setEnabled] = useState(false);
const {types} = useContext(typesContext);
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">
<CheckCircleIcon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
Boolean
</div>
@ -26,15 +28,15 @@ export default function BooleanNode({ data }) {
</button>
</div>
<div className="w-full flex justify-center p-5 h-full">
<ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.enabled = x}} />
<ToggleComponent enabled={enabled} disabled={false} setEnabled={(x) => {setEnabled(x); data.value = x}} />
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
id={data.type}
isValidConnection={(connection) => isValidConnection(data,connection)}
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] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</div>
);

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

@ -3,10 +3,13 @@ import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import { Handle, Position } from "reactflow";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
export default function ChatInputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Prefix: str">
<Handle
type="source"
@ -16,7 +19,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: nodeColors['chat'] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</Tooltip>
<Tooltip title={"Message: str"}>
@ -26,10 +29,10 @@ export default function ChatInputNode({ data }) {
id={'str|str|'+data.id}
isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-y-transparent border-y-8 border-r-0 rounded-none"
style={{borderLeftColor: nodeColors['chat']}}
style={{borderLeftColor: nodeColors[types[data.type]]}}
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
Input
</div>

7
space_flow/src/CustomNodes/ChatOutputNode/index.tsx
View file

@ -3,10 +3,13 @@ import { Handle, Position } from "reactflow";
import InputComponent from "../../components/inputComponent";
import { isValidConnection, nodeColors, snakeToNormalCase } from "../../utils";
import Tooltip from "../../components/TooltipComponent";
import { useContext } from "react";
import { typesContext } from "../../contexts/typesContext";
export default function ChatOutputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors['chat']}}>
<div className="prompt-node relative rounded-lg solid border flex justify-center align-center py-3 px-6 bg-gray-50" style={{color: nodeColors[types[data.type]]}}>
<Tooltip title="Message: str">
<Handle
type="source"
@ -18,7 +21,7 @@ export default function ChatOutputNode({ data }) {
></Handle>
</Tooltip>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors['chat']}}>
<div className="flex gap-3 text-lg font-medium items-center" style={{color: nodeColors[types[data.type]]}}>
Output
<Bars3CenterLeftIcon className="h-8 w-8 mt-1" />
</div>

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

@ -8,11 +8,11 @@ import {
} from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { useContext, useEffect } from "react";
export default function GenericNode({ data }) {
const Icon = nodeIcons[data.type];
const {types} = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
@ -20,9 +20,9 @@ export default function GenericNode({ data }) {
<div className="w-full flex items-center truncate gap-4 text-lg">
<Icon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
<div className="truncate">{data.name}</div>
<div className="truncate">{data.type}</div>
</div>
<button onClick={data.onDelete}>
<TrashIcon className="w-6 h-6 hover:text-red-500"></TrashIcon>
@ -74,10 +74,10 @@ export default function GenericNode({ data }) {
<div className="px-5 py-2 mt-2 text-center">Output:</div>
<ParameterComponent
data={data}
color={nodeColors[data.type]}
title={data.name}
color={nodeColors[types[data.type]]}
title={data.type}
tooltipTitle={"Type: str"}
id={data.name + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
id={data.type + "|" + data.id + data.node.base_classes.map((b) => ("|" + b))}
type={'str'}
left={false}
/>

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

@ -7,10 +7,12 @@ import {
snakeToNormalCase,
} from "../../utils";
import { Handle, Position } from "reactflow";
import { useEffect } from "react";
import { useContext, useEffect } from "react";
import Tooltip from "../../components/TooltipComponent";
import { typesContext } from "../../contexts/typesContext";
export default function InputNode({ data }) {
const {types} = useContext(typesContext);
return (
<div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
<Tooltip title="Prefix: str">
@ -22,7 +24,7 @@ export default function InputNode({ 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: nodeColors[data.type] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</Tooltip>
@ -30,7 +32,7 @@ export default function InputNode({ data }) {
<div className="flex items-center gap-4 text-lg">
<Bars3CenterLeftIcon
className="w-10 h-10 p-1 rounded"
style={{ color: nodeColors[data.type] }}
style={{ color: nodeColors[types[data.type]] }}
/>
String
</div>
@ -47,17 +49,17 @@ export default function InputNode({ data }) {
disabled={false}
value=""
onChange={(e) => {
data.text = e;
data.value = e;
}}
/>
</div>
<Handle
type="target"
position={Position.Right}
id={data.name}
id={data.type}
isValidConnection={(connection) => isValidConnection(data, connection)}
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] }}
style={{ borderLeftColor: nodeColors[types[data.type]] }}
></Handle>
</div>
);

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

@ -17,18 +17,12 @@ export default function ExtraSidebar() {
useEffect(() => {
getAll().then((d) => {
setData(d.data);
// console.log(d.data);
});
}, []);
useEffect(() => {
if(data){
setTypes(
Object.keys(data).reduce(
Object.keys(d.data).reduce(
(acc, curr) => {
Object.keys(data[curr]).forEach((c) => {
Object.keys(d.data[curr]).forEach((c) => {
acc[c] = curr;
data[curr][c].base_classes?.forEach((b) => {
d.data[curr][c].base_classes?.forEach((b) => {
acc[b] = curr;
});
});
@ -43,8 +37,8 @@ export default function ExtraSidebar() {
}
)
);
}
}, [data, setTypes])
});
}, []);
function onDragStart(event: React.DragEvent<any>, data) {
event.dataTransfer.effectAllowed = "move";
@ -67,8 +61,7 @@ export default function ExtraSidebar() {
style={{ borderLeftColor: nodeColors[d] }}
onDragStart={(event) =>
onDragStart(event, {
type: d,
name: t,
type: t,
node: data[d][t],
})
}
@ -94,8 +87,8 @@ export default function ExtraSidebar() {
style={{ borderLeftColor: nodeColors["chat"] }}
onDragStart={(event) =>
onDragStart(event, {
type: "chat",
name: "chatInput",
type: "chatInput",
node: {},
})
}
>
@ -112,8 +105,8 @@ export default function ExtraSidebar() {
style={{ borderLeftColor: nodeColors["chat"] }}
onDragStart={(event) =>
onDragStart(event, {
type: "chat",
name: "chatOutput",
type: "chatOutput",
node: {},
})
}
>
@ -136,8 +129,8 @@ export default function ExtraSidebar() {
style={{ borderLeftColor: nodeColors["advanced"] }}
onDragStart={(event) =>
onDragStart(event, {
type: "advanced",
name: "str",
type: "str",
node: {},
})
}
>
@ -154,8 +147,8 @@ export default function ExtraSidebar() {
style={{ borderLeftColor: nodeColors["advanced"] }}
onDragStart={(event) =>
onDragStart(event, {
type: "advanced",
name: "bool",
type: "bool",
node: {},
})
}
>

18
space_flow/src/pages/FlowPage/index.tsx
View file

@ -80,8 +80,8 @@ export default function FlowPage() {
const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect();
let data = JSON.parse(event.dataTransfer.getData("json"));
if (
data.name !== "chatInput" ||
(data.name === "chatInput" &&
data.type !== "chatInput" ||
(data.type === "chatInput" &&
!reactFlowInstance.getNodes().some((n) => n.type === "chatInputNode"))
) {
const position = reactFlowInstance.project({
@ -89,24 +89,24 @@ export default function FlowPage() {
y: event.clientY - reactflowBounds.top,
});
let newId = getId();
const newNode = {
id: newId,
type:
data.name === "str"
(data.type === "str"
? "inputNode"
: data.name === "chatInput"
: (data.type === "chatInput"
? "chatInputNode"
: data.name === "chatOutput"
: (data.type === "chatOutput"
? "chatOutputNode"
: data.name === "bool"
: (data.type === "bool"
? "booleanNode"
: "genericNode",
: "genericNode")))),
position,
data: {
...data,
id: newId,
input: "",
enabled: false,
value: null,
reactFlowInstance,
onDelete: () => {
setNodes(