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

update error view in new logs

Browse source
This commit is contained in:
anovazzi1 2024-06-14 20:26:19 -03:00
commit 9fdd7aa5f8
4 changed files with 72 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/GenericNode/components/outputModal/components/switchOutputView/index.tsx
View file

@ -41,7 +41,7 @@ const SwitchOutputView: React.FC<SwitchOutputViewProps> = ({
<Case condition={!resultType || resultType === "unknown"}> <Case condition={!resultType || resultType === "unknown"}>
<div>NO OUTPUT</div> <div>NO OUTPUT</div>
</Case> </Case>
<Case condition={resultType === "ValueError"}> <Case condition={resultType === "error" || resultType === "ValueError"}>
<ErrorOutput value={resultMessage}></ErrorOutput> <ErrorOutput value={resultMessage}></ErrorOutput>
</Case> </Case>

41
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -109,12 +109,23 @@ export default function ParameterComponent({
} }
}; };
const logTypeIsError = (data: any) => {
if (!outputName) return;
const logs = (data?.logs[outputName] ?? [])[0];
if (Array.isArray(logs) && logs.length > 1) {
return logs.some(
(log) => log.type === "error" || log.type === "ValueError",
);
} else {
return logs?.type === "error" || logs?.type === "ValueError";
}
};
const flowPoolNode = (flowPool[data.id] ?? [])[ const flowPoolNode = (flowPool[data.id] ?? [])[
(flowPool[data.id]?.length ?? 1) - 1 (flowPool[data.id]?.length ?? 1) - 1
]; ];
const displayOutputPreview = const displayOutputPreview =
!!flowPool[data.id] && !!flowPool[data.id] &&
flowPool[data.id][flowPool[data.id].length - 1]?.valid &&
logHasMessage(flowPool[data.id][flowPool[data.id].length - 1]?.data); logHasMessage(flowPool[data.id][flowPool[data.id].length - 1]?.data);
let hasOutputs; let hasOutputs;
@ -123,6 +134,7 @@ export default function ParameterComponent({
} }
const unknownOutput = logTypeIsUnknown(flowPoolNode?.data); const unknownOutput = logTypeIsUnknown(flowPoolNode?.data);
const errorOutput = logTypeIsError(flowPoolNode?.data);
const preventDefault = true; const preventDefault = true;
@ -374,15 +386,24 @@ export default function ParameterComponent({
onClick={() => setOpenOutputModal(true)} onClick={() => setOpenOutputModal(true)}
data-testid={`output-inspection-${title.toLowerCase()}`} data-testid={`output-inspection-${title.toLowerCase()}`}
> >
<IconComponent {errorOutput ? (
className={classNames( <IconComponent
"h-5 w-5 rounded-md", className={classNames(
displayOutputPreview && !unknownOutput "h-5 w-5 rounded-md text-status-red",
? " hover:text-medium-indigo" )}
: " cursor-not-allowed text-muted-foreground", name={"X"}
)} />
name={"ScanEye"} ) : (
/> <IconComponent
className={classNames(
"h-5 w-5 rounded-md",
displayOutputPreview && !unknownOutput
? " hover:text-medium-indigo"
: " cursor-not-allowed text-muted-foreground",
)}
name={"ScanEye"}
/>
)}
</Button> </Button>
</ShadTooltip> </ShadTooltip>
)} )}

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

@ -69,14 +69,14 @@ export default function GenericNode({
const [nodeName, setNodeName] = useState(data.node!.display_name); const [nodeName, setNodeName] = useState(data.node!.display_name);
const [inputDescription, setInputDescription] = useState(false); const [inputDescription, setInputDescription] = useState(false);
const [nodeDescription, setNodeDescription] = useState( const [nodeDescription, setNodeDescription] = useState(
data.node?.description! data.node?.description!,
); );
const [isOutdated, setIsOutdated] = useState(false); const [isOutdated, setIsOutdated] = useState(false);
const buildStatus = useFlowStore( const buildStatus = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.status (state) => state.flowBuildStatus[data.id]?.status,
); );
const lastRunTime = useFlowStore( const lastRunTime = useFlowStore(
(state) => state.flowBuildStatus[data.id]?.timestamp (state) => state.flowBuildStatus[data.id]?.timestamp,
); );
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<VertexBuildTypeAPI | null>(null); useState<VertexBuildTypeAPI | null>(null);
@ -93,7 +93,7 @@ export default function GenericNode({
data.node!, data.node!,
setNode, setNode,
setIsOutdated, setIsOutdated,
updateNodeInternals updateNodeInternals,
); );
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
@ -120,12 +120,12 @@ export default function GenericNode({
selected: boolean, selected: boolean,
showNode: boolean, showNode: boolean,
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null validationStatus: VertexBuildTypeAPI | null,
) => { ) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus, buildStatus,
validationStatus, validationStatus,
isDark isDark,
); );
const baseBorderClass = getBaseBorderClass(selected); const baseBorderClass = getBaseBorderClass(selected);
@ -134,7 +134,7 @@ export default function GenericNode({
baseBorderClass, baseBorderClass,
nodeSizeClass, nodeSizeClass,
"generic-node-div group/node", "generic-node-div group/node",
specificClassFromBuildStatus specificClassFromBuildStatus,
); );
return names; return names;
}; };
@ -168,8 +168,8 @@ export default function GenericNode({
} }
useCheckCodeValidity(data, templates, setIsOutdated, types); useCheckCodeValidity(data, templates, setIsOutdated, types);
useValidationStatusString(validationStatus, setValidationString);
useUpdateValidationStatus(data?.id, flowPool, setValidationStatus); useUpdateValidationStatus(data?.id, flowPool, setValidationStatus);
useValidationStatusString(validationStatus, setValidationString);
const iconNodeRender = useIconNodeRender( const iconNodeRender = useIconNodeRender(
data, data,
@ -179,7 +179,7 @@ export default function GenericNode({
showNode, showNode,
isEmoji, isEmoji,
nodeIconFragment, nodeIconFragment,
checkNodeIconFragment checkNodeIconFragment,
); );
function countHandles(): void { function countHandles(): void {
@ -362,7 +362,7 @@ export default function GenericNode({
selected, selected,
showNode, showNode,
buildStatus, buildStatus,
validationStatus validationStatus,
)} )}
> >
{data.node?.beta && showNode && ( {data.node?.beta && showNode && (
@ -510,7 +510,7 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField templateField,
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
@ -538,7 +538,7 @@ export default function GenericNode({
proxy={data.node?.template[templateField].proxy} proxy={data.node?.template[templateField].proxy}
showNode={showNode} showNode={showNode}
/> />
) ),
)} )}
{/* <ParameterComponent {/* <ParameterComponent
index={0} index={0}
@ -581,6 +581,11 @@ export default function GenericNode({
) : ( ) : (
<div className="max-h-100 p-2"> <div className="max-h-100 p-2">
<div> <div>
{validationString && (
<div className="ml-1 pb-2 text-status-red">
{validationString}
</div>
)}
{lastRunTime && ( {lastRunTime && (
<div className="justify-left flex font-normal text-muted-foreground"> <div className="justify-left flex font-normal text-muted-foreground">
<div>{RUN_TIMESTAMP_PREFIX}</div> <div>{RUN_TIMESTAMP_PREFIX}</div>
@ -641,7 +646,7 @@ export default function GenericNode({
? "pb-8" ? "pb-8"
: "pb-8 pt-5" : "pb-8 pt-5"
: "", : "",
"relative" "relative",
)} )}
> >
{/* increase height!! */} {/* increase height!! */}
@ -698,7 +703,7 @@ export default function GenericNode({
!data.node?.description) && !data.node?.description) &&
nameEditable nameEditable
? "font-light italic" ? "font-light italic"
: "" : "",
)} )}
onDoubleClick={(e) => { onDoubleClick={(e) => {
setInputDescription(true); setInputDescription(true);
@ -768,13 +773,13 @@ export default function GenericNode({
} }
title={getFieldTitle( title={getFieldTitle(
data.node?.template!, data.node?.template!,
templateField templateField,
)} )}
info={data.node?.template[templateField].info} info={data.node?.template[templateField].info}
name={templateField} name={templateField}
tooltipTitle={ tooltipTitle={
data.node?.template[templateField].input_types?.join( data.node?.template[templateField].input_types?.join(
"\n" "\n",
) ?? data.node?.template[templateField].type ) ?? data.node?.template[templateField].type
} }
required={data.node!.template[templateField].required} required={data.node!.template[templateField].required}
@ -801,7 +806,7 @@ export default function GenericNode({
<div <div
className={classNames( className={classNames(
Object.keys(data.node!.template).length < 1 ? "hidden" : "", Object.keys(data.node!.template).length < 1 ? "hidden" : "",
"flex-max-width justify-center" "flex-max-width justify-center",
)} )}
> >
{" "} {" "}
@ -812,9 +817,9 @@ export default function GenericNode({
renderOutputParameter( renderOutputParameter(
output, output,
data.node!.outputs?.findIndex( data.node!.outputs?.findIndex(
(out) => out.name === output.name (out) => out.name === output.name,
) ?? idx ) ?? idx,
) ),
)} )}
<div <div
className={cn(showHiddenOutputs ? "" : "h-0 overflow-hidden")} className={cn(showHiddenOutputs ? "" : "h-0 overflow-hidden")}
@ -825,9 +830,9 @@ export default function GenericNode({
renderOutputParameter( renderOutputParameter(
output, output,
data.node!.outputs?.findIndex( data.node!.outputs?.findIndex(
(out) => out.name === output.name (out) => out.name === output.name,
) ?? idx ) ?? idx,
) ),
)} )}
</div> </div>
</div> </div>
@ -838,7 +843,7 @@ export default function GenericNode({
(shownOutputs && shownOutputs.length > 0) || (shownOutputs && shownOutputs.length > 0) ||
showHiddenOutputs showHiddenOutputs
? "bottom-5" ? "bottom-5"
: "bottom-1.5" : "bottom-1.5",
)} )}
> >
<Button <Button
@ -852,7 +857,7 @@ export default function GenericNode({
strokeWidth={1.5} strokeWidth={1.5}
className={cn( className={cn(
"h-5 w-5 pt-px text-muted-foreground group-hover:text-medium-indigo group-hover/node:opacity-100", "h-5 w-5 pt-px text-muted-foreground group-hover:text-medium-indigo group-hover/node:opacity-100",
showHiddenOutputs ? "rotate-180 transform" : "" showHiddenOutputs ? "rotate-180 transform" : "",
)} )}
/> />
</Button> </Button>

21
src/frontend/src/CustomNodes/hooks/use-validation-status-string.tsx
View file

@ -2,21 +2,20 @@ import { useEffect } from "react";
const useValidationStatusString = (validationStatus, setValidationString) => { const useValidationStatusString = (validationStatus, setValidationString) => {
useEffect(() => { useEffect(() => {
if (validationStatus?.data.logs) { if (validationStatus?.data?.logs) {
// if it is not a string turn it into a string // if it is not a string turn it into a string
console.log("validationStatus", validationStatus);
let newValidationString = ""; let newValidationString = "";
if (Array.isArray(validationStatus.data.logs)) { Object.values(validationStatus?.data?.logs).forEach((log: any) => {
newValidationString = validationStatus.data.logs log.forEach((logItem) => {
.map((log) => (log?.message ? log.message : JSON.stringify(log))) if (logItem.type === "error" || logItem.type === "ValueError") {
.join("\n"); newValidationString += `${logItem.message}\n`;
} }
if (typeof newValidationString !== "string") { });
newValidationString = JSON.stringify(validationStatus.data.logs); });
}
setValidationString(newValidationString); setValidationString(newValidationString);
} }
}, [validationStatus, validationStatus?.data.logs, setValidationString]); }, [validationStatus, validationStatus?.data?.logs, setValidationString]);
}; };
export default useValidationStatusString; export default useValidationStatusString;