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

feat: show why group button is disabled (#2507)

Browse source 
* Refactor: Show why group button is disabled

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
This commit is contained in:
Igor Carvalho 2024-07-03 17:55:42 -03:00 • committed by GitHub
commit d03a7fd5a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 46 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/frontend/src/pages/FlowPage/components/SelectionMenuComponent/index.tsx
View file

@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import { useHotkeys } from "react-hotkeys-hook";
import { NodeToolbar } from "reactflow";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Button } from "../../../../components/ui/button";
import { GradientGroup } from "../../../../icons/GradientSparkles";
import useFlowStore from "../../../../stores/flowStore";
@ -18,6 +19,7 @@ export default function SelectionMenu({
? validateSelection(lastSelection!, edges).length > 0
: false,
);
const [errors, setErrors] = useState<string[]>([]);
const [isOpen, setIsOpen] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false);
const [lastNodes, setLastNodes] = useState(nodes);
@ -26,6 +28,7 @@ export default function SelectionMenu({
useEffect(() => {
if (isOpen) {
setErrors(validateSelection(lastSelection!, edges));
return setDisable(validateSelection(lastSelection!, edges).length > 0);
}
setDisable(false);
@ -66,24 +69,47 @@ export default function SelectionMenu({
(isTransitioning ? " opacity-100" : " opacity-0")
}
>
<Button
unstyled
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"
{errors.length > 0 ? (
<ShadTooltip content={errors[0]} side={"top"}>
<Button
unstyled
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>
</ShadTooltip>
) : (
<Button
unstyled
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}
/>
Group
</Button>
>
<GradientGroup
strokeWidth={1.5}
size={22}
className="text-primary"
disabled={disable}
/>
Group
</Button>
)}
</div>
</div>
</NodeToolbar>

8
src/frontend/src/utils/reactflowUtils.ts
View file

@ -857,9 +857,7 @@ export function validateSelection(
isOutputNode(node.data as NodeDataType),
)
) {
errorsArray.push(
"Please select only nodes that are not input or output nodes",
);
errorsArray.push("Select non-input/output nodes only");
}
//check if there are two or more nodes with free outputs
if (
@ -867,7 +865,7 @@ export function validateSelection(
(n) => !clonedSelection.edges.some((e) => e.source === n.id),
).length > 1
) {
errorsArray.push("Please select only one node with free outputs");
errorsArray.push("Select only one node with free outputs");
}
// check if there is any node that does not have any connection
@ -878,7 +876,7 @@ export function validateSelection(
!clonedSelection.edges.some((edge) => edge.source === node.id),
)
) {
errorsArray.push("Please select only nodes that are connected");
errorsArray.push("Select only connected nodes");
}
return errorsArray;
}