From 0d785c923a5138989d48d93c6065c3f728beaa28 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 22 Nov 2023 16:47:38 -0300 Subject: [PATCH] Fixed refreshing flows on refresh page --- src/frontend/src/contexts/flowsContext.tsx | 89 ++++--------------- src/frontend/src/contexts/typesContext.tsx | 2 +- .../MainPage/components/components/index.tsx | 4 +- src/frontend/src/utils/styleUtils.ts | 3 + 4 files changed, 21 insertions(+), 77 deletions(-) diff --git a/src/frontend/src/contexts/flowsContext.tsx b/src/frontend/src/contexts/flowsContext.tsx index e410d1365..0c6298b2e 100644 --- a/src/frontend/src/contexts/flowsContext.tsx +++ b/src/frontend/src/contexts/flowsContext.tsx @@ -10,7 +10,6 @@ import { } from "react"; import { Edge, Node, ReactFlowJsonObject, addEdge } from "reactflow"; import ShortUniqueId from "short-unique-id"; -import { skipNodeUpdate } from "../constants/constants"; import { deleteFlowFromDatabase, downloadFlowsFromDatabase, @@ -101,8 +100,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) { const [flows, setFlows] = useState>([]); const [id, setId] = useState(uid()); - const { templates, reactFlowInstance, setData, data } = - useContext(typesContext); + const { reactFlowInstance, setData, data } = useContext(typesContext); const [lastCopiedSelection, setLastCopiedSelection] = useState<{ nodes: any; edges: any; @@ -123,27 +121,25 @@ export function FlowsProvider({ children }: { children: ReactNode }) { } function refreshFlows() { - if (Object.keys(templates).length > 0) { - setIsLoading(true); - getTabsDataFromDB().then((DbData) => { - if (DbData) { - try { - processFlows(DbData, false); - updateStateWithDbData(DbData); - setIsLoading(false); - } catch (e) {} - } - }); - } + setIsLoading(true); + getTabsDataFromDB().then((DbData) => { + if (DbData) { + try { + processFlows(DbData, false); + updateStateWithDbData(DbData); + setIsLoading(false); + } catch (e) {} + } + }); } useEffect(() => { // If the user is authenticated, fetch the types. This code is important to check if the user is auth because of the execution order of the useEffect hooks. - if (getAuthentication() === true && Object.keys(templates).length > 0) { + if (getAuthentication() === true) { // get data from db refreshFlows(); } - }, [getAuthentication(), templates, tabId]); + }, [getAuthentication(), tabId]); function getTabsDataFromDB() { //get tabs from db @@ -174,12 +170,8 @@ export function FlowsProvider({ children }: { children: ReactNode }) { } }); setData((prev) => { - let newData = _.cloneDeep(prev); - - const customComponent = newData["custom_components"]["CustomComponent"]; - newData["custom_components"] = cloneDeep(storeComponents); - newData["custom_components"]["CustomComponent"] = customComponent; - return newData; + prev["saved_components"] = cloneDeep(storeComponents); + return prev; }); } @@ -204,27 +196,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) { node.data.node!.documentation = template["documentation"]; } - function processFlowNodes(flow: FlowType) { - if (!flow.data || !flow.data.nodes) return; - flow.data.nodes.forEach((node: NodeType) => { - if (node.data.node?.flow) return; - if (skipNodeUpdate.includes(node.data.type)) return; - const template = templates[node.data.type]; - if (!template) { - return; - } - if (Object.keys(template["template"]).length > 0) { - updateDisplay_name(node, template); - updateNodeBaseClasses(node, template); - //update baseclasses in edges - updateNodeEdges(flow, node, template); - updateNodeDescription(node, template); - updateNodeTemplate(node, template); - updateNodeDocumentation(node, template); - } - }); - } - function updateNodeBaseClasses(node: NodeType, template: APIClassType) { node.data.node!.base_classes = template["base_classes"]; } @@ -592,36 +563,6 @@ export function FlowsProvider({ children }: { children: ReactNode }) { }); }; - const updateNodes = (nodes: Node[], edges: Edge[]) => { - nodes.forEach((node) => { - if (node.data.node?.flow) return; - if (skipNodeUpdate.includes(node.data.type)) return; - const template = templates[node.data.type]; - if (!template) { - setErrorData({ title: `Unknown node type: ${node.data.type}` }); - return; - } - if (Object.keys(template["template"]).length > 0) { - node.data.node.base_classes = template["base_classes"]; - edges.forEach((edge) => { - let sourceHandleObject: sourceHandleType = scapeJSONParse( - edge.sourceHandle! - ); - if (edge.source === node.id) { - let newSourceHandle = sourceHandleObject; - newSourceHandle.baseClasses.concat(template["base_classes"]); - edge.sourceHandle = scapedJSONStringfy(newSourceHandle); - } - }); - node.data.node.description = template["description"]; - node.data.node.template = updateTemplate( - template["template"] as unknown as APITemplateType, - node.data.node.template as APITemplateType - ); - } - }); - }; - const createNewFlow = ( flowData: ReactFlowJsonObject | null, flow: FlowType diff --git a/src/frontend/src/contexts/typesContext.tsx b/src/frontend/src/contexts/typesContext.tsx index 7c34c6e57..d08af1857 100644 --- a/src/frontend/src/contexts/typesContext.tsx +++ b/src/frontend/src/contexts/typesContext.tsx @@ -61,7 +61,7 @@ export function TypesProvider({ children }: { children: ReactNode }) { if (isMounted && result?.status === 200) { setLoading(false); let { data } = _.cloneDeep(result); - setData(data); + setData((old) => ({ ...old, ...data })); setTemplates( Object.keys(data).reduce((acc, curr) => { Object.keys(data[curr]).forEach((c: keyof APIKindType) => { diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx index 27006bf5f..280668700 100644 --- a/src/frontend/src/pages/MainPage/components/components/index.tsx +++ b/src/frontend/src/pages/MainPage/components/components/index.tsx @@ -34,9 +34,9 @@ export default function ComponentsComponent({ new Date(a?.updated_at!).getTime() ); } else if (a?.updated_at && !b?.updated_at) { - return -1; - } else if (!a?.updated_at && b?.updated_at) { return 1; + } else if (!a?.updated_at && b?.updated_at) { + return -1; } else { return ( new Date(b?.date_created!).getTime() - diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts index 0880986b0..da37cc46c 100644 --- a/src/frontend/src/utils/styleUtils.ts +++ b/src/frontend/src/utils/styleUtils.ts @@ -170,6 +170,7 @@ export const nodeColors: { [char: string]: string } = { agents: "#903BBE", tools: "#FF3434", memories: "#F5B85A", + saved_components: "#a5B85A", advanced: "#000000", chat: "#198BF6", thought: "#272541", @@ -194,6 +195,7 @@ export const nodeNames: { [char: string]: string } = { agents: "Agents", tools: "Tools", memories: "Memories", + saved_components: "Saved Components", advanced: "Advanced", chat: "Chat", embeddings: "Embeddings", @@ -257,6 +259,7 @@ export const nodeIconsLucide: iconsType = { advanced: Laptop2, chat: MessageCircle, embeddings: Fingerprint, + saved_components: Save, documentloaders: Paperclip, vectorstores: Layers, toolkits: Hammer,