jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

working but with bouncing effect because of the refresh

Browse source
This commit is contained in:
anovazzi1 2023-02-22 16:52:01 -03:00
commit 5eadf4c5d5
3 changed files with 75 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

20
space_flow/src/contexts/tabsContext.tsx
View file

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

72
space_flow/src/pages/FlowPage/flowManager/index.tsx
View file

@ -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(
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center">
{flows.map((flow,index)=>{
return(<TabComponent selected={index===tabIndex} key={index}><div onClick={()=>setTabIndex(index)}>{flow.name}</div></TabComponent>)
})}
</div>
<div className='w-full h-full'>
{flows.map((flow,index)=>{
return(
<div key={index} className={'w-full h-full'} style={{display:index!==tabIndex?"none":""}}>
<FlowPage></FlowPage>
</div>
)
})}
</div>
</div>
)
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 (
<div className="h-full w-full flex flex-col">
<div className="w-full flex pr-2 flex-row text-center items-center">
{flows.map((flow, index) => {
return (
<TabComponent selected={index === tabIndex} key={index}>
<div onClick={() => setTabIndex(index)}>{flow.name}</div>
</TabComponent>
);
})}
</div>
<div className="w-full h-full">
<ReactFlowProvider>
<FlowPage key={flows[tabIndex]?.id} flow={flows[tabIndex]}></FlowPage>
</ReactFlowProvider>
</div>
</div>
);
}
/*

24
space_flow/src/pages/FlowPage/index.tsx
View file

@ -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(<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>
);
}