diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx index 29a82e5c42de..fef0ac146660 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,27 @@ 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 +66,7 @@ export default function NodeDescription({ className={cn( "generic-node-desc", !inputDescription ? "overflow-auto" : "", + hasScroll ? "nowheel" : "", )} > {inputDescription ? ( @@ -109,6 +131,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 ? "" : "-z-50 shadow-sm", )} >
@@ -92,7 +91,6 @@ function NoteNode({ width: size.width, height: size.height, }} - className="nowheel overflow-auto" > {!view && ( - {ENABLE_MVPS && ( - { - const wrapper = reactFlowWrapper.current!; - 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" + > + +
+
+
+
)} {Object.keys(dataFilter) .sort(sortKeys) 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 diff --git a/src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts b/src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts index 500bc3601ebb..a3358ebf50c9 100644 --- a/src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts +++ b/src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts @@ -3,10 +3,6 @@ import { expect, test } from "@playwright/test"; import uaParser from "ua-parser-js"; test("user should be able to interact with sticky notes", async ({ page }) => { - // 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,