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

Add ShadTooltip component and display display_name for outputs

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

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

@ -41,8 +41,8 @@ export type FlowPoolType = {
export type FlowStoreType = {
flowPool: FlowPoolType;
inputs: Array<{ type: string; id: string }>;
outputs: Array<{ type: string; id: string }>;
inputs: Array<{ type: string; id: string; displayName: string }>;
outputs: Array<{ type: string; id: string; displayName: string }>;
hasIO: boolean;
setFlowPool: (flowPool: FlowPoolType) => 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[]) {
let inputs: { type: string; id: string }[] = [];
let outputs: { type: string; id: string }[] = [];
let inputs: { type: string; id: string; displayName: string }[] = [];
let outputs: { type: string; id: string; displayName: string }[] = [];
nodes.forEach((node) => {
const nodeData: NodeDataType = node.data as NodeDataType;
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)) {
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 };