Fixed refreshing flows on refresh page

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<Array<FlowType>>([]);
   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

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) => {

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() -

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,