Generated output parameters and disable one of them if the other is in use
This commit is contained in:
Lucas Oliveira
parent
b71d96a071
commit
876a691004
2 changed files with 117 additions and 107 deletions
|
|
@ -46,12 +46,14 @@ export default function ParameterComponent({
|
||||||
const { reactFlowInstance } = useContext(typesContext);
|
const { reactFlowInstance } = useContext(typesContext);
|
||||||
let disabled =
|
let disabled =
|
||||||
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
|
reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
|
||||||
|
let disabledSource =
|
||||||
|
reactFlowInstance?.getEdges().some((e) => e.sourceHandle !== id && e.source === data.id) ?? false;
|
||||||
const { save } = useContext(TabsContext);
|
const { save } = useContext(TabsContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
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"
|
className={"w-full flex flex-wrap justify-between items-center dark:text-white mt-1 px-5 py-2 " + (!left ? (disabledSource ? "bg-gray-100 dark:bg-gray-700 text-gray-500": "bg-gray-50 dark:bg-gray-800") : "bg-gray-50 dark:bg-gray-800")}
|
||||||
>
|
>
|
||||||
<>
|
<>
|
||||||
<div className="text-sm truncate">
|
<div className="text-sm truncate">
|
||||||
|
|
@ -76,8 +78,8 @@ export default function ParameterComponent({
|
||||||
isValidConnection(connection, reactFlowInstance)
|
isValidConnection(connection, reactFlowInstance)
|
||||||
}
|
}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
left ? "-ml-0.5 " : "-mr-0.5 ",
|
left ? "-ml-0.5 " : ("-mr-0.5 " + (disabledSource ? "pointer-events-none border-gray-400 " : "")),
|
||||||
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800"
|
"w-3 h-3 rounded-full border-2 bg-white dark:bg-gray-800",
|
||||||
)}
|
)}
|
||||||
style={{
|
style={{
|
||||||
borderColor: color,
|
borderColor: color,
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import { TrashIcon } from "@heroicons/react/24/outline";
|
import { TrashIcon } from "@heroicons/react/24/outline";
|
||||||
import {
|
import {
|
||||||
classNames,
|
classNames,
|
||||||
nodeColors,
|
nodeColors,
|
||||||
nodeIcons,
|
nodeIcons,
|
||||||
snakeToNormalCase,
|
snakeToNormalCase,
|
||||||
} from "../../utils";
|
} from "../../utils";
|
||||||
import ParameterComponent from "./components/parameterComponent";
|
import ParameterComponent from "./components/parameterComponent";
|
||||||
import { typesContext } from "../../contexts/typesContext";
|
import { typesContext } from "../../contexts/typesContext";
|
||||||
|
|
@ -12,108 +12,116 @@ import { NodeDataType } from "../../types/flow";
|
||||||
import { alertContext } from "../../contexts/alertContext";
|
import { alertContext } from "../../contexts/alertContext";
|
||||||
|
|
||||||
export default function GenericNode({
|
export default function GenericNode({
|
||||||
data,
|
data,
|
||||||
selected,
|
selected,
|
||||||
}: {
|
}: {
|
||||||
data: NodeDataType;
|
data: NodeDataType;
|
||||||
selected: boolean;
|
selected: boolean;
|
||||||
}) {
|
}) {
|
||||||
const { setErrorData } = useContext(alertContext);
|
const { setErrorData } = useContext(alertContext);
|
||||||
const showError = useRef(true);
|
const showError = useRef(true);
|
||||||
const { types, deleteNode } = useContext(typesContext);
|
const { types, deleteNode } = useContext(typesContext);
|
||||||
const Icon = nodeIcons[types[data.type]];
|
const Icon = nodeIcons[types[data.type]];
|
||||||
if (!Icon) {
|
if (!Icon) {
|
||||||
if (showError.current) {
|
if (showError.current) {
|
||||||
setErrorData({
|
setErrorData({
|
||||||
title: data.type
|
title: data.type
|
||||||
? `The ${data.type} node could not be rendered, please review your json file`
|
? `The ${data.type} node could not be rendered, please review your json file`
|
||||||
: "There was a node that can't be rendered, please review your json file",
|
: "There was a node that can't be rendered, please review your json file",
|
||||||
});
|
});
|
||||||
showError.current = false;
|
showError.current = false;
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={classNames(
|
className={classNames(
|
||||||
selected ? "border border-blue-500" : "border dark:border-gray-700",
|
selected ? "border border-blue-500" : "border dark:border-gray-700",
|
||||||
"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
|
"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
|
<div className="w-full dark:text-white flex items-center justify-between p-4 gap-8 bg-gray-50 rounded-t-lg dark:bg-gray-800 border-b dark:border-b-gray-700 ">
|
||||||
<div className="w-full flex items-center truncate gap-4 text-lg">
|
<div className="w-full flex items-center truncate gap-4 text-lg">
|
||||||
<Icon
|
<Icon
|
||||||
className="w-10 h-10 p-1 rounded"
|
className="w-10 h-10 p-1 rounded"
|
||||||
style={{
|
style={{
|
||||||
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
|
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="truncate">{data.type}</div>
|
<div className="truncate">{data.type}</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
deleteNode(data.id);
|
deleteNode(data.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
|
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="w-full h-full py-5">
|
<div className="w-full h-full py-5">
|
||||||
<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>
|
||||||
|
|
||||||
<>
|
<>
|
||||||
{Object.keys(data.node.template)
|
{Object.keys(data.node.template)
|
||||||
.filter((t) => t.charAt(0) !== "_")
|
.filter((t) => t.charAt(0) !== "_")
|
||||||
.map((t: string, idx) => (
|
.map((t: string, idx) => (
|
||||||
<div key={idx}>
|
<div key={idx}>
|
||||||
{idx === 0 ? (
|
{idx === 0 ? (
|
||||||
<div className="px-5 py-2 mt-2 dark:text-white text-center">
|
<div className="px-5 py-2 mt-2 dark:text-white text-center">
|
||||||
Inputs:
|
Inputs:
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
{data.node.template[t].show ? (
|
{data.node.template[t].show ? (
|
||||||
<ParameterComponent
|
<ParameterComponent
|
||||||
data={data}
|
data={data}
|
||||||
color={
|
color={
|
||||||
nodeColors[types[data.node.template[t].type]] ??
|
nodeColors[types[data.node.template[t].type]] ??
|
||||||
nodeColors.unknown
|
nodeColors.unknown
|
||||||
}
|
}
|
||||||
title={snakeToNormalCase(t)}
|
title={snakeToNormalCase(t)}
|
||||||
name={t}
|
name={t}
|
||||||
tooltipTitle={
|
tooltipTitle={
|
||||||
"Type: " +
|
"Type: " +
|
||||||
data.node.template[t].type +
|
data.node.template[t].type +
|
||||||
(data.node.template[t].list ? " list" : "")
|
(data.node.template[t].list ? " list" : "")
|
||||||
}
|
}
|
||||||
required={data.node.template[t].required}
|
required={data.node.template[t].required}
|
||||||
id={data.node.template[t].type + "|" + t + "|" + data.id}
|
id={data.node.template[t].type + "|" + t + "|" + data.id}
|
||||||
left={true}
|
left={true}
|
||||||
type={data.node.template[t].type}
|
type={data.node.template[t].type}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<></>
|
<></>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
<div className="px-5 py-2 mt-2 dark:text-white text-center">
|
{data.node.base_classes.map((c, idx) => (
|
||||||
Output:
|
<div key={idx}>
|
||||||
</div>
|
{idx === 0 ? (
|
||||||
<ParameterComponent
|
<div className="px-5 py-2 mt-2 dark:text-white text-center">
|
||||||
data={data}
|
Outputs:
|
||||||
color={nodeColors[types[data.type]] ?? nodeColors.unknown}
|
</div>
|
||||||
title={data.type}
|
) : (
|
||||||
tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
|
<></>
|
||||||
id={[data.type, data.id, ...data.node.base_classes].join("|")}
|
)}
|
||||||
type={"str"}
|
<ParameterComponent
|
||||||
left={false}
|
data={data}
|
||||||
/>
|
color={nodeColors[types[c]] ?? nodeColors.unknown}
|
||||||
</>
|
title={c}
|
||||||
</div>
|
tooltipTitle={`Type: ${c}`}
|
||||||
</div>
|
id={[data.type, data.id, c].join("|")}
|
||||||
);
|
type={c}
|
||||||
|
left={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue