Feat/lint service front

backend/df_designer/app/api/api_v1/endpoints/dff_services.py

@@ -11,6 +11,7 @@
 from app.clients.dff_client import get_dff_conditions
 from app.core.config import settings
 from app.core.logger_config import get_logger
+from app.schemas.code_snippet import CodeSnippet
 from app.services.index import Index
 from app.utils.ast_utils import get_imports_from_file
 
@@ -30,18 +31,18 @@ async def search_service(service_name: str, index: Index = Depends(get_index)) -
 
 
 @router.post("/lint_snippet", status_code=200)
-async def lint_snippet(snippet: str) -> dict[str, str]:
+async def lint_snippet(snippet: CodeSnippet) -> dict[str, str]:
     """Lints a snippet with Pylint.
 
     This endpoint Joins the snippet with all imports existing in the conditions.py file and then runs Pylint on it.
     """
-    snippet = snippet.replace(r"\n", "\n")
+    code_snippet = snippet.code.replace(r"\n", "\n")
 
     imports = get_imports_from_file(settings.snippet2lint_path.parent / "conditions.py")
-    snippet = "\n\n".join([imports, snippet])
+    code_snippet = "\n\n".join([imports, code_snippet])
 
     async with aiofiles.open(settings.snippet2lint_path, "wt", encoding="UTF-8") as file:
-        await file.write(snippet)
+        await file.write(code_snippet)
 
     pylint_output = StringIO()
     reporter = TextReporter(pylint_output)

backend/df_designer/app/main.py

@@ -37,7 +37,7 @@ async def route_static_file(path: str):
     if not settings.start_page.exists():
         return HTMLResponse(content="frontend is not built")
     file_path = settings.static_files / path.split("/")[-1]
-    if file_path.suffix in (".js", ".css", ".html"):
+    if file_path.suffix in (".js", ".css", ".html", ".ttf"):
         return FileResponse(file_path)
     return FileResponse(settings.static_files / "index.html")
 

backend/df_designer/app/schemas/code_snippet.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+
+class CodeSnippet(BaseModel):
+    code: str

frontend/src/api/index.ts

@@ -2,7 +2,7 @@ import axios from "axios";
 import { DEV, VITE_BASE_API_URL } from "../env.consts";
 
 // const baseURL = VITE_BASE_API_URL ?? "http://localhost:8000/api/v1"
-const baseURL = DEV ? VITE_BASE_API_URL : window.location.href.replace(window.location.pathname, '/api/v1').replace('localhost', '0.0.0.0')
+const baseURL = DEV ? VITE_BASE_API_URL : window.location.href.replace(window.location.pathname, '/api/v1')
 
 export const $v1 = axios.create({
   baseURL: baseURL

frontend/src/api/services.ts

@@ -1,6 +1,9 @@
-import { $v1 } from '.';
-
+import { $v1 } from "."
 
 export const get_condition_methods = async () => {
   return (await $v1.get("/services/get_conditions")).data
-}
+}
+
+export const lint_service = async (text: string) => {
+  return (await $v1.post(`/services/lint_snippet`, { code: text })).data
+}

frontend/src/modals/ConditionModal/ConditionModal.tsx

@@ -7,13 +7,15 @@ import {
   ModalHeader,
   ModalProps,
   Tab,
-  Tabs
+  Tabs,
 } from "@nextui-org/react"
+import classNames from "classnames"
 import { HelpCircle, TrashIcon } from "lucide-react"
 import { useContext, useEffect, useMemo, useState } from "react"
 import toast from "react-hot-toast"
 import { useParams } from "react-router-dom"
 import { useReactFlow } from "reactflow"
+import { lint_service } from "../../api/services"
 import ModalComponent from "../../components/ModalComponent"
 import { flowContext } from "../../contexts/flowContext"
 import { conditionType, conditionTypeType } from "../../types/ConditionTypes"
@@ -33,6 +35,16 @@ type ConditionModalProps = {
 
 type ConditionModalTab = "Using LLM" | "Slot filling" | "Button" | "Python code" | "Custom"
 
+type LintStatusType = {
+  status: "ok" | "error"
+  message: string
+}
+
+export type ValidateErrorType = {
+  status: boolean
+  reason: string
+}
+
 const ConditionModal = ({
   data,
   condition,
@@ -42,6 +54,8 @@ const ConditionModal = ({
   size = "3xl",
 }: ConditionModalProps) => {
   const [selected, setSelected] = useState<conditionTypeType>(condition?.type ?? "python")
+  const [lintStatus, setLintStatus] = useState<LintStatusType | null>(null)
+  const [testConditionPending, setTestConditionPending] = useState(false)
   const setSelectedHandler = (key: conditionTypeType) => {
     setCurrentCondition({ ...currentCondition, type: key })
     setSelected(key)
@@ -57,8 +71,87 @@ const ConditionModal = ({
 
   const validateConditionName = (is_create: boolean) => {
     const nodes = getNodes() as NodeType[]
-    if (!is_create) return !nodes.some((node: NodeType) => node.data.conditions?.some(c => (c.name === currentCondition.name && c.id !== currentCondition.id)))
-    return !nodes.some((node: NodeType) => node.data.conditions?.some(c => c.name === currentCondition.name))
+    if (!is_create) {
+      const is_name_valid = !nodes.some((node: NodeType) =>
+        node.data.conditions?.some(
+          (c) => c.name === currentCondition.name && c.id !== currentCondition.id
+        )
+      )
+      if (!is_name_valid) {
+        return {
+          status: false,
+          reason: "Name must be unique",
+        }
+      } else {
+        return {
+          status: true,
+          reason: "",
+        }
+      }
+    } else {
+      const is_name_valid = !nodes.some((node: NodeType) =>
+        node.data.conditions?.some((c) => c.name === currentCondition.name)
+      )
+      if (!is_name_valid) {
+        return {
+          status: false,
+          reason: "Name must be unique",
+        }
+      } else {
+        return {
+          status: true,
+          reason: "",
+        }
+      }
+    }
+  }
+
+  const validateConditionAction = () => {
+    const reasons: string[] = []
+    if (currentCondition.type === "python" && currentCondition.data.python?.action) {
+      if (
+        currentCondition.data.python?.action.includes("return") &&
+        currentCondition.data.python?.action.includes("def") &&
+        currentCondition.data.python?.action.includes("(ctx: Context, pipeline: Pipeline) -> bool:")
+      ) {
+        return {
+          status: true,
+          reason: "",
+        }
+      } else {
+        if (!currentCondition.data.python?.action.includes("return")) {
+          reasons.push("Missing return statement")
+        }
+        if (!currentCondition.data.python?.action.includes("def")) {
+          reasons.push("Missing def statement")
+        }
+        if (
+          !currentCondition.data.python?.action.includes(
+            "(ctx: Context, pipeline: Pipeline) -> bool:"
+          )
+        ) {
+          reasons.push("Missing condition statement")
+        }
+        return {
+          status: false,
+          reason: reasons.join("\n "),
+        }
+      }
+    } else if (currentCondition.type === "python" && !currentCondition.data.python?.action) {
+      return {
+        status: false,
+        reason: "Missing action",
+      }
+    } else if (currentCondition.type !== "python") {
+      return {
+        status: true,
+        reason: "",
+      }
+    }
+    return {
+      status: false,
+      reason: "Validation error",
+    }
   }
 
   const tabItems: {
@@ -119,11 +212,57 @@ const ConditionModal = ({
   //   console.log(currentCondition)
   // }, [currentCondition])
 
+  const lintCondition = async () => {
+    setLintStatus(null)
+    if (currentCondition.type === "python") {
+      try {
+        const res = await lint_service(currentCondition.data.python?.action ?? "")
+        console.log(res)
+        setLintStatus(res)
+        return res
+      } catch (error) {
+        console.log(error)
+      }
+    } else {
+      return true
+    }
+  }
+
+  const testCondition = async () => {
+    setTestConditionPending(() => true)
+    if (currentCondition.type === "python") {
+      const lint = await lintCondition()
+      const validate_action = validateConditionAction()
+      console.log(lint)
+      if (lint && validate_action.status) {
+        setTestConditionPending(() => false)
+        return true
+      } else {
+        if (!validate_action.status) {
+          setLintStatus(() => ({
+            status: "error",
+            message: validate_action.reason,
+          }))
+        }
+        setTestConditionPending(() => false)
+        return false
+      }
+    } else {
+      setTestConditionPending(() => false)
+      return true
+    }
+  }
+
+  useEffect(() => {
+    setLintStatus(() => null)
+  }, [selected])
+
   const saveCondition = () => {
     const nodes = getNodes()
     const node = getNode(data.id)
     const currentFlow = flows.find((flow) => flow.name === flowId)
-    if (validateConditionName(is_create)) {
+    const validate_name: ValidateErrorType = validateConditionName(is_create)
+    if (validate_name.status) {
       if (node && currentFlow) {
         const new_node = {
           ...node,
@@ -138,16 +277,18 @@ const ConditionModal = ({
         }
         const new_nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
         setNodes(() => new_nodes)
-        currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
-        updateFlow(currentFlow)
+        // currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
+        // updateFlow(currentFlow)
         quietSaveFlows()
       }
       onClose()
       setCurrentCondition(
         is_create || !condition ? generateNewConditionBase(data.name) : currentCondition
       )
     } else {
-      toast.error("Condition name already exists!")
+      if (!validate_name.status) {
+        toast.error(`Condition name is not valid: \n ${validate_name.reason}`)
+      }
     }
   }
 
@@ -165,8 +306,8 @@ const ConditionModal = ({
       }
       const new_nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
       setNodes(() => new_nodes)
-      currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
-      updateFlow(currentFlow)
+      // currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
+      // updateFlow(currentFlow)
       quietSaveFlows()
     }
     onClose()
@@ -214,7 +355,26 @@ const ConditionModal = ({
               onChange={(e) => setCurrentCondition({ ...currentCondition, name: e.target.value })}
             />
           </div>
-          <div>{bodyItems[selected]}</div>
+          <div>
+            {bodyItems[selected]}
+            {selected === "python" && (
+              <div
+                className='grid transition-all duration-150 overflow-hidden'
+                style={{
+                  gridTemplateRows: lintStatus ? "1fr" : "0fr",
+                }}>
+                <div className='min-h-0 transition-all duration-150'>
+                  <p
+                    className={classNames(
+                      "text-xs p-2 mt-2 rounded-lg font-mono",
+                      lintStatus?.status == "error" ? "bg-red-200" : "bg-green-200"
+                    )}>
+                    {lintStatus?.status == "ok" ? "Condition test passed!" : lintStatus?.message}
+                  </p>
+                </div>
+              </div>
+            )}
+          </div>
         </ModalBody>
         <ModalFooter className='flex justify-between items-center'>
           <div className='flex items-center justify-start gap-2'>
@@ -230,7 +390,14 @@ const ConditionModal = ({
               <TrashIcon />
             </Button>
           </div>
-          <div>
+          <div className='flex items-end gap-2'>
+            <Button
+              data-testid='test-condition-button'
+              onClick={testCondition}
+              isLoading={testConditionPending}
+              className=''>
+              Test condition
+            </Button>
             <Button
               data-testid='save-condition-button'
               onClick={saveCondition}

frontend/src/modals/ConditionModal/editorOptions.tsx

@@ -73,7 +73,7 @@ class FirstLineWidget extends WidgetType {
   }
 
   toDOM() {
-    const html = `<span style="color: #ff8800;">def</span> <span style="color: #0400ff;">${this.name}</span>(<span style="color: #00cc99;">ctx</span>: <span style="color: #00cc99;">Context</span>, <span style="color: #00cc99;">pipeline</span>: <span style="color: #00cc99;">Pipeline</span>)-&gt; <span style="color: #00cc99;">bool</span>:`;
+    const html = `<span style="color: #999;">def</span> <span style="color: #999;">${this.name}</span>(<span style="color: #999;">ctx</span>: <span style="color: #999;">Context</span>, <span style="color: #999;">pipeline</span>: <span style="color: #999;">Pipeline</span>)-&gt; <span style="color: #999;">bool</span>:`;
     const wrap = document.createElement("span");
     wrap.innerHTML = html;
     return wrap;