Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: Add scroll detection for NodeDescription overflow and remove feature flag #3676

Merged
merged 8 commits into from
Sep 9, 2024
Merged

feature: Add scroll detection for NodeDescription overflow and remove feature flag #3676

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e75184e
feat: Add scroll detection for NodeDescription overflow
anovazzi1 Sep 3, 2024
1c6d5a2
style: update CSS to hide non-selected note nodes
anovazzi1 Sep 3, 2024
20b123b
remove feature flag
anovazzi1 Sep 3, 2024
9737686
[autofix.ci] apply automated fixes
autofix-ci[bot] Sep 3, 2024
a8e4b86
Merge remote-tracking branch 'origin/main' into noteImprovements
anovazzi1 Sep 6, 2024
dc7f1c0
Merge branch 'main' into noteImprovements
anovazzi1 Sep 9, 2024
2f49b0d
Merge branch 'main' into noteImprovements
anovazzi1 Sep 9, 2024
e818355
refactor: update feature flags and test IDs
anovazzi1 Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 24 additions & 1 deletion src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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) {
Expand All @@ -45,6 +66,7 @@ export default function NodeDescription({
className={cn(
"generic-node-desc",
!inputDescription ? "overflow-auto" : "",
hasScroll ? "nowheel" : "",
)}
>
{inputDescription ? (
Expand Down Expand Up @@ -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" : "",
Expand Down
4 changes: 1 addition & 3 deletions src/frontend/src/CustomNodes/NoteNode/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ function NoteNode({
});
}
}, []);

const MemoNoteToolbarComponent = useMemo(
() => (
<NodeToolbar>
Expand Down Expand Up @@ -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">
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/customization/feature-flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = false;
export const ENABLE_MVPS = true;
export const ENABLE_CUSTOM_PARAM = false;
104 changes: 51 additions & 53 deletions src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -483,60 +483,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 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 = {
<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
Expand Down
4 changes: 4 additions & 0 deletions src/frontend/src/style/classes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
4 changes: 0 additions & 4 deletions src/frontend/tests/scheduled-end-to-end/sticky-notes.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Loading