From e1c57d930c3723ae3897142e0ec659375fae4c7f Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Fri, 20 Jun 2025 10:45:07 -0300 Subject: [PATCH] =?UTF-8?q?Revert=20"=F0=9F=93=9D=20(handleRenderComponent?= =?UTF-8?q?/index.tsx):=20Add=20useShallow=20import=20for=20zustand/react/?= =?UTF-8?q?shallow=20to=20optimize=20re-renders"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 9898d1cacd3fe7751ac0c72727bdf21dd6970398. --- .../handleRenderComponent/index.tsx | 20 +++++----- .../components/PageComponent/index.tsx | 18 ++------- .../tests/extended/features/lock-flow.spec.ts | 39 +------------------ 3 files changed, 14 insertions(+), 63 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx index 8a1c88d7a..74e3fc6b4 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx @@ -3,7 +3,6 @@ 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, @@ -180,10 +179,6 @@ 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, @@ -389,10 +384,16 @@ const HandleRenderComponent = memo(function HandleRenderComponent({ [], ); + // Memoize the validation function + const validateConnection = useCallback( + (connection: any) => isValidConnection(connection), + [], + ); + return (
- isLocked ? false : isValidConnection(connection as Connection) + isValidConnection(connection as Connection) } className={cn( `group/handle z-50 transition-all`, !showNode && "no-show", )} - style={{ - ...BASE_HANDLE_STYLES, - pointerEvents: isLocked ? "none" : "auto", - }} + style={BASE_HANDLE_STYLES} onClick={handleClick} onMouseUp={handleMouseUp} onContextMenu={handleContextMenu} diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 5fc90cc19..3d62dd09b 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -34,7 +34,6 @@ 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, @@ -125,10 +124,6 @@ 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(null); @@ -526,11 +521,6 @@ 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"; @@ -594,13 +584,13 @@ export default function Page({ edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - onConnect={isLocked ? undefined : onConnectMod} + onConnect={onConnectMod} disableKeyboardA11y={true} onInit={setReactFlowInstance} nodeTypes={nodeTypes} - onReconnect={isLocked ? undefined : onEdgeUpdate} - onReconnectStart={isLocked ? undefined : onEdgeUpdateStart} - onReconnectEnd={isLocked ? undefined : onEdgeUpdateEnd} + onReconnect={onEdgeUpdate} + onReconnectStart={onEdgeUpdateStart} + onReconnectEnd={onEdgeUpdateEnd} onNodeDragStart={onNodeDragStart} onSelectionDragStart={onSelectionDragStart} elevateEdgesOnSelect={true} diff --git a/src/frontend/tests/extended/features/lock-flow.spec.ts b/src/frontend/tests/extended/features/lock-flow.spec.ts index 2ace3d8e6..e0435b5c7 100644 --- a/src/frontend/tests/extended/features/lock-flow.spec.ts +++ b/src/frontend/tests/extended/features/lock-flow.spec.ts @@ -1,4 +1,4 @@ -import { expect, Page, test } from "@playwright/test"; +import { test } from "@playwright/test"; import * as dotenv from "dotenv"; import path from "path"; import { awaitBootstrapTest } from "../../utils/await-bootstrap-test"; @@ -74,42 +74,5 @@ 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); }, ); - -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(); -}