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

fix: implement locked flow interaction restrictions (#8645)

Browse source 
* 📝 (handleRenderComponent/index.tsx): Add useShallow import for zustand/react/shallow to optimize re-renders
📝 (handleRenderComponent/index.tsx): Introduce isLocked state to handle locked flow functionality
📝 (handleRenderComponent/index.tsx): Update tooltip visibility based on isLocked state
📝 (handleRenderComponent/index.tsx): Update handle style based on isLocked state
📝 (PageComponent/index.tsx): Add useShallow import for zustand/react/shallow to optimize re-renders
📝 (PageComponent/index.tsx): Introduce isLocked state to handle locked flow functionality
📝 (PageComponent/index.tsx): Prevent edge click actions when flow is locked
📝 (PageComponent/index.tsx): Disable edge actions when flow is locked
📝 (PageComponent/index.tsx): Update edge actions based on isLocked state
📝 (lock-flow.spec.ts): Add test to simulate deleting edges when flow is locked

* ✨ (lock-flow.spec.ts): add functionality to try connecting nodes and handle edge cases when connecting nodes in the flow diagram.
This commit is contained in:
Cristhian Zanforlin Lousa 2025-06-23 15:52:26 -03:00 • committed by GitHub
commit 30a0f11448
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 120 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
View file

@ -3,6 +3,7 @@ import useFlowStore from "@/stores/flowStore";
import { nodeColorsName } from "@/utils/styleUtils";
import { Connection, Handle, Position } from "@xyflow/react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import { useShallow } from "zustand/react/shallow";
import ShadTooltip from "../../../../components/common/shadTooltipComponent";
import {
isValidConnection,
@ -179,6 +180,10 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
const [isHovered, setIsHovered] = useState(false);
const [openTooltip, setOpenTooltip] = useState(false);
const isLocked = useFlowStore(
useShallow((state) => state.currentFlow?.locked),
);
const {
setHandleDragging,
setFilterType,
@ -384,16 +389,10 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
[],
);
// Memoize the validation function
const validateConnection = useCallback(
(connection: any) => isValidConnection(connection),
[],
);
return (
<div>
<ShadTooltip
open={openTooltip}
open={openTooltip && !isLocked}
setOpen={setOpenTooltip}
styleClasses={cn("tooltip-fixed-width custom-scroll nowheel bottom-2")}
delayDuration={1000}
@ -414,13 +413,16 @@ const HandleRenderComponent = memo(function HandleRenderComponent({
position={left ? Position.Left : Position.Right}
id={myId}
isValidConnection={(connection) =>
isValidConnection(connection as Connection)
isLocked ? false : isValidConnection(connection as Connection)
}
className={cn(
`group/handle z-50 transition-all`,
!showNode && "no-show",
)}
style={BASE_HANDLE_STYLES}
style={{
...BASE_HANDLE_STYLES,
pointerEvents: isLocked ? "none" : "auto",
}}
onClick={handleClick}
onMouseUp={handleMouseUp}
onContextMenu={handleContextMenu}

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

@ -34,6 +34,7 @@ import {
useState,
} from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { useShallow } from "zustand/react/shallow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import {
INVALID_SELECTION_ERROR_ALERT,
@ -124,6 +125,10 @@ export default function Page({
const [selectionMenuVisible, setSelectionMenuVisible] = useState(false);
const edgeUpdateSuccessful = useRef(true);
const isLocked = useFlowStore(
useShallow((state) => state.currentFlow?.locked),
);
const position = useRef({ x: 0, y: 0 });
const [lastSelection, setLastSelection] =
useState<OnSelectionChangeParams | null>(null);
@ -521,6 +526,11 @@ export default function Page({
);
const handleEdgeClick = (event, edge) => {
if (isLocked) {
event.preventDefault();
event.stopPropagation();
return;
}
const color =
nodeColorsName[edge?.data?.sourceHandle?.output_types[0]] || "cyan";
@ -584,13 +594,13 @@ export default function Page({
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnectMod}
onConnect={isLocked ? undefined : onConnectMod}
disableKeyboardA11y={true}
onInit={setReactFlowInstance}
nodeTypes={nodeTypes}
onReconnect={onEdgeUpdate}
onReconnectStart={onEdgeUpdateStart}
onReconnectEnd={onEdgeUpdateEnd}
onReconnect={isLocked ? undefined : onEdgeUpdate}
onReconnectStart={isLocked ? undefined : onEdgeUpdateStart}
onReconnectEnd={isLocked ? undefined : onEdgeUpdateEnd}
onNodeDragStart={onNodeDragStart}
onSelectionDragStart={onSelectionDragStart}
elevateEdgesOnSelect={true}

96
src/frontend/tests/extended/features/lock-flow.spec.ts
View file

@ -1,4 +1,4 @@
import { test } from "@playwright/test";
import { expect, Page, test } from "@playwright/test";
import * as dotenv from "dotenv";
import path from "path";
import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
@ -74,5 +74,99 @@ test(
timeout: 3000,
state: "visible",
});
await tryDeleteEdge(page);
await page.locator(".react-flow__edge-path").nth(0).click();
await page.keyboard.press("Delete");
let numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(2);
await page.locator(".react-flow__edge-path").nth(0).click();
await page.keyboard.press("Delete");
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(1);
await page.locator(".react-flow__edge-path").nth(0).click();
await page.keyboard.press("Delete");
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(0);
await tryConnectNodes(page);
await page.getByTestId("handle-prompt-shownode-prompt-right").click();
await page
.getByTestId("handle-languagemodelcomponent-shownode-system message-left")
.click();
await page
.getByTestId("handle-chatinput-shownode-chat message-right")
.click();
await page
.getByTestId("handle-languagemodelcomponent-shownode-input-left")
.click();
await page
.getByTestId(
"handle-languagemodelcomponent-shownode-model response-right",
)
.click();
await page.getByTestId("handle-chatoutput-shownode-inputs-left").click();
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(3);
},
);
async function tryConnectNodes(page: Page) {
await page.getByTestId("lock_unlock").click();
const numberOfTries = 5;
let numberOfEdges = await page.locator(".react-flow__edge-path").count();
for (let i = 0; i < numberOfTries; i++) {
try {
await page.getByTestId("handle-prompt-shownode-prompt-right").click({
timeout: 500,
});
} catch (e) {
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(0);
}
try {
await page
.getByTestId(
"handle-languagemodelcomponent-shownode-system message-left",
)
.click({
timeout: 500,
});
} catch (e) {
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(0);
}
}
await page.getByTestId("lock_unlock").click();
}
async function tryDeleteEdge(page: Page) {
await page.getByTestId("lock_unlock").click();
let numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(3);
const numberOfTries = 50;
for (let i = 0; i < numberOfTries; i++) {
await page.locator(".react-flow__edge-path").nth(0).click();
await page.keyboard.press("Delete");
await page.locator(".react-flow__edge-path").nth(1).click();
await page.keyboard.press("Delete");
await page.locator(".react-flow__edge-path").nth(2).click();
await page.keyboard.press("Delete");
numberOfEdges = await page.locator(".react-flow__edge-path").count();
expect(numberOfEdges).toBe(3);
}
//unlock the flow
await page.getByTestId("lock_unlock").click();
}