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

Feat: Add minimize icon and conditional render

Browse source
This commit is contained in:
igorrCarvalho 2023-09-12 14:25:04 -03:00
commit b06cb9507f
3 changed files with 84 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

151
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -14,6 +14,7 @@ import { cleanEdges } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, toTitleCase } from "../../utils/utils"; import { classNames, toTitleCase } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
import { Button } from "@mui/material";
export default function GenericNode({ export default function GenericNode({
data: olddata, data: olddata,
@ -29,6 +30,7 @@ export default function GenericNode({
const name = nodeIconsLucide[data.type] ? data.type : types[data.type]; const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
const [validationStatus, setValidationStatus] = const [validationStatus, setValidationStatus] =
useState<validationStatusType | null>(null); useState<validationStatusType | null>(null);
const [showNode, setShowNode] = useState<boolean>(true);
// State for outline color // State for outline color
const { sseData, isBuilding } = useSSE(); const { sseData, isBuilding } = useSSE();
useEffect(() => { useEffect(() => {
@ -84,76 +86,84 @@ export default function GenericNode({
<div className="beta-badge-content">BETA</div> <div className="beta-badge-content">BETA</div>
</div> </div>
)} )}
<div className="generic-node-div-title"> <div>
<div className="generic-node-title-arrangement"> <div className="grid justify-items-end bg-muted pt-2 pr-2 border-b rounded-t-lg">
<IconComponent <IconComponent
name={name} name="Minus"
className="generic-node-icon" className="hover:text-accent-foreground text-muted-foreground"
iconColor={`${nodeColors[types[data.type]]}`} />
/>
<div className="generic-node-tooltip-div">
<ShadTooltip content={data.node?.display_name}>
<div className="generic-node-tooltip-div text-primary">
{data.node?.display_name}
</div>
</ShadTooltip>
</div>
</div> </div>
<div className="round-button-div"> <div className="generic-node-div-title">
<div> <div className="generic-node-title-arrangement">
<Tooltip <IconComponent
title={ name={name}
isBuilding ? ( className="generic-node-icon"
<span>Building...</span> iconColor={`${nodeColors[types[data.type]]}`}
) : !validationStatus ? ( />
<span className="flex"> <div className="generic-node-tooltip-div">
Build{" "} <ShadTooltip content={data.node?.display_name}>
<IconComponent <div className="generic-node-tooltip-div text-primary">
name="Zap" {data.node?.display_name}
className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1" </div>
/>{" "} </ShadTooltip>
flow to validate status. </div>
</span> </div>
) : ( <div className="round-button-div">
<div className="max-h-96 overflow-auto"> <div>
{typeof validationStatus.params === "string" <Tooltip
? validationStatus.params title={
.split("\n") isBuilding ? (
.map((line: string, index: number) => ( <span>Building...</span>
<div key={index}>{line}</div> ) : !validationStatus ? (
)) <span className="flex">
: ""} Build{" "}
</div> <IconComponent
) name="Zap"
} className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
> />{" "}
<div className="generic-node-status-position"> flow to validate status.
<div </span>
className={classNames( ) : (
validationStatus && validationStatus.valid <div className="max-h-96 overflow-auto">
? "green-status" {typeof validationStatus.params === "string"
: "status-build-animation", ? validationStatus.params
"status-div" .split("\n")
)} .map((line: string, index: number) => (
></div> <div key={index}>{line}</div>
<div ))
className={classNames( : ""}
validationStatus && !validationStatus.valid </div>
? "red-status" )
: "status-build-animation", }
"status-div" >
)} <div className="generic-node-status-position">
></div> <div
<div className={classNames(
className={classNames( validationStatus && validationStatus.valid
!validationStatus || isBuilding ? "green-status"
? "yellow-status" : "status-build-animation",
: "status-build-animation", "status-div"
"status-div" )}
)} ></div>
></div> <div
</div> className={classNames(
</Tooltip> validationStatus && !validationStatus.valid
? "red-status"
: "status-build-animation",
"status-div"
)}
></div>
<div
className={classNames(
!validationStatus || isBuilding
? "yellow-status"
: "status-build-animation",
"status-div"
)}
></div>
</div>
</Tooltip>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -167,7 +177,8 @@ export default function GenericNode({
.map((templateField: string, idx) => ( .map((templateField: string, idx) => (
<div key={idx}> <div key={idx}>
{data.node!.template[templateField].show && {data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? ( !data.node!.template[templateField].advanced &&
showNode ? (
<ParameterComponent <ParameterComponent
key={ key={
(data.node!.template[templateField].input_types?.join( (data.node!.template[templateField].input_types?.join(

2
src/frontend/src/style/applies.css
View file

@ -267,7 +267,7 @@
@apply relative flex w-96 flex-col justify-center rounded-lg bg-background; @apply relative flex w-96 flex-col justify-center rounded-lg bg-background;
} }
.generic-node-div-title { .generic-node-div-title {
@apply flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4; @apply flex w-full items-center justify-between gap-8 border-b bg-muted p-4;
} }
.generic-node-title-arrangement { .generic-node-title-arrangement {
@apply flex-max-width items-center truncate; @apply flex-max-width items-center truncate;

2
src/frontend/src/utils/styleUtils.ts
View file

@ -78,6 +78,7 @@ import {
X, X,
XCircle, XCircle,
Zap, Zap,
Minus
} from "lucide-react"; } from "lucide-react";
import { FaApple, FaGithub } from "react-icons/fa"; import { FaApple, FaGithub } from "react-icons/fa";
import { AirbyteIcon } from "../icons/Airbyte"; import { AirbyteIcon } from "../icons/Airbyte";
@ -308,4 +309,5 @@ export const nodeIconsLucide: iconsType = {
Key, Key,
Unplug, Unplug,
ChevronUp, ChevronUp,
Minus,
}; };