Closed alex-ge123 closed 2 months ago
To resolve the issue where clicking and selecting another process in the Flow as Tool component causes a pop-up to appear, and the component flickers and retreats, you need to ensure that the state transitions are handled correctly. The flickering and retreating behavior is likely due to the timing and state management of the isOpen
and isTransitioning
states.
Here is a revised version of the SelectionMenu
component that addresses these issues:
import { useEffect, useState } from "react";
import { NodeToolbar } from "reactflow";
import { GradientGroup } from "../../../../icons/GradientSparkles";
import useFlowStore from "../../../../stores/flowStore";
import { validateSelection } from "../../../../utils/reactflowUtils";
export default function SelectionMenu({
onClick,
nodes,
isVisible,
lastSelection,
}) {
const edges = useFlowStore((state) => state.edges);
const [disable, setDisable] = useState<boolean>(
lastSelection && edges.length > 0
? validateSelection(lastSelection!, edges).length > 0
: false
);
const [isOpen, setIsOpen] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false);
const [lastNodes, setLastNodes] = useState(nodes);
useEffect(() => {
if (isOpen) {
setDisable(validateSelection(lastSelection!, edges).length > 0);
} else {
setDisable(false);
}
}, [isOpen, lastSelection, edges]);
useEffect(() => {
setLastNodes(nodes);
}, [nodes]);
useEffect(() => {
if (isVisible) {
setIsOpen(true);
setTimeout(() => {
setIsTransitioning(true);
}, 50);
} else {
setIsTransitioning(false);
setTimeout(() => {
setIsOpen(false);
}, 500);
}
}, [isVisible]);
return (
<NodeToolbar
isVisible={isOpen}
offset={5}
nodeId={
lastNodes && lastNodes.length > 0 ? lastNodes.map((n) => n.id) : []
}
>
<div className="h-10 w-28 overflow-hidden">
<div
className={
"duration-400 h-10 w-24 rounded-md border border-indigo-300 bg-background px-2.5 text-primary shadow-inner transition-all ease-in-out" +
(isTransitioning ? " opacity-100" : " opacity-0")
}
>
<button
className={`${
disable
? "flex h-full w-full cursor-not-allowed items-center justify-between text-sm text-muted-foreground"
: "flex h-full w-full items-center justify-between text-sm"
}`}
onClick={onClick}
disabled={disable}
>
<GradientGroup
strokeWidth={1.5}
size={22}
className="text-primary"
disabled={disable}
/>
Group
</button>
</div>
</div>
</NodeToolbar>
);
}
Key changes:
setDisable
is called correctly within the useEffect
that depends on isOpen
, lastSelection
, and edges
.setLastNodes
to depend on nodes
directly, ensuring it updates correctly when nodes
change.isOpen
and isTransitioning
to ensure smooth visibility changes.Additionally, you can refer to the NodeToolbarComponent
in the FlowPage
for more advanced state management and handling of various node interactions, which might provide further insights into managing state transitions and avoiding flickering issues [1][2].
To continue talking to Dosu, mention @dosu.
@alex-ge123 Could you give more details and a screenshot?
Hello!
We made some changes in https://github.com/langflow-ai/langflow/pull/3218 that can be related to your issue. I'm gonna be closing this issue right now, but if those changes didn't resolve your problem, feel free to reopen this.
When using the Flow as Tool component, click and select another process, a pop-up will appear