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

feat(frontend): add new OutputComponent to handle dropdown menu for selecting output types in generic nodes

Browse source 
feat(frontend): remove ComponentOutputs component and integrate its functionality into ParameterComponent
feat(frontend): update ParameterComponent to use OutputComponent for displaying output types
feat(frontend): update GenericNode to use OutputComponent for displaying output types and remove ComponentOutputs
feat(types): update ParameterComponentType to use number type for index instead of string
This commit is contained in:
anovazzi1 2024-05-27 16:08:34 -03:00
commit 596ab2f282
5 changed files with 57 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/frontend/src/customNodes/genericNode/components/ComponentOutput/index.tsx → src/frontend/src/customNodes/genericNode/components/OutputComponent/index.tsx
View file

@ -8,20 +8,20 @@ import ForwardedIconComponent from "../../../../components/genericIconComponent"
import { outputComponentType } from "../../../../types/components";
import { cn } from "../../../../utils/utils";
import useFlowStore from "../../../../stores/flowStore";
import { NodeDataType } from "../../../../types/flow";
import { cloneDeep } from "lodash";
export default function ComponentOutput({
export default function OutputComponent({
selected,
types,
frozen = false,
nodeId,
idx,
}: outputComponentType) {
const setNode = useFlowStore((state) => state.setNode);
let displayTitle = selected ?? types[0];
if (types.length < 2) {
return (
<span className={cn(frozen ? " text-ice" : "")}>{displayTitle}</span>
);
return <span className={cn(frozen ? " text-ice" : "")}>{selected}</span>;
}
return (
@ -30,7 +30,7 @@ export default function ComponentOutput({
<span
className={cn(frozen ? " text-ice" : "", "flex items-center gap-1")}
>
{displayTitle}
{selected}
<ForwardedIconComponent name="ChevronDown" className="h-4 w-4" />
</span>
</DropdownMenuTrigger>
@ -39,10 +39,12 @@ export default function ComponentOutput({
<DropdownMenuItem
onSelect={() => {
// TODO: UDPDATE SET NODE TO NEW NODE FORM
setNode(nodeId, (node) => ({
...node,
data: { ...node.data, selected: type },
}));
setNode(nodeId, (node) => {
const newNode = cloneDeep(node);
(newNode.data as NodeDataType).node!.outputs![idx].selected =
type;
return newNode;
});
}}
>
{type}

17
src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx
View file

@ -1,17 +0,0 @@
import { NodeDataType } from "../../../../types/flow";
import ComponentOutput from "../ComponentOutput";
export default function ComponentOutputs({ data }: { data: NodeDataType }) {
return (
<div>
{data.node?.outputs?.map((output) => (
<ComponentOutput
nodeId={data.id}
frozen={data.node?.frozen}
types={output.types}
selected={output.selected ?? output.types[0]}
/>
))}
</div>
);
}

49
src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -55,6 +55,7 @@ import useHandleNodeClass from "../../../hooks/use-handle-node-class";
import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
import TooltipRenderComponent from "../tooltipRenderComponent";
import HandleTooltips from "../HandleTooltipComponent";
import OutputComponent from "../OutputComponent";
export default function ParameterComponent({
left,
@ -70,12 +71,9 @@ export default function ParameterComponent({
info = "",
proxy,
showNode,
index = "",
index,
}: ParameterComponentType): JSX.Element {
const ref = useRef<HTMLDivElement>(null);
const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const setErrorData = useAlertStore((state) => state.setErrorData);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
@ -145,40 +143,16 @@ 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 ? (
<DropdownMenu>
<DropdownMenuTrigger>
<span
className={cn(
!left && data.node?.frozen ? " text-ice" : "",
"flex items-center gap-1",
)}
>
{displayTitle}
<ForwardedIconComponent name="ChevronDown" className="h-4 w-4" />
</span>
</DropdownMenuTrigger>
<DropdownMenuContent>
{output_types.map((type) => (
<DropdownMenuItem
onSelect={() => {
setNode(data.id, (node) => ({
...node,
data: { ...node.data, selected_output_type: type },
}));
}}
>
{type}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
return !left ? (
<OutputComponent
idx={index}
types={type?.split("|") ?? []}
selected={title}
nodeId={data.id}
frozen={data.node?.frozen}
/>
) : (
<span className={cn(!left && data.node?.frozen ? " text-ice" : "")}>
{title}
</span>
<span>{title}</span>
);
}
@ -244,7 +218,6 @@ export default function ParameterComponent({
)
) : (
<div
ref={ref}
className={
"relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
((name === "code" && type === "code") ||

69
src/frontend/src/customNodes/genericNode/index.tsx
View file

@ -31,7 +31,6 @@ import { classNames, cn } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent";
import getFieldTitle from "../utils/get-field-title";
import sortFields from "../utils/sort-fields";
import ComponentOutputs from "./components/componentOutputs";
export default function GenericNode({
data,
@ -498,7 +497,7 @@ export default function GenericNode({
data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced && (
<ParameterComponent
index={idx.toString()}
index={idx}
key={scapedJSONStringfy({
inputTypes:
data.node!.template[templateField].input_types,
@ -571,6 +570,7 @@ export default function GenericNode({
),
)}
<ParameterComponent
index={0}
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
@ -748,7 +748,7 @@ export default function GenericNode({
{data.node!.template[templateField].show &&
!data.node!.template[templateField].advanced ? (
<ParameterComponent
index={idx.toString()}
index={idx}
key={scapedJSONStringfy({
inputTypes:
data.node!.template[templateField].input_types,
@ -825,40 +825,35 @@ export default function GenericNode({
>
{" "}
</div>
{data.node!.outputs && data.node!.outputs.length > 0 && (
<ComponentOutputs data={data} />
)}
{data.node!.base_classes.length > 0 && (
<ParameterComponent
key={scapedJSONStringfy({
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
})}
data={data}
color={
(data.node?.output_types &&
data.node.output_types.length > 0
? nodeColors[data.node.output_types[0]] ??
nodeColors[types[data.node.output_types[0]]]
: nodeColors[types[data.type]]) ?? nodeColors.unknown
}
title={
data.node?.output_types && data.node.output_types.length > 0
? data.node.output_types.join(" | ")
: data.type
}
tooltipTitle={data.node?.base_classes.join("\n")}
id={{
baseClasses: data.node!.base_classes,
id: data.id,
dataType: data.type,
}}
type={data.node?.base_classes.join("|")}
left={false}
showNode={showNode}
/>
)}
{data.node!.outputs &&
data.node!.outputs.length > 0 &&
data.node!.outputs.map((output, idx) => (
<ParameterComponent
index={idx}
key={scapedJSONStringfy({
baseClasses: [output.selected ?? output.types[0]],
id: data.id,
dataType: data.type,
})}
data={data}
color={
nodeColors[output.selected ?? output.types[0]] ??
nodeColors[types[output.selected ?? output.types[0]]] ??
nodeColors[types[data.type]] ??
nodeColors.unknown
}
title={output.selected ?? output.types[0]}
tooltipTitle={output.selected ?? output.types[0]}
id={{
baseClasses: [output.selected ?? output.types[0]],
id: data.id,
dataType: data.type,
}}
type={output.types.join("|")}
left={false}
showNode={showNode}
/>
))}
</>
</div>
)}

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

@ -67,7 +67,7 @@ export type ParameterComponentType = {
info?: string;
proxy?: { field: string; id: string };
showNode?: boolean;
index?: string;
index: number;
onCloseModal?: (close: boolean) => void;
};
export type InputListComponentType = {
@ -116,6 +116,7 @@ export type outputComponentType = {
selected: string;
nodeId: string;
frozen?: boolean;
idx: number;
};
export type PromptAreaComponentType = {