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

Refactor: Minimize only works with 1 handle node and change minimized node UI

Browse source
This commit is contained in:
igorrCarvalho 2023-09-13 17:23:35 -03:00
commit c70de1e881
4 changed files with 61 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -32,7 +32,7 @@ import {
} from "../../../../utils/styleUtils";
import { classNames, groupByFamily } from "../../../../utils/utils";
export default function ParameterComponent({
export default function ParameterComponent({
left,
id,
data,
@ -181,11 +181,6 @@ export default function ParameterComponent({
return (
!showNode ? (
<div
ref={ref}
className="mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2"
>
{
left &&
(type === "str" ||
type === "bool" ||
@ -211,7 +206,7 @@ export default function ParameterComponent({
isValidConnection(connection, reactFlowInstance!)
}
className={classNames(
left ? "-ml-0.5 " : "-mr-0.5 ",
left ? "-ml-0.5 my-12 " : " -mr-0.4 my-12 ",
"h-3 w-3 rounded-full border-2 bg-background"
)}
style={{
@ -220,8 +215,7 @@ export default function ParameterComponent({
}}
></Handle>
</ShadTooltip>
)}
</ div>
)
) : (
<div
ref={ref}

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

@ -31,6 +31,39 @@ export default function GenericNode({
const [validationStatus, setValidationStatus] =
useState<validationStatusType | null>(null);
const [showNode, setShowNode] = useState<boolean>(true);
const [handles, setHandles] = useState<boolean[] | []>([]);
let numberOfInputs: boolean[] = [];
function countHandles(): void {
numberOfInputs = Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_").map((templateCamp) => {
if (!data.node?.template[templateCamp].show) return false
switch (data.node?.template[templateCamp].type) {
case "str":
return false;
case "bool":
return false;
case "float":
return false;
case "code":
return false;
case "prompt":
return false;
case "file":
return false;
case "int":
return false;
default:
return true
}
})
setHandles(numberOfInputs)
};
useEffect(() => {
countHandles();
}, [])
// State for outline color
const { sseData, isBuilding } = useSSE();
useEffect(() => {
@ -51,7 +84,9 @@ export default function GenericNode({
},
});
updateFlow(flow);
console.log(myFlow)
}
countHandles();
}, [data]);
// New useEffect to watch for changes in sseData and update validation status
@ -73,27 +108,28 @@ export default function GenericNode({
setData={setData}
deleteNode={deleteNode}
setShowNode={setShowNode}
numberOfHandles={handles}
></NodeToolbarComponent>
</NodeToolbar>
<div
className={classNames(
selected ? "border border-ring" : "border",
showNode ? "w-96" : "w-32",
showNode ? "w-96" : "w-24 h-24 rounded-full",
"generic-node-div",
)}
>
{data.node?.beta && (
{data.node?.beta && showNode && (
<div className="beta-badge-wrapper">
<div className="beta-badge-content">BETA</div>
</div>
)}
<div>
<div className={"generic-node-div-title " + (!showNode ? "relative rounded-t-lg rounded-b-lg" : "justify-between rounded-t-lg")}>
<div className={"generic-node-title-arrangement " + (!showNode && "justify-center")}>
<div className={"generic-node-div-title " + (!showNode ? "relative rounded-full w-24 h-24" : "justify-between rounded-t-lg")}>
<div className={"generic-node-title-arrangement rounded-full" + (!showNode && "justify-center")}>
<IconComponent
name={name}
className={"generic-node-icon " + (!showNode && "absolute left-10")}
className={"generic-node-icon " + (!showNode && "absolute left-7")}
iconColor={`${nodeColors[types[data.type]]}`}
/>
{showNode && (
@ -112,8 +148,7 @@ export default function GenericNode({
{Object.keys(data.node!.template)
.filter((templateField) => templateField.charAt(0) !== "_")
.map((templateField: string, idx) => (
<div key={idx}>
{data.node!.template[templateField].show &&
data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced && (
<ParameterComponent
key={
@ -165,8 +200,7 @@ export default function GenericNode({
}
showNode={showNode}
/>
)}
</div>))}
)))}
<ParameterComponent
key={[data.type, data.id, ...data.node!.base_classes].join("|")}
data={data}

17
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -12,6 +12,7 @@ export default function NodeToolbarComponent({
setData,
deleteNode,
setShowNode,
numberOfHandles,
}: nodeToolbarPropsType): JSX.Element {
const [nodeLength, setNodeLength] = useState(
Object.keys(data.node!.template).filter(
@ -29,6 +30,15 @@ export default function NodeToolbarComponent({
).length
);
function canMinimize() {
let countHandles: number = 0;
numberOfHandles.forEach((bool) => {
if (bool) countHandles += 1;
});
if (countHandles > 1) return false;
return true;
}
const { paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow();
return (
@ -119,11 +129,12 @@ export default function NodeToolbarComponent({
</div>
</ShadTooltip>
<ShadTooltip content="Minimize" side="top">
<ShadTooltip content={canMinimize() ? "Minimize" : "Only nodes with 1 or less input handles can minimize"} side="top">
<button
className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
onClick={() => {
setShowNode(prev => !prev);
onClick={(event) => {
if (canMinimize()) return setShowNode(prev => !prev);
event.preventDefault();
}}
>
<IconComponent name="Minus" className="h-4 w-4" />

1
src/frontend/src/types/components/index.ts
View file

@ -400,6 +400,7 @@ export type nodeToolbarPropsType = {
deleteNode: (idx: string) => void;
setData: (newState: NodeDataType) => void;
setShowNode: (boolean: any) => void;
numberOfHandles: boolean[] | [];
};
export type parsedDataType = {