feature: Add scroll detection for NodeDescription overflow and remove…

… feature flag (langflow-ai#3676) * feat: Add scroll detection for NodeDescription overflow * style: update CSS to hide non-selected note nodes * remove feature flag * [autofix.ci] apply automated fixes * 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 --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
headlinevc · Nov 26, 2024 · 65b2bf0 · 65b2bf0
1 parent 4f213b9
commit 65b2bf0
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 61 deletions.
diff --git 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<HTMLDivElement>(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({
         </>
       ) : (
         <div
+          ref={overflowRef}
           className={cn(
             "nodoubleclick generic-node-desc-text h-full cursor-text word-break-break-word dark:text-note-placeholder",
             description === "" || !description ? "font-light italic" : "",

diff --git a/src/frontend/src/CustomNodes/NoteNode/index.tsx b/src/frontend/src/CustomNodes/NoteNode/index.tsx
@@ -33,7 +33,6 @@ function NoteNode({
       });
     }
   }, []);
-
   const MemoNoteToolbarComponent = useMemo(
     () => (
       <NodeToolbar>
@@ -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",
         )}
       >
         <div className="flex h-fit w-full items-center align-middle">
@@ -92,7 +91,6 @@ function NoteNode({
             width: size.width,
             height: size.height,
           }}
-          className="nowheel overflow-auto"
         >
           <NodeDescription
             inputClassName="border-0 ring-transparent resize-none rounded-none shadow-none h-full w-full"

diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -475,59 +475,58 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             <Background className="" />
             {!view && (
               <Controls className="fill-foreground stroke-foreground text-primary [&>button]:border-b-border [&>button]:bg-muted hover:[&>button]:bg-border">
-                {ENABLE_MVPS && (
-                  <ControlButton
-                    data-testid="add_note"
-                    onClick={() => {
-                      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 = {
+                <ControlButton
+                  data-testid="add_note"
+                  onClick={() => {
+                    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"
-                  >
-                    <ShadTooltip content="Add note">
-                      <div>
-                        <IconComponent
-                          name="SquarePen"
-                          aria-hidden="true"
-                          className="scale-125"
-                        />
-                      </div>
-                    </ShadTooltip>
-                  </ControlButton>
-                )}
+                      },
+                    };
+                    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"
+                >
+                  <ShadTooltip content="Add note">
+                    <div>
+                      <IconComponent
+                        name="SquarePen"
+                        aria-hidden="true"
+                        className="scale-125"
+                      />
+                    </div>
+                  </ShadTooltip>
+                </ControlButton>
               </Controls>
             )}
             <SelectionMenu

diff --git 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)

diff --git 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;
+}
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
@@ -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,