working but with bouncing effect because of the refresh

space_flow/src/contexts/tabsContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
 
-type flow={name:string,id:string,flow:any}
+type flow={name:string,id:string,data:any}
 
 type TabsContextType={
     tabIndex:number;
@@ -8,6 +8,7 @@ type TabsContextType={
     flows:Array<flow>
     removeFlow:(index:number)=>void;
     addFlow:(newFlow:flow)=>void;
+    updateFlow:(newFLow:flow)=>void;
 }
 
 const TabsContextInitialValue = {
@@ -15,7 +16,9 @@ const TabsContextInitialValue = {
     setTabIndex:(index:number)=>{},
     flows:[],
     removeFlow:(index:number)=>{},
-    addFlow:(newFlow:flow)=>{}
+    addFlow:(newFlow:flow)=>{},
+    updateFlow:(newFLow:flow)=>{}
+    
 
 }
 
@@ -37,9 +40,20 @@ export function TabsProvider({children}){
           return newFlows;
         });
       }
+    function updateFlow(newFlow:flow){
+        setFlows(prevState=>{
+            const newFlows = [...prevState];
+            const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
+            if(index!==-1){
+                newFlows[index].data = newFlow.data
+            }
+            window.sessionStorage.setItem('tabs', JSON.stringify(newFlows));
+            return newFlows;
+        });
+    }
 
     return(
-        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,removeFlow,addFlow}}>
+        <TabsContext.Provider value={{tabIndex,setTabIndex,flows,removeFlow,addFlow,updateFlow}}>
             {children}
         </TabsContext.Provider>
     )

space_flow/src/pages/FlowPage/flowManager/index.tsx

@@ -1,38 +1,44 @@
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from "react";
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
-import FlowPage from '..';
+import { ReactFlowProvider } from "reactflow";
-import { TabsContext } from '../../../contexts/tabsContext';
+import FlowPage from "..";
-import TabComponent from './tabComponent';
+import { TabsContext } from "../../../contexts/tabsContext";
+import TabComponent from "./tabComponent";
 var _ = require("lodash");
 
-export function TabsManager(){
+export function TabsManager() {
-  const {flows,addFlow,tabIndex,setTabIndex} = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
-  useEffect(()=>{
+	useEffect(() => {
-    if(flows.length===0){
+		if (flows.length === 0) {
-      addFlow({name:"untitled",flow:null,id:_.uniqueId()})
+			addFlow({ name: "untitled", data: null, id: _.uniqueId() });
-      addFlow({name:"untitle",flow:null,id:_.uniqueId()})
+			addFlow({ name: "untitle", data: null, id: _.uniqueId() });
-    }
+		}
-  },[])
+	}, []);
-  
+
-  return(
+	useEffect(() => {
-    <div className="h-full w-full flex flex-col">
+		// Do something when the tabIndex or flow state changes
-      <div className="w-full flex pr-2 flex-row text-center items-center">
+		// For example, log a message to the console
-        {flows.map((flow,index)=>{
+		console.log("Tab index or flow state changed");
-          return(<TabComponent selected={index===tabIndex} key={index}><div onClick={()=>setTabIndex(index)}>{flow.name}</div></TabComponent>)
+	}, [tabIndex, flows]);
-        })}
+
-      </div>
+	return (
-      <div className='w-full h-full'>
+		<div className="h-full w-full flex flex-col">
-        {flows.map((flow,index)=>{
+			<div className="w-full flex pr-2 flex-row text-center items-center">
-          return(
+				{flows.map((flow, index) => {
-            <div key={index} className={'w-full h-full'} style={{display:index!==tabIndex?"none":""}}>
+					return (
-              
+						<TabComponent selected={index === tabIndex} key={index}>
-                <FlowPage></FlowPage>
+							<div onClick={() => setTabIndex(index)}>{flow.name}</div>
-            </div>
+						</TabComponent>
-          )
+					);
-        })}
+				})}
-      </div>
+			</div>
-    </div>
+			<div className="w-full h-full">
-  )
+				<ReactFlowProvider>
+					<FlowPage key={flows[tabIndex]?.id} flow={flows[tabIndex]}></FlowPage>
+				</ReactFlowProvider>
+			</div>
+		</div>
+	);
 }
 
 /*

space_flow/src/pages/FlowPage/index.tsx

@@ -6,6 +6,7 @@ import ReactFlow, {
   useEdgesState,
   useNodesState,
   ReactFlowProvider,
+  useReactFlow,
 } from "reactflow";
 import { locationContext } from "../../contexts/locationContext";
 import ExtraSidebar from "./components/extraSidebarComponent";
@@ -17,6 +18,7 @@ import ChatOutputNode from "../../CustomNodes/ChatOutputNode";
 import InputNode from "../../CustomNodes/InputNode";
 import BooleanNode from "../../CustomNodes/BooleanNode";
 import { alertContext } from "../../contexts/alertContext";
+import { TabsContext } from "../../contexts/tabsContext";
 
 const nodeTypes = {
   genericNode: GenericNode,
@@ -28,7 +30,10 @@ const nodeTypes = {
 
 var _ = require("lodash");
 
-export default function FlowPage() {
+export default function FlowPage({flow}) {
+  console.log(flow?.data)
+
+  const {updateFlow} =  useContext(TabsContext)
   const reactFlowWrapper = useRef(null);
 
   const getId = () => `dndnode_${_.uniqueId()}`;
@@ -36,9 +41,20 @@ export default function FlowPage() {
   const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
   const { setErrorData } = useContext(alertContext);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(flow?.data?.nodes || []);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(flow?.data?.edges || []);
   const [reactFlowInstance, setReactFlowInstance] = useState(null);
+  const { setViewport } = useReactFlow();
+
+  if(flow?.data && reactFlowInstance){
+    setViewport(flow.data.viewport)
+  }
+  useEffect(()=>{
+    if(reactFlowInstance){
+      flow.data =reactFlowInstance.toObject() 
+      updateFlow(flow)
+    }
+  },[nodes,edges])
 
   useEffect(() => {
     setExtraComponent(<ExtraSidebar />);
@@ -129,7 +145,6 @@ export default function FlowPage() {
 
   return (
     <div className="w-full h-full" ref={reactFlowWrapper}>
-      <ReactFlowProvider>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -147,7 +162,6 @@ export default function FlowPage() {
         <Controls ></Controls>
       </ReactFlow>
       <Chat reactFlowInstance={reactFlowInstance} />
-      </ReactFlowProvider>
     </div>
   );
 }