jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix: updated node toolbar to be more stable on zoom, fix success and error component tooltips, unselect nodes on flow opening (#4610)

Browse source 
* Unselect nodes and edges on enter

* Start with viewport fit

* Fix run component tooltip to match error and success

* Update scrollbar design

* Added node toolbar without portal to match the width of the node

* Updated color of scrollbar

* Updated NoteNode to have same behavior as GenericNode

* Updated logic for tests to pass

* Fix fitview to only occur when nodes are present

* Update z index of resize handle

* Sticky notes test fix

* [autofix.ci] apply automated fixes

* freeze test fixed

---------

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: anovazzi1 <otavio2204@gmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
This commit is contained in:
Lucas Oliveira 2024-11-19 18:54:49 -03:00 • committed by GitHub
commit c9e0d5e4ba
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 281 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/CustomNodes/NoteNode/index.tsx
View file

@ -8,7 +8,7 @@ import {
import { noteDataType } from "@/types/flow";
import { cn } from "@/utils/utils";
import { useEffect, useMemo, useRef, useState } from "react";
import { NodeResizer, NodeToolbar } from "reactflow";
import { NodeResizer } from "reactflow";
import NodeDescription from "../GenericNode/components/NodeDescription";
import NoteToolbarComponent from "./NoteToolbarComponent";
function NoteNode({
@ -33,17 +33,20 @@ function NoteNode({
});
}
}, []);
const MemoNoteToolbarComponent = useMemo(
() => (
<NodeToolbar>
<NoteToolbarComponent data={data} bgColor={bgColor} />
</NodeToolbar>
),
[data, bgColor],
() =>
selected ? (
<div className={cn("absolute -top-12 left-1/2 z-50 -translate-x-1/2")}>
<NoteToolbarComponent data={data} bgColor={bgColor} />
</div>
) : (
<></>
),
[data, bgColor, selected],
);
return (
<>
{MemoNoteToolbarComponent}
<NodeResizer
minWidth={NOTE_NODE_MIN_WIDTH}
minHeight={NOTE_NODE_MIN_HEIGHT}
@ -67,11 +70,12 @@ function NoteNode({
}}
ref={nodeDiv}
className={cn(
"flex h-full w-full flex-col gap-3 rounded-xl p-3 transition-all",
"relative flex h-full w-full flex-col gap-3 rounded-xl p-3 transition-all",
COLOR_OPTIONS[bgColor] !== null &&
`border ${!selected && "-z-50 shadow-sm"}`,
)}
>
{MemoNoteToolbarComponent}
<div
style={{
width: size.width,