Flow as tool Component flicker and retreat

[alex-ge123]

When using the Flow as Tool component, click and select another process, a pop-up will appear

[dosubot[bot]]

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:

1. Ensure setDisable is called correctly within the useEffect that depends on isOpen, lastSelection, and edges.
2. Update setLastNodes to depend on nodes directly, ensuring it updates correctly when nodes change.
3. Maintain the state transitions for 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.

[carlosrcoelho]

@alex-ge123 Could you give more details and a screenshot?

[lucaseduoli]

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.