Add validationString state and update validationStatus rendering

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

@@ -60,6 +60,8 @@ export default function GenericNode({
     useState<validationStatusType | null>(null);
   const [handles, setHandles] = useState<number>(0);
 
+  const [validationString, setValidationString] = useState<string>("");
+
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
   function countHandles(): void {
@@ -132,6 +134,18 @@ export default function GenericNode({
     }
   }, [flowPool[data.id], data.id]);
 
+  useEffect(() => {
+    if (validationStatus?.params) {
+      // if it is not a string turn it into a string
+      let newValidationString = validationStatus.params;
+      if (typeof newValidationString !== "string") {
+        newValidationString = JSON.stringify(validationStatus.params);
+      }
+
+      setValidationString(newValidationString);
+    }
+  }, [validationStatus, validationStatus?.params]);
+
   const showNode = data.showNode ?? true;
 
   const nameEditable = true;
@@ -516,9 +530,7 @@ export default function GenericNode({
                             Output
                           </span>
                           <div className="max-h-96 overflow-auto custom-scroll">
-                            {validationStatus?.params
+                            {validationString.split("\n").map((line, index) => (
-                              .split("\n")
-                              .map((line, index) => (
                               <div key={index}>{line}</div>
                             ))}
                           </div>