From 3f8a920fc4239c1e20d202f0e8ae19a5744268ac Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Sun, 19 Feb 2023 23:56:19 -0300 Subject: [PATCH 01/25] boiller code for tabs on reactFlow, need to think and structure first the logic --- space_flow/package-lock.json | 13 +++++ space_flow/package.json | 1 + .../src/pages/FlowPage/flowManager/index.tsx | 49 +++++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 space_flow/src/pages/FlowPage/flowManager/index.tsx diff --git a/space_flow/package-lock.json b/space_flow/package-lock.json index 737d5c7de..7d4ffaedd 100644 --- a/space_flow/package-lock.json +++ b/space_flow/package-lock.json @@ -28,6 +28,7 @@ "react-laag": "^2.0.5", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", + "react-tabs": "^6.0.0", "reactflow": "^11.5.5", "tailwindcss": "^3.2.6", "typescript": "^4.9.5", @@ -15070,6 +15071,18 @@ } } }, + "node_modules/react-tabs": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz", + "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==", + "dependencies": { + "clsx": "^1.1.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", diff --git a/space_flow/package.json b/space_flow/package.json index 2009ca52d..28891fac9 100644 --- a/space_flow/package.json +++ b/space_flow/package.json @@ -23,6 +23,7 @@ "react-laag": "^2.0.5", "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", + "react-tabs": "^6.0.0", "reactflow": "^11.5.5", "tailwindcss": "^3.2.6", "typescript": "^4.9.5", diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx new file mode 100644 index 000000000..7d615833a --- /dev/null +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -0,0 +1,49 @@ +import { useState } from 'react'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; +import FlowPage from '..'; +import 'react-tabs/style/react-tabs.css'; + +interface FlowTabProps { + flow:any; +} + +function FlowTab() { + return ( + + ); +} + +function App() { + const [flows, setFlows] = useState([]); // Start with one flow + const [activeIndex, setActiveIndex] = useState(0); + + function onElementsChange(flowIndex: number, elements: any[]) { + setFlows((prevFlows) => { + const newFlows = [...prevFlows]; + newFlows[flowIndex] = elements; + return newFlows; + }); + } + + function addTab() { + setFlows([...flows, []]); // Add a new flow to the state + setActiveIndex(flows.length); // Activate the new tab + } + + return ( + + + {flows.map((flow, index) => ( + Flow {index + 1} + ))} + {/* Render the plus button */} + + + {flows.map((flow, index) => ( + + + + ))} + + ); +} From bf678e5f8670fa00f85297628708535c88754a6e Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 20 Feb 2023 16:48:15 -0300 Subject: [PATCH 02/25] tabs context created --- space_flow/src/contexts/tabsContext.tsx | 41 +++++++++++++++++++ .../src/pages/FlowPage/flowManager/index.tsx | 9 ++++ 2 files changed, 50 insertions(+) create mode 100644 space_flow/src/contexts/tabsContext.tsx diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx new file mode 100644 index 000000000..35ab53190 --- /dev/null +++ b/space_flow/src/contexts/tabsContext.tsx @@ -0,0 +1,41 @@ +import { createContext, useState } from "react"; + +type flow={name:string,id:string,flow:any} + +type TabsContextType={ + tabIndex:number; + setTabIndex:(index:number)=>void; + flows:Array + removeFlow:(index:number)=>void; + addFlow:(newFlow:flow)=>void; +} + +const TabsContextInitialValue = { + tabIndex : 0, + setTabIndex:(index:number)=>{}, + flows:[], + removeFlow:(index:number)=>{}, + addFlow:(newFlow:flow)=>{} + +} + +export const TabsContext = createContext(TabsContextInitialValue) + +export function TabsProvider({children}){ + const [tabIndex,setTabIndex] = useState(0) + const [flows,setFlows] = useState>([]) + function removeFlow(index:number){ + let newFlows = flows + newFlows.splice(index) + setFlows(newFlows) + } + function addFlow(newFlow:flow){ + setFlows([...flows,newFlow]) + } + + return( + + {children} + + ) +} \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 7d615833a..6979f8963 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -47,3 +47,12 @@ function App() { ); } +/* +tabs initial logic +TO DO +- create a context with the tabs control so tabs can be changed inside the flow +- create a logic to save tabs and flow state for multitabs and each flow inside each tab +- think about the save logic and how to implement it the best way +- define what each tab will need to show and how it will be displayed + +*/ From 90974d9ef486b433d89250b4dff54966a88ef057 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 20 Feb 2023 18:13:22 -0300 Subject: [PATCH 03/25] nested reactFlow inside tab --- space_flow/src/App.tsx | 6 +- space_flow/src/contexts/tabsContext.tsx | 8 ++- .../src/pages/FlowPage/flowManager/index.tsx | 55 +++++-------------- .../flowManager/tabComponent/index.tsx | 12 ++++ space_flow/src/pages/FlowPage/index.tsx | 2 +- 5 files changed, 39 insertions(+), 44 deletions(-) create mode 100644 space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 9b1a39a0d..bd55a4fb9 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -12,6 +12,8 @@ import { locationContext } from "./contexts/locationContext"; import FlowPage from "./pages/FlowPage"; import Sidebar from "./components/SidebarComponent"; import Header from "./components/HeaderComponent"; +import { TabsProvider } from "./contexts/tabsContext"; +import { TabsManager } from "./pages/FlowPage/flowManager"; export default function App() { var _ = require("lodash"); @@ -108,7 +110,9 @@ export default function App() {
{/* Primary column */}
- + + +
diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 35ab53190..6cf88b8aa 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -23,14 +23,18 @@ export const TabsContext = createContext(TabsContextInitialValu export function TabsProvider({children}){ const [tabIndex,setTabIndex] = useState(0) - const [flows,setFlows] = useState>([]) + const [flows,setFlows] = useState>(JSON.parse(window.sessionStorage.getItem('tabs'))??[]) function removeFlow(index:number){ let newFlows = flows newFlows.splice(index) + window.sessionStorage.setItem('tabs',JSON.stringify(newFlows)) setFlows(newFlows) } function addFlow(newFlow:flow){ - setFlows([...flows,newFlow]) + let newFlows = [...flows,newFlow] + window.sessionStorage.setItem('tabs',JSON.stringify(newFlows)) + setFlows(newFlows) + } return( diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 6979f8963..1d360d545 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -1,52 +1,27 @@ -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import FlowPage from '..'; -import 'react-tabs/style/react-tabs.css'; +import { TabsContext } from '../../../contexts/tabsContext'; +import TabComponent from './tabComponent'; +var _ = require("lodash"); -interface FlowTabProps { - flow:any; -} - -function FlowTab() { - return ( - - ); -} - -function App() { - const [flows, setFlows] = useState([]); // Start with one flow - const [activeIndex, setActiveIndex] = useState(0); - - function onElementsChange(flowIndex: number, elements: any[]) { - setFlows((prevFlows) => { - const newFlows = [...prevFlows]; - newFlows[flowIndex] = elements; - return newFlows; - }); +export function TabsManager(){ + const {flows,addFlow} = useContext(TabsContext); + if(flows.length===0){ + addFlow({name:"untitled",flow:null,id:_.uniqueId()}) } - function addTab() { - setFlows([...flows, []]); // Add a new flow to the state - setActiveIndex(flows.length); // Activate the new tab - } - - return ( - + return( + - {flows.map((flow, index) => ( - Flow {index + 1} - ))} - {/* Render the plus button */} + {flows.map(flow=>{flow.name})} + - - {flows.map((flow, index) => ( - - - - ))} + {flows.map(flow=>)} - ); + ) } + /* tabs initial logic TO DO diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx new file mode 100644 index 000000000..4da771019 --- /dev/null +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -0,0 +1,12 @@ +type tabProps = { + name:string; +} + + +export default function TabComponent({children}){ + return( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 10009d942..4e4923a98 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -141,7 +141,7 @@ export default function FlowPage() { onDrop={onDrop} > - + From d05483d7356e890cffa4f94fae9162b463c5b8d1 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 20 Feb 2023 20:50:52 -0300 Subject: [PATCH 04/25] fixed tabsContext --- space_flow/src/contexts/tabsContext.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 6cf88b8aa..d09be6de5 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -23,19 +23,20 @@ export const TabsContext = createContext(TabsContextInitialValu export function TabsProvider({children}){ const [tabIndex,setTabIndex] = useState(0) - const [flows,setFlows] = useState>(JSON.parse(window.sessionStorage.getItem('tabs'))??[]) + const [flows,setFlows] = useState>([]) function removeFlow(index:number){ let newFlows = flows - newFlows.splice(index) + newFlows.splice(index,1) window.sessionStorage.setItem('tabs',JSON.stringify(newFlows)) setFlows(newFlows) } - function addFlow(newFlow:flow){ - let newFlows = [...flows,newFlow] - window.sessionStorage.setItem('tabs',JSON.stringify(newFlows)) - setFlows(newFlows) - - } + function addFlow(newFlow: flow) { + setFlows(prevState => { + const newFlows = [...prevState, newFlow]; + window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); + return newFlows; + }); + } return( From 9d67c17086f4c25b926fd6e40fb8b365a1994cda Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 20 Feb 2023 23:58:47 -0300 Subject: [PATCH 05/25] changed FLow provider file place --- space_flow/src/App.tsx | 3 +-- space_flow/src/pages/FlowPage/index.tsx | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index bd55a4fb9..634e63318 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -98,7 +98,7 @@ export default function App() { return ( //need parent component with width and height
- +
@@ -146,7 +146,6 @@ export default function App() {
))} - ); } diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 4e4923a98..deea5efb7 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -5,6 +5,7 @@ import ReactFlow, { addEdge, useEdgesState, useNodesState, + ReactFlowProvider, } from "reactflow"; import { locationContext } from "../../contexts/locationContext"; import ExtraSidebar from "./components/extraSidebarComponent"; @@ -128,6 +129,7 @@ export default function FlowPage() { return (
+ +
); } From daa668a6088920d48922b2bc7836d09a15d47666 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 21 Feb 2023 00:08:47 -0300 Subject: [PATCH 06/25] autoImplementing tabs --- .../src/pages/FlowPage/flowManager/index.tsx | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 1d360d545..15383c667 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -1,4 +1,4 @@ -import { useContext, useState } from 'react'; +import { useContext, useEffect, useState } from 'react'; import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import FlowPage from '..'; import { TabsContext } from '../../../contexts/tabsContext'; @@ -6,19 +6,22 @@ import TabComponent from './tabComponent'; var _ = require("lodash"); export function TabsManager(){ - const {flows,addFlow} = useContext(TabsContext); - if(flows.length===0){ - addFlow({name:"untitled",flow:null,id:_.uniqueId()}) - } - + const {flows,addFlow,tabIndex,setTabIndex} = useContext(TabsContext); + useEffect(()=>{ + if(flows.length===0){ + addFlow({name:"untitled",flow:null,id:_.uniqueId()}) + addFlow({name:"untitle",flow:null,id:_.uniqueId()}) + } + },[]) + return( - - - {flows.map(flow=>{flow.name})} - - - {flows.map(flow=>)} - +
+
+ {flows.map((flow,index)=>{ + return({flow.name}) + })} +
+
) } From b807bd76ce926ae026608f44148b61cc6e5a1280 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 21 Feb 2023 01:35:27 -0300 Subject: [PATCH 07/25] bug on reactflow render, now tabs kind of work, but is not perfect yet, does not have the save function yet --- .../src/pages/FlowPage/flowManager/index.tsx | 14 ++++++++++++-- .../FlowPage/flowManager/tabComponent/index.tsx | 8 ++++++-- space_flow/src/pages/FlowPage/index.tsx | 1 + 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 15383c667..48393ffa4 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -16,9 +16,19 @@ export function TabsManager(){ return(
-
+
{flows.map((flow,index)=>{ - return({flow.name}) + return(
setTabIndex(index)}>{flow.name}
) + })} +
+
+ {flows.map((flow,index)=>{ + return( +
+ + +
+ ) })}
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 4da771019..57aa71e01 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -1,12 +1,16 @@ +import { XMarkIcon } from "@heroicons/react/24/solid"; +import { classNames } from "../../../../utils"; + type tabProps = { name:string; } -export default function TabComponent({children}){ +export default function TabComponent({children,selected}){ return( -
+
{children} +
) } \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index deea5efb7..6024bcde9 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -136,6 +136,7 @@ export default function FlowPage() { onNodesChange={onNodesChange} onEdgesChange={onEdgesChangeMod} onConnect={onConnect} + onLoad={setReactFlowInstance} onInit={setReactFlowInstance} nodeTypes={nodeTypes} connectionLineComponent={connection} From 5eadf4c5d5cf093c17559da640ff67e6c6d929b0 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 22 Feb 2023 16:52:01 -0300 Subject: [PATCH 08/25] working but with bouncing effect because of the refresh --- space_flow/src/contexts/tabsContext.tsx | 20 +++++- .../src/pages/FlowPage/flowManager/index.tsx | 72 ++++++++++--------- space_flow/src/pages/FlowPage/index.tsx | 24 +++++-- 3 files changed, 75 insertions(+), 41 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index d09be6de5..fb8de09f7 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/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 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( - + {children} ) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 48393ffa4..22ff57a3e 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -1,38 +1,44 @@ -import { useContext, useEffect, useState } from 'react'; -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; -import FlowPage from '..'; -import { TabsContext } from '../../../contexts/tabsContext'; -import TabComponent from './tabComponent'; +import { useContext, useEffect, useState } from "react"; +import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; +import { ReactFlowProvider } from "reactflow"; +import FlowPage from ".."; +import { TabsContext } from "../../../contexts/tabsContext"; +import TabComponent from "./tabComponent"; var _ = require("lodash"); -export function TabsManager(){ - const {flows,addFlow,tabIndex,setTabIndex} = useContext(TabsContext); - useEffect(()=>{ - if(flows.length===0){ - addFlow({name:"untitled",flow:null,id:_.uniqueId()}) - addFlow({name:"untitle",flow:null,id:_.uniqueId()}) - } - },[]) - - return( -
-
- {flows.map((flow,index)=>{ - return(
setTabIndex(index)}>{flow.name}
) - })} -
-
- {flows.map((flow,index)=>{ - return( -
- - -
- ) - })} -
-
- ) +export function TabsManager() { + const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); + useEffect(() => { + if (flows.length === 0) { + addFlow({ name: "untitled", data: null, id: _.uniqueId() }); + addFlow({ name: "untitle", data: null, id: _.uniqueId() }); + } + }, []); + + useEffect(() => { + // Do something when the tabIndex or flow state changes + // For example, log a message to the console + console.log("Tab index or flow state changed"); + }, [tabIndex, flows]); + + return ( +
+
+ {flows.map((flow, index) => { + return ( + +
setTabIndex(index)}>{flow.name}
+ + ); + })} +
+
+ + + +
+
+ ); } /* diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 6024bcde9..0497378ee 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/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 [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [nodes, setNodes, onNodesChange] = useNodesState(flow?.data?.nodes || []); + 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(); @@ -129,7 +145,6 @@ export default function FlowPage() { return (
- -
); } From 0b5414cfd3f42b7b93ebb7c63d4487e32ef4775a Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 22 Feb 2023 17:48:37 -0300 Subject: [PATCH 09/25] removed bouncing effect --- .../src/pages/FlowPage/flowManager/index.tsx | 18 +----------------- space_flow/src/pages/FlowPage/index.tsx | 5 +++++ 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 22ff57a3e..3b68bff78 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -15,12 +15,6 @@ export function TabsManager() { } }, []); - useEffect(() => { - // Do something when the tabIndex or flow state changes - // For example, log a message to the console - console.log("Tab index or flow state changed"); - }, [tabIndex, flows]); - return (
@@ -34,19 +28,9 @@ export function TabsManager() {
- +
); } - -/* -tabs initial logic -TO DO -- create a context with the tabs control so tabs can be changed inside the flow -- create a logic to save tabs and flow state for multitabs and each flow inside each tab -- think about the save logic and how to implement it the best way -- define what each tab will need to show and how it will be displayed - -*/ diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 0497378ee..d791a122c 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -56,6 +56,11 @@ export default function FlowPage({flow}) { } },[nodes,edges]) + useEffect(()=>{ + setNodes(flow?.data?.nodes || []) + setEdges(flow?.data?.edges || []) + },[flow]) + useEffect(() => { setExtraComponent(); setExtraNavigation({ title: "Nodes" }); From 41e5052da17a093425b9ddfca061f0ee04ddf0f6 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 22 Feb 2023 18:18:45 -0300 Subject: [PATCH 10/25] delete tabs working --- space_flow/src/contexts/tabsContext.tsx | 27 ++++++++++++---- .../src/pages/FlowPage/flowManager/index.tsx | 5 ++- .../flowManager/tabComponent/index.tsx | 32 ++++++++++++------- space_flow/src/pages/FlowPage/index.tsx | 2 +- 4 files changed, 45 insertions(+), 21 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index fb8de09f7..fbe5a3d0d 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -6,7 +6,7 @@ type TabsContextType={ tabIndex:number; setTabIndex:(index:number)=>void; flows:Array - removeFlow:(index:number)=>void; + removeFlow:(id:string)=>void; addFlow:(newFlow:flow)=>void; updateFlow:(newFLow:flow)=>void; } @@ -15,7 +15,7 @@ const TabsContextInitialValue = { tabIndex : 0, setTabIndex:(index:number)=>{}, flows:[], - removeFlow:(index:number)=>{}, + removeFlow:(id:string)=>{}, addFlow:(newFlow:flow)=>{}, updateFlow:(newFLow:flow)=>{} @@ -27,11 +27,24 @@ export const TabsContext = createContext(TabsContextInitialValu export function TabsProvider({children}){ const [tabIndex,setTabIndex] = useState(0) const [flows,setFlows] = useState>([]) - function removeFlow(index:number){ - let newFlows = flows - newFlows.splice(index,1) - window.sessionStorage.setItem('tabs',JSON.stringify(newFlows)) - setFlows(newFlows) + function removeFlow(id:string){ + setFlows(prevState=>{ + const newFlows = [...prevState]; + const index = newFlows.findIndex(flow=>flow.id===id) + if(index!==-1){ + newFlows.splice(index,1) + } + if(index===tabIndex){ + if(tabIndex===0){ + // + } + else{ + setTabIndex(tabIndex-1) + } + } + window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); + return newFlows; + }) } function addFlow(newFlow: flow) { setFlows(prevState => { diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 3b68bff78..0a64e67f2 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -1,3 +1,4 @@ +import { PlusIcon } from "@heroicons/react/24/outline"; import { useContext, useEffect, useState } from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import { ReactFlowProvider } from "reactflow"; @@ -19,12 +20,14 @@ export function TabsManager() {
{flows.map((flow, index) => { + console.log(tabIndex) return ( - +
setTabIndex(index)}>{flow.name}
 ); })} +
addFlow({ name: "untitled", data: null, id: _.uniqueId() })} className="cursor-pointer">
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 57aa71e01..60708c762 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -1,16 +1,24 @@ import { XMarkIcon } from "@heroicons/react/24/solid"; +import { useContext } from "react"; +import { TabsContext } from "../../../../contexts/tabsContext"; import { classNames } from "../../../../utils"; -type tabProps = { - name:string; +export default function TabComponent({ children, selected, id }) { + const { removeFlow, flows } = useContext(TabsContext); + return ( +
+ {children} + {flows.length > 1 && ( + removeFlow(id)} + > + )} +
+ ); } - - -export default function TabComponent({children,selected}){ - return( -
- {children} - -
- ) -} \ No newline at end of file diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index d791a122c..b7329156a 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -50,7 +50,7 @@ export default function FlowPage({flow}) { setViewport(flow.data.viewport) } useEffect(()=>{ - if(reactFlowInstance){ + if(reactFlowInstance && flow){ flow.data =reactFlowInstance.toObject() updateFlow(flow) } From f8d8e42aad0af2f800c21259743687df0531b5c8 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Wed, 22 Feb 2023 18:25:54 -0300 Subject: [PATCH 11/25] set better name aproach to tabs for now --- space_flow/src/pages/FlowPage/flowManager/index.tsx | 13 ++++++++----- .../FlowPage/flowManager/tabComponent/index.tsx | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 0a64e67f2..55c01389d 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -9,10 +9,11 @@ var _ = require("lodash"); export function TabsManager() { const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); + const [inputMode,setInputMode] = useState(false) useEffect(() => { if (flows.length === 0) { - addFlow({ name: "untitled", data: null, id: _.uniqueId() }); - addFlow({ name: "untitle", data: null, id: _.uniqueId() }); + const id = _.uniqueId() + addFlow({ name: "flow "+id, data: null, id }); } }, []); @@ -22,12 +23,14 @@ export function TabsManager() { {flows.map((flow, index) => { console.log(tabIndex) return ( - -
setTabIndex(index)}>{flow.name}
+ setTabIndex(index)} selected={index === tabIndex} key={index} id={flow.id}> +
setInputMode(true)}>{flow.name}
 ); })} -
addFlow({ name: "untitled", data: null, id: _.uniqueId() })} className="cursor-pointer">
+
{ + const id = _.uniqueId() + addFlow({ name: "flow"+id, data: null, id})}} className="cursor-pointer">
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 60708c762..2d37e50ec 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -3,10 +3,10 @@ import { useContext } from "react"; import { TabsContext } from "../../../../contexts/tabsContext"; import { classNames } from "../../../../utils"; -export default function TabComponent({ children, selected, id }) { +export default function TabComponent({ children, selected, id, onClick}) { const { removeFlow, flows } = useContext(TabsContext); return ( -
Date: Wed, 22 Feb 2023 18:49:22 -0300 Subject: [PATCH 12/25] saving viewport position --- space_flow/src/pages/FlowPage/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index b7329156a..b3bd00539 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -44,11 +44,15 @@ export default function FlowPage({flow}) { const [nodes, setNodes, onNodesChange] = useNodesState(flow?.data?.nodes || []); const [edges, setEdges, onEdgesChange] = useEdgesState(flow?.data?.edges || []); const [reactFlowInstance, setReactFlowInstance] = useState(null); - const { setViewport } = useReactFlow(); + const { setViewport} = useReactFlow(); + + + useEffect(()=>{ + if(flow?.data && reactFlowInstance){ + setViewport(flow.data.viewport) + } + },[nodes,edges,flow,]) - if(flow?.data && reactFlowInstance){ - setViewport(flow.data.viewport) - } useEffect(()=>{ if(reactFlowInstance && flow){ flow.data =reactFlowInstance.toObject() @@ -152,6 +156,7 @@ export default function FlowPage({flow}) {
updateFlow({...flow,data:reactFlowInstance.toObject()})} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChangeMod} From 1f9fe951fe3a7ce0db2ce28cd3d93c165310ae28 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 22 Feb 2023 23:05:45 -0300 Subject: [PATCH 13/25] Tabs styled and function added --- space_flow/src/App.tsx | 2 - space_flow/src/contexts/index.tsx | 5 ++- .../src/pages/FlowPage/flowManager/index.tsx | 2 +- .../flowManager/tabComponent/index.tsx | 43 +++++++++++-------- 4 files changed, 30 insertions(+), 22 deletions(-) diff --git a/space_flow/src/App.tsx b/space_flow/src/App.tsx index 634e63318..32b87e72f 100644 --- a/space_flow/src/App.tsx +++ b/space_flow/src/App.tsx @@ -110,9 +110,7 @@ export default function App() {
{/* Primary column */}
- -
diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index 6eba87762..c4a22cad6 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -1,6 +1,7 @@ import { AlertProvider } from "./alertContext"; import { LocationProvider } from "./locationContext"; import PopUpProvider from "./popUpContext"; +import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; export default function ContextWrapper({ children }) { @@ -9,7 +10,9 @@ export default function ContextWrapper({ children }) { - {children} + + {children} + diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 55c01389d..ce978a2a4 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -1,10 +1,10 @@ -import { PlusIcon } from "@heroicons/react/24/outline"; import { useContext, useEffect, useState } from "react"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import { ReactFlowProvider } from "reactflow"; import FlowPage from ".."; import { TabsContext } from "../../../contexts/tabsContext"; import TabComponent from "./tabComponent"; +import { PlusIcon } from '@heroicons/react/24/outline'; var _ = require("lodash"); export function TabsManager() { diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 2d37e50ec..b19dd03c4 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -1,24 +1,31 @@ -import { XMarkIcon } from "@heroicons/react/24/solid"; +import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid"; import { useContext } from "react"; import { TabsContext } from "../../../../contexts/tabsContext"; import { classNames } from "../../../../utils"; -export default function TabComponent({ children, selected, id, onClick}) { +export default function TabComponent({ selected, flow, id, onClick}) { const { removeFlow, flows } = useContext(TabsContext); return ( -
- {children} - {flows.length > 1 && ( - removeFlow(id)} - > - )} -
- ); -} + <> + {flow ? ( + selected ? ( + + ) : ( +
+ {flow.name} +
+ ) + ) : ( +
+ +
+ )} + + )} \ No newline at end of file From 96ae8916d5b489db1daa9d5ec00a376e6763113f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 22 Feb 2023 23:05:53 -0300 Subject: [PATCH 14/25] Correction for merge --- .../src/pages/FlowPage/flowManager/index.tsx | 70 +++++++++++-------- .../flowManager/tabComponent/index.tsx | 42 +++++++---- 2 files changed, 69 insertions(+), 43 deletions(-) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index ce978a2a4..925a75f3e 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -4,39 +4,47 @@ import { ReactFlowProvider } from "reactflow"; import FlowPage from ".."; import { TabsContext } from "../../../contexts/tabsContext"; import TabComponent from "./tabComponent"; -import { PlusIcon } from '@heroicons/react/24/outline'; +import { PlusIcon } from "@heroicons/react/24/outline"; var _ = require("lodash"); export function TabsManager() { - const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); - const [inputMode,setInputMode] = useState(false) - useEffect(() => { - if (flows.length === 0) { - const id = _.uniqueId() - addFlow({ name: "flow "+id, data: null, id }); - } - }, []); + const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); + useEffect(() => { + if (flows.length === 0) { + const id = _.uniqueId(); + addFlow({ name: "flow " + id, data: null, id }); + } + }, []); - return ( -
-
- {flows.map((flow, index) => { - console.log(tabIndex) - return ( - setTabIndex(index)} selected={index === tabIndex} key={index} id={flow.id}> -
setInputMode(true)}>{flow.name}
- - ); - })} -
{ - const id = _.uniqueId() - addFlow({ name: "flow"+id, data: null, id})}} className="cursor-pointer">
-
-
- - - -
-
- ); + return ( +
+
+ {flows.map((flow, index) => { + console.log(tabIndex); + return ( + setTabIndex(index)} + selected={index === tabIndex} + key={index} + flow={flow} + /> + ); + })} + { + const id = _.uniqueId(); + addFlow({ name: "flow" + id, data: null, id }); + }} + selected={false} + key={0} + flow={null} + /> +
+
+ + + +
+
+ ); } diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index b19dd03c4..3cdaf6b8b 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -1,31 +1,49 @@ import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid"; import { useContext } from "react"; import { TabsContext } from "../../../../contexts/tabsContext"; -import { classNames } from "../../../../utils"; -export default function TabComponent({ selected, flow, id, onClick}) { - const { removeFlow, flows } = useContext(TabsContext); - return ( - <> +export default function TabComponent({ selected, flow, onClick }) { + const { removeFlow } = useContext(TabsContext); + return ( + <> {flow ? ( - selected ? ( - + +
) : ( -
+
{flow.name} +
) ) : (
-
)} - )} \ No newline at end of file + ); +} From bfbb44a2d1eb2d6c0b954bf6cd8ac0b9be41fcfe Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Wed, 22 Feb 2023 23:26:52 -0300 Subject: [PATCH 15/25] Rename logic done --- space_flow/src/contexts/tabsContext.tsx | 1 + .../flowManager/tabComponent/index.tsx | 41 ++++++++++++++++--- 2 files changed, 37 insertions(+), 5 deletions(-) diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index fbe5a3d0d..4e72dc86f 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -59,6 +59,7 @@ export function TabsProvider({children}){ const index = newFlows.findIndex(flow=>flow.id===newFlow.id) if(index!==-1){ newFlows[index].data = newFlow.data + newFlows[index].name = newFlow.name } window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); return newFlows; diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx index 3cdaf6b8b..6db56e043 100644 --- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx @@ -1,15 +1,19 @@ import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid"; -import { useContext } from "react"; +import { useContext, useRef, useState } from "react"; import { TabsContext } from "../../../../contexts/tabsContext"; +var _ = require("lodash"); + export default function TabComponent({ selected, flow, onClick }) { - const { removeFlow } = useContext(TabsContext); + const { removeFlow, updateFlow } = useContext(TabsContext); + const [isRename, setIsRename] = useState(false); + const [value, setValue] = useState(""); return ( <> {flow ? ( !selected ? (
{flow.name} @@ -23,8 +27,35 @@ export default function TabComponent({ selected, flow, onClick }) {
) : ( -
- {flow.name} +
+ {isRename ? ( + { + setIsRename(false); + if (value !== "") { + let newFlow = _.cloneDeep(flow); + newFlow.name = value; + updateFlow(newFlow); + } + }} + value={value} + onChange={(e) => { + setValue(e.target.value); + }} + /> + ) : ( + { + setIsRename(true); + setValue(flow.name); + }} + > + {flow.name} + + )}
) : ( -
+
{isRename ? ( - +
) ) : ( -
+
)} diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index b3bd00539..38544d576 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -51,7 +51,7 @@ export default function FlowPage({flow}) { if(flow?.data && reactFlowInstance){ setViewport(flow.data.viewport) } - },[nodes,edges,flow,]) + },[nodes, edges, flow, reactFlowInstance, setViewport]) useEffect(()=>{ if(reactFlowInstance && flow){ From 45d6f8e56980144f6e7774d8c9576e0589f4a571 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 23 Feb 2023 01:28:24 -0300 Subject: [PATCH 18/25] Implemented tabs storage, only working if current tab is empty --- space_flow/package-lock.json | 45 +++++++++++++++++++ space_flow/package.json | 1 + .../components/parameterComponent/index.tsx | 6 ++- space_flow/src/contexts/index.tsx | 21 +++++---- space_flow/src/contexts/tabsContext.tsx | 35 ++++++++++----- space_flow/src/contexts/typesContext.tsx | 10 ++++- .../src/pages/FlowPage/flowManager/index.tsx | 17 +++---- space_flow/src/pages/FlowPage/index.tsx | 32 +++++++------ 8 files changed, 119 insertions(+), 48 deletions(-) diff --git a/space_flow/package-lock.json b/space_flow/package-lock.json index 7d4ffaedd..f850d0ec8 100644 --- a/space_flow/package-lock.json +++ b/space_flow/package-lock.json @@ -23,6 +23,7 @@ "@types/react-dom": "^18.0.10", "axios": "^1.3.2", "react": "^18.2.0", + "react-cookie": "^4.1.1", "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-laag": "^2.0.5", @@ -4212,6 +4213,11 @@ "@types/node": "*" } }, + "node_modules/@types/cookie": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz", + "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==" + }, "node_modules/@types/d3": { "version": "7.4.0", "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz", @@ -4491,6 +4497,15 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz", @@ -14802,6 +14817,19 @@ "node": ">=14" } }, + "node_modules/react-cookie": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-4.1.1.tgz", + "integrity": "sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==", + "dependencies": { + "@types/hoist-non-react-statics": "^3.0.1", + "hoist-non-react-statics": "^3.0.0", + "universal-cookie": "^4.0.0" + }, + "peerDependencies": { + "react": ">= 16.3.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -16832,6 +16860,23 @@ "node": ">=8" } }, + "node_modules/universal-cookie": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz", + "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==", + "dependencies": { + "@types/cookie": "^0.3.3", + "cookie": "^0.4.0" + } + }, + "node_modules/universal-cookie/node_modules/cookie": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz", + "integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", diff --git a/space_flow/package.json b/space_flow/package.json index 28891fac9..4837d084b 100644 --- a/space_flow/package.json +++ b/space_flow/package.json @@ -18,6 +18,7 @@ "@types/react-dom": "^18.0.10", "axios": "^1.3.2", "react": "^18.2.0", + "react-cookie": "^4.1.1", "react-dom": "^18.2.0", "react-icons": "^4.7.1", "react-laag": "^2.0.5", diff --git a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index e733da1b9..1a687eb0b 100644 --- a/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/space_flow/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -5,10 +5,11 @@ import { nodeColors, snakeToNormalCase, } from "../../../../utils"; -import { useEffect, useRef, useState } from "react"; +import { useContext, useEffect, useRef, useState } from "react"; import InputComponent from "../../../../components/inputComponent"; import ToggleComponent from "../../../../components/toggleComponent"; import InputListComponent from "../../../../components/inputListComponent"; +import { typesContext } from "../../../../contexts/typesContext"; export default function ParameterComponent({ left, @@ -37,7 +38,8 @@ export default function ParameterComponent({ }, [data.id, position, updateNodeInternals]); const [enabled, setEnabled] = useState(data.node.template[name]?.value ?? false); - let disabled = data.reactFlowInstance.getEdges().some((e) => (e.sourceHandle === id)); + const {reactFlowInstance} = useContext(typesContext); + let disabled = reactFlowInstance?.getEdges().some((e) => (e.sourceHandle === id)) ?? false; return (
diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index c4a22cad6..c6c94d6dc 100644 --- a/space_flow/src/contexts/index.tsx +++ b/space_flow/src/contexts/index.tsx @@ -1,3 +1,4 @@ +import { CookiesProvider } from "react-cookie"; import { AlertProvider } from "./alertContext"; import { LocationProvider } from "./locationContext"; import PopUpProvider from "./popUpContext"; @@ -7,15 +8,17 @@ import { TypesProvider } from "./typesContext"; export default function ContextWrapper({ children }) { return ( <> - - - - - {children} - - - - + + + + + + {children} + + + + + ); } diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx index 8884e2b56..6dcf32c47 100644 --- a/space_flow/src/contexts/tabsContext.tsx +++ b/space_flow/src/contexts/tabsContext.tsx @@ -1,4 +1,4 @@ -import { createContext, useState } from "react"; +import { createContext, useEffect, useState } from "react"; type flow={name:string,id:string,data:any} @@ -7,8 +7,8 @@ type TabsContextType={ setTabIndex:(index:number)=>void; flows:Array removeFlow:(id:string)=>void; - addFlow:(newFlow:flow)=>void; - updateFlow:(newFLow:flow)=>void; + addFlow:()=>void; + updateFlow:(newFlow:flow)=>void; } const TabsContextInitialValue = { @@ -16,8 +16,8 @@ const TabsContextInitialValue = { setTabIndex:(index:number)=>{}, flows:[], removeFlow:(id:string)=>{}, - addFlow:(newFlow:flow)=>{}, - updateFlow:(newFLow:flow)=>{} + addFlow:()=>{}, + updateFlow:(newFlow:flow)=>{} } @@ -27,6 +27,22 @@ export const TabsContext = createContext(TabsContextInitialValu export function TabsProvider({children}){ const [tabIndex,setTabIndex] = useState(0) const [flows,setFlows] = useState>([]) + const [id, setId] = useState(0); + useEffect(() => { + if(flows.length !== 0) + window.localStorage.setItem('tabsData', JSON.stringify({tabIndex, flows, id})); + }, [flows, id, tabIndex]); + + useEffect(() => { + let cookie = window.localStorage.getItem('tabsData'); + if(cookie){ + let cookieObject = JSON.parse(cookie); + setTabIndex(cookieObject.tabIndex); + setFlows(cookieObject.flows) + setId(cookieObject.id) + } + }, []) + function removeFlow(id:string){ setFlows(prevState=>{ const newFlows = [...prevState]; @@ -42,14 +58,14 @@ export function TabsProvider({children}){ } } - window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); return newFlows; - }) + }); } - function addFlow(newFlow: flow) { + function addFlow() { + let newFlow: flow = {name: "flow"+id, id: id.toString(), data:null} + setId((old) => old+1); setFlows(prevState => { const newFlows = [...prevState, newFlow]; - window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); return newFlows; }); setTabIndex(flows.length); @@ -62,7 +78,6 @@ export function TabsProvider({children}){ newFlows[index].data = newFlow.data newFlows[index].name = newFlow.name } - window.sessionStorage.setItem('tabs', JSON.stringify(newFlows)); return newFlows; }); } diff --git a/space_flow/src/contexts/typesContext.tsx b/space_flow/src/contexts/typesContext.tsx index 37f26a767..557bc474b 100644 --- a/space_flow/src/contexts/typesContext.tsx +++ b/space_flow/src/contexts/typesContext.tsx @@ -1,12 +1,17 @@ -import { createContext, useState } from "react"; +import { ReactEventHandler, createContext, useState } from "react"; +import { ReactFlowInstance } from "reactflow"; type typesContextType= { + reactFlowInstance: ReactFlowInstance; + setReactFlowInstance: any; types: {}; setTypes:(newState:{})=>void; } const initialValue= { + reactFlowInstance: null, + setReactFlowInstance: ()=>{}, types: {}, setTypes:()=>{}, } @@ -15,8 +20,9 @@ export const typesContext = createContext(initialValue); export function TypesProvider({children}){ const [types, setTypes] = useState({}); + const [reactFlowInstance, setReactFlowInstance] = useState(null); return ( - + {children} ) diff --git a/space_flow/src/pages/FlowPage/flowManager/index.tsx b/space_flow/src/pages/FlowPage/flowManager/index.tsx index 18e8551df..998059562 100644 --- a/space_flow/src/pages/FlowPage/flowManager/index.tsx +++ b/space_flow/src/pages/FlowPage/flowManager/index.tsx @@ -9,14 +9,13 @@ export function TabsManager() { const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext); useEffect(() => { if (flows.length === 0) { - const id = _.uniqueId(); - addFlow({ name: "flow " + id, data: null, id }); + addFlow(); } - }, []); + }, [addFlow, flows.length]); return (
-
+
{flows.map((flow, index) => { return ( { - const id = _.uniqueId(); - addFlow({ name: "flow" + id, data: null, id }); + addFlow(); }} selected={false} - key={0} flow={null} />
- + {flows[tabIndex] ? ( + + ) : ( + <> + )}
diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 38544d576..43aebb370 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -19,6 +19,7 @@ import InputNode from "../../CustomNodes/InputNode"; import BooleanNode from "../../CustomNodes/BooleanNode"; import { alertContext } from "../../contexts/alertContext"; import { TabsContext } from "../../contexts/tabsContext"; +import { typesContext } from "../../contexts/typesContext"; const nodeTypes = { genericNode: GenericNode, @@ -31,9 +32,9 @@ const nodeTypes = { var _ = require("lodash"); export default function FlowPage({flow}) { - console.log(flow?.data) const {updateFlow} = useContext(TabsContext) + const {reactFlowInstance, setReactFlowInstance} = useContext(typesContext); const reactFlowWrapper = useRef(null); const getId = () => `dndnode_${_.uniqueId()}`; @@ -41,30 +42,27 @@ export default function FlowPage({flow}) { const { setExtraComponent, setExtraNavigation } = useContext(locationContext); const { setErrorData } = useContext(alertContext); - const [nodes, setNodes, onNodesChange] = useNodesState(flow?.data?.nodes || []); - const [edges, setEdges, onEdgesChange] = useEdgesState(flow?.data?.edges || []); - const [reactFlowInstance, setReactFlowInstance] = useState(null); - const { setViewport} = useReactFlow(); - - - useEffect(()=>{ - if(flow?.data && reactFlowInstance){ - setViewport(flow.data.viewport) - } - },[nodes, edges, flow, reactFlowInstance, setViewport]) + const [nodes, setNodes, onNodesChange] = useNodesState(flow.data?.nodes ?? []); + const [edges, setEdges, onEdgesChange] = useEdgesState(flow.data?.edges ?? []); useEffect(()=>{ if(reactFlowInstance && flow){ - flow.data =reactFlowInstance.toObject() - updateFlow(flow) + flow.data = reactFlowInstance.toObject(); + updateFlow(flow); } },[nodes,edges]) useEffect(()=>{ - setNodes(flow?.data?.nodes || []) - setEdges(flow?.data?.edges || []) + console.log(flow); + setNodes(flow?.data?.nodes ?? []) + setEdges(flow?.data?.edges ?? []) },[flow]) + useEffect(() => { + console.log(nodes); + console.log(edges); + }, [edges, nodes]) + useEffect(() => { setExtraComponent(); setExtraNavigation({ title: "Nodes" }); @@ -133,7 +131,6 @@ export default function FlowPage({flow}) { ...data, id: newId, value: null, - reactFlowInstance, onDelete: () => { setNodes( reactFlowInstance.getNodes().filter((n) => n.id !== newId) @@ -156,6 +153,7 @@ export default function FlowPage({flow}) {
updateFlow({...flow,data:reactFlowInstance.toObject()})} edges={edges} onNodesChange={onNodesChange} From 67e6bcddf7d936ad997d93dd8c878adc108449b2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 23 Feb 2023 11:25:00 -0300 Subject: [PATCH 19/25] Fixed viewport storage --- space_flow/src/pages/FlowPage/index.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 43aebb370..5b5e23f56 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -56,12 +56,10 @@ export default function FlowPage({flow}) { console.log(flow); setNodes(flow?.data?.nodes ?? []) setEdges(flow?.data?.edges ?? []) - },[flow]) - - useEffect(() => { - console.log(nodes); - console.log(edges); - }, [edges, nodes]) + if(reactFlowInstance){ + reactFlowInstance.setViewport(flow?.data?.viewport ?? {x: 1, y: 0, zoom: 1}); + } + },[flow, reactFlowInstance, setEdges, setNodes]) useEffect(() => { setExtraComponent(); @@ -153,7 +151,6 @@ export default function FlowPage({flow}) {
updateFlow({...flow,data:reactFlowInstance.toObject()})} edges={edges} onNodesChange={onNodesChange} From 94577a383c4b68d3b9feb3cb93a5c044c52099a5 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 23 Feb 2023 12:07:36 -0300 Subject: [PATCH 20/25] tab refresh working, but not ideally --- .../src/CustomNodes/GenericNode/index.tsx | 2 + space_flow/src/contexts/index.tsx | 21 ++--- .../extraSidebarComponent/index.tsx | 52 ++++++----- space_flow/src/pages/FlowPage/index.tsx | 92 +++++++++++-------- 4 files changed, 90 insertions(+), 77 deletions(-) diff --git a/space_flow/src/CustomNodes/GenericNode/index.tsx b/space_flow/src/CustomNodes/GenericNode/index.tsx index b7a07e561..6d2c345ae 100644 --- a/space_flow/src/CustomNodes/GenericNode/index.tsx +++ b/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 (
diff --git a/space_flow/src/contexts/index.tsx b/space_flow/src/contexts/index.tsx index c6c94d6dc..c4a22cad6 100644 --- a/space_flow/src/contexts/index.tsx +++ 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 ( <> - - - - - - {children} - - - - - + + + + + {children} + + + + ); } diff --git a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 482695d07..67947c74a 100644 --- a/space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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) => { - 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", - } - ) - ); - }); + getTypes(); }, []); + useEffect(() => { if(data){ setTypes( @@ -51,7 +54,6 @@ export default function ExtraSidebar() { acc[b] = curr; }); }); - // console.log(acc); return acc; }, { diff --git a/space_flow/src/pages/FlowPage/index.tsx b/space_flow/src/pages/FlowPage/index.tsx index 5b5e23f56..5064afb00 100644 --- a/space_flow/src/pages/FlowPage/index.tsx +++ b/space_flow/src/pages/FlowPage/index.tsx @@ -31,10 +31,9 @@ const nodeTypes = { var _ = require("lodash"); -export default function FlowPage({flow}) { - - const {updateFlow} = useContext(TabsContext) - const {reactFlowInstance, setReactFlowInstance} = useContext(typesContext); +export default function FlowPage({ flow }) { + const { updateFlow } = useContext(TabsContext); + const { types, 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 [edges, setEdges, onEdgesChange] = useEdgesState(flow.data?.edges ?? []); + const [nodes, setNodes, onNodesChange] = useNodesState( + flow.data?.nodes ?? [] + ); + const [edges, setEdges, onEdgesChange] = useEdgesState( + flow.data?.edges ?? [] + ); - useEffect(()=>{ - if(reactFlowInstance && flow){ + useEffect(() => { + if (reactFlowInstance && flow) { flow.data = reactFlowInstance.toObject(); updateFlow(flow); } - },[nodes,edges]) + }, [nodes, edges]); - useEffect(()=>{ - console.log(flow); - setNodes(flow?.data?.nodes ?? []) - setEdges(flow?.data?.edges ?? []) - if(reactFlowInstance){ - reactFlowInstance.setViewport(flow?.data?.viewport ?? {x: 1, y: 0, zoom: 1}); + useEffect(() => { + setNodes(flow?.data?.nodes ?? []); + setEdges(flow?.data?.edges ?? []); + if (reactFlowInstance) { + reactFlowInstance.setViewport( + flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 } + ); } - },[flow, reactFlowInstance, setEdges, setNodes]) + }, [flow, reactFlowInstance, setEdges, setNodes]); useEffect(() => { setExtraComponent(); @@ -111,19 +115,19 @@ export default function FlowPage({flow}) { y: event.clientY - reactflowBounds.top, }); let newId = getId(); - + 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 (
- updateFlow({...flow,data:reactFlowInstance.toObject()})} - edges={edges} - onNodesChange={onNodesChange} - onEdgesChange={onEdgesChangeMod} - onConnect={onConnect} - onLoad={setReactFlowInstance} - onInit={setReactFlowInstance} - nodeTypes={nodeTypes} - connectionLineComponent={connection} - onDragOver={onDragOver} - onDrop={onDrop} - > - - - - + {Object.keys(types).length > 4 ? ( + <> + + updateFlow({ ...flow, data: reactFlowInstance.toObject() }) + } + edges={edges} + onNodesChange={onNodesChange} + onEdgesChange={onEdgesChangeMod} + onConnect={onConnect} + onLoad={setReactFlowInstance} + onInit={setReactFlowInstance} + nodeTypes={nodeTypes} + connectionLineComponent={connection} + onDragOver={onDragOver} + onDrop={onDrop} + > + + + + + + ) : ( + <> + )}
); } From 298882182891928fa87ac67e3ce67cae5c98371f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Thu, 23 Feb 2023 12:21:59 -0300 Subject: [PATCH 21/25] delete logic changed to work even after page refresh --- .../src/CustomNodes/BooleanNode/index.tsx | 4 +-- .../src/CustomNodes/GenericNode/index.tsx | 5 ++-- .../src/CustomNodes/InputNode/index.tsx | 4 +-- space_flow/src/contexts/typesContext.tsx | 9 ++++++- .../extraSidebarComponent/index.tsx | 26 +------------------ space_flow/src/pages/FlowPage/index.tsx | 7 +---- 6 files changed, 16 insertions(+), 39 deletions(-) diff --git a/space_flow/src/CustomNodes/BooleanNode/index.tsx b/space_flow/src/CustomNodes/BooleanNode/index.tsx index 98dc6aa5a..448333427 100644 --- a/space_flow/src/CustomNodes/BooleanNode/index.tsx +++ b/space_flow/src/CustomNodes/BooleanNode/index.tsx @@ -8,7 +8,7 @@ import { typesContext } from "../../contexts/typesContext"; export default function BooleanNode({ data }) { const [enabled, setEnabled] = useState(false); - const {types} = useContext(typesContext); + const {types, deleteNode} = useContext(typesContext); return (
@@ -21,7 +21,7 @@ export default function BooleanNode({ data }) {
-
diff --git a/space_flow/src/CustomNodes/InputNode/index.tsx b/space_flow/src/CustomNodes/InputNode/index.tsx index da08583b4..51c92bb1e 100644 --- a/space_flow/src/CustomNodes/InputNode/index.tsx +++ b/space_flow/src/CustomNodes/InputNode/index.tsx @@ -12,7 +12,7 @@ import Tooltip from "../../components/TooltipComponent"; import { typesContext } from "../../contexts/typesContext"; export default function InputNode({ data }) { - const {types} = useContext(typesContext); + const {types, deleteNode} = useContext(typesContext); return (
@@ -38,7 +38,7 @@ export default function InputNode({ data }) {