tab refresh working, but not ideally

space_flow/src/CustomNodes/GenericNode/index.tsx

@@ -12,8 +12,10 @@ import { useContext } from "react";
 
 export default function GenericNode({ data }) {
   const {types} = useContext(typesContext);
+  console.log(types, data.type)
   const Icon = nodeIcons[types[data.type]];
 
+
   return (
     <div className="prompt-node relative bg-white w-96 rounded-lg solid border flex flex-col justify-center">
       <div className="w-full flex items-center justify-between p-4 gap-8 bg-gray-50 border-b ">

space_flow/src/contexts/index.tsx

@@ -1,4 +1,3 @@
-import { CookiesProvider } from "react-cookie";
 import { AlertProvider } from "./alertContext";
 import { LocationProvider } from "./locationContext";
 import PopUpProvider from "./popUpContext";
@@ -8,17 +7,15 @@ import { TypesProvider } from "./typesContext";
 export default function ContextWrapper({ children }) {
   return (
     <>
-      <CookiesProvider>
+      <LocationProvider>
-        <LocationProvider>
+        <PopUpProvider>
-          <PopUpProvider>
+          <TypesProvider>
-            <TypesProvider>
+            <TabsProvider>
-              <TabsProvider>
+              <AlertProvider>{children}</AlertProvider>
-                <AlertProvider>{children}</AlertProvider>
+            </TabsProvider>
-              </TabsProvider>
+          </TypesProvider>
-            </TypesProvider>
+        </PopUpProvider>
-          </PopUpProvider>
+      </LocationProvider>
-        </LocationProvider>
-      </CookiesProvider>
     </>
   );
 }

space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -12,34 +12,37 @@ import { typesContext } from "../../../../contexts/typesContext";
 
 export default function ExtraSidebar() {
   const [data, setData] = useState({});
-  const { setTypes } = useContext(typesContext);
+  const { setTypes, types } = useContext(typesContext);
+
+  async function getTypes(){
+    let d = await getAll();
+    setData(d.data);
+    setTypes(
+      Object.keys(d.data).reduce(
+        (acc, curr) => {
+          Object.keys(d.data[curr]).forEach((c) => {
+            acc[c] = curr;
+            d.data[curr][c].base_classes?.forEach((b) => {
+              acc[b] = curr;
+            });
+          });
+          return acc;
+        },
+        {
+          str: "advanced",
+          bool: "advanced",
+          chatOutput: "chat",
+          chatInput: "chat",
+        }
+      )
+    );
+  }
 
   useEffect(() => {
-    getAll().then((d) => {
+    getTypes();
-      setData(d.data);
-      setTypes(
-        Object.keys(d.data).reduce(
-          (acc, curr) => {
-            Object.keys(d.data[curr]).forEach((c) => {
-              acc[c] = curr;
-              d.data[curr][c].base_classes?.forEach((b) => {
-                acc[b] = curr;
-              });
-            });
-            // console.log(acc);
-            return acc;
-          },
-          {
-            str: "advanced",
-            bool: "advanced",
-            chatOutput: "chat",
-            chatInput: "chat",
-          }
-        )
-      );
-    });
   }, []);
 
+
   useEffect(() => {
     if(data){
       setTypes(
@@ -51,7 +54,6 @@ export default function ExtraSidebar() {
                 acc[b] = curr;
               });
             });
-            // console.log(acc);
             return acc;
           },
           {

space_flow/src/pages/FlowPage/index.tsx

@@ -31,10 +31,9 @@ const nodeTypes = {
 
 var _ = require("lodash");
 
-export default function FlowPage({flow}) {
+export default function FlowPage({ flow }) {
-
+  const { updateFlow } = useContext(TabsContext);
-  const {updateFlow} =  useContext(TabsContext)
+  const { types, reactFlowInstance, setReactFlowInstance } = useContext(typesContext);
-  const {reactFlowInstance, setReactFlowInstance} = useContext(typesContext);
   const reactFlowWrapper = useRef(null);
 
   const getId = () => `dndnode_${_.uniqueId()}`;
@@ -42,24 +41,29 @@ export default function FlowPage({flow}) {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState(flow.data?.nodes ?? []);
+  const [nodes, setNodes, onNodesChange] = useNodesState(
-  const [edges, setEdges, onEdgesChange] = useEdgesState(flow.data?.edges ?? []);
+    flow.data?.nodes ?? []
+  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState(
+    flow.data?.edges ?? []
+  );
 
-  useEffect(()=>{
+  useEffect(() => {
-    if(reactFlowInstance && flow){
+    if (reactFlowInstance && flow) {
       flow.data = reactFlowInstance.toObject();
       updateFlow(flow);
     }
-  },[nodes,edges])
+  }, [nodes, edges]);
 
-  useEffect(()=>{
+  useEffect(() => {
-    console.log(flow);
+    setNodes(flow?.data?.nodes ?? []);
-    setNodes(flow?.data?.nodes ?? [])
+    setEdges(flow?.data?.edges ?? []);
-    setEdges(flow?.data?.edges ?? [])
+    if (reactFlowInstance) {
-    if(reactFlowInstance){
+      reactFlowInstance.setViewport(
-      reactFlowInstance.setViewport(flow?.data?.viewport ?? {x: 1, y: 0, zoom: 1});
+        flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 }
+      );
     }
-  },[flow, reactFlowInstance, setEdges, setNodes])
+  }, [flow, reactFlowInstance, setEdges, setNodes]);
 
   useEffect(() => {
     setExtraComponent(<ExtraSidebar />);
@@ -115,15 +119,15 @@ export default function FlowPage({flow}) {
         const newNode = {
           id: newId,
           type:
-            (data.type === "str"
+            data.type === "str"
               ? "inputNode"
-              : (data.type === "chatInput"
+              : data.type === "chatInput"
               ? "chatInputNode"
-              : (data.type === "chatOutput"
+              : data.type === "chatOutput"
               ? "chatOutputNode"
-              : (data.type === "bool"
+              : data.type === "bool"
               ? "booleanNode"
-              : "genericNode")))),
+              : "genericNode",
           position,
           data: {
             ...data,
@@ -149,24 +153,32 @@ export default function FlowPage({flow}) {
 
   return (
     <div className="w-full h-full" ref={reactFlowWrapper}>
-      <ReactFlow
+      {Object.keys(types).length > 4 ? (
-        nodes={nodes}
+        <>
-        onMove={()=>updateFlow({...flow,data:reactFlowInstance.toObject()})}
+          <ReactFlow
-        edges={edges}
+            nodes={nodes}
-        onNodesChange={onNodesChange}
+            onMove={() =>
-        onEdgesChange={onEdgesChangeMod}
+              updateFlow({ ...flow, data: reactFlowInstance.toObject() })
-        onConnect={onConnect}
+            }
-        onLoad={setReactFlowInstance}
+            edges={edges}
-        onInit={setReactFlowInstance}
+            onNodesChange={onNodesChange}
-        nodeTypes={nodeTypes}
+            onEdgesChange={onEdgesChangeMod}
-        connectionLineComponent={connection}
+            onConnect={onConnect}
-        onDragOver={onDragOver}
+            onLoad={setReactFlowInstance}
-        onDrop={onDrop}
+            onInit={setReactFlowInstance}
-      >
+            nodeTypes={nodeTypes}
-        <Background />
+            connectionLineComponent={connection}
-        <Controls ></Controls>
+            onDragOver={onDragOver}
-      </ReactFlow>
+            onDrop={onDrop}
-      <Chat reactFlowInstance={reactFlowInstance} />
+          >
+            <Background />
+            <Controls></Controls>
+          </ReactFlow>
+          <Chat reactFlowInstance={reactFlowInstance} />
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }