Validation based on base class done
This commit is contained in:
parent
173781ce4c
commit
761cac606a
4 changed files with 47 additions and 30 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue