fix state error when is debouncing changes on integers inputs (#1848)

🐛 (index.tsx): fix missing line break after handleUpdateValues function call ✨ (index.tsx): improve performance by debouncing handleUpdateValues function call for certain types of parameters 📝 (parameterUtils.ts): update handleUpdateValues function to use optional chaining for accessing template properties 🚀 (chatInputOutput.spec.ts): remove unused imports and commented code 🚀 (dragAndDrop.spec.ts): fix typo in test description
langflow-ai · May 8, 2024 · b3fa552 · b3fa552
2 parents 1a54582 + da3057f
commit b3fa552
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 46 deletions.
diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
@@ -86,7 +86,7 @@ export default function ParameterComponent({
   let disabled =
     edges.some(
       (edge) =>
-        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
+        edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
     ) ?? false;
 
   const myData = useTypesStore((state) => state.data);
@@ -97,6 +97,7 @@ export default function ParameterComponent({
     setIsLoading(true);
     try {
       let newTemplate = await handleUpdateValues(name, data);
+
       if (newTemplate) {
         setNode(data.id, (oldNode) => {
           let newNode = cloneDeep(oldNode);
@@ -130,6 +131,7 @@ export default function ParameterComponent({
         setIsLoading(true);
         try {
           let newTemplate = await handleUpdateValues(name, data);
+
           if (newTemplate) {
             setNode(data.id, (oldNode) => {
               let newNode = cloneDeep(oldNode);
@@ -154,23 +156,35 @@ export default function ParameterComponent({
     }
     fetchData();
   }, []);
+
   const handleOnNewValue = async (
-    newValue: string | string[] | boolean | Object[]
+    newValue: string | string[] | boolean | Object[],
   ): Promise<void> => {
-    if (data.node!.template[name].value !== newValue) {
+    const nodeTemplate = data.node!.template[name];
+    const currentValue = nodeTemplate.value;
+
+    if (currentValue !== newValue) {
       takeSnapshot();
     }
+
     const shouldUpdate =
       data.node?.template[name].real_time_refresh &&
       !data.node?.template[name].refresh_button &&
-      data.node!.template[name].value !== newValue;
+      currentValue !== newValue;
+
+    const typeToDebounce = nodeTemplate.type;
+
+    nodeTemplate.value = newValue;
 
-    data.node!.template[name].value = newValue; // necessary to enable ctrl+z inside the input
     let newTemplate;
     if (shouldUpdate) {
       setIsLoading(true);
       try {
-        newTemplate = await debouncedHandleUpdateValues(name, data);
+        if (["int"].includes(typeToDebounce)) {
+          newTemplate = await handleUpdateValues(name, data);
+        } else {
+          newTemplate = await debouncedHandleUpdateValues(name, data);
+        }
       } catch (error) {
         let responseError = error as ResponseErrorTypeAPI;
         setErrorData({
@@ -179,18 +193,19 @@ export default function ParameterComponent({
         });
       }
       setIsLoading(false);
-      // this de
     }
-    setNode(data.id, (oldNode) => {
-      let newNode = cloneDeep(oldNode);
 
+    setNode(data.id, (oldNode) => {
+      const newNode = cloneDeep(oldNode);
       newNode.data = {
         ...newNode.data,
       };
 
       if (data.node?.template[name].real_time_refresh && newTemplate) {
         newNode.data.node.template = newTemplate;
-      } else newNode.data.node.template[name].value = newValue;
+      } else {
+        newNode.data.node.template[name].value = newValue;
+      }
 
       return newNode;
     });
@@ -264,7 +279,7 @@ export default function ParameterComponent({
             <span
               key={index}
               className={classNames(
-                index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center"
+                index > 0 ? "mt-2 flex items-center" : "mt-3 flex items-center",
               )}
             >
               <div
@@ -380,7 +395,7 @@ export default function ParameterComponent({
               className={classNames(
                 left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
                 "h-3 w-3 rounded-full border-2 bg-background",
-                !showNode ? "mt-0" : ""
+                !showNode ? "mt-0" : "",
               )}
               style={{
                 borderColor: color ?? nodeColors.unknown,
@@ -476,7 +491,7 @@ export default function ParameterComponent({
                   }
                   className={classNames(
                     left ? "-ml-0.5 " : "-mr-0.5 ",
-                    "h-3 w-3 rounded-full border-2 bg-background"
+                    "h-3 w-3 rounded-full border-2 bg-background",
                   )}
                   style={{
                     borderColor: color ?? nodeColors.unknown,

diff --git a/src/frontend/src/utils/parameterUtils.ts b/src/frontend/src/utils/parameterUtils.ts
@@ -1,45 +1,38 @@
 import { debounce } from "lodash";
 import { SAVE_DEBOUNCE_TIME } from "../constants/constants";
 import { postCustomComponentUpdate } from "../controllers/API";
-import { ResponseErrorTypeAPI } from "../types/api";
 import { NodeDataType } from "../types/flow";
 
 export const handleUpdateValues = async (name: string, data: NodeDataType) => {
-  const code = data.node?.template["code"]?.value;
+  const code = data.node?.template?.code?.value;
   if (!code) {
     console.error("Code not found in the template");
     return;
   }
+
   const template = data.node?.template;
   if (!template) {
     console.error("No template found in the node.");
     return;
   }
+
   try {
-    let newTemplate = await postCustomComponentUpdate(
+    const res = await postCustomComponentUpdate(
       code,
       template,
       name,
-      data.node?.template[name]?.value
-    )
-      .then((res) => {
-        console.log("res", res);
-        if (res.status === 200 && data.node?.template) {
-          return res.data.template;
-        }
-      })
-      .catch((error) => {
-        throw error;
-      });
-    return newTemplate;
+      data.node?.template[name]?.value,
+    );
+    if (res.status === 200 && data.node?.template) {
+      return res.data.template;
+    }
   } catch (error) {
     console.error("Error occurred while updating the node:", error);
-    let errorType = error as ResponseErrorTypeAPI;
-    throw errorType;
+    throw error;
   }
 };
 
 export const debouncedHandleUpdateValues = debounce(
   handleUpdateValues,
-  SAVE_DEBOUNCE_TIME
+  SAVE_DEBOUNCE_TIME,
 );
diff --git a/src/frontend/tests/end-to-end/chatInputOutput.spec.ts b/src/frontend/tests/end-to-end/chatInputOutput.spec.ts
@@ -1,7 +1,5 @@
 import { expect, test } from "@playwright/test";
-import * as dotenv from "dotenv";
 import { readFileSync } from "fs";
-import path from "path";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {
   if (!process.env.CI) {
@@ -60,7 +58,7 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     .getByTestId("textarea-input_value")
     .nth(1)
     .fill(
-      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!"
+      "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
     );
   await page.getByTestId("input-sender_name").nth(1).fill("TestSenderNameUser");
   await page.getByTestId("input-sender_name").nth(0).fill("TestSenderNameAI");
@@ -82,21 +80,15 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
     await page
       .getByText(
         "testtesttesttesttesttestte;.;.,;,.;,.;.,;,..,;;;;;;;;;;;;;;;;;;;;;,;.;,.;,.,;.,;.;.,~~çççççççççççççççççççççççççççççççççççççççisdajfdasiopjfaodisjhvoicxjiovjcxizopjviopasjioasfhjaiohf23432432432423423sttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestççççççççççççççççççççççççççççççççç,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,.,!",
-        { exact: true }
+        { exact: true },
       )
-      .isVisible()
+      .isVisible(),
   );
 });
 
 test("chat_io_teste", async ({ page }) => {
   await page.goto("/");
   await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-  // Read your file into a buffer.
-  const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
-    "utf-8"
-  );
-
   await page.waitForTimeout(3000);
 
   let modalCount = 0;
@@ -115,6 +107,11 @@ test("chat_io_teste", async ({ page }) => {
     modalCount = await page.getByTestId("modal-title")?.count();
   }
 
+  const jsonContent = readFileSync(
+    "tests/end-to-end/assets/ChatTest.json",
+    "utf-8",
+  );
+
   await page.getByTestId("blank-flow").click();
   await page.waitForTimeout(2000);
 
@@ -135,7 +132,7 @@ test("chat_io_teste", async ({ page }) => {
     "drop",
     {
       dataTransfer,
-    }
+    },
   );
   await page.getByLabel("fit view").click();
   await page.getByText("Playground", { exact: true }).click();

diff --git a/src/frontend/tests/end-to-end/dragAndDrop.spec.ts b/src/frontend/tests/end-to-end/dragAndDrop.spec.ts
@@ -27,7 +27,7 @@ test.describe("drag and drop test", () => {
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/collection.json",
-      "utf-8"
+      "utf-8",
     );
 
     // Create the DataTransfer and File
@@ -47,10 +47,10 @@ test.describe("drag and drop test", () => {
       "drop",
       {
         dataTransfer,
-      }
+      },
     );
 
-    await page.getByText("Edit Flow").first().click();
+    await page.getByText("Getting Started").first().click();
     await page.waitForTimeout(1000);
 
     const genericNoda = page.getByTestId("div-generic-node");