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

add build status on node

Browse source
This commit is contained in:
cristhianzl 2024-02-16 17:02:32 -03:00
commit 196b4d85dc
9 changed files with 75 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@ import InputComponent from "../../components/inputComponent";
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea";
import { priorityFields } from "../../constants/constants";
import { BuildStatus } from "../../constants/enums";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import useFlowStore from "../../stores/flowStore";
import useFlowsManagerStore from "../../stores/flowsManagerStore";
@ -71,7 +72,6 @@ export default function GenericNode({
setHandles(count);
}
useEffect(() => {
countHandles();
}, [data, data.node]);
@ -164,8 +164,6 @@ export default function GenericNode({
numberOfHandles={handles}
showNode={showNode}
openAdvancedModal={false}
onCloseAdvancedModal={() => {
}}
></NodeToolbarComponent>
</NodeToolbar>
@ -410,33 +408,44 @@ export default function GenericNode({
}
>
<div className="generic-node-status-position flex items-center justify-center">
<IconComponent
name="Play"
className={classNames(
validationStatus && validationStatus.valid
? "green-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
validationStatus && !validationStatus.valid
? "red-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
!validationStatus || isBuilding
? "yellow-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
{data?.build_status === BuildStatus.TO_BUILD ? (
<>
<IconComponent
name="Square"
className="red-status absolute h-5 stroke-1"
/>
</>
) : (
<>
<IconComponent
name="Play"
className={classNames(
validationStatus && validationStatus.valid
? "green-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
validationStatus && !validationStatus.valid
? "red-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
<IconComponent
name="Play"
className={classNames(
!validationStatus || isBuilding
? "yellow-status"
: "status-build-animation",
"absolute h-5 stroke-1"
)}
/>
</>
)}
</div>
</Tooltip>
</div>

6
src/frontend/src/constants/enums.ts
View file

@ -6,3 +6,9 @@ export enum TypeModal {
TEXT = 1,
PROMPT = 2,
}
export enum BuildStatus {
BUILDING = "BUILDING",
TO_BUILD = "TO_BUILD",
BUILDED = "BUILDED",
}

1
src/frontend/src/modals/formModal/index.tsx
View file

@ -205,7 +205,6 @@ export default function FormModal({
if (Array.isArray(data) && data.length > 0) {
//set chat history
setChatHistory((_) => {
console.log(data);
let newChatHistory: ChatMessageType[] = [];
for (let i = 0; i < data.length; i++) {
if (data[i].type === "prompt" && data[i].prompt) {

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

@ -11,6 +11,7 @@ import {
} from "reactflow";
import { create } from "zustand";
import { INPUT_TYPES, OUTPUT_TYPES } from "../constants/constants";
import { BuildStatus } from "../constants/enums";
import { getFlowPool, updateFlowInDatabase } from "../controllers/API";
import {
NodeDataType,
@ -357,6 +358,7 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
const setErrorData = useAlertStore.getState().setErrorData;
function handleBuildUpdate(data: any) {
get().addDataToFlowPool(data.data[data.id], data.id);
useFlowStore.getState().updateBuildStatus([data.id], BuildStatus.BUILDED);
}
await updateFlowInDatabase({
data: {
@ -382,6 +384,9 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
onBuildError: (title, list) => {
setErrorData({ list, title });
},
onBuildStart: (idList) => {
useFlowStore.getState().updateBuildStatus(idList, BuildStatus.BUILDING);
},
});
},
getFlow: () => {
@ -391,6 +396,15 @@ 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);
}
});
},
}));
export default useFlowStore;

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

@ -1,4 +1,5 @@
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 };
@ -36,6 +37,7 @@ export type APIClassType = {
| CustomFieldsType
| boolean
| undefined;
build_status?: BuildStatus;
};
export type TemplateVariableType = {

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

@ -625,7 +625,7 @@ export type crashComponentPropsType = {
export type validationStatusType = {
id: string;
data: object;
data: object | any;
params: string;
progress: number;
valid: boolean;

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

@ -1,4 +1,5 @@
import { ReactFlowJsonObject, XYPosition } from "reactflow";
import { BuildStatus } from "../../constants/enums";
import { APIClassType } from "../api/index";
export type FlowType = {
@ -26,6 +27,7 @@ export type NodeDataType = {
node?: APIClassType;
id: string;
output_types?: string[];
build_status?: BuildStatus;
};
// FlowStyleType is the type of the style object that is used to style the
// Flow card with an emoji and a color.

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

@ -7,6 +7,7 @@ import {
ReactFlowInstance,
Viewport,
} from "reactflow";
import { BuildStatus } from "../../../constants/enums";
import { FlowState } from "../../tabs";
export type chatInputType = {
@ -84,4 +85,5 @@ export type FlowStoreType = {
unselectAll: () => void;
buildFlow: (nodeId?: string) => Promise<void>;
getFlow: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
updateBuildStatus: (nodeId: string[], status: BuildStatus) => void;
};

10
src/frontend/src/utils/buildUtils.ts
View file

@ -1,5 +1,7 @@
import { AxiosError } from "axios";
import { BuildStatus } from "../constants/enums";
import { getVerticesOrder, postBuildVertex } from "../controllers/API";
import useFlowStore from "../stores/flowStore";
import { VertexBuildTypeAPI } from "../types/api";
type BuildVerticesParams = {
@ -9,6 +11,7 @@ type BuildVerticesParams = {
onBuildUpdate?: (data: any) => void; // Replace any with the actual type of data
onBuildComplete?: (allNodesValid: boolean) => void;
onBuildError?: (title, list) => void;
onBuildStart?: (idList: string[]) => void;
};
export async function buildVertices({
@ -18,10 +21,12 @@ export async function buildVertices({
onBuildUpdate,
onBuildComplete,
onBuildError,
onBuildStart,
}: BuildVerticesParams) {
let orderResponse = await getVerticesOrder(flowId);
let verticesOrder: Array<Array<string>> = orderResponse.data.ids;
let vertices: Array<Array<string>> = [];
if (nodeId) {
for (let i = 0; i < verticesOrder.length; i += 1) {
const innerArray = verticesOrder[i];
@ -40,10 +45,13 @@ export async function buildVertices({
vertices = verticesOrder;
}
// Set each vertex state to building
const verticesIds = vertices.flatMap((v) => v);
useFlowStore.getState().updateBuildStatus(verticesIds, BuildStatus.TO_BUILD);
// Set each vertex state to building
const buildResults: Array<boolean> = [];
for (let i = 0; i < vertices.length; i += 1) {
if (onBuildStart) onBuildStart(vertices[i]);
await Promise.all(
vertices[i].map(async (id) => {
try {