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

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

Browse source 
🐛 (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
This commit is contained in:
Cristhian Zanforlin Lousa 2024-05-08 11:56:29 -03:00 • committed by GitHub
commit b3fa552bf9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 51 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -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,

29
src/frontend/src/utils/parameterUtils.ts
View file

@ -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,
);

21
src/frontend/tests/end-to-end/chatInputOutput.spec.ts
View file

@ -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();

6
src/frontend/tests/end-to-end/dragAndDrop.spec.ts
View file

@ -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");