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

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

@ -1,6 +1,4 @@
import {
TrashIcon,
} from "@heroicons/react/24/outline";
import { TrashIcon } from "@heroicons/react/24/outline";
import {
classNames,
nodeColors,
@ -9,18 +7,40 @@ import {
} from "../../utils";
import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext";
import { useContext } from "react";
import { useContext, useRef } from "react";
import { NodeDataType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext";
export default function GenericNode({ data, selected}:{data:NodeDataType,selected:boolean}) {
export default function GenericNode({
data,
selected,
}: {
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) {
return
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 (
<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
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 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">
<Icon
@ -29,7 +49,11 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
/>
<div className="truncate">{data.type}</div>
</div>
<button onClick={() => {deleteNode(data.id)}}>
<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>
@ -45,22 +69,21 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
.map((t: string, idx) => (
<div key={idx}>
{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={data}
color={
nodeColors[types[data.node.template[t].type]] ??
nodeColors[types[data.node.template[t].type]] ??
"black"
}
title={
snakeToNormalCase(t)
}
title={snakeToNormalCase(t)}
name={t}
tooltipTitle={
"Type: " +
@ -77,14 +100,16 @@ export default function GenericNode({ data, selected}:{data:NodeDataType,selecte
)}
</div>
))}
<div className="px-5 py-2 mt-2 dark:text-white text-center">Output:</div>
<div className="px-5 py-2 mt-2 dark:text-white text-center">
Output:
</div>
<ParameterComponent
data={data}
color={nodeColors[types[data.type]]}
title={data.type}
tooltipTitle={`Type: ${data.node.base_classes.join(' | ')}`}
id={[data.type, data.id, ...data.node.base_classes].join('|')}
type={'str'}
tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
id={[data.type, data.id, ...data.node.base_classes].join("|")}
type={"str"}
left={false}
/>
</>