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

Merge remote-tracking branch 'origin/zustand/io/migration' into ioview

Browse source
This commit is contained in:
Lucas Oliveira 2024-02-26 17:06:39 +01:00
commit 27c97a52e6
71 changed files with 1044 additions and 724 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -324,7 +324,9 @@ export default function ParameterComponent({
) : (
title
)}
<span className="text-status-red">{required ? " *" : ""}</span>
<span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}>
{required ? " *" : ""}
</span>
<div className="">
{info !== "" && (
<ShadTooltip content={infoHtml.current}>

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

@ -10,6 +10,7 @@ import { Textarea } from "../../components/ui/textarea";
import { priorityFields } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { useDarkStore } from "../../stores/darkStore";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
import { useTypesStore } from "../../stores/typesStore";
@ -168,7 +169,6 @@ export default function GenericNode({
validationStatus: validationStatusType | null
) => {
const isValid = validationStatus && validationStatus.valid;
if (isValid) {
return "green-status";
} else if (!isValid && buildStatus === BuildStatus.INACTIVE) {
@ -177,13 +177,15 @@ export default function GenericNode({
return "green-status";
} else if (!isValid && buildStatus === BuildStatus.BUILT) {
return "red-status";
} else if (!validationStatus) {
return "yellow-status";
} else if (!validationStatus && buildStatus === BuildStatus.TO_BUILD) {
return "green-status";
} else if (buildStatus === BuildStatus.BUILDING) {
return "status-build-animation";
} else {
return "yellow-status";
}
};
const isDark = useDarkStore((state) => state.dark);
const renderIconStatusComponents = (
buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null
@ -212,12 +214,15 @@ export default function GenericNode({
validationStatus: validationStatusType | null
) => {
let isInvalid = validationStatus && !validationStatus.valid;
if (buildStatus === BuildStatus.INACTIVE && isInvalid) {
// INACTIVE should have its own class
return "inactive-status";
}
if (buildStatus === BuildStatus.BUILT && isInvalid) {
return "built-invalid-status";
return isDark
? "border-none ring ring-[#751C1C]"
: "built-invalid-status";
} else if (buildStatus === BuildStatus.BUILDING) {
return "building-status";
} else {
@ -231,11 +236,17 @@ export default function GenericNode({
buildStatus: BuildStatus | undefined,
validationStatus: validationStatusType | null
) => {
const specificClassFromBuildStatus = getSpecificClassFromBuildStatus(
buildStatus,
validationStatus
);
const baseBorderClass = getBaseBorderClass(selected);
const nodeSizeClass = getNodeSizeClass(showNode);
return classNames(
getBaseBorderClass(selected),
getNodeSizeClass(showNode),
baseBorderClass,
nodeSizeClass,
"generic-node-div",
getSpecificClassFromBuildStatus(buildStatus, validationStatus)
specificClassFromBuildStatus
);
};
@ -267,12 +278,11 @@ export default function GenericNode({
onCloseAdvancedModal={() => {}}
></NodeToolbarComponent>
</NodeToolbar>
<div
className={getNodeBorderClassName(
selected,
showNode,
data?.build_status,
data?.buildStatus,
validationStatus
)}
>
@ -451,7 +461,7 @@ export default function GenericNode({
variant="secondary"
className={"group h-9 px-1.5"}
onClick={() => {
if (data?.build_status === BuildStatus.BUILDING || isBuilding)
if (data?.buildStatus === BuildStatus.BUILDING || isBuilding)
return;
buildFlow(data.id);
}}
@ -459,7 +469,7 @@ export default function GenericNode({
<div>
<Tooltip
title={
data?.build_status === BuildStatus.BUILDING ? (
data?.buildStatus === BuildStatus.BUILDING ? (
<span>Building...</span>
) : !validationStatus ? (
<span className="flex">
@ -480,7 +490,7 @@ export default function GenericNode({
>
<div className="generic-node-status-position flex items-center justify-center">
{renderIconPlayOrPauseComponents(
data?.build_status,
data?.buildStatus,
validationStatus
)}
</div>
@ -489,7 +499,7 @@ export default function GenericNode({
</Button>
)}
<div className="">
{renderIconStatusComponents(data?.build_status, validationStatus)}
{renderIconStatusComponents(data?.buildStatus, validationStatus)}
</div>
</div>
</div>

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

@ -391,9 +391,7 @@ export default function NodeToolbarComponent({
name="FileText"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
{data.node?.documentation === ""
? "Coming Soon"
: "Documentation"}
Docs
</div>{" "}
</SelectItem>
{isMinimal && (
@ -419,13 +417,19 @@ export default function NodeToolbarComponent({
</SelectItem>
)}
<SelectItem value={"delete"}>
<div className="font-red flex text-red-500 hover:text-red-500">
<SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
<div className="font-red flex text-status-red">
<IconComponent
name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
Delete{" "}
<span className="">Delete</span>{" "}
<span>
<IconComponent
name="Delete"
className="absolute right-2 top-2 h-4 w-4 text-red-300"
></IconComponent>
</span>
</div>
</SelectItem>
</SelectContent>

38
src/frontend/src/stores/flowStore.ts
View file

@ -401,7 +401,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
nodeId,
onBuildComplete: () => {
if (nodeId) {
setSuccessData({ title: `${nodeId} built successfully` });
setSuccessData({ title: `${get().nodes.find((node) => node.id === nodeId)?.data.node?.display_name} built successfully` });
} else {
setSuccessData({ title: `Flow built successfully` });
}
@ -416,7 +416,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
},
});
get().revertAllVerticesToBuild();
get().revertBuiltStatusFromBuilding();
},
getFlow: () => {
return {
@ -425,26 +425,11 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
viewport: get().reactFlowInstance?.getViewport()!,
};
},
updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
nodeIdList.forEach((id) => {
const nodeToUpdate = get().nodes.find((node) => node.id === id);
if (nodeToUpdate) {
nodeToUpdate.data.build_status = status;
get().setNodes(get().nodes);
}
});
},
updateVerticesBuild: (vertices: string[]) => {
set({ verticesBuild: vertices });
},
verticesBuild: [],
revertAllVerticesToBuild: () => {
// set all vertices to TO_BUILD
const verticesIds = get()
.nodes.filter((node) => node.data.build_status === BuildStatus.BUILDING)
.map((node) => node.id);
get().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
},
removeFromVerticesBuild: (vertices: string[]) => {
set({
verticesBuild: get().verticesBuild.filter(
@ -452,6 +437,23 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
),
});
},
updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => {
nodeIdList.forEach((id) => {
const nodeToUpdate = get().nodes.find((node) => node.id === id);
if (nodeToUpdate) {
nodeToUpdate.data.buildStatus = status;
set({ nodes: get().nodes });
}
});
},
revertBuiltStatusFromBuilding: () => {
get().nodes.forEach((node) => {
if (node.data.buildStatus === BuildStatus.BUILDING) {
node.data.buildStatus = BuildStatus.TO_BUILD;
}
});
set({ nodes: get().nodes });
},
}));
export default useFlowStore;

4
src/frontend/src/style/applies.css
View file

@ -296,7 +296,7 @@
@apply generic-node-status text-status-green;
}
.gray-status {
@apply generic-node-status text-muted-foreground;
@apply generic-node-status text-status-gray;
}
.red-status {
@ -313,7 +313,7 @@
@apply border-none ring ring-muted-foreground;
}
.built-invalid-status {
@apply border-none ring ring-red-300;
@apply border-none ring ring-[#FF9090];
}
.building-status {
@apply border-none ring;

1
src/frontend/src/style/index.css
View file

@ -60,6 +60,7 @@
--chat-send: #059669;
--status-green: #4ade80;
--status-blue: #2563eb;
--status-gray: #6b7280;
--connection: #555;
}

2
src/frontend/src/types/api/index.ts
View file

@ -1,5 +1,4 @@
import { Edge, Node, Viewport } from "reactflow";
import { BuildStatus } from "../../constants/enums";
import { FlowType } from "../flow";
//kind and class are just representative names to represent the actual structure of the object received by the API
export type APIDataType = { [key: string]: APIKindType };
@ -37,7 +36,6 @@ export type APIClassType = {
| CustomFieldsType
| boolean
| undefined;
build_status?: BuildStatus;
};
export type TemplateVariableType = {

2
src/frontend/src/types/flow/index.ts
View file

@ -29,7 +29,7 @@ export type NodeDataType = {
node?: APIClassType;
id: string;
output_types?: string[];
build_status?: BuildStatus;
buildStatus?: BuildStatus;
};
// FlowStyleType is the type of the style object that is used to style the
// Flow card with an emoji and a color.

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

@ -86,9 +86,9 @@ export type FlowStoreType = {
unselectAll: () => void;
buildFlow: (nodeId?: string) => Promise<void>;
getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
updateVerticesBuild: (vertices: string[]) => void;
removeFromVerticesBuild: (vertices: string[]) => void;
revertAllVerticesToBuild: () => void;
verticesBuild: string[];
updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
revertBuiltStatusFromBuilding: () => void;
};

8
src/frontend/src/utils/styleUtils.ts
View file

@ -27,6 +27,7 @@ import {
Compass,
Copy,
Cpu,
Delete,
Download,
DownloadCloud,
Edit,
@ -197,7 +198,7 @@ export const gradients = [
export const nodeColors: { [char: string]: string } = {
prompts: "#4367BF",
models: "#AA2411",
llms: "#6344BE",
model_specs: "#6344BE",
chains: "#FE7500",
Document: "#7AAE42",
list: "#9AAE42",
@ -226,7 +227,7 @@ export const nodeColors: { [char: string]: string } = {
export const nodeNames: { [char: string]: string } = {
prompts: "Prompts",
models: "Language Models",
llms: "Model Settings",
model_specs: "Model Specs",
chains: "Chains",
agents: "Agents",
tools: "Tools",
@ -298,7 +299,7 @@ export const nodeIconsLucide: iconsType = {
chains: Link,
memories: Cpu,
models: Bot,
llms: Lightbulb,
model_specs: Lightbulb,
prompts: TerminalSquare,
tools: Wrench,
advanced: Laptop2,
@ -422,4 +423,5 @@ export const nodeIconsLucide: iconsType = {
FlaskConical,
AlertCircle,
Bot,
Delete,
};

1
src/frontend/tailwind.config.js
View file

@ -80,6 +80,7 @@ module.exports = {
"status-green": "var(--status-green)",
"status-red": "var(--status-red)",
"status-yellow": "var(--status-yellow)",
"status-gray": "var(--status-gray)",
"success-background": "var(--success-background)",
"success-foreground": "var(--success-foreground)",
"beta-background": "var(--beta-background)",