Generated output parameters and disable one of them if the other is in use

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -46,12 +46,14 @@ export default function ParameterComponent({
 	const { reactFlowInstance } = useContext(typesContext);
 	let disabled =
 		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);
 
 	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"
+			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">
@@ -76,8 +78,8 @@ export default function ParameterComponent({
 								isValidConnection(connection, reactFlowInstance)
 							}
 							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={{
 								borderColor: color,

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -100,18 +100,26 @@ export default function GenericNode({
                 )}
               </div>
             ))}
+          {data.node.base_classes.map((c, idx) => (
+            <div key={idx}>
+              {idx === 0 ? (
                 <div className="px-5 py-2 mt-2 dark:text-white text-center">
-						Output:
+                  Outputs:
                 </div>
+              ) : (
+                <></>
+              )}
               <ParameterComponent
                 data={data}
-						color={nodeColors[types[data.type]] ?? nodeColors.unknown}
+                color={nodeColors[types[c]] ?? nodeColors.unknown}
-						title={data.type}
+                title={c}
-						tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+                tooltipTitle={`Type: ${c}`}
-						id={[data.type, data.id, ...data.node.base_classes].join("|")}
+                id={[data.type, data.id, c].join("|")}
-						type={"str"}
+                type={c}
                 left={false}
               />
+            </div>
+          ))}
         </>
       </div>
     </div>