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,7 +7,6 @@ import { TypesProvider } from "./typesContext";
 export default function ContextWrapper({ children }) {
   return (
     <>
-      <CookiesProvider>
       <LocationProvider>
         <PopUpProvider>
           <TypesProvider>
@@ -18,7 +16,6 @@ export default function ContextWrapper({ children }) {
           </TypesProvider>
         </PopUpProvider>
       </LocationProvider>
-      </CookiesProvider>
     </>
   );
 }

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

@@ -12,10 +12,10 @@ import { typesContext } from "../../../../contexts/typesContext";
 
 export default function ExtraSidebar() {
   const [data, setData] = useState({});
-  const { setTypes } = useContext(typesContext);
+  const { setTypes, types } = useContext(typesContext);
 
-  useEffect(() => {
+  async function getTypes(){
-    getAll().then((d) => {
+    let d = await getAll();
     setData(d.data);
     setTypes(
       Object.keys(d.data).reduce(
@@ -26,7 +26,6 @@ export default function ExtraSidebar() {
               acc[b] = curr;
             });
           });
-            // console.log(acc);
           return acc;
         },
         {
@@ -37,9 +36,13 @@ export default function ExtraSidebar() {
         }
       )
     );
-    });
+  }
+
+  useEffect(() => {
+    getTypes();
   }, []);
 
+
   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,9 +153,13 @@ export default function FlowPage({flow}) {
 
   return (
     <div className="w-full h-full" ref={reactFlowWrapper}>
+      {Object.keys(types).length > 4 ? (
+        <>
           <ReactFlow
             nodes={nodes}
-        onMove={()=>updateFlow({...flow,data:reactFlowInstance.toObject()})}
+            onMove={() =>
+              updateFlow({ ...flow, data: reactFlowInstance.toObject() })
+            }
             edges={edges}
             onNodesChange={onNodesChange}
             onEdgesChange={onEdgesChangeMod}
@@ -164,9 +172,13 @@ export default function FlowPage({flow}) {
             onDrop={onDrop}
           >
             <Background />
-        <Controls ></Controls>
+            <Controls></Controls>
           </ReactFlow>
           <Chat reactFlowInstance={reactFlowInstance} />
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }