From 3e5bcf42fff77d8229df6a704db1062d40af2212 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 15 May 2024 18:37:25 +0200 Subject: [PATCH] Made Output Types dropdown work --- .../components/parameterComponent/index.tsx | 58 ++++++++++++++++--- .../src/customNodes/genericNode/index.tsx | 34 +++++------ src/frontend/src/types/flow/index.ts | 1 + 3 files changed, 68 insertions(+), 25 deletions(-) diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index dbcb1e3dc..fee39fce4 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -5,7 +5,9 @@ import CodeAreaComponent from "../../../../components/codeAreaComponent"; import DictComponent from "../../../../components/dictComponent"; import Dropdown from "../../../../components/dropdownComponent"; import FloatComponent from "../../../../components/floatComponent"; -import { default as IconComponent } from "../../../../components/genericIconComponent"; +import ForwardedIconComponent, { + default as IconComponent, +} from "../../../../components/genericIconComponent"; import InputFileComponent from "../../../../components/inputFileComponent"; import InputGlobalComponent from "../../../../components/inputGlobalComponent"; import InputListComponent from "../../../../components/inputListComponent"; @@ -16,6 +18,12 @@ import ShadTooltip from "../../../../components/shadTooltipComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; import { Button } from "../../../../components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "../../../../components/ui/dropdown-menu"; import { RefreshButton } from "../../../../components/ui/refreshButton"; import { INPUT_HANDLER_HOVER, @@ -49,7 +57,7 @@ import { nodeIconsLucide, nodeNames, } from "../../../../utils/styleUtils"; -import { classNames, groupByFamily } from "../../../../utils/utils"; +import { classNames, cn, groupByFamily } from "../../../../utils/utils"; export default function ParameterComponent({ left, @@ -257,6 +265,44 @@ export default function ParameterComponent({ ); }, [info]); + function renderTitle() { + const output_types = title.split("|"); + const displayTitle = data.selected_output_type ?? output_types[0]; + return !left && output_types.length > 1 ? ( + + + + {displayTitle} + + + + + {output_types.map((type) => ( + { + setNode(data.id, (node) => ({ + ...node, + data: { ...node.data, selected_output_type: type }, + })); + }} + > + {type} + + ))} + + + ) : ( + + {title} + + ); + } + function renderTooltips() { let groupedObj: any = groupByFamily(myData, tooltipTitle!, left, flow!); groupedEdge.current = groupedObj; @@ -434,14 +480,10 @@ export default function ParameterComponent({ )} {proxy ? ( {proxy.id}}> - - {title} - + {renderTitle()} ) : ( - - {title} - + renderTitle() )} {required ? "*" : ""} diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx index 044d8cca4..f4059120a 100644 --- a/src/frontend/src/customNodes/genericNode/index.tsx +++ b/src/frontend/src/customNodes/genericNode/index.tsx @@ -54,14 +54,14 @@ export default function GenericNode({ const [nodeName, setNodeName] = useState(data.node!.display_name); const [inputDescription, setInputDescription] = useState(false); const [nodeDescription, setNodeDescription] = useState( - data.node?.description! + data.node?.description!, ); const [isOutdated, setIsOutdated] = useState(false); const buildStatus = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.status + (state) => state.flowBuildStatus[data.id]?.status, ); const lastRunTime = useFlowStore( - (state) => state.flowBuildStatus[data.id]?.timestamp + (state) => state.flowBuildStatus[data.id]?.timestamp, ); const [validationStatus, setValidationStatus] = useState(null); @@ -118,7 +118,7 @@ export default function GenericNode({ updateNodeInternals(data.id); }, - [data.id, data.node, setNode, setIsOutdated] + [data.id, data.node, setNode, setIsOutdated], ); if (!data.node!.template) { @@ -258,7 +258,7 @@ export default function GenericNode({ const isDark = useDarkStore((state) => state.dark); const renderIconStatus = ( buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { if (buildStatus === BuildStatus.BUILDING) { return ; @@ -299,7 +299,7 @@ export default function GenericNode({ }; const getSpecificClassFromBuildStatus = ( buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { let isInvalid = validationStatus && !validationStatus.valid; @@ -323,11 +323,11 @@ export default function GenericNode({ selected: boolean, showNode: boolean, buildStatus: BuildStatus | undefined, - validationStatus: validationStatusType | null + validationStatus: validationStatusType | null, ) => { const specificClassFromBuildStatus = getSpecificClassFromBuildStatus( buildStatus, - validationStatus + validationStatus, ); const baseBorderClass = getBaseBorderClass(selected); const nodeSizeClass = getNodeSizeClass(showNode); @@ -335,7 +335,7 @@ export default function GenericNode({ baseBorderClass, nodeSizeClass, "generic-node-div", - specificClassFromBuildStatus + specificClassFromBuildStatus, ); }; @@ -392,7 +392,7 @@ export default function GenericNode({ selected, showNode, buildStatus, - validationStatus + validationStatus, )} > {data.node?.beta && showNode && ( @@ -537,7 +537,7 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} @@ -565,7 +565,7 @@ export default function GenericNode({ proxy={data.node?.template[templateField].proxy} showNode={showNode} /> - ) + ), )} 0 - ? data.node.output_types.join(" | ") + ? data.node.output_types.join("|") : data.type } tooltipTitle={data.node?.base_classes.join("\n")} @@ -722,7 +722,7 @@ export default function GenericNode({ !data.node?.description) && nameEditable ? "font-light italic" - : "" + : "", )} onDoubleClick={(e) => { setInputDescription(true); @@ -784,13 +784,13 @@ export default function GenericNode({ } title={getFieldTitle( data.node?.template!, - templateField + templateField, )} info={data.node?.template[templateField].info} name={templateField} tooltipTitle={ data.node?.template[templateField].input_types?.join( - "\n" + "\n", ) ?? data.node?.template[templateField].type } required={data.node!.template[templateField].required} @@ -817,7 +817,7 @@ export default function GenericNode({
{" "} diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 8b259186a..0d453b4b2 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -33,6 +33,7 @@ export type NodeDataType = { node?: APIClassType; id: string; output_types?: string[]; + selected_output_type?: string; buildStatus?: BuildStatus; }; // FlowStyleType is the type of the style object that is used to style the