refactor(validate.py): extract build_graph function to langflow.inter… (#204)

src/backend/langflow/api/validate.py

@@ -7,6 +7,7 @@ from langflow.api.base import (
     PromptValidationResponse,
     validate_prompt,
 )
+from langflow.interface.run import build_graph
 from langflow.utils.logger import logger
 from langflow.utils.validate import validate_code
 
@@ -33,3 +34,20 @@ def post_validate_prompt(prompt: Prompt):
     except Exception as e:
         logger.exception(e)
         raise HTTPException(status_code=500, detail=str(e)) from e
+
+
+# validate node
+@router.post("/node/{node_id}", status_code=200)
+def post_validate_node(node_id: str, data: dict):
+    try:
+        # build graph
+        graph = build_graph(data)
+        # validate node
+        node = graph.get_node(node_id)
+        if node is not None:
+            _ = node.build()
+            return str(node.params)
+        raise Exception(f"Node {node_id} not found")
+    except Exception as e:
+        logger.exception(e)
+        raise HTTPException(status_code=500, detail=str(e)) from e

src/backend/langflow/interface/run.py

@@ -39,16 +39,16 @@ def build_langchain_object_with_caching(data_graph):
     """
 
     logger.debug("Building langchain object")
-    nodes = data_graph["nodes"]
+    graph = build_graph(data_graph)
-    # Add input variables
-    # nodes = payload.extract_input_variables(nodes)
-    # Nodes, edges and root node
-    edges = data_graph["edges"]
-    graph = Graph(nodes, edges)
-
     return graph.build()
 
 
+def build_graph(data_graph):
+    nodes = data_graph["nodes"]
+    edges = data_graph["edges"]
+    return Graph(nodes, edges)
+
+
 def build_langchain_object(data_graph):
     """
     Build langchain object from data_graph.

src/frontend/package-lock.json

@@ -40,6 +40,7 @@
                 "reactflow": "^11.5.5",
                 "tailwindcss": "^3.2.6",
                 "typescript": "^4.9.5",
+                "use-debounce": "^9.0.4",
                 "web-vitals": "^2.1.4"
             }
         },
@@ -17044,6 +17045,17 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "node_modules/use-debounce": {
+            "version": "9.0.4",
+            "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz",
+            "integrity": "sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==",
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0"
+            }
+        },
         "node_modules/use-sync-external-store": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",

src/frontend/package.json

@@ -35,6 +35,7 @@
         "reactflow": "^11.5.5",
         "tailwindcss": "^3.2.6",
         "typescript": "^4.9.5",
+        "use-debounce": "^9.0.4",
         "web-vitals": "^2.1.4"
     },
     "scripts": {

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

@@ -1,4 +1,5 @@
 import { TrashIcon } from "@heroicons/react/24/outline";
+import { useDebouncedCallback } from "use-debounce";
 import {
   classNames,
   nodeColors,
@@ -7,9 +8,10 @@ import {
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext, useRef } from "react";
+import { useContext, useState, useEffect, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
+import { useCallback } from "react";
 
 export default function GenericNode({
   data,
@@ -22,6 +24,69 @@ export default function GenericNode({
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
   const Icon = nodeIcons[types[data.type]];
+  const [validationStatus, setValidationStatus] = useState("idle");
+  // State for outline color
+  const [isGreenOutline, setIsGreenOutline] = useState(false);
+  const [isRedOutline, setIsRedOutline] = useState(false);
+  const { reactFlowInstance } = useContext(typesContext);
+
+  const debouncedValidateNode = useDebouncedCallback(async () => {
+    // Check if the validationStatus is "success"
+    if (validationStatus === "success") return;
+
+    try {
+      const response = await fetch(`/validate/node/${data.id}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(reactFlowInstance.toObject()),
+      });
+
+      if (response.status === 200) {
+        setValidationStatus("success");
+      } else if (response.status === 500) {
+        setValidationStatus("error");
+      }
+    } catch (error) {
+      console.error("Error validating node:", error);
+      setValidationStatus("error");
+    }
+  }, 1000);
+
+  const validateNode = useCallback(() => {
+    debouncedValidateNode();
+  }, [debouncedValidateNode]);
+
+  useEffect(() => {
+    validateNode();
+  }, [
+    validateNode,
+    ...Object.values(data.node.template).flatMap((t) => Object.values(t)),
+  ]);
+
+  useEffect(() => {
+    if (validationStatus === "success") {
+      setIsGreenOutline(true);
+      setIsRedOutline(false);
+      setTimeout(() => {
+        setIsGreenOutline(false);
+      }, 1000);
+    } else if (validationStatus === "error") {
+      setIsRedOutline(true);
+      setIsGreenOutline(false);
+    } else {
+      setIsGreenOutline(false);
+      setIsRedOutline(false);
+    }
+  }, [validationStatus]);
+
+  const outlineColor = isGreenOutline
+    ? "animate-pulse-green"
+    : isRedOutline
+    ? "border-red-outline"
+    : "";
+
   if (!Icon) {
     if (showError.current) {
       setErrorData({
@@ -34,11 +99,13 @@ export default function GenericNode({
     deleteNode(data.id);
     return;
   }
+
   return (
     <div
       className={classNames(
+        outlineColor,
         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 drop-shadow-[0_10px_10px_rgba(0,0,0,0.25)]"
+        "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 ">

src/frontend/tailwind.config.js

@@ -1,36 +1,55 @@
 /** @type {import('tailwindcss').Config} */
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 module.exports = {
   content: ["./src/**/*.{js,ts,tsx,jsx}"],
-  darkMode: 'class',
+  darkMode: "class",
-  important:true,
+  important: true,
   theme: {
-    extend: {},
+    extend: {
+      borderColor: {
+        "red-outline": "rgba(255, 0, 0, 0.8)",
+        "green-outline": "rgba(72, 187, 120, 0.7)",
+      },
+      boxShadow: {
+        "red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
+        "green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
+      },
+
+      animation: {
+        "pulse-green": "pulseGreen 1s linear",
+      },
+      keyframes: {
+        pulseGreen: {
+          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
+          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
+        },
+      },
+    },
   },
   plugins: [
     require("@tailwindcss/forms")({
-      strategy: 'class', // only generate classes
+      strategy: "class", // only generate classes
     }),
     plugin(function ({ addUtilities }) {
       addUtilities({
-        '.scrollbar-hide': {
+        ".scrollbar-hide": {
           /* IE and Edge */
-          '-ms-overflow-style': 'none',
+          "-ms-overflow-style": "none",
           /* Firefox */
-          'scrollbar-width': 'none',
+          "scrollbar-width": "none",
           /* Safari and Chrome */
-          '&::-webkit-scrollbar': {
+          "&::-webkit-scrollbar": {
-            display: 'none'
+            display: "none",
-          }
           },
-        '.arrow-hide':{
-          '&::-webkit-inner-spin-button':{
-            '-webkit-appearance': 'none',
-            'margin': 0
         },
-          '&::-webkit-outer-spin-button':{
+        ".arrow-hide": {
-            '-webkit-appearance': 'none',
+          "&::-webkit-inner-spin-button": {
-            'margin': 0
+            "-webkit-appearance": "none",
+            margin: 0,
+          },
+          "&::-webkit-outer-spin-button": {
+            "-webkit-appearance": "none",
+            margin: 0,
           },
         },
         '.password':{
@@ -56,4 +75,4 @@ module.exports = {
     })
     }),require('@tailwindcss/line-clamp')
   ],
-}
+};