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

Merge branch 'zustand/io/migration' of github.com:logspace-ai/langflow into zustand/io/migration

Browse source
This commit is contained in:
igorrCarvalho 2024-03-01 20:03:23 -03:00
commit 7f55a0ed24
3 changed files with 46 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/frontend/src/components/IOview/index.tsx
View file

@ -12,6 +12,7 @@ import { cn } from "../../utils/utils";
import AccordionComponent from "../AccordionComponent"; import AccordionComponent from "../AccordionComponent";
import IOInputField from "../IOInputField"; import IOInputField from "../IOInputField";
import IOOutputView from "../IOOutputView"; import IOOutputView from "../IOOutputView";
import ShadTooltip from "../ShadTooltipComponent";
import IconComponent from "../genericIconComponent"; import IconComponent from "../genericIconComponent";
import NewChatView from "../newChatView"; import NewChatView from "../newChatView";
import { Badge } from "../ui/badge"; import { Badge } from "../ui/badge";
@ -213,9 +214,16 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
<AccordionComponent <AccordionComponent
trigger={ trigger={
<div className="file-component-badge-div"> <div className="file-component-badge-div">
<Badge variant="gray" size="md"> <ShadTooltip
{output.id} content={output.id}
</Badge> styleClasses="z-50"
>
<div>
<Badge variant="gray" size="md">
{output.displayName}
</Badge>
</div>
</ShadTooltip>
{haveChat && ( {haveChat && (
<div <div
className="-mb-1 pr-4" className="-mb-1 pr-4"
@ -310,26 +318,27 @@ export default function IOView({ children, open, setOpen }): JSX.Element {
</div> </div>
</div> </div>
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer>{!haveChat && ( <BaseModal.Footer>
<div className="flex w-full justify-end pt-6"> {!haveChat && (
<Button <div className="flex w-full justify-end pt-6">
variant={"outline"} <Button
className="flex gap-2 px-3" variant={"outline"}
onClick={() => sendMessage(1)} className="flex gap-2 px-3"
> onClick={() => sendMessage(1)}
<IconComponent >
name={isBuilding ? "Loader2" : "Play"} <IconComponent
className={cn( name={isBuilding ? "Loader2" : "Play"}
"h-4 w-4", className={cn(
isBuilding "h-4 w-4",
? "animate-spin" isBuilding
: "fill-current text-medium-indigo" ? "animate-spin"
)} : "fill-current text-medium-indigo"
/> )}
Run Flow />
</Button> Run Flow
</div> </Button>
)} </div>
)}
</BaseModal.Footer> </BaseModal.Footer>
</BaseModal> </BaseModal>
); );

4
src/frontend/src/types/zustand/flow/index.ts
View file

@ -41,8 +41,8 @@ export type FlowPoolType = {
export type FlowStoreType = { export type FlowStoreType = {
flowPool: FlowPoolType; flowPool: FlowPoolType;
inputs: Array<{ type: string; id: string }>; inputs: Array<{ type: string; id: string; displayName: string }>;
outputs: Array<{ type: string; id: string }>; outputs: Array<{ type: string; id: string; displayName: string }>;
hasIO: boolean; hasIO: boolean;
setFlowPool: (flowPool: FlowPoolType) => void; setFlowPool: (flowPool: FlowPoolType) => void;
addDataToFlowPool: (data: FlowPoolObjectType, nodeId: string) => void; addDataToFlowPool: (data: FlowPoolObjectType, nodeId: string) => void;

16
src/frontend/src/utils/storeUtils.ts
View file

@ -25,15 +25,23 @@ export function getTagsIds(
} }
export function getInputsAndOutputs(nodes: Node[]) { export function getInputsAndOutputs(nodes: Node[]) {
let inputs: { type: string; id: string }[] = []; let inputs: { type: string; id: string; displayName: string }[] = [];
let outputs: { type: string; id: string }[] = []; let outputs: { type: string; id: string; displayName: string }[] = [];
nodes.forEach((node) => { nodes.forEach((node) => {
const nodeData: NodeDataType = node.data as NodeDataType; const nodeData: NodeDataType = node.data as NodeDataType;
if (isOutputNode(nodeData)) { if (isOutputNode(nodeData)) {
outputs.push({ type: nodeData.type, id: nodeData.id }); outputs.push({
type: nodeData.type,
id: nodeData.id,
displayName: nodeData.node?.display_name ?? nodeData.id,
});
} }
if (isInputNode(nodeData)) { if (isInputNode(nodeData)) {
inputs.push({ type: nodeData.type, id: nodeData.id }); inputs.push({
type: nodeData.type,
id: nodeData.id,
displayName: nodeData.node?.display_name ?? nodeData.id,
});
} }
}); });
return { inputs, outputs }; return { inputs, outputs };