From e75184e785b59c7376395471114bb71fa8d90631 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 3 Sep 2024 19:07:01 -0300 Subject: [PATCH 1/5] feat: Add scroll detection for NodeDescription overflow --- .../components/NodeDescription/index.tsx | 22 ++++++++++++++++++- .../src/CustomNodes/NoteNode/index.tsx | 4 +--- .../src/customization/feature-flags.ts | 2 +- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 29a82e5c42de..69200b7baf2a 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -3,7 +3,7 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore"; import useFlowStore from "@/stores/flowStore"; import { handleKeyDown } from "@/utils/reactflowUtils"; import { cn } from "@/utils/utils"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Markdown from "react-markdown"; export default function NodeDescription({ @@ -29,6 +29,24 @@ export default function NodeDescription({ const [nodeDescription, setNodeDescription] = useState(description); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const setNode = useFlowStore((state) => state.setNode); + const overflowRef = useRef(null); + const [hasScroll, sethasScroll] = useState(false); + + useEffect(() => { + //timeout to wait for the dom to update + setTimeout(() => { + if (overflowRef.current) { + console.log(overflowRef.current.clientHeight, overflowRef.current.scrollHeight); + if(overflowRef.current.clientHeight < overflowRef.current.scrollHeight){ + sethasScroll(true); + } + else{ + sethasScroll(false); + } + } + }, 200); + }, [inputDescription]); + useEffect(() => { if (!selected) { @@ -45,6 +63,7 @@ export default function NodeDescription({ className={cn( "generic-node-desc", !inputDescription ? "overflow-auto" : "", + hasScroll ? "nowheel" : "", )} > {inputDescription ? ( @@ -109,6 +128,7 @@ export default function NodeDescription({ ) : (
( @@ -69,7 +68,7 @@ function NoteNode({ ref={nodeDiv} className={cn( "flex h-full w-full flex-col gap-3 rounded-md border border-b p-5 transition-all", - selected ? "" : "shadow-sm", + selected ? "" : "shadow-sm -z-50", )} >
@@ -92,7 +91,6 @@ function NoteNode({ width: size.width, height: size.height, }} - className="nowheel overflow-auto" > Date: Tue, 3 Sep 2024 19:07:06 -0300 Subject: [PATCH 2/5] style: update CSS to hide non-selected note nodes --- src/frontend/src/style/classes.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css index 60a1fd51ca69..22d4a2545fc3 100644 --- a/src/frontend/src/style/classes.css +++ b/src/frontend/src/style/classes.css @@ -162,3 +162,7 @@ textarea[class^="ag-"]:focus { .react-flow__node.dragging * { cursor: grabbing !important; } + +.react-flow__node-noteNode:not(.selected){ + z-index: -1 !important; +} \ No newline at end of file From 20b123bcca1a53477d3e4ef8a701db09cad3d3f1 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 3 Sep 2024 19:08:42 -0300 Subject: [PATCH 3/5] remove feature flag --- .../src/pages/FlowPage/components/PageComponent/index.tsx | 2 -- src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts | 4 ---- 2 files changed, 6 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 3683113ca753..2bf4c422b451 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -483,7 +483,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { {!view && ( - {ENABLE_MVPS && ( { @@ -536,7 +535,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
- )} )} { - // prevent test from failing if feature flag is disabled - if (!ENABLE_MVPS) { - return; - } await page.goto("/"); await page.waitForSelector('[data-testid="mainpage_title"]', { timeout: 30000, From 973768659d5ab5e0c4f1c5577b862e7b0dc77292 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:10:17 +0000 Subject: [PATCH 4/5] [autofix.ci] apply automated fixes --- .../components/NodeDescription/index.tsx | 17 +-- .../src/CustomNodes/NoteNode/index.tsx | 2 +- .../components/PageComponent/index.tsx | 102 +++++++++--------- 3 files changed, 62 insertions(+), 59 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 69200b7baf2a..fef0ac146660 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx @@ -36,18 +36,21 @@ export default function NodeDescription({ //timeout to wait for the dom to update setTimeout(() => { if (overflowRef.current) { - console.log(overflowRef.current.clientHeight, overflowRef.current.scrollHeight); - if(overflowRef.current.clientHeight < overflowRef.current.scrollHeight){ + console.log( + overflowRef.current.clientHeight, + overflowRef.current.scrollHeight, + ); + if ( + overflowRef.current.clientHeight < overflowRef.current.scrollHeight + ) { sethasScroll(true); - } - else{ + } else { sethasScroll(false); } } - }, 200); + }, 200); }, [inputDescription]); - useEffect(() => { if (!selected) { setInputDescription(false); @@ -128,7 +131,7 @@ export default function NodeDescription({ ) : (
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 2bf4c422b451..0b5576c0a688 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -483,58 +483,58 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { {!view && ( - { - const wrapper = reactFlowWrapper.current!; - const viewport = reactFlowInstance?.getViewport(); - const x = wrapper.getBoundingClientRect().width / 2; - const y = wrapper.getBoundingClientRect().height / 2; - const nodePosition = - reactFlowInstance?.screenToFlowPosition({ x, y })!; - - const data = { - node: { - description: "", - display_name: "", - documentation: "", - template: {}, - }, - type: "note", - }; - const newId = getNodeId(data.type); - - const newNode: NodeType = { + { + const wrapper = reactFlowWrapper.current!; + const viewport = reactFlowInstance?.getViewport(); + const x = wrapper.getBoundingClientRect().width / 2; + const y = wrapper.getBoundingClientRect().height / 2; + const nodePosition = + reactFlowInstance?.screenToFlowPosition({ x, y })!; + + const data = { + node: { + description: "", + display_name: "", + documentation: "", + template: {}, + }, + type: "note", + }; + const newId = getNodeId(data.type); + + const newNode: NodeType = { + id: newId, + type: "noteNode", + position: { x: 0, y: 0 }, + data: { + ...data, id: newId, - type: "noteNode", - position: { x: 0, y: 0 }, - data: { - ...data, - id: newId, - }, - }; - paste( - { nodes: [newNode], edges: [] }, - { - x: nodePosition.x, - y: nodePosition?.y, - paneX: wrapper.getBoundingClientRect().x, - paneY: wrapper.getBoundingClientRect().y, - }, - ); - }} - className="postion absolute -top-10 rounded-sm" - > - -
-
- - + }, + }; + paste( + { nodes: [newNode], edges: [] }, + { + x: nodePosition.x, + y: nodePosition?.y, + paneX: wrapper.getBoundingClientRect().x, + paneY: wrapper.getBoundingClientRect().y, + }, + ); + }} + className="postion absolute -top-10 rounded-sm" + > + +
+
+ + )} Date: Mon, 9 Sep 2024 12:34:10 -0300 Subject: [PATCH 5/5] refactor: update feature flags and test IDs - Update ENABLE_MVPS flag to false in feature-flags.ts - Update testId from "extended-disclosure" to "bundle-extended-disclosure" in extraSidebarComponent/index.tsx --- src/frontend/src/customization/feature-flags.ts | 2 +- .../pages/FlowPage/components/extraSidebarComponent/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/customization/feature-flags.ts b/src/frontend/src/customization/feature-flags.ts index 87c9ab09dc70..db68d00456df 100644 --- a/src/frontend/src/customization/feature-flags.ts +++ b/src/frontend/src/customization/feature-flags.ts @@ -4,5 +4,5 @@ export const ENABLE_LANGFLOW_STORE = true; export const ENABLE_PROFILE_ICONS = true; export const ENABLE_SOCIAL_LINKS = true; export const ENABLE_BRANDING = true; -export const ENABLE_MVPS = true; +export const ENABLE_MVPS = false; export const ENABLE_CUSTOM_PARAM = false; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 3d086849ca79..49a4a7a275ab 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx @@ -316,7 +316,7 @@ export default function ExtraSidebar(): JSX.Element { title: "Bundles", Icon: nodeIconsLucide.unknown, }} - testId="extended-disclosure" + testId="bundle-extended-disclosure" > {Object.keys(dataFilter) .sort(sortKeys)