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

removed connection of to string and boolean

Browse source
This commit is contained in:
anovazzi1 2023-03-06 17:54:40 -03:00
commit 84e87828cd
1 changed files with 107 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,6 @@
import { Handle, Position, useUpdateNodeInternals } from "reactflow"; import { Handle, Position, useUpdateNodeInternals } from "reactflow";
import Tooltip from "../../../../components/TooltipComponent"; import Tooltip from "../../../../components/TooltipComponent";
import { import { classNames, isValidConnection } from "../../../../utils";
isValidConnection,
} from "../../../../utils";
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import InputComponent from "../../../../components/inputComponent"; import InputComponent from "../../../../components/inputComponent";
import ToggleComponent from "../../../../components/toggleComponent"; import ToggleComponent from "../../../../components/toggleComponent";
@ -12,101 +10,113 @@ import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components"; import { ParameterComponentType } from "../../../../types/components";
export default function ParameterComponent({ export default function ParameterComponent({
left, left,
id, id,
data, data,
tooltipTitle, tooltipTitle,
title, title,
color, color,
type, type,
name = "", name = "",
required = false, required = false,
}:ParameterComponentType) { }: ParameterComponentType) {
const ref = useRef(null); const ref = useRef(null);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
const [position, setPosition] = useState(0); const [position, setPosition] = useState(0);
useEffect(() => { useEffect(() => {
if (ref.current && ref.current.offsetTop && ref.current.clientHeight) { if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
setPosition(ref.current.offsetTop + ref.current.clientHeight / 2); setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
updateNodeInternals(data.id); updateNodeInternals(data.id);
} }
}, [data.id, ref, updateNodeInternals]); }, [data.id, ref, updateNodeInternals]);
useEffect(() => { useEffect(() => {
updateNodeInternals(data.id); updateNodeInternals(data.id);
}, [data.id, position, updateNodeInternals]); }, [data.id, position, updateNodeInternals]);
const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false); const [enabled, setEnabled] = useState(
const {reactFlowInstance} = useContext(typesContext); data.node.template[name]?.value ?? false
let disabled = reactFlowInstance?.getEdges().some((e) => (e.targetHandle === id)) ?? false; );
const { reactFlowInstance } = useContext(typesContext);
let disabled =
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
return ( return (
<div ref={ref} className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"> <div
<> ref={ref}
<div className="text-sm truncate">{title}<span className="text-red-600">{required ? " *" : ""}</span></div> className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
<Tooltip title={tooltipTitle + (required ? " (required)" : "")}> >
<Handle <>
type={left ? "target" : "source"} <div className="text-sm truncate">
position={left ? Position.Left : Position.Right} {title}
id={id} <span className="text-red-600">{required ? " *" : ""}</span>
isValidConnection={(connection) => </div>
isValidConnection(connection,reactFlowInstance) <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
} <Handle
className={ type={left ? "target" : "source"}
(left ? "-ml-0.5 " : "-mr-0.5 ") + position={left ? Position.Left : Position.Right}
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800" id={id}
} isValidConnection={(connection) =>
style={{ isValidConnection(connection, reactFlowInstance)
borderColor: color, }
top: position, className={classNames(
}} (left ? "-ml-0.5 " : "-mr-0.5 "),
></Handle> "w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",left && (type==="str" || type==="bool")?"hidden":""
</Tooltip> )}
{left === true && type === "str" ? ( style={{
<div className="mt-2 w-full"> borderColor: color,
{data.node.template[name].list ? top: position,
<InputListComponent }}
disabled={disabled} ></Handle>
value={!data.node.template[name].value || data.node.template[name].value === "" ? [""] : data.node.template[name].value} </Tooltip>
onChange={(t:string[]) => { {left === true && type === "str" ? (
data.node.template[name].value = t; <div className="mt-2 w-full">
}} {data.node.template[name].list ? (
/> <InputListComponent
: disabled={disabled}
data.node.template[name].multiline ? ( value={
<TextAreaComponent !data.node.template[name].value ||
disabled={disabled} data.node.template[name].value === ""
value={data.node.template[name].value ?? ""} ? [""]
onChange={(t:string) => { : data.node.template[name].value
data.node.template[name].value = t; }
}} onChange={(t: string[]) => {
/> data.node.template[name].value = t;
) : }}
<InputComponent />
disabled={disabled} ) : data.node.template[name].multiline ? (
value={data.node.template[name].value ?? ""} <TextAreaComponent
onChange={(t) => { disabled={disabled}
data.node.template[name].value = t; value={data.node.template[name].value ?? ""}
}} onChange={(t: string) => {
/> data.node.template[name].value = t;
} }}
/>
</div> ) : (
) : left === true && type === "bool" ? ( <InputComponent
<div className="mt-2"> disabled={disabled}
<ToggleComponent value={data.node.template[name].value ?? ""}
disabled={disabled} onChange={(t) => {
enabled={enabled} data.node.template[name].value = t;
setEnabled={(t) => { }}
data.node.template[name].value = t; />
setEnabled(t); )}
}} </div>
/> ) : left === true && type === "bool" ? (
</div> <div className="mt-2">
) : ( <ToggleComponent
<></> disabled={disabled}
)} enabled={enabled}
</> setEnabled={(t) => {
</div> data.node.template[name].value = t;
); setEnabled(t);
}}
/>
</div>
) : (
<></>
)}
</>
</div>
);
} }