Validation based on base class done

This commit is contained in:
Lucas Oliveira 2023-02-17 15:21:20 -03:00
commit 761cac606a
4 changed files with 47 additions and 30 deletions

View file

@ -23,7 +23,7 @@ export default function ChatInputNode({ data }) {
<Handle <Handle
type="target" type="target"
position={Position.Right} position={Position.Right}
id='str' id={'str|str|'+data.id}
isValidConnection={(connection) => isValidConnection(data,connection)} isValidConnection={(connection) => isValidConnection(data,connection)}
className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none" className="-mr-1 bg-transparent border-solid border-l-8 border-l-blue-600 border-y-transparent border-y-8 border-r-0 rounded-none"
></Handle> ></Handle>

View file

@ -38,37 +38,50 @@ export default function GenericNode({ data }) {
<div className="w-full text-gray-500 px-5 text-sm"> <div className="w-full text-gray-500 px-5 text-sm">
{data.node.description} {data.node.description}
</div> </div>
<div className="px-5 py-2 mt-2 text-center">Inputs:</div>
<> <>
{Object.keys(data.node.template).map((t, idx) => ( {Object.keys(data.node.template)
<ParameterComponent .filter((t) => t.charAt(0) !== "_")
key={idx} .map((t, idx) => (
data={data} <>
color={ {idx === 0 ? (
nodeColors[ <div className="px-5 py-2 mt-2 text-center">Inputs:</div>
data.types[data.node.template[t].type] ?? ) : (
data.node.template[t].type <></>
] ?? "gray" )}
} {data.node.template[t].show ? (
title={snakeToNormalCase(t)} <ParameterComponent
tooltipTitle={ key={idx}
t + data={data}
": " + color={
data.node.template[t].type + nodeColors[data.types[data.node.template[t].type]] ??
(data.node.template[t].list ? " list" : "") + "black"
(data.node.template[t].required ? " (required)" : "") }
} title={
id={data.node.template[t].type + "|" + t + "|" + data.id} snakeToNormalCase(t) +
left={true} (data.node.template[t].required ? " (required)" : "")
/> }
))} tooltipTitle={
"Type: " +
data.node.template[t].type +
(data.node.template[t].list ? " list" : "") +
(data.node.template[t].required ? " (required)" : "")
}
id={data.node.template[t].type + "|" + t + "|" + data.id}
left={true}
/>
) : (
<></>
)}
</>
))}
<div className="px-5 py-2 mt-2 text-center">Output:</div> <div className="px-5 py-2 mt-2 text-center">Output:</div>
<ParameterComponent <ParameterComponent
data={data} data={data}
color={nodeColors[data.type]} color={nodeColors[data.type]}
title={data.name} title={data.name + " | " + data.node.base_class}
tooltipTitle={"Output: " + data.name} tooltipTitle={"Type: str"}
id={data.name} id={data.name + "|" + data.node.base_class + "|" + data.id}
left={false} left={false}
/> />
</> </>

View file

@ -10,13 +10,16 @@ export default function ExtraSidebar() {
const types = Object.keys(data).reduce((acc, curr) => { const types = Object.keys(data).reduce((acc, curr) => {
Object.keys(data[curr]).forEach((c) => { Object.keys(data[curr]).forEach((c) => {
acc[c] = curr; acc[c] = curr;
acc[data[curr][c].base_class] = curr;
}); });
console.log(acc);
return acc; return acc;
}, {str: 'elements', bool: 'elements'}); }, {str: 'elements', bool: 'elements'});
useEffect(() => { useEffect(() => {
getAll().then((d) => { getAll().then((d) => {
setData(d.data); setData(d.data);
console.log(d.data);
}); });
}, []); }, []);

View file

@ -305,6 +305,7 @@ export function toFirstUpperCase(str: string) {
} }
export function snakeToNormalCase(str: string) { export function snakeToNormalCase(str: string) {
console.log(str);
return str return str
.split("_") .split("_")
.map((word, index) => { .map((word, index) => {
@ -334,9 +335,9 @@ export function isValidConnection(
{ source, target, sourceHandle, targetHandle } { source, target, sourceHandle, targetHandle }
) { ) {
if ( if (
targetHandle === sourceHandle.split("|")[0] || targetHandle.split('|')[0] === sourceHandle.split("|")[0] ||
sourceHandle.split("|")[0] === "str" || targetHandle.split('|')[1] === sourceHandle.split("|")[0] ||
data.types[targetHandle] === sourceHandle.split("|")[0] sourceHandle.split("|")[0] === "str"
) { ) {
let sourceNode = data.reactFlowInstance.getNode(source).data.node; let sourceNode = data.reactFlowInstance.getNode(source).data.node;
if (!sourceNode) { if (!sourceNode) {