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

Added node play on hover of entire node again

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-10 14:50:06 -03:00
commit 5cda2adc4d
1 changed files with 23 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
View file

@ -4,11 +4,21 @@ import Loading from "../../components/ui/loading";
import Xmark from "../../components/ui/xmark"; import Xmark from "../../components/ui/xmark";
import { BuildStatus } from "../../constants/enums"; import { BuildStatus } from "../../constants/enums";
import { VertexBuildTypeAPI } from "../../types/api"; import { VertexBuildTypeAPI } from "../../types/api";
import { cn } from "../../utils/utils";
const useIconStatus = ( const useIconStatus = (
buildStatus: BuildStatus | undefined, buildStatus: BuildStatus | undefined,
validationStatus: VertexBuildTypeAPI | null, validationStatus: VertexBuildTypeAPI | null,
) => { ) => {
const conditionSuccess = validationStatus && validationStatus.valid;
const conditionInactive =
validationStatus &&
!validationStatus.valid &&
buildStatus === BuildStatus.INACTIVE;
const conditionError =
buildStatus === BuildStatus.ERROR ||
(validationStatus && !validationStatus.valid);
const renderIconStatus = () => { const renderIconStatus = () => {
if (buildStatus === BuildStatus.BUILDING) { if (buildStatus === BuildStatus.BUILDING) {
return <Loading className="text-medium-indigo" />; return <Loading className="text-medium-indigo" />;
@ -17,31 +27,30 @@ const useIconStatus = (
<> <>
<IconComponent <IconComponent
name="Play" name="Play"
className="absolute ml-0.5 h-5 fill-current stroke-2 text-medium-indigo opacity-0 transition-all group-hover:opacity-100" className={cn(
!conditionSuccess && !conditionInactive && !conditionError
? "opacity-100"
: "opacity-0",
"absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100",
)}
/> />
{validationStatus && validationStatus.valid ? ( {conditionSuccess ? (
<Checkmark <Checkmark
className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0" className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover/node:opacity-0"
isVisible={true} isVisible={true}
/> />
) : validationStatus && ) : conditionInactive ? (
!validationStatus.valid &&
buildStatus === BuildStatus.INACTIVE ? (
<IconComponent <IconComponent
name="Play" name="Play"
className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-green opacity-30 transition-all group-hover:opacity-0" className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-gray opacity-30 transition-all group-hover/node:opacity-0"
/> />
) : buildStatus === BuildStatus.ERROR || ) : conditionError ? (
(validationStatus && !validationStatus.valid) ? (
<Xmark <Xmark
isVisible={true} isVisible={true}
className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover:opacity-0" className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover/node:opacity-0"
/> />
) : ( ) : (
<IconComponent <></>
name="Play"
className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground opacity-100 transition-all group-hover:opacity-0"
/>
)} )}
</> </>
); );