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

show erro when node can't be rendered by reactFlow

Browse source
This commit is contained in:
anovazzi1 2023-03-27 16:51:22 -03:00
commit f05e9f00c2
1 changed files with 110 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

195
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -1,94 +1,119 @@
import { TrashIcon } from "@heroicons/react/24/outline";
import { import {
TrashIcon, classNames,
} from "@heroicons/react/24/outline"; nodeColors,
import { nodeIcons,
classNames, snakeToNormalCase,
nodeColors,
nodeIcons,
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";
import { useContext } from "react"; import { useContext, useRef } from "react";
import { NodeDataType} from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext";
export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) { export default function GenericNode({
const {types, deleteNode} = useContext(typesContext); data,
const Icon = nodeIcons[types[data.type]]; selected,
if(!Icon){ }: {
return data: NodeDataType;
} selected: boolean;
}) {
const { setErrorData } = useContext(alertContext);
const showError = useRef(true)
const { types, deleteNode } = useContext(typesContext);
const Icon = nodeIcons[types[data.type]];
if (!Icon) {
console.log(data);
if(showError.current){
setErrorData({
title: data.type?`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",
});
showError.current=false
}
return;
}
return ( return (
<div className={ classNames(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")}> <div
<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 "> className={classNames(
<div className="w-full flex items-center truncate gap-4 text-lg"> selected ? "border border-blue-500" : "border dark:border-gray-700",
<Icon "prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
className="w-10 h-10 p-1 rounded" )}
style={{ color: nodeColors[types[data.type]] }} >
/> <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="truncate">{data.type}</div> <div className="w-full flex items-center truncate gap-4 text-lg">
</div> <Icon
<button onClick={() => {deleteNode(data.id)}}> className="w-10 h-10 p-1 rounded"
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon> style={{ color: nodeColors[types[data.type]] }}
</button> />
</div> <div className="truncate">{data.type}</div>
</div>
<button
onClick={() => {
deleteNode(data.id);
}}
>
<TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-500"></TrashIcon>
</button>
</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">Inputs:</div> <div className="px-5 py-2 mt-2 dark:text-white text-center">
) : ( Inputs:
<></> </div>
)} ) : (
{data.node.template[t].show ? ( <></>
<ParameterComponent )}
{data.node.template[t].show ? (
data={data} <ParameterComponent
color={ data={data}
nodeColors[types[data.node.template[t].type]] ?? color={
nodeColors[types[data.node.template[t].type]] ?? nodeColors[types[data.node.template[t].type]] ??
"black" nodeColors[types[data.node.template[t].type]] ??
} "black"
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">
<div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div> Output:
<ParameterComponent </div>
data={data} <ParameterComponent
color={nodeColors[types[data.type]]} data={data}
title={data.type} color={nodeColors[types[data.type]]}
tooltipTitle={`Type: ${data.node.base_classes.join(' | ')}`} title={data.type}
id={[data.type, data.id, ...data.node.base_classes].join('|')} tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
type={'str'} id={[data.type, data.id, ...data.node.base_classes].join("|")}
left={false} type={"str"}
/> left={false}
</> />
</div> </>
</div> </div>
); </div>
);
} }