From 1c36202374a6cffc0e53c80fcb90346ab6d25de7 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 26 Feb 2024 11:19:25 -0300 Subject: [PATCH 1/4] Add updateChat function to chatMessagePropsType --- src/frontend/src/types/components/index.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 3a8563cf1..465c81f1f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -524,6 +524,11 @@ export type chatMessagePropsType = { chat: ChatMessageType; lockChat: boolean; lastMessage: boolean; + updateChat: ( + chat: ChatMessageType, + message: string, + stream_url: string | null + ) => void; }; export type formModalPropsType = { From 6bf320ba97d41678b5b29732dd3f3474a8dc87d2 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 26 Feb 2024 12:06:48 -0300 Subject: [PATCH 2/4] Update chatMessagePropsType in index.ts --- src/frontend/src/types/components/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 465c81f1f..0a0da32ad 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -524,7 +524,7 @@ export type chatMessagePropsType = { chat: ChatMessageType; lockChat: boolean; lastMessage: boolean; - updateChat: ( + updateChat?: ( chat: ChatMessageType, message: string, stream_url: string | null From 5c9ad8c9b47a1fc2e498d0b33984c02bdc0608bf Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 26 Feb 2024 12:20:50 -0300 Subject: [PATCH 3/4] migrate node build status to it's own object instead of the node data --- .../src/CustomNodes/GenericNode/index.tsx | 9 +++++---- src/frontend/src/stores/flowStore.ts | 17 ++++++++--------- src/frontend/src/types/zustand/flow/index.ts | 1 + 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index eefddf351..e30a89890 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -44,6 +44,7 @@ export default function GenericNode({ const [nodeDescription, setNodeDescription] = useState( data.node?.description! ); + const buildStatus = useFlowStore((state) =>state.flowBuildStatus[data.id]); const [validationStatus, setValidationStatus] = useState(null); const [handles, setHandles] = useState(0); @@ -274,7 +275,7 @@ export default function GenericNode({ className={getNodeBorderClassName( selected, showNode, - data?.buildStatus, + buildStatus, validationStatus )} > @@ -485,7 +486,7 @@ export default function GenericNode({ variant="outline" className={"h-9 px-1.5"} onClick={() => { - if (data?.buildStatus === BuildStatus.BUILDING || isBuilding) + if (buildStatus === BuildStatus.BUILDING || isBuilding) return; buildFlow(data.id); @@ -494,7 +495,7 @@ export default function GenericNode({
Building... ) : !validationStatus ? ( @@ -520,7 +521,7 @@ export default function GenericNode({ >
{renderIconPlayOrPauseComponents( - data?.buildStatus, + buildStatus, validationStatus )}
diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index f9fa0197b..66f3f8184 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -35,6 +35,7 @@ import useFlowsManagerStore from "./flowsManagerStore"; // this is our useStore hook that we can use in our components to get parts of the store and call actions const useFlowStore = create((set, get) => ({ flowState: undefined, + flowBuildStatus:{}, nodes: [], edges: [], isBuilding: false, @@ -438,21 +439,19 @@ const useFlowStore = create((set, get) => ({ }); }, updateBuildStatus: (nodeIdList: string[], status: BuildStatus) => { + const newFlowBuildStatus = { ...get().flowBuildStatus }; nodeIdList.forEach((id) => { - const nodeToUpdate = get().nodes.find((node) => node.id === id); - if (nodeToUpdate) { - nodeToUpdate.data.buildStatus = status; - set({ nodes: get().nodes }); - } + newFlowBuildStatus[id] = status; }); + set({ flowBuildStatus: newFlowBuildStatus }); }, revertBuiltStatusFromBuilding: () => { - get().nodes.forEach((node) => { - if (node.data.buildStatus === BuildStatus.BUILDING) { - node.data.buildStatus = BuildStatus.TO_BUILD; + const newFlowBuildStatus = { ...get().flowBuildStatus }; + Object.keys(newFlowBuildStatus).forEach((id) => { + if (newFlowBuildStatus[id] === BuildStatus.BUILDING) { + newFlowBuildStatus[id] = BuildStatus.BUILT; } }); - set({ nodes: get().nodes }); }, })); diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index 2b4e8f251..cf6e786e0 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -91,4 +91,5 @@ export type FlowStoreType = { verticesBuild: string[]; updateBuildStatus: (nodeId: string[], status: BuildStatus) => void; revertBuiltStatusFromBuilding: () => void; + flowBuildStatus: { [key: string]: BuildStatus }; }; From 02abd97ac042fa8c5902b7d44df34010caceea41 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Mon, 26 Feb 2024 14:26:16 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A8=20refactor(GenericNode/index.t?= =?UTF-8?q?sx):=20replace=20Tooltip=20component=20with=20ShadTooltip=20com?= =?UTF-8?q?ponent=20for=20consistency=20and=20better=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/CustomNodes/GenericNode/index.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 3ac7d7fb5..c71f401dc 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from "react"; import { NodeToolbar } from "reactflow"; import ShadTooltip from "../../components/ShadTooltipComponent"; -import Tooltip from "../../components/TooltipComponent"; import IconComponent from "../../components/genericIconComponent"; import InputComponent from "../../components/inputComponent"; import { Button } from "../../components/ui/button"; @@ -475,8 +474,9 @@ export default function GenericNode({ }} >
- Building... ) : !validationStatus ? ( @@ -500,6 +500,7 @@ export default function GenericNode({
) } + side="bottom" >
{renderIconPlayOrPauseComponents( @@ -507,13 +508,14 @@ export default function GenericNode({ validationStatus )}
- +
)}
- Building... ) : !validationStatus ? ( @@ -528,6 +530,7 @@ export default function GenericNode({
) } + side="bottom" >
{renderIconStatusComponents( @@ -535,7 +538,7 @@ export default function GenericNode({ validationStatus )}
- +