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

fix: Update min/max zoom value and fit view values (#7113)

Browse source 
* fix: Update minZoom value in PageComponent to improve zoom functionality

* [autofix.ci] apply automated fixes

* fix: Add fitViewOptions to PageComponent for enhanced zoom control

* fix: update default zoom out level in adjustScreenView utility

Changed the default value of numberOfZoomOut from 3 to 1 in the adjustScreenView function to improve initial screen adjustment behavior.

* fix: update zoom out level in filterEdge test

Modified the filterEdge test to pass a specific zoom out level of 3 to the adjustScreenView function, ensuring consistent screen adjustments during test execution.

* chore: update .gitignore to exclude .qodo files

* fix tests

* fixed test

* fix loop on zoom out

* Remove unnecessary zoom out click in starter projects test to improve test accuracy.

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: Carlos Coelho <80289056+carlosrcoelho@users.noreply.github.com>
This commit is contained in:
Deon Sanchez 2025-03-20 13:35:55 -06:00 • committed by GitHub
commit f99469f06d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 44 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/frontend/.gitignore vendored
View file

@ -32,3 +32,4 @@ yarn-error.log*
/playwright-report/
/blob-report/
/playwright/.cache/
.qodo

6
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -572,8 +572,12 @@ export default function Page({
onSelectionChange={onSelectionChange}
deleteKeyCode={[]}
fitView={isEmptyFlow.current ? false : true}
fitViewOptions={{
minZoom: 0.4,
maxZoom: 1.25,
}}
className="theme-attribution"
minZoom={0.01}
minZoom={0.4}
maxZoom={8}
zoomOnScroll={!view}
zoomOnPinch={!view}

2
src/frontend/tests/core/features/filterEdge-shard-0.spec.ts
View file

@ -26,7 +26,7 @@ test(
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await page.mouse.up();
await page.mouse.down();
await adjustScreenView(page);
await adjustScreenView(page, { numberOfZoomOut: 3 });
const outputElements = await page
.getByTestId("handle-retrievalqa-shownode-text-right")

7
src/frontend/tests/core/features/saveComponents.spec.ts
View file

@ -1,7 +1,7 @@
import { expect, test } from "@playwright/test";
import { readFileSync } from "fs";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out";
test.describe("save component tests", () => {
/// <reference lib="dom"/>
test(
@ -52,6 +52,8 @@ test.describe("save component tests", () => {
.locator('//*[@id="react-flow-id"]/div[1]/div[2]/button[3]')
.click();
await zoomOut(page, 2);
await page.getByTestId("title-Agent Initializer").click({
modifiers: ["Control"],
});
@ -99,9 +101,6 @@ test.describe("save component tests", () => {
await page.mouse.up();
await page.mouse.down();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
textArea = page.getByTestId("div-textarea-description");
elementCountText = await textArea?.count();
if (elementCountText > 0) {

35
src/frontend/tests/core/integrations/decisionFlow.spec.ts
View file

@ -35,10 +35,14 @@ test(
await page.waitForSelector('[data-testid="inputsChat Input"]', {
timeout: 500,
});
await zoomOut(page, 6);
await page
.getByTestId("inputsChat Input")
.dragTo(page.locator('//*[@id="react-flow-id"]'));
await zoomOut(page);
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
});
//---------------------------------- CREATE LIST
await page.getByTestId("sidebar-search-input").click();
@ -49,7 +53,7 @@ test(
await page
.getByTestId("helpersCreate List")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 100 },
targetPosition: { x: 200, y: 100 },
});
await page.waitForSelector('[data-testid="input-list-plus-btn_texts-0"]', {
@ -75,7 +79,7 @@ test(
await page
.getByTestId("helpersCreate List")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 300, y: 300 },
targetPosition: { x: 350, y: 100 },
});
await page.getByTestId("input-list-plus-btn_texts-0").last().click();
await page.getByTestId("input-list-plus-btn_texts-0").last().click();
@ -98,15 +102,13 @@ test(
await page
.getByTestId("processingData to Message")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 350, y: 100 },
targetPosition: { x: 500, y: 100 },
});
await zoomOut(page, 1);
await page
.getByTestId("processingData to Message")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 50, y: 300 },
targetPosition: { x: 650, y: 100 },
});
await zoomOut(page, 2);
//---------------------------------- PASS
await page.getByTestId("sidebar-search-input").click();
@ -117,7 +119,7 @@ test(
await page
.getByTestId("logicPass")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 400, y: 100 },
targetPosition: { x: 800, y: 100 },
});
await page.waitForSelector('[data-testid="logicPass"]', {
timeout: 500,
@ -131,7 +133,7 @@ test(
await page
.getByTestId("logicPass")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 600, y: 200 },
targetPosition: { x: 50, y: 200 },
});
await page.waitForSelector('[data-testid="logicPass"]', {
timeout: 500,
@ -145,12 +147,11 @@ test(
await page
.getByTestId("logicPass")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 650, y: 350 },
targetPosition: { x: 200, y: 300 },
});
await page.waitForSelector('[data-testid="logicPass"]', {
timeout: 500,
});
zoomOut(page, 2);
//---------------------------------- PROMPT
await page.getByTestId("sidebar-search-input").click();
await page.getByTestId("sidebar-search-input").fill("prompt");
@ -160,7 +161,7 @@ test(
await page
.getByTestId("promptsPrompt")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 50, y: 150 },
targetPosition: { x: 350, y: 300 },
});
//---------------------------------- OPENAI
@ -172,7 +173,7 @@ test(
await page
.getByTestId("modelsOpenAI")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 50, y: 300 },
targetPosition: { x: 500, y: 300 },
});
//---------------------------------- CONDITIONAL ROUTER
@ -184,7 +185,7 @@ test(
await page
.getByTestId("logicIf-Else")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 750, y: 150 },
targetPosition: { x: 650, y: 300 },
});
//---------------------------------- CHAT OUTPUT
await page.getByTestId("sidebar-search-input").click();
@ -195,7 +196,7 @@ test(
await page
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 100, y: 75 },
targetPosition: { x: 800, y: 300 },
});
await page.waitForSelector('[data-testid="outputsChat Output"]', {
timeout: 500,
@ -209,7 +210,7 @@ test(
await page
.getByTestId("outputsChat Output")
.dragTo(page.locator('//*[@id="react-flow-id"]'), {
targetPosition: { x: 250, y: 75 },
targetPosition: { x: 800, y: 400 },
});
await page.waitForSelector('[data-testid="outputsChat Output"]', {
timeout: 500,

1
src/frontend/tests/core/integrations/starter-projects.spec.ts
View file

@ -59,7 +59,6 @@ test(
});
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
const edges = await page.locator(".react-flow__edge-interaction").count();
const nodes = await page.getByTestId("div-generic-node").count();

3
src/frontend/tests/core/unit/promptModalComponent.spec.ts
View file

@ -1,7 +1,7 @@
import { expect, test } from "@playwright/test";
import { adjustScreenView } from "../../utils/adjust-screen-view";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out";
test(
"PromptTemplateComponent",
{ tag: ["@release", "@workspace"] },
@ -187,6 +187,7 @@ test(
await page.getByText("Close").last().click();
await zoomOut(page, 2);
await page.getByTestId("more-options-modal").click();
await page.getByTestId("advanced-button-modal").click();

3
src/frontend/tests/extended/features/minimize.spec.ts
View file

@ -1,6 +1,7 @@
import { expect, test } from "@playwright/test";
import { adjustScreenView } from "../../utils/adjust-screen-view";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out";
test(
"user must be able to minimize and expand a component",
@ -33,6 +34,8 @@ test(
await adjustScreenView(page);
await zoomOut(page, 4);
await page.getByTestId("more-options-modal").click();
await page.waitForSelector("data-testid=minimize-button-modal", {

7
src/frontend/tests/extended/features/sticky-notes.spec.ts
View file

@ -1,5 +1,6 @@
import { expect, test } from "@playwright/test";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
import { zoomOut } from "../../utils/zoom-out";
test(
"user should be able to interact with sticky notes",
@ -52,9 +53,7 @@ The future of AI is both exciting and uncertain. As the technology continues to
});
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await zoomOut(page, 6);
await page.getByTestId("note_node").click();
await page.locator(".generic-node-desc-text").last().dblclick();
@ -122,8 +121,6 @@ The future of AI is both exciting and uncertain. As the technology continues to
await page.getByText("Copy").click();
await page.getByTestId("fit_view").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
//double click
await targetElement.click();

4
src/frontend/tests/extended/features/twoEdges.spec.ts
View file

@ -21,10 +21,6 @@ test(
await focusElementsOnBoard({ page });
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByTestId("zoom_out").click();
await page.getByText("Retriever", { exact: true }).first().isHidden();
await page.getByTestId("icon-ChevronDown").last().isVisible();
await page.getByTestId("icon-ChevronDown").last().click();

10
src/frontend/tests/utils/adjust-screen-view.ts
View file

@ -3,7 +3,7 @@ import { Page } from "playwright/test";
export async function adjustScreenView(
page: Page,
{
numberOfZoomOut = 3,
numberOfZoomOut = 1,
}: {
numberOfZoomOut?: number;
} = {},
@ -11,6 +11,12 @@ export async function adjustScreenView(
await page.getByTestId("fit_view").click();
for (let i = 0; i < numberOfZoomOut; i++) {
await page.getByTestId("zoom_out").click();
const zoomOutButton = page.getByTestId("zoom_out");
if (await zoomOutButton.isDisabled()) {
break;
} else {
await zoomOutButton.click();
}
}
}

2
src/frontend/tests/utils/zoom-out.ts
View file

@ -1,6 +1,6 @@
import { Page } from "@playwright/test";
export async function zoomOut(page: Page, times: number = 4) {
export async function zoomOut(page: Page, times: number = 2) {
for (let i = 0; i < times; i++) {
await page.getByTestId("zoom_out").click();
}